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

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # 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
+
+* **ButtonGroup:** Add new `overflowPlacement` prop to allow placing `overflowButton` at start ([#527](https://www.github.com/iTwin/iTwinUI-react/issues/527)) ([442ba87](https://www.github.com/iTwin/iTwinUI-react/commit/442ba87f8ba45240f07e8cacd9463cd95e5ec1e7))
+* **Table:** Added new `enableVirtualization` prop for row virtualization ([#236](https://www.github.com/iTwin/iTwinUI-react/issues/236)) ([178bb75](https://www.github.com/iTwin/iTwinUI-react/commit/178bb756bf14fd0f780433ca33ea2a151d4c1436))
+
+### Fixes
+
+* **Popover:** Prevent from adding 5px padding ([#534](https://www.github.com/iTwin/iTwinUI-react/issues/534)) ([fea4782](https://www.github.com/iTwin/iTwinUI-react/commit/fea47823ae730b3e9b2bab2e2ec75b1ba8101b27))
+* **Slider:** Handle pointermove events only when thumb is active ([#528](https://www.github.com/iTwin/iTwinUI-react/issues/528)) ([e41b53b](https://www.github.com/iTwin/iTwinUI-react/commit/e41b53b7ccda245f298bb33c6984f2431d917932))
+
+### [1.29.3](https://www.github.com/iTwin/iTwinUI-react/compare/v1.29.2...v1.29.3) (2022-01-26)
+
+### Fixes
+
+* **Radio:** Fix radio dot size ([#525](https://www.github.com/iTwin/iTwinUI-react/issues/525)) ([8d952b9](https://www.github.com/iTwin/iTwinUI-react/commit/8d952b91dc83d21881f7ecca323cab55f5403d90))
+
 ### [1.29.2](https://www.github.com/iTwin/iTwinUI-react/compare/v1.29.1...v1.29.2) (2022-01-24)
 
 ### Fixes

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/ButtonGroup/ButtonGroup.d.ts

@@ -6,13 +6,20 @@ export declare type ButtonGroupProps = {
      */
     children: React.ReactNode;
     /**
-     * If specified, this prop will be used to show a custom button as the last button
-     * when overflow happens, i.e. when there is not enough space to fit all the buttons.
+     * If specified, this prop will be used to show a custom button when overflow happens,
+     * i.e. when there is not enough space to fit all the buttons.
      *
      * Expects a function that takes the index of the first button that is overflowing (i.e. hidden)
      * and returns the `ReactNode` to render.
+     *
+     * The placement of this button can be controlled using the `overflowPlacement` prop.
      */
     overflowButton?: (firstOverflowingIndex: number) => React.ReactNode;
+    /**
+     * If `overflowButton` is specified, should it placed at the start or the end?
+     * @default 'end'
+     */
+    overflowPlacement?: 'start' | 'end';
 } & React.ComponentPropsWithRef<'div'>;
 /**
  * Group buttons together for common actions.
@@ -42,5 +49,5 @@ export declare type ButtonGroupProps = {
  *   {buttons}
  * </ButtonGroup>
  */
-export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<ButtonGroupProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "overflowButton"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<ButtonGroupProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "overflowButton" | "overflowPlacement"> & React.RefAttributes<HTMLDivElement>>;
 export default ButtonGroup;

package/cjs/core/ButtonGroup/ButtonGroup.js

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

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,
@@ -138,22 +137,31 @@ exports.ColorBuilder = react_1.default.forwardRef(function (props, ref) {
         }
     }, [colorDotActive, updateColorDot]);
     var handleSquarePointerUp = react_1.default.useCallback(function (event) {
+        if (!colorDotActive) {
+            return;
+        }
         updateSquareValue(event, 'onChange');
         setColorDotActive(false);
         event.preventDefault();
         event.stopPropagation();
-    }, [updateSquareValue]);
+    }, [colorDotActive, updateSquareValue]);
     (0, utils_1.useEventListener)('pointerup', handleSquarePointerUp, (_k = builderRef.current) === null || _k === void 0 ? void 0 : _k.ownerDocument);
     var handleSquarePointerMove = react_1.default.useCallback(function (event) {
+        if (!colorDotActive) {
+            return;
+        }
         event.preventDefault();
         event.stopPropagation();
         updateSquareValue(event, 'onUpdate');
-    }, [updateSquareValue]);
+    }, [colorDotActive, updateSquareValue]);
     (0, utils_1.useEventListener)('pointermove', handleSquarePointerMove, (_l = builderRef.current) === null || _l === void 0 ? void 0 : _l.ownerDocument);
     var handleSquarePointerLeave = react_1.default.useCallback(function (event) {
+        if (!colorDotActive) {
+            return;
+        }
         updateSquareValue(event, 'onChange');
         setColorDotActive(false);
-    }, [updateSquareValue]);
+    }, [colorDotActive, updateSquareValue]);
     (0, utils_1.useEventListener)('pointerleave', handleSquarePointerLeave, (_m = builderRef.current) === null || _m === void 0 ? void 0 : _m.ownerDocument);
     var keysPressed = react_1.default.useRef({}); // keep track of which keys are currently pressed
     // Arrow key navigation for color dot

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

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

package/cjs/core/Radio/Radio.js

@@ -58,7 +58,7 @@ exports.Radio = react_1.default.forwardRef(function (props, ref) {
         react_1.default.createElement("input", __assign({ disabled: disabled, type: 'radio', ref: refs }, rest)),
         react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-radio-dot', checkmarkClassName), style: checkmarkStyle },
             react_1.default.createElement("svg", { viewBox: '0 0 16 16', "aria-hidden": 'true', focusable: 'false' },
-                react_1.default.createElement("circle", { cx: '8', cy: '8', r: '6' }))),
+                react_1.default.createElement("circle", { cx: '8', cy: '8', r: '4' }))),
         label && react_1.default.createElement("span", { className: 'iui-label' }, label)));
 });
 exports.default = exports.Radio;

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

