@itwin/itwinui-react 1.30.0 → 1.31.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [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/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.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.js

@@ -241,42 +241,47 @@ var ComboBox = function (props) {
         selectedValue,
         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/Select/Select.js

@@ -36,6 +36,7 @@ var DropdownMenu_1 = require("../DropdownMenu");
 var MenuItem_1 = require("../Menu/MenuItem");
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/inputs.css");
+var CaretDownSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall"));
 /**
  * Select component to select value from options.
  * Generic type is used for value. It prevents you from mistakenly using other types in `options`, `value` and `onChange`.
@@ -97,6 +98,7 @@ var Select = function (props) {
     var _f = react_1.default.useState(0), minWidth = _f[0], setMinWidth = _f[1];
     var toggle = function () { return setIsOpen(function (open) { return !open; }); };
     var selectRef = react_1.default.useRef(null);
+    var toggleButtonRef = react_1.default.useRef(null);
     var onShowHandler = react_1.default.useCallback(function (instance) {
         setIsOpen(true);
         onShow === null || onShow === void 0 ? void 0 : onShow(instance);
@@ -143,13 +145,20 @@ var Select = function (props) {
         }
         return options.find(function (option) { return option.value === value; });
     }, [options, value]);
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-select', (_a = {}, _a["iui-" + size] = !!size, _a), className), "aria-expanded": isOpen, "aria-haspopup": 'listbox', style: style }, rest),
-        react_1.default.createElement(DropdownMenu_1.DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: (0, classnames_1.default)('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(" + minWidth * 2 + "px, 90vw)", maxHeight: "300px" }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen }),
-            react_1.default.createElement("div", { ref: selectRef, className: (0, classnames_1.default)('iui-select-button', {
-                    'iui-placeholder': !selectedItem && !!placeholder,
-                    'iui-disabled': disabled,
-                    'iui-active': isOpen,
-                }), onClick: function () { return !disabled && toggle(); }, onKeyDown: function (e) { return !disabled && onKeyDown(e, toggle); }, tabIndex: !disabled ? 0 : undefined },
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-input-with-icon', className), "aria-expanded": isOpen, "aria-haspopup": 'listbox', style: style }, rest),
+        react_1.default.createElement(DropdownMenu_1.DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: (0, classnames_1.default)('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(" + minWidth * 2 + "px, 90vw)", maxHeight: "300px" }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { 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);
+                }
+            } }),
+            react_1.default.createElement("div", { ref: selectRef, className: (0, classnames_1.default)('iui-select-button', (_a = {
+                        'iui-placeholder': !selectedItem && !!placeholder,
+                        'iui-disabled': disabled
+                    },
+                    _a["iui-" + size] = !!size,
+                    _a)), onClick: function () { return !disabled && toggle(); }, onKeyDown: function (e) { return !disabled && onKeyDown(e, toggle); }, tabIndex: !disabled ? 0 : undefined },
                 !selectedItem && react_1.default.createElement("span", { className: 'iui-content' }, placeholder),
                 selectedItem &&
                     selectedItemRenderer &&
@@ -159,7 +168,13 @@ var Select = function (props) {
                         react_1.default.cloneElement(selectedItem.icon, {
                             className: (0, classnames_1.default)(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon.props.className, 'iui-icon'),
                         }),
-                    react_1.default.createElement("span", { className: 'iui-content' }, selectedItem.label)))))));
+                    react_1.default.createElement("span", { className: 'iui-content' }, selectedItem.label))))),
+        react_1.default.createElement("span", { ref: toggleButtonRef, className: (0, classnames_1.default)('iui-end-icon', {
+                'iui-actionable': !disabled,
+                'iui-disabled': disabled,
+                'iui-open': isOpen,
+            }), onClick: function () { return !disabled && toggle(); } },
+            react_1.default.createElement(CaretDownSmall_1.default, { "aria-hidden": true }))));
 };
 exports.Select = Select;
 exports.default = exports.Select;

package/cjs/core/Table/TablePaginator.js

@@ -85,11 +85,10 @@ var TablePaginator = function (props) {
     var buttonSize = size != 'default' ? 'small' : undefined;
     var pageButton = react_1.default.useCallback(function (index, tabIndex) {
         if (tabIndex === void 0) { tabIndex = index === focusedIndex ? 0 : -1; }
-        return (react_1.default.createElement("div", { key: index },
-            react_1.default.createElement("button", { className: (0, classnames_1.default)('iui-paginator-page-button', {
-                    'iui-active': index === currentPage,
-                    'iui-paginator-page-button-small': buttonSize === 'small',
-                }), onClick: function () { return onPageChange(index); }, "aria-current": index === currentPage, "aria-label": localization.goToPageLabel(index + 1), tabIndex: tabIndex }, index + 1)));
+        return (react_1.default.createElement("button", { key: index, className: (0, classnames_1.default)('iui-paginator-page-button', {
+                'iui-active': index === currentPage,
+                'iui-paginator-page-button-small': buttonSize === 'small',
+            }), onClick: function () { return onPageChange(index); }, "aria-current": index === currentPage, "aria-label": localization.goToPageLabel(index + 1), tabIndex: tabIndex }, index + 1));
     }, [focusedIndex, currentPage, localization, buttonSize, onPageChange]);
     var totalPagesCount = Math.ceil(totalRowsCount / pageSize);
     var pageList = react_1.default.useMemo(function () {
@@ -151,10 +150,9 @@ var TablePaginator = function (props) {
     var hasNoRows = totalPagesCount === 0;
     var showPagesList = totalPagesCount > 1 || isLoading;
     var showPageSizeList = pageSizeList && onPageSizeChange && !!totalRowsCount;
-    var ellipsis = (react_1.default.createElement("div", null,
-        react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-paginator-ellipsis', {
-                'iui-paginator-ellipsis-small': size === 'small',
-            }) }, "\u2026")));
+    var ellipsis = (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-paginator-ellipsis', {
+            'iui-paginator-ellipsis-small': size === 'small',
+        }) }, "\u2026"));
     var noRowsContent = (react_1.default.createElement(react_1.default.Fragment, null, isLoading ? (react_1.default.createElement(ProgressIndicators_1.ProgressRadial, { indeterminate: true, size: 'small' })) : (react_1.default.createElement(Buttons_1.Button, { styleType: 'borderless', disabled: true, size: buttonSize }, "1"))));
     if (!showPagesList && !showPageSizeList) {
         return null;

package/cjs/core/Tile/Tile.js

@@ -88,7 +88,6 @@ var Tile = function (props) {
             moreOptions && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: function (close) {
                     return moreOptions.map(function (option) {
                         return react_1.default.cloneElement(option, {
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             onClick: function (value) {
                                 var _a, _b;
                                 close();
@@ -97,10 +96,11 @@ var Tile = function (props) {
                         });
                     });
                 } },
-                react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', className: (0, classnames_1.default)('iui-tile-more-options', {
+                react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tile-more-options', {
                         'iui-visible': isMenuVisible,
-                    }), "aria-label": 'More options' },
-                    react_1.default.createElement(More_1.default, null)))),
+                    }) },
+                    react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options' },
+                        react_1.default.createElement(More_1.default, null))))),
             children),
         buttons && react_1.default.createElement("div", { className: 'iui-tile-buttons' }, buttons)));
 };

package/esm/core/Badge/Badge.js

@@ -60,8 +60,8 @@ export var Badge = function (props) {
     var backgroundColor = props.backgroundColor, style = props.style, className = props.className, children = props.children, rest = __rest(props, ["backgroundColor", "style", "className", "children"]);
     useTheme();
     var _style = backgroundColor &&
-        ((_c = (_b = (_a = 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 = 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.createElement("span", __assign({ className: cx('iui-badge', className), style: _style }, rest), children));
 };
 export default Badge;

package/esm/core/ColorPicker/ColorBuilder.js

@@ -63,21 +63,20 @@ export var ColorBuilder = React.forwardRef(function (props, ref) {
     ]);
     var _p = React.useState(false), colorDotActive = _p[0], setColorDotActive = _p[1];
     var hueColorString = hueSliderColor.toHexString();
-    var colorSquareStyle = ((_c = (_b = (_a = 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 = 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 = 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 = 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 = 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 = 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/esm/core/ColorPicker/ColorSwatch.js

@@ -45,8 +45,8 @@ export var ColorSwatch = React.forwardRef(function (props, ref) {
     }, [color]);
     var _style = React.useMemo(function () {
         var _a, _b, _c;
-        return ((_c = (_b = (_a = 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 = 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.createElement("div", __assign({ className: cx('iui-color-swatch', { 'iui-active': isActive }, className), style: _style, onClick: onClick, tabIndex: isActive ? 0 : -1, "aria-selected": isActive, ref: ref }, rest)));
 });

package/esm/core/ComboBox/ComboBox.js

@@ -235,41 +235,46 @@ export var ComboBox = function (props) {
         selectedValue,
         memoizedItems,
     ]);
-    return (React.createElement(InputContainer, __assign({ className: className, isIconInline: true, icon: React.useMemo(function () { return (React.createElement("span", { ref: toggleButtonRef, className: cx({
-                '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.createElement(SvgCaretDownSmall, { "aria-hidden": true }))); }, [inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, isOpen]) }, rest, { id: id }),
-        React.createElement(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.createElement(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.createElement(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.createElement(InputContainer, __assign({ className: className, isIconInline: true }, rest, { id: id }),
+        React.createElement("div", { className: 'iui-input-with-icon' },
+            React.createElement(Popover, __assign({ placement: 'bottom-start', visible: isOpen, onClickOutside: function (_, _a) {
+                    var _b;
+                    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.createElement(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.createElement(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.createElement("span", { ref: toggleButtonRef, className: cx('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.createElement(SvgCaretDownSmall, { "aria-hidden": true })))));
 };
 export default ComboBox;

package/esm/core/Select/Select.js

@@ -30,6 +30,7 @@ import { DropdownMenu } from '../DropdownMenu';
 import { MenuItem } from '../Menu/MenuItem';
 import { useTheme } from '../utils';
 import '@itwin/itwinui-css/css/inputs.css';
+import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall';
 /**
  * Select component to select value from options.
  * Generic type is used for value. It prevents you from mistakenly using other types in `options`, `value` and `onChange`.
@@ -91,6 +92,7 @@ export var Select = function (props) {
     var _f = React.useState(0), minWidth = _f[0], setMinWidth = _f[1];
     var toggle = function () { return setIsOpen(function (open) { return !open; }); };
     var selectRef = React.useRef(null);
+    var toggleButtonRef = React.useRef(null);
     var onShowHandler = React.useCallback(function (instance) {
         setIsOpen(true);
         onShow === null || onShow === void 0 ? void 0 : onShow(instance);
@@ -137,13 +139,20 @@ export var Select = function (props) {
         }
         return options.find(function (option) { return option.value === value; });
     }, [options, value]);
-    return (React.createElement("div", __assign({ className: cx('iui-select', (_a = {}, _a["iui-" + size] = !!size, _a), className), "aria-expanded": isOpen, "aria-haspopup": 'listbox', style: style }, rest),
-        React.createElement(DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: cx('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(" + minWidth * 2 + "px, 90vw)", maxHeight: "300px" }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen }),
-            React.createElement("div", { ref: selectRef, className: cx('iui-select-button', {
-                    'iui-placeholder': !selectedItem && !!placeholder,
-                    'iui-disabled': disabled,
-                    'iui-active': isOpen,
-                }), onClick: function () { return !disabled && toggle(); }, onKeyDown: function (e) { return !disabled && onKeyDown(e, toggle); }, tabIndex: !disabled ? 0 : undefined },
+    return (React.createElement("div", __assign({ className: cx('iui-input-with-icon', className), "aria-expanded": isOpen, "aria-haspopup": 'listbox', style: style }, rest),
+        React.createElement(DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: cx('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(" + minWidth * 2 + "px, 90vw)", maxHeight: "300px" }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { 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);
+                }
+            } }),
+            React.createElement("div", { ref: selectRef, className: cx('iui-select-button', (_a = {
+                        'iui-placeholder': !selectedItem && !!placeholder,
+                        'iui-disabled': disabled
+                    },
+                    _a["iui-" + size] = !!size,
+                    _a)), onClick: function () { return !disabled && toggle(); }, onKeyDown: function (e) { return !disabled && onKeyDown(e, toggle); }, tabIndex: !disabled ? 0 : undefined },
                 !selectedItem && React.createElement("span", { className: 'iui-content' }, placeholder),
                 selectedItem &&
                     selectedItemRenderer &&
@@ -153,6 +162,12 @@ export var Select = function (props) {
                         React.cloneElement(selectedItem.icon, {
                             className: cx(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon.props.className, 'iui-icon'),
                         }),
-                    React.createElement("span", { className: 'iui-content' }, selectedItem.label)))))));
+                    React.createElement("span", { className: 'iui-content' }, selectedItem.label))))),
+        React.createElement("span", { ref: toggleButtonRef, className: cx('iui-end-icon', {
+                'iui-actionable': !disabled,
+                'iui-disabled': disabled,
+                'iui-open': isOpen,
+            }), onClick: function () { return !disabled && toggle(); } },
+            React.createElement(SvgCaretDownSmall, { "aria-hidden": true }))));
 };
 export default Select;

package/esm/core/Table/TablePaginator.js

@@ -79,11 +79,10 @@ export var TablePaginator = function (props) {
     var buttonSize = size != 'default' ? 'small' : undefined;
     var pageButton = React.useCallback(function (index, tabIndex) {
         if (tabIndex === void 0) { tabIndex = index === focusedIndex ? 0 : -1; }
-        return (React.createElement("div", { key: index },
-            React.createElement("button", { className: cx('iui-paginator-page-button', {
-                    'iui-active': index === currentPage,
-                    'iui-paginator-page-button-small': buttonSize === 'small',
-                }), onClick: function () { return onPageChange(index); }, "aria-current": index === currentPage, "aria-label": localization.goToPageLabel(index + 1), tabIndex: tabIndex }, index + 1)));
+        return (React.createElement("button", { key: index, className: cx('iui-paginator-page-button', {
+                'iui-active': index === currentPage,
+                'iui-paginator-page-button-small': buttonSize === 'small',
+            }), onClick: function () { return onPageChange(index); }, "aria-current": index === currentPage, "aria-label": localization.goToPageLabel(index + 1), tabIndex: tabIndex }, index + 1));
     }, [focusedIndex, currentPage, localization, buttonSize, onPageChange]);
     var totalPagesCount = Math.ceil(totalRowsCount / pageSize);
     var pageList = React.useMemo(function () {
@@ -145,10 +144,9 @@ export var TablePaginator = function (props) {
     var hasNoRows = totalPagesCount === 0;
     var showPagesList = totalPagesCount > 1 || isLoading;
     var showPageSizeList = pageSizeList && onPageSizeChange && !!totalRowsCount;
-    var ellipsis = (React.createElement("div", null,
-        React.createElement("span", { className: cx('iui-paginator-ellipsis', {
-                'iui-paginator-ellipsis-small': size === 'small',
-            }) }, "\u2026")));
+    var ellipsis = (React.createElement("span", { className: cx('iui-paginator-ellipsis', {
+            'iui-paginator-ellipsis-small': size === 'small',
+        }) }, "\u2026"));
     var noRowsContent = (React.createElement(React.Fragment, null, isLoading ? (React.createElement(ProgressRadial, { indeterminate: true, size: 'small' })) : (React.createElement(Button, { styleType: 'borderless', disabled: true, size: buttonSize }, "1"))));
     if (!showPagesList && !showPageSizeList) {
         return null;

package/esm/core/Tile/Tile.js

@@ -82,7 +82,6 @@ export var Tile = function (props) {
             moreOptions && (React.createElement(DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: function (close) {
                     return moreOptions.map(function (option) {
                         return React.cloneElement(option, {
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             onClick: function (value) {
                                 var _a, _b;
                                 close();
@@ -91,10 +90,11 @@ export var Tile = function (props) {
                         });
                     });
                 } },
-                React.createElement(IconButton, { styleType: 'borderless', size: 'small', className: cx('iui-tile-more-options', {
+                React.createElement("div", { className: cx('iui-tile-more-options', {
                         'iui-visible': isMenuVisible,
-                    }), "aria-label": 'More options' },
-                    React.createElement(SvgMore, null)))),
+                    }) },
+                    React.createElement(IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options' },
+                        React.createElement(SvgMore, null))))),
             children),
         buttons && React.createElement("div", { className: 'iui-tile-buttons' }, buttons)));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.30.0",
+  "version": "1.31.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -40,7 +40,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^0.45.0",
+    "@itwin/itwinui-css": "^0.47.0",
     "@itwin/itwinui-icons-react": "^1.5.0",
     "@itwin/itwinui-illustrations-react": "^1.0.1",
     "@tippyjs/react": "^4.2.5",