@itwin/itwinui-react 1.41.0 → 1.43.1

package/cjs/core/Footer/FooterSeparator.js

@@ -0,0 +1,46 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FooterSeparator = 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 utils_1 = require("../utils");
+var classnames_1 = __importDefault(require("classnames"));
+require("@itwin/itwinui-css/css/footer.css");
+/**
+ * Footer separator. Recommended to use inside `Footer.List`.
+ */
+var FooterSeparator = function (props) {
+    var className = props.className, rest = __rest(props, ["className"]);
+    (0, utils_1.useTheme)();
+    return (react_1.default.createElement("li", __assign({ className: (0, classnames_1.default)('iui-legal-footer-separator', className), "aria-hidden": true }, rest)));
+};
+exports.FooterSeparator = FooterSeparator;
+exports.default = exports.FooterSeparator;

package/cjs/core/Footer/index.d.ts

@@ -1,4 +1,4 @@
-export { Footer } from './Footer';
+export { Footer, defaultFooterElements } from './Footer';
 export type { FooterElement, FooterProps, TitleTranslations } from './Footer';
 declare const _default: "./Footer";
 export default _default;

package/cjs/core/Footer/index.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Footer = void 0;
+exports.defaultFooterElements = exports.Footer = 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 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; } });
 exports.default = './Footer';

package/cjs/core/Modal/Modal.d.ts

@@ -1,13 +1,8 @@
 import React from 'react';
 import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/dialog.css';
