@itwin/itwinui-react 3.2.3 → 3.3.0

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.d.ts

@@ -168,5 +168,7 @@ export type SelectProps<T> = {
  *   )}
  * />
  */
-export declare const Select: React.ForwardRefExoticComponent<SelectProps<unknown> & React.RefAttributes<HTMLElement>>;
+export declare const Select: <T>(props: SelectProps<T> & {
+    ref?: React.ForwardedRef<HTMLElement> | undefined;
+}) => JSX.Element;
 export default Select;

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/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/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/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/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/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.
      */