@itwin/itwinui-react 2.11.5 → 3.0.0-dev.1

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## 3.0.0-dev.1
+
+### Major Changes
+
+- [#1302](https://github.com/iTwin/iTwinUI/pull/1302): The dependencies on `@itwin/itwinui-css` and `@itwin/itwinui-variable` have been removed. This means `@itwin/itwinui-react` will bring its own stylesheet.
+- [#1322](https://github.com/iTwin/iTwinUI/pull/1322): All css imports within components have been removed. `@itwin/itwinui-react/styles.css` must now be manually imported at the entrypoint.
+- [#1302](https://github.com/iTwin/iTwinUI/pull/1302): All elements have had their class names changed to prevent conflict with older versions. It is strongly recommended to switch these internal classes with your own classes or data attributes.
+
+### Minor Changes
+
+- [#1321](https://github.com/iTwin/iTwinUI/pull/1321): Added `disabled` prop to ExpandableBlock component. When activated, it triggers the "disabled" CSS styling for the ExpandableBlock and disables user interaction with it.
+- [#1073](https://github.com/iTwin/iTwinUI/pull/1073): Added new `TransferList` component which is used to move one or more items between lists. Added the following subcomponents: `TransferList.ListWrapper`, `TransferList.ListboxWrapper`, `TransferList.ListboxLabel`, `TransferList.Listbox`, `TransferList.Item`, and `TransferList.Toolbar`
+- [#1323](https://github.com/iTwin/iTwinUI/pull/1323): Added `placement` prop to `Dialog` to allow placing it at one of the corners.
+
+## 3.0.0-dev.0
+
+### Major Changes
+
+- [#1296](https://github.com/iTwin/iTwinUI/pull/1296): Removed previously-deprecated typography components (`Body`, `Headline`, `Leading`, `Small`, `Subheading`, `Title`) which have been replaced by `Text`.
+- [#1265](https://github.com/iTwin/iTwinUI/pull/1265): Removed the deprecated `useTheme` hook. `<ThemeProvider>` is now always required to be wrapped around all iTwinUI components.
+- [#1278](https://github.com/iTwin/iTwinUI/pull/1278): Adjusted calculations in ButtonGroup's `overflowButton` callback, so that it respects `overflowPlacement` and considers the presence of the overflowButton itself.
+- [#1295](https://github.com/iTwin/iTwinUI/pull/1295): Deprecated MenuItem's `icon` and `badge` props in favor of new `startIcon` and `endIcon` props. Also affects `Select` and `ComboBox` options.
+- [#1298](https://github.com/iTwin/iTwinUI/pull/1298): `Props` types will no longer be exported for any component. Use `React.ComponentProps` instead.
+- [#1304](https://github.com/iTwin/iTwinUI/pull/1304): Instead of cloning passed icons to set classes on them, the classes will now be set on a wrapping element. Affected components: `Header`, `Select`, `MenuItem`, `RadioTile`, `Tabs`, `ToggleSwitch`, `TreeNode`, `InputContainer` (and all input variants).
+- [#1269](https://github.com/iTwin/iTwinUI/pull/1269): All dialog variants have `flex` applied by default. This means the content should be wrapped with `Dialog.Content` or `ModalContent` for optimal layout.
+
+### Minor Changes
+
+- [#1298](https://github.com/iTwin/iTwinUI/pull/1298): Most components are now polymorphic and forward their rest props and ref.
+
+### Patch Changes
+
+- Updated dependencies:
+  - @itwin/itwinui-css@2.0.0-dev.0
+
 ## 2.11.5
 
 ### Patch Changes

package/README.md

@@ -2,10 +2,10 @@
   <picture>
     <source
       media='(prefers-color-scheme: dark)'
-      srcSet='https://itwinplatformcdn.azureedge.net/iTwinUI/iTwinUI-new-dark-logo.png'
+      srcset='https://itwin.github.io/iTwinUI/dev/logo-dark.svg'
     />
     <img
-      src='https://itwinplatformcdn.azureedge.net/iTwinUI/iTwinUI-new-logo.png'
+      src='https://itwin.github.io/iTwinUI/dev/logo.svg'
       alt='iTwinUI logo'
     />
   </picture>
@@ -39,43 +39,49 @@ yarn add @itwin/itwinui-react
 
 ---
 
-## Usage
+## Setup
 
-Import the component you want and start using it!
+Wrap your application entrypoint in `ThemeProvider` and import `styles.css`.
 
 ```jsx
-import { Button } from '@itwin/itwinui-react';
-
-const App = () => (
-  <Button>Hello!</Button>
-);
+import { ThemeProvider } from '@itwin/itwinui-react';
+import '@itwin/itwinui-react/styles.css';
+
+export default function App() {
+  return (
+    <>
+      <ThemeProvider>
+        {/* Your components go here. */}
+      </ThemeProvider>
+    </>
+  );
+}
 ```
 
-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/cra-sandbox?file=/src/App.tsx)
+ThemeProvider has a `theme` prop which accepts one of the following values:
+  - `light` (default)
+  - `dark`
+  - `os` (respects the color scheme of the operating system)
+  - `inherit`
 
 ---
 
-## Theming
+## Usage
 
-By default, all components use the light theme, but we recommend wrapping your root element with `ThemeProvider`. You can pass one of the following values to its `theme` prop:
-  - `light` (default)
-  - `dark`
-  - `os` (which respects the color scheme of the operating system)
+After setting up ThemeProvider and styles, import the component you want and start using it!
 
 ```jsx
-import { ThemeProvider } from '@itwin/itwinui-react';
+import { Button } from '@itwin/itwinui-react';
 
-const App = () => (
-  <>
-    <ThemeProvider theme='dark'>
-      {/* Your components go here. */}
-    </ThemeProvider>
-  </>
+const Page = () => (
+  <Button>Hello!</Button>
 );
 ```
 
+Check out this template for a live interactive demo:
+
+[![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)
+
 ---
 
 ## FAQ

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/alert.css';
-import type { CommonProps } from '../utils/props.js';
-export declare type AlertProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type AlertProps = {
     /**
      * Type of the alert.
      * @default 'informational'
@@ -28,7 +27,7 @@ export declare type AlertProps = {
      * Alert message text.
      */
     children: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * A small box to quickly grab user attention and communicate a brief message
  * @example
@@ -44,5 +43,5 @@ export declare type AlertProps = {
  *   This is a positive alert with a clickable text
  * </Alert>
  */
-export declare const Alert: (props: AlertProps) => JSX.Element;
+export declare const Alert: PolymorphicForwardRefComponent<"div", AlertProps>;
 export default Alert;

package/cjs/core/Alert/Alert.js

@@ -33,7 +33,6 @@ exports.Alert = void 0;
  *--------------------------------------------------------------------------------------------*/
 const classnames_1 = __importDefault(require("classnames"));
 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
@@ -50,18 +49,16 @@ const index_js_1 = require("../utils/index.js");
  *   This is a positive alert with a clickable text
  * </Alert>
  */
-const Alert = (props) => {
-    const { children, className, type = 'informational', clickableText, clickableTextProps, onClose, style, isSticky = false, ...rest } = props;
-    (0, index_js_1.useTheme)();
+exports.Alert = React.forwardRef((props, ref) => {
+    const { children, className, type = 'informational', clickableText, clickableTextProps, onClose, isSticky = false, ...rest } = props;
     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 },
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-alert', className), "data-iui-status": type, "data-iui-variant": isSticky ? 'sticky' : undefined, ref: ref, ...rest },
         React.createElement(StatusIcon, { className: 'iui-alert-icon' }),
-        React.createElement("span", { className: 'iui-alert-message' },
+        React.createElement(index_js_1.Box, { as: 'span', className: 'iui-alert-message' },
             children,
-            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 },
+            clickableText && (React.createElement(index_js_1.Box, { as: 'a', ...clickableTextProps, className: (0, classnames_1.default)('iui-alert-link', clickableTextProps === null || clickableTextProps === void 0 ? void 0 : clickableTextProps.className) }, clickableText))),
+        onClose && (React.createElement(index_js_1.Box, { as: 'button', onClick: onClose, "aria-label": 'Close', type: 'button', className: 'iui-alert-button' },
+            React.createElement(index_js_1.Box, { as: '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,3 @@
 export { Alert } from './Alert.js';
-export type { AlertProps } from './Alert.js';
 declare const _default: "./Alert";
 export default _default;

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

@@ -1,15 +1,10 @@
 /// <reference types="react" />
-import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/avatar.css';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export declare type AvatarStatus = 'online' | 'busy' | 'away' | 'offline';
-/**
- * @deprecated Since v2, this has been renamed to `AvatarStatus` (Use with `Avatar`)
- */
-export declare type UserIconStatus = AvatarStatus;
-export declare type StatusTitles = {
+declare type StatusTitles = {
     [key in Exclude<AvatarStatus, ''>]: string;
 };
-export declare type AvatarProps = {
+declare type AvatarProps = {
     /**
      * Size of an avatar.
      * @default 'small'
@@ -39,11 +34,7 @@ export declare type AvatarProps = {
      * Translated status messages shown on hover.
      */
     translatedStatusTitles?: StatusTitles;
-} & Omit<CommonProps, 'title'>;
-/**
- * @deprecated Since v2, this has been renamed to `AvatarProps` (Use with `Avatar`)
- */
-export declare type UserIconProps = AvatarProps;
+};
 export declare const defaultStatusTitles: StatusTitles;
 /**
  * Basic avatar component
@@ -60,9 +51,9 @@ export declare const defaultStatusTitles: StatusTitles;
  * <caption>X-large icon with image</caption>
  * <Avatar size='x-large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
  */
-export declare const Avatar: (props: AvatarProps) => JSX.Element;
+export declare const Avatar: PolymorphicForwardRefComponent<"span", AvatarProps>;
 /**
  * @deprecated Since v2, this has been renamed to `Avatar`
  */
-export declare const UserIcon: (props: AvatarProps) => JSX.Element;
+export declare const UserIcon: PolymorphicForwardRefComponent<"span", AvatarProps>;
 export default Avatar;

package/cjs/core/Avatar/Avatar.js

@@ -34,7 +34,6 @@ exports.UserIcon = exports.Avatar = exports.defaultStatusTitles = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/avatar.css");
 exports.defaultStatusTitles = {
     away: 'Away',
     busy: 'Busy',
@@ -56,19 +55,17 @@ exports.defaultStatusTitles = {
  * <caption>X-large icon with image</caption>
  * <Avatar size='x-large' title='Terry Rivers' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
  */
-const Avatar = (props) => {
+exports.Avatar = React.forwardRef((props, ref) => {
     const { size = 'small', status, abbreviation, image, backgroundColor, title, translatedStatusTitles, className, style, ...rest } = props;
-    (0, index_js_1.useTheme)();
     const statusTitles = { ...exports.defaultStatusTitles, ...translatedStatusTitles };
-    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))),
+    return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-avatar', { [`iui-${size}`]: size !== 'medium' }, className), title: title, style: { backgroundColor, ...style }, ref: ref, ...rest },
+        !image && (React.createElement(index_js_1.Box, { as: 'abbr', className: 'iui-initials' }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
         image,
-        React.createElement("span", { className: 'iui-stroke' }),
-        status && (React.createElement("span", { title: statusTitles[status], className: (0, classnames_1.default)('iui-status', {
+        React.createElement(index_js_1.Box, { as: 'span', className: 'iui-stroke' }),
+        status && (React.createElement(index_js_1.Box, { as: 'span', title: statusTitles[status], className: (0, classnames_1.default)('iui-status', {
                 [`iui-${status}`]: !!status,
             }), "aria-label": statusTitles[status] }))));
-};
-exports.Avatar = Avatar;
+});
 /**
  * @deprecated Since v2, this has been renamed to `Avatar`
  */

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

@@ -1,4 +1,3 @@
 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/AvatarGroup/AvatarGroup.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/avatar.css';
-export declare type AvatarGroupProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type AvatarGroupProps = {
     /**
      * Max number of avatars unstacked.
      * @default 5
@@ -30,11 +29,7 @@ export declare type AvatarGroupProps = {
      * Count Avatar props.
      */
     countIconProps?: React.ComponentPropsWithRef<'div'>;
-} & Omit<CommonProps, 'title'>;
-/**
- * @deprecated Since v2, this has been renamed to `AvatarGroupProps` (Use with `AvatarGroup`)
- */
-export declare type UserIconGroupProps = AvatarGroupProps;
+};
 /**
  * Group Avatars together.
  *
@@ -62,9 +57,9 @@ export declare type UserIconGroupProps = AvatarGroupProps;
  *  />
  * </AvatarGroup>
  */
-export declare const AvatarGroup: (props: AvatarGroupProps) => JSX.Element;
+export declare const AvatarGroup: PolymorphicForwardRefComponent<"div", AvatarGroupProps>;
 /**
  * @deprecated Since v2, this has been renamed to `AvatarGroup`
  */
-export declare const UserIconGroup: (props: AvatarGroupProps) => JSX.Element;
+export declare const UserIconGroup: PolymorphicForwardRefComponent<"div", AvatarGroupProps>;
 export default AvatarGroup;

package/cjs/core/AvatarGroup/AvatarGroup.js

@@ -34,7 +34,6 @@ exports.UserIconGroup = exports.AvatarGroup = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/avatar.css");
 /**
  * Group Avatars together.
  *
@@ -62,33 +61,30 @@ require("@itwin/itwinui-css/css/avatar.css");
  *  />
  * </AvatarGroup>
  */
-const AvatarGroup = (props) => {
+exports.AvatarGroup = React.forwardRef((props, ref) => {
     const maxLength = 99;
     const { children, animated = false, stacked = true, maxIcons = 5, iconSize = 'small', countIconProps, className, ...rest } = props;
     const childrenArray = React.Children.toArray(children);
     const childrenLength = childrenArray.length;
-    (0, index_js_1.useTheme)();
     const getAvatarList = (count) => {
         return childrenArray.slice(0, count).map((child) => React.cloneElement(child, {
             status: undefined,
             size: iconSize,
         }));
     };
-    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.createElement(React.Fragment, null,
-                getAvatarList(maxIcons),
-                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.createElement("span", { className: 'iui-stroke' })))))));
-};
-exports.AvatarGroup = AvatarGroup;
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-avatar-list', {
+            'iui-animated': animated,
+            'iui-stacked': stacked,
+        }, className), ref: ref, ...rest },
+        childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1),
+        childrenArray.length > maxIcons + 1 && (React.createElement(React.Fragment, null,
+            getAvatarList(maxIcons),
+            React.createElement(index_js_1.Box, { ...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(index_js_1.Box, { as: 'abbr', className: 'iui-initials' }, childrenLength <= maxLength
+                    ? `${childrenLength - maxIcons}`
+                    : `${maxLength}+`),
+                React.createElement(index_js_1.Box, { className: 'iui-stroke' }))))));
+});
 /**
  * @deprecated Since v2, this has been renamed to `AvatarGroup`
  */

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

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

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

@@ -1,10 +1,9 @@
-import * as React from 'react';
-import '@itwin/itwinui-css/css/backdrop.css';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export declare type BackdropProps = {
     /**
      * Flag whether backdrop should be shown.
      * @default true
      */
     isVisible?: boolean;
-} & React.ComponentPropsWithRef<'div'>;
-export declare const Backdrop: React.ForwardRefExoticComponent<Pick<BackdropProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "isVisible"> & React.RefAttributes<HTMLDivElement>>;
+};
+export declare const Backdrop: PolymorphicForwardRefComponent<"div", BackdropProps>;

package/cjs/core/Backdrop/Backdrop.js

@@ -34,9 +34,7 @@ exports.Backdrop = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-require("@itwin/itwinui-css/css/backdrop.css");
 exports.Backdrop = React.forwardRef((props, ref) => {
     const { isVisible = true, className, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-backdrop', { 'iui-backdrop-visible': isVisible }, className), ref: ref, ...rest }));
+    return (React.createElement(index_js_1.Box, { 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 @@
 export { Backdrop } from './Backdrop.js';
-export type { BackdropProps } from './Backdrop.js';

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

@@ -1,9 +1,6 @@
-/// <reference types="react" />
 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 = {
+import type { AnyString, PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type BadgeProps = {
     /**
      * Background color of the badge.
      *
@@ -17,7 +14,7 @@ export declare type BadgeProps = {
      * Always gets converted to uppercase, and truncated if too long.
      */
     children: string;
-} & CommonProps;
+};
 /**
  * A colorful visual indicator for categorizing items.
  * @example
@@ -25,5 +22,5 @@ export declare type BadgeProps = {
  * <Badge backgroundColor="sunglow">Label</Badge>
  * <Badge backgroundColor="positive">Label</Badge>
  */
-export declare const Badge: (props: BadgeProps) => JSX.Element;
+export declare const Badge: PolymorphicForwardRefComponent<"span", BadgeProps>;
 export default Badge;

package/cjs/core/Badge/Badge.js

@@ -34,7 +34,6 @@ exports.Badge = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 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.
  */
@@ -58,9 +57,8 @@ const getStatusValue = (color) => {
  * <Badge backgroundColor="sunglow">Label</Badge>
  * <Badge backgroundColor="positive">Label</Badge>
  */
-const Badge = (props) => {
+exports.Badge = React.forwardRef((props, forwardedRef) => {
     const { backgroundColor, style, className, children, ...rest } = props;
-    (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);
@@ -70,7 +68,6 @@ const Badge = (props) => {
             ...style,
         }
         : { ...style };
-    return (React.createElement("span", { className: (0, classnames_1.default)('iui-badge', className), style: _style, "data-iui-status": statusValue, ...rest }, children));
-};
-exports.Badge = Badge;
+    return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-badge', className), style: _style, "data-iui-status": statusValue, ref: forwardedRef, ...rest }, children));
+});
 exports.default = exports.Badge;

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

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

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/breadcrumbs.css';
-export declare type BreadcrumbsProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type BreadcrumbsProps = {
     /**
      * Index of the currently active breadcrumb.
      * Defaults to the index of the last breadcrumb item.
@@ -74,7 +73,7 @@ export declare type BreadcrumbsProps = {
      *  </Breadcrumbs>
      */
     overflowButton?: (visibleCount: number) => React.ReactNode;
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track
  * of their place in the application. It is often placed before a page's main content.
@@ -97,78 +96,5 @@ export declare type BreadcrumbsProps = {
  *   <span>Current level</span>
  * </Breadcrumbs>
  */
-export declare const Breadcrumbs: React.ForwardRefExoticComponent<{
-    /**
-     * Index of the currently active breadcrumb.
-     * Defaults to the index of the last breadcrumb item.
-     */
-    currentIndex?: number | undefined;
-    /**
-     * Breadcrumb items.
-     */
-    children: React.ReactNode[];
-    /**
-     * Specify a custom separator element to show between breadcrumb items.
-     * Defaults to the `SvgChevronRight` icon.
-     */
-    separator?: React.ReactNode;
-    /**
-     * If specified, this prop will be used to show a custom button when overflow happens,
-     * i.e. when there is not enough space to fit all the breadcrumbs.
-     *
-     * Expects a function that takes the number of items that are visible
-     * and returns the `ReactNode` to render.
-     *
-     * @example <caption>Uses the overflow button to redirect to the previous breadcrumb</caption>
-     *  <Breadcrumbs
-     *    overflowButton={(visibleCount: number) => {
-     *      const previousBreadcrumb = visibleCount > 1 ? items.length - visibleCount : items.length - 2;
-     *      return (
-     *        <Tooltip content={`Item ${previousBreadcrumb}`} placement='bottom'>
-     *          <IconButton
-     *            onClick={() => {
-     *              // click on "previousBreadcrumb"
-     *            }}
-     *          >
-     *            <SvgMoreSmall />
-     *          </IconButton>
-     *        </Tooltip>
-     *      );
-     *    }}
-     *  >
-     *    {items}
-     *  </Breadcrumbs>
-     *
-     * @example <caption>Uses the overflow button to add a dropdown that contains hidden breadcrumbs</caption>
-     *  <Breadcrumbs
-     *    overflowButton={(visibleCount) => (
-     *      <DropdownMenu
-     *        menuItems={(close) =>
-     *          Array(items.length - visibleCount)
-     *            .fill(null)
-     *            .map((_, _index) => {
-     *              const index = visibleCount > 1 ? _index + 1 : _index;
-     *              const onClick = () => {
-     *                // click on "index" breadcrumb
-     *                close();
-     *              };
-     *              return (
-     *                <MenuItem key={index} onClick={onClick}>
-     *                  Item {index}
-     *                </MenuItem>
-     *              );
-     *            })
-     *        }
-     *      >
-     *        <IconButton>
-     *          <SvgMoreSmall />
-     *        </IconButton>
-     *      </DropdownMenu>
-     *    )}
-     *  >
-     *    {items}
-     *  </Breadcrumbs>
-     */
-    overflowButton?: ((visibleCount: number) => React.ReactNode) | undefined;
-} & Omit<CommonProps, "title"> & React.RefAttributes<HTMLElement>>;
+export declare const Breadcrumbs: PolymorphicForwardRefComponent<"nav", BreadcrumbsProps>;
 export default Breadcrumbs;

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -34,7 +34,6 @@ exports.Breadcrumbs = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 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
  * of their place in the application. It is often placed before a page's main content.
@@ -59,16 +58,15 @@ require("@itwin/itwinui-css/css/breadcrumbs.css");
  */
 exports.Breadcrumbs = React.forwardRef((props, ref) => {
     const { children: items, currentIndex = items.length - 1, separator, overflowButton, className, ...rest } = props;
-    (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' },
+    return (React.createElement(index_js_1.Box, { as: 'nav', className: (0, classnames_1.default)('iui-breadcrumbs', className), ref: refs, "aria-label": 'Breadcrumb', ...rest },
+        React.createElement(index_js_1.Box, { as: '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(index_js_1.Box, { as: 'li', className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' }, overflowButton ? (overflowButton(visibleCount)) : (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-breadcrumbs-text' }, "\u2026"))),
                 React.createElement(Separator, { separator: separator }))),
             items
                 .slice(visibleCount > 1
@@ -85,11 +83,11 @@ exports.Breadcrumbs = React.forwardRef((props, ref) => {
 });
 const ListItem = ({ item, isActive, }) => {
     var _a;
-    return (React.createElement("li", { className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' }, React.isValidElement(item)
+    return (React.createElement(index_js_1.Box, { as: '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.createElement("li", { className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator !== null && separator !== void 0 ? separator : React.createElement(index_js_1.SvgChevronRight, null)));
+const Separator = ({ separator }) => (React.createElement(index_js_1.Box, { as: '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,3 @@
 export { Breadcrumbs } from './Breadcrumbs.js';
-export type { BreadcrumbsProps } from './Breadcrumbs.js';
 declare const _default: "./Breadcrumbs";
 export default _default;