@kepler.gl/components 3.0.0-alpha.0

package/dist/side-panel/map-manager.js

@@ -0,0 +1,168 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = require("../common/styled-components");
+
+var _mapStyleSelector = _interopRequireDefault(require("./map-style-panel/map-style-selector"));
+
+var _mapLayerSelector = _interopRequireDefault(require("./map-style-panel/map-layer-selector"));
+
+var _icons = require("../common/icons");
+
+var _colorSelector = _interopRequireDefault(require("./layer-panel/color-selector"));
+
+var _reselect = require("reselect");
+
+var _reactIntl = require("react-intl");
+
+var _localization = require("@kepler.gl/localization");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+MapManagerFactory.deps = [_mapStyleSelector["default"], _mapLayerSelector["default"]];
+
+function MapManagerFactory(MapStyleSelector, LayerGroupSelector) {
+  var MapManager = /*#__PURE__*/function (_Component) {
+    (0, _inherits2["default"])(MapManager, _Component);
+
+    var _super = _createSuper(MapManager);
+
+    function MapManager() {
+      var _this;
+
+      (0, _classCallCheck2["default"])(this, MapManager);
+
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      _this = _super.call.apply(_super, [this].concat(args));
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+        isSelecting: false
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "buildingColorSelector", function (props) {
+        return props.mapStyle.threeDBuildingColor;
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setColorSelector", function (props) {
+        return props.mapStyleActions.set3dBuildingColor;
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_toggleSelecting", function () {
+        _this.setState({
+          isSelecting: !_this.state.isSelecting
+        });
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_selectStyle", function (val) {
+        var mapStyleActions = _this.props.mapStyleActions;
+        var mapStyleChange = mapStyleActions.mapStyleChange;
+        mapStyleChange(val);
+
+        _this._toggleSelecting();
+      });
+      return _this;
+    }
+
+    (0, _createClass2["default"])(MapManager, [{
+      key: "render",
+      value: function render() {
+        var _this$props = this.props,
+            mapStyle = _this$props.mapStyle,
+            intl = _this$props.intl,
+            mapStyleActions = _this$props.mapStyleActions,
+            showAddMapStyleModal = _this$props.showAddMapStyleModal;
+        var currentStyle = mapStyle.mapStyles[mapStyle.styleType] || {};
+        var editableLayers = (currentStyle.layerGroups || []).map(function (lg) {
+          return lg.slug;
+        });
+        var hasBuildingLayer = mapStyle.visibleLayerGroups['3d building'];
+        var colorSetSelector = (0, _reselect.createSelector)(this.buildingColorSelector, this.setColorSelector, function (selectedColor, setColor) {
+          return [{
+            selectedColor: selectedColor,
+            setColor: setColor,
+            isRange: false,
+            label: intl.formatMessage({
+              id: 'mapManager.3dBuildingColor'
+            })
+          }];
+        });
+        var colorSets = colorSetSelector(this.props);
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: "map-style-panel"
+        }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(MapStyleSelector, {
+          mapStyle: mapStyle,
+          isSelecting: this.state.isSelecting,
+          onChange: this._selectStyle,
+          toggleActive: this._toggleSelecting
+        }), editableLayers.length ? /*#__PURE__*/_react["default"].createElement(LayerGroupSelector, {
+          layers: mapStyle.visibleLayerGroups,
+          editableLayers: editableLayers,
+          topLayers: mapStyle.topLayerGroups,
+          onChange: mapStyleActions.mapConfigChange
+        }) : null, /*#__PURE__*/_react["default"].createElement(_styledComponents.SidePanelSection, null, /*#__PURE__*/_react["default"].createElement(_colorSelector["default"], {
+          colorSets: colorSets,
+          disabled: !hasBuildingLayer
+        })), /*#__PURE__*/_react["default"].createElement(_styledComponents.Button, {
+          className: "add-map-style-button",
+          onClick: showAddMapStyleModal,
+          secondary: true
+        }, /*#__PURE__*/_react["default"].createElement(_icons.Add, {
+          height: "12px"
+        }), /*#__PURE__*/_react["default"].createElement(_localization.FormattedMessage, {
+          id: 'mapManager.addMapStyle'
+        }))));
+      }
+    }]);
+    return MapManager;
+  }(_react.Component);
+
+  return (0, _reactIntl.injectIntl)(MapManager);
+}
+
+var _default = MapManagerFactory;
+exports["default"] = _default;
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zaWRlLXBhbmVsL21hcC1tYW5hZ2VyLnRzeCJdLCJuYW1lcyI6WyJNYXBNYW5hZ2VyRmFjdG9yeSIsImRlcHMiLCJNYXBTdHlsZVNlbGVjdG9yRmFjdG9yeSIsIkxheWVyR3JvdXBTZWxlY3RvckZhY3RvcnkiLCJNYXBTdHlsZVNlbGVjdG9yIiwiTGF5ZXJHcm91cFNlbGVjdG9yIiwiTWFwTWFuYWdlciIsImlzU2VsZWN0aW5nIiwicHJvcHMiLCJtYXBTdHlsZSIsInRocmVlREJ1aWxkaW5nQ29sb3IiLCJtYXBTdHlsZUFjdGlvbnMiLCJzZXQzZEJ1aWxkaW5nQ29sb3IiLCJzZXRTdGF0ZSIsInN0YXRlIiwidmFsIiwibWFwU3R5bGVDaGFuZ2UiLCJfdG9nZ2xlU2VsZWN0aW5nIiwiaW50bCIsInNob3dBZGRNYXBTdHlsZU1vZGFsIiwiY3VycmVudFN0eWxlIiwibWFwU3R5bGVzIiwic3R5bGVUeXBlIiwiZWRpdGFibGVMYXllcnMiLCJsYXllckdyb3VwcyIsIm1hcCIsImxnIiwic2x1ZyIsImhhc0J1aWxkaW5nTGF5ZXIiLCJ2aXNpYmxlTGF5ZXJHcm91cHMiLCJjb2xvclNldFNlbGVjdG9yIiwiYnVpbGRpbmdDb2xvclNlbGVjdG9yIiwic2V0Q29sb3JTZWxlY3RvciIsInNlbGVjdGVkQ29sb3IiLCJzZXRDb2xvciIsImlzUmFuZ2UiLCJsYWJlbCIsImZvcm1hdE1lc3NhZ2UiLCJpZCIsImNvbG9yU2V0cyIsIl9zZWxlY3RTdHlsZSIsImxlbmd0aCIsInRvcExheWVyR3JvdXBzIiwibWFwQ29uZmlnQ2hhbmdlIiwiQ29tcG9uZW50Il0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBb0JBOztBQUVBOztBQUNBOztBQUNBOztBQUVBOztBQUNBOztBQUNBOztBQUNBOztBQUNBOzs7Ozs7QUFVQUEsaUJBQWlCLENBQUNDLElBQWxCLEdBQXlCLENBQUNDLDRCQUFELEVBQTBCQyw0QkFBMUIsQ0FBekI7O0FBRUEsU0FB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LGtDQUFELHFCQUNFLGdDQUFDLHlCQUFEO0FBQWUsVUFBQSxTQUFTLEVBQUVKLFNBQTFCO0FBQXFDLFVBQUEsUUFBUSxFQUFFLENBQUNYO0FBQWhELFVBREYsQ0FmRixlQWtCRSxnQ0FBQyx3QkFBRDtBQUFRLFVBQUEsU0FBUyxFQUFDLHNCQUFsQjtBQUF5QyxVQUFBLE9BQU8sRUFBRVQsb0JBQWxEO0FBQXdFLFVBQUEsU0FBUztBQUFqRix3QkFDRSxnQ0FBQyxVQUFEO0FBQUssVUFBQSxNQUFNLEVBQUM7QUFBWixVQURGLGVBRUUsZ0NBQUMsOEJBQUQ7QUFBa0IsVUFBQSxFQUFFLEVBQUU7QUFBdEIsVUFGRixDQWxCRixDQURGLENBREY7QUEyQkQ7QUFuRUg7QUFBQTtBQUFBLElBQ3lCeUIsZ0JBRHpCOztBQXFFQSxTQUFPLDJCQUFXdEMsVUFBWCxDQUFQO0FBQ0Q7O2VBRWNOLGlCIiwic291cmNlc0NvbnRlbnQiOlsiLy8gQ29weXJpZ2h0IChjKSAyMDIyIFViZXIgVGVjaG5vbG9naWVzLCBJbmMuXG4vL1xuLy8gUGVybWlzc2lvbiBpcyBoZXJlYnkgZ3JhbnRlZCwgZnJlZSBvZiBjaGFyZ2UsIHRvIGFueSBwZXJzb24gb2J0YWluaW5nIGEgY29weVxuLy8gb2YgdGhpcyBzb2Z0d2FyZSBhbmQgYXNzb2NpYXRlZCBkb2N1bWVudGF0aW9uIGZpbGVzICh0aGUgXCJTb2Z0d2FyZVwiKSwgdG8gZGVhbFxuLy8gaW4gdGhlIFNvZnR3YXJlIHdpdGhvdXQgcmVzdHJpY3Rpb24sIGluY2x1ZGluZyB3aXRob3V0IGxpbWl0YXRpb24gdGhlIHJpZ2h0c1xuLy8gdG8gdXNlLCBjb3B5LCBtb2RpZnksIG1lcmdlLCBwdWJsaXNoLCBkaXN0cmlidXRlLCBzdWJsaWNlbnNlLCBhbmQvb3Igc2VsbFxuLy8gY29waWVzIG9mIHRoZSBTb2Z0d2FyZSwgYW5kIHRvIHBlcm1pdCBwZXJzb25zIHRvIHdob20gdGhlIFNvZnR3YXJlIGlzXG4vLyBmdXJuaXNoZWQgdG8gZG8gc28sIHN1YmplY3QgdG8gdGhlIGZvbGxvd2luZyBjb25kaXRpb25zOlxuLy9cbi8vIFRoZSBhYm92ZSBjb3B5cmlnaHQgbm90aWNlIGFuZCB0aGlzIHBlcm1pc3Npb24gbm90aWNlIHNoYWxsIGJlIGluY2x1ZGVkIGluXG4vLyBhbGwgY29waWVzIG9yIHN1YnN0YW50aWFsIHBvcnRpb25zIG9mIHRoZSBTb2Z0d2FyZS5cbi8vXG4vLyBUSEUgU09GVFdBUkUgSVMgUFJPVklERUQgXCJBUyBJU1wiLCBXSVRIT1VUIFdBUlJBTlRZIE9GIEFOWSBLSU5ELCBFWFBSRVNTIE9SXG4vLyBJTVBMSUVELCBJTkNMVURJTkcgQlVUIE5PVCBMSU1JVEVEIFRPIFRIRSBXQVJSQU5USUVTIE9GIE1FUkNIQU5UQUJJTElUWSxcbi8vIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFIEFORCBOT05JTkZSSU5HRU1FTlQuIElOIE5PIEVWRU5UIFNIQUxMIFRIRVxuLy8gQVVUSE9SUyBPUiBDT1BZUklHSFQgSE9MREVSUyBCRSBMSUFCTEUgRk9SIEFOWSBDTEFJTSwgREFNQUdFUyBPUiBPVEhFUlxuLy8gTElBQklMSVRZLCBXSEVUSEVSIElOIEFOIEFDVElPTiBPRiBDT05UUkFDVCwgVE9SVCBPUiBPVEhFUldJU0UsIEFSSVNJTkcgRlJPTSxcbi8vIE9VVCBPRiBPUiBJTiBDT05ORUNUSU9OIFdJVEggVEhFIFNPRlRXQVJFIE9SIFRIRSBVU0UgT1IgT1RIRVIgREVBTElOR1MgSU5cbi8vIFRIRSBTT0ZUV0FSRS5cblxuaW1wb3J0IFJlYWN0LCB7Q29tcG9uZW50fSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7QnV0dG9uLCBTaWRlUGFuZWxTZWN0aW9ufSBmcm9tICcuLi9jb21tb24vc3R5bGVkLWNvbXBvbmVudHMnO1xuaW1wb3J0IE1hcFN0eWxlU2VsZWN0b3JGYWN0b3J5IGZyb20gJy4vbWFwLXN0eWxlLXBhbmVsL21hcC1zdHlsZS1zZWxlY3Rvcic7XG5pbXBvcnQgTGF5ZXJHcm91cFNlbGVjdG9yRmFjdG9yeSBmcm9tICcuL21hcC1zdHlsZS1wYW5lbC9tYXAtbGF5ZXItc2VsZWN0b3InO1xuXG5pbXBvcnQge0FkZH0gZnJvbSAnLi4vY29tbW9uL2ljb25zJztcbmltcG9ydCBDb2xvclNlbGVjdG9yIGZyb20gJy4vbGF5ZXItcGFuZWwvY29sb3Itc2VsZWN0b3InO1xuaW1wb3J0IHtjcmVhdGVTZWxlY3Rvcn0gZnJvbSAncmVzZWxlY3QnO1xuaW1wb3J0IHtpbmplY3RJbnRsLCBXcmFwcGVkQ29tcG9uZW50UHJvcHN9IGZyb20gJ3JlYWN0LWludGwnO1xuaW1wb3J0IHtGb3JtYXR0ZWRNZXNzYWdlfSBmcm9tICdAa2VwbGVyLmdsL2xvY2FsaXphdGlvbic7XG5pbXBvcnQge01hcFN0eWxlfSBmcm9tICdAa2VwbGVyLmdsL3JlZHVjZXJzJztcbmltcG9ydCB7TWFwU3R5bGVBY3Rpb25zfSBmcm9tICdAa2VwbGVyLmdsL2FjdGlvbnMnO1xuXG50eXBlIE1hcE1hbmFnZXJQcm9wcyA9IHtcbiAgbWFwU3R5bGU6IE1hcFN0eWxlO1xuICBtYXBTdHlsZUFjdGlvbnM6IHR5cGVvZiBNYXBTdHlsZUFjdGlvbnM7XG4gIHNob3dBZGRNYXBTdHlsZU1vZGFsOiAoKSA9PiB2b2lkO1xufSAmIFdyYXBwZWRDb21wb25lbnRQcm9wcztcblxuTWFwTWFuYWdlckZhY3RvcnkuZGVwcyA9IFtNYXBTdHlsZVNlbGVjdG9yRmFjdG9yeSwgTGF5ZXJHcm91cFNlbGVjdG9yRmFjdG9yeV07XG5cbmZ1bmN0aW9uIE1hcE1hbmFnZXJGYWN0b3J5KFxuICBNYXBTdHlsZVNlbGVjdG9yOiBSZXR1cm5UeXBlPHR5cGVvZiBNYXBTdHlsZVNlbGVjdG9yRmFjdG9yeT4sXG4gIExheWVyR3JvdXBTZWxlY3RvcjogUmV0dXJuVHlwZTx0eXBlb2YgTGF5ZXJHcm91cFNlbGVjdG9yRmFjdG9yeT5cbikge1xuICBjbGFzcyBNYXBNYW5hZ2VyIGV4dGVuZHMgQ29tcG9uZW50PE1hcE1hbmFnZXJQcm9wcz4ge1xuICAgIHN0YXRlID0ge1xuICAgICAgaXNTZWxlY3Rpbmc6IGZhbHNlXG4gICAgfTtcblxuICAgIGJ1aWxkaW5nQ29sb3JTZWxlY3RvciA9IChwcm9wczogTWFwTWFuYWdlclByb3BzKSA9PiBwcm9wcy5tYXBTdHlsZS50aHJlZURCdWlsZGluZ0NvbG9yO1xuICAgIHNldENvbG9yU2VsZWN0b3IgPSAocHJvcHM6IE1hcE1hbmFnZXJQcm9wcykgPT4gcHJvcHMubWFwU3R5bGVBY3Rpb25zLnNldDNkQnVpbGRpbmdDb2xvcjtcblxuICAgIF90b2dnbGVTZWxlY3RpbmcgPSAoKSA9PiB7XG4gICAgICB0aGlzLnNldFN0YXRlKHtpc1NlbGVjdGluZzogIXRoaXMuc3RhdGUuaXNTZWxlY3Rpbmd9KTtcbiAgICB9O1xuXG4gICAgX3NlbGVjdFN0eWxlID0gKHZhbDogc3RyaW5nKSA9PiB7XG4gICAgICBjb25zdCB7bWFwU3R5bGVBY3Rpb25zfSA9IHRoaXMucHJvcHM7XG4gICAgICBjb25zdCB7bWFwU3R5bGVDaGFuZ2V9ID0gbWFwU3R5bGVBY3Rpb25zO1xuICAgICAgbWFwU3R5bGVDaGFuZ2UodmFsKTtcbiAgICAgIHRoaXMuX3RvZ2dsZVNlbGVjdGluZygpO1xuICAgIH07XG5cbiAgICByZW5kZXIoKSB7XG4gICAgICBjb25zdCB7bWFwU3R5bGUsIGludGwsIG1hcFN0eWxlQWN0aW9ucywgc2hvd0FkZE1hcFN0eWxlTW9kYWx9ID0gdGhpcy5wcm9wcztcbiAgICAgIGNvbnN0IGN1cnJlbnRTdHlsZSA9IG1hcFN0eWxlLm1hcFN0eWxlc1ttYXBTdHlsZS5zdHlsZVR5cGVdIHx8IHt9O1xuICAgICAgY29uc3QgZWRpdGFibGVMYXllcnMgPSAoY3VycmVudFN0eWxlLmxheWVyR3JvdXBzIHx8IFtdKS5tYXAobGcgPT4gbGcuc2x1Zyk7XG4gICAgICBjb25zdCBoYXNCdWlsZGluZ0xheWVyID0gbWFwU3R5bGUudmlzaWJsZUxheWVyR3JvdXBzWyczZCBidWlsZGluZyddO1xuICAgICAgY29uc3QgY29sb3JTZXRTZWxlY3RvciA9IGNyZWF0ZVNlbGVjdG9yKFxuICAgICAgICB0aGlzLmJ1aWxkaW5nQ29sb3JTZWxlY3RvcixcbiAgICAgICAgdGhpcy5zZXRDb2xvclNlbGVjdG9yLFxuICAgICAgICAoc2VsZWN0ZWRDb2xvciwgc2V0Q29sb3IpID0+IFtcbiAgICAgICAgICB7XG4gICAgICAgICAgICBzZWxlY3RlZENvbG9yLFxuICAgICAgICAgICAgc2V0Q29sb3IsXG4gICAgICAgICAgICBpc1JhbmdlOiBmYWxzZSxcbiAgICAgICAgICAgIGxhYmVsOiBpbnRsLmZvcm1hdE1lc3NhZ2Uoe2lkOiAnbWFwTWFuYWdlci4zZEJ1aWxkaW5nQ29sb3InfSlcbiAgICAgICAgICB9XG4gICAgICAgIF1cbiAgICAgICk7XG5cbiAgICAgIGNvbnN0IGNvbG9yU2V0cyA9IGNvbG9yU2V0U2VsZWN0b3IodGhpcy5wcm9wcyk7XG5cbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxkaXYgY2xhc3NOYW1lPVwibWFwLXN0eWxlLXBhbmVsXCI+XG4gICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgIDxNYXBTdHlsZVNlbGVjdG9yXG4gICAgICAgICAgICAgIG1hcFN0eWxlPXttYXBTdHlsZX1cbiAgICAgICAgICAgICAgaXNTZWxlY3Rpbmc9e3RoaXMuc3RhdGUuaXNTZWxlY3Rpbmd9XG4gICAgICAgICAgICAgIG9uQ2hhbmdlPXt0aGlzLl9zZWxlY3RTdHlsZX1cbiAgICAgICAgICAgICAgdG9nZ2xlQWN0aXZlPXt0aGlzLl90b2dnbGVTZWxlY3Rpbmd9XG4gICAgICAgICAgICAvPlxuICAgICAgICAgICAge2VkaXRhYmxlTGF5ZXJzLmxlbmd0aCA/IChcbiAgICAgICAgICAgICAgPExheWVyR3JvdXBTZWxlY3RvclxuICAgICAgICAgICAgICAgIGxheWVycz17bWFwU3R5bGUudmlzaWJsZUxheWVyR3JvdXBzfVxuICAgICAgICAgICAgICAgIGVkaXRhYmxlTGF5ZXJzPXtlZGl0YWJsZUxheWVyc31cbiAgICAgICAgICAgICAgICB0b3BMYXllcnM9e21hcFN0eWxlLnRvcExheWVyR3JvdXBzfVxuICAgICAgICAgICAgICAgIG9uQ2hhbmdlPXttYXBTdHlsZUFjdGlvbnMubWFwQ29uZmlnQ2hhbmdlfVxuICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgKSA6IG51bGx9XG4gICAgICAgICAgICA8U2lkZVBhbmVsU2VjdGlvbj5cbiAgICAgICAgICAgICAgPENvbG9yU2VsZWN0b3IgY29sb3JTZXRzPXtjb2xvclNldHN9IGRpc2FibGVkPXshaGFzQnVpbGRpbmdMYXllcn0gLz5cbiAgICAgICAgICAgIDwvU2lkZVBhbmVsU2VjdGlvbj5cbiAgICAgICAgICAgIDxCdXR0b24gY2xhc3NOYW1lPVwiYWRkLW1hcC1zdHlsZS1idXR0b25cIiBvbkNsaWNrPXtzaG93QWRkTWFwU3R5bGVNb2RhbH0gc2Vjb25kYXJ5PlxuICAgICAgICAgICAgICA8QWRkIGhlaWdodD1cIjEycHhcIiAvPlxuICAgICAgICAgICAgICA8Rm9ybWF0dGVkTWVzc2FnZSBpZD17J21hcE1hbmFnZXIuYWRkTWFwU3R5bGUnfSAvPlxuICAgICAgICAgICAgPC9CdXR0b24+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgKTtcbiAgICB9XG4gIH1cbiAgcmV0dXJuIGluamVjdEludGwoTWFwTWFuYWdlcik7XG59XG5cbmV4cG9ydCBkZWZhdWx0IE1hcE1hbmFnZXJGYWN0b3J5O1xuIl19

