@synerise/ds-utils 1.7.0 → 1.7.1

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.7.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-utils@1.7.0...@synerise/ds-utils@1.7.1) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-utils
+
 # [1.7.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-utils@1.6.0...@synerise/ds-utils@1.7.0) (2026-03-20)
 
 ### Features

package/dist/doubleClickListener/doubleClickListener.d.ts

@@ -1,3 +1,3 @@
-import type React from 'react';
+import { default as React } from 'react';
 declare function doubleClickListener<T>(onClick: (e: React.SyntheticEvent<T>) => void, onDblClick: (e: React.SyntheticEvent<T>) => void, delay?: number): React.ReactEventHandler<T>;
 export default doubleClickListener;

package/dist/doubleClickListener/doubleClickListener.js

@@ -1,12 +1,9 @@
-var DEFAULT_DELAY = 250;
-function doubleClickListener(onClick, onDblClick, delay) {
-  if (delay === void 0) {
-    delay = DEFAULT_DELAY;
-  }
-  var timeout;
-  return function (event) {
+const DEFAULT_DELAY = 250;
+function doubleClickListener(onClick, onDblClick, delay = DEFAULT_DELAY) {
+  let timeout;
+  return (event) => {
     if (!timeout) {
-      timeout = setTimeout(function () {
+      timeout = setTimeout(() => {
         onClick(event);
         timeout = null;
       }, delay);
@@ -17,4 +14,6 @@ function doubleClickListener(onClick, onDblClick, delay) {
     }
   };
 }
-export default doubleClickListener;
+export {
+  doubleClickListener as default
+};

package/dist/focusWithArrowKeys/focusWithArrowKeys.d.ts

@@ -1,3 +1,3 @@
-import { type KeyboardEvent } from 'react';
+import { KeyboardEvent } from 'react';
 declare const focusWithArrowKeys: (keyDownEvent: KeyboardEvent, focusableItemClass: string, fallback: () => void) => void;
 export default focusWithArrowKeys;

package/dist/focusWithArrowKeys/focusWithArrowKeys.js

@@ -1,22 +1,22 @@
-var hasFocusableElementInside = function hasFocusableElementInside(element, query) {
+const hasFocusableElementInside = (element, query) => {
   return element.querySelectorAll(query).length > 0;
 };
-var focusWithArrowKeys = function focusWithArrowKeys(keyDownEvent, focusableItemClass, fallback) {
-  var selector = "." + focusableItemClass;
-  var focusableElementsNodeList = document.querySelectorAll(selector);
-  var focusableElements = Array.from(focusableElementsNodeList);
-  var activeElement = document.activeElement;
-  var activeElementIndex = focusableElements.indexOf(activeElement);
-  var isItemFocused = activeElement && activeElement.classList.contains(focusableItemClass);
-  if (keyDownEvent.key === 'ArrowDown') {
+const focusWithArrowKeys = (keyDownEvent, focusableItemClass, fallback) => {
+  const selector = `.${focusableItemClass}`;
+  const focusableElementsNodeList = document.querySelectorAll(selector);
+  const focusableElements = Array.from(focusableElementsNodeList);
+  const activeElement = document.activeElement;
+  const activeElementIndex = focusableElements.indexOf(activeElement);
+  const isItemFocused = activeElement && activeElement.classList.contains(focusableItemClass);
+  if (keyDownEvent.key === "ArrowDown") {
     keyDownEvent.preventDefault();
-    var elementToFocusOn;
+    let elementToFocusOn;
     if (isItemFocused) {
-      var nextSibling = activeElement.nextElementSibling;
-      var hasFocusableChildren = hasFocusableElementInside(activeElement, selector);
+      const nextSibling = activeElement.nextElementSibling;
+      const hasFocusableChildren = hasFocusableElementInside(activeElement, selector);
       elementToFocusOn = nextSibling !== null && hasFocusableChildren ? nextSibling : focusableElements[activeElementIndex + 1];
     } else {
-      elementToFocusOn = document.querySelector("." + focusableItemClass);
+      elementToFocusOn = document.querySelector(`.${focusableItemClass}`);
     }
     if (elementToFocusOn) {
       elementToFocusOn.focus();
@@ -25,24 +25,26 @@ var focusWithArrowKeys = function focusWithArrowKeys(keyDownEvent, focusableItem
     }
     return;
   }
-  if (keyDownEvent.key === 'ArrowUp') {
+  if (keyDownEvent.key === "ArrowUp") {
     keyDownEvent.preventDefault();
-    var _elementToFocusOn;
+    let elementToFocusOn;
     if (isItemFocused) {
-      var prevSibling = activeElement.previousElementSibling;
-      _elementToFocusOn = prevSibling !== null && hasFocusableElementInside(prevSibling, selector) ? prevSibling : focusableElements[activeElementIndex - 1];
+      const prevSibling = activeElement.previousElementSibling;
+      elementToFocusOn = prevSibling !== null && hasFocusableElementInside(prevSibling, selector) ? prevSibling : focusableElements[activeElementIndex - 1];
     } else {
-      _elementToFocusOn = focusableElements[focusableElements.length - 1];
+      elementToFocusOn = focusableElements[focusableElements.length - 1];
     }
-    if (_elementToFocusOn) {
-      _elementToFocusOn.focus();
+    if (elementToFocusOn) {
+      elementToFocusOn.focus();
     } else {
       fallback();
     }
     return;
   }
-  if (keyDownEvent.key === 'Enter') {
+  if (keyDownEvent.key === "Enter") {
     activeElement && activeElement.click();
   }
 };
-export default focusWithArrowKeys;
+export {
+  focusWithArrowKeys as default
+};

package/dist/getInitials/getInitials.js

@@ -1,12 +1,8 @@
-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();
+const getInitials = (firstname = "", lastname = "") => {
+  const fName = typeof firstname === "string" ? firstname : "";
+  const lName = typeof lastname === "string" ? lastname : "";
+  return `${fName[0] || ""}${lName[0] || ""}`.toUpperCase();
+};
+export {
+  getInitials as default
 };
-export default getInitials;

package/dist/getPopupContainer/getPopupContainer.js

@@ -1,11 +1,15 @@
-export function getClosest(elem, selector) {
-  for (var node = elem; node && node !== document.body; node = node.parentElement) {
+function getClosest(elem, selector) {
+  for (let node = elem; node && node !== document.body; node = node.parentElement) {
     if (node.matches(selector)) {
       return node;
     }
   }
   return null;
 }
-export function getPopupContainer(trigger) {
-  return trigger instanceof HTMLElement && getClosest(trigger, '[data-popup-container]') || document.body;
-}
+function getPopupContainer(trigger) {
+  return trigger instanceof HTMLElement && getClosest(trigger, "[data-popup-container]") || document.body;
+}
+export {
+  getClosest,
+  getPopupContainer
+};

package/dist/getPopupContainer/index.js

@@ -1 +1,5 @@
-export * from './getPopupContainer';
+import { getClosest, getPopupContainer } from "./getPopupContainer.js";
+export {
+  getClosest,
+  getPopupContainer
+};

package/dist/hexToRgba/hexToRgba.js

@@ -1,7 +1,9 @@
-var hexToRgba = function hexToRgba(hex, alpha) {
-  var r = parseInt(hex.substring(1, 3), 16);
-  var g = parseInt(hex.substring(3, 5), 16);
-  var b = parseInt(hex.substring(5, 7), 16);
-  return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
+const hexToRgba = (hex, alpha) => {
+  const r = parseInt(hex.substring(1, 3), 16);
+  const g = parseInt(hex.substring(3, 5), 16);
+  const b = parseInt(hex.substring(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+export {
+  hexToRgba as default
 };
-export default hexToRgba;

package/dist/index.js

@@ -1,28 +1,64 @@
-export { default as hexToRgba } from './hexToRgba/hexToRgba';
-export { default as toCamelCase } from './toCamelCase/toCamelCase';
-export { useOnClickOutside } from './useOnClickOutside/useOnClickOutside';
-export { renderWithHighlight } from './renderWithHighlight/renderWithHighlight';
-export { useStableId } from './useStableId/useStableId';
-export { default as selectColorByLetter } from './selectColorByLetter/selectColorByLetter';
-export { default as focusWithArrowKeys } from './focusWithArrowKeys/focusWithArrowKeys';
-export { default as escapeRegEx } from './regex/regex';
-export { default as doubleClickListener } from './doubleClickListener/doubleClickListener';
-export { default as useResize } from './useResize/useResize';
-export { default as useResizeObserver } from './useResizeObserver/useResizeObserver';
-export * from './useBreakpoint/useBreakpoint';
-export { default as useCombinedRefs } from './useCombinedRefs/useCombinedRefs';
-export { default as usePrevious } from './usePrevious/usePrevious';
-export { useIsMounted } from './useIsMounted/useIsMounted';
-export { default as useElementInView } from './useElementInView/useElementInView';
-export { default as useOverscrollBlock } from './useOverscrollBlock/useOverscrollBlock';
-export { default as useResizeToFit } from './useResizeToFit/useResizeToFit';
-export * from './useScrollContain/useScrollContain';
-export * from './useStickyScroll/useStickyScroll';
-export * from './useSearchResults';
-export * from './useKeyboardShortcuts/useKeyboardShortcuts';
-export * from './omitKeys/omitKeys';
-export * from './useTraceUpdate';
-export * from './getPopupContainer';
-export * from './useLatestRef';
-export * from './useDelimiterEscape/useDelimiterEscape';
-export var NOOP = function NOOP() {};
+import { default as default2 } from "./hexToRgba/hexToRgba.js";
+import { default as default3 } from "./toCamelCase/toCamelCase.js";
+import { useOnClickOutside } from "./useOnClickOutside/useOnClickOutside.js";
+import { renderWithHighlight } from "./renderWithHighlight/renderWithHighlight.js";
+import { useStableId } from "./useStableId/useStableId.js";
+import { default as default4 } from "./selectColorByLetter/selectColorByLetter.js";
+import { default as default5 } from "./focusWithArrowKeys/focusWithArrowKeys.js";
+import { default as default6 } from "./regex/regex.js";
+import { default as default7 } from "./doubleClickListener/doubleClickListener.js";
+import { default as default8 } from "./useResize/useResize.js";
+import { default as default9 } from "./useResizeObserver/useResizeObserver.js";
+import { default as default10 } from "./useBreakpoint/useBreakpoint.js";
+import { default as default11 } from "./useCombinedRefs/useCombinedRefs.js";
+import { default as default12 } from "./usePrevious/usePrevious.js";
+import { useIsMounted } from "./useIsMounted/useIsMounted.js";
+import { default as default13 } from "./useElementInView/useElementInView.js";
+import { default as default14 } from "./useOverscrollBlock/useOverscrollBlock.js";
+import { default as default15 } from "./useResizeToFit/useResizeToFit.js";
+import { useScrollContain } from "./useScrollContain/useScrollContain.js";
+import { useStickyScroll } from "./useStickyScroll/useStickyScroll.js";
+import { getActiveTabGroup, getGroupName, isItemInGroup } from "./useSearchResults/search.utils.js";
+import { useSearchResults } from "./useSearchResults/useSearchResults.js";
+import { useKeyboardShortcuts } from "./useKeyboardShortcuts/useKeyboardShortcuts.js";
+import { omitKeys } from "./omitKeys/omitKeys.js";
+import { useTraceUpdate } from "./useTraceUpdate/index.js";
+import { getClosest, getPopupContainer } from "./getPopupContainer/getPopupContainer.js";
+import { useLatestRef } from "./useLatestRef/useLatestRef.js";
+import { useDelimiterEscape } from "./useDelimiterEscape/useDelimiterEscape.js";
+const NOOP = () => {
+};
+export {
+  NOOP,
+  default7 as doubleClickListener,
+  default6 as escapeRegEx,
+  default5 as focusWithArrowKeys,
+  getActiveTabGroup,
+  getClosest,
+  getGroupName,
+  getPopupContainer,
+  default2 as hexToRgba,
+  isItemInGroup,
+  omitKeys,
+  renderWithHighlight,
+  default4 as selectColorByLetter,
+  default3 as toCamelCase,
+  default10 as useBreakpoint,
+  default11 as useCombinedRefs,
+  useDelimiterEscape,
+  default13 as useElementInView,
+  useIsMounted,
+  useKeyboardShortcuts,
+  useLatestRef,
+  useOnClickOutside,
+  default14 as useOverscrollBlock,
+  default12 as usePrevious,
+  default8 as useResize,
+  default9 as useResizeObserver,
+  default15 as useResizeToFit,
+  useScrollContain,
+  useSearchResults,
+  useStableId,
+  useStickyScroll,
+  useTraceUpdate
+};

package/dist/modules.d.js

@@ -0,0 +1 @@
+

package/dist/modules.d.ts

@@ -0,0 +1 @@
+declare module 'latinize';

package/dist/omitKeys/omitKeys.js

@@ -1,6 +1,4 @@
-export var omitKeys = function omitKeys(keys, obj) {
-  return Object.fromEntries(Object.entries(obj).filter(function (_ref) {
-    var key = _ref[0];
-    return !keys.includes(key);
-  }));
-};
+const omitKeys = (keys, obj) => Object.fromEntries(Object.entries(obj).filter(([key]) => !keys.includes(key)));
+export {
+  omitKeys
+};

package/dist/regex/regex.js

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

package/dist/renderWithHighlight/renderWithHighlight.d.ts

@@ -1,2 +1,2 @@
-import { type ReactNode } from 'react';
+import { ReactNode } from 'react';
 export declare const renderWithHighlight: (name: string, highlight?: string, className?: string, testId?: string) => ReactNode;

package/dist/renderWithHighlight/renderWithHighlight.js

@@ -1,26 +1,19 @@
-import React from 'react';
-import escapeRegEx from '../regex/regex';
-export var renderWithHighlight = function renderWithHighlight(name, highlight, className, testId) {
-  if (className === void 0) {
-    className = 'string-highlight';
-  }
-  if (testId === void 0) {
-    testId = 'string-highlight';
-  }
-  if (!highlight || highlight === '') {
+import { jsx } from "react/jsx-runtime";
+import escapeRegEx from "../regex/regex.js";
+const renderWithHighlight = (name, highlight, className = "string-highlight", testId = "string-highlight") => {
+  if (!highlight || highlight === "") {
     return name;
   }
-  var index = name.toLocaleLowerCase().indexOf(highlight.toLocaleLowerCase());
+  const 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;
-  var resultArray = [name.substring(0, startOfQuery), /*#__PURE__*/React.createElement("span", {
-    key: name,
-    className: className,
-    "data-testid": testId
-  }, name.substring(startOfQuery, endOfQuery)), name.substring(endOfQuery, name.length)];
+  const escapedHighlight = escapeRegEx(highlight);
+  const startOfQuery = name.toLocaleLowerCase().search(escapedHighlight.toLowerCase());
+  const endOfQuery = startOfQuery + highlight.length;
+  const resultArray = [name.substring(0, startOfQuery), /* @__PURE__ */ jsx("span", { className, "data-testid": testId, children: name.substring(startOfQuery, endOfQuery) }, name), name.substring(endOfQuery, name.length)];
   return resultArray;
-};
+};
+export {
+  renderWithHighlight
+};

package/dist/selectColorByLetter/selectColorByLetter.js

@@ -1,27 +1,29 @@
-import latinize from 'latinize';
-import { theme } from '@synerise/ds-core';
-export var palette = ['blue', 'cyan', 'fern', 'green', 'orange', 'yellow', 'red', 'mars', 'pink', 'violet', 'purple'];
+import latinize from "latinize";
+import { theme } from "@synerise/ds-core";
+const palette = ["blue", "cyan", "fern", "green", "orange", "yellow", "red", "mars", "pink", "violet", "purple"];
 function getColorByLetter() {
-  var colors = {};
-  for (var i = 0; i <= 25; i += 1) {
+  const colors = {};
+  for (let 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) {
+const colorByLetter = getColorByLetter();
+function getColor(colorString, forAvatar) {
   if (!forAvatar) {
     return theme.palette[colorString];
   }
   return {
-    color: colorString.split('-')[0],
-    hue: colorString.split('-')[1]
+    color: colorString.split("-")[0],
+    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);
+function selectColorByLetter(letter, forAvatar = false) {
+  return typeof letter !== "string" ? getColor("orange-500", forAvatar) : getColor(`${colorByLetter[latinize(letter.toUpperCase())] || "orange"}-500`, forAvatar);
 }
-export default selectColorByLetter;
+export {
+  colorByLetter,
+  selectColorByLetter as default,
+  getColor,
+  palette
+};

package/dist/toCamelCase/toCamelCase.js

@@ -1,14 +1,4 @@
-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
-  // (delimited by spaces)
-  .replace(/ (.)/g, function ($1) {
-    return $1.toUpperCase();
-  })
-  // Removes spaces
-  .replace(/ /g, '');
-});
+const toCamelCase = (str) => str.toLowerCase().replace(/[-_]+/g, " ").replace(/[^\w\s]/g, "").replace(/ (.)/g, ($1) => $1.toUpperCase()).replace(/ /g, "");
+export {
+  toCamelCase as default
+};

package/dist/types/types.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';
 /**
  *  Allows creating a literal string union type with auto-completion in IDEs
  */
@@ -12,7 +12,7 @@ export type ExactlyOne<T, U> = (T & {
     [K in keyof T]?: never;
 });
 export type DataAttributes = Record<`data-${string}`, string>;
-export type WithHTMLAttributes<ElementType extends HTMLElement, BaseType> = BaseType & Omit<HTMLAttributes<ElementType>, keyof BaseType> & DataAttributes;
+export type WithHTMLAttributes<ElementType extends HTMLElement, BaseType, ExtendType = HTMLAttributes<ElementType>> = BaseType & Omit<ExtendType, keyof BaseType> & DataAttributes;
 export type DeepPartial<T> = T extends object ? {
     [P in keyof T]?: DeepPartial<T[P]>;
 } : T;

package/dist/types/types.js

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

package/dist/useBreakpoint/useBreakpoint.js

@@ -1,6 +1,5 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from 'react';
-var BREAKPOINTS = {
+import React from "react";
+const BREAKPOINTS = {
   xxl: {
     max: Infinity,
     min: 1601,
@@ -32,41 +31,43 @@ var BREAKPOINTS = {
     columns: 4
   }
 };
-export var useBreakpoint = function useBreakpoint() {
-  var _React$useState = React.useState({
-      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) {
+const useBreakpoint = () => {
+  const [dimensions, setDimensions] = React.useState({
+    width: 0,
+    height: 0
+  });
+  const updateBreakPoint = React.useMemo(() => {
+    const {
+      width
+    } = dimensions;
+    const breakpointKey = Object.keys(BREAKPOINTS).filter((key) => {
       return BREAKPOINTS[key].min <= width && BREAKPOINTS[key].max >= width;
     })[0];
     return {
-      breakpoint: _extends({}, BREAKPOINTS[breakpointKey], {
+      breakpoint: {
+        ...BREAKPOINTS[breakpointKey],
         name: breakpointKey
-      }),
-      dimensions: dimensions
+      },
+      dimensions
     };
   }, [dimensions]);
-  React.useEffect(function () {
-    var getDimensions = function getDimensions() {
-      return {
-        width: window.innerWidth,
-        height: window.innerHeight
-      };
-    };
-    var handleResize = function handleResize() {
+  React.useEffect(() => {
+    const getDimensions = () => ({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+    const handleResize = () => {
       setDimensions(getDimensions());
     };
     setDimensions(getDimensions());
-    window.addEventListener('resize', handleResize);
-    return function () {
-      window.removeEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
     };
   }, [setDimensions]);
   return updateBreakPoint;
 };
-export default useBreakpoint;
+export {
+  useBreakpoint as default,
+  useBreakpoint
+};

package/dist/useCombinedRefs/useCombinedRefs.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import { default as React } from 'react';
 declare const useCombinedRefs: <T>(...refs: React.Ref<T | null>[]) => React.MutableRefObject<T | null>;
 export default useCombinedRefs;

package/dist/useCombinedRefs/useCombinedRefs.js

@@ -1,15 +1,12 @@
-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) {
+import React from "react";
+const useCombinedRefs = (...refs) => {
+  const targetRef = React.useRef(null);
+  React.useEffect(() => {
+    refs.forEach((ref) => {
       if (!ref) {
         return;
       }
-      if (typeof ref === 'function') {
+      if (typeof ref === "function") {
         ref(targetRef.current);
       } else {
         ref.current = targetRef.current;
@@ -18,4 +15,6 @@ var useCombinedRefs = function useCombinedRefs() {
   }, [refs]);
   return targetRef;
 };
-export default useCombinedRefs;
+export {
+  useCombinedRefs as default
+};