@itwin/itwinui-react 1.42.0 → 1.44.0

package/cjs/core/Slider/Slider.js

@@ -45,9 +45,13 @@ var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/slider.css");
 var Track_1 = require("./Track");
 var Thumb_1 = require("./Thumb");
-var getPercentageOfRectangle = function (rect, pointer) {
-    var position = (0, utils_1.getBoundedValue)(pointer, rect.left, rect.right);
-    return (position - rect.left) / rect.width;
+var getPercentageOfRectangle = function (rect, pointerX, pointerY, orientation) {
+    if (orientation === 'horizontal') {
+        var position_1 = (0, utils_1.getBoundedValue)(pointerX, rect.left, rect.right);
+        return (position_1 - rect.left) / rect.width;
+    }
+    var position = (0, utils_1.getBoundedValue)(pointerY, rect.top, rect.bottom);
+    return (rect.bottom - position) / rect.height;
 };
 var getClosestValueIndex = function (values, pointerValue) {
     if (1 === values.length) {
@@ -94,20 +98,20 @@ var focusThumb = function (sliderContainer, activeIndex) {
  */
 exports.Slider = react_1.default.forwardRef(function (props, ref) {
     var _a, _b;
-    var _c = props.min, min = _c === void 0 ? 0 : _c, _d = props.max, max = _d === void 0 ? 100 : _d, values = props.values, _e = props.step, step = _e === void 0 ? 1 : _e, _f = props.setFocus, setFocus = _f === void 0 ? false : _f, tooltipProps = props.tooltipProps, _g = props.disabled, disabled = _g === void 0 ? false : _g, tickLabels = props.tickLabels, minLabel = props.minLabel, maxLabel = props.maxLabel, _h = props.trackDisplayMode, trackDisplayMode = _h === void 0 ? 'auto' : _h, _j = props.thumbMode, thumbMode = _j === void 0 ? 'inhibit-crossing' : _j, onChange = props.onChange, onUpdate = props.onUpdate, thumbProps = props.thumbProps, className = props.className, railContainerProps = props.railContainerProps, rest = __rest(props, ["min", "max", "values", "step", "setFocus", "tooltipProps", "disabled", "tickLabels", "minLabel", "maxLabel", "trackDisplayMode", "thumbMode", "onChange", "onUpdate", "thumbProps", "className", "railContainerProps"]);
-    var _k = react_1.default.useState(values), currentValues = _k[0], setCurrentValues = _k[1];
+    var _c = props.min, min = _c === void 0 ? 0 : _c, _d = props.max, max = _d === void 0 ? 100 : _d, values = props.values, _e = props.step, step = _e === void 0 ? 1 : _e, _f = props.setFocus, setFocus = _f === void 0 ? false : _f, tooltipProps = props.tooltipProps, _g = props.disabled, disabled = _g === void 0 ? false : _g, tickLabels = props.tickLabels, minLabel = props.minLabel, maxLabel = props.maxLabel, _h = props.trackDisplayMode, trackDisplayMode = _h === void 0 ? 'auto' : _h, _j = props.thumbMode, thumbMode = _j === void 0 ? 'inhibit-crossing' : _j, onChange = props.onChange, onUpdate = props.onUpdate, thumbProps = props.thumbProps, className = props.className, railContainerProps = props.railContainerProps, _k = props.orientation, orientation = _k === void 0 ? 'horizontal' : _k, rest = __rest(props, ["min", "max", "values", "step", "setFocus", "tooltipProps", "disabled", "tickLabels", "minLabel", "maxLabel", "trackDisplayMode", "thumbMode", "onChange", "onUpdate", "thumbProps", "className", "railContainerProps", "orientation"]);
+    var _l = react_1.default.useState(values), currentValues = _l[0], setCurrentValues = _l[1];
     react_1.default.useEffect(function () {
         setCurrentValues(values);
     }, [values]);
-    var _l = react_1.default.useState(function () { return minLabel !== null && minLabel !== void 0 ? minLabel : min.toString(); }), minValueLabel = _l[0], setMinValueLabel = _l[1];
+    var _m = react_1.default.useState(function () { return minLabel !== null && minLabel !== void 0 ? minLabel : min.toString(); }), minValueLabel = _m[0], setMinValueLabel = _m[1];
     react_1.default.useEffect(function () {
         setMinValueLabel(minLabel !== null && minLabel !== void 0 ? minLabel : min.toString());
     }, [minLabel, min]);
-    var _m = react_1.default.useState(function () { return maxLabel !== null && maxLabel !== void 0 ? maxLabel : max.toString(); }), maxValueLabel = _m[0], setMaxValueLabel = _m[1];
+    var _o = react_1.default.useState(function () { return maxLabel !== null && maxLabel !== void 0 ? maxLabel : max.toString(); }), maxValueLabel = _o[0], setMaxValueLabel = _o[1];
     react_1.default.useEffect(function () {
         setMaxValueLabel(maxLabel !== null && maxLabel !== void 0 ? maxLabel : max.toString());
     }, [maxLabel, max]);
-    var _o = react_1.default.useState(function () { return getDefaultTrackDisplay(trackDisplayMode, currentValues); }), trackDisplay = _o[0], setTrackDisplay = _o[1];
+    var _p = react_1.default.useState(function () { return getDefaultTrackDisplay(trackDisplayMode, currentValues); }), trackDisplay = _p[0], setTrackDisplay = _p[1];
     react_1.default.useEffect(function () {
         setTrackDisplay(getDefaultTrackDisplay(trackDisplayMode, currentValues));
     }, [trackDisplayMode, currentValues]);
@@ -133,10 +137,10 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
         }
         return [min, max];
     }, [max, min, step, thumbMode, currentValues]);
-    var _p = react_1.default.useState(undefined), activeThumbIndex = _p[0], setActiveThumbIndex = _p[1];
+    var _q = react_1.default.useState(undefined), activeThumbIndex = _q[0], setActiveThumbIndex = _q[1];
     var updateThumbValue = react_1.default.useCallback(function (event, callbackType) {
         if (containerRef.current && undefined !== activeThumbIndex) {
-            var percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX);
+            var percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX, event.clientY, orientation);
             var pointerValue = min + (max - min) * percent;
             pointerValue = roundValueToClosestStep(pointerValue, step, min);
             var _a = getAllowableThumbRange(activeThumbIndex), minVal = _a[0], maxVal = _a[1];
@@ -162,6 +166,7 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
         currentValues,
         onUpdate,
         onChange,
+        orientation,
     ]);
     var handlePointerMove = react_1.default.useCallback(function (event) {
         if (activeThumbIndex === undefined) {
@@ -195,7 +200,7 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
     }, [activeThumbIndex, updateThumbValue]);
     var handlePointerDownOnSlider = react_1.default.useCallback(function (event) {
         if (containerRef.current) {
-            var percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX);
+            var percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX, event.clientY, orientation);
             var pointerValue = min + (max - min) * percent;
             pointerValue = roundValueToClosestStep(pointerValue, step, min);
             var closestValueIndex = getClosestValueIndex(currentValues, pointerValue);
@@ -221,6 +226,7 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
         getAllowableThumbRange,
         onChange,
         onUpdate,
+        orientation,
     ]);
     (0, utils_1.useEventListener)('pointermove', handlePointerMove, (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
     (0, utils_1.useEventListener)('pointerup', handlePointerUp, (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
@@ -241,7 +247,7 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
                 ? outProps.content
                 : formatNumberValue(val, step, getNumDecimalPlaces) });
     }, [getNumDecimalPlaces, step, tooltipProps]);
-    return (react_1.default.createElement("div", __assign({ ref: ref, className: (0, classnames_1.default)('iui-slider-component-container', { 'iui-disabled': disabled }, className) }, rest),
+    return (react_1.default.createElement("div", __assign({ ref: ref, className: (0, classnames_1.default)('iui-slider-component-container', "iui-slider-".concat(orientation), { 'iui-disabled': disabled }, className) }, rest),
         minValueLabel && (react_1.default.createElement("span", { className: 'iui-slider-min' }, minValueLabel)),
         react_1.default.createElement("div", __assign({ ref: containerRef, className: (0, classnames_1.default)('iui-slider-container', {
                 'iui-grabbing': undefined !== activeThumbIndex,
@@ -251,9 +257,9 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
                 var _a;
                 var _b = getAllowableThumbRange(index), minVal = _b[0], maxVal = _b[1];
                 var thisThumbProps = thumbProps === null || thumbProps === void 0 ? void 0 : thumbProps(index);
-                return (react_1.default.createElement(Thumb_1.Thumb, { key: (_a = thisThumbProps === null || thisThumbProps === void 0 ? void 0 : thisThumbProps.id) !== null && _a !== void 0 ? _a : index, index: index, disabled: disabled, isActive: activeThumbIndex === index, onThumbActivated: onThumbActivated, onThumbValueChanged: onThumbValueChanged, minVal: minVal, maxVal: maxVal, value: thumbValue, tooltipProps: generateTooltipProps(index, thumbValue), thumbProps: thisThumbProps, step: step, sliderMin: min, sliderMax: max }));
+                return (react_1.default.createElement(Thumb_1.Thumb, { key: (_a = thisThumbProps === null || thisThumbProps === void 0 ? void 0 : thisThumbProps.id) !== null && _a !== void 0 ? _a : index, index: index, disabled: disabled, isActive: activeThumbIndex === index, onThumbActivated: onThumbActivated, onThumbValueChanged: onThumbValueChanged, minVal: minVal, maxVal: maxVal, value: thumbValue, tooltipProps: generateTooltipProps(index, thumbValue), thumbProps: thisThumbProps, step: step, sliderMin: min, sliderMax: max, orientation: orientation }));
             }),
-            react_1.default.createElement(Track_1.Track, { trackDisplayMode: trackDisplay, sliderMin: min, sliderMax: max, values: currentValues }),
+            react_1.default.createElement(Track_1.Track, { trackDisplayMode: trackDisplay, sliderMin: min, sliderMax: max, values: currentValues, orientation: orientation }),
             tickMarkArea),
         maxValueLabel && (react_1.default.createElement("span", { className: 'iui-slider-max' }, maxValueLabel))));
 });

package/cjs/core/Slider/Thumb.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { TooltipProps } from '../Tooltip';
+import { SliderProps } from './Slider';
 export declare type ThumbProps = {
     /**
      * Thumb value.
@@ -53,7 +54,7 @@ export declare type ThumbProps = {
      * Additional props for Thumb.
      */
     thumbProps?: React.HTMLAttributes<HTMLDivElement>;
-};
+} & Pick<SliderProps, 'orientation'>;
 /**
  * Thumb is a local component used to show and modify the values maintained by the Slider.
  * Only one Thumb can be active at a time. A Thumb is made active when the user selects

package/cjs/core/Slider/Thumb.js

@@ -39,7 +39,7 @@ var Tooltip_1 = require("../Tooltip");
  * it with pointer. Whenever a Thumb is active, focused, or hovered its tooltip is shown.
  */
 var Thumb = function (props) {
-    var value = props.value, index = props.index, minVal = props.minVal, maxVal = props.maxVal, step = props.step, sliderMin = props.sliderMin, sliderMax = props.sliderMax, isActive = props.isActive, onThumbActivated = props.onThumbActivated, onThumbValueChanged = props.onThumbValueChanged, tooltipProps = props.tooltipProps, thumbProps = props.thumbProps, disabled = props.disabled;
+    var value = props.value, index = props.index, minVal = props.minVal, maxVal = props.maxVal, step = props.step, sliderMin = props.sliderMin, sliderMax = props.sliderMax, isActive = props.isActive, onThumbActivated = props.onThumbActivated, onThumbValueChanged = props.onThumbValueChanged, tooltipProps = props.tooltipProps, thumbProps = props.thumbProps, disabled = props.disabled, orientation = props.orientation;
     var thumbRef = react_1.default.useRef(null);
     var handleOnKeyDown = react_1.default.useCallback(function (event) {
         if (disabled || event.altKey) {
@@ -79,7 +79,7 @@ var Thumb = function (props) {
         }
         return value;
     }, [sliderMax, sliderMin, value]);
-    var leftPercent = react_1.default.useMemo(function () {
+    var lowPercent = react_1.default.useMemo(function () {
         if (sliderMax === sliderMin) {
             return 0;
         }
@@ -87,6 +87,8 @@ var Thumb = function (props) {
     }, [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); } }))));
+        react_1.default.createElement("div", __assign({}, rest, { "data-index": index, ref: thumbRef, style: __assign(__assign({}, style), (orientation === 'horizontal'
+                ? { left: "".concat(lowPercent, "%") }
+                : { bottom: "".concat(lowPercent, "%") })), 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); } }))));
 };
 exports.Thumb = Thumb;

