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

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

@@ -1,26 +1,4 @@
 "use strict";
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,24 +8,22 @@ exports.InputContainer = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 /**
  * Input container to wrap inputs with label, and add optional message and icon.
  * @private
  */
-var InputContainer = function (props) {
+const InputContainer = (props) => {
     var _a;
-    var _b;
-    var _c = props.as, Element = _c === void 0 ? 'div' : _c, label = props.label, disabled = props.disabled, required = props.required, status = props.status, message = props.message, icon = props.icon, isLabelInline = props.isLabelInline, isIconInline = props.isIconInline, children = props.children, className = props.className, style = props.style, statusMessage = props.statusMessage, rest = __rest(props, ["as", "label", "disabled", "required", "status", "message", "icon", "isLabelInline", "isIconInline", "children", "className", "style", "statusMessage"]);
-    return (react_1.default.createElement(Element, __assign({ className: (0, classnames_1.default)('iui-input-container', (_a = {
-                'iui-disabled': disabled
-            },
-            _a["iui-".concat(status)] = !!status,
-            _a['iui-inline-label'] = isLabelInline,
-            _a['iui-inline-icon'] = isIconInline,
-            _a['iui-with-message'] = (!!message || !!icon || !!statusMessage) && !isLabelInline,
-            _a), className), style: style }, rest),
+    const { as: Element = 'div', label, disabled, required, status, message, icon, isLabelInline, isIconInline, children, className, style, statusMessage, ...rest } = props;
+    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-input-container', {
+            'iui-disabled': disabled,
+            [`iui-${status}`]: !!status,
+            'iui-inline-label': isLabelInline,
+            'iui-inline-icon': isIconInline,
+            'iui-with-message': (!!message || !!icon || !!statusMessage) && !isLabelInline,
+        }, className), style: style, ...rest },
         label && (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-label', {
                 'iui-required': required,
             }) }, label)),
@@ -55,7 +31,7 @@ var InputContainer = function (props) {
         statusMessage ? (statusMessage) : (react_1.default.createElement(react_1.default.Fragment, null,
             icon &&
                 react_1.default.cloneElement(icon, {
-                    className: (0, classnames_1.default)('iui-input-icon', (_b = icon.props) === null || _b === void 0 ? void 0 : _b.className),
+                    className: (0, classnames_1.default)('iui-input-icon', (_a = icon.props) === null || _a === void 0 ? void 0 : _a.className),
                 }),
             message && !isLabelInline && (react_1.default.createElement("div", { className: 'iui-message' }, message))))));
 };

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

@@ -1,26 +1,4 @@
 "use strict";
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,9 +8,9 @@ exports.MiddleTextTruncation = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var useOverflow_1 = require("../hooks/useOverflow");
-var ELLIPSIS_CHAR = '…';
+const react_1 = __importDefault(require("react"));
+const useOverflow_1 = require("../hooks/useOverflow");
+const ELLIPSIS_CHAR = '…';
 /**
  * Truncates text with the ellipsis in the middle,
  * leaving defined number of chars at the end.
@@ -49,19 +27,25 @@ var ELLIPSIS_CHAR = '…';
  *   )}
  * />
  */
-var MiddleTextTruncation = function (props) {
+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 = (0, useOverflow_1.useOverflow)(text), ref = _c[0], visibleCount = _c[1];
-    var truncatedText = react_1.default.useMemo(function () {
+    const { text, endCharsCount = 6, textRenderer, style, ...rest } = props;
+    const [ref, visibleCount] = (0, useOverflow_1.useOverflow)(text);
+    const truncatedText = react_1.default.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_1.default.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_1.default.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));
 };
 exports.MiddleTextTruncation = MiddleTextTruncation;
 exports.default = exports.MiddleTextTruncation;

package/cjs/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/cjs/core/utils/components/Popover.js

@@ -3,87 +3,84 @@
  * 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));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hideOnEscOrTab = exports.Popover = void 0;
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var react_2 = __importDefault(require("@tippyjs/react"));
-var useMergedRefs_1 = require("../hooks/useMergedRefs");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const react_2 = __importDefault(require("@tippyjs/react"));
+const useMergedRefs_1 = require("../hooks/useMergedRefs");
 require("@itwin/itwinui-css/css/utils.css");
+const ThemeProvider_1 = require("../../ThemeProvider/ThemeProvider");
 /**
  * Wrapper around [tippy.js](https://atomiks.github.io/tippyjs)
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
  * @private
  */
