@itwin/itwinui-react 2.11.4 → 3.0.0-dev.0

package/cjs/core/Footer/FooterList.js

@@ -1,47 +1,14 @@
 "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 };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FooterList = 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 = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-const classnames_1 = __importDefault(require("classnames"));
 require("@itwin/itwinui-css/css/footer.css");
 /**
  * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.
  */
-const FooterList = (props) => {
-    const { className, children, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("ul", { className: (0, classnames_1.default)('iui-legal-footer-list', className), ...rest }, children));
-};
-exports.FooterList = FooterList;
+exports.FooterList = index_js_1.polymorphic.ul('iui-legal-footer-list');
 exports.default = exports.FooterList;

package/cjs/core/Footer/FooterSeparator.d.ts

@@ -1,8 +1,6 @@
-import * as React from 'react';
 import '@itwin/itwinui-css/css/footer.css';
-export declare type FooterSeparatorProps = Omit<React.ComponentPropsWithRef<'li'>, 'children'>;
 /**
  * Footer separator. Recommended to use inside `Footer.List`.
  */
-export declare const FooterSeparator: (props: FooterSeparatorProps) => JSX.Element;
+export declare const FooterSeparator: import("../utils/props.js").PolymorphicForwardRefComponent<"li", {}>;
 export default FooterSeparator;

package/cjs/core/Footer/FooterSeparator.js

@@ -1,47 +1,16 @@
 "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 };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FooterSeparator = 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 = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
-const classnames_1 = __importDefault(require("classnames"));
 require("@itwin/itwinui-css/css/footer.css");
 /**
  * Footer separator. Recommended to use inside `Footer.List`.
  */
-const FooterSeparator = (props) => {
-    const { className, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("li", { className: (0, classnames_1.default)('iui-legal-footer-separator', className), "aria-hidden": true, ...rest }));
-};
-exports.FooterSeparator = FooterSeparator;
+exports.FooterSeparator = index_js_1.polymorphic.li('iui-legal-footer-separator', {
+    'aria-hidden': true,
+});
 exports.default = exports.FooterSeparator;

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

@@ -1,4 +1,4 @@
 export { Footer, defaultFooterElements } from './Footer.js';
-export type { FooterElement, FooterProps, TitleTranslations, } from './Footer.js';
+export type { FooterElement, TitleTranslations } from './Footer.js';
 declare const _default: "./Footer";
 export default _default;

