@sqlrooms/kepler 0.29.0-rc.6 → 0.29.0-rc.8

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, 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};\ntype TypeaheadListItemComponent =\n  (typeof Typeahead.defaultProps)['customListItemComponent'];\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={\n              TableListItem as unknown as TypeaheadListItemComponent\n            }\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"]}
+{"version":3,"file":"CustomLayerManager.js","sourceRoot":"","sources":["../../src/components/CustomLayerManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport {useIntl} from 'react-intl';\nimport styled from 'styled-components';\n\nimport {\n  LayerListFactory,\n  DatasetLayerGroupFactory,\n  PanelTitleFactory,\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';\nimport {Plus} from 'lucide-react';\nimport {Button} from '@sqlrooms/ui';\n\nimport {getKeplerFactory} from './KeplerInjector';\nimport {\n  KeplerActions,\n  useKeplerStateActions,\n} from '../hooks/useKeplerStateActions';\nimport {\n  buildKeplerTableSourceOptions,\n  type KeplerSourceDataset,\n  type KeplerTableSourceOption,\n} from '../keplerTableSelection';\nimport {useStoreWithKepler} from '../KeplerSlice';\nimport type {RGBColor} from '@kepler.gl/types';\nimport {KeplerTableSourceSelector} from './KeplerTableSourceSelector';\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\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  datasets: Record<string, KeplerSourceDataset>;\n  disabled?: boolean;\n}> = ({onAdd, datasets, disabled}) => {\n  const [isAdding, setIsAdding] = useState(false);\n  const intl = useIntl();\n\n  const dbTables = useStoreWithKepler((state) => state.db.tables);\n  const tableSelection = useStoreWithKepler(\n    (state) => state.kepler.tableSelection,\n  );\n\n  const options = useMemo(() => {\n    return buildKeplerTableSourceOptions({\n      dbTables,\n      datasets,\n      tableSelection,\n    });\n  }, [datasets, dbTables, tableSelection]);\n\n  const handleSelect = useCallback(\n    (option: KeplerTableSourceOption) => {\n      setIsAdding(true);\n      onAdd(option.value)\n        .catch((e) => console.error('Failed to add layer:', e))\n        .finally(() => setIsAdding(false));\n    },\n    [onAdd],\n  );\n\n  return (\n    <KeplerTableSourceSelector\n      disabled={!options.length || disabled || isAdding}\n      options={options}\n      popoverAlign=\"end\"\n      searchPlaceholder={\n        intl ? intl.formatMessage({id: 'placeholder.search'}) : 'Search'\n      }\n      onSelect={handleSelect}\n      renderTrigger={({disabled: isDisabled}) => (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"xs\"\n          className=\"add-layer-button\"\n          disabled={isDisabled}\n        >\n          <Plus className=\"h-3.5 w-3.5\" />\n          {intl.formatMessage({id: 'layerManager.addLayer'})}\n        </Button>\n      )}\n    />\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 onAddTableLayer = useCallback(\n    async (tableName: string) => {\n      const keplerDatasets = keplerState?.visState.datasets;\n      if (!keplerDatasets?.[tableName]) {\n        await addTableToMap({\n          mapId,\n          tableName,\n          options: {\n            autoCreateLayers: true,\n            centerMap: true,\n          },\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              datasets={keplerState.visState.datasets}\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/CustomMapLegendPanel.d.ts

@@ -1,4 +1,4 @@
-import { MapControlPanelFactory, MapControlTooltipFactory, MapLegendFactory, MapLegendPanelFactory } from '@kepler.gl/components';
+import { MapControlTooltipFactory, MapControlPanelFactory, 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 MapControlTooltipFactory | typeof MapControlPanelFactory | typeof MapLegendFactory)[];

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"CustomMapLegendPanel.d.ts","sourceRoot":"","sources":["../../src/components/CustomMapLegendPanel.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,wBAAwB,EACxB,sBAAsB,EACtB,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,CAsE1C;yBA1Ee,2BAA2B"}

package/dist/components/CustomMapLegendPanel.js

@@ -1,25 +1,33 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 import { Icons, MapControlButton, MapLegendPanelFactory, } from '@kepler.gl/components';
 CustomMapLegendPanelFactory.deps = 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 isActive = mapLegend?.active;
+        const { onToggleMapControl } = props;
         const toggleLegend = useCallback((e) => {
             e?.preventDefault();
-            setIsActive((prev) => !prev);
-        }, []);
+            onToggleMapControl('mapLegend');
+        }, [onToggleMapControl]);
         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" }) }) }));
+        // The secondary (right) pane only shows the toggle button
+        if (props.mapIndex !== 0) {
+            return (_jsx(MapControlTooltip, { id: "show-legend", message: isActive ? 'tooltip.hideLegend' : 'tooltip.showLegend', children: _jsx(MapControlButton, { className: "map-control-button show-legend", active: isActive, onClick: toggleLegend, children: _jsx(Icons.Legend, { height: "22px" }) }) }));
+        }
+        // Primary (left) pane: render the full draggable legend panel
+        // (OriginalMapLegendPanel handles DraggableLegend + createPortal,
+        // and MapControlPanel renders "Unlock Viewport" / "Sync Zoom" in its header)
+        return (_jsxs(_Fragment, { children: [_jsx("style", { children: `.draggable-legend .map-control__panel-header:not(.map-control__panel-split-viewport-tools) { display: none !important; }` }), _jsx(OriginalMapLegendPanel, { ...props })] }));
     };
     const CustomMapLegendPanel = (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 })] }));
