@itwin/itwinui-react 3.0.0-dev.1 → 3.0.0-dev.11

package/cjs/core/utils/components/Portal.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+export type PortalProps = {
+    /**
+     * Where should the element be portaled to?
+     *
+     * If true, it will portal into nearest ThemeContext.portalContainer.
+     *
+     * If false, it will not be portaled.
+     *
+     * Otherwise, it will portal to the element passed to `to`.
+     *
+     * @default true
+     */
+    portal?: boolean | {
+        to: HTMLElement | (() => HTMLElement);
+    };
+};
+/**
+ * Helper component that portals children according to the following conditions:
+ *   - renders null on server
+ *   - if `portal` is set to true, renders into nearest ThemeContext.portalContainer
+ *   - if `portal` is set to false, renders as-is without portal
+ *   - otherwise renders into `portal.to` (can be an element or a function)
+ *
+ * @private
+ */
+export declare const Portal: (props: React.PropsWithChildren<PortalProps>) => React.ReactNode;

package/cjs/core/utils/components/Portal.js

@@ -0,0 +1,43 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.Portal = void 0;
+const tslib_1 = require('tslib');
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const React = tslib_1.__importStar(require('react'));
+const ReactDOM = tslib_1.__importStar(require('react-dom'));
+const ThemeContext_js_1 = require('../../ThemeProvider/ThemeContext.js');
+const dom_js_1 = require('../functions/dom.js');
+const useIsClient_js_1 = require('../hooks/useIsClient.js');
+// ----------------------------------------------------------------------------
+/**
+ * Helper component that portals children according to the following conditions:
+ *   - renders null on server
+ *   - if `portal` is set to true, renders into nearest ThemeContext.portalContainer
+ *   - if `portal` is set to false, renders as-is without portal
+ *   - otherwise renders into `portal.to` (can be an element or a function)
+ *
+ * @private
+ */
+const Portal = (props) => {
+  const { portal = true, children } = props;
+  const isClient = (0, useIsClient_js_1.useIsClient)();
+  const portalTo = usePortalTo(portal);
+  if (!isClient) {
+    return null;
+  }
+  return portalTo ? ReactDOM.createPortal(children, portalTo) : children;
+};
+exports.Portal = Portal;
+// ----------------------------------------------------------------------------
+const usePortalTo = (portal) => {
+  const themeInfo = React.useContext(ThemeContext_js_1.ThemeContext);
+  if (typeof portal === 'boolean') {
+    return portal
+      ? themeInfo?.portalContainer ?? (0, dom_js_1.getDocument)()?.body
+      : null;
+  }
+  return typeof portal.to === 'function' ? portal.to() : portal.to;
+};

package/cjs/core/utils/components/Resizer.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare type ResizerProps = {
+export type ResizerProps = {
     /**
      * Ref of the element that is being resized.
      */
@@ -32,5 +32,5 @@ export declare type ResizerProps = {
  *   </div>
  * );
  */
-export declare const Resizer: (props: ResizerProps) => JSX.Element;
+export declare const Resizer: (props: ResizerProps) => React.JSX.Element;
 export default Resizer;

package/cjs/core/utils/components/Resizer.js

@@ -1,35 +1,13 @@
-"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;
-});
-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 });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Resizer = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * 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");
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../functions/index.js');
 /**
  * Component that allows to resize parent element.
  * Parent must have `position: relative`.
@@ -43,191 +21,257 @@ const index_js_1 = require("../functions/index.js");
  * );
  */
 const Resizer = (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_js_1.getTranslateValues)(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_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;
         }
