@opengeoweb/shared 9.35.1-spike-oltanstack.0 → 9.37.0

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Box, Typography, Tooltip, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, useTheme, Drawer, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, Grid2, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Switch, Slider, ToggleButton, Menu, ListSubheader, ListItemText, ListItemIcon, styled, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, TextField, InputAdornment, Chip, Stack, debounce as debounce$1, Checkbox, ListItemButton } from '@mui/material';
-import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Resize, Admin, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, ChevronDown, Search, Clear, Cached } from '@opengeoweb/theme';
+import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Resize, Admin, useThemeContext, ThemeTypes, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, ChevronDown, Search, Clear, Cached } from '@opengeoweb/theme';
 import * as React from 'react';
 import React__default, { useRef, Component, useState } from 'react';
 import 'i18next';
@@ -10,7 +10,7 @@ import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
 import * as Sentry from '@sentry/react';
 import { useStore } from 'react-redux';
-import { parseISO, parse, format, isEqual, add as add$1, sub as sub$1, differenceInYears as differenceInYears$1, differenceInMonths as differenceInMonths$1, differenceInDays as differenceInDays$1, differenceInMinutes as differenceInMinutes$1, differenceInHours as differenceInHours$1, differenceInSeconds as differenceInSeconds$1, roundToNearestMinutes as roundToNearestMinutes$1, isBefore as isBefore$1, isAfter as isAfter$1, isValid as isValid$1, getUnixTime, fromUnixTime, set as set$1, getHours as getHours$1, startOfDay, addMinutes, addHours, getDay, getDayOfYear, getMonth, getWeek, getYear, isWithinInterval } from 'date-fns';
+import { parseISO, parse, format, isEqual, add as add$1, sub as sub$1, differenceInYears as differenceInYears$1, differenceInMonths as differenceInMonths$1, differenceInDays as differenceInDays$1, differenceInMinutes as differenceInMinutes$1, differenceInHours as differenceInHours$1, differenceInSeconds as differenceInSeconds$1, roundToNearestMinutes as roundToNearestMinutes$1, isBefore as isBefore$1, isAfter as isAfter$1, isValid as isValid$1, getUnixTime, fromUnixTime, set as set$1, getHours as getHours$1, startOfDay, addMinutes, addHours, setSeconds as setSeconds$1, getDay, getDayOfYear, getMonth, getWeek, getYear, isWithinInterval } from 'date-fns';
 import { configureStore } from '@reduxjs/toolkit';
 
 var en = {
@@ -66,6 +66,7 @@ var en = {
 	"shared-clear": "Clear",
 	"shared-light": "Light",
 	"shared-dark": "Dark",
+	"shared-xmas": "Christmas",
 	"shared-filter-all": "All",
 	"shared-filter-my-presets": "My presets",
 	"shared-filter-system-presets": "System presets",
@@ -125,6 +126,7 @@ var fi = {
 	"shared-clear": "Tyhjennä",
 	"shared-light": "Vaalea",
 	"shared-dark": "Tumma",
+	"shared-xmas": "Joulu",
 	"shared-filter-all": "Kaikki",
 	"shared-filter-my-presets": "Omat presetit",
 	"shared-filter-system-presets": "Järestelmä presetit",
@@ -184,6 +186,7 @@ var no = {
 	"shared-clear": "Tøm",
 	"shared-light": "Lys",
 	"shared-dark": "Mørk",
+	"shared-xmas": "Christmas",
 	"shared-filter-all": "Alle",
 	"shared-filter-my-presets": "Mine presets",
 	"shared-filter-system-presets": "System presets",
@@ -243,6 +246,7 @@ var nl = {
 	"shared-clear": "Wissen",
 	"shared-light": "Licht",
 	"shared-dark": "Donker",
+	"shared-xmas": "Kerstmis",
 	"shared-filter-all": "Alle",
 	"shared-filter-my-presets": "Mijn presets",
 	"shared-filter-system-presets": "Systeem presets",
@@ -600,7 +604,7 @@ function _setPrototypeOf(t, e) {
   }, _setPrototypeOf(t, e);
 }
 
-var _excluded$d = ["content", "color", "icon"];
+var _excluded$e = ["content", "color", "icon"];
 var bgColors = {
   green: 'geowebColors.functional.successOutline.fill',
   grey: 'geowebColors.functional.disabledOutline.fill',
@@ -638,7 +642,7 @@ var StatusTag = function StatusTag(_ref) {
   var content = _ref.content,
     color = _ref.color,
     icon = _ref.icon,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   return jsxs(Box, {
     display: "flex",
     alignItems: "center",
@@ -693,7 +697,7 @@ var CustomTooltip = function CustomTooltip(props) {
   }));
 };
 
-var _excluded$c = ["tooltipTitle", "variant", "isSelected", "shouldShowAsDisabled", "size", "children", "className", "tooltipProps"];
+var _excluded$d = ["tooltipTitle", "variant", "isSelected", "shouldShowAsDisabled", "size", "children", "className", "tooltipProps"];
 var CustomIconButtonNoMemo = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$tooltipTitle = _ref.tooltipTitle,
     defaultTooltipTitle = _ref$tooltipTitle === void 0 ? '' : _ref$tooltipTitle,
@@ -708,7 +712,7 @@ var CustomIconButtonNoMemo = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     children = _ref.children,
     className = _ref.className,
     defaultTooltipProps = _ref.tooltipProps,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   var classNames = [].concat(className ? [className] : [], isSelected ? ['Mui-selected'] : [], [variant]).join(' ');
   var tooltipTitle = (defaultTooltipProps == null ? void 0 : defaultTooltipProps.title) || defaultTooltipTitle;
   var tooltipProps = React.useMemo(function () {
@@ -745,7 +749,7 @@ var CustomIconButtonNoMemo = /*#__PURE__*/React.forwardRef(function (_ref, ref)
 });
 var CustomIconButton = /*#__PURE__*/React.memo(CustomIconButtonNoMemo);
 
-var _excluded$b = ["title", "onClose", "description", "actions", "children", "sx"];
+var _excluded$c = ["title", "onClose", "description", "actions", "children", "sx"];
 var CustomDialog = function CustomDialog(_ref) {
   var title = _ref.title,
     _onClose = _ref.onClose,
@@ -755,7 +759,7 @@ var CustomDialog = function CustomDialog(_ref) {
     actions = _ref$actions === void 0 ? null : _ref$actions,
     children = _ref.children,
     sx = _ref.sx,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   return jsxs(Dialog, Object.assign({
     "data-testid": "customDialog",
     PaperProps: {
@@ -846,7 +850,7 @@ var useSharedTranslation = function useSharedTranslation() {
   return useTranslation([SHARED_NAMESPACE]);
 };
 
-var _excluded$a = ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content", "disableAutoFocus", "isLoading"],
+var _excluded$b = ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content", "disableAutoFocus", "isLoading"],
   _excluded2$1 = ["catchOnCancel"];
 var confirmStyle = {
   width: {
@@ -880,7 +884,7 @@ var ConfirmationDialog = function ConfirmationDialog(_ref) {
     disableAutoFocus = _ref$disableAutoFocus === void 0 ? false : _ref$disableAutoFocus,
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   other.catchOnCancel;
     var rest = _objectWithoutPropertiesLoose(other, _excluded2$1); // remove unwanted props
   var _useSharedTranslation = useSharedTranslation(),
@@ -1476,7 +1480,7 @@ var AppLayout = function AppLayout(_ref) {
 };
 
 var AppHeader = function AppHeader(_ref) {
-  var _sx;
+  var _sx, _theme$palette$geoweb;
   var menu = _ref.menu,
     userMenu = _ref.userMenu,
     workspaceTopBar = _ref.workspaceTopBar,
@@ -1529,7 +1533,14 @@ var AppHeader = function AppHeader(_ref) {
         alignItems: 'center',
         cursor: onClick ? 'pointer' : 'auto'
       },
-      children: [jsx(GeoWebLogo, {
+      children: [(_theme$palette$geoweb = theme.palette.geowebColors.logo) != null && _theme$palette$geoweb.image ? jsx("img", {
+        src: theme.palette.geowebColors.logo.image,
+        alt: "GeoWeb",
+        style: {
+          height: '29px',
+          width: '47px'
+        }
+      }) : jsx(GeoWebLogo, {
         style: {
           position: 'relative',
           top: '-1px',
@@ -1615,12 +1626,12 @@ var AppHeader = function AppHeader(_ref) {
   });
 };
 
-var _excluded$9 = ["bounds", "children"];
+var _excluded$a = ["bounds", "children"];
 var DraggableComponent$1 = function DraggableComponent(_ref) {
   var _ref$bounds = _ref.bounds,
     bounds = _ref$bounds === void 0 ? 'body' : _ref$bounds,
     children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var onDragStart = function onDragStart(e) {
     // This makes sure that nothing is selected during drag
     e.preventDefault();
@@ -1634,7 +1645,7 @@ var DraggableComponent$1 = function DraggableComponent(_ref) {
   }));
 };
 
-var _excluded$8 = ["children", "onResizeStart", "onResizeStop", "size", "setSize", "minHeight", "minWidth", "enable", "nodeRef"];
+var _excluded$9 = ["children", "onResizeStart", "onResizeStop", "size", "setSize", "minHeight", "minWidth", "enable", "nodeRef"];
 var isDraggingClassName = 'is-dragging';
 var useBoundsProps = function useBoundsProps(nodeRef) {
   var _React$useState = React__default.useState({}),
@@ -1677,7 +1688,7 @@ var ResizeComponent = function ResizeComponent(_ref) {
       topLeft: true
     } : _ref$enable,
     nodeRef = _ref.nodeRef,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   var theme = useTheme();
   var onStartResize = React__default.useCallback(function (event, _direction, node) {
     event.stopPropagation();
@@ -1952,8 +1963,8 @@ var UserMenu = function UserMenu(_ref) {
 
 var MenuItemTheme = function MenuItemTheme() {
   var _useThemeContext = useThemeContext(),
-    isDark = _useThemeContext.isDark,
-    toggleTheme = _useThemeContext.toggleTheme;
+    namedTheme = _useThemeContext.namedTheme,
+    setThemeName = _useThemeContext.setThemeName;
   var _useTranslation = useTranslation(SHARED_NAMESPACE),
     t = _useTranslation.t;
   return jsx(MenuItem, {
@@ -1964,19 +1975,29 @@ var MenuItemTheme = function MenuItemTheme() {
         children: t('shared-choose-app-mode')
       }), jsx(Grid2, {
         children: jsxs(RadioGroup, {
-          onChange: toggleTheme,
+          onChange: function onChange(event, value) {
+            if (value && setThemeName) {
+              setThemeName(value);
+            }
+          },
           children: [jsx(FormControlLabel, {
-            value: true,
+            value: ThemeTypes.LIGHT_THEME,
             control: jsx(Radio, {
-              checked: !isDark
+              checked: (namedTheme == null ? void 0 : namedTheme.name) === ThemeTypes.LIGHT_THEME
             }),
             label: t('shared-light')
           }), jsx(FormControlLabel, {
-            value: false,
+            value: ThemeTypes.DARK_THEME,
             control: jsx(Radio, {
-              checked: isDark
+              checked: (namedTheme == null ? void 0 : namedTheme.name) === ThemeTypes.DARK_THEME
             }),
             label: t('shared-dark')
+          }), jsx(FormControlLabel, {
+            value: ThemeTypes.XMAS2024_THEME,
+            control: jsx(Radio, {
+              checked: (namedTheme == null ? void 0 : namedTheme.name) === ThemeTypes.XMAS2024_THEME
+            }),
+            label: t('shared-xmas') + " 2024"
           })]
         })
       })]
@@ -2183,7 +2204,7 @@ var ToolHeader = function ToolHeader(_ref) {
   });
 };
 
-var _excluded$7 = ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName", "leftHeaderComponent", "rightHeaderComponent", "dragHandleIcon", "closeIcon"];
+var _excluded$8 = ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName", "leftHeaderComponent", "rightHeaderComponent", "dragHandleIcon", "closeIcon"];
 var styles$3 = {
   container: {
     overflow: 'hidden',
@@ -2222,7 +2243,7 @@ var ToolContainer = function ToolContainer(_ref) {
     rightHeaderComponent = _ref$rightHeaderCompo === void 0 ? null : _ref$rightHeaderCompo,
     dragHandleIcon = _ref.dragHandleIcon,
     closeIcon = _ref.closeIcon,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   return jsxs(Paper, Object.assign({
     elevation: elevation,
     sx: styles$3.container
@@ -2390,7 +2411,7 @@ var useHandleSizeFromOutsideComponent = function useHandleSizeFromOutsideCompone
   }, [isOpen, getBoundsNode]);
 };
 
-var _excluded$6 = ["title", "bounds", "cancel", "headerSize", "startSize", "startPosition", "children", "isOpen", "onClose", "initialMaxHeight", "onChangeSize", "onMouseDown", "onResizeStop", "onDragEnd", "order", "source", "leftHeaderComponent", "rightHeaderComponent", "dragHandleIcon", "closeIcon", "className", "sx"];
+var _excluded$7 = ["title", "bounds", "cancel", "headerSize", "startSize", "startPosition", "children", "isOpen", "onClose", "initialMaxHeight", "onChangeSize", "onMouseDown", "onResizeStop", "onDragEnd", "order", "source", "leftHeaderComponent", "rightHeaderComponent", "dragHandleIcon", "closeIcon", "className", "sx"];
 // calculate dialog size and position to 85% of screensize
 var calculateDialogSizeAndPosition = function calculateDialogSizeAndPosition() {
   var width = window.innerWidth * 0.85;
@@ -2485,7 +2506,7 @@ var DraggableComponent = function DraggableComponent(_ref) {
     className = _ref.className,
     _ref$sx = _ref.sx,
     sx = _ref$sx === void 0 ? {} : _ref$sx,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var zIndex = (source === 'app' ? BASE_Z_INDEX : 1000) + order;
   var elevation = BASE_ELEVATION + order;
   var nodeRef = React__default.useRef(null);
@@ -3385,7 +3406,7 @@ var getInitials = function getInitials(name) {
   }
 };
 
-var _excluded$5 = ["value", "orientation", "shouldAutoFocus"];
+var _excluded$6 = ["value", "orientation", "shouldAutoFocus"];
 var sliderHeaderStyle = {
   fontFamily: 'Roboto-Black, Roboto',
   fontSize: 12,
@@ -3442,7 +3463,7 @@ var CustomSlider = function CustomSlider(_ref) {
     orientation = _ref$orientation === void 0 ? 'vertical' : _ref$orientation,
     _ref$shouldAutoFocus = _ref.shouldAutoFocus,
     shouldAutoFocus = _ref$shouldAutoFocus === void 0 ? false : _ref$shouldAutoFocus,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   // Add custom class (for bold text) to label adjacent to thumb component.
   // Material UI doesn't support highlighing only adjacent label
   // when track is highlighted everywhere below selected value.
@@ -3462,7 +3483,7 @@ var CustomSlider = function CustomSlider(_ref) {
     rest.forEach(function (element) {
       return element.classList.remove('selectedLabel');
     });
-  }, [value, themeContext.isDark]);
+  }, [value, themeContext.namedTheme]);
   // autofocus
   React.useEffect(function () {
     if (shouldAutoFocus && element.current) {
@@ -3488,7 +3509,7 @@ var CustomSlider = function CustomSlider(_ref) {
   }, props));
 };
 
-var _excluded$4 = ["variant", "className", "value"];
+var _excluded$5 = ["variant", "className", "value"];
 // This button is same as MUI ToggleButton but adds the variant prop
 var CustomToggleButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$variant = _ref.variant,
@@ -3496,7 +3517,7 @@ var CustomToggleButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref.className,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? 0 : _ref$value,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   return jsx(ToggleButton, Object.assign({
     ref: ref,
     className: variant + " " + className,
@@ -3667,7 +3688,7 @@ var ToggleMenu = function ToggleMenu(_ref) {
   });
 };
 
-var _excluded$3 = ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange", "isEnabled", "hasBackgroundColor", "variant", "additionalStyling", "skipLocalStyling"],
+var _excluded$4 = ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange", "isEnabled", "hasBackgroundColor", "variant", "additionalStyling", "skipLocalStyling"],
   _excluded2 = ["className", "additionalStyling"];
 var TooltipSelect = function TooltipSelect(_ref) {
   var _ref$tooltip = _ref.tooltip,
@@ -3688,7 +3709,7 @@ var TooltipSelect = function TooltipSelect(_ref) {
     additionalStyling = _ref$additionalStylin === void 0 ? {} : _ref$additionalStylin,
     _ref$skipLocalStyling = _ref.skipLocalStyling,
     skipLocalStyling = _ref$skipLocalStyling === void 0 ? false : _ref$skipLocalStyling,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var _React$useState = React.useState(false),
     selectOpen = _React$useState[0],
     setSelectOpen = _React$useState[1];
@@ -3903,7 +3924,7 @@ function withEggs(eggs) {
   };
 }
 
-var _excluded$2 = ["title", "title2", "defaultExpanded", "disableGutters", "expandedElevation", "collapsedElevation", "transitionDuration", "detailsSx", "CustomExpandIcon", "children", "amountOfItems"];
+var _excluded$3 = ["title", "title2", "defaultExpanded", "disableGutters", "expandedElevation", "collapsedElevation", "transitionDuration", "detailsSx", "CustomExpandIcon", "children", "amountOfItems"];
 var CustomAccordion = function CustomAccordion(_ref) {
   var title = _ref.title,
     title2 = _ref.title2,
@@ -3921,7 +3942,7 @@ var CustomAccordion = function CustomAccordion(_ref) {
     CustomExpandIcon = _ref.CustomExpandIcon,
     children = _ref.children,
     amountOfItems = _ref.amountOfItems,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var _React$useState = React.useState(defaultExpanded),
     expanded = _React$useState[0],
     setExpanded = _React$useState[1];
@@ -4027,7 +4048,7 @@ var SearchHighlight = function SearchHighlight(_ref) {
   });
 };
 
-var _excluded$1 = ["activeLabel", "inActiveLabel", "tooltip"];
+var _excluded$2 = ["activeLabel", "inActiveLabel", "tooltip"];
 var styles = {
   label: {
     color: 'geowebColors.buttons.tertiary.default.color',
@@ -4043,7 +4064,7 @@ var SwitchButton = function SwitchButton(_ref) {
     inActiveLabel = _ref$inActiveLabel === void 0 ? 'Viewer' : _ref$inActiveLabel,
     _ref$tooltip = _ref.tooltip,
     tooltip = _ref$tooltip === void 0 ? 'Switch mode' : _ref$tooltip,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   return jsx(CustomTooltip, {
     title: tooltip,
     children: jsxs("span", {
@@ -4722,7 +4743,7 @@ var SearchField = function SearchField(_ref3) {
   });
 };
 
-var _excluded = ["filters", "onClickFilterChip", "onSearch", "isAllSelected", "searchQuery"];
+var _excluded$1 = ["filters", "onClickFilterChip", "onSearch", "isAllSelected", "searchQuery"];
 var DEFAULT_FILTER_HEIGHT = 85;
 var Filter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var filters = _ref.filters,
@@ -4732,7 +4753,7 @@ var Filter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onSearch = _ref$onSearch === void 0 ? function () {} : _ref$onSearch,
     isAllSelected = _ref.isAllSelected,
     searchQuery = _ref.searchQuery,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   return jsx(Box, {
     sx: Object.assign({
       marginBottom: '8px'
@@ -4976,6 +4997,20 @@ var FilterOption = function FilterOption(_ref) {
   });
 };
 
+var _excluded = ["isDark", "children"];
+var StorybookDocsWrapper = function StorybookDocsWrapper(_ref) {
+  var _ref$isDark = _ref.isDark,
+    isDark = _ref$isDark === void 0 ? false : _ref$isDark,
+    children = _ref.children,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return jsx(Box, {
+    sx: Object.assign({}, isDark && {
+      backgroundColor: 'geowebColors.background.surfaceBrowser'
+    }, props.sx),
+    children: children
+  });
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -5696,6 +5731,29 @@ var convertNOWandTODAYFormatsToUTC = function convertNOWandTODAYFormatsToUTC(tim
   }
   throw new Error('Invalid endTime format');
 };
+/**
+ * @name setSeconds
+ * @category Second Helpers
+ * @summary Set the seconds to the given date.
+ *
+ * @description
+ * Set the seconds to the given date.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ *
+ * @param date - The date to be changed
+ * @param seconds - The seconds of the new date
+ *
+ * @returns The new date with the seconds set
+ *
+ * @example
+ * // Set 45 seconds to 1 September 2014 11:30:40:
+ * const result = setSeconds(new Date(2014, 8, 1, 11, 30, 40), 45)
+ * //=> Mon Sep 01 2014 11:30:45
+ */
+var setSeconds = function setSeconds(date, seconds) {
+  return setSeconds$1(date, seconds);
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -5758,6 +5816,7 @@ var index = /*#__PURE__*/Object.freeze({
   parseISO: parseISO,
   roundToNearestMinutes: roundToNearestMinutes,
   set: set,
+  setSeconds: setSeconds,
   setUTCDate: setUTCDate,
   startOfDay: startOfDay,
   startOfDayUTC: startOfDayUTC,
@@ -5798,6 +5857,15 @@ var createToolkitMockStoreWithEggs = function createToolkitMockStoreWithEggs(sto
   store.addEggs = typeof jest !== 'undefined' ? jest.fn() : function () {}; // mocking the dynamic module loader
   return store;
 };
+var createToolkitMockStore = function createToolkitMockStore(storeConfig) {
+  var reducer = storeConfig.reducer,
+    preloadedState = storeConfig.preloadedState;
+  var store = configureStore(Object.assign({}, storeConfig, {
+    reducer: reducer,
+    preloadedState: preloadedState
+  }));
+  return store;
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -5943,4 +6011,4 @@ var RenderCounter = /*#__PURE__*/function () {
 }();
 var renderCounter = new RenderCounter();
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEBOUNCE_TIMEOUT, DEFAULT_ERROR_MESSAGE, DEFAULT_FILTER_HEIGHT, DraggableComponent$1 as Draggable, ErrorBoundary, Filter, FilterChip, FilterLabel, FilterListItem, FilterOption, LastUpdateTime, PROJECTION, ResizeComponent as Resizable, SHARED_NAMESPACE, SearchField$1 as SearchField, SearchFieldButton, SearchHighlight, StatusTag, SwitchButton, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, UserMenuItemSentryRecording, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createToolkitMockStoreWithEggs, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAxiosAuthError, isAxiosError, pollingIntervalTimeout, renderCounter, sharedTranslations, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDebounce, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, useWheelStopPropagation, withEggs };
+export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEBOUNCE_TIMEOUT, DEFAULT_ERROR_MESSAGE, DEFAULT_FILTER_HEIGHT, DraggableComponent$1 as Draggable, ErrorBoundary, Filter, FilterChip, FilterLabel, FilterListItem, FilterOption, LastUpdateTime, PROJECTION, ResizeComponent as Resizable, SHARED_NAMESPACE, SearchField$1 as SearchField, SearchFieldButton, SearchHighlight, StatusTag, StorybookDocsWrapper, SwitchButton, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, UserMenuItemSentryRecording, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createToolkitMockStore, createToolkitMockStoreWithEggs, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAxiosAuthError, isAxiosError, pollingIntervalTimeout, renderCounter, sharedTranslations, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDebounce, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, useWheelStopPropagation, withEggs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "9.35.1-spike-oltanstack.0",
+  "version": "9.37.0",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {

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

@@ -1,25 +1,8 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const AppHeaderLight: {
-    (): React.ReactElement;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const AppHeaderDark: {
-    (): React.ReactElement;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
+import { Meta, StoryObj } from '@storybook/react/*';
+import { AppHeader } from '.';
+declare const meta: Meta<typeof AppHeader>;
+export default meta;
+type Story = StoryObj<typeof AppHeader>;
+export declare const Component: Story;
+export declare const AppHeaderLight: Story;
+export declare const AppHeaderDark: Story;

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

@@ -1,10 +1,8 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const ThemeLight: () => React.ReactElement;
-export declare const ThemeDark: {
-    (): React.ReactElement;
-    tags: string[];
-};
+import { Meta, StoryObj } from '@storybook/react/*';
+import AppLayout from './AppLayout';
+declare const meta: Meta<typeof AppLayout>;
+export default meta;
+type Story = StoryObj<typeof AppLayout>;
+export declare const Component: Story;
+export declare const ThemeLight: Story;
+export declare const ThemeDark: Story;

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

@@ -1,7 +1,8 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const DynamicCanvas: React.FC;
-export declare const StaticCanvas: React.FC;
+import { Meta, StoryObj } from '@storybook/react/*';
+import { CanvasComponent } from './CanvasComponent';
+declare const meta: Meta<typeof CanvasComponent>;
+export default meta;
+type Story = StoryObj<typeof CanvasComponent>;
+export declare const Component: Story;
+export declare const DynamicCanvas: Story;
+export declare const StaticCanvas: Story;

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

@@ -1,13 +1,8 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const CustomAccordionLight: {
-    (): React.ReactElement;
-    tags: string[];
-};
-export declare const CustomAccordionDark: {
-    (): React.ReactElement;
-    tags: string[];
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { CustomAccordion } from './CustomAccordion';
+declare const meta: Meta<typeof CustomAccordion>;
+export default meta;
+type Story = StoryObj<typeof CustomAccordion>;
+export declare const Component: Story;
+export declare const CustomAccordionLight: Story;
+export declare const CustomAccordionDark: Story;

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

@@ -1,25 +1,8 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const CustomIconButtonLight: {
-    (): React.ReactElement;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const CustomIconButtonDark: {
-    (): React.ReactElement;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { CustomIconButton } from './CustomIconButton';
+declare const meta: Meta<typeof CustomIconButton>;
+export default meta;
+type Story = StoryObj<typeof CustomIconButton>;
+export declare const Component: Story;
+export declare const CustomIconButtonLight: Story;
+export declare const CustomIconButtonDark: Story;

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

@@ -1,13 +1,8 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const CustomSliderLightTheme: {
-    (): React.ReactElement;
-    tags: string[];
-};
-export declare const CustomSliderDarkTheme: {
-    (): React.ReactElement;
-    tags: string[];
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { CustomSlider } from './CustomSlider';
+declare const meta: Meta<typeof CustomSlider>;
+export default meta;
+type Story = StoryObj<typeof CustomSlider>;
+export declare const Component: Story;
+export declare const CustomSliderLightTheme: Story;
+export declare const CustomSliderDarkTheme: Story;

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

@@ -1,13 +1,8 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const CustomToggleButtonLight: {
-    (): React.ReactElement;
-    tags: string[];
-};
-export declare const CustomToggleButtonDark: {
-    (): React.ReactElement;
-    tags: string[];
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { CustomToggleButton } from './CustomToggleButton';
+declare const meta: Meta<typeof CustomToggleButton>;
+export default meta;
+type Story = StoryObj<typeof CustomToggleButton>;
+export declare const Component: Story;
+export declare const CustomToggleButtonLight: Story;
+export declare const CustomToggleButtonDark: Story;

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

@@ -1,10 +1,8 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const ErrorBoundaryDemo: {
-    (): React.ReactElement;
-    storyName: string;
-};
-export declare const ErrorBoundaryInsideBox: () => React.ReactElement;
+import type { Meta, StoryObj } from '@storybook/react';
+import { ErrorBoundary } from './ErrorBoundary';
+declare const meta: Meta<typeof ErrorBoundary>;
+export default meta;
+type Story = StoryObj<typeof ErrorBoundary>;
+export declare const Component: Story;
+export declare const ErrorBoundaryDemo: Story;
+export declare const ErrorBoundaryInsideBox: Story;

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

@@ -1,25 +1,8 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const FilterLight: {
-    (): React.ReactElement;
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-    tags: string[];
-};
-export declare const FilterDark: {
-    (): React.ReactElement;
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-    tags: string[];
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import Filter from './Filter';
+declare const meta: Meta<typeof Filter>;
+export default meta;
+type Story = StoryObj<typeof Filter>;
+export declare const Component: Story;
+export declare const FilterLight: Story;
+export declare const FilterDark: Story;

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

@@ -1,13 +1,8 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const LastUpdateTimeLightTheme: {
-    (): React.ReactElement;
-    tags: string[];
-};
-export declare const LastUpdateTimeDarkTheme: {
-    (): React.ReactElement;
-    tags: string[];
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import LastUpdateTime from './LastUpdateTime';
+declare const meta: Meta<typeof LastUpdateTime>;
+export default meta;
+type Story = StoryObj<typeof LastUpdateTime>;
+export declare const Component: Story;
+export declare const LastUpdateTimeLightTheme: Story;
+export declare const LastUpdateTimeDarkTheme: Story;

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

@@ -1,13 +1,8 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const ToggleMenuLight: {
-    (): React.ReactElement;
-    tags: string[];
-};
-export declare const ToggleMenuDark: {
-    (): React.ReactElement;
-    tags: string[];
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToggleMenu } from './ToggleMenu';
+declare const meta: Meta<typeof ToggleMenu>;
+export default meta;
+type Story = StoryObj<typeof ToggleMenu>;
+export declare const Component: Story;
+export declare const ToggleMenuLight: Story;
+export declare const ToggleMenuDark: Story;

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

@@ -1,29 +1,16 @@
 import React from 'react';
-declare const _default: {
-    title: string;
-    includeStories: string[];
-};
-export default _default;
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToolContainer } from '.';
+declare const meta: Meta<typeof ToolContainer>;
+export default meta;
+type Story = StoryObj<typeof ToolContainer>;
+export declare const Component: Story;
 interface ToolContainerDemoProps {
     isSnapShot?: boolean;
 }
-export declare const ToolContainerDemo: React.FC<ToolContainerDemoProps>;
-export declare const ThemeLight: {
-    (): React.ReactElement;
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const ThemeDark: {
-    (): React.ReactElement;
+export declare const ToolContainerDemo: {
+    ({ isSnapShot, }: ToolContainerDemoProps): React.ReactElement;
     tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
 };
+export declare const ThemeLight: Story;
+export declare const ThemeDark: Story;

package/src/lib/components/ToolContainer/ToolHeader.stories.d.ts

@@ -1,24 +1,8 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const ThemeLight: {
-    (): React.ReactElement;
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const ThemeDark: {
-    (): React.ReactElement;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToolHeader } from '.';
+declare const meta: Meta<typeof ToolHeader>;
+export default meta;
+type Story = StoryObj<typeof ToolHeader>;
+export declare const Component: Story;
+export declare const ThemeLight: Story;
+export declare const ThemeDark: Story;

package/src/lib/components/UserMenu/CheatSheet/CheatSheet.stories.d.ts

@@ -1,32 +1,10 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const ThemeLight: {
-    (): React.ReactElement;
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const ThemeDark: {
-    (): React.ReactElement;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const CheatSheetLight: {
-    (): React.ReactElement;
-    tags: string[];
-};
-export declare const CheatSheetDark: {
-    (): React.ReactElement;
-    tags: string[];
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import CheatSheet from './CheatSheet';
+declare const meta: Meta<typeof CheatSheet>;
+export default meta;
+type Story = StoryObj<typeof CheatSheet>;
+export declare const Component: Story;
+export declare const ThemeLight: Story;
+export declare const ThemeDark: Story;
+export declare const CheatSheetLight: Story;
+export declare const CheatSheetDark: Story;

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

@@ -1,18 +1,10 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const ThemeLight: () => React.ReactElement;
-export declare const ThemeDark: {
-    (): React.ReactElement;
-    tags: string[];
-};
-export declare const UserMenuLight: {
-    (): React.ReactElement;
-    tags: string[];
-};
-export declare const UserMenuDark: {
-    (): React.ReactElement;
-    tags: string[];
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { UserMenu } from '.';
+declare const meta: Meta<typeof UserMenu>;
+export default meta;
+type Story = StoryObj<typeof UserMenu>;
+export declare const Component: Story;
+export declare const ThemeLight: Story;
+export declare const ThemeDark: Story;
+export declare const UserMenuLight: Story;
+export declare const UserMenuDark: Story;

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

@@ -24,3 +24,4 @@ export * from './SearchField';
 export * from './LastUpdateTime';
 export * from './CanvasComponent';
 export * from './Filter';
+export * from './Storybook';

package/src/lib/hooks/usePoller/usePoller.stories.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const usePollerDemo: () => React.ReactElement;
+import type { Meta, StoryObj } from '@storybook/react';
+import { usePoller } from './usePoller';
+declare const meta: Meta<typeof usePoller>;
+export default meta;
+type Story = StoryObj<typeof usePoller>;
+export declare const Component: Story;

package/src/lib/utils/dateUtils/dateUtils.d.ts

@@ -334,6 +334,27 @@ export declare const convertNOWFormatToUTC: (timeValue: string) => string;
  * @returns Time in UTC format
  */
 export declare const convertNOWandTODAYFormatsToUTC: (timeValue: string) => string;
+/**
+ * @name setSeconds
+ * @category Second Helpers
+ * @summary Set the seconds to the given date.
+ *
+ * @description
+ * Set the seconds to the given date.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ *
+ * @param date - The date to be changed
+ * @param seconds - The seconds of the new date
+ *
+ * @returns The new date with the seconds set
+ *
+ * @example
+ * // Set 45 seconds to 1 September 2014 11:30:40:
+ * const result = setSeconds(new Date(2014, 8, 1, 11, 30, 40), 45)
+ * //=> Mon Sep 01 2014 11:30:45
+ */
+export declare const setSeconds: (date: Date, seconds: number) => Date;
 /**
  * Compares two dates if values are the same
  * @param {Date} date - first date

package/src/lib/utils/reduxTestUtils/createMockStoreWithEggs.d.ts

@@ -3,4 +3,5 @@ interface ToolkitStoreWithEggs extends ToolkitStore {
     addEggs?: () => void;
 }
 export declare const createToolkitMockStoreWithEggs: (storeConfig: ConfigureStoreOptions) => ToolkitStoreWithEggs;
+export declare const createToolkitMockStore: (storeConfig: ConfigureStoreOptions) => ToolkitStore;
 export {};