@opengeoweb/shared 2.1.4 → 2.3.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@mui/styles/makeStyles'), require('@mui/icons-material'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('react-draggable'), require('re-resizable'), require('@opengeoweb/theme'), require('lodash'), require('@mui/styles/withStyles'), require('@mui/styles/createStyles')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@mui/styles/makeStyles', '@mui/icons-material', 'react-hook-form', '@opengeoweb/form-fields', 'react-draggable', 're-resizable', '@opengeoweb/theme', 'lodash', '@mui/styles/withStyles', '@mui/styles/createStyles'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.makeStyles, global.iconsMaterial, global.reactHookForm, global.formFields, global.Draggable, global.reResizable, global.theme, global.lodash, global.withStyles, global.createStyles));
-})(this, (function (exports, React, material, makeStyles, iconsMaterial, reactHookForm, formFields, Draggable, reResizable, theme, lodash, withStyles, createStyles) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@mui/styles/makeStyles'), require('@mui/icons-material'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('react-draggable'), require('re-resizable'), require('@opengeoweb/theme'), require('lodash'), require('@mui/styles/withStyles'), require('@mui/styles/createStyles'), require('@mui/icons-material/MoreVert')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@mui/styles/makeStyles', '@mui/icons-material', 'react-hook-form', '@opengeoweb/form-fields', 'react-draggable', 're-resizable', '@opengeoweb/theme', 'lodash', '@mui/styles/withStyles', '@mui/styles/createStyles', '@mui/icons-material/MoreVert'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.makeStyles, global.iconsMaterial, global.reactHookForm, global.formFields, global.Draggable, global.reResizable, global.theme, global.lodash, global.withStyles, global.createStyles, global.MoreVertIcon));
+})(this, (function (exports, React, material, makeStyles, iconsMaterial, reactHookForm, formFields, Draggable, reResizable, theme, lodash, withStyles, createStyles, MoreVertIcon) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -30,6 +30,7 @@
     var Draggable__default = /*#__PURE__*/_interopDefaultLegacy(Draggable);
     var withStyles__default = /*#__PURE__*/_interopDefaultLegacy(withStyles);
     var createStyles__default = /*#__PURE__*/_interopDefaultLegacy(createStyles);
+    var MoreVertIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreVertIcon);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -159,7 +160,7 @@
       }, content));
     };
 
