@itwin/itwinui-react 3.2.4 → 3.3.1

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -4,8 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { StatusIconMap, SvgChevronRight, Box, useSafeContext, polymorphic, mergeEventHandlers, ButtonBase, } from '../utils/index.js';
+import { StatusIconMap, SvgChevronRight, Box, useSafeContext, polymorphic, mergeEventHandlers, ButtonBase, useId, } from '../utils/index.js';
 import { Icon } from '../Icon/Icon.js';
+import { LinkBox } from '../LinkAction/LinkAction.js';
 const ExpandableBlockContext = React.createContext(undefined);
 ExpandableBlockContext.displayName = 'ExpandableBlockContext';
 const ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {
@@ -20,6 +21,7 @@ const ExpandableBlockWrapper = React.forwardRef((props, forwardedRef) => {
     const { children, className, onToggle, style, isExpanded, status, size = 'default', styleType = 'default', disabled = false, ...rest } = props;
     const [expandedState, setExpanded] = React.useState(isExpanded ?? false);
     const expanded = isExpanded ?? expandedState;
+    const [descriptionId, setDescriptionId] = React.useState(undefined);
     return (React.createElement(ExpandableBlockContext.Provider, { value: {
             status,
             isExpanded: expanded,
@@ -29,20 +31,16 @@ const ExpandableBlockWrapper = React.forwardRef((props, forwardedRef) => {
             disabled,
             setExpanded,
             children,
+            descriptionId,
+            setDescriptionId,
         } },
         React.createElement(Box, { className: cx('iui-expandable-block', className), "data-iui-expanded": expanded, "data-iui-size": size, "data-iui-variant": styleType !== 'default' ? styleType : undefined, style: style, ref: forwardedRef, ...rest }, children)));
 });
 ExpandableBlockWrapper.displayName = 'ExpandableBlock.Wrapper';
 const ExpandableBlockTrigger = React.forwardRef((props, forwardedRef) => {
-    const { className, children, label, caption, onClick: onClickProp, expandIcon, endIcon, ...rest } = props;
-    const { isExpanded, setExpanded, disabled, onToggle, status } = useSafeContext(ExpandableBlockContext);
-    return (React.createElement(ButtonBase, { className: cx('iui-expandable-header', className), "aria-expanded": isExpanded, "aria-disabled": disabled, onClick: mergeEventHandlers(onClickProp, () => {
-            if (disabled) {
-                return;
-            }
-            setExpanded(!isExpanded);
-            onToggle?.(!isExpanded);
-        }), ref: forwardedRef, ...rest }, children ?? (React.createElement(React.Fragment, null,
+    const { className, children, label, caption, expandIcon, endIcon, ...rest } = props;
+    const { disabled, status } = useSafeContext(ExpandableBlockContext);
+    return (React.createElement(LinkBox, { className: cx('iui-expandable-header', className), "data-iui-disabled": disabled ? 'true' : undefined, ref: forwardedRef, ...rest }, children ?? (React.createElement(React.Fragment, null,
         expandIcon ?? React.createElement(ExpandableBlock.ExpandIcon, null),
         React.createElement(ExpandableBlock.LabelArea, null,
             React.createElement(ExpandableBlock.Title, null, label),
@@ -64,13 +62,28 @@ ExpandableBlockLabelArea.displayName = 'ExpandableBlock.LabelArea';
 // ----------------------------------------------------------------------------
 // ExpandableBlock.Title component
 const ExpandableBlockTitle = React.forwardRef((props, forwardedRef) => {
-    const { className, children, ...rest } = props;
-    return (React.createElement(Box, { className: cx('iui-expandable-block-title', className), ref: forwardedRef, ...rest }, children));
+    const { className, children, onClick: onClickProp, ...rest } = props;
+    const { isExpanded, setExpanded, disabled, onToggle, descriptionId } = useSafeContext(ExpandableBlockContext);
+    return (React.createElement(ButtonBase, { className: cx('iui-expandable-block-title', 'iui-link-action', className), "aria-expanded": isExpanded, "aria-disabled": disabled, onClick: mergeEventHandlers(onClickProp, () => {
+            if (disabled) {
+                return;
+            }
+            setExpanded(!isExpanded);
+            onToggle?.(!isExpanded);
+        }), ref: forwardedRef, "aria-describedby": descriptionId, ...rest }, children));
 });
 ExpandableBlockTitle.displayName = 'ExpandableBlock.Title';
 // ----------------------------------------------------------------------------
 // ExpandableBlock.Caption component
-const ExpandableBlockCaption = polymorphic('iui-expandable-block-caption');
+const ExpandableBlockCaption = React.forwardRef((props, forwardedRef) => {
+    const fallbackId = useId();
+    const { setDescriptionId } = useSafeContext(ExpandableBlockContext);
+    React.useEffect(() => {
+        setDescriptionId(props.id || fallbackId);
+        return () => setDescriptionId(undefined);
+    }, [props.id, fallbackId, setDescriptionId]);
+    return (React.createElement(Box, { ref: forwardedRef, id: fallbackId, ...props, className: cx('iui-expandable-block-caption', props?.className) }));
+});
 ExpandableBlockCaption.displayName = 'ExpandableBlock.Caption';
 // ----------------------------------------------------------------------------
 // ExpandableBlock.EndIcon component

package/esm/core/InputGrid/InputGrid.d.ts

@@ -10,15 +10,17 @@ type InputGridOwnProps = {
     labelPlacement?: 'default' | 'inline';
 };
 /**
- * InputGrid component is used to display inputs (input, textarea, select)
+ * InputGrid component is used to display form fields (input, textarea, select)
  * with label and/or status message
  *
- * @usage
+ * Form fields are automatically associated with the label and status message for
+ * better accessibility.
  *
+ * @example
  * <InputGrid>
- *   <Label htmlFor='input-1'>This is label</Label>
- *   <Input id='input-1'/>
- *   <StatusMessage>This is message</StatusMessage>
+ *   <Label>This is a label</Label>
+ *   <Input />
+ *   <StatusMessage>This is a message</StatusMessage>
  * </InputGrid>
  */
 export declare const InputGrid: PolymorphicForwardRefComponent<"div", InputGridOwnProps>;

package/esm/core/InputGrid/InputGrid.js

@@ -3,24 +3,193 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Box } from '../utils/index.js';
+import { Box, InputWithIcon, cloneElementWithRef, useId, } from '../utils/index.js';
 import cx from 'classnames';
+import { Label } from '../Label/Label.js';
+import { Input } from '../Input/Input.js';
+import { Textarea } from '../Textarea/Textarea.js';
+import { StatusMessage } from '../StatusMessage/StatusMessage.js';
+import { InputWithDecorations } from '../InputWithDecorations/InputWithDecorations.js';
+import { ComboBox } from '../ComboBox/ComboBox.js';
+import { Select } from '../Select/Select.js';
 //-------------------------------------------------------------------------------
 /**
- * InputGrid component is used to display inputs (input, textarea, select)
+ * InputGrid component is used to display form fields (input, textarea, select)
  * with label and/or status message
  *
- * @usage
+ * Form fields are automatically associated with the label and status message for
+ * better accessibility.
  *
+ * @example
  * <InputGrid>
- *   <Label htmlFor='input-1'>This is label</Label>
- *   <Input id='input-1'/>
- *   <StatusMessage>This is message</StatusMessage>
+ *   <Label>This is a label</Label>
+ *   <Input />
+ *   <StatusMessage>This is a message</StatusMessage>
  * </InputGrid>
  */
 export const InputGrid = React.forwardRef((props, ref) => {
-    const { children, className, labelPlacement = undefined, ...rest } = props;
+    const { children: childrenProp, className, labelPlacement = undefined, ...rest } = props;
+    const children = useChildrenWithIds(childrenProp);
     return (React.createElement(Box, { className: cx('iui-input-grid', className), "data-iui-label-placement": labelPlacement, ref: ref, ...rest }, children));
 });
 //-------------------------------------------------------------------------------
+/**
+ * Ensures that label, input and message are properly associated
+ * with each other, for accessibility purposes.
+ *
+ * - `Select` will be associated with label using `aria-labelledby`
+ * - Other inputs will be associated with label using `htmlFor`
+ * - Message will be associated with input/select using `aria-describedby`
+ */
+const useChildrenWithIds = (children) => {
+    const { labelId, inputId, messageId } = useSetup(children);
+    return React.useMemo(() => React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) {
+            return child;
+        }
+        if (child.type === Label || child.type === 'label') {
+            return cloneElementWithRef(child, (child) => ({
+                ...child.props,
+                htmlFor: child.props.htmlFor || inputId,
+                id: child.props.id || labelId,
+            }));
+        }
+        if (child.type === StatusMessage) {
+            return cloneElementWithRef(child, (child) => ({
+                ...child.props,
+                id: child.props.id || messageId,
+            }));
+        }
+        if (isInput(child) ||
+            child.type === InputWithDecorations ||
+            child.type === InputWithIcon) {
+            return handleCloningInputs(child, {
+                labelId,
+                inputId,
+                messageId,
+            });
+        }
+        return child;
+    }), [children, inputId, labelId, messageId]);
+};
+//-------------------------------------------------------------------------------
+/**
+ * Setup/prerequisite for `useChildrenWithIds` to gather information from children.
+ *
+ * @returns the following ids (prefers id from props, otherwise generates one)
+ *  - `labelId`
+ *  - `inputId`
+ *  - `messageId`
+ */
+const useSetup = (children) => {
+    const idPrefix = useId();
+    let labelId;
+    let inputId;
+    let messageId;
+    let hasLabel = false;
+    let hasSelect = false;
+    const findInputId = (child) => {
+        if (!React.isValidElement(child)) {
+            return;
+        }
+        // ComboBox input id is passed through `inputProps`
+        if (child.type === ComboBox) {
+            return child.props.inputProps?.id || `${idPrefix}--input`;
+        }
+        // Select input id would be passed through `triggerProps`, but we don't even
+        // need it because, unlike other inputs, it gets labelled using `aria-labelledby`
+        else if (child.type !== Select) {
+            return child.props.id || `${idPrefix}--input`;
+        }
+    };
+    React.Children.forEach(children, (child) => {
+        if (!React.isValidElement(child)) {
+            return;
+        }
+        if (child.type === Label || child.type === 'label') {
+            hasLabel = true;
+            labelId || (labelId = child.props.id || `${idPrefix}--label`);
+        }
+        if (child.type === StatusMessage) {
+            messageId || (messageId = child.props.id || `${idPrefix}--message`);
+        }
+        if (child.type === InputWithDecorations || child.type === InputWithIcon) {
+            React.Children.forEach(child.props.children, (child) => {
+                if (isInput(child)) {
+                    inputId || (inputId = findInputId(child));
+                }
+            });
+        }
+        else if (isInput(child)) {
+            inputId || (inputId = findInputId(child));
+        }
+        if (child.type === Select) {
+            hasSelect = true;
+        }
+    });
+    return {
+        labelId: hasSelect ? labelId : undefined,
+        inputId: hasLabel && !hasSelect ? inputId : undefined,
+        messageId,
+    };
+};
+//-------------------------------------------------------------------------------
+/**
+ * Handles regular inputs, plus `InputWithDecorations`, `InputWithIcon`, `ComboBox` and `Select`.
+ */
+const handleCloningInputs = (child, { labelId, inputId, messageId, }) => {
+    const inputProps = (props = {}) => {
+        // Concatenate aria-describedby from props and from StatusMessage
+        const ariaDescribedBy = [props['aria-describedby'], messageId]
+            .filter(Boolean)
+            .join(' ');
+        return {
+            ...props,
+            ...(child.type !== Select && { id: props.id || inputId }),
+            'aria-describedby': ariaDescribedBy?.trim() || undefined,
+        };
+    };
+    const cloneInput = (child) => {
+        if (child.type === ComboBox) {
+            return cloneElementWithRef(child, (child) => ({
+                inputProps: inputProps(child.props.inputProps),
+            }));
+        }
+        if (child.type === Select) {
+            return cloneElementWithRef(child, (child) => ({
+                triggerProps: {
+                    ...{ 'aria-labelledby': labelId },
+                    ...inputProps(child.props.triggerProps),
+                },
+            }));
+        }
+        return cloneElementWithRef(child, (child) => inputProps(child.props));
+    };
+    if (child.type === InputWithDecorations || child.type === InputWithIcon) {
+        return cloneElementWithRef(child, (child) => ({
+            children: React.Children.map(child.props.children, (child) => {
+                if (React.isValidElement(child) && isInput(child)) {
+                    return cloneInput(child);
+                }
+                return child;
+            }),
+        }));
+    }
+    return cloneInput(child);
+};
+//-------------------------------------------------------------------------------
+/** @returns true if `child` is a form element that can be associated with a label using id  */
+const isInput = (child) => {
+    return (React.isValidElement(child) &&
+        (child.type === 'input' ||
+            child.type === 'textarea' ||
+            child.type === 'select' ||
+            child.type === Input ||
+            child.type === Textarea ||
+            child.type === InputWithDecorations.Input ||
+            child.type === Select || // contains Select.triggerProps
+            child.type === ComboBox) // contains ComboBox.inputProps
+    );
+};
+//-------------------------------------------------------------------------------
 export default InputGrid;

package/esm/core/InputGroup/InputGroup.d.ts

@@ -32,7 +32,7 @@ type InputGroupProps = {
     /**
      * Custom icon. If group has status, default status icon is used instead.
      */
-    svgIcon?: JSX.Element;
+    svgIcon?: React.ComponentPropsWithoutRef<typeof StatusMessage>['startIcon'];
     /**
      * Child inputs inside group.
      */

package/esm/core/InputGroup/InputGroup.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { StatusIconMap, Box } from '../utils/index.js';
+import { Box } from '../utils/index.js';
 import { InputGrid } from '../InputGrid/InputGrid.js';
 import { Label } from '../Label/Label.js';
 import { StatusMessage } from '../StatusMessage/StatusMessage.js';
@@ -25,20 +25,11 @@ import { StatusMessage } from '../StatusMessage/StatusMessage.js';
  */
 export const InputGroup = React.forwardRef((props, forwardedRef) => {
     const { className, children, disabled = false, displayStyle = 'default', label, message, status, svgIcon, required = false, labelProps, messageProps, innerProps, ...rest } = props;
-    const icon = () => {
-        if (svgIcon) {
-            return React.cloneElement(svgIcon, { 'aria-hidden': true });
-        }
-        if (status && message) {
-            return React.cloneElement(StatusIconMap[status](), {
-                'aria-hidden': true,
-            });
-        }
-        return undefined;
-    };
-    return (React.createElement(InputGrid, { ref: forwardedRef, as: 'div', labelPlacement: displayStyle, className: cx('iui-input-group-wrapper', className), ...rest },
+    return (React.createElement(InputGrid, { ref: forwardedRef, as: 'div', labelPlacement: displayStyle, className: cx('iui-input-group-wrapper', className), "data-iui-status": status, ...rest },
         label && (React.createElement(Label, { as: 'label', required: required, disabled: disabled, ...labelProps }, label)),
         React.createElement(Box, { as: 'div', ...innerProps, className: cx('iui-input-group', innerProps?.className) }, children),
-        (message || status || svgIcon) && (React.createElement(StatusMessage, { startIcon: icon(), status: status, ...messageProps }, displayStyle !== 'inline' && message))));
+        (message || status || svgIcon) && (React.createElement(StatusMessage, { iconProps: {
+                'aria-hidden': true,
+            }, startIcon: svgIcon, status: status, ...messageProps }, displayStyle !== 'inline' && message))));
 });
 export default InputGroup;

package/esm/core/LabeledInput/LabeledInput.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { Input } from '../Input/Input.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import { InputGrid } from '../InputGrid/InputGrid.js';
-import { InputWithDecorations } from '../InputWithDecorations/InputWithDecorations.js';
 import { Icon } from '../Icon/Icon.js';
 export type LabeledInputProps = {
     /**
@@ -48,7 +47,7 @@ export type LabeledInputProps = {
     /**
      *  Passes properties for input wrapper.
      */
-    inputWrapperProps?: React.ComponentProps<typeof InputWithDecorations>;
+    inputWrapperProps?: React.ComponentPropsWithRef<'div'>;
 } & React.ComponentProps<typeof Input>;
 /**
  * Basic labeled input component

package/esm/core/LabeledInput/LabeledInput.js

@@ -4,12 +4,12 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Input } from '../Input/Input.js';
-import { StatusIconMap, useId } from '../utils/index.js';
+import { InputWithIcon, StatusIconMap } from '../utils/index.js';
 import { InputGrid } from '../InputGrid/InputGrid.js';
-import { InputWithDecorations } from '../InputWithDecorations/InputWithDecorations.js';
 import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 import { Label } from '../Label/Label.js';
 import { Icon } from '../Icon/Icon.js';
+import cx from 'classnames';
 /**
  * Basic labeled input component
  * @example
@@ -19,15 +19,14 @@ import { Icon } from '../Icon/Icon.js';
  * <LabeledInput status='negative' label='Negative' />
  */
 export const LabeledInput = React.forwardRef((props, ref) => {
-    const uid = useId();
-    const { disabled = false, label, message, status, svgIcon, wrapperProps, labelProps, messageContentProps, iconProps, inputWrapperProps, displayStyle = 'default', required = false, id = uid, ...rest } = props;
+    const { disabled = false, label, message, status, svgIcon, wrapperProps, labelProps, messageContentProps, iconProps, inputWrapperProps, displayStyle = 'default', required = false, ...rest } = props;
     const icon = svgIcon ?? (status && StatusIconMap[status]());
     const shouldShowIcon = svgIcon !== null && (svgIcon || (status && !message));
-    return (React.createElement(InputGrid, { labelPlacement: displayStyle, ...wrapperProps },
-        label && (React.createElement(Label, { as: 'label', required: required, disabled: disabled, htmlFor: id, ...labelProps }, label)),
-        React.createElement(InputWithDecorations, { status: status, isDisabled: disabled, ...inputWrapperProps },
-            React.createElement(InputWithDecorations.Input, { disabled: disabled, required: required, id: id, ref: ref, ...rest }),
-            shouldShowIcon && (React.createElement(Icon, { fill: !svgIcon ? status : undefined, padded: true, ...iconProps }, icon))),
+    return (React.createElement(InputGrid, { labelPlacement: displayStyle, "data-iui-status": status, ...wrapperProps },
+        label && (React.createElement(Label, { as: 'label', required: required, disabled: disabled, ...labelProps }, label)),
+        React.createElement(InputWithIcon, { ...inputWrapperProps },
+            React.createElement(Input, { disabled: disabled, required: required, ref: ref, ...rest }),
+            shouldShowIcon && (React.createElement(Icon, { fill: status, ...iconProps, className: cx('iui-end-icon', iconProps?.className) }, icon))),
         typeof message === 'string' ? (React.createElement(StatusMessage, { status: status, iconProps: iconProps, contentProps: messageContentProps }, message)) : (message)));
 });
 export default LabeledInput;

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

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Select } from '../Select/Select.js';
-import { StatusIconMap, useId } from '../utils/index.js';
 import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 import { InputGrid } from '../InputGrid/InputGrid.js';
 import { Label } from '../Label/Label.js';
@@ -43,23 +42,10 @@ import { Icon } from '../Icon/Icon.js';
  * />
  */
 export const 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 = `${useId()}-label`;
-    const icon = () => {
-        if (svgIcon) {
-            return React.createElement(Icon, null, svgIcon);
-        }
-        if (status && message) {
-            return StatusIconMap[status]();
-        }
-        return undefined;
-    };
-    return (React.createElement(InputGrid, { labelPlacement: displayStyle, ...wrapperProps },
-        label && (React.createElement(Label, { as: 'div', required: required, disabled: disabled, id: labelId, ...labelProps }, label)),
-        React.createElement(Select, { disabled: disabled, className: className, style: style, status: status, ...rest, ref: forwardedRef, triggerProps: {
-                'aria-labelledby': labelId,
-                ...triggerProps,
-            } }),
-        typeof message === 'string' ? (React.createElement(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, { labelPlacement: displayStyle, "data-iui-status": status, ...wrapperProps },
+        label && (React.createElement(Label, { as: 'div', required: required, disabled: disabled, ...labelProps }, label)),
+        React.createElement(Select, { disabled: disabled, className: className, style: style, ...rest, ref: forwardedRef }),
+        typeof message === 'string' ? (React.createElement(StatusMessage, { status: status, startIcon: svgIcon, iconProps: messageIconProps, contentProps: messageContentProps }, message)) : (message)));
 });
 export default LabeledSelect;

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

@@ -5,6 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { polymorphic, Box } from '../utils/index.js';
+import { LinkAction } from '../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(Box, { as: 'li', className: cx('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 }));
@@ -20,6 +21,9 @@ ListItemContent.displayName = 'ListItem.Content';
 const ListItemDescription = polymorphic('iui-list-item-description');
 ListItemDescription.displayName = 'ListItem.Description';
 // ----------------------------------------------------------------------------
+const ListItemAction = LinkAction;
+ListItemAction.displayName = 'ListItem.Action';
+// ----------------------------------------------------------------------------
 // Exported compound component
 /**
  * A generic ListItem component that can be used simply for displaying data, or as a base
@@ -61,4 +65,14 @@ export const 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/esm/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/esm/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/esm/core/Select/Select.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Menu } from '../Menu/Menu.js';
 import { MenuItem } from '../Menu/MenuItem.js';
-import { SvgCaretDownSmall, useId, AutoclearingHiddenLiveRegion, Box, Portal, useMergedRefs, SvgCheckmark, useLatestRef, } from '../utils/index.js';
+import { SvgCaretDownSmall, useId, AutoclearingHiddenLiveRegion, Box, Portal, useMergedRefs, SvgCheckmark, useLatestRef, InputWithIcon, } from '../utils/index.js';
 import { SelectTag } from './SelectTag.js';
 import { SelectTagContainer } from './SelectTagContainer.js';
 import { Icon } from '../Icon/Icon.js';
@@ -69,7 +69,7 @@ const isSingleOnChange = (onChange, multiple) => {
  */
 export const Select = React.forwardRef((props, forwardedRef) => {
     const uid = 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();
@@ -160,7 +160,7 @@ export const Select = React.forwardRef((props, forwardedRef) => {
         onVisibleChange: (open) => (open ? show() : hide()),
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement(Box, { className: cx('iui-input-with-icon', className), style: style, ...rest, ref: useMergedRefs(popover.refs.setPositionReference, forwardedRef) },
+        React.createElement(InputWithIcon, { ...rest, ref: useMergedRefs(popover.refs.setPositionReference, forwardedRef) },
             React.createElement(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: useMergedRefs(selectRef, triggerProps?.ref, popover.refs.setReference), className: cx('iui-select-button', {
                     'iui-placeholder': (!selectedItems || selectedItems.length === 0) &&
                         !!placeholder,

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

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

package/esm/core/Table/Table.js

@@ -8,7 +8,7 @@ import cx from 'classnames';
 import { actions as TableActions, useFlexLayout, useFilters, useRowSelect, useSortBy, useTable, useExpanded, usePagination, useColumnOrder, useGlobalFilter, } from 'react-table';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
 import { useGlobals, useResizeObserver, SvgSortDown, SvgSortUp, useIsomorphicLayoutEffect, Box, createWarningLogger, } from '../utils/index.js';
-import { getCellStyle, getStickyStyle } from './utils.js';
+import { getCellStyle, getStickyStyle, getSubRowStyle } from './utils.js';
 import { TableRowMemoized } from './TableRowMemoized.js';
 import { FilterToggle } from './filters/index.js';
 import { customFilterFunctions } from './filters/customFilterFunctions.js';
@@ -400,6 +400,9 @@ export const Table = (props) => {
                     React.createElement(Box, { as: 'div', ...headerProps, className: cx('iui-table-header', headerProps?.className) },
                         React.createElement(Box, { ...headerGroupProps }, headerGroup.headers.map((column, index) => {
                             const { onClick, ...restSortProps } = column.getSortByToggleProps();
+                            const columnHasExpanders = hasAnySubRows &&
+                                index ===
+                                    headerGroup.headers.findIndex((c) => c.id !== SELECTION_CELL_ID);
                             const columnProps = column.getHeaderProps({
                                 ...restSortProps,
                                 className: cx('iui-table-cell', {
@@ -409,6 +412,7 @@ export const Table = (props) => {
                                 }, column.columnClassName),
                                 style: {
                                     ...getCellStyle(column, !!state.isTableResizing),
+                                    ...(columnHasExpanders && getSubRowStyle({ density })),
                                     ...getStickyStyle(column, visibleColumns),
                                     flexWrap: 'unset',
                                 },