-        const initialPointerX = event.clientX;
-        const initialPointerY = event.clientY;
-        const [initialTranslateX, initialTranslateY] = (0, index_js_1.getTranslateValues)(elementRef.current);
-        const { width: initialWidth, height: initialHeight } = elementRef.current.getBoundingClientRect();
-        let width = `${initialWidth}px`;
-        let height = `${initialHeight}px`;
-        let translateX = initialTranslateX;
-        let translateY = initialTranslateY;
-        const minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
-        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) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            if (!elementRef.current) {
-                return;
-            }
-            if (!isResizing.current) {
-                isResizing.current = true;
-                onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart();
-            }
-            const containerRect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            const clientX = (0, index_js_1.getBoundedValue)(event.clientX, (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _b !== void 0 ? _b : 0, (_d = (_c = containerRect === null || containerRect === void 0 ? void 0 : containerRect.right) !== null && _c !== void 0 ? _c : ownerDocument.documentElement.clientWidth) !== null && _d !== void 0 ? _d : 0);
-            const clientY = (0, index_js_1.getBoundedValue)(event.clientY, (_e = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _e !== void 0 ? _e : 0, (_g = (_f = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _f !== void 0 ? _f : ownerDocument.documentElement.clientHeight) !== null && _g !== void 0 ? _g : 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`;
-                    break;
-                }
-                case 'bottom-right': {
-                    width = elementRef.current.style.width = `${initialWidth - diffX}px`;
-                    height = elementRef.current.style.height = `${initialHeight - diffY}px`;
-                    break;
-                }
-                case 'bottom': {
-                    height = elementRef.current.style.height = `${initialHeight - diffY}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`;
-                    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 === null || onResizeEnd === void 0 ? void 0 : 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: {
-                position: 'absolute',
-                top: -4,
-                left: -4,
-                width: 12,
-                height: 12,
-                cursor: 'nw-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'top', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                top: -4,
-                left: 8,
-                right: 8,
-                height: 8,
-                cursor: 'n-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'top-right', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                top: -4,
-                right: -4,
-                width: 12,
-                height: 12,
-                cursor: 'ne-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'right', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                top: 8,
-                right: -4,
-                bottom: 8,
-                width: 8,
-                cursor: 'e-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'bottom-right', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                bottom: -4,
-                right: -4,
-                width: 12,
-                height: 12,
-                cursor: 'se-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'bottom', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                bottom: -4,
-                left: 8,
-                right: 8,
-                height: 8,
-                cursor: 's-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'bottom-left', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                bottom: -4,
-                left: -4,
-                width: 12,
-                height: 12,
-                cursor: 'sw-resize',
-            } }),
-        React.createElement("div", { "data-iui-resizer": 'left', onPointerDown: onResizePointerDown, style: {
-                position: 'absolute',
-                top: 8,
-                left: -4,
-                bottom: 8,
-                width: 8,
-                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 React.createElement(
+    React.Fragment,
+    null,
+    React.createElement('div', {
+      'data-iui-resizer': 'top-left',
+      onPointerDown: onResizePointerDown,
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: 12,
+        height: 12,
+        cursor: 'nw-resize',
+      },
+    }),
+    React.createElement('div', {
+      'data-iui-resizer': 'top',
+      onPointerDown: onResizePointerDown,
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 8,
+        right: 8,
+        height: 8,
+        cursor: 'n-resize',
+      },
+    }),
+    React.createElement('div', {
+      'data-iui-resizer': 'top-right',
+      onPointerDown: onResizePointerDown,
+      style: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        width: 12,
+        height: 12,
+        cursor: 'ne-resize',
+      },
+    }),
+    React.createElement('div', {
+      'data-iui-resizer': 'right',
+      onPointerDown: onResizePointerDown,
+      style: {
+        position: 'absolute',
+        top: 8,
+        right: 0,
+        bottom: 8,
+        width: 8,
+        cursor: 'e-resize',
+      },
+    }),
+    React.createElement('div', {
+      'data-iui-resizer': 'bottom-right',
+      onPointerDown: onResizePointerDown,
+      style: {
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        width: 12,
+        height: 12,
+        cursor: 'se-resize',
+      },
+    }),
+    React.createElement('div', {
+      'data-iui-resizer': 'bottom',
+      onPointerDown: onResizePointerDown,
+      style: {
+        position: 'absolute',
+        bottom: 0,
+        left: 8,
+        right: 8,
+        height: 8,
+        cursor: 's-resize',
+      },
+    }),
+    React.createElement('div', {
+      'data-iui-resizer': 'bottom-left',
+      onPointerDown: onResizePointerDown,
+      style: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        width: 12,
+        height: 12,
+        cursor: 'sw-resize',
+      },
+    }),
+    React.createElement('div', {
+      'data-iui-resizer': 'left',
+      onPointerDown: onResizePointerDown,
+      style: {
+        position: 'absolute',
+        top: 8,
+        left: 0,
+        bottom: 8,
+        width: 8,
+        cursor: 'w-resize',
+      },
+    }),
+  );
 };
 exports.Resizer = Resizer;
 exports.default = exports.Resizer;

package/cjs/core/utils/components/VirtualScroll.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare type VirtualScrollProps = {
+export type VirtualScrollProps = {
     /**
      * Length of the items to virtualize.
      */
@@ -42,7 +42,7 @@ export declare type VirtualScrollProps = {
  * />
  * @private
  */
-export declare const VirtualScroll: React.ForwardRefExoticComponent<Pick<VirtualScrollProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "itemsLength" | "itemRenderer" | "bufferSize" | "scrollToIndex"> & React.RefAttributes<HTMLDivElement>>;
+export declare const VirtualScroll: React.ForwardRefExoticComponent<Omit<VirtualScrollProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /**
  * `useVirtualization` is used for efficiently rendering only the visible rows from a large list.
  * It returns `outerProps` and `innerProps`, which need to be applied on 2 container elements and `visibleChildren` which is a list of virtualized items.