@itwin/itwinui-react 1.44.0 → 1.46.0

package/esm/core/utils/hooks/useDragAndDrop.js

@@ -0,0 +1,103 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { getTranslateValues, getWindow } from '../functions';
+import { useEventListener } from './useEventListener';
+import { useResizeObserver } from './useResizeObserver';
+var getContainerRect = function (containerRef) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var containerRect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    return {
+        top: (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _b !== void 0 ? _b : 0,
+        right: (_e = (_c = containerRect === null || containerRect === void 0 ? void 0 : containerRect.right) !== null && _c !== void 0 ? _c : (_d = getWindow()) === null || _d === void 0 ? void 0 : _d.innerWidth) !== null && _e !== void 0 ? _e : 0,
+        bottom: (_h = (_f = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _f !== void 0 ? _f : (_g = getWindow()) === null || _g === void 0 ? void 0 : _g.innerHeight) !== null && _h !== void 0 ? _h : 0,
+        left: (_j = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _j !== void 0 ? _j : 0,
+    };
+};
+/**
+ * Helper hook that handles elements drag logic.
+ * @param elementRef Element ref that is draggable.
+ * @param containerRect Bounding rectangle of container element that element can't go outside. If not passed window is used as a container.
+ * @returns
+ * `onPointerDown` - handler that is called when pointer is down and handles all the dragging logic.
+ * `transform` - current transform of the element, it is used to preserve drag position when element visibility is being toggled.
+ */
+export var useDragAndDrop = function (elementRef, containerRef, enabled) {
+    if (enabled === void 0) { enabled = true; }
+    var grabOffsetX = React.useRef(0);
+    var grabOffsetY = React.useRef(0);
+    var translateX = React.useRef();
+    var translateY = React.useRef();
+    var containerRectRef = React.useRef(getContainerRect(containerRef));
+    var adjustTransform = React.useCallback(function () {
+        var _a;
+        if (!elementRef.current || !enabled) {
+            return;
+        }
+        var _b = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(), top = _b.top, right = _b.right, bottom = _b.bottom, left = _b.left;
+        var _c = getTranslateValues(elementRef.current), newTranslateX = _c[0], newTranslateY = _c[1];
+        containerRectRef.current = getContainerRect(containerRef);
+        if (bottom > containerRectRef.current.bottom) {
+            newTranslateY -= bottom - containerRectRef.current.bottom;
+        }
+        if (top < containerRectRef.current.top) {
+            newTranslateY += containerRectRef.current.top - top;
+        }
+        if (right > containerRectRef.current.right) {
+            newTranslateX -= right - containerRectRef.current.right;
+        }
+        if (left < containerRectRef.current.left) {
+            newTranslateX += containerRectRef.current.left - left;
+        }
+        translateX.current = newTranslateX;
+        translateY.current = newTranslateY;
+        elementRef.current.style.transform = "translate(".concat(newTranslateX, "px, ").concat(newTranslateY, "px)");
+    }, [containerRef, elementRef, enabled]);
+    var _a = useResizeObserver(adjustTransform), resizeRef = _a[0], resizeObserver = _a[1];
+    resizeRef(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current);
+    React.useEffect(function () {
+        return function () {
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+        };
+    }, [resizeObserver]);
+    useEventListener('resize', function () {
+        adjustTransform();
+        if (translateX.current != null && translateY.current != null) {
+            setTransform("translate(".concat(translateX.current, "px, ").concat(translateY.current, "px)"));
+        }
+    }, getWindow());
+    var _b = React.useState(''), transform = _b[0], setTransform = _b[1];
+    var onPointerMove = React.useRef(function (event) {
+        if (!elementRef.current) {
+            return;
+        }
+        var newTranslateX = event.clientX - grabOffsetX.current;
+        var newTranslateY = event.clientY - grabOffsetY.current;
+        elementRef.current.style.transform = "translate(".concat(newTranslateX, "px, ").concat(newTranslateY, "px)");
+        adjustTransform();
+    });
+    var originalUserSelect = React.useRef('');
+    var onPointerDown = React.useCallback(function (e) {
+        if (!elementRef.current || e.button !== 0 || !enabled) {
+            return;
+        }
+        var _a = getTranslateValues(elementRef.current), x = _a[0], y = _a[1];
+        grabOffsetX.current = e.clientX - x;
+        grabOffsetY.current = e.clientY - y;
+        originalUserSelect.current = elementRef.current.style.userSelect;
+        // Prevents from selecting inner content when dragging.
+        elementRef.current.style.userSelect = 'none';
+        elementRef.current.ownerDocument.addEventListener('pointermove', onPointerMove.current);
+        elementRef.current.ownerDocument.addEventListener('pointerup', function () {
+            setTransform("translate(".concat(translateX.current, "px, ").concat(translateY.current, "px)"));
+            document.removeEventListener('pointermove', onPointerMove.current);
+            if (elementRef.current) {
+                elementRef.current.style.userSelect = originalUserSelect.current;
+            }
+        }, { once: true });
+    }, [elementRef, enabled]);
+    return { onPointerDown: onPointerDown, transform: transform };
+};
+export default useDragAndDrop;

package/esm/core/utils/hooks/useEventListener.d.ts

@@ -7,4 +7,4 @@
  *     containerRef.current?.ownerDocument,
  *  );
  */
-export declare const useEventListener: (eventName: string, handler: (event: Event) => void, element: HTMLElement | Document | undefined) => void;
+export declare const useEventListener: (eventName: string, handler: (event: Event) => void, element: HTMLElement | Document | Window | undefined) => void;

package/esm/core/utils/hooks/useOverflow.d.ts

@@ -21,4 +21,4 @@ import React from 'react';
  *   </div>
  * );
  */