@@ -164,10 +164,13 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
         onChange,
     ]);
     var handlePointerMove = react_1.default.useCallback(function (event) {
+        if (activeThumbIndex === undefined) {
+            return;
+        }
         event.preventDefault();
         event.stopPropagation();
         updateThumbValue(event, 'onUpdate');
-    }, [updateThumbValue]);
+    }, [activeThumbIndex, updateThumbValue]);
     // function called by Thumb keyboard processing
     var onThumbValueChanged = react_1.default.useCallback(function (index, value) {
         if (currentValues[index] === value) {
@@ -182,11 +185,14 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
         setActiveThumbIndex(index);
     }, []);
     var handlePointerUp = react_1.default.useCallback(function (event) {
+        if (activeThumbIndex === undefined) {
+            return;
+        }
         updateThumbValue(event, 'onChange');
         setActiveThumbIndex(undefined);
         event.preventDefault();
         event.stopPropagation();
-    }, [updateThumbValue]);
+    }, [activeThumbIndex, updateThumbValue]);
     var handlePointerDownOnSlider = react_1.default.useCallback(function (event) {
         if (containerRef.current) {
             var percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX);

package/cjs/core/Table/Table.d.ts

@@ -56,6 +56,7 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
     isSelectable?: boolean;
     /**
      * Handler for rows selection. Must be memoized.
+     * This is triggered only by user initiated actions (i.e. data change will not call it).
      */
     onSelect?: (selectedData: T[] | undefined, tableState?: TableState<T>) => void;
     /**
@@ -160,6 +161,15 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
      * @default 'default'
      */
     styleType?: 'default' | 'zebra-rows';
+    /**
+     * Virtualization is used for the scrollable table body.
+     * Height on the table is required for virtualization to work.
+     * @example
+     * <Table enableVirtualization style={{height: 400}} {...} />
+     * @default false
+     * @beta
+     */
+    enableVirtualization?: boolean;
 } & Omit<CommonProps, 'title'>;
 /**
  * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).

package/cjs/core/Table/Table.js

@@ -46,6 +46,7 @@ var hooks_1 = require("./hooks");
 var actionHandlers_1 = require("./actionHandlers");
 var selectHandler_1 = require("./actionHandlers/selectHandler");
 var resizeHandler_1 = require("./actionHandlers/resizeHandler");
+var VirtualScroll_1 = __importDefault(require("../utils/components/VirtualScroll"));
 var singleRowSelectedAction = 'singleRowSelected';
 var tableResizeStartAction = 'tableResizeStart';
 var tableResizeEndAction = 'tableResizeEnd';
@@ -93,9 +94,9 @@ var tableResizeEndAction = 'tableResizeEnd';
  */
 var Table = function (props) {
     var _a;
-    var data = props.data, columns = props.columns, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _c = props.isSelectable, isSelectable = _c === void 0 ? false : _c, onSelect = props.onSelect, onRowClick = props.onRowClick, _d = props.isSortable, isSortable = _d === void 0 ? false : _d, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _e = props.intersectionMargin, intersectionMargin = _e === void 0 ? 300 : _e, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _f = props.density, density = _f === void 0 ? 'default' : _f, _g = props.selectSubRows, selectSubRows = _g === void 0 ? true : _g, getSubRows = props.getSubRows, _h = props.selectRowOnClick, selectRowOnClick = _h === void 0 ? true : _h, paginatorRenderer = props.paginatorRenderer, _j = props.pageSize, pageSize = _j === void 0 ? 25 : _j, _k = props.isResizable, isResizable = _k === void 0 ? false : _k, _l = props.styleType, styleType = _l === void 0 ? 'default' : _l, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType"]);
+    var data = props.data, columns = props.columns, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _c = props.isSelectable, isSelectable = _c === void 0 ? false : _c, onSelect = props.onSelect, onRowClick = props.onRowClick, _d = props.isSortable, isSortable = _d === void 0 ? false : _d, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _e = props.intersectionMargin, intersectionMargin = _e === void 0 ? 300 : _e, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _f = props.density, density = _f === void 0 ? 'default' : _f, _g = props.selectSubRows, selectSubRows = _g === void 0 ? true : _g, getSubRows = props.getSubRows, _h = props.selectRowOnClick, selectRowOnClick = _h === void 0 ? true : _h, paginatorRenderer = props.paginatorRenderer, _j = props.pageSize, pageSize = _j === void 0 ? 25 : _j, _k = props.isResizable, isResizable = _k === void 0 ? false : _k, _l = props.styleType, styleType = _l === void 0 ? 'default' : _l, _m = props.enableVirtualization, enableVirtualization = _m === void 0 ? false : _m, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization"]);
     (0, utils_1.useTheme)();
-    var _m = react_1.default.useState(), ownerDocument = _m[0], setOwnerDocument = _m[1];
+    var _o = react_1.default.useState(), ownerDocument = _o[0], setOwnerDocument = _o[1];
     var defaultColumn = react_1.default.useMemo(function () { return ({
         maxWidth: 0,
         minWidth: 0,
@@ -233,6 +234,23 @@ var Table = function (props) {
     });
     var headerRef = react_1.default.useRef(null);
     var bodyRef = react_1.default.useRef(null);
+    var getPreparedRow = react_1.default.useCallback(function (row) {
+        prepareRow(row);
+        return (react_1.default.createElement(TableRowMemoized_1.TableRowMemoized, { row: row, rowProps: rowProps, isLast: row.index === data.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!(isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell }));
+    }, [
+        data.length,
+        expanderCell,
+        hasAnySubRows,
+        instance,
+        intersectionMargin,
+        isRowDisabled,
+        onRowClickHandler,
+        prepareRow,
+        rowProps,
+        state,
+        subComponent,
+    ]);
+    var virtualizedItemRenderer = react_1.default.useCallback(function (index) { return getPreparedRow(page[index]); }, [getPreparedRow, page]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", __assign({ ref: function (element) {
                 setOwnerDocument(element === null || element === void 0 ? void 0 : element.ownerDocument);
@@ -269,16 +287,13 @@ var Table = function (props) {
                 className: (0, classnames_1.default)('iui-table-body', {
                     'iui-zebra-striping': styleType === 'zebra-rows',
                 }),
+                style: { outline: 0 },
             }), { ref: bodyRef, onScroll: function () {
                     if (headerRef.current && bodyRef.current) {
                         headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
                     }
-                } }),
-                data.length !== 0 &&
-                    page.map(function (row) {
-                        prepareRow(row);
-                        return (react_1.default.createElement(TableRowMemoized_1.TableRowMemoized, { row: row, rowProps: rowProps, isLast: row.index === data.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!(isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell }));
-                    }),
+                }, tabIndex: -1 }),
+                data.length !== 0 && (react_1.default.createElement(react_1.default.Fragment, null, enableVirtualization ? (react_1.default.createElement(VirtualScroll_1.default, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer })) : (page.map(function (row) { return getPreparedRow(row); })))),
                 isLoading && data.length === 0 && (react_1.default.createElement("div", { className: 'iui-table-empty' },
                     react_1.default.createElement(ProgressIndicators_1.ProgressRadial, { indeterminate: true }))),
                 isLoading && data.length !== 0 && (react_1.default.createElement("div", { className: 'iui-row' },

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/Table/filters/DateRangeFilter/DatePickerInput.js

@@ -68,7 +68,7 @@ var DatePickerInput = function (props) {
             if (!((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
                 close();
             }
-        } },
+        }, appendTo: 'parent' },
         react_1.default.createElement(LabeledInput_1.LabeledInput, __assign({ displayStyle: 'inline', value: inputValue, onChange: onInputChange, onClick: close, svgIcon: react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', onClick: function () { return setIsVisible(function (v) { return !v; }); }, ref: buttonRef },
                 react_1.default.createElement(Calendar_1.default, null)) }, rest))));
 };