package/dist/side-panel/map-style-panel/map-layer-selector.d.ts

@@ -0,0 +1,19 @@
+import { ComponentType } from 'react';
+import PanelHeaderActionFactory from '../panel-header-action';
+import { VisibleLayerGroups } from '@kepler.gl/types';
+import { BaseProps } from '../../common/icons';
+declare type LayerGroupSelectorProps = {
+    layers: VisibleLayerGroups;
+    editableLayers: string[];
+    onChange: (payload: {
+        visibleLayerGroups?: VisibleLayerGroups;
+        topLayerGroups?: VisibleLayerGroups;
+    }) => void;
+    topLayers: VisibleLayerGroups;
+    actionIcons?: Record<string, ComponentType<Partial<BaseProps>>>;
+};
+declare function LayerGroupSelectorFactory(PanelHeaderAction: ReturnType<typeof PanelHeaderActionFactory>): ({ layers, editableLayers, onChange, topLayers, actionIcons }: LayerGroupSelectorProps) => JSX.Element;
+declare namespace LayerGroupSelectorFactory {
+    var deps: (typeof PanelHeaderActionFactory)[];
+}
+export default LayerGroupSelectorFactory;

package/dist/side-panel/map-style-panel/map-layer-selector.js

@@ -0,0 +1,128 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _panelHeaderAction = _interopRequireDefault(require("../panel-header-action"));
+
+var _icons = require("../../common/icons");
+
+var _styledComponents2 = require("../../common/styled-components");
+
+var _localization = require("@kepler.gl/localization");
+
+var _utils = require("@kepler.gl/utils");
+
+var _cloudProviders = require("@kepler.gl/cloud-providers");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var StyledInteractionPanel = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  padding-bottom: 12px;\n"])));
+
+var StyledLayerGroupItem = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-bottom: 10px;\n  display: flex;\n  justify-content: space-between;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n\n  .layer-group__visibility-toggle {\n    margin-right: 12px;\n  }\n"])));
+
+var LayerLabel = (0, _styledComponents["default"])(_styledComponents2.PanelLabelBold)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n"])), function (props) {
+  return props.active ? props.theme.textColor : props.theme.labelColor;
+});
+LayerGroupSelectorFactory.deps = [_panelHeaderAction["default"]];
+
+function LayerGroupSelectorFactory(PanelHeaderAction) {
+  var defaultActionIcons = {
+    visible: _icons.EyeSeen,
+    hidden: _icons.EyeUnseen
+  };
+
+  var LayerGroupSelector = function LayerGroupSelector(_ref) {
+    var layers = _ref.layers,
+        editableLayers = _ref.editableLayers,
+        onChange = _ref.onChange,
+        topLayers = _ref.topLayers,
+        _ref$actionIcons = _ref.actionIcons,
+        actionIcons = _ref$actionIcons === void 0 ? defaultActionIcons : _ref$actionIcons;
+    return /*#__PURE__*/_react["default"].createElement(StyledInteractionPanel, {
+      className: "map-style__layer-group__selector"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "layer-group__header"
+    }, /*#__PURE__*/_react["default"].createElement(_styledComponents2.PanelLabel, null, /*#__PURE__*/_react["default"].createElement(_localization.FormattedMessage, {
+      id: 'mapLayers.title'
+    }))), /*#__PURE__*/_react["default"].createElement(_styledComponents2.PanelContent, {
+      className: "map-style__layer-group"
+    }, editableLayers.map(function (slug) {
+      return /*#__PURE__*/_react["default"].createElement(StyledLayerGroupItem, {
+        className: "layer-group__select",
+        key: slug
+      }, /*#__PURE__*/_react["default"].createElement(_styledComponents2.PanelLabelWrapper, null, /*#__PURE__*/_react["default"].createElement(PanelHeaderAction, {
+        className: "layer-group__visibility-toggle",
+        id: "".concat(slug, "-toggle"),
+        tooltip: layers[slug] ? 'tooltip.hide' : 'tooltip.show',
+        onClick: function onClick() {
+          return onChange({
+            visibleLayerGroups: _objectSpread(_objectSpread({}, layers), {}, (0, _defineProperty2["default"])({}, slug, !layers[slug]))
+          });
+        },
+        IconComponent: layers[slug] ? actionIcons.visible : actionIcons.hidden,
+        active: layers[slug],
+        flush: true
+      }), /*#__PURE__*/_react["default"].createElement(LayerLabel, {
+        active: layers[slug]
+      }, /*#__PURE__*/_react["default"].createElement(_localization.FormattedMessage, {
+        id: "mapLayers.".concat((0, _utils.camelize)(slug))
+      }))), /*#__PURE__*/_react["default"].createElement(_styledComponents2.CenterFlexbox, {
+        className: "layer-group__bring-top"
+      }, /*#__PURE__*/_react["default"].createElement(PanelHeaderAction, {
+        id: "".concat(slug, "-top"),
+        tooltip: "tooltip.moveToTop",
+        disabled: !layers[slug],
+        IconComponent: _cloudProviders.Upload,
+        active: topLayers[slug],
+        onClick: function onClick() {
+          return onChange({
+            topLayerGroups: _objectSpread(_objectSpread({}, topLayers), {}, (0, _defineProperty2["default"])({}, slug, !topLayers[slug]))
+          });
+        }
+      })));
+    })));
+  };
+
+  return LayerGroupSelector;
+}
+
+var _default = LayerGroupSelectorFactory;
+exports["default"] = _default;
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zaWRlLXBhbmVsL21hcC1zdHlsZS1wYW5lbC9tYXAtbGF5ZXItc2VsZWN0b3IudHN4Il0sIm5hbWVzIjpbIlN0eWxlZEludGVyYWN0aW9uUGFuZWwiLCJzdHlsZWQiLCJkaXYiLCJTdHlsZWRMYXllckdyb3VwSXRlbSIsIkxheWVyTGFiZWwiLCJQYW5lbExhYmVsQm9sZCIsInByb3BzIiwiYWN0aXZlIiwidGhlbWUiLCJ0ZXh0Q29sb3IiLCJsYWJlbENvbG9yIiwiTGF5ZXJHcm91cFNlbGVjdG9yRmFjdG9yeSIsImRlcHMiLCJQYW5lbEhlYWRlckFjdGlvbkZhY3RvcnkiLCJQYW5lbEhlYWRlckFjdGlvbiIsImRlZmF1bHRBY3Rpb25JY29ucyIsInZpc2libGUiLCJFeWVTZWVuIiwiaGlkZGVuIiwiRXllVW5zZWVuIiwiTGF5ZXJHcm91cFNlbGVjdG9yIiwibGF5ZXJzIiwiZWRpdGFibGVMYXllcnMiLCJvbkNoYW5nZSIsInRvcExheWVycyIsImFjdGlvbkljb25zIiwibWFwIiwic2x1ZyIsInZpc2libGVMYXllckdyb3VwcyIsIlVwbG9hZCIsInRvcExheWVyR3JvdXBzIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7O0FBb0JBOztBQUNBOztBQUNBOztBQUNBOztBQUVBOztBQU9BOztBQUNBOztBQUdBOzs7Ozs7OztBQUVBLElBQU1BLHNCQUFzQixHQUFHQyw2QkFBT0MsR0FBVixpSEFBNUI7O0FBSUEsSUFBTUMsb0JBQW9CLEdBQUdGLDZCQUFPQyxHQUFWLDRSQUExQjs7QUFrQkEsSUFBTUUsVUFBVSxHQUFHLGtDQUFPQyxpQ0FBUCxDQUFILDJHQUNMLFVBQUFDLEtBQUs7QUFBQSxTQUFLQSxLQUFLLENBQUNDLE1BQU4sR0FBZUQsS0FBSyxDQUFDRSxLQUFOLENBQVlDLFNBQTNCLEdBQXVDSCxLQUFLLENBQUNFLEtBQU4sQ0FBWUUsVUFBeEQ7QUFBQSxDQURBLENBQWhCO0FBZUFDLHlCQUF5QixDQUFDQyxJQUExQixHQUFpQyxD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LCBJbmMuXG4vL1xuLy8gUGVybWlzc2lvbiBpcyBoZXJlYnkgZ3JhbnRlZCwgZnJlZSBvZiBjaGFyZ2UsIHRvIGFueSBwZXJzb24gb2J0YWluaW5nIGEgY29weVxuLy8gb2YgdGhpcyBzb2Z0d2FyZSBhbmQgYXNzb2NpYXRlZCBkb2N1bWVudGF0aW9uIGZpbGVzICh0aGUgXCJTb2Z0d2FyZVwiKSwgdG8gZGVhbFxuLy8gaW4gdGhlIFNvZnR3YXJlIHdpdGhvdXQgcmVzdHJpY3Rpb24sIGluY2x1ZGluZyB3aXRob3V0IGxpbWl0YXRpb24gdGhlIHJpZ2h0c1xuLy8gdG8gdXNlLCBjb3B5LCBtb2RpZnksIG1lcmdlLCBwdWJsaXNoLCBkaXN0cmlidXRlLCBzdWJsaWNlbnNlLCBhbmQvb3Igc2VsbFxuLy8gY29waWVzIG9mIHRoZSBTb2Z0d2FyZSwgYW5kIHRvIHBlcm1pdCBwZXJzb25zIHRvIHdob20gdGhlIFNvZnR3YXJlIGlzXG4vLyBmdXJuaXNoZWQgdG8gZG8gc28sIHN1YmplY3QgdG8gdGhlIGZvbGxvd2luZyBjb25kaXRpb25zOlxuLy9cbi8vIFRoZSBhYm92ZSBjb3B5cmlnaHQgbm90aWNlIGFuZCB0aGlzIHBlcm1pc3Npb24gbm90aWNlIHNoYWxsIGJlIGluY2x1ZGVkIGluXG4vLyBhbGwgY29waWVzIG9yIHN1YnN0YW50aWFsIHBvcnRpb25zIG9mIHRoZSBTb2Z0d2FyZS5cbi8vXG4vLyBUSEUgU09GVFdBUkUgSVMgUFJPVklERUQgXCJBUyBJU1wiLCBXSVRIT1VUIFdBUlJBTlRZIE9GIEFOWSBLSU5ELCBFWFBSRVNTIE9SXG4vLyBJTVBMSUVELCBJTkNMVURJTkcgQlVUIE5PVCBMSU1JVEVEIFRPIFRIRSBXQVJSQU5USUVTIE9GIE1FUkNIQU5UQUJJTElUWSxcbi8vIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFIEFORCBOT05JTkZSSU5HRU1FTlQuIElOIE5PIEVWRU5UIFNIQUxMIFRIRVxuLy8gQVVUSE9SUyBPUiBDT1BZUklHSFQgSE9MREVSUyBCRSBMSUFCTEUgRk9SIEFOWSBDTEFJTSwgREFNQUdFUyBPUiBPVEhFUlxuLy8gTElBQklMSVRZLCBXSEVUSEVSIElOIEFOIEFDVElPTiBPRiBDT05UUkFDVCwgVE9SVCBPUiBPVEhFUldJU0UsIEFSSVNJTkcgRlJPTSxcbi8vIE9VVCBPRiBPUiBJTiBDT05ORUNUSU9OIFdJVEggVEhFIFNPRlRXQVJFIE9SIFRIRSBVU0UgT1IgT1RIRVIgREVBTElOR1MgSU5cbi8vIFRIRSBTT0ZUV0FSRS5cblxuaW1wb3J0IFJlYWN0LCB7Q29tcG9uZW50VHlwZX0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdzdHlsZWQtY29tcG9uZW50cyc7XG5pbXBvcnQgUGFuZWxIZWFkZXJBY3Rpb25GYWN0b3J5IGZyb20gJy4uL3BhbmVsLWhlYWRlci1hY3Rpb24nO1xuaW1wb3J0IHtFeWVTZWVuLCBFeWVVbnNlZW59IGZyb20gJy4uLy4uL2NvbW1vbi9pY29ucyc7XG5cbmltcG9ydCB7XG4gIENlbnRlckZsZXhib3gsXG4gIFBhbmVsTGFiZWwsXG4gIFBhbmVsQ29udGVudCxcbiAgUGFuZWxMYWJlbEJvbGQsXG4gIFBhbmVsTGFiZWxXcmFwcGVyXG59IGZyb20gJy4uLy4uL2NvbW1vbi9zdHlsZWQtY29tcG9uZW50cyc7XG5pbXBvcnQge0Zvcm1hdHRlZE1lc3NhZ2V9IGZyb20gJ0BrZXBsZXIuZ2wvbG9jYWxpemF0aW9uJztcbmltcG9ydCB7Y2FtZWxpemV9IGZyb20gJ0BrZXBsZXIuZ2wvdXRpbHMnO1xuaW1wb3J0IHtWaXNpYmxlTGF5ZXJHcm91cHN9IGZyb20gJ0BrZXBsZXIuZ2wvdHlwZXMnO1xuaW1wb3J0IHtCYXNlUHJvcHN9IGZyb20gJy4uLy4uL2NvbW1vbi9pY29ucyc7XG5pbXBvcnQge1VwbG9hZH0gZnJvbSAnQGtlcGxlci5nbC9jbG91ZC1wcm92aWRlcnMnO1xuXG5jb25zdCBTdHlsZWRJbnRlcmFjdGlvblBhbmVsID0gc3R5bGVkLmRpdmBcbiAgcGFkZGluZy1ib3R0b206IDEycHg7XG5gO1xuXG5jb25zdCBTdHlsZWRMYXllckdyb3VwSXRlbSA9IHN0eWxlZC5kaXZgXG4gIG1hcmdpbi1ib3R0b206IDEwcHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcblxuICAmOmxhc3QtY2hpbGQge1xuICAgIG1hcmdpbi1ib3R0b206IDA7XG4gIH1cblxuICAubGF5ZXItZ3JvdXBfX3Zpc2liaWxpdHktdG9nZ2xlIHtcbiAgICBtYXJnaW4tcmlnaHQ6IDEycHg7XG4gIH1cbmA7XG5cbmludGVyZmFjZSBMYXllckxhYmVsUHJvcHMge1xuICBhY3RpdmU6IGJvb2xlYW47XG59XG5cbmNvbnN0IExheWVyTGFiZWwgPSBzdHlsZWQoUGFuZWxMYWJlbEJvbGQpPExheWVyTGFiZWxQcm9wcz5gXG4gIGNvbG9yOiAke3Byb3BzID0+IChwcm9wcy5hY3RpdmUgPyBwcm9wcy50aGVtZS50ZXh0Q29sb3IgOiBwcm9wcy50aGVtZS5sYWJlbENvbG9yKX07XG5gO1xuXG50eXBlIExheWVyR3JvdXBTZWxlY3RvclByb3BzID0ge1xuICBsYXllcnM6IFZpc2libGVMYXllckdyb3VwcztcbiAgZWRpdGFibGVMYXllcnM6IHN0cmluZ1tdO1xuICBvbkNoYW5nZTogKHBheWxvYWQ6IHtcbiAgICB2aXNpYmxlTGF5ZXJHcm91cHM/OiBWaXNpYmxlTGF5ZXJHcm91cHM7XG4gICAgdG9wTGF5ZXJHcm91cHM/OiBWaXNpYmxlTGF5ZXJHcm91cHM7XG4gIH0pID0+IHZvaWQ7XG4gIHRvcExheWVyczogVmlzaWJsZUxheWVyR3JvdXBzO1xuICBhY3Rpb25JY29ucz86IFJlY29yZDxzdHJpbmcsIENvbXBvbmVudFR5cGU8UGFydGlhbDxCYXNlUHJvcHM+Pj47XG59O1xuXG5MYXllckdyb3VwU2VsZWN0b3JGYWN0b3J5LmRlcHMgPSBbUGFuZWxIZWFkZXJBY3Rpb25GYWN0b3J5XTtcblxuZnVuY3Rpb24gTGF5ZXJHcm91cFNlbGVjdG9yRmFjdG9yeShQYW5lbEhlYWRlckFjdGlvbjogUmV0dXJuVHlwZTx0eXBlb2YgUGFuZWxIZWFkZXJBY3Rpb25GYWN0b3J5Pikge1xuICBjb25zdCBkZWZhdWx0QWN0aW9uSWNvbnMgPSB7XG4gICAgdmlzaWJsZTogRXllU2VlbixcbiAgICBoaWRkZW46IEV5ZVVuc2VlblxuICB9O1xuICBjb25zdCBMYXllckdyb3VwU2VsZWN0b3IgPSAoe1xuICAgIGxheWVycyxcbiAgICBlZGl0YWJsZUxheWVycyxcbiAgICBvbkNoYW5nZSxcbiAgICB0b3BMYXllcnMsXG4gICAgYWN0aW9uSWNvbnMgPSBkZWZhdWx0QWN0aW9uSWNvbnNcbiAgfTogTGF5ZXJHcm91cFNlbGVjdG9yUHJvcHMpID0+IChcbiAgICA8U3R5bGVkSW50ZXJhY3Rpb25QYW5lbCBjbGFzc05hbWU9XCJtYXAtc3R5bGVfX2xheWVyLWdyb3VwX19zZWxlY3RvclwiPlxuICAgICAgPGRpdiBjbGFzc05hbWU9XCJsYXllci1ncm91cF9faGVhZGVyXCI+XG4gICAgICAgIDxQYW5lbExhYmVsPlxuICAgICAgICAgIDxGb3JtYXR0ZWRNZXNzYWdlIGlkPXsnbWFwTGF5ZXJzLnRpdGxlJ30gLz5cbiAgICAgICAgPC9QYW5lbExhYmVsPlxuICAgICAgPC9kaXY+XG4gICAgICA8UGFuZWxDb250ZW50IGNsYXNzTmFtZT1cIm1hcC1zdHlsZV9fbGF5ZXItZ3JvdXBcIj5cbiAgICAgICAge2VkaXRhYmxlTGF5ZXJzLm1hcChzbHVnID0+IChcbiAgICAgICAgICA8U3R5bGVkTGF5ZXJHcm91cEl0ZW0gY2xhc3NOYW1lPVwibGF5ZXItZ3JvdXBfX3NlbGVjdFwiIGtleT17c2x1Z30+XG4gICAgICAgICAgICA8UGFuZWxMYWJlbFdyYXBwZXI+XG4gICAgICAgICAgICAgIDxQYW5lbEhlYWRlckFjdGlvblxuICAgICAgICAgICAgICAgIGNsYXNzTmFtZT1cImxheWVyLWdyb3VwX192aXNpYmlsaXR5LXRvZ2dsZVwiXG4gICAgICAgICAgICAgICAgaWQ9e2Ake3NsdWd9LXRvZ2dsZWB9XG4gICAgICAgICAgICAgICAgdG9vbHRpcD17bGF5ZXJzW3NsdWddID8gJ3Rvb2x0aXAuaGlkZScgOiAndG9vbHRpcC5zaG93J31cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PlxuICAgICAgICAgICAgICAgICAgb25DaGFuZ2Uoe1xuICAgICAgICAgICAgICAgICAgICB2aXNpYmxlTGF5ZXJHcm91cHM6IHtcbiAgICAgICAgICAgICAgICAgICAgICAuLi5sYXllcnMsXG4gICAgICAgICAgICAgICAgICAgICAgW3NsdWddOiAhbGF5ZXJzW3NsdWddXG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIEljb25Db21wb25lbnQ9e2xheWVyc1tzbHVnXSA/IGFjdGlvbkljb25zLnZpc2libGUgOiBhY3Rpb25JY29ucy5oaWRkZW59XG4gICAgICAgICAgICAgICAgYWN0aXZlPXtsYXllcnNbc2x1Z119XG4gICAgICAgICAgICAgICAgZmx1c2hcbiAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgPExheWVyTGFiZWwgYWN0aXZlPXtsYXllcnNbc2x1Z119PlxuICAgICAgICAgICAgICAgIDxGb3JtYXR0ZWRNZXNzYWdlIGlkPXtgbWFwTGF5ZXJzLiR7Y2FtZWxpemUoc2x1Zyl9YH0gLz5cbiAgICAgICAgICAgICAgPC9MYXllckxhYmVsPlxuICAgICAgICAgICAgPC9QYW5lbExhYmVsV3JhcHBlcj5cbiAgICAgICAgICAgIDxDZW50ZXJGbGV4Ym94IGNsYXNzTmFtZT1cImxheWVyLWdyb3VwX19icmluZy10b3BcIj5cbiAgICAgICAgICAgICAgPFBhbmVsSGVhZGVyQWN0aW9uXG4gICAgICAgICAgICAgICAgaWQ9e2Ake3NsdWd9LXRvcGB9XG4gICAgICAgICAgICAgICAgdG9vbHRpcD1cInRvb2x0aXAubW92ZVRvVG9wXCJcbiAgICAgICAgICAgICAgICBkaXNhYmxlZD17IWxheWVyc1tzbHVnXX1cbiAgICAgICAgICAgICAgICBJY29uQ29tcG9uZW50PXtVcGxvYWR9XG4gICAgICAgICAgICAgICAgYWN0aXZlPXt0b3BMYXllcnNbc2x1Z119XG4gICAgICAgICAgICAgICAgb25DbGljaz17KCkgPT5cbiAgICAgICAgICAgICAgICAgIG9uQ2hhbmdlKHtcbiAgICAgICAgICAgICAgICAgICAgdG9wTGF5ZXJHcm91cHM6IHtcbiAgICAgICAgICAgICAgICAgICAgICAuLi50b3BMYXllcnMsXG4gICAgICAgICAgICAgICAgICAgICAgW3NsdWddOiAhdG9wTGF5ZXJzW3NsdWddXG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgPC9DZW50ZXJGbGV4Ym94PlxuICAgICAgICAgIDwvU3R5bGVkTGF5ZXJHcm91cEl0ZW0+XG4gICAgICAgICkpfVxuICAgICAgPC9QYW5lbENvbnRlbnQ+XG4gICAgPC9TdHlsZWRJbnRlcmFjdGlvblBhbmVsPlxuICApO1xuXG4gIHJldHVybiBMYXllckdyb3VwU2VsZWN0b3I7XG59XG5cbmV4cG9ydCBkZWZhdWx0IExheWVyR3JvdXBTZWxlY3RvckZhY3Rvcnk7XG4iXX0=