-import '@itwin/itwinui-css/css/backdrop.css';
+import { DialogMainProps } from '../Dialog';
 export declare type ModalProps = {
-    /**
-     * Flag whether modal should be shown.
-     * @default false
-     */
-    isOpen?: boolean;
     /**
      * Modal title.
      */
@@ -46,16 +41,11 @@ export declare type ModalProps = {
      * @default document
      */
     ownerDocument?: Document;
-    /**
-     * Type of the modal.
-     * @default 'default'
-     */
-    styleType?: 'default' | 'fullPage';
     /**
      * Content of the modal.
      */
     children: React.ReactNode;
-} & Omit<CommonProps, 'title'>;
+} & Pick<DialogMainProps, 'isOpen' | 'styleType'> & Omit<CommonProps, 'title'>;
 /**
  * Modal component which can wrap any content.
  * @example
@@ -64,9 +54,9 @@ export declare type ModalProps = {
  *   title='My modal'
  *   onClose={onClose}
  * >
- *   <div>
+ *   <ModalContent>
  *     Here is my modal content
- *   </div>
+ *   </ModalContent>
  *   <ModalButtonBar>
  *     <Button styleType='high-visibility'>
  *       Primary button

package/cjs/core/Modal/Modal.js

@@ -32,13 +32,9 @@ exports.Modal = void 0;
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
-var classnames_1 = __importDefault(require("classnames"));
-var Close_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Close"));
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/dialog.css");
-require("@itwin/itwinui-css/css/backdrop.css");
-var IconButton_1 = require("../Buttons/IconButton");
-var react_transition_group_1 = require("react-transition-group");
+var Dialog_1 = require("../Dialog");
 /**
  * Modal component which can wrap any content.
  * @example
@@ -47,9 +43,9 @@ var react_transition_group_1 = require("react-transition-group");
  *   title='My modal'
  *   onClose={onClose}
  * >
- *   <div>
+ *   <ModalContent>
  *     Here is my modal content
- *   </div>
+ *   </ModalContent>
  *   <ModalButtonBar>
  *     <Button styleType='high-visibility'>
  *       Primary button
@@ -61,75 +57,14 @@ var react_transition_group_1 = require("react-transition-group");
  * </Modal>
  */
 var Modal = function (props) {
-    var _a = props.isOpen, isOpen = _a === void 0 ? false : _a, _b = props.isDismissible, isDismissible = _b === void 0 ? true : _b, _c = props.closeOnEsc, closeOnEsc = _c === void 0 ? true : _c, _d = props.closeOnExternalClick, closeOnExternalClick = _d === void 0 ? true : _d, onClose = props.onClose, title = props.title, onKeyDown = props.onKeyDown, id = props.id, className = props.className, style = props.style, children = props.children, _e = props.styleType, styleType = _e === void 0 ? 'default' : _e, _f = props.modalRootId, modalRootId = _f === void 0 ? 'iui-react-portal-container' : _f, _g = props.ownerDocument, ownerDocument = _g === void 0 ? (0, utils_1.getDocument)() : _g, rest = __rest(props, ["isOpen", "isDismissible", "closeOnEsc", "closeOnExternalClick", "onClose", "title", "onKeyDown", "id", "className", "style", "children", "styleType", "modalRootId", "ownerDocument"]);
+    var _a = props.isOpen, isOpen = _a === void 0 ? false : _a, _b = props.isDismissible, isDismissible = _b === void 0 ? true : _b, _c = props.closeOnEsc, closeOnEsc = _c === void 0 ? true : _c, _d = props.closeOnExternalClick, closeOnExternalClick = _d === void 0 ? true : _d, onClose = props.onClose, title = props.title, children = props.children, _e = props.modalRootId, modalRootId = _e === void 0 ? 'iui-react-portal-container' : _e, _f = props.ownerDocument, ownerDocument = _f === void 0 ? (0, utils_1.getDocument)() : _f, rest = __rest(props, ["isOpen", "isDismissible", "closeOnEsc", "closeOnExternalClick", "onClose", "title", "children", "modalRootId", "ownerDocument"]);
     (0, utils_1.useTheme)();
     var container = (0, utils_1.getContainer)(modalRootId, ownerDocument);
-    var overlayRef = react_1.default.useRef(null);
-    var originalBodyOverflow = react_1.default.useRef('');
-    var previousFocusedElement = react_1.default.useRef();
-    // Give focus to overlay for key handling to work.
-    react_1.default.useLayoutEffect(function () {
-        var _a, _b;
-        if (isOpen) {
-            previousFocusedElement.current = document.activeElement;
-            (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        else {
-            (_b = previousFocusedElement.current) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-        var modalOverlayRef = overlayRef.current;
-        return function () {
-            var _a;
-            (modalOverlayRef === null || modalOverlayRef === void 0 ? void 0 : modalOverlayRef.contains(document.activeElement)) &&
-                ((_a = previousFocusedElement.current) === null || _a === void 0 ? void 0 : _a.focus());
-        };
-    }, [isOpen]);
-    react_1.default.useEffect(function () {
-        if (!ownerDocument) {
-            return;
-        }
-        if (isOpen) {
-            originalBodyOverflow.current = ownerDocument.body.style.overflow;
-            ownerDocument.body.style.overflow = 'hidden';
-        }
-        else {
-            ownerDocument.body.style.overflow = originalBodyOverflow.current;
-        }
-        return function () {
-            ownerDocument.body.style.overflow = originalBodyOverflow.current;
-        };
-    }, [isOpen, ownerDocument]);
-    var handleKeyDown = function (event) {
-        // Prevents React from resetting its properties
-        event.persist();
-        if (isDismissible && closeOnEsc && event.key === 'Escape' && onClose) {
-            onClose(event);
-        }
-        if (onKeyDown) {
-            onKeyDown(event);
-        }
-    };
-    var handleMouseDown = function (event) {
-        // Prevents React from resetting its properties
-        event.persist();
-        if (event.target !== overlayRef.current) {
-            return;
-        }
-        if (isDismissible && closeOnExternalClick && onClose) {
-            onClose(event);
-        }
-    };
-    return !!container ? (react_dom_1.default.createPortal(react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-backdrop', { 'iui-backdrop-visible': isOpen }), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }),
-        react_1.default.createElement(utils_1.FocusTrap, null,
-            react_1.default.createElement("div", null,
-                react_1.default.createElement(react_transition_group_1.CSSTransition, { in: isOpen, classNames: 'iui-dialog-animation', timeout: { exit: 600 }, unmountOnExit: true },
-                    react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-dialog', { 'iui-dialog-default': styleType === 'default' }, { 'iui-dialog-full-page': styleType === 'fullPage' }, { 'iui-dialog-visible': isOpen }, className), id: id, style: style, role: 'dialog', "aria-modal": 'true' }, rest),
-                        react_1.default.createElement("div", { className: 'iui-dialog-title-bar' },
-                            react_1.default.createElement("div", { className: 'iui-dialog-title' }, title),
-                            isDismissible && (react_1.default.createElement(IconButton_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
-                                react_1.default.createElement(Close_1.default, null)))),
-                        children))))), container)) : (react_1.default.createElement(react_1.default.Fragment, null));
+    return !!container ? (react_dom_1.default.createPortal(react_1.default.createElement(Dialog_1.Dialog, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true },
+        react_1.default.createElement(Dialog_1.Dialog.Backdrop, null),
+        react_1.default.createElement(Dialog_1.Dialog.Main, __assign({ "aria-modal": true }, rest),
+            react_1.default.createElement(Dialog_1.Dialog.TitleBar, { titleText: title }),
+            children)), container)) : (react_1.default.createElement(react_1.default.Fragment, null));
 };
 exports.Modal = Modal;
 exports.default = exports.Modal;

