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

package/esm/core/ComboBox/ComboBoxMenuItem.js

@@ -2,12 +2,12 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import cx from 'classnames';
 import * as React from 'react';
 import { useSafeContext, useMergedRefs } from '../utils/index.js';
 import { ComboBoxStateContext } from './helpers.js';
+import { ListItem } from '../List/ListItem.js';
 export const ComboBoxMenuItem = React.memo(React.forwardRef((props, forwardedRef) => {
-    const { children, isSelected, disabled, value, onClick, sublabel, size = !!sublabel ? 'large' : 'default', icon, badge, className, role = 'option', index, ...rest } = props;
+    const { children, isSelected, disabled, value, onClick, sublabel, size = !!sublabel ? 'large' : 'default', startIcon, endIcon, role = 'option', index, ...rest } = props;
     const { focusedIndex, enableVirtualization } = useSafeContext(ComboBoxStateContext);
     const focusRef = (el) => {
         if (!enableVirtualization && focusedIndex === index) {
@@ -15,22 +15,11 @@ export const ComboBoxMenuItem = React.memo(React.forwardRef((props, forwardedRef
         }
     };
     const refs = useMergedRefs(forwardedRef, focusRef);
-    return (React.createElement("li", { className: cx('iui-menu-item', {
-            'iui-large': size === 'large',
-            'iui-active': isSelected,
-            'iui-disabled': disabled,
-            'iui-focused': focusedIndex === index,
-        }, className), ref: refs, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(value), role: role, tabIndex: role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-disabled": disabled, "data-iui-index": index, ...rest },
-        icon &&
-            React.cloneElement(icon, {
-                className: cx(icon.props.className, 'iui-icon'),
-            }),
-        React.createElement("span", { className: 'iui-content' },
-            React.createElement("div", { className: 'iui-menu-label' }, children),
-            sublabel && React.createElement("div", { className: 'iui-menu-description' }, sublabel)),
-        badge &&
-            React.cloneElement(badge, {
-                className: cx(badge.props.className, 'iui-icon'),
-            })));
+    return (React.createElement(ListItem, { actionable: true, size: size, active: isSelected, disabled: disabled, focused: focusedIndex === index, ref: refs, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(value), role: role, tabIndex: role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-disabled": disabled, "data-iui-index": index, ...rest },
+        startIcon && (React.createElement(ListItem.Icon, { as: 'span', "aria-hidden": true }, startIcon)),
+        React.createElement(ListItem.Content, null,
+            children,
+            sublabel && React.createElement(ListItem.Description, null, sublabel)),
+        endIcon && (React.createElement(ListItem.Icon, { as: 'span', "aria-hidden": true }, endIcon))));
 }));
 ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';

package/esm/core/ComboBox/ComboBoxMultipleContainer.d.ts

@@ -1,4 +1,7 @@
 import * as React from 'react';
-export declare const ComboBoxMultipleContainer: React.ForwardRefExoticComponent<{
-    selectedItems?: React.ReactNode[] | undefined;
-} & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "children"> & React.RefAttributes<HTMLDivElement>>;
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type ComboBoxMultipleContainerProps = {
+    selectedItems?: React.ReactNode[];
+};
+export declare const ComboBoxMultipleContainer: PolymorphicForwardRefComponent<"div", ComboBoxMultipleContainerProps>;
+export {};

package/esm/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/esm/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/esm/core/DatePicker/DatePicker.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useTheme, SvgChevronLeft, SvgChevronRight, SvgChevronLeftDouble, SvgChevronRightDouble, isBefore, } from '../utils/index.js';
+import { SvgChevronLeft, SvgChevronRight, SvgChevronLeftDouble, SvgChevronRightDouble, isBefore, Box, } from '../utils/index.js';
 import '@itwin/itwinui-css/css/date-picker.css';
 import { IconButton } from '../Buttons/IconButton/index.js';
 import { TimePicker } from '../TimePicker/index.js';
@@ -110,10 +110,9 @@ export const generateLocalizedStrings = (locale) => {
  * @example
  * <DatePicker date={new Date()} onChange={(e) => console.log('New date value: ' + e)} />
  */
-export const DatePicker = (props) => {
+export const 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;
-    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;
@@ -249,10 +248,6 @@ export const DatePicker = (props) => {
             }
         }
     };
-    const isPreviousMonthDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(new Date(displayedYear, displayedMonthIndex, 0));
-    const isNextMonthDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(new Date(displayedYear, displayedMonthIndex + 1, 1));
-    const isPreviousYearDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(new Date(displayedYear - 1, 11, 31));
-    const isNextYearDisabled = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(new Date(displayedYear + 1, 0, 1));
     const handleCalendarKeyDown = (event) => {
         if (event.altKey) {
             return;
@@ -265,9 +260,6 @@ export const DatePicker = (props) => {
             case 'ArrowDown':
                 adjustedFocusedDay.setDate(focusedDay.getDate() + 7);
                 if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
-                    if (isNextMonthDisabled) {
-                        return;
-                    }
                     handleMoveToNextMonth();
                 }
                 setFocusedDay(adjustedFocusedDay);
@@ -277,9 +269,6 @@ export const DatePicker = (props) => {
             case 'ArrowUp':
                 adjustedFocusedDay.setDate(focusedDay.getDate() - 7);
                 if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
-                    if (isPreviousMonthDisabled) {
-                        return;
-                    }
                     handleMoveToPreviousMonth();
                 }
                 setFocusedDay(adjustedFocusedDay);
@@ -289,9 +278,6 @@ export const DatePicker = (props) => {
             case 'ArrowLeft':
                 adjustedFocusedDay.setDate(focusedDay.getDate() - 1);
                 if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
-                    if (isPreviousMonthDisabled) {
-                        return;
-                    }
                     handleMoveToPreviousMonth();
                 }
                 setFocusedDay(adjustedFocusedDay);
@@ -301,9 +287,6 @@ export const DatePicker = (props) => {
             case 'ArrowRight':
                 adjustedFocusedDay.setDate(focusedDay.getDate() + 1);
                 if (adjustedFocusedDay.getMonth() !== displayedMonthIndex) {
-                    if (isNextMonthDisabled) {
-                        return;
-                    }
                     handleMoveToNextMonth();
                 }
                 setFocusedDay(adjustedFocusedDay);
@@ -347,27 +330,27 @@ export const DatePicker = (props) => {
         }
         return dayClass;
     };
-    return (React.createElement("div", { className: cx('iui-date-picker', className), style: style, ...rest },
+    return (React.createElement(Box, { className: cx('iui-date-picker', className), ref: forwardedRef, ...rest },
         React.createElement("div", null,
-            React.createElement("div", { className: 'iui-calendar-month-year' },
-                showYearSelection && (React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousYear, "aria-label": 'Previous year', size: 'small', disabled: isPreviousYearDisabled },
+            React.createElement(Box, { className: 'iui-calendar-month-year' },
+                showYearSelection && (React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousYear, "aria-label": 'Previous year', size: 'small' },
                     React.createElement(SvgChevronLeftDouble, null))),
-                React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousMonth, "aria-label": 'Previous month', size: 'small', disabled: isPreviousMonthDisabled },
+                React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToPreviousMonth, "aria-label": 'Previous month', size: 'small' },
                     React.createElement(SvgChevronLeft, null)),
                 React.createElement("span", { "aria-live": 'polite' },
-                    React.createElement("span", { className: 'iui-calendar-month', title: monthNames[displayedMonthIndex] }, monthNames[displayedMonthIndex]),
+                    React.createElement(Box, { as: 'span', className: 'iui-calendar-month', title: monthNames[displayedMonthIndex] }, monthNames[displayedMonthIndex]),
                     "\u00A0",
                     displayedYear),
-                React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToNextMonth, "aria-label": 'Next month', size: 'small', disabled: isNextMonthDisabled },
+                React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToNextMonth, "aria-label": 'Next month', size: 'small' },
                     React.createElement(SvgChevronRight, null)),
-                showYearSelection && (React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToNextYear, "aria-label": 'Next year', size: 'small', disabled: isNextYearDisabled },
+                showYearSelection && (React.createElement(IconButton, { styleType: 'borderless', onClick: handleMoveToNextYear, "aria-label": 'Next year', size: 'small' },
                     React.createElement(SvgChevronRightDouble, null)))),
-            React.createElement("div", { className: 'iui-calendar-weekdays' }, shortDays.map((day, index) => (React.createElement("div", { key: day, title: longDays[index] }, day)))),
+            React.createElement(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(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(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));
                 })));
@@ -378,5 +361,5 @@ export 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()));
             } }))));