package/cjs/core/Slider/Track.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-import { TrackDisplayMode } from './Slider';
+import { SliderProps, TrackDisplayMode } from './Slider';
 export declare type TrackProps = {
     trackDisplayMode: TrackDisplayMode;
     sliderMin: number;
     sliderMax: number;
     values: number[];
+    orientation: SliderProps['orientation'];
 };
 /**
  * Track displays color segments above Rail. Which, if any, segments that are

package/cjs/core/Slider/Track.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -50,7 +61,7 @@ function generateSegments(values, min, max) {
  * colorized is based on `trackDisplayMode`.
  */
 var Track = function (props) {
-    var trackDisplayMode = props.trackDisplayMode, sliderMin = props.sliderMin, sliderMax = props.sliderMax, values = props.values;
+    var trackDisplayMode = props.trackDisplayMode, sliderMin = props.sliderMin, sliderMax = props.sliderMax, values = props.values, orientation = props.orientation;
     var _a = react_1.default.useState(function () {
         return generateSegments(values, sliderMin, sliderMax);
     }), segments = _a[0], setSegments = _a[1];
@@ -59,14 +70,22 @@ var Track = function (props) {
     }, [values, sliderMin, sliderMax]);
     return (react_1.default.createElement(react_1.default.Fragment, null, 'none' !== trackDisplayMode &&
         segments.map(function (segment, index) {
-            var leftPercent = segment.left >= sliderMin && sliderMax !== sliderMin
+            var lowPercent = segment.left >= sliderMin && sliderMax !== sliderMin
                 ? (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin)
                 : 0;
-            var rightPercent = segment.right >= sliderMin && sliderMax !== sliderMin
+            var highPercent = 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));
+            return (react_1.default.createElement(react_1.default.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (react_1.default.createElement("div", { className: 'iui-slider-track', style: __assign({}, (orientation === 'horizontal'
+                    ? {
+                        left: "".concat(lowPercent, "%"),
+                        right: "".concat(highPercent, "%"),
+                    }
+                    : {
+                        top: "".concat(highPercent, "%"),
+                        bottom: "".concat(lowPercent, "%"),
+                    })) })) : null));
         })));
 };
 exports.Track = Track;

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

