@opengeoweb/shared 8.4.1 → 9.1.0

package/index.esm.js

@@ -1,7 +1,7 @@
 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, 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 { 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, TextField, InputAdornment } from '@mui/material';
+import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Resize, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, ChevronDown, Search, Clear } 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';
 
@@ -332,6 +332,7 @@ var CustomIconButton = /*#__PURE__*/React$1.forwardRef(function (_a, ref) {
       size: size,
       className: classNames,
       ref: ref,
+      "aria-pressed": isSelected,
       sx: Object.assign(Object.assign({}, props.sx), shouldShowAsDisabled && {
         '&.MuiIconButton-root': {
           color: "geowebColors.iconButtons.".concat(variant, ".disabled.color")
@@ -22506,7 +22507,8 @@ var DraggableComponent = function DraggableComponent(_a) {
     }),
     ref: nodeRef,
     className: "toolContainerDraggable",
-    role: "dialog"
+    role: "dialog",
+    "aria-label": title
   }, /*#__PURE__*/React__default.createElement(ResizeComponent, Object.assign({}, props, {
     size: size,
     setSize: setSize,
@@ -24593,6 +24595,153 @@ var SwitchButton = function SwitchButton(props) {
   }, "Editor")));
 };
 
+/* *
+ * 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 isURL = function isURL(string) {
+  return /^https?:\/\//.test(string);
+};
+var ClearButton = function ClearButton(_ref) {
+  var onClick = _ref.onClick;
+  return /*#__PURE__*/React__default.createElement(CustomIconButton, {
+    tooltipTitle: "Clear",
+    sx: buttonStyle,
+    onClick: onClick
+  }, /*#__PURE__*/React__default.createElement(Clear, null));
+};
+var buttonStyle = {
+  '&.MuiButtonBase-root.MuiIconButton-root': {
+    width: 48,
+    height: 48,
+    marginRight: '-12px'
+  }
+};
+var SearchFieldButton = function SearchFieldButton(_ref2) {
+  var localSearchString = _ref2.localSearchString,
+    onClickClear = _ref2.onClickClear,
+    setPopupIsOpen = _ref2.setPopupIsOpen;
+  if (isURL(localSearchString)) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React__default.createElement(ClearButton, {
+      onClick: function onClick() {
+        return onClickClear();
+      }
+    })), /*#__PURE__*/React__default.createElement(Button, {
+      variant: "tertiary",
+      onClick: function onClick() {
+        return setPopupIsOpen(true);
+      }
+    }, "Save"));
+  }
+  if (localSearchString) {
+    return /*#__PURE__*/React__default.createElement(ClearButton, {
+      onClick: function onClick() {
+        return onClickClear();
+      }
+    });
+  }
+  return /*#__PURE__*/React__default.createElement(CustomIconButton, {
+    tooltipTitle: "Search",
+    sx: buttonStyle
+  }, /*#__PURE__*/React__default.createElement(Search, null));
+};
+
+var SearchField = function SearchField(_ref) {
+  var searchFilter = _ref.searchFilter,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Search through services or enter a service URL' : _ref$label,
+    setSearchFilter = _ref.setSearchFilter,
+    onOpenServicePopup = _ref.onOpenServicePopup;
+  var _React$useState = React$1.useState(''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    localSearchString = _React$useState2[0],
+    setLocalSearchString = _React$useState2[1];
+  var _React$useState3 = React$1.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    urlIsValid = _React$useState4[0],
+    setUrlIsValid = _React$useState4[1];
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  var setSearchFilterDebounced = React$1.useCallback(lodash.exports.debounce(setSearchFilter, 300), []);
+  var handleChange = function handleChange(text) {
+    setLocalSearchString(text);
+    if (!isURL(text)) {
+      setSearchFilterDebounced(text);
+    } else if (searchFilter) {
+      setSearchFilterDebounced('');
+    }
+  };
+  React$1.useEffect(function () {
+    if (isURL(localSearchString)) {
+      setUrlIsValid(true);
+    }
+  }, [localSearchString]);
+  React$1.useEffect(function () {
+    var keyDownHandler = function keyDownHandler(event) {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        if (urlIsValid) {
+          onOpenServicePopup(localSearchString);
+          setLocalSearchString('');
+        }
+      }
+    };
+    document.addEventListener('keydown', keyDownHandler);
+    return function () {
+      document.removeEventListener('keydown', keyDownHandler);
+    };
+  }, [urlIsValid, localSearchString, onOpenServicePopup]);
+  // mirror store unless typing a URL
+  React$1.useEffect(function () {
+    if (isURL(localSearchString)) {
+      return;
+    }
+    setLocalSearchString(searchFilter);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchFilter]);
+  return /*#__PURE__*/React$1.createElement(TextField, {
+    variant: "filled",
+    label: label,
+    value: localSearchString,
+    onChange: function onChange(e) {
+      handleChange(e.target.value);
+    },
+    autoFocus: true,
+    fullWidth: true,
+    InputProps: {
+      endAdornment: /*#__PURE__*/React$1.createElement(InputAdornment, {
+        position: "end"
+      }, /*#__PURE__*/React$1.createElement(SearchFieldButton, {
+        setPopupIsOpen: function setPopupIsOpen() {
+          onOpenServicePopup(localSearchString);
+          setLocalSearchString('');
+        },
+        localSearchString: localSearchString,
+        onClickClear: function onClickClear() {
+          setLocalSearchString('');
+          setSearchFilterDebounced('');
+          setUrlIsValid(false);
+        }
+      }))
+    }
+  });
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -26908,4 +27057,4 @@ var getHeight = function getHeight(element) {
   return element.offsetHeight + marginTop + marginBottom;
 };
 
-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, getHeight, 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, SearchField, SearchFieldButton, 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, getHeight, 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.4.1",
+  "version": "9.1.0",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -9,20 +9,5 @@
   },
   "module": "./index.esm.js",
   "type": "module",
