@itwin/itwinui-react 1.37.2 → 1.38.1

package/cjs/core/RadioTiles/RadioTile.js

@@ -30,11 +30,10 @@ exports.RadioTile = 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 Checkmark_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Checkmark"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/inputs.css");
+require("@itwin/itwinui-css/css/radio-tile.css");
 /**
  * RadioTile component to be used in RadioTileGroup component
  * @example
@@ -50,15 +49,14 @@ exports.RadioTile = react_1.default.forwardRef(function (props, ref) {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
-    return (react_1.default.createElement("label", { className: className, style: style },
-        react_1.default.createElement("input", __assign({ type: 'radio', ref: refs }, rest)),
-        react_1.default.createElement("div", { className: 'iui-radio-tile' },
-            react_1.default.createElement(Checkmark_1.default, { className: 'iui-checkmark', "aria-hidden": true }),
+    return (react_1.default.createElement("label", { className: (0, classnames_1.default)('iui-radio-tile', className), style: style },
+        react_1.default.createElement("input", __assign({ className: 'iui-radio-tile-input', type: 'radio', ref: refs }, rest)),
+        react_1.default.createElement("div", { className: 'iui-radio-tile-content' },
             icon &&
                 react_1.default.cloneElement(icon, {
-                    className: (0, classnames_1.default)('iui-icon', icon.props.className),
+                    className: (0, classnames_1.default)('iui-radio-tile-icon', icon.props.className),
                 }),
-            label && react_1.default.createElement("div", { className: 'iui-label' }, label),
-            description && react_1.default.createElement("div", { className: 'iui-description' }, description))));
+            label && react_1.default.createElement("div", { className: 'iui-radio-tile-label' }, label),
+            description && (react_1.default.createElement("div", { className: 'iui-radio-tile-sublabel' }, description)))));
 });
 exports.default = exports.RadioTile;

package/cjs/core/Select/Select.js

@@ -146,7 +146,7 @@ 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-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(".concat(minWidth * 2, "px, 90vw)"), maxHeight: "300px" }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen, onClickOutside: function (_, _a) {
+        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(".concat(minWidth * 2, "px, 90vw)"), maxHeight: 315 }, 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))) {

package/cjs/core/Slider/Thumb.js

@@ -70,7 +70,21 @@ var Thumb = function (props) {
     }, [disabled, index, onThumbActivated]);
     var _a = react_1.default.useState(false), hasFocus = _a[0], setHasFocus = _a[1];
     var _b = react_1.default.useState(false), isHovered = _b[0], setIsHovered = _b[1];
-    var leftPercent = (100.0 * (value - sliderMin)) / (sliderMax - sliderMin);
+    var adjustedValue = react_1.default.useMemo(function () {
+        if (value < sliderMin) {
+            return sliderMin;
+        }
+        if (value > sliderMax) {
+            return sliderMax;
+        }
+        return value;
+    }, [sliderMax, sliderMin, value]);
+    var leftPercent = react_1.default.useMemo(function () {
+        if (sliderMax === sliderMin) {
+            return 0;
+        }
+        return (100.0 * (adjustedValue - sliderMin)) / (sliderMax - sliderMin);
+    }, [adjustedValue, sliderMax, sliderMin]);
     var _c = thumbProps || {}, style = _c.style, className = _c.className, rest = __rest(_c, ["style", "className"]);
     return (react_1.default.createElement(Tooltip_1.Tooltip, __assign({ visible: isActive || hasFocus || isHovered, placement: 'top' }, tooltipProps),
         react_1.default.createElement("div", __assign({}, rest, { "data-index": index, ref: thumbRef, style: __assign(__assign({}, style), { left: "".concat(leftPercent, "%") }), className: (0, classnames_1.default)('iui-slider-thumb', { 'iui-active': isActive }, className), role: 'slider', tabIndex: disabled ? undefined : 0, "aria-valuemin": minVal, "aria-valuenow": value, "aria-valuemax": maxVal, "aria-disabled": disabled, onPointerDown: handlePointerDownOnThumb, onKeyDown: handleOnKeyDown, onFocus: function () { return setHasFocus(true); }, onBlur: function () { return setHasFocus(false); }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }))));

package/cjs/core/Slider/Track.js

@@ -29,10 +29,18 @@ function shouldDisplaySegment(segmentIndex, mode) {
 }
 function generateSegments(values, min, max) {
     var segments = [];
+    var newValues = __spreadArray([], values, true);
+    newValues.sort(function (a, b) { return a - b; });
+    if (0 === newValues.length ||
+        newValues[0] < min ||
+        newValues[newValues.length - 1] > max ||
+        min === max) {
+        return [];
+    }
     var lastValue = min;
-    for (var i = 0; i < values.length; i++) {
-        segments.push({ left: lastValue, right: values[i] });
-        lastValue = values[i];
+    for (var i = 0; i < newValues.length; i++) {
+        segments.push({ left: lastValue, right: newValues[i] });
+        lastValue = newValues[i];
     }
     segments.push({ left: lastValue, right: max });
     return segments;
@@ -43,18 +51,21 @@ function generateSegments(values, min, max) {
  */
 var Track = function (props) {
     var trackDisplayMode = props.trackDisplayMode, sliderMin = props.sliderMin, sliderMax = props.sliderMax, values = props.values;
-    var _a = react_1.default.useState(__spreadArray([], values, true).sort(function (a, b) { return a - b; })), currentValues = _a[0], setCurrentValues = _a[1];
+    var _a = react_1.default.useState(function () {
+        return generateSegments(values, sliderMin, sliderMax);
+    }), segments = _a[0], setSegments = _a[1];
     react_1.default.useEffect(function () {
-        var newValues = __spreadArray([], values, true);
-        newValues.sort(function (a, b) { return a - b; });
-        setCurrentValues(newValues);
-    }, [values]);
-    var segments = react_1.default.useMemo(function () { return generateSegments(currentValues, sliderMin, sliderMax); }, [currentValues, sliderMin, sliderMax]);
+        setSegments(generateSegments(values, sliderMin, sliderMax));
+    }, [values, sliderMin, sliderMax]);
     return (react_1.default.createElement(react_1.default.Fragment, null, 'none' !== trackDisplayMode &&
         segments.map(function (segment, index) {
-            var leftPercent = (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin);
-            var rightPercent = (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin);
-            rightPercent = 100.0 - rightPercent;
+            var leftPercent = segment.left >= sliderMin && sliderMax !== sliderMin
+                ? (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin)
+                : 0;
+            var rightPercent = segment.right >= sliderMin && sliderMax !== sliderMin
+                ? 100.0 -
+                    (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin)
+                : 100;
             return (react_1.default.createElement(react_1.default.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (react_1.default.createElement("div", { className: 'iui-slider-track', style: { left: "".concat(leftPercent, "%"), right: "".concat(rightPercent, "%") } })) : null));
         })));
 };