package/dist/side-panel/map-style-panel/map-style-selector.d.ts

@@ -0,0 +1,16 @@
+import { ComponentType } from 'react';
+import PanelHeaderActionFactory from '../panel-header-action';
+import { MapStyle } from '@kepler.gl/reducers';
+import { BaseProps } from '../../common/icons';
+declare type MapStyleSelectorProps = {
+    mapStyle: MapStyle;
+    onChange: (payload: string) => void;
+    toggleActive: () => void;
+    isSelecting: boolean;
+    actionIcons?: Record<string, ComponentType<Partial<BaseProps>>>;
+};
+declare function MapStyleSelectorFactory(PanelHeaderAction: ReturnType<typeof PanelHeaderActionFactory>): ({ mapStyle, onChange, toggleActive, isSelecting, actionIcons }: MapStyleSelectorProps) => JSX.Element;
+declare namespace MapStyleSelectorFactory {
+    var deps: (typeof PanelHeaderActionFactory)[];
+}
+export default MapStyleSelectorFactory;

package/dist/side-panel/map-style-panel/map-style-selector.js

@@ -0,0 +1,98 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _icons = require("../../common/icons");
+
+var _panelHeaderAction = _interopRequireDefault(require("../panel-header-action"));
+
+var _styledComponents2 = require("../../common/styled-components");
+
+var _localization = require("@kepler.gl/localization");
+
+var _templateObject;
+
+var StyledMapDropdown = (0, _styledComponents["default"])(_styledComponents2.StyledPanelHeader)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  height: 48px;\n  margin-bottom: 5px;\n  opacity: 1;\n  position: relative;\n  transition: opacity 0.05s ease-in, height 0.25s ease-out;\n\n  &.collapsed {\n    height: 0;\n    margin-bottom: 0;\n    opacity: 0;\n  }\n\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n\n  .map-title-block img {\n    margin-right: 12px;\n  }\n\n  .map-preview {\n    border-radius: 3px;\n    height: 30px;\n    width: 40px;\n  }\n"])), function (props) {
+  return props.theme.panelBackgroundHover;
+});
+MapStyleSelectorFactory.deps = [_panelHeaderAction["default"]];
+
+function MapStyleSelectorFactory(PanelHeaderAction) {
+  var defaultActionIcons = {
+    arrowDown: _icons.ArrowDown
+  };
+
+  var MapStyleSelector = function MapStyleSelector(_ref) {
+    var mapStyle = _ref.mapStyle,
+        onChange = _ref.onChange,
+        toggleActive = _ref.toggleActive,
+        isSelecting = _ref.isSelecting,
+        _ref$actionIcons = _ref.actionIcons,
+        actionIcons = _ref$actionIcons === void 0 ? defaultActionIcons : _ref$actionIcons;
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_styledComponents2.PanelLabel, null, /*#__PURE__*/_react["default"].createElement(_localization.FormattedMessage, {
+      id: 'mapManager.mapStyle'
+    })), Object.keys(mapStyle.mapStyles).map(function (op) {
+      return /*#__PURE__*/_react["default"].createElement(StyledMapDropdown, {
+        className: (0, _classnames["default"])('map-dropdown-option', {
+          collapsed: !isSelecting && mapStyle.styleType !== op
+        }),
+        key: op,
+        onClick: isSelecting ? function () {
+          return onChange(op);
+        } : toggleActive
+      }, /*#__PURE__*/_react["default"].createElement(_styledComponents2.PanelHeaderContent, {
+        className: "map-title-block"
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        className: "map-preview",
+        src: mapStyle.mapStyles[op].icon
+      }), /*#__PURE__*/_react["default"].createElement(_styledComponents2.PanelHeaderTitle, {
+        className: "map-preview-name"
+      }, mapStyle.mapStyles[op].label)), !isSelecting ? /*#__PURE__*/_react["default"].createElement(PanelHeaderAction, {
+        className: "map-dropdown-option__enable-config",
+        id: "map-enable-config",
+        IconComponent: actionIcons.arrowDown,
+        tooltip: 'tooltip.selectBaseMapStyle',
+        onClick: toggleActive
+      }) : null);
+    }));
+  };
+
+  return MapStyleSelector;
+}
+
+var _default = MapStyleSelectorFactory;
+exports["default"] = _default;
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9zaWRlLXBhbmVsL21hcC1zdHlsZS1wYW5lbC9tYXAtc3R5bGUtc2VsZWN0b3IudHN4Il0sIm5hbWVzIjpbIlN0eWxlZE1hcERyb3Bkb3duIiwiU3R5bGVkUGFuZWxIZWFkZXIiLCJwcm9wcyIsInRoZW1lIiwicGFuZWxCYWNrZ3JvdW5kSG92ZXIiLCJNYXBTdHlsZVNlbGVjdG9yRmFjdG9yeSIsImRlcHMiLCJQYW5lbEhlYWRlckFjdGlvbkZhY3RvcnkiLCJQYW5lbEhlYWRlckFjdGlvbiIsImRlZmF1bHRBY3Rpb25JY29ucyIsImFycm93RG93biIsIkFycm93RG93biIsIk1hcFN0eWxlU2VsZWN0b3IiLCJtYXBTdHlsZSIsIm9uQ2hhbmdlIiwidG9nZ2xlQWN0aXZlIiwiaXNTZWxlY3RpbmciLCJhY3Rpb25JY29ucyIsIk9iamVjdCIsImtleXMiLCJtYXBTdHlsZXMiLCJtYXAiLCJvcCIsImNvbGxhcHNlZCIsInN0eWxlVHlwZSIsImljb24iLCJsYWJlbCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFvQkE7O0FBQ0E7O0FBQ0E7O0FBQ0E7O0FBQ0E7O0FBRUE7O0FBTUE7Ozs7QUFJQSxJQUFNQSxpQkFBaUIsR0FBRyxrQ0FBT0Msb0NBQVAsQ0FBSCwyZ0JBZUMsVUFBQUMsS0FBSztBQUFBLFNBQUlBLEtBQUssQ0FBQ0MsS0FBTixDQUFZQyxvQkFBaEI7QUFBQSxDQWZOLENBQXZCO0FBcUNBQyx1QkFBdUIsQ0FBQ0MsSUFBeEIsR0FBK0IsQ0FBQ0MsNkJBQUQsQ0FBL0I7O0FBRUEsU0FBU0YsdUJBQVQsQ0FBaUNHLGlCQUFqQyxFQUFpRztBQUMvRixNQUFNQyxrQkFBa0IsR0FBRztBQUN6QkMsSUFBQUEsU0FBUyxFQUFFQztBQURjLEdBQTNCOztBQUdBLE1BQU1DLGdCQUFnQixHQUFHLFNBQW5CQSxnQkFBbUI7QUFBQSxRQUN2QkMsUUFEdUIsUUFDdkJBLFFBRHVCO0FBQUEsUUFFdkJDLFFBRnVCLFFBRXZCQSxRQUZ1QjtBQUFBLFFBR3ZCQyxZQUh1QixRQUd2QkEsWUFIdUI7QUFBQSxRQUl2QkMsV0FKdUIsUUFJdkJBLFdBSnVCO0FBQUEsZ0NBS3ZCQyxXQUx1QjtBQUFBLFFBS3ZCQSxXQUx1QixpQ0FLVFIsa0JBTFM7QUFBQSx3QkFPdkIsMERBQ0UsZ0NBQUMsNkJBQUQscUJBQ0UsZ0NBQUMsOEJBQUQ7QUFBa0IsTUFBQSxFQUFFLEVBQUU7QUFBdEIsTUFERixDQURGLEVBSUdTLE1BQU0sQ0FBQ0MsSUFBUCxDQUFZTixRQUFRLENBQUNPLFNBQXJCLEVBQWdDQyxHQUFoQyxDQUFvQyxVQUFBQyxFQUFFO0FBQUEsMEJBQ3JDLGdDQUFDLGlCQUFEO0FBQ0UsUUFBQSxTQUFTLEVBQUUsNEJBQVcscUJBQVgsRUFBa0M7QUFDM0NDLFVBQUFBLFNBQVMsRUFBRSxDQUFDUCxXQUFELElBQWdCSCxRQUFRLENBQUNXLFNBQVQsS0FBdUJGO0FBRFAsU0FBbEMsQ0FEYjtBQUlFLFFBQUEsR0FBRyxFQUFFQSxFQUpQO0FBS0UsUUFBQSxPQUFPLEVBQUVOLFdBQVcsR0FBRztBQUFBLGlCQUFNRixRQUFRLENBQUNRLEVBQUQsQ0FBZDtBQUFBLFNBQUgsR0FBd0JQO0FBTDlDLHNCQU9FLGdDQUFDLHFDQUFEO0FBQW9CLFFBQUEsU0FBUyxFQUFDO0FBQTlCLHNCQUNFO0FBQUssUUFBQSxTQUFTLEVBQUMsYUFBZjtBQUE2QixRQUFBLEdBQUcsRUFBRUYsUUFBUSxDQUFDTyxTQUFULENBQW1CRSxFQUFuQixFQUF1Qkc7QUFBekQsUUFERixlQUVFLGdDQUFDLG1DQUFEO0FBQWtCLFFBQUEsU0FBUyxFQUFDO0FBQTVCLFNBQ0daLFFBQVEsQ0FBQ08sU0FBVCxDQUFtQkUsRUFBbkIsRUFBdUJJLEtBRDFCLENBRkYsQ0FQRixFQWFHLENBQUNWLFdBQUQsZ0JBQ0MsZ0NBQUMsaUJBQUQ7QUFDRSxRQUFBLFNBQVMsRUFBQyxvQ0FEWjtBQUVFLFFBQUEsRUFBRSxFQUFDLG1CQUZMO0FBR0UsUUFBQSxhQUFhLEVBQUVDLFdBQVcsQ0FBQ1AsU0FIN0I7QUFJRSxRQUFBLE9BQU8sRUFBRSw0QkFKWDtBQUtFLFFBQUEsT0FBTyxFQUFFSztBQUxYLFFBREQsR0FRRyxJQXJCTixDQURxQztBQUFBLEtBQXRDLENBSkgsQ0FQdUI7QUFBQSxHQUF6Qjs7QUF1Q0EsU0FBT0gsZ0JBQVA7QUFDRDs7ZUFFY1AsdUIiLCJzb3VyY2VzQ29udGVudCI6WyIvLyBDb3B5cmlnaHQgKGMpIDIwMjIgVWJlciBUZWNobm9sb2dpZXMsIEluYy5cbi8vXG4vLyBQZXJtaXNzaW9uIGlzIGhlcmVieSBncmFudGVkLCBmcmVlIG9mIGNoYXJnZSwgdG8gYW55IHBlcnNvbiBvYnRhaW5pbmcgYSBjb3B5XG4vLyBvZiB0aGlzIHNvZnR3YXJlIGFuZCBhc3NvY2lhdGVkIGRvY3VtZW50YXRpb24gZmlsZXMgKHRoZSBcIlNvZnR3YXJlXCIpLCB0byBkZWFsXG4vLyBpbiB0aGUgU29mdHdhcmUgd2l0aG91dCByZXN0cmljdGlvbiwgaW5jbHVkaW5nIHdpdGhvdXQgbGltaXRhdGlvbiB0aGUgcmlnaHRzXG4vLyB0byB1c2UsIGNvcHksIG1vZGlmeSwgbWVyZ2UsIHB1Ymxpc2gsIGRpc3RyaWJ1dGUsIHN1YmxpY2Vuc2UsIGFuZC9vciBzZWxsXG4vLyBjb3BpZXMgb2YgdGhlIFNvZnR3YXJlLCBhbmQgdG8gcGVybWl0IHBlcnNvbnMgdG8gd2hvbSB0aGUgU29mdHdhcmUgaXNcbi8vIGZ1cm5pc2hlZCB0byBkbyBzbywgc3ViamVjdCB0byB0aGUgZm9sbG93aW5nIGNvbmRpdGlvbnM6XG4vL1xuLy8gVGhlIGFib3ZlIGNvcHlyaWdodCBub3RpY2UgYW5kIHRoaXMgcGVybWlzc2lvbiBub3RpY2Ugc2hhbGwgYmUgaW5jbHVkZWQgaW5cbi8vIGFsbCBjb3BpZXMgb3Igc3Vic3RhbnRpYWwgcG9ydGlvbnMgb2YgdGhlIFNvZnR3YXJlLlxuLy9cbi8vIFRIRSBTT0ZUV0FSRSBJUyBQUk9WSURFRCBcIkFTIElTXCIsIFdJVEhPVVQgV0FSUkFOVFkgT0YgQU5ZIEtJTkQsIEVYUFJFU1MgT1Jcbi8vIElNUExJRUQsIElOQ0xVRElORyBCVVQgTk9UIExJTUlURUQgVE8gVEhFIFdBUlJBTlRJRVMgT0YgTUVSQ0hBTlRBQklMSVRZLFxuLy8gRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UgQU5EIE5PTklORlJJTkdFTUVOVC4gSU4gTk8gRVZFTlQgU0hBTEwgVEhFXG4vLyBBVVRIT1JTIE9SIENPUFlSSUdIVCBIT0xERVJTIEJFIExJQUJMRSBGT1IgQU5ZIENMQUlNLCBEQU1BR0VTIE9SIE9USEVSXG4vLyBMSUFCSUxJVFksIFdIRVRIRVIgSU4gQU4gQUNUSU9OIE9GIENPTlRSQUNULCBUT1JUIE9SIE9USEVSV0lTRSwgQVJJU0lORyBGUk9NLFxuLy8gT1VUIE9GIE9SIElOIENPTk5FQ1RJT04gV0lUSCBUSEUgU09GVFdBUkUgT1IgVEhFIFVTRSBPUiBPVEhFUiBERUFMSU5HUyBJTlxuLy8gVEhFIFNPRlRXQVJFLlxuXG5pbXBvcnQgUmVhY3QsIHtDb21wb25lbnRUeXBlfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ3N0eWxlZC1jb21wb25lbnRzJztcbmltcG9ydCBjbGFzc25hbWVzIGZyb20gJ2NsYXNzbmFtZXMnO1xuaW1wb3J0IHtBcnJvd0Rvd259IGZyb20gJy4uLy4uL2NvbW1vbi9pY29ucyc7XG5pbXBvcnQgUGFuZWxIZWFkZXJBY3Rpb25GYWN0b3J5IGZyb20gJy4uL3BhbmVsLWhlYWRlci1hY3Rpb24nO1xuXG5pbXBvcnQge1xuICBQYW5lbEhlYWRlckNvbnRlbnQsXG4gIFBhbmVsSGVhZGVyVGl0bGUsXG4gIFBhbmVsTGFiZWwsXG4gIFN0eWxlZFBhbmVsSGVhZGVyXG59IGZyb20gJy4uLy4uL2NvbW1vbi9zdHlsZWQtY29tcG9uZW50cyc7XG5pbXBvcnQge0Zvcm1hdHRlZE1lc3NhZ2V9IGZyb20gJ0BrZXBsZXIuZ2wvbG9jYWxpemF0aW9uJztcbmltcG9ydCB7TWFwU3R5bGV9IGZyb20gJ0BrZXBsZXIuZ2wvcmVkdWNlcnMnO1xuaW1wb3J0IHtCYXNlUHJvcHN9IGZyb20gJy4uLy4uL2NvbW1vbi9pY29ucyc7XG5cbmNvbnN0IFN0eWxlZE1hcERyb3Bkb3duID0gc3R5bGVkKFN0eWxlZFBhbmVsSGVhZGVyKWBcbiAgaGVpZ2h0OiA0OHB4O1xuICBtYXJnaW4tYm90dG9tOiA1cHg7XG4gIG9wYWNpdHk6IDE7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgdHJhbnNpdGlvbjogb3BhY2l0eSAwLjA1cyBlYXNlLWluLCBoZWlnaHQgMC4yNXMgZWFzZS1vdXQ7XG5cbiAgJi5jb2xsYXBzZWQge1xuICAgIGhlaWdodDogMDtcbiAgICBtYXJnaW4tYm90dG9tOiAwO1xuICAgIG9wYWNpdHk6IDA7XG4gIH1cblxuICA6aG92ZXIge1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3Byb3BzID0+IHByb3BzLnRoZW1lLnBhbmVsQmFja2dyb3VuZEhvdmVyfTtcbiAgfVxuXG4gIC5tYXAtdGl0bGUtYmxvY2sgaW1nIHtcbiAgICBtYXJnaW4tcmlnaHQ6IDEycHg7XG4gIH1cblxuICAubWFwLXByZXZpZXcge1xuICAgIGJvcmRlci1yYWRpdXM6IDNweDtcbiAgICBoZWlnaHQ6IDMwcHg7XG4gICAgd2lkdGg6IDQwcHg7XG4gIH1cbmA7XG5cbnR5cGUgTWFwU3R5bGVTZWxlY3RvclByb3BzID0ge1xuICBtYXBTdHlsZTogTWFwU3R5bGU7XG4gIG9uQ2hhbmdlOiAocGF5bG9hZDogc3RyaW5nKSA9PiB2b2lkO1xuICB0b2dnbGVBY3RpdmU6ICgpID0+IHZvaWQ7XG4gIGlzU2VsZWN0aW5nOiBib29sZWFuO1xuICBhY3Rpb25JY29ucz86IFJlY29yZDxzdHJpbmcsIENvbXBvbmVudFR5cGU8UGFydGlhbDxCYXNlUHJvcHM+Pj47XG59O1xuXG5NYXBTdHlsZVNlbGVjdG9yRmFjdG9yeS5kZXBzID0gW1BhbmVsSGVhZGVyQWN0aW9uRmFjdG9yeV07XG5cbmZ1bmN0aW9uIE1hcFN0eWxlU2VsZWN0b3JGYWN0b3J5KFBhbmVsSGVhZGVyQWN0aW9uOiBSZXR1cm5UeXBlPHR5cGVvZiBQYW5lbEhlYWRlckFjdGlvbkZhY3Rvcnk+KSB7XG4gIGNvbnN0IGRlZmF1bHRBY3Rpb25JY29ucyA9IHtcbiAgICBhcnJvd0Rvd246IEFycm93RG93blxuICB9O1xuICBjb25zdCBNYXBTdHlsZVNlbGVjdG9yID0gKHtcbiAgICBtYXBTdHlsZSxcbiAgICBvbkNoYW5nZSxcbiAgICB0b2dnbGVBY3RpdmUsXG4gICAgaXNTZWxlY3RpbmcsXG4gICAgYWN0aW9uSWNvbnMgPSBkZWZhdWx0QWN0aW9uSWNvbnNcbiAgfTogTWFwU3R5bGVTZWxlY3RvclByb3BzKSA9PiAoXG4gICAgPGRpdj5cbiAgICAgIDxQYW5lbExhYmVsPlxuICAgICAgICA8Rm9ybWF0dGVkTWVzc2FnZSBpZD17J21hcE1hbmFnZXIubWFwU3R5bGUnfSAvPlxuICAgICAgPC9QYW5lbExhYmVsPlxuICAgICAge09iamVjdC5rZXlzKG1hcFN0eWxlLm1hcFN0eWxlcykubWFwKG9wID0+IChcbiAgICAgICAgPFN0eWxlZE1hcERyb3Bkb3duXG4gICAgICAgICAgY2xhc3NOYW1lPXtjbGFzc25hbWVzKCdtYXAtZHJvcGRvd24tb3B0aW9uJywge1xuICAgICAgICAgICAgY29sbGFwc2VkOiAhaXNTZWxlY3RpbmcgJiYgbWFwU3R5bGUuc3R5bGVUeXBlICE9PSBvcFxuICAgICAgICAgIH0pfVxuICAgICAgICAgIGtleT17b3B9XG4gICAgICAgICAgb25DbGljaz17aXNTZWxlY3RpbmcgPyAoKSA9PiBvbkNoYW5nZShvcCkgOiB0b2dnbGVBY3RpdmV9XG4gICAgICAgID5cbiAgICAgICAgICA8UGFuZWxIZWFkZXJDb250ZW50IGNsYXNzTmFtZT1cIm1hcC10aXRsZS1ibG9ja1wiPlxuICAgICAgICAgICAgPGltZyBjbGFzc05hbWU9XCJtYXAtcHJldmlld1wiIHNyYz17bWFwU3R5bGUubWFwU3R5bGVzW29wXS5pY29ufSAvPlxuICAgICAgICAgICAgPFBhbmVsSGVhZGVyVGl0bGUgY2xhc3NOYW1lPVwibWFwLXByZXZpZXctbmFtZVwiPlxuICAgICAgICAgICAgICB7bWFwU3R5bGUubWFwU3R5bGVzW29wXS5sYWJlbH1cbiAgICAgICAgICAgIDwvUGFuZWxIZWFkZXJUaXRsZT5cbiAgICAgICAgICA8L1BhbmVsSGVhZGVyQ29udGVudD5cbiAgICAgICAgICB7IWlzU2VsZWN0aW5nID8gKFxuICAgICAgICAgICAgPFBhbmVsSGVhZGVyQWN0aW9uXG4gICAgICAgICAgICAgIGNsYXNzTmFtZT1cIm1hcC1kcm9wZG93bi1vcHRpb25fX2VuYWJsZS1jb25maWdcIlxuICAgICAgICAgICAgICBpZD1cIm1hcC1lbmFibGUtY29uZmlnXCJcbiAgICAgICAgICAgICAgSWNvbkNvbXBvbmVudD17YWN0aW9uSWNvbnMuYXJyb3dEb3dufVxuICAgICAgICAgICAgICB0b29sdGlwPXsndG9vbHRpcC5zZWxlY3RCYXNlTWFwU3R5bGUnfVxuICAgICAgICAgICAgICBvbkNsaWNrPXt0b2dnbGVBY3RpdmV9XG4gICAgICAgICAgICAvPlxuICAgICAgICAgICkgOiBudWxsfVxuICAgICAgICA8L1N0eWxlZE1hcERyb3Bkb3duPlxuICAgICAgKSl9XG4gICAgPC9kaXY+XG4gICk7XG5cbiAgcmV0dXJuIE1hcFN0eWxlU2VsZWN0b3I7XG59XG5cbmV4cG9ydCBkZWZhdWx0IE1hcFN0eWxlU2VsZWN0b3JGYWN0b3J5O1xuIl19

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

