@itwin/itwinui-react 2.0.0-dev.2 → 2.0.0-dev.3

package/esm/core/utils/components/MiddleTextTruncation.js

@@ -1,32 +1,10 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import { useOverflow } from '../hooks/useOverflow';
-var ELLIPSIS_CHAR = '…';
+const ELLIPSIS_CHAR = '…';
 /**
  * Truncates text with the ellipsis in the middle,
  * leaving defined number of chars at the end.
@@ -43,18 +21,24 @@ var ELLIPSIS_CHAR = '…';
  *   )}
  * />
  */
-export var MiddleTextTruncation = function (props) {
+export const MiddleTextTruncation = (props) => {
     var _a;
-    var text = props.text, _b = props.endCharsCount, endCharsCount = _b === void 0 ? 6 : _b, textRenderer = props.textRenderer, style = props.style, rest = __rest(props, ["text", "endCharsCount", "textRenderer", "style"]);
-    var _c = useOverflow(text), ref = _c[0], visibleCount = _c[1];
-    var truncatedText = React.useMemo(function () {
+    const { text, endCharsCount = 6, textRenderer, style, ...rest } = props;
+    const [ref, visibleCount] = useOverflow(text);
+    const truncatedText = React.useMemo(() => {
         if (visibleCount < text.length) {
-            return "".concat(text.substring(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length)).concat(ELLIPSIS_CHAR).concat(text.substring(text.length - endCharsCount));
+            return `${text.substring(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length)}${ELLIPSIS_CHAR}${text.substring(text.length - endCharsCount)}`;
         }
         else {
             return text;
         }
     }, [endCharsCount, text, visibleCount]);
-    return (React.createElement("span", __assign({ style: __assign({ display: 'flex', minWidth: 0, flexGrow: 1, whiteSpace: 'nowrap' }, style), ref: ref }, rest), (_a = textRenderer === null || textRenderer === void 0 ? void 0 : textRenderer(truncatedText, text)) !== null && _a !== void 0 ? _a : truncatedText));
+    return (React.createElement("span", { style: {
+            display: 'flex',
+            minWidth: 0,
+            flexGrow: 1,
+            whiteSpace: 'nowrap',
+            ...style,
+        }, ref: ref, ...rest }, (_a = textRenderer === null || textRenderer === void 0 ? void 0 : textRenderer(truncatedText, text)) !== null && _a !== void 0 ? _a : truncatedText));
 };
 export default MiddleTextTruncation;

package/esm/core/utils/components/Popover.d.ts

@@ -26,7 +26,7 @@ export declare type PopoverProps = {
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
  * @private
  */
-export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "theme" | "className" | "role" | "children" | "plugins" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
+export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "theme" | "className" | "role" | "children" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "plugins" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
 /**
  * Plugin to hide Popover when either Esc key is pressed,
  * or when the content inside is not tabbable and Tab key is pressed.

package/esm/core/utils/components/Popover.js

@@ -2,82 +2,79 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import React from 'react';
 import cx from 'classnames';
 import Tippy from '@tippyjs/react';
 import { useMergedRefs } from '../hooks/useMergedRefs';
 import '@itwin/itwinui-css/css/utils.css';
+import { ThemeContext } from '../../ThemeProvider/ThemeProvider';
 /**
  * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
  * @private
  */
-export var Popover = React.forwardRef(function (props, ref) {
+export const Popover = React.forwardRef((props, ref) => {
     var _a;
-    var _b = React.useState(false), mounted = _b[0], setMounted = _b[1];
-    var tippyRef = React.useRef(null);
-    var refs = useMergedRefs(tippyRef, ref);
+    const [mounted, setMounted] = React.useState(false);
+    const themeInfo = React.useContext(ThemeContext);
+    const tippyRef = React.useRef(null);
+    const refs = useMergedRefs(tippyRef, ref);
     // Plugin to allow lazy mounting. See https://github.com/atomiks/tippyjs-react#lazy-mounting
-    var lazyLoad = {
-        fn: function () { return ({
-            onShow: function () { return setMounted(true); },
-            onHidden: function () { return setMounted(false); },
-        }); },
+    const lazyLoad = {
+        fn: () => ({
+            onShow: () => setMounted(true),
+            onHidden: () => setMounted(false),
+        }),
     };
     // Plugin to remove tabindex from tippy, to prevent focus ring from unintentionally showing.
-    var removeTabIndex = {
-        fn: function () { return ({
-            onCreate: function (instance) {
+    const removeTabIndex = {
+        fn: () => ({
+            onCreate: (instance) => {
                 var _a;
                 (_a = instance.popper.firstElementChild) === null || _a === void 0 ? void 0 : _a.removeAttribute('tabindex');
             },
-        }); },
+        }),
     };
-    var computedProps = __assign(__assign({ allowHTML: true, animation: false, appendTo: function (el) { return el.ownerDocument.body; }, arrow: false, duration: 0, interactive: true, role: undefined, offset: [0, 0], maxWidth: '', zIndex: 99999 }, props), { className: cx('iui-popover', props.className), plugins: __spreadArray([
+    const computedProps = {
+        allowHTML: true,
+        animation: false,
+        appendTo: (el) => (themeInfo === null || themeInfo === void 0 ? void 0 : themeInfo.rootRef.current) || el.ownerDocument.body,
+        arrow: false,
+        duration: 0,
+        interactive: true,
+        role: undefined,
+        offset: [0, 0],
+        maxWidth: '',
+        zIndex: 99999,
+        ...props,
+        className: cx('iui-popover', props.className),
+        plugins: [
             lazyLoad,
             removeTabIndex,
-            hideOnEscOrTab
-        ], (props.plugins || []), true), popperOptions: __assign(__assign({ strategy: 'fixed' }, props.popperOptions), { modifiers: __spreadArray([
+            hideOnEscOrTab,
+            ...(props.plugins || []),
+        ],
+        popperOptions: {
+            strategy: 'fixed',
+            ...props.popperOptions,
+            modifiers: [
                 { name: 'flip' },
-                { name: 'preventOverflow', options: { padding: 0 } }
-            ], (((_a = props.popperOptions) === null || _a === void 0 ? void 0 : _a.modifiers) || []), true) }) });
+                { name: 'preventOverflow', options: { padding: 0 } },
+                ...(((_a = props.popperOptions) === null || _a === void 0 ? void 0 : _a.modifiers) || []),
+            ],
+        },
+    };
     if (props.render) {
-        var render_1 = props.render;
-        computedProps.render = function () {
-            var args = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                args[_i] = arguments[_i];
-            }
-            return (mounted ? render_1.apply(void 0, args) : '');
-        };
+        const render = props.render;
+        computedProps.render = (...args) => (mounted ? render(...args) : '');
     }
     else {
         // Fixing issue where elements below Popover gets click events.
         // Tippy uses react Portal, which propagates events by react tree, not dom tree.
         // Read more: https://reactjs.org/docs/portals.html#event-bubbling-through-portals
-        var clonedContent = React.isValidElement(props.content)
+        const clonedContent = React.isValidElement(props.content)
             ? React.cloneElement(props.content, {
-                onClick: function (e) {
+                onClick: (e) => {
                     var _a, _b;
                     e.stopPropagation();
                     (_b = (_a = props.content.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
@@ -86,20 +83,20 @@ export var Popover = React.forwardRef(function (props, ref) {
             : props.content;
         computedProps.content = mounted ? clonedContent : '';
     }
-    return React.createElement(Tippy, __assign({}, computedProps, { ref: refs }));
+    return React.createElement(Tippy, { ...computedProps, ref: refs });
 });
 /**
  * Plugin to hide Popover when either Esc key is pressed,
  * or when the content inside is not tabbable and Tab key is pressed.
  */
-export var hideOnEscOrTab = {
-    fn: function (instance) {
+export const hideOnEscOrTab = {
+    fn(instance) {
         /** @returns true if none of the children are tabbable */
-        var shouldHideOnTab = function () {
-            var descendents = Array.from(instance.popper.querySelectorAll('*'));
-            return !descendents.some(function (el) { return (el === null || el === void 0 ? void 0 : el.tabIndex) >= 0; });
+        const shouldHideOnTab = () => {
+            const descendents = Array.from(instance.popper.querySelectorAll('*'));
+            return !descendents.some((el) => (el === null || el === void 0 ? void 0 : el.tabIndex) >= 0);
         };
-        var onKeyDown = function (event) {
+        const onKeyDown = (event) => {
             switch (event.key) {
                 case 'Escape':
                     instance.hide();
@@ -113,10 +110,10 @@ export var hideOnEscOrTab = {
             }
         };
         return {
-            onShow: function () {
+            onShow() {
                 instance.popper.addEventListener('keydown', onKeyDown);
             },
-            onHide: function () {
+            onHide() {
                 instance.popper.removeEventListener('keydown', onKeyDown);
             },
         };

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

@@ -16,27 +16,27 @@ import { getBoundedValue, getTranslateValues } from '../functions';
  *   </div>
  * );
  */
-export var Resizer = function (props) {
-    var elementRef = props.elementRef, containerRef = props.containerRef, onResizeStart = props.onResizeStart, onResizeEnd = props.onResizeEnd;
-    var isResizing = React.useRef(false);
-    var onResizePointerDown = function (event) {
+export const Resizer = (props) => {
+    const { elementRef, containerRef, onResizeStart, onResizeEnd } = props;
+    const isResizing = React.useRef(false);
+    const onResizePointerDown = (event) => {
         if (!elementRef.current || event.button !== 0) {
             return;
         }
-        var initialPointerX = event.clientX;
-        var initialPointerY = event.clientY;
-        var _a = getTranslateValues(elementRef.current), initialTranslateX = _a[0], initialTranslateY = _a[1];
-        var _b = elementRef.current.getBoundingClientRect(), initialWidth = _b.width, initialHeight = _b.height;
-        var width = "".concat(initialWidth, "px");
-        var height = "".concat(initialHeight, "px");
-        var translateX = initialTranslateX;
-        var translateY = initialTranslateY;
-        var minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
-        var minHeight = parseFloat(getComputedStyle(elementRef.current).minHeight);
-        var resizer = event.currentTarget.dataset.iuiResizer;
-        var originalUserSelect = elementRef.current.ownerDocument.body.style.userSelect;
+        const initialPointerX = event.clientX;
+        const initialPointerY = event.clientY;
+        const [initialTranslateX, initialTranslateY] = 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 originalUserSelect = elementRef.current.ownerDocument.body.style.userSelect;
         elementRef.current.ownerDocument.body.style.userSelect = 'none';
-        var onResizePointerMove = function (event) {
+        const onResizePointerMove = (event) => {
             var _a, _b, _c, _d, _e, _f, _g;
             if (!elementRef.current) {
                 return;
@@ -45,77 +45,77 @@ export var Resizer = function (props) {
                 isResizing.current = true;
                 onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart();
             }
-            var containerRect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            var clientX = 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 : elementRef.current.ownerDocument.documentElement.clientWidth) !== null && _d !== void 0 ? _d : 0);
-            var clientY = 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 : elementRef.current.ownerDocument.documentElement.clientHeight) !== null && _g !== void 0 ? _g : 0);
-            var diffX = initialPointerX - clientX;
-            var diffY = initialPointerY - clientY;
+            const containerRect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const clientX = 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 : elementRef.current.ownerDocument.documentElement.clientWidth) !== null && _d !== void 0 ? _d : 0);
+            const clientY = 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 : elementRef.current.ownerDocument.documentElement.clientHeight) !== null && _g !== void 0 ? _g : 0);
+            const diffX = initialPointerX - clientX;
+            const diffY = initialPointerY - clientY;
             switch (resizer) {
                 case 'top-left': {
-                    var newHeight = initialHeight + diffY;
+                    const newHeight = initialHeight + diffY;
                     if (newHeight >= minHeight) {
-                        height = elementRef.current.style.height = "".concat(newHeight, "px");
+                        height = elementRef.current.style.height = `${newHeight}px`;
                         translateY = initialTranslateY - diffY;
                     }
-                    var newWidth = initialWidth + diffX;
+                    const newWidth = initialWidth + diffX;
                     if (newWidth >= minWidth) {
-                        width = elementRef.current.style.width = "".concat(newWidth, "px");
+                        width = elementRef.current.style.width = `${newWidth}px`;
                         translateX = initialTranslateX - diffX;
                     }
-                    elementRef.current.style.transform = "translate(".concat(translateX, "px, ").concat(translateY, "px)");
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
                     break;
                 }
                 case 'top': {
-                    var newHeight = initialHeight + diffY;
+                    const newHeight = initialHeight + diffY;
                     if (newHeight < minHeight) {
                         break;
                     }
-                    height = elementRef.current.style.height = "".concat(newHeight, "px");
+                    height = elementRef.current.style.height = `${newHeight}px`;
                     translateY = initialTranslateY - diffY;
-                    elementRef.current.style.transform = "translate(".concat(translateX, "px, ").concat(translateY, "px)");
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
                     break;
                 }
                 case 'top-right': {
-                    var newHeight = initialHeight + diffY;
+                    const newHeight = initialHeight + diffY;
                     if (newHeight >= minHeight) {
-                        height = elementRef.current.style.height = "".concat(newHeight, "px");
+                        height = elementRef.current.style.height = `${newHeight}px`;
                         translateY = initialTranslateY - diffY;
                     }
-                    width = elementRef.current.style.width = "".concat(initialWidth - diffX, "px");
-                    elementRef.current.style.transform = "translate(".concat(translateX, "px, ").concat(translateY, "px)");
+                    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 = "".concat(initialWidth - diffX, "px");
+                    width = elementRef.current.style.width = `${initialWidth - diffX}px`;
                     break;
                 }
                 case 'bottom-right': {
-                    width = elementRef.current.style.width = "".concat(initialWidth - diffX, "px");
-                    height = elementRef.current.style.height = "".concat(initialHeight - diffY, "px");
+                    width = elementRef.current.style.width = `${initialWidth - diffX}px`;
+                    height = elementRef.current.style.height = `${initialHeight - diffY}px`;
                     break;
                 }
                 case 'bottom': {
-                    height = elementRef.current.style.height = "".concat(initialHeight - diffY, "px");
+                    height = elementRef.current.style.height = `${initialHeight - diffY}px`;
                     break;
                 }
                 case 'bottom-left': {
-                    var newWidth = initialWidth + diffX;
+                    const newWidth = initialWidth + diffX;
                     if (newWidth >= minWidth) {
-                        width = elementRef.current.style.width = "".concat(newWidth, "px");
+                        width = elementRef.current.style.width = `${newWidth}px`;
                         translateX = initialTranslateX - diffX;
                     }
-                    height = elementRef.current.style.height = "".concat(initialHeight - diffY, "px");
-                    elementRef.current.style.transform = "translate(".concat(translateX, "px, ").concat(translateY, "px)");
+                    height = elementRef.current.style.height = `${initialHeight - diffY}px`;
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
                     break;
                 }
                 case 'left': {
-                    var newWidth = initialWidth + diffX;
+                    const newWidth = initialWidth + diffX;
                     if (newWidth < minWidth) {
                         break;
                     }
-                    width = elementRef.current.style.width = "".concat(newWidth, "px");
+                    width = elementRef.current.style.width = `${newWidth}px`;
                     translateX = initialTranslateX - diffX;
-                    elementRef.current.style.transform = "translate(".concat(translateX, "px, ").concat(translateY, "px)");
+                    elementRef.current.style.transform = `translate(${translateX}px, ${translateY}px)`;
                     break;
                 }
                 default:
@@ -123,15 +123,15 @@ export var Resizer = function (props) {
             }
         };
         elementRef.current.ownerDocument.addEventListener('pointermove', onResizePointerMove);
-        elementRef.current.ownerDocument.addEventListener('pointerup', function () {
+        elementRef.current.ownerDocument.addEventListener('pointerup', () => {
             document.removeEventListener('pointermove', onResizePointerMove);
             if (elementRef.current) {
                 elementRef.current.ownerDocument.body.style.userSelect = originalUserSelect;
                 isResizing.current = false;
                 onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd({
-                    width: width,
-                    height: height,
-                    transform: "translate(".concat(translateX, "px, ").concat(translateY, "px)"),
+                    width,
+                    height,
+                    transform: `translate(${translateX}px, ${translateY}px)`,
                 });
             }
         }, { once: true });