-};
+});
 export default DatePicker;

package/esm/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/esm/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/esm/core/Dialog/Dialog.js

@@ -11,7 +11,27 @@ import { DialogBackdrop } from './DialogBackdrop.js';
 import { DialogContext } from './DialogContext.js';
 import { DialogButtonBar } from './DialogButtonBar.js';
 import { DialogMain } from './DialogMain.js';
-import { useMergedRefs } from '../utils/index.js';
+import { useMergedRefs, Box } from '../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 = useMergedRefs(ref, dialogRootRef);
+    return (React.createElement(DialogContext.Provider, { value: {
+            isOpen,
+            onClose,
+            closeOnEsc,
+            closeOnExternalClick,
+            isDismissible,
+            preventDocumentScroll,
+            trapFocus,
+            setFocus,
+            isDraggable,
+            isResizable,
+            relativeTo,
+            dialogRootRef,
+        } },
+        React.createElement(Box, { className: cx('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: refs, ...rest })));
+});
 /**
  * Dialog component.
  * @example
@@ -34,28 +54,7 @@ import { useMergedRefs } from '../utils/index.js';
  *   </Dialog.Main>
  * </Dialog>
  */
-export const 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 = useMergedRefs(ref, dialogRootRef);
-    return (React.createElement(DialogContext.Provider, { value: {
-            isOpen,
-            onClose,
-            closeOnEsc,
-            closeOnExternalClick,
-            isDismissible,
-            preventDocumentScroll,
-            trapFocus,
-            setFocus,
-            isDraggable,
-            isResizable,
-            relativeTo,
-            dialogRootRef,
-        } },
-        React.createElement("div", { className: cx('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: refs, style: {
-                ...style,
-            }, ...rest }, children)));
-}), {
+export const Dialog = Object.assign(DialogComponent, {
     Backdrop: DialogBackdrop,
     Main: DialogMain,
     TitleBar: DialogTitleBar,

package/esm/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/esm/core/Dialog/DialogBackdrop.js

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

package/esm/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/esm/core/Dialog/DialogButtonBar.js

@@ -2,9 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
-import cx from 'classnames';
-import { useTheme } from '../utils/index.js';
+import { polymorphic } from '../utils/index.js';
 import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Container for Buttons in `Dialog`. Recommended to be used as a child of `Dialog`.
@@ -14,9 +12,5 @@ import '@itwin/itwinui-css/css/dialog.css';
  *   <Button>Close</Button>
  * </Dialog.ButtonBar>
  */
-export const DialogButtonBar = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    useTheme();
-    return (React.createElement("div", { className: cx('iui-dialog-button-bar', className), ref: ref, ...rest }, children));
-});
+export const DialogButtonBar = polymorphic.div('iui-dialog-button-bar');
 export default DialogButtonBar;

package/esm/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/esm/core/Dialog/DialogContent.js

@@ -2,9 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
-import cx from 'classnames';
-import { useTheme } from '../utils/index.js';
+import { polymorphic } from '../utils/index.js';
 import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
@@ -13,9 +11,5 @@ import '@itwin/itwinui-css/css/dialog.css';
  *   My dialog content
  * </Dialog.Content>
  */
-export const DialogContent = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    useTheme();
-    return (React.createElement("div", { className: cx('iui-dialog-content', className), ref: ref, ...rest }, children));
-});
+export const DialogContent = polymorphic.div('iui-dialog-content');
 export default DialogContent;

