@sqlrooms/kepler 0.29.0-rc.1 → 0.29.0-rc.3

package/dist/components/CustomLayerManager.js

@@ -1,31 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import { LayerListFactory, DatasetLayerGroupFactory, PanelTitleFactory, AddLayerButtonFactory, SidePanelSection, } from '@kepler.gl/components';
+import { Accessor, Button, Icons, LayerListFactory, DatasetLayerGroupFactory, PanelTitleFactory, SidePanelSection, Typeahead, } from '@kepler.gl/components';
 import { PANEL_VIEW_TOGGLES, SIDEBAR_PANELS } from '@kepler.gl/constants';
 import { getApplicationConfig } from '@kepler.gl/utils';
 import { getKeplerFactory } from './KeplerInjector';
 import { useKeplerStateActions, } from '../hooks/useKeplerStateActions';
-// Get the kepler.gl components through the injector
+import { useStoreWithKepler } from '../KeplerSlice';
 const LayerList = getKeplerFactory(LayerListFactory);
 const DatasetLayerGroup = getKeplerFactory(DatasetLayerGroupFactory);
 const PanelTitle = getKeplerFactory(PanelTitleFactory);
-const AddLayerButton = getKeplerFactory(AddLayerButtonFactory);
 const layerPanelMetadata = SIDEBAR_PANELS.find((p) => p.id === 'layer');
-// Custom styled components for your layer manager
 const CustomLayerManagerContainer = styled.div `
-  .layer-manager {
-    /* Add your custom styles here */
-  }
-  
   .layer-manager-title {
-    /* Custom title styling */
   }
 
   .add-layer-button {
     background-color: ${(props) => props.theme.sidePanelBg || props.theme.panelBackground};
-    color: #2563EB; 
+    color: #2563EB;
     border: 0px;
     height: 28px;
     font-weight: 500;
@@ -58,7 +51,125 @@ const CustomLayerManagerContainer = styled.div `
   }
 }
 `;
-// Custom hook for side panel actions
+const DropdownWrapper = styled.div `
+  position: relative;
+  display: inline-block;
+  overflow: visible;
+`;
+const DropdownMenu = styled.div `
+  display: flex;
+  flex-direction: column;
+  min-width: 240px;
+  max-width: 240px;
+  position: fixed;
+  z-index: 100;
+
+  .list-selector {
+    border-top: 1px solid ${(props) => props.theme.secondaryInputBorderColor};
+    width: 100%;
+    max-height: unset;
+  }
+  .list__item > div {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    line-height: 18px;
+    padding: 0;
+  }
+`;
+const ListItemWrapper = styled.div `
+  display: flex;
+  color: ${(props) => props.theme.textColor};
+  font-size: 11px;
+  letter-spacing: 0.2px;
+  overflow: auto;
+  .table-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+const TYPEAHEAD_CLASS = 'typeahead';
+const TYPEAHEAD_INPUT_CLASS = 'typeahead__input';
+const TableListItem = ({ value }) => (_jsx(ListItemWrapper, { children: _jsx("div", { className: "table-name", title: value.label, children: value.label }) }));
+/**
+ * Dropdown button that lists available datasets and DuckDB tables.
+ * When a table is selected, it is synced to Kepler on demand and a new
+ * layer is created for it.
+ */
+const AddTableLayerButton = ({ onAdd, keplerDatasetIds, disabled }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isAdding, setIsAdding] = useState(false);
+    const dropdownRef = useRef(null);
+    const buttonRef = useRef(null);
+    const [menuPos, setMenuPos] = useState({
+        top: 0,
+        right: 0,
+    });
+    const intl = useIntl();
+    const dbTables = useStoreWithKepler((state) => state.db.tables);
+    const options = useMemo(() => {
+        const tableNames = new Set(dbTables
+            .filter((t) => t.table.schema === 'main')
+            .map((t) => t.table.table));
+        for (const id of keplerDatasetIds) {
+            tableNames.add(id);
+        }
+        return Array.from(tableNames)
+            .sort()
+            .map((name) => ({ label: name, value: name }));
+    }, [dbTables, keplerDatasetIds]);
+    const handleClick = useCallback(async () => {
+        if (options.length === 1 && options[0]) {
+            setIsAdding(true);
+            try {
+                await onAdd(options[0].value);
+            }
+            catch (e) {
+                console.error('Failed to add layer:', e);
+            }
+            finally {
+                setIsAdding(false);
+            }
+            return;
+        }
+        if (buttonRef.current) {
+            const rect = buttonRef.current.getBoundingClientRect();
+            setMenuPos({
+                top: rect.bottom,
+                right: window.innerWidth - rect.right,
+            });
+        }
+        setIsOpen((prev) => !prev);
+    }, [options, onAdd]);
+    const handleSelect = useCallback((option) => {
+        if (!option)
+            return;
+        setIsAdding(true);
+        onAdd(option.value)
+            .then(() => setIsOpen(false))
+            .catch((e) => console.error('Failed to add layer:', e))
+            .finally(() => setIsAdding(false));
+    }, [onAdd]);
+    // Close dropdown on outside click
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (e) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(e.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen]);
+    return (_jsxs(DropdownWrapper, { ref: dropdownRef, children: [_jsxs(Button, { ref: buttonRef, className: "add-layer-button", onClick: handleClick, disabled: !options.length || disabled || isAdding, children: [_jsx(Icons.Add, { height: "12px" }), intl.formatMessage({ id: 'layerManager.addLayer' })] }), isOpen && options.length > 1 && (_jsx(DropdownMenu, { style: { top: menuPos.top, right: menuPos.right }, children: _jsx(Typeahead, { className: TYPEAHEAD_CLASS, customClasses: {
+                        results: 'list-selector',
+                        input: TYPEAHEAD_INPUT_CLASS,
+                        listItem: 'list__item',
+                    }, placeholder: intl ? intl.formatMessage({ id: 'placeholder.search' }) : 'Search', selectedItems: null, options: options, displayOption: Accessor.generateOptionToStringFor('label'), filterOption: 'label', searchable: true, onOptionSelected: handleSelect, customListItemComponent: TableListItem }) }))] }));
+};
 function useCustomSidePanelActions(keplerActions) {
     const { openDeleteModal, toggleModal } = keplerActions.uiStateActions;
     const { updateTableColor } = keplerActions.visStateActions;
@@ -75,13 +186,23 @@ function useCustomSidePanelActions(keplerActions) {
 export const CustomLayerManager = ({ mapId, showDeleteDataset = true, }) => {
     const { keplerActions, keplerState } = useKeplerStateActions({ mapId });
     const intl = useIntl();
+    const addTableToMap = useStoreWithKepler((state) => state.kepler.addTableToMap);
     const { onRemoveDataset, onUpdateTableColor } = useCustomSidePanelActions(keplerActions);
     const { addLayer } = keplerActions.visStateActions;
-    const onAddLayer = useCallback((dataset) => {
-        addLayer(undefined, dataset);
-    }, [addLayer]);
+    const keplerDatasetIds = useMemo(() => Object.keys(keplerState?.visState.datasets ?? {}), [keplerState?.visState.datasets]);
+    const onAddTableLayer = useCallback(async (tableName) => {
+        const keplerDatasets = keplerState?.visState.datasets;
+        if (!keplerDatasets?.[tableName]) {
+            await addTableToMap(mapId, tableName, {
+                autoCreateLayers: true,
+                centerMap: true,
+            });
+        }
+        else {
+            addLayer(undefined, tableName);
+        }
+    }, [addLayer, addTableToMap, keplerState?.visState.datasets, mapId]);
     const isSortByDatasetMode = keplerState?.uiState.layerPanelListView === PANEL_VIEW_TOGGLES.byDataset;
-    // Filter layer classes based on application config
     const enableRasterTileLayer = getApplicationConfig().enableRasterTileLayer;
     const enableWMSLayer = getApplicationConfig().enableWMSLayer;
     const filteredLayerClasses = useMemo(() => {
@@ -105,6 +226,6 @@ export const CustomLayerManager = ({ mapId, showDeleteDataset = true, }) => {
     }
     return (_jsx(CustomLayerManagerContainer, { children: _jsxs("div", { className: "layer-manager", children: [_jsx(SidePanelSection, { children: _jsx(PanelTitle, { className: "layer-manager-title", title: intl.formatMessage({
                             id: layerPanelMetadata?.label || 'Layers',
-                        }), children: _jsx(AddLayerButton, { datasets: keplerState.visState.datasets, onAdd: onAddLayer }) }) }), _jsx(SidePanelSection, { children: isSortByDatasetMode ? (_jsx(DatasetLayerGroup, { datasets: keplerState.visState.datasets, showDatasetTable: keplerActions.visStateActions.showDatasetTable, layers: keplerState.visState.layers, updateTableColor: onUpdateTableColor, removeDataset: onRemoveDataset, layerOrder: keplerState.visState.layerOrder, layerClasses: filteredLayerClasses, uiStateActions: keplerActions.uiStateActions, visStateActions: keplerActions.visStateActions, mapStateActions: keplerActions.mapStateActions, showDeleteDataset: showDeleteDataset })) : (_jsx(LayerList, { layers: keplerState.visState.layers, datasets: keplerState.visState.datasets, layerOrder: keplerState.visState.layerOrder, uiStateActions: keplerActions.uiStateActions, visStateActions: keplerActions.visStateActions, mapStateActions: keplerActions.mapStateActions, layerClasses: filteredLayerClasses })) })] }) }));
+                        }), children: _jsx(AddTableLayerButton, { onAdd: onAddTableLayer, keplerDatasetIds: keplerDatasetIds }) }) }), _jsx(SidePanelSection, { children: isSortByDatasetMode ? (_jsx(DatasetLayerGroup, { datasets: keplerState.visState.datasets, showDatasetTable: keplerActions.visStateActions.showDatasetTable, layers: keplerState.visState.layers, updateTableColor: onUpdateTableColor, removeDataset: onRemoveDataset, layerOrder: keplerState.visState.layerOrder, layerClasses: filteredLayerClasses, uiStateActions: keplerActions.uiStateActions, visStateActions: keplerActions.visStateActions, mapStateActions: keplerActions.mapStateActions, showDeleteDataset: showDeleteDataset })) : (_jsx(LayerList, { layers: keplerState.visState.layers, datasets: keplerState.visState.datasets, layerOrder: keplerState.visState.layerOrder, uiStateActions: keplerActions.uiStateActions, visStateActions: keplerActions.visStateActions, mapStateActions: keplerActions.mapStateActions, layerClasses: filteredLayerClasses })) })] }) }));
 };
 //# sourceMappingURL=CustomLayerManager.js.map

