@opengeoweb/shared 4.20.0 → 4.21.0

package/index.esm.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import React__default, { useRef } 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 { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Resize, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, ChevronDown } from '@opengeoweb/theme';
-import { throttle } from 'lodash';
+import { throttle, escapeRegExp } from 'lodash';
 import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
 import { useStore } from 'react-redux';
@@ -3148,6 +3148,44 @@ var CustomAccordion = function CustomAccordion(_a) {
   }, children));
 };
 
+var highlightStyle = {
+  background: '#ffeecc'
+};
+
+var SearchHighlight = function SearchHighlight(_ref) {
+  var _ref$text = _ref.text,
+      text = _ref$text === void 0 ? '' : _ref$text,
+      search = _ref.search;
+
+  if (search === '') {
+    return /*#__PURE__*/React__default.createElement("span", null, text);
+  }
+
+  var searchWords = search.split(' ').reduce(function (words, word) {
+    return word ? [].concat(_toConsumableArray(words), [word.toLocaleLowerCase()]) : words;
+  }, []);
+  var searchRegex = searchWords.map(function (word) {
+    return escapeRegExp(word);
+  }).join('|');
+  var textParts = text.split(new RegExp("(".concat(searchRegex, ")"), 'gi'));
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, textParts.map(function (part, index) {
+    var key = "".concat(part, "-").concat(index);
+
+    if (searchWords.some(function (search) {
+      return part.toLocaleLowerCase().includes(search);
+    })) {
+      return /*#__PURE__*/React__default.createElement("mark", {
+        key: key,
+        style: highlightStyle
+      }, part);
+    }
+
+    return /*#__PURE__*/React__default.createElement("span", {
+      key: key
+    }, part);
+  }));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3497,4 +3535,4 @@ var index = /*#__PURE__*/Object.freeze({
     differenceInHours: differenceInHours
 });
 
-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, StatusTag, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, 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, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, 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/index.umd.js

@@ -3052,6 +3052,60 @@
       }, 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
+     * */
+    var highlightStyle = {
+      background: '#ffeecc'
+    };
+
+    var SearchHighlight = function SearchHighlight(_a) {
+      var _b = _a.text,
+          text = _b === void 0 ? '' : _b,
+          search = _a.search;
+
+      if (search === '') {
+        return /*#__PURE__*/React__default["default"].createElement("span", null, text);
+      }
+
+      var searchWords = search.split(' ').reduce(function (words, word) {
+        return word ? __spreadArray(__spreadArray([], __read(words)), [word.toLocaleLowerCase()]) : words;
+      }, []);
+      var searchRegex = searchWords.map(function (word) {
+        return lodash.escapeRegExp(word);
+      }).join('|');
+      var textParts = text.split(new RegExp("(" + searchRegex + ")", 'gi'));
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, textParts.map(function (part, index) {
+        var key = part + "-" + index;
+
+        if (searchWords.some(function (search) {
+          return part.toLocaleLowerCase().includes(search);
+        })) {
+          return /*#__PURE__*/React__default["default"].createElement("mark", {
+            key: key,
+            style: highlightStyle
+          }, part);
+        }
+
+        return /*#__PURE__*/React__default["default"].createElement("span", {
+          key: key
+        }, part);
+      }));
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -3442,6 +3496,7 @@
     exports.Draggable = DraggableComponent$1;
     exports.ErrorBoundary = ErrorBoundary;
     exports.Resizable = ResizeComponent;
+    exports.SearchHighlight = SearchHighlight;
     exports.StatusTag = StatusTag;
     exports.ToggleMenu = ToggleMenu;
     exports.ToolContainer = ToolContainer;

package/lib/components/SearchHighlight/SearchHighlight.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface HighlightProps {
+    text: string;
+    search: string;
+}
+declare const SearchHighlight: React.FC<HighlightProps>;
+export default SearchHighlight;

package/lib/components/SearchHighlight/SearchHighlight.spec.d.ts

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

package/lib/components/SearchHighlight/SearchHighlight.stories.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const SearchHighlightLightTheme: {
+    (): React.ReactElement;
+    storyName: string;
+};
+export declare const SearchHighlightDarkTheme: {
+    (): React.ReactElement;
+    storyName: string;
+};

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

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

package/lib/components/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "4.20.0",
+  "version": "4.21.0",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,14 +14,14 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "@mui/material": "^5.12.0",
-    "@opengeoweb/theme": "4.20.0",
+    "@opengeoweb/theme": "4.21.0",
     "@mui/system": "^5.12.0",
     "@mui/x-date-pickers": "^6.2.1",
     "react-draggable": "^4.4.5",
     "re-resizable": "^6.9.0",
+    "lodash": "^4.17.20",
     "@redux-eggs/core": "^2.2.0",
     "react-redux": "^8.0.4",
-    "lodash": "^4.17.20",
     "axios": "^0.25.0",
     "date-fns": "^2.29.3"
   }