@itwin/itwinui-react 1.32.0-dev.0 → 1.33.1

package/esm/core/Checkbox/Checkbox.js

@@ -32,6 +32,7 @@ import '@itwin/itwinui-css/css/inputs.css';
 /**
  * Simple input checkbox
  * @example
+ * <Checkbox />
  * <Checkbox label='Basic Checkbox' />
  * <Checkbox label='Disabled Checkbox' disabled />
  * <Checkbox label='Checked' checked />
@@ -41,8 +42,8 @@ import '@itwin/itwinui-css/css/inputs.css';
  * <Checkbox label='Visibility Checkbox' variant='eyeball' />
  */
 export var Checkbox = React.forwardRef(function (props, ref) {
-    var _a;
-    var className = props.className, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.indeterminate, indeterminate = _c === void 0 ? false : _c, label = props.label, status = props.status, _d = props.variant, variant = _d === void 0 ? 'default' : _d, setFocus = props.setFocus, _e = props.isLoading, isLoading = _e === void 0 ? false : _e, style = props.style, checkmarkClassName = props.checkmarkClassName, checkmarkStyle = props.checkmarkStyle, rest = __rest(props, ["className", "disabled", "indeterminate", "label", "status", "variant", "setFocus", "isLoading", "style", "checkmarkClassName", "checkmarkStyle"]);
+    var _a, _b;
+    var className = props.className, _c = props.disabled, disabled = _c === void 0 ? false : _c, _d = props.indeterminate, indeterminate = _d === void 0 ? false : _d, label = props.label, status = props.status, _e = props.variant, variant = _e === void 0 ? 'default' : _e, setFocus = props.setFocus, _f = props.isLoading, isLoading = _f === void 0 ? false : _f, style = props.style, checkmarkClassName = props.checkmarkClassName, checkmarkStyle = props.checkmarkStyle, rest = __rest(props, ["className", "disabled", "indeterminate", "label", "status", "variant", "setFocus", "isLoading", "style", "checkmarkClassName", "checkmarkStyle"]);
     useTheme();
     var inputElementRef = React.useRef(null);
     var refs = useMergedRefs(inputElementRef, ref);
@@ -59,27 +60,19 @@ export var Checkbox = React.forwardRef(function (props, ref) {
                 : inputElementRef.current.checked;
         }
     });
-    var defaultCheckbox = (React.createElement("svg", { viewBox: '0 0 16 16', "aria-hidden": 'true', focusable: 'false' },
-        React.createElement("path", { className: 'iui-check', d: 'm6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z' }),
-        React.createElement("path", { className: 'iui-check-partial', d: 'm2.75 6.875h10.5v2.25h-10.5z' })));
-    var visibilityCheckbox = (React.createElement("svg", { viewBox: '0 0 16 16', "aria-hidden": 'true', focusable: 'false' },
-        React.createElement("path", { className: 'iui-check', d: 'm8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z' }),
-        React.createElement("g", { className: 'iui-check-partial' },
-            React.createElement("path", { d: 'm8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z', opacity: '.33' }),
-            React.createElement("path", { d: 'm8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z' })),
-        React.createElement("path", { className: 'iui-uncheck', d: 'm1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z' })));
-    return (React.createElement("label", { className: cx('iui-checkbox', (_a = {
+    var checkbox = (React.createElement(React.Fragment, null,
+        React.createElement("input", __assign({ className: cx('iui-checkbox', {
+                'iui-checkbox-visibility': variant === 'eyeball',
+                'iui-loading': isLoading,
+            }, className && (_a = {}, _a[className] = !label, _a), checkmarkClassName), style: __assign(__assign({}, (!label && style)), checkmarkStyle), disabled: disabled || isLoading, type: 'checkbox', ref: refs }, rest)),
+        isLoading && React.createElement(ProgressRadial, { size: 'x-small', indeterminate: true })));
+    return !label ? (checkbox) : (React.createElement("label", { className: cx('iui-checkbox-wrapper', (_b = {
                 'iui-disabled': disabled
             },
-            _a["iui-" + status] = !!status,
-            _a['iui-loading'] = isLoading,
-            _a['iui-checkbox-visibility'] = variant === 'eyeball',
-            _a), className), style: style },
-        React.createElement("input", __assign({ disabled: disabled || isLoading, type: 'checkbox', ref: refs }, rest)),
-        React.createElement("span", { className: cx('iui-checkbox-checkmark', checkmarkClassName), style: checkmarkStyle },
-            isLoading && React.createElement(ProgressRadial, { indeterminate: true }),
-            !isLoading &&
-                (variant === 'default' ? defaultCheckbox : visibilityCheckbox)),
-        label && React.createElement("span", { className: 'iui-label' }, label)));
+            _b["iui-" + status] = !!status,
+            _b['iui-loading'] = isLoading,
+            _b), className), style: style },
+        checkbox,
+        label && React.createElement("span", { className: 'iui-checkbox-label' }, label)));
 });
 export default Checkbox;