-exports.Popover = react_1.default.forwardRef(function (props, ref) {
+exports.Popover = react_1.default.forwardRef((props, ref) => {
     var _a;
-    var _b = react_1.default.useState(false), mounted = _b[0], setMounted = _b[1];
-    var tippyRef = react_1.default.useRef(null);
-    var refs = (0, useMergedRefs_1.useMergedRefs)(tippyRef, ref);
+    const [mounted, setMounted] = react_1.default.useState(false);
+    const themeInfo = react_1.default.useContext(ThemeProvider_1.ThemeContext);
+    const tippyRef = react_1.default.useRef(null);
+    const refs = (0, useMergedRefs_1.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: (0, classnames_1.default)('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: (0, classnames_1.default)('iui-popover', props.className),
+        plugins: [
             lazyLoad,
             removeTabIndex,
-            exports.hideOnEscOrTab
-        ], (props.plugins || []), true), popperOptions: __assign(__assign({ strategy: 'fixed' }, props.popperOptions), { modifiers: __spreadArray([
+            exports.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_1.default.isValidElement(props.content)
+        const clonedContent = react_1.default.isValidElement(props.content)
             ? react_1.default.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);
@@ -92,20 +89,20 @@ exports.Popover = react_1.default.forwardRef(function (props, ref) {
             : props.content;
         computedProps.content = mounted ? clonedContent : '';
     }
-    return react_1.default.createElement(react_2.default, __assign({}, computedProps, { ref: refs }));
+    return react_1.default.createElement(react_2.default, { ...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.
  */
 exports.hideOnEscOrTab = {
-    fn: function (instance) {
+    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();
@@ -119,10 +116,10 @@ exports.hideOnEscOrTab = {
             }
         };
         return {
-            onShow: function () {
+            onShow() {
                 instance.popper.addEventListener('keydown', onKeyDown);
             },
-            onHide: function () {
+            onHide() {
                 instance.popper.removeEventListener('keydown', onKeyDown);
             },
         };

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

@@ -8,8 +8,8 @@ exports.Resizer = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var functions_1 = require("../functions");
+const react_1 = __importDefault(require("react"));
+const functions_1 = require("../functions");
 /**
  * Component that allows to resize parent element.
  * Parent must have `position: relative`.
@@ -22,27 +22,27 @@ var functions_1 = require("../functions");
  *   </div>
  * );
  */
-var Resizer = function (props) {
-    var elementRef = props.elementRef, containerRef = props.containerRef, onResizeStart = props.onResizeStart, onResizeEnd = props.onResizeEnd;
-    var isResizing = react_1.default.useRef(false);
-    var onResizePointerDown = function (event) {
+const Resizer = (props) => {
+    const { elementRef, containerRef, onResizeStart, onResizeEnd } = props;
+    const isResizing = react_1.default.useRef(false);
+    const onResizePointerDown = (event) => {
         if (!elementRef.current || event.button !== 0) {
             return;
         }
-        var initialPointerX = event.clientX;
-        var initialPointerY = event.clientY;
-        var _a = (0, functions_1.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] = (0, functions_1.getTranslateValues)(elementRef.current);
+        const { width: initialWidth, height: initialHeight, } = elementRef.current.getBoundingClientRect();
+        let width = `${initialWidth}px`;
+        let height = `${initialHeight}px`;
+        let translateX = initialTranslateX;
+        let translateY = initialTranslateY;
+        const minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
+        const minHeight = parseFloat(getComputedStyle(elementRef.current).minHeight);
+        const resizer = event.currentTarget.dataset.iuiResizer;
+        const 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;
@@ -51,77 +51,77 @@ 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 = (0, functions_1.getBoundedValue)(event.clientX, (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _b !== void 0 ? _b : 0, (_d = (_c = containerRect === null || containerRect === void 0 ? void 0 : containerRect.right) !== null && _c !== void 0 ? _c : elementRef.current.ownerDocument.documentElement.clientWidth) !== null && _d !== void 0 ? _d : 0);
-            var clientY = (0, functions_1.getBoundedValue)(event.clientY, (_e = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _e !== void 0 ? _e : 0, (_g = (_f = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _f !== void 0 ? _f : 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 = (0, functions_1.getBoundedValue)(event.clientX, (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _b !== void 0 ? _b : 0, (_d = (_c = containerRect === null || containerRect === void 0 ? void 0 : containerRect.right) !== null && _c !== void 0 ? _c : elementRef.current.ownerDocument.documentElement.clientWidth) !== null && _d !== void 0 ? _d : 0);
+            const clientY = (0, functions_1.getBoundedValue)(event.clientY, (_e = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _e !== void 0 ? _e : 0, (_g = (_f = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _f !== void 0 ? _f : 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:
@@ -129,15 +129,15 @@ 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 });