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

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

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

package/cjs/core/DatePicker/DatePicker.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/date-picker.css';
-import type { TimePickerProps } from '../TimePicker/index.js';
+import type { TimePickerProps } from '../TimePicker/TimePicker.js';
 /**
  * Generate localized months and days strings using `Intl.DateTimeFormat` for passed locale to use in DatePicker component.
  * If locale is not passed, browser locale will be used.
@@ -34,7 +34,7 @@ export declare type DateRangePickerProps = {
     endDate: Date;
     onChange?: (startDate: Date, endDate: Date) => void;
 };
-export declare type DatePickerProps = {
+declare type DatePickerProps = {
     /**
      * Selected date.
      */
@@ -72,5 +72,5 @@ export declare type DatePickerProps = {
  * @example
  * <DatePicker date={new Date()} onChange={(e) => console.log('New date value: ' + e)} />
  */
-export declare const DatePicker: (props: DatePickerProps) => JSX.Element;
+export declare const DatePicker: PolymorphicForwardRefComponent<"div", DatePickerProps>;
 export default DatePicker;

package/cjs/core/DatePicker/DatePicker.js

@@ -140,10 +140,9 @@ exports.generateLocalizedStrings = generateLocalizedStrings;
  * @example
  * <DatePicker date={new Date()} onChange={(e) => console.log('New date value: ' + e)} />
  */
-const DatePicker = (props) => {
+exports.DatePicker = React.forwardRef((props, forwardedRef) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const { date, onChange, localizedNames, className, style, setFocus = false, showTime = false, use12Hours = false, precision, hourStep, minuteStep, secondStep, useCombinedRenderer, combinedRenderer, hourRenderer, minuteRenderer, secondRenderer, meridiemRenderer, showYearSelection = false, enableRangeSelect = false, startDate, endDate, isDateDisabled, ...rest } = props;
-    (0, index_js_1.useTheme)();
+    const { date, onChange, localizedNames, className, setFocus = false, showTime = false, use12Hours = false, precision, hourStep, minuteStep, secondStep, useCombinedRenderer, combinedRenderer, hourRenderer, minuteRenderer, secondRenderer, meridiemRenderer, showYearSelection = false, enableRangeSelect = false, startDate, endDate, isDateDisabled, ...rest } = props;
     const monthNames = (_a = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.months) !== null && _a !== void 0 ? _a : defaultMonths;
     const shortDays = (_b = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.shortDays) !== null && _b !== void 0 ? _b : defaultShortDays;
     const longDays = (_c = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.days) !== null && _c !== void 0 ? _c : defaultLongDays;
@@ -361,27 +360,27 @@ const DatePicker = (props) => {
         }
         return dayClass;
     };
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-date-picker', className), style: style, ...rest },
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-date-picker', className), ref: forwardedRef, ...rest },
         React.createElement("div", null,
-            React.createElement("div", { className: 'iui-calendar-month-year' },
+            React.createElement(index_js_1.Box, { className: 'iui-calendar-month-year' },
                 showYearSelection && (React.createElement(index_js_2.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousYear, "aria-label": 'Previous year', size: 'small' },
                     React.createElement(index_js_1.SvgChevronLeftDouble, null))),
                 React.createElement(index_js_2.IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousMonth, "aria-label": 'Previous month', size: 'small' },
                     React.createElement(index_js_1.SvgChevronLeft, null)),
                 React.createElement("span", { "aria-live": 'polite' },
-                    React.createElement("span", { className: 'iui-calendar-month', title: monthNames[displayedMonthIndex] }, monthNames[displayedMonthIndex]),
+                    React.createElement(index_js_1.Box, { as: 'span', className: 'iui-calendar-month', title: monthNames[displayedMonthIndex] }, monthNames[displayedMonthIndex]),
                     "\u00A0",
                     displayedYear),
                 React.createElement(index_js_2.IconButton, { styleType: 'borderless', onClick: handleMoveToNextMonth, "aria-label": 'Next month', size: 'small' },
                     React.createElement(index_js_1.SvgChevronRight, null)),
                 showYearSelection && (React.createElement(index_js_2.IconButton, { styleType: 'borderless', onClick: handleMoveToNextYear, "aria-label": 'Next year', size: 'small' },
                     React.createElement(index_js_1.SvgChevronRightDouble, null)))),
-            React.createElement("div", { className: 'iui-calendar-weekdays' }, shortDays.map((day, index) => (React.createElement("div", { key: day, title: longDays[index] }, day)))),
+            React.createElement(index_js_1.Box, { className: 'iui-calendar-weekdays' }, shortDays.map((day, index) => (React.createElement("div", { key: day, title: longDays[index] }, day)))),
             React.createElement("div", { onKeyDown: handleCalendarKeyDown, role: 'listbox' }, weeks.map((weekDays, weekIndex) => {
-                return (React.createElement("div", { key: `week-${displayedMonthIndex}-${weekIndex}`, className: 'iui-calendar-week' }, weekDays.map((weekDay, dayIndex) => {
+                return (React.createElement(index_js_1.Box, { key: `week-${displayedMonthIndex}-${weekIndex}`, className: 'iui-calendar-week' }, weekDays.map((weekDay, dayIndex) => {
                     const dateValue = weekDay.getDate();
                     const isDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(weekDay);
-                    return (React.createElement("div", { key: `day-${displayedMonthIndex}-${dayIndex}`, className: getDayClass(weekDay), onClick: () => !isDisabled && onDayClick(weekDay), role: 'option', tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1, "aria-disabled": isDisabled ? 'true' : undefined, ref: (element) => isSameDay(weekDay, focusedDay) &&
+                    return (React.createElement(index_js_1.Box, { key: `day-${displayedMonthIndex}-${dayIndex}`, className: getDayClass(weekDay), onClick: () => !isDisabled && onDayClick(weekDay), role: 'option', tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1, "aria-disabled": isDisabled ? 'true' : undefined, ref: (element) => isSameDay(weekDay, focusedDay) &&
                             needFocus.current &&
                             (element === null || element === void 0 ? void 0 : element.focus()) }, dateValue));
                 })));
@@ -392,6 +391,5 @@ const DatePicker = (props) => {
                     ? onChange === null || onChange === void 0 ? void 0 : onChange(date)
                     : onChange === null || onChange === void 0 ? void 0 : onChange(new Date((_a = selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getFullYear()) !== null && _a !== void 0 ? _a : date.getFullYear(), (_b = selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getMonth()) !== null && _b !== void 0 ? _b : date.getMonth(), (_c = selectedStartDay === null || selectedStartDay === void 0 ? void 0 : selectedStartDay.getDate()) !== null && _c !== void 0 ? _c : date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()), new Date((_d = selectedEndDay === null || selectedEndDay === void 0 ? void 0 : selectedEndDay.getFullYear()) !== null && _d !== void 0 ? _d : date.getFullYear(), (_e = selectedEndDay === null || selectedEndDay === void 0 ? void 0 : selectedEndDay.getMonth()) !== null && _e !== void 0 ? _e : date.getMonth(), (_f = selectedEndDay === null || selectedEndDay === void 0 ? void 0 : selectedEndDay.getDate()) !== null && _f !== void 0 ? _f : date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()));
             } }))));
-};
-exports.DatePicker = DatePicker;
+});
 exports.default = exports.DatePicker;

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

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

package/cjs/core/Dialog/Dialog.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import '@itwin/itwinui-css/css/dialog.css';
 import type { DialogContextProps } from './DialogContext.js';
-export declare type DialogProps = {
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type DialogProps = {
     /**
      * Dialog content.
      */
     children: React.ReactNode;
-} & Omit<DialogContextProps, 'dialogRootRef'> & React.ComponentPropsWithRef<'div'>;
+} & Omit<DialogContextProps, 'dialogRootRef'>;
 /**
  * Dialog component.
  * @example
@@ -29,13 +30,16 @@ export declare type DialogProps = {
  *   </Dialog.Main>
  * </Dialog>
  */
-export declare const Dialog: React.ForwardRefExoticComponent<Pick<DialogProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnExternalClick" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>> & {
-    Backdrop: React.ForwardRefExoticComponent<Pick<import("./DialogBackdrop.js").DialogBackdropProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "isVisible" | "isDismissible" | "closeOnExternalClick" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
-    Main: React.ForwardRefExoticComponent<Pick<import("./DialogMain.js").DialogMainProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "styleType" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
-    TitleBar: React.ForwardRefExoticComponent<Pick<import("./DialogTitleBar.js").DialogTitleBarProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "isDismissible" | "isDraggable" | "titleText"> & React.RefAttributes<HTMLDivElement>> & {
-        Title: React.ForwardRefExoticComponent<Pick<import("./DialogTitleBarTitle.js").DialogTitleBarTitleProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export declare const Dialog: PolymorphicForwardRefComponent<"div", DialogProps> & {
+    Backdrop: PolymorphicForwardRefComponent<"div", import("../Backdrop/Backdrop.js").BackdropProps & Pick<DialogContextProps, "onClose" | "isDismissible" | "closeOnExternalClick" | "relativeTo">>;
+    Main: PolymorphicForwardRefComponent<"div", import("./DialogMain.js").DialogMainProps>;
+    TitleBar: PolymorphicForwardRefComponent<"div", {
+        children?: React.ReactNode;
+        titleText?: React.ReactNode;
+    } & Pick<DialogContextProps, "onClose" | "isDismissible" | "isDraggable">> & {
+        Title: PolymorphicForwardRefComponent<"div", {}>;
     };
-    Content: React.ForwardRefExoticComponent<Pick<import("./DialogContent.js").DialogContentProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
-    ButtonBar: React.ForwardRefExoticComponent<Pick<import("./DialogButtonBar.js").DialogButtonBarProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+    Content: PolymorphicForwardRefComponent<"div", {}>;
+    ButtonBar: PolymorphicForwardRefComponent<"div", {}>;
 };
 export default Dialog;

package/cjs/core/Dialog/Dialog.js

@@ -41,6 +41,26 @@ const DialogContext_js_1 = require("./DialogContext.js");
 const DialogButtonBar_js_1 = require("./DialogButtonBar.js");
 const DialogMain_js_1 = require("./DialogMain.js");
 const index_js_1 = require("../utils/index.js");
+const DialogComponent = React.forwardRef((props, ref) => {
+    const { trapFocus = false, setFocus = false, preventDocumentScroll = false, isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = false, onClose, isDraggable = false, isResizable = false, relativeTo = 'viewport', className, ...rest } = props;
+    const dialogRootRef = React.useRef(null);
+    const refs = (0, index_js_1.useMergedRefs)(ref, dialogRootRef);
+    return (React.createElement(DialogContext_js_1.DialogContext.Provider, { value: {
+            isOpen,
+            onClose,
+            closeOnEsc,
+            closeOnExternalClick,
+            isDismissible,
+            preventDocumentScroll,
+            trapFocus,
+            setFocus,
+            isDraggable,
+            isResizable,
+            relativeTo,
+            dialogRootRef,
+        } },
+        React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: refs, ...rest })));
+});
 /**
  * Dialog component.
  * @example
@@ -63,28 +83,7 @@ const index_js_1 = require("../utils/index.js");
  *   </Dialog.Main>
  * </Dialog>
  */
-exports.Dialog = Object.assign(React.forwardRef((props, ref) => {
-    const { children, trapFocus = false, setFocus = false, preventDocumentScroll = false, isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = false, onClose, isDraggable = false, isResizable = false, relativeTo = 'viewport', className, style, ...rest } = props;
-    const dialogRootRef = React.useRef(null);
-    const refs = (0, index_js_1.useMergedRefs)(ref, dialogRootRef);
-    return (React.createElement(DialogContext_js_1.DialogContext.Provider, { value: {
-            isOpen,
-            onClose,
-            closeOnEsc,
-            closeOnExternalClick,
-            isDismissible,
-            preventDocumentScroll,
-            trapFocus,
-            setFocus,
-            isDraggable,
-            isResizable,
-            relativeTo,
-            dialogRootRef,
-        } },
-        React.createElement("div", { className: (0, classnames_1.default)('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: refs, style: {
-                ...style,
-            }, ...rest }, children)));
-}), {
+exports.Dialog = Object.assign(DialogComponent, {
     Backdrop: DialogBackdrop_js_1.DialogBackdrop,
     Main: DialogMain_js_1.DialogMain,
     TitleBar: DialogTitleBar_js_1.DialogTitleBar,

package/cjs/core/Dialog/DialogBackdrop.d.ts

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import type { BackdropProps } from '../Backdrop/index.js';
+import type { BackdropProps } from '../Backdrop/Backdrop.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { DialogContextProps } from './DialogContext.js';
-export declare type DialogBackdropProps = BackdropProps & Pick<DialogContextProps, 'onClose' | 'isDismissible' | 'closeOnExternalClick' | 'relativeTo'>;
+declare type DialogBackdropProps = BackdropProps & Pick<DialogContextProps, 'onClose' | 'isDismissible' | 'closeOnExternalClick' | 'relativeTo'>;
 /**
  * Backdrop component for dialog. Recommended to be used with `Dialog`
  * then its visibility is being controlled by dialog's `isOpen` prop.
  * @example
  * <Dialog.Backdrop />
  */
-export declare const DialogBackdrop: React.ForwardRefExoticComponent<Pick<DialogBackdropProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "isVisible" | "isDismissible" | "closeOnExternalClick" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogBackdrop: PolymorphicForwardRefComponent<"div", DialogBackdropProps>;
 export default DialogBackdrop;

package/cjs/core/Dialog/DialogBackdrop.js

@@ -58,9 +58,7 @@ exports.DialogBackdrop = React.forwardRef((props, ref) => {
         }
         onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
     };
-    return (React.createElement(index_js_1.Backdrop, { isVisible: isVisible, className: (0, classnames_1.default)({
-            'iui-backdrop-fixed': relativeTo === 'viewport',
-        }, className), ref: refs, onMouseDown: handleMouseDown, style: {
+    return (React.createElement(index_js_1.Backdrop, { isVisible: isVisible, className: (0, classnames_1.default)({ 'iui-backdrop-fixed': relativeTo === 'viewport' }, className), ref: refs, onMouseDown: handleMouseDown, style: {
             pointerEvents: 'auto',
             ...style,
         }, ...rest }));

package/cjs/core/Dialog/DialogButtonBar.d.ts

@@ -1,11 +1,4 @@
-import * as React from 'react';
 import '@itwin/itwinui-css/css/dialog.css';
-export declare type DialogButtonBarProps = {
-    /**
-     * Buttons in the dialog bar.
-     */
-    children: React.ReactNode;
-} & React.ComponentPropsWithRef<'div'>;
 /**
  * Container for Buttons in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example
@@ -14,5 +7,5 @@ export declare type DialogButtonBarProps = {
  *   <Button>Close</Button>
  * </Dialog.ButtonBar>
  */
-export declare const DialogButtonBar: React.ForwardRefExoticComponent<Pick<DialogButtonBarProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogButtonBar: import("../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;
 export default DialogButtonBar;

package/cjs/core/Dialog/DialogButtonBar.js

@@ -1,38 +1,10 @@
 "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.DialogButtonBar = 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 classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/dialog.css");
 /**
@@ -43,9 +15,5 @@ require("@itwin/itwinui-css/css/dialog.css");
  *   <Button>Close</Button>
  * </Dialog.ButtonBar>
  */
-exports.DialogButtonBar = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-dialog-button-bar', className), ref: ref, ...rest }, children));
-});
+exports.DialogButtonBar = index_js_1.polymorphic.div('iui-dialog-button-bar');
 exports.default = exports.DialogButtonBar;

package/cjs/core/Dialog/DialogContent.d.ts

@@ -1,11 +1,4 @@
-import * as React from 'react';
 import '@itwin/itwinui-css/css/dialog.css';
-export declare type DialogContentProps = {
-    /**
-     * Main content in the `Dialog`.
-     */
-    children: React.ReactNode;
-} & React.ComponentPropsWithRef<'div'>;
 /**
  * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example
@@ -13,5 +6,5 @@ export declare type DialogContentProps = {
  *   My dialog content
  * </Dialog.Content>
  */
-export declare const DialogContent: React.ForwardRefExoticComponent<Pick<DialogContentProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogContent: import("../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;
 export default DialogContent;

package/cjs/core/Dialog/DialogContent.js

@@ -1,38 +1,10 @@
 "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.DialogContent = 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 classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/dialog.css");
 /**
@@ -42,9 +14,5 @@ require("@itwin/itwinui-css/css/dialog.css");
  *   My dialog content
  * </Dialog.Content>
  */
-exports.DialogContent = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-dialog-content', className), ref: ref, ...rest }, children));
-});
+exports.DialogContent = index_js_1.polymorphic.div('iui-dialog-content');
 exports.default = exports.DialogContent;

package/cjs/core/Dialog/DialogMain.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/dialog.css';
 import type { DialogContextProps } from './DialogContext.js';
 export declare type DialogMainProps = {
@@ -11,7 +12,7 @@ export declare type DialogMainProps = {
      * Content of the dialog.
      */
     children: React.ReactNode;
-} & Omit<DialogContextProps, 'closeOnExternalClick' | 'dialogRootRef'> & React.ComponentPropsWithRef<'div'>;
+} & Omit<DialogContextProps, 'closeOnExternalClick' | 'dialogRootRef'>;
 /**
  * Dialog component which can wrap any content.
  * @example
@@ -32,5 +33,5 @@ export declare type DialogMainProps = {
  *   </Dialog.ButtonBar>
  * </Dialog.Main>
  */
-export declare const DialogMain: React.ForwardRefExoticComponent<Pick<DialogMainProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "styleType" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogMain: PolymorphicForwardRefComponent<"div", DialogMainProps>;
 export default DialogMain;

package/cjs/core/Dialog/DialogMain.js

@@ -62,7 +62,6 @@ const useDragAndDrop_js_1 = __importDefault(require("../utils/hooks/useDragAndDr
 exports.DialogMain = React.forwardRef((props, ref) => {
     const dialogContext = (0, DialogContext_js_1.useDialogContext)();
     const { className, children, styleType = 'default', isOpen = dialogContext.isOpen, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, closeOnEsc = dialogContext.closeOnEsc, trapFocus = dialogContext.trapFocus, setFocus = dialogContext.setFocus, preventDocumentScroll = dialogContext.preventDocumentScroll, onKeyDown, isDraggable = dialogContext.isDraggable, isResizable = dialogContext.isResizable, style: propStyle, ...rest } = props;
-    (0, index_js_1.useTheme)();
     const [style, setStyle] = React.useState();
     const dialogRef = React.useRef(null);
     const refs = (0, index_js_1.useMergedRefs)(dialogRef, ref);
@@ -138,7 +137,7 @@ exports.DialogMain = React.forwardRef((props, ref) => {
             ...newStyle,
         }));
     }, []);
-    const content = (React.createElement("div", { className: (0, classnames_1.default)('iui-dialog', {
+    const content = (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog', {
             'iui-dialog-default': styleType === 'default',
             'iui-dialog-full-page': styleType === 'fullPage',
             'iui-dialog-visible': isOpen,

package/cjs/core/Dialog/DialogTitleBar.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import '@itwin/itwinui-css/css/dialog.css';
 import type { DialogContextProps } from './DialogContext.js';
-export declare type DialogTitleBarProps = {
+declare type DialogTitleBarProps = {
     /**
      * Dialog title bar content. If passed, then `title` prop is ignored.
      */
@@ -10,7 +11,7 @@ export declare type DialogTitleBarProps = {
      * Dialog title.
      */
     titleText?: React.ReactNode;
-} & Pick<DialogContextProps, 'isDismissible' | 'onClose' | 'isDraggable'> & React.ComponentPropsWithRef<'div'>;
+} & Pick<DialogContextProps, 'isDismissible' | 'onClose' | 'isDraggable'>;
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example
@@ -28,7 +29,7 @@ export declare type DialogTitleBarProps = {
  *   </IconButton>
  * </Dialog.TitleBar>
  */
-export declare const DialogTitleBar: React.ForwardRefExoticComponent<Pick<DialogTitleBarProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "isDismissible" | "isDraggable" | "titleText"> & React.RefAttributes<HTMLDivElement>> & {
-    Title: React.ForwardRefExoticComponent<Pick<import("./DialogTitleBarTitle.js").DialogTitleBarTitleProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogTitleBar: PolymorphicForwardRefComponent<"div", DialogTitleBarProps> & {
+    Title: PolymorphicForwardRefComponent<"div", {}>;
 };
 export default DialogTitleBar;

package/cjs/core/Dialog/DialogTitleBar.js

@@ -60,8 +60,7 @@ exports.DialogTitleBar = Object.assign(React.forwardRef((props, ref) => {
     const dialogContext = (0, DialogContext_js_1.useDialogContext)();
     const { children, titleText, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, isDraggable = dialogContext.isDraggable, className, onPointerDown: onPointerDownProp, ...rest } = props;
     const { onPointerDown } = (0, DialogDragContext_js_1.useDialogDragContext)();
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-dialog-title-bar', className, {
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog-title-bar', className, {
             'iui-dialog-title-bar-filled': isDraggable,
         }), ref: ref, onPointerDown: (0, index_js_1.mergeEventHandlers)(onPointerDownProp, onPointerDown), ...rest }, children ? (children) : (React.createElement(React.Fragment, null,
         React.createElement(DialogTitleBarTitle_js_1.DialogTitleBarTitle, null, titleText),

package/cjs/core/Dialog/DialogTitleBarTitle.d.ts

@@ -1,15 +1,8 @@
-import * as React from 'react';
 import '@itwin/itwinui-css/css/dialog.css';
-export declare type DialogTitleBarTitleProps = {
-    /**
-     * Dialog title content.
-     */
-    children: React.ReactNode;
-} & React.ComponentPropsWithRef<'div'>;
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example
  * <Dialog.TitleBar>My dialog title</Dialog.TitleBar>
  */
-export declare const DialogTitleBarTitle: React.ForwardRefExoticComponent<Pick<DialogTitleBarTitleProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogTitleBarTitle: import("../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;
 export default DialogTitleBarTitle;

package/cjs/core/Dialog/DialogTitleBarTitle.js

@@ -1,38 +1,10 @@
 "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.DialogTitleBarTitle = 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 classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/dialog.css");
 /**
@@ -40,9 +12,5 @@ require("@itwin/itwinui-css/css/dialog.css");
  * @example
  * <Dialog.TitleBar>My dialog title</Dialog.TitleBar>
  */
-exports.DialogTitleBarTitle = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    (0, index_js_1.useTheme)();
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-dialog-title', className), ref: ref, ...rest }, children));
-});
+exports.DialogTitleBarTitle = index_js_1.polymorphic.div('iui-dialog-title');
 exports.default = exports.DialogTitleBarTitle;

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

@@ -1,8 +1,3 @@
 export { Dialog } from './Dialog.js';
-export type { DialogProps } from './Dialog.js';
-export type { DialogMainProps } from './DialogMain.js';
-export type { DialogTitleBarProps } from './DialogTitleBar.js';
-export type { DialogContentProps } from './DialogContent.js';
-export type { DialogButtonBarProps } from './DialogButtonBar.js';
 declare const _default: "./Dialog";
 export default _default;

package/cjs/core/DropdownMenu/DropdownMenu.js

@@ -69,7 +69,6 @@ const DropdownMenu = (props) => {
         (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         onHide === null || onHide === void 0 ? void 0 : onHide(instance);
     }, [onHide]);
-    (0, index_js_1.useTheme)();
     return (React.createElement(index_js_1.Popover, { content: React.createElement(index_js_2.Menu, { className: className, style: style, role: role, id: id }, React.useMemo(() => menuItems(close), [menuItems, close])), visible: trigger === undefined ? isVisible : undefined, onClickOutside: close, placement: placement, onShow: onShowHandler, onHide: onHideHandler, trigger: visible === undefined ? trigger : undefined, ...rest }, React.cloneElement(children, {
         ref: (0, index_js_1.mergeRefs)(targetRef, props.children.ref),
         onClick: (args) => {

package/cjs/core/ExpandableBlock/ExpandableBlock.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/expandable-block.css';
-export declare type ExpandableBlockProps = {
+declare type ExpandableBlockProps = {
     /**
      * The main text displayed on the block, regardless of state.
      */
@@ -44,7 +44,7 @@ export declare type ExpandableBlockProps = {
      * @default 'default'
      */
     styleType?: 'default' | 'borderless';
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * Container that allows content to be hidden behind a brief title and a caption.
  * @example
@@ -54,5 +54,5 @@ export declare type ExpandableBlockProps = {
  * <ExpandableBlock title='Positive status' status='positive'>Content</ExpandableBlock>
  * <ExpandableBlock title='Block with icon' endIcon={<SvgPlaceholder />}>Content</ExpandableBlock>
  */
-export declare const ExpandableBlock: (props: ExpandableBlockProps) => JSX.Element;
+export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", ExpandableBlockProps>;
 export default ExpandableBlock;

package/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -44,9 +44,8 @@ require("@itwin/itwinui-css/css/expandable-block.css");
  * <ExpandableBlock title='Positive status' status='positive'>Content</ExpandableBlock>
  * <ExpandableBlock title='Block with icon' endIcon={<SvgPlaceholder />}>Content</ExpandableBlock>
  */
-const ExpandableBlock = (props) => {
+exports.ExpandableBlock = React.forwardRef((props, ref) => {
     const { caption, children, className, title, onToggle, style, isExpanded = false, endIcon, status, size = 'default', styleType = 'default', ...rest } = props;
-    (0, index_js_1.useTheme)();
     const icon = endIcon !== null && endIcon !== void 0 ? endIcon : (status && index_js_1.StatusIconMap[status]());
     const [expanded, setExpanded] = React.useState(isExpanded);
     React.useEffect(() => {
@@ -66,21 +65,20 @@ const ExpandableBlock = (props) => {
             handleToggle();
         }
     };
-    return (React.createElement("div", { className: (0, classnames_1.default)('iui-expandable-block', {
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-expandable-block', {
             'iui-with-caption': !!caption,
             'iui-expanded': expanded,
             'iui-small': size === 'small',
             'iui-borderless': styleType === 'borderless',
-        }, className), style: style, ...rest },
-        React.createElement("div", { "aria-expanded": expanded, className: 'iui-header', tabIndex: 0, onClick: handleToggle, onKeyDown: onKeyDown },
+        }, className), style: style, ref: ref, ...rest },
+        React.createElement(index_js_1.Box, { "aria-expanded": expanded, className: 'iui-header', tabIndex: 0, onClick: handleToggle, onKeyDown: onKeyDown },
             React.createElement(index_js_1.SvgChevronRight, { className: 'iui-icon', "aria-hidden": true }),
-            React.createElement("span", { className: 'iui-expandable-block-label' },
-                React.createElement("div", { className: 'iui-title' }, title),
-                caption && React.createElement("div", { className: 'iui-caption' }, caption)),
+            React.createElement(index_js_1.Box, { as: 'span', className: 'iui-expandable-block-label' },
+                React.createElement(index_js_1.Box, { className: 'iui-title' }, title),
+                caption && React.createElement(index_js_1.Box, { className: 'iui-caption' }, caption)),
             icon && React.createElement(index_js_1.Icon, { fill: status }, icon)),
         React.createElement(index_js_1.WithCSSTransition, { in: expanded },
-            React.createElement("div", { className: 'iui-expandable-content' },
+            React.createElement(index_js_1.Box, { className: 'iui-expandable-content' },
                 React.createElement("div", null, children)))));
-};
-exports.ExpandableBlock = ExpandableBlock;
+});
 exports.default = exports.ExpandableBlock;

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

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