@itwin/itwinui-react 3.2.4 → 3.3.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## 3.3.1
+
+### Patch Changes
+
+- [#1796](https://github.com/iTwin/iTwinUI/pull/1796): Fixed a visual issue in `Table` where column headers were not aligned with rows when using expandable `subRows`.
+- [#1795](https://github.com/iTwin/iTwinUI/pull/1795): Fixed blurring and resizing issues in Dialog/Modal by removing `overflow: hidden` and inline `transform` styles.
+
+## 3.3.0
+
+### Minor Changes
+
+- [#1753](https://github.com/iTwin/iTwinUI/pull/1753): `LabeledInput` and `LabeledTextarea` have been slightly reworked to fix alignment and consistency issues when used with `svgIcon`.
+- [#1777](https://github.com/iTwin/iTwinUI/pull/1777): `InputGrid` will now attempt to automatically associate labels, inputs and status messages with each other, in the event that they haven't been explicitly associated.
+- [#1777](https://github.com/iTwin/iTwinUI/pull/1777): The `message` passed to `LabeledInput`, `LabeledTextarea`, `LabeledSelect` and `ComboBox` will now be associated with the input using `aria-describedby` for better accessibility.
+- [#1794](https://github.com/iTwin/iTwinUI/pull/1794): `ExpandableBlock` now internally uses `LinkAction` for the trigger element. This slightly improves the accessibility, and opens up the possibility of including secondary actions.
+- [#1786](https://github.com/iTwin/iTwinUI/pull/1786): The `portal.to` prop in floating elements now also accepts `null | undefined` which acts identically to the default prop behavior (i.e. as if `portal` was not passed). Components affected: `Dialog`, `DropdownMenu`, `Modal`, `Popover`, `SplitButton`, and `Tooltip`.
+- [#1791](https://github.com/iTwin/iTwinUI/pull/1791): Added new `ListItem.Action` component for rendering links inside `ListItem`s while ensuring that clicking anywhere on the list item triggers the link. This component is a wrapper over the existing `LinkAction` component.
+- [#1780](https://github.com/iTwin/iTwinUI/pull/1780): `ComboBox` now forwards its `ref`.
+- [#1753](https://github.com/iTwin/iTwinUI/pull/1753): `StatusMessage` now renders no status icon if `startIcon === null`.
+
+### Patch Changes
+
+- [#1783](https://github.com/iTwin/iTwinUI/pull/1783): Fixed a Firefox-specific bug where focus outlines were not appearing correctly around menu items inside `ComboBox`.
+- [#1792](https://github.com/iTwin/iTwinUI/pull/1792): Fixed an issue in `Table` where the "select all" checkbox was disabled if all top-level rows were disabled. The logic has been updated to also consider sub-rows.
+- [#1788](https://github.com/iTwin/iTwinUI/pull/1788): `LinkAction` will no longer override styles from other components (such as `Anchor`).
+- [#1753](https://github.com/iTwin/iTwinUI/pull/1753): Deprecated `svgIcon` in `LabeledSelect` in favor of passing `<StatusMessage startIcon={svgIcon} />` to the `message` prop.
+- [#1787](https://github.com/iTwin/iTwinUI/pull/1787): Button, radial progress indicator, & select icons now use the correct icon variable color fill.
+
 ## 3.2.4
 
 ### Patch Changes

package/cjs/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/cjs/core/ComboBox/ComboBox.js

@@ -65,7 +65,7 @@ const getOptionId = (option, idPrefix) => {
  *   onChange={() => {}}
  * />
  */
-const ComboBox = (props) => {
+exports.ComboBox = React.forwardRef((props, forwardedRef) => {
     const idPrefix = (0, index_js_1.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
@@ -325,7 +325,7 @@ const ComboBox = (props) => {
                     show,
                     hide,
                 } },
-                React.createElement(ComboBoxInputContainer_js_1.ComboBoxInputContainer, { disabled: inputProps?.disabled, ...rest },
+                React.createElement(ComboBoxInputContainer_js_1.ComboBoxInputContainer, { ref: forwardedRef, disabled: inputProps?.disabled, ...rest },
                     React.createElement(React.Fragment, null,
                         React.createElement(ComboBoxInput_js_1.ComboBoxInput, { value: inputValue, disabled: inputProps?.disabled, ...inputProps, onChange: handleOnInput, selectTags: isMultipleEnabled(selected, multiple)
                                 ? selected.map((index) => {
@@ -338,6 +338,5 @@ const ComboBox = (props) => {
                 React.createElement(ComboBoxMenu_js_1.ComboBoxMenu, { as: 'div', ...dropdownMenuProps }, filteredOptions.length > 0 && !enableVirtualization
                     ? filteredOptions.map(getMenuItem)
                     : emptyContent)))));
-};
-exports.ComboBox = ComboBox;
+});
 exports.default = exports.ComboBox;

package/cjs/core/ComboBox/ComboBoxInputContainer.js

@@ -37,6 +37,6 @@ exports.ComboBoxInputContainer = React.forwardRef((props, forwardedRef) => {
     const { id } = (0, index_js_1.useSafeContext)(helpers_js_1.ComboBoxStateContext);
     return (React.createElement(index_js_1.InputContainer, { className: className, status: status, statusMessage: typeof message === 'string' ? (React.createElement(StatusMessage_js_1.StatusMessage, { status: status }, message)) : (React.isValidElement(message) &&
             React.cloneElement(message, { status })), ref: forwardedRef, ...rest, id: id },
-        React.createElement(index_js_1.Box, { className: 'iui-input-with-icon' }, children)));
+        React.createElement(index_js_1.InputWithIcon, null, children)));
 });
 exports.ComboBoxInputContainer.displayName = 'ComboBoxInputContainer';

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

@@ -1,38 +1,10 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogContent = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 /**
  * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
@@ -41,18 +13,5 @@ const index_js_1 = require("../utils/index.js");
  *   My dialog content
  * </Dialog.Content>
  */
-exports.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 (!(0, index_js_1.supportsHas)()) {
-            const dialog = contentRef.current?.closest('[role=dialog]');
-            if (dialog instanceof HTMLElement) {
-                dialog.dataset.iuiFlex = 'true';
-            }
-        }
-    }, []);
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog-content', className), ref: (0, index_js_1.useMergedRefs)(contentRef, ref), ...rest }, children));
-});
+exports.DialogContent = index_js_1.polymorphic.div('iui-dialog-content');
 exports.default = exports.DialogContent;

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

@@ -63,7 +63,6 @@ exports.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('');
@@ -131,17 +130,13 @@ exports.DialogMain = React.forwardRef((props, ref) => {
             ...newStyle,
         }));
     }, []);
-    const roundedTransform = useRoundedTransform({
-        element: dialogElement,
-        transform,
-    });
     const content = (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog', {
             'iui-dialog-default': styleType === 'default',
             'iui-dialog-full-page': styleType === 'fullPage',
             'iui-dialog-visible': isOpen,
             'iui-dialog-draggable': isDraggable,
-        }, className), role: 'dialog', ref: (0, index_js_1.useMergedRefs)(dialogRef, ref, setDialogElement), onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
-            transform: roundedTransform,
+        }, className), role: 'dialog', ref: (0, index_js_1.useMergedRefs)(dialogRef, ref), onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
+            transform,
             ...style,
             ...propStyle,
         }, ...rest },
@@ -173,20 +168,3 @@ exports.DialogMain = React.forwardRef((props, ref) => {
             !trapFocus && content)));
 });
 exports.default = exports.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);
-    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
-        if (!element || typeof DOMMatrix === 'undefined') {
-            return;
-        }
-        const [x, y] = transform
-            ? (0, index_js_1.getTranslateValues)(transform)
-            : (0, index_js_1.getTranslateValuesFromElement)(element);
-        setRoundedStyles(`translate(${(0, index_js_1.roundByDPR)(x)}px, ${(0, index_js_1.roundByDPR)(y)}px)`);
-    }, [element, transform]);
-    return roundedStyles;
-};

