@sqlrooms/kepler 0.26.1-rc.7 → 0.27.0-rc.1

package/dist/components/CustomMapLegend.d.ts

@@ -0,0 +1,7 @@
+import { LayerLegendContentFactory, LayerLegendHeaderFactory } from '@kepler.gl/components';
+import { MapLegendProps } from '@kepler.gl/components/dist/map/map-legend';
+export declare function CustomMapLegendFactory(LayerLegendHeader: ReturnType<typeof LayerLegendHeaderFactory>, LayerLegendContent: ReturnType<typeof LayerLegendContentFactory>): import("react").FC<MapLegendProps>;
+export declare namespace CustomMapLegendFactory {
+    var deps: (typeof LayerLegendHeaderFactory | typeof LayerLegendContentFactory)[];
+}
+//# sourceMappingURL=CustomMapLegend.d.ts.map

package/dist/components/CustomMapLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomMapLegend.d.ts","sourceRoot":"","sources":["../../src/components/CustomMapLegend.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,yBAAyB,EACzB,wBAAwB,EACzB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,cAAc,EAAC,MAAM,2CAA2C,CAAC;AAgCzE,wBAAgB,sBAAsB,CACpC,iBAAiB,EAAE,UAAU,CAAC,OAAO,wBAAwB,CAAC,EAC9D,kBAAkB,EAAE,UAAU,CAAC,OAAO,yBAAyB,CAAC,sCAgKjE;yBAlKe,sBAAsB"}

package/dist/components/CustomMapLegend.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-License-Identifier: MIT
+// Copyright contributors to the kepler.gl project
+import { layerConfigChange, toggleMapControl } from '@kepler.gl/actions';
+import { KeplerGlContext, LayerLegendContentFactory, LayerLegendHeaderFactory, } from '@kepler.gl/components';
+import { DIMENSIONS } from '@kepler.gl/constants';
+import { Button } from '@sqlrooms/ui';
+import { ArrowDown, ArrowRight, ChevronDownIcon, ChevronRightIcon, EyeIcon, EyeOffIcon, XIcon, } from 'lucide-react';
+import { useCallback, useContext, useRef, useState, } from 'react';
+import { useStoreWithKepler } from '../KeplerSlice';
+const defaultActionIcons = {
+    expanded: ArrowDown,
+    collapsed: ArrowRight,
+};
+CustomMapLegendFactory.deps = [
+    LayerLegendHeaderFactory,
+    LayerLegendContentFactory,
+];
+export function CustomMapLegendFactory(LayerLegendHeader, LayerLegendContent) {
+    const MapLegend = ({ layers = [], width, ...restProps }) => {
+        const containerW = width || DIMENSIONS.mapControl.width;
+        const mapId = useContext(KeplerGlContext).id;
+        const dispatchAction = useStoreWithKepler((state) => state.kepler.dispatchAction);
+        const handleClose = (evt) => {
+            evt.stopPropagation();
+            dispatchAction(mapId, toggleMapControl('mapLegend', 0));
+        };
+        return (_jsx("div", { className: "map-legend", style: { width: containerW }, children: _jsxs("div", { className: "relative flex flex-col", children: [_jsxs("div", { className: "border-muted bg-background sticky top-0 flex w-full items-center justify-between border-b p-2", children: [_jsx("div", { className: "text-xs font-medium", children: "Map Layers" }), _jsx(Button, { variant: "ghost", size: "xs", className: "h-6 w-6", onClick: handleClose, children: _jsx(XIcon, { className: "h-4 w-4" }) })] }), _jsx("div", { className: "flex w-full flex-1 flex-col items-center", children: layers.map((layer, index) => {
+                            return (_jsx(LayerLegendItem, { layer: layer, containerW: containerW, ...restProps }, index));
+                        }) })] }) }));
+    };
+    const LayerLegendItem = ({ layer, containerW, isExport, mapState, disableEdit, onLayerVisConfigChange, }) => {
+        const [isExpanded, setIsExpanded] = useState(layer.config.isVisible);
+        const dispatchAction = useStoreWithKepler((state) => state.kepler.dispatchAction);
+        const scrollIntoView = useCallback(() => {
+            requestAnimationFrame(() => {
+                containerRef.current?.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                    inline: 'nearest',
+                });
+            });
+        }, []);
+        const handleToggleExpanded = (evt) => {
+            evt.stopPropagation();
+            const nextExpanded = !isExpanded;
+            setIsExpanded(nextExpanded);
+            if (!isExpanded) {
+                scrollIntoView();
+            }
+        };
+        const mapId = useContext(KeplerGlContext).id;
+        const containerRef = useRef(null);
+        const handleToggleVisibility = (evt) => {
+            evt.stopPropagation();
+            const nextVisible = !layer.config.isVisible;
+            dispatchAction(mapId, layerConfigChange(layer, { isVisible: nextVisible }));
+        };
+        if (!layer.isValidToSave() || layer.config.hidden) {
+            return null;
+        }
+        if (isExport && !layer.config.isVisible) {
+            return null;
+        }
+        return (_jsxs("div", { ref: containerRef, className: "border-muted flex w-full flex-col items-center border-b", children: [_jsx("style", { children: `.legend--layer__item .panel--header__action { display: none !important; }` }), _jsxs("div", { className: "flex w-full flex-row items-center gap-2", onClick: handleToggleExpanded, children: [_jsx("div", { className: "cursor-pointer select-none items-center overflow-hidden text-ellipsis whitespace-nowrap p-2 text-xs", children: layer.config.label }), _jsx("div", { className: "flex-1" }), _jsxs("div", { className: "flex flex-row items-center justify-end gap-1", children: [_jsx(Button, { className: "h-7 w-7", variant: "ghost", size: "icon", onClick: handleToggleVisibility, children: layer.config.isVisible ? (_jsx(EyeIcon, { className: "h-4 w-4" })) : (_jsx(EyeOffIcon, { className: "h-4 w-4" })) }), _jsx(Button, { className: "h-7 w-7", variant: "ghost", size: "icon", onClick: handleToggleExpanded, children: isExpanded ? (_jsx(ChevronDownIcon, { className: "h-4 w-4" })) : (_jsx(ChevronRightIcon, { className: "h-4 w-4" })) })] })] }), isExpanded && (_jsx("div", { className: "w-full px-[8px] py-[5px] text-xs", children: _jsx(LayerLegendContent, { containerW: containerW, layer: layer, mapState: mapState, disableEdit: disableEdit, isExport: isExport, onLayerVisConfigChange: onLayerVisConfigChange, actionIcons: defaultActionIcons }) }))] }));
+    };
+    MapLegend.displayName = 'MapLegend';
+    return MapLegend;
+}
+//# sourceMappingURL=CustomMapLegend.js.map

package/dist/components/CustomMapLegend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomMapLegend.js","sourceRoot":"","sources":["../../src/components/CustomMapLegend.tsx"],"names":[],"mappings":"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","sourcesContent":["// SPDX-License-Identifier: MIT\n// Copyright contributors to the kepler.gl project\n\nimport {layerConfigChange, toggleMapControl} from '@kepler.gl/actions';\nimport {\n  KeplerGlContext,\n  LayerLegendContentFactory,\n  LayerLegendHeaderFactory,\n} from '@kepler.gl/components';\nimport {MapLegendProps} from '@kepler.gl/components/dist/map/map-legend';\nimport {DIMENSIONS} from '@kepler.gl/constants';\nimport {Layer} from '@kepler.gl/layers';\nimport {Button} from '@sqlrooms/ui';\nimport {\n  ArrowDown,\n  ArrowRight,\n  ChevronDownIcon,\n  ChevronRightIcon,\n  EyeIcon,\n  EyeOffIcon,\n  XIcon,\n} from 'lucide-react';\nimport {\n  MouseEventHandler,\n  useCallback,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\nimport {useStoreWithKepler} from '../KeplerSlice';\n\nconst defaultActionIcons = {\n  expanded: ArrowDown,\n  collapsed: ArrowRight,\n};\n\nCustomMapLegendFactory.deps = [\n  LayerLegendHeaderFactory,\n  LayerLegendContentFactory,\n];\n\nexport function CustomMapLegendFactory(\n  LayerLegendHeader: ReturnType<typeof LayerLegendHeaderFactory>,\n  LayerLegendContent: ReturnType<typeof LayerLegendContentFactory>,\n) {\n  const MapLegend: React.FC<MapLegendProps> = ({\n    layers = [],\n    width,\n    ...restProps\n  }) => {\n    const containerW = width || DIMENSIONS.mapControl.width;\n    const mapId = useContext(KeplerGlContext).id;\n    const dispatchAction = useStoreWithKepler(\n      (state) => state.kepler.dispatchAction,\n    );\n    const handleClose = (evt: React.MouseEvent<HTMLButtonElement>) => {\n      evt.stopPropagation();\n      dispatchAction(mapId, toggleMapControl('mapLegend', 0));\n    };\n\n    return (\n      <div className=\"map-legend\" style={{width: containerW}}>\n        <div className=\"relative flex flex-col\">\n          <div className=\"border-muted bg-background sticky top-0 flex w-full items-center justify-between border-b p-2\">\n            <div className=\"text-xs font-medium\">Map Layers</div>\n            <Button\n              variant=\"ghost\"\n              size=\"xs\"\n              className=\"h-6 w-6\"\n              onClick={handleClose}\n            >\n              <XIcon className=\"h-4 w-4\" />\n            </Button>\n          </div>\n          <div className=\"flex w-full flex-1 flex-col items-center\">\n            {layers.map((layer, index) => {\n              return (\n                <LayerLegendItem\n                  key={index}\n                  layer={layer}\n                  containerW={containerW}\n                  {...restProps}\n                />\n              );\n            })}\n          </div>\n        </div>\n      </div>\n    );\n  };\n\n  const LayerLegendItem = ({\n    layer,\n    containerW,\n    isExport,\n    mapState,\n    disableEdit,\n    onLayerVisConfigChange,\n  }: {layer: Layer; containerW: number} & MapLegendProps) => {\n    const [isExpanded, setIsExpanded] = useState(layer.config.isVisible);\n\n    const dispatchAction = useStoreWithKepler(\n      (state) => state.kepler.dispatchAction,\n    );\n    const scrollIntoView = useCallback(() => {\n      requestAnimationFrame(() => {\n        containerRef.current?.scrollIntoView({\n          behavior: 'smooth',\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      });\n    }, []);\n\n    const handleToggleExpanded: MouseEventHandler<HTMLElement> = (evt) => {\n      evt.stopPropagation();\n      const nextExpanded = !isExpanded;\n      setIsExpanded(nextExpanded);\n      if (!isExpanded) {\n        scrollIntoView();\n      }\n    };\n\n    const mapId = useContext(KeplerGlContext).id;\n    const containerRef = useRef<HTMLDivElement>(null);\n    const handleToggleVisibility = (\n      evt: React.MouseEvent<HTMLButtonElement>,\n    ) => {\n      evt.stopPropagation();\n      const nextVisible = !layer.config.isVisible;\n      dispatchAction(mapId, layerConfigChange(layer, {isVisible: nextVisible}));\n    };\n\n    if (!layer.isValidToSave() || layer.config.hidden) {\n      return null;\n    }\n\n    if (isExport && !layer.config.isVisible) {\n      return null;\n    }\n\n    return (\n      <div\n        ref={containerRef}\n        className=\"border-muted flex w-full flex-col items-center border-b\"\n      >\n        <style>{`.legend--layer__item .panel--header__action { display: none !important; }`}</style>\n        <div\n          className=\"flex w-full flex-row items-center gap-2\"\n          onClick={handleToggleExpanded}\n        >\n          <div className=\"cursor-pointer select-none items-center overflow-hidden text-ellipsis whitespace-nowrap p-2 text-xs\">\n            {layer.config.label}\n          </div>\n          <div className=\"flex-1\" />\n          <div className=\"flex flex-row items-center justify-end gap-1\">\n            <Button\n              className=\"h-7 w-7\"\n              variant=\"ghost\"\n              size=\"icon\"\n              onClick={handleToggleVisibility}\n            >\n              {layer.config.isVisible ? (\n                <EyeIcon className=\"h-4 w-4\" />\n              ) : (\n                <EyeOffIcon className=\"h-4 w-4\" />\n              )}\n            </Button>\n            <Button\n              className=\"h-7 w-7\"\n              variant=\"ghost\"\n              size=\"icon\"\n              onClick={handleToggleExpanded}\n            >\n              {isExpanded ? (\n                <ChevronDownIcon className=\"h-4 w-4\" />\n              ) : (\n                <ChevronRightIcon className=\"h-4 w-4\" />\n              )}\n            </Button>\n          </div>\n        </div>\n\n        {isExpanded && (\n          <div className=\"w-full px-[8px] py-[5px] text-xs\">\n            <LayerLegendContent\n              containerW={containerW}\n              layer={layer}\n              mapState={mapState}\n              disableEdit={disableEdit}\n              isExport={isExport}\n              onLayerVisConfigChange={onLayerVisConfigChange}\n              actionIcons={defaultActionIcons}\n            />\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  MapLegend.displayName = 'MapLegend';\n\n  return MapLegend;\n}\n"]}

