@itwin/itwinui-react 1.48.0 → 2.0.0-dev.0

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/checkbox.css';
 export declare type CheckboxProps = {
     /**
      * Text that will be shown next to the checkbox.
@@ -28,20 +28,6 @@ export declare type CheckboxProps = {
      * @default false
      */
     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
@@ -83,19 +69,5 @@ export declare const Checkbox: React.ForwardRefExoticComponent<{
      * @default false
      */
     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>>;
 export default Checkbox;

package/cjs/core/Checkbox/Checkbox.js

@@ -34,7 +34,7 @@ var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var ProgressIndicators_1 = require("../ProgressIndicators");
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/inputs.css");
+require("@itwin/itwinui-css/css/checkbox.css");
 /**
  * Simple input checkbox
  * @example
@@ -49,7 +49,7 @@ require("@itwin/itwinui-css/css/inputs.css");
  */
 exports.Checkbox = react_1.default.forwardRef(function (props, ref) {
     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"]);
+    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, rest = __rest(props, ["className", "disabled", "indeterminate", "label", "status", "variant", "setFocus", "isLoading", "style"]);
     (0, utils_1.useTheme)();
     var inputElementRef = react_1.default.useRef(null);
     var refs = (0, utils_1.useMergedRefs)(inputElementRef, ref);
@@ -70,7 +70,7 @@ exports.Checkbox = react_1.default.forwardRef(function (props, ref) {
         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)),
+            }, className && (_a = {}, _a[className] = !label, _a)), style: !label ? style : undefined, 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

package/cjs/core/ColorPicker/ColorBuilder.js

@@ -50,12 +50,12 @@ var getHorizontalPercentageOfRectangle = function (rect, pointer) {
  * and a set of sliders to adjust hue and alpha values.
  */
 exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c;
     var className = props.className, rest = __rest(props, ["className"]);
     var builderRef = react_1.default.useRef();
     var refs = (0, utils_1.useMergedRefs)(builderRef, ref);
     (0, utils_1.useTheme)();
-    var _o = (0, ColorPickerContext_1.useColorPickerContext)(), activeColor = _o.activeColor, hsvColor = _o.hsvColor, onChangeComplete = _o.onChangeComplete, applyHsvColorChange = _o.applyHsvColorChange, showAlpha = _o.showAlpha;
+    var _d = (0, ColorPickerContext_1.useColorPickerContext)(), activeColor = _d.activeColor, hsvColor = _d.hsvColor, onChangeComplete = _d.onChangeComplete, applyHsvColorChange = _d.applyHsvColorChange, showAlpha = _d.showAlpha;
     // Set values for slider
     var hueSliderColor = react_1.default.useMemo(function () { return utils_1.ColorValue.create({ h: hsvColor.h, s: 100, v: 100 }); }, [hsvColor.h]);
     var sliderValue = react_1.default.useMemo(function () { return hsvColor.h; }, [hsvColor]);
@@ -67,28 +67,10 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
     var dotColorString = react_1.default.useMemo(function () { return activeColor.toHexString(); }, [
         activeColor,
     ]);
-    var _p = react_1.default.useState(false), colorDotActive = _p[0], setColorDotActive = _p[1];
+    var _e = react_1.default.useState(false), colorDotActive = _e[0], setColorDotActive = _e[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, "--iui-color-field-hue: ".concat(hueColorString)))
-        ? {
-            '--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, "--iui-color-picker-selected-color: ".concat(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, "--iui-color-dot-inset: 0"))
-        ? {
-            '--iui-color-dot-inset': "".concat(squareTop.toString(), "% auto auto ").concat(squareLeft.toString(), "%"),
-        }
-        : {
-            backgroundColor: dotColorString,
-            top: squareTop.toString() + '%',
-            left: squareLeft.toString() + '%',
-        };
     // Update slider change
     var updateHueSlider = react_1.default.useCallback(function (huePercent, selectionChanged) {
         var hue = Number(huePercent.toFixed(2));
@@ -145,7 +127,7 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
         event.preventDefault();
         event.stopPropagation();
     }, [colorDotActive, updateSquareValue]);
-    (0, utils_1.useEventListener)('pointerup', handleSquarePointerUp, (_k = builderRef.current) === null || _k === void 0 ? void 0 : _k.ownerDocument);
+    (0, utils_1.useEventListener)('pointerup', handleSquarePointerUp, (_a = builderRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
     var handleSquarePointerMove = react_1.default.useCallback(function (event) {
         if (!colorDotActive) {
             return;
@@ -154,7 +136,7 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
         event.stopPropagation();
         updateSquareValue(event, 'onUpdate');
     }, [colorDotActive, updateSquareValue]);
-    (0, utils_1.useEventListener)('pointermove', handleSquarePointerMove, (_l = builderRef.current) === null || _l === void 0 ? void 0 : _l.ownerDocument);
+    (0, utils_1.useEventListener)('pointermove', handleSquarePointerMove, (_b = builderRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
     var handleSquarePointerLeave = react_1.default.useCallback(function (event) {
         if (!colorDotActive) {
             return;
@@ -162,7 +144,7 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
         updateSquareValue(event, 'onChange');
         setColorDotActive(false);
     }, [colorDotActive, updateSquareValue]);
-    (0, utils_1.useEventListener)('pointerleave', handleSquarePointerLeave, (_m = builderRef.current) === null || _m === void 0 ? void 0 : _m.ownerDocument);
+    (0, utils_1.useEventListener)('pointerleave', handleSquarePointerLeave, (_c = builderRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument);
     var keysPressed = react_1.default.useRef({}); // keep track of which keys are currently pressed
     // Arrow key navigation for color dot
     var handleColorDotKeyDown = function (event) {
@@ -208,14 +190,19 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
         }
     };
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-color-selection-wrapper', className), ref: refs }, rest),
-        react_1.default.createElement("div", { className: 'iui-color-field', style: colorSquareStyle, ref: squareRef, onPointerDown: function (event) {
+        react_1.default.createElement("div", { className: 'iui-color-field', style: {
+                '--iui-color-field-hue': hueColorString,
+                '--iui-color-picker-selected-color': dotColorString,
+            }, ref: squareRef, onPointerDown: function (event) {
                 var _a;
                 event.preventDefault();
                 updateSquareValue(event, 'onClick');
                 setColorDotActive(true);
                 (_a = colorDotRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             } },
-            react_1.default.createElement("div", { className: 'iui-color-dot', style: colorDotStyle, onPointerDown: function () {
+            react_1.default.createElement("div", { className: 'iui-color-dot', style: {
+                    '--iui-color-dot-inset': "".concat(squareTop.toString(), "% auto auto ").concat(squareLeft.toString(), "%"),
+                }, onPointerDown: function () {
                     var _a;
                     setColorDotActive(true);
                     (_a = colorDotRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -229,5 +216,7 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
                 updateOpacitySlider(values[0], true);
             }, onUpdate: function (values) {
                 updateOpacitySlider(values[0], false);
-            }, min: 0, max: 1, step: 0.01, style: opacitySliderStyle }))));
+            }, min: 0, max: 1, step: 0.01, style: {
+                '--iui-color-picker-selected-color': hueColorString,
+            } }))));
 });

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" | "aria-disabled" | "children" | "role" | "className" | "onClick" | "accessKey" | "onPointerDown" | "draggable" | "hidden" | "lang" | "translate" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "onFocus" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "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" | "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" | "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" | "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" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "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" | "isActive"> & React.RefAttributes<HTMLDivElement>>;
 export default ColorSwatch;

package/cjs/core/ColorPicker/ColorSwatch.js

@@ -49,11 +49,6 @@ exports.ColorSwatch = react_1.default.forwardRef(function (props, ref) {
             ? color
             : (0, ColorPicker_1.getColorValue)(color).toHslString(true);
     }, [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, "--iui-color-swatch-background: ".concat(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)));
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-color-swatch', { 'iui-active': isActive }, className), style: __assign({ '--iui-color-swatch-background': colorString }, style), onClick: onClick, tabIndex: isActive ? 0 : -1, "aria-selected": isActive, ref: ref }, rest)));
 });
 exports.default = exports.ColorSwatch;

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

@@ -3,5 +3,5 @@ import { PopoverProps } from '../utils';
 declare type ComboBoxDropdownProps = PopoverProps & {
     children: JSX.Element;
 };
-export declare const ComboBoxDropdown: React.ForwardRefExoticComponent<Pick<ComboBoxDropdownProps, "disabled" | "children" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "plugins" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "role" | "theme" | "zIndex" | "className" | "singleton" | "reference"> & React.RefAttributes<Element>>;
+export declare const ComboBoxDropdown: React.ForwardRefExoticComponent<Pick<ComboBoxDropdownProps, "disabled" | "theme" | "className" | "role" | "children" | "plugins" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "zIndex" | "singleton" | "reference"> & React.RefAttributes<Element>>;
 export {};

package/cjs/core/ComboBox/ComboBoxMenu.js

@@ -38,7 +38,7 @@ var utils_1 = require("../utils");
 var helpers_1 = require("./helpers");
 var VirtualizedComboBoxMenu = react_1.default.forwardRef(function (_a, forwardedRef) {
     var _b, _c, _d;
-    var children = _a.children, style = _a.style, rest = __rest(_a, ["children", "style"]);
+    var children = _a.children, className = _a.className, style = _a.style, rest = __rest(_a, ["children", "className", "style"]);
     var _e = (0, utils_1.useSafeContext)(helpers_1.ComboBoxStateContext), minWidth = _e.minWidth, id = _e.id, filteredOptions = _e.filteredOptions, getMenuItem = _e.getMenuItem, focusedIndex = _e.focusedIndex;
     var menuRef = (0, utils_1.useSafeContext)(helpers_1.ComboBoxRefsContext).menuRef;
     var virtualItemRenderer = react_1.default.useCallback(function (index) {
@@ -68,11 +68,10 @@ var VirtualizedComboBoxMenu = react_1.default.forwardRef(function (_a, forwarded
     var styles = react_1.default.useMemo(function () { return ({
         minWidth: minWidth,
         maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"),
-        maxHeight: 315,
     }); }, [minWidth]);
     return (react_1.default.createElement(Surface_1.Surface, __assign({ elevation: 1, style: __assign(__assign(__assign({}, styles), overflowY), style) }, rest),
         react_1.default.createElement("div", __assign({}, outerProps),
-            react_1.default.createElement(Menu_1.Menu, { id: "".concat(id, "-list"), setFocus: false, role: 'listbox', ref: (0, utils_1.mergeRefs)(menuRef, innerProps.ref, forwardedRef), style: innerProps.style }, visibleChildren))));
+            react_1.default.createElement(Menu_1.Menu, { id: "".concat(id, "-list"), setFocus: false, role: 'listbox', ref: (0, utils_1.mergeRefs)(menuRef, innerProps.ref, forwardedRef), className: (0, classnames_1.default)('iui-scroll', className), style: innerProps.style }, visibleChildren))));
 });
 exports.ComboBoxMenu = react_1.default.forwardRef(function (props, forwardedRef) {
     var className = props.className, style = props.style, rest = __rest(props, ["className", "style"]);
@@ -82,7 +81,6 @@ exports.ComboBoxMenu = react_1.default.forwardRef(function (props, forwardedRef)
     var styles = react_1.default.useMemo(function () { return ({
         minWidth: minWidth,
         maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"),
-        maxHeight: 315,
     }); }, [minWidth]);
     return (react_1.default.createElement(react_1.default.Fragment, null, !enableVirtualization ? (react_1.default.createElement(Menu_1.Menu, __assign({ id: "".concat(id, "-list"), style: __assign(__assign({}, styles), style), setFocus: false, role: 'listbox', ref: refs, className: (0, classnames_1.default)('iui-scroll', className) }, rest))) : (react_1.default.createElement(VirtualizedComboBoxMenu, __assign({ ref: forwardedRef }, props)))));
 });

package/cjs/core/Dialog/Dialog.d.ts

@@ -29,10 +29,10 @@ export declare type DialogProps = {
  *   </Dialog.Main>
  * </Dialog>
  */
-export declare const Dialog: React.ForwardRefExoticComponent<Pick<DialogProps, "onClose" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnExternalClick" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>> & {
-    Backdrop: React.ForwardRefExoticComponent<Pick<import("./DialogBackdrop").DialogBackdropProps, "onClose" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "isVisible" | "isDismissible" | "closeOnExternalClick" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
-    Main: React.ForwardRefExoticComponent<Pick<import("./DialogMain").DialogMainProps, "onClose" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "styleType" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
-    TitleBar: React.ForwardRefExoticComponent<Pick<import("./DialogTitleBar").DialogTitleBarProps, "onClose" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "isDismissible" | "isDraggable" | "titleText"> & React.RefAttributes<HTMLDivElement>> & {
+export declare const Dialog: React.ForwardRefExoticComponent<Pick<DialogProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnExternalClick" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>> & {
+    Backdrop: React.ForwardRefExoticComponent<Pick<import("./DialogBackdrop").DialogBackdropProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "isVisible" | "isDismissible" | "closeOnExternalClick" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
+    Main: React.ForwardRefExoticComponent<Pick<import("./DialogMain").DialogMainProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "styleType" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
+    TitleBar: React.ForwardRefExoticComponent<Pick<import("./DialogTitleBar").DialogTitleBarProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "isDismissible" | "isDraggable" | "titleText"> & React.RefAttributes<HTMLDivElement>> & {
         Title: React.ForwardRefExoticComponent<Pick<import("./DialogTitleBarTitle").DialogTitleBarTitleProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
     };
     Content: React.ForwardRefExoticComponent<Pick<import("./DialogContent").DialogContentProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;

package/cjs/core/Dialog/Dialog.js

@@ -80,7 +80,7 @@ exports.Dialog = Object.assign(react_1.default.forwardRef(function (props, ref)
             relativeTo: relativeTo,
             dialogRootRef: dialogRootRef,
         } },
-        react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-dialog-wrapper', className), ref: refs, style: __assign({ position: relativeTo === 'container' ? 'absolute' : 'fixed' }, style) }, rest), children)));
+        react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: refs, style: __assign({}, style) }, rest), children)));
 }), {
     Backdrop: DialogBackdrop_1.DialogBackdrop,
     Main: DialogMain_1.DialogMain,

package/cjs/core/Dialog/DialogBackdrop.d.ts

@@ -8,5 +8,5 @@ export declare type DialogBackdropProps = BackdropProps & Pick<DialogContextProp
  * @example
  * <Dialog.Backdrop />
  */
-export declare const DialogBackdrop: React.ForwardRefExoticComponent<Pick<DialogBackdropProps, "onClose" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "isVisible" | "isDismissible" | "closeOnExternalClick" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogBackdrop: React.ForwardRefExoticComponent<Pick<DialogBackdropProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "isVisible" | "isDismissible" | "closeOnExternalClick" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
 export default DialogBackdrop;

package/cjs/core/Dialog/DialogBackdrop.js

@@ -34,6 +34,7 @@ var react_1 = __importDefault(require("react"));
 var Backdrop_1 = require("../Backdrop");
 var utils_1 = require("../utils");
 var DialogContext_1 = require("./DialogContext");
+var classnames_1 = __importDefault(require("classnames"));
 /**
  * Backdrop component for dialog. Recommended to be used with `Dialog`
  * then its visibility is being controlled by dialog's `isOpen` prop.
@@ -42,7 +43,7 @@ var DialogContext_1 = require("./DialogContext");
  */
 exports.DialogBackdrop = react_1.default.forwardRef(function (props, ref) {
     var dialogContext = (0, DialogContext_1.useDialogContext)();
-    var _a = props.isVisible, isVisible = _a === void 0 ? dialogContext.isOpen : _a, _b = props.isDismissible, isDismissible = _b === void 0 ? dialogContext.isDismissible : _b, _c = props.onClose, onClose = _c === void 0 ? dialogContext.onClose : _c, _d = props.closeOnExternalClick, closeOnExternalClick = _d === void 0 ? dialogContext.closeOnExternalClick : _d, _e = props.relativeTo, relativeTo = _e === void 0 ? dialogContext.relativeTo : _e, onMouseDown = props.onMouseDown, style = props.style, rest = __rest(props, ["isVisible", "isDismissible", "onClose", "closeOnExternalClick", "relativeTo", "onMouseDown", "style"]);
+    var _a = props.isVisible, isVisible = _a === void 0 ? dialogContext.isOpen : _a, _b = props.isDismissible, isDismissible = _b === void 0 ? dialogContext.isDismissible : _b, _c = props.onClose, onClose = _c === void 0 ? dialogContext.onClose : _c, _d = props.closeOnExternalClick, closeOnExternalClick = _d === void 0 ? dialogContext.closeOnExternalClick : _d, _e = props.relativeTo, relativeTo = _e === void 0 ? dialogContext.relativeTo : _e, onMouseDown = props.onMouseDown, className = props.className, style = props.style, rest = __rest(props, ["isVisible", "isDismissible", "onClose", "closeOnExternalClick", "relativeTo", "onMouseDown", "className", "style"]);
     var backdropRef = react_1.default.useRef(null);
     var refs = (0, utils_1.useMergedRefs)(backdropRef, ref);
     var handleMouseDown = function (event) {
@@ -56,6 +57,8 @@ exports.DialogBackdrop = react_1.default.forwardRef(function (props, ref) {
         }
         onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
     };
-    return (react_1.default.createElement(Backdrop_1.Backdrop, __assign({ isVisible: isVisible, ref: refs, onMouseDown: handleMouseDown, style: __assign({ pointerEvents: 'auto', position: relativeTo === 'container' ? 'absolute' : 'fixed' }, style) }, rest)));
+    return (react_1.default.createElement(Backdrop_1.Backdrop, __assign({ isVisible: isVisible, className: (0, classnames_1.default)({
+            'iui-backdrop-fixed': relativeTo === 'viewport',
+        }, className), ref: refs, onMouseDown: handleMouseDown, style: __assign({ pointerEvents: 'auto' }, style) }, rest)));
 });
 exports.default = exports.DialogBackdrop;

package/cjs/core/Dialog/DialogMain.d.ts

@@ -32,5 +32,5 @@ export declare type DialogMainProps = {
  *   </Dialog.ButtonBar>
  * </Dialog.Main>
  */
-export declare const DialogMain: React.ForwardRefExoticComponent<Pick<DialogMainProps, "onClose" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "styleType" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogMain: React.ForwardRefExoticComponent<Pick<DialogMainProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "styleType" | "setFocus" | "isOpen" | "isDismissible" | "isDraggable" | "closeOnEsc" | "trapFocus" | "preventDocumentScroll" | "isResizable" | "relativeTo"> & React.RefAttributes<HTMLDivElement>>;
 export default DialogMain;

package/cjs/core/Dialog/DialogMain.js

@@ -65,6 +65,7 @@ exports.DialogMain = react_1.default.forwardRef(function (props, ref) {
     var _l = react_1.default.useState(), style = _l[0], setStyle = _l[1];
     var dialogRef = react_1.default.useRef(null);
     var refs = (0, utils_1.useMergedRefs)(dialogRef, ref);
+    var hasBeenResized = react_1.default.useRef(false);
     // Focuses dialog when opened and brings back focus to the previously focused element when closed.
     var previousFocusedElement = react_1.default.useRef();
     var setFocusRef = (0, utils_1.useLatestRef)(setFocus);
@@ -150,7 +151,12 @@ exports.DialogMain = react_1.default.forwardRef(function (props, ref) {
             'iui-dialog-visible': isOpen,
             'iui-dialog-draggable': isDraggable,
         }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, style: __assign(__assign({ transform: transform, overflow: 'unset' }, style), propStyle) }, rest),
-        isResizable && (react_1.default.createElement(utils_1.Resizer, { elementRef: dialogRef, containerRef: dialogContext.dialogRootRef, onResizeEnd: setResizeStyle })),
+        isResizable && (react_1.default.createElement(utils_1.Resizer, { elementRef: dialogRef, containerRef: dialogContext.dialogRootRef, onResizeStart: function () {
+                if (!hasBeenResized.current) {
+                    hasBeenResized.current = true;
+                    setResizeStyle({ maxWidth: '100%' });
+                }
+            }, onResizeEnd: setResizeStyle })),
         children));
     return (react_1.default.createElement(react_transition_group_1.CSSTransition, { in: isOpen, classNames: 'iui-dialog-animation', timeout: { exit: 600 }, unmountOnExit: true, nodeRef: dialogRef },
         react_1.default.createElement(DialogDragContext_1.DialogDragContext.Provider, { value: { onPointerDown: handlePointerDown } },

package/cjs/core/Dialog/DialogTitleBar.d.ts

@@ -28,7 +28,7 @@ export declare type DialogTitleBarProps = {
  *   </IconButton>
  * </Dialog.TitleBar>
  */
-export declare const DialogTitleBar: React.ForwardRefExoticComponent<Pick<DialogTitleBarProps, "onClose" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "isDismissible" | "isDraggable" | "titleText"> & React.RefAttributes<HTMLDivElement>> & {
+export declare const DialogTitleBar: React.ForwardRefExoticComponent<Pick<DialogTitleBarProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "onClose" | "isDismissible" | "isDraggable" | "titleText"> & React.RefAttributes<HTMLDivElement>> & {
     Title: React.ForwardRefExoticComponent<Pick<import("./DialogTitleBarTitle").DialogTitleBarTitleProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
 };
 export default DialogTitleBar;

package/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -45,11 +45,10 @@ require("@itwin/itwinui-css/css/expandable-block.css");
  * <ExpandableBlock title='Block with icon' endIcon={<SvgPlaceholder />}>Content</ExpandableBlock>
  */
 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, _d = props.styleType, styleType = _d === void 0 ? 'default' : _d, rest = __rest(props, ["caption", "children", "className", "title", "onToggle", "style", "isExpanded", "endIcon", "status", "size", "styleType"]);
+    var caption = props.caption, children = props.children, className = props.className, title = props.title, onToggle = props.onToggle, style = props.style, _a = props.isExpanded, isExpanded = _a === void 0 ? false : _a, endIcon = props.endIcon, status = props.status, _b = props.size, size = _b === void 0 ? 'default' : _b, _c = props.styleType, styleType = _c === void 0 ? 'default' : _c, 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 _e = react_1.default.useState(isExpanded), expanded = _e[0], setExpanded = _e[1];
+    var _d = react_1.default.useState(isExpanded), expanded = _d[0], setExpanded = _d[1];
     react_1.default.useEffect(function () {
         setExpanded(isExpanded);
     }, [isExpanded]);
@@ -77,7 +76,8 @@ var ExpandableBlock = function (props) {
                 caption && react_1.default.createElement("div", { className: 'iui-caption' }, caption)),
             icon &&
                 react_1.default.cloneElement(icon, {
-                    className: (0, classnames_1.default)('iui-status-icon', (_a = {}, _a["iui-".concat(status)] = !!status, _a), icon.props.className),
+                    className: (0, classnames_1.default)('iui-status-icon', icon.props.className),
+                    'data-iui-icon-color': status,
                 })),
         react_1.default.createElement(utils_1.WithCSSTransition, { in: expanded },
             react_1.default.createElement("div", { className: 'iui-expandable-content' },

package/cjs/core/Header/Header.d.ts

@@ -26,8 +26,12 @@ export declare type HeaderProps = {
      */
     breadcrumbs?: React.ReactNode;
     /**
-     * Content displayed to the left of the user icon
+     * Content displayed to the left of the `menuItems`
      * (expects array of `IconButton`, potentially wrapped in a `DropdownMenu`)
+     *
+     * Since v2, `userIcon` is deprecated.
+     * The new recommendation is to add `Avatar` (Called `UserIcon` before v2) to the end of `actions`.
+     * `Avatar` can be wrapped in `IconButton` and `DropdownMenu` if needed.
      * @example
      * [
      *  <IconButton><SvgNotification /></IconButton>,
@@ -35,6 +39,11 @@ export declare type HeaderProps = {
      *   <IconButton>
      *    <SvgHelpCircularHollow />
      *   </IconButton>
+     *  </DropdownMenu>,
+     *  <DropdownMenu menuItems={...}>
+     *    <IconButton styleType='borderless'>
+     *      <Avatar ... />
+     *    </IconButton>
      *  </DropdownMenu>
      * ]
      */
@@ -44,7 +53,10 @@ export declare type HeaderProps = {
      */
     children?: React.ReactNode;
     /**
+     * @deprecated Since v2, add your `UserIcon` (called `Avatar` since v2) to the end of `actions` itself
+     *
      * User icon
+     *
      * It's size and transition will be handled between slim/not slim state of the
      * Header
      * (expects `UserIcon`, can be wrapped in `IconButton` and `DropdownMenu` if needed)
@@ -89,15 +101,13 @@ export declare type HeaderProps = {
  *    <IconButton>
  *     <SvgHelpCircularHollow />
  *    </IconButton>
- *   </DropdownMenu>
- *  ]}
- *  userIcon={
+ *   </DropdownMenu>,
  *   <DropdownMenu menuItems={...}>
  *    <IconButton styleType='borderless'>
- *     <UserIcon ... />
+ *     <Avatar ... />
  *    </IconButton>
  *   </DropdownMenu>
- *  }
+ *  ]}
  *  isSlim
  * />
  */

package/cjs/core/Header/Header.js

@@ -57,15 +57,13 @@ var defaultTranslations = {
  *    <IconButton>
  *     <SvgHelpCircularHollow />
  *    </IconButton>
- *   </DropdownMenu>
- *  ]}
- *  userIcon={
+ *   </DropdownMenu>,
  *   <DropdownMenu menuItems={...}>
  *    <IconButton styleType='borderless'>
- *     <UserIcon ... />
+ *     <Avatar ... />
  *    </IconButton>
  *   </DropdownMenu>
- *  }
+ *  ]}
  *  isSlim
  * />
  */
@@ -74,12 +72,12 @@ var Header = function (props) {
     (0, utils_1.useTheme)();
     var headerTranslations = __assign(__assign({}, defaultTranslations), translatedStrings);
     return (react_1.default.createElement("header", __assign({ className: (0, classnames_1.default)('iui-page-header', { 'iui-slim': isSlim }, className) }, rest),
-        react_1.default.createElement("div", { className: 'iui-left' },
+        react_1.default.createElement("div", { className: 'iui-page-header-left' },
             appLogo,
-            breadcrumbs && react_1.default.createElement("div", { className: 'iui-divider' }),
+            breadcrumbs && react_1.default.createElement("div", { className: 'iui-page-header-divider' }),
             breadcrumbs),
-        children && react_1.default.createElement("div", { className: 'iui-center' }, children),
-        react_1.default.createElement("div", { className: 'iui-right' },
+        children && react_1.default.createElement("div", { className: 'iui-page-header-center' }, children),
+        react_1.default.createElement("div", { className: 'iui-page-header-right' },
             actions,
             userIcon,
             menuItems && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { menuItems: menuItems },

package/cjs/core/Header/HeaderBasicButton.d.ts

@@ -0,0 +1,6 @@
+import { PolymorphicForwardRefComponent } from '../utils';
+import { ButtonProps } from '../Buttons';
+export declare type HeaderBasicButtonProps = ButtonProps;
+declare type HeaderBasicButtonComponent = PolymorphicForwardRefComponent<'button', HeaderBasicButtonProps>;
+export declare const HeaderBasicButton: HeaderBasicButtonComponent;
+export default HeaderBasicButton;

package/cjs/core/Header/HeaderBasicButton.js

@@ -0,0 +1,52 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderBasicButton = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importDefault(require("react"));
+var utils_1 = require("../utils");
+exports.HeaderBasicButton = react_1.default.forwardRef(function (props, ref) {
+    var onClick = props.onClick, className = props.className, children = props.children, style = props.style, _a = props.type, type = _a === void 0 ? 'button' : _a, startIcon = props.startIcon, endIcon = props.endIcon, _b = props.as, Element = _b === void 0 ? 'button' : _b, styleType = props.styleType, size = props.size, rest = __rest(props, ["onClick", "className", "children", "style", "type", "startIcon", "endIcon", "as", "styleType", "size"]);
+    styleType; // To omit and prevent eslint error.
+    size; // To omit and prevent eslint error.
+    (0, utils_1.useTheme)();
+    return (react_1.default.createElement(Element, __assign({ className: (0, classnames_1.default)('iui-header-breadcrumb-button', className), onClick: onClick, ref: ref, type: type, style: style }, rest),
+        startIcon &&
+            react_1.default.cloneElement(startIcon, {
+                className: startIcon.props.className,
+            }),
+        children,
+        endIcon &&
+            react_1.default.cloneElement(endIcon, {
+                className: endIcon.props.className,
+            })));
+});
+exports.default = exports.HeaderBasicButton;

package/cjs/core/Header/HeaderBreadcrumbs.js

@@ -56,10 +56,12 @@ require("@itwin/itwinui-css/css/header.css");
 var HeaderBreadcrumbs = function (props) {
     var items = props.items, rest = __rest(props, ["items"]);
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement("nav", __assign({ "aria-label": 'breadcrumbs' }, rest), items.reduce(function (previous, current, index) { return __spreadArray(__spreadArray([], previous, true), [
-        current,
-        index !== items.length - 1 && (react_1.default.createElement(ChevronRight_1.default, { key: "chevron".concat(index), "aria-hidden": true, className: 'iui-chevron' })),
-    ], false); }, [])));
+    return (react_1.default.createElement("nav", __assign({ "aria-label": 'breadcrumbs', className: 'iui-header-breadcrumbs' }, rest),
+        react_1.default.createElement("ol", { className: 'iui-header-breadcrumbs-list' }, items.reduce(function (previous, current, index) { return __spreadArray(__spreadArray([], previous, true), [
+            current,
+            index !== items.length - 1 && (react_1.default.createElement("li", { className: 'iui-breadcrumbs-separator', key: index },
+                react_1.default.createElement(ChevronRight_1.default, { key: "chevron".concat(index), "aria-hidden": true, className: 'iui-chevron' }))),
+        ], false); }, []))));
 };
 exports.HeaderBreadcrumbs = HeaderBreadcrumbs;
 exports.default = exports.HeaderBreadcrumbs;

package/cjs/core/Header/HeaderButton.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import { ButtonProps, DropdownButtonProps } from '../Buttons';
+import { ButtonProps } from '../Buttons';
 import { PolymorphicForwardRefComponent } from '../utils';
 import '@itwin/itwinui-css/css/header.css';
+import { HeaderDropdownButtonProps } from './HeaderDropdownButton';
 export declare type HeaderButtonProps = {
     /**
      * Main label of the header button.
@@ -16,7 +17,7 @@ export declare type HeaderButtonProps = {
      * @default false
      */
     isActive?: boolean;
-} & Partial<Pick<DropdownButtonProps, 'menuItems'>> & Pick<ButtonProps, 'startIcon' | 'endIcon'>;
+} & Partial<Pick<HeaderDropdownButtonProps, 'menuItems'>> & Pick<ButtonProps, 'startIcon' | 'endIcon'>;
 declare type HeaderButtonComponent = PolymorphicForwardRefComponent<'button', HeaderButtonProps>;
 /**
  * Header button that handles slim state of the `Header` it's in.