@synerise/ds-utils 0.25.0 → 0.26.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.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)
 
 

package/dist/index.d.ts

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

package/dist/index.js

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

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-utils",
-  "version": "0.25.0",
+  "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": "6b8da853a2bb4e993d89e9b0b3041216f0c9c976"
+  "gitHead": "2df913352aa96e8aed75894489afb3a4ee303370"
 }