@opengeoweb/shared 8.1.0 → 8.3.0

package/index.esm.js

@@ -1,6 +1,6 @@
 import * as React$1 from 'react';
 import React__default, { useRef, useContext } from 'react';
-import { Box, Typography, Tooltip, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, useTheme, Drawer, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, Grid, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Menu, ListSubheader, ListItemIcon, Select, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
+import { Box, Typography, Tooltip, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, useTheme, Drawer, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, Grid, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Menu, ListSubheader, ListItemText, ListItemIcon, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, Switch } from '@mui/material';
 import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Resize, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, ChevronDown } from '@opengeoweb/theme';
 import require$$2, { flushSync } from 'react-dom';
 import { parseISO, parse, format, isEqual, add as add$1, sub as sub$1, differenceInMinutes as differenceInMinutes$1, differenceInHours as differenceInHours$1, isBefore as isBefore$1, isAfter as isAfter$1, isValid as isValid$1, getUnixTime, set as set$1 } from 'date-fns';
@@ -21272,7 +21272,7 @@ var edgeBase = {
     height: '20px',
     position: 'absolute',
 };
-var styles$5 = {
+var styles$6 = {
     top: __assign$1(__assign$1({}, rowSizeBase), { top: '-5px' }),
     right: __assign$1(__assign$1({}, colSizeBase), { left: undefined, right: '-5px' }),
     bottom: __assign$1(__assign$1({}, rowSizeBase), { top: undefined, bottom: '-5px' }),
@@ -21295,7 +21295,7 @@ var Resizer = /** @class */ (function (_super) {
         return _this;
     }
     Resizer.prototype.render = function () {
-        return (React$1.createElement("div", { className: this.props.className || '', style: __assign$1(__assign$1({ position: 'absolute', userSelect: 'none' }, styles$5[this.props.direction]), (this.props.replaceStyles || {})), onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart }, this.props.children));
+        return (React$1.createElement("div", { className: this.props.className || '', style: __assign$1(__assign$1({ position: 'absolute', userSelect: 'none' }, styles$6[this.props.direction]), (this.props.replaceStyles || {})), onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart }, this.props.children));
     };
     return Resizer;
 }(React$1.PureComponent));
@@ -22244,7 +22244,7 @@ ErrorBoundary.defaultProps = {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var styles$4 = {
+var styles$5 = {
   small: {
     height: 16,
     width: 16,
@@ -22258,7 +22258,7 @@ var Avatar = function Avatar(_ref) {
     size = _ref$size === void 0 ? 'large' : _ref$size;
   return /*#__PURE__*/React$1.createElement(Avatar$1, {
     "data-testid": "avatar",
-    sx: Object.assign({}, styles$4[size])
+    sx: Object.assign({}, styles$5[size])
   }, children);
 };
 
@@ -22278,7 +22278,7 @@ var Avatar = function Avatar(_ref) {
  * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
  * */
-var styles$3 = {
+var styles$4 = {
   container: {
     position: 'absolute',
     top: 38,
@@ -22321,13 +22321,13 @@ var UserMenu = function UserMenu(_ref) {
     },
     size: "medium"
   }, /*#__PURE__*/React__default.createElement(Avatar, null, initials)), isOpen && /*#__PURE__*/React__default.createElement(Paper, {
-    sx: styles$3.container,
+    sx: styles$4.container,
     "data-testid": "userMenu"
   }, /*#__PURE__*/React__default.createElement(ClickAwayListener, {
     onClickAway: onClose,
     mouseEvent: "onMouseDown"
   }, /*#__PURE__*/React__default.createElement(MenuList, {
-    sx: styles$3.userMenu,
+    sx: styles$4.userMenu,
     variant: "menu"
   }, children))));
 };
@@ -22403,7 +22403,8 @@ var ToolFooter = function ToolFooter() {
       textAlign: 'right',
       height: 18,
       zIndex: 1
-    }
+    },
+    role: "contentinfo"
   });
 };
 
@@ -22500,7 +22501,9 @@ var ToolHeader = function ToolHeader(_ref) {
       backgroundColor: 'geowebColors.background.surface',
       zIndex: 2,
       cursor: isDraggable ? 'move' : null
-    }
+    },
+    role: "heading",
+    "aria-label": "toolheader"
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     alignItems: "center",
@@ -22539,7 +22542,8 @@ var ToolHeader = function ToolHeader(_ref) {
     sx: {
       fontSize: styles.fontSize,
       fontWeight: styles.fontWeight
-    }
+    },
+    role: "heading"
   }, title), size === 'xxs' && /*#__PURE__*/React__default.createElement(CustomIconButton, {
     "data-testid": "dragBtn-xxs",
     disableRipple: true,
@@ -22588,7 +22592,7 @@ var ToolHeader = function ToolHeader(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var styles$2 = {
+var styles$3 = {
   container: {
     overflow: 'hidden',
     borderRadius: 0,
@@ -22629,7 +22633,7 @@ var ToolContainer = function ToolContainer(_a) {
     props = __rest(_a, ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName", "leftHeaderComponent", "rightHeaderComponent", "dragHandleIcon", "closeIcon"]);
   return /*#__PURE__*/React__default.createElement(Paper, Object.assign({
     elevation: elevation,
-    sx: styles$2.container
+    sx: styles$3.container
   }, props), /*#__PURE__*/React__default.createElement(ErrorBoundary, null, /*#__PURE__*/React__default.createElement(ToolHeader, {
     title: title,
     size: size,
@@ -22641,7 +22645,7 @@ var ToolContainer = function ToolContainer(_a) {
     dragHandleIcon: dragHandleIcon,
     closeIcon: closeIcon
   })), /*#__PURE__*/React__default.createElement(Box, {
-    sx: styles$2.content,
+    sx: styles$3.content,
     style: {
       maxHeight: maxHeight
     }
@@ -22958,7 +22962,8 @@ var DraggableComponent = function DraggableComponent(_a) {
       }
     }),
     ref: nodeRef,
-    className: "toolContainerDraggable"
+    className: "toolContainerDraggable",
+    role: "dialog"
   }, /*#__PURE__*/React__default.createElement(ResizeComponent, Object.assign({}, props, {
     size: size,
     setSize: setSize,
@@ -23006,7 +23011,7 @@ var segmentStyle = {
   letterSpacing: 0.25,
   justifyContent: 'center'
 };
-var styles$1 = {
+var styles$2 = {
   icon: Object.assign(Object.assign({}, segmentStyle), {
     backgroundColor: 'geowebColors.textInputField.default.rgba',
     width: 40,
@@ -23029,21 +23034,21 @@ var ShortCutSegment = function ShortCutSegment(_ref) {
     children = _ref.children;
   if (type === 'divider') {
     return /*#__PURE__*/React__default.createElement(Typography, {
-      sx: styles$1.divider,
+      sx: styles$2.divider,
       "data-testid": "segment-divider",
       component: "span"
     }, children);
   }
   if (type === 'icon') {
     return /*#__PURE__*/React__default.createElement(Typography, {
-      sx: styles$1.icon,
+      sx: styles$2.icon,
       "data-testid": "segment-icon",
       component: "span"
     }, children);
   }
   if (type === 'connect') {
     return /*#__PURE__*/React__default.createElement(Typography, {
-      sx: styles$1.connect,
+      sx: styles$2.connect,
       "data-testid": "segment-connect",
       component: "span"
     }, children);
@@ -23300,7 +23305,7 @@ var TabPanel = function TabPanel(_ref) {
     "aria-labelledby": "tab-".concat(index)
   }, value === index && children);
 };
-var styles = {
+var styles$1 = {
   container: {
     margin: '0px 20px',
     maxHeight: '90vh'
@@ -23318,16 +23323,16 @@ var CheatSheet = function CheatSheet() {
     onChangeActiveTab(newValue);
   };
   return /*#__PURE__*/React__default.createElement(Box, {
-    sx: styles.container
+    sx: styles$1.container
   }, /*#__PURE__*/React__default.createElement(Tabs, {
     value: activeTab,
     onChange: onChangeTab,
     "aria-label": "platform"
   }, /*#__PURE__*/React__default.createElement(Tab, {
-    sx: styles.tab,
+    sx: styles$1.tab,
     label: "Windows"
   }), /*#__PURE__*/React__default.createElement(Tab, {
-    sx: styles.tab,
+    sx: styles$1.tab,
     label: "Mac"
   })), /*#__PURE__*/React__default.createElement(TabPanel, {
     value: activeTab,
@@ -23517,7 +23522,16 @@ var CustomSlider = function CustomSlider(_a) {
     sx: sliderStyle,
     ref: element,
     value: value,
-    orientation: orientation
+    orientation: orientation,
+    role: "slider",
+    slotProps: {
+      thumb: {
+        role: 'button'
+      },
+      mark: {
+        role: 'listitem'
+      }
+    }
   }, props));
 };
 
@@ -23608,7 +23622,9 @@ var ToggleMenu = function ToggleMenu(_ref) {
     _ref$isDefaultOpen = _ref.isDefaultOpen,
     isDefaultOpen = _ref$isDefaultOpen === void 0 ? false : _ref$isDefaultOpen,
     _ref$buttonIcon = _ref.buttonIcon,
-    buttonIcon = _ref$buttonIcon === void 0 ? /*#__PURE__*/React$1.createElement(Options, null) : _ref$buttonIcon;
+    buttonIcon = _ref$buttonIcon === void 0 ? /*#__PURE__*/React$1.createElement(Options, null) : _ref$buttonIcon,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
   var _React$useState = React$1.useState(null),
     _React$useState2 = _slicedToArray$1(_React$useState, 2),
     anchorEl = _React$useState2[0],
@@ -23640,7 +23656,8 @@ var ToggleMenu = function ToggleMenu(_ref) {
     onClick: handleClick,
     "data-testid": buttonTestId,
     variant: variant,
-    id: buttonTestId
+    id: buttonTestId,
+    disabled: isDisabled
   }, buttonIcon), /*#__PURE__*/React$1.createElement(Menu, {
     anchorEl: anchorEl,
     open: isOpen,
@@ -23672,14 +23689,31 @@ var ToggleMenu = function ToggleMenu(_ref) {
   }, menuTitle)), menuItems && menuItems.length ? menuItems.map(function (menuItem) {
     var text = menuItem.text,
       icon = menuItem.icon,
-      action = menuItem.action;
+      action = menuItem.action,
+      isDisabled = menuItem.isDisabled;
     return /*#__PURE__*/React$1.createElement(MenuItem, {
       key: text,
       onClick: function onClick(event) {
         action(event);
         handleClose(event);
+      },
+      disabled: isDisabled
+    }, /*#__PURE__*/React$1.createElement(Grid, {
+      container: true,
+      spacing: 2,
+      justifyContent: "space-between"
+    }, /*#__PURE__*/React$1.createElement(Grid, {
+      item: true
+    }, /*#__PURE__*/React$1.createElement(ListItemText, null, text)), icon && /*#__PURE__*/React$1.createElement(Grid, {
+      item: true,
+      alignItems: "flex-end"
+    }, /*#__PURE__*/React$1.createElement(ListItemIcon, {
+      sx: {
+        '&.MuiListItemIcon-root': {
+          minWidth: '24px'
+        }
       }
-    }, icon && /*#__PURE__*/React$1.createElement(ListItemIcon, null, icon), /*#__PURE__*/React$1.createElement(Typography, null, text));
+    }, icon))));
   }) : /*#__PURE__*/React$1.createElement("div", null) // Needed to make the menu work without any menuItems
   , children));
 };
@@ -24970,7 +25004,8 @@ var SearchHighlight = function SearchHighlight(_ref) {
     })) {
       return /*#__PURE__*/React__default.createElement("mark", {
         key: key,
-        style: highlightStyle
+        style: highlightStyle,
+        "data-testid": "mark"
       }, part);
     }
     return /*#__PURE__*/React__default.createElement("span", {
@@ -24979,6 +25014,42 @@ var SearchHighlight = function SearchHighlight(_ref) {
   }));
 };
 
+/* *
+ * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * */
+var styles = {
+  label: {
+    color: 'geowebColors.buttons.tertiary.default.color',
+    opacity: 1,
+    fontSize: '12px',
+    fontWeight: 500
+  }
+};
+var SwitchButton = function SwitchButton(props) {
+  return /*#__PURE__*/React$1.createElement(CustomTooltip, {
+    title: "Switch mode"
+  }, /*#__PURE__*/React$1.createElement("span", null, /*#__PURE__*/React$1.createElement(FormLabel, {
+    sx: styles.label
+  }, "Viewer"), /*#__PURE__*/React$1.createElement(Switch, Object.assign({
+    "data-testid": "switchMode"
+  }, props)), /*#__PURE__*/React$1.createElement(FormLabel, {
+    sx: styles.label
+  }, "Editor")));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -27232,4 +27303,4 @@ var createToolkitMockStoreWithEggs = function createToolkitMockStoreWithEggs(sto
   return store;
 };
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEFAULT_ERROR_MESSAGE, DraggableComponent$1 as Draggable, ErrorBoundary, ResizeComponent as Resizable, SearchHighlight, StatusTag, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createMockStoreWithEggs, createMockStoreWithEggsAndMiddleware, createToolkitMockStoreWithEggs, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getPosition, getWarningMessage, isAxiosError, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, withEggs };
+export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEFAULT_ERROR_MESSAGE, DraggableComponent$1 as Draggable, ErrorBoundary, ResizeComponent as Resizable, SearchHighlight, StatusTag, SwitchButton, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createMockStoreWithEggs, createMockStoreWithEggsAndMiddleware, createToolkitMockStoreWithEggs, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getPosition, getWarningMessage, isAxiosError, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, withEggs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "8.1.0",
+  "version": "8.3.0",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -13,7 +13,7 @@
   "dependencies": {},
   "peerDependencies": {
     "@mui/material": "5.12.0",
-    "@opengeoweb/theme": "8.1.0",
+    "@opengeoweb/theme": "8.3.0",
     "@redux-eggs/core": "2.2.0",
     "@reduxjs/toolkit": "1.9.5",
     "axios": "1.5.0",

package/src/lib/components/AlertBanner/AlertBanner.stories.d.ts

@@ -3,10 +3,6 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AlertBannersGWTheme: {
-    (): React.ReactElement;
-    storyName: string;
-};
 export declare const AlertBannersLight: {
     (): React.ReactElement;
     storyName: string;

package/src/lib/components/DraggableResizable/types.d.ts

@@ -9,6 +9,10 @@ export type Position = {
     left?: number;
     right?: number;
 };
+export type DraggableSize = {
+    width: number;
+    height: number;
+};
 export type Size = {
     width?: number | string;
     height?: number | string;

package/src/lib/components/StatusTag/StatusTag.stories.d.ts

@@ -3,10 +3,6 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const StatusTagsGWTheme: {
-    (): React.ReactElement;
-    storyName: string;
-};
 export declare const StatusTagsLight: {
     (): React.ReactElement;
     storyName: string;

package/src/lib/components/SwitchButton/SwitchButton.d.ts

@@ -0,0 +1,4 @@
+import { SwitchProps } from '@mui/material';
+import * as React from 'react';
+declare const SwitchButton: React.FC<SwitchProps>;
+export default SwitchButton;

package/src/lib/components/SwitchButton/SwitchButton.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/src/lib/components/SwitchButton/index.d.ts

@@ -0,0 +1 @@
+export { default as SwitchButton } from './SwitchButton';

package/src/lib/components/ToggleMenu/ToggleMenu.d.ts

@@ -10,6 +10,7 @@ type MenuItemType = {
     text: string;
     action: (event: React.MouseEvent) => void;
     icon?: React.ReactNode;
+    isDisabled?: boolean;
 };
 interface ToggleMenuProps {
     buttonTestId?: string;
@@ -22,6 +23,7 @@ interface ToggleMenuProps {
     variant?: Variant;
     isDefaultOpen?: boolean;
     buttonIcon?: React.ReactNode;
+    isDisabled?: boolean;
 }
 export declare const ToggleMenu: React.FC<ToggleMenuProps>;
 export {};

package/src/lib/components/ToolContainer/ToolContainerDraggable.d.ts

@@ -1,15 +1,15 @@
 import React from 'react';
 import { SxProps } from '@mui/material';
 import { NumberSize } from 're-resizable';
-import { DraggablePosition, Position, ResizableComponentProps, Size } from '../DraggableResizable/types';
-import { DialogPosition, DialogSize, HeaderSize } from './types';
+import { DraggableSize, DraggablePosition, Position, ResizableComponentProps, Size } from '../DraggableResizable/types';
+import { HeaderSize } from './types';
 export declare const calculateDialogSizeAndPosition: () => {
     width: number;
     height: number;
     top: number;
     left: number;
 };
-export declare const calculateStartSize: (minSize: DialogSize, prefSize: DialogSize, startPosition: DialogPosition) => DialogSize;
+export declare const calculateStartSize: (minSize: DraggableSize, prefSize: DraggableSize, startPosition: Position) => DraggableSize;
 interface DraggableComponentProps extends Omit<ResizableComponentProps, 'bounds'> {
     startPosition?: Position;
     onStartResize?: () => void;

package/src/lib/components/ToolContainer/types.d.ts

@@ -18,12 +18,3 @@ export interface ToolContainerProps extends PaperProps, ToolHeaderProps {
     maxHeight?: string | number;
     headerClassName?: string;
 }
-export type DialogSize = {
-    width: number;
-    height: number;
-};
-export type DialogPosition = {
-    top: number;
-    left?: number;
-    right?: number;
-};

package/src/lib/components/index.d.ts

@@ -19,3 +19,4 @@ export * from './CustomAccordion';
 export * from './CustomDialog';
 export * from './CustomIconButton';
 export * from './SearchHighlight';
+export * from './SwitchButton';