package/esm/core/ColorPicker/ColorSwatch.d.ts

@@ -17,5 +17,5 @@ export declare type ColorSwatchProps = {
  * <ColorSwatch color='#23450b' onClick={onClick}/>
  * <ColorSwatch color={{ r: 255, g: 255, b: 0 }} onClick={onClick}/>
  */
-export declare const ColorSwatch: React.ForwardRefExoticComponent<Pick<ColorSwatchProps, "dir" | "slot" | "style" | "title" | "id" | "role" | "children" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "onFocus" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "isActive"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorSwatch: React.ForwardRefExoticComponent<Pick<ColorSwatchProps, "dir" | "slot" | "style" | "title" | "id" | "aria-disabled" | "role" | "children" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "onFocus" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "isActive"> & React.RefAttributes<HTMLDivElement>>;
 export default ColorSwatch;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { InputProps } from '../Input';
 import { SelectOption } from '../Select';
 import { PopoverProps, CommonProps, InputContainerProps } from '../utils';
@@ -12,6 +12,11 @@ export declare type ComboBoxProps<T> = {
      * Controlled value of ComboBox.
      */
     value?: T;
+    /**
+     * Message shown below the combobox.
+     * Use `StatusMessage` component.
+     */
+    message?: React.ReactNode;
     /**
      * Callback fired when selected value changes.
      */
@@ -33,6 +38,17 @@ export declare type ComboBoxProps<T> = {
      * @default 'No options found'
      */
     emptyStateMessage?: string;
+    /**
+     * A custom item renderer can be specified to control the rendering.
+     * This function should ideally return a customized version of `MenuItem`,
+     * otherwise you will need to make sure to provide styling for the `isFocused` state.
+     */
+    itemRenderer?: (option: SelectOption<T>, states: {
+        isSelected: boolean;
+        isFocused: boolean;
+        id: string;
+        index: number;
+    }) => JSX.Element;
 } & Pick<InputContainerProps, 'status'> & Omit<CommonProps, 'title'>;
 /**
  * ComboBox component that allows typing a value to filter the options in dropdown list.

package/esm/core/ComboBox/ComboBox.js

@@ -29,9 +29,10 @@ import cx from 'classnames';
 import { Input } from '../Input';
 import { Menu, MenuExtraContent, MenuItem } from '../Menu';
 import { Text } from '../Typography';
-import { InputContainer, useTheme, Popover, getFocusableElements, getRandomValue, } from '../utils';
+import { InputContainer, useTheme, Popover, getFocusableElements, getRandomValue, mergeRefs, } from '../utils';
 import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall';
 import 'tippy.js/animations/shift-away.css';
+import { StatusMessage } from '../StatusMessage';
 /**
  * ComboBox component that allows typing a value to filter the options in dropdown list.
  * Values can be selected either using mouse clicks or using the Enter key.
@@ -46,7 +47,7 @@ import 'tippy.js/animations/shift-away.css';
  * />
  */
 export var ComboBox = function (props) {
-    var options = props.options, value = props.value, onChange = props.onChange, filterFunction = props.filterFunction, className = props.className, inputProps = props.inputProps, dropdownMenuProps = props.dropdownMenuProps, _a = props.emptyStateMessage, emptyStateMessage = _a === void 0 ? 'No options found' : _a, rest = __rest(props, ["options", "value", "onChange", "filterFunction", "className", "inputProps", "dropdownMenuProps", "emptyStateMessage"]);
+    var options = props.options, value = props.value, onChange = props.onChange, filterFunction = props.filterFunction, className = props.className, inputProps = props.inputProps, dropdownMenuProps = props.dropdownMenuProps, message = props.message, status = props.status, _a = props.emptyStateMessage, emptyStateMessage = _a === void 0 ? 'No options found' : _a, itemRenderer = props.itemRenderer, rest = __rest(props, ["options", "value", "onChange", "filterFunction", "className", "inputProps", "dropdownMenuProps", "message", "status", "emptyStateMessage", "itemRenderer"]);
     // Generate a stateful random id if not specified
     var id = React.useState(function () {
         var _a, _b;
@@ -61,16 +62,31 @@ export var ComboBox = function (props) {
             return value === options[index].value;
         });
     }, [options, id]);
+    var userOnChange = React.useRef(onChange);
     var memoizedItems = React.useMemo(function () {
-        return options.map(function (_a, index) {
-            var label = _a.label, value = _a.value, rest = __rest(_a, ["label", "value"]);
-            return (React.createElement(MenuItem, __assign({ id: getOptionId(index), key: getOptionId(index), value: value, role: 'option', onClick: function (value) {
+        return options.map(function (option, index) {
+            var label = option.label, value = option.value, rest = __rest(option, ["label", "value"]);
+            var additionalProps = {
+                value: value,
+                role: 'option',
+                onClick: function () {
+                    var _a;
                     setSelectedValue(value);
-                    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+                    (_a = userOnChange.current) === null || _a === void 0 ? void 0 : _a.call(userOnChange, value);
                     setIsOpen(false);
-                } }, rest), label));
+                },
+            };
+            if (itemRenderer) {
+                return React.cloneElement(itemRenderer(option, {
+                    id: getOptionId(index),
+                    index: index,
+                    isSelected: false,
+                    isFocused: false,
+                }), additionalProps);
+            }
+            return (React.createElement(MenuItem, __assign({ id: getOptionId(index), key: getOptionId(index) }, additionalProps, rest), label));
         });
-    }, [options, getOptionId, onChange]);
+    }, [options, getOptionId, itemRenderer]);
     var inputRef = React.useRef(null);
     var menuRef = React.useRef(null);
     var toggleButtonRef = React.useRef(null);
@@ -149,6 +165,7 @@ export var ComboBox = function (props) {
         });
     }, [inputValue, options, selectedValue, isOpen, filterFunction]);
     var onKeyDown = React.useCallback(function (event) {
+        var _a;
         var focusableOptions = getFocusableElements(menuRef.current);
         var focusedIndexInFilteredList = focusableOptions.findIndex(function (_a) {
             var _b;
@@ -182,7 +199,7 @@ export var ComboBox = function (props) {
             case 'Enter':
                 if (isOpen) {
                     setSelectedValue(options[focusedIndex].value);
-                    onChange === null || onChange === void 0 ? void 0 : onChange(options[focusedIndex].value);
+                    (_a = userOnChange.current) === null || _a === void 0 ? void 0 : _a.call(userOnChange, options[focusedIndex].value);
                 }
                 setIsOpen(function (open) { return !open; });
                 event.preventDefault();
@@ -202,26 +219,41 @@ export var ComboBox = function (props) {
                 }
                 break;
         }
-    }, [focusedIndex, isOpen, options, getOptionId, onChange]);
+    }, [focusedIndex, isOpen, options, getOptionId]);
     var menuItems = React.useMemo(function () {
         if (filteredOptions.length === 0) {
-            return (React.createElement(MenuExtraContent, null,
-                React.createElement(Text, { isMuted: true }, emptyStateMessage)));
+            return [
+                React.createElement(MenuExtraContent, { key: 0 },
+                    React.createElement(Text, { isMuted: true }, emptyStateMessage)),
+            ];
         }
         return filteredOptions.map(function (option) {
+            var _a;
             var index = options.findIndex(function (_a) {
                 var value = _a.value;
                 return option.value === value;
             });
             if (index < 0) {
-                return;
+                return React.createElement(React.Fragment, null);
             }
-            if (selectedValue === option.value || focusedIndex === index) {
-                return React.cloneElement(memoizedItems[index], {
-                    isSelected: selectedValue === option.value,
-                    className: cx({ 'iui-focused': focusedIndex === index }),
-                    ref: function (el) {
-                        return focusedIndex === index && (el === null || el === void 0 ? void 0 : el.scrollIntoView(false));
+            var id = getOptionId(index);
+            var isSelected = selectedValue === option.value;
+            var isFocused = focusedIndex === index;
+            var focusScrollRef = function (el) {
+                return isFocused && (el === null || el === void 0 ? void 0 : el.scrollIntoView({ block: 'nearest' }));
+            };
+            if (isSelected || isFocused) {
+                var item = (_a = itemRenderer === null || itemRenderer === void 0 ? void 0 : itemRenderer(option, { index: index, id: id, isSelected: isSelected, isFocused: isFocused })) !== null && _a !== void 0 ? _a : React.cloneElement(memoizedItems[index], { isSelected: isSelected });
+                return React.cloneElement(item, {
+                    className: cx({ 'iui-focused': isFocused }, item.props.className),
+                    ref: mergeRefs(focusScrollRef, item.props.ref),
+                    value: option.value,
+                    role: 'option',
+                    onClick: function () {
+                        var _a;
+                        setSelectedValue(option.value);
+                        (_a = userOnChange.current) === null || _a === void 0 ? void 0 : _a.call(userOnChange, option.value);
+                        setIsOpen(false);
                     },
                 });
             }
@@ -231,11 +263,14 @@ export var ComboBox = function (props) {
         filteredOptions,
         emptyStateMessage,
         options,
-        focusedIndex,
+        getOptionId,
         selectedValue,
+        focusedIndex,
+        itemRenderer,
         memoizedItems,
     ]);
-    return (React.createElement(InputContainer, __assign({ className: className, isIconInline: true }, rest, { id: id }),
+    return (React.createElement(InputContainer, __assign({ className: className, status: status, statusMessage: typeof message === 'string' ? (React.createElement(StatusMessage, { status: status }, message)) : (React.isValidElement(message) &&
+            React.cloneElement(message, { status: status })) }, rest, { id: id }),
         React.createElement("div", { className: 'iui-input-with-icon' },
             React.createElement(Popover, __assign({ placement: 'bottom-start', visible: isOpen, onClickOutside: function (_, _a) {
                     var _b;

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

@@ -38,6 +38,12 @@ export declare type ExpandableBlockProps = {
      * @default 'default'
      */
     size?: 'default' | 'small';
+    /**
+     * Style of the ExpandableBlock.
+     * Use 'borderless' to hide outline.
+     * @default 'default'
+     */
+    styleType?: 'default' | 'borderless';
 } & Omit<CommonProps, 'title'>;
 /**
  * Container that allows content to be hidden behind a brief title and a caption.

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -40,10 +40,10 @@ import '@itwin/itwinui-css/css/expandable-block.css';
  */
 export var ExpandableBlock = function (props) {
     var _a;
-    var caption = props.caption, children = props.children, className = props.className, title = props.title, onToggle = props.onToggle, style = props.style, _b = props.isExpanded, isExpanded = _b === void 0 ? false : _b, endIcon = props.endIcon, status = props.status, _c = props.size, size = _c === void 0 ? 'default' : _c, rest = __rest(props, ["caption", "children", "className", "title", "onToggle", "style", "isExpanded", "endIcon", "status", "size"]);
+    var caption = props.caption, children = props.children, className = props.className, title = props.title, onToggle = props.onToggle, style = props.style, _b = props.isExpanded, isExpanded = _b === void 0 ? false : _b, endIcon = props.endIcon, status = props.status, _c = props.size, size = _c === void 0 ? 'default' : _c, _d = props.styleType, styleType = _d === void 0 ? 'default' : _d, rest = __rest(props, ["caption", "children", "className", "title", "onToggle", "style", "isExpanded", "endIcon", "status", "size", "styleType"]);
     useTheme();
     var icon = endIcon !== null && endIcon !== void 0 ? endIcon : (status && StatusIconMap[status]());
-    var _d = React.useState(isExpanded), expanded = _d[0], setExpanded = _d[1];
+    var _e = React.useState(isExpanded), expanded = _e[0], setExpanded = _e[1];
     React.useEffect(function () {
         setExpanded(isExpanded);
     }, [isExpanded]);
@@ -62,6 +62,7 @@ export var ExpandableBlock = function (props) {
             'iui-with-caption': !!caption,
             'iui-expanded': expanded,
             'iui-small': size === 'small',
+            'iui-borderless': styleType === 'borderless',
         }, className), style: style }, rest),
         React.createElement("div", { "aria-expanded": expanded, className: 'iui-header', tabIndex: 0, onClick: handleToggle, onKeyDown: onKeyDown },
             React.createElement(SvgChevronRight, { className: 'iui-icon', "aria-hidden": true }),

package/esm/core/Footer/Footer.d.ts

@@ -11,8 +11,10 @@ export declare type TitleTranslations = {
 export declare type FooterProps = {
     /**
      * Customize footer elements.
+     * Providing a `FooterElement[]` will append the custom elements to the end of the default elements.
+     * Providing a function that returns a `FooterElement[]` allows further customization - whatever is returned from the function is displayed in the footer with no amendments.
      */
-    customElements?: FooterElement[];
+    customElements?: FooterElement[] | ((defaultElements: FooterElement[]) => FooterElement[]);
     /**
      * Provide localized strings.
      */
@@ -27,13 +29,23 @@ export declare type FooterElement = {
      * URL of the footer element.
      */
     url?: string;
+    /**
+     * Key of the footer element.
+     */
+    key?: keyof TitleTranslations | 'copyright' | (string & Record<never, never>);
 };
 /**
  * Footer element with all needed legal and info links.
  * Be sure to place it manually at the bottom of your page.
  * You can use position 'absolute' with relative body or set the height of the content and place footer at the end.
- * @example
+ * @example <caption>Appending custom element after default elements</caption>
  * <Footer customElements={[{title: 'Bentley', url: 'https://www.bentley.com/'}]} />
+ * @example <caption>Returning only custom elements</caption>
+ * <Footer customElements={() => newFooterElements)} />
+ * @example <caption>Filtering out a specific element</caption>
+ * <Footer customElements={(defaultElements) => defaultElements.filter(({ key }) => key !== 'privacy' )} />
+ * @example <caption>Changing a url</caption>
+ * <Footer customElements={(defaultElements) => defaultElements.map(element => ({ ...element, url: element.key === 'privacy' ? customPrivacyUrl : element.url }))} />
  */
 export declare const Footer: (props: FooterProps) => JSX.Element;
 export default Footer;

package/esm/core/Footer/Footer.js

@@ -48,39 +48,62 @@ var footerTranslations = {
  * Footer element with all needed legal and info links.
  * Be sure to place it manually at the bottom of your page.
  * You can use position 'absolute' with relative body or set the height of the content and place footer at the end.
- * @example
+ * @example <caption>Appending custom element after default elements</caption>
  * <Footer customElements={[{title: 'Bentley', url: 'https://www.bentley.com/'}]} />
+ * @example <caption>Returning only custom elements</caption>
+ * <Footer customElements={() => newFooterElements)} />
+ * @example <caption>Filtering out a specific element</caption>
+ * <Footer customElements={(defaultElements) => defaultElements.filter(({ key }) => key !== 'privacy' )} />
+ * @example <caption>Changing a url</caption>
+ * <Footer customElements={(defaultElements) => defaultElements.map(element => ({ ...element, url: element.key === 'privacy' ? customPrivacyUrl : element.url }))} />
  */
 export var Footer = function (props) {
     var customElements = props.customElements, translatedTitles = props.translatedTitles, className = props.className, rest = __rest(props, ["customElements", "translatedTitles", "className"]);
     useTheme();
-    var today = new Date();
     var titles = __assign(__assign({}, footerTranslations), translatedTitles);
     var defaultElements = [
         {
+            key: 'copyright',
+            title: "\u00A9 " + new Date().getFullYear() + " Bentley Systems, Incorporated",
+        },
+        {
+            key: 'termsOfService',
             title: titles.termsOfService,
             url: 'https://connect-agreementportal.bentley.com/AgreementApp/Home/Eula/view/readonly/BentleyConnect',
         },
-        { title: titles.privacy, url: 'https://www.bentley.com/en/privacy-policy' },
         {
+            key: 'privacy',
+            title: titles.privacy,
+            url: 'https://www.bentley.com/en/privacy-policy',
+        },
+        {
+            key: 'termsOfUse',
             title: titles.termsOfUse,
             url: 'https://www.bentley.com/en/terms-of-use-and-select-online-agreement',
         },
-        { title: titles.cookies, url: 'https://www.bentley.com/en/cookie-policy' },
-        { title: titles.legalNotices, url: 'https://connect.bentley.com/Legal' },
+        {
+            key: 'cookies',
+            title: titles.cookies,
+            url: 'https://www.bentley.com/en/cookie-policy',
+        },
+        {
+            key: 'legalNotices',
+            title: titles.legalNotices,
+            url: 'https://connect.bentley.com/Legal',
+        },
     ];
-    var elements = customElements
-        ? __spreadArray(__spreadArray([], defaultElements, true), customElements, true) : defaultElements;
+    var elements = defaultElements;
+    if (customElements) {
+        elements =
+            typeof customElements === 'function'
+                ? customElements(defaultElements)
+                : __spreadArray(__spreadArray([], defaultElements, true), customElements, true);
+    }
     return (React.createElement("footer", __assign({ className: cx('iui-legal-footer', className) }, rest),
-        React.createElement("ul", null,
-            React.createElement("li", null,
-                "\u00A9 ",
-                today.getFullYear(),
-                " Bentley Systems, Incorporated"),
-            elements.map(function (element, index) {
-                return (React.createElement("li", { key: element.title + "-" + index },
-                    React.createElement("span", { className: 'iui-separator' }),
-                    element.url ? (React.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title)));
-            }))));
+        React.createElement("ul", null, elements.map(function (element, index) {
+            return (React.createElement("li", { key: element.key || element.title + "-" + index },
+                index > 0 && React.createElement("span", { className: 'iui-separator' }),
+                element.url ? (React.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title)));
+        }))));
 };
 export default Footer;

package/esm/core/InputGroup/InputGroup.js

@@ -45,8 +45,18 @@ import '@itwin/itwinui-css/css/inputs.css';
 export var InputGroup = function (props) {
     var children = props.children, _a = props.disabled, disabled = _a === void 0 ? false : _a, _b = props.displayStyle, displayStyle = _b === void 0 ? 'default' : _b, label = props.label, message = props.message, status = props.status, svgIcon = props.svgIcon, className = props.className, style = props.style, _c = props.required, required = _c === void 0 ? false : _c, rest = __rest(props, ["children", "disabled", "displayStyle", "label", "message", "status", "svgIcon", "className", "style", "required"]);
     useTheme();
-    var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && StatusIconMap[status]());
-    return (React.createElement(InputContainer, __assign({ label: label, disabled: disabled, required: required, status: status, message: message, icon: icon ? React.cloneElement(icon, { 'aria-hidden': true }) : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style }, rest),
+    var icon = function () {
+        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(InputContainer, __assign({ label: label, disabled: disabled, required: required, status: status, message: message, icon: icon(), isLabelInline: displayStyle === 'inline', className: className, style: style }, rest),
         React.createElement("div", { className: 'iui-input-group' }, children)));
 };
 export default InputGroup;

package/esm/core/LabeledSelect/LabeledSelect.js

@@ -64,10 +64,16 @@ import '@itwin/itwinui-css/css/inputs.css';
 export var LabeledSelect = function (props) {
     var className = props.className, _a = props.disabled, disabled = _a === void 0 ? false : _a, label = props.label, message = props.message, status = props.status, svgIcon = props.svgIcon, _b = props.displayStyle, displayStyle = _b === void 0 ? 'default' : _b, style = props.style, selectClassName = props.selectClassName, selectStyle = props.selectStyle, _c = props.required, required = _c === void 0 ? false : _c, rest = __rest(props, ["className", "disabled", "label", "message", "status", "svgIcon", "displayStyle", "style", "selectClassName", "selectStyle", "required"]);
     useTheme();
-    var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && StatusIconMap[status]());
-    return (React.createElement(InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: displayStyle === 'default' && icon
-            ? React.cloneElement(icon, { 'aria-hidden': true })
-            : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style },
+    var icon = function () {
+        if (svgIcon) {
+            return React.cloneElement(svgIcon, { 'aria-hidden': true });
+        }
+        if (status && message) {
+            return StatusIconMap[status]();
+        }
+        return undefined;
+    };
+    return (React.createElement(InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: displayStyle === 'default' ? icon() : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style },
         React.createElement(Select, __assign({ disabled: disabled, className: selectClassName, style: selectStyle }, rest))));
 };
 export default LabeledSelect;

package/esm/core/Menu/Menu.js

@@ -37,6 +37,9 @@ export var Menu = React.forwardRef(function (props, ref) {
     var _c = React.useState(), focusedIndex = _c[0], setFocusedIndex = _c[1];
     var menuRef = React.useRef(null);
     var refs = useMergedRefs(menuRef, ref);
+    React.useEffect(function () {
+        setFocusedIndex(null);
+    }, [children]);
     React.useEffect(function () {
         var _a;
         var items = getFocusableElements(menuRef.current);
@@ -49,9 +52,6 @@ export var Menu = React.forwardRef(function (props, ref) {
             setFocusedIndex(selectedIndex > -1 ? selectedIndex : 0);
         }
     }, [setFocus, focusedIndex]);
-    React.useEffect(function () {
-        setFocusedIndex(null);
-    }, [children]);
     var onKeyDown = function (event) {
         var items = getFocusableElements(menuRef.current);
         if (!(items === null || items === void 0 ? void 0 : items.length)) {

package/esm/core/Radio/Radio.d.ts

@@ -11,10 +11,16 @@ export declare type RadioProps = {
     status?: 'positive' | 'warning' | 'negative';
     /**
      * Custom CSS class name for the checkmark element.
+     *
+     * @deprecated As of 1.32.0, this is applied on the actual radio `<input>` element.
+     * The checkmark has been moved into a pseudo-element.
      */
     checkmarkClassName?: string;
     /**
      * Custom CSS Style for the checkmark element.
+     *
+     * @deprecated As of 1.32.0, this is applied on the actual radio `<input>` element.
+     * The checkmark has been moved into a pseudo-element.
      */
     checkmarkStyle?: React.CSSProperties;
     /**
@@ -26,6 +32,7 @@ export declare type RadioProps = {
 /**
  * Basic radio input component
  * @example
+ * <Radio />
  * <Radio label='Radio' />
  * <Radio disabled={true} label='Radio' />
  * <Radio status='positive' label='Positive' />
@@ -43,10 +50,16 @@ export declare const Radio: React.ForwardRefExoticComponent<{
     status?: "positive" | "warning" | "negative" | undefined;
     /**
      * Custom CSS class name for the checkmark element.
+     *
+     * @deprecated As of 1.32.0, this is applied on the actual radio `<input>` element.
+     * The checkmark has been moved into a pseudo-element.
      */
     checkmarkClassName?: string | undefined;
     /**
      * Custom CSS Style for the checkmark element.
+     *
+     * @deprecated As of 1.32.0, this is applied on the actual radio `<input>` element.
+     * The checkmark has been moved into a pseudo-element.
      */
     checkmarkStyle?: React.CSSProperties | undefined;
     /**

package/esm/core/Radio/Radio.js

@@ -31,6 +31,7 @@ import '@itwin/itwinui-css/css/inputs.css';
 /**
  * Basic radio input component
  * @example
+ * <Radio />
  * <Radio label='Radio' />
  * <Radio disabled={true} label='Radio' />
  * <Radio status='positive' label='Positive' />
@@ -38,8 +39,8 @@ import '@itwin/itwinui-css/css/inputs.css';
  * <Radio status='negative' label='Negative' />
  */
 export var Radio = React.forwardRef(function (props, ref) {
-    var _a;
-    var className = props.className, _b = props.disabled, disabled = _b === void 0 ? false : _b, label = props.label, status = props.status, style = props.style, checkmarkClassName = props.checkmarkClassName, checkmarkStyle = props.checkmarkStyle, _c = props.setFocus, setFocus = _c === void 0 ? false : _c, rest = __rest(props, ["className", "disabled", "label", "status", "style", "checkmarkClassName", "checkmarkStyle", "setFocus"]);
+    var _a, _b;
+    var className = props.className, _c = props.disabled, disabled = _c === void 0 ? false : _c, label = props.label, status = props.status, style = props.style, checkmarkClassName = props.checkmarkClassName, checkmarkStyle = props.checkmarkStyle, _d = props.setFocus, setFocus = _d === void 0 ? false : _d, rest = __rest(props, ["className", "disabled", "label", "status", "style", "checkmarkClassName", "checkmarkStyle", "setFocus"]);
     useTheme();
     var inputElementRef = React.useRef(null);
     var refs = useMergedRefs(inputElementRef, ref);
@@ -48,11 +49,9 @@ export var Radio = React.forwardRef(function (props, ref) {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
-    return (React.createElement("label", { className: cx('iui-radio', (_a = { 'iui-disabled': disabled }, _a["iui-" + status] = !!status, _a), className), style: style },
-        React.createElement("input", __assign({ disabled: disabled, type: 'radio', ref: refs }, rest)),
-        React.createElement("span", { className: cx('iui-radio-dot', checkmarkClassName), style: checkmarkStyle },
-            React.createElement("svg", { viewBox: '0 0 16 16', "aria-hidden": 'true', focusable: 'false' },
-                React.createElement("circle", { cx: '8', cy: '8', r: '4' }))),
-        label && React.createElement("span", { className: 'iui-label' }, label)));
+    var radio = (React.createElement("input", __assign({ className: cx('iui-radio', className && (_a = {}, _a[className] = !label, _a), checkmarkClassName), style: __assign(__assign({}, (!label && style)), checkmarkStyle), disabled: disabled, type: 'radio', ref: refs }, rest)));
+    return !label ? (radio) : (React.createElement("label", { className: cx('iui-radio-wrapper', (_b = { 'iui-disabled': disabled }, _b["iui-" + status] = !!status, _b), className), style: style },
+        radio,
+        label && React.createElement("span", { className: 'iui-radio-label' }, label)));
 });
 export default Radio;

package/esm/core/Slider/Slider.js

@@ -202,11 +202,20 @@ export var Slider = React.forwardRef(function (props, ref) {
             newValues[closestValueIndex] = pointerValue;
             setCurrentValues(newValues);
             onChange === null || onChange === void 0 ? void 0 : onChange(newValues);
+            onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(newValues);
             focusThumb(containerRef.current, closestValueIndex);
             event.preventDefault();
             event.stopPropagation();
         }
-    }, [min, max, step, currentValues, getAllowableThumbRange, onChange]);
+    }, [
+        min,
+        max,
+        step,
+        currentValues,
+        getAllowableThumbRange,
+        onChange,
+        onUpdate,
+    ]);
     useEventListener('pointermove', handlePointerMove, (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
     useEventListener('pointerup', handlePointerUp, (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
     var tickMarkArea = React.useMemo(function () {