@@ -185,7 +185,8 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
     /**
      * Function that returns index of the row that you want to scroll to.
      *
-     * It doesn't work with paginated tables and with lazy-loading.
+     * When using with lazy-loading table, you need to take care that row is already loaded.
+     * It doesn't work with paginated tables.
      * @beta
      * @example
      * <Table

package/cjs/core/Table/Table.js

@@ -333,7 +333,12 @@ var Table = function (props) {
             className: (0, classnames_1.default)('iui-table', (_a = {}, _a["iui-".concat(density)] = density !== 'default', _a), className),
             style: __assign({ minWidth: 0 }, style),
         }), ariaDataAttributes),
-            react_1.default.createElement("div", { className: 'iui-table-header-wrapper', ref: headerRef },
+            react_1.default.createElement("div", { className: 'iui-table-header-wrapper', ref: headerRef, onScroll: function () {
+                    if (headerRef.current && bodyRef.current) {
+                        bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
+                        updateStickyState();
+                    }
+                } },
                 react_1.default.createElement("div", { className: 'iui-table-header' }, headerGroups.slice(1).map(function (headerGroup) {
                     var headerGroupProps = headerGroup.getHeaderGroupProps({
                         className: 'iui-row',
@@ -354,7 +359,8 @@ var Table = function (props) {
                             (showFilterButton(column) ||
                                 showSortButton(column)) && (react_1.default.createElement("div", { className: 'iui-table-header-actions-container' },
                                 showFilterButton(column) && (react_1.default.createElement(filters_1.FilterToggle, { column: column, ownerDocument: ownerDocument })),
-                                showSortButton(column) && (react_1.default.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (react_1.default.createElement(SortDown_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (react_1.default.createElement(SortUp_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })))))),
+                                showSortButton(column) && (react_1.default.createElement("div", { className: 'iui-cell-end-icon' }, column.isSortedDesc ||
+                                    (!column.isSorted && column.sortDescFirst) ? (react_1.default.createElement(SortDown_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (react_1.default.createElement(SortUp_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })))))),
                             isResizable &&
                                 column.isResizerVisible &&
                                 index !== headerGroup.headers.length - 1 && (react_1.default.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-resizer' }),

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

@@ -1,5 +1,11 @@
 /// <reference types="react" />
 import { HeaderProps } from 'react-table';
+import { DropdownMenuProps } from '../../DropdownMenu';
+declare type ActionColumnProps = {
+    columnManager?: boolean | {
+        dropdownMenuProps: Omit<DropdownMenuProps, 'menuItems' | 'children'>;
+    };
+};
 /**
  * Action column that adds column manager to the Table header.
  * It is recommended to add this column to the end of the Table
@@ -19,9 +25,7 @@ import { HeaderProps } from 'react-table';
  *   ),
  * },
  */