-export declare const useOverflow: <T extends HTMLElement>(items: React.ReactNode[] | string, disabled?: boolean, orientation?: 'horizontal' | 'vertical') => readonly [(instance: T | null) => void, number];
+export declare const useOverflow: <T extends HTMLElement>(items: React.ReactNode[] | string, disabled?: boolean, orientation?: 'horizontal' | 'vertical') => readonly [(instance: T | null | undefined) => void, number];

package/esm/core/utils/hooks/useResizeObserver.d.ts

@@ -10,4 +10,4 @@
  * ...
  * return <div ref={ref}>...</div>;
  */
-export declare const useResizeObserver: <T extends HTMLElement>(onResize: (size: DOMRectReadOnly) => void) => readonly [(element: T | null) => void, ResizeObserver | undefined];
+export declare const useResizeObserver: <T extends HTMLElement>(onResize: (size: DOMRectReadOnly) => void) => readonly [(element: T | null | undefined) => void, ResizeObserver | undefined];

package/esm/types/react-table-config.d.ts

@@ -19,7 +19,7 @@ declare module 'react-table' {
          */
         isDisabled?: (rowData: D) => boolean;
     };
-    interface TableOptions<D extends object = {}> extends Omit<UseTableOptions<D>, 'data'>, UseRowSelectOptions<D>, UseExpandedOptions<D>, UseFiltersOptions<D>, UsePaginationOptions<D>, Omit<UseResizeColumnsOptions<D>, 'disableResizing'>, UseSortByOptions<D> {
+    interface TableOptions<D extends object = {}> extends Omit<UseTableOptions<D>, 'data'>, UseRowSelectOptions<D>, UseExpandedOptions<D>, UseFiltersOptions<D>, UsePaginationOptions<D>, UseGlobalFiltersOptions<D>, UseGlobalFiltersColumnOptions<D>, Omit<UseResizeColumnsOptions<D>, 'disableResizing'>, UseSortByOptions<D> {
         /**
          * Table data list.
          * Must be memoized.
@@ -50,6 +50,7 @@ declare module 'react-table' {
             isScrolledToRight?: boolean;
             isScrolledToLeft?: boolean;
         };
+        lastSelectedRowId?: string;
     }
     interface ColumnInterface<D extends object = {}> extends UseSortByColumnOptions<D>, UseFiltersColumnOptions<D>, UseResizeColumnsColumnOptions<D> {
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.44.0",
+  "version": "1.46.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",