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

package/dist/kepler-gl.d.ts

@@ -25,10 +25,26 @@ export declare const isViewportDisjointed: (props: any) => any;
 type MapStateProps = {
     mapState: MapState;
 };
-export declare const mapStateSelector: ((state: MapStateProps, index?: number | undefined) => MapState) & import("reselect").OutputSelectorFields<(args_0: MapState, args_1: number | undefined) => MapState, {
-    clearCache: () => void;
-}> & {
+export declare const mapStateSelector: ((state: MapStateProps, index?: number | undefined) => MapState) & {
     clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: MapState, resultFuncArgs_1: number | undefined) => MapState;
+    memoizedResultFunc: ((resultFuncArgs_0: MapState, resultFuncArgs_1: number | undefined) => MapState) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => MapState;
+    dependencies: [(props: MapStateProps) => MapState, (_: MapStateProps, index?: number) => number | undefined];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const mapFieldsSelector: (props: KeplerGLProps, index?: number) => {
     getMapboxRef: (() => React.RefObject<any>) | undefined;
@@ -52,6 +68,7 @@ export declare const mapFieldsSelector: (props: KeplerGLProps, index?: number) =
     mapControls: import("@kepler.gl/types").MapControls;
     readOnly: boolean;
     locale: string;
+    uiTheme: string;
     isLoadingIndicatorVisible: boolean;
     sidePanelWidth: number;
     topMapContainerProps: object | undefined;
@@ -67,6 +84,7 @@ export declare const sidePanelSelector: (props: KeplerGLProps, availableProvider
     version: string;
     appWebsite: any;
     mapStyle: import("@kepler.gl/reducers").MapStyle;
+    mapState: MapState;
     onSaveMap: (() => void) | undefined;
     uiState: import("@kepler.gl/types").UiState;
     mapStyleActions: typeof MapStyleActions;
@@ -76,7 +94,7 @@ export declare const sidePanelSelector: (props: KeplerGLProps, availableProvider
     datasets: any;
     filters: import("@kepler.gl/types").Filter[];
     layers: import("@kepler.gl/layers").Layer[];
-    layerOrder: string[];
+    layerOrder: import("@kepler.gl/types").LayerOrder;
     layerClasses: {
         point: typeof import("@kepler.gl/layers/dist/point-layer/point-layer").default;
         arc: typeof import("@kepler.gl/layers/dist/arc-layer/arc-layer").default;
@@ -91,6 +109,8 @@ export declare const sidePanelSelector: (props: KeplerGLProps, availableProvider
         "3D": typeof import("@kepler.gl/layers").ScenegraphLayer;
         trip: typeof import("@kepler.gl/layers/dist/trip-layer/trip-layer").default;
         s2: typeof import("@kepler.gl/layers/dist/s2-geometry-layer/s2-geometry-layer").default;
+        a5: typeof import("@kepler.gl/layers/dist/a5-layer/a5-layer").default;
+        geohash: typeof import("@kepler.gl/layers/dist/geohash-layer/geohash-layer").default;
         flow: typeof import("@kepler.gl/layers/dist/flow-layer/flow-layer").default;
         vectorTile: typeof import("@kepler.gl/layers").VectorTileLayer;
         rasterTile: typeof import("@kepler.gl/layers").RasterTileLayer;
@@ -142,6 +162,7 @@ export declare const plotContainerSelector: (props: KeplerGLProps) => {
         mapControls: import("@kepler.gl/types").MapControls;
         readOnly: boolean;
         locale: string;
+        uiTheme: string;
         isLoadingIndicatorVisible: boolean;
         sidePanelWidth: number;
         topMapContainerProps: object | undefined;
@@ -206,7 +227,7 @@ export declare const geoCoderPanelSelector: (props: KeplerGLProps, dimensions: {
     mapboxApiAccessToken: string;
     mapState: MapState;
     uiState: import("@kepler.gl/types").UiState;
-    layerOrder: string[];
+    layerOrder: import("@kepler.gl/types").LayerOrder;
     updateVisData: typeof VisStateActions.updateVisData;
     removeDataset: typeof VisStateActions.removeDataset;
     updateMap: (viewport: Viewport, mapIndex?: number) => import("@kepler.gl/types").Merge<MapStateActions.UpdateMapUpdaterAction, {
@@ -218,26 +239,120 @@ export declare const geoCoderPanelSelector: (props: KeplerGLProps, dimensions: {
 /**
  * Returns array of unique dataset attributions, each with title and url properties.
  */
-export declare const datasetAttributionSelector: ((state: any) => DatasetAttribution[]) & import("reselect").OutputSelectorFields<(args_0: any) => DatasetAttribution[], {
-    clearCache: () => void;
-}> & {
+export declare const datasetAttributionSelector: ((state: any) => DatasetAttribution[]) & {
     clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: any) => DatasetAttribution[];
+    memoizedResultFunc: ((resultFuncArgs_0: any) => DatasetAttribution[]) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => DatasetAttribution[];
+    dependencies: [(state: any) => any];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const layerAttributionSelector: ((state: any) => AttributionWithStyle[]) & import("reselect").OutputSelectorFields<(args_0: any, args_1: string) => AttributionWithStyle[], {
-    clearCache: () => void;
-}> & {
+export declare const layerAttributionSelector: ((state: any) => AttributionWithStyle[]) & {
     clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: any, resultFuncArgs_1: string) => AttributionWithStyle[];
+    memoizedResultFunc: ((resultFuncArgs_0: any, resultFuncArgs_1: string) => AttributionWithStyle[]) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => AttributionWithStyle[];
+    dependencies: [(state: any) => any, (state: any) => string];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const attributionSelector: ((state: any) => {
     sources: DatasetAttribution[];
     logos: AttributionWithStyle[];
-}) & import("reselect").OutputSelectorFields<(args_0: DatasetAttribution[], args_1: AttributionWithStyle[]) => {
-    sources: DatasetAttribution[];
-    logos: AttributionWithStyle[];
-}, {
-    clearCache: () => void;
-}> & {
+}) & {
     clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: DatasetAttribution[], resultFuncArgs_1: AttributionWithStyle[]) => {
+        sources: DatasetAttribution[];
+        logos: AttributionWithStyle[];
+    };
+    memoizedResultFunc: ((resultFuncArgs_0: DatasetAttribution[], resultFuncArgs_1: AttributionWithStyle[]) => {
+        sources: DatasetAttribution[];
+        logos: AttributionWithStyle[];
+    }) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => {
+        sources: DatasetAttribution[];
+        logos: AttributionWithStyle[];
+    };
+    dependencies: [((state: any) => DatasetAttribution[]) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    } & {
+        resultFunc: (resultFuncArgs_0: any) => DatasetAttribution[];
+        memoizedResultFunc: ((resultFuncArgs_0: any) => DatasetAttribution[]) & {
+            clearCache: () => void;
+            resultsCount: () => number;
+            resetResultsCount: () => void;
+        };
+        lastResult: () => DatasetAttribution[];
+        dependencies: [(state: any) => any];
+        recomputations: () => number;
+        resetRecomputations: () => void;
+        dependencyRecomputations: () => number;
+        resetDependencyRecomputations: () => void;
+    } & {
+        argsMemoize: typeof import("reselect").weakMapMemoize;
+        memoize: typeof import("reselect").weakMapMemoize;
+    }, ((state: any) => AttributionWithStyle[]) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    } & {
+        resultFunc: (resultFuncArgs_0: any, resultFuncArgs_1: string) => AttributionWithStyle[];
+        memoizedResultFunc: ((resultFuncArgs_0: any, resultFuncArgs_1: string) => AttributionWithStyle[]) & {
+            clearCache: () => void;
+            resultsCount: () => number;
+            resetResultsCount: () => void;
+        };
+        lastResult: () => AttributionWithStyle[];
+        dependencies: [(state: any) => any, (state: any) => string];
+        recomputations: () => number;
+        resetRecomputations: () => void;
+        dependencyRecomputations: () => number;
+        resetDependencyRecomputations: () => void;
+    } & {
+        argsMemoize: typeof import("reselect").weakMapMemoize;
+        memoize: typeof import("reselect").weakMapMemoize;
+    }];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const notificationPanelSelector: (props: KeplerGLProps) => {
     removeNotification: (id: UIStateActions.RemoveNotificationUpdaterAction["payload"]) => import("@kepler.gl/types").Merge<UIStateActions.RemoveNotificationUpdaterAction, {
@@ -376,16 +491,46 @@ export declare function makeGetActionCreators(): ((state: any, props: any) => {
     uiStateActions: any;
     providerActions: any;
     dispatch: any;
-}) & import("reselect").OutputSelectorFields<(args_0: any, args_1: any) => {
-    visStateActions: any;
-    mapStateActions: any;
-    mapStyleActions: any;
-    uiStateActions: any;
-    providerActions: any;
-    dispatch: any;
-}, {
-    clearCache: () => void;
-}> & {
+}) & {
     clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: any, resultFuncArgs_1: any) => {
+        visStateActions: any;
+        mapStateActions: any;
+        mapStyleActions: any;
+        uiStateActions: any;
+        providerActions: any;
+        dispatch: any;
+    };
+    memoizedResultFunc: ((resultFuncArgs_0: any, resultFuncArgs_1: any) => {
+        visStateActions: any;
+        mapStateActions: any;
+        mapStyleActions: any;
+        uiStateActions: any;
+        providerActions: any;
+        dispatch: any;
+    }) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => {
+        visStateActions: any;
+        mapStateActions: any;
+        mapStyleActions: any;
+        uiStateActions: any;
+        providerActions: any;
+        dispatch: any;
+    };
+    dependencies: [(dispatch: any) => any, (dispatch: any, props: any) => any];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
 };
 export default KeplerGlFactory;

package/dist/loading-indicator.d.ts

@@ -4,12 +4,13 @@ type StyledContainerProps = {
     $left: number;
     $bottomOffset: number;
 };
-export declare const StyledContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledContainerProps>>;
+export declare const StyledContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledContainerProps> & StyledContainerProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledContainerProps> & StyledContainerProps, never>>> & string;
 type LoadingIndicatorProps = {
     isVisible?: boolean;
     activeSidePanel?: boolean;
     sidePanelWidth?: number;
     hasAttributionLogos?: boolean;
+    hasMapScale?: boolean;
 };
 declare const _default: React.FC<PropsWithChildren<LoadingIndicatorProps>>;
 export default _default;

package/dist/map/attribution.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { AttributionWithStyle, DatasetAttribution } from '@kepler.gl/types';
+import { BaseMapLibraryConfig } from '@kepler.gl/utils';
+import type { GlobeAttribution } from '@kepler.gl/deckgl-layers';
+type MapLibLogoProps = {
+    baseMapLibraryConfig: BaseMapLibraryConfig;
+};
+export declare const MapLibLogo: ({ baseMapLibraryConfig }: MapLibLogoProps) => React.JSX.Element;
+export declare const DatasetAttributions: ({ datasetAttributions, isPalm }: {
+    datasetAttributions: DatasetAttribution[];
+    isPalm: boolean;
+}) => React.JSX.Element;
+type AttributionProps = {
+    showBaseMapLibLogo: boolean;
+    basemapAttributions?: string[];
+    datasetAttributions: DatasetAttribution[];
+    baseMapLibraryConfig: BaseMapLibraryConfig;
+    globeAttributions?: GlobeAttribution[];
+};
+/**
+ * Parse a basemap attribution HTML string into safe React nodes. Only anchor
+ * tags with http(s)/mailto hrefs become links; everything else is rendered as
+ * plain text. This avoids dangerouslySetInnerHTML while preserving the links
+ * custom basemap styles (e.g. OpenFreeMap) declare in their attribution.
+ *
+ * Uses the browser's DOMParser (inert: scripts don't run and no resources are
+ * fetched) so nested tags, `>` inside attributes, unusual quoting, and HTML
+ * entities are all handled correctly. Falls back to plain text where no DOM is
+ * available (e.g. SSR).
+ */
+export declare function renderBasemapAttribution(html: string, keyPrefix: string): React.ReactNode[];
+/**
+ * Drop attributions whose providers are already fully represented by a single
+ * earlier (kept) attribution. Order is preserved, and the longer/more complete
+ * strings tend to come first from the sources so they survive. This collapses
+ * near-duplicates such as a standalone "© OpenStreetMap" when a CARTO string
+ * that already links OpenStreetMap is present.
+ *
+ * Subsumption is checked against each kept attribution *individually* (never a
+ * merged union), so an entry is only dropped when some single earlier entry
+ * fully covers it. This avoids false positives where two unrelated providers'
+ * tokens together happen to cover a distinct third provider.
+ */
+export declare function dedupeBasemapAttributions(attributions: string[]): string[];
+export declare const Attribution: React.FC<AttributionProps>;
+type AttributionLogosProps = {
+    logos: AttributionWithStyle[];
+    activeSidePanel?: boolean;
+    sidePanelWidth?: number;
+};
+export declare const AttributionLogos: React.FC<AttributionLogosProps>;
+export {};

package/dist/map/layer-hover-info.d.ts

@@ -4,9 +4,13 @@ import PropTypes from 'prop-types';
 import { Layer } from '@kepler.gl/layers';
 import { LayerHoverProp } from '@kepler.gl/reducers';
 import { VisState } from '@kepler.gl/schemas';
-export declare const StyledLayerName: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "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>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>, keyof React.Component<any, {}, any>>;
+export declare const StyledLayerName: 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>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, never>>> & string;
 export type EntryInfoProps = Merge<LayerHoverProp, {
     fieldsToShow: TooltipField[];
 }>;

package/dist/map/locale-panel.d.ts

@@ -11,6 +11,6 @@ export type LocalePanelProps = {
 };
 declare function LocalePanelFactory(MapControlTooltip: ReturnType<typeof MapControlTooltipFactory>, MapControlToolbar: ReturnType<typeof MapControlToolbarFactory>): React.FC<LocalePanelProps>;
 declare namespace LocalePanelFactory {
-    var deps: (typeof MapControlTooltipFactory | typeof MapControlToolbarFactory)[];
+    var deps: (typeof MapControlToolbarFactory | typeof MapControlTooltipFactory)[];
 }
 export default LocalePanelFactory;

package/dist/map/map-control-toolbar.d.ts

@@ -1,15 +1,40 @@
-import { BaseComponentProps } from '../types';
-declare function MapControlToolbar(): import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").FastOmit<{
+declare function MapControlToolbar(): 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<import("styled-components").FastOmit<import("../common/toolbar").ToolbarProps, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, keyof import("react").HTMLAttributes<unknown> | "$show"> & {
+    $show?: boolean;
+} & import("react").HTMLAttributes<unknown> & {
+    children?: import("react").ReactNode | undefined;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("../common/toolbar").ToolbarProps, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, keyof import("react").HTMLAttributes<unknown> | "$show"> & {
     $show?: boolean;
 } & import("react").HTMLAttributes<unknown> & {
     children?: import("react").ReactNode | undefined;
+}, never>>, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, keyof import("react").HTMLAttributes<unknown>> & import("react").HTMLAttributes<unknown> & {
+    children?: import("react").ReactNode | undefined;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("../common/toolbar").ToolbarProps, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
 }, keyof import("react").HTMLAttributes<unknown> | "$show"> & {
     $show?: boolean;
 } & import("react").HTMLAttributes<unknown> & {
     children?: import("react").ReactNode | undefined;
-}, BaseComponentProps>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<{
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("../common/toolbar").ToolbarProps, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, keyof import("react").HTMLAttributes<unknown> | "$show"> & {
     $show?: boolean;
 } & import("react").HTMLAttributes<unknown> & {
     children?: import("react").ReactNode | undefined;
-}, import("../common/toolbar").ToolbarProps>> & Omit<import("styled-components").IStyledComponent<"web", import("../common/toolbar").ToolbarProps>, keyof import("react").Component<any, {}, any>>, keyof import("react").Component<any, {}, any>>;
+}, never>>, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, keyof import("react").HTMLAttributes<unknown>> & import("react").HTMLAttributes<unknown> & {
+    children?: import("react").ReactNode | undefined;
+}, never>>> & string;
 export default MapControlToolbar;

package/dist/map/map-control.d.ts

@@ -1,15 +1,16 @@
 import React from 'react';
 import SplitMapButtonFactory from './split-map-button';
 import Toggle3dButtonFactory from './toggle-3d-button';
-import LayerSelectorPanelFactory from './layer-selector-panel';
 import MapLegendPanelFactory from './map-legend-panel';
 import MapDrawPanelFactory from './map-draw-panel';
 import LocalePanelFactory from './locale-panel';
+import ThemeToggleButtonFactory from './theme-toggle-button';
 import MapNavigationControlFactory from './map-navigation-control';
 import { Layer } from '@kepler.gl/layers';
-import { Editor, LayerVisConfig, MapControls, MapState } from '@kepler.gl/types';
+import { Editor, LayerVisConfig, LayerOrder, MapControls, MapState } from '@kepler.gl/types';
 import { Datasets } from '@kepler.gl/table';
 import { MapStateActions, UIStateActions } from '@kepler.gl/actions';
+import { MapViewMode } from '@kepler.gl/constants';
 import AnnotationControlFactory from './annotations/annotation-control';
 export type MapControlProps = {
     datasets: Datasets;
@@ -17,13 +18,17 @@ export type MapControlProps = {
     isSplit: boolean;
     primary: boolean;
     layers: Layer[];
+    layerOrder?: LayerOrder;
     layersToRender: {
         [key: string]: boolean;
     };
     mapIndex: number;
     mapControls: MapControls;
     onTogglePerspective: () => void;
+    onSetMapViewMode?: (mode: MapViewMode) => void;
+    mapViewMode?: MapViewMode;
     onToggleSplitMap: typeof MapStateActions.toggleSplitMap;
+    onSetMapSplitMode?: typeof MapStateActions.setMapSplitMode;
     onToggleSplitMapViewport: ({ isViewportSynced, isZoomLocked }: {
         isViewportSynced: boolean;
         isZoomLocked: boolean;
@@ -32,12 +37,15 @@ export type MapControlProps = {
     onToggleMapControl: (control: string) => void;
     onSetEditorMode: (mode: string) => void;
     onToggleEditorVisibility: () => void;
+    onConvertEditorFeaturesToLayer?: () => void;
     onLayerVisConfigChange: (oldLayer: Layer, newVisConfig: Partial<LayerVisConfig>) => void;
     onToggleLayerVisibility?: (layer: Layer) => void;
     top: number;
     onSetLocale: typeof UIStateActions.setLocale;
+    onSetTheme: typeof UIStateActions.setTheme;
     availableLocales: string[];
     locale: string;
+    themeName?: string;
     logoComponent?: React.FC | React.ReactNode;
     isExport?: boolean;
     setMapControlSettings: typeof UIStateActions.setMapControlSettings;
@@ -52,11 +60,17 @@ export type MapControlProps = {
     editor: Editor;
     actionComponents?: React.ComponentType<any>[];
     mapHeight?: number;
+    splitMaps?: {
+        layers: {
+            [key: string]: boolean;
+        };
+    }[];
+    onToggleLayerForMap?: (mapIndex: number, layerId: string) => void;
 };
-declare function MapControlFactory(SplitMapButton: ReturnType<typeof SplitMapButtonFactory>, Toggle3dButton: ReturnType<typeof Toggle3dButtonFactory>, LayerSelectorPanel: ReturnType<typeof LayerSelectorPanelFactory>, MapLegendPanel: ReturnType<typeof MapLegendPanelFactory>, MapDrawPanel: ReturnType<typeof MapDrawPanelFactory>, LocalePanel: ReturnType<typeof LocalePanelFactory>, AnnotationControl: ReturnType<typeof AnnotationControlFactory>, MapNavigationControl: ReturnType<typeof MapNavigationControlFactory>): React.FC<MapControlProps> & {
+declare function MapControlFactory(SplitMapButton: ReturnType<typeof SplitMapButtonFactory>, Toggle3dButton: ReturnType<typeof Toggle3dButtonFactory>, MapLegendPanel: ReturnType<typeof MapLegendPanelFactory>, MapDrawPanel: ReturnType<typeof MapDrawPanelFactory>, LocalePanel: ReturnType<typeof LocalePanelFactory>, ThemeToggleButton: ReturnType<typeof ThemeToggleButtonFactory>, AnnotationControl: ReturnType<typeof AnnotationControlFactory>, MapNavigationControl: ReturnType<typeof MapNavigationControlFactory>): React.FC<MapControlProps> & {
     defaultActionComponents: MapControlProps["actionComponents"];
 };
 declare namespace MapControlFactory {
-    var deps: (typeof MapNavigationControlFactory | typeof SplitMapButtonFactory | typeof Toggle3dButtonFactory | typeof LayerSelectorPanelFactory | typeof MapLegendPanelFactory | typeof MapDrawPanelFactory | typeof LocalePanelFactory | typeof AnnotationControlFactory)[];
+    var deps: (typeof MapNavigationControlFactory | typeof SplitMapButtonFactory | typeof Toggle3dButtonFactory | typeof MapLegendPanelFactory | typeof MapDrawPanelFactory | typeof LocalePanelFactory | typeof ThemeToggleButtonFactory | typeof AnnotationControlFactory)[];
 }
 export default MapControlFactory;

package/dist/map/map-draw-panel.d.ts

@@ -9,12 +9,13 @@ export type MapDrawPanelProps = {
     onToggleMapControl: (control: string) => void;
     onSetEditorMode: (mode: string) => void;
     onToggleEditorVisibility: () => void;
+    onConvertEditorFeaturesToLayer?: () => void;
     actionIcons: {
         [id: string]: React.ComponentType<Partial<BaseProps>>;
     };
 };
 declare function MapDrawPanelFactory(MapControlTooltip: ReturnType<typeof MapControlTooltipFactory>, MapControlToolbar: ReturnType<typeof MapControlToolbarFactory>): React.FC<MapDrawPanelProps>;
 declare namespace MapDrawPanelFactory {
-    var deps: (typeof MapControlTooltipFactory | typeof MapControlToolbarFactory)[];
+    var deps: (typeof MapControlToolbarFactory | typeof MapControlTooltipFactory)[];
 }
 export default MapDrawPanelFactory;

package/dist/map/map-legend-panel.d.ts

@@ -1,7 +1,7 @@
 import React, { ComponentType } from 'react';
 import { ActionHandler, toggleSplitMapViewport } from '@kepler.gl/actions';
 import { Layer } from '@kepler.gl/layers';
-import { LayerVisConfig, MapControls, MapState } from '@kepler.gl/types';
+import { LayerVisConfig, LayerOrder, MapControls, MapState } from '@kepler.gl/types';
 import { MapLegendControlSettings } from '@kepler.gl/types';
 import MapControlPanelFactory from './map-control-panel';
 import MapControlTooltipFactory from './map-control-tooltip';
@@ -17,6 +17,7 @@ interface MapLegendPanelIcons {
 export type MapLegendPanelProps = {
     theme: any;
     layers: ReadonlyArray<Layer>;
+    layerOrder?: LayerOrder;
     scale: number;
     onToggleMapControl: (control: string) => void;
     isExport: boolean;
@@ -34,10 +35,18 @@ export type MapLegendPanelProps = {
     isSidePanelShown: boolean;
     activeSidePanel: string | null;
     setMapControlSettings: any;
+    isSplit?: boolean;
+    splitMaps?: {
+        layers: {
+            [key: string]: boolean;
+        };
+    }[];
+    onToggleLayerForMap?: (mapIndex: number, layerId: string) => void;
+    mapIndex?: number;
 };
 type MapLegendPanelComponentType = React.FC<MapLegendPanelProps>;
 declare function MapLegendPanelFactory(MapControlTooltip: ReturnType<typeof MapControlTooltipFactory>, MapControlPanel: ReturnType<typeof MapControlPanelFactory>, MapLegend: ReturnType<typeof MapLegendFactory>): MapLegendPanelComponentType;
 declare namespace MapLegendPanelFactory {
-    var deps: (typeof MapControlPanelFactory | typeof MapControlTooltipFactory | typeof MapLegendFactory)[];
+    var deps: (typeof MapControlTooltipFactory | typeof MapLegendFactory | typeof MapControlPanelFactory)[];
 }
 export default MapLegendPanelFactory;

package/dist/map/map-legend.d.ts

@@ -1,13 +1,13 @@
 import React, { FC, ComponentType } from 'react';
 import ColorLegendFactory, { LegendRowFactory } from '../common/color-legend';
 import { Layer, LayerBaseConfig, VisualChannel, VisualChannelDescription } from '@kepler.gl/layers';
-import { LayerVisConfig, MapState, RGBColor } from '@kepler.gl/types';
+import { LayerVisConfig, LayerOrder, MapState, RGBColor } from '@kepler.gl/types';
 import PanelHeaderActionFactory from '../side-panel/panel-header-action';
 interface StyledMapControlLegendProps {
     width?: number;
     $last?: boolean;
 }
-export declare const StyledMapControlLegend: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledMapControlLegendProps>>;
+export declare const StyledMapControlLegend: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledMapControlLegendProps> & StyledMapControlLegendProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledMapControlLegendProps> & StyledMapControlLegendProps, never>>> & string;
 export declare const VisualChannelMetric: ({ name }: {
     name: any;
 }) => React.JSX.Element;
@@ -58,6 +58,15 @@ export type LayerLegendHeaderProps = {
     };
     isExport?: boolean;
     onToggleLayerVisibility?: (layer: Layer) => void;
+    isSplit?: boolean;
+    splitMaps?: {
+        layers: {
+            [key: string]: boolean;
+        };
+    }[];
+    onMapToggleLayer?: (mapIndex: number, layerId: string) => void;
+    isExpanded?: boolean;
+    onToggleExpanded?: () => void;
 };
 export declare function LayerLegendHeaderFactory(): React.FC<LayerLegendHeaderProps>;
 export type LayerLegendContentProps = {
@@ -75,6 +84,7 @@ export declare namespace LayerLegendContentFactory {
 }
 export type MapLegendProps = {
     layers?: ReadonlyArray<Layer>;
+    layerOrder?: LayerOrder;
     width?: number;
     mapState?: MapState;
     options?: {
@@ -84,6 +94,13 @@ export type MapLegendProps = {
     isExport?: boolean;
     onLayerVisConfigChange?: (oldLayer: Layer, newVisConfig: Partial<LayerVisConfig>) => void;
     onToggleLayerVisibility?: (layer: Layer) => void;
+    onMapToggleLayer?: (mapIndex: number, layerId: string) => void;
+    isSplit?: boolean;
+    splitMaps?: {
+        layers: {
+            [key: string]: boolean;
+        };
+    }[];
     actionIcons?: MapLegendIcons;
 };
 declare function MapLegendFactory(LayerLegendHeader: ReturnType<typeof LayerLegendHeaderFactory>, LayerLegendContent: ReturnType<typeof LayerLegendContentFactory>): React.FC<MapLegendProps>;

package/dist/map/map-scale.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { MapState } from '@kepler.gl/types';
+export type MapScaleProps = {
+    mapState: MapState;
+    mapIndex?: number;
+};
+declare function MapScaleFactory(): React.NamedExoticComponent<MapScaleProps>;
+declare namespace MapScaleFactory {
+    var deps: any[];
+}
+export default MapScaleFactory;

package/dist/map/split-map-button.d.ts

@@ -1,6 +1,8 @@
 import React, { ComponentType } from 'react';
 import MapControlTooltipFactory from './map-control-tooltip';
-import { MapControls } from '@kepler.gl/types';
+import MapControlToolbarFactory from './map-control-toolbar';
+import { MapControls, MapState } from '@kepler.gl/types';
+import { MapSplitMode } from '@kepler.gl/constants';
 interface SplitMapButtonIcons {
     delete: ComponentType<any>;
     split: ComponentType<any>;
@@ -9,12 +11,17 @@ export type SplitMapButtonProps = {
     isSplit: boolean;
     mapIndex: number;
     onToggleSplitMap: (index?: number) => void;
+    onSetMapSplitMode?: (payload: {
+        mapSplitMode: MapSplitMode;
+    }) => void;
+    onToggleMapControl?: (control: string) => void;
     actionIcons: SplitMapButtonIcons;
     readOnly: boolean;
     mapControls: MapControls;
+    mapState?: MapState;
 };
-declare function SplitMapButtonFactory(MapControlTooltip: any): React.NamedExoticComponent<SplitMapButtonProps>;
+declare function SplitMapButtonFactory(MapControlTooltip: ReturnType<typeof MapControlTooltipFactory>, MapControlToolbar: ReturnType<typeof MapControlToolbarFactory>): React.NamedExoticComponent<SplitMapButtonProps>;
 declare namespace SplitMapButtonFactory {
-    var deps: (typeof MapControlTooltipFactory)[];
+    var deps: (typeof MapControlToolbarFactory | typeof MapControlTooltipFactory)[];
 }
 export default SplitMapButtonFactory;