package/dist/components/CustomMapLegendPanel.d.ts

@@ -0,0 +1,6 @@
+import { MapLegendPanelFactory } from '@kepler.gl/components';
+export declare function CustomMapLegendPanelFactory(...deps: Parameters<typeof MapLegendPanelFactory>): ReturnType<typeof MapLegendPanelFactory>;
+export declare namespace CustomMapLegendPanelFactory {
+    var deps: (typeof import("@kepler.gl/components").MapControlTooltipFactory | typeof import("@kepler.gl/components").MapControlPanelFactory | typeof import("@kepler.gl/components").MapLegendFactory)[];
+}
+//# sourceMappingURL=CustomMapLegendPanel.d.ts.map

package/dist/components/CustomMapLegendPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomMapLegendPanel.d.ts","sourceRoot":"","sources":["../../src/components/CustomMapLegendPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EAEtB,MAAM,uBAAuB,CAAC;AAI/B,wBAAgB,2BAA2B,CACzC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,GAChD,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAY1C;yBAde,2BAA2B"}

package/dist/components/CustomMapLegendPanel.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { MapLegendPanelFactory, } from '@kepler.gl/components';
+CustomMapLegendPanelFactory.deps = MapLegendPanelFactory.deps;
+export function CustomMapLegendPanelFactory(...deps) {
+    const MapLegendPanel = MapLegendPanelFactory(...deps);
+    const CustomMapLegendPanel = (props) => {
+        return (_jsxs(_Fragment, { children: [_jsx("style", { children: `.draggable-legend .map-control__panel-header { display: none !important; }` }), _jsx(MapLegendPanel, { ...props })] }));
+    };
+    CustomMapLegendPanel.displayName = 'CustomMapLegendPanel';
+    return CustomMapLegendPanel;
+}
+//# sourceMappingURL=CustomMapLegendPanel.js.map

package/dist/components/CustomMapLegendPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomMapLegendPanel.js","sourceRoot":"","sources":["../../src/components/CustomMapLegendPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,qBAAqB,GAEtB,MAAM,uBAAuB,CAAC;AAE/B,2BAA2B,CAAC,IAAI,GAAG,qBAAqB,CAAC,IAAI,CAAC;AAE9D,MAAM,UAAU,2BAA2B,CACzC,GAAG,IAA8C;IAEjD,MAAM,cAAc,GAAG,qBAAqB,CAAC,GAAG,IAAI,CAAC,CAAC;IACtD,MAAM,oBAAoB,GAAG,CAAC,KAA0B,EAAE,EAAE;QAC1D,OAAO,CACL,8BACE,0BAAQ,4EAA4E,GAAS,EAC7F,KAAC,cAAc,OAAK,KAAK,GAAI,IAC5B,CACJ,CAAC;IACJ,CAAC,CAAC;IACF,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAC;IAC1D,OAAO,oBAAoB,CAAC;AAC9B,CAAC","sourcesContent":["import {\n  MapLegendPanelFactory,\n  MapLegendPanelProps,\n} from '@kepler.gl/components';\n\nCustomMapLegendPanelFactory.deps = MapLegendPanelFactory.deps;\n\nexport function CustomMapLegendPanelFactory(\n  ...deps: Parameters<typeof MapLegendPanelFactory>\n): ReturnType<typeof MapLegendPanelFactory> {\n  const MapLegendPanel = MapLegendPanelFactory(...deps);\n  const CustomMapLegendPanel = (props: MapLegendPanelProps) => {\n    return (\n      <>\n        <style>{`.draggable-legend .map-control__panel-header { display: none !important; }`}</style>\n        <MapLegendPanel {...props} />\n      </>\n    );\n  };\n  CustomMapLegendPanel.displayName = 'CustomMapLegendPanel';\n  return CustomMapLegendPanel;\n}\n"]}

package/dist/components/CustomMapManager.d.ts

@@ -3,5 +3,5 @@ type CustomMapManagerProps = {
     mapId: string;
 };
 export declare const CustomMapManager: React.FC<CustomMapManagerProps>;
-export default CustomMapManager;
+export {};
 //# sourceMappingURL=CustomMapManager.d.ts.map

package/dist/components/CustomMapManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomMapManager.d.ts","sourceRoot":"","sources":["../../src/components/CustomMapManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAkElD,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAqGF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAkF5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"CustomMapManager.d.ts","sourceRoot":"","sources":["../../src/components/CustomMapManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAkElD,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAqGF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAiF5D,CAAC"}

package/dist/components/CustomMapManager.js

@@ -68,16 +68,10 @@ export const CustomMapManager = ({ mapId }) => {
     const { keplerActions, keplerState } = useKeplerStateActions({ mapId });
     const intl = useIntl();
     const { onShowAddMapStyleModal, onMapStyleChange, onRemoveCustomMapStyle } = useCustomMapActions(keplerActions);
-    if (!keplerState || !keplerActions) {
-        return null;
-    }
-    const { mapStyle } = keplerState;
-    const currentStyle = mapStyle.mapStyles[mapStyle.styleType] || {};
-    const editableLayers = currentStyle.layerGroups || [];
     // Custom map styles actions (for delete functionality)
     const customMapStylesActions = useMemo(() => {
         const actionsPerCustomStyle = {};
-        Object.values(mapStyle.mapStyles)
+        Object.values(keplerState?.mapStyle.mapStyles || {})
             .filter((style) => Boolean(style.custom))
             .forEach((style) => {
             actionsPerCustomStyle[style.id] = [
@@ -90,10 +84,15 @@ export const CustomMapManager = ({ mapId }) => {
             ];
         });
         return actionsPerCustomStyle;
-    }, [mapStyle.mapStyles, onRemoveCustomMapStyle]);
+    }, [keplerState?.mapStyle.mapStyles, onRemoveCustomMapStyle]);
+    if (!keplerState || !keplerActions) {
+        return null;
+    }
+    const { mapStyle } = keplerState;
+    const currentStyle = mapStyle.mapStyles[mapStyle.styleType] || {};
+    const editableLayers = currentStyle.layerGroups || [];
     return (_jsx(CustomMapManagerContainer, { children: _jsxs("div", { className: "map-style-panel", children: [_jsx(SidePanelSection, { children: _jsx(PanelTitle, { className: "map-manager-title", title: intl.formatMessage({
                             id: mapPanelMetadata?.label || 'Base map',
                         }), children: _jsxs(Button, { className: "add-map-style-button", onClick: onShowAddMapStyleModal, children: [_jsx(Add, { height: "12px" }), _jsx("span", { children: intl.formatMessage({ id: 'mapManager.addMapStyle' }) })] }) }) }), _jsxs(SidePanelSection, { children: [_jsx("div", { className: "mb-1", children: _jsx(MapStyleDropdown, { mapStyle: mapStyle, onChange: onMapStyleChange, customMapStylesActions: customMapStylesActions }) }), editableLayers.length ? (_jsx(LayerGroupSelector, { layers: mapStyle.visibleLayerGroups, editableLayers: editableLayers, topLayers: mapStyle.topLayerGroups, onChange: keplerActions.mapStyleActions.mapConfigChange, threeDBuildingColor: mapStyle.threeDBuildingColor, on3dBuildingColorChange: keplerActions.mapStyleActions.set3dBuildingColor, backgroundColor: mapStyle.backgroundColor, onBackgroundColorChange: keplerActions.mapStyleActions.setBackgroundColor })) : null] })] }) }));
 };
-export default CustomMapManager;
 //# sourceMappingURL=CustomMapManager.js.map

