@synerise/ds-utils 0.31.2 → 0.32.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.32.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-utils@0.31.2...@synerise/ds-utils@0.32.0) (2025-01-29)
+
+
+### Features
+
+* antd@4.24 react@18 ([d97a667](https://github.com/synerise/synerise-design/commit/d97a667b1f33aed3177e1851de3b6f60be2d46a6))
+
+
+
+
+
 ## [0.31.2](https://github.com/synerise/synerise-design/compare/@synerise/ds-utils@0.31.1...@synerise/ds-utils@0.31.2) (2024-11-21)
 
 

package/dist/doubleClickListener/doubleClickListener.js

@@ -1,10 +1,10 @@
-var DEFAULT_DELAY = 250; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+var DEFAULT_DELAY = 250;
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function doubleClickListener(onClick, onDblClick, delay) {
   if (delay === void 0) {
     delay = DEFAULT_DELAY;
   }
-
   var timeout;
   return function (event) {
     if (!timeout) {
@@ -19,5 +19,4 @@ function doubleClickListener(onClick, onDblClick, delay) {
     }
   };
 }
-
 export default doubleClickListener;

package/dist/focusWithArrowKeys/focusWithArrowKeys.js

@@ -1,7 +1,6 @@
 var hasFocusableElementInside = function hasFocusableElementInside(element, query) {
   return element.querySelectorAll(query).length > 0;
 };
-
 var focusWithArrowKeys = function focusWithArrowKeys(keyDownEvent, focusableItemClass, fallback) {
   var selector = "." + focusableItemClass;
   var focusableElementsNodeList = document.querySelectorAll(selector);
@@ -9,11 +8,9 @@ var focusWithArrowKeys = function focusWithArrowKeys(keyDownEvent, focusableItem
   var activeElement = document.activeElement;
   var activeElementIndex = focusableElements.indexOf(activeElement);
   var isItemFocused = activeElement && activeElement.classList.contains(focusableItemClass);
-
   if (keyDownEvent.key === 'ArrowDown') {
     keyDownEvent.preventDefault();
     var elementToFocusOn;
-
     if (isItemFocused) {
       var nextSibling = activeElement.nextElementSibling;
       var hasFocusableChildren = hasFocusableElementInside(activeElement, selector);
@@ -21,38 +18,29 @@ var focusWithArrowKeys = function focusWithArrowKeys(keyDownEvent, focusableItem
     } else {
       elementToFocusOn = document.querySelector("." + focusableItemClass);
     }
-
     if (elementToFocusOn) {
       elementToFocusOn.focus();
     } else {
       fallback();
     }
-
     return;
   }
-
   if (keyDownEvent.key === 'ArrowUp') {
     keyDownEvent.preventDefault();
-
     var _elementToFocusOn;
-
     if (isItemFocused) {
       var prevSibling = activeElement.previousElementSibling;
       _elementToFocusOn = prevSibling !== null && !hasFocusableElementInside(prevSibling, selector) ? prevSibling : focusableElements[activeElementIndex - 1];
     }
-
     if (_elementToFocusOn) {
       _elementToFocusOn.focus();
     } else {
       fallback();
     }
-
     return;
   }
-
   if (keyDownEvent.key === 'Enter') {
     activeElement && activeElement.click();
   }
 };
-
 export default focusWithArrowKeys;

package/dist/getInitials/getInitials.js

@@ -2,14 +2,11 @@ var getInitials = function getInitials(firstname, lastname) {
   if (firstname === void 0) {
     firstname = '';
   }
-
   if (lastname === void 0) {
     lastname = '';
   }
-
   var fName = typeof firstname === 'string' ? firstname : '';
   var lName = typeof lastname === 'string' ? lastname : '';
   return ("" + (fName[0] || '') + (lName[0] || '')).toUpperCase();
 };
-
 export default getInitials;

package/dist/getPopupContainer/getPopupContainer.js

@@ -2,7 +2,6 @@ export function getClosest(elem, selector) {
   for (var node = elem; node && node !== document.body; node = node.parentElement) {
     if (node.matches(selector)) return node;
   }
-
   return null;
 }
 export function getPopupContainer(trigger) {

package/dist/hexToRgba/hexToRgba.js

@@ -4,5 +4,4 @@ var hexToRgba = function hexToRgba(hex, alpha) {
   var b = parseInt(hex.substring(5, 7), 16);
   return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
 };
-
 export default hexToRgba;

package/dist/regex/regex.js

@@ -2,5 +2,4 @@
 var escapeRegEx = function escapeRegEx(s) {
   return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
 };
-
 export default escapeRegEx;

package/dist/renderWithHighlight/renderWithHighlight.js

@@ -4,21 +4,16 @@ export var renderWithHighlight = function renderWithHighlight(name, highlight, c
   if (className === void 0) {
     className = 'string-highlight';
   }
-
   if (testId === void 0) {
     testId = 'string-highlight';
   }
-
   if (!highlight || highlight === '') {
     return name;
   }
-
   var index = name.toLocaleLowerCase().indexOf(highlight.toLocaleLowerCase());
-
   if (index === -1) {
     return name;
   }
-
   var escapedHighlight = escapeRegEx(highlight);
   var startOfQuery = name.toLocaleLowerCase().search(escapedHighlight.toLowerCase());
   var endOfQuery = startOfQuery + highlight.length;

package/dist/selectColorByLetter/selectColorByLetter.js

@@ -1,17 +1,13 @@
 import { theme } from '@synerise/ds-core';
 import latinize from 'latinize';
 export var palette = ['blue', 'cyan', 'fern', 'green', 'orange', 'yellow', 'red', 'mars', 'pink', 'violet', 'purple'];
-
 function getColorByLetter() {
   var colors = {};
-
   for (var i = 0; i <= 25; i += 1) {
     colors[String.fromCharCode(i + 65)] = palette[i % palette.length];
   }
-
   return colors;
 }
-
 export var colorByLetter = getColorByLetter();
 export function getColor(colorString, forAvatar) {
   if (!forAvatar) return theme.palette[colorString];
@@ -20,13 +16,10 @@ export function getColor(colorString, forAvatar) {
     hue: colorString.split('-')[1]
   };
 }
-
 function selectColorByLetter(letter, forAvatar) {
   if (forAvatar === void 0) {
     forAvatar = false;
   }
-
   return typeof letter !== 'string' ? getColor('orange-500', forAvatar) : getColor((colorByLetter[latinize(letter.toUpperCase())] || 'orange') + "-500", forAvatar);
 }
-
 export default selectColorByLetter;

package/dist/testing/index.d.ts

@@ -1 +1,3 @@
 export { default as renderWithProvider } from './renderWithProvider/renderWithProvider';
+export { default as renderWithLocalesLoaded } from './renderWithLocalesLoaded/renderWithLocalesLoaded';
+export { sleep } from './sleep';

package/dist/testing/index.js

@@ -1,2 +1,4 @@
 // eslint-disable-next-line import/prefer-default-export
-export { default as renderWithProvider } from './renderWithProvider/renderWithProvider';
+export { default as renderWithProvider } from './renderWithProvider/renderWithProvider';
+export { default as renderWithLocalesLoaded } from './renderWithLocalesLoaded/renderWithLocalesLoaded';
+export { sleep } from './sleep';

package/dist/testing/renderWithLocalesLoaded/renderWithLocalesLoaded.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { RenderOptions, RenderResult } from '@testing-library/react';
+import { DataFormatNotationType } from '@synerise/ds-data-format';
+type Options = Omit<RenderOptions, 'queries'>;
+declare const renderWithLocalesLoaded: (node: ReactNode, options?: Options, props?: {
+    locale?: string;
+    notation?: DataFormatNotationType;
+    timeZone?: string;
+}) => Promise<RenderResult>;
+export default renderWithLocalesLoaded;

package/dist/testing/renderWithLocalesLoaded/renderWithLocalesLoaded.js

@@ -0,0 +1,30 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React from 'react';
+import { render } from '@testing-library/react';
+import { DSProvider } from '@synerise/ds-core';
+import { getDataFormatConfigFromNotation } from '@synerise/ds-data-format';
+import renderWithProvider from '../renderWithProvider/renderWithProvider';
+import { NOOP } from '../../index';
+var renderWithLocalesLoaded = function renderWithLocalesLoaded(node, options, props) {
+  return new Promise(function (resolve) {
+    var _props$locale, _props$timeZone;
+    var onDSLocalesLoaded = function onDSLocalesLoaded() {
+      return resolve(_extends({}, rendered, {
+        rerender: function rerender(ui, opt) {
+          return renderWithProvider(ui, _extends({
+            container: rendered.container
+          }, opt));
+        }
+      }));
+    };
+    var rendered = render(/*#__PURE__*/React.createElement(DSProvider, _extends({
+      locale: (_props$locale = props == null ? void 0 : props.locale) != null ? _props$locale : undefined,
+      onErrorIntl: NOOP,
+      onDSLocalesLoaded: onDSLocalesLoaded,
+      timeZone: (_props$timeZone = props == null ? void 0 : props.timeZone) != null ? _props$timeZone : undefined
+    }, props != null && props.notation ? {
+      dataFormatConfig: getDataFormatConfigFromNotation(props.notation)
+    } : {}), node), options);
+  });
+};
+export default renderWithLocalesLoaded;

package/dist/testing/renderWithProvider/renderWithProvider.d.ts

@@ -1,9 +1,11 @@
-import React from 'react';
+import { ReactNode } from 'react';
 import { RenderOptions, RenderResult } from '@testing-library/react';
 import { DataFormatNotationType } from '@synerise/ds-data-format';
 type Options = Omit<RenderOptions, 'queries'>;
-declare const renderWithProvider: (node: React.ReactElement, options?: Options, props?: {
+declare const renderWithProvider: (node: ReactNode, options?: Options, props?: {
     locale?: string;
     notation?: DataFormatNotationType;
+    timeZone?: string;
+    onDSLocalesLoaded?: () => void;
 }) => RenderResult;
 export default renderWithProvider;

package/dist/testing/renderWithProvider/renderWithProvider.js

@@ -1,37 +1,25 @@
-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; }
-
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import { render } from '@testing-library/react';
 import { DSProvider } from '@synerise/ds-core';
 import { getDataFormatConfigFromNotation } from '@synerise/ds-data-format';
 import { NOOP } from '../../index';
-
 var renderWithProvider = function renderWithProvider(node, options, props) {
-  var _props$locale;
-
-  var rendered = render( /*#__PURE__*/React.createElement(DSProvider, _extends({
+  var _props$locale, _props$timeZone;
+  var rendered = render(/*#__PURE__*/React.createElement(DSProvider, _extends({
     locale: (_props$locale = props == null ? void 0 : props.locale) != null ? _props$locale : undefined,
-    onErrorIntl: NOOP
+    onErrorIntl: NOOP,
+    onDSLocalesLoaded: props == null ? void 0 : props.onDSLocalesLoaded,
+    timeZone: (_props$timeZone = props == null ? void 0 : props.timeZone) != null ? _props$timeZone : undefined
   }, props != null && props.notation ? {
     dataFormatConfig: getDataFormatConfigFromNotation(props.notation)
   } : {}), node), options);
-  return _objectSpread({}, rendered, {
+  return _extends({}, rendered, {
     rerender: function rerender(ui, opt) {
-      return renderWithProvider(ui, _objectSpread({
+      return renderWithProvider(ui, _extends({
         container: rendered.container
       }, opt));
     }
   });
 };
-
 export default renderWithProvider;

package/dist/testing/sleep.d.ts

@@ -0,0 +1 @@
+export declare const sleep: (duration?: number) => Promise<unknown>;

package/dist/testing/sleep.js

@@ -0,0 +1,8 @@
+export var sleep = function sleep(duration) {
+  if (duration === void 0) {
+    duration = 1000;
+  }
+  return new Promise(function (resolve) {
+    return setTimeout(resolve, duration);
+  });
+};

package/dist/toCamelCase/toCamelCase.js

@@ -1,10 +1,14 @@
 export default (function (str) {
-  return str.toLowerCase() // Replaces any - or _ characters with a space
-  .replace(/[-_]+/g, ' ') // Removes any non alphanumeric characters
-  .replace(/[^\w\s]/g, '') // Uppercases the first character in each group immediately following a space
+  return str.toLowerCase()
+  // Replaces any - or _ characters with a space
+  .replace(/[-_]+/g, ' ')
+  // Removes any non alphanumeric characters
+  .replace(/[^\w\s]/g, '')
+  // Uppercases the first character in each group immediately following a space
   // (delimited by spaces)
   .replace(/ (.)/g, function ($1) {
     return $1.toUpperCase();
-  }) // Removes spaces
+  })
+  // Removes spaces
   .replace(/ /g, '');
 });

package/dist/useBreakpoint/useBreakpoint.js

@@ -1,13 +1,4 @@
-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; }
-
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
 var BREAKPOINTS = {
   xxl: {
@@ -41,22 +32,20 @@ var BREAKPOINTS = {
     columns: 4
   }
 };
-
 var useBreakpoint = function useBreakpoint() {
   var _React$useState = React.useState({
-    width: 0,
-    height: 0
-  }),
-      dimensions = _React$useState[0],
-      setDimensions = _React$useState[1];
-
+      width: 0,
+      height: 0
+    }),
+    dimensions = _React$useState[0],
+    setDimensions = _React$useState[1];
   var updateBreakPoint = React.useMemo(function () {
     var width = dimensions.width;
     var breakpointKey = Object.keys(BREAKPOINTS).filter(function (key) {
       return BREAKPOINTS[key].min <= width && BREAKPOINTS[key].max >= width;
     })[0];
     return {
-      breakpoint: _objectSpread({}, BREAKPOINTS[breakpointKey], {
+      breakpoint: _extends({}, BREAKPOINTS[breakpointKey], {
         name: breakpointKey
       }),
       dimensions: dimensions
@@ -69,11 +58,9 @@ var useBreakpoint = function useBreakpoint() {
         height: window.innerHeight
       };
     };
-
     var handleResize = function handleResize() {
       setDimensions(getDimensions());
     };
-
     setDimensions(getDimensions());
     window.addEventListener('resize', handleResize);
     return function () {
@@ -82,5 +69,4 @@ var useBreakpoint = function useBreakpoint() {
   }, [setDimensions]);
   return updateBreakPoint;
 };
-
 export default useBreakpoint;

package/dist/useCombinedRefs/useCombinedRefs.js

@@ -1,17 +1,14 @@
 import React from 'react';
-
 var useCombinedRefs = function useCombinedRefs() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
     refs[_key] = arguments[_key];
   }
-
   var targetRef = React.useRef(null);
   React.useEffect(function () {
     refs.forEach(function (ref) {
       if (!ref) {
         return;
       }
-
       if (typeof ref === 'function') {
         ref(targetRef.current);
       } else {
@@ -22,5 +19,4 @@ var useCombinedRefs = function useCombinedRefs() {
   }, [refs]);
   return targetRef;
 };
-
 export default useCombinedRefs;

package/dist/useElementInView/useElementInView.js

@@ -1,34 +1,20 @@
-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; }
-
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { useEffect, useRef, useState } from 'react';
-
 var useElementInView = function useElementInView(options, rootElementRef) {
   var elementRef = useRef(null);
-
   var _useState = useState(false),
-      isVisible = _useState[0],
-      setIsVisible = _useState[1];
-
+    isVisible = _useState[0],
+    setIsVisible = _useState[1];
   useEffect(function () {
     var intersectionObserver = new IntersectionObserver(function (_ref) {
       var entry = _ref[0];
       setIsVisible(entry.isIntersecting);
-    }, _objectSpread({}, options, {
+    }, _extends({}, options, {
       root: (rootElementRef == null ? void 0 : rootElementRef.current) || null
     }));
-
     if (elementRef.current) {
       intersectionObserver.observe(elementRef.current);
     }
-
     return function () {
       intersectionObserver.disconnect();
     };
@@ -39,5 +25,4 @@ var useElementInView = function useElementInView(options, rootElementRef) {
     isVisible: isVisible
   };
 };
-
 export default useElementInView;

package/dist/useOnClickOutside/useOnClickOutside.js

@@ -4,6 +4,7 @@ var TOUCHSTART = 'touchstart';
 var CLICK = 'click';
 var CONTEXTMENU = 'contextmenu';
 var defaultEvents = [MOUSEDOWN, TOUCHSTART];
+
 /**
  * Hook for listening for outside clicks.
  *
@@ -12,7 +13,6 @@ var defaultEvents = [MOUSEDOWN, TOUCHSTART];
  * @param customEventsTypes list of events to handle that are happening outside (optional, pass something else than `undefined` to overwrite default `['mousedown', 'touchstart']`)
  * @param ignoreSelectors list of selectors/classes which, in case it is found that any of parent elements of triggering element has this class, event `handler` won't be called
  */
-
 export var useOnClickOutside = function useOnClickOutside(ref, handler, customEventsTypes, ignoreSelectors) {
   var handlerRef = useRef(handler);
   var events = customEventsTypes || defaultEvents;
@@ -25,28 +25,22 @@ export var useOnClickOutside = function useOnClickOutside(ref, handler, customEv
         return null;
       };
     }
-
     var listener = function listener(event) {
       if (!ref.current || !handlerRef.current) {
         return;
       }
-
       if (ref.current.contains(event.target)) {
         return;
       }
-
       if (ignoreSelectors != null && ignoreSelectors.some(function (className) {
         var _event$target;
-
         return (_event$target = event.target) == null ? void 0 : _event$target.closest(className);
       })) {
         // if any of parent elements contain one of ignored classes - stop proceeding this event
         return;
       }
-
       handlerRef.current(event);
     };
-
     events.forEach(function (event) {
       document.addEventListener(event, listener);
     });

package/dist/useOverscrollBlock/useOverscrollBlock.js

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useRef } from 'react';
-
 var useOverscrollBlock = function useOverscrollBlock() {
   var ref = useRef();
   var handleMouseEnter = useCallback(function () {
@@ -10,22 +9,18 @@ var useOverscrollBlock = function useOverscrollBlock() {
   }, []);
   useEffect(function () {
     var element = ref.current;
-
     if (element) {
       element.addEventListener('mouseenter', handleMouseEnter);
       element.addEventListener('mouseleave', handleMouseLeave);
     }
-
     return function () {
       if (element) {
         element.removeEventListener('mouseenter', handleMouseEnter);
         element.removeEventListener('mouseleave', handleMouseLeave);
       }
-
       document.body.style.removeProperty('overscroll-behavior-x');
     };
   }, [handleMouseEnter, handleMouseLeave]);
   return ref;
 };
-
 export default useOverscrollBlock;

package/dist/usePrevious/usePrevious.js

@@ -1,5 +1,4 @@
 import React from 'react';
-
 function usePrevious(value) {
   var ref = React.useRef();
   React.useEffect(function () {
@@ -7,5 +6,4 @@ function usePrevious(value) {
   });
   return ref.current;
 }
-
 export default usePrevious;

package/dist/useResize/useResize.js

@@ -1,18 +1,15 @@
 import React from 'react';
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 var useResize = function useResize(componentRef, visible) {
   if (visible === void 0) {
     visible = true;
   }
-
   var _React$useState = React.useState({
-    width: 0,
-    height: 0
-  }),
-      dimensions = _React$useState[0],
-      setDimensions = _React$useState[1];
-
+      width: 0,
+      height: 0
+    }),
+    dimensions = _React$useState[0],
+    setDimensions = _React$useState[1];
   React.useEffect(function () {
     var getDimensions = function getDimensions() {
       return {
@@ -20,15 +17,12 @@ var useResize = function useResize(componentRef, visible) {
         height: (componentRef == null ? void 0 : componentRef.current.offsetHeight) || 0
       };
     };
-
     var handleResize = function handleResize() {
       setDimensions(getDimensions());
     };
-
     if (componentRef != null && componentRef.current) {
       setDimensions(getDimensions());
     }
-
     window.addEventListener('resize', handleResize);
     return function () {
       window.removeEventListener('resize', handleResize);
@@ -36,5 +30,4 @@ var useResize = function useResize(componentRef, visible) {
   }, [componentRef, setDimensions, visible]);
   return dimensions;
 };
-
 export default useResize;

package/dist/useResizeObserver/useResizeObserver.d.ts

@@ -1,3 +1,3 @@
 import { RefObject } from 'react';
-declare const useResizeObserver: (elementRef: RefObject<HTMLElement | undefined>) => DOMRect;
+declare const useResizeObserver: (elementRef: RefObject<HTMLElement | undefined>, resizeHandler?: ((dimensions: DOMRect) => void) | undefined) => DOMRect;
 export default useResizeObserver;

package/dist/useResizeObserver/useResizeObserver.js

@@ -1,16 +1,16 @@
 import { useEffect, useState, useRef, useCallback } from 'react';
-
-var useResizeObserver = function useResizeObserver(elementRef) {
+var useResizeObserver = function useResizeObserver(elementRef, resizeHandler) {
   var _useState = useState(new DOMRect()),
-      dimensions = _useState[0],
-      setDimensions = _useState[1];
-
+    dimensions = _useState[0],
+    setDimensions = _useState[1];
   var resizeObserver = useRef(new ResizeObserver(function (entries) {
     var contentRect = entries[0].contentRect;
     setDimensions(contentRect);
+    resizeHandler && resizeHandler(contentRect);
   })).current;
   var observe = useCallback(function () {
-    elementRef.current && resizeObserver.observe(elementRef.current); // eslint-disable-next-line react-hooks/exhaustive-deps
+    elementRef.current && resizeObserver.observe(elementRef.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [resizeObserver]);
   var disconnect = useCallback(function () {
     resizeObserver.disconnect();
@@ -19,12 +19,11 @@ var useResizeObserver = function useResizeObserver(elementRef) {
     if (elementRef.current) {
       observe();
     }
-
     return function () {
       resizeObserver.disconnect();
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [resizeObserver, observe, disconnect]);
   return dimensions;
 };
-
 export default useResizeObserver;

package/dist/useResizeToFit/useResizeToFit.js

@@ -1,8 +1,7 @@
 import { useEffect, useRef, useCallback } from 'react';
-
 var useResizeToFit = function useResizeToFit(_ref) {
   var onResize = _ref.onResize,
-      autoObserve = _ref.autoObserve;
+    autoObserve = _ref.autoObserve;
   var elementRef = useRef(null);
   var resizeObserver = useRef(new ResizeObserver(function () {
     elementRef.current && onResize(elementRef.current.clientWidth);
@@ -21,7 +20,6 @@ var useResizeToFit = function useResizeToFit(_ref) {
         disconnect();
       }
     }
-
     return function () {
       resizeObserver.disconnect();
     };
@@ -32,5 +30,4 @@ var useResizeToFit = function useResizeToFit(_ref) {
     observe: observe
   };
 };
-
 export default useResizeToFit;

package/dist/useSearchResults/search.utils.js

@@ -9,7 +9,6 @@ export var getActiveTabGroup = function getActiveTabGroup(tabIndex, groups) {
 };
 export var getGroupName = function getGroupName(groupId, groups) {
   var _groups$flatMap$find;
-
   return (_groups$flatMap$find = groups.flatMap(function (group) {
     return group.subGroups ? group.subGroups : group;
   }).find(function (group) {

package/dist/useSearchResults/useSearchResults.js

@@ -1,19 +1,9 @@
-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; }
-
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { useMemo } from 'react';
 import { getActiveTabGroup, getGroupName, isItemInGroup } from './search.utils';
 export var useSearchResults = function useSearchResults(items, groups, activeTab, groupByGroupName, activeGroup, searchQuery, maxSearchResultsInGroup) {
   var showGroupedResults = useMemo(function () {
     var _getActiveTabGroup;
-
     return activeTab && !activeGroup ? Boolean((_getActiveTabGroup = getActiveTabGroup(activeTab, groups)) == null ? void 0 : _getActiveTabGroup.subGroups) : Boolean(activeTab === 0 && !activeGroup);
   }, [activeTab, activeGroup, groups]);
   var groupOrder = useMemo(function () {
@@ -27,34 +17,28 @@ export var useSearchResults = function useSearchResults(items, groups, activeTab
     if (!searchQuery) return [];
     var result = [];
     var itemsNumber = items.length;
-
     for (var i = 0; i < itemsNumber; i += 1) {
       var item = items[i];
       var itemInTab = !activeTab || isItemInGroup(item.groupId, getActiveTabGroup(activeTab, groups));
       var itemInGroup = !activeGroup || item.groupId === activeGroup.id;
-
       if (itemInGroup && itemInTab) {
         var _item$name, _item$subtitle;
-
         var searchQueryInLowerCase = searchQuery.toLowerCase();
         var isMatchingName = (_item$name = item.name) == null ? void 0 : _item$name.toLowerCase().includes(searchQueryInLowerCase);
         var isMatchingSubtitle = (_item$subtitle = item.subtitle) == null ? void 0 : _item$subtitle.toLowerCase().includes(searchQueryInLowerCase);
         var matching = !searchQuery || isMatchingName || isMatchingSubtitle;
-
         if (matching) {
-          result.push(_objectSpread({
+          result.push(_extends({
             groupName: showGroupedResults && item.groupId ? getGroupName(item.groupId, groups) : undefined
           }, item));
         }
       }
     }
-
     if (groupOrder && groupOrder.length) {
       result.sort(function (a, b) {
         return a.groupId !== undefined && b.groupId !== undefined ? groupOrder.indexOf(a.groupId) - groupOrder.indexOf(b.groupId) : 0;
       });
     }
-
     return result;
   }, [activeGroup, activeTab, groupOrder, groups, items, searchQuery, showGroupedResults]);
   var groupedSearchResults = useMemo(function () {

package/dist/useTraceUpdate/index.js

@@ -1,25 +1,22 @@
-import { useEffect, useRef } from 'react'; // eslint-disable-next-line import/prefer-default-export
+import { useEffect, useRef } from 'react';
 
+// eslint-disable-next-line import/prefer-default-export
 export var useTraceUpdate = function useTraceUpdate(props) {
   var prev = useRef(props);
   useEffect(function () {
     var changedProps = Object.entries(props).reduce(function (ps, _ref) {
       var k = _ref[0],
-          v = _ref[1];
-
+        v = _ref[1];
       if (prev.current[k] !== v) {
         // eslint-disable-next-line no-param-reassign
         ps[k] = [prev.current[k], v];
       }
-
       return ps;
     }, {});
-
     if (Object.keys(changedProps).length > 0) {
       // eslint-disable-next-line no-console
       console.log('Changed props:', changedProps);
     }
-
     prev.current = props;
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-utils",
-  "version": "0.31.2",
+  "version": "0.32.0",
   "description": "Utils UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -33,13 +33,13 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-data-format": "^0.6.1",
+    "@synerise/ds-data-format": "^0.7.0",
     "latinize": "^0.5.0"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "react": ">=16.9.0 <= 17.0.2",
-    "styled-components": "5.0.1"
+    "react": ">=16.9.0 <= 18.3.1",
+    "styled-components": "^5.3.3"
   },
-  "gitHead": "05f083c767e2cec3c2f91c9475aee89852a77d6c"
+  "gitHead": "fbde34e126b492edaf148e469ab96247a891d6df"
 }