@itwin/itwinui-react 1.31.0 → 1.33.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## [1.33.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.32.0...v1.33.0) (2022-03-07)
+
+### What's new
+
+* **ButtonGroup:** Add new `orientation` prop to allow showing vertical group ([#577](https://www.github.com/iTwin/iTwinUI-react/issues/577)) ([f6cd52f](https://www.github.com/iTwin/iTwinUI-react/commit/f6cd52f39dd139439281114d3ade99e486ab6bfb))
+* **ComboBox:** Add new `message` prop ([#554](https://www.github.com/iTwin/iTwinUI-react/issues/554)) ([8113860](https://www.github.com/iTwin/iTwinUI-react/commit/8113860499e6156d97992919204b3b8c7e46197b))
+  * This new prop can accept a string or the new `StatusMessage` component for customizing icon.
+* **Footer:** Allow overriding and removing default footer elements ([#544](https://www.github.com/iTwin/iTwinUI-react/issues/544)) ([76396a4](https://www.github.com/iTwin/iTwinUI-react/commit/76396a4cc0a88bb7680316cf4642b732729abd7a))
+
+## [1.32.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.31.0...v1.32.0) (2022-02-25)
+
+### What's new
+
+* **Popover:** Append to `body` by default and increase z-index ([#562](https://www.github.com/iTwin/iTwinUI-react/issues/562)) ([66df49f](https://www.github.com/iTwin/iTwinUI-react/commit/66df49fec85ec13707cc73bb3fdf84ca3a4c7655))
+  - This will fix many clipping and positioning issues in tooltips and dropdowns, without the need for any workarounds.
+  - If a popover is nested within another popover which is already appended to document.body, then it should use `appendTo='parent'`.
+* **Tree:** Add new Tree Component ([#468](https://www.github.com/iTwin/iTwinUI-react/issues/468)) ([1d5083c](https://www.github.com/iTwin/iTwinUI-react/commit/1d5083c612cd1f1b1cbec0e5ea82b8b573d72b86))
+* **ComboBox:** Add new `itemRenderer` prop for customizing the look of menu items ([#547](https://www.github.com/iTwin/iTwinUI-react/issues/547)) ([d866d32](https://www.github.com/iTwin/iTwinUI-react/commit/d866d32a719dea6e359519ae40bc66dc7df209e1))
+* **ExpandableBlock:** Add borderless variant via new `styleType` prop ([#557](https://www.github.com/iTwin/iTwinUI-react/issues/557)) ([9e8c8ab](https://www.github.com/iTwin/iTwinUI-react/commit/9e8c8ab76a7c6d24c51d5eea9e4424417c0e2fad))
+* **Checkbox** and **Radio**: Render without `<label>` wrapper if `label` prop is not passed ([#556](https://www.github.com/iTwin/iTwinUI-react/issues/556)) ([a436cbf](https://www.github.com/iTwin/iTwinUI-react/commit/a436cbf333629b2603bf160f9a8ffe2592093805))
+
+### Fixes
+
+* **Menu:** Fix lost item focus in edge cases ([#563](https://www.github.com/iTwin/iTwinUI-react/issues/563)) ([3ccb5ed](https://www.github.com/iTwin/iTwinUI-react/commit/3ccb5ed98ac4f60479e0450abb31cbb659d902b9))
+
 ## [1.31.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.30.0...v1.31.0) (2022-02-15)
 
 ### What's new

package/cjs/core/ButtonGroup/ButtonGroup.d.ts

@@ -13,6 +13,8 @@ export declare type ButtonGroupProps = {
      * and returns the `ReactNode` to render.
      *
      * The placement of this button can be controlled using the `overflowPlacement` prop.
+     *
+     * *Note: this will not work with `orientation='vertical'`.*
      */
     overflowButton?: (firstOverflowingIndex: number) => React.ReactNode;
     /**
@@ -20,6 +22,11 @@ export declare type ButtonGroupProps = {
      * @default 'end'
      */
     overflowPlacement?: 'start' | 'end';
+    /**
+     * Should the buttons be placed in a horizontal or vertical layout?
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
 } & React.ComponentPropsWithRef<'div'>;
 /**
  * Group buttons together for common actions.
@@ -49,5 +56,5 @@ export declare type ButtonGroupProps = {
  *   {buttons}
  * </ButtonGroup>
  */
-export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<ButtonGroupProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "overflowButton" | "overflowPlacement"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<ButtonGroupProps, "orientation" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "overflowButton" | "overflowPlacement"> & React.RefAttributes<HTMLDivElement>>;
 export default ButtonGroup;

package/cjs/core/ButtonGroup/ButtonGroup.js

@@ -63,12 +63,16 @@ require("@itwin/itwinui-css/css/button.css");
  * </ButtonGroup>
  */
 exports.ButtonGroup = react_1.default.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, style = props.style, overflowButton = props.overflowButton, _a = props.overflowPlacement, overflowPlacement = _a === void 0 ? 'end' : _a, rest = __rest(props, ["children", "className", "style", "overflowButton", "overflowPlacement"]);
+    var children = props.children, className = props.className, style = props.style, overflowButton = props.overflowButton, _a = props.overflowPlacement, overflowPlacement = _a === void 0 ? 'end' : _a, _b = props.orientation, orientation = _b === void 0 ? 'horizontal' : _b, rest = __rest(props, ["children", "className", "style", "overflowButton", "overflowPlacement", "orientation"]);
     var items = react_1.default.useMemo(function () { var _a; return (_a = react_1.default.Children.map(children, function (child) { return react_1.default.createElement("div", null, child); })) !== null && _a !== void 0 ? _a : []; }, [children]);
     (0, utils_1.useTheme)();
-    var _b = (0, utils_1.useOverflow)(items, !overflowButton), overflowRef = _b[0], visibleCount = _b[1];
+    var _c = (0, utils_1.useOverflow)(items, !overflowButton), overflowRef = _c[0], visibleCount = _c[1];
     var refs = (0, utils_1.useMergedRefs)(overflowRef, ref);
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-button-group', className), style: __assign(__assign({}, (!!overflowButton && { width: '100%' })), style), ref: refs }, rest), !!overflowButton && visibleCount < items.length ? (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)({
+            'iui-button-group': orientation === 'horizontal',
+            'iui-button-group-vertical': orientation === 'vertical',
+        }, className), style: __assign(__assign({}, (!!overflowButton &&
+            orientation === 'horizontal' && { width: '100%' })), style), "aria-orientation": orientation, ref: refs }, rest), !!overflowButton && visibleCount < items.length ? (react_1.default.createElement(react_1.default.Fragment, null,
         overflowButton && overflowPlacement === 'start' && (react_1.default.createElement("div", null, overflowButton(visibleCount))),
         items.slice(0, visibleCount - 1),
         overflowButton && overflowPlacement === 'end' && (react_1.default.createElement("div", null, overflowButton(visibleCount))))) : (items)));

package/cjs/core/Checkbox/Checkbox.d.ts

@@ -30,16 +30,23 @@ export declare type CheckboxProps = {
     isLoading?: boolean;
     /**
      * Custom CSS class name for the checkmark element.
+     *
+     * @deprecated As of 1.32.0, this is applied on the actual checkbox `<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 checkbox `<input>` element.
+     * The checkmark has been moved into a pseudo-element.
      */
     checkmarkStyle?: React.CSSProperties;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
 /**
  * Simple input checkbox
  * @example
+ * <Checkbox />
  * <Checkbox label='Basic Checkbox' />
  * <Checkbox label='Disabled Checkbox' disabled />
  * <Checkbox label='Checked' checked />
@@ -78,10 +85,16 @@ export declare const Checkbox: React.ForwardRefExoticComponent<{
     isLoading?: boolean | undefined;
     /**
      * Custom CSS class name for the checkmark element.
+     *
+     * @deprecated As of 1.32.0, this is applied on the actual checkbox `<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 checkbox `<input>` element.
+     * The checkmark has been moved into a pseudo-element.
      */
     checkmarkStyle?: React.CSSProperties | undefined;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & React.RefAttributes<HTMLInputElement>>;

package/cjs/core/Checkbox/Checkbox.js

@@ -38,6 +38,7 @@ require("@itwin/itwinui-css/css/inputs.css");
 /**
  * Simple input checkbox
  * @example
+ * <Checkbox />
  * <Checkbox label='Basic Checkbox' />
  * <Checkbox label='Disabled Checkbox' disabled />
  * <Checkbox label='Checked' checked />
@@ -47,8 +48,8 @@ require("@itwin/itwinui-css/css/inputs.css");
  * <Checkbox label='Visibility Checkbox' variant='eyeball' />
  */
 exports.Checkbox = react_1.default.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"]);
     (0, utils_1.useTheme)();
     var inputElementRef = react_1.default.useRef(null);
     var refs = (0, utils_1.useMergedRefs)(inputElementRef, ref);
@@ -65,27 +66,19 @@ exports.Checkbox = react_1.default.forwardRef(function (props, ref) {
                 : inputElementRef.current.checked;
         }
     });
-    var defaultCheckbox = (react_1.default.createElement("svg", { viewBox: '0 0 16 16', "aria-hidden": 'true', focusable: 'false' },
-        react_1.default.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_1.default.createElement("path", { className: 'iui-check-partial', d: 'm2.75 6.875h10.5v2.25h-10.5z' })));
-    var visibilityCheckbox = (react_1.default.createElement("svg", { viewBox: '0 0 16 16', "aria-hidden": 'true', focusable: 'false' },
-        react_1.default.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_1.default.createElement("g", { className: 'iui-check-partial' },
-            react_1.default.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_1.default.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_1.default.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_1.default.createElement("label", { className: (0, classnames_1.default)('iui-checkbox', (_a = {
+    var checkbox = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("input", __assign({ className: (0, classnames_1.default)('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_1.default.createElement(ProgressIndicators_1.ProgressRadial, { size: 'x-small', indeterminate: true })));
+    return !label ? (checkbox) : (react_1.default.createElement("label", { className: (0, classnames_1.default)('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_1.default.createElement("input", __assign({ disabled: disabled || isLoading, type: 'checkbox', ref: refs }, rest)),
-        react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-checkbox-checkmark', checkmarkClassName), style: checkmarkStyle },
-            isLoading && react_1.default.createElement(ProgressIndicators_1.ProgressRadial, { indeterminate: true }),
-            !isLoading &&
-                (variant === 'default' ? defaultCheckbox : visibilityCheckbox)),
-        label && react_1.default.createElement("span", { className: 'iui-label' }, label)));
+            _b["iui-" + status] = !!status,
+            _b['iui-loading'] = isLoading,
+            _b), className), style: style },
+        checkbox,
+        label && react_1.default.createElement("span", { className: 'iui-checkbox-label' }, label)));
 });
 exports.default = exports.Checkbox;

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

@@ -38,6 +38,7 @@ var Typography_1 = require("../Typography");
 var utils_1 = require("../utils");
 var CaretDownSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall"));
 require("tippy.js/animations/shift-away.css");
+var StatusMessage_1 = require("../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.
@@ -52,7 +53,7 @@ require("tippy.js/animations/shift-away.css");
  * />
  */
 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_1.default.useState(function () {
         var _a, _b;
@@ -67,16 +68,31 @@ var ComboBox = function (props) {
             return value === options[index].value;
         });
     }, [options, id]);
+    var userOnChange = react_1.default.useRef(onChange);
     var memoizedItems = react_1.default.useMemo(function () {
-        return options.map(function (_a, index) {
-            var label = _a.label, value = _a.value, rest = __rest(_a, ["label", "value"]);
-            return (react_1.default.createElement(Menu_1.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_1.default.cloneElement(itemRenderer(option, {
+                    id: getOptionId(index),
+                    index: index,
+                    isSelected: false,
+                    isFocused: false,
+                }), additionalProps);
+            }
+            return (react_1.default.createElement(Menu_1.MenuItem, __assign({ id: getOptionId(index), key: getOptionId(index) }, additionalProps, rest), label));
         });
-    }, [options, getOptionId, onChange]);
+    }, [options, getOptionId, itemRenderer]);
     var inputRef = react_1.default.useRef(null);
     var menuRef = react_1.default.useRef(null);
     var toggleButtonRef = react_1.default.useRef(null);
@@ -155,6 +171,7 @@ var ComboBox = function (props) {
         });
     }, [inputValue, options, selectedValue, isOpen, filterFunction]);
     var onKeyDown = react_1.default.useCallback(function (event) {
+        var _a;
         var focusableOptions = (0, utils_1.getFocusableElements)(menuRef.current);
         var focusedIndexInFilteredList = focusableOptions.findIndex(function (_a) {
             var _b;
@@ -188,7 +205,7 @@ 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();
@@ -208,26 +225,41 @@ var ComboBox = function (props) {
                 }
                 break;
         }
-    }, [focusedIndex, isOpen, options, getOptionId, onChange]);
+    }, [focusedIndex, isOpen, options, getOptionId]);
     var menuItems = react_1.default.useMemo(function () {
         if (filteredOptions.length === 0) {
-            return (react_1.default.createElement(Menu_1.MenuExtraContent, null,
-                react_1.default.createElement(Typography_1.Text, { isMuted: true }, emptyStateMessage)));
+            return [
+                react_1.default.createElement(Menu_1.MenuExtraContent, { key: 0 },
+                    react_1.default.createElement(Typography_1.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_1.default.createElement(react_1.default.Fragment, null);
             }
-            if (selectedValue === option.value || focusedIndex === index) {
-                return react_1.default.cloneElement(memoizedItems[index], {
-                    isSelected: selectedValue === option.value,
-                    className: (0, classnames_1.default)({ '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_1.default.cloneElement(memoizedItems[index], { isSelected: isSelected });
+                return react_1.default.cloneElement(item, {
+                    className: (0, classnames_1.default)({ 'iui-focused': isFocused }, item.props.className),
+                    ref: (0, utils_1.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);
                     },
                 });
             }
@@ -237,11 +269,14 @@ var ComboBox = function (props) {
         filteredOptions,
         emptyStateMessage,
         options,
-        focusedIndex,
+        getOptionId,
         selectedValue,
+        focusedIndex,
+        itemRenderer,
         memoizedItems,
     ]);
-    return (react_1.default.createElement(utils_1.InputContainer, __assign({ className: className, isIconInline: true }, rest, { id: id }),
+    return (react_1.default.createElement(utils_1.InputContainer, __assign({ className: className, status: status, statusMessage: typeof message === 'string' ? (react_1.default.createElement(StatusMessage_1.StatusMessage, { status: status }, message)) : (react_1.default.isValidElement(message) &&
+            react_1.default.cloneElement(message, { status: status })) }, rest, { id: id }),
         react_1.default.createElement("div", { className: 'iui-input-with-icon' },
             react_1.default.createElement(utils_1.Popover, __assign({ placement: 'bottom-start', visible: isOpen, onClickOutside: function (_, _a) {
                     var _b;

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

@@ -46,10 +46,10 @@ require("@itwin/itwinui-css/css/expandable-block.css");
  */
 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"]);
     (0, utils_1.useTheme)();
     var icon = endIcon !== null && endIcon !== void 0 ? endIcon : (status && utils_1.StatusIconMap[status]());
-    var _d = react_1.default.useState(isExpanded), expanded = _d[0], setExpanded = _d[1];
+    var _e = react_1.default.useState(isExpanded), expanded = _e[0], setExpanded = _e[1];
     react_1.default.useEffect(function () {
         setExpanded(isExpanded);
     }, [isExpanded]);
@@ -68,6 +68,7 @@ var ExpandableBlock = function (props) {
             'iui-with-caption': !!caption,
             'iui-expanded': expanded,
             'iui-small': size === 'small',
+            'iui-borderless': styleType === 'borderless',
         }, className), style: style }, rest),
         react_1.default.createElement("div", { "aria-expanded": expanded, className: 'iui-header', tabIndex: 0, onClick: handleToggle, onKeyDown: onKeyDown },
             react_1.default.createElement(ChevronRight_1.default, { className: 'iui-icon', "aria-hidden": true }),

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

@@ -54,40 +54,63 @@ 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 }))} />
  */
 var Footer = function (props) {
     var customElements = props.customElements, translatedTitles = props.translatedTitles, className = props.className, rest = __rest(props, ["customElements", "translatedTitles", "className"]);
     (0, utils_1.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_1.default.createElement("footer", __assign({ className: (0, classnames_1.default)('iui-legal-footer', className) }, rest),
-        react_1.default.createElement("ul", null,
-            react_1.default.createElement("li", null,
-                "\u00A9 ",
-                today.getFullYear(),
-                " Bentley Systems, Incorporated"),
-            elements.map(function (element, index) {
-                return (react_1.default.createElement("li", { key: element.title + "-" + index },
-                    react_1.default.createElement("span", { className: 'iui-separator' }),
-                    element.url ? (react_1.default.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title)));
-            }))));
+        react_1.default.createElement("ul", null, elements.map(function (element, index) {
+            return (react_1.default.createElement("li", { key: element.key || element.title + "-" + index },
+                index > 0 && react_1.default.createElement("span", { className: 'iui-separator' }),
+                element.url ? (react_1.default.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title)));
+        }))));
 };
 exports.Footer = Footer;
 exports.default = exports.Footer;

package/cjs/core/InputGroup/InputGroup.js

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

package/cjs/core/LabeledSelect/LabeledSelect.js

@@ -70,10 +70,16 @@ require("@itwin/itwinui-css/css/inputs.css");
 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"]);
     (0, utils_1.useTheme)();
-    var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && utils_1.StatusIconMap[status]());
-    return (react_1.default.createElement(utils_1.InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: displayStyle === 'default' && icon
-            ? react_1.default.cloneElement(icon, { 'aria-hidden': true })
-            : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style },
+    var icon = function () {
+        if (svgIcon) {
+            return react_1.default.cloneElement(svgIcon, { 'aria-hidden': true });
+        }
+        if (status && message) {
+            return utils_1.StatusIconMap[status]();
+        }
+        return undefined;
+    };
+    return (react_1.default.createElement(utils_1.InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: displayStyle === 'default' ? icon() : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style },
         react_1.default.createElement(Select_1.Select, __assign({ disabled: disabled, className: selectClassName, style: selectStyle }, rest))));
 };
 exports.LabeledSelect = LabeledSelect;