package/dist/components/CustomLayerManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomLayerManager.js","sourceRoot":"","sources":["../../src/components/CustomLayerManager.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  LayerListFactory,\n  DatasetLayerGroupFactory,\n  PanelTitleFactory,\n  AddLayerButtonFactory,\n  SidePanelSection,\n} from '@kepler.gl/components';\nimport {PANEL_VIEW_TOGGLES, SIDEBAR_PANELS} from '@kepler.gl/constants';\nimport {LayerClassesType} from '@kepler.gl/layers';\nimport {getApplicationConfig} from '@kepler.gl/utils';\n\nimport {getKeplerFactory} from './KeplerInjector';\nimport {\n  KeplerActions,\n  useKeplerStateActions,\n} from '../hooks/useKeplerStateActions';\nimport {RGBColor} from '@kepler.gl/types';\n\n// Get the kepler.gl components through the injector\nconst LayerList = getKeplerFactory(LayerListFactory);\nconst DatasetLayerGroup = getKeplerFactory(DatasetLayerGroupFactory);\nconst PanelTitle = getKeplerFactory(PanelTitleFactory);\nconst AddLayerButton = getKeplerFactory(AddLayerButtonFactory);\n\nconst layerPanelMetadata = SIDEBAR_PANELS.find((p) => p.id === 'layer');\n\n// Custom styled components for your layer manager\nconst CustomLayerManagerContainer = styled.div`\n  .layer-manager {\n    /* Add your custom styles here */\n  }\n  \n  .layer-manager-title {\n    /* Custom title styling */\n  }\n\n  .add-layer-button {\n    background-color: ${(props) => props.theme.sidePanelBg || props.theme.panelBackground};\n    color: #2563EB; \n    border: 0px;\n    height: 28px;\n    font-weight: 500;\n    font-size: 14px;\n  }\n\n  .layer__title__type {\n    display: none !important;\n  }\n\n  .layer-panel__header {\n    height: 36px;\n  }\n\n  .layer__title {\n    min-width: 0;\n  }\n\n  .layer__title > div {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .layer__title__editor {\n    width: 100%;\n    min-width: 0;\n    flex: 1;\n  }\n}\n`;\n\ntype CustomLayerManagerProps = {\n  mapId: string;\n  showDeleteDataset?: boolean;\n};\n\n// Custom hook for side panel actions\nfunction useCustomSidePanelActions(keplerActions: KeplerActions) {\n  const {openDeleteModal, toggleModal} = keplerActions.uiStateActions;\n  const {updateTableColor} = keplerActions.visStateActions;\n\n  const onRemoveDataset = useCallback(\n    (dataId: string) => openDeleteModal(dataId),\n    [openDeleteModal],\n  );\n\n  const onShowAddDataModal = useCallback(\n    () => toggleModal('addData'),\n    [toggleModal],\n  );\n\n  const onUpdateTableColor = useCallback(\n    (dataId: string, newColor: RGBColor) => updateTableColor(dataId, newColor),\n    [updateTableColor],\n  );\n\n  return {\n    onRemoveDataset,\n    onShowAddDataModal,\n    onUpdateTableColor,\n  };\n}\n\n// Main Custom Layer Manager Component\nexport const CustomLayerManager: React.FC<CustomLayerManagerProps> = ({\n  mapId,\n  showDeleteDataset = true,\n}) => {\n  const {keplerActions, keplerState} = useKeplerStateActions({mapId});\n  const intl = useIntl();\n\n  const {onRemoveDataset, onUpdateTableColor} =\n    useCustomSidePanelActions(keplerActions);\n\n  const {addLayer} = keplerActions.visStateActions;\n\n  const onAddLayer = useCallback(\n    (dataset: string) => {\n      addLayer(undefined, dataset);\n    },\n    [addLayer],\n  );\n\n  const isSortByDatasetMode =\n    keplerState?.uiState.layerPanelListView === PANEL_VIEW_TOGGLES.byDataset;\n\n  // Filter layer classes based on application config\n  const enableRasterTileLayer = getApplicationConfig().enableRasterTileLayer;\n  const enableWMSLayer = getApplicationConfig().enableWMSLayer;\n\n  const filteredLayerClasses = useMemo(() => {\n    let filteredClasses = keplerState?.visState.layerClasses || {};\n    if (!enableRasterTileLayer && 'rasterTile' in filteredClasses) {\n      const {rasterTile: _rasterTile, ...rest} = filteredClasses;\n      filteredClasses = rest as LayerClassesType;\n    }\n    if (!enableWMSLayer && 'wms' in filteredClasses) {\n      const {wms: _wms, ...rest} = filteredClasses;\n      filteredClasses = rest as LayerClassesType;\n    }\n    return filteredClasses as LayerClassesType;\n  }, [\n    enableRasterTileLayer,\n    enableWMSLayer,\n    keplerState?.visState.layerClasses,\n  ]);\n\n  if (!keplerState || !keplerActions) {\n    return null;\n  }\n\n  return (\n    <CustomLayerManagerContainer>\n      <div className=\"layer-manager\">\n        <SidePanelSection>\n          <PanelTitle\n            className=\"layer-manager-title\"\n            title={intl.formatMessage({\n              id: layerPanelMetadata?.label || 'Layers',\n            })}\n          >\n            <AddLayerButton\n              datasets={keplerState.visState.datasets}\n              onAdd={onAddLayer}\n            />\n          </PanelTitle>\n        </SidePanelSection>\n\n        <SidePanelSection>\n          {isSortByDatasetMode ? (\n            <DatasetLayerGroup\n              datasets={keplerState.visState.datasets}\n              showDatasetTable={keplerActions.visStateActions.showDatasetTable}\n              layers={keplerState.visState.layers}\n              updateTableColor={onUpdateTableColor}\n              removeDataset={onRemoveDataset}\n              layerOrder={keplerState.visState.layerOrder}\n              layerClasses={filteredLayerClasses}\n              uiStateActions={keplerActions.uiStateActions}\n              visStateActions={keplerActions.visStateActions}\n              mapStateActions={keplerActions.mapStateActions}\n              showDeleteDataset={showDeleteDataset}\n            />\n          ) : (\n            <LayerList\n              layers={keplerState.visState.layers}\n              datasets={keplerState.visState.datasets}\n              layerOrder={keplerState.visState.layerOrder}\n              uiStateActions={keplerActions.uiStateActions}\n              visStateActions={keplerActions.visStateActions}\n              mapStateActions={keplerActions.mapStateActions}\n              layerClasses={filteredLayerClasses}\n            />\n          )}\n        </SidePanelSection>\n      </div>\n    </CustomLayerManagerContainer>\n  );\n};\n"]}
+{"version":3,"file":"CustomLayerManager.js","sourceRoot":"","sources":["../../src/components/CustomLayerManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {useCallback, useMemo, useRef, useState} from 'react';\nimport {useIntl} from 'react-intl';\nimport styled from 'styled-components';\n\nimport {\n  Accessor,\n  Button,\n  Icons,\n  LayerListFactory,\n  DatasetLayerGroupFactory,\n  PanelTitleFactory,\n  SidePanelSection,\n  Typeahead,\n} from '@kepler.gl/components';\nimport {PANEL_VIEW_TOGGLES, SIDEBAR_PANELS} from '@kepler.gl/constants';\nimport {LayerClassesType} from '@kepler.gl/layers';\nimport {getApplicationConfig} from '@kepler.gl/utils';\n\nimport {getKeplerFactory} from './KeplerInjector';\nimport {\n  KeplerActions,\n  useKeplerStateActions,\n} from '../hooks/useKeplerStateActions';\nimport {useStoreWithKepler} from '../KeplerSlice';\nimport {RGBColor} from '@kepler.gl/types';\n\nconst LayerList = getKeplerFactory(LayerListFactory);\nconst DatasetLayerGroup = getKeplerFactory(DatasetLayerGroupFactory);\nconst PanelTitle = getKeplerFactory(PanelTitleFactory);\n\nconst layerPanelMetadata = SIDEBAR_PANELS.find((p) => p.id === 'layer');\n\nconst CustomLayerManagerContainer = styled.div`\n  .layer-manager-title {\n  }\n\n  .add-layer-button {\n    background-color: ${(props) => props.theme.sidePanelBg || props.theme.panelBackground};\n    color: #2563EB;\n    border: 0px;\n    height: 28px;\n    font-weight: 500;\n    font-size: 14px;\n  }\n\n  .layer__title__type {\n    display: none !important;\n  }\n\n  .layer-panel__header {\n    height: 36px;\n  }\n\n  .layer__title {\n    min-width: 0;\n  }\n\n  .layer__title > div {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .layer__title__editor {\n    width: 100%;\n    min-width: 0;\n    flex: 1;\n  }\n}\n`;\n\nconst DropdownWrapper = styled.div`\n  position: relative;\n  display: inline-block;\n  overflow: visible;\n`;\n\nconst DropdownMenu = styled.div`\n  display: flex;\n  flex-direction: column;\n  min-width: 240px;\n  max-width: 240px;\n  position: fixed;\n  z-index: 100;\n\n  .list-selector {\n    border-top: 1px solid ${(props) => props.theme.secondaryInputBorderColor};\n    width: 100%;\n    max-height: unset;\n  }\n  .list__item > div {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    line-height: 18px;\n    padding: 0;\n  }\n`;\n\nconst ListItemWrapper = styled.div`\n  display: flex;\n  color: ${(props) => props.theme.textColor};\n  font-size: 11px;\n  letter-spacing: 0.2px;\n  overflow: auto;\n  .table-name {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n`;\n\nconst TYPEAHEAD_CLASS = 'typeahead';\nconst TYPEAHEAD_INPUT_CLASS = 'typeahead__input';\n\ntype TableOption = {label: string; value: string};\n\nconst TableListItem: React.FC<{value: TableOption}> = ({value}) => (\n  <ListItemWrapper>\n    <div className=\"table-name\" title={value.label}>\n      {value.label}\n    </div>\n  </ListItemWrapper>\n);\n\n/**\n * Dropdown button that lists available datasets and DuckDB tables.\n * When a table is selected, it is synced to Kepler on demand and a new\n * layer is created for it.\n */\nconst AddTableLayerButton: React.FC<{\n  onAdd: (tableName: string) => Promise<void>;\n  keplerDatasetIds: string[];\n  disabled?: boolean;\n}> = ({onAdd, keplerDatasetIds, disabled}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [isAdding, setIsAdding] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [menuPos, setMenuPos] = useState<{top: number; right: number}>({\n    top: 0,\n    right: 0,\n  });\n  const intl = useIntl();\n\n  const dbTables = useStoreWithKepler((state) => state.db.tables);\n\n  const options: TableOption[] = useMemo(() => {\n    const tableNames = new Set(\n      dbTables\n        .filter((t) => t.table.schema === 'main')\n        .map((t) => t.table.table),\n    );\n    for (const id of keplerDatasetIds) {\n      tableNames.add(id);\n    }\n    return Array.from(tableNames)\n      .sort()\n      .map((name) => ({label: name, value: name}));\n  }, [dbTables, keplerDatasetIds]);\n\n  const handleClick = useCallback(async () => {\n    if (options.length === 1 && options[0]) {\n      setIsAdding(true);\n      try {\n        await onAdd(options[0].value);\n      } catch (e) {\n        console.error('Failed to add layer:', e);\n      } finally {\n        setIsAdding(false);\n      }\n      return;\n    }\n    if (buttonRef.current) {\n      const rect = buttonRef.current.getBoundingClientRect();\n      setMenuPos({\n        top: rect.bottom,\n        right: window.innerWidth - rect.right,\n      });\n    }\n    setIsOpen((prev) => !prev);\n  }, [options, onAdd]);\n\n  const handleSelect = useCallback(\n    (option: TableOption | null) => {\n      if (!option) return;\n      setIsAdding(true);\n      onAdd(option.value)\n        .then(() => setIsOpen(false))\n        .catch((e) => console.error('Failed to add layer:', e))\n        .finally(() => setIsAdding(false));\n    },\n    [onAdd],\n  );\n\n  // Close dropdown on outside click\n  React.useEffect(() => {\n    if (!isOpen) return;\n    const handleClickOutside = (e: MouseEvent) => {\n      if (\n        dropdownRef.current &&\n        !dropdownRef.current.contains(e.target as Node)\n      ) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen]);\n\n  return (\n    <DropdownWrapper ref={dropdownRef}>\n      <Button\n        ref={buttonRef}\n        className=\"add-layer-button\"\n        onClick={handleClick}\n        disabled={!options.length || disabled || isAdding}\n      >\n        <Icons.Add height=\"12px\" />\n        {intl.formatMessage({id: 'layerManager.addLayer'})}\n      </Button>\n      {isOpen && options.length > 1 && (\n        <DropdownMenu style={{top: menuPos.top, right: menuPos.right}}>\n          <Typeahead\n            className={TYPEAHEAD_CLASS}\n            customClasses={{\n              results: 'list-selector',\n              input: TYPEAHEAD_INPUT_CLASS,\n              listItem: 'list__item',\n            }}\n            placeholder={\n              intl ? intl.formatMessage({id: 'placeholder.search'}) : 'Search'\n            }\n            selectedItems={null}\n            options={options}\n            displayOption={Accessor.generateOptionToStringFor('label')}\n            filterOption={'label'}\n            searchable\n            onOptionSelected={handleSelect}\n            customListItemComponent={TableListItem}\n          />\n        </DropdownMenu>\n      )}\n    </DropdownWrapper>\n  );\n};\n\ntype CustomLayerManagerProps = {\n  mapId: string;\n  showDeleteDataset?: boolean;\n};\n\nfunction useCustomSidePanelActions(keplerActions: KeplerActions) {\n  const {openDeleteModal, toggleModal} = keplerActions.uiStateActions;\n  const {updateTableColor} = keplerActions.visStateActions;\n\n  const onRemoveDataset = useCallback(\n    (dataId: string) => openDeleteModal(dataId),\n    [openDeleteModal],\n  );\n\n  const onShowAddDataModal = useCallback(\n    () => toggleModal('addData'),\n    [toggleModal],\n  );\n\n  const onUpdateTableColor = useCallback(\n    (dataId: string, newColor: RGBColor) => updateTableColor(dataId, newColor),\n    [updateTableColor],\n  );\n\n  return {\n    onRemoveDataset,\n    onShowAddDataModal,\n    onUpdateTableColor,\n  };\n}\n\n// Main Custom Layer Manager Component\nexport const CustomLayerManager: React.FC<CustomLayerManagerProps> = ({\n  mapId,\n  showDeleteDataset = true,\n}) => {\n  const {keplerActions, keplerState} = useKeplerStateActions({mapId});\n  const intl = useIntl();\n  const addTableToMap = useStoreWithKepler(\n    (state) => state.kepler.addTableToMap,\n  );\n\n  const {onRemoveDataset, onUpdateTableColor} =\n    useCustomSidePanelActions(keplerActions);\n\n  const {addLayer} = keplerActions.visStateActions;\n\n  const keplerDatasetIds = useMemo(\n    () => Object.keys(keplerState?.visState.datasets ?? {}),\n    [keplerState?.visState.datasets],\n  );\n\n  const onAddTableLayer = useCallback(\n    async (tableName: string) => {\n      const keplerDatasets = keplerState?.visState.datasets;\n      if (!keplerDatasets?.[tableName]) {\n        await addTableToMap(mapId, tableName, {\n          autoCreateLayers: true,\n          centerMap: true,\n        });\n      } else {\n        addLayer(undefined, tableName);\n      }\n    },\n    [addLayer, addTableToMap, keplerState?.visState.datasets, mapId],\n  );\n\n  const isSortByDatasetMode =\n    keplerState?.uiState.layerPanelListView === PANEL_VIEW_TOGGLES.byDataset;\n\n  const enableRasterTileLayer = getApplicationConfig().enableRasterTileLayer;\n  const enableWMSLayer = getApplicationConfig().enableWMSLayer;\n\n  const filteredLayerClasses = useMemo(() => {\n    let filteredClasses = keplerState?.visState.layerClasses || {};\n    if (!enableRasterTileLayer && 'rasterTile' in filteredClasses) {\n      const {rasterTile: _rasterTile, ...rest} = filteredClasses;\n      filteredClasses = rest as LayerClassesType;\n    }\n    if (!enableWMSLayer && 'wms' in filteredClasses) {\n      const {wms: _wms, ...rest} = filteredClasses;\n      filteredClasses = rest as LayerClassesType;\n    }\n    return filteredClasses as LayerClassesType;\n  }, [\n    enableRasterTileLayer,\n    enableWMSLayer,\n    keplerState?.visState.layerClasses,\n  ]);\n\n  if (!keplerState || !keplerActions) {\n    return null;\n  }\n\n  return (\n    <CustomLayerManagerContainer>\n      <div className=\"layer-manager\">\n        <SidePanelSection>\n          <PanelTitle\n            className=\"layer-manager-title\"\n            title={intl.formatMessage({\n              id: layerPanelMetadata?.label || 'Layers',\n            })}\n          >\n            <AddTableLayerButton\n              onAdd={onAddTableLayer}\n              keplerDatasetIds={keplerDatasetIds}\n            />\n          </PanelTitle>\n        </SidePanelSection>\n\n        <SidePanelSection>\n          {isSortByDatasetMode ? (\n            <DatasetLayerGroup\n              datasets={keplerState.visState.datasets}\n              showDatasetTable={keplerActions.visStateActions.showDatasetTable}\n              layers={keplerState.visState.layers}\n              updateTableColor={onUpdateTableColor}\n              removeDataset={onRemoveDataset}\n              layerOrder={keplerState.visState.layerOrder}\n              layerClasses={filteredLayerClasses}\n              uiStateActions={keplerActions.uiStateActions}\n              visStateActions={keplerActions.visStateActions}\n              mapStateActions={keplerActions.mapStateActions}\n              showDeleteDataset={showDeleteDataset}\n            />\n          ) : (\n            <LayerList\n              layers={keplerState.visState.layers}\n              datasets={keplerState.visState.datasets}\n              layerOrder={keplerState.visState.layerOrder}\n              uiStateActions={keplerActions.uiStateActions}\n              visStateActions={keplerActions.visStateActions}\n              mapStateActions={keplerActions.mapStateActions}\n              layerClasses={filteredLayerClasses}\n            />\n          )}\n        </SidePanelSection>\n      </div>\n    </CustomLayerManagerContainer>\n  );\n};\n"]}

