@opengeoweb/shared 12.3.0 → 12.4.1

package/index.esm.js

@@ -7,9 +7,10 @@ import { Resizable } from 're-resizable';
 import { Resize, Options, Close, ChevronLeft, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Admin, useThemeContext, ThemeTypes, KeyOption, ArrowLeft, ArrowRight, KeyCommand, ArrowUp, ArrowDown, ChevronDown, Search, Clear, Cached } from '@opengeoweb/theme';
 import 'i18next';
 import { initReactI18next, useTranslation } from 'react-i18next';
-import { throttle, escapeRegExp, debounce } from 'lodash';
+import { throttle, merge, escapeRegExp, debounce } from 'lodash';
 import * as Sentry from '@sentry/react';
 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 { fi as fi$1, nl as nl$1, nb, enGB } from 'date-fns/locale';
 
 var en = {
 	"shared-choose-app-mode": "Choose your default app mode",
@@ -18,7 +19,7 @@ var en = {
 	"shared-viewer": "Viewer",
 	"shared-editor": "Editor",
 	"shared-reload-page": "Reload page",
-	"shared-search-label": "Search through services or enter a service URL",
+	"shared-search-services": "Search through services or enter a service URL",
 	"shared-last-updated": "Last updated {{time}}",
 	"shared-click-to-refresh": "Click to refresh",
 	"shared-error-occurred": "Woops, an error has occurred. Please report the error shown below and reload the page if needed.",
@@ -81,7 +82,7 @@ var fi = {
 	"shared-viewer": "Katselu",
 	"shared-editor": "Muokkain",
 	"shared-reload-page": "Lataa sivu uudelleen",
-	"shared-search-label": "Etsi palveluista tai lisää palvelun URL-osoite",
+	"shared-search-services": "Etsi palveluista tai lisää palvelun URL-osoite",
 	"shared-last-updated": "Päivitetty viimeksi {{time}}",
 	"shared-click-to-refresh": "Napsauta päivittääksesi",
 	"shared-error-occurred": "Hups, virhe havaittu. Ilmoita ongelmasta eteenpäin ja lataa sivu uudelleen tarvittaessa",
@@ -144,7 +145,7 @@ var no = {
 	"shared-viewer": "Viewer",
 	"shared-editor": "Editor",
 	"shared-reload-page": "Last inn på nytt",
-	"shared-search-label": "Søk gjennom tjenester eller legg inn URL",
+	"shared-search-services": "Søk gjennom tjenester eller legg inn URL",
 	"shared-last-updated": "Sist oppdatert",
 	"shared-click-to-refresh": "Trykk for å laste inn på nytt",
 	"shared-error-occurred": "Woops, an error has occurred. Please report the error shown below and reload the page if needed.",
@@ -207,7 +208,7 @@ var nl = {
 	"shared-viewer": "Kijker",
 	"shared-editor": "Bewerker",
 	"shared-reload-page": "Pagina vernieuwen",
-	"shared-search-label": "Zoek door services of voer een service-URL in",
+	"shared-search-services": "Zoek door services of voer een service-URL in",
 	"shared-last-updated": "Laatst bijgewerkt {{time}}",
 	"shared-click-to-refresh": "Klik om te vernieuwen",
 	"shared-error-occurred": "Oeps, er is een fout opgetreden. Rapporteer de onderstaande fout en herlaad de pagina indien nodig.",
@@ -3867,7 +3868,7 @@ var getInitials = function getInitials(name) {
   }
 };
 
-var _excluded$6 = ["value", "orientation", "shouldAutoFocus"];
+var _excluded$6 = ["value", "orientation", "shouldAutoFocus", "extraStyles"];
 var sliderHeaderStyle = {
   fontFamily: 'Roboto-Black, Roboto',
   fontSize: 12,
@@ -3924,6 +3925,8 @@ 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,
+    _ref$extraStyles = _ref.extraStyles,
+    extraStyles = _ref$extraStyles === void 0 ? {} : _ref$extraStyles,
     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
@@ -3953,8 +3956,9 @@ var CustomSlider = function CustomSlider(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  var mergedStyles = merge(extraStyles, sliderStyle);
   return jsx(Slider, Object.assign({
-    sx: sliderStyle,
+    sx: mergedStyles,
     ref: element,
     value: value,
     orientation: orientation,
@@ -4395,7 +4399,7 @@ var SearchFieldButton = function SearchFieldButton(_ref2) {
     setPopupIsOpen = _ref2.setPopupIsOpen;
   var _useSharedTranslation2 = useSharedTranslation(),
     t = _useSharedTranslation2.t;
-  if (isURL(localSearchString)) {
+  if (isURL(localSearchString) && setPopupIsOpen) {
     return jsxs(Fragment, {
       children: [jsx("div", {
         style: {
@@ -4429,11 +4433,33 @@ var SearchFieldButton = function SearchFieldButton(_ref2) {
   });
 };
 
+var stylesSmall = {
+  '.MuiInputLabel-root': {
+    lineHeight: '16px',
+    fontSize: '12px',
+    top: '-6px',
+    transform: 'translate(12px, 7px) scale(1)',
+    ':not(.MuiInputLabel-shrink)': {
+      transform: 'translate(12px, 10px) scale(1.6)'
+    }
+  },
+  '.MuiFilledInput-input': {
+    lineHeight: '20px',
+    padding: '10px 0 1px 12px'
+  },
+  '.MuiButtonBase-root.MuiIconButton-root': {
+    height: '32px!important',
+    width: '32px!important',
+    marginRight: '-4px!important'
+  }
+};
 var SearchField$1 = function SearchField(_ref) {
   var searchFilter = _ref.searchFilter,
     label = _ref.label,
     setSearchFilter = _ref.setSearchFilter,
-    onOpenServicePopup = _ref.onOpenServicePopup;
+    onOpenServicePopup = _ref.onOpenServicePopup,
+    _ref$small = _ref.small,
+    small = _ref$small === void 0 ? false : _ref$small;
   var _React$useState = React.useState(''),
     localSearchString = _React$useState[0],
     setLocalSearchString = _React$useState[1];
@@ -4442,7 +4468,7 @@ var SearchField$1 = function SearchField(_ref) {
     setUrlIsValid = _React$useState2[1];
   var _useTranslation = useTranslation(SHARED_NAMESPACE),
     t = _useTranslation.t;
-  var translatedLabel = label || t('shared-search-label');
+  var translatedLabel = label || (onOpenServicePopup ? t('shared-search-services') : t('shared-search'));
   // eslint-disable-next-line react-hooks/exhaustive-deps
   var setSearchFilterDebounced = React.useCallback(debounce(setSearchFilter, 300), []);
   var handleChange = function handleChange(text) {
@@ -4462,7 +4488,7 @@ var SearchField$1 = function SearchField(_ref) {
     var keyDownHandler = function keyDownHandler(event) {
       if (event.key === 'Enter') {
         event.preventDefault();
-        if (urlIsValid) {
+        if (urlIsValid && onOpenServicePopup) {
           onOpenServicePopup(localSearchString);
           setLocalSearchString('');
         }
@@ -4495,10 +4521,10 @@ var SearchField$1 = function SearchField(_ref) {
         endAdornment: jsx(InputAdornment, {
           position: "end",
           children: jsx(SearchFieldButton, {
-            setPopupIsOpen: function setPopupIsOpen() {
+            setPopupIsOpen: onOpenServicePopup ? function () {
               onOpenServicePopup(localSearchString);
               setLocalSearchString('');
-            },
+            } : undefined,
             localSearchString: localSearchString,
             onClickClear: function onClickClear() {
               setLocalSearchString('');
@@ -4508,7 +4534,8 @@ var SearchField$1 = function SearchField(_ref) {
           })
         })
       }
-    }
+    },
+    sx: small ? stylesSmall : {}
   });
 };
 
@@ -5280,6 +5307,18 @@ var DATE_FORMAT_NAME_OF_DAY = 'eee dd/MM/yyyy HH:mm';
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 // eslint-disable-next-line no-restricted-imports
+var getDateFnsLocale = function getDateFnsLocale(locale) {
+  if (locale === 'fi') {
+    return fi$1;
+  }
+  if (locale === 'nl') {
+    return nl$1;
+  }
+  if (locale === 'no') {
+    return nb;
+  }
+  return enGB;
+};
 /**
  * Parsing date strings with geoweb dateUtils:
  *
@@ -5430,7 +5469,7 @@ var setUTCDate = function setUTCDate(inDate) {
  * @example
  * ``` dateToString(new Date(2022, 10, 12, 15, 30), 'dd MMM yyyy') ```
  */
-var dateToString = function dateToString(inDate, strFormat, utc) {
+var dateToString = function dateToString(inDate, strFormat, utc, locale) {
   if (strFormat === void 0) {
     strFormat = DATE_FORMAT_UTC;
   }
@@ -5440,7 +5479,11 @@ var dateToString = function dateToString(inDate, strFormat, utc) {
   if (!inDate || !isValid(inDate)) {
     return undefined;
   }
-  var formattedDate = utc ? format(new Date(inDate.getUTCFullYear(), inDate.getUTCMonth(), inDate.getUTCDate(), inDate.getUTCHours(), inDate.getUTCMinutes(), inDate.getUTCSeconds()), strFormat) : format(inDate, strFormat);
+  var formattedDate = utc ? format(new Date(inDate.getUTCFullYear(), inDate.getUTCMonth(), inDate.getUTCDate(), inDate.getUTCHours(), inDate.getUTCMinutes(), inDate.getUTCSeconds()), strFormat, {
+    locale: getDateFnsLocale(locale)
+  }) : format(inDate, strFormat, {
+    locale: getDateFnsLocale(locale)
+  });
   return formattedDate;
 };
 /**
@@ -5960,6 +6003,7 @@ var index = /*#__PURE__*/Object.freeze({
   differenceInYears: differenceInYears,
   fromUnix: fromUnix,
   getCurrentTimeAsString: getCurrentTimeAsString,
+  getDateFnsLocale: getDateFnsLocale,
   getDay: getDay,
   getDayOfYear: getDayOfYear,
   getHours: getHours,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "12.3.0",
+  "version": "12.4.1",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,14 +8,14 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/theme": "12.3.0",
+    "@opengeoweb/theme": "12.4.1",
     "react-draggable": "^4.4.6",
     "re-resizable": "^6.9.11",
     "lodash": "^4.17.21",
     "axios": "^1.7.7",
     "date-fns": "^4.1.0",
     "react-i18next": "^15.1.1",
-    "i18next": "^23.11.5",
+    "i18next": "^25.0.1",
     "@sentry/react": "^8.34.0",
     "@mui/material": "^7.0.1"
   },

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SliderProps } from '@mui/material';
+import { SliderProps, SxProps } from '@mui/material';
 export declare const sliderHeaderStyle: {
     fontFamily: string;
     fontSize: number;
@@ -8,6 +8,7 @@ export declare const sliderHeaderStyle: {
 };
 interface CustomSliderProps extends SliderProps {
     shouldAutoFocus?: boolean;
+    extraStyles?: SxProps;
 }
 export declare const CustomSlider: React.FC<CustomSliderProps>;
 export default CustomSlider;

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

@@ -3,7 +3,8 @@ interface SearchFieldProps {
     searchFilter: string;
     label?: string;
     setSearchFilter: (filterText: string) => void;
-    onOpenServicePopup: (url: string) => void;
+    onOpenServicePopup?: (url: string) => void;
+    small?: boolean;
 }
 export declare const SearchField: React.FC<SearchFieldProps>;
 export {};

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

@@ -3,7 +3,7 @@ export declare const isURL: (string: string) => boolean;
 interface FieldButtonProps {
     localSearchString: string;
     onClickClear: () => void;
-    setPopupIsOpen: (value: boolean) => void;
+    setPopupIsOpen?: (value: boolean) => void;
 }
 export declare const SearchFieldButton: React.FC<FieldButtonProps>;
 export {};

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

@@ -1,4 +1,4 @@
-import { parseISO, isEqual, Duration, startOfDay, isWithinInterval, getDayOfYear, getDay, getMonth, getYear, getWeek, NearestMinutes } from 'date-fns';
+import { parseISO, isEqual, Duration, startOfDay, isWithinInterval, getDayOfYear, getDay, getMonth, getYear, getWeek, NearestMinutes, Locale } from 'date-fns';
 export interface DateValues {
     year?: number;
     month?: number;
@@ -8,6 +8,7 @@ export interface DateValues {
     seconds?: number;
     milliseconds?: number;
 }
+export declare const getDateFnsLocale: (locale?: string) => Locale;
 /**
  * Parsing date strings with geoweb dateUtils:
  *
@@ -107,7 +108,7 @@ export declare const setUTCDate: (inDate: Date | undefined) => Date | undefined;
  * @example
  * ``` dateToString(new Date(2022, 10, 12, 15, 30), 'dd MMM yyyy') ```
  */
-export declare const dateToString: (inDate: Date | undefined, strFormat?: string, utc?: boolean) => string | undefined;
+export declare const dateToString: (inDate: Date | undefined, strFormat?: string, utc?: boolean, locale?: string) => string | undefined;
 /**
  * Find out if a date is between two other dates.
  *