package/dist/components/CustomMapManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomMapManager.js","sourceRoot":"","sources":["../../src/components/CustomMapManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport {useIntl} from 'react-intl';\nimport styled from 'styled-components';\n\nimport {\n  LayerGroupSelectorFactory,\n  PanelTitleFactory,\n  SidePanelSection,\n  Button,\n  Icons,\n} from '@kepler.gl/components';\nimport {SIDEBAR_PANELS, ADD_MAP_STYLE_ID} from '@kepler.gl/constants';\nimport {MapStyle} from '@kepler.gl/reducers';\n\nimport {KeplerInjector} from './KeplerInjector';\nimport {\n  KeplerActions,\n  useKeplerStateActions,\n} from '../hooks/useKeplerStateActions';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuCheckboxItem,\n  DropdownMenuTrigger,\n} from '@sqlrooms/ui';\nimport {ChevronDown} from 'lucide-react';\n\n// Get the kepler.gl components through the injector\nconst LayerGroupSelector = KeplerInjector.get(LayerGroupSelectorFactory);\nconst PanelTitle = KeplerInjector.get(PanelTitleFactory);\n\n// Import icons from kepler.gl\nconst {Add, Trash} = Icons;\n\nconst mapPanelMetadata = SIDEBAR_PANELS.find((p) => p.id === 'map');\n\n// Custom styled components for the map manager\nconst CustomMapManagerContainer = styled.div<{isOpen?: boolean}>`\n  .map-style-panel {\n    /* Add your custom styles here */\n  }\n\n  .map-manager-title {\n    /* Custom title styling */\n  }\n\n  .add-map-style-button {\n    background-color: ${(props) =>\n      props.theme.sidePanelBg || props.theme.panelBackground || '#fff'};\n    color: ${(props) =>\n      props.theme.activeColor || props.theme.textColorHl || '#2563EB'};\n    border: 0px;\n    height: 28px;\n    font-weight: 500;\n    font-size: 14px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n\n  .layer-group__header {\n    display: none;\n  }\n`;\n\ntype CustomMapManagerProps = {\n  mapId: string;\n};\n\n// Custom hook for map style actions\nfunction useCustomMapActions(keplerActions: KeplerActions) {\n  const {toggleModal} = keplerActions.uiStateActions;\n  const {mapStyleChange, removeCustomMapStyle} = keplerActions.mapStyleActions;\n\n  const onShowAddMapStyleModal = useCallback(\n    () => toggleModal(ADD_MAP_STYLE_ID),\n    [toggleModal],\n  );\n\n  const onMapStyleChange = useCallback(\n    (styleType: string) => mapStyleChange(styleType),\n    [mapStyleChange],\n  );\n\n  const onRemoveCustomMapStyle = useCallback(\n    (styleId: string) => removeCustomMapStyle({id: styleId}),\n    [removeCustomMapStyle],\n  );\n\n  return {\n    onShowAddMapStyleModal,\n    onMapStyleChange,\n    onRemoveCustomMapStyle,\n  };\n}\n\n// Custom Map Style Dropdown Component\nconst MapStyleDropdown: React.FC<{\n  mapStyle: MapStyle;\n  onChange: (styleType: string) => void;\n  customMapStylesActions?: any;\n}> = ({mapStyle, onChange, customMapStylesActions}) => {\n  const {mapStyles, styleType} = mapStyle;\n  const currentStyle = mapStyles[styleType];\n\n  const handleStyleSelect = (styleId: string) => onChange(styleId);\n  return (\n    <div className=\"w-full\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild className=\"w-full\">\n          <div className=\"border-primary-foreground bg-muted flex min-h-[40px] w-full cursor-pointer items-center justify-between rounded border px-3 py-2 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700\">\n            <div className=\"flex items-center gap-2\">\n              <img\n                className=\"h-6 w-6 rounded-sm object-cover\"\n                src={currentStyle?.icon || ''}\n                alt={currentStyle?.label || 'Map Style'}\n              />\n              <span className=\"text-sm font-medium dark:text-white\">\n                {currentStyle?.label || 'Select Style'}\n              </span>\n            </div>\n            <ChevronDown className=\"h-4 w-4 text-gray-500 dark:text-gray-400\" />\n          </div>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"max-h-64 w-[var(--radix-dropdown-menu-trigger-width)] overflow-y-auto bg-white dark:bg-gray-700\">\n          {Object.values(mapStyles).map((style: any) => (\n            <DropdownMenuCheckboxItem\n              key={style.id}\n              onClick={() => handleStyleSelect(style.id)}\n              className=\"flex cursor-pointer items-center gap-2 bg-white p-2 text-gray-900 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600\"\n            >\n              <img\n                src={style.icon || ''}\n                alt={style.label || 'Untitled'}\n                className=\"h-6 w-6 flex-shrink-0 rounded-sm object-cover\"\n              />\n              <span className=\"flex-1 truncate text-sm\">\n                {style.label || 'Untitled'}\n              </span>\n              {style.custom && customMapStylesActions?.[style.id] && (\n                <div\n                  className=\"flex items-center\"\n                  onClick={(e) => e.stopPropagation()}\n                >\n                  {customMapStylesActions[style.id].map((action: any) => (\n                    <button\n                      key={action.id}\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        action.onClick();\n                      }}\n                      className=\"rounded bg-white p-1 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700\"\n                      title={action.tooltip}\n                    >\n                      <action.IconComponent height=\"16px\" />\n                    </button>\n                  ))}\n                </div>\n              )}\n            </DropdownMenuCheckboxItem>\n          ))}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n};\n\n// Main Custom Map Manager Component\nexport const CustomMapManager: React.FC<CustomMapManagerProps> = ({mapId}) => {\n  const {keplerActions, keplerState} = useKeplerStateActions({mapId});\n  const intl = useIntl();\n\n  const {onShowAddMapStyleModal, onMapStyleChange, onRemoveCustomMapStyle} =\n    useCustomMapActions(keplerActions);\n\n  if (!keplerState || !keplerActions) {\n    return null;\n  }\n\n  const {mapStyle} = keplerState;\n  const currentStyle = mapStyle.mapStyles[mapStyle.styleType] || {};\n  const editableLayers = (currentStyle as any).layerGroups || [];\n\n  // Custom map styles actions (for delete functionality)\n  const customMapStylesActions = useMemo(() => {\n    const actionsPerCustomStyle: any = {};\n    Object.values(mapStyle.mapStyles)\n      .filter((style: any) => Boolean(style.custom))\n      .forEach((style: any) => {\n        actionsPerCustomStyle[style.id] = [\n          {\n            id: `remove-map-style-${style.id}`,\n            IconComponent: Trash,\n            tooltip: 'tooltip.removeBaseMapStyle',\n            onClick: () => onRemoveCustomMapStyle(style.id),\n          },\n        ];\n      });\n    return actionsPerCustomStyle;\n  }, [mapStyle.mapStyles, onRemoveCustomMapStyle]);\n\n  return (\n    <CustomMapManagerContainer>\n      <div className=\"map-style-panel\">\n        <SidePanelSection>\n          <PanelTitle\n            className=\"map-manager-title\"\n            title={intl.formatMessage({\n              id: mapPanelMetadata?.label || 'Base map',\n            })}\n          >\n            <Button\n              className=\"add-map-style-button\"\n              onClick={onShowAddMapStyleModal}\n            >\n              <Add height=\"12px\" />\n              <span>{intl.formatMessage({id: 'mapManager.addMapStyle'})}</span>\n            </Button>\n          </PanelTitle>\n        </SidePanelSection>\n\n        <SidePanelSection>\n          <div className=\"mb-1\">\n            <MapStyleDropdown\n              mapStyle={mapStyle}\n              onChange={onMapStyleChange}\n              customMapStylesActions={customMapStylesActions}\n            />\n          </div>\n\n          {editableLayers.length ? (\n            <LayerGroupSelector\n              layers={mapStyle.visibleLayerGroups}\n              editableLayers={editableLayers}\n              topLayers={mapStyle.topLayerGroups}\n              onChange={keplerActions.mapStyleActions.mapConfigChange}\n              threeDBuildingColor={mapStyle.threeDBuildingColor}\n              on3dBuildingColorChange={\n                keplerActions.mapStyleActions.set3dBuildingColor\n              }\n              backgroundColor={mapStyle.backgroundColor}\n              onBackgroundColorChange={\n                keplerActions.mapStyleActions.setBackgroundColor\n              }\n            />\n          ) : null}\n        </SidePanelSection>\n      </div>\n    </CustomMapManagerContainer>\n  );\n};\n\nexport default CustomMapManager;\n"]}
+{"version":3,"file":"CustomMapManager.js","sourceRoot":"","sources":["../../src/components/CustomMapManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport {useIntl} from 'react-intl';\nimport styled from 'styled-components';\n\nimport {\n  LayerGroupSelectorFactory,\n  PanelTitleFactory,\n  SidePanelSection,\n  Button,\n  Icons,\n} from '@kepler.gl/components';\nimport {SIDEBAR_PANELS, ADD_MAP_STYLE_ID} from '@kepler.gl/constants';\nimport {MapStyle} from '@kepler.gl/reducers';\n\nimport {KeplerInjector} from './KeplerInjector';\nimport {\n  KeplerActions,\n  useKeplerStateActions,\n} from '../hooks/useKeplerStateActions';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuCheckboxItem,\n  DropdownMenuTrigger,\n} from '@sqlrooms/ui';\nimport {ChevronDown} from 'lucide-react';\n\n// Get the kepler.gl components through the injector\nconst LayerGroupSelector = KeplerInjector.get(LayerGroupSelectorFactory);\nconst PanelTitle = KeplerInjector.get(PanelTitleFactory);\n\n// Import icons from kepler.gl\nconst {Add, Trash} = Icons;\n\nconst mapPanelMetadata = SIDEBAR_PANELS.find((p) => p.id === 'map');\n\n// Custom styled components for the map manager\nconst CustomMapManagerContainer = styled.div<{isOpen?: boolean}>`\n  .map-style-panel {\n    /* Add your custom styles here */\n  }\n\n  .map-manager-title {\n    /* Custom title styling */\n  }\n\n  .add-map-style-button {\n    background-color: ${(props) =>\n      props.theme.sidePanelBg || props.theme.panelBackground || '#fff'};\n    color: ${(props) =>\n      props.theme.activeColor || props.theme.textColorHl || '#2563EB'};\n    border: 0px;\n    height: 28px;\n    font-weight: 500;\n    font-size: 14px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n\n  .layer-group__header {\n    display: none;\n  }\n`;\n\ntype CustomMapManagerProps = {\n  mapId: string;\n};\n\n// Custom hook for map style actions\nfunction useCustomMapActions(keplerActions: KeplerActions) {\n  const {toggleModal} = keplerActions.uiStateActions;\n  const {mapStyleChange, removeCustomMapStyle} = keplerActions.mapStyleActions;\n\n  const onShowAddMapStyleModal = useCallback(\n    () => toggleModal(ADD_MAP_STYLE_ID),\n    [toggleModal],\n  );\n\n  const onMapStyleChange = useCallback(\n    (styleType: string) => mapStyleChange(styleType),\n    [mapStyleChange],\n  );\n\n  const onRemoveCustomMapStyle = useCallback(\n    (styleId: string) => removeCustomMapStyle({id: styleId}),\n    [removeCustomMapStyle],\n  );\n\n  return {\n    onShowAddMapStyleModal,\n    onMapStyleChange,\n    onRemoveCustomMapStyle,\n  };\n}\n\n// Custom Map Style Dropdown Component\nconst MapStyleDropdown: React.FC<{\n  mapStyle: MapStyle;\n  onChange: (styleType: string) => void;\n  customMapStylesActions?: any;\n}> = ({mapStyle, onChange, customMapStylesActions}) => {\n  const {mapStyles, styleType} = mapStyle;\n  const currentStyle = mapStyles[styleType];\n\n  const handleStyleSelect = (styleId: string) => onChange(styleId);\n  return (\n    <div className=\"w-full\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild className=\"w-full\">\n          <div className=\"border-primary-foreground bg-muted flex min-h-[40px] w-full cursor-pointer items-center justify-between rounded border px-3 py-2 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700\">\n            <div className=\"flex items-center gap-2\">\n              <img\n                className=\"h-6 w-6 rounded-sm object-cover\"\n                src={currentStyle?.icon || ''}\n                alt={currentStyle?.label || 'Map Style'}\n              />\n              <span className=\"text-sm font-medium dark:text-white\">\n                {currentStyle?.label || 'Select Style'}\n              </span>\n            </div>\n            <ChevronDown className=\"h-4 w-4 text-gray-500 dark:text-gray-400\" />\n          </div>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"max-h-64 w-[var(--radix-dropdown-menu-trigger-width)] overflow-y-auto bg-white dark:bg-gray-700\">\n          {Object.values(mapStyles).map((style: any) => (\n            <DropdownMenuCheckboxItem\n              key={style.id}\n              onClick={() => handleStyleSelect(style.id)}\n              className=\"flex cursor-pointer items-center gap-2 bg-white p-2 text-gray-900 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600\"\n            >\n              <img\n                src={style.icon || ''}\n                alt={style.label || 'Untitled'}\n                className=\"h-6 w-6 flex-shrink-0 rounded-sm object-cover\"\n              />\n              <span className=\"flex-1 truncate text-sm\">\n                {style.label || 'Untitled'}\n              </span>\n              {style.custom && customMapStylesActions?.[style.id] && (\n                <div\n                  className=\"flex items-center\"\n                  onClick={(e) => e.stopPropagation()}\n                >\n                  {customMapStylesActions[style.id].map((action: any) => (\n                    <button\n                      key={action.id}\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        action.onClick();\n                      }}\n                      className=\"rounded bg-white p-1 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700\"\n                      title={action.tooltip}\n                    >\n                      <action.IconComponent height=\"16px\" />\n                    </button>\n                  ))}\n                </div>\n              )}\n            </DropdownMenuCheckboxItem>\n          ))}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n};\n\n// Main Custom Map Manager Component\nexport const CustomMapManager: React.FC<CustomMapManagerProps> = ({mapId}) => {\n  const {keplerActions, keplerState} = useKeplerStateActions({mapId});\n  const intl = useIntl();\n\n  const {onShowAddMapStyleModal, onMapStyleChange, onRemoveCustomMapStyle} =\n    useCustomMapActions(keplerActions);\n\n  // Custom map styles actions (for delete functionality)\n  const customMapStylesActions = useMemo(() => {\n    const actionsPerCustomStyle: any = {};\n    Object.values(keplerState?.mapStyle.mapStyles || {})\n      .filter((style: any) => Boolean(style.custom))\n      .forEach((style: any) => {\n        actionsPerCustomStyle[style.id] = [\n          {\n            id: `remove-map-style-${style.id}`,\n            IconComponent: Trash,\n            tooltip: 'tooltip.removeBaseMapStyle',\n            onClick: () => onRemoveCustomMapStyle(style.id),\n          },\n        ];\n      });\n    return actionsPerCustomStyle;\n  }, [keplerState?.mapStyle.mapStyles, onRemoveCustomMapStyle]);\n  if (!keplerState || !keplerActions) {\n    return null;\n  }\n\n  const {mapStyle} = keplerState;\n  const currentStyle = mapStyle.mapStyles[mapStyle.styleType] || {};\n  const editableLayers = (currentStyle as any).layerGroups || [];\n\n  return (\n    <CustomMapManagerContainer>\n      <div className=\"map-style-panel\">\n        <SidePanelSection>\n          <PanelTitle\n            className=\"map-manager-title\"\n            title={intl.formatMessage({\n              id: mapPanelMetadata?.label || 'Base map',\n            })}\n          >\n            <Button\n              className=\"add-map-style-button\"\n              onClick={onShowAddMapStyleModal}\n            >\n              <Add height=\"12px\" />\n              <span>{intl.formatMessage({id: 'mapManager.addMapStyle'})}</span>\n            </Button>\n          </PanelTitle>\n        </SidePanelSection>\n\n        <SidePanelSection>\n          <div className=\"mb-1\">\n            <MapStyleDropdown\n              mapStyle={mapStyle}\n              onChange={onMapStyleChange}\n              customMapStylesActions={customMapStylesActions}\n            />\n          </div>\n\n          {editableLayers.length ? (\n            <LayerGroupSelector\n              layers={mapStyle.visibleLayerGroups}\n              editableLayers={editableLayers}\n              topLayers={mapStyle.topLayerGroups}\n              onChange={keplerActions.mapStyleActions.mapConfigChange}\n              threeDBuildingColor={mapStyle.threeDBuildingColor}\n              on3dBuildingColorChange={\n                keplerActions.mapStyleActions.set3dBuildingColor\n              }\n              backgroundColor={mapStyle.backgroundColor}\n              onBackgroundColorChange={\n                keplerActions.mapStyleActions.setBackgroundColor\n              }\n            />\n          ) : null}\n        </SidePanelSection>\n      </div>\n    </CustomMapManagerContainer>\n  );\n};\n"]}