+        return (_jsxs(_Fragment, { children: [_jsx("style", { children: `.draggable-legend .map-control__panel-header:not(.map-control__panel-split-viewport-tools) { 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,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"]}
+{"version":3,"file":"CustomMapLegendPanel.js","sourceRoot":"","sources":["../../src/components/CustomMapLegendPanel.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAC,WAAW,EAAC,MAAM,OAAO,CAAC;AACzC,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,KAAmE,EACnE,EAAE;QACF,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,EAAE,SAAS,CAAC;QAC/C,MAAM,QAAQ,GAAG,SAAS,EAAE,MAAM,CAAC;QACnC,MAAM,EAAC,kBAAkB,EAAC,GAAG,KAAK,CAAC;QAEnC,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAoB,EAAE,EAAE;YACvB,CAAC,EAAE,cAAc,EAAE,CAAC;YACpB,kBAAkB,CAAC,WAAW,CAAC,CAAC;QAClC,CAAC,EACD,CAAC,kBAAkB,CAAC,CACrB,CAAC;QAEF,IAAI,CAAC,SAAS,EAAE,IAAI;YAAE,OAAO,IAAI,CAAC;QAElC,0DAA0D;QAC1D,IAAI,KAAK,CAAC,QAAQ,KAAK,CAAC,EAAE,CAAC;YACzB,OAAO,CACL,KAAC,iBAAiB,IAChB,EAAE,EAAC,aAAa,EAChB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,YAE/D,KAAC,gBAAgB,IACf,SAAS,EAAC,gCAAgC,EAC1C,MAAM,EAAE,QAAQ,EAChB,OAAO,EAAE,YAAY,YAErB,KAAC,KAAK,CAAC,MAAM,IAAC,MAAM,EAAC,MAAM,GAAG,GACb,GACD,CACrB,CAAC;QACJ,CAAC;QAED,8DAA8D;QAC9D,kEAAkE;QAClE,6EAA6E;QAC7E,OAAO,CACL,8BACE,0BAAQ,0HAA0H,GAAS,EAC3I,KAAC,sBAAsB,OAAK,KAAK,GAAI,IACpC,CACJ,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,0HAA0H,GAAS,EAC3I,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 React, {useCallback} from 'react';\nimport {\n  Icons,\n  MapControlButton,\n  MapControlTooltipFactory,\n  MapControlPanelFactory,\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; isSplit?: boolean},\n  ) => {\n    const mapLegend = props.mapControls?.mapLegend;\n    const isActive = mapLegend?.active;\n    const {onToggleMapControl} = props;\n\n    const toggleLegend = useCallback(\n      (e?: React.MouseEvent) => {\n        e?.preventDefault();\n        onToggleMapControl('mapLegend');\n      },\n      [onToggleMapControl],\n    );\n\n    if (!mapLegend?.show) return null;\n\n    // The secondary (right) pane only shows the toggle button\n    if (props.mapIndex !== 0) {\n      return (\n        <MapControlTooltip\n          id=\"show-legend\"\n          message={isActive ? 'tooltip.hideLegend' : 'tooltip.showLegend'}\n        >\n          <MapControlButton\n            className=\"map-control-button show-legend\"\n            active={isActive}\n            onClick={toggleLegend}\n          >\n            <Icons.Legend height=\"22px\" />\n          </MapControlButton>\n        </MapControlTooltip>\n      );\n    }\n\n    // Primary (left) pane: render the full draggable legend panel\n    // (OriginalMapLegendPanel handles DraggableLegend + createPortal,\n    // and MapControlPanel renders \"Unlock Viewport\" / \"Sync Zoom\" in its header)\n    return (\n      <>\n        <style>{`.draggable-legend .map-control__panel-header:not(.map-control__panel-split-viewport-tools) { display: none !important; }`}</style>\n        <OriginalMapLegendPanel {...props} />\n      </>\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:not(.map-control__panel-split-viewport-tools) { display: none !important; }`}</style>\n        <OriginalMapLegendPanel {...props} />\n      </>\n    );\n  };\n\n  CustomMapLegendPanel.displayName = 'CustomMapLegendPanel';\n  return CustomMapLegendPanel;\n}\n"]}

package/dist/components/CustomSourceDataSelector.d.ts

@@ -0,0 +1,18 @@
+import { SourceDataSelectorProps } from '@kepler.gl/components';
+import React from 'react';
+type SourceDataSelectorContent = React.ComponentType<SourceDataSelectorProps>;
+type CustomSourceDataSelectorProps = SourceDataSelectorProps & {
+    id?: string;
+};
+/**
+ * Kepler uses the same SourceDataSelector in layer config and filter config.
+ * Layer config passes a layer id, so only that version includes unloaded
+ * SQLRooms table options. Filter selectors use the same UI with loaded Kepler
+ * datasets only because a filter needs a loaded dataset to expose fields.
+ */
+export declare function CustomSourceDataSelectorFactory(_DataSourceSelectorContent: SourceDataSelectorContent): React.FC<CustomSourceDataSelectorProps>;
+export declare namespace CustomSourceDataSelectorFactory {
+    var deps: typeof import("@kepler.gl/components/dist/side-panel/common/source-data-selector-content").default[];
+}
+export {};
+//# sourceMappingURL=CustomSourceDataSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomSourceDataSelector.d.ts","sourceRoot":"","sources":["../../src/components/CustomSourceDataSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,uBAAuB,EACxB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,KAAuC,MAAM,OAAO,CAAC;AAW5D,KAAK,yBAAyB,GAAG,KAAK,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;AAC9E,KAAK,6BAA6B,GAAG,uBAAuB,GAAG;IAC7D,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAyCF;;;;;GAKG;AACH,wBAAgB,+BAA+B,CAC7C,0BAA0B,EAAE,yBAAyB,GACpD,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAAC,CAoJzC;yBAtJe,+BAA+B"}

package/dist/components/CustomSourceDataSelector.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PanelLabel, SidePanelSection, SourceDataSelectorFactory, } from '@kepler.gl/components';
+import { FormattedMessage } from '@kepler.gl/localization';
+import { Button, cn } from '@sqlrooms/ui';
+import { useCallback, useMemo, useState } from 'react';
+import { useStoreWithKepler } from '../KeplerSlice';
+import { buildKeplerTableSourceOptions, } from '../keplerTableSelection';
+import { KeplerTableSourceSelector } from './KeplerTableSourceSelector';
+function getSelectedDatasetId(value) {
+    if (value === null) {
+        return undefined;
+    }
+    if (Array.isArray(value)) {
+        if (value.length === 0) {
+            return undefined;
+        }
+        return getSelectedDatasetId(value[0]);
+    }
+    if (typeof value === 'string') {
+        return value;
+    }
+    if (typeof value === 'number') {
+        return String(value);
+    }
+    if (typeof value === 'boolean') {
+        return String(value);
+    }
+    if (typeof value === 'object') {
+        const option = value;
+        if (typeof option.value === 'string') {
+            return option.value;
+        }
+        if (typeof option.id === 'string') {
+            return option.id;
+        }
+    }
+    return undefined;
+}
+/**
+ * Kepler uses the same SourceDataSelector in layer config and filter config.
+ * Layer config passes a layer id, so only that version includes unloaded
+ * SQLRooms table options. Filter selectors use the same UI with loaded Kepler
+ * datasets only because a filter needs a loaded dataset to expose fields.
+ */
+export function CustomSourceDataSelectorFactory(_DataSourceSelectorContent) {
+    const SourceDataSelector = ({ dataId, datasets, disabled, onSelect, defaultValue = 'Select A Dataset', className, id: layerId, }) => {
+        const [isLoadingTable, setIsLoadingTable] = useState(false);
+        const dbTables = useStoreWithKepler((state) => state.db.tables);
+        const tableSelection = useStoreWithKepler((state) => state.kepler.tableSelection);
+        const addTableToMap = useStoreWithKepler((state) => state.kepler.addTableToMap);
+        const keplerMap = useStoreWithKepler((state) => state.kepler.map);
+        const mapId = useMemo(() => {
+            if (!layerId) {
+                return undefined;
+            }
+            for (const [candidateMapId, mapState] of Object.entries(keplerMap)) {
+                const hasLayer = mapState?.visState?.layers?.some((layer) => layer.id === layerId);
+                if (hasLayer) {
+                    return candidateMapId;
+                }
+            }
+            return undefined;
+        }, [keplerMap, layerId]);
+        const mapDatasets = useMemo(() => {
+            if (!mapId) {
+                return undefined;
+            }
+            return keplerMap[mapId]?.visState.datasets;
+        }, [keplerMap, mapId]);
+        const loadedDatasetIds = useMemo(() => Object.keys(mapDatasets ?? datasets), [datasets, mapDatasets]);
+        const options = useMemo(() => {
+            return buildKeplerTableSourceOptions({
+                dbTables,
+                datasets,
+                includeUnloadedTables: Boolean(layerId && mapId),
+                loadedDatasetIds,
+                tableSelection,
+            });
+        }, [datasets, dbTables, layerId, loadedDatasetIds, mapId, tableSelection]);
+        const handleSelect = useCallback((option) => {
+            if (!layerId || !mapId) {
+                onSelect(option.value);
+                return;
+            }
+            if (option.isLoaded) {
+                onSelect(option.value);
+                return;
+            }
+            setIsLoadingTable(true);
+            void addTableToMap({
+                mapId,
+                tableName: option.value,
+                options: {
+                    autoCreateLayers: false,
+                    centerMap: false,
+                },
+            })
+                .then(() => {
+                onSelect(option.value);
+            })
+                .catch((e) => {
+                console.error('Failed to load layer data source:', e);
+            })
+                .finally(() => {
+                setIsLoadingTable(false);
+            });
+        }, [addTableToMap, layerId, mapId, onSelect]);
+        const selectedValue = getSelectedDatasetId(dataId);
+        const selectedDataset = selectedValue ? datasets[selectedValue] : undefined;
+        const selectedOption = options.find((option) => option.value === selectedValue);
+        const selectedLabel = selectedOption?.label ??
+            selectedDataset?.label ??
+            selectedValue ??
+            defaultValue;
+        const selectedColor = selectedOption?.color ??
+            selectedDataset?.color ?? [143, 149, 161];
+        const isDisabled = Boolean(disabled || isLoadingTable || !options.length);
+        return (_jsxs(SidePanelSection, { className: "data-source-selector", children: [_jsx(PanelLabel, { children: _jsx(FormattedMessage, { id: "misc.dataSource" }) }), _jsx(KeplerTableSourceSelector, { disabled: isDisabled, options: options, popoverClassName: "w-[360px]", searchPlaceholder: "Search", selectedValue: selectedValue, onSelect: handleSelect, renderTrigger: ({ disabled: triggerDisabled, selectedOption }) => {
+                        const triggerColor = selectedOption?.color ?? selectedColor;
+                        const triggerLabel = selectedOption?.label ?? selectedLabel;
+                        return (_jsxs(Button, { type: "button", variant: "secondary", className: cn(className, 'h-9 w-full justify-start gap-2.5 rounded-sm px-3 text-left text-xs font-semibold'), disabled: triggerDisabled, children: [_jsx("span", { className: "h-2.5 w-2.5 shrink-0", style: {
+                                        backgroundColor: `rgb(${triggerColor.join(',')})`,
+                                    } }), _jsx("span", { className: "min-w-0 truncate", children: triggerLabel })] }));
+                    } })] }));
+    };
+    SourceDataSelector.displayName = 'CustomSourceDataSelector';
+    return SourceDataSelector;
+}
+CustomSourceDataSelectorFactory.deps = SourceDataSelectorFactory.deps;
+//# sourceMappingURL=CustomSourceDataSelector.js.map

package/dist/components/CustomSourceDataSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomSourceDataSelector.js","sourceRoot":"","sources":["../../src/components/CustomSourceDataSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  PanelLabel,\n  SidePanelSection,\n  SourceDataSelectorFactory,\n  SourceDataSelectorProps,\n} from '@kepler.gl/components';\nimport {FormattedMessage} from '@kepler.gl/localization';\nimport {Button, cn} from '@sqlrooms/ui';\nimport React, {useCallback, useMemo, useState} from 'react';\nimport {useStoreWithKepler} from '../KeplerSlice';\nimport {\n  buildKeplerTableSourceOptions,\n  type KeplerTableSourceOption,\n} from '../keplerTableSelection';\nimport {KeplerTableSourceSelector} from './KeplerTableSourceSelector';\n\ntype SourceDataSelectorValue = Parameters<\n  SourceDataSelectorProps['onSelect']\n>[0];\ntype SourceDataSelectorContent = React.ComponentType<SourceDataSelectorProps>;\ntype CustomSourceDataSelectorProps = SourceDataSelectorProps & {\n  id?: string;\n};\n\nfunction getSelectedDatasetId(\n  value: SourceDataSelectorValue,\n): string | undefined {\n  if (value === null) {\n    return undefined;\n  }\n\n  if (Array.isArray(value)) {\n    if (value.length === 0) {\n      return undefined;\n    }\n    return getSelectedDatasetId(value[0] as SourceDataSelectorValue);\n  }\n\n  if (typeof value === 'string') {\n    return value;\n  }\n\n  if (typeof value === 'number') {\n    return String(value);\n  }\n\n  if (typeof value === 'boolean') {\n    return String(value);\n  }\n\n  if (typeof value === 'object') {\n    const option = value as {id?: unknown; value?: unknown};\n    if (typeof option.value === 'string') {\n      return option.value;\n    }\n    if (typeof option.id === 'string') {\n      return option.id;\n    }\n  }\n\n  return undefined;\n}\n\n/**\n * Kepler uses the same SourceDataSelector in layer config and filter config.\n * Layer config passes a layer id, so only that version includes unloaded\n * SQLRooms table options. Filter selectors use the same UI with loaded Kepler\n * datasets only because a filter needs a loaded dataset to expose fields.\n */\nexport function CustomSourceDataSelectorFactory(\n  _DataSourceSelectorContent: SourceDataSelectorContent,\n): React.FC<CustomSourceDataSelectorProps> {\n  const SourceDataSelector: React.FC<CustomSourceDataSelectorProps> = ({\n    dataId,\n    datasets,\n    disabled,\n    onSelect,\n    defaultValue = 'Select A Dataset',\n    className,\n    id: layerId,\n  }) => {\n    const [isLoadingTable, setIsLoadingTable] = useState(false);\n    const dbTables = useStoreWithKepler((state) => state.db.tables);\n    const tableSelection = useStoreWithKepler(\n      (state) => state.kepler.tableSelection,\n    );\n    const addTableToMap = useStoreWithKepler(\n      (state) => state.kepler.addTableToMap,\n    );\n    const keplerMap = useStoreWithKepler((state) => state.kepler.map);\n    const mapId = useMemo(() => {\n      if (!layerId) {\n        return undefined;\n      }\n\n      for (const [candidateMapId, mapState] of Object.entries(keplerMap)) {\n        const hasLayer = mapState?.visState?.layers?.some(\n          (layer: {id?: string}) => layer.id === layerId,\n        );\n        if (hasLayer) {\n          return candidateMapId;\n        }\n      }\n\n      return undefined;\n    }, [keplerMap, layerId]);\n    const mapDatasets = useMemo(() => {\n      if (!mapId) {\n        return undefined;\n      }\n\n      return keplerMap[mapId]?.visState.datasets;\n    }, [keplerMap, mapId]);\n    const loadedDatasetIds = useMemo(\n      () => Object.keys(mapDatasets ?? datasets),\n      [datasets, mapDatasets],\n    );\n\n    const options = useMemo(() => {\n      return buildKeplerTableSourceOptions({\n        dbTables,\n        datasets,\n        includeUnloadedTables: Boolean(layerId && mapId),\n        loadedDatasetIds,\n        tableSelection,\n      });\n    }, [datasets, dbTables, layerId, loadedDatasetIds, mapId, tableSelection]);\n\n    const handleSelect = useCallback(\n      (option: KeplerTableSourceOption) => {\n        if (!layerId || !mapId) {\n          onSelect(option.value);\n          return;\n        }\n\n        if (option.isLoaded) {\n          onSelect(option.value);\n          return;\n        }\n\n        setIsLoadingTable(true);\n        void addTableToMap({\n          mapId,\n          tableName: option.value,\n          options: {\n            autoCreateLayers: false,\n            centerMap: false,\n          },\n        })\n          .then(() => {\n            onSelect(option.value);\n          })\n          .catch((e) => {\n            console.error('Failed to load layer data source:', e);\n          })\n          .finally(() => {\n            setIsLoadingTable(false);\n          });\n      },\n      [addTableToMap, layerId, mapId, onSelect],\n    );\n\n    const selectedValue = getSelectedDatasetId(dataId);\n    const selectedDataset = selectedValue ? datasets[selectedValue] : undefined;\n    const selectedOption = options.find(\n      (option) => option.value === selectedValue,\n    );\n    const selectedLabel =\n      selectedOption?.label ??\n      selectedDataset?.label ??\n      selectedValue ??\n      defaultValue;\n    const selectedColor = selectedOption?.color ??\n      selectedDataset?.color ?? [143, 149, 161];\n    const isDisabled = Boolean(disabled || isLoadingTable || !options.length);\n\n    return (\n      <SidePanelSection className=\"data-source-selector\">\n        <PanelLabel>\n          <FormattedMessage id=\"misc.dataSource\" />\n        </PanelLabel>\n        <KeplerTableSourceSelector\n          disabled={isDisabled}\n          options={options}\n          popoverClassName=\"w-[360px]\"\n          searchPlaceholder=\"Search\"\n          selectedValue={selectedValue}\n          onSelect={handleSelect}\n          renderTrigger={({disabled: triggerDisabled, selectedOption}) => {\n            const triggerColor = selectedOption?.color ?? selectedColor;\n            const triggerLabel = selectedOption?.label ?? selectedLabel;\n\n            return (\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                className={cn(\n                  className,\n                  'h-9 w-full justify-start gap-2.5 rounded-sm px-3 text-left text-xs font-semibold',\n                )}\n                disabled={triggerDisabled}\n              >\n                <span\n                  className=\"h-2.5 w-2.5 shrink-0\"\n                  style={{\n                    backgroundColor: `rgb(${triggerColor.join(',')})`,\n                  }}\n                />\n                <span className=\"min-w-0 truncate\">{triggerLabel}</span>\n              </Button>\n            );\n          }}\n        />\n      </SidePanelSection>\n    );\n  };\n\n  SourceDataSelector.displayName = 'CustomSourceDataSelector';\n  return SourceDataSelector;\n}\n\nCustomSourceDataSelectorFactory.deps = SourceDataSelectorFactory.deps;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"KeplerInjector.d.ts","sourceRoot":"","sources":["../../src/components/KeplerInjector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAcL,KAAK,YAAY,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAA0B,MAAM,OAAO,CAAC;AAQ/C,eAAO,MAAM,0BAA0B,kBAEtC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;EAMnC,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,OAAO,GAAG,OAAO,IAAI,CAAC,GAAG,KAAK,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC;AAC5E,MAAM,MAAM,mBAAmB,GAAG,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;AACjE,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAwG3D,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,mBAAmB,EAAE,EAC9B,OAAO,GAAE;IAAC,IAAI,CAAC,EAAE,uBAAuB,CAAA;CAAM,QAM/C;AAED,wBAAgB,0BAA0B,SAGzC;AAED,wBAAgB,iBAAiB,iBAEhC;AAeD,wBAAgB,gBAAgB,CAAC,QAAQ,SAAS,aAAa,EAC7D,OAAO,EAAE,QAAQ,GAChB,UAAU,CAAC,QAAQ,CAAC,CA+BtB;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc;QACrB,QAAQ,SAAS,aAAa,WAAW,QAAQ;CAGtD,CAAC"}
+{"version":3,"file":"KeplerInjector.d.ts","sourceRoot":"","sources":["../../src/components/KeplerInjector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAeL,KAAK,YAAY,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAA0B,MAAM,OAAO,CAAC;AAS/C,eAAO,MAAM,0BAA0B,kBAEtC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;EAMnC,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,OAAO,GAAG,OAAO,IAAI,CAAC,GAAG,KAAK,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC;AAC5E,MAAM,MAAM,mBAAmB,GAAG,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;AACjE,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAyG3D,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,mBAAmB,EAAE,EAC9B,OAAO,GAAE;IAAC,IAAI,CAAC,EAAE,uBAAuB,CAAA;CAAM,QAM/C;AAED,wBAAgB,0BAA0B,SAGzC;AAED,wBAAgB,iBAAiB,iBAEhC;AAeD,wBAAgB,gBAAgB,CAAC,QAAQ,SAAS,aAAa,EAC7D,OAAO,EAAE,QAAQ,GAChB,UAAU,CAAC,QAAQ,CAAC,CA+BtB;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc;QACrB,QAAQ,SAAS,aAAa,WAAW,QAAQ;CAGtD,CAAC"}

package/dist/components/KeplerInjector.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { AddDataButtonFactory, ContainerFactory, injector as createInjector, DndContextFactory, FilterPanelHeaderFactory, flattenDeps, MapControlTooltipFactory, MapDrawPanelFactory, MapLegendFactory, MapLegendPanelFactory, PanelTitleFactory, typeCheckRecipe, } from '@kepler.gl/components';
+import { AddDataButtonFactory, ContainerFactory, injector as createInjector, DndContextFactory, FilterPanelHeaderFactory, flattenDeps, MapControlTooltipFactory, MapDrawPanelFactory, MapLegendFactory, MapLegendPanelFactory, PanelTitleFactory, SourceDataSelectorFactory, typeCheckRecipe, } from '@kepler.gl/components';
 import { CustomDndContextFactory } from './CustomDndContext';
 import { CustomFilterPanelHeaderFactory } from './CustomFilterPanelHeader';
 import { CustomMapControlTooltipFactory } from './CustomMapControlTooltipFactory';
 import { CustomMapDrawPanelFactory } from './CustomMapDrawPanel';
 import { CustomMapLegendFactory } from './CustomMapLegend';
 import { CustomMapLegendPanelFactory } from './CustomMapLegendPanel';
+import { CustomSourceDataSelectorFactory } from './CustomSourceDataSelector';
 export const CustomAddDataButtonFactory = () => {
     return () => null;
 };
@@ -22,6 +23,7 @@ const defaultRecipes = [
     [MapLegendFactory, CustomMapLegendFactory],
     [MapControlTooltipFactory, CustomMapControlTooltipFactory],
     [MapDrawPanelFactory, CustomMapDrawPanelFactory],
+    [SourceDataSelectorFactory, CustomSourceDataSelectorFactory],
 ];
 let customRecipes = [];
 let injector = createKeplerInjector();

package/dist/components/KeplerInjector.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeplerInjector.js","sourceRoot":"","sources":["../../src/components/KeplerInjector.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AddDataButtonFactory,\n  ContainerFactory,\n  injector as createInjector,\n  DndContextFactory,\n  Factory,\n  FilterPanelHeaderFactory,\n  flattenDeps,\n  MapControlTooltipFactory,\n  MapDrawPanelFactory,\n  MapLegendFactory,\n  MapLegendPanelFactory,\n  PanelTitleFactory,\n  typeCheckRecipe,\n  type InjectorType,\n} from '@kepler.gl/components';\nimport React, {PropsWithChildren} from 'react';\nimport {CustomDndContextFactory} from './CustomDndContext';\nimport {CustomFilterPanelHeaderFactory} from './CustomFilterPanelHeader';\nimport {CustomMapControlTooltipFactory} from './CustomMapControlTooltipFactory';\nimport {CustomMapDrawPanelFactory} from './CustomMapDrawPanel';\nimport {CustomMapLegendFactory} from './CustomMapLegend';\nimport {CustomMapLegendPanelFactory} from './CustomMapLegendPanel';\n\nexport const CustomAddDataButtonFactory = () => {\n  return () => null;\n};\n\nexport const CustomPanelTitleFactory = () => {\n  const PanelTitle: React.FC<PropsWithChildren> = ({children}) => (\n    <div className=\"flex items-center justify-end\">{children}</div>\n  );\n\n  return PanelTitle;\n};\n\nexport type KeplerFactory<TReturn = unknown> = (..._args: any[]) => TReturn;\nexport type KeplerFactoryRecipe = [KeplerFactory, KeplerFactory];\nexport type KeplerFactoryRecipeMode = 'append' | 'replace';\n\nconst defaultRecipes: KeplerFactoryRecipe[] = [\n  [AddDataButtonFactory, CustomAddDataButtonFactory],\n  [PanelTitleFactory, CustomPanelTitleFactory],\n  [DndContextFactory, CustomDndContextFactory],\n  [FilterPanelHeaderFactory, CustomFilterPanelHeaderFactory],\n  [MapLegendPanelFactory, CustomMapLegendPanelFactory],\n  [MapLegendFactory, CustomMapLegendFactory],\n  [MapControlTooltipFactory, CustomMapControlTooltipFactory],\n  [MapDrawPanelFactory, CustomMapDrawPanelFactory],\n];\n\nlet customRecipes: KeplerFactoryRecipe[] = [];\nlet injector = createKeplerInjector();\n\nfunction createBaseInjector() {\n  const allDependencies = flattenDeps(\n    [],\n    ContainerFactory as unknown as Factory,\n  );\n  return allDependencies.reduce(\n    (current, factory) => current.provide(factory, factory),\n    createInjector(),\n  );\n}\n\n/**\n * Applies factory replacement recipes on top of a fresh Kepler injector while\n * preserving explicit replacement targets.\n *\n * Kepler's default `provideRecipesToInjector` pre-provides all replacement\n * dependencies as identity mappings (`dep -> dep`) before applying each recipe.\n * That can unintentionally override factories that were already replaced by\n * earlier recipes, and emits noisy \"already injected\" warnings.\n *\n * This helper keeps the same high-level flow (process recipes in order and then\n * eagerly resolve the configured factories), but skips identity-providing any\n * dependency that is itself an explicit replacement target in the current\n * recipe set. As a result:\n * - earlier explicit replacements are not overwritten by later dependency setup\n * - replacement ordering remains deterministic\n * - configured factories are still warmed via `get(factoryToReplace)`\n */\nfunction provideRecipesToInjectorSafely(\n  recipes: KeplerFactoryRecipe[],\n  baseInjector: InjectorType,\n) {\n  const replacementTargets = new Set(\n    recipes\n      .filter((recipe) =>\n        typeCheckRecipe(recipe as unknown as [Factory, Factory]),\n      )\n      .map((recipe) => recipe[0]),\n  );\n\n  const provided = new Map();\n\n  const injectorWithRecipes = recipes.reduce((currentInjector, recipe) => {\n    if (!typeCheckRecipe(recipe as unknown as [Factory, Factory])) {\n      return currentInjector;\n    }\n\n    const [factoryToReplace, replacementFactory] = recipe;\n    const customDependencies = flattenDeps(\n      [],\n      replacementFactory as unknown as Factory,\n    );\n\n    const injectorWithDependencies = customDependencies.reduce(\n      (dependencyInjector, dependencyFactory) => {\n        // If a dependency has an explicit replacement recipe, skip self-injecting it.\n        // This avoids overriding previous replacements and warning noise.\n        if (\n          replacementTargets.has(dependencyFactory as unknown as KeplerFactory)\n        ) {\n          return dependencyInjector;\n        }\n        return dependencyInjector.provide(dependencyFactory, dependencyFactory);\n      },\n      currentInjector,\n    );\n\n    provided.set(factoryToReplace, replacementFactory);\n    return injectorWithDependencies.provide(\n      factoryToReplace,\n      replacementFactory,\n    );\n  }, baseInjector);\n\n  provided.forEach((_, factoryToReplace) => {\n    injectorWithRecipes.get(factoryToReplace);\n  });\n\n  return injectorWithRecipes;\n}\n\nfunction createKeplerInjector(recipes: KeplerFactoryRecipe[] = []) {\n  return provideRecipesToInjectorSafely(\n    [...defaultRecipes, ...recipes],\n    createBaseInjector(),\n  );\n}\n\nexport function configureKeplerInjector(\n  recipes: KeplerFactoryRecipe[],\n  options: {mode?: KeplerFactoryRecipeMode} = {},\n) {\n  const mode = options.mode ?? 'append';\n  customRecipes =\n    mode === 'replace' ? [...recipes] : [...customRecipes, ...recipes];\n  injector = createKeplerInjector(customRecipes);\n}\n\nexport function resetKeplerInjectorRecipes() {\n  customRecipes = [];\n  injector = createKeplerInjector();\n}\n\nexport function getKeplerInjector() {\n  return injector;\n}\n\n// Cache resolved components per injector so we keep a stable component\n// reference across re-renders. Invalidated when injector is replaced (configure/reset).\nconst injectorToFactoryCache = new WeakMap<\n  object,\n  Map<KeplerFactory, React.ComponentType<Record<string, unknown>>>\n>();\n\n// Cache wrapper components per factory so callers always get a stable component type.\nconst factoryToWrapperCache = new Map<\n  KeplerFactory,\n  React.ComponentType<Record<string, unknown>>\n>();\n\nexport function getKeplerFactory<TFactory extends KeplerFactory>(\n  factory: TFactory,\n): ReturnType<TFactory> {\n  let Wrapped = factoryToWrapperCache.get(factory);\n  if (Wrapped === undefined) {\n    const WrappedComponent = function KeplerFactoryWrapper(\n      props: Record<string, unknown>,\n    ) {\n      // Resolve at top level of render (not inside useMemo) so injector.get()\n      // running the factory chain does not run hooks inside a hook.\n      const injectorInstance = getKeplerInjector();\n      let byFactory = injectorToFactoryCache.get(injectorInstance as object);\n      if (byFactory === undefined) {\n        byFactory = new Map();\n        injectorToFactoryCache.set(injectorInstance as object, byFactory);\n      }\n      let Component = byFactory.get(factory);\n      if (Component === undefined) {\n        Component = injectorInstance.get(\n          factory as unknown as Factory,\n        ) as React.ComponentType<Record<string, unknown>>;\n        byFactory.set(factory, Component);\n      }\n      // eslint-disable-next-line react-hooks/static-components -- Kepler factory components resolved at render by design\n      return <Component {...props} />;\n    };\n\n    const factoryName = factory.name || 'Anonymous';\n    WrappedComponent.displayName = `KeplerFactory(${factoryName})`;\n    Wrapped = WrappedComponent;\n    factoryToWrapperCache.set(factory, WrappedComponent);\n  }\n  return Wrapped as unknown as ReturnType<TFactory>;\n}\n\n/**\n * Stable access to Kepler factories. Prefer calling `get()` at module scope\n * (or in a constant initializer) so the returned component type is reused.\n */\nexport const KeplerInjector = {\n  get<TFactory extends KeplerFactory>(factory: TFactory) {\n    return getKeplerFactory(factory);\n  },\n};\n"]}
+{"version":3,"file":"KeplerInjector.js","sourceRoot":"","sources":["../../src/components/KeplerInjector.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AddDataButtonFactory,\n  ContainerFactory,\n  injector as createInjector,\n  DndContextFactory,\n  Factory,\n  FilterPanelHeaderFactory,\n  flattenDeps,\n  MapControlTooltipFactory,\n  MapDrawPanelFactory,\n  MapLegendFactory,\n  MapLegendPanelFactory,\n  PanelTitleFactory,\n  SourceDataSelectorFactory,\n  typeCheckRecipe,\n  type InjectorType,\n} from '@kepler.gl/components';\nimport React, {PropsWithChildren} from 'react';\nimport {CustomDndContextFactory} from './CustomDndContext';\nimport {CustomFilterPanelHeaderFactory} from './CustomFilterPanelHeader';\nimport {CustomMapControlTooltipFactory} from './CustomMapControlTooltipFactory';\nimport {CustomMapDrawPanelFactory} from './CustomMapDrawPanel';\nimport {CustomMapLegendFactory} from './CustomMapLegend';\nimport {CustomMapLegendPanelFactory} from './CustomMapLegendPanel';\nimport {CustomSourceDataSelectorFactory} from './CustomSourceDataSelector';\n\nexport const CustomAddDataButtonFactory = () => {\n  return () => null;\n};\n\nexport const CustomPanelTitleFactory = () => {\n  const PanelTitle: React.FC<PropsWithChildren> = ({children}) => (\n    <div className=\"flex items-center justify-end\">{children}</div>\n  );\n\n  return PanelTitle;\n};\n\nexport type KeplerFactory<TReturn = unknown> = (..._args: any[]) => TReturn;\nexport type KeplerFactoryRecipe = [KeplerFactory, KeplerFactory];\nexport type KeplerFactoryRecipeMode = 'append' | 'replace';\n\nconst defaultRecipes: KeplerFactoryRecipe[] = [\n  [AddDataButtonFactory, CustomAddDataButtonFactory],\n  [PanelTitleFactory, CustomPanelTitleFactory],\n  [DndContextFactory, CustomDndContextFactory],\n  [FilterPanelHeaderFactory, CustomFilterPanelHeaderFactory],\n  [MapLegendPanelFactory, CustomMapLegendPanelFactory],\n  [MapLegendFactory, CustomMapLegendFactory],\n  [MapControlTooltipFactory, CustomMapControlTooltipFactory],\n  [MapDrawPanelFactory, CustomMapDrawPanelFactory],\n  [SourceDataSelectorFactory, CustomSourceDataSelectorFactory],\n];\n\nlet customRecipes: KeplerFactoryRecipe[] = [];\nlet injector = createKeplerInjector();\n\nfunction createBaseInjector() {\n  const allDependencies = flattenDeps(\n    [],\n    ContainerFactory as unknown as Factory,\n  );\n  return allDependencies.reduce(\n    (current, factory) => current.provide(factory, factory),\n    createInjector(),\n  );\n}\n\n/**\n * Applies factory replacement recipes on top of a fresh Kepler injector while\n * preserving explicit replacement targets.\n *\n * Kepler's default `provideRecipesToInjector` pre-provides all replacement\n * dependencies as identity mappings (`dep -> dep`) before applying each recipe.\n * That can unintentionally override factories that were already replaced by\n * earlier recipes, and emits noisy \"already injected\" warnings.\n *\n * This helper keeps the same high-level flow (process recipes in order and then\n * eagerly resolve the configured factories), but skips identity-providing any\n * dependency that is itself an explicit replacement target in the current\n * recipe set. As a result:\n * - earlier explicit replacements are not overwritten by later dependency setup\n * - replacement ordering remains deterministic\n * - configured factories are still warmed via `get(factoryToReplace)`\n */\nfunction provideRecipesToInjectorSafely(\n  recipes: KeplerFactoryRecipe[],\n  baseInjector: InjectorType,\n) {\n  const replacementTargets = new Set(\n    recipes\n      .filter((recipe) =>\n        typeCheckRecipe(recipe as unknown as [Factory, Factory]),\n      )\n      .map((recipe) => recipe[0]),\n  );\n\n  const provided = new Map();\n\n  const injectorWithRecipes = recipes.reduce((currentInjector, recipe) => {\n    if (!typeCheckRecipe(recipe as unknown as [Factory, Factory])) {\n      return currentInjector;\n    }\n\n    const [factoryToReplace, replacementFactory] = recipe;\n    const customDependencies = flattenDeps(\n      [],\n      replacementFactory as unknown as Factory,\n    );\n\n    const injectorWithDependencies = customDependencies.reduce(\n      (dependencyInjector, dependencyFactory) => {\n        // If a dependency has an explicit replacement recipe, skip self-injecting it.\n        // This avoids overriding previous replacements and warning noise.\n        if (\n          replacementTargets.has(dependencyFactory as unknown as KeplerFactory)\n        ) {\n          return dependencyInjector;\n        }\n        return dependencyInjector.provide(dependencyFactory, dependencyFactory);\n      },\n      currentInjector,\n    );\n\n    provided.set(factoryToReplace, replacementFactory);\n    return injectorWithDependencies.provide(\n      factoryToReplace,\n      replacementFactory,\n    );\n  }, baseInjector);\n\n  provided.forEach((_, factoryToReplace) => {\n    injectorWithRecipes.get(factoryToReplace);\n  });\n\n  return injectorWithRecipes;\n}\n\nfunction createKeplerInjector(recipes: KeplerFactoryRecipe[] = []) {\n  return provideRecipesToInjectorSafely(\n    [...defaultRecipes, ...recipes],\n    createBaseInjector(),\n  );\n}\n\nexport function configureKeplerInjector(\n  recipes: KeplerFactoryRecipe[],\n  options: {mode?: KeplerFactoryRecipeMode} = {},\n) {\n  const mode = options.mode ?? 'append';\n  customRecipes =\n    mode === 'replace' ? [...recipes] : [...customRecipes, ...recipes];\n  injector = createKeplerInjector(customRecipes);\n}\n\nexport function resetKeplerInjectorRecipes() {\n  customRecipes = [];\n  injector = createKeplerInjector();\n}\n\nexport function getKeplerInjector() {\n  return injector;\n}\n\n// Cache resolved components per injector so we keep a stable component\n// reference across re-renders. Invalidated when injector is replaced (configure/reset).\nconst injectorToFactoryCache = new WeakMap<\n  object,\n  Map<KeplerFactory, React.ComponentType<Record<string, unknown>>>\n>();\n\n// Cache wrapper components per factory so callers always get a stable component type.\nconst factoryToWrapperCache = new Map<\n  KeplerFactory,\n  React.ComponentType<Record<string, unknown>>\n>();\n\nexport function getKeplerFactory<TFactory extends KeplerFactory>(\n  factory: TFactory,\n): ReturnType<TFactory> {\n  let Wrapped = factoryToWrapperCache.get(factory);\n  if (Wrapped === undefined) {\n    const WrappedComponent = function KeplerFactoryWrapper(\n      props: Record<string, unknown>,\n    ) {\n      // Resolve at top level of render (not inside useMemo) so injector.get()\n      // running the factory chain does not run hooks inside a hook.\n      const injectorInstance = getKeplerInjector();\n      let byFactory = injectorToFactoryCache.get(injectorInstance as object);\n      if (byFactory === undefined) {\n        byFactory = new Map();\n        injectorToFactoryCache.set(injectorInstance as object, byFactory);\n      }\n      let Component = byFactory.get(factory);\n      if (Component === undefined) {\n        Component = injectorInstance.get(\n          factory as unknown as Factory,\n        ) as React.ComponentType<Record<string, unknown>>;\n        byFactory.set(factory, Component);\n      }\n      // eslint-disable-next-line react-hooks/static-components -- Kepler factory components resolved at render by design\n      return <Component {...props} />;\n    };\n\n    const factoryName = factory.name || 'Anonymous';\n    WrappedComponent.displayName = `KeplerFactory(${factoryName})`;\n    Wrapped = WrappedComponent;\n    factoryToWrapperCache.set(factory, WrappedComponent);\n  }\n  return Wrapped as unknown as ReturnType<TFactory>;\n}\n\n/**\n * Stable access to Kepler factories. Prefer calling `get()` at module scope\n * (or in a constant initializer) so the returned component type is reused.\n */\nexport const KeplerInjector = {\n  get<TFactory extends KeplerFactory>(factory: TFactory) {\n    return getKeplerFactory(factory);\n  },\n};\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,EAAuC,MAAM,OAAO,CAAC;AAsO/D,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;AAgP/D,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;CACf,CAMA,CAAC"}

package/dist/components/KeplerMapContainer.js

@@ -49,9 +49,10 @@ const KeplerGl = ({ mapId }) => {
     const [containerNode, setContainerNode] = useState(null);
     const theme = useTheme();
     const basicKeplerProps = useStoreWithKepler((state) => state.kepler.basicKeplerProps);
+    const modalPortalTarget = useStoreWithKepler((state) => state.kepler.modalPortalTarget);
     const { keplerActions, keplerState } = useKeplerStateActions({ mapId });
     const interactionConfig = keplerState?.visState?.interactionConfig;
-    // Capture the current container DOM node outside of render logic
+    // Capture container DOM node outside of render for portal use
     useEffect(() => {
         setContainerNode(containerRef.current);
     }, [containerRef]);
@@ -111,8 +112,14 @@ const KeplerGl = ({ mapId }) => {
             },
         };
     }, [hasFilters, hasAnimatableLayers, mergedKeplerProps, theme]);
+    const modalPortalNode = useMemo(() => {
+        if (modalPortalTarget === 'body') {
+            return typeof document !== 'undefined' ? document.body : null;
+        }
+        return containerNode;
+    }, [modalPortalTarget, containerNode]);
     const modalContainerFields = keplerState?.visState
-        ? modalContainerSelector(mergedKeplerProps, containerNode)
+        ? modalContainerSelector(mergedKeplerProps, modalPortalNode)
         : 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, 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 {getKeplerFactory} from './KeplerInjector';\nimport {KeplerProvider} from './KeplerProvider';\nimport {useKeplerStateActions} from '../hooks/useKeplerStateActions';\nimport {useStoreWithKepler} from '../KeplerSlice';\nimport {SplitMapIndexContext} from './SplitMapIndexContext';\n\nconst MapContainer = getKeplerFactory(MapContainerFactory);\nconst BottomWidget = getKeplerFactory(BottomWidgetFactory);\nconst GeoCoderPanel = getKeplerFactory(GeocoderPanelFactory);\nconst ModalContainer = getKeplerFactory(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\nconst SplitMapsContainer = styled.div`\n  display: flex;\n  width: 100%;\n  height: 100%;\n  position: relative;\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\n  const splitMaps = keplerState?.visState?.splitMaps;\n  const isSplit = splitMaps && splitMaps.length > 1;\n\n  const mapFields = useMemo(\n    () => (keplerState?.visState ? mapFieldsSelector(mergedKeplerProps) : null),\n    [keplerState, mergedKeplerProps],\n  );\n  const mapFieldsSplit = useMemo(\n    () =>\n      isSplit && keplerState?.visState\n        ? splitMaps.map((_, index) =>\n            mapFieldsSelector(mergedKeplerProps, index),\n          )\n        : null,\n    [keplerState, mergedKeplerProps, isSplit, splitMaps],\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 = useMemo(() => {\n    if (!hasFilters && !hasAnimatableLayers) return null;\n    const fields = bottomWidgetSelector(mergedKeplerProps, theme);\n    // The legend is rendered as a draggable, portaled overlay so the\n    // BottomWidget should not shrink to reserve space for it.  Mask\n    // mapLegend.active so the upstream spaceForLegendWidth stays 0.\n    return {\n      ...fields,\n      uiState: {\n        ...fields.uiState,\n        mapControls: {\n          ...fields.uiState.mapControls,\n          mapLegend: {\n            ...fields.uiState.mapControls?.mapLegend,\n            show: fields.uiState.mapControls?.mapLegend?.show ?? false,\n            active: false,\n          },\n        },\n      },\n    };\n  }, [hasFilters, hasAnimatableLayers, mergedKeplerProps, theme]);\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        {isSplit && mapFieldsSplit ? (\n          <SplitMapsContainer>\n            <MapViewStateContextProvider\n              mapState={\n                (mapFieldsSplit[0]?.mapState ??\n                  mapFields?.mapState) as NonNullable<\n                  typeof mapFields\n                >['mapState']\n              }\n            >\n              {mapFieldsSplit.map((fields, index) => (\n                <SplitMapIndexContext.Provider key={index} value={index}>\n                  <MapContainer\n                    index={index}\n                    primary={index === 1}\n                    containerId={index}\n                    {...fields}\n                    mapboxApiAccessToken={mapboxApiAccessToken || ''}\n                  />\n                </SplitMapIndexContext.Provider>\n              ))}\n            </MapViewStateContextProvider>\n          </SplitMapsContainer>\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        {geoCoderPanelFields && interactionConfig?.geocoder?.enabled ? (\n          <GeoCoderPanel\n            {...geoCoderPanelFields}\n            index={0}\n            unsyncedViewports={false}\n            mapboxApiAccessToken={mapboxApiAccessToken || ''}\n          />\n        ) : null}\n        {size && bottomWidgetFields ? (\n          <BottomWidget\n            rootRef={bottomWidgetRef}\n            {...bottomWidgetFields}\n            theme={theme}\n            containerW={size?.width}\n          />\n        ) : null}\n        {size && size.width && size.height && 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,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAC,qBAAqB,EAAC,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAC,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAE5D,MAAM,YAAY,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;AAC3D,MAAM,YAAY,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;AAC3D,MAAM,aAAa,GAAG,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AAC7D,MAAM,cAAc,GAAG,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;AAE/D,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;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKpC,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;IACF,MAAM,iBAAiB,GAAG,kBAAkB,CAC1C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAC1C,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,8DAA8D;IAC9D,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;IAET,MAAM,SAAS,GAAG,WAAW,EAAE,QAAQ,EAAE,SAAS,CAAC;IACnD,MAAM,OAAO,GAAG,SAAS,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;IAElD,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;IACF,MAAM,cAAc,GAAG,OAAO,CAC5B,GAAG,EAAE,CACH,OAAO,IAAI,WAAW,EAAE,QAAQ;QAC9B,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CACzB,iBAAiB,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAC5C;QACH,CAAC,CAAC,IAAI,EACV,CAAC,WAAW,EAAE,iBAAiB,EAAE,OAAO,EAAE,SAAS,CAAC,CACrD,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,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,CAAC,UAAU,IAAI,CAAC,mBAAmB;YAAE,OAAO,IAAI,CAAC;QACrD,MAAM,MAAM,GAAG,oBAAoB,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;QAC9D,iEAAiE;QACjE,gEAAgE;QAChE,gEAAgE;QAChE,OAAO;YACL,GAAG,MAAM;YACT,OAAO,EAAE;gBACP,GAAG,MAAM,CAAC,OAAO;gBACjB,WAAW,EAAE;oBACX,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW;oBAC7B,SAAS,EAAE;wBACT,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,SAAS;wBACxC,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,SAAS,EAAE,IAAI,IAAI,KAAK;wBAC1D,MAAM,EAAE,KAAK;qBACd;iBACF;aACF;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,KAAK,CAAC,CAAC,CAAC;IAEhE,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,iBAAiB,KAAK,MAAM,EAAE,CAAC;YACjC,OAAO,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;QAChE,CAAC;QACD,OAAO,aAAa,CAAC;IACvB,CAAC,EAAE,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAAC,CAAC;IAEvC,MAAM,oBAAoB,GAAG,WAAW,EAAE,QAAQ;QAChD,CAAC,CAAC,sBAAsB,CAAC,iBAAiB,EAAE,eAAe,CAAC;QAC5D,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,OAAO,IAAI,cAAc,CAAC,CAAC,CAAC,CAC3B,KAAC,kBAAkB,cACjB,KAAC,2BAA2B,IAC1B,QAAQ,EACN,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,QAAQ;4BAC1B,SAAS,EAAE,QAAQ,CAER,YAGd,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACrC,KAAC,oBAAoB,CAAC,QAAQ,IAAa,KAAK,EAAE,KAAK,YACrD,KAAC,YAAY,IACX,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,KAAK,KAAK,CAAC,EACpB,WAAW,EAAE,KAAK,KACd,MAAM,EACV,oBAAoB,EAAE,oBAAoB,IAAI,EAAE,GAChD,IAPgC,KAAK,CAQT,CACjC,CAAC,GAC0B,GACX,CACtB,CAAC,CAAC,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,CACxB,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,IAAI,EAAE,IAH3C,CAAC,CAIN,GAC0B,CAC/B,CAAC,CAAC,CAAC,IAAI,EACP,mBAAmB,IAAI,iBAAiB,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAC7D,KAAC,aAAa,OACR,mBAAmB,EACvB,KAAK,EAAE,CAAC,EACR,iBAAiB,EAAE,KAAK,EACxB,oBAAoB,EAAE,oBAAoB,IAAI,EAAE,GAChD,CACH,CAAC,CAAC,CAAC,IAAI,EACP,IAAI,IAAI,kBAAkB,CAAC,CAAC,CAAC,CAC5B,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,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,IAAI,oBAAoB,CAAC,CAAC,CAAC,CAC3D,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 {getKeplerFactory} from './KeplerInjector';\nimport {KeplerProvider} from './KeplerProvider';\nimport {useKeplerStateActions} from '../hooks/useKeplerStateActions';\nimport {useStoreWithKepler} from '../KeplerSlice';\nimport {SplitMapIndexContext} from './SplitMapIndexContext';\n\nconst MapContainer = getKeplerFactory(MapContainerFactory);\nconst BottomWidget = getKeplerFactory(BottomWidgetFactory);\nconst GeoCoderPanel = getKeplerFactory(GeocoderPanelFactory);\nconst ModalContainer = getKeplerFactory(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\nconst SplitMapsContainer = styled.div`\n  display: flex;\n  width: 100%;\n  height: 100%;\n  position: relative;\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  const modalPortalTarget = useStoreWithKepler(\n    (state) => state.kepler.modalPortalTarget,\n  );\n\n  const {keplerActions, keplerState} = useKeplerStateActions({mapId});\n  const interactionConfig = keplerState?.visState?.interactionConfig;\n\n  // Capture container DOM node outside of render for portal use\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\n  const splitMaps = keplerState?.visState?.splitMaps;\n  const isSplit = splitMaps && splitMaps.length > 1;\n\n  const mapFields = useMemo(\n    () => (keplerState?.visState ? mapFieldsSelector(mergedKeplerProps) : null),\n    [keplerState, mergedKeplerProps],\n  );\n  const mapFieldsSplit = useMemo(\n    () =>\n      isSplit && keplerState?.visState\n        ? splitMaps.map((_, index) =>\n            mapFieldsSelector(mergedKeplerProps, index),\n          )\n        : null,\n    [keplerState, mergedKeplerProps, isSplit, splitMaps],\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 = useMemo(() => {\n    if (!hasFilters && !hasAnimatableLayers) return null;\n    const fields = bottomWidgetSelector(mergedKeplerProps, theme);\n    // The legend is rendered as a draggable, portaled overlay so the\n    // BottomWidget should not shrink to reserve space for it.  Mask\n    // mapLegend.active so the upstream spaceForLegendWidth stays 0.\n    return {\n      ...fields,\n      uiState: {\n        ...fields.uiState,\n        mapControls: {\n          ...fields.uiState.mapControls,\n          mapLegend: {\n            ...fields.uiState.mapControls?.mapLegend,\n            show: fields.uiState.mapControls?.mapLegend?.show ?? false,\n            active: false,\n          },\n        },\n      },\n    };\n  }, [hasFilters, hasAnimatableLayers, mergedKeplerProps, theme]);\n\n  const modalPortalNode = useMemo(() => {\n    if (modalPortalTarget === 'body') {\n      return typeof document !== 'undefined' ? document.body : null;\n    }\n    return containerNode;\n  }, [modalPortalTarget, containerNode]);\n\n  const modalContainerFields = keplerState?.visState\n    ? modalContainerSelector(mergedKeplerProps, modalPortalNode)\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        {isSplit && mapFieldsSplit ? (\n          <SplitMapsContainer>\n            <MapViewStateContextProvider\n              mapState={\n                (mapFieldsSplit[0]?.mapState ??\n                  mapFields?.mapState) as NonNullable<\n                  typeof mapFields\n                >['mapState']\n              }\n            >\n              {mapFieldsSplit.map((fields, index) => (\n                <SplitMapIndexContext.Provider key={index} value={index}>\n                  <MapContainer\n                    index={index}\n                    primary={index === 1}\n                    containerId={index}\n                    {...fields}\n                    mapboxApiAccessToken={mapboxApiAccessToken || ''}\n                  />\n                </SplitMapIndexContext.Provider>\n              ))}\n            </MapViewStateContextProvider>\n          </SplitMapsContainer>\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        {geoCoderPanelFields && interactionConfig?.geocoder?.enabled ? (\n          <GeoCoderPanel\n            {...geoCoderPanelFields}\n            index={0}\n            unsyncedViewports={false}\n            mapboxApiAccessToken={mapboxApiAccessToken || ''}\n          />\n        ) : null}\n        {size && bottomWidgetFields ? (\n          <BottomWidget\n            rootRef={bottomWidgetRef}\n            {...bottomWidgetFields}\n            theme={theme}\n            containerW={size?.width}\n          />\n        ) : null}\n        {size && size.width && size.height && 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/KeplerProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KeplerProvider.d.ts","sourceRoot":"","sources":["../../src/components/KeplerProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAU,MAAM,OAAO,CAAC;AASjD,KAAK,mBAAmB,GAAG,iBAAiB,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAGH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+BxD,CAAC"}
+{"version":3,"file":"KeplerProvider.d.ts","sourceRoot":"","sources":["../../src/components/KeplerProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAU,MAAM,OAAO,CAAC;AASjD,KAAK,mBAAmB,GAAG,iBAAiB,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAGH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiCxD,CAAC"}

package/dist/components/KeplerProvider.js

@@ -10,6 +10,8 @@ import { Provider } from 'react-redux';
 // Provide intl, theme, context, and redux store to the kepler
 export const KeplerProvider = ({ children, mapId, }) => {
     const reduxProviderStore = useStoreWithKepler((state) => state.kepler.__reduxProviderStore);
+    const keplerTheme = useStoreWithKepler((state) => state.kepler.keplerTheme);
+    const resolvedTheme = useMemo(() => keplerTheme ?? darkTheme, [keplerTheme]);
     const keplerContext = useMemo(() => ({
         selector: (state) => state[mapId],
         id: mapId,
@@ -17,6 +19,6 @@ export const KeplerProvider = ({ children, mapId, }) => {
     if (!reduxProviderStore) {
         return null;
     }
-    return (_jsx(IntlProvider, { locale: "en", messages: messages['en'], children: _jsx(Provider, { store: reduxProviderStore, children: _jsx(StyleSheetManager, { shouldForwardProp: shouldForwardProp, children: _jsx(ThemeProvider, { theme: darkTheme, children: _jsx(KeplerGlContext.Provider, { value: keplerContext, children: _jsx(_Fragment, { children: children }) }) }) }) }) }));
+    return (_jsx(IntlProvider, { locale: "en", messages: messages['en'], children: _jsx(Provider, { store: reduxProviderStore, children: _jsx(StyleSheetManager, { shouldForwardProp: shouldForwardProp, children: _jsx(ThemeProvider, { theme: resolvedTheme, children: _jsx(KeplerGlContext.Provider, { value: keplerContext, children: _jsx(_Fragment, { children: children }) }) }) }) }) }));
 };
 //# sourceMappingURL=KeplerProvider.js.map

package/dist/components/KeplerProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeplerProvider.js","sourceRoot":"","sources":["../../src/components/KeplerProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAoB,OAAO,EAAC,MAAM,OAAO,CAAC;AACjD,OAAO,EAAC,YAAY,EAAC,MAAM,YAAY,CAAC;AACxC,OAAO,EAAC,aAAa,EAAE,iBAAiB,EAAC,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAqB,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAEtE,OAAO,EAAC,eAAe,EAAE,iBAAiB,EAAC,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAC;AAMrC,8DAA8D;AAC9D,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC5D,QAAQ,EACR,KAAK,GACN,EAAE,EAAE;IACH,MAAM,kBAAkB,GAAG,kBAAkB,CAC3C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,oBAAoB,CAC7C,CAAC;IAEF,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,CAAC;QACL,QAAQ,EAAE,CAAC,KAAyB,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC;QACrD,EAAE,EAAE,KAAK;KACV,CAAC,EACF,CAAC,KAAK,CAAC,CACR,CAAC;IACF,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,CACL,KAAC,YAAY,IAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,YAChD,KAAC,QAAQ,IAAC,KAAK,EAAE,kBAAkB,YACjC,KAAC,iBAAiB,IAAC,iBAAiB,EAAE,iBAAiB,YACrD,KAAC,aAAa,IAAC,KAAK,EAAE,SAAS,YAC7B,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,YAC5C,4BAAG,QAAQ,GAAI,GACU,GACb,GACE,GACX,GACE,CAChB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {messages} from '@kepler.gl/localization';\nimport {PropsWithChildren, useMemo} from 'react';\nimport {IntlProvider} from 'react-intl';\nimport {ThemeProvider, StyleSheetManager} from 'styled-components';\nimport {KeplerGlReduxState, useStoreWithKepler} from '../KeplerSlice';\n\nimport {KeplerGlContext, shouldForwardProp} from '@kepler.gl/components';\nimport {darkTheme} from '../styles/theme';\nimport {Provider} from 'react-redux';\n\ntype KeplerProviderProps = PropsWithChildren<{\n  mapId: string;\n}>;\n\n// Provide intl, theme, context, and redux store to the kepler\nexport const KeplerProvider: React.FC<KeplerProviderProps> = ({\n  children,\n  mapId,\n}) => {\n  const reduxProviderStore = useStoreWithKepler(\n    (state) => state.kepler.__reduxProviderStore,\n  );\n\n  const keplerContext = useMemo(\n    () => ({\n      selector: (state: KeplerGlReduxState) => state[mapId],\n      id: mapId,\n    }),\n    [mapId],\n  );\n  if (!reduxProviderStore) {\n    return null;\n  }\n  return (\n    <IntlProvider locale=\"en\" messages={messages['en']}>\n      <Provider store={reduxProviderStore}>\n        <StyleSheetManager shouldForwardProp={shouldForwardProp}>\n          <ThemeProvider theme={darkTheme}>\n            <KeplerGlContext.Provider value={keplerContext}>\n              <>{children}</>\n            </KeplerGlContext.Provider>\n          </ThemeProvider>\n        </StyleSheetManager>\n      </Provider>\n    </IntlProvider>\n  );\n};\n"]}
+{"version":3,"file":"KeplerProvider.js","sourceRoot":"","sources":["../../src/components/KeplerProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAoB,OAAO,EAAC,MAAM,OAAO,CAAC;AACjD,OAAO,EAAC,YAAY,EAAC,MAAM,YAAY,CAAC;AACxC,OAAO,EAAC,aAAa,EAAE,iBAAiB,EAAC,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAqB,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAEtE,OAAO,EAAC,eAAe,EAAE,iBAAiB,EAAC,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAC;AAMrC,8DAA8D;AAC9D,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC5D,QAAQ,EACR,KAAK,GACN,EAAE,EAAE;IACH,MAAM,kBAAkB,GAAG,kBAAkB,CAC3C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,oBAAoB,CAC7C,CAAC;IACF,MAAM,WAAW,GAAG,kBAAkB,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IAC5E,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,IAAI,SAAS,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE7E,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,CAAC;QACL,QAAQ,EAAE,CAAC,KAAyB,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC;QACrD,EAAE,EAAE,KAAK;KACV,CAAC,EACF,CAAC,KAAK,CAAC,CACR,CAAC;IACF,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,CACL,KAAC,YAAY,IAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,YAChD,KAAC,QAAQ,IAAC,KAAK,EAAE,kBAAkB,YACjC,KAAC,iBAAiB,IAAC,iBAAiB,EAAE,iBAAiB,YACrD,KAAC,aAAa,IAAC,KAAK,EAAE,aAAa,YACjC,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,YAC5C,4BAAG,QAAQ,GAAI,GACU,GACb,GACE,GACX,GACE,CAChB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {messages} from '@kepler.gl/localization';\nimport {PropsWithChildren, useMemo} from 'react';\nimport {IntlProvider} from 'react-intl';\nimport {ThemeProvider, StyleSheetManager} from 'styled-components';\nimport {KeplerGlReduxState, useStoreWithKepler} from '../KeplerSlice';\n\nimport {KeplerGlContext, shouldForwardProp} from '@kepler.gl/components';\nimport {darkTheme} from '../styles/theme';\nimport {Provider} from 'react-redux';\n\ntype KeplerProviderProps = PropsWithChildren<{\n  mapId: string;\n}>;\n\n// Provide intl, theme, context, and redux store to the kepler\nexport const KeplerProvider: React.FC<KeplerProviderProps> = ({\n  children,\n  mapId,\n}) => {\n  const reduxProviderStore = useStoreWithKepler(\n    (state) => state.kepler.__reduxProviderStore,\n  );\n  const keplerTheme = useStoreWithKepler((state) => state.kepler.keplerTheme);\n  const resolvedTheme = useMemo(() => keplerTheme ?? darkTheme, [keplerTheme]);\n\n  const keplerContext = useMemo(\n    () => ({\n      selector: (state: KeplerGlReduxState) => state[mapId],\n      id: mapId,\n    }),\n    [mapId],\n  );\n  if (!reduxProviderStore) {\n    return null;\n  }\n  return (\n    <IntlProvider locale=\"en\" messages={messages['en']}>\n      <Provider store={reduxProviderStore}>\n        <StyleSheetManager shouldForwardProp={shouldForwardProp}>\n          <ThemeProvider theme={resolvedTheme}>\n            <KeplerGlContext.Provider value={keplerContext}>\n              <>{children}</>\n            </KeplerGlContext.Provider>\n          </ThemeProvider>\n        </StyleSheetManager>\n      </Provider>\n    </IntlProvider>\n  );\n};\n"]}