package/cjs/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.

package/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -35,6 +35,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
 const Icon_js_1 = require("../Icon/Icon.js");
+const LinkAction_js_1 = require("../LinkAction/LinkAction.js");
 const ExpandableBlockContext = React.createContext(undefined);
 ExpandableBlockContext.displayName = 'ExpandableBlockContext';
 const ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {
@@ -49,6 +50,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,
@@ -58,20 +60,16 @@ const ExpandableBlockWrapper = React.forwardRef((props, forwardedRef) => {
             disabled,
             setExpanded,
             children,
+            descriptionId,
+            setDescriptionId,
         } },
         React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('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 } = (0, index_js_1.useSafeContext)(ExpandableBlockContext);
-    return (React.createElement(index_js_1.ButtonBase, { className: (0, classnames_1.default)('iui-expandable-header', className), "aria-expanded": isExpanded, "aria-disabled": disabled, onClick: (0, index_js_1.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 } = (0, index_js_1.useSafeContext)(ExpandableBlockContext);
+    return (React.createElement(LinkAction_js_1.LinkBox, { className: (0, classnames_1.default)('iui-expandable-header', className), "data-iui-disabled": disabled ? 'true' : undefined, ref: forwardedRef, ...rest }, children ?? (React.createElement(React.Fragment, null,
         expandIcon ?? React.createElement(exports.ExpandableBlock.ExpandIcon, null),
         React.createElement(exports.ExpandableBlock.LabelArea, null,
             React.createElement(exports.ExpandableBlock.Title, null, label),
@@ -93,13 +91,28 @@ ExpandableBlockLabelArea.displayName = 'ExpandableBlock.LabelArea';
 // ----------------------------------------------------------------------------
 // ExpandableBlock.Title component
 const ExpandableBlockTitle = React.forwardRef((props, forwardedRef) => {
-    const { className, children, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-expandable-block-title', className), ref: forwardedRef, ...rest }, children));
+    const { className, children, onClick: onClickProp, ...rest } = props;
+    const { isExpanded, setExpanded, disabled, onToggle, descriptionId } = (0, index_js_1.useSafeContext)(ExpandableBlockContext);
+    return (React.createElement(index_js_1.ButtonBase, { className: (0, classnames_1.default)('iui-expandable-block-title', 'iui-link-action', className), "aria-expanded": isExpanded, "aria-disabled": disabled, onClick: (0, index_js_1.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 = (0, index_js_1.polymorphic)('iui-expandable-block-caption');
+const ExpandableBlockCaption = React.forwardRef((props, forwardedRef) => {
+    const fallbackId = (0, index_js_1.useId)();
+    const { setDescriptionId } = (0, index_js_1.useSafeContext)(ExpandableBlockContext);
+    React.useEffect(() => {
+        setDescriptionId(props.id || fallbackId);
+        return () => setDescriptionId(undefined);
+    }, [props.id, fallbackId, setDescriptionId]);
+    return (React.createElement(index_js_1.Box, { ref: forwardedRef, id: fallbackId, ...props, className: (0, classnames_1.default)('iui-expandable-block-caption', props?.className) }));
+});
 ExpandableBlockCaption.displayName = 'ExpandableBlock.Caption';
 // ----------------------------------------------------------------------------
 // ExpandableBlock.EndIcon component

package/cjs/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/cjs/core/InputGrid/InputGrid.js

@@ -34,22 +34,191 @@ exports.InputGrid = void 0;
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
 const classnames_1 = __importDefault(require("classnames"));
+const Label_js_1 = require("../Label/Label.js");
+const Input_js_1 = require("../Input/Input.js");
+const Textarea_js_1 = require("../Textarea/Textarea.js");
+const StatusMessage_js_1 = require("../StatusMessage/StatusMessage.js");
+const InputWithDecorations_js_1 = require("../InputWithDecorations/InputWithDecorations.js");
+const ComboBox_js_1 = require("../ComboBox/ComboBox.js");
+const Select_js_1 = require("../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>
  */
 exports.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(index_js_1.Box, { className: (0, classnames_1.default)('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_js_1.Label || child.type === 'label') {
+            return (0, index_js_1.cloneElementWithRef)(child, (child) => ({
+                ...child.props,
+                htmlFor: child.props.htmlFor || inputId,
+                id: child.props.id || labelId,
+            }));
+        }
+        if (child.type === StatusMessage_js_1.StatusMessage) {
+            return (0, index_js_1.cloneElementWithRef)(child, (child) => ({
+                ...child.props,
+                id: child.props.id || messageId,
+            }));
+        }
+        if (isInput(child) ||
+            child.type === InputWithDecorations_js_1.InputWithDecorations ||
+            child.type === index_js_1.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 = (0, index_js_1.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_js_1.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_js_1.Select) {
+            return child.props.id || `${idPrefix}--input`;
+        }
+    };
+    React.Children.forEach(children, (child) => {
+        if (!React.isValidElement(child)) {
+            return;
+        }
+        if (child.type === Label_js_1.Label || child.type === 'label') {
+            hasLabel = true;
+            labelId || (labelId = child.props.id || `${idPrefix}--label`);
+        }
+        if (child.type === StatusMessage_js_1.StatusMessage) {
+            messageId || (messageId = child.props.id || `${idPrefix}--message`);
+        }
+        if (child.type === InputWithDecorations_js_1.InputWithDecorations || child.type === index_js_1.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_js_1.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_js_1.Select && { id: props.id || inputId }),
+            'aria-describedby': ariaDescribedBy?.trim() || undefined,
+        };
+    };
+    const cloneInput = (child) => {
+        if (child.type === ComboBox_js_1.ComboBox) {
+            return (0, index_js_1.cloneElementWithRef)(child, (child) => ({
+                inputProps: inputProps(child.props.inputProps),
+            }));
+        }
+        if (child.type === Select_js_1.Select) {
+            return (0, index_js_1.cloneElementWithRef)(child, (child) => ({
+                triggerProps: {
+                    ...{ 'aria-labelledby': labelId },
+                    ...inputProps(child.props.triggerProps),
+                },
+            }));
+        }
+        return (0, index_js_1.cloneElementWithRef)(child, (child) => inputProps(child.props));
+    };
+    if (child.type === InputWithDecorations_js_1.InputWithDecorations || child.type === index_js_1.InputWithIcon) {
+        return (0, index_js_1.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_js_1.Input ||
+            child.type === Textarea_js_1.Textarea ||
+            child.type === InputWithDecorations_js_1.InputWithDecorations.Input ||
+            child.type === Select_js_1.Select || // contains Select.triggerProps
+            child.type === ComboBox_js_1.ComboBox) // contains ComboBox.inputProps
+    );
+};
+//-------------------------------------------------------------------------------
 exports.default = exports.InputGrid;

package/cjs/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/cjs/core/InputGroup/InputGroup.js

@@ -54,20 +54,11 @@ const StatusMessage_js_1 = require("../StatusMessage/StatusMessage.js");
  */
 exports.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(index_js_1.StatusIconMap[status](), {
-                'aria-hidden': true,
-            });
-        }
-        return undefined;
-    };
-    return (React.createElement(InputGrid_js_1.InputGrid, { ref: forwardedRef, as: 'div', labelPlacement: displayStyle, className: (0, classnames_1.default)('iui-input-group-wrapper', className), ...rest },
+    return (React.createElement(InputGrid_js_1.InputGrid, { ref: forwardedRef, as: 'div', labelPlacement: displayStyle, className: (0, classnames_1.default)('iui-input-group-wrapper', className), "data-iui-status": status, ...rest },
         label && (React.createElement(Label_js_1.Label, { as: 'label', required: required, disabled: disabled, ...labelProps }, label)),
         React.createElement(index_js_1.Box, { as: 'div', ...innerProps, className: (0, classnames_1.default)('iui-input-group', innerProps?.className) }, children),
-        (message || status || svgIcon) && (React.createElement(StatusMessage_js_1.StatusMessage, { startIcon: icon(), status: status, ...messageProps }, displayStyle !== 'inline' && message))));
+        (message || status || svgIcon) && (React.createElement(StatusMessage_js_1.StatusMessage, { iconProps: {
+                'aria-hidden': true,
+            }, startIcon: svgIcon, status: status, ...messageProps }, displayStyle !== 'inline' && message))));
 });
 exports.default = exports.InputGroup;

package/cjs/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/cjs/core/LabeledInput/LabeledInput.js

@@ -22,6 +22,9 @@ 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.LabeledInput = void 0;
 /*---------------------------------------------------------------------------------------------
@@ -29,12 +32,13 @@ exports.LabeledInput = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
+const Input_js_1 = require("../Input/Input.js");
 const index_js_1 = require("../utils/index.js");
 const InputGrid_js_1 = require("../InputGrid/InputGrid.js");
-const InputWithDecorations_js_1 = require("../InputWithDecorations/InputWithDecorations.js");
 const StatusMessage_js_1 = require("../StatusMessage/StatusMessage.js");
 const Label_js_1 = require("../Label/Label.js");
 const Icon_js_1 = require("../Icon/Icon.js");
+const classnames_1 = __importDefault(require("classnames"));
 /**
  * Basic labeled input component
  * @example
@@ -44,15 +48,14 @@ const Icon_js_1 = require("../Icon/Icon.js");
  * <LabeledInput status='negative' label='Negative' />
  */
 exports.LabeledInput = React.forwardRef((props, ref) => {
-    const uid = (0, index_js_1.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 && index_js_1.StatusIconMap[status]());
     const shouldShowIcon = svgIcon !== null && (svgIcon || (status && !message));
-    return (React.createElement(InputGrid_js_1.InputGrid, { labelPlacement: displayStyle, ...wrapperProps },
-        label && (React.createElement(Label_js_1.Label, { as: 'label', required: required, disabled: disabled, htmlFor: id, ...labelProps }, label)),
-        React.createElement(InputWithDecorations_js_1.InputWithDecorations, { status: status, isDisabled: disabled, ...inputWrapperProps },
-            React.createElement(InputWithDecorations_js_1.InputWithDecorations.Input, { disabled: disabled, required: required, id: id, ref: ref, ...rest }),
-            shouldShowIcon && (React.createElement(Icon_js_1.Icon, { fill: !svgIcon ? status : undefined, padded: true, ...iconProps }, icon))),
+    return (React.createElement(InputGrid_js_1.InputGrid, { labelPlacement: displayStyle, "data-iui-status": status, ...wrapperProps },
+        label && (React.createElement(Label_js_1.Label, { as: 'label', required: required, disabled: disabled, ...labelProps }, label)),
+        React.createElement(index_js_1.InputWithIcon, { ...inputWrapperProps },
+            React.createElement(Input_js_1.Input, { disabled: disabled, required: required, ref: ref, ...rest }),
+            shouldShowIcon && (React.createElement(Icon_js_1.Icon, { fill: status, ...iconProps, className: (0, classnames_1.default)('iui-end-icon', iconProps?.className) }, icon))),
         typeof message === 'string' ? (React.createElement(StatusMessage_js_1.StatusMessage, { status: status, iconProps: iconProps, contentProps: messageContentProps }, message)) : (message)));
 });
 exports.default = exports.LabeledInput;