package/dist/components/KeplerInjector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KeplerInjector.d.ts","sourceRoot":"","sources":["../../src/components/KeplerInjector.tsx"],"names":[],"mappings":"AA+BA,eAAO,MAAM,cAAc,8CAAiD,CAAC"}
+{"version":3,"file":"KeplerInjector.d.ts","sourceRoot":"","sources":["../../src/components/KeplerInjector.tsx"],"names":[],"mappings":"AAqCA,eAAO,MAAM,cAAc,8CAAiD,CAAC"}

package/dist/components/KeplerInjector.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { appInjector, provideRecipesToInjector, AddDataButtonFactory, PanelTitleFactory, DndContextFactory, FilterPanelHeaderFactory, } from '@kepler.gl/components';
+import { appInjector, provideRecipesToInjector, AddDataButtonFactory, PanelTitleFactory, DndContextFactory, FilterPanelHeaderFactory, MapLegendFactory, MapLegendPanelFactory, } from '@kepler.gl/components';
 import { CustomDndContextFactory } from './CustomDndContext';
 import { CustomFilterPanelHeaderFactory } from './CustomFilterPanelHeader';
+import { CustomMapLegendFactory } from './CustomMapLegend';
+import { CustomMapLegendPanelFactory } from './CustomMapLegendPanel';
 const CustomAddDataButtonFactory = () => {
     return () => null;
 };
@@ -14,6 +16,8 @@ const recipes = [
     [PanelTitleFactory, CustomPanelTitleFactory],
     [DndContextFactory, CustomDndContextFactory],
     [FilterPanelHeaderFactory, CustomFilterPanelHeaderFactory],
+    [MapLegendPanelFactory, CustomMapLegendPanelFactory],
+    [MapLegendFactory, CustomMapLegendFactory],
 ];
 export const KeplerInjector = provideRecipesToInjector(recipes, appInjector);
 //# sourceMappingURL=KeplerInjector.js.map

