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

package/cjs/core/ComboBox/ComboBox.js

@@ -32,12 +32,10 @@ exports.ComboBox = 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("../Menu/index.js");
 const SelectTag_js_1 = __importDefault(require("../Select/SelectTag.js"));
 const index_js_2 = require("../Typography/index.js");
 const index_js_3 = require("../utils/index.js");
-require("tippy.js/animations/shift-away.css");
 const helpers_js_1 = require("./helpers.js");
 const ComboBoxDropdown_js_1 = require("./ComboBoxDropdown.js");
 const ComboBoxEndIcon_js_1 = require("./ComboBoxEndIcon.js");
@@ -79,7 +77,6 @@ const ComboBox = (props) => {
         var _a, _b;
         return (_b = (_a = props.id) !== null && _a !== void 0 ? _a : ((inputProps === null || inputProps === void 0 ? void 0 : inputProps.id) && `${inputProps.id}-cb`)) !== null && _b !== void 0 ? _b : `iui-cb-${(0, index_js_3.getRandomValue)(10)}`;
     });
-    (0, index_js_3.useTheme)();
     // Refs get set in subcomponents
     const inputRef = React.useRef(null);
     const menuRef = React.useRef(null);
@@ -276,6 +273,8 @@ const ComboBox = (props) => {
     const getMenuItem = React.useCallback((option, filteredIndex) => {
         const optionId = getOptionId(option, id);
         const { __originalIndex } = optionsExtraInfoRef.current[optionId];
+        const { icon, startIcon: startIconProp, ...restOptions } = option;
+        const startIcon = startIconProp !== null && startIconProp !== void 0 ? startIconProp : icon;
         const customItem = itemRenderer
             ? itemRenderer(option, {
                 isFocused: focusedIndex === __originalIndex,
@@ -290,11 +289,9 @@ const ComboBox = (props) => {
                 onClickHandler(__originalIndex);
                 (_b = (_a = customItem.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
             },
-            // ComboBox.MenuItem handles scrollIntoView, data-iui-index and iui-focused through context
+            // ComboBox.MenuItem handles scrollIntoView, data-iui-index and focused through context
             // but we still need to pass them here for backwards compatibility with MenuItem
-            className: (0, classnames_1.default)(customItem.props.className, {
-                'iui-focused': focusedIndex === __originalIndex,
-            }),
+            focused: focusedIndex === __originalIndex,
             'data-iui-index': __originalIndex,
             'data-iui-filtered-index': filteredIndex,
             ref: (0, index_js_3.mergeRefs)(customItem.props.ref, (el) => {
@@ -302,7 +299,7 @@ const ComboBox = (props) => {
                     el === null || el === void 0 ? void 0 : el.scrollIntoView({ block: 'nearest' });
                 }
             }),
-        })) : (React.createElement(ComboBoxMenuItem_js_1.ComboBoxMenuItem, { key: optionId, id: optionId, ...option, isSelected: isMenuItemSelected(__originalIndex), onClick: () => {
+        })) : (React.createElement(ComboBoxMenuItem_js_1.ComboBoxMenuItem, { key: optionId, id: optionId, startIcon: startIcon, ...restOptions, isSelected: isMenuItemSelected(__originalIndex), onClick: () => {
                 onClickHandler(__originalIndex);
             }, index: __originalIndex, "data-iui-filtered-index": filteredIndex }, option.label));
     }, [

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import type { PopoverProps } from '../utils/index.js';
+/// <reference types="react" />
+import type { PopoverProps, PolymorphicForwardRefComponent } from '../utils/index.js';
 declare type ComboBoxDropdownProps = PopoverProps & {
     children: JSX.Element;
 };
-export declare const ComboBoxDropdown: React.ForwardRefExoticComponent<Pick<ComboBoxDropdownProps, "disabled" | "theme" | "children" | "className" | "role" | "offset" | "content" | "plugins" | "placement" | "trigger" | "visible" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<Element>>;
+export declare const ComboBoxDropdown: PolymorphicForwardRefComponent<"div", ComboBoxDropdownProps>;
 export {};

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

@@ -1,5 +1,7 @@
-import * as React from 'react';
-export declare const ComboBoxEndIcon: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
-    disabled?: boolean | undefined;
-    isOpen?: boolean | undefined;
-} & React.RefAttributes<HTMLSpanElement>>;
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type ComboBoxEndIconProps = {
+    disabled?: boolean;
+    isOpen?: boolean;
+};
+export declare const ComboBoxEndIcon: PolymorphicForwardRefComponent<"span", ComboBoxEndIconProps>;
+export {};

package/cjs/core/ComboBox/ComboBoxEndIcon.js

@@ -40,7 +40,7 @@ exports.ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
     const dispatch = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxActionContext);
     const { toggleButtonRef } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
     const refs = (0, index_js_1.useMergedRefs)(toggleButtonRef, forwardedRef);
-    return (React.createElement("span", { ref: refs, className: (0, classnames_1.default)('iui-end-icon', {
+    return (React.createElement(index_js_1.Box, { as: 'span', ref: refs, className: (0, classnames_1.default)('iui-end-icon', {
             'iui-actionable': !disabled,
             'iui-disabled': disabled,
             'iui-open': isOpen,

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-export declare const ComboBoxInput: React.ForwardRefExoticComponent<{
-    selectTags?: JSX.Element[] | undefined;
-} & {
-    setFocus?: boolean | undefined;
-    size?: "small" | "large" | undefined;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
+import { Input } from '../Input/index.js';
+import { type PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type ComboBoxInputProps = {
+    selectTags?: JSX.Element[];
+} & React.ComponentProps<typeof Input>;
+export declare const ComboBoxInput: PolymorphicForwardRefComponent<"input", ComboBoxInputProps>;
+export {};

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

@@ -1,8 +1,4 @@
-import * as React from 'react';
-import type { InputContainerProps } from '../utils/index.js';
-declare type ComboBoxInputContainerProps = React.ComponentPropsWithoutRef<'div'> & Pick<InputContainerProps, 'status' | 'message' | 'disabled'>;
-export declare const ComboBoxInputContainer: {
-    (props: ComboBoxInputContainerProps): JSX.Element;
-    displayName: string;
-};
+import type { InputContainerProps, PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type ComboBoxInputContainerProps = Pick<InputContainerProps, 'status' | 'message' | 'disabled'>;
+export declare const ComboBoxInputContainer: PolymorphicForwardRefComponent<"div", ComboBoxInputContainerProps>;
 export {};

package/cjs/core/ComboBox/ComboBoxInputContainer.js

@@ -32,12 +32,11 @@ const React = __importStar(require("react"));
 const index_js_1 = require("../StatusMessage/index.js");
 const index_js_2 = require("../utils/index.js");
 const helpers_js_1 = require("./helpers.js");
-const ComboBoxInputContainer = (props) => {
+exports.ComboBoxInputContainer = React.forwardRef((props, forwardedRef) => {
     const { className, status, message, children, ...rest } = props;
     const { id } = (0, index_js_2.useSafeContext)(helpers_js_1.ComboBoxStateContext);
     return (React.createElement(index_js_2.InputContainer, { className: className, status: status, statusMessage: typeof message === 'string' ? (React.createElement(index_js_1.StatusMessage, { status: status }, message)) : (React.isValidElement(message) &&
-            React.cloneElement(message, { status })), ...rest, id: id },
-        React.createElement("div", { className: 'iui-input-with-icon' }, children)));
-};
-exports.ComboBoxInputContainer = ComboBoxInputContainer;
+            React.cloneElement(message, { status })), ref: forwardedRef, ...rest, id: id },
+        React.createElement(index_js_2.Box, { className: 'iui-input-with-icon' }, children)));
+});
 exports.ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';

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

@@ -1,3 +1,6 @@
 import * as React from 'react';
-import type { MenuProps } from '../Menu/index.js';
-export declare const ComboBoxMenu: React.ForwardRefExoticComponent<Omit<MenuProps, "onClick"> & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof React.HTMLAttributes<HTMLUListElement>> & React.RefAttributes<HTMLUListElement>>;
+import { Menu } from '../Menu/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type ComboBoxMenuProps = Omit<React.ComponentPropsWithoutRef<typeof Menu>, 'onClick'> & React.ComponentPropsWithoutRef<'ul'>;
+export declare const ComboBoxMenu: PolymorphicForwardRefComponent<"ul", ComboBoxMenuProps>;
+export {};

package/cjs/core/ComboBox/ComboBoxMenu.js

@@ -69,9 +69,9 @@ const VirtualizedComboBoxMenu = React.forwardRef(({ children, className, style,
         overflowY: isOverflowOverlaySupported() ? 'overlay' : 'auto',
         ...style,
     };
-    return (React.createElement(index_js_2.Surface, { style: surfaceStyles, ...rest },
+    return (React.createElement(index_js_2.Surface, { style: surfaceStyles },
         React.createElement("div", { ...outerProps },
-            React.createElement(index_js_1.Menu, { id: `${id}-list`, setFocus: false, role: 'listbox', ref: (0, index_js_3.mergeRefs)(menuRef, innerProps.ref, forwardedRef), className: className, style: innerProps.style }, visibleChildren))));
+            React.createElement(index_js_1.Menu, { id: `${id}-list`, setFocus: false, role: 'listbox', ref: (0, index_js_3.mergeRefs)(menuRef, innerProps.ref, forwardedRef), className: className, style: innerProps.style, ...rest }, visibleChildren))));
 });
 exports.ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
     const { className, style, ...rest } = props;

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

@@ -1,21 +1,8 @@
 import * as React from 'react';
-export declare const ComboBoxMenuItem: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
-    isSelected?: boolean | undefined;
-    disabled?: boolean | undefined;
-    value?: unknown;
-    onClick?: ((value?: unknown) => void) | undefined;
-    size?: "default" | "large" | undefined;
-    sublabel?: React.ReactNode;
-    icon?: JSX.Element | undefined;
-    badge?: JSX.Element | undefined;
-    role?: string | undefined;
-    subMenuItems?: JSX.Element[] | undefined;
-    children?: React.ReactNode;
-} & {
-    title?: string | undefined;
-    id?: string | undefined;
-} & {
-    style?: React.CSSProperties | undefined;
-} & import("../utils/props.js").ClassNameProps & {
+import type { MenuItemProps } from '../Menu/MenuItem.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type ComboBoxMenuItemProps = MenuItemProps & {
     index: number;
-} & React.RefAttributes<HTMLLIElement>>>;
+};
+export declare const ComboBoxMenuItem: React.MemoExoticComponent<PolymorphicForwardRefComponent<"li", ComboBoxMenuItemProps>>;
+export {};

package/cjs/core/ComboBox/ComboBoxMenuItem.js

@@ -22,21 +22,18 @@ 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.ComboBoxMenuItem = 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");
 const helpers_js_1 = require("./helpers.js");
+const ListItem_js_1 = require("../List/ListItem.js");
 exports.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 } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxStateContext);
     const focusRef = (el) => {
         if (!enableVirtualization && focusedIndex === index) {
@@ -44,22 +41,11 @@ exports.ComboBoxMenuItem = React.memo(React.forwardRef((props, forwardedRef) =>
         }
     };
     const refs = (0, index_js_1.useMergedRefs)(forwardedRef, focusRef);
-    return (React.createElement("li", { className: (0, classnames_1.default)('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: (0, classnames_1.default)(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: (0, classnames_1.default)(badge.props.className, 'iui-icon'),
-            })));
+    return (React.createElement(ListItem_js_1.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_js_1.ListItem.Icon, { as: 'span', "aria-hidden": true }, startIcon)),
+        React.createElement(ListItem_js_1.ListItem.Content, null,
+            children,
+            sublabel && React.createElement(ListItem_js_1.ListItem.Description, null, sublabel)),
+        endIcon && (React.createElement(ListItem_js_1.ListItem.Icon, { as: 'span', "aria-hidden": true }, endIcon))));
 }));
 exports.ComboBoxMenuItem.displayName = 'ComboBoxMenuItem';

package/cjs/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/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,5 @@
-/// <reference types="react" />
-import '@itwin/itwinui-css/css/date-picker.css';
-import type { TimePickerProps } from '../TimePicker/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/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 +33,7 @@ export declare type DateRangePickerProps = {
     endDate: Date;
     onChange?: (startDate: Date, endDate: Date) => void;
 };
-export declare type DatePickerProps = {
+declare type DatePickerProps = {
     /**
      * Selected date.
      */
@@ -72,5 +71,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

@@ -34,7 +34,6 @@ exports.DatePicker = exports.generateLocalizedStrings = 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/date-picker.css");
 const index_js_2 = require("../Buttons/IconButton/index.js");
 const index_js_3 = require("../TimePicker/index.js");
 const isSameDay = (a, b) => {
@@ -140,10 +139,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 +359,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 +390,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,12 @@
 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 +29,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

@@ -33,7 +33,6 @@ exports.Dialog = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-require("@itwin/itwinui-css/css/dialog.css");
 const DialogTitleBar_js_1 = require("./DialogTitleBar.js");
 const DialogContent_js_1 = require("./DialogContent.js");
 const DialogBackdrop_js_1 = require("./DialogBackdrop.js");
@@ -41,6 +40,27 @@ 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', placement, 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,
+            placement,
+        } },
+        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,3 @@
-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 +6,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,40 +1,11 @@
 "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");
 /**
  * Container for Buttons in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example
@@ -43,9 +14,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,3 @@
-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 +5,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;