@rio-cloud/rio-uikit 0.16.3-beta.2 → 0.16.3-beta.3

package/Colors.d.ts

@@ -18,4 +18,4 @@ declare module '@rio-cloud/rio-uikit/Colors' {
 
     const colors: Colors;
     export default colors;
-}
+}

package/IncidentsLayer.d.ts

@@ -1,4 +1,4 @@
 declare module '@rio-cloud/rio-uikit/IncidentsLayer' {
     import React from 'react';
     export default class IncidentsLayer extends React.Component<any> {}
-}
+}

package/RuleContainer.d.ts

@@ -3,4 +3,4 @@ declare module '@rio-cloud/rio-uikit/RuleContainer' {
     import { RuleContainerProps } from './types';
 
     export default class RuleContainer extends React.Component<React.PropsWithChildren<RuleContainerProps>> {}
-}
+}

package/RulesWrapper.d.ts

@@ -3,4 +3,4 @@ declare module '@rio-cloud/rio-uikit/RulesWrapper' {
     import { RulesWrapperProps } from './types';
 
     export default class RulesWrapper extends React.Component<RulesWrapperProps> {}
-}
+}

package/SortDirection.d.ts

@@ -3,7 +3,7 @@ declare module '@rio-cloud/rio-uikit/SortDirection' {
         ASCENDING = 'asc',
         DESCENDING = 'desc',
     }
-    
+
     export default {
         ASCENDING: 'asc',
         DESCENDING: 'desc',

package/TrafficLayer.d.ts

@@ -1,4 +1,4 @@
 declare module '@rio-cloud/rio-uikit/TrafficLayer' {
     import React from 'react';
     export default class TrafficLayer extends React.Component<any> {}
-}
+}

package/TruckLayer.d.ts

@@ -1,4 +1,4 @@
 declare module '@rio-cloud/rio-uikit/TruckLayer' {
     import React from 'react';
     export default class TruckLayer extends React.Component<any> {}
-}
+}

package/components/actionBarItem/ActionBarItem.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["className", "children", "popoverWidth", "id", "hidePopoverOnClick"];
+var _excluded = ["className", "mobileDialogBodyClassName", "children", "popoverWidth", "id", "hidePopoverOnClick"];
 import React, { useCallback, useEffect, useLayoutEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -56,6 +56,7 @@ var isActionBarItemIcon = function isActionBarItemIcon(child) {
 };
 export var ActionBarItem = /*#__PURE__*/React.memo(function (props) {
   var className = props.className,
+    mobileDialogBodyClassName = props.mobileDialogBodyClassName,
     children = props.children,
     popoverWidth = props.popoverWidth,
     id = props.id,
@@ -153,6 +154,7 @@ export var ActionBarItem = /*#__PURE__*/React.memo(function (props) {
         return setIsShown(false);
       },
       body: itemPopover,
+      bodyClassName: mobileDialogBodyClassName,
       title: title
     })), childrenWithoutPopoverAndIcon);
   }
@@ -192,12 +194,14 @@ ActionBarItem.ListSeparator = ActionBarItemListSeparator;
 ActionBarItem.defaultProps = {
   id: getRandomString(),
   hidePopoverOnClick: true,
-  popoverWidth: 250
+  popoverWidth: 250,
+  mobileDialogBodyClassName: ''
 };
 ActionBarItem.propTypes = {
   id: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
   className: PropTypes.string,
+  mobileDialogBodyClassName: PropTypes.string,
   hidePopoverOnClick: PropTypes.bool,
   popoverWidth: PropTypes.oneOf([100, 150, 200, 250, 300, 350, 400, 450, 500])
 };

package/components/assetTree/Tree.js

@@ -39,6 +39,7 @@ import TreeNothingFound from './TreeNothingFound';
 import TreeOptions from './TreeOptions';
 import TreeRoot from './TreeRoot';
 import TypeCounter from './TypeCounter';
+import { searchNormalized } from '../../utils/searchNormalized';
 var SEARCH_DEBOUNCE = 100;
 var otherwise = stubTrue;
 var notEqual = negate(isEqual);