package/dist/components/CustomMapDrawPanel.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MapControlTooltipFactory, MapControlToolbarFactory, MapDrawPanelFactory } from '@kepler.gl/components';
+import type { MapDrawPanelProps } from '@kepler.gl/components';
+export declare function CustomMapDrawPanelFactory(...deps: Parameters<typeof MapDrawPanelFactory>): React.FC<MapDrawPanelProps>;
+export declare namespace CustomMapDrawPanelFactory {
+    var deps: (typeof MapControlTooltipFactory | typeof MapControlToolbarFactory)[];
+}
+//# sourceMappingURL=CustomMapDrawPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomMapDrawPanel.d.ts","sourceRoot":"","sources":["../../src/components/CustomMapDrawPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EACL,wBAAwB,EACxB,wBAAwB,EACxB,mBAAmB,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,uBAAuB,CAAC;AAM7D,wBAAgB,yBAAyB,CACvC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,+BA6ChD;yBA9Ce,yBAAyB"}

package/dist/components/CustomMapDrawPanel.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SPDX-License-Identifier: MIT
+// Copyright contributors to the kepler.gl project
+import React, { useCallback } from 'react';
+import { MapDrawPanelFactory, } from '@kepler.gl/components';
+import { XIcon } from 'lucide-react';
+import { Button } from '@sqlrooms/ui';
+CustomMapDrawPanelFactory.deps = MapDrawPanelFactory.deps;
+export function CustomMapDrawPanelFactory(...deps) {
+    // Get the original MapDrawPanel component
+    const OriginalMapDrawPanel = MapDrawPanelFactory(...deps);
+    const CustomMapDrawPanel = React.memo((props) => {
+        const { mapControls, onToggleMapControl } = props;
+        const isActive = mapControls?.mapDraw?.active;
+        const onToggleMenuPanel = useCallback(() => onToggleMapControl('mapDraw'), [onToggleMapControl]);
+        if (!mapControls?.mapDraw?.show) {
+            return null;
+        }
+        return (_jsxs("div", { className: "map-draw-controls", style: { position: 'relative' }, children: [_jsx(OriginalMapDrawPanel, { ...props }), isActive && (_jsx(Button, { variant: "ghost", size: "xs", className: "border-border bg-background hover:bg-accent absolute z-50 h-6 w-6 rounded-full border p-0 shadow-sm", style: { left: '-35px', top: '-20px' }, "aria-label": "Close draw panel", onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onToggleMenuPanel();
+                    }, children: _jsx(XIcon, { className: "h-3 w-3" }) }))] }));
+    });
+    CustomMapDrawPanel.displayName = 'CustomMapDrawPanel';
+    return CustomMapDrawPanel;
+}
+//# sourceMappingURL=CustomMapDrawPanel.js.map

