@synerise/ds-utils 0.24.26 → 0.26.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.26.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-utils@0.25.0...@synerise/ds-utils@0.26.0) (2024-03-20)
+
+
+### Features
+
+* **table:** sticky virtualised table ([4733821](https://github.com/synerise/synerise-design/commit/47338215ed6355a90edf7350e6002c96c9f83809))
+
+
+
+
+
+# [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

package/dist/index.d.ts

@@ -9,6 +9,9 @@ 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 useElementInView } from './useElementInView/useElementInView';
+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,9 @@ 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 useElementInView } from './useElementInView/useElementInView';
+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/useElementInView/useElementInView.d.ts

@@ -0,0 +1,10 @@
+import { MutableRefObject } from 'react';
+type IntersectionObserverOptions = {
+    rootMargin?: string;
+    threshold?: number | number[];
+};
+declare const useElementInView: <T extends HTMLElement = HTMLElement>(options: IntersectionObserverOptions, rootElementRef?: MutableRefObject<HTMLDivElement | null | undefined>) => {
+    elementRef: MutableRefObject<T | undefined>;
+    isVisible: boolean;
+};
+export default useElementInView;

package/dist/useElementInView/useElementInView.js

@@ -0,0 +1,38 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { useEffect, useRef, useState } from 'react';
+
+var useElementInView = function useElementInView(options, rootElementRef) {
+  var elementRef = useRef();
+
+  var _useState = useState(false),
+      isVisible = _useState[0],
+      setIsVisible = _useState[1];
+
+  useEffect(function () {
+    var intersectionObserver = new window.IntersectionObserver(function (_ref) {
+      var entry = _ref[0];
+      setIsVisible(entry.isIntersecting);
+    }, _objectSpread({}, options, {
+      root: (rootElementRef == null ? void 0 : rootElementRef.current) || null
+    }));
+
+    if (elementRef.current) {
+      intersectionObserver.observe(elementRef.current);
+    }
+
+    return function () {
+      intersectionObserver.disconnect();
+    };
+  });
+  return {
+    elementRef: elementRef,
+    isVisible: isVisible
+  };
+};
+
+export default useElementInView;

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/useResize/useResize.d.ts

@@ -3,5 +3,5 @@ type Dimensions = {
     width: number;
     height: number;
 };
-declare const useResize: (componentRef: React.RefObject<any>, visible?: boolean) => Dimensions;
+declare const useResize: (componentRef?: React.RefObject<any>, visible?: boolean) => Dimensions;
 export default useResize;

package/dist/useResize/useResize.js

@@ -16,8 +16,8 @@ var useResize = function useResize(componentRef, visible) {
   React.useEffect(function () {
     var getDimensions = function getDimensions() {
       return {
-        width: componentRef.current.offsetWidth,
-        height: componentRef.current.offsetHeight
+        width: (componentRef == null ? void 0 : componentRef.current.offsetWidth) || 0,
+        height: (componentRef == null ? void 0 : componentRef.current.offsetHeight) || 0
       };
     };
 
@@ -25,7 +25,7 @@ var useResize = function useResize(componentRef, visible) {
       setDimensions(getDimensions());
     };
 
-    if (componentRef.current) {
+    if (componentRef != null && componentRef.current) {
       setDimensions(getDimensions());
     }
 

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.26",
+  "version": "0.26.0",
   "description": "Utils UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -44,5 +44,5 @@
     "@synerise/ds-core": "^0.40.12",
     "@testing-library/react": "10.0.1"
   },
-  "gitHead": "673df74b628304300c09f0d7e26279b5901cd925"
+  "gitHead": "2df913352aa96e8aed75894489afb3a4ee303370"
 }