@@ -121,7 +122,7 @@ var getMappedItemsToGroups = function getMappedItemsToGroups(groups, items) {
 var filterByName = function filterByName(searchValue) {
   return function (item) {
     if (searchValue) {
-      return getName(item).toLowerCase().includes(searchValue.toLowerCase());
+      return searchNormalized(getName(item), searchValue);
     }
     return true;
   };

package/components/bottomSheet/BottomSheet.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["show", "onClose", "width", "height", "title", "detatch", "useBackdrop", "showCloseButton", "showMaximizeButton", "onHeightChange", "bodyRef", "bodyClassName", "className", "children"];
+var _excluded = ["show", "onClose", "width", "height", "title", "detach", "useBackdrop", "showCloseButton", "showMaximizeButton", "onHeightChange", "bodyRef", "bodyClassName", "className", "children"];
 import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
@@ -16,7 +16,7 @@ var BottomSheet = function BottomSheet(props) {
     width = props.width,
     height = props.height,
     title = props.title,
-    detatch = props.detatch,
+    detach = props.detach,
     useBackdrop = props.useBackdrop,
     showCloseButton = props.showCloseButton,
     showMaximizeButton = props.showMaximizeButton,
@@ -46,14 +46,23 @@ var BottomSheet = function BottomSheet(props) {
       setIsShown(newValue);
     }
   };
+  useEffect(function () {
+    setIsShown(show);
+  }, [show]);
   var handleMaximize = function handleMaximize() {
     var newValue = !isMaxHeight;
     setIsMaxHeight(newValue);
     onHeightChange();
   };
-  var sheetClasses = classNames('bottom-sheet', 'position-fixed left-0', !width && 'width-100pct', !height && !isMaxHeight && 'height-auto', 'bg-white', 'shadow-hard', detatch ? 'margin-15 rounded' : 'rounded-top-left rounded-top-right', className && className);
-  var sheetBodyCasses = classNames('bottom-sheet-body', 'height-100pct', bodyClassName && bodyClassName);
+  var sheetClasses = classNames('bottom-sheet', 'position-fixed left-0', !width && 'width-100pct', !height && !isMaxHeight && 'height-auto', 'bg-white', 'shadow-hard', detach ? 'margin-15 rounded' : 'rounded-top-left rounded-top-right', className && className);
+  var sheetBodyClasses = classNames('bottom-sheet-body', 'height-100pct', bodyClassName && bodyClassName);
   var sheetHeight = isMaxHeight ? window.innerHeight : height;
+
+  // Note: we always have to kep the body element in the DOM as there might be a ref assigned to it.
+  // Unmounting it will lead to loosing the reference and breaking the functionality that is implemented on that ref.
+  // That is the reason why there is no "AnimatePresence" with an "exit" animation here.
+  // Instead we change the "animate" values.
+
   return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(motion.div, _extends({}, remainigProps, {
     className: sheetClasses,
     width: width,
@@ -61,20 +70,14 @@ var BottomSheet = function BottomSheet(props) {
       opacity: 0
     },
     animate: {
-      opacity: 1,
+      opacity: isShown ? 1 : 0,
       y: 0,
       bottom: isShown ? 0 : OFFSET_POSITION,
-      height: sheetHeight
-    },
-    exit: {
-      opacity: 0,
-      transition: {
-        duration: 0.3
-      },
-      bottom: OFFSET_POSITION,
-      height: sheetHeight
+      height: isShown ? sheetHeight : 0
     }
-  }), /*#__PURE__*/React.createElement("div", null, title && /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "bottom-sheet-header"
+  }, title && /*#__PURE__*/React.createElement("div", {
     className: 'bottom-sheet-title display-flex justify-content-between padding-15 ' + 'border border-top-none border-left-none border-right-none border-color-lighter'
   }, /*#__PURE__*/React.createElement("div", {
     className: "text-size-18"
@@ -91,16 +94,16 @@ var BottomSheet = function BottomSheet(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "height-5 width-40 rounded bg-lighter"
   }))), /*#__PURE__*/React.createElement("div", {
-    className: sheetBodyCasses,
+    className: sheetBodyClasses,
     ref: bodyRef
-  }, children)), useBackdrop && isShown && /*#__PURE__*/React.createElement("div", {
+  }, isShown && children)), useBackdrop && isShown && /*#__PURE__*/React.createElement("div", {
     className: "bottom-sheet-backdrop",
     onClick: handleToggle
   })), modalRoot);
 };
 BottomSheet.defaultProps = {
   show: false,
-  detatch: false,
+  detach: false,
   useBackdrop: false,
   showCloseButton: true,
   showMaximizeButton: false,
@@ -115,7 +118,7 @@ BottomSheet.propTypes = {
   showCloseButton: PropTypes.bool,
   showMaximizeButton: PropTypes.bool,
   onHeightChange: PropTypes.func,
-  detatch: PropTypes.bool,
+  detach: PropTypes.bool,
   useBackdrop: PropTypes.bool,
   onBackdropClick: PropTypes.func,
   bodyRef: PropTypes.object,

package/components/fade/Fade.js

@@ -1,10 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { AnimatePresence, motion } from 'framer-motion';
-import logDeprecatedWarnings from '../../utils/logDeprecatedWarnings';
 import isArray from 'lodash/fp/isArray';
 import head from 'lodash/fp/head';
+import isNil from 'lodash/fp/isNil';
+import logDeprecatedWarnings from '../../utils/logDeprecatedWarnings';
+import useAfterMount from '../../useAfterMount';
 var warningProps = [{
   prop: 'in',
   replacement: 'show'
@@ -172,7 +178,16 @@ var Fade = function Fade(props) {
     duration = duration / 100;
   }
   var show = props.show || oldIn;
-  var initial = props.initial || appear;
+  var initial = isNil(appear) ? props.initial : appear;
+  var _useState = useState(initial),
+    _useState2 = _slicedToArray(_useState, 2),
+    allowInitialAnimation = _useState2[0],
+    setAllowInitialAnimation = _useState2[1];
+  useAfterMount(function () {
+    if (!allowInitialAnimation) {
+      setAllowInitialAnimation(true);
+    }
+  });
   var motionDivKey = 'fade';
 
   // If there are multiple children that are conditionally rendered like
@@ -193,14 +208,15 @@ var Fade = function Fade(props) {
   var pageTransitionProps = isPageTransition ? {
     variants: pageTransitionVariants
   } : null;
-  var animationProps = animations[animationStyle];
+  var animationProps = _objectSpread({}, animations[animationStyle]);
 
-  // Disable initial animation
-  if (!initial) {
+  // Disable initial animation on mount. After mount the initial animation step is needed to enable
+  // the "fade-in" animation, otherwise it just appears
+  if (!allowInitialAnimation) {
     animationProps.initial = false;
   }
   return /*#__PURE__*/React.createElement(AnimatePresence, _extends({
-    initial: initial,
+    initial: allowInitialAnimation,
     exitBeforeEnter: exitBeforeEnter,
     onExitComplete: onExitComplete,
     custom: custom

package/components/map/components/features/basics/marker/DomMarker.js

@@ -13,7 +13,7 @@ import { addEventListenerMap, removeEventListenerMap, checkAndUpdateEventListene
 
 // Should be deprecated...
 // Here Documentation:
-//     It should be only used where small numbers of markers with dynamic style and/or scripted icons are to be displayed 
+//     It should be only used where small numbers of markers with dynamic style and/or scripted icons are to be displayed
 //     on the map (for example animated interactive SVG). Otherwise a H.map.Marker should be preferred for performance reasons.
 //
 var DomMarker = /*#__PURE__*/function (_React$Component) {

package/components/responsiveColumnStripe/ResponsiveColumnStripe.js

@@ -11,6 +11,7 @@ import chunk from 'lodash/fp/chunk';
 import { AnimatePresence, motion } from 'framer-motion';
 import useAfterMount from '../../hooks/useAfterMount';
 import useElementSize from '../../hooks/useElementSize';
+import usePrevious from '../../hooks/usePrevious';
 var DEFAULT_MIN_COLUMN_WITH = 300;
 var DEFAULT_MIN_COLUMNS = 1;
 var DEFAULT_MAX_COLUMNS = 5;
@@ -21,21 +22,19 @@ var ANIMATION_DURATION = 0.2;
 var ANIMATION_NEXT = 'page';
 var ANIMATION_BACK = 'pageBack';
 var COLUMN_ITEM_CLASSNAME = 'ColumnItem';
-var pageTransitionVariants = function pageTransitionVariants(pageDirection) {
-  return {
-    pageEnter: function pageEnter() {
-      return {
-        x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
-        opacity: 0
-      };
-    },
-    pageCenter: function pageCenter() {
-      return {
-        x: 0,
-        opacity: 1
-      };
-    }
-  };
+var variants = {
+  pageEnter: function pageEnter(pageDirection) {
+    return {
+      x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
+      opacity: 0
+    };
+  },
+  pageCenter: function pageCenter() {
+    return {
+      x: 0,
+      opacity: 1
+    };
+  }
 };
 var getFirstColumnItem = function getFirstColumnItem(node) {
   if (_toConsumableArray(node.classList).includes(COLUMN_ITEM_CLASSNAME)) {
@@ -87,10 +86,6 @@ var ResponsiveColumnStripe = /*#__PURE__*/forwardRef(function (props, ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     isResizePage = _useState8[0],
     setIsResizePage = _useState8[1];
-  var _useState9 = useState(ANIMATION_NEXT),
-    _useState10 = _slicedToArray(_useState9, 2),
-    animationDirection = _useState10[0],
-    setAnimationDirection = _useState10[1];
 
   // The base for reacting on changing width of the wrapping element.
   // It uses a ResizeObserver under the hood.
@@ -98,16 +93,21 @@ var ResponsiveColumnStripe = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useElementSize = useElementSize(columnWrapperRef),
     _useElementSize2 = _slicedToArray(_useElementSize, 1),
     columnWrapperWidth = _useElementSize2[0];
+  var previousPage = usePrevious(currentPage);
+  var animationDirection = currentPage > previousPage ? ANIMATION_NEXT : ANIMATION_BACK;
   useAfterMount(function () {
     setEnableInitialAnimation(true);
   });
 
   // Update active page from outside to be used as controlled component
-  useEffect(function () {
-    if (Number.isFinite(activePage)) {
-      setCurrentPage(activePage);
-    }
-  }, [activePage]);
+  var _useState9 = useState(activePage),
+    _useState10 = _slicedToArray(_useState9, 2),
+    previousActivePage = _useState10[0],
+    setPreviousActivePage = _useState10[1];
+  if (Number.isFinite(activePage) && activePage !== previousActivePage) {
+    setCurrentPage(activePage);
+    setPreviousActivePage(activePage);
+  }
   var updatePageOnColumnsSizeChange = function updatePageOnColumnsSizeChange(firstItem, columnsPerPage, children) {
     // Split children in page chunks
     var itemChunks = chunk(columnsPerPage)(children);
@@ -168,14 +168,12 @@ var ResponsiveColumnStripe = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [columnWrapperWidth, columnWrapperRef.current, children]);
   var handlePrevClick = function handlePrevClick() {
     setIsResizePage(false);
-    setAnimationDirection(ANIMATION_BACK);
     var pageNumber = currentPage - 1;
     setCurrentPage(pageNumber);
     onPreviousClick(pageNumber, columnsPerPage);
   };
   var handleNextClick = function handleNextClick() {
     setIsResizePage(false);
-    setAnimationDirection(ANIMATION_NEXT);
     var pageNumber = currentPage + 1;
     setCurrentPage(pageNumber);
     onNextClick(pageNumber, columnsPerPage);
@@ -222,12 +220,14 @@ var ResponsiveColumnStripe = /*#__PURE__*/forwardRef(function (props, ref) {
     className: "ColumnsArea flex-1-1 overflow-hidden",
     ref: columnWrapperRef
   }, disableAnimation || isResizePage ? columns : null, !disableAnimation && !isResizePage && /*#__PURE__*/React.createElement(AnimatePresence, {
-    exitBeforeEnter: true
+    exitBeforeEnter: true,
+    custom: animationDirection
   }, /*#__PURE__*/React.createElement(motion.div, {
     key: currentPage,
-    variants: pageTransitionVariants(animationDirection),
+    variants: variants,
     initial: enableInitialAnimation ? 'pageEnter' : false,
     animate: "pageCenter",
+    custom: animationDirection,
     transition: {
       duration: ANIMATION_DURATION
     }

package/hooks/useDebugInfo.js

@@ -4,7 +4,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/28-useDebugInformation/useDebugInformation.js
 import { useEffect, useRef } from 'react';
 import useRenderCount from './useRenderCount';
-var logStyle = ["color: #4c5667", "background-color: #e5ebf0", "padding: 2px 4px", "border-radius: 2px"].join(";");
+var logStyle = ['color: #4c5667', 'background-color: #e5ebf0', 'padding: 2px 4px', 'border-radius: 2px'].join(';');
 export default function useDebugInfo(componentName, props) {
   var renderCount = useRenderCount();
   var changedProps = useRef({});

package/hooks/usePrevious.js

@@ -0,0 +1,18 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState } from 'react';
+export default function usePrevious(state) {
+  // Based on the react beta docs, we avoid using an effect and a ref here but
+  // use another state to store the previous value to compare to.
+  // See: https://beta.reactjs.org/reference/react/useState#storing-information-from-previous-renders
+
+  // [previousState currentState]
+  var _useState = useState([null, state]),
+    _useState2 = _slicedToArray(_useState, 2),
+    tuple = _useState2[0],
+    setTuple = _useState2[1];
+  if (tuple[1] !== state) {
+    // Set the new given state value and store the old state as pervious value
+    setTuple([tuple[1], state]);
+  }
+  return tuple[0];
+}

package/index.js

@@ -158,6 +158,7 @@ export { default as useElementSize } from './hooks/useElementSize';
 export { default as useScrollPosition } from './hooks/useScrollPosition';
 export { default as useDarkMode } from './hooks/useDarkMode';
 export { default as useMutationObserver } from './hooks/useMutationObserver';
+export { default as usePrevious } from './hooks/usePrevious';
 import { hasTouch as _hasTouch, inIframe as _inIframe, isDesktop as _isDesktop } from './utils/deviceUtils';
 export { _hasTouch as hasTouch, _inIframe as inIframe, _isDesktop as isDesktop };
 import { getColorScheme as _getColorScheme, setColorScheme as _setColorScheme } from './utils/colorScheme';

package/lib/es/Colors.d.ts

@@ -18,4 +18,4 @@ declare module '@rio-cloud/rio-uikit/lib/es/Colors' {
 
     const colors: Colors;
     export default colors;
-}
+}

package/lib/es/IncidentsLayer.d.ts

@@ -1,4 +1,4 @@
 declare module '@rio-cloud/rio-uikit/lib/es/IncidentsLayer' {
     import React from 'react';
     export default class IncidentsLayer extends React.Component<any> {}
-}
+}

package/lib/es/RuleContainer.d.ts

@@ -3,4 +3,4 @@ declare module '@rio-cloud/rio-uikit/lib/es/RuleContainer' {
     import { RuleContainerProps } from './types';
 
     export default class RuleContainer extends React.Component<React.PropsWithChildren<RuleContainerProps>> {}
-}
+}

package/lib/es/RulesWrapper.d.ts

@@ -3,4 +3,4 @@ declare module '@rio-cloud/rio-uikit/lib/es/RulesWrapper' {
     import { RulesWrapperProps } from './types';
 
     export default class RulesWrapper extends React.Component<RulesWrapperProps> {}
-}
+}

package/lib/es/SortDirection.d.ts

@@ -3,7 +3,7 @@ declare module '@rio-cloud/rio-uikit/lib/es/SortDirection' {
         ASCENDING = 'asc',
         DESCENDING = 'desc',
     }
-    
+
     export default {
         ASCENDING: 'asc',
         DESCENDING: 'desc',

package/lib/es/TrafficLayer.d.ts

@@ -1,4 +1,4 @@
 declare module '@rio-cloud/rio-uikit/lib/es/TrafficLayer' {
     import React from 'react';
     export default class TrafficLayer extends React.Component<any> {}
-}
+}

package/lib/es/TruckLayer.d.ts

@@ -1,4 +1,4 @@
 declare module '@rio-cloud/rio-uikit/lib/es/TruckLayer' {
     import React from 'react';
     export default class TruckLayer extends React.Component<any> {}
-}
+}

package/lib/es/components/actionBarItem/ActionBarItem.js

@@ -23,7 +23,7 @@ var _ActionBarItemListItem = require("./ActionBarItemListItem");
 var _ActionBarItemListSeparator = require("./ActionBarItemListSeparator");
 var _OverlayTrigger = _interopRequireDefault(require("../overlay/OverlayTrigger"));
 var _Dialog = _interopRequireDefault(require("../dialog/Dialog"));
-var _excluded = ["className", "children", "popoverWidth", "id", "hidePopoverOnClick"];
+var _excluded = ["className", "mobileDialogBodyClassName", "children", "popoverWidth", "id", "hidePopoverOnClick"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var EVENT = 'mousedown';
@@ -66,6 +66,7 @@ var isActionBarItemIcon = function isActionBarItemIcon(child) {
 };
 var ActionBarItem = /*#__PURE__*/_react["default"].memo(function (props) {
   var className = props.className,
+    mobileDialogBodyClassName = props.mobileDialogBodyClassName,
     children = props.children,
     popoverWidth = props.popoverWidth,
     id = props.id,
@@ -163,6 +164,7 @@ var ActionBarItem = /*#__PURE__*/_react["default"].memo(function (props) {
         return setIsShown(false);
       },
       body: itemPopover,
+      bodyClassName: mobileDialogBodyClassName,
       title: title
     })), childrenWithoutPopoverAndIcon);
   }
@@ -203,12 +205,14 @@ ActionBarItem.ListSeparator = _ActionBarItemListSeparator.ActionBarItemListSepar
 ActionBarItem.defaultProps = {
   id: getRandomString(),
   hidePopoverOnClick: true,
-  popoverWidth: 250
+  popoverWidth: 250,
+  mobileDialogBodyClassName: ''
 };
 ActionBarItem.propTypes = {
   id: _propTypes["default"].string,
   children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
   className: _propTypes["default"].string,
+  mobileDialogBodyClassName: _propTypes["default"].string,
   hidePopoverOnClick: _propTypes["default"].bool,
   popoverWidth: _propTypes["default"].oneOf([100, 150, 200, 250, 300, 350, 400, 450, 500])
 };

package/lib/es/components/assetTree/Tree.js

@@ -43,6 +43,7 @@ var _TreeNothingFound = _interopRequireDefault(require("./TreeNothingFound"));
 var _TreeOptions = _interopRequireDefault(require("./TreeOptions"));
 var _TreeRoot = _interopRequireDefault(require("./TreeRoot"));
 var _TypeCounter = _interopRequireDefault(require("./TypeCounter"));
+var _searchNormalized = require("../../utils/searchNormalized");
 var _excluded = ["groups", "items", "selectedGroups", "selectedItems", "onSelectionChange", "hasMultiselect", "showRadioButtons", "hideSearch", "hideTreeHead", "summary", "hideSummary", "search", "searchPlaceholder", "onSearchChange", "className", "scrollHeight", "expandedGroups", "onExpandGroupsChange", "showEmptyGroups", "treeOptions"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -130,7 +131,7 @@ var getMappedItemsToGroups = function getMappedItemsToGroups(groups, items) {
 var filterByName = function filterByName(searchValue) {
   return function (item) {
     if (searchValue) {
-      return getName(item).toLowerCase().includes(searchValue.toLowerCase());
+      return (0, _searchNormalized.searchNormalized)(getName(item), searchValue);
     }
     return true;
   };