package/dist/components/CustomMapDrawPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomMapDrawPanel.js","sourceRoot":"","sources":["../../src/components/CustomMapDrawPanel.tsx"],"names":[],"mappings":";AAAA,+BAA+B;AAC/B,kDAAkD;AAElD,OAAO,KAAK,EAAE,EAAC,WAAW,EAAC,MAAM,OAAO,CAAC;AACzC,OAAO,EAGL,mBAAmB,GACpB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AACnC,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAEpC,yBAAyB,CAAC,IAAI,GAAG,mBAAmB,CAAC,IAAI,CAAC;AAE1D,MAAM,UAAU,yBAAyB,CACvC,GAAG,IAA4C;IAE/C,0CAA0C;IAC1C,MAAM,oBAAoB,GAAG,mBAAmB,CAAC,GAAG,IAAI,CAAC,CAAC;IAE1D,MAAM,kBAAkB,GAAgC,KAAK,CAAC,IAAI,CAChE,CAAC,KAAK,EAAE,EAAE;QACR,MAAM,EAAC,WAAW,EAAE,kBAAkB,EAAC,GAAG,KAAK,CAAC;QAChD,MAAM,QAAQ,GAAG,WAAW,EAAE,OAAO,EAAE,MAAM,CAAC;QAE9C,MAAM,iBAAiB,GAAG,WAAW,CACnC,GAAG,EAAE,CAAC,kBAAkB,CAAC,SAAS,CAAC,EACnC,CAAC,kBAAkB,CAAC,CACrB,CAAC;QAEF,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;YAChC,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CACL,eAAK,SAAS,EAAC,mBAAmB,EAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,UAAU,EAAC,aAC9D,KAAC,oBAAoB,OAAK,KAAK,GAAI,EAClC,QAAQ,IAAI,CACX,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,qGAAqG,EAC/G,KAAK,EAAE,EAAC,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAC,gBACzB,kBAAkB,EAC7B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;wBACb,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;wBACpB,iBAAiB,EAAE,CAAC;oBACtB,CAAC,YAED,KAAC,KAAK,IAAC,SAAS,EAAC,SAAS,GAAG,GACtB,CACV,IACG,CACP,CAAC;IACJ,CAAC,CACF,CAAC;IAEF,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC;IACtD,OAAO,kBAAkB,CAAC;AAC5B,CAAC","sourcesContent":["// SPDX-License-Identifier: MIT\n// Copyright contributors to the kepler.gl project\n\nimport React, {useCallback} from 'react';\nimport {\n  MapControlTooltipFactory,\n  MapControlToolbarFactory,\n  MapDrawPanelFactory,\n} from '@kepler.gl/components';\nimport type {MapDrawPanelProps} from '@kepler.gl/components';\nimport {XIcon} from 'lucide-react';\nimport {Button} from '@sqlrooms/ui';\n\nCustomMapDrawPanelFactory.deps = MapDrawPanelFactory.deps;\n\nexport function CustomMapDrawPanelFactory(\n  ...deps: Parameters<typeof MapDrawPanelFactory>\n) {\n  // Get the original MapDrawPanel component\n  const OriginalMapDrawPanel = MapDrawPanelFactory(...deps);\n\n  const CustomMapDrawPanel: React.FC<MapDrawPanelProps> = React.memo(\n    (props) => {\n      const {mapControls, onToggleMapControl} = props;\n      const isActive = mapControls?.mapDraw?.active;\n\n      const onToggleMenuPanel = useCallback(\n        () => onToggleMapControl('mapDraw'),\n        [onToggleMapControl],\n      );\n\n      if (!mapControls?.mapDraw?.show) {\n        return null;\n      }\n\n      return (\n        <div className=\"map-draw-controls\" style={{position: 'relative'}}>\n          <OriginalMapDrawPanel {...props} />\n          {isActive && (\n            <Button\n              variant=\"ghost\"\n              size=\"xs\"\n              className=\"border-border bg-background hover:bg-accent absolute z-50 h-6 w-6 rounded-full border p-0 shadow-sm\"\n              style={{left: '-35px', top: '-20px'}}\n              aria-label=\"Close draw panel\"\n              onClick={(e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                onToggleMenuPanel();\n              }}\n            >\n              <XIcon className=\"h-3 w-3\" />\n            </Button>\n          )}\n        </div>\n      );\n    },\n  );\n\n  CustomMapDrawPanel.displayName = 'CustomMapDrawPanel';\n  return CustomMapDrawPanel;\n}\n"]}

