@itwin/itwinui-react 3.11.3 → 3.12.1

package/esm/utils/components/Resizer.js

@@ -1,176 +1,242 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { getBoundedValue, getTranslateValuesFromElement, } from '../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>
- * );
- */
+import {
+  getBoundedValue,
+  getTranslateValuesFromElement,
+} from '../functions/index.js';
 export 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 React.createElement(
+    'div',
+    {
+      style: {
+        position: 'absolute',
+        inset: -6,
+        display: 'grid',
+        pointerEvents: 'none',
+      },
+    },
+    React.createElement(ResizerStyles, null),
+    React.createElement(Resizers, props),
+  );
 };
 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] =
+      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 = getBoundedValue(
+        event.clientX,
+        containerRect?.left ?? 0,
+        containerRect?.right ?? ownerDocument.documentElement.clientWidth ?? 0,
+      );
+      const clientY = 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;
         }
-        const initialPointerX = event.clientX;
-        const initialPointerY = event.clientY;
-        const [initialTranslateX, initialTranslateY] = 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': {
+          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 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 = getBoundedValue(event.clientX, containerRect?.left ?? 0, containerRect?.right ?? ownerDocument.documentElement.clientWidth ?? 0);
-            const clientY = 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 '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;
+      }
     };
-    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 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',
+      },
+    }),
+  );
 };