-  "main": "./index.esm.js",
-  "dependencies": {},
-  "peerDependencies": {
-    "@mui/material": "5.12.0",
-    "@opengeoweb/theme": "8.4.1",
-    "@redux-eggs/core": "2.2.0",
-    "@reduxjs/toolkit": "1.9.7",
-    "axios": "1.5.0",
-    "date-fns": "2.30.0",
-    "lodash": "4.17.21",
-    "re-resizable": "6.9.11",
-    "react": "18.2.0",
-    "react-draggable": "4.4.6",
-    "react-redux": "8.1.3",
-    "redux-saga": "1.2.3"
-  }
+  "main": "./index.esm.js"
 }

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface SearchFieldProps {
+    searchFilter: string;
+    label?: string;
+    setSearchFilter: (filterText: string) => void;
+    onOpenServicePopup: (url: string) => void;
+}
+export declare const SearchField: React.FC<SearchFieldProps>;
+export {};

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

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

package/src/lib/components/SearchField/SearchFieldButtonContainer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const isURL: (string: string) => boolean;
+interface FieldButtonProps {
+    localSearchString: string;
+    onClickClear: () => void;
+    setPopupIsOpen: (value: boolean) => void;
+}
+export declare const SearchFieldButton: React.FC<FieldButtonProps>;
+export {};

package/src/lib/components/SearchField/SearchFieldButtonContainer.spec.d.ts

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

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

@@ -0,0 +1,2 @@
+export { SearchField } from './SearchField';
+export { SearchFieldButton } from './SearchFieldButtonContainer';

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

@@ -1,3 +1,7 @@
 import * as React from 'react';
 import { Egg } from '@redux-eggs/core';
-export declare function withEggs(eggs: Egg[]): (Component: React.FC) => React.FC;
+import { Theme } from '@mui/material';
+export declare function withEggs(eggs: Egg[]): (Component: React.FC<{
+    children: React.ReactElement;
+    theme?: Theme;
+}>) => React.FC;

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

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

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

@@ -27,6 +27,16 @@ export interface ConfigType {
     GW_FEATURE_MENU_USER_DOCUMENTATION_URL?: string;
     GW_FEATURE_MENU_VERSION?: boolean;
     GW_FEATURE_MENU_FE_VERSION?: boolean;
-    GW_DISPLAY_SEARCH_ON_MAP?: boolean;
+    GW_FEATURE_DISPLAY_SEARCH_ON_MAP?: boolean;
     GW_LANGUAGE?: string;
 }
+export interface TimeSeriesService {
+    id: string;
+    description: string;
+    url: string;
+    type: ServiceInterface;
+    name: string;
+    scope?: TimeseriesServiceScope;
+}
+export type ServiceInterface = 'EDR' | 'OGC';
+export type TimeseriesServiceScope = 'user' | 'system';