package/dist/components/CustomMapLegend.d.ts

@@ -1,6 +1,9 @@
 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 function CustomMapLegendFactory(LayerLegendHeader: ReturnType<typeof LayerLegendHeaderFactory>, LayerLegendContent: ReturnType<typeof LayerLegendContentFactory>): import("react").FC<MapLegendProps & {
+    mapIndex?: number;
+    onClose?: () => void;
+}>;
 export declare namespace CustomMapLegendFactory {
     var deps: (typeof LayerLegendHeaderFactory | typeof LayerLegendContentFactory)[];
 }

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

@@ -1 +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,sCAsJjE;yBAxJe,sBAAsB"}
+{"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;AAiCzE,wBAAgB,sBAAsB,CACpC,iBAAiB,EAAE,UAAU,CAAC,OAAO,wBAAwB,CAAC,EAC9D,kBAAkB,EAAE,UAAU,CAAC,OAAO,yBAAyB,CAAC;eAGjC,MAAM;cAAY,MAAM,IAAI;GAuK5D;yBA5Ke,sBAAsB"}

package/dist/components/CustomMapLegend.js

@@ -8,6 +8,7 @@ import { Button } from '@sqlrooms/ui';
 import { ArrowDown, ArrowRight, ChevronDownIcon, ChevronRightIcon, XIcon, } from 'lucide-react';
 import { useCallback, useContext, useRef, useState, } from 'react';
 import { useStoreWithKepler } from '../KeplerSlice';
