@itwin/itwinui-react 3.13.3 → 3.14.0

package/DEV-esm/utils/components/Resizer.js

@@ -1,186 +1,226 @@
 import * as React from 'react';
-import { getBoundedValue, getTranslateValuesFromElement } from '../functions/index.js';
-export const Resizer = (props)=>React.createElement("div", {
-        style: {
-            position: 'absolute',
-            inset: -6,
-            display: 'grid',
-            pointerEvents: 'none'
+import {
+  getBoundedValue,
+  getTranslateValuesFromElement,
+} from '../functions/index.js';
+export const Resizer = (props) =>
+  React.createElement(
+    'div',
+    {
+      style: {
+        position: 'absolute',
+        inset: -6,
+        display: 'grid',
+        pointerEvents: 'none',
+      },
+    },
+    React.createElement(ResizerStyles, null),
+    React.createElement(Resizers, props),
+  );
+let Resizers = (props) => {
+  let { elementRef, containerRef, onResizeStart, onResizeEnd } = props;
+  let isResizing = React.useRef(false);
+  let onResizePointerDown = (event) => {
+    if (!elementRef.current || 0 !== event.button) return;
+    let initialPointerX = event.clientX;
+    let initialPointerY = event.clientY;
+    let [initialTranslateX, initialTranslateY] = getTranslateValuesFromElement(
+      elementRef.current,
+    );
+    let { 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;
+    let minHeight = parseFloat(getComputedStyle(elementRef.current).minHeight);
+    let resizer = event.currentTarget.dataset.iuiResizer;
+    let ownerDocument = elementRef.current.ownerDocument || document;
+    let originalUserSelect = ownerDocument.body.style.userSelect;
+    ownerDocument.body.style.userSelect = 'none';
+    let onResizePointerMove = (event) => {
+      if (!elementRef.current) return;
+      if (!isResizing.current) {
+        isResizing.current = true;
+        onResizeStart?.();
+      }
+      let containerRect = containerRef?.current?.getBoundingClientRect();
+      let clientX = getBoundedValue(
+        event.clientX,
+        containerRect?.left ?? 0,
+        containerRect?.right ?? ownerDocument.documentElement.clientWidth ?? 0,
+      );
+      let clientY = getBoundedValue(
+        event.clientY,
+        containerRect?.top ?? 0,
+        containerRect?.bottom ??
+          ownerDocument.documentElement.clientHeight ??
+          0,
+      );
+      let diffX = initialPointerX - clientX;
+      let diffY = initialPointerY - clientY;
+      switch (resizer) {
+        case 'top-left': {
+          let newHeight = initialHeight + diffY;
+          if (newHeight >= minHeight) {
+            height = elementRef.current.style.height = `${newHeight}px`;
+            translateY = initialTranslateY - diffY;
+          }
+          let 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;
         }
-    }, React.createElement(ResizerStyles, null), React.createElement(Resizers, props));
-let Resizers = (props)=>{
-    let { elementRef, containerRef, onResizeStart, onResizeEnd } = props;
-    let isResizing = React.useRef(false);
-    let onResizePointerDown = (event)=>{
-        if (!elementRef.current || 0 !== event.button) return;
-        let initialPointerX = event.clientX;
-        let initialPointerY = event.clientY;
-        let [initialTranslateX, initialTranslateY] = getTranslateValuesFromElement(elementRef.current);
-        let { 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;
-        let minHeight = parseFloat(getComputedStyle(elementRef.current).minHeight);
-        let resizer = event.currentTarget.dataset.iuiResizer;
-        let ownerDocument = elementRef.current.ownerDocument || document;
-        let originalUserSelect = ownerDocument.body.style.userSelect;
-        ownerDocument.body.style.userSelect = 'none';
-        let onResizePointerMove = (event)=>{
-            if (!elementRef.current) return;
-            if (!isResizing.current) {
-                isResizing.current = true;
-                onResizeStart?.();
-            }
-            let containerRect = containerRef?.current?.getBoundingClientRect();
-            let clientX = getBoundedValue(event.clientX, containerRect?.left ?? 0, containerRect?.right ?? ownerDocument.documentElement.clientWidth ?? 0);
-            let clientY = getBoundedValue(event.clientY, containerRect?.top ?? 0, containerRect?.bottom ?? ownerDocument.documentElement.clientHeight ?? 0);
-            let diffX = initialPointerX - clientX;
-            let diffY = initialPointerY - clientY;
-            switch(resizer){
-                case 'top-left':
-                    {
-                        let newHeight = initialHeight + diffY;
-                        if (newHeight >= minHeight) {
-                            height = elementRef.current.style.height = `${newHeight}px`;
-                            translateY = initialTranslateY - diffY;
-                        }
-                        let 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':
-                    {
-                        let 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':
-                    {
-                        let 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':
-                    {
-                        let 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':
-                    {
-                        let 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
-        });
-    };
-    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'
+        case 'top': {
+          let 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;
         }
-    }), React.createElement("div", {
-        "data-iui-resizer": "right",
-        onPointerDown: onResizePointerDown,
-        style: {
-            cursor: 'e-resize'
+        case 'top-right': {
+          let 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;
         }
-    }), React.createElement("div", {
-        "data-iui-resizer": "bottom-right",
-        onPointerDown: onResizePointerDown,
-        style: {
-            cursor: 'se-resize'
+        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': {
+          let 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;
         }
-    }), React.createElement("div", {
-        "data-iui-resizer": "bottom",
-        onPointerDown: onResizePointerDown,
-        style: {
-            cursor: 's-resize'
+        case 'left': {
+          let 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;
         }
-    }), 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'
+        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,
+      },
+    );
+  };
+  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',
+      },
+    }),
+  );
 };
-let ResizerStyles = React.memo(()=>React.createElement("style", null, resizerStyles));
+let ResizerStyles = React.memo(() =>
+  React.createElement('style', null, resizerStyles),
+);
 let resizerStyles = `
 [data-iui-resizer] {
   pointer-events: auto;

package/DEV-esm/utils/components/ShadowRoot.js

@@ -3,64 +3,80 @@ import * as ReactDOM from 'react-dom';
 import { useLatestRef, useLayoutEffect } from '../hooks/index.js';
 import { useHydration } from '../providers/index.js';
 let isBrowser = 'undefined' != typeof document;
-let supportsDSD = isBrowser && 'shadowRootMode' in HTMLTemplateElement.prototype;
-let supportsAdoptedStylesheets = isBrowser && 'adoptedStyleSheets' in Document.prototype;
-export const ShadowRoot = ({ children, css })=>{
-    let isHydrating = 'hydrating' === useHydration();
-    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);
+let supportsDSD =
+  isBrowser && 'shadowRootMode' in HTMLTemplateElement.prototype;
+let supportsAdoptedStylesheets =
+  isBrowser && 'adoptedStyleSheets' in Document.prototype;
+export const ShadowRoot = ({ children, css }) => {
+  let isHydrating = 'hydrating' === useHydration();
+  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,
+  );
 };
-let ClientShadowRoot = ({ children, css })=>{
-    let templateRef = React.useRef(null);
-    let shadowRoot = useShadowRoot(templateRef, {
-        css
-    });
-    let 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
-    });
+let ClientShadowRoot = ({ children, css }) => {
+  let templateRef = React.useRef(null);
+  let shadowRoot = useShadowRoot(templateRef, {
+    css,
+  });
+  let 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,
+      });
 };
 function useShadowRoot(templateRef, { css = '' }) {
-    let [shadowRoot, setShadowRoot] = React.useState(null);
-    let styleSheet = React.useRef();
-    let latestCss = useLatestRef(css);
-    let latestShadowRoot = useLatestRef(shadowRoot);
-    useLayoutEffect(()=>{
-        let parent = templateRef.current?.parentElement;
-        if (!parent) return;
-        let setupOrReuseShadowRoot = ()=>{
-            if (parent.shadowRoot && null === latestShadowRoot.current) parent.shadowRoot.replaceChildren();
-            let shadow = parent.shadowRoot || parent.attachShadow({
-                mode: 'open'
-            });
-            if (supportsAdoptedStylesheets) {
-                let currentWindow = shadow.ownerDocument.defaultView || globalThis;
-                styleSheet.current = new currentWindow.CSSStyleSheet();
-                shadow.adoptedStyleSheets = [
-                    styleSheet.current
-                ];
-                if (latestCss.current) styleSheet.current.replaceSync(latestCss.current);
-            }
-            ReactDOM.flushSync(()=>setShadowRoot(shadow));
-        };
-        queueMicrotask(()=>{
-            setupOrReuseShadowRoot();
+  let [shadowRoot, setShadowRoot] = React.useState(null);
+  let styleSheet = React.useRef();
+  let latestCss = useLatestRef(css);
+  let latestShadowRoot = useLatestRef(shadowRoot);
+  useLayoutEffect(() => {
+    let parent = templateRef.current?.parentElement;
+    if (!parent) return;
+    let setupOrReuseShadowRoot = () => {
+      if (parent.shadowRoot && null === latestShadowRoot.current)
+        parent.shadowRoot.replaceChildren();
+      let shadow =
+        parent.shadowRoot ||
+        parent.attachShadow({
+          mode: 'open',
         });
-        return ()=>void setShadowRoot(null);
-    }, [
-        templateRef,
-        latestCss,
-        latestShadowRoot
-    ]);
-    useLayoutEffect(()=>{
-        if (css && supportsAdoptedStylesheets) styleSheet.current?.replaceSync(css);
-    }, [
-        css
-    ]);
-    return shadowRoot;
+      if (supportsAdoptedStylesheets) {
+        let currentWindow = shadow.ownerDocument.defaultView || globalThis;
+        styleSheet.current = new currentWindow.CSSStyleSheet();
+        shadow.adoptedStyleSheets = [styleSheet.current];
+        if (latestCss.current)
+          styleSheet.current.replaceSync(latestCss.current);
+      }
+      ReactDOM.flushSync(() => setShadowRoot(shadow));
+    };
+    queueMicrotask(() => {
+      setupOrReuseShadowRoot();
+    });
+    return () => void setShadowRoot(null);
+  }, [templateRef, latestCss, latestShadowRoot]);
+  useLayoutEffect(() => {
+    if (css && supportsAdoptedStylesheets) styleSheet.current?.replaceSync(css);
+  }, [css]);
+  return shadowRoot;
 }

package/DEV-esm/utils/components/WithCSSTransition.js

@@ -1,42 +1,49 @@
 import * as React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { styles } from '../../styles.js';
-export const WithCSSTransition = (props)=>{
-    let { in: visible, dimension = 'height', children, ...rest } = props;
-    let expandedSize = React.useRef(0);
-    let dimensionCamelCase = 'height' === dimension ? 'Height' : 'Width';
-    return React.createElement(CSSTransition, {
-        in: visible,
-        timeout: 200,
-        unmountOnExit: true,
-        onEnter: (node)=>{
-            node.style[`min${dimensionCamelCase}`] = 'initial';
-            node.style[dimension] = '0px';
-        },
-        onEntering: (node)=>{
-            node.style[dimension] = `${expandedSize.current}px`;
-        },
-        onEntered: (node)=>{
-            node.style[`min${dimensionCamelCase}`] = '';
-            node.style[dimension] = '';
-        },
-        onExit: (node)=>{
-            node.style[dimension] = `${expandedSize.current}px`;
-        },
-        onExiting: (node)=>{
-            node.style[`min${dimensionCamelCase}`] = 'initial';
-            node.style[dimension] = '0px';
-        },
-        classNames: {
-            enter: styles['iui-enter'],
-            enterActive: styles['iui-enter-active'],
-            exit: styles['iui-exit'],
-            exitActive: styles['iui-exit-active']
-        },
-        ...rest
-    }, React.isValidElement(children) ? React.cloneElement(children, {
-        ref: (el)=>{
-            if (el) expandedSize.current = el.getBoundingClientRect()[dimension];
-        }
-    }) : React.createElement(React.Fragment, null));
+export const WithCSSTransition = (props) => {
+  let { in: visible, dimension = 'height', children, ...rest } = props;
+  let expandedSize = React.useRef(0);
+  let dimensionCamelCase = 'height' === dimension ? 'Height' : 'Width';
+  return React.createElement(
+    CSSTransition,
+    {
+      in: visible,
+      timeout: 200,
+      unmountOnExit: true,
+      onEnter: (node) => {
+        node.style[`min${dimensionCamelCase}`] = 'initial';
+        node.style[dimension] = '0px';
+      },
+      onEntering: (node) => {
+        node.style[dimension] = `${expandedSize.current}px`;
+      },
+      onEntered: (node) => {
+        node.style[`min${dimensionCamelCase}`] = '';
+        node.style[dimension] = '';
+      },
+      onExit: (node) => {
+        node.style[dimension] = `${expandedSize.current}px`;
+      },
+      onExiting: (node) => {
+        node.style[`min${dimensionCamelCase}`] = 'initial';
+        node.style[dimension] = '0px';
+      },
+      classNames: {
+        enter: styles['iui-enter'],
+        enterActive: styles['iui-enter-active'],
+        exit: styles['iui-exit'],
+        exitActive: styles['iui-exit-active'],
+      },
+      ...rest,
+    },
+    React.isValidElement(children)
+      ? React.cloneElement(children, {
+          ref: (el) => {
+            if (el)
+              expandedSize.current = el.getBoundingClientRect()[dimension];
+          },
+        })
+      : React.createElement(React.Fragment, null),
+  );
 };