@itwin/itwinui-react 1.30.0 → 1.32.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [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
+
+* **Select:** Now uses an svg for the arrow to match ComboBox ([#540](https://www.github.com/iTwin/iTwinUI-react/issues/540)) ([c0ad092](https://www.github.com/iTwin/iTwinUI-react/commit/c0ad0921f859130f4cc866999ba2d31187b192ac))
+
+### Fixes
+
+* **ButtonGroup:** Fixed z-index handling through base CSS package.
+* **Popover:** Fixed popover not hiding when target is scrolled off screen.
+
 ## [1.30.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.29.3...v1.30.0) (2022-02-08)
 
 ### What's new

package/cjs/core/Badge/Badge.js

@@ -66,8 +66,8 @@ var Badge = function (props) {
     var backgroundColor = props.backgroundColor, style = props.style, className = props.className, children = props.children, rest = __rest(props, ["backgroundColor", "style", "className", "children"]);
     (0, utils_1.useTheme)();
     var _style = backgroundColor &&
-        ((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--badge-color: " + backgroundColor))
-        ? __assign({ '--badge-color': getBadgeColorValue(backgroundColor) }, style) : __assign({ backgroundColor: getBadgeColorValue(backgroundColor) }, style);
+        ((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--iui-badge-background-color: " + backgroundColor))
+        ? __assign({ '--iui-badge-background-color': getBadgeColorValue(backgroundColor) }, style) : __assign({ backgroundColor: getBadgeColorValue(backgroundColor) }, style);
     return (react_1.default.createElement("span", __assign({ className: (0, classnames_1.default)('iui-badge', className), style: _style }, rest), children));
 };
 exports.Badge = Badge;

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/ColorBuilder.js

@@ -69,21 +69,20 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
     ]);
     var _p = react_1.default.useState(false), colorDotActive = _p[0], setColorDotActive = _p[1];
     var hueColorString = hueSliderColor.toHexString();
-    var colorSquareStyle = ((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--hue:\u00A0" + hueColorString))
+    var colorSquareStyle = ((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--iui-color-field-hue: " + hueColorString))
         ? {
-            '--hue': hueColorString,
-            '--selected-color': dotColorString,
+            '--iui-color-field-hue': hueColorString,
+            '--iui-color-picker-selected-color': dotColorString,
         }
         : { backgroundColor: hueColorString };
-    var opacitySliderStyle = ((_f = (_e = (_d = (0, utils_1.getWindow)()) === null || _d === void 0 ? void 0 : _d.CSS) === null || _e === void 0 ? void 0 : _e.supports) === null || _f === void 0 ? void 0 : _f.call(_e, "--selected-color:\u00A0" + hueColorString))
-        ? { '--selected-color': hueColorString }
+    var opacitySliderStyle = ((_f = (_e = (_d = (0, utils_1.getWindow)()) === null || _d === void 0 ? void 0 : _d.CSS) === null || _e === void 0 ? void 0 : _e.supports) === null || _f === void 0 ? void 0 : _f.call(_e, "--iui-color-picker-selected-color: " + hueColorString))
+        ? { '--iui-color-picker-selected-color': hueColorString }
         : { backgroundColor: hueColorString };
     var squareTop = 100 - hsvColor.v;
     var squareLeft = hsvColor.s;
-    var colorDotStyle = ((_j = (_h = (_g = (0, utils_1.getWindow)()) === null || _g === void 0 ? void 0 : _g.CSS) === null || _h === void 0 ? void 0 : _h.supports) === null || _j === void 0 ? void 0 : _j.call(_h, "--top:\u00A0" + squareTop.toString() + "%"))
+    var colorDotStyle = ((_j = (_h = (_g = (0, utils_1.getWindow)()) === null || _g === void 0 ? void 0 : _g.CSS) === null || _h === void 0 ? void 0 : _h.supports) === null || _j === void 0 ? void 0 : _j.call(_h, "--iui-color-dot-inset: 0"))
         ? {
-            '--top': squareTop.toString() + '%',
-            '--left': squareLeft.toString() + '%',
+            '--iui-color-dot-inset': squareTop.toString() + "% auto auto " + squareLeft.toString() + "%",
         }
         : {
             backgroundColor: dotColorString,

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/ColorPicker/ColorSwatch.js

@@ -51,8 +51,8 @@ exports.ColorSwatch = react_1.default.forwardRef(function (props, ref) {
     }, [color]);
     var _style = react_1.default.useMemo(function () {
         var _a, _b, _c;
-        return ((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--swatch-color: " + colorString))
-            ? __assign({ '--swatch-color': colorString }, style) : __assign({ backgroundColor: colorString }, style);
+        return ((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--iui-color-swatch-background: " + colorString))
+            ? __assign({ '--iui-color-swatch-background': colorString }, style) : __assign({ backgroundColor: colorString }, style);
     }, [colorString, style]);
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-color-swatch', { 'iui-active': isActive }, className), style: _style, onClick: onClick, tabIndex: isActive ? 0 : -1, "aria-selected": isActive, ref: ref }, rest)));
 });

package/cjs/core/ComboBox/ComboBox.d.ts

@@ -33,6 +33,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

@@ -52,7 +52,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, _a = props.emptyStateMessage, emptyStateMessage = _a === void 0 ? 'No options found' : _a, itemRenderer = props.itemRenderer, rest = __rest(props, ["options", "value", "onChange", "filterFunction", "className", "inputProps", "dropdownMenuProps", "emptyStateMessage", "itemRenderer"]);
     // Generate a stateful random id if not specified
     var id = react_1.default.useState(function () {
         var _a, _b;
@@ -67,16 +67,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 +170,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 +204,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 +224,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,46 +268,53 @@ 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, icon: react_1.default.useMemo(function () { return (react_1.default.createElement("span", { ref: toggleButtonRef, className: (0, classnames_1.default)({
-                'iui-actionable': !(inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled),
-                'iui-open': isOpen,
-            }), onClick: function () {
-                var _a;
-                if (isOpen) {
-                    setIsOpen(false);
-                }
-                else {
-                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                }
-            } },
-            react_1.default.createElement(CaretDownSmall_1.default, { "aria-hidden": true }))); }, [inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, isOpen]) }, rest, { id: id }),
-        react_1.default.createElement(utils_1.Popover, __assign({ placement: 'bottom-start', visible: isOpen, onClickOutside: function (_, _a) {
-                var _b;
-                var target = _a.target;
-                if (!((_b = toggleButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))) {
-                    setIsOpen(false);
-                }
-            }, animation: 'shift-away', duration: 200 }, dropdownMenuProps, { content: react_1.default.createElement(Menu_1.Menu, { id: id + "-list", className: 'iui-scroll', style: {
-                    minWidth: minWidth,
-                    maxWidth: "min(" + minWidth * 2 + "px, 90vw)",
-                    maxHeight: 300,
-                }, setFocus: false, role: 'listbox', ref: menuRef }, menuItems), onHide: function (instance) {
-                var _a;
-                var selectedIndex = options.findIndex(function (_a) {
-                    var value = _a.value;
-                    return value === selectedValue;
-                });
-                setFocusedIndex(selectedIndex);
-                if (selectedIndex > -1) {
-                    setInputValue(options[selectedIndex].label); // update input value to be same as selected value
-                }
-                (_a = dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, instance);
-            } }),
-            react_1.default.createElement(Input_1.Input, __assign({ ref: inputRef, onKeyDown: onKeyDown, onFocus: function () { return setIsOpen(true); }, onChange: onInput, value: inputValue, "aria-activedescendant": isOpen && focusedIndex > -1 ? getOptionId(focusedIndex) : undefined, role: 'combobox', "aria-controls": isOpen ? id + "-list" : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off' }, inputProps)))));
+    return (react_1.default.createElement(utils_1.InputContainer, __assign({ className: className, isIconInline: true }, 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;
+                    var target = _a.target;
+                    if (!((_b = toggleButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))) {
+                        setIsOpen(false);
+                    }
+                }, animation: 'shift-away', duration: 200 }, dropdownMenuProps, { content: react_1.default.createElement(Menu_1.Menu, { id: id + "-list", className: 'iui-scroll', style: {
+                        minWidth: minWidth,
+                        maxWidth: "min(" + minWidth * 2 + "px, 90vw)",
+                        maxHeight: 300,
+                    }, setFocus: false, role: 'listbox', ref: menuRef }, menuItems), onHide: function (instance) {
+                    var _a;
+                    var selectedIndex = options.findIndex(function (_a) {
+                        var value = _a.value;
+                        return value === selectedValue;
+                    });
+                    setFocusedIndex(selectedIndex);
+                    if (selectedIndex > -1) {
+                        setInputValue(options[selectedIndex].label); // update input value to be same as selected value
+                    }
+                    (_a = dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, instance);
+                } }),
+                react_1.default.createElement(Input_1.Input, __assign({ ref: inputRef, onKeyDown: onKeyDown, onFocus: function () { return setIsOpen(true); }, onChange: onInput, value: inputValue, "aria-activedescendant": isOpen && focusedIndex > -1
+                        ? getOptionId(focusedIndex)
+                        : undefined, role: 'combobox', "aria-controls": isOpen ? id + "-list" : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off' }, inputProps))),
+            react_1.default.createElement("span", { ref: toggleButtonRef, className: (0, classnames_1.default)('iui-end-icon', {
+                    'iui-actionable': !(inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled),
+                    'iui-disabled': inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled,
+                    'iui-open': isOpen,
+                }), onClick: function () {
+                    var _a;
+                    if (isOpen) {
+                        setIsOpen(false);
+                    }
+                    else {
+                        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    }
+                } },
+                react_1.default.createElement(CaretDownSmall_1.default, { "aria-hidden": true })))));
 };
 exports.ComboBox = ComboBox;
 exports.default = exports.ComboBox;

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/Menu/Menu.js

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

package/cjs/core/Menu/MenuItem.js

@@ -106,7 +106,7 @@ exports.MenuItem = react_1.default.forwardRef(function (props, ref) {
                 className: (0, classnames_1.default)(badge.props.className, 'iui-icon'),
             })));
     return subMenuItems.length === 0 ? (listItem) : (react_1.default.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef } },
-        react_1.default.createElement(utils_1.Popover, { placement: 'right-start', visible: isSubmenuVisible, content: react_1.default.createElement("div", { onMouseLeave: function () { return setIsSubmenuVisible(false); }, onBlur: function (e) {
+        react_1.default.createElement(utils_1.Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: 'parent', content: react_1.default.createElement("div", { onMouseLeave: function () { return setIsSubmenuVisible(false); }, onBlur: function (e) {
                     var _a, _b;
                     !!(e.relatedTarget instanceof Node) &&
                         !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&

package/cjs/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;
     /**