@itwin/itwinui-react 2.10.0 → 2.11.0

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

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -8,7 +31,7 @@ exports.Flex = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const react_1 = __importDefault(require("react"));
+const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 require("@itwin/itwinui-css/css/utils.css");
 const sizeTokens = [
@@ -30,9 +53,9 @@ const getValueForToken = (token) => {
 };
 // ----------------------------------------------------------------------------
 // Main Flex component
-const FlexComponent = react_1.default.forwardRef((props, ref) => {
+const FlexComponent = React.forwardRef((props, ref) => {
     const { as: Element = 'div', display, flexDirection, justifyContent, alignItems, gap, flexWrap, className, style, ...rest } = props;
-    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-flex', className), style: {
+    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-flex', className), style: {
             '--iui-flex-display': display,
             '--iui-flex-direction': flexDirection,
             '--iui-flex-justify': justifyContent,
@@ -44,13 +67,13 @@ const FlexComponent = react_1.default.forwardRef((props, ref) => {
 });
 // ----------------------------------------------------------------------------
 // Flex.Spacer component
-const FlexSpacer = react_1.default.forwardRef((props, ref) => {
+const FlexSpacer = React.forwardRef((props, ref) => {
     const { as: Element = 'div', flex, className, style, ...rest } = props;
-    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-flex-spacer', className), style: { '--iui-flex-spacer-flex': flex, ...style }, ref: ref, ...rest }));
+    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-flex-spacer', className), style: { '--iui-flex-spacer-flex': flex, ...style }, ref: ref, ...rest }));
 });
 // ----------------------------------------------------------------------------
 // Flex.Item subcomponent
-const FlexItem = react_1.default.forwardRef((props, ref) => {
+const FlexItem = React.forwardRef((props, ref) => {
     const { as: Element = 'div', gapBefore, gapAfter, flex, alignSelf, className, style, ...rest } = props;
     const _style = {
         '--iui-flex-item-flex': flex,
@@ -65,7 +88,7 @@ const FlexItem = react_1.default.forwardRef((props, ref) => {
         }),
         ...style,
     };
-    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-flex-item', className), ref: ref, style: _style, ...rest }));
+    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-flex-item', className), ref: ref, style: _style, ...rest }));
 });
 // ----------------------------------------------------------------------------
 // Exported compound component

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

@@ -1,6 +1,26 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FocusTrap = void 0;
@@ -8,18 +28,18 @@ exports.FocusTrap = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const react_1 = __importDefault(require("react"));
-const focusable_1 = require("../functions/focusable");
-const useMergedRefs_1 = require("../hooks/useMergedRefs");
+const React = __importStar(require("react"));
+const focusable_js_1 = require("../functions/focusable.js");
+const useMergedRefs_js_1 = require("../hooks/useMergedRefs.js");
 /**
  * Trap focus within child container.
  * Used for modals and dialogs.
  */
 const FocusTrap = (props) => {
     const { children } = props;
-    const childRef = react_1.default.useRef();
+    const childRef = React.useRef();
     const getFirstLastFocusables = () => {
-        const elements = (0, focusable_1.getTabbableElements)(childRef.current);
+        const elements = (0, focusable_js_1.getTabbableElements)(childRef.current);
         const firstElement = elements[0];
         const lastElement = elements[(elements.length || 1) - 1];
         return [firstElement, lastElement];
@@ -42,12 +62,12 @@ const FocusTrap = (props) => {
             lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
         }
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { tabIndex: 0, onFocus: onFirstFocus, "aria-hidden": true }),
-        react_1.default.cloneElement(children, {
-            ref: (0, useMergedRefs_1.mergeRefs)(children.ref, childRef),
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { tabIndex: 0, onFocus: onFirstFocus, "aria-hidden": true }),
+        React.cloneElement(children, {
+            ref: (0, useMergedRefs_js_1.mergeRefs)(children.ref, childRef),
         }),
-        react_1.default.createElement("div", { tabIndex: 0, onFocus: onLastFocus, "aria-hidden": true })));
+        React.createElement("div", { tabIndex: 0, onFocus: onLastFocus, "aria-hidden": true })));
 };
 exports.FocusTrap = FocusTrap;
 exports.default = exports.FocusTrap;

package/cjs/core/utils/components/Icon.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { AnyString } from '../types';
+import * as React from 'react';
+import type { AnyString } from '../types.js';
 import '@itwin/itwinui-css/css/utils.css';
 export declare type IconProps = {
     /**
@@ -24,7 +24,7 @@ export declare type IconProps = {
      * @default 'default'
      */
     fill?: 'default' | 'positive' | 'informational' | 'negative' | 'warning' | AnyString;
-} & React.ComponentProps<'span'>;
+} & React.ComponentPropsWithoutRef<'span'>;
 /**
  * A utility component to provide size and fill to svgs.
  * Works well with svgs from `@itwin/itwinui-icons-react`.
@@ -39,5 +39,28 @@ export declare type IconProps = {
  *   <SvgStatusError />
  * </Icon>
  */
-export declare const Icon: React.ForwardRefExoticComponent<Pick<IconProps, "key" | "fill" | "size" | keyof React.HTMLAttributes<HTMLSpanElement>> & React.RefAttributes<HTMLSpanElement>>;
+export declare const Icon: React.ForwardRefExoticComponent<{
+    /**
+     * Size of the svg.
+     *  - 'medium': works well with most text
+     *  - 'small': smaller than medium
+     *  - 'large': larger than medium
+     *  - 'auto': scales with text
+     *
+     * Also accepts a custom string value that will be used unchanged.
+     *
+     * @default 'medium'
+     */
+    size?: "small" | "auto" | "medium" | "large" | AnyString | undefined;
+    /**
+     * Fill (color) of the svg.
+     * Defaults to `--iui-color-icon-muted`. Can be specified to
+     * use one of the status colors.
+     *
+     * Also accepts a custom string value that will be used unchanged.
+     *
+     * @default 'default'
+     */
+    fill?: "default" | "positive" | "warning" | "negative" | AnyString | "informational" | undefined;
+} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & React.RefAttributes<HTMLSpanElement>>;
 export default Icon;

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

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -8,7 +31,7 @@ exports.Icon = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const react_1 = __importDefault(require("react"));
+const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 require("@itwin/itwinui-css/css/utils.css");
 const getSizeValue = (size) => {
@@ -37,8 +60,8 @@ const getSizeValue = (size) => {
  *   <SvgStatusError />
  * </Icon>
  */
-exports.Icon = react_1.default.forwardRef((props, ref) => {
+exports.Icon = React.forwardRef((props, ref) => {
     const { size = 'medium', fill = 'default', className, ...rest } = props;
-    return (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-svg-icon', className), "data-iui-icon-size": getSizeValue(size), "data-iui-icon-color": fill, ref: ref, ...rest }));
+    return (React.createElement("span", { className: (0, classnames_1.default)('iui-svg-icon', className), "data-iui-icon-size": getSizeValue(size), "data-iui-icon-color": fill, ref: ref, ...rest }));
 });
 exports.default = exports.Icon;

package/cjs/core/utils/components/InputContainer.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import '@itwin/itwinui-css/css/utils.css';
 export declare type InputContainerProps<T extends React.ElementType = 'div'> = {
     as?: T;

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

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -8,7 +31,7 @@ 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.
  *--------------------------------------------------------------------------------------------*/
-const react_1 = __importDefault(require("react"));
+const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 require("@itwin/itwinui-css/css/utils.css");
 /**
@@ -19,22 +42,22 @@ const InputContainer = (props) => {
     var _a;
     const { as: Element = 'div', label, disabled, required, status, message, icon, isLabelInline, isIconInline, children, className, style, statusMessage, inputId, labelId, ...rest } = props;
     const LabelElement = inputId && Element !== 'label' ? 'label' : 'div';
-    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-input-container', {
+    return (React.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(LabelElement, { className: (0, classnames_1.default)('iui-label', {
+        label && (React.createElement(LabelElement, { className: (0, classnames_1.default)('iui-label', {
                 'iui-required': required,
             }), htmlFor: inputId, id: labelId }, label)),
         children,
-        statusMessage ? (statusMessage) : (react_1.default.createElement(react_1.default.Fragment, null,
+        statusMessage ? (statusMessage) : (React.createElement(React.Fragment, null,
             icon &&
-                react_1.default.cloneElement(icon, {
+                React.cloneElement(icon, {
                     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))))));
+            message && !isLabelInline && (React.createElement("div", { className: 'iui-message' }, message))))));
 };
 exports.InputContainer = InputContainer;

package/cjs/core/utils/components/InputFlexContainer.d.ts

@@ -0,0 +1,13 @@
+import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../props.js';
+import '@itwin/itwinui-css/css/input-container.css';
+declare type InputFlexContainerOwnProps = {
+    isDisabled?: boolean;
+    status?: 'positive' | 'warning' | 'negative';
+};
+/**
+ * Utility component for input container with display flex abilities.
+ * @private
+ */
+export declare const InputFlexContainer: PolymorphicForwardRefComponent<"div", InputFlexContainerOwnProps>;
+export declare type InputFlexContainerProps = PolymorphicComponentProps<'div', InputFlexContainerOwnProps>;
+export {};

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

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputFlexContainer = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+require("@itwin/itwinui-css/css/input-container.css");
+/**
+ * Utility component for input container with display flex abilities.
+ * @private
+ */
+exports.InputFlexContainer = react_1.default.forwardRef((props, ref) => {
+    const { as: Element = 'div', isDisabled, status, children, className, style, ...rest } = props;
+    return (react_1.default.createElement(Element, { className: (0, classnames_1.default)('iui-input-flex-container', className), "data-iui-status": status, "data-iui-disabled": isDisabled ? 'true' : undefined, ref: ref, style: style, ...rest }, children));
+});

package/cjs/core/utils/components/LinkAction.d.ts

@@ -1,4 +1,4 @@
-import { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../props';
+import type { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../props.js';
 import '@itwin/itwinui-css/css/utils.css';
 declare type LinkActionOwnProps = {};
 declare type LinkBoxOwnProps = {};

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

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -8,7 +31,7 @@ exports.LinkBox = exports.LinkAction = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const react_1 = __importDefault(require("react"));
+const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 require("@itwin/itwinui-css/css/utils.css");
 /**
@@ -21,9 +44,9 @@ require("@itwin/itwinui-css/css/utils.css");
  *   </Surface>
  * </LinkBox>
  */
-exports.LinkAction = react_1.default.forwardRef((props, ref) => {
+exports.LinkAction = React.forwardRef((props, ref) => {
     const { as: Element = 'a', className, ...rest } = props;
-    return (react_1.default.createElement(Element, { ref: ref, className: (0, classnames_1.default)('iui-link-action', className), ...rest }));
+    return (React.createElement(Element, { ref: ref, className: (0, classnames_1.default)('iui-link-action', className), ...rest }));
 });
 exports.LinkAction.displayName = 'LinkAction';
 /**
@@ -37,8 +60,8 @@ exports.LinkAction.displayName = 'LinkAction';
  *   </Surface>
  * </LinkBox>
  */
-exports.LinkBox = react_1.default.forwardRef((props, ref) => {
+exports.LinkBox = React.forwardRef((props, ref) => {
     const { as: Element = 'div', className, ...rest } = props;
-    return (react_1.default.createElement(Element, { ref: ref, className: (0, classnames_1.default)('iui-link-box', className), ...rest }));
+    return (React.createElement(Element, { ref: ref, className: (0, classnames_1.default)('iui-link-box', className), ...rest }));
 });
 exports.LinkBox.displayName = 'LinkBox';

package/cjs/core/utils/components/MiddleTextTruncation.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { CommonProps } from '../props';
+import * as React from 'react';
+import type { CommonProps } from '../props.js';
 export declare type MiddleTextTruncationProps = {
     /**
      * Text to truncate.

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

@@ -1,6 +1,26 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MiddleTextTruncation = void 0;
@@ -8,8 +28,8 @@ 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.
  *--------------------------------------------------------------------------------------------*/
-const react_1 = __importDefault(require("react"));
-const useOverflow_1 = require("../hooks/useOverflow");
+const React = __importStar(require("react"));
+const useOverflow_js_1 = require("../hooks/useOverflow.js");
 const ELLIPSIS_CHAR = '…';
 /**
  * Truncates text with the ellipsis in the middle,
@@ -30,8 +50,8 @@ const ELLIPSIS_CHAR = '…';
 const MiddleTextTruncation = (props) => {
     var _a;
     const { text, endCharsCount = 6, textRenderer, style, ...rest } = props;
-    const [ref, visibleCount] = (0, useOverflow_1.useOverflow)(text);
-    const truncatedText = react_1.default.useMemo(() => {
+    const [ref, visibleCount] = (0, useOverflow_js_1.useOverflow)(text);
+    const truncatedText = React.useMemo(() => {
         if (visibleCount < text.length) {
             return `${text.substring(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length)}${ELLIPSIS_CHAR}${text.substring(text.length - endCharsCount)}`;
         }
@@ -39,7 +59,7 @@ const MiddleTextTruncation = (props) => {
             return text;
         }
     }, [endCharsCount, text, visibleCount]);
-    return (react_1.default.createElement("span", { style: {
+    return (React.createElement("span", { style: {
             display: 'flex',
             minWidth: 0,
             flexGrow: 1,

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { TippyProps } from '@tippyjs/react';
+import * as React from 'react';
+import type { TippyProps } from '@tippyjs/react';
 import type { Placement, Instance } from 'tippy.js';
 export declare type PopoverInstance = Instance;
 import '@itwin/itwinui-css/css/utils.css';

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

@@ -3,28 +3,52 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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;
-const react_1 = __importDefault(require("react"));
+const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const react_2 = __importDefault(require("@tippyjs/react"));
-const useMergedRefs_1 = require("../hooks/useMergedRefs");
+const react_1 = __importDefault(require("@tippyjs/react"));
+const index_js_1 = require("../hooks/index.js");
 require("@itwin/itwinui-css/css/utils.css");
-const ThemeProvider_1 = require("../../ThemeProvider/ThemeProvider");
+const ThemeProvider_js_1 = require("../../ThemeProvider/ThemeProvider.js");
 /**
  * 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((props, ref) => {
+exports.Popover = React.forwardRef((props, ref) => {
     var _a;
-    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);
+    const [mounted, setMounted] = React.useState(false);
+    const themeInfo = React.useContext(ThemeProvider_js_1.ThemeContext);
+    const isDomAvailable = (0, index_js_1.useIsClient)();
+    const tippyRef = React.useRef(null);
+    const refs = (0, index_js_1.useMergedRefs)(tippyRef, ref);
     // Plugin to allow lazy mounting. See https://github.com/atomiks/tippyjs-react#lazy-mounting
     const lazyLoad = {
         fn: () => ({
@@ -54,6 +78,9 @@ exports.Popover = react_1.default.forwardRef((props, ref) => {
         zIndex: 99999,
         ...props,
         className: (0, classnames_1.default)('iui-popover', props.className),
+        // add additional check for isDomAvailable when using in controlled mode,
+        // because rootRef is not available in first render
+        visible: props.visible !== undefined ? props.visible && isDomAvailable : undefined,
         plugins: [
             lazyLoad,
             removeTabIndex,
@@ -78,8 +105,8 @@ exports.Popover = react_1.default.forwardRef((props, ref) => {
         // 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
-        const clonedContent = react_1.default.isValidElement(props.content)
-            ? react_1.default.cloneElement(props.content, {
+        const clonedContent = React.isValidElement(props.content)
+            ? React.cloneElement(props.content, {
                 onClick: (e) => {
                     var _a, _b;
                     e.stopPropagation();
@@ -89,7 +116,7 @@ exports.Popover = react_1.default.forwardRef((props, ref) => {
             : props.content;
         computedProps.content = mounted ? clonedContent : '';
     }
-    return react_1.default.createElement(react_2.default, { ...computedProps, ref: refs });
+    return React.createElement(react_1.default, { ...computedProps, ref: refs });
 });
 /**
  * Plugin to hide Popover when either Esc key is pressed,

package/cjs/core/utils/components/Resizer.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare type ResizerProps = {
     /**
      * Ref of the element that is being resized.