-// ----------------------------------------------------------------------------
-const ResizerStyles = React.memo(() => React.createElement("style", null, resizerStyles));
-const resizerStyles = /* css */ `
+const ResizerStyles = React.memo(() =>
+  React.createElement('style', null, resizerStyles),
+);
+const resizerStyles = `
 [data-iui-resizer] {
   pointer-events: auto;
   grid-area: 1 / 1 / -1 / -1;

package/esm/utils/components/ShadowRoot.js

@@ -1,91 +1,91 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { useLatestRef, useLayoutEffect } from '../hooks/index.js';
 import { useHydration } from '../providers/index.js';
 const isBrowser = typeof document !== 'undefined';
-const supportsDSD = isBrowser && 'shadowRootMode' in HTMLTemplateElement.prototype;
-const supportsAdoptedStylesheets = isBrowser && 'adoptedStyleSheets' in Document.prototype;
-/**
- * Wrapper around `<template>` element that attaches shadow root to its parent
- * and moves its children into the shadow root.
- *
- * @private
- */
+const supportsDSD =
+  isBrowser && 'shadowRootMode' in HTMLTemplateElement.prototype;
+const supportsAdoptedStylesheets =
+  isBrowser && 'adoptedStyleSheets' in Document.prototype;
 export const ShadowRoot = ({ children, css }) => {
-    const isHydrating = useHydration() === 'hydrating';
-    if (!isBrowser) {
-        return (React.createElement("template", { shadowrootmode: 'open' },
-            css && React.createElement("style", null, css),
-            children));
-    }
-    // In browsers that support DSD, the template will be automatically removed as soon as it's parsed.
-    // To pass hydration, the first client render needs to emulate this browser behavior and return null.
-    if (supportsDSD && isHydrating) {
-        return null;
-    }
-    return React.createElement(ClientShadowRoot, { css: css }, children);
+  const isHydrating = useHydration() === 'hydrating';
+  if (!isBrowser) {
+    return React.createElement(
+      'template',
+      {
+        shadowrootmode: 'open',
+      },
+      css && React.createElement('style', null, css),
+      children,
+    );
+  }
+  if (supportsDSD && isHydrating) {
+    return null;
+  }
+  return React.createElement(
+    ClientShadowRoot,
+    {
+      css: css,
+    },
+    children,
+  );
 };
-// ----------------------------------------------------------------------------
 const ClientShadowRoot = ({ children, css }) => {
-    const templateRef = React.useRef(null);
-    const shadowRoot = useShadowRoot(templateRef, { css });
-    // fallback to <style> tag if adoptedStyleSheets is not supported
-    const fallbackCss = !supportsAdoptedStylesheets && css ? React.createElement("style", null, css) : null;
-    return shadowRoot ? (ReactDOM.createPortal(React.createElement(React.Fragment, null,
-        fallbackCss,
-        children), shadowRoot)) : (React.createElement("template", { ref: templateRef }));
+  const templateRef = React.useRef(null);
+  const shadowRoot = useShadowRoot(templateRef, {
+    css,
+  });
+  const fallbackCss =
+    !supportsAdoptedStylesheets && css
+      ? React.createElement('style', null, css)
+      : null;
+  return shadowRoot
+    ? ReactDOM.createPortal(
+        React.createElement(React.Fragment, null, fallbackCss, children),
+        shadowRoot,
+      )
+    : React.createElement('template', {
+        ref: templateRef,
+      });
 };
-// ----------------------------------------------------------------------------
-/**
- * Given a ref, this hook will return a shadowRoot attached to its parent element.
- *
- * The css will be added to the shadowRoot using `adoptedStyleSheets` (if supported).
- */
 function useShadowRoot(templateRef, { css = '' }) {
-    const [shadowRoot, setShadowRoot] = React.useState(null);
-    const styleSheet = React.useRef();
-    const latestCss = useLatestRef(css);
-    const latestShadowRoot = useLatestRef(shadowRoot);
-    useLayoutEffect(() => {
-        const parent = templateRef.current?.parentElement;
-        if (!parent) {
-            return;
-        }
-        const setupOrReuseShadowRoot = () => {
-            if (parent.shadowRoot && latestShadowRoot.current === null) {
-                parent.shadowRoot.replaceChildren(); // Remove previous shadowroot content
-            }
-            const shadow = parent.shadowRoot || parent.attachShadow({ mode: 'open' });
-            if (supportsAdoptedStylesheets) {
-                // create an empty stylesheet and add it to the shadowRoot
-                const currentWindow = shadow.ownerDocument.defaultView || globalThis;
-                styleSheet.current = new currentWindow.CSSStyleSheet();
-                shadow.adoptedStyleSheets = [styleSheet.current];
-                // add the CSS immediately to avoid FOUC (one-time)
-                if (latestCss.current) {
-                    styleSheet.current.replaceSync(latestCss.current);
-                }
-            }
-            // Flush the state immediately after shadow-root is attached, to ensure that layout
-            // measurements in parent component are correct.
-            // Without this, the parent component may end up measuring the layout when the shadow-root
-            // is attached in the DOM but React hasn't rendered any slots or content into it yet.
-            ReactDOM.flushSync(() => setShadowRoot(shadow));
-        };
-        queueMicrotask(() => {
-            setupOrReuseShadowRoot();
+  const [shadowRoot, setShadowRoot] = React.useState(null);
+  const styleSheet = React.useRef();
+  const latestCss = useLatestRef(css);
+  const latestShadowRoot = useLatestRef(shadowRoot);
+  useLayoutEffect(() => {
+    const parent = templateRef.current?.parentElement;
+    if (!parent) {
+      return;
+    }
+    const setupOrReuseShadowRoot = () => {
+      if (parent.shadowRoot && latestShadowRoot.current === null) {
+        parent.shadowRoot.replaceChildren();
+      }
+      const shadow =
+        parent.shadowRoot ||
+        parent.attachShadow({
+          mode: 'open',
         });
-        return () => void setShadowRoot(null);
-    }, [templateRef, latestCss, latestShadowRoot]);
-    // Synchronize `css` with contents of the existing stylesheet
-    useLayoutEffect(() => {
-        if (css && supportsAdoptedStylesheets) {
-            styleSheet.current?.replaceSync(css);
+      if (supportsAdoptedStylesheets) {
+        const currentWindow = shadow.ownerDocument.defaultView || globalThis;
+        styleSheet.current = new currentWindow.CSSStyleSheet();
+        shadow.adoptedStyleSheets = [styleSheet.current];
+        if (latestCss.current) {
+          styleSheet.current.replaceSync(latestCss.current);
         }
-    }, [css]);
-    return shadowRoot;
+      }
+      ReactDOM.flushSync(() => setShadowRoot(shadow));
+    };
+    queueMicrotask(() => {
+      setupOrReuseShadowRoot();
+    });
+    return () => void setShadowRoot(null);
+  }, [templateRef, latestCss, latestShadowRoot]);
+  useLayoutEffect(() => {
+    if (css && supportsAdoptedStylesheets) {
+      styleSheet.current?.replaceSync(css);
+    }
+  }, [css]);
+  return shadowRoot;
 }