package/cjs/core/Tile/Tile.js

@@ -63,32 +63,31 @@ var Tile = function (props) {
     var showMenu = react_1.default.useCallback(function () { return setIsMenuVisible(true); }, []);
     var hideMenu = react_1.default.useCallback(function () { return setIsMenuVisible(false); }, []);
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-tile', { 'iui-folder': variant === 'folder' }, { 'iui-new': isNew }, { 'iui-selected': isSelected }, className) }, rest),
-        thumbnail && (react_1.default.createElement("div", { className: 'iui-thumbnail' },
-            typeof thumbnail === 'string' ? (react_1.default.createElement("div", { className: 'iui-picture', style: { backgroundImage: "url(" + thumbnail + ")" } })) : thumbnail && thumbnail.type === 'img' ? (react_1.default.cloneElement(thumbnail, {
-                className: 'iui-picture',
+        thumbnail && (react_1.default.createElement("div", { className: 'iui-tile-thumbnail' },
+            typeof thumbnail === 'string' ? (react_1.default.createElement("div", { className: 'iui-tile-thumbnail-picture', style: { backgroundImage: "url(" + thumbnail + ")" } })) : thumbnail && thumbnail.type === 'img' ? (react_1.default.cloneElement(thumbnail, {
+                className: 'iui-tile-thumbnail-picture',
             })) : react_1.default.isValidElement(thumbnail) ? (react_1.default.cloneElement(thumbnail, {
                 className: (0, classnames_1.default)('iui-thumbnail-icon', thumbnail.props.className),
             })) : (thumbnail),
             leftIcon &&
                 react_1.default.cloneElement(leftIcon, {
-                    className: 'iui-small iui-type-indicator',
+                    className: 'iui-small iui-tile-thumbnail-type-indicator',
                 }),
             rightIcon &&
                 react_1.default.cloneElement(rightIcon, {
-                    className: 'iui-small iui-quick-action',
+                    className: 'iui-small iui-tile-thumbnail-quick-action',
                 }),
-            badge && react_1.default.createElement("div", { className: 'iui-badge-container' }, badge))),
-        react_1.default.createElement("div", { className: 'iui-content' },
-            react_1.default.createElement("div", { className: 'iui-name' },
+            badge && (react_1.default.createElement("div", { className: 'iui-tile-thumbnail-badge-container' }, badge)))),
+        react_1.default.createElement("div", { className: 'iui-tile-content' },
+            react_1.default.createElement("div", { className: 'iui-tile-name' },
                 isSelected && (react_1.default.createElement(Checkmark_1.default, { className: (0, classnames_1.default)('iui-tile-status-icon', 'iui-informational'), "aria-hidden": true })),
                 isNew && (react_1.default.createElement(New_1.default, { className: (0, classnames_1.default)('iui-tile-status-icon', 'iui-positive'), "aria-hidden": true })),
-                react_1.default.createElement("span", { className: 'iui-name-label' }, name)),
-            description != undefined && (react_1.default.createElement("div", { className: 'iui-description' }, description)),
-            metadata != undefined && (react_1.default.createElement("div", { className: 'iui-metadata' }, metadata)),
+                react_1.default.createElement("span", { className: 'iui-tile-name-label' }, name)),
+            description != undefined && (react_1.default.createElement("div", { className: 'iui-tile-description' }, description)),
+            metadata != undefined && (react_1.default.createElement("div", { className: 'iui-tile-metadata' }, metadata)),
             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,16 +96,13 @@ var Tile = function (props) {
                         });
                     });
                 } },
-                react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', className: (0, classnames_1.default)('iui-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.map(function (button) {
-            return react_1.default.cloneElement(button, {
-                className: (0, classnames_1.default)('iui-tile-button', button.props.className),
-            });
-        })))));
+        buttons && react_1.default.createElement("div", { className: 'iui-tile-buttons' }, buttons)));
 };
 exports.Tile = Tile;
 exports.default = exports.Tile;

package/cjs/core/utils/components/Popover.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import { TippyProps } from '@tippyjs/react';
-import { Placement, Instance } from 'tippy.js';
+import type { Placement, Instance } from 'tippy.js';
 export declare type PopoverInstance = Instance;
+import '@itwin/itwinui-css/css/popover.css';
 export declare type PopoverProps = {
     /**
      * Controlled flag for whether the popover is visible.