@itwin/itwinui-react 3.2.4 → 3.3.1

package/cjs/core/LabeledSelect/LabeledSelect.d.ts

@@ -10,6 +10,22 @@ export type LabeledSelectProps<T> = {
     label?: React.ReactNode;
     /**
      * Message below the select. Does not apply to 'inline' select.
+     *
+     * @example
+     * <caption>strings</caption>
+     * <LabeledSelect message='Positive Message' … />
+     *
+     * @example
+     * <caption>Using StatusMessage for complete customization (e.g. icon)</caption>
+     * <LabeledSelect
+     *   status="positive"
+     *   message={
+     *     <StatusMessage status="positive" startIcon={<SvgStar />}>
+     *       Help message
+     *     </StatusMessage>
+     *   }
+     *   …
+     * />
      */
     message?: React.ReactNode;
     /**
@@ -18,6 +34,8 @@ export type LabeledSelectProps<T> = {
      */
     status?: 'positive' | 'warning' | 'negative';
     /**
+     * @deprecated Pass a `<StatusMessage startIcon={svgIcon} />` to the `message` prop instead.
+     *
      * Custom svg icon. Will override status icon if specified.
      */
     svgIcon?: JSX.Element;

package/cjs/core/LabeledSelect/LabeledSelect.js

@@ -30,11 +30,9 @@ exports.LabeledSelect = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const Select_js_1 = require("../Select/Select.js");
-const index_js_1 = require("../utils/index.js");
 const StatusMessage_js_1 = require("../StatusMessage/StatusMessage.js");
 const InputGrid_js_1 = require("../InputGrid/InputGrid.js");
 const Label_js_1 = require("../Label/Label.js");
-const Icon_js_1 = require("../Icon/Icon.js");
 /**
  * Labeled select component to select value from options.
  * @example
@@ -69,23 +67,10 @@ const Icon_js_1 = require("../Icon/Icon.js");
  * />
  */
 exports.LabeledSelect = React.forwardRef((props, forwardedRef) => {
-    const { className, disabled = false, label, message, status, svgIcon, displayStyle = 'default', style, required = false, triggerProps, wrapperProps, labelProps, messageContentProps, messageIconProps, ...rest } = props;
-    const labelId = `${(0, index_js_1.useId)()}-label`;
-    const icon = () => {
-        if (svgIcon) {
-            return React.createElement(Icon_js_1.Icon, null, svgIcon);
-        }
-        if (status && message) {
-            return index_js_1.StatusIconMap[status]();
-        }
-        return undefined;
-    };
-    return (React.createElement(InputGrid_js_1.InputGrid, { labelPlacement: displayStyle, ...wrapperProps },
-        label && (React.createElement(Label_js_1.Label, { as: 'div', required: required, disabled: disabled, id: labelId, ...labelProps }, label)),
-        React.createElement(Select_js_1.Select, { disabled: disabled, className: className, style: style, status: status, ...rest, ref: forwardedRef, triggerProps: {
-                'aria-labelledby': labelId,
-                ...triggerProps,
-            } }),
-        typeof message === 'string' ? (React.createElement(StatusMessage_js_1.StatusMessage, { status: status, startIcon: displayStyle === 'default' ? icon() : undefined, iconProps: messageIconProps, contentProps: messageContentProps }, message)) : (message)));
+    const { className, disabled = false, label, message, status, svgIcon, displayStyle = 'default', style, required = false, wrapperProps, labelProps, messageContentProps, messageIconProps, ...rest } = props;
+    return (React.createElement(InputGrid_js_1.InputGrid, { labelPlacement: displayStyle, "data-iui-status": status, ...wrapperProps },
+        label && (React.createElement(Label_js_1.Label, { as: 'div', required: required, disabled: disabled, ...labelProps }, label)),
+        React.createElement(Select_js_1.Select, { disabled: disabled, className: className, style: style, ...rest, ref: forwardedRef }),
+        typeof message === 'string' ? (React.createElement(StatusMessage_js_1.StatusMessage, { status: status, startIcon: svgIcon, iconProps: messageIconProps, contentProps: messageContentProps }, message)) : (message)));
 });
 exports.default = exports.LabeledSelect;

package/cjs/core/List/ListItem.d.ts

@@ -68,4 +68,14 @@ export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnP
      * </ListItem>
      */
     Description: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    /**
+     * Wrapper over [LinkAction](https://itwinui.bentley.com/docs/linkaction) which allows rendering a link inside a ListItem.
+     * This ensures that clicking anywhere on the ListItem will trigger the link.
+     *
+     * @example
+     * <ListItem>
+     *  <ListItem.Action href='https://example.com'>Example link</ListItem.Action>
+     * </ListItem>
+     */
+    Action: PolymorphicForwardRefComponent<"a", {}>;
 };

