@itwin/itwinui-react 3.13.3 → 3.14.0

package/DEV-cjs/utils/components/MiddleTextTruncation.js

@@ -1,38 +1,42 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-Object.defineProperty(exports, "MiddleTextTruncation", {
-    enumerable: true,
-    get: function() {
-        return MiddleTextTruncation;
-    }
+Object.defineProperty(exports, 'MiddleTextTruncation', {
+  enumerable: true,
+  get: function () {
+    return MiddleTextTruncation;
+  },
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = _interop_require_wildcard._(require("react"));
-const _useOverflow = require("../hooks/useOverflow.js");
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _useOverflow = require('../hooks/useOverflow.js');
 const ELLIPSIS_CHAR = '…';
-const MiddleTextTruncation = (props)=>{
-    let { text, endCharsCount = 6, textRenderer, style, ...rest } = props;
-    let [ref, visibleCount] = (0, _useOverflow.useOverflow)(text);
-    let truncatedText = _react.useMemo(()=>{
-        if (visibleCount < text.length) return `${text.substring(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length)}${ELLIPSIS_CHAR}${text.substring(text.length - endCharsCount)}`;
-        return text;
-    }, [
-        endCharsCount,
-        text,
-        visibleCount
-    ]);
-    return _react.createElement("span", {
-        style: {
-            display: 'flex',
-            minWidth: 0,
-            flexGrow: 1,
-            whiteSpace: 'nowrap',
-            ...style
-        },
-        ref: ref,
-        ...rest
-    }, textRenderer?.(truncatedText, text) ?? truncatedText);
+const MiddleTextTruncation = (props) => {
+  let { text, endCharsCount = 6, textRenderer, style, ...rest } = props;
+  let [ref, visibleCount] = (0, _useOverflow.useOverflow)(text);
+  let truncatedText = _react.useMemo(() => {
+    if (visibleCount < text.length)
+      return `${text.substring(
+        0,
+        visibleCount - endCharsCount - ELLIPSIS_CHAR.length,
+      )}${ELLIPSIS_CHAR}${text.substring(text.length - endCharsCount)}`;
+    return text;
+  }, [endCharsCount, text, visibleCount]);
+  return _react.createElement(
+    'span',
+    {
+      style: {
+        display: 'flex',
+        minWidth: 0,
+        flexGrow: 1,
+        whiteSpace: 'nowrap',
+        ...style,
+      },
+      ref: ref,
+      ...rest,
+    },
+    textRenderer?.(truncatedText, text) ?? truncatedText,
+  );
 };
 MiddleTextTruncation.displayName = 'MiddleTextTruncation';

package/DEV-cjs/utils/components/Portal.js

@@ -1,41 +1,44 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
 function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
     });
 }
 _export(exports, {
-    Portal: function() {
-        return Portal;
-    },
-    portalContainerAtom: function() {
-        return portalContainerAtom;
-    },
-    usePortalTo: function() {
-        return usePortalTo;
-    }
+  Portal: function () {
+    return Portal;
+  },
+  portalContainerAtom: function () {
+    return portalContainerAtom;
+  },
+  usePortalTo: function () {
+    return usePortalTo;
+  },
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = _interop_require_wildcard._(require("react"));
-const _reactdom = _interop_require_wildcard._(require("react-dom"));
-const _useIsClient = require("../hooks/useIsClient.js");
-const _jotai = require("jotai");
-const _ScopeProvider = require("../providers/ScopeProvider.js");
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _reactdom = _interop_require_wildcard._(require('react-dom'));
+const _useIsClient = require('../hooks/useIsClient.js');
+const _jotai = require('jotai');
+const _ScopeProvider = require('../providers/ScopeProvider.js');
 const portalContainerAtom = (0, _jotai.atom)(void 0);
-const Portal = (props)=>{
-    let { portal = true, children } = props;
-    let isClient = (0, _useIsClient.useIsClient)();
-    let portalTo = usePortalTo(portal);
-    if (!isClient) return null;
-    return portalTo ? _reactdom.createPortal(children, portalTo) : children;
+const Portal = (props) => {
+  let { portal = true, children } = props;
+  let isClient = (0, _useIsClient.useIsClient)();
+  let portalTo = usePortalTo(portal);
+  if (!isClient) return null;
+  return portalTo ? _reactdom.createPortal(children, portalTo) : children;
 };
-const usePortalTo = (portal)=>{
-    let [portalContainer] = (0, _ScopeProvider.useScopedAtom)(portalContainerAtom);
-    if ('boolean' == typeof portal) return portal ? portalContainer : null;
-    let portalTo = 'function' == typeof portal.to ? portal.to() : portal.to;
-    return portalTo ?? portalContainer;
+const usePortalTo = (portal) => {
+  let [portalContainer] = (0, _ScopeProvider.useScopedAtom)(
+    portalContainerAtom,
+  );
+  if ('boolean' == typeof portal) return portal ? portalContainer : null;
+  let portalTo = 'function' == typeof portal.to ? portal.to() : portal.to;
+  return portalTo ?? portalContainer;
 };

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

@@ -1,197 +1,233 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-Object.defineProperty(exports, "Resizer", {
-    enumerable: true,
-    get: function() {
-        return Resizer;
-    }
+Object.defineProperty(exports, 'Resizer', {
+  enumerable: true,
+  get: function () {
+    return Resizer;
+  },
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = _interop_require_wildcard._(require("react"));
-const _index = require("../functions/index.js");
-const Resizer = (props)=>_react.createElement("div", {
-        style: {
-            position: 'absolute',
-            inset: -6,
-            display: 'grid',
-            pointerEvents: 'none'
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../functions/index.js');
+const Resizer = (props) =>
+  _react.createElement(
+    'div',
+    {
+      style: {
+        position: 'absolute',
+        inset: -6,
+        display: 'grid',
+        pointerEvents: 'none',
+      },
+    },
+    _react.createElement(ResizerStyles, null),
+    _react.createElement(Resizers, props),
+  );
+const 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] = (0,
+    _index.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 = (0, _index.getBoundedValue)(
+        event.clientX,
+        containerRect?.left ?? 0,
+        containerRect?.right ?? ownerDocument.documentElement.clientWidth ?? 0,
+      );
+      let clientY = (0, _index.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));
-const 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] = (0, _index.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 = (0, _index.getBoundedValue)(event.clientX, containerRect?.left ?? 0, containerRect?.right ?? ownerDocument.documentElement.clientWidth ?? 0);
-            let clientY = (0, _index.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',
+      },
+    }),
+  );
 };
-const ResizerStyles = _react.memo(()=>_react.createElement("style", null, resizerStyles));
+const ResizerStyles = _react.memo(() =>
+  _react.createElement('style', null, resizerStyles),
+);
 const resizerStyles = `
 [data-iui-resizer] {
   pointer-events: auto;