-    var useStyles$e = makeStyles__default["default"](function () {
+    var useStyles$b = makeStyles__default["default"](function () {
       return {
         dialogHeader: {
           zIndex: 1,
@@ -188,7 +189,7 @@
           content = _e === void 0 ? null : _e,
           other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content"]);
 
-      var classes = useStyles$e();
+      var classes = useStyles$b();
 
       other.catchOnCancel;
           var rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
@@ -501,7 +502,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$d = makeStyles__default["default"](function () {
+    var useStyles$a = makeStyles__default["default"](function () {
       return {
         title: {
           fontSize: '14px',
@@ -571,7 +572,7 @@
           info = _c === void 0 ? '' : _c,
           _d = _a.dataTestId,
           dataTestId = _d === void 0 ? 'alert-banner' : _d;
-      var classes = useStyles$d();
+      var classes = useStyles$a();
       return /*#__PURE__*/React__namespace.createElement(material.Alert, {
         "data-testid": dataTestId,
         severity: severity,
@@ -599,7 +600,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$c = makeStyles__default["default"](function () {
+    var useStyles$9 = makeStyles__default["default"](function () {
       return {
         wrapper: {
           height: '100vh',
@@ -616,7 +617,7 @@
     var AppLayout = function AppLayout(_a) {
       var header = _a.header,
           children = _a.children;
-      var classes = useStyles$c();
+      var classes = useStyles$9();
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: classes.wrapper
       }, header, /*#__PURE__*/React__default["default"].createElement("main", {
@@ -642,7 +643,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$b = makeStyles__default["default"](function (theme) {
+    var useStyles$8 = makeStyles__default["default"](function (theme) {
       var _a;
 
       return {
@@ -679,7 +680,7 @@
           userMenu = _a.userMenu,
           _b = _a.title,
           title = _b === void 0 ? 'GeoWeb' : _b;
-      var classes = useStyles$b();
+      var classes = useStyles$8();
       return /*#__PURE__*/React__default["default"].createElement("header", {
         className: classes.header
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -763,38 +764,29 @@
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
 
-    var useStyles$a = function useStyles(isRightAligned) {
-      return makeStyles__default["default"](function () {
-        return {
-          icon: __assign(__assign({
-            width: 20,
-            height: 20,
-            top: -10,
-            position: 'relative'
-          }, isRightAligned ? {
-            left: -10
-          } : {
-            left: 10,
-            transform: 'rotate(90deg)'
-          }), {
-            zIndex: 1
-          })
-        };
-      });
-    };
-
     var ResizeHandle = function ResizeHandle(_a) {
       var isRightAligned = _a.isRightAligned;
       var theme = material.useTheme();
-      var styles = useStyles$a(isRightAligned)();
       return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
-        className: styles.icon,
+        sx: __assign(__assign({
+          width: 20,
+          height: 20,
+          top: -10,
+          position: 'relative'
+        }, isRightAligned ? {
+          left: -10
+        } : {
+          left: 10,
+          transform: 'rotate(90deg)'
+        }), {
+          zIndex: 1
+        }),
         "data-testid": "resizeHandle"
       }, /*#__PURE__*/React__default["default"].createElement("rect", {
         fill: "#ffffff"
       }), /*#__PURE__*/React__default["default"].createElement("path", {
         d: "M19.687 18.037v1h-6v-1h6zm3.5-3.5v1h-13v-1h13z",
-        fill: "" + theme.palette.geowebColors.greys.accessible,
+        fill: "" + theme.palette.geowebColors.buttons.flat["default"].color,
         transform: "rotate(-45 16.687 16.787)"
       }));
     };
@@ -962,7 +954,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$9 = makeStyles__default["default"](function (theme) {
+    var useStyles$7 = makeStyles__default["default"](function (theme) {
       return {
         container: {
           position: 'absolute',
@@ -1010,7 +1002,7 @@
       } : _d,
           children = _a.children,
           initials = _a.initials;
-      var classes = useStyles$9();
+      var classes = useStyles$7();
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "userButton",
         onClick: onToggle,
@@ -1052,7 +1044,9 @@
           isDark = _a.isDark,
           toggleTheme = _a.toggleTheme;
 
-      return /*#__PURE__*/React__default["default"].createElement(material.MenuItem, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      return /*#__PURE__*/React__default["default"].createElement(material.MenuItem, {
+        divider: true
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
@@ -1091,7 +1085,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$8 = makeStyles__default["default"](function (theme) {
+    var useStyles$6 = makeStyles__default["default"](function (theme) {
       return {
         footer: {
           boxShadow: theme.shadows[1],
@@ -1104,7 +1098,7 @@
     }); // drag handles will be handled by DraggableResizable/Resizable
 
     var ToolFooter = function ToolFooter() {
-      var classes = useStyles$8();
+      var classes = useStyles$6();
       return /*#__PURE__*/React__default["default"].createElement("footer", {
         className: classes.footer
       });
@@ -1142,7 +1136,7 @@
             return {
               fontSize: 16,
               fontWeight: 500,
-              padding: 4
+              padding: '4px'
             };
           }
 
@@ -1151,7 +1145,7 @@
             return {
               fontSize: 20,
               fontWeight: 400,
-              padding: 8
+              padding: '8px'
             };
           }
 
@@ -1160,7 +1154,7 @@
             return {
               fontSize: 16,
               fontWeight: 500,
-              padding: 12
+              padding: '12px'
             };
           }
 
@@ -1171,45 +1165,13 @@
       }
     };
 
-    var useStyles$7 = makeStyles__default["default"](function (theme) {
-      return {
-        header: {
-          boxShadow: theme.shadows[1],
-          background: theme.palette.geowebColors.background.surface,
-          padding: function padding(props) {
-            return props.styles.padding;
-          },
-          zIndex: 1,
-          cursor: function cursor(props) {
-            return props.isDraggable ? 'move' : null;
-          }
-        },
-        title: {
-          fontSize: function fontSize(props) {
-            return props.styles.fontSize;
-          },
-          fontWeight: function fontWeight(props) {
-            return props.styles.fontWeight;
-          }
-        },
-        iconClose: {
-          color: theme.palette.geowebColors.greys.accessible,
-          padding: 0
-        },
-        iconDrag: {
-          color: theme.palette.geowebColors.greys.accessible,
-          padding: 0,
-          pointerEvents: 'none'
-        },
-        iconDragHorizontal: {
-          color: theme.palette.geowebColors.greys.accessible,
-          padding: 0,
-          pointerEvents: 'none',
-          transform: 'rotate(90deg)',
-          height: 12
-        }
-      };
-    });
+    var iconStyle = {
+      color: 'geowebColors.greys.accessible',
+      padding: 0,
+      '&:hover': {
+        background: 'action.hover'
+      }
+    };
 
     var ToolHeader = function ToolHeader(_a) {
       var size = _a.size,
@@ -1221,17 +1183,21 @@
           _d = _a.className,
           className = _d === void 0 ? '' : _d;
       var styles = getStyle(size);
-      var classes = useStyles$7({
-        styles: styles,
-        isDraggable: isDraggable
-      });
 
       var onClickClose = function onClickClose() {
         return onClose();
       };
 
-      return /*#__PURE__*/React__default["default"].createElement("header", {
-        className: classes.header + " " + className
+      return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        component: "header",
+        className: className,
+        sx: {
+          boxShadow: 1,
+          backgroundColor: 'geowebColors.background.surface',
+          padding: styles.padding,
+          zIndex: 1,
+          cursor: isDraggable ? 'move' : null
+        }
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         alignItems: "center"
@@ -1243,9 +1209,11 @@
         justifyContent: "flex-start"
       }, isDraggable && size !== 'xxs' && /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "dragBtn",
-        className: classes.iconDrag,
         disableRipple: true,
-        size: "large"
+        size: "large",
+        sx: __assign(__assign({}, iconStyle), {
+          pointerEvents: 'none'
+        })
       }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.DragIndicator, null)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 10
@@ -1255,12 +1223,19 @@
         alignItems: "center"
       }, title && /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "h2",
-        className: classes.title
+        sx: {
+          fontSize: styles.fontSize,
+          fontWeight: styles.fontWeight
+        }
       }, title), size === 'xxs' && /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "dragBtn-xxs",
-        className: classes.iconDragHorizontal,
         disableRipple: true,
-        size: "small"
+        size: "small",
+        sx: __assign(__assign({}, iconStyle), {
+          pointerEvents: 'none',
+          transform: 'rotate(90deg)',
+          height: 12
+        })
       }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.DragIndicator, null)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 1,
@@ -1268,9 +1243,9 @@
         justifyContent: "flex-end"
       }, onClose && /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "closeBtn",
-        className: classes.iconClose,
         onClick: onClickClose,
-        size: "large"
+        size: "large",
+        sx: iconStyle
       }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.Close, null)))));
     };
 
@@ -1290,7 +1265,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$6 = makeStyles__default["default"](function () {
+    var useStyles$5 = makeStyles__default["default"](function () {
       return {
         container: {
           overflow: 'hidden',
@@ -1330,7 +1305,7 @@
       headerClassName = _h === void 0 ? '' : _h,
           props = __rest(_a, ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName"]);
 
-      var classes = useStyles$6();
+      var classes = useStyles$5();
       return /*#__PURE__*/React__default["default"].createElement(material.Paper, __assign({
         elevation: elevation,
         className: classes.container
@@ -1532,7 +1507,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$5 = makeStyles__default["default"](function (theme) {
+    var useStyles$4 = makeStyles__default["default"](function (theme) {
       return {
         icon: {
           backgroundColor: theme.palette.geowebColors.textInputField["default"].rgba,
@@ -1572,7 +1547,7 @@
       var _b = _a.type,
           type = _b === void 0 ? 'text' : _b,
           children = _a.children;
-      var classes = useStyles$5();
+      var classes = useStyles$4();
 
       if (type === 'divider') {
         return /*#__PURE__*/React__default["default"].createElement(material.Typography, {
@@ -1622,7 +1597,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$4 = makeStyles__default["default"](function (theme) {
+    var useStyles$3 = makeStyles__default["default"](function (theme) {
       return {
         icon: {
           fill: theme.palette.geowebColors.typographyAndIcons.text
@@ -1630,7 +1605,7 @@
       };
     });
     var OptionIcon = function OptionIcon() {
-      var classes = useStyles$4();
+      var classes = useStyles$3();
       return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
         viewBox: "0 0 12 11",
         style: {
@@ -1653,7 +1628,7 @@
       }))));
     };
     var CommandIcon = function CommandIcon() {
-      var classes = useStyles$4();
+      var classes = useStyles$3();
       return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
         viewBox: "0 0 12 12",
         style: {
@@ -1676,7 +1651,7 @@
       }))));
     };
     var ArrowLeftIcon = function ArrowLeftIcon() {
-      var classes = useStyles$4();
+      var classes = useStyles$3();
       return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
         viewBox: "0 0 12 6",
         style: {
@@ -1700,7 +1675,7 @@
       }))));
     };
     var ArrowRightIcon = function ArrowRightIcon() {
-      var classes = useStyles$4();
+      var classes = useStyles$3();
       return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
         viewBox: "0 0 12 6",
         style: {
@@ -1724,7 +1699,7 @@
       }))));
     };
     var ArrowDownIcon = function ArrowDownIcon() {
-      var classes = useStyles$4();
+      var classes = useStyles$3();
       return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
         viewBox: "0 0 6 12",
         style: {
@@ -1747,7 +1722,7 @@
       }))));
     };
     var ArrowUpIcon = function ArrowUpIcon() {
-      var classes = useStyles$4();
+      var classes = useStyles$3();
       return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, {
         viewBox: "0 0 6 11",
         style: {
@@ -1881,6 +1856,14 @@
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
       }, /*#__PURE__*/React__default["default"].createElement(ArrowLeftIcon, null)))
+    }, {
+      title: 'Change layer manager values by scrolling',
+      description: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, "Ctrl"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, " + Mouse scroll")),
+      descriptionMac: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+        type: "icon"
+      }, /*#__PURE__*/React__default["default"].createElement(CommandIcon, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, " + Mouse scroll"))
     }];
     var getShortcutList = function getShortcutList(shortcutList, platform) {
       if (platform === void 0) {
@@ -1901,7 +1884,7 @@
         });
       });
     };
-    var useStyles$3 = makeStyles__default["default"](function () {
+    var useStyles$2 = makeStyles__default["default"](function () {
       return {
         row: {
           minHeight: 56
@@ -1921,7 +1904,7 @@
     var ShortcutList = function ShortcutList(_a) {
       var _b = _a.platform,
           platform = _b === void 0 ? 'windows' : _b;
-      var classes = useStyles$3();
+      var classes = useStyles$2();
       var rows = getShortcutList(shortcuts, platform);
       return /*#__PURE__*/React__default["default"].createElement(material.List, {
         "data-testid": "list-" + platform
@@ -1958,20 +1941,16 @@
       }, value === index && children);
     };
 
-    var useStyles$2 = makeStyles__default["default"](function () {
-      return {
-        container: {
-          margin: '0px 20px'
-        },
-        tab: {
-          fontSize: 12
-        }
-      };
-    });
+    var styles = {
+      container: {
+        margin: '0px 20px'
+      },
+      tab: {
+        fontSize: 12
+      }
+    };
 
     var CheatSheet = function CheatSheet() {
-      var classes = useStyles$2();
-
       var _a = __read(React__default["default"].useState(0), 2),
           activeTab = _a[0],
           onChangeActiveTab = _a[1];
@@ -1980,17 +1959,17 @@
         onChangeActiveTab(newValue);
       };
 
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: classes.container
+      return /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: styles.container
       }, /*#__PURE__*/React__default["default"].createElement(material.Tabs, {
         value: activeTab,
         onChange: onChangeTab,
         "aria-label": "platform"
       }, /*#__PURE__*/React__default["default"].createElement(material.Tab, {
-        className: classes.tab,
+        sx: styles.tab,
         label: "Windows"
       }), /*#__PURE__*/React__default["default"].createElement(material.Tab, {
-        className: classes.tab,
+        sx: styles.tab,
         label: "Mac"
       })), /*#__PURE__*/React__default["default"].createElement(TabPanel, {
         value: activeTab,
@@ -2028,7 +2007,8 @@
 
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.MenuItem, {
         "data-testid": "cheatsheet-btn",
-        onClick: onOpen
+        onClick: onOpen,
+        divider: true
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -2266,7 +2246,7 @@
             alignItems: 'center',
             boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)',
             width: '100%',
-            backgroundColor: '#ffffff',
+            backgroundColor: theme.palette.geowebColors.background.surface,
             zIndex: props.zIndex + 10
           };
         },
@@ -2315,6 +2295,176 @@
       }, children)));
     };
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * */
+
+    var CustomToggleButton = function CustomToggleButton(_a) {
+      var _b = _a.variant,
+          variant = _b === void 0 ? 'primary' : _b,
+          _c = _a.value,
+          value = _c === void 0 ? 0 : _c,
+          props = __rest(_a, ["variant", "value"]);
+
+      return /*#__PURE__*/React__namespace.createElement(material.ToggleButton, __assign({
+        className: variant,
+        value: value
+      }, props));
+    };
+
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * */
+    var ToolButton = function ToolButton(_a) {
+      var active = _a.active,
+          _b = _a.width,
+          width = _b === void 0 ? '24px' : _b,
+          _c = _a.height,
+          height = _c === void 0 ? '24px' : _c,
+          children = _a.children,
+          _d = _a.value,
+          value = _d === void 0 ? 0 : _d,
+          _e = _a.sx,
+          sx = _e === void 0 ? {} : _e,
+          props = __rest(_a, ["active", "width", "height", "children", "value", "sx"]);
+
+      return /*#__PURE__*/React__namespace.createElement(CustomToggleButton, __assign({
+        variant: "tool",
+        disableRipple: true,
+        selected: active,
+        value: value,
+        sx: __assign({
+          width: width + "!important",
+          height: height + "!important",
+          textTransform: 'none!important',
+          padding: '11px!important'
+        }, sx)
+      }, props), children);
+    };
+
+    var getPosition = function getPosition(menuPosition) {
+      switch (menuPosition) {
+        case 'bottom':
+          return {
+            anchorOrigin: {
+              vertical: 'bottom',
+              horizontal: 'center'
+            },
+            transformOrigin: {
+              vertical: 'top',
+              horizontal: 'center'
+            }
+          };
+
+        default:
+        case 'left':
+          return {
+            anchorOrigin: {
+              vertical: 'center',
+              horizontal: 'left'
+            },
+            transformOrigin: {
+              vertical: 'center',
+              horizontal: 'right'
+            }
+          };
+      }
+    };
+
+    var ToggleMenu = function ToggleMenu(_a) {
+      var _b = _a.buttonTestId,
+          buttonTestId = _b === void 0 ? 'toggleMenuButton' : _b,
+          _c = _a.menuPosition,
+          menuPosition = _c === void 0 ? 'left' : _c,
+          menuItems = _a.menuItems,
+          children = _a.children,
+          buttonSx = _a.buttonSx,
+          _d = _a.tooltipTitle,
+          tooltipTitle = _d === void 0 ? '' : _d;
+
+      var _e = __read(React__namespace.useState(null), 2),
+          anchorEl = _e[0],
+          setAnchorEl = _e[1];
+
+      var isOpen = Boolean(anchorEl);
+
+      var _f = getPosition(menuPosition),
+          anchorOrigin = _f.anchorOrigin,
+          transformOrigin = _f.transformOrigin;
+
+      var handleClick = function handleClick(event) {
+        setAnchorEl(event.currentTarget);
+      };
+
+      var handleClose = function handleClose() {
+        setAnchorEl(null);
+      };
+
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ToolButton, {
+        active: isOpen,
+        sx: buttonSx,
+        onClick: handleClick,
+        "data-testid": buttonTestId
+      }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
+        placement: "top",
+        title: tooltipTitle
+      }, /*#__PURE__*/React__namespace.createElement(MoreVertIcon__default["default"], null))), /*#__PURE__*/React__namespace.createElement(material.Menu, {
+        anchorEl: anchorEl,
+        open: isOpen,
+        onClose: handleClose,
+        anchorOrigin: anchorOrigin,
+        transformOrigin: transformOrigin,
+        BackdropProps: {
+          style: {
+            opacity: 0,
+            transition: 'none'
+          }
+        },
+        MenuListProps: children && {
+          style: {
+            padding: '0px'
+          }
+        }
+      }, menuItems && menuItems.map(function (menuItem) {
+        var text = menuItem.text,
+            icon = menuItem.icon,
+            action = menuItem.action;
+        return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
+          key: text,
+          onClick: function onClick() {
+            action();
+            handleClose();
+          }
+        }, icon && /*#__PURE__*/React__namespace.createElement(material.ListItemIcon, null, icon), /*#__PURE__*/React__namespace.createElement(material.Typography, null, text));
+      }), children));
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -2355,12 +2505,15 @@
     exports.ConfirmationDialog = ConfirmationDialog;
     exports.ConfirmationServiceProvider = ConfirmationServiceProvider;
     exports.CustomSlider = CustomSlider;
+    exports.CustomToggleButton = CustomToggleButton;
     exports.Draggable = DraggableComponent$1;
     exports.DraggableDialog = DraggableDialog;
     exports.ErrorBoundary = ErrorBoundary;
     exports.HIDDEN_INPUT_HELPER_IS_DRAFT = HIDDEN_INPUT_HELPER_IS_DRAFT;
     exports.Resizable = ResizeComponent;
     exports.StatusTag = StatusTag;
+    exports.ToggleMenu = ToggleMenu;
+    exports.ToolButton = ToolButton;
     exports.ToolContainer = ToolContainer;
     exports.ToolContainerDraggable = DraggableComponent;
     exports.ToolFooter = ToolFooter;