-export declare const ActionColumn: <T extends Record<string, unknown>>({ columnManager, }?: {
-    columnManager?: boolean | undefined;
-}) => {
+export declare const ActionColumn: <T extends Record<string, unknown>>({ columnManager, }?: ActionColumnProps) => {
     id: string;
     disableResizing: boolean;
     disableGroupBy: boolean;
@@ -33,3 +37,4 @@ export declare const ActionColumn: <T extends Record<string, unknown>>({ columnM
     disableReordering: boolean;
     Header: ({ allColumns, dispatch, state }: HeaderProps<T>) => JSX.Element | null;
 };
+export {};

package/cjs/core/Table/columns/actionColumn.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -17,6 +28,7 @@ var Menu_1 = require("../../Menu");
 var Table_1 = require("../Table");
 var selectionColumn_1 = require("./selectionColumn");
 var expanderColumn_1 = require("./expanderColumn");
+var classnames_1 = __importDefault(require("classnames"));
 var ACTION_CELL_ID = 'iui-table-action';
 /**
  * Action column that adds column manager to the Table header.
@@ -52,6 +64,7 @@ var ActionColumn = function (_a) {
         Header: function (_a) {
             var allColumns = _a.allColumns, dispatch = _a.dispatch, state = _a.state;
             var _b = react_1.default.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+            var buttonRef = react_1.default.useRef(null);
             if (!columnManager) {
                 return null;
             }
@@ -77,13 +90,31 @@ var ActionColumn = function (_a) {
                         }
                         // Triggers an update to resize the widths of all visible columns
                         dispatch({ type: Table_1.tableResizeStartAction });
+                        // If some columns were resized and some columns visibility was enabled, then horizontal scrollbar appears
+                        // and table is scrolled to the very left which means our visibility dropdown menu is not visible.
+                        // So for better UX we need to scroll to that dropdown menu.
+                        queueMicrotask(function () {
+                            var _a;
+                            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+                        });
                     };
                     return (react_1.default.createElement(Menu_1.MenuItem, { key: column.id, icon: react_1.default.createElement(Checkbox_1.Checkbox, { checked: checked, disabled: column.disableToggleVisibility, onClick: function (e) { return e.stopPropagation(); }, onChange: onClick, "aria-labelledby": "iui-column-".concat(column.id) }), onClick: onClick, disabled: column.disableToggleVisibility },
                         react_1.default.createElement("div", { id: "iui-column-".concat(column.id) }, column.render('Header'))));
                 });
             };
-            return (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { menuItems: headerCheckBoxes, onHide: function () { return setIsOpen(false); }, onShow: function () { return setIsOpen(true); } },
-                react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', isActive: isOpen },
+            var dropdownMenuProps = typeof columnManager !== 'boolean'
+                ? columnManager.dropdownMenuProps
+                : {};
+            return (react_1.default.createElement(DropdownMenu_1.DropdownMenu, __assign({}, dropdownMenuProps, { menuItems: headerCheckBoxes, onHide: function (i) {
+                    var _a;
+                    setIsOpen(false);
+                    (_a = dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
+                }, onShow: function (i) {
+                    var _a;
+                    setIsOpen(true);
+                    (_a = dropdownMenuProps.onShow) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
+                }, style: __assign({ maxHeight: '315px' }, dropdownMenuProps.style), className: (0, classnames_1.default)('iui-scroll', dropdownMenuProps.className) }),
+                react_1.default.createElement(IconButton_1.IconButton, { styleType: 'borderless', isActive: isOpen, ref: buttonRef },
                     react_1.default.createElement(ColumnManager_1.default, null))));
         },
     };

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

@@ -7,5 +7,5 @@ declare type ScrollToRow<T extends Record<string, unknown>> = {
 declare type ScrollToRowProps<T extends Record<string, unknown>> = TableProps<T> & {
     page: Row<T>[];
 };
-export declare function useScrollToRow<T extends Record<string, unknown>>({ data, enableVirtualization, page, paginatorRenderer, scrollToRow, onBottomReached, }: ScrollToRowProps<T>): ScrollToRow<T>;
+export declare function useScrollToRow<T extends Record<string, unknown>>({ data, enableVirtualization, page, paginatorRenderer, scrollToRow, }: ScrollToRowProps<T>): ScrollToRow<T>;
 export {};

package/cjs/core/Table/hooks/useScrollToRow.js

@@ -10,7 +10,7 @@ exports.useScrollToRow = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 function useScrollToRow(_a) {
-    var data = _a.data, enableVirtualization = _a.enableVirtualization, page = _a.page, paginatorRenderer = _a.paginatorRenderer, scrollToRow = _a.scrollToRow, onBottomReached = _a.onBottomReached;
+    var data = _a.data, enableVirtualization = _a.enableVirtualization, page = _a.page, paginatorRenderer = _a.paginatorRenderer, scrollToRow = _a.scrollToRow;
     var rowRefs = react_1.default.useRef({});
     // Refs prevents from having `page` and `data` as dependencies
     // therefore we avoid unnecessary scroll to row.
@@ -21,12 +21,12 @@ function useScrollToRow(_a) {
     // For virtualized tables, all we need to do is pass the index of the item
     // to the VirtualScroll component
     var scrollToIndex = react_1.default.useMemo(function () {
-        if (!scrollToRow || paginatorRenderer || onBottomReached) {
+        if (!scrollToRow || paginatorRenderer) {
             return undefined;
         }
         var index = scrollToRow(pageRef.current, dataRef.current);
         return index < 0 ? undefined : index;
-    }, [onBottomReached, paginatorRenderer, scrollToRow]);
+    }, [paginatorRenderer, scrollToRow]);
     // For non-virtualized tables, we need to add a ref to each row
     // and scroll to the element
     react_1.default.useEffect(function () {

package/cjs/core/index.d.ts

@@ -1,5 +1,7 @@
 export { Alert } from './Alert';
 export type { AlertProps } from './Alert';
+export { Backdrop } from './Backdrop';
+export type { BackdropProps } from './Backdrop';
 export { Badge } from './Badge';
 export type { BadgeProps } from './Badge';
 export { Breadcrumbs } from './Breadcrumbs';
@@ -28,7 +30,7 @@ export { Fieldset } from './Fieldset';
 export type { FieldsetProps } from './Fieldset';
 export { FileUpload, FileUploadTemplate } from './FileUpload';
 export type { FileUploadProps, FileUploadTemplateProps } from './FileUpload';
-export { Footer } from './Footer';
+export { Footer, defaultFooterElements } from './Footer';
 export type { FooterProps, FooterElement, TitleTranslations } from './Footer';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
 export type { HeaderProps, HeaderBreadcrumbsProps, HeaderButtonProps, HeaderLogoProps, } from './Header';
@@ -59,7 +61,7 @@ export type { RadioProps } from './Radio';
 export { RadioTile, RadioTileGroup } from './RadioTiles';
 export type { RadioTileGroupProps, RadioTileProps } from './RadioTiles';
 export { Select } from './Select';
-export type { SelectProps, SelectOption, ItemRendererProps } from './Select';
+export type { SelectProps, SelectOption, ItemRendererProps, SelectValueChangeEvent, } from './Select';
 export { SideNavigation, SidenavButton, SidenavSubmenu, SidenavSubmenuHeader, } from './SideNavigation';
 export type { SideNavigationProps, SidenavButtonProps, SidenavSubmenuProps, SidenavSubmenuHeaderProps, } from './SideNavigation';
 export { SkipToContentLink } from './SkipToContentLink';

package/cjs/core/index.js

@@ -3,15 +3,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Alert = void 0;
-exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.ModalContent = exports.ModalButtonBar = exports.Modal = void 0;
-exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = void 0;
+exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.defaultFooterElements = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Backdrop = exports.Alert = void 0;
+exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = void 0;
+exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = exports.Text = exports.KbdKeys = 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 Alert_1 = require("./Alert");
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return Alert_1.Alert; } });
+var Backdrop_1 = require("./Backdrop");
+Object.defineProperty(exports, "Backdrop", { enumerable: true, get: function () { return Backdrop_1.Backdrop; } });
 var Badge_1 = require("./Badge");
 Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_1.Badge; } });
 var Breadcrumbs_1 = require("./Breadcrumbs");
@@ -52,6 +54,7 @@ Object.defineProperty(exports, "FileUpload", { enumerable: true, get: function (
 Object.defineProperty(exports, "FileUploadTemplate", { enumerable: true, get: function () { return FileUpload_1.FileUploadTemplate; } });
 var Footer_1 = require("./Footer");
 Object.defineProperty(exports, "Footer", { enumerable: true, get: function () { return Footer_1.Footer; } });
+Object.defineProperty(exports, "defaultFooterElements", { enumerable: true, get: function () { return Footer_1.defaultFooterElements; } });
 var Header_1 = require("./Header");
 Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return Header_1.Header; } });
 Object.defineProperty(exports, "HeaderBreadcrumbs", { enumerable: true, get: function () { return Header_1.HeaderBreadcrumbs; } });

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

@@ -42,7 +42,7 @@ var FocusTrap = function (props) {
             lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
         }
     };
-    return (react_1.default.createElement("div", null,
+    return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { tabIndex: 0, onFocus: onFirstFocus, "aria-hidden": true }),
         react_1.default.cloneElement(children, {
             ref: (0, useMergedRefs_1.mergeRefs)(children.ref, childRef),

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

@@ -44,7 +44,7 @@ var MiddleTextTruncation = function (props) {
     var _b = (0, useOverflow_1.useOverflow)(text), ref = _b[0], visibleCount = _b[1];
     var truncatedText = react_1.default.useMemo(function () {
         if (visibleCount < text.length) {
-            return "".concat(text.substr(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length)).concat(ELLIPSIS_CHAR).concat(text.substr(text.length - endCharsCount));
+            return "".concat(text.substring(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length)).concat(ELLIPSIS_CHAR).concat(text.substring(text.length - endCharsCount));
         }
         else {
             return text;

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

@@ -76,7 +76,10 @@ var useOverflow = function (items, disabled, orientation) {
         }
         else if (needsFullRerender.current) {
             var childrenSize = Array.from(containerRef.current.children).reduce(function (sum, child) { return sum + child["offset".concat(dimension)]; }, 0);
-            var avgItemSize = childrenSize / visibleCount;
+            // Previous `useEffect` might have updated visible count, but we still have old one
+            // If it is 0, lets try to update it with items length.
+            var currentVisibleCount = visibleCount || Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
+            var avgItemSize = childrenSize / currentVisibleCount;
             var visibleItems = Math.floor(availableSize / avgItemSize);
             if (!isNaN(visibleItems)) {
                 // Doubling the visible items to overflow the container. Just to be safe.

package/esm/core/Backdrop/Backdrop.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/backdrop.css';
+export declare type BackdropProps = {
+    /**
+     * Flag whether backdrop should be shown.
+     * @default true
+     */
+    isVisible?: boolean;
+} & React.ComponentPropsWithRef<'div'>;
+export declare const Backdrop: React.ForwardRefExoticComponent<Pick<BackdropProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "isVisible"> & React.RefAttributes<HTMLDivElement>>;

package/esm/core/Backdrop/Backdrop.js

@@ -0,0 +1,35 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/backdrop.css';
+export var Backdrop = React.forwardRef(function (props, ref) {
+    var _a = props.isVisible, isVisible = _a === void 0 ? true : _a, className = props.className, rest = __rest(props, ["isVisible", "className"]);
+    useTheme();
+    return (React.createElement("div", __assign({ className: cx('iui-backdrop', { 'iui-backdrop-visible': isVisible }, className), ref: ref }, rest)));
+});

package/esm/core/Backdrop/index.d.ts

@@ -0,0 +1,2 @@
+export { Backdrop } from './Backdrop';
+export type { BackdropProps } from './Backdrop';

package/esm/core/Backdrop/index.js

@@ -0,0 +1,5 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { Backdrop } from './Backdrop';

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -56,28 +56,15 @@ export var Breadcrumbs = React.forwardRef(function (props, ref) {
     useTheme();
     var _b = useOverflow(items), overflowRef = _b[0], visibleCount = _b[1];
     var refs = useMergedRefs(overflowRef, ref);
-    var Separator = function () { return (React.createElement("li", { className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator !== null && separator !== void 0 ? separator : React.createElement(SvgChevronRight, null))); };
-    var ListItem = function (_a) {
-        var _b;
-        var index = _a.index;
-        var item = items[index];
-        return (React.createElement("li", { className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' }, React.isValidElement(item)
-            ? React.cloneElement(item, {
-                'aria-current': ((_b = item.props['aria-current']) !== null && _b !== void 0 ? _b : currentIndex === index)
-                    ? 'location'
-                    : undefined,
-            })
-            : item));
-    };
     return (React.createElement("nav", __assign({ className: cx('iui-breadcrumbs', className), ref: refs, "aria-label": 'Breadcrumb' }, rest),
         React.createElement("ol", { className: 'iui-breadcrumbs-list' },
             visibleCount > 1 && (React.createElement(React.Fragment, null,
-                React.createElement(ListItem, { index: 0 }),
-                React.createElement(Separator, null))),
+                React.createElement(ListItem, { item: items[0], isActive: currentIndex === 0 }),
+                React.createElement(Separator, { separator: separator }))),
             items.length - visibleCount > 0 && (React.createElement(React.Fragment, null,
                 React.createElement("li", { className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' },
                     React.createElement("span", { className: 'iui-breadcrumbs-text' }, "\u2026")),
-                React.createElement(Separator, null))),
+                React.createElement(Separator, { separator: separator }))),
             items
                 .slice(visibleCount > 1
                 ? items.length - visibleCount + 1
@@ -87,8 +74,21 @@ export var Breadcrumbs = React.forwardRef(function (props, ref) {
                     ? 1 + (items.length - visibleCount) + _index
                     : items.length - 1;
                 return (React.createElement(React.Fragment, { key: index },
-                    React.createElement(ListItem, { index: index }),
-                    index < items.length - 1 && React.createElement(Separator, null)));
+                    React.createElement(ListItem, { item: items[index], isActive: currentIndex === index }),
+                    index < items.length - 1 && (React.createElement(Separator, { separator: separator }))));
             }))));
 });