+import { SplitMapIndexContext } from './SplitMapIndexContext';
 const defaultActionIcons = {
     expanded: ArrowDown,
     collapsed: ArrowRight,
@@ -17,17 +18,26 @@ CustomMapLegendFactory.deps = [
     LayerLegendContentFactory,
 ];
 export function CustomMapLegendFactory(LayerLegendHeader, LayerLegendContent) {
-    const MapLegend = ({ layers = [], width, isExport, ...restProps }) => {
+    const MapLegend = ({ layers = [], width, isExport, mapIndex: mapIndexProp, onClose, ...restProps }) => {
         const containerW = width || DIMENSIONS.mapControl.width;
         const mapId = useContext(KeplerGlContext).id;
+        const splitMapIndex = useContext(SplitMapIndexContext);
+        const mapIndex = mapIndexProp ?? splitMapIndex;
         const dispatchAction = useStoreWithKepler((state) => state.kepler.dispatchAction);
+        const splitMaps = useStoreWithKepler((state) => state.kepler.map[mapId]?.visState?.splitMaps);
         const handleClose = (evt) => {
             evt.stopPropagation();
-            dispatchAction(mapId, toggleMapControl('mapLegend', 0));
+            if (onClose) {
+                onClose();
+            }
+            else {
+                dispatchAction(mapId, toggleMapControl('mapLegend', 0));
+            }
         };
-        return (_jsx("div", { className: "map-legend border-border border", style: { width: containerW }, children: _jsxs("div", { className: "relative flex flex-col", children: [!isExport && (_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: "Legend" }), _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
-                            .filter((layer) => layer.config.isVisible)
-                            .map((layer, index) => {
+        const isSplit = splitMaps && splitMaps.length > 1;
+        const panelLayers = isSplit && mapIndex != null ? splitMaps[mapIndex]?.layers : undefined;
+        const visibleLayers = layers.filter((layer) => layer.config.isVisible && (!panelLayers || panelLayers[layer.id]));
+        return (_jsx("div", { className: "map-legend border-border border", style: { width: containerW }, children: _jsxs("div", { className: "relative flex flex-col", children: [!isExport && (_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: "Legend" }), _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: visibleLayers.map((layer, index) => {
                             return (_jsx(LayerLegendItem, { layer: layer, containerW: containerW, isExport: isExport, ...restProps }, index));
                         }) })] }) }));
     };

package/dist/components/CustomMapLegend.js.map

@@ -1 +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    isExport,\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\n        className=\"map-legend border-border border\"\n        style={{width: containerW}}\n      >\n        <div className=\"relative flex flex-col\">\n          {!isExport && (\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\">Legend</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          )}\n          <div className=\"flex w-full flex-1 flex-col items-center\">\n            {layers\n              .filter((layer) => layer.config.isVisible)\n              .map((layer, index) => {\n                return (\n                  <LayerLegendItem\n                    key={index}\n                    layer={layer}\n                    containerW={containerW}\n                    isExport={isExport}\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\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 items-center overflow-hidden p-2 text-xs text-ellipsis whitespace-nowrap select-none\">\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={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"]}
+{"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';\nimport {SplitMapIndexContext} from './SplitMapIndexContext';\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<\n    MapLegendProps & {mapIndex?: number; onClose?: () => void}\n  > = ({\n    layers = [],\n    width,\n    isExport,\n    mapIndex: mapIndexProp,\n    onClose,\n    ...restProps\n  }) => {\n    const containerW = width || DIMENSIONS.mapControl.width;\n    const mapId = useContext(KeplerGlContext).id;\n    const splitMapIndex = useContext(SplitMapIndexContext);\n    const mapIndex = mapIndexProp ?? splitMapIndex;\n    const dispatchAction = useStoreWithKepler(\n      (state) => state.kepler.dispatchAction,\n    );\n    const splitMaps = useStoreWithKepler(\n      (state) => state.kepler.map[mapId]?.visState?.splitMaps,\n    );\n    const handleClose = (evt: React.MouseEvent<HTMLButtonElement>) => {\n      evt.stopPropagation();\n      if (onClose) {\n        onClose();\n      } else {\n        dispatchAction(mapId, toggleMapControl('mapLegend', 0));\n      }\n    };\n\n    const isSplit = splitMaps && splitMaps.length > 1;\n    const panelLayers =\n      isSplit && mapIndex != null ? splitMaps[mapIndex]?.layers : undefined;\n\n    const visibleLayers = layers.filter(\n      (layer) =>\n        layer.config.isVisible && (!panelLayers || panelLayers[layer.id]),\n    );\n\n    return (\n      <div\n        className=\"map-legend border-border border\"\n        style={{width: containerW}}\n      >\n        <div className=\"relative flex flex-col\">\n          {!isExport && (\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\">Legend</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          )}\n          <div className=\"flex w-full flex-1 flex-col items-center\">\n            {visibleLayers.map((layer, index) => {\n              return (\n                <LayerLegendItem\n                  key={index}\n                  layer={layer}\n                  containerW={containerW}\n                  isExport={isExport}\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\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 items-center overflow-hidden p-2 text-xs text-ellipsis whitespace-nowrap select-none\">\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={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

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

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

@@ -1 +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"}
+{"version":3,"file":"CustomMapLegendPanel.d.ts","sourceRoot":"","sources":["../../src/components/CustomMapLegendPanel.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,sBAAsB,EACtB,wBAAwB,EACxB,gBAAgB,EAChB,qBAAqB,EAEtB,MAAM,uBAAuB,CAAC;AAI/B,wBAAgB,2BAA2B,CACzC,iBAAiB,EAAE,UAAU,CAAC,OAAO,wBAAwB,CAAC,EAC9D,eAAe,EAAE,UAAU,CAAC,OAAO,sBAAsB,CAAC,EAC1D,SAAS,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,GAC7C,UAAU,CAAC,OAAO,qBAAqB,CAAC,CA0E1C;yBA9Ee,2BAA2B"}

package/dist/components/CustomMapLegendPanel.js

@@ -1,10 +1,25 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { MapLegendPanelFactory, } from '@kepler.gl/components';
+import { useCallback, useState } from 'react';
+import { Icons, MapControlButton, MapLegendPanelFactory, } from '@kepler.gl/components';
 CustomMapLegendPanelFactory.deps = MapLegendPanelFactory.deps;
-export function CustomMapLegendPanelFactory(...deps) {
-    const MapLegendPanel = MapLegendPanelFactory(...deps);
+export function CustomMapLegendPanelFactory(MapControlTooltip, MapControlPanel, MapLegend) {
+    const OriginalMapLegendPanel = MapLegendPanelFactory(MapControlTooltip, MapControlPanel, MapLegend);
+    const SplitPaneLegend = (props) => {
+        const [isActive, setIsActive] = useState(false);
+        const mapLegend = props.mapControls?.mapLegend;
+        const toggleLegend = useCallback((e) => {
+            e?.preventDefault();
+            setIsActive((prev) => !prev);
+        }, []);
+        if (!mapLegend?.show)
+            return null;
+        return isActive ? (_jsxs(_Fragment, { children: [_jsx("style", { children: `.split-legend .map-control__panel-header { display: none !important; }` }), _jsx("div", { className: "split-legend", children: _jsx(MapControlPanel, { scale: props.scale, header: "header.layerLegend", onClick: toggleLegend, pinnable: false, disableClose: false, isExport: props.isExport, logoComponent: props.logoComponent, children: _jsx(MapLegend, { layers: props.layers, mapState: props.mapState, disableEdit: mapLegend.disableEdit, isExport: props.isExport, onLayerVisConfigChange: props.onLayerVisConfigChange, onToggleLayerVisibility: props.onToggleLayerVisibility, ...{ onClose: toggleLegend } }) }) })] })) : (_jsx(MapControlTooltip, { id: "show-legend", message: "tooltip.showLegend", children: _jsx(MapControlButton, { className: "map-control-button show-legend", onClick: toggleLegend, children: _jsx(Icons.Legend, { height: "22px" }) }) }));
+    };
     const CustomMapLegendPanel = (props) => {
-        return (_jsxs(_Fragment, { children: [_jsx("style", { children: `.draggable-legend .map-control__panel-header { display: none !important; }` }), _jsx(MapLegendPanel, { ...props })] }));
+        if (props.isSplit) {
+            return _jsx(SplitPaneLegend, { ...props });
+        }
+        return (_jsxs(_Fragment, { children: [_jsx("style", { children: `.draggable-legend .map-control__panel-header { display: none !important; }` }), _jsx(OriginalMapLegendPanel, { ...props })] }));
     };
     CustomMapLegendPanel.displayName = 'CustomMapLegendPanel';
     return CustomMapLegendPanel;

package/dist/components/CustomMapLegendPanel.js.map

@@ -1 +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"]}
+{"version":3,"file":"CustomMapLegendPanel.js","sourceRoot":"","sources":["../../src/components/CustomMapLegendPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,WAAW,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC5C,OAAO,EACL,KAAK,EACL,gBAAgB,EAIhB,qBAAqB,GAEtB,MAAM,uBAAuB,CAAC;AAE/B,2BAA2B,CAAC,IAAI,GAAG,qBAAqB,CAAC,IAAI,CAAC;AAE9D,MAAM,UAAU,2BAA2B,CACzC,iBAA8D,EAC9D,eAA0D,EAC1D,SAA8C;IAE9C,MAAM,sBAAsB,GAAG,qBAAqB,CAClD,iBAAiB,EACjB,eAAe,EACf,SAAS,CACV,CAAC;IAEF,MAAM,eAAe,GAAG,CACtB,KAAgD,EAChD,EAAE;QACF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAChD,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,EAAE,SAAS,CAAC;QAE/C,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,CAAoB,EAAE,EAAE;YACxD,CAAC,EAAE,cAAc,EAAE,CAAC;YACpB,WAAW,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;QAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,IAAI,CAAC,SAAS,EAAE,IAAI;YAAE,OAAO,IAAI,CAAC;QAElC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,8BACE,0BAAQ,wEAAwE,GAAS,EACzF,cAAK,SAAS,EAAC,cAAc,YAC3B,KAAC,eAAe,IACd,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAC,oBAAoB,EAC3B,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,KAAK,EACf,YAAY,EAAE,KAAK,EACnB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,aAAa,EAAE,KAAK,CAAC,aAAa,YAElC,KAAC,SAAS,IACR,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAE,SAAS,CAAC,WAAW,EAClC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,sBAAsB,EAAE,KAAK,CAAC,sBAAsB,EACpD,uBAAuB,EAAE,KAAK,CAAC,uBAAuB,KACjD,EAAC,OAAO,EAAE,YAAY,EAAS,GACpC,GACc,GACd,IACL,CACJ,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,IAAC,EAAE,EAAC,aAAa,EAAC,OAAO,EAAC,oBAAoB,YAC9D,KAAC,gBAAgB,IACf,SAAS,EAAC,gCAAgC,EAC1C,OAAO,EAAE,YAAY,YAErB,KAAC,KAAK,CAAC,MAAM,IAAC,MAAM,EAAC,MAAM,GAAG,GACb,GACD,CACrB,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,oBAAoB,GAAG,CAC3B,KAAmE,EACnE,EAAE;QACF,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO,KAAC,eAAe,OAAK,KAAK,GAAI,CAAC;QACxC,CAAC;QAED,OAAO,CACL,8BACE,0BAAQ,4EAA4E,GAAS,EAC7F,KAAC,sBAAsB,OAAK,KAAK,GAAI,IACpC,CACJ,CAAC;IACJ,CAAC,CAAC;IAEF,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAC;IAC1D,OAAO,oBAAoB,CAAC;AAC9B,CAAC","sourcesContent":["import {useCallback, useState} from 'react';\nimport {\n  Icons,\n  MapControlButton,\n  MapControlPanelFactory,\n  MapControlTooltipFactory,\n  MapLegendFactory,\n  MapLegendPanelFactory,\n  MapLegendPanelProps,\n} from '@kepler.gl/components';\n\nCustomMapLegendPanelFactory.deps = MapLegendPanelFactory.deps;\n\nexport function CustomMapLegendPanelFactory(\n  MapControlTooltip: ReturnType<typeof MapControlTooltipFactory>,\n  MapControlPanel: ReturnType<typeof MapControlPanelFactory>,\n  MapLegend: ReturnType<typeof MapLegendFactory>,\n): ReturnType<typeof MapLegendPanelFactory> {\n  const OriginalMapLegendPanel = MapLegendPanelFactory(\n    MapControlTooltip,\n    MapControlPanel,\n    MapLegend,\n  );\n\n  const SplitPaneLegend = (\n    props: MapLegendPanelProps & {mapIndex?: number},\n  ) => {\n    const [isActive, setIsActive] = useState(false);\n    const mapLegend = props.mapControls?.mapLegend;\n\n    const toggleLegend = useCallback((e?: React.MouseEvent) => {\n      e?.preventDefault();\n      setIsActive((prev) => !prev);\n    }, []);\n\n    if (!mapLegend?.show) return null;\n\n    return isActive ? (\n      <>\n        <style>{`.split-legend .map-control__panel-header { display: none !important; }`}</style>\n        <div className=\"split-legend\">\n          <MapControlPanel\n            scale={props.scale}\n            header=\"header.layerLegend\"\n            onClick={toggleLegend}\n            pinnable={false}\n            disableClose={false}\n            isExport={props.isExport}\n            logoComponent={props.logoComponent}\n          >\n            <MapLegend\n              layers={props.layers}\n              mapState={props.mapState}\n              disableEdit={mapLegend.disableEdit}\n              isExport={props.isExport}\n              onLayerVisConfigChange={props.onLayerVisConfigChange}\n              onToggleLayerVisibility={props.onToggleLayerVisibility}\n              {...({onClose: toggleLegend} as any)}\n            />\n          </MapControlPanel>\n        </div>\n      </>\n    ) : (\n      <MapControlTooltip id=\"show-legend\" message=\"tooltip.showLegend\">\n        <MapControlButton\n          className=\"map-control-button show-legend\"\n          onClick={toggleLegend}\n        >\n          <Icons.Legend height=\"22px\" />\n        </MapControlButton>\n      </MapControlTooltip>\n    );\n  };\n\n  const CustomMapLegendPanel = (\n    props: MapLegendPanelProps & {mapIndex?: number; isSplit?: boolean},\n  ) => {\n    if (props.isSplit) {\n      return <SplitPaneLegend {...props} />;\n    }\n\n    return (\n      <>\n        <style>{`.draggable-legend .map-control__panel-header { display: none !important; }`}</style>\n        <OriginalMapLegendPanel {...props} />\n      </>\n    );\n  };\n\n  CustomMapLegendPanel.displayName = 'CustomMapLegendPanel';\n  return CustomMapLegendPanel;\n}\n"]}

package/dist/components/KeplerAddDataDialog.d.ts

@@ -1,5 +1,4 @@
 import { UseDisclosureReturnValue } from '@sqlrooms/ui';
-import type { KeplerS3BrowserProps } from './KeplerS3Browser';
 export type LoadTileSet = (args: {
     tileset: {
         name: string;
@@ -19,6 +18,6 @@ export type KeplerAddDataDialogProps = {
     loadFiles: (files: FileList | string[]) => Promise<void>;
     method?: AddDataMethods;
     acceptedFormats?: string[];
-} & KeplerS3BrowserProps;
-export declare const KeplerAddDataDialog: ({ addDataModal, loadTileSet, loadFiles, listS3Files, loadS3Files, saveS3Credentials, loadS3Credentials, deleteS3Credentials, s3Browser, method, acceptedFormats, }: KeplerAddDataDialogProps) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const KeplerAddDataDialog: ({ addDataModal, loadTileSet, loadFiles, method, acceptedFormats, }: KeplerAddDataDialogProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=KeplerAddDataDialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"KeplerAddDataDialog.d.ts","sourceRoot":"","sources":["../../src/components/KeplerAddDataDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAML,wBAAwB,EAKzB,MAAM,cAAc,CAAC;AAMtB,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,mBAAmB,CAAC;AAe5D,MAAM,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE;IAC/B,OAAO,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;KAAC,CAAC;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC,KAAK,IAAI,CAAC;AA+BX,oBAAY,cAAc;IACxB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,EAAE,OAAO;CACV;AAgBD,MAAM,MAAM,wBAAwB,GAAG;IACrC,YAAY,EAAE,IAAI,CAAC,wBAAwB,EAAE,QAAQ,GAAG,SAAS,CAAC,CAAC;IACnE,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B,GAAG,oBAAoB,CAAC;AAEzB,eAAO,MAAM,mBAAmB,GAAI,oKAYjC,wBAAwB,4CAkG1B,CAAC"}
+{"version":3,"file":"KeplerAddDataDialog.d.ts","sourceRoot":"","sources":["../../src/components/KeplerAddDataDialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAUL,wBAAwB,EACzB,MAAM,cAAc,CAAC;AAmBtB,MAAM,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE;IAC/B,OAAO,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;KAAC,CAAC;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC,KAAK,IAAI,CAAC;AA+BX,oBAAY,cAAc;IACxB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,EAAE,OAAO;CACV;AAgBD,MAAM,MAAM,wBAAwB,GAAG;IACrC,YAAY,EAAE,IAAI,CAAC,wBAAwB,EAAE,QAAQ,GAAG,SAAS,CAAC,CAAC;IACnE,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,oEAYjC,wBAAwB,4CAkG1B,CAAC"}

package/dist/components/KeplerAddDataDialog.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from 'react';
+import { Icons, LoadTileSetFactory } from '@kepler.gl/components';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Tabs, TabsContent, TabsList, TabsTrigger, } from '@sqlrooms/ui';
-import { LoadTileSetFactory, Icons } from '@kepler.gl/components';
 import { FileDropInput } from './FileDropInput';
 import { getKeplerFactory } from './KeplerInjector';
 import { KeplerProvider } from './KeplerProvider';
-import { KeplerS3Browser } from './KeplerS3Browser';
+// import type {KeplerS3BrowserProps} from './KeplerS3Browser';
 import { useIntl } from 'react-intl';
 const DEFAULT_ACCEPTED_FORMATS = [
     'csv',
@@ -46,16 +46,26 @@ const ADD_DATA_METHODS = [
     //   value: AddDataMethods.S3,
     // },
 ];
-export const KeplerAddDataDialog = ({ addDataModal, loadTileSet, loadFiles, listS3Files, loadS3Files, saveS3Credentials, loadS3Credentials, deleteS3Credentials, s3Browser, method = AddDataMethods.Upload, acceptedFormats = DEFAULT_ACCEPTED_FORMATS, }) => {
+export const KeplerAddDataDialog = ({ addDataModal, loadTileSet, loadFiles, 
+// listS3Files,
+// loadS3Files,
+// saveS3Credentials,
+// loadS3Credentials,
+// deleteS3Credentials,
+// s3Browser,
+method = AddDataMethods.Upload, acceptedFormats = DEFAULT_ACCEPTED_FORMATS, }) => {
     const [currentMethod, selectCurrentMethod] = useState(method);
     const onFileDrop = useCallback((files) => {
         loadFiles(files);
         addDataModal.onClose();
     }, [loadFiles, addDataModal]);
-    const onLoadS3Files = useCallback(async (...args) => {
-        await loadS3Files(...args);
-        addDataModal.onClose();
-    }, [loadS3Files, addDataModal]);
-    return (_jsx(KeplerProvider, { mapId: '', children: _jsx(Dialog, { open: addDataModal.isOpen, onOpenChange: (isOpen) => !isOpen && addDataModal.onClose(), children: _jsxs(DialogContent, { className: "h-[80vh] max-w-4xl min-w-md grid-rows-[auto_1fr]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Add Data" }), _jsx(DialogDescription, { children: "Add data to the project." })] }), _jsxs(Tabs, { defaultValue: currentMethod, className: "flex h-full w-full flex-col gap-4 overflow-auto", onValueChange: (value) => selectCurrentMethod(value), children: [_jsx(TabsList, { className: "flex h-10 items-center justify-start gap-1", children: ADD_DATA_METHODS.map(({ value, label }) => (_jsx(TabsTrigger, { value: value, className: "flex items-center gap-2", children: _jsx("span", { className: "text-muted-foreground", children: label }) }, value))) }), _jsx(TabsContent, { value: AddDataMethods.Upload, className: "h-full w-full data-[state=inactive]:hidden", children: _jsx("div", { className: "h-min-[200px] flex h-full w-full items-center justify-center", children: _jsx(FileDropInput, { onFileDrop: onFileDrop, children: acceptedFormats ? (_jsx("div", { className: "text-muted-foreground flex flex-wrap justify-center gap-2 opacity-80", children: acceptedFormats.map((ext) => (_jsx(Icons.FileType, { ext: ext, height: "50px", fontSize: "9px" }, ext))) })) : null }) }) }), _jsx(TabsContent, { value: AddDataMethods.TileSet, className: "h-full w-full overflow-auto data-[state=inactive]:hidden", children: _jsx(LoadTileSetContent, { loadTileSet: loadTileSet, onClose: addDataModal.onClose }) }), _jsx(TabsContent, { value: AddDataMethods.S3, className: "h-full w-full data-[state=inactive]:hidden", children: _jsx(KeplerS3Browser, { listS3Files: listS3Files, s3Browser: s3Browser, loadS3Files: onLoadS3Files, saveS3Credentials: saveS3Credentials, loadS3Credentials: loadS3Credentials, deleteS3Credentials: deleteS3Credentials }) })] })] }) }) }));
+    // const onLoadS3Files = useCallback(
+    //   async (...args: Parameters<KeplerS3BrowserProps['loadS3Files']>) => {
+    //     await loadS3Files(...args);
+    //     addDataModal.onClose();
+    //   },
+    //   [loadS3Files, addDataModal],
+    // );
+    return (_jsx(KeplerProvider, { mapId: '', children: _jsx(Dialog, { open: addDataModal.isOpen, onOpenChange: (isOpen) => !isOpen && addDataModal.onClose(), children: _jsxs(DialogContent, { className: "h-[80vh] max-w-4xl min-w-md grid-rows-[auto_1fr]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Add Data" }), _jsx(DialogDescription, { children: "Add data to the project." })] }), _jsxs(Tabs, { defaultValue: currentMethod, className: "flex h-full w-full flex-col gap-4 overflow-auto", onValueChange: (value) => selectCurrentMethod(value), children: [_jsx(TabsList, { className: "flex h-10 items-center justify-start gap-1", children: ADD_DATA_METHODS.map(({ value, label }) => (_jsx(TabsTrigger, { value: value, className: "flex items-center gap-2", children: _jsx("span", { className: "text-muted-foreground", children: label }) }, value))) }), _jsx(TabsContent, { value: AddDataMethods.Upload, className: "h-full w-full data-[state=inactive]:hidden", children: _jsx("div", { className: "h-min-[200px] flex h-full w-full items-center justify-center", children: _jsx(FileDropInput, { onFileDrop: onFileDrop, children: acceptedFormats ? (_jsx("div", { className: "text-muted-foreground flex flex-wrap justify-center gap-2 opacity-80", children: acceptedFormats.map((ext) => (_jsx(Icons.FileType, { ext: ext, height: "50px", fontSize: "9px" }, ext))) })) : null }) }) }), _jsx(TabsContent, { value: AddDataMethods.TileSet, className: "h-full w-full overflow-auto data-[state=inactive]:hidden", children: _jsx(LoadTileSetContent, { loadTileSet: loadTileSet, onClose: addDataModal.onClose }) })] })] }) }) }));
 };
 //# sourceMappingURL=KeplerAddDataDialog.js.map