package/cjs/core/List/ListItem.js

@@ -34,6 +34,7 @@ exports.ListItem = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
+const LinkAction_js_1 = require("../LinkAction/LinkAction.js");
 const ListItemComponent = React.forwardRef((props, ref) => {
     const { size = 'default', disabled = false, active = false, actionable = false, focused = false, className, ...rest } = props;
     return (React.createElement(index_js_1.Box, { as: 'li', className: (0, classnames_1.default)('iui-list-item', className), "data-iui-active": active ? 'true' : undefined, "data-iui-disabled": disabled ? 'true' : undefined, "data-iui-size": size === 'large' ? 'large' : undefined, "data-iui-actionable": actionable ? 'true' : undefined, "data-iui-focused": focused ? 'true' : undefined, ref: ref, ...rest }));
@@ -49,6 +50,9 @@ ListItemContent.displayName = 'ListItem.Content';
 const ListItemDescription = (0, index_js_1.polymorphic)('iui-list-item-description');
 ListItemDescription.displayName = 'ListItem.Description';
 // ----------------------------------------------------------------------------
+const ListItemAction = LinkAction_js_1.LinkAction;
+ListItemAction.displayName = 'ListItem.Action';
+// ----------------------------------------------------------------------------
 // Exported compound component
 /**
  * A generic ListItem component that can be used simply for displaying data, or as a base
@@ -90,4 +94,14 @@ exports.ListItem = Object.assign(ListItemComponent, {
      * </ListItem>
      */
     Description: ListItemDescription,
+    /**
+     * Wrapper over [LinkAction](https://itwinui.bentley.com/docs/linkaction) which allows rendering a link inside a ListItem.
+     * This ensures that clicking anywhere on the ListItem will trigger the link.
+     *
+     * @example
+     * <ListItem>
+     *  <ListItem.Action href='https://example.com'>Example link</ListItem.Action>
+     * </ListItem>
+     */
+    Action: ListItemAction,
 });

package/cjs/core/Menu/MenuItem.d.ts