+var ListItem = function (_a) {
+    var _b;
+    var item = _a.item, isActive = _a.isActive;
+    return (React.createElement("li", { className: 'iui-breadcrumbs-item iui-breadcrumbs-item-overrides' }, React.isValidElement(item)
+        ? React.cloneElement(item, {
+            'aria-current': ((_b = item.props['aria-current']) !== null && _b !== void 0 ? _b : isActive) ? 'location' : undefined,
+        })
+        : item));
+};
+var Separator = function (_a) {
+    var separator = _a.separator;
+    return (React.createElement("li", { className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator !== null && separator !== void 0 ? separator : React.createElement(SvgChevronRight, null)));
+};
 export default Breadcrumbs;

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -66,9 +66,16 @@ export var ButtonGroup = React.forwardRef(function (props, ref) {
             'iui-button-group': orientation === 'horizontal',
             'iui-button-group-vertical': orientation === 'vertical',
             'iui-button-group-overflow-x': !!overflowButton && orientation === 'horizontal',
-        }, className), "aria-orientation": orientation, ref: refs }, rest), !!overflowButton && visibleCount < items.length ? (React.createElement(React.Fragment, null,
-        overflowButton && overflowPlacement === 'start' && (React.createElement("div", null, overflowButton(visibleCount))),
-        items.slice(0, visibleCount - 1),
-        overflowButton && overflowPlacement === 'end' && (React.createElement("div", null, overflowButton(visibleCount))))) : (items)));
+        }, className), "aria-orientation": orientation, ref: refs }, rest),
+        React.createElement(React.Fragment, null,
+            visibleCount < items.length &&
+                overflowButton &&
+                overflowPlacement === 'start' && (React.createElement("div", null, overflowButton(visibleCount))),
+            visibleCount < items.length
+                ? items.slice(0, visibleCount - 1)
+                : items,
+            visibleCount < items.length &&
+                overflowButton &&
+                overflowPlacement === 'end' && (React.createElement("div", null, overflowButton(visibleCount))))));
 });
 export default ButtonGroup;