@itwin/itwinui-react 2.10.0 → 2.11.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+## 2.11.0
+
+### Minor Changes
+
+- [#863](https://github.com/iTwin/iTwinUI/pull/863): Add `SearchBox` component for your search needs. It can be used as static or expandable version of SearchBox.
+
+  ```ts
+  <SearchBox inputProps={{placeholder:'Basic search'}} />
+  <SearchBox expandable inputProps={{placeholder:'Expandable search'}} />
+  ```
+
+  `SearchBox` has `SearchBox.Icon`, `SearchBox.Button`, `SearchBox.Input`, `SearchBox.CollapseButton` and `SearchBox.ExpandButton` subcomponents which can be passed as children to customise the look.
+
+- [#1060](https://github.com/iTwin/iTwinUI/pull/1060): Tabs - Added property `overflowOptions` - contains `useOverflow`, which when true enables tabs to scroll if there's overflow
+  ```typescript
+  <Tabs type='default' overflowButton={{ useOverflow: true }}>
+    {tabs}
+  </Tabs>
+  ```
+
+### Patch Changes
+
+- [#1275](https://github.com/iTwin/iTwinUI/pull/1275): Fixed an issue where `ProgressRadial` was not correctly showing when used inside a v2 boundary within a v1 page.
+- [#1156](https://github.com/iTwin/iTwinUI/pull/1156): Fixes an issue where table crashes when resizing the Column Manager column in expand mode.
+- [#1246](https://github.com/iTwin/iTwinUI/pull/1246): All relative imports now use the `.js` extension, in preparation of better ESM support.
+- [#1228](https://github.com/iTwin/iTwinUI/pull/1228): `ComboBox` and `Select` will now use a hidden live region to ensure that multiple selected options are announced by assistive technologies every time the selection is updated.
+- [#1276](https://github.com/iTwin/iTwinUI/pull/1276): Fixed an issue where using Popover components in controlled mode (through `visible` prop) was appending it to the wrong root element.
+- [#1281](https://github.com/iTwin/iTwinUI/pull/1281): Fixed an issue in ButtonGroup where null/undefined children were also getting wrapped by empty `<div>`s.
+- [#1257](https://github.com/iTwin/iTwinUI/pull/1257): Fixed an issue where pseudo elements inside a v2 boundary were not reverting v1 styles.
+- Updated dependencies:
+  - @itwin/itwinui-css@1.11.0
+
+## 2.10.1
+
+### Patch Changes
+
+- [#1245](https://github.com/iTwin/iTwinUI/pull/1245): Adjusted Checkbox so that its clickable target area is 24pxx24px by default (increased from 16x16) and 32x32 when used in a Table selection column.
+- Updated dependencies:
+  - @itwin/itwinui-css@1.10.3
+
 ## 2.10.0
 
 ### Minor Changes

package/README.md

@@ -53,7 +53,7 @@ const App = () => (
 
 Yes, that's really all you need as you can see in this live interactive demo:
 
-[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/playgrounds/cra?file=/src/App.jsx)
+[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/s/github/iTwin/iTwinUI/tree/main/cra-sandbox?file=/src/App.tsx)
 
 ---
 

package/cjs/core/Alert/Alert.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { CommonProps } from '../utils';
+import * as React from 'react';
 import '@itwin/itwinui-css/css/alert.css';
+import type { CommonProps } from '../utils/props.js';
 export declare type AlertProps = {
     /**
      * Type of the alert.

package/cjs/core/Alert/Alert.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 };
 };
@@ -9,9 +32,9 @@ exports.Alert = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = __importDefault(require("classnames"));
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("../utils");
+const React = __importStar(require("react"));
 require("@itwin/itwinui-css/css/alert.css");
+const index_js_1 = require("../utils/index.js");
 /**
  * A small box to quickly grab user attention and communicate a brief message
  * @example
@@ -29,16 +52,16 @@ require("@itwin/itwinui-css/css/alert.css");
  */
 const Alert = (props) => {
     const { children, className, type = 'informational', clickableText, clickableTextProps, onClose, style, isSticky = false, ...rest } = props;
-    (0, utils_1.useTheme)();
-    const StatusIcon = utils_1.StatusIconMap[type];
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-alert', className), "data-iui-status": type, "data-iui-variant": isSticky ? 'sticky' : undefined, style: style, ...rest },
-        react_1.default.createElement(StatusIcon, { className: 'iui-alert-icon' }),
-        react_1.default.createElement("span", { className: 'iui-alert-message' },
+    (0, index_js_1.useTheme)();
+    const StatusIcon = index_js_1.StatusIconMap[type];
+    return (React.createElement("div", { className: (0, classnames_1.default)('iui-alert', className), "data-iui-status": type, "data-iui-variant": isSticky ? 'sticky' : undefined, style: style, ...rest },
+        React.createElement(StatusIcon, { className: 'iui-alert-icon' }),
+        React.createElement("span", { className: 'iui-alert-message' },
             children,
-            clickableText && (react_1.default.createElement("a", { ...clickableTextProps, className: (0, classnames_1.default)('iui-alert-link', clickableTextProps === null || clickableTextProps === void 0 ? void 0 : clickableTextProps.className) }, clickableText))),
-        onClose && (react_1.default.createElement("button", { onClick: onClose, "aria-label": 'Close', type: 'button', className: 'iui-alert-button' },
-            react_1.default.createElement("span", { className: 'iui-alert-button-icon', "aria-hidden": true },
-                react_1.default.createElement(utils_1.SvgCloseSmall, null))))));
+            clickableText && (React.createElement("a", { ...clickableTextProps, className: (0, classnames_1.default)('iui-alert-link', clickableTextProps === null || clickableTextProps === void 0 ? void 0 : clickableTextProps.className) }, clickableText))),
+        onClose && (React.createElement("button", { onClick: onClose, "aria-label": 'Close', type: 'button', className: 'iui-alert-button' },
+            React.createElement("span", { className: 'iui-alert-button-icon', "aria-hidden": true },
+                React.createElement(index_js_1.SvgCloseSmall, null))))));
 };
 exports.Alert = Alert;
 exports.default = exports.Alert;

package/cjs/core/Alert/index.d.ts

@@ -1,4 +1,4 @@
-export { Alert } from './Alert';
-export type { AlertProps } from './Alert';
+export { Alert } from './Alert.js';
+export type { AlertProps } from './Alert.js';
 declare const _default: "./Alert";
 export default _default;

package/cjs/core/Alert/index.js

@@ -5,6 +5,6 @@ exports.Alert = 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 Alert_1 = require("./Alert");
-Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return Alert_1.Alert; } });
+var Alert_js_1 = require("./Alert.js");
+Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return Alert_js_1.Alert; } });
 exports.default = './Alert';

package/cjs/core/Avatar/Avatar.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CommonProps } from '../utils';
+import type { CommonProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/avatar.css';
 export declare type AvatarStatus = 'online' | 'busy' | 'away' | 'offline';
 /**

package/cjs/core/Avatar/Avatar.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 };
 };
@@ -9,8 +32,8 @@ exports.UserIcon = exports.Avatar = exports.defaultStatusTitles = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = __importDefault(require("classnames"));
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("../utils");
+const React = __importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/avatar.css");
 exports.defaultStatusTitles = {
     away: 'Away',
@@ -35,13 +58,13 @@ exports.defaultStatusTitles = {
  */
 const Avatar = (props) => {
     const { size = 'small', status, abbreviation, image, backgroundColor, title, translatedStatusTitles, className, style, ...rest } = props;
-    (0, utils_1.useTheme)();
+    (0, index_js_1.useTheme)();
     const statusTitles = { ...exports.defaultStatusTitles, ...translatedStatusTitles };
-    return (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-avatar', { [`iui-${size}`]: size !== 'medium' }, className), title: title, style: { backgroundColor, ...style }, ...rest },
-        !image && (react_1.default.createElement("abbr", { className: 'iui-initials' }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
+    return (React.createElement("span", { className: (0, classnames_1.default)('iui-avatar', { [`iui-${size}`]: size !== 'medium' }, className), title: title, style: { backgroundColor, ...style }, ...rest },
+        !image && (React.createElement("abbr", { className: 'iui-initials' }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
         image,
-        react_1.default.createElement("span", { className: 'iui-stroke' }),
-        status && (react_1.default.createElement("span", { title: statusTitles[status], className: (0, classnames_1.default)('iui-status', {
+        React.createElement("span", { className: 'iui-stroke' }),
+        status && (React.createElement("span", { title: statusTitles[status], className: (0, classnames_1.default)('iui-status', {
                 [`iui-${status}`]: !!status,
             }), "aria-label": statusTitles[status] }))));
 };

package/cjs/core/Avatar/index.d.ts

@@ -1,4 +1,4 @@
-export { Avatar, UserIcon } from './Avatar';
-export type { AvatarProps, StatusTitles, AvatarStatus, UserIconProps, UserIconStatus, } from './Avatar';
+export { Avatar, UserIcon } from './Avatar.js';
+export type { AvatarProps, StatusTitles, AvatarStatus, UserIconProps, UserIconStatus, } from './Avatar.js';
 declare const _default: "./Avatar";
 export default _default;

package/cjs/core/Avatar/index.js

@@ -5,7 +5,7 @@ exports.UserIcon = exports.Avatar = 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 Avatar_1 = require("./Avatar");
-Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return Avatar_1.Avatar; } });
-Object.defineProperty(exports, "UserIcon", { enumerable: true, get: function () { return Avatar_1.UserIcon; } });
+var Avatar_js_1 = require("./Avatar.js");
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return Avatar_js_1.Avatar; } });
+Object.defineProperty(exports, "UserIcon", { enumerable: true, get: function () { return Avatar_js_1.UserIcon; } });
 exports.default = './Avatar';

package/cjs/core/AvatarGroup/AvatarGroup.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { CommonProps } from '../utils';
+import * as React from 'react';
+import type { CommonProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/avatar.css';
 export declare type AvatarGroupProps = {
     /**

package/cjs/core/AvatarGroup/AvatarGroup.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,9 +31,9 @@ exports.UserIconGroup = exports.AvatarGroup = 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"));
-const utils_1 = require("../utils");
+const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/avatar.css");
 /**
  * Group Avatars together.
@@ -42,28 +65,28 @@ require("@itwin/itwinui-css/css/avatar.css");
 const AvatarGroup = (props) => {
     const maxLength = 99;
     const { children, animated = false, stacked = true, maxIcons = 5, iconSize = 'small', countIconProps, className, ...rest } = props;
-    const childrenArray = react_1.default.Children.toArray(children);
+    const childrenArray = React.Children.toArray(children);
     const childrenLength = childrenArray.length;
-    (0, utils_1.useTheme)();
+    (0, index_js_1.useTheme)();
     const getAvatarList = (count) => {
-        return childrenArray.slice(0, count).map((child) => react_1.default.cloneElement(child, {
+        return childrenArray.slice(0, count).map((child) => React.cloneElement(child, {
             status: undefined,
             size: iconSize,
         }));
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-avatar-list', {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: (0, classnames_1.default)('iui-avatar-list', {
                 'iui-animated': animated,
                 'iui-stacked': stacked,
             }, className), ...rest },
             childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1),
-            childrenArray.length > maxIcons + 1 && (react_1.default.createElement(react_1.default.Fragment, null,
+            childrenArray.length > maxIcons + 1 && (React.createElement(React.Fragment, null,
                 getAvatarList(maxIcons),
-                react_1.default.createElement("div", { ...countIconProps, className: (0, classnames_1.default)('iui-avatar', { [`iui-${iconSize}`]: iconSize !== 'medium' }, 'iui-avatar-count', countIconProps === null || countIconProps === void 0 ? void 0 : countIconProps.className) },
-                    react_1.default.createElement("abbr", { className: 'iui-initials' }, childrenLength <= maxLength
+                React.createElement("div", { ...countIconProps, className: (0, classnames_1.default)('iui-avatar', { [`iui-${iconSize}`]: iconSize !== 'medium' }, 'iui-avatar-count', countIconProps === null || countIconProps === void 0 ? void 0 : countIconProps.className) },
+                    React.createElement("abbr", { className: 'iui-initials' }, childrenLength <= maxLength
                         ? `${childrenLength - maxIcons}`
                         : `${maxLength}+`),
-                    react_1.default.createElement("span", { className: 'iui-stroke' })))))));
+                    React.createElement("span", { className: 'iui-stroke' })))))));
 };
 exports.AvatarGroup = AvatarGroup;
 /**

package/cjs/core/AvatarGroup/index.d.ts

@@ -1,4 +1,4 @@
-export { AvatarGroup, UserIconGroup } from './AvatarGroup';
-export type { AvatarGroupProps, UserIconGroupProps } from './AvatarGroup';
+export { AvatarGroup, UserIconGroup } from './AvatarGroup.js';
+export type { AvatarGroupProps, UserIconGroupProps } from './AvatarGroup.js';
 declare const _default: "./AvatarGroup";
 export default _default;

package/cjs/core/AvatarGroup/index.js

@@ -5,7 +5,7 @@ exports.UserIconGroup = exports.AvatarGroup = 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 AvatarGroup_1 = require("./AvatarGroup");
-Object.defineProperty(exports, "AvatarGroup", { enumerable: true, get: function () { return AvatarGroup_1.AvatarGroup; } });
-Object.defineProperty(exports, "UserIconGroup", { enumerable: true, get: function () { return AvatarGroup_1.UserIconGroup; } });
+var AvatarGroup_js_1 = require("./AvatarGroup.js");
+Object.defineProperty(exports, "AvatarGroup", { enumerable: true, get: function () { return AvatarGroup_js_1.AvatarGroup; } });
+Object.defineProperty(exports, "UserIconGroup", { enumerable: true, get: function () { return AvatarGroup_js_1.UserIconGroup; } });
 exports.default = './AvatarGroup';

package/cjs/core/Backdrop/Backdrop.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import '@itwin/itwinui-css/css/backdrop.css';
 export declare type BackdropProps = {
     /**

package/cjs/core/Backdrop/Backdrop.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,12 +31,12 @@ exports.Backdrop = 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"));
-const utils_1 = require("../utils");
+const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/backdrop.css");
-exports.Backdrop = react_1.default.forwardRef((props, ref) => {
+exports.Backdrop = React.forwardRef((props, ref) => {
     const { isVisible = true, className, ...rest } = props;
-    (0, utils_1.useTheme)();
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-backdrop', { 'iui-backdrop-visible': isVisible }, className), ref: ref, ...rest }));
+    (0, index_js_1.useTheme)();
+    return (React.createElement("div", { className: (0, classnames_1.default)('iui-backdrop', { 'iui-backdrop-visible': isVisible }, className), ref: ref, ...rest }));
 });

package/cjs/core/Backdrop/index.d.ts

@@ -1,2 +1,2 @@
-export { Backdrop } from './Backdrop';
-export type { BackdropProps } from './Backdrop';
+export { Backdrop } from './Backdrop.js';
+export type { BackdropProps } from './Backdrop.js';

package/cjs/core/Backdrop/index.js

@@ -5,5 +5,5 @@ exports.Backdrop = 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 Backdrop_1 = require("./Backdrop");
-Object.defineProperty(exports, "Backdrop", { enumerable: true, get: function () { return Backdrop_1.Backdrop; } });
+var Backdrop_js_1 = require("./Backdrop.js");
+Object.defineProperty(exports, "Backdrop", { enumerable: true, get: function () { return Backdrop_js_1.Backdrop; } });

package/cjs/core/Badge/Badge.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { CommonProps, SoftBackgrounds } from '../utils';
-import type { AnyString } from '../utils';
+import { SoftBackgrounds } from '../utils/index.js';
+import type { CommonProps } from '../utils/index.js';
+import type { AnyString } from '../utils/index.js';
 import '@itwin/itwinui-css/css/badge.css';
 export declare type BadgeProps = {
     /**

package/cjs/core/Badge/Badge.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,9 +31,9 @@ exports.Badge = 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"));
-const utils_1 = require("../utils");
+const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/badge.css");
 /**
  * Helper function that returns one of the preset badge color values.
@@ -19,7 +42,7 @@ const getBadgeColorValue = (color) => {
     if (!color) {
         return '';
     }
-    return (0, utils_1.isSoftBackground)(color) ? utils_1.SoftBackgrounds[color] : color;
+    return (0, index_js_1.isSoftBackground)(color) ? index_js_1.SoftBackgrounds[color] : color;
 };
 /**
  * Helper function that returns one of the preset badge status values.
@@ -37,7 +60,7 @@ const getStatusValue = (color) => {
  */
 const Badge = (props) => {
     const { backgroundColor, style, className, children, ...rest } = props;
-    (0, utils_1.useTheme)();
+    (0, index_js_1.useTheme)();
     // choosing 'primary' status should result in data-iui-status equaling 'informational'
     const reducedBackgroundColor = backgroundColor === 'primary' ? 'informational' : backgroundColor;
     const statusValue = getStatusValue(reducedBackgroundColor);
@@ -47,7 +70,7 @@ const Badge = (props) => {
             ...style,
         }
         : { ...style };
-    return (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-badge', className), style: _style, "data-iui-status": statusValue, ...rest }, children));
+    return (React.createElement("span", { className: (0, classnames_1.default)('iui-badge', className), style: _style, "data-iui-status": statusValue, ...rest }, children));
 };
 exports.Badge = Badge;
 exports.default = exports.Badge;

package/cjs/core/Badge/index.d.ts

@@ -1,4 +1,4 @@
-export { Badge } from './Badge';
-export type { BadgeProps } from './Badge';
+export { Badge } from './Badge.js';
+export type { BadgeProps } from './Badge.js';
 declare const _default: "./Badge";
 export default _default;

package/cjs/core/Badge/index.js

@@ -5,6 +5,6 @@ exports.Badge = 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 Badge_1 = require("./Badge");
-Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_1.Badge; } });
+var Badge_js_1 = require("./Badge.js");
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_js_1.Badge; } });
 exports.default = './Badge';

package/cjs/core/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { CommonProps } from '../utils';
+import * as React from 'react';
+import type { CommonProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/breadcrumbs.css';
 export declare type BreadcrumbsProps = {
     /**

package/cjs/core/Breadcrumbs/Breadcrumbs.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,9 +31,9 @@ exports.Breadcrumbs = 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"));
-const utils_1 = require("../utils");
+const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/breadcrumbs.css");
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track
@@ -34,19 +57,19 @@ require("@itwin/itwinui-css/css/breadcrumbs.css");
  *   <span>Current level</span>
  * </Breadcrumbs>
  */
-exports.Breadcrumbs = react_1.default.forwardRef((props, ref) => {
+exports.Breadcrumbs = React.forwardRef((props, ref) => {
     const { children: items, currentIndex = items.length - 1, separator, overflowButton, className, ...rest } = props;
-    (0, utils_1.useTheme)();
-    const [overflowRef, visibleCount] = (0, utils_1.useOverflow)(items);
-    const refs = (0, utils_1.useMergedRefs)(overflowRef, ref);
-    return (react_1.default.createElement("nav", { className: (0, classnames_1.default)('iui-breadcrumbs', className), ref: refs, "aria-label": 'Breadcrumb', ...rest },
-        react_1.default.createElement("ol", { className: 'iui-breadcrumbs-list' },
-            visibleCount > 1 && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(ListItem, { item: items[0], isActive: currentIndex === 0 }),
-                react_1.default.createElement(Separator, { separator: separator }))),
-            items.length - visibleCount > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("li", { className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' }, overflowButton ? (overflowButton(visibleCount)) : (react_1.default.createElement("span", { className: 'iui-breadcrumbs-text' }, "\u2026"))),
-                react_1.default.createElement(Separator, { separator: separator }))),
+    (0, index_js_1.useTheme)();
+    const [overflowRef, visibleCount] = (0, index_js_1.useOverflow)(items);
+    const refs = (0, index_js_1.useMergedRefs)(overflowRef, ref);
+    return (React.createElement("nav", { className: (0, classnames_1.default)('iui-breadcrumbs', className), ref: refs, "aria-label": 'Breadcrumb', ...rest },
+        React.createElement("ol", { className: 'iui-breadcrumbs-list' },
+            visibleCount > 1 && (React.createElement(React.Fragment, null,
+                React.createElement(ListItem, { item: items[0], isActive: currentIndex === 0 }),
+                React.createElement(Separator, { separator: separator }))),
+            items.length - visibleCount > 0 && (React.createElement(React.Fragment, null,
+                React.createElement("li", { className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' }, overflowButton ? (overflowButton(visibleCount)) : (React.createElement("span", { className: 'iui-breadcrumbs-text' }, "\u2026"))),
+                React.createElement(Separator, { separator: separator }))),
             items
                 .slice(visibleCount > 1
                 ? items.length - visibleCount + 1
@@ -55,18 +78,18 @@ exports.Breadcrumbs = react_1.default.forwardRef((props, ref) => {
                 const index = visibleCount > 1
                     ? 1 + (items.length - visibleCount) + _index
                     : items.length - 1;
-                return (react_1.default.createElement(react_1.default.Fragment, { key: index },
-                    react_1.default.createElement(ListItem, { item: items[index], isActive: currentIndex === index }),
-                    index < items.length - 1 && (react_1.default.createElement(Separator, { separator: separator }))));
+                return (React.createElement(React.Fragment, { key: index },
+                    React.createElement(ListItem, { item: items[index], isActive: currentIndex === index }),
+                    index < items.length - 1 && (React.createElement(Separator, { separator: separator }))));
             }))));
 });
 const ListItem = ({ item, isActive, }) => {
     var _a;
-    return (react_1.default.createElement("li", { className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' }, react_1.default.isValidElement(item)
-        ? react_1.default.cloneElement(item, {
+    return (React.createElement("li", { className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' }, React.isValidElement(item)
+        ? React.cloneElement(item, {
             'aria-current': ((_a = item.props['aria-current']) !== null && _a !== void 0 ? _a : isActive) ? 'location' : undefined,
         })
         : item));
 };
-const Separator = ({ separator }) => (react_1.default.createElement("li", { className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator !== null && separator !== void 0 ? separator : react_1.default.createElement(utils_1.SvgChevronRight, null)));
+const Separator = ({ separator }) => (React.createElement("li", { className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator !== null && separator !== void 0 ? separator : React.createElement(index_js_1.SvgChevronRight, null)));
 exports.default = exports.Breadcrumbs;

package/cjs/core/Breadcrumbs/index.d.ts

@@ -1,4 +1,4 @@
-export { Breadcrumbs } from './Breadcrumbs';
-export type { BreadcrumbsProps } from './Breadcrumbs';
+export { Breadcrumbs } from './Breadcrumbs.js';
+export type { BreadcrumbsProps } from './Breadcrumbs.js';
 declare const _default: "./Breadcrumbs";
 export default _default;