package/dist/components/KeplerInjector.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeplerInjector.js","sourceRoot":"","sources":["../../src/components/KeplerInjector.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,WAAW,EACX,wBAAwB,EACxB,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EAEjB,wBAAwB,GACzB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAC,uBAAuB,EAAC,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAC,8BAA8B,EAAC,MAAM,2BAA2B,CAAC;AAEzE,MAAM,0BAA0B,GAAG,GAAG,EAAE;IACtC,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,GAAG,EAAE;IACnC,MAAM,UAAU,GAAgC,CAAC,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC,CAC9D,cAAK,SAAS,EAAC,+BAA+B,YAAE,QAAQ,GAAO,CAChE,CAAC;IAEF,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AACF,MAAM,OAAO,GAAG;IACd,CAAC,oBAAoB,EAAE,0BAA0B,CAAC;IAClD,CAAC,iBAAiB,EAAE,uBAAuB,CAAC;IAC5C,CAAC,iBAAiB,EAAE,uBAAuB,CAAC;IAC5C,CAAC,wBAAwB,EAAE,8BAA8B,CAAC;CACnC,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,wBAAwB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC","sourcesContent":["import {\n  appInjector,\n  provideRecipesToInjector,\n  AddDataButtonFactory,\n  PanelTitleFactory,\n  DndContextFactory,\n  Factory,\n  FilterPanelHeaderFactory,\n} from '@kepler.gl/components';\nimport React, {PropsWithChildren} from 'react';\nimport {CustomDndContextFactory} from './CustomDndContext';\nimport {CustomFilterPanelHeaderFactory} from './CustomFilterPanelHeader';\n\nconst CustomAddDataButtonFactory = () => {\n  return () => null;\n};\n\nconst CustomPanelTitleFactory = () => {\n  const PanelTitle: React.FC<PropsWithChildren> = ({children}) => (\n    <div className=\"flex items-center justify-end\">{children}</div>\n  );\n\n  return PanelTitle;\n};\nconst recipes = [\n  [AddDataButtonFactory, CustomAddDataButtonFactory],\n  [PanelTitleFactory, CustomPanelTitleFactory],\n  [DndContextFactory, CustomDndContextFactory],\n  [FilterPanelHeaderFactory, CustomFilterPanelHeaderFactory],\n] as [Factory, Factory][];\n\nexport const KeplerInjector = provideRecipesToInjector(recipes, appInjector);\n"]}
+{"version":3,"file":"KeplerInjector.js","sourceRoot":"","sources":["../../src/components/KeplerInjector.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,WAAW,EACX,wBAAwB,EACxB,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EAEjB,wBAAwB,EACxB,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAC,uBAAuB,EAAC,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAC,8BAA8B,EAAC,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAC,sBAAsB,EAAC,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAC,2BAA2B,EAAC,MAAM,wBAAwB,CAAC;AAEnE,MAAM,0BAA0B,GAAG,GAAG,EAAE;IACtC,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,GAAG,EAAE;IACnC,MAAM,UAAU,GAAgC,CAAC,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC,CAC9D,cAAK,SAAS,EAAC,+BAA+B,YAAE,QAAQ,GAAO,CAChE,CAAC;IAEF,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AACF,MAAM,OAAO,GAAG;IACd,CAAC,oBAAoB,EAAE,0BAA0B,CAAC;IAClD,CAAC,iBAAiB,EAAE,uBAAuB,CAAC;IAC5C,CAAC,iBAAiB,EAAE,uBAAuB,CAAC;IAC5C,CAAC,wBAAwB,EAAE,8BAA8B,CAAC;IAC1D,CAAC,qBAAqB,EAAE,2BAA2B,CAAC;IACpD,CAAC,gBAAgB,EAAE,sBAAsB,CAAC;CACnB,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,wBAAwB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC","sourcesContent":["import {\n  appInjector,\n  provideRecipesToInjector,\n  AddDataButtonFactory,\n  PanelTitleFactory,\n  DndContextFactory,\n  Factory,\n  FilterPanelHeaderFactory,\n  MapLegendFactory,\n  MapLegendPanelFactory,\n} from '@kepler.gl/components';\nimport React, {PropsWithChildren} from 'react';\nimport {CustomDndContextFactory} from './CustomDndContext';\nimport {CustomFilterPanelHeaderFactory} from './CustomFilterPanelHeader';\nimport {CustomMapLegendFactory} from './CustomMapLegend';\nimport {CustomMapLegendPanelFactory} from './CustomMapLegendPanel';\n\nconst CustomAddDataButtonFactory = () => {\n  return () => null;\n};\n\nconst CustomPanelTitleFactory = () => {\n  const PanelTitle: React.FC<PropsWithChildren> = ({children}) => (\n    <div className=\"flex items-center justify-end\">{children}</div>\n  );\n\n  return PanelTitle;\n};\nconst recipes = [\n  [AddDataButtonFactory, CustomAddDataButtonFactory],\n  [PanelTitleFactory, CustomPanelTitleFactory],\n  [DndContextFactory, CustomDndContextFactory],\n  [FilterPanelHeaderFactory, CustomFilterPanelHeaderFactory],\n  [MapLegendPanelFactory, CustomMapLegendPanelFactory],\n  [MapLegendFactory, CustomMapLegendFactory],\n] as [Factory, Factory][];\n\nexport const KeplerInjector = provideRecipesToInjector(recipes, appInjector);\n"]}

package/dist/components/KeplerMapContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KeplerMapContainer.d.ts","sourceRoot":"","sources":["../../src/components/KeplerMapContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,EAAE,EAA6B,MAAM,OAAO,CAAC;AAqJrD,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;CACf,CAMA,CAAC"}
+{"version":3,"file":"KeplerMapContainer.d.ts","sourceRoot":"","sources":["../../src/components/KeplerMapContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,EAAE,EAAuC,MAAM,OAAO,CAAC;AAyK/D,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;CACf,CAMA,CAAC"}

package/dist/components/KeplerMapContainer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useRef, useEffect } from 'react';
+import { useMemo, useRef, useEffect, useState } from 'react';
 import { MapContainerFactory, BottomWidgetFactory, GeocoderPanelFactory, mapFieldsSelector, bottomWidgetSelector, geoCoderPanelSelector, modalContainerSelector, MapViewStateContextProvider, RootContext, ModalContainerFactory, } from '@kepler.gl/components';
-import { useDimensions } from '@kepler.gl/utils';
+import { useDimensions, getAnimatableVisibleLayers } from '@kepler.gl/utils';
 import styled, { useTheme } from 'styled-components';
 import { KeplerInjector } from './KeplerInjector';
 import { KeplerProvider } from './KeplerProvider';
@@ -29,14 +29,25 @@ const CustomWidgetcontainer = styled.div `
   .map-popover {
     z-index: 50;
   }
+
+  /* Remove top margin from Trip layer timeline */
+  .kepler-gl .bottom-widget--container .animation-control-container,
+  .bottom-widget--container .animation-control-container {
+    margin-top: 0 !important;
+  }
 `;
 const KeplerGl = ({ mapId }) => {
     const bottomWidgetRef = useRef(null);
     const [containerRef, size] = useDimensions();
+    const [containerNode, setContainerNode] = useState(null);
     const theme = useTheme();
     const basicKeplerProps = useStoreWithKepler((state) => state.kepler.basicKeplerProps);
     const { keplerActions, keplerState } = useKeplerStateActions({ mapId });
     const interactionConfig = keplerState?.visState?.interactionConfig;
+    // Capture the current container DOM node outside of render logic
+    useEffect(() => {
+        setContainerNode(containerRef.current);
+    }, [containerRef]);
     // Update export image settings when size changes
     useEffect(() => {
         if (size?.width && size?.height) {
@@ -60,11 +71,17 @@ const KeplerGl = ({ mapId }) => {
         size || DEFAULT_DIMENSIONS)
         : null;
     const mapFields = useMemo(() => (keplerState?.visState ? mapFieldsSelector(mergedKeplerProps) : null), [keplerState, mergedKeplerProps]);
-    const bottomWidgetFields = keplerState?.visState.filters?.length
+    // Check if there are filters or animatable layers (e.g., Trip layers)
+    const hasFilters = Boolean(keplerState?.visState.filters?.length);
+    const hasAnimatableLayers = useMemo(() => {
+        const layers = keplerState?.visState?.layers || [];
+        return getAnimatableVisibleLayers(layers).length > 0;
+    }, [keplerState?.visState?.layers]);
+    const bottomWidgetFields = hasFilters || hasAnimatableLayers
         ? bottomWidgetSelector(mergedKeplerProps, theme)
         : null;
     const modalContainerFields = keplerState?.visState
-        ? modalContainerSelector(mergedKeplerProps, containerRef.current)
+        ? modalContainerSelector(mergedKeplerProps, containerNode)
         : null;
     const mapboxApiAccessToken = mapFields?.mapStyle?.mapboxApiAccessToken ||
         basicKeplerProps?.mapboxApiAccessToken;

package/dist/components/KeplerMapContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeplerMapContainer.js","sourceRoot":"","sources":["../../src/components/KeplerMapContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {FC, useMemo, useRef, useEffect} from 'react';\n\nimport {\n  MapContainerFactory,\n  BottomWidgetFactory,\n  GeocoderPanelFactory,\n  mapFieldsSelector,\n  bottomWidgetSelector,\n  geoCoderPanelSelector,\n  modalContainerSelector,\n  MapViewStateContextProvider,\n  RootContext,\n  ModalContainerFactory,\n} from '@kepler.gl/components';\nimport {useDimensions} from '@kepler.gl/utils';\nimport styled, {useTheme} from 'styled-components';\n\nimport {KeplerInjector} from './KeplerInjector';\nimport {KeplerProvider} from './KeplerProvider';\nimport {useKeplerStateActions} from '../hooks/useKeplerStateActions';\nimport {useStoreWithKepler} from '../KeplerSlice';\n\nconst MapContainer = KeplerInjector.get(MapContainerFactory);\nconst BottomWidget = KeplerInjector.get(BottomWidgetFactory);\nconst GeoCoderPanel = KeplerInjector.get(GeocoderPanelFactory);\nconst ModalContainer = KeplerInjector.get(ModalContainerFactory);\n\nconst DEFAULT_DIMENSIONS = {\n  width: 0,\n  height: 0,\n};\nconst KEPLER_PROPS = {\n  mapboxApiUrl: 'https://api.mapbox.com',\n  appName: 'kepler.gl',\n  sidePanelWidth: 0,\n};\n// overide kepler default style\nconst CustomWidgetcontainer = styled.div`\n  .bottom-widget--inner {\n    margin-top: 0;\n  }\n\n  .map-popover {\n    z-index: 50;\n  }\n`;\n\ntype KeplerGLProps = Parameters<typeof geoCoderPanelSelector>[0];\n\nconst KeplerGl: FC<{\n  mapId: string;\n}> = ({mapId}) => {\n  const bottomWidgetRef = useRef(null);\n  const [containerRef, size] = useDimensions<HTMLDivElement>();\n  const theme = useTheme();\n  const basicKeplerProps = useStoreWithKepler(\n    (state) => state.kepler.basicKeplerProps,\n  );\n\n  const {keplerActions, keplerState} = useKeplerStateActions({mapId});\n  const interactionConfig = keplerState?.visState?.interactionConfig;\n\n  // Update export image settings when size changes\n  useEffect(() => {\n    if (size?.width && size?.height) {\n      keplerActions.uiStateActions.setExportImageSetting({\n        mapW: size.width,\n        mapH: size.height,\n      });\n    }\n  }, [size?.width, size?.height, keplerActions.uiStateActions]);\n\n  const mergedKeplerProps = useMemo(() => {\n    return {\n      ...KEPLER_PROPS,\n      ...keplerState,\n      ...keplerActions,\n      id: mapId,\n    } as KeplerGLProps;\n  }, [keplerState, keplerActions, mapId]);\n  const geoCoderPanelFields = keplerState?.visState\n    ? geoCoderPanelSelector(\n        mergedKeplerProps,\n        // dont need height\n        size || DEFAULT_DIMENSIONS,\n      )\n    : null;\n  const mapFields = useMemo(\n    () => (keplerState?.visState ? mapFieldsSelector(mergedKeplerProps) : null),\n    [keplerState, mergedKeplerProps],\n  );\n\n  const bottomWidgetFields = keplerState?.visState.filters?.length\n    ? bottomWidgetSelector(mergedKeplerProps, theme)\n    : null;\n\n  const modalContainerFields = keplerState?.visState\n    ? modalContainerSelector(mergedKeplerProps, containerRef.current)\n    : null;\n\n  const mapboxApiAccessToken =\n    mapFields?.mapStyle?.mapboxApiAccessToken ||\n    basicKeplerProps?.mapboxApiAccessToken;\n  return (\n    <RootContext.Provider value={containerRef}>\n      <CustomWidgetcontainer\n        ref={containerRef}\n        className=\"kepler-gl relative flex h-full w-full flex-col justify-between\"\n      >\n        {mapFields?.mapState ? (\n          <MapViewStateContextProvider mapState={mapFields.mapState}>\n            <MapContainer\n              primary={true}\n              containerId={0}\n              key={0}\n              index={0}\n              {...mapFields}\n              mapboxApiAccessToken={mapboxApiAccessToken}\n            />\n          </MapViewStateContextProvider>\n        ) : null}\n        {interactionConfig?.geocoder?.enabled ? (\n          <GeoCoderPanel\n            {...geoCoderPanelFields}\n            index={0}\n            unsyncedViewports={false}\n            mapboxApiAccessToken={mapboxApiAccessToken}\n          />\n        ) : null}\n        {bottomWidgetFields ? (\n          <BottomWidget\n            rootRef={bottomWidgetRef}\n            {...bottomWidgetFields}\n            theme={theme}\n            containerW={size?.width}\n          />\n        ) : null}\n        {modalContainerFields ? (\n          <ModalContainer\n            {...modalContainerFields}\n            containerW={size?.width}\n            containerH={size?.height}\n          />\n        ) : null}\n      </CustomWidgetcontainer>\n    </RootContext.Provider>\n  );\n};\n\nexport const KeplerMapContainer: FC<{\n  mapId: string;\n}> = ({mapId}) => {\n  return (\n    <KeplerProvider mapId={mapId}>\n      <KeplerGl mapId={mapId} />\n    </KeplerProvider>\n  );\n};\n"]}
+{"version":3,"file":"KeplerMapContainer.js","sourceRoot":"","sources":["../../src/components/KeplerMapContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAK,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE/D,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,qBAAqB,EACrB,sBAAsB,EACtB,2BAA2B,EAC3B,WAAW,EACX,qBAAqB,GACtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAE,0BAA0B,EAAC,MAAM,kBAAkB,CAAC;AAC3E,OAAO,MAAM,EAAE,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAEnD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAC,qBAAqB,EAAC,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAC,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAElD,MAAM,YAAY,GAAG,cAAc,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;AAC7D,MAAM,YAAY,GAAG,cAAc,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;AAC7D,MAAM,aAAa,GAAG,cAAc,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;AAC/D,MAAM,cAAc,GAAG,cAAc,CAAC,GAAG,CAAC,qBAAqB,CAAC,CAAC;AAEjE,MAAM,kBAAkB,GAAG;IACzB,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;CACV,CAAC;AACF,MAAM,YAAY,GAAG;IACnB,YAAY,EAAE,wBAAwB;IACtC,OAAO,EAAE,WAAW;IACpB,cAAc,EAAE,CAAC;CAClB,CAAC;AACF,+BAA+B;AAC/B,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;CAcvC,CAAC;AAIF,MAAM,QAAQ,GAET,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE;IACf,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,CAAC,YAAY,EAAE,IAAI,CAAC,GAAG,aAAa,EAAkB,CAAC;IAC7D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAC7E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,gBAAgB,GAAG,kBAAkB,CACzC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,gBAAgB,CACzC,CAAC;IAEF,MAAM,EAAC,aAAa,EAAE,WAAW,EAAC,GAAG,qBAAqB,CAAC,EAAC,KAAK,EAAC,CAAC,CAAC;IACpE,MAAM,iBAAiB,GAAG,WAAW,EAAE,QAAQ,EAAE,iBAAiB,CAAC;IAEnE,iEAAiE;IACjE,SAAS,CAAC,GAAG,EAAE;QACb,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,iDAAiD;IACjD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,EAAE,KAAK,IAAI,IAAI,EAAE,MAAM,EAAE,CAAC;YAChC,aAAa,CAAC,cAAc,CAAC,qBAAqB,CAAC;gBACjD,IAAI,EAAE,IAAI,CAAC,KAAK;gBAChB,IAAI,EAAE,IAAI,CAAC,MAAM;aAClB,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC;IAE9D,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO;YACL,GAAG,YAAY;YACf,GAAG,WAAW;YACd,GAAG,aAAa;YAChB,EAAE,EAAE,KAAK;SACO,CAAC;IACrB,CAAC,EAAE,CAAC,WAAW,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC;IACxC,MAAM,mBAAmB,GAAG,WAAW,EAAE,QAAQ;QAC/C,CAAC,CAAC,qBAAqB,CACnB,iBAAiB;QACjB,mBAAmB;QACnB,IAAI,IAAI,kBAAkB,CAC3B;QACH,CAAC,CAAC,IAAI,CAAC;IACT,MAAM,SAAS,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAC3E,CAAC,WAAW,EAAE,iBAAiB,CAAC,CACjC,CAAC;IAEF,sEAAsE;IACtE,MAAM,UAAU,GAAG,OAAO,CAAC,WAAW,EAAE,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAClE,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,MAAM,MAAM,GAAG,WAAW,EAAE,QAAQ,EAAE,MAAM,IAAI,EAAE,CAAC;QACnD,OAAO,0BAA0B,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IACvD,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IAEpC,MAAM,kBAAkB,GACtB,UAAU,IAAI,mBAAmB;QAC/B,CAAC,CAAC,oBAAoB,CAAC,iBAAiB,EAAE,KAAK,CAAC;QAChD,CAAC,CAAC,IAAI,CAAC;IAEX,MAAM,oBAAoB,GAAG,WAAW,EAAE,QAAQ;QAChD,CAAC,CAAC,sBAAsB,CAAC,iBAAiB,EAAE,aAAa,CAAC;QAC1D,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,oBAAoB,GACxB,SAAS,EAAE,QAAQ,EAAE,oBAAoB;QACzC,gBAAgB,EAAE,oBAAoB,CAAC;IACzC,OAAO,CACL,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YACvC,MAAC,qBAAqB,IACpB,GAAG,EAAE,YAAY,EACjB,SAAS,EAAC,gEAAgE,aAEzE,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,CACrB,KAAC,2BAA2B,IAAC,QAAQ,EAAE,SAAS,CAAC,QAAQ,YACvD,KAAC,YAAY,IACX,OAAO,EAAE,IAAI,EACb,WAAW,EAAE,CAAC,EAEd,KAAK,EAAE,CAAC,KACJ,SAAS,EACb,oBAAoB,EAAE,oBAAoB,IAHrC,CAAC,CAIN,GAC0B,CAC/B,CAAC,CAAC,CAAC,IAAI,EACP,iBAAiB,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CACtC,KAAC,aAAa,OACR,mBAAmB,EACvB,KAAK,EAAE,CAAC,EACR,iBAAiB,EAAE,KAAK,EACxB,oBAAoB,EAAE,oBAAoB,GAC1C,CACH,CAAC,CAAC,CAAC,IAAI,EACP,kBAAkB,CAAC,CAAC,CAAC,CACpB,KAAC,YAAY,IACX,OAAO,EAAE,eAAe,KACpB,kBAAkB,EACtB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,IAAI,EAAE,KAAK,GACvB,CACH,CAAC,CAAC,CAAC,IAAI,EACP,oBAAoB,CAAC,CAAC,CAAC,CACtB,KAAC,cAAc,OACT,oBAAoB,EACxB,UAAU,EAAE,IAAI,EAAE,KAAK,EACvB,UAAU,EAAE,IAAI,EAAE,MAAM,GACxB,CACH,CAAC,CAAC,CAAC,IAAI,IACc,GACH,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAE1B,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE;IACf,OAAO,CACL,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,YAC1B,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAI,GACX,CAClB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {FC, useMemo, useRef, useEffect, useState} from 'react';\n\nimport {\n  MapContainerFactory,\n  BottomWidgetFactory,\n  GeocoderPanelFactory,\n  mapFieldsSelector,\n  bottomWidgetSelector,\n  geoCoderPanelSelector,\n  modalContainerSelector,\n  MapViewStateContextProvider,\n  RootContext,\n  ModalContainerFactory,\n} from '@kepler.gl/components';\nimport {useDimensions, getAnimatableVisibleLayers} from '@kepler.gl/utils';\nimport styled, {useTheme} from 'styled-components';\n\nimport {KeplerInjector} from './KeplerInjector';\nimport {KeplerProvider} from './KeplerProvider';\nimport {useKeplerStateActions} from '../hooks/useKeplerStateActions';\nimport {useStoreWithKepler} from '../KeplerSlice';\n\nconst MapContainer = KeplerInjector.get(MapContainerFactory);\nconst BottomWidget = KeplerInjector.get(BottomWidgetFactory);\nconst GeoCoderPanel = KeplerInjector.get(GeocoderPanelFactory);\nconst ModalContainer = KeplerInjector.get(ModalContainerFactory);\n\nconst DEFAULT_DIMENSIONS = {\n  width: 0,\n  height: 0,\n};\nconst KEPLER_PROPS = {\n  mapboxApiUrl: 'https://api.mapbox.com',\n  appName: 'kepler.gl',\n  sidePanelWidth: 0,\n};\n// overide kepler default style\nconst CustomWidgetcontainer = styled.div`\n  .bottom-widget--inner {\n    margin-top: 0;\n  }\n\n  .map-popover {\n    z-index: 50;\n  }\n\n  /* Remove top margin from Trip layer timeline */\n  .kepler-gl .bottom-widget--container .animation-control-container,\n  .bottom-widget--container .animation-control-container {\n    margin-top: 0 !important;\n  }\n`;\n\ntype KeplerGLProps = Parameters<typeof geoCoderPanelSelector>[0];\n\nconst KeplerGl: FC<{\n  mapId: string;\n}> = ({mapId}) => {\n  const bottomWidgetRef = useRef(null);\n  const [containerRef, size] = useDimensions<HTMLDivElement>();\n  const [containerNode, setContainerNode] = useState<HTMLElement | null>(null);\n  const theme = useTheme();\n  const basicKeplerProps = useStoreWithKepler(\n    (state) => state.kepler.basicKeplerProps,\n  );\n\n  const {keplerActions, keplerState} = useKeplerStateActions({mapId});\n  const interactionConfig = keplerState?.visState?.interactionConfig;\n\n  // Capture the current container DOM node outside of render logic\n  useEffect(() => {\n    setContainerNode(containerRef.current);\n  }, [containerRef]);\n\n  // Update export image settings when size changes\n  useEffect(() => {\n    if (size?.width && size?.height) {\n      keplerActions.uiStateActions.setExportImageSetting({\n        mapW: size.width,\n        mapH: size.height,\n      });\n    }\n  }, [size?.width, size?.height, keplerActions.uiStateActions]);\n\n  const mergedKeplerProps = useMemo(() => {\n    return {\n      ...KEPLER_PROPS,\n      ...keplerState,\n      ...keplerActions,\n      id: mapId,\n    } as KeplerGLProps;\n  }, [keplerState, keplerActions, mapId]);\n  const geoCoderPanelFields = keplerState?.visState\n    ? geoCoderPanelSelector(\n        mergedKeplerProps,\n        // dont need height\n        size || DEFAULT_DIMENSIONS,\n      )\n    : null;\n  const mapFields = useMemo(\n    () => (keplerState?.visState ? mapFieldsSelector(mergedKeplerProps) : null),\n    [keplerState, mergedKeplerProps],\n  );\n\n  // Check if there are filters or animatable layers (e.g., Trip layers)\n  const hasFilters = Boolean(keplerState?.visState.filters?.length);\n  const hasAnimatableLayers = useMemo(() => {\n    const layers = keplerState?.visState?.layers || [];\n    return getAnimatableVisibleLayers(layers).length > 0;\n  }, [keplerState?.visState?.layers]);\n\n  const bottomWidgetFields =\n    hasFilters || hasAnimatableLayers\n      ? bottomWidgetSelector(mergedKeplerProps, theme)\n      : null;\n\n  const modalContainerFields = keplerState?.visState\n    ? modalContainerSelector(mergedKeplerProps, containerNode)\n    : null;\n\n  const mapboxApiAccessToken =\n    mapFields?.mapStyle?.mapboxApiAccessToken ||\n    basicKeplerProps?.mapboxApiAccessToken;\n  return (\n    <RootContext.Provider value={containerRef}>\n      <CustomWidgetcontainer\n        ref={containerRef}\n        className=\"kepler-gl relative flex h-full w-full flex-col justify-between\"\n      >\n        {mapFields?.mapState ? (\n          <MapViewStateContextProvider mapState={mapFields.mapState}>\n            <MapContainer\n              primary={true}\n              containerId={0}\n              key={0}\n              index={0}\n              {...mapFields}\n              mapboxApiAccessToken={mapboxApiAccessToken}\n            />\n          </MapViewStateContextProvider>\n        ) : null}\n        {interactionConfig?.geocoder?.enabled ? (\n          <GeoCoderPanel\n            {...geoCoderPanelFields}\n            index={0}\n            unsyncedViewports={false}\n            mapboxApiAccessToken={mapboxApiAccessToken}\n          />\n        ) : null}\n        {bottomWidgetFields ? (\n          <BottomWidget\n            rootRef={bottomWidgetRef}\n            {...bottomWidgetFields}\n            theme={theme}\n            containerW={size?.width}\n          />\n        ) : null}\n        {modalContainerFields ? (\n          <ModalContainer\n            {...modalContainerFields}\n            containerW={size?.width}\n            containerH={size?.height}\n          />\n        ) : null}\n      </CustomWidgetcontainer>\n    </RootContext.Provider>\n  );\n};\n\nexport const KeplerMapContainer: FC<{\n  mapId: string;\n}> = ({mapId}) => {\n  return (\n    <KeplerProvider mapId={mapId}>\n      <KeplerGl mapId={mapId} />\n    </KeplerProvider>\n  );\n};\n"]}

package/dist/components/KeplerPlotContainer.js

@@ -26,8 +26,8 @@ export const KeplerPlotContainer = ({ mapId, logoComponent }) => {
         }
         : null, [keplerState, keplerActions, mapId]);
     const plotContainerFields = useMemo(() => (mergedKeplerProps ? plotContainerSelector(mergedKeplerProps) : null), 
-    // include filters in deps to trigger refresh when filters change from bottom time widget
-    [mergedKeplerProps, keplerState?.visState?.filters]);
+    // mergedKeplerProps already changes when filters change via keplerState
+    [mergedKeplerProps]);
     return isExportingImage && plotContainerFields ? (_jsx(KeplerProvider, { mapId: mapId, children: _jsx(PlotContainer, { ...plotContainerFields, logoComponent: logoComponent ?? null }) })) : null;
 };
 //# sourceMappingURL=KeplerPlotContainer.js.map

package/dist/components/KeplerPlotContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeplerPlotContainer.js","sourceRoot":"","sources":["../../src/components/KeplerPlotContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,OAAO,EAAC,MAAM,OAAO,CAAC;AAE7C,OAAO,EACL,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,qBAAqB,EAAC,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAEhD,MAAM,aAAa,GAAG,cAAc,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;AAC/D,MAAM,YAAY,GAAG;IACnB,YAAY,EAAE,wBAAwB;IACtC,OAAO,EAAE,WAAW;IACpB,cAAc,EAAE,CAAC;IACjB,oBAAoB,EAAE,EAAE;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAG3B,CAAC,EAAC,KAAK,EAAE,aAAa,EAAC,EAAE,EAAE;IAC9B,MAAM,EAAC,WAAW,EAAE,aAAa,EAAC,GAAG,qBAAqB,CAAC,EAAC,KAAK,EAAC,CAAC,CAAC;IAEpE,MAAM,gBAAgB,GAAG,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,CAAC;IACtE,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE,CACH,WAAW,KAAK,SAAS;QACvB,CAAC,CAAC;YACE,GAAG,YAAY;YACf,oBAAoB,EAClB,YAAY,CAAC,oBAAoB;gBACjC,WAAW,EAAE,QAAQ,EAAE,oBAAoB;gBAC3C,EAAE;YACJ,GAAG,WAAW;YACd,GAAG,aAAa;YAChB,EAAE,EAAE,KAAK;SACV;QACH,CAAC,CAAC,IAAI,EACV,CAAC,WAAW,EAAE,aAAa,EAAE,KAAK,CAAC,CACpC,CAAC;IAEF,MAAM,mBAAmB,GAAG,OAAO,CACjC,GAAG,EAAE,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC3E,yFAAyF;IACzF,CAAC,iBAAiB,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,CAAC,CACpD,CAAC;IAEF,OAAO,gBAAgB,IAAI,mBAAmB,CAAC,CAAC,CAAC,CAC/C,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,YAC1B,KAAC,aAAa,OACR,mBAAmB,EACvB,aAAa,EAAE,aAAa,IAAI,IAAI,GACpC,GACa,CAClB,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC","sourcesContent":["import {FC, ReactNode, useMemo} from 'react';\n\nimport {\n  PlotContainerFactory,\n  plotContainerSelector,\n} from '@kepler.gl/components';\nimport {useKeplerStateActions} from '../hooks/useKeplerStateActions';\nimport {KeplerInjector} from './KeplerInjector';\nimport {KeplerProvider} from './KeplerProvider';\n\nconst PlotContainer = KeplerInjector.get(PlotContainerFactory);\nconst KEPLER_PROPS = {\n  mapboxApiUrl: 'https://api.mapbox.com',\n  appName: 'kepler.gl',\n  sidePanelWidth: 0,\n  mapboxApiAccessToken: '',\n};\n\nexport const KeplerPlotContainer: FC<{\n  mapId: string;\n  logoComponent?: ReactNode;\n}> = ({mapId, logoComponent}) => {\n  const {keplerState, keplerActions} = useKeplerStateActions({mapId});\n\n  const isExportingImage = keplerState?.uiState?.exportImage?.exporting;\n  const mergedKeplerProps = useMemo(\n    () =>\n      keplerState !== undefined\n        ? {\n            ...KEPLER_PROPS,\n            mapboxApiAccessToken:\n              KEPLER_PROPS.mapboxApiAccessToken ||\n              keplerState?.mapStyle?.mapboxApiAccessToken ||\n              '',\n            ...keplerState,\n            ...keplerActions,\n            id: mapId,\n          }\n        : null,\n    [keplerState, keplerActions, mapId],\n  );\n\n  const plotContainerFields = useMemo(\n    () => (mergedKeplerProps ? plotContainerSelector(mergedKeplerProps) : null),\n    // include filters in deps to trigger refresh when filters change from bottom time widget\n    [mergedKeplerProps, keplerState?.visState?.filters],\n  );\n\n  return isExportingImage && plotContainerFields ? (\n    <KeplerProvider mapId={mapId}>\n      <PlotContainer\n        {...plotContainerFields}\n        logoComponent={logoComponent ?? null}\n      />\n    </KeplerProvider>\n  ) : null;\n};\n"]}
+{"version":3,"file":"KeplerPlotContainer.js","sourceRoot":"","sources":["../../src/components/KeplerPlotContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,OAAO,EAAC,MAAM,OAAO,CAAC;AAE7C,OAAO,EACL,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,qBAAqB,EAAC,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAEhD,MAAM,aAAa,GAAG,cAAc,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;AAC/D,MAAM,YAAY,GAAG;IACnB,YAAY,EAAE,wBAAwB;IACtC,OAAO,EAAE,WAAW;IACpB,cAAc,EAAE,CAAC;IACjB,oBAAoB,EAAE,EAAE;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAG3B,CAAC,EAAC,KAAK,EAAE,aAAa,EAAC,EAAE,EAAE;IAC9B,MAAM,EAAC,WAAW,EAAE,aAAa,EAAC,GAAG,qBAAqB,CAAC,EAAC,KAAK,EAAC,CAAC,CAAC;IAEpE,MAAM,gBAAgB,GAAG,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,CAAC;IACtE,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE,CACH,WAAW,KAAK,SAAS;QACvB,CAAC,CAAC;YACE,GAAG,YAAY;YACf,oBAAoB,EAClB,YAAY,CAAC,oBAAoB;gBACjC,WAAW,EAAE,QAAQ,EAAE,oBAAoB;gBAC3C,EAAE;YACJ,GAAG,WAAW;YACd,GAAG,aAAa;YAChB,EAAE,EAAE,KAAK;SACV;QACH,CAAC,CAAC,IAAI,EACV,CAAC,WAAW,EAAE,aAAa,EAAE,KAAK,CAAC,CACpC,CAAC;IAEF,MAAM,mBAAmB,GAAG,OAAO,CACjC,GAAG,EAAE,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC3E,wEAAwE;IACxE,CAAC,iBAAiB,CAAC,CACpB,CAAC;IAEF,OAAO,gBAAgB,IAAI,mBAAmB,CAAC,CAAC,CAAC,CAC/C,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,YAC1B,KAAC,aAAa,OACR,mBAAmB,EACvB,aAAa,EAAE,aAAa,IAAI,IAAI,GACpC,GACa,CAClB,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC","sourcesContent":["import {FC, ReactNode, useMemo} from 'react';\n\nimport {\n  PlotContainerFactory,\n  plotContainerSelector,\n} from '@kepler.gl/components';\nimport {useKeplerStateActions} from '../hooks/useKeplerStateActions';\nimport {KeplerInjector} from './KeplerInjector';\nimport {KeplerProvider} from './KeplerProvider';\n\nconst PlotContainer = KeplerInjector.get(PlotContainerFactory);\nconst KEPLER_PROPS = {\n  mapboxApiUrl: 'https://api.mapbox.com',\n  appName: 'kepler.gl',\n  sidePanelWidth: 0,\n  mapboxApiAccessToken: '',\n};\n\nexport const KeplerPlotContainer: FC<{\n  mapId: string;\n  logoComponent?: ReactNode;\n}> = ({mapId, logoComponent}) => {\n  const {keplerState, keplerActions} = useKeplerStateActions({mapId});\n\n  const isExportingImage = keplerState?.uiState?.exportImage?.exporting;\n  const mergedKeplerProps = useMemo(\n    () =>\n      keplerState !== undefined\n        ? {\n            ...KEPLER_PROPS,\n            mapboxApiAccessToken:\n              KEPLER_PROPS.mapboxApiAccessToken ||\n              keplerState?.mapStyle?.mapboxApiAccessToken ||\n              '',\n            ...keplerState,\n            ...keplerActions,\n            id: mapId,\n          }\n        : null,\n    [keplerState, keplerActions, mapId],\n  );\n\n  const plotContainerFields = useMemo(\n    () => (mergedKeplerProps ? plotContainerSelector(mergedKeplerProps) : null),\n    // mergedKeplerProps already changes when filters change via keplerState\n    [mergedKeplerProps],\n  );\n\n  return isExportingImage && plotContainerFields ? (\n    <KeplerProvider mapId={mapId}>\n      <PlotContainer\n        {...plotContainerFields}\n        logoComponent={logoComponent ?? null}\n      />\n    </KeplerProvider>\n  ) : null;\n};\n"]}

package/dist/components/KeplerS3Browser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KeplerS3Browser.d.ts","sourceRoot":"","sources":["../../src/components/KeplerS3Browser.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,cAAc,EACf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAC,iBAAiB,EAAE,QAAQ,EAAE,aAAa,EAAC,MAAM,sBAAsB,CAAC;AAUhF,MAAM,MAAM,oBAAoB,GAAG;IACjC,WAAW,EAAE,CAAC,IAAI,EAAE;QAClB,QAAQ,EAAE,QAAQ,CAAC;QACnB,MAAM,EAAE,MAAM,CAAC;KAChB,KAAK,OAAO,CAAC,iBAAiB,EAAE,CAAC,CAAC;IACnC,WAAW,EAAE,CAAC,IAAI,EAAE;QAClB,QAAQ,EAAE,QAAQ,CAAC;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,EAAE,CAAC;KACjB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpB,SAAS,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACvC,iBAAiB,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,iBAAiB,EAAE,MAAM,OAAO,CAAC,aAAa,EAAE,CAAC,CAAC;IAClD,mBAAmB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACpD,CAAC;AACF,eAAO,MAAM,eAAe,GAAI,qGAO7B,oBAAoB,4CAkJtB,CAAC"}
+{"version":3,"file":"KeplerS3Browser.d.ts","sourceRoot":"","sources":["../../src/components/KeplerS3Browser.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,cAAc,EACf,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAC,iBAAiB,EAAE,QAAQ,EAAE,aAAa,EAAC,MAAM,sBAAsB,CAAC;AAUhF,MAAM,MAAM,oBAAoB,GAAG;IACjC,WAAW,EAAE,CAAC,IAAI,EAAE;QAClB,QAAQ,EAAE,QAAQ,CAAC;QACnB,MAAM,EAAE,MAAM,CAAC;KAChB,KAAK,OAAO,CAAC,iBAAiB,EAAE,CAAC,CAAC;IACnC,WAAW,EAAE,CAAC,IAAI,EAAE;QAClB,QAAQ,EAAE,QAAQ,CAAC;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,EAAE,CAAC;KACjB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpB,SAAS,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACvC,iBAAiB,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,iBAAiB,EAAE,MAAM,OAAO,CAAC,aAAa,EAAE,CAAC,CAAC;IAClD,mBAAmB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACpD,CAAC;AACF,eAAO,MAAM,eAAe,GAAI,qGAO7B,oBAAoB,4CAqJtB,CAAC"}

package/dist/components/KeplerS3Browser.js

@@ -35,12 +35,15 @@ export const KeplerS3Browser = ({ listS3Files, s3Browser, loadS3Files, saveS3Cre
             files: selectedFiles,
         });
     }, [loadS3Files, currentS3Config, selectedFiles, selectedDirectory]);
-    // load files when the component mounts
+    // Load files on mount if there's a saved S3 config (restore previous session)
+    // Intentional mount-only effect; state updates are async after data fetch
+    /* eslint-disable react-hooks/set-state-in-effect, react-hooks/exhaustive-deps */
     useEffect(() => {
         if (currentS3Config) {
             listFiles(currentS3Config, '');
         }
     }, []);
+    /* eslint-enable react-hooks/set-state-in-effect, react-hooks/exhaustive-deps */
     const onSelectDirectory = useCallback((directory) => {
         if (!currentS3Config)
             return;

package/dist/components/KeplerS3Browser.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeplerS3Browser.js","sourceRoot":"","sources":["../../src/components/KeplerS3Browser.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {useState, useEffect, useCallback} from 'react';\n\nimport {\n  S3FileBrowser,\n  S3CredentialsForm,\n  S3BrowserState,\n} from '@sqlrooms/s3-browser';\nimport {S3FileOrDirectory, S3Config, S3Credentials} from '@sqlrooms/s3-browser';\nimport {ChevronLeft} from 'lucide-react';\nimport {\n  DialogFooter,\n  Button,\n  Spinner,\n  Alert,\n  AlertDescription,\n} from '@sqlrooms/ui';\n\nexport type KeplerS3BrowserProps = {\n  listS3Files: (args: {\n    s3Config: S3Config;\n    prefix: string;\n  }) => Promise<S3FileOrDirectory[]>;\n  loadS3Files: (args: {\n    s3Config: S3Config;\n    prefix: string;\n    files: string[];\n  }) => Promise<void>;\n  s3Browser: S3BrowserState['s3Browser'];\n  saveS3Credentials: (s3Config: S3Config) => Promise<void>;\n  loadS3Credentials: () => Promise<S3Credentials[]>;\n  deleteS3Credentials: (id: string) => Promise<void>;\n};\nexport const KeplerS3Browser = ({\n  listS3Files,\n  s3Browser,\n  loadS3Files,\n  saveS3Credentials,\n  loadS3Credentials,\n  deleteS3Credentials,\n}: KeplerS3BrowserProps) => {\n  const [isConnecting, setIsConnecting] = useState(false);\n  const [error, setError] = useState('');\n  const [files, setFiles] = useState<S3FileOrDirectory[] | null>(null);\n  const [selectedDirectory, onChangeSelectedDirectory] = useState('');\n  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);\n  const {setCurrentS3Config, clearCurrentS3Config, currentS3Config} = s3Browser;\n\n  const listFiles = useCallback(\n    async (s3Config: S3Config, prefix: string) => {\n      try {\n        const files = await listS3Files({\n          s3Config,\n          prefix,\n        });\n        setCurrentS3Config(s3Config);\n        setFiles(files);\n        setError('');\n        onChangeSelectedDirectory(prefix);\n      } catch (error) {\n        setError((error as Error).message);\n      }\n      setIsConnecting(false);\n    },\n    [listS3Files, setCurrentS3Config, setFiles, setIsConnecting, setError],\n  );\n  const handleLoadFiles = useCallback(async () => {\n    if (!currentS3Config) return;\n    await loadS3Files({\n      s3Config: currentS3Config,\n      prefix: selectedDirectory,\n      files: selectedFiles,\n    });\n  }, [loadS3Files, currentS3Config, selectedFiles, selectedDirectory]);\n\n  // load files when the component mounts\n  useEffect(() => {\n    if (currentS3Config) {\n      listFiles(currentS3Config, '');\n    }\n  }, []);\n\n  const onSelectDirectory = useCallback(\n    (directory: string) => {\n      if (!currentS3Config) return;\n      setIsConnecting(true);\n      listFiles(currentS3Config, directory);\n    },\n    [currentS3Config, setIsConnecting, listFiles],\n  );\n\n  const onConnect = useCallback(\n    (values: S3Config) => {\n      setIsConnecting(true);\n      listFiles(values, '');\n    },\n    [listFiles],\n  );\n  const onBack = useCallback(() => {\n    setIsConnecting(false);\n    setFiles(null);\n    setSelectedFiles([]);\n    onChangeSelectedDirectory('');\n    clearCurrentS3Config();\n  }, [\n    setIsConnecting,\n    setFiles,\n    setSelectedFiles,\n    clearCurrentS3Config,\n    onChangeSelectedDirectory,\n  ]);\n  return (\n    <div className=\"flex h-full flex-col items-center gap-4\">\n      {/* Connection Panel */}\n      {!files ? (\n        <>\n          {error ? (\n            <div className=\"flex w-full justify-center px-4\">\n              <Alert variant=\"destructive\">\n                <AlertDescription>{error}</AlertDescription>\n              </Alert>\n            </div>\n          ) : null}\n          <S3CredentialsForm\n            onConnect={onConnect}\n            isLoading={isConnecting}\n            saveS3Credentials={saveS3Credentials}\n            loadS3Credentials={loadS3Credentials}\n            deleteS3Credentials={deleteS3Credentials}\n            onInputChange={() => setError('')}\n          />\n        </>\n      ) : files.length ? (\n        <div className=\"flex h-full w-full flex-col items-start justify-start gap-2\">\n          <S3FileBrowser\n            files={files}\n            selectedFiles={selectedFiles}\n            selectedDirectory={selectedDirectory}\n            onChangeSelectedFiles={setSelectedFiles}\n            onChangeSelectedDirectory={onSelectDirectory}\n            onCanConfirmChange={() => {}}\n            renderFileActions={() => (\n              <div className=\"flex w-full items-center justify-between px-2 text-xs\">\n                <Button\n                  variant=\"link\"\n                  className=\"h-6 px-1 py-0\"\n                  onClick={onBack}\n                >\n                  <ChevronLeft size={16} />\n                  Disconnect\n                </Button>\n                <div className=\"flex items-center gap-1\">\n                  {isConnecting ? (\n                    <div className=\"text-muted-foreground\">\n                      <Spinner className=\"h-6 w-6\" />\n                    </div>\n                  ) : (\n                    <div className=\"text-muted-foreground\">Connected to</div>\n                  )}\n\n                  <b>{currentS3Config?.bucket}</b>\n                </div>\n              </div>\n            )}\n          />\n        </div>\n      ) : (\n        <div className=\"flex h-full items-center justify-center\">\n          <p className=\"text-muted-foreground\">No files found</p>\n        </div>\n      )}\n\n      {/* Footer */}\n      <DialogFooter className=\"mt-6 w-full justify-end\">\n        {files?.length ? (\n          <Button\n            disabled={!selectedFiles.length}\n            type=\"submit\"\n            onClick={handleLoadFiles}\n          >\n            Add Selected\n          </Button>\n        ) : null}\n      </DialogFooter>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"KeplerS3Browser.js","sourceRoot":"","sources":["../../src/components/KeplerS3Browser.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {useState, useEffect, useCallback} from 'react';\n\nimport {\n  S3FileBrowser,\n  S3CredentialsForm,\n  S3BrowserState,\n} from '@sqlrooms/s3-browser';\nimport {S3FileOrDirectory, S3Config, S3Credentials} from '@sqlrooms/s3-browser';\nimport {ChevronLeft} from 'lucide-react';\nimport {\n  DialogFooter,\n  Button,\n  Spinner,\n  Alert,\n  AlertDescription,\n} from '@sqlrooms/ui';\n\nexport type KeplerS3BrowserProps = {\n  listS3Files: (args: {\n    s3Config: S3Config;\n    prefix: string;\n  }) => Promise<S3FileOrDirectory[]>;\n  loadS3Files: (args: {\n    s3Config: S3Config;\n    prefix: string;\n    files: string[];\n  }) => Promise<void>;\n  s3Browser: S3BrowserState['s3Browser'];\n  saveS3Credentials: (s3Config: S3Config) => Promise<void>;\n  loadS3Credentials: () => Promise<S3Credentials[]>;\n  deleteS3Credentials: (id: string) => Promise<void>;\n};\nexport const KeplerS3Browser = ({\n  listS3Files,\n  s3Browser,\n  loadS3Files,\n  saveS3Credentials,\n  loadS3Credentials,\n  deleteS3Credentials,\n}: KeplerS3BrowserProps) => {\n  const [isConnecting, setIsConnecting] = useState(false);\n  const [error, setError] = useState('');\n  const [files, setFiles] = useState<S3FileOrDirectory[] | null>(null);\n  const [selectedDirectory, onChangeSelectedDirectory] = useState('');\n  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);\n  const {setCurrentS3Config, clearCurrentS3Config, currentS3Config} = s3Browser;\n\n  const listFiles = useCallback(\n    async (s3Config: S3Config, prefix: string) => {\n      try {\n        const files = await listS3Files({\n          s3Config,\n          prefix,\n        });\n        setCurrentS3Config(s3Config);\n        setFiles(files);\n        setError('');\n        onChangeSelectedDirectory(prefix);\n      } catch (error) {\n        setError((error as Error).message);\n      }\n      setIsConnecting(false);\n    },\n    [listS3Files, setCurrentS3Config, setFiles, setIsConnecting, setError],\n  );\n  const handleLoadFiles = useCallback(async () => {\n    if (!currentS3Config) return;\n    await loadS3Files({\n      s3Config: currentS3Config,\n      prefix: selectedDirectory,\n      files: selectedFiles,\n    });\n  }, [loadS3Files, currentS3Config, selectedFiles, selectedDirectory]);\n\n  // Load files on mount if there's a saved S3 config (restore previous session)\n  // Intentional mount-only effect; state updates are async after data fetch\n  /* eslint-disable react-hooks/set-state-in-effect, react-hooks/exhaustive-deps */\n  useEffect(() => {\n    if (currentS3Config) {\n      listFiles(currentS3Config, '');\n    }\n  }, []);\n  /* eslint-enable react-hooks/set-state-in-effect, react-hooks/exhaustive-deps */\n\n  const onSelectDirectory = useCallback(\n    (directory: string) => {\n      if (!currentS3Config) return;\n      setIsConnecting(true);\n      listFiles(currentS3Config, directory);\n    },\n    [currentS3Config, setIsConnecting, listFiles],\n  );\n\n  const onConnect = useCallback(\n    (values: S3Config) => {\n      setIsConnecting(true);\n      listFiles(values, '');\n    },\n    [listFiles],\n  );\n  const onBack = useCallback(() => {\n    setIsConnecting(false);\n    setFiles(null);\n    setSelectedFiles([]);\n    onChangeSelectedDirectory('');\n    clearCurrentS3Config();\n  }, [\n    setIsConnecting,\n    setFiles,\n    setSelectedFiles,\n    clearCurrentS3Config,\n    onChangeSelectedDirectory,\n  ]);\n  return (\n    <div className=\"flex h-full flex-col items-center gap-4\">\n      {/* Connection Panel */}\n      {!files ? (\n        <>\n          {error ? (\n            <div className=\"flex w-full justify-center px-4\">\n              <Alert variant=\"destructive\">\n                <AlertDescription>{error}</AlertDescription>\n              </Alert>\n            </div>\n          ) : null}\n          <S3CredentialsForm\n            onConnect={onConnect}\n            isLoading={isConnecting}\n            saveS3Credentials={saveS3Credentials}\n            loadS3Credentials={loadS3Credentials}\n            deleteS3Credentials={deleteS3Credentials}\n            onInputChange={() => setError('')}\n          />\n        </>\n      ) : files.length ? (\n        <div className=\"flex h-full w-full flex-col items-start justify-start gap-2\">\n          <S3FileBrowser\n            files={files}\n            selectedFiles={selectedFiles}\n            selectedDirectory={selectedDirectory}\n            onChangeSelectedFiles={setSelectedFiles}\n            onChangeSelectedDirectory={onSelectDirectory}\n            onCanConfirmChange={() => {}}\n            renderFileActions={() => (\n              <div className=\"flex w-full items-center justify-between px-2 text-xs\">\n                <Button\n                  variant=\"link\"\n                  className=\"h-6 px-1 py-0\"\n                  onClick={onBack}\n                >\n                  <ChevronLeft size={16} />\n                  Disconnect\n                </Button>\n                <div className=\"flex items-center gap-1\">\n                  {isConnecting ? (\n                    <div className=\"text-muted-foreground\">\n                      <Spinner className=\"h-6 w-6\" />\n                    </div>\n                  ) : (\n                    <div className=\"text-muted-foreground\">Connected to</div>\n                  )}\n\n                  <b>{currentS3Config?.bucket}</b>\n                </div>\n              </div>\n            )}\n          />\n        </div>\n      ) : (\n        <div className=\"flex h-full items-center justify-center\">\n          <p className=\"text-muted-foreground\">No files found</p>\n        </div>\n      )}\n\n      {/* Footer */}\n      <DialogFooter className=\"mt-6 w-full justify-end\">\n        {files?.length ? (\n          <Button\n            disabled={!selectedFiles.length}\n            type=\"submit\"\n            onClick={handleLoadFiles}\n          >\n            Add Selected\n          </Button>\n        ) : null}\n      </DialogFooter>\n    </div>\n  );\n};\n"]}