@@ -0,0 +1,17 @@
+import { Component } from 'react';
+declare type ClickOutsideCloseDropdownProps = {
+    show: boolean;
+    type: string;
+    className: string;
+    onClose: (e: Event) => void;
+};
+declare class ClickOutsideCloseDropdown extends Component<ClickOutsideCloseDropdownProps> {
+    static defaultProps: {
+        show: boolean;
+        type: string;
+    };
+    handleClickOutside: (e: Event) => void;
+    render(): JSX.Element;
+}
+declare const _default: import("react-onclickoutside").WrapperClass<ClickOutsideCloseDropdownProps, typeof ClickOutsideCloseDropdown>;
+export default _default;

package/dist/side-panel/panel-dropdown.js

@@ -0,0 +1,99 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = require("../common/styled-components");
+
+var _reactOnclickoutside = _interopRequireDefault(require("react-onclickoutside"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var ClickOutsideCloseDropdown = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(ClickOutsideCloseDropdown, _Component);
+
+  var _super = _createSuper(ClickOutsideCloseDropdown);
+
+  function ClickOutsideCloseDropdown() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, ClickOutsideCloseDropdown);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClickOutside", function (e) {
+      if (typeof _this.props.onClose === 'function' && _this.props.show) {
+        _this.props.onClose(e);
+      }
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(ClickOutsideCloseDropdown, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react["default"].createElement(_styledComponents.StyledPanelDropdown, {
+        type: this.props.type,
+        className: this.props.className
+      }, this.props.children);
+    }
+  }]);
+  return ClickOutsideCloseDropdown;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(ClickOutsideCloseDropdown, "defaultProps", {
+  show: true,
+  type: 'dark'
+});
+
+var _default = (0, _reactOnclickoutside["default"])(ClickOutsideCloseDropdown);
+
+exports["default"] = _default;
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zaWRlLXBhbmVsL3BhbmVsLWRyb3Bkb3duLnRzeCJdLCJuYW1lcyI6WyJDbGlja091dHNpZGVDbG9zZURyb3Bkb3duIiwiZSIsInByb3BzIiwib25DbG9zZSIsInNob3ciLCJ0eXBlIiwiY2xhc3NOYW1lIiwiY2hpbGRyZW4iLCJDb21wb25lbnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFvQkE7O0FBQ0E7O0FBQ0E7Ozs7OztJQVNNQSx5Qjs7Ozs7Ozs7Ozs7Ozs7OzJHQU1pQixVQUFDQyxDQUFELEVBQWM7QUFDakMsVUFBSSxPQUFPLE1BQUtDLEtBQUwsQ0FBV0MsT0FBbEIsS0FBOEIsVUFBOUIsSUFBNEMsTUFBS0QsS0FBTCxDQUFXRSxJQUEzRCxFQUFpRTtBQUMvRCxjQUFLRixLQUFMLENBQVdDLE9BQVgsQ0FBbUJGLENBQW5CO0FBQ0Q7QUFDRixLOzs7Ozs7V0FFRCxrQkFBUztBQUNQLDBCQUNFLGdDQUFDLHFDQUFEO0FBQXFCLFFBQUEsSUFBSSxFQUFFLEtBQUtDLEtBQUwsQ0FBV0csSUFBdEM7QUFBNEMsUUFBQSxTQUFTLEVBQUUsS0FBS0gsS0FBTCxDQUFXSTtBQUFsRSxTQUNHLEtBQUtKLEtBQUwsQ0FBV0ssUUFEZCxDQURGO0FBS0Q7OztFQWxCcUNDLGdCOztpQ0FBbENSLHlCLGtCQUNrQjtBQUNwQkksRUFBQUEsSUFBSSxFQUFFLElBRGM7QUFFcEJDLEVBQUFBLElBQUksRUFBRTtBQUZjLEM7O2VBb0JULHFDQUFzQkwseUJBQXRCLEMiLCJzb3VyY2VzQ29udGVudCI6WyIvLyBDb3B5cmlnaHQgKGMpIDIwMjIgVWJlciBUZWNobm9sb2dpZXMsIEluYy5cbi8vXG4vLyBQZXJtaXNzaW9uIGlzIGhlcmVieSBncmFudGVkLCBmcmVlIG9mIGNoYXJnZSwgdG8gYW55IHBlcnNvbiBvYnRhaW5pbmcgYSBjb3B5XG4vLyBvZiB0aGlzIHNvZnR3YXJlIGFuZCBhc3NvY2lhdGVkIGRvY3VtZW50YXRpb24gZmlsZXMgKHRoZSBcIlNvZnR3YXJlXCIpLCB0byBkZWFsXG4vLyBpbiB0aGUgU29mdHdhcmUgd2l0aG91dCByZXN0cmljdGlvbiwgaW5jbHVkaW5nIHdpdGhvdXQgbGltaXRhdGlvbiB0aGUgcmlnaHRzXG4vLyB0byB1c2UsIGNvcHksIG1vZGlmeSwgbWVyZ2UsIHB1Ymxpc2gsIGRpc3RyaWJ1dGUsIHN1YmxpY2Vuc2UsIGFuZC9vciBzZWxsXG4vLyBjb3BpZXMgb2YgdGhlIFNvZnR3YXJlLCBhbmQgdG8gcGVybWl0IHBlcnNvbnMgdG8gd2hvbSB0aGUgU29mdHdhcmUgaXNcbi8vIGZ1cm5pc2hlZCB0byBkbyBzbywgc3ViamVjdCB0byB0aGUgZm9sbG93aW5nIGNvbmRpdGlvbnM6XG4vL1xuLy8gVGhlIGFib3ZlIGNvcHlyaWdodCBub3RpY2UgYW5kIHRoaXMgcGVybWlzc2lvbiBub3RpY2Ugc2hhbGwgYmUgaW5jbHVkZWQgaW5cbi8vIGFsbCBjb3BpZXMgb3Igc3Vic3RhbnRpYWwgcG9ydGlvbnMgb2YgdGhlIFNvZnR3YXJlLlxuLy9cbi8vIFRIRSBTT0ZUV0FSRSBJUyBQUk9WSURFRCBcIkFTIElTXCIsIFdJVEhPVVQgV0FSUkFOVFkgT0YgQU5ZIEtJTkQsIEVYUFJFU1MgT1Jcbi8vIElNUExJRUQsIElOQ0xVRElORyBCVVQgTk9UIExJTUlURUQgVE8gVEhFIFdBUlJBTlRJRVMgT0YgTUVSQ0hBTlRBQklMSVRZLFxuLy8gRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UgQU5EIE5PTklORlJJTkdFTUVOVC4gSU4gTk8gRVZFTlQgU0hBTEwgVEhFXG4vLyBBVVRIT1JTIE9SIENPUFlSSUdIVCBIT0xERVJTIEJFIExJQUJMRSBGT1IgQU5ZIENMQUlNLCBEQU1BR0VTIE9SIE9USEVSXG4vLyBMSUFCSUxJVFksIFdIRVRIRVIgSU4gQU4gQUNUSU9OIE9GIENPTlRSQUNULCBUT1JUIE9SIE9USEVSV0lTRSwgQVJJU0lORyBGUk9NLFxuLy8gT1VUIE9GIE9SIElOIENPTk5FQ1RJT04gV0lUSCBUSEUgU09GVFdBUkUgT1IgVEhFIFVTRSBPUiBPVEhFUiBERUFMSU5HUyBJTlxuLy8gVEhFIFNPRlRXQVJFLlxuXG5pbXBvcnQgUmVhY3QsIHtDb21wb25lbnR9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7U3R5bGVkUGFuZWxEcm9wZG93bn0gZnJvbSAnLi4vY29tbW9uL3N0eWxlZC1jb21wb25lbnRzJztcbmltcG9ydCBsaXN0ZW5zVG9DbGlja091dHNpZGUgZnJvbSAncmVhY3Qtb25jbGlja291dHNpZGUnO1xuXG50eXBlIENsaWNrT3V0c2lkZUNsb3NlRHJvcGRvd25Qcm9wcyA9IHtcbiAgc2hvdzogYm9vbGVhbjtcbiAgdHlwZTogc3RyaW5nO1xuICBjbGFzc05hbWU6IHN0cmluZztcbiAgb25DbG9zZTogKGU6IEV2ZW50KSA9PiB2b2lkO1xufTtcblxuY2xhc3MgQ2xpY2tPdXRzaWRlQ2xvc2VEcm9wZG93biBleHRlbmRzIENvbXBvbmVudDxDbGlja091dHNpZGVDbG9zZURyb3Bkb3duUHJvcHM+IHtcbiAgc3RhdGljIGRlZmF1bHRQcm9wcyA9IHtcbiAgICBzaG93OiB0cnVlLFxuICAgIHR5cGU6ICdkYXJrJ1xuICB9O1xuXG4gIGhhbmRsZUNsaWNrT3V0c2lkZSA9IChlOiBFdmVudCkgPT4ge1xuICAgIGlmICh0eXBlb2YgdGhpcy5wcm9wcy5vbkNsb3NlID09PSAnZnVuY3Rpb24nICYmIHRoaXMucHJvcHMuc2hvdykge1xuICAgICAgdGhpcy5wcm9wcy5vbkNsb3NlKGUpO1xuICAgIH1cbiAgfTtcblxuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRQYW5lbERyb3Bkb3duIHR5cGU9e3RoaXMucHJvcHMudHlwZX0gY2xhc3NOYW1lPXt0aGlzLnByb3BzLmNsYXNzTmFtZX0+XG4gICAgICAgIHt0aGlzLnByb3BzLmNoaWxkcmVufVxuICAgICAgPC9TdHlsZWRQYW5lbERyb3Bkb3duPlxuICAgICk7XG4gIH1cbn1cblxuZXhwb3J0IGRlZmF1bHQgbGlzdGVuc1RvQ2xpY2tPdXRzaWRlKENsaWNrT3V0c2lkZUNsb3NlRHJvcGRvd24pO1xuIl19

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

@@ -0,0 +1,20 @@
+import React, { ComponentType, MouseEventHandler } from 'react';
+import { TooltipProps } from 'react-tooltip';
+import { BaseProps } from '../common/icons';
+interface PanelHeaderActionProps {
+    id?: string;
+    tooltip?: string;
+    hoverColor?: string;
+    className?: string;
+    active?: boolean;
+    flush?: boolean;
+    disabled?: boolean;
+    onClick?: MouseEventHandler;
+    tooltipType?: TooltipProps['type'];
+    IconComponent: ComponentType<Partial<BaseProps>>;
+}
+declare function PanelHeaderActionFactory(): React.FC<PanelHeaderActionProps>;
+declare namespace PanelHeaderActionFactory {
+    var deps: any[];
+}
+export default PanelHeaderActionFactory;