@@ -43,7 +43,7 @@ export type MenuItemProps = {
      */
     endIcon?: JSX.Element;
     /**
-     * @deprecated Use endIcon
+     * @deprecated Use endIcon.
      * SVG icon component shown on the right.
      */
     badge?: JSX.Element;

package/cjs/core/Modal/Modal.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent, PortalProps } from '../utils/index.js';
 import type { DialogMainProps } from '../Dialog/DialogMain.js';
 type ModalProps = {
     /**
@@ -33,12 +33,11 @@ type ModalProps = {
      * If true, the dialog will be portaled into a <div> inside the nearest `ThemeProvider`.
      *
      * Can be set to an object with a `to` property to portal into a specific element.
+     * If `to`/`to()` === `null`/`undefined`, the default behavior will be used (i.e. as if `portal` is not passed).
      *
      * @default true
      */
-    portal?: boolean | {
-        to: HTMLElement;
-    };
+    portal?: PortalProps['portal'];
     /**
      * Content of the modal.
      */

package/cjs/core/Select/Select.js

@@ -98,7 +98,7 @@ const isSingleOnChange = (onChange, multiple) => {
  */
 exports.Select = React.forwardRef((props, forwardedRef) => {
     const uid = (0, index_js_1.useId)();
-    const { options, value: valueProp, onChange: onChangeProp, placeholder, disabled = false, size, itemRenderer, selectedItemRenderer, className, style, menuClassName, menuStyle, multiple = false, triggerProps, status, popoverProps, ...rest } = props;
+    const { options, value: valueProp, onChange: onChangeProp, placeholder, disabled = false, size, itemRenderer, selectedItemRenderer, menuClassName, menuStyle, multiple = false, triggerProps, status, popoverProps, ...rest } = props;
     const [isOpen, setIsOpen] = React.useState(false);
     const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
     const [uncontrolledValue, setUncontrolledValue] = React.useState();
@@ -189,7 +189,7 @@ exports.Select = React.forwardRef((props, forwardedRef) => {
         onVisibleChange: (open) => (open ? show() : hide()),
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-input-with-icon', className), style: style, ...rest, ref: (0, index_js_1.useMergedRefs)(popover.refs.setPositionReference, forwardedRef) },
+        React.createElement(index_js_1.InputWithIcon, { ...rest, ref: (0, index_js_1.useMergedRefs)(popover.refs.setPositionReference, forwardedRef) },
             React.createElement(index_js_1.Box, { ...popover.getReferenceProps(), tabIndex: 0, role: 'combobox', "data-iui-size": size, "data-iui-status": status, "aria-disabled": disabled, "aria-autocomplete": 'none', "aria-expanded": isOpen, "aria-haspopup": 'listbox', "aria-controls": `${uid}-menu`, ...triggerProps, ref: (0, index_js_1.useMergedRefs)(selectRef, triggerProps?.ref, popover.refs.setReference), className: (0, classnames_1.default)('iui-select-button', {
                     'iui-placeholder': (!selectedItems || selectedItems.length === 0) &&
                         !!placeholder,

package/cjs/core/StatusMessage/StatusMessage.d.ts

@@ -4,9 +4,11 @@ import { Icon } from '../Icon/Icon.js';
 type StatusMessageProps = {
     /**
      * Custom icon to be displayed at the beginning.
-     * It will default to the `status` icon, if it's set.
+     *
+     * - It will default to the `status` icon, if `status` is set.
+     * - If `startIcon` is set to `null`, no icon will be displayed, even if `status` is set.
      */
-    startIcon?: JSX.Element;
+    startIcon?: JSX.Element | null;
     /**
      * Message content.
      */

package/cjs/core/StatusMessage/StatusMessage.js

@@ -44,8 +44,10 @@ const Icon_js_1 = require("../Icon/Icon.js");
 exports.StatusMessage = React.forwardRef((props, ref) => {
     const { children, startIcon: userStartIcon, status, className, iconProps, contentProps, ...rest } = props;
     const icon = userStartIcon ?? (status && index_js_1.StatusIconMap[status]());
+    // If user passes null, we don't want to show the icon
+    const shouldShowIcon = userStartIcon !== null && !!icon;
     return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-status-message', className), "data-iui-status": status, ref: ref, ...rest },
-        !!icon ? (React.createElement(Icon_js_1.Icon, { "aria-hidden": true, ...iconProps }, icon)) : null,
+        shouldShowIcon ? (React.createElement(Icon_js_1.Icon, { "aria-hidden": true, ...iconProps }, icon)) : null,
         React.createElement(index_js_1.Box, { ...contentProps }, children)));
 });
 exports.default = exports.StatusMessage;

package/cjs/core/Table/Table.js

@@ -429,6 +429,9 @@ const Table = (props) => {
                     React.createElement(index_js_1.Box, { as: 'div', ...headerProps, className: (0, classnames_1.default)('iui-table-header', headerProps?.className) },
                         React.createElement(index_js_1.Box, { ...headerGroupProps }, headerGroup.headers.map((column, index) => {
                             const { onClick, ...restSortProps } = column.getSortByToggleProps();
+                            const columnHasExpanders = hasAnySubRows &&
+                                index ===
+                                    headerGroup.headers.findIndex((c) => c.id !== index_js_5.SELECTION_CELL_ID);
                             const columnProps = column.getHeaderProps({
                                 ...restSortProps,
                                 className: (0, classnames_1.default)('iui-table-cell', {
@@ -438,6 +441,7 @@ const Table = (props) => {
                                 }, column.columnClassName),
                                 style: {
                                     ...(0, utils_js_1.getCellStyle)(column, !!state.isTableResizing),
+                                    ...(columnHasExpanders && (0, utils_js_1.getSubRowStyle)({ density })),
                                     ...(0, utils_js_1.getStickyStyle)(column, visibleColumns),
                                     flexWrap: 'unset',
                                 },

package/cjs/core/Table/TableCell.js

@@ -42,34 +42,19 @@ const TableCell = (props) => {
     const { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, density, } = props;
     const hasSubRowExpander = cellIndex ===
         cell.row.cells.findIndex((c) => c.column.id !== index_js_1.SELECTION_CELL_ID);
-    const getSubRowStyle = () => {
-        if (!tableHasSubRows || !hasSubRowExpander) {
-            return undefined;
-        }
-        // If it doesn't have sub-rows then shift by another level to align with expandable rows on the same depth
-        const dynamicMargin = cell.row.depth + (cell.row.canExpand ? 0 : 1);
-        let cellPadding = 16;
-        let expanderMargin = 8;
-        if (density === 'condensed') {
-            cellPadding = 12;
-            expanderMargin = 4;
-        }
-        else if (density === 'extra-condensed') {
-            cellPadding = 8;
-            expanderMargin = 4;
-        }
-        const multiplier = 26 + expanderMargin; // 26 = expander width
-        return {
-            paddingInlineStart: cellPadding + dynamicMargin * multiplier,
-        };
-    };
     const cellElementProps = cell.getCellProps({
         className: (0, classnames_1.default)('iui-table-cell', cell.column.cellClassName, {
             'iui-table-cell-sticky': !!cell.column.sticky,
         }),
         style: {
             ...(0, utils_js_1.getCellStyle)(cell.column, !!tableInstance.state.isTableResizing),
-            ...getSubRowStyle(),
+            ...(tableHasSubRows &&
+                hasSubRowExpander &&
+                (0, utils_js_1.getSubRowStyle)({
+                    density,
+                    // If it doesn't have sub-rows then shift by another level to align with expandable rows on the same depth
+                    depth: cell.row.depth + (cell.row.canExpand ? 0 : 1),
+                })),
             ...(0, utils_js_1.getStickyStyle)(cell.column, tableInstance.visibleColumns),
         },
     });

package/cjs/core/Table/columns/selectionColumn.d.ts

@@ -27,7 +27,7 @@ export declare const SelectionColumn: <T extends Record<string, unknown>>(props?
     maxWidth: number;
     columnClassName: string;
     cellClassName: string;
-    Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, initialRows, state, }: HeaderProps<T>) => React.JSX.Element;
+    Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, preFilteredFlatRows, state, }: HeaderProps<T>) => React.JSX.Element;
     Cell: ({ row }: CellProps<T>) => React.JSX.Element;
     cellRenderer: (props: CellRendererProps<T>) => React.JSX.Element;
 };

package/cjs/core/Table/columns/selectionColumn.js

@@ -57,9 +57,9 @@ const SelectionColumn = (props = {}) => {
         maxWidth: densityWidth,
         columnClassName: 'iui-slot',
         cellClassName: 'iui-slot',
-        Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, initialRows, state, }) => {
-            const disabled = rows.every((row) => isDisabled?.(row.original));
-            const checked = initialRows.every((row) => state.selectedRowIds[row.id] || isDisabled?.(row.original));
+        Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, preFilteredFlatRows, state, }) => {
+            const disabled = preFilteredFlatRows.every((row) => isDisabled?.(row.original));
+            const checked = preFilteredFlatRows.every((row) => state.selectedRowIds[row.id] || isDisabled?.(row.original));
             const indeterminate = !checked && Object.keys(state.selectedRowIds).length > 0;
             return (React.createElement(Checkbox_js_1.Checkbox, { ...getToggleAllRowsSelectedProps(), style: {}, title: '' // Removes default title that comes from react-table
                 , checked: checked && !disabled, indeterminate: indeterminate, disabled: disabled, onChange: () => toggleAllRowsSelected(!rows.some((row) => row.isSelected)) }));

package/cjs/core/Table/utils.d.ts

@@ -1,3 +1,9 @@
 import type { ColumnInstance } from '../../react-table/react-table.js';
 export declare const getCellStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, isTableResizing: boolean) => React.CSSProperties | undefined;
 export declare const getStickyStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, columnList: ColumnInstance<T>[]) => React.CSSProperties;
+export declare const getSubRowStyle: ({ density, depth }: {
+    density?: string | undefined;
+    depth?: number | undefined;
+}) => {
+    paddingInlineStart: number;
+};

package/cjs/core/Table/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getStickyStyle = exports.getCellStyle = void 0;
+exports.getSubRowStyle = exports.getStickyStyle = exports.getCellStyle = void 0;
 const getCellStyle = (column, isTableResizing) => {
     const style = {};
     style.flex = `1 1 145px`;
@@ -48,3 +48,20 @@ const getStickyStyle = (column, columnList) => {
     };
 };
 exports.getStickyStyle = getStickyStyle;
+const getSubRowStyle = ({ density = 'default', depth = 1 }) => {
+    let cellPadding = 16;
+    let expanderMargin = 8;
+    if (density === 'condensed') {
+        cellPadding = 12;
+        expanderMargin = 4;
+    }
+    else if (density === 'extra-condensed') {
+        cellPadding = 8;
+        expanderMargin = 4;
+    }
+    const multiplier = 26 + expanderMargin; // 26 = expander width
+    return {
+        paddingInlineStart: cellPadding + depth * multiplier,
+    };
+};
+exports.getSubRowStyle = getSubRowStyle;

package/cjs/core/utils/components/InputWithIcon.d.ts

@@ -0,0 +1,2 @@
+/** @private */
+export declare const InputWithIcon: import("../props.js").PolymorphicForwardRefComponent<"div", {}>;

package/cjs/core/utils/components/InputWithIcon.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputWithIcon = 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 polymorphic_js_1 = require("../functions/polymorphic.js");
+/** @private */
+exports.InputWithIcon = polymorphic_js_1.polymorphic.div('iui-input-with-icon');
+exports.InputWithIcon.displayName = 'InputWithIcon';

package/cjs/core/utils/components/Portal.d.ts

@@ -9,10 +9,12 @@ export type PortalProps = {
      *
      * Otherwise, it will portal to the element passed to `to`.
      *
+     * If `to`/`to()` === `null`/`undefined`, the default behavior will be used (i.e. as if `portal` is not passed).
+     *
      * @default true
      */
     portal?: boolean | {
-        to: HTMLElement | (() => HTMLElement);
+        to: HTMLElement | null | undefined | (() => HTMLElement | null | undefined);
     };
 };
 /**
@@ -21,6 +23,8 @@ export type PortalProps = {
  *   - if `portal` is set to true, renders into nearest ThemeContext.portalContainer
  *   - if `portal` is set to false, renders as-is without portal
  *   - otherwise renders into `portal.to` (can be an element or a function)
+ *     - If `to`/`to()` === `null`/`undefined`, the default behavior will be used (i.e. as if `portal` is not passed).
+ *     - E.g. `portal={{ to: () => document.querySelector('.may-not-exist') }}`.
  *
  * @private
  */

package/cjs/core/utils/components/Portal.js

@@ -40,6 +40,8 @@ const useIsClient_js_1 = require("../hooks/useIsClient.js");
  *   - if `portal` is set to true, renders into nearest ThemeContext.portalContainer
  *   - if `portal` is set to false, renders as-is without portal
  *   - otherwise renders into `portal.to` (can be an element or a function)
+ *     - If `to`/`to()` === `null`/`undefined`, the default behavior will be used (i.e. as if `portal` is not passed).
+ *     - E.g. `portal={{ to: () => document.querySelector('.may-not-exist') }}`.
  *
  * @private
  */
@@ -56,8 +58,10 @@ exports.Portal = Portal;
 // ----------------------------------------------------------------------------
 const usePortalTo = (portal) => {
     const themeInfo = React.useContext(ThemeContext_js_1.ThemeContext);
+    const defaultPortalTo = themeInfo?.portalContainer ?? (0, dom_js_1.getDocument)()?.body;
     if (typeof portal === 'boolean') {
-        return portal ? themeInfo?.portalContainer ?? (0, dom_js_1.getDocument)()?.body : null;
+        return portal ? defaultPortalTo : null;
     }
-    return typeof portal.to === 'function' ? portal.to() : portal.to;
+    const portalTo = typeof portal.to === 'function' ? portal.to() : portal.to;
+    return portalTo ?? defaultPortalTo;
 };

package/cjs/core/utils/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './Resizer.js';
 export * from './FocusTrap.js';
 export * from './InputContainer.js';
 export * from './InputFlexContainer.js';
+export * from './InputWithIcon.js';
 export * from './WithCSSTransition.js';
 export * from './MiddleTextTruncation.js';
 export * from './VirtualScroll.js';

package/cjs/core/utils/components/index.js

@@ -22,6 +22,7 @@ __exportStar(require("./Resizer.js"), exports);
 __exportStar(require("./FocusTrap.js"), exports);
 __exportStar(require("./InputContainer.js"), exports);
 __exportStar(require("./InputFlexContainer.js"), exports);
+__exportStar(require("./InputWithIcon.js"), exports);
 __exportStar(require("./WithCSSTransition.js"), exports);
 __exportStar(require("./MiddleTextTruncation.js"), exports);
 __exportStar(require("./VirtualScroll.js"), exports);

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

@@ -102,5 +102,7 @@ export type ComboBoxProps<T> = {
  *   onChange={() => {}}
  * />
  */
-export declare const ComboBox: <T>(props: ComboBoxProps<T>) => React.JSX.Element;
+export declare const ComboBox: <T>(props: ComboBoxProps<T> & {
+    ref?: React.ForwardedRef<HTMLElement> | undefined;
+}) => JSX.Element;
 export default ComboBox;

package/esm/core/ComboBox/ComboBox.js

@@ -39,7 +39,7 @@ const getOptionId = (option, idPrefix) => {
  *   onChange={() => {}}
  * />
  */
-export const ComboBox = (props) => {
+export const ComboBox = React.forwardRef((props, forwardedRef) => {
     const idPrefix = useId();
     const { options, value: valueProp, onChange, filterFunction, inputProps, endIconProps, dropdownMenuProps, emptyStateMessage = 'No options found', itemRenderer, enableVirtualization = false, multiple = false, onShow: onShowProp, onHide: onHideProp, id = inputProps?.id ? `iui-${inputProps.id}-cb` : idPrefix, ...rest } = props;
     // Refs get set in subcomponents
@@ -299,7 +299,7 @@ export const ComboBox = (props) => {
                     show,
                     hide,
                 } },
-                React.createElement(ComboBoxInputContainer, { disabled: inputProps?.disabled, ...rest },
+                React.createElement(ComboBoxInputContainer, { ref: forwardedRef, disabled: inputProps?.disabled, ...rest },
                     React.createElement(React.Fragment, null,
                         React.createElement(ComboBoxInput, { value: inputValue, disabled: inputProps?.disabled, ...inputProps, onChange: handleOnInput, selectTags: isMultipleEnabled(selected, multiple)
                                 ? selected.map((index) => {
@@ -312,5 +312,5 @@ export const ComboBox = (props) => {
                 React.createElement(ComboBoxMenu, { as: 'div', ...dropdownMenuProps }, filteredOptions.length > 0 && !enableVirtualization
                     ? filteredOptions.map(getMenuItem)
                     : emptyContent)))));
-};
+});
 export default ComboBox;

package/esm/core/ComboBox/ComboBoxInputContainer.js

@@ -4,13 +4,13 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { StatusMessage } from '../StatusMessage/StatusMessage.js';
-import { InputContainer, useSafeContext, Box } from '../utils/index.js';
+import { InputContainer, useSafeContext, InputWithIcon, } from '../utils/index.js';
 import { ComboBoxStateContext } from './helpers.js';
 export const ComboBoxInputContainer = React.forwardRef((props, forwardedRef) => {
     const { className, status, message, children, ...rest } = props;
     const { id } = useSafeContext(ComboBoxStateContext);
     return (React.createElement(InputContainer, { className: className, status: status, statusMessage: typeof message === 'string' ? (React.createElement(StatusMessage, { status: status }, message)) : (React.isValidElement(message) &&
             React.cloneElement(message, { status })), ref: forwardedRef, ...rest, id: id },
-        React.createElement(Box, { className: 'iui-input-with-icon' }, children)));
+        React.createElement(InputWithIcon, null, children)));
 });
 ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';

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

@@ -1,4 +1,3 @@
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 /**
  * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example
@@ -6,5 +5,5 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
  *   My dialog content
  * </Dialog.Content>
  */
-export declare const DialogContent: PolymorphicForwardRefComponent<"div", {}>;
+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 { supportsHas, useMergedRefs, Box } from '../utils/index.js';
+import { polymorphic } from '../utils/index.js';
 /**
  * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example
@@ -12,18 +10,5 @@ import { supportsHas, useMergedRefs, Box } from '../utils/index.js';
  *   My dialog content
  * </Dialog.Content>
  */
-export const DialogContent = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    const contentRef = React.useRef(null);
-    React.useEffect(() => {
-        // firefox hack for adding data-iui-flex in absence of :has
-        if (!supportsHas()) {
-            const dialog = contentRef.current?.closest('[role=dialog]');
-            if (dialog instanceof HTMLElement) {
-                dialog.dataset.iuiFlex = 'true';
-            }
-        }
-    }, []);
-    return (React.createElement(Box, { className: cx('iui-dialog-content', className), ref: useMergedRefs(contentRef, ref), ...rest }, children));
-});
+export const DialogContent = polymorphic.div('iui-dialog-content');
 export default DialogContent;

package/esm/core/Dialog/DialogContext.d.ts

@@ -67,6 +67,7 @@ export type DialogContextProps = {
      * Recommended to set to true when for modal dialogs that use `relativeTo='viewport'`.
      *
      * Can be set to an object with a `to` property to portal into a specific element.
+     * If `to`/`to()` === `null`/`undefined`, the default behavior will be used (i.e. as if `portal` is not passed).
      *
      * Defaults to false if using `Dialog` and true if using `Modal`.
      */

package/esm/core/Dialog/DialogMain.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { FocusTrap, getTranslateValuesFromElement, Resizer, useMergedRefs, useIsomorphicLayoutEffect, Box, getTranslateValues, roundByDPR, } from '../utils/index.js';
+import { FocusTrap, getTranslateValuesFromElement, Resizer, useMergedRefs, useIsomorphicLayoutEffect, Box, } from '../utils/index.js';
 import { useDialogContext } from './DialogContext.js';
 import { CSSTransition } from 'react-transition-group';
 import { DialogDragContext } from './DialogDragContext.js';
@@ -34,7 +34,6 @@ export const DialogMain = React.forwardRef((props, ref) => {
     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, placement = dialogContext.placement, ...rest } = props;
     const [style, setStyle] = React.useState();
     const dialogRef = React.useRef(null);
-    const [dialogElement, setDialogElement] = React.useState();
     const hasBeenResized = React.useRef(false);
     const previousFocusedElement = React.useRef();
     const originalBodyOverflow = React.useRef('');
@@ -102,17 +101,13 @@ export const DialogMain = React.forwardRef((props, ref) => {
             ...newStyle,
         }));
     }, []);
-    const roundedTransform = useRoundedTransform({
-        element: dialogElement,
-        transform,
-    });
     const content = (React.createElement(Box, { className: cx('iui-dialog', {
             'iui-dialog-default': styleType === 'default',
             'iui-dialog-full-page': styleType === 'fullPage',
             'iui-dialog-visible': isOpen,
             'iui-dialog-draggable': isDraggable,
-        }, className), role: 'dialog', ref: useMergedRefs(dialogRef, ref, setDialogElement), onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
-            transform: roundedTransform,
+        }, className), role: 'dialog', ref: useMergedRefs(dialogRef, ref), onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
+            transform,
             ...style,
             ...propStyle,
         }, ...rest },
@@ -144,20 +139,3 @@ export const DialogMain = React.forwardRef((props, ref) => {
             !trapFocus && content)));
 });
 export default DialogMain;
-// ----------------------------------------------------------------------------
-/**
- * Rounds off an element's transform value based on the device's pixel grid, to avoid blurring.
- */
-const useRoundedTransform = ({ element, transform, }) => {
-    const [roundedStyles, setRoundedStyles] = React.useState(transform);
-    useIsomorphicLayoutEffect(() => {
-        if (!element || typeof DOMMatrix === 'undefined') {
-            return;
-        }
-        const [x, y] = transform
-            ? getTranslateValues(transform)
-            : getTranslateValuesFromElement(element);
-        setRoundedStyles(`translate(${roundByDPR(x)}px, ${roundByDPR(y)}px)`);
-    }, [element, transform]);
-    return roundedStyles;
-};

package/esm/core/ExpandableBlock/ExpandableBlock.d.ts

@@ -73,7 +73,7 @@ export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", Expa
      *    <ExpandableBlock.EndIcon/>
      * </ExpandableBlock.Trigger>
      */
-    Trigger: PolymorphicForwardRefComponent<"button", ExpandableBlockTriggerOwnProps>;
+    Trigger: PolymorphicForwardRefComponent<"div", ExpandableBlockTriggerOwnProps>;
     /**
      * The expanding icon on the left of header
      */
@@ -90,11 +90,11 @@ export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", Expa
     /**
      * The main text displayed on the block header, regardless of state.
      */
-    Title: PolymorphicForwardRefComponent<"div", {}>;
+    Title: PolymorphicForwardRefComponent<"button", {}>;
     /**
      * Small note displayed below title, regardless of state.
      */
-    Caption: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    Caption: PolymorphicForwardRefComponent<"div", {}>;
     /**
      * Svg icon displayed at the end of the main text.
      * Will override status icon if specified. Used inside `Header` subcomponent.
@@ -110,7 +110,10 @@ export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", Expa
         fill?: "default" | "informational" | "negative" | "positive" | "warning" | import("../utils/types.js").AnyString | undefined;
         padded?: boolean | undefined;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        as?: "span" | undefined;
+        as?: "span" | undefined; /**
+         * Status of the block.
+         * When set, a colored status icon is shown at the end of the main text.
+         */
     }, "ref">>;
     /**
      * Content shown in the block's body when fully expanded.