package/cjs/core/Modal/ModalButtonBar.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/dialog.css';
 export declare type ModalButtonBarProps = {
     /**
      * Buttons in the modal bar.
@@ -10,5 +9,5 @@ export declare type ModalButtonBarProps = {
 /**
  * Container for Buttons in modal.
  */
-export declare const ModalButtonBar: (props: ModalButtonBarProps) => JSX.Element;
+export declare const ModalButtonBar: React.ForwardRefExoticComponent<Pick<import("../Dialog/DialogButtonBar").DialogButtonBarProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
 export default ModalButtonBar;

package/cjs/core/Modal/ModalButtonBar.js

@@ -1,46 +1,9 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalButtonBar = 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 classnames_1 = __importDefault(require("classnames"));
-var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/dialog.css");
+var DialogButtonBar_1 = require("../Dialog/DialogButtonBar");
 /**
  * Container for Buttons in modal.
  */
-var ModalButtonBar = function (props) {
-    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
-    (0, utils_1.useTheme)();
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-dialog-button-bar', className) }, rest), children));
-};
-exports.ModalButtonBar = ModalButtonBar;
+exports.ModalButtonBar = DialogButtonBar_1.DialogButtonBar;
 exports.default = exports.ModalButtonBar;

package/cjs/core/Modal/ModalContent.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/dialog.css';
 export declare type ModalContentProps = {
     /**
      * Main content in the `Modal`.
@@ -10,5 +9,5 @@ export declare type ModalContentProps = {
 /**
  * Container for content in `Modal`.
  */
-export declare const ModalContent: (props: ModalContentProps) => JSX.Element;
+export declare const ModalContent: React.ForwardRefExoticComponent<Pick<import("../Dialog/DialogContent").DialogContentProps, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
 export default ModalContent;

package/cjs/core/Modal/ModalContent.js

@@ -1,46 +1,9 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalContent = 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 classnames_1 = __importDefault(require("classnames"));
-var utils_1 = require("../utils");
-require("@itwin/itwinui-css/css/dialog.css");
+var DialogContent_1 = require("../Dialog/DialogContent");
 /**
  * Container for content in `Modal`.
  */
-var ModalContent = function (props) {
-    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
-    (0, utils_1.useTheme)();
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-dialog-content', className) }, rest), children));
-};
-exports.ModalContent = ModalContent;
+exports.ModalContent = DialogContent_1.DialogContent;
 exports.default = exports.ModalContent;

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

@@ -96,6 +96,11 @@ export declare type SliderProps = {
      * high-volume of updates will occur when dragging.
      */
     onUpdate?: (values: ReadonlyArray<number>) => void;
+    /**
+     * The orientation of slider
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
 } & Omit<CommonProps, 'title'>;
 /**
  * Slider component that display Thumbs for each value specified along a Rail.
@@ -195,5 +200,10 @@ export declare const Slider: React.ForwardRefExoticComponent<{
      * high-volume of updates will occur when dragging.
      */
     onUpdate?: ((values: ReadonlyArray<number>) => void) | undefined;
+    /**
+     * The orientation of slider
+     * @default 'horizontal'
+     */
+    orientation?: "horizontal" | "vertical" | undefined;
 } & Omit<CommonProps, "title"> & React.RefAttributes<HTMLDivElement>>;
 export default Slider;

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

@@ -182,6 +182,30 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
      * @default false
      */
     enableColumnReordering?: boolean;
+    /**
+     * Function that returns index of the row that you want to scroll to.
+     *
+     * 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
+     *   scrollToRow={React.useCallback(
+     *     (rows, data) => rows.findIndex((row) => row.original === data[250]),
+     *     []
+     *   )}
+     *   {...restProps}
+     * />
+     * @example
+     * <Table
+     *   scrollToRow={React.useCallback(
+     *     (rows, data) => rows.findIndex((row) => row.original.id === data[250].id),
+     *     []
+     *   )}
+     *   {...restProps}
+     * />
+     */
+    scrollToRow?: (rows: Row<T>[], data: T[]) => number;
 } & Omit<CommonProps, 'title'>;
 /**
  * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).