package/esm/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/esm/core/Dialog/DialogMain.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { FocusTrap, getTranslateValues, Resizer, useMergedRefs, useTheme, useIsomorphicLayoutEffect, } from '../utils/index.js';
+import { FocusTrap, getTranslateValues, Resizer, useMergedRefs, useIsomorphicLayoutEffect, Box, } from '../utils/index.js';
 import '@itwin/itwinui-css/css/dialog.css';
 import { useDialogContext } from './DialogContext.js';
 import { CSSTransition } from 'react-transition-group';
@@ -33,7 +33,6 @@ import useDragAndDrop from '../utils/hooks/useDragAndDrop.js';
 export const DialogMain = React.forwardRef((props, ref) => {
     const dialogContext = 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;
-    useTheme();
     const [style, setStyle] = React.useState();
     const dialogRef = React.useRef(null);
     const refs = useMergedRefs(dialogRef, ref);
@@ -109,7 +108,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
             ...newStyle,
         }));
     }, []);
-    const content = (React.createElement("div", { className: cx('iui-dialog', {
+    const content = (React.createElement(Box, { className: cx('iui-dialog', {
             'iui-dialog-default': styleType === 'default',
             'iui-dialog-full-page': styleType === 'fullPage',
             'iui-dialog-visible': isOpen,

package/esm/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/esm/core/Dialog/DialogTitleBar.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useTheme, SvgClose, mergeEventHandlers } from '../utils/index.js';
+import { SvgClose, mergeEventHandlers, Box } from '../utils/index.js';
 import { IconButton } from '../Buttons/index.js';
 import '@itwin/itwinui-css/css/dialog.css';
 import { useDialogContext } from './DialogContext.js';
@@ -31,8 +31,7 @@ export const DialogTitleBar = Object.assign(React.forwardRef((props, ref) => {
     const dialogContext = useDialogContext();
     const { children, titleText, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, isDraggable = dialogContext.isDraggable, className, onPointerDown: onPointerDownProp, ...rest } = props;
     const { onPointerDown } = useDialogDragContext();
-    useTheme();
-    return (React.createElement("div", { className: cx('iui-dialog-title-bar', className, {
+    return (React.createElement(Box, { className: cx('iui-dialog-title-bar', className, {
             'iui-dialog-title-bar-filled': isDraggable,
         }), ref: ref, onPointerDown: mergeEventHandlers(onPointerDownProp, onPointerDown), ...rest }, children ? (children) : (React.createElement(React.Fragment, null,
         React.createElement(DialogTitleBarTitle, null, titleText),

package/esm/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/esm/core/Dialog/DialogTitleBarTitle.js

@@ -2,18 +2,12 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
-import cx from 'classnames';
-import { useTheme } from '../utils/index.js';
+import { polymorphic } from '../utils/index.js';
 import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example
  * <Dialog.TitleBar>My dialog title</Dialog.TitleBar>
  */
-export const DialogTitleBarTitle = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    useTheme();
-    return (React.createElement("div", { className: cx('iui-dialog-title', className), ref: ref, ...rest }, children));
-});
+export const DialogTitleBarTitle = polymorphic.div('iui-dialog-title');
 export default DialogTitleBarTitle;

package/esm/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/esm/core/DropdownMenu/DropdownMenu.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { useTheme, Popover, mergeRefs } from '../utils/index.js';
+import { Popover, mergeRefs } from '../utils/index.js';
 import { Menu } from '../Menu/index.js';
 /**
  * Dropdown menu component.
@@ -43,7 +43,6 @@ export const DropdownMenu = (props) => {
         (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         onHide === null || onHide === void 0 ? void 0 : onHide(instance);
     }, [onHide]);
-    useTheme();
     return (React.createElement(Popover, { content: React.createElement(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: mergeRefs(targetRef, props.children.ref),
         onClick: (args) => {