@synerise/ds-utils 0.24.25 → 0.25.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.25.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-utils@0.24.26...@synerise/ds-utils@0.25.0) (2024-03-05)
+
+
+### Features
+
+* **input:** support autoresize to stretch to parent ([329c866](https://github.com/synerise/synerise-design/commit/329c866cb54921ad1260ae217cb8c471e43b986e))
+* **utils:** horizontal overscroll blocking hook ([5896100](https://github.com/synerise/synerise-design/commit/5896100d514a910fbdf6614dab5de12b4701cd36))
+
+
+
+
+
+## [0.24.26](https://github.com/synerise/synerise-design/compare/@synerise/ds-utils@0.24.25...@synerise/ds-utils@0.24.26) (2024-02-21)
+
+**Note:** Version bump only for package @synerise/ds-utils
+
+
+
+
+
 ## [0.24.25](https://github.com/synerise/synerise-design/compare/@synerise/ds-utils@0.24.24...@synerise/ds-utils@0.24.25) (2024-02-19)
 
 **Note:** Version bump only for package @synerise/ds-utils

package/dist/index.d.ts

@@ -9,6 +9,8 @@ export { default as useResize } from './useResize/useResize';
 export { default as useBreakpoint } from './useBreakpoint/useBreakpoint';
 export { default as useCombinedRefs } from './useCombinedRefs/useCombinedRefs';
 export { default as usePrevious } from './usePrevious/usePrevious';
+export { default as useOverscrollBlock } from './useOverscrollBlock/useOverscrollBlock';
+export { default as useResizeToFit } from './useResizeToFit/useResizeToFit';
 export * from './useTraceUpdate';
 export * from './getPopupContainer';
 export declare const NOOP: () => void;

package/dist/index.js

@@ -9,6 +9,8 @@ export { default as useResize } from './useResize/useResize';
 export { default as useBreakpoint } from './useBreakpoint/useBreakpoint';
 export { default as useCombinedRefs } from './useCombinedRefs/useCombinedRefs';
 export { default as usePrevious } from './usePrevious/usePrevious';
+export { default as useOverscrollBlock } from './useOverscrollBlock/useOverscrollBlock';
+export { default as useResizeToFit } from './useResizeToFit/useResizeToFit';
 export * from './useTraceUpdate';
 export * from './getPopupContainer';
 export var NOOP = function NOOP() {}; // eslint-disable-line @typescript-eslint/no-empty-function

package/dist/useOverscrollBlock/useOverscrollBlock.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const useOverscrollBlock: <T extends HTMLElement>() => import("react").MutableRefObject<T | undefined>;
+export default useOverscrollBlock;

package/dist/useOverscrollBlock/useOverscrollBlock.js

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+var useOverscrollBlock = function useOverscrollBlock() {
+  var ref = useRef();
+  var handleMouseEnter = useCallback(function () {
+    document.body.style.overscrollBehaviorX = 'contain';
+  }, []);
+  var handleMouseLeave = useCallback(function () {
+    document.body.style.removeProperty('overscroll-behavior-x');
+  }, []);
+  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/useResizeToFit/useResizeToFit.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+type useResizeToFitProps = {
+    onResize: (width: number) => void;
+    autoObserve?: boolean;
+};
+declare const useResizeToFit: <T extends HTMLElement = HTMLDivElement>({ onResize, autoObserve }: useResizeToFitProps) => {
+    elementRef: import("react").RefObject<T>;
+    disconnect: () => void;
+    observe: () => void;
+};
+export default useResizeToFit;

package/dist/useResizeToFit/useResizeToFit.js

@@ -0,0 +1,38 @@
+import { useEffect, useRef, useCallback } from 'react';
+
+var useResizeToFit = function useResizeToFit(_ref) {
+  var onResize = _ref.onResize,
+      autoObserve = _ref.autoObserve;
+  var elementRef = useRef(null);
+  var resizeObserver = useRef(new window.ResizeObserver(function () {
+    if (elementRef.current) {
+      onResize(elementRef.current.clientWidth);
+    }
+  })).current;
+  var observe = useCallback(function () {
+    elementRef.current && resizeObserver.observe(elementRef.current);
+  }, [resizeObserver]);
+  var disconnect = useCallback(function () {
+    resizeObserver.disconnect();
+  }, [resizeObserver]);
+  useEffect(function () {
+    if (elementRef.current) {
+      if (autoObserve) {
+        observe();
+      } else {
+        disconnect();
+      }
+    }
+
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, [resizeObserver, autoObserve, elementRef, observe, disconnect]);
+  return {
+    elementRef: elementRef,
+    disconnect: disconnect,
+    observe: observe
+  };
+};
+
+export default useResizeToFit;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-utils",
-  "version": "0.24.25",
+  "version": "0.25.0",
   "description": "Utils UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -41,8 +41,8 @@
     "styled-components": "5.0.1"
   },
   "devDependencies": {
-    "@synerise/ds-core": "^0.40.11",
+    "@synerise/ds-core": "^0.40.12",
     "@testing-library/react": "10.0.1"
   },
-  "gitHead": "cddb99e7a7cf30926aa46cf772a17d6803ff62cf"
+  "gitHead": "6b8da853a2bb4e993d89e9b0b3041216f0c9c976"
 }