@synerise/ds-utils 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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
+
+- **utils:** sticky sidebar util ([68714d7](https://github.com/synerise/synerise-design/commit/68714d7414839dc15c560ade6f5c0cece3edd1d5))
+
 # [1.6.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-utils@1.5.4...@synerise/ds-utils@1.6.0) (2026-02-05)
 
 ### Features

package/README.md

@@ -5,13 +5,29 @@ List of utils:
 
 - doubleClickListener,
 - focusWithArrowKeys,
-- getInitials,
-- escapeRegex,
+- getInitials (not exported from package index),
+- escapeRegEx,
+- hexToRgba,
+- omitKeys,
+- renderWithHighlight,
 - selectColorByLetter,
-- testing tools,
 - toCamelCase,
+- getPopupContainer,
+- NOOP,
 - useBreakpoint,
+- useCombinedRefs,
+- useDelimiterEscape,
+- useElementInView,
+- useIsMounted,
+- useKeyboardShortcuts,
+- useLatestRef,
 - useOnClickOutside,
+- useOverscrollBlock,
+- usePrevious,
 - useResize,
 - useResizeObserver,
-- useResizeToFit.
+- useResizeToFit,
+- useScrollContain,
+- useSearchResults,
+- useStableId,
+- useTraceUpdate.

package/dist/index.d.ts

@@ -17,6 +17,7 @@ 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';

package/dist/index.js

@@ -17,6 +17,7 @@ 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';

package/dist/useStickyScroll/useStickyScroll.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+interface UseStickyScrollOptions {
+    scrollContainerRef: RefObject<HTMLElement>;
+    offsetTop?: number;
+    offsetBottom?: number;
+}
+export declare const useStickyScroll: ({ scrollContainerRef, offsetTop, offsetBottom, }: UseStickyScrollOptions) => RefObject<HTMLDivElement>;
+export {};

package/dist/useStickyScroll/useStickyScroll.js

@@ -0,0 +1,59 @@
+import { useEffect, useRef } from 'react';
+export var useStickyScroll = function useStickyScroll(_ref) {
+  var scrollContainerRef = _ref.scrollContainerRef,
+    _ref$offsetTop = _ref.offsetTop,
+    offsetTop = _ref$offsetTop === void 0 ? 0 : _ref$offsetTop,
+    _ref$offsetBottom = _ref.offsetBottom,
+    offsetBottom = _ref$offsetBottom === void 0 ? 0 : _ref$offsetBottom;
+  var stickyRef = useRef(null);
+  var lastScrollTop = useRef(0);
+  var topValue = useRef(0);
+  useEffect(function () {
+    var container = scrollContainerRef.current;
+    var sticky = stickyRef.current;
+    if (!container || !sticky) {
+      return;
+    }
+    var containerStyle = getComputedStyle(container);
+    var paddingTop = parseFloat(containerStyle.paddingTop);
+    var paddingBottom = parseFloat(containerStyle.paddingBottom);
+    var stickyOriginTop = sticky.offsetTop - paddingTop;
+    sticky.style.position = 'sticky';
+    sticky.style.top = offsetTop + "px";
+    topValue.current = offsetTop;
+    lastScrollTop.current = container.scrollTop;
+    var onScroll = function onScroll() {
+      var scrollTop = container.scrollTop;
+      var delta = scrollTop - lastScrollTop.current;
+      if (delta === 0) {
+        return;
+      }
+      var engaged = scrollTop >= stickyOriginTop - offsetTop;
+      if (!engaged) {
+        topValue.current = offsetTop;
+        sticky.style.top = topValue.current + "px";
+        lastScrollTop.current = scrollTop;
+        return;
+      }
+      var visibleHeight = container.clientHeight - paddingTop - paddingBottom;
+      var stickyHeight = sticky.offsetHeight;
+      if (stickyHeight <= visibleHeight - offsetTop - offsetBottom) {
+        topValue.current = offsetTop;
+      } else if (delta > 0) {
+        var minTop = visibleHeight - stickyHeight - offsetBottom;
+        topValue.current = Math.max(topValue.current - delta, minTop);
+      } else {
+        topValue.current = Math.min(topValue.current - delta, offsetTop);
+      }
+      sticky.style.top = topValue.current + "px";
+      lastScrollTop.current = scrollTop;
+    };
+    container.addEventListener('scroll', onScroll, {
+      passive: true
+    });
+    return function () {
+      return container.removeEventListener('scroll', onScroll);
+    };
+  }, [scrollContainerRef, offsetTop, offsetBottom]);
+  return stickyRef;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-utils",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Utils UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -42,5 +42,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "ac8decd9736940735bf05198b24b3eeeb5900b18"
+  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
 }