package/cjs/core/Header/Header.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/header.css';
-export declare type HeaderTranslations = {
+declare type HeaderTranslations = {
     /**
      * 'More' menu button aria-label.
      */
     moreOptions: string;
 };
-export declare type HeaderProps = {
+declare type HeaderProps = {
     /**
      * Application logo.
      * (expects `HeaderLogo`)
@@ -83,7 +83,7 @@ export declare type HeaderProps = {
      * Provide localized strings.
      */
     translatedStrings?: HeaderTranslations;
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * Application header
  * @example
@@ -111,5 +111,5 @@ export declare type HeaderProps = {
  *  isSlim
  * />
  */
-export declare const Header: (props: HeaderProps) => JSX.Element;
+export declare const Header: PolymorphicForwardRefComponent<"header", HeaderProps>;
 export default Header;

package/cjs/core/Header/Header.js

@@ -67,22 +67,20 @@ const defaultTranslations = {
  *  isSlim
  * />
  */
-const Header = (props) => {
+exports.Header = React.forwardRef((props, forwardedRef) => {
     const { appLogo, breadcrumbs, isSlim = false, actions, userIcon, menuItems, translatedStrings, className, children, ...rest } = props;
-    (0, index_js_2.useTheme)();
     const headerTranslations = { ...defaultTranslations, ...translatedStrings };
-    return (React.createElement("header", { className: (0, classnames_1.default)('iui-page-header', className), "data-iui-size": isSlim ? 'slim' : undefined, ...rest },
-        React.createElement("div", { className: 'iui-page-header-left' },
+    return (React.createElement(index_js_2.Box, { as: 'header', className: (0, classnames_1.default)('iui-page-header', className), "data-iui-size": isSlim ? 'slim' : undefined, ref: forwardedRef, ...rest },
+        React.createElement(index_js_2.Box, { className: 'iui-page-header-left' },
             appLogo,
-            breadcrumbs && React.createElement("div", { className: 'iui-page-header-divider' }),
+            breadcrumbs && React.createElement(index_js_2.Box, { className: 'iui-page-header-divider' }),
             breadcrumbs),
-        children && React.createElement("div", { className: 'iui-page-header-center' }, children),
-        React.createElement("div", { className: 'iui-page-header-right' },
+        children && React.createElement(index_js_2.Box, { className: 'iui-page-header-center' }, children),
+        React.createElement(index_js_2.Box, { className: 'iui-page-header-right' },
             actions,
             userIcon,
             menuItems && (React.createElement(index_js_3.DropdownMenu, { menuItems: menuItems },
                 React.createElement(index_js_1.IconButton, { styleType: 'borderless', "aria-label": headerTranslations.moreOptions },
                     React.createElement(index_js_2.SvgMoreVertical, { "aria-hidden": true })))))));
-};
-exports.Header = Header;
+});
 exports.default = exports.Header;

package/cjs/core/Header/HeaderBasicButton.d.ts

@@ -1,6 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { ButtonProps } from '../Buttons/index.js';
-export declare type HeaderBasicButtonProps = ButtonProps;
-declare type HeaderBasicButtonComponent = PolymorphicForwardRefComponent<'button', HeaderBasicButtonProps>;
-export declare const HeaderBasicButton: HeaderBasicButtonComponent;
+import type { ButtonProps } from '../Buttons/Button/Button.js';
+export declare const HeaderBasicButton: PolymorphicForwardRefComponent<"button", ButtonProps>;
 export default HeaderBasicButton;

package/cjs/core/Header/HeaderBasicButton.js

@@ -35,19 +35,12 @@ const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
 exports.HeaderBasicButton = React.forwardRef((props, ref) => {
-    const { onClick, className, children, style, type = 'button', startIcon, endIcon, as: Element = 'button', styleType, size, ...rest } = props;
+    const { onClick, className, children, style, startIcon, endIcon, styleType, size, ...rest } = props;
     styleType; // To omit and prevent eslint error.
     size; // To omit and prevent eslint error.
-    (0, index_js_1.useTheme)();
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-header-breadcrumb-button', className), onClick: onClick, ref: ref, type: type, style: style, ...rest },
-        startIcon &&
-            React.cloneElement(startIcon, {
-                className: startIcon.props.className,
-            }),
+    return (React.createElement(index_js_1.Box, { as: 'button', className: (0, classnames_1.default)('iui-header-breadcrumb-button', className), onClick: onClick, ref: ref, type: 'button', style: style, ...rest },
+        startIcon,
         children,
-        endIcon &&
-            React.cloneElement(endIcon, {
-                className: endIcon.props.className,
-            })));
+        endIcon));
 });
 exports.default = exports.HeaderBasicButton;

package/cjs/core/Header/HeaderBreadcrumbs.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/header.css';
-export declare type HeaderBreadcrumbsProps = {
+declare type HeaderBreadcrumbsProps = {
     /**
      * Array of elements, chevrons will be put between them.
      * (expects HeaderButton[])
@@ -22,5 +23,5 @@ export declare type HeaderBreadcrumbsProps = {
  *   ]}
  * />
  */
-export declare const HeaderBreadcrumbs: (props: HeaderBreadcrumbsProps) => JSX.Element;
+export declare const HeaderBreadcrumbs: PolymorphicForwardRefComponent<"nav", HeaderBreadcrumbsProps>;
 export default HeaderBreadcrumbs;

package/cjs/core/Header/HeaderBreadcrumbs.js

@@ -22,6 +22,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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.HeaderBreadcrumbs = void 0;
 /*---------------------------------------------------------------------------------------------
@@ -29,6 +32,7 @@ exports.HeaderBreadcrumbs = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/header.css");
 /**
@@ -41,16 +45,14 @@ require("@itwin/itwinui-css/css/header.css");
  *   ]}
  * />
  */
-const HeaderBreadcrumbs = (props) => {
-    const { items, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("nav", { "aria-label": 'breadcrumbs', className: 'iui-header-breadcrumbs', ...rest },
-        React.createElement("ol", { className: 'iui-header-breadcrumbs-list' }, items.reduce((previous, current, index) => [
+exports.HeaderBreadcrumbs = React.forwardRef((props, forwardedRef) => {
+    const { className, items, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { as: 'nav', "aria-label": 'breadcrumbs', className: (0, classnames_1.default)('iui-header-breadcrumbs', className), ref: forwardedRef, ...rest },
+        React.createElement(index_js_1.Box, { as: 'ol', className: 'iui-header-breadcrumbs-list' }, items.reduce((previous, current, index) => [
             ...previous,
             current,
-            index !== items.length - 1 && (React.createElement("li", { className: 'iui-breadcrumbs-separator', key: index },
+            index !== items.length - 1 && (React.createElement(index_js_1.Box, { as: 'li', className: 'iui-breadcrumbs-separator', key: index },
                 React.createElement(index_js_1.SvgChevronRight, { key: `chevron${index}`, "aria-hidden": true, className: 'iui-chevron' }))),
         ], []))));
-};
-exports.HeaderBreadcrumbs = HeaderBreadcrumbs;
+});
 exports.default = exports.HeaderBreadcrumbs;

package/cjs/core/Header/HeaderButton.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import type { ButtonProps } from '../Buttons/index.js';
+import type { ButtonProps } from '../Buttons/Button/Button.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/header.css';
-import type { HeaderDropdownButtonProps } from './HeaderDropdownButton.js';
-export declare type HeaderButtonProps = {
+import type { DropdownButtonProps } from '../Buttons/DropdownButton/DropdownButton.js';
+declare type HeaderButtonProps = {
     /**
      * Main label of the header button.
      */
@@ -17,8 +17,7 @@ export declare type HeaderButtonProps = {
      * @default false
      */
     isActive?: boolean;
-} & Partial<Pick<HeaderDropdownButtonProps, 'menuItems'>> & Pick<ButtonProps, 'startIcon' | 'endIcon'>;
-declare type HeaderButtonComponent = PolymorphicForwardRefComponent<'button', HeaderButtonProps>;
+} & Partial<Pick<DropdownButtonProps, 'menuItems'>> & Pick<ButtonProps, 'startIcon' | 'endIcon'>;
 /**
  * Header button that handles slim state of the `Header` it's in.
  * When in slim mode, will only display the name and reduce icon size.
@@ -29,5 +28,5 @@ declare type HeaderButtonComponent = PolymorphicForwardRefComponent<'button', He
  * <HeaderButton name='Project C' startIcon={<img style={{ objectFit: 'cover' }} src='project.png' />} />
  * <HeaderButton name='Project D' isActive />
  */
-export declare const HeaderButton: HeaderButtonComponent;
+export declare const HeaderButton: PolymorphicForwardRefComponent<"button", HeaderButtonProps>;
 export default HeaderButton;

package/cjs/core/Header/HeaderButton.js

@@ -26,24 +26,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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.HeaderButton = 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/header.css");
 const HeaderSplitButton_js_1 = require("./HeaderSplitButton.js");
 const HeaderDropdownButton_js_1 = require("./HeaderDropdownButton.js");
 const HeaderBasicButton_js_1 = require("./HeaderBasicButton.js");
-const isSplitButton = (props) => {
-    return !!props.menuItems && !!props.onClick;
-};
-const isDropdownButton = (props) => {
-    return !!props.menuItems;
-};
 /**
  * Header button that handles slim state of the `Header` it's in.
  * When in slim mode, will only display the name and reduce icon size.
@@ -55,24 +45,18 @@ const isDropdownButton = (props) => {
  * <HeaderButton name='Project D' isActive />
  */
 exports.HeaderButton = React.forwardRef((props, ref) => {
-    const { name, description, isActive = false, className, startIcon, menuItems, disabled, ...rest } = props;
-    (0, index_js_1.useTheme)();
+    const { name, description, isActive = false, startIcon, menuItems, disabled, ...rest } = props;
     const buttonProps = {
-        startIcon: React.isValidElement(startIcon)
-            ? React.cloneElement(startIcon, {
-                className: (0, classnames_1.default)('iui-header-breadcrumb-button-icon', startIcon.props.className),
-            })
-            : undefined,
-        className: className,
-        children: (React.createElement("span", { className: 'iui-header-breadcrumb-button-text' },
-            React.createElement("span", { className: 'iui-header-breadcrumb-button-text-label' }, name),
-            description && (React.createElement("span", { className: 'iui-header-breadcrumb-button-text-sublabel' }, description)))),
+        startIcon: startIcon ? (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-header-breadcrumb-button-icon', "aria-hidden": true }, startIcon)) : null,
+        children: (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-header-breadcrumb-button-text' },
+            React.createElement(index_js_1.Box, { as: 'span', className: 'iui-header-breadcrumb-button-text-label' }, name),
+            description && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-header-breadcrumb-button-text-sublabel' }, description)))),
         ref: ref,
         disabled: disabled,
         ...(!!menuItems && { menuItems }),
         ...rest,
-    };
-    const headerButton = isSplitButton(buttonProps) ? (React.createElement(HeaderSplitButton_js_1.HeaderSplitButton, { ...buttonProps })) : isDropdownButton(buttonProps) ? (React.createElement(HeaderDropdownButton_js_1.HeaderDropdownButton, { ...buttonProps })) : (React.createElement(HeaderBasicButton_js_1.HeaderBasicButton, { ...buttonProps }));
-    return (React.createElement("li", { className: 'iui-header-breadcrumb-item', "aria-current": isActive ? 'location' : undefined, "aria-disabled": disabled ? 'true' : undefined }, headerButton));
+    }; // eslint-disable-line @typescript-eslint/no-explicit-any
+    const headerButton = !!props.menuItems && !!props.onClick ? (React.createElement(HeaderSplitButton_js_1.HeaderSplitButton, { ...buttonProps })) : !!props.menuItems ? (React.createElement(HeaderDropdownButton_js_1.HeaderDropdownButton, { ...buttonProps })) : (React.createElement(HeaderBasicButton_js_1.HeaderBasicButton, { ...buttonProps }));
+    return (React.createElement(index_js_1.Box, { as: 'li', className: 'iui-header-breadcrumb-item', "aria-current": isActive ? 'location' : undefined, "aria-disabled": disabled ? 'true' : undefined }, headerButton));
 });
 exports.default = exports.HeaderButton;

package/cjs/core/Header/HeaderDropdownButton.d.ts

@@ -1,6 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { DropdownButtonProps } from '../Buttons/index.js';
-export declare type HeaderDropdownButtonProps = DropdownButtonProps;
-declare type HeaderDropdownButtonComponent = PolymorphicForwardRefComponent<'button', HeaderDropdownButtonProps>;
-export declare const HeaderDropdownButton: HeaderDropdownButtonComponent;
+import type { DropdownButtonProps } from '../Buttons/DropdownButton/DropdownButton.js';
+export declare const HeaderDropdownButton: PolymorphicForwardRefComponent<"button", DropdownButtonProps>;
 export default HeaderDropdownButton;

package/cjs/core/Header/HeaderDropdownButton.js

@@ -38,7 +38,6 @@ const index_js_2 = require("../utils/index.js");
 const HeaderBasicButton_js_1 = require("./HeaderBasicButton.js");
 exports.HeaderDropdownButton = React.forwardRef((props, ref) => {
     const { menuItems, className, children, ...rest } = props;
-    (0, index_js_2.useTheme)();
     const [isMenuOpen, setIsMenuOpen] = React.useState(false);
     const [menuWidth, setMenuWidth] = React.useState(0);
     const buttonRef = React.useRef(null);

package/cjs/core/Header/HeaderLogo.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { PolymorphicForwardRefComponent, PolymorphicComponentProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/header.css';
 declare type HeaderLogoOwnProps = {
     /**
@@ -12,7 +12,6 @@ declare type HeaderLogoOwnProps = {
      */
     onClick?: (e: unknown) => void;
 };
-export declare type HeaderLogoProps = PolymorphicComponentProps<'div', HeaderLogoOwnProps>;
 /**
  * Header Title section
  * @example

package/cjs/core/Header/HeaderLogo.js

@@ -44,17 +44,10 @@ require("@itwin/itwinui-css/css/header.css");
  * <HeaderLogo logo={<img src='data:image/png;base64,...' />}>Downloaded Image</HeaderLogo>
  */
 exports.HeaderLogo = React.forwardRef((props, ref) => {
-    const { className, children, logo, onClick, as: Element = !!onClick ? 'button' : 'div', ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement(Element, { className: (0, classnames_1.default)('iui-header-brand', className), onClick: onClick, 
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- TS complains here but it's ok; it is an implementation detail
-        // @ts-ignore
-        ref: ref, ...rest },
-        React.isValidElement(logo)
-            ? React.cloneElement(logo, {
-                className: (0, classnames_1.default)('iui-header-brand-icon', logo.props.className),
-            })
-            : undefined,
-        children && React.createElement("span", { className: 'iui-header-brand-label' }, children)));
+    const { className, children, logo, onClick, as = (!!onClick ? 'button' : 'div'), // eslint-disable-line @typescript-eslint/no-explicit-any
+    ...rest } = props;
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-header-brand', className), as: as, type: as === 'button' ? 'button' : undefined, onClick: onClick, ref: ref, ...rest },
+        logo ? (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-header-brand-icon', "aria-hidden": true }, logo)) : null,
+        children && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-header-brand-label' }, children))));
 });
 exports.default = exports.HeaderLogo;

package/cjs/core/Header/HeaderSplitButton.d.ts

@@ -1,6 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { SplitButtonProps } from '../Buttons/index.js';
-export declare type HeaderSplitButtonProps = SplitButtonProps;
-declare type HeaderSplitButtonComponent = PolymorphicForwardRefComponent<'button', HeaderSplitButtonProps>;
-export declare const HeaderSplitButton: HeaderSplitButtonComponent;
+import type { SplitButtonProps } from '../Buttons/SplitButton/SplitButton.js';
+export declare const HeaderSplitButton: PolymorphicForwardRefComponent<"button", SplitButtonProps>;
 export default HeaderSplitButton;

package/cjs/core/Header/HeaderSplitButton.js

@@ -37,8 +37,7 @@ const index_js_1 = require("../DropdownMenu/index.js");
 const index_js_2 = require("../utils/index.js");
 const HeaderBasicButton_js_1 = require("./HeaderBasicButton.js");
 exports.HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
-    const { menuItems, className, menuPlacement = 'bottom-end', children, style, title, disabled, ...rest } = props;
-    (0, index_js_2.useTheme)();
+    const { menuItems, className, menuPlacement = 'bottom-end', children, disabled, ...rest } = props;
     const [isMenuOpen, setIsMenuOpen] = React.useState(false);
     const [menuWidth, setMenuWidth] = React.useState(0);
     const ref = React.useRef(null);
@@ -47,9 +46,9 @@ exports.HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
             setMenuWidth(ref.current.offsetWidth);
         }
     }, [children]);
-    return (React.createElement("span", { className: (0, classnames_1.default)('iui-header-breadcrumb-button-wrapper', className), style: style, title: title, ref: ref },
+    return (React.createElement(index_js_2.Box, { className: (0, classnames_1.default)('iui-header-breadcrumb-button-wrapper', className), ref: ref },
         React.createElement(HeaderBasicButton_js_1.HeaderBasicButton, { ref: forwardedRef, disabled: disabled, ...rest }, children),
         React.createElement(index_js_1.DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minWidth: menuWidth }, onShow: React.useCallback(() => setIsMenuOpen(true), []), onHide: React.useCallback(() => setIsMenuOpen(false), []) },
-            React.createElement("button", { className: 'iui-header-breadcrumb-button iui-header-breadcrumb-button-split', disabled: disabled }, isMenuOpen ? (React.createElement(index_js_2.SvgCaretUpSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })) : (React.createElement(index_js_2.SvgCaretDownSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true }))))));
+            React.createElement(index_js_2.Box, { as: 'button', type: 'button', className: 'iui-header-breadcrumb-button iui-header-breadcrumb-button-split', disabled: disabled }, isMenuOpen ? (React.createElement(index_js_2.SvgCaretUpSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })) : (React.createElement(index_js_2.SvgCaretDownSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true }))))));
 });
 exports.default = exports.HeaderSplitButton;

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

@@ -1,10 +1,6 @@
 export { Header } from './Header.js';
-export type { HeaderProps } from './Header.js';
 declare const _default: "./Header";
 export default _default;
 export { HeaderButton } from './HeaderButton.js';
-export type { HeaderButtonProps } from './HeaderButton.js';
 export { HeaderLogo } from './HeaderLogo.js';
-export type { HeaderLogoProps } from './HeaderLogo.js';
 export { HeaderBreadcrumbs } from './HeaderBreadcrumbs.js';
-export type { HeaderBreadcrumbsProps } from './HeaderBreadcrumbs.js';

package/cjs/core/InformationPanel/InformationPanel.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/information-panel.css';
-export declare type InformationPanelProps = {
+declare type InformationPanelProps = {
     /**
      * Is the panel open?
      * @default false
@@ -21,7 +21,7 @@ export declare type InformationPanelProps = {
      * Content of the panel.
      */
     children?: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * InformationPanel provides a way to view additional content or attributes
  * without leaving the main content area (e.g. Table).
@@ -43,25 +43,5 @@ export declare type InformationPanelProps = {
  *   </InformationPanel>
  * </InformationPanelWrapper>
  */
-export declare const InformationPanel: React.ForwardRefExoticComponent<{
-    /**
-     * Is the panel open?
-     * @default false
-     */
-    isOpen?: boolean | undefined;
-    /**
-     * Orientation of the panel.
-     * @default 'vertical'
-     */
-    orientation?: "horizontal" | "vertical" | undefined;
-    /**
-     * Set to false to make the panel non-resizable.
-     * @default true
-     */
-    resizable?: boolean | undefined;
-    /**
-     * Content of the panel.
-     */
-    children?: React.ReactNode;
-} & Omit<CommonProps, "title"> & React.RefAttributes<HTMLDivElement>>;
+export declare const InformationPanel: PolymorphicForwardRefComponent<"div", InformationPanelProps>;
 export default InformationPanel;

package/cjs/core/InformationPanel/InformationPanel.js

@@ -58,7 +58,6 @@ require("@itwin/itwinui-css/css/information-panel.css");
  */
 exports.InformationPanel = React.forwardRef((props, ref) => {
     const { className, isOpen = false, orientation = 'vertical', resizable = true, children, ...rest } = props;
-    (0, index_js_1.useTheme)();
     const infoPanelRef = React.useRef(null);
     const refs = (0, index_js_1.useMergedRefs)(ref, infoPanelRef);
     const startResize = (e) => {
@@ -89,13 +88,13 @@ exports.InformationPanel = React.forwardRef((props, ref) => {
             infoPanelRef.current.style.height = `${bottom - e.clientY}px`;
         }
     }, [orientation]);
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-information-panel', {
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-information-panel', {
             'iui-right': orientation === 'vertical',
             'iui-bottom': orientation === 'horizontal',
             'iui-visible': isOpen,
         }, className), ref: refs, ...rest },
-        resizable && (React.createElement("div", { className: 'iui-resizer', onPointerDown: startResize },
-            React.createElement("div", { className: 'iui-resizer-bar' }))),
+        resizable && (React.createElement(index_js_1.Box, { className: 'iui-resizer', onPointerDown: startResize },
+            React.createElement(index_js_1.Box, { className: 'iui-resizer-bar' }))),
         children));
 });
 exports.default = exports.InformationPanel;

package/cjs/core/InformationPanel/InformationPanelBody.d.ts

@@ -1,14 +1,6 @@
-import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
 import '@itwin/itwinui-css/css/information-panel.css';
-export declare type InformationPanelBodyProps = {
-    /**
-     * Content of the InformationPanelBody.
-     */
-    children: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
 /**
  * Body of the `InformationPanel` containing the main content.
  */
-export declare const InformationPanelBody: (props: InformationPanelBodyProps) => JSX.Element;
+export declare const InformationPanelBody: import("../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;
 export default InformationPanelBody;

package/cjs/core/InformationPanel/InformationPanelBody.js

@@ -1,47 +1,14 @@
 "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 };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InformationPanelBody = 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 classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/information-panel.css");
 /**
  * Body of the `InformationPanel` containing the main content.
  */
-const InformationPanelBody = (props) => {
-    const { className, children, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-information-body', className), ...rest }, children));
-};
-exports.InformationPanelBody = InformationPanelBody;
+exports.InformationPanelBody = index_js_1.polymorphic.div('iui-information-body');
 exports.default = exports.InformationPanelBody;