package/cjs/core/Table/Table.js

@@ -186,7 +186,7 @@ var Table = function (props) {
         }
         return result;
     }, {});
-    var areFiltersSet = allColumns.some(function (column) { return !!column.filterValue; });
+    var areFiltersSet = allColumns.some(function (column) { return column.filterValue != null && column.filterValue !== ''; });
     var onRowClickHandler = react_1.default.useCallback(function (event, row) {
         var isDisabled = isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original);
         if (!isDisabled) {
@@ -302,7 +302,7 @@ var Table = function (props) {
                     className: 'iui-row',
                 });
                 return (react_1.default.createElement("div", __assign({}, headerGroupProps, { key: headerGroupProps.key }), headerGroup.headers.map(function (column, index) {
-                    var columnProps = column.getHeaderProps(__assign(__assign({}, column.getSortByToggleProps()), { className: (0, classnames_1.default)('iui-cell', { 'iui-actionable': column.canSort }, { 'iui-sorted': column.isSorted }, column.columnClassName), style: __assign({}, (0, utils_2.getCellStyle)(column, !!state.isTableResizing)) }));
+                    var columnProps = column.getHeaderProps(__assign(__assign({}, column.getSortByToggleProps()), { className: (0, classnames_1.default)('iui-cell', { 'iui-actionable': column.canSort }, { 'iui-sorted': column.isSorted }, column.columnClassName), style: __assign(__assign({}, (0, utils_2.getCellStyle)(column, !!state.isTableResizing)), { flexWrap: 'unset' }) }));
                     return (react_1.default.createElement("div", __assign({}, columnProps, column.getDragAndDropProps(), { key: columnProps.key, title: undefined, ref: function (el) {
                             if (el && isResizable) {
                                 columnRefs.current[column.id] = el;

package/cjs/core/Table/filters/FilterToggle.js

@@ -53,11 +53,12 @@ var FilterToggle = function (props) {
         column.setFilter(undefined);
         close();
     }, [close, column]);
+    var isColumnFiltered = column.filterValue != null && column.filterValue !== '';
     return (react_1.default.createElement(react_1.default.Fragment, null, column.canFilter && column.Filter && (react_1.default.createElement(utils_1.Popover, { content: column.render('Filter', { close: close, setFilter: setFilter, clearFilter: clearFilter }), placement: 'bottom-start', visible: isVisible, onClickOutside: close, appendTo: ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body },
-        react_1.default.createElement(Buttons_1.IconButton, __assign({ styleType: 'borderless', isActive: isVisible || column.filterValue, className: (0, classnames_1.default)('iui-filter-button', className), onClick: function (e) {
+        react_1.default.createElement(Buttons_1.IconButton, __assign({ styleType: 'borderless', isActive: isVisible || isColumnFiltered, className: (0, classnames_1.default)('iui-filter-button', className), onClick: function (e) {
                 setIsVisible(function (v) { return !v; });
                 // Prevents from triggering sort
                 e.stopPropagation();
-            } }, rest), column.filterValue ? react_1.default.createElement(Filter_1.default, null) : react_1.default.createElement(FilterHollow_1.default, null))))));
+            } }, rest), isColumnFiltered ? react_1.default.createElement(Filter_1.default, null) : react_1.default.createElement(FilterHollow_1.default, null))))));
 };
 exports.FilterToggle = FilterToggle;

package/cjs/core/Toast/ToastWrapper.d.ts

@@ -1,9 +1,11 @@
-/// <reference types="react" />
 import '@itwin/itwinui-css/css/toast-notification.css';
+import React from 'react';
 import { ToastProps } from './Toast';
 import { ToasterSettings } from './Toaster';
-declare type ToastWrapperProps = {
-    toasts: ToastProps[];
-} & Pick<ToasterSettings, 'placement'>;
-export declare const ToastWrapper: (props: ToastWrapperProps) => JSX.Element;
+declare type ToastPlacement = NonNullable<ToasterSettings['placement']>;
+export declare type ToastWrapperHandle = {
+    setToasts: (toasts: ToastProps[]) => void;
+    setPlacement: (placement: ToastPlacement) => void;
+};
+export declare const ToastWrapper: React.ForwardRefExoticComponent<React.RefAttributes<ToastWrapperHandle>>;
 export {};

package/cjs/core/Toast/ToastWrapper.js

@@ -23,11 +23,15 @@ require("@itwin/itwinui-css/css/toast-notification.css");
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var Toast_1 = __importDefault(require("./Toast"));
-var ToastWrapper = function (props) {
-    var toasts = props.toasts, _a = props.placement, placement = _a === void 0 ? 'top' : _a;
+exports.ToastWrapper = react_1.default.forwardRef(function (_, ref) {
+    var _a = react_1.default.useState([]), toasts = _a[0], setToasts = _a[1];
+    var _b = react_1.default.useState('top'), placement = _b[0], setPlacement = _b[1];
     var placementPosition = placement.startsWith('top') ? 'top' : 'bottom';
+    react_1.default.useImperativeHandle(ref, function () { return ({
+        setToasts: setToasts,
+        setPlacement: setPlacement,
+    }); }, []);
     return (react_1.default.createElement("span", { className: (0, classnames_1.default)("iui-toast-wrapper", "iui-placement-".concat(placement)) }, toasts.map(function (toastProps) {
         return (react_1.default.createElement(Toast_1.default, __assign({ key: toastProps.id, placementPosition: placementPosition }, toastProps)));
     })));
-};
-exports.ToastWrapper = ToastWrapper;
+});

package/cjs/core/Toast/Toaster.d.ts

@@ -20,6 +20,9 @@ export default class Toaster {
     private toasts;
     private lastId;
     private settings;
+    private toastsRef;
+    private isInitialized;
+    private asyncInit;
     /**
      * Set global Toaster settings for toasts order and placement.
      * Settings will be applied to new toasts on the page.

package/cjs/core/Toast/Toaster.js

@@ -34,24 +34,49 @@ var ToastWrapper_1 = require("./ToastWrapper");
 var TOASTS_CONTAINER_ID = 'iui-toasts-container';
 var Toaster = /** @class */ (function () {
     function Toaster() {
+        var _this = this;
         this.toasts = [];
         this.lastId = 0;
         this.settings = {
             order: 'descending',
             placement: 'top',
         };
+        this.toastsRef = react_1.default.createRef();
+        this.isInitialized = false;
+        // Create container on demand.
+        // Cannot do it in constructor, because SSG/SSR apps would fail.
+        this.asyncInit = new Promise(function (resolve) {
+            if (_this.isInitialized) {
+                resolve();
+                return;
+            }
+            var container = (0, utils_1.getContainer)(TOASTS_CONTAINER_ID);
+            if (!container) {
+                // should never happen
+                resolve();
+                return;
+            }
+            _this.isInitialized = true;
+            react_dom_1.default.render(react_1.default.createElement(ToastWrapper_1.ToastWrapper, { ref: _this.toastsRef }), container);
+            resolve();
+        });
     }
     /**
      * Set global Toaster settings for toasts order and placement.
      * Settings will be applied to new toasts on the page.
      */
     Toaster.prototype.setSettings = function (newSettings) {
+        var _this = this;
         var _a, _b, _c;
         (_a = newSettings.placement) !== null && _a !== void 0 ? _a : (newSettings.placement = this.settings.placement);
         (_b = newSettings.order) !== null && _b !== void 0 ? _b : (newSettings.order = ((_c = newSettings.placement) === null || _c === void 0 ? void 0 : _c.startsWith('bottom'))
             ? 'ascending'
             : 'descending');
         this.settings = newSettings;
+        this.asyncInit.then(function () {
+            var _a, _b;
+            (_a = _this.toastsRef.current) === null || _a === void 0 ? void 0 : _a.setPlacement((_b = _this.settings.placement) !== null && _b !== void 0 ? _b : 'top');
+        });
     };
     Toaster.prototype.positive = function (content, options) {
         return this.createToast(content, 'positive', options);
@@ -84,11 +109,11 @@ var Toaster = /** @class */ (function () {
         this.updateView();
     };
     Toaster.prototype.updateView = function () {
-        var container = (0, utils_1.getContainer)(TOASTS_CONTAINER_ID);
-        if (!container) {
-            return;
-        }
-        react_dom_1.default.render(react_1.default.createElement(ToastWrapper_1.ToastWrapper, { toasts: this.toasts, placement: this.settings.placement }), container);
+        var _this = this;
+        this.asyncInit.then(function () {
+            var _a;
+            (_a = _this.toastsRef.current) === null || _a === void 0 ? void 0 : _a.setToasts(_this.toasts);
+        });
     };
     Toaster.prototype.closeToast = function (toastId) {
         this.toasts = this.toasts.map(function (toast) {

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

@@ -43,7 +43,7 @@ export declare const Popover: React.ForwardRefExoticComponent<Pick<{
      * @see [tippy.js placement prop](https://atomiks.github.io/tippyjs/v6/all-props/#placement).
      */
     placement?: import("@popperjs/core").Placement | undefined;
-} & Omit<TippyProps, "placement" | "trigger" | "visible">, "disabled" | "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" | "children" | "className" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
+} & Omit<TippyProps, "placement" | "trigger" | "visible">, "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<unknown>>;
 /**
  * Plugin to hide Popover when either Esc key is pressed,
  * or when the content inside is not tabbable and Tab key is pressed.

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

@@ -16,6 +16,10 @@ export declare type VirtualScrollProps = {
      * @default 10
      */
     bufferSize?: number;
+    /**
+     * Index of the first element on initial render.
+     */
+    scrollToIndex?: number;
 } & React.ComponentPropsWithRef<'div'>;
 /**
  * `VirtualScroll` component is used to render a huge amount of items in the DOM. It renders only the ones which are visible
@@ -38,5 +42,35 @@ export declare type VirtualScrollProps = {
  * />
  * @private
  */
-export declare const VirtualScroll: React.ForwardRefExoticComponent<Pick<VirtualScrollProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "itemsLength" | "itemRenderer" | "bufferSize"> & React.RefAttributes<HTMLDivElement>>;
+export declare const VirtualScroll: React.ForwardRefExoticComponent<Pick<VirtualScrollProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "itemsLength" | "itemRenderer" | "bufferSize" | "scrollToIndex"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * `useVirtualization` is used for efficiently rendering only the visible rows from a large list.
+ * It returns `outerProps` and `innerProps`, which need to be applied on 2 container elements and `visibleChildren` which is a list of virtualized items.
+ * @example
+ * const itemRenderer = React.useCallback((index: number) => (
+ *  <li key={index}>
+ *    This is my item #{index}
+ *  </li>
+ * ), [])
+ *
+ * const { outerProps, innerProps, visibleChildren } = useVirtualization({itemsLength: 1000, itemRenderer: itemRenderer});
+ * return (
+ *  <div {...outerProps}>
+ *   <ul {...innerProps}>
+ *    {visibleChildren}
+ *   </ul>
+ *  </div>
+ * );
+ * @private
+ */
+export declare const useVirtualization: (props: VirtualScrollProps) => {
+    outerProps: React.HTMLAttributes<HTMLElement>;
+    innerProps: {
+        readonly style: {
+            readonly willChange: "transform";
+        };
+        readonly ref: (instance: HTMLElement | null) => void;
+    };
+    visibleChildren: JSX.Element[];
+};
 export default VirtualScroll;

package/cjs/core/utils/components/VirtualScroll.js

@@ -25,12 +25,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VirtualScroll = void 0;
+exports.useVirtualization = exports.VirtualScroll = 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 react_1 = __importDefault(require("react"));
+var hooks_1 = require("../hooks");
 var useResizeObserver_1 = require("../hooks/useResizeObserver");
 var getScrollableParent = function (element, ownerDocument) {
     if (ownerDocument === void 0) { ownerDocument = document; }
@@ -52,6 +53,14 @@ var getElementHeight = function (element) {
     var _a;
     return (_a = element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height) !== null && _a !== void 0 ? _a : 0;
 };
+var getElementHeightWithMargins = function (element) {
+    if (!element) {
+        return undefined;
+    }
+    var margin = parseFloat(getElementStyle(element, 'margin-top')) +
+        parseFloat(getElementStyle(element, 'margin-bottom'));
+    return getElementHeight(element) + (isNaN(margin) ? 0 : margin);
+};
 var getNumberOfNodesInHeight = function (childHeight, totalHeight) {
     if (!childHeight) {
         return 0;
@@ -59,7 +68,10 @@ var getNumberOfNodesInHeight = function (childHeight, totalHeight) {
     return Math.floor(totalHeight / childHeight);
 };
 var getTranslateValue = function (childHeight, startIndex) {
-    return childHeight * startIndex;
+    if (startIndex > 0) {
+        return childHeight * startIndex;
+    }
+    return 0;
 };
 var getVisibleNodeCount = function (childHeight, startIndex, childrenLength, scrollContainer) {
     return Math.min(childrenLength - startIndex, getNumberOfNodesInHeight(childHeight, getElementHeight(scrollContainer)));
@@ -85,21 +97,55 @@ var getVisibleNodeCount = function (childHeight, startIndex, childrenLength, scr
  * />
  * @private
  */
-exports.VirtualScroll = react_1.default.forwardRef(function (_a, ref) {
-    var itemsLength = _a.itemsLength, itemRenderer = _a.itemRenderer, _b = _a.bufferSize, bufferSize = _b === void 0 ? 10 : _b, style = _a.style, rest = __rest(_a, ["itemsLength", "itemRenderer", "bufferSize", "style"]);
-    var _c = react_1.default.useState(0), startNode = _c[0], setStartNode = _c[1];
-    var _d = react_1.default.useState(0), visibleNodeCount = _d[0], setVisibleNodeCount = _d[1];
+exports.VirtualScroll = react_1.default.forwardRef(function (props, ref) {
+    var _a = (0, exports.useVirtualization)(props), innerProps = _a.innerProps, outerProps = _a.outerProps, visibleChildren = _a.visibleChildren;
+    return (react_1.default.createElement("div", __assign({}, outerProps, { ref: ref }),
+        react_1.default.createElement("div", __assign({}, innerProps), visibleChildren)));
+});
+/**
+ * `useVirtualization` is used for efficiently rendering only the visible rows from a large list.
+ * It returns `outerProps` and `innerProps`, which need to be applied on 2 container elements and `visibleChildren` which is a list of virtualized items.
+ * @example
+ * const itemRenderer = React.useCallback((index: number) => (
+ *  <li key={index}>
+ *    This is my item #{index}
+ *  </li>
+ * ), [])
+ *
+ * const { outerProps, innerProps, visibleChildren } = useVirtualization({itemsLength: 1000, itemRenderer: itemRenderer});
+ * return (
+ *  <div {...outerProps}>
+ *   <ul {...innerProps}>
+ *    {visibleChildren}
+ *   </ul>
+ *  </div>
+ * );
+ * @private
+ */
+var useVirtualization = function (props) {
+    var itemsLength = props.itemsLength, itemRenderer = props.itemRenderer, _a = props.bufferSize, bufferSize = _a === void 0 ? 10 : _a, scrollToIndex = props.scrollToIndex, style = props.style, rest = __rest(props, ["itemsLength", "itemRenderer", "bufferSize", "scrollToIndex", "style"]);
+    var _b = react_1.default.useState(0), startNode = _b[0], setStartNode = _b[1];
+    var _c = react_1.default.useState(0), visibleNodeCount = _c[0], setVisibleNodeCount = _c[1];
     var scrollContainer = react_1.default.useRef();
     var parentRef = react_1.default.useRef(null);
-    var childHeight = react_1.default.useRef(0);
+    var childHeight = react_1.default.useRef({ first: 0, middle: 0, last: 0 });
     var onScrollRef = react_1.default.useRef();
     // Used only to recalculate on resize
-    var _e = react_1.default.useState(0), scrollContainerHeight = _e[0], setScrollContainerHeight = _e[1];
+    var _d = react_1.default.useState(0), scrollContainerHeight = _d[0], setScrollContainerHeight = _d[1];
+    var visibleIndex = react_1.default.useRef({ start: 0, end: 0 });
+    // Used to mark when scroll container has height (updated by resize observer)
+    // because before that calculations are not right
+    var _e = react_1.default.useState(false), isMounted = _e[0], setIsMounted = _e[1];
     var onResize = react_1.default.useCallback(function (_a) {
         var height = _a.height;
+        // Initial value returned by resize observer is 0
+        // So wait for the next one
+        if (height > 0) {
+            setIsMounted(true);
+        }
         setScrollContainerHeight(height);
     }, []);
-    var resizeRef = (0, useResizeObserver_1.useResizeObserver)(onResize)[0];
+    var _f = (0, useResizeObserver_1.useResizeObserver)(onResize), resizeRef = _f[0], resizeObserver = _f[1];
     // Find scrollable parent
     // Needed only on init
     react_1.default.useLayoutEffect(function () {
@@ -108,6 +154,14 @@ exports.VirtualScroll = react_1.default.forwardRef(function (_a, ref) {
         scrollContainer.current = scrollableParent;
         resizeRef(scrollableParent);
     }, [resizeRef]);
+    // Stop watching resize, when virtual scroll is unmounted
+    react_1.default.useLayoutEffect(function () {
+        return function () { return resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect(); };
+    }, [resizeObserver]);
+    var getScrollableContainer = function () {
+        var _a, _b;
+        return (_a = scrollContainer.current) !== null && _a !== void 0 ? _a : (_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.scrollingElement;
+    };
     var visibleChildren = react_1.default.useMemo(function () {
         var arr = [];
         var endIndex = Math.min(itemsLength, startNode + visibleNodeCount + bufferSize * 2);
@@ -118,27 +172,42 @@ exports.VirtualScroll = react_1.default.forwardRef(function (_a, ref) {
     }, [itemsLength, itemRenderer, bufferSize, startNode, visibleNodeCount]);
     // Get child height when children available
     react_1.default.useLayoutEffect(function () {
+        var _a, _b, _c, _d, _e, _f;
         if (!parentRef.current || !visibleChildren.length) {
             return;
         }
         var firstChild = parentRef.current.children.item(0);
-        childHeight.current = Number(getElementHeight(firstChild).toFixed(2));
+        var secondChild = parentRef.current.children.item(1);
+        var lastChild = parentRef.current.children.item(parentRef.current.children.length - 1);
+        var firstChildHeight = Number((_b = (_a = getElementHeightWithMargins(firstChild)) === null || _a === void 0 ? void 0 : _a.toFixed(2)) !== null && _b !== void 0 ? _b : 0);
+        childHeight.current = {
+            first: firstChildHeight,
+            middle: Number((_d = (_c = getElementHeightWithMargins(secondChild)) === null || _c === void 0 ? void 0 : _c.toFixed(2)) !== null && _d !== void 0 ? _d : firstChildHeight),
+            last: Number((_f = (_e = getElementHeightWithMargins(lastChild)) === null || _e === void 0 ? void 0 : _e.toFixed(2)) !== null && _f !== void 0 ? _f : firstChildHeight),
+        };
     }, [visibleChildren.length]);
     var updateVirtualScroll = react_1.default.useCallback(function () {
-        var _a, _b;
-        var scrollableContainer = (_a = scrollContainer.current) !== null && _a !== void 0 ? _a : (_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.scrollingElement;
+        var scrollableContainer = getScrollableContainer();
         if (!scrollableContainer) {
             return;
         }
-        var start = getNumberOfNodesInHeight(childHeight.current, scrollableContainer.scrollTop);
-        var startIndex = Math.max(0, start - bufferSize);
+        var start = getNumberOfNodesInHeight(childHeight.current.middle, Math.round(scrollableContainer.scrollTop));
+        var visibleNodes = getVisibleNodeCount(childHeight.current.middle, start, itemsLength, scrollableContainer);
+        // If there are less items at the end than buffer size
+        // show more items at the start.
+        // Have boundaries for edge cases, e.g. 1 item length
+        var startIndex = Math.min(Math.max(0, start - bufferSize), Math.max(0, itemsLength - bufferSize * 2 - visibleNodes));
+        visibleIndex.current = { start: start, end: start + visibleNodes };
         setStartNode(startIndex);
-        setVisibleNodeCount(getVisibleNodeCount(childHeight.current, start, itemsLength, scrollableContainer));
+        setVisibleNodeCount(visibleNodes);
         if (!parentRef.current) {
             return;
         }
-        parentRef.current.style.transform = "translateY(".concat(getTranslateValue(childHeight.current, startIndex), "px)");
+        parentRef.current.style.transform = "translateY(".concat(getTranslateValue(childHeight.current.middle, startIndex), "px)");
     }, [bufferSize, itemsLength]);
+    var onScroll = react_1.default.useCallback(function () {
+        updateVirtualScroll();
+    }, [updateVirtualScroll]);
     var removeScrollListener = react_1.default.useCallback(function () {
         var _a, _b;
         if (!onScrollRef.current) {
@@ -153,22 +222,86 @@ exports.VirtualScroll = react_1.default.forwardRef(function (_a, ref) {
     react_1.default.useLayoutEffect(function () {
         var _a, _b;
         removeScrollListener();
-        onScrollRef.current = updateVirtualScroll;
+        onScrollRef.current = onScroll;
         if (!scrollContainer.current ||
             scrollContainer.current === ((_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.body)) {
-            (_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.addEventListener('scroll', updateVirtualScroll);
+            (_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.addEventListener('scroll', onScroll);
         }
         else {
-            scrollContainer.current.addEventListener('scroll', updateVirtualScroll);
+            scrollContainer.current.addEventListener('scroll', onScroll);
         }
         return removeScrollListener;
-    }, [updateVirtualScroll, removeScrollListener]);
+    }, [onScroll, removeScrollListener]);
+    react_1.default.useLayoutEffect(function () {
+        if (!isMounted) {
+            return;
+        }
+        var scrollableContainer = getScrollableContainer();
+        if (!scrollableContainer || scrollToIndex == null) {
+            return;
+        }
+        // if `scrollToIndex` is not visible, scroll to it
+        if (scrollToIndex > visibleIndex.current.end ||
+            scrollToIndex < visibleIndex.current.start) {
+            var indexDiff = scrollToIndex > visibleIndex.current.end
+                ? scrollToIndex - visibleIndex.current.end
+                : scrollToIndex - visibleIndex.current.start;
+            if (scrollToIndex === 0) {
+                scrollableContainer.scrollTo({ top: 0 });
+                return;
+            }
+            // If go down: add to the existing scrollTop needed height
+            // If go up: calculate the exact scroll top
+            scrollableContainer.scrollTo({
+                top: indexDiff > 0
+                    ? Math.ceil(scrollableContainer.scrollTop) +
+                        indexDiff * childHeight.current.middle
+                    : scrollToIndex * childHeight.current.middle,
+            });
+        }
+        // if `scrollToIndex` is the first visible node
+        // ensure it is fully visible
+        if (scrollToIndex === visibleIndex.current.start) {
+            var roundedScrollTop = Math.round(scrollableContainer.scrollTop);
+            var diff = roundedScrollTop % childHeight.current.middle;
+            diff > 0 &&
+                scrollableContainer.scrollTo({
+                    top: roundedScrollTop - diff,
+                });
+            return;
+        }
+        // if `scrollToIndex` is the last visible node
+        // ensure it is fully visible
+        if (scrollToIndex === visibleIndex.current.end) {
+            var diff = (scrollableContainer.offsetHeight - childHeight.current.first) %
+                childHeight.current.middle;
+            var roundedScrollTop = Math.ceil(scrollableContainer.scrollTop);
+            var scrollTopMod = roundedScrollTop % childHeight.current.middle;
+            if (diff > 0 && scrollTopMod === 0) {
+                scrollableContainer.scrollTo({
+                    top: roundedScrollTop + childHeight.current.middle - diff,
+                });
+            }
+        }
+    }, [scrollToIndex, isMounted]);
     react_1.default.useLayoutEffect(function () {
+        if (!scrollContainerHeight) {
+            return;
+        }
         updateVirtualScroll();
-    }, [scrollContainerHeight, itemsLength, updateVirtualScroll]);
-    return (react_1.default.createElement("div", __assign({ style: __assign({ overflow: 'hidden', minHeight: itemsLength * childHeight.current, width: '100%' }, style), ref: ref }, rest),
-        react_1.default.createElement("div", { style: {
-                willChange: 'transform',
-            }, ref: parentRef }, visibleChildren)));
-});
+    }, [scrollContainerHeight, updateVirtualScroll]);
+    return {
+        outerProps: __assign({ style: __assign({ overflow: 'hidden', minHeight: itemsLength > 1
+                    ? Math.max(itemsLength - 2, 0) * childHeight.current.middle +
+                        childHeight.current.first +
+                        childHeight.current.last
+                    : childHeight.current.middle, width: '100%' }, style) }, rest),
+        innerProps: {
+            style: { willChange: 'transform' },
+            ref: (0, hooks_1.mergeRefs)(parentRef), // convert object ref to callback ref for better types
+        },
+        visibleChildren: visibleChildren,
+    };
+};
+exports.useVirtualization = useVirtualization;
 exports.default = exports.VirtualScroll;

package/cjs/core/utils/hooks/index.d.ts

@@ -6,3 +6,4 @@ export * from './useContainerWidth';
 export * from './useTheme';
 export * from './useIntersection';
 export * from './useMediaQuery';
+export * from './useSafeContext';

package/cjs/core/utils/hooks/index.js

@@ -26,3 +26,4 @@ __exportStar(require("./useContainerWidth"), exports);
 __exportStar(require("./useTheme"), exports);
 __exportStar(require("./useIntersection"), exports);
 __exportStar(require("./useMediaQuery"), exports);
+__exportStar(require("./useSafeContext"), exports);

package/cjs/core/utils/hooks/useSafeContext.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * Wrapper hook around `useContext` that throws an error if the context is not provided.
+ * @param context Context to use. Must have a `displayName` for useful errors.
+ */
+export declare const useSafeContext: <T>(context: React.Context<T>) => NonNullable<T>;