@itwin/itwinui-react 3.11.2 → 3.12.0

package/cjs/utils/components/Resizer.js

@@ -1,203 +1,254 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Resizer = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const index_js_1 = require("../functions/index.js");
-/**
- * Component that allows to resize parent element.
- * Parent must have `position: relative`.
- *
- * Ideally should be used within a shadow root.
- * @private
- * @example
- * const ref = React.useRef<HTMLDivElement>(null);
- * return (
- *   <div ref={ref} style={{ position: 'relative' }}>
- *     <Resizer elementRef={ref} />
- *   </div>
- * );
- */
+Object.defineProperty(exports, 'Resizer', {
+  enumerable: true,
+  get: function () {
+    return Resizer;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _jsxruntime = require('react/jsx-runtime');
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../functions/index.js');
 const Resizer = (props) => {
-    return (React.createElement("div", { style: {
-            position: 'absolute',
-            inset: -6,
-            display: 'grid',
-            pointerEvents: 'none',
-        } },
-        React.createElement(ResizerStyles, null),
-        React.createElement(Resizers, { ...props })));
+  return (0, _jsxruntime.jsxs)('div', {
+    style: {
+      position: 'absolute',
+      inset: -6,
+      display: 'grid',
+      pointerEvents: 'none',
+    },
+    children: [
+      (0, _jsxruntime.jsx)(ResizerStyles, {}),
+      (0, _jsxruntime.jsx)(Resizers, {
+        ...props,
+      }),
+    ],
+  });
 };
-exports.Resizer = Resizer;
 const Resizers = (props) => {
-    const { elementRef, containerRef, onResizeStart, onResizeEnd } = props;
-    const isResizing = React.useRef(false);
-    const onResizePointerDown = (event) => {
-        if (!elementRef.current || event.button !== 0) {
-            return;
+  const { elementRef, containerRef, onResizeStart, onResizeEnd } = props;
+  const isResizing = _react.useRef(false);
+  const onResizePointerDown = (event) => {
+    if (!elementRef.current || event.button !== 0) {
+      return;
+    }
+    const initialPointerX = event.clientX;
+    const initialPointerY = event.clientY;
+    const [initialTranslateX, initialTranslateY] = (0,
+    _index.getTranslateValuesFromElement)(elementRef.current);
+    const { width: initialWidth, height: initialHeight } =
+      elementRef.current.getBoundingClientRect();
+    let width = `${initialWidth}px`;
+    let height = `${initialHeight}px`;
+    let translateX = initialTranslateX;
+    let translateY = initialTranslateY;
+    let minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
+    if (Number.isNaN(minWidth)) {
+      minWidth = 380;
+    }
+    const minHeight = parseFloat(
+      getComputedStyle(elementRef.current).minHeight,
+    );
+    const resizer = event.currentTarget.dataset.iuiResizer;
+    const ownerDocument = elementRef.current.ownerDocument || document;
+    const originalUserSelect = ownerDocument.body.style.userSelect;
+    ownerDocument.body.style.userSelect = 'none';
+    const onResizePointerMove = (event) => {
+      if (!elementRef.current) {
+        return;
+      }
+      if (!isResizing.current) {
+        isResizing.current = true;
+        onResizeStart?.();
+      }
+      const containerRect = containerRef?.current?.getBoundingClientRect();
+      const clientX = (0, _index.getBoundedValue)(
+        event.clientX,
+        containerRect?.left ?? 0,
+        containerRect?.right ?? ownerDocument.documentElement.clientWidth ?? 0,
+      );
+      const clientY = (0, _index.getBoundedValue)(
+        event.clientY,
+        containerRect?.top ?? 0,
+        containerRect?.bottom ??
+          ownerDocument.documentElement.clientHeight ??
+          0,
+      );
+      const diffX = initialPointerX - clientX;
+      const diffY = initialPointerY - clientY;
+      switch (resizer) {
+        case 'top-left': {
+          const newHeight = initialHeight + diffY;
+          if (newHeight >= minHeight) {
+            height = elementRef.current.style.height = `${newHeight}px`;
+            translateY = initialTranslateY - diffY;
+          }
+          const newWidth = initialWidth + diffX;
+          if (newWidth >= minWidth) {
+            width = elementRef.current.style.width = `${newWidth}px`;
+            translateX = initialTranslateX - diffX;
+          }
+          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+          break;
+        }
+        case 'top': {
+          const newHeight = initialHeight + diffY;
+          if (newHeight < minHeight) {
+            break;
+          }
+          height = elementRef.current.style.height = `${newHeight}px`;
+          translateY = initialTranslateY - diffY;
+          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+          break;
         }
-        const initialPointerX = event.clientX;
-        const initialPointerY = event.clientY;
-        const [initialTranslateX, initialTranslateY] = (0, index_js_1.getTranslateValuesFromElement)(elementRef.current);
-        const { width: initialWidth, height: initialHeight } = elementRef.current.getBoundingClientRect();
-        let width = `${initialWidth}px`;
-        let height = `${initialHeight}px`;
-        let translateX = initialTranslateX;
-        let translateY = initialTranslateY;
-        let minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
-        if (Number.isNaN(minWidth)) {
-            minWidth = 380;
+        case 'top-right': {
+          const newHeight = initialHeight + diffY;
+          if (newHeight >= minHeight) {
+            height = elementRef.current.style.height = `${newHeight}px`;
+            translateY = initialTranslateY - diffY;
+          }
+          width = elementRef.current.style.width = `${initialWidth - diffX}px`;
+          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+          break;
         }
-        const minHeight = parseFloat(getComputedStyle(elementRef.current).minHeight);
-        const resizer = event.currentTarget.dataset.iuiResizer;
-        const ownerDocument = elementRef.current.ownerDocument || document;
-        const originalUserSelect = ownerDocument.body.style.userSelect;
-        ownerDocument.body.style.userSelect = 'none';
-        const onResizePointerMove = (event) => {
-            if (!elementRef.current) {
-                return;
-            }
-            if (!isResizing.current) {
-                isResizing.current = true;
-                onResizeStart?.();
-            }
-            const containerRect = containerRef?.current?.getBoundingClientRect();
-            const clientX = (0, index_js_1.getBoundedValue)(event.clientX, containerRect?.left ?? 0, containerRect?.right ?? ownerDocument.documentElement.clientWidth ?? 0);
-            const clientY = (0, index_js_1.getBoundedValue)(event.clientY, containerRect?.top ?? 0, containerRect?.bottom ??
-                ownerDocument.documentElement.clientHeight ??
-                0);
-            const diffX = initialPointerX - clientX;
-            const diffY = initialPointerY - clientY;
-            switch (resizer) {
-                case 'top-left': {
-                    const newHeight = initialHeight + diffY;
-                    if (newHeight >= minHeight) {
-                        height = elementRef.current.style.height = `${newHeight}px`;
-                        translateY = initialTranslateY - diffY;
-                    }
-                    const newWidth = initialWidth + diffX;
-                    if (newWidth >= minWidth) {
-                        width = elementRef.current.style.width = `${newWidth}px`;
-                        translateX = initialTranslateX - diffX;
-                    }
-                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-                    break;
-                }
-                case 'top': {
-                    const newHeight = initialHeight + diffY;
-                    if (newHeight < minHeight) {
-                        break;
-                    }
-                    height = elementRef.current.style.height = `${newHeight}px`;
-                    translateY = initialTranslateY - diffY;
-                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-                    break;
-                }
-                case 'top-right': {
-                    const newHeight = initialHeight + diffY;
-                    if (newHeight >= minHeight) {
-                        height = elementRef.current.style.height = `${newHeight}px`;
-                        translateY = initialTranslateY - diffY;
-                    }
-                    width = elementRef.current.style.width = `${initialWidth - diffX}px`;
-                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-                    break;
-                }
-                case 'right': {
-                    width = elementRef.current.style.width = `${initialWidth - diffX}px`;
-                    height = elementRef.current.style.height = `${initialHeight}px`;
-                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-                    break;
-                }
-                case 'bottom-right': {
-                    width = elementRef.current.style.width = `${initialWidth - diffX}px`;
-                    height = elementRef.current.style.height = `${initialHeight - diffY}px`;
-                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-                    break;
-                }
-                case 'bottom': {
-                    height = elementRef.current.style.height = `${initialHeight - diffY}px`;
-                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-                    break;
-                }
-                case 'bottom-left': {
-                    const newWidth = initialWidth + diffX;
-                    if (newWidth >= minWidth) {
-                        width = elementRef.current.style.width = `${newWidth}px`;
-                        translateX = initialTranslateX - diffX;
-                    }
-                    height = elementRef.current.style.height = `${initialHeight - diffY}px`;
-                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-                    break;
-                }
-                case 'left': {
-                    const newWidth = initialWidth + diffX;
-                    if (newWidth < minWidth) {
-                        break;
-                    }
-                    width = elementRef.current.style.width = `${newWidth}px`;
-                    height = elementRef.current.style.height = `${initialHeight}px`;
-                    translateX = initialTranslateX - diffX;
-                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
-                    break;
-                }
-                default:
-                    break;
-            }
-        };
-        ownerDocument.addEventListener('pointermove', onResizePointerMove);
-        ownerDocument.addEventListener('pointerup', () => {
-            ownerDocument.removeEventListener('pointermove', onResizePointerMove);
-            if (elementRef.current) {
-                ownerDocument.body.style.userSelect = originalUserSelect;
-                isResizing.current = false;
-                onResizeEnd?.({
-                    width,
-                    height,
-                    transform: `translate(${translateX}px, ${translateY}px)`,
-                });
-            }
-        }, { once: true });
+        case 'right': {
+          width = elementRef.current.style.width = `${initialWidth - diffX}px`;
+          height = elementRef.current.style.height = `${initialHeight}px`;
+          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+          break;
+        }
+        case 'bottom-right': {
+          width = elementRef.current.style.width = `${initialWidth - diffX}px`;
+          height = elementRef.current.style.height = `${
+            initialHeight - diffY
+          }px`;
+          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+          break;
+        }
+        case 'bottom': {
+          height = elementRef.current.style.height = `${
+            initialHeight - diffY
+          }px`;
+          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+          break;
+        }
+        case 'bottom-left': {
+          const newWidth = initialWidth + diffX;
+          if (newWidth >= minWidth) {
+            width = elementRef.current.style.width = `${newWidth}px`;
+            translateX = initialTranslateX - diffX;
+          }
+          height = elementRef.current.style.height = `${
+            initialHeight - diffY
+          }px`;
+          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+          break;
+        }
+        case 'left': {
+          const newWidth = initialWidth + diffX;
+          if (newWidth < minWidth) {
+            break;
+          }
+          width = elementRef.current.style.width = `${newWidth}px`;
+          height = elementRef.current.style.height = `${initialHeight}px`;
+          translateX = initialTranslateX - diffX;
+          elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
+          break;
+        }
+        default:
+          break;
+      }
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { "data-iui-resizer": 'top-left', onPointerDown: onResizePointerDown, style: { cursor: 'nw-resize' } }),
-        React.createElement("div", { "data-iui-resizer": 'top', onPointerDown: onResizePointerDown, style: { cursor: 'n-resize' } }),
-        React.createElement("div", { "data-iui-resizer": 'top-right', onPointerDown: onResizePointerDown, style: { cursor: 'ne-resize' } }),
-        React.createElement("div", { "data-iui-resizer": 'right', onPointerDown: onResizePointerDown, style: { cursor: 'e-resize' } }),
-        React.createElement("div", { "data-iui-resizer": 'bottom-right', onPointerDown: onResizePointerDown, style: { cursor: 'se-resize' } }),
-        React.createElement("div", { "data-iui-resizer": 'bottom', onPointerDown: onResizePointerDown, style: { cursor: 's-resize' } }),
-        React.createElement("div", { "data-iui-resizer": 'bottom-left', onPointerDown: onResizePointerDown, style: { cursor: 'sw-resize' } }),
-        React.createElement("div", { "data-iui-resizer": 'left', onPointerDown: onResizePointerDown, style: { cursor: 'w-resize' } })));
+    ownerDocument.addEventListener('pointermove', onResizePointerMove);
+    ownerDocument.addEventListener(
+      'pointerup',
+      () => {
+        ownerDocument.removeEventListener('pointermove', onResizePointerMove);
+        if (elementRef.current) {
+          ownerDocument.body.style.userSelect = originalUserSelect;
+          isResizing.current = false;
+          onResizeEnd?.({
+            width,
+            height,
+            transform: `translate(${translateX}px, ${translateY}px)`,
+          });
+        }
+      },
+      {
+        once: true,
+      },
+    );
+  };
+  return (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    children: [
+      (0, _jsxruntime.jsx)('div', {
+        'data-iui-resizer': 'top-left',
+        onPointerDown: onResizePointerDown,
+        style: {
+          cursor: 'nw-resize',
+        },
+      }),
+      (0, _jsxruntime.jsx)('div', {
+        'data-iui-resizer': 'top',
+        onPointerDown: onResizePointerDown,
+        style: {
+          cursor: 'n-resize',
+        },
+      }),
+      (0, _jsxruntime.jsx)('div', {
+        'data-iui-resizer': 'top-right',
+        onPointerDown: onResizePointerDown,
+        style: {
+          cursor: 'ne-resize',
+        },
+      }),
+      (0, _jsxruntime.jsx)('div', {
+        'data-iui-resizer': 'right',
+        onPointerDown: onResizePointerDown,
+        style: {
+          cursor: 'e-resize',
+        },
+      }),
+      (0, _jsxruntime.jsx)('div', {
+        'data-iui-resizer': 'bottom-right',
+        onPointerDown: onResizePointerDown,
+        style: {
+          cursor: 'se-resize',
+        },
+      }),
+      (0, _jsxruntime.jsx)('div', {
+        'data-iui-resizer': 'bottom',
+        onPointerDown: onResizePointerDown,
+        style: {
+          cursor: 's-resize',
+        },
+      }),
+      (0, _jsxruntime.jsx)('div', {
+        'data-iui-resizer': 'bottom-left',
+        onPointerDown: onResizePointerDown,
+        style: {
+          cursor: 'sw-resize',
+        },
+      }),
+      (0, _jsxruntime.jsx)('div', {
+        'data-iui-resizer': 'left',
+        onPointerDown: onResizePointerDown,
+        style: {
+          cursor: 'w-resize',
+        },
+      }),
+    ],
+  });
 };
-// ----------------------------------------------------------------------------
-const ResizerStyles = React.memo(() => React.createElement("style", null, resizerStyles));
-const resizerStyles = /* css */ `
+const ResizerStyles = _react.memo(() =>
+  (0, _jsxruntime.jsx)('style', {
+    children: resizerStyles,
+  }),
+);
+const resizerStyles = `
 [data-iui-resizer] {
   pointer-events: auto;
   grid-area: 1 / 1 / -1 / -1;

package/cjs/utils/components/ShadowRoot.d.ts

@@ -9,5 +9,5 @@ type ShadowRootProps = {
  *
  * @private
  */
-export declare const ShadowRoot: ({ children, css }: ShadowRootProps) => React.JSX.Element | null;
+export declare const ShadowRoot: ({ children, css }: ShadowRootProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};