@itwin/itwinui-react 1.42.0 → 1.44.0

package/esm/core/Select/Select.d.ts

@@ -44,19 +44,38 @@ export declare type SelectOption<T> = {
      */
     [key: string]: unknown;
 } & CommonProps;
-export declare type SelectProps<T> = {
+export declare type SelectValueChangeEvent = 'added' | 'removed';
+export declare type SelectMultipleTypeProps<T> = {
     /**
-     * Array of options that populates the select menu.
+     * Enable multiple selection.
+     * @default false
      */
-    options: SelectOption<T>[];
+    multiple?: false;
+    /**
+     * Custom renderer for the selected item in select.
+     * If `multiple` is enabled, it will give array of options to render.
+     */
+    selectedItemRenderer?: (option: SelectOption<T>) => JSX.Element;
     /**
      * Selected option value.
+     * If `multiple` is enabled, it is an array of values.
      */
     value?: T;
     /**
      * Callback function handling change event on select.
      */
     onChange?: (value: T) => void;
+} | {
+    multiple: true;
+    selectedItemRenderer?: (options: SelectOption<T>[]) => JSX.Element;
+    value?: T[];
+    onChange?: (value: T, event: SelectValueChangeEvent) => void;
+};
+export declare type SelectProps<T> = {
+    /**
+     * Array of options that populates the select menu.
+     */
+    options: SelectOption<T>[];
     /**
      * Placeholder when no item is selected.
      */
@@ -79,10 +98,6 @@ export declare type SelectProps<T> = {
      * Custom renderer for an item in the dropdown list. `MenuItem` item props are going to be populated if not provided.
      */
     itemRenderer?: (option: SelectOption<T>, itemProps: ItemRendererProps) => JSX.Element;
-    /**
-     * Custom renderer for the selected item in select.
-     */
-    selectedItemRenderer?: (option: SelectOption<T>) => JSX.Element;
     /**
      * Custom class for menu.
      */
@@ -96,7 +111,7 @@ export declare type SelectProps<T> = {
      * @see [tippy.js props](https://atomiks.github.io/tippyjs/v6/all-props/)
      */
     popoverProps?: Omit<PopoverProps, 'onShow' | 'onHide' | 'disabled'>;
-} & Pick<PopoverProps, 'onShow' | 'onHide'> & Omit<React.ComponentPropsWithoutRef<'div'>, 'size' | 'disabled' | 'placeholder' | 'onChange'>;
+} & SelectMultipleTypeProps<T> & Pick<PopoverProps, 'onShow' | 'onHide'> & Omit<React.ComponentPropsWithoutRef<'div'>, 'size' | 'disabled' | 'placeholder' | 'onChange'>;
 /**
  * Select component to select value from options.
  * Generic type is used for value. It prevents you from mistakenly using other types in `options`, `value` and `onChange`.

package/esm/core/Select/Select.js

@@ -28,9 +28,17 @@ import React from 'react';
 import cx from 'classnames';
 import { DropdownMenu } from '../DropdownMenu';
 import { MenuItem } from '../Menu/MenuItem';
-import { useTheme } from '../utils';
+import { useTheme, useOverflow, } from '../utils';
 import '@itwin/itwinui-css/css/inputs.css';
 import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall';
+import SelectTag from './SelectTag';
+var isMultipleEnabled = function (variable, multiple) {
+    return multiple;
+};
+// Type guard for multiple did not work
+var isSingleOnChange = function (onChange, multiple) {
+    return !multiple;
+};
 /**
  * Select component to select value from options.
  * Generic type is used for value. It prevents you from mistakenly using other types in `options`, `value` and `onChange`.
@@ -83,13 +91,13 @@ import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSma
 export var Select = function (props) {
     var _a;
     var _b;
-    var options = props.options, value = props.value, onChange = props.onChange, placeholder = props.placeholder, _c = props.disabled, disabled = _c === void 0 ? false : _c, size = props.size, _d = props.setFocus, setFocus = _d === void 0 ? false : _d, itemRenderer = props.itemRenderer, selectedItemRenderer = props.selectedItemRenderer, className = props.className, style = props.style, menuClassName = props.menuClassName, menuStyle = props.menuStyle, onShow = props.onShow, onHide = props.onHide, popoverProps = props.popoverProps, rest = __rest(props, ["options", "value", "onChange", "placeholder", "disabled", "size", "setFocus", "itemRenderer", "selectedItemRenderer", "className", "style", "menuClassName", "menuStyle", "onShow", "onHide", "popoverProps"]);
+    var options = props.options, value = props.value, onChange = props.onChange, placeholder = props.placeholder, _c = props.disabled, disabled = _c === void 0 ? false : _c, size = props.size, _d = props.setFocus, setFocus = _d === void 0 ? false : _d, itemRenderer = props.itemRenderer, selectedItemRenderer = props.selectedItemRenderer, className = props.className, style = props.style, menuClassName = props.menuClassName, menuStyle = props.menuStyle, onShow = props.onShow, onHide = props.onHide, popoverProps = props.popoverProps, _e = props.multiple, multiple = _e === void 0 ? false : _e, rest = __rest(props, ["options", "value", "onChange", "placeholder", "disabled", "size", "setFocus", "itemRenderer", "selectedItemRenderer", "className", "style", "menuClassName", "menuStyle", "onShow", "onHide", "popoverProps", "multiple"]);
     useTheme();
-    var _e = React.useState((_b = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _b !== void 0 ? _b : false), isOpen = _e[0], setIsOpen = _e[1];
+    var _f = React.useState((_b = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _b !== void 0 ? _b : false), isOpen = _f[0], setIsOpen = _f[1];
     React.useEffect(function () {
         setIsOpen(function (open) { var _a; return (_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _a !== void 0 ? _a : open; });
     }, [popoverProps]);
-    var _f = React.useState(0), minWidth = _f[0], setMinWidth = _f[1];
+    var _g = React.useState(0), minWidth = _g[0], setMinWidth = _g[1];
     var toggle = function () { return setIsOpen(function (open) { return !open; }); };
     var selectRef = React.useRef(null);
     var toggleButtonRef = React.useRef(null);
@@ -116,8 +124,10 @@ export var Select = function (props) {
             case 'Enter':
             case ' ':
             case 'Spacebar':
-                toggle();
-                event.preventDefault();
+                if (event.target === selectRef.current) {
+                    toggle();
+                    event.preventDefault();
+                }
                 break;
             default:
                 break;
@@ -125,20 +135,41 @@ export var Select = function (props) {
     };
     var menuItems = React.useCallback(function (close) {
         return options.map(function (option, index) {
-            var isSelected = value === option.value;
+            var _a;
+            var isSelected = isMultipleEnabled(value, multiple)
+                ? (_a = value === null || value === void 0 ? void 0 : value.includes(option.value)) !== null && _a !== void 0 ? _a : false
+                : value === option.value;
             var menuItem = itemRenderer ? (itemRenderer(option, { close: close, isSelected: isSelected })) : (React.createElement(MenuItem, null, option.label));
-            return React.cloneElement(menuItem, __assign(__assign({ key: "".concat(option.label, "-").concat(index), isSelected: isSelected, onClick: function () {
-                    !option.disabled && (onChange === null || onChange === void 0 ? void 0 : onChange(option.value));
-                    close();
-                }, ref: function (el) { return isSelected && (el === null || el === void 0 ? void 0 : el.scrollIntoView()); }, role: 'option' }, option), menuItem.props));
+            var label = option.label, restOption = __rest(option, ["label"]);
+            return React.cloneElement(menuItem, __assign(__assign({ key: "".concat(label, "-").concat(index), isSelected: isSelected, onClick: function () {
+                    if (option.disabled) {
+                        return;
+                    }
+                    if (isSingleOnChange(onChange, multiple)) {
+                        onChange === null || onChange === void 0 ? void 0 : onChange(option.value);
+                        close();
+                    }
+                    else {
+                        onChange === null || onChange === void 0 ? void 0 : onChange(option.value, isSelected ? 'removed' : 'added');
+                    }
+                }, ref: function (el) {
+                    if (isSelected && !multiple) {
+                        el === null || el === void 0 ? void 0 : el.scrollIntoView();
+                    }
+                }, role: 'option' }, restOption), menuItem.props));
         });
-    }, [itemRenderer, onChange, options, value]);
-    var selectedItem = React.useMemo(function () {
+    }, [itemRenderer, multiple, onChange, options, value]);
+    var selectedItems = React.useMemo(function () {
         if (value == null) {
             return undefined;
         }
-        return options.find(function (option) { return option.value === value; });
-    }, [options, value]);
+        return isMultipleEnabled(value, multiple)
+            ? options.filter(function (option) { return value.some(function (val) { return val === option.value; }); })
+            : options.find(function (option) { return option.value === value; });
+    }, [multiple, options, value]);
+    var tagRenderer = React.useCallback(function (item) {
+        return React.createElement(SelectTag, { key: item.label, label: item.label });
+    }, []);
     return (React.createElement("div", __assign({ className: cx('iui-input-with-icon', className), "aria-expanded": isOpen, "aria-haspopup": 'listbox', style: style }, rest),
         React.createElement(DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: cx('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"), maxHeight: 315 }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen, onClickOutside: function (_, _a) {
                 var _b;
@@ -148,21 +179,13 @@ export var Select = function (props) {
                 }
             } }),
             React.createElement("div", { ref: selectRef, className: cx('iui-select-button', (_a = {
-                        'iui-placeholder': !selectedItem && !!placeholder,
+                        'iui-placeholder': (!selectedItems || selectedItems.length === 0) && !!placeholder,
                         'iui-disabled': disabled
                     },
                     _a["iui-".concat(size)] = !!size,
                     _a)), onClick: function () { return !disabled && toggle(); }, onKeyDown: function (e) { return !disabled && onKeyDown(e, toggle); }, tabIndex: !disabled ? 0 : undefined },
-                !selectedItem && React.createElement("span", { className: 'iui-content' }, placeholder),
-                selectedItem &&
-                    selectedItemRenderer &&
-                    selectedItemRenderer(selectedItem),
-                selectedItem && !selectedItemRenderer && (React.createElement(React.Fragment, null,
-                    (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) &&
-                        React.cloneElement(selectedItem.icon, {
-                            className: cx(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon.props.className, 'iui-icon'),
-                        }),
-                    React.createElement("span", { className: 'iui-content' }, selectedItem.label))))),
+                (!selectedItems || selectedItems.length === 0) && (React.createElement("span", { className: 'iui-content' }, placeholder)),
+                isMultipleEnabled(selectedItems, multiple) ? (React.createElement(MultipleSelectButton, { selectedItems: selectedItems, selectedItemsRenderer: selectedItemRenderer, tagRenderer: tagRenderer })) : (React.createElement(SingleSelectButton, { selectedItem: selectedItems, selectedItemRenderer: selectedItemRenderer })))),
         React.createElement("span", { ref: toggleButtonRef, className: cx('iui-end-icon', {
                 'iui-actionable': !disabled,
                 'iui-disabled': disabled,
@@ -170,4 +193,38 @@ export var Select = function (props) {
             }), onClick: function () { return !disabled && toggle(); } },
             React.createElement(SvgCaretDownSmall, { "aria-hidden": true }))));
 };
+var SingleSelectButton = function (_a) {
+    var selectedItem = _a.selectedItem, selectedItemRenderer = _a.selectedItemRenderer;
+    return (React.createElement(React.Fragment, null,
+        selectedItem &&
+            selectedItemRenderer &&
+            selectedItemRenderer(selectedItem),
+        selectedItem && !selectedItemRenderer && (React.createElement(React.Fragment, null,
+            selectedItem.icon &&
+                React.cloneElement(selectedItem.icon, {
+                    className: cx(selectedItem.icon.props.className, 'iui-icon'),
+                }),
+            React.createElement("span", { className: 'iui-content' }, selectedItem.label)))));
+};
+var MultipleSelectButton = function (_a) {
+    var selectedItems = _a.selectedItems, selectedItemsRenderer = _a.selectedItemsRenderer, tagRenderer = _a.tagRenderer;
+    var selectedItemsElements = React.useMemo(function () {
+        if (!selectedItems) {
+            return [];
+        }
+        return selectedItems.map(function (item) { return tagRenderer(item); });
+    }, [selectedItems, tagRenderer]);
+    var _b = useOverflow(selectedItemsElements), containerRef = _b[0], visibleCount = _b[1];
+    return (React.createElement(React.Fragment, null,
+        selectedItems &&
+            selectedItemsRenderer &&
+            selectedItemsRenderer(selectedItems),
+        selectedItems && !selectedItemsRenderer && (React.createElement("span", { className: 'iui-content' },
+            React.createElement("div", { className: 'iui-select-tag-container', ref: containerRef },
+                React.createElement(React.Fragment, null,
+                    visibleCount < selectedItemsElements.length
+                        ? selectedItemsElements.slice(0, visibleCount - 1)
+                        : selectedItemsElements,
+                    visibleCount < selectedItemsElements.length && (React.createElement(SelectTag, { label: "+".concat(selectedItemsElements.length - visibleCount + 1, " item(s)") }))))))));
+};
 export default Select;

package/esm/core/Select/SelectTag.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/inputs.css';
+export declare type SelectTagProps = {
+    /**
+     * Text inside the tag.
+     */
+    label: string;
+} & CommonProps;
+/**
+ * Tag for showing selected value in `Select`.
+ * @private
+ */
+export declare const SelectTag: (props: SelectTagProps) => JSX.Element;
+export default SelectTag;

package/esm/core/Select/SelectTag.js

@@ -0,0 +1,41 @@
+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 cx from 'classnames';
+import React from 'react';
+import { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/inputs.css';
+/**
+ * Tag for showing selected value in `Select`.
+ * @private
+ */
+export var SelectTag = function (props) {
+    var className = props.className, label = props.label, rest = __rest(props, ["className", "label"]);
+    useTheme();
+    return (React.createElement("span", __assign({ className: cx('iui-select-tag', className) }, rest),
+        React.createElement("span", { className: 'iui-select-tag-label' }, label)));
+};
+export default SelectTag;

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

@@ -1,4 +1,4 @@
 export { Select } from './Select';
-export type { SelectProps, SelectOption, ItemRendererProps } from './Select';
+export type { SelectProps, SelectOption, ItemRendererProps, SelectValueChangeEvent, } from './Select';
 declare const _default: "./Select";
 export default _default;

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

@@ -39,9 +39,13 @@ import { useTheme, getBoundedValue, useEventListener, } from '../utils';
 import '@itwin/itwinui-css/css/slider.css';
 import { Track } from './Track';
 import { Thumb } from './Thumb';
-var getPercentageOfRectangle = function (rect, pointer) {
-    var position = 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 = getBoundedValue(pointerX, rect.left, rect.right);
+        return (position_1 - rect.left) / rect.width;
+    }
+    var position = getBoundedValue(pointerY, rect.top, rect.bottom);
+    return (rect.bottom - position) / rect.height;
 };
 var getClosestValueIndex = function (values, pointerValue) {
     if (1 === values.length) {
@@ -88,20 +92,20 @@ var focusThumb = function (sliderContainer, activeIndex) {
  */
 export var Slider = React.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.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.useState(values), currentValues = _l[0], setCurrentValues = _l[1];
     React.useEffect(function () {
         setCurrentValues(values);
     }, [values]);
-    var _l = React.useState(function () { return minLabel !== null && minLabel !== void 0 ? minLabel : min.toString(); }), minValueLabel = _l[0], setMinValueLabel = _l[1];
+    var _m = React.useState(function () { return minLabel !== null && minLabel !== void 0 ? minLabel : min.toString(); }), minValueLabel = _m[0], setMinValueLabel = _m[1];
     React.useEffect(function () {
         setMinValueLabel(minLabel !== null && minLabel !== void 0 ? minLabel : min.toString());
     }, [minLabel, min]);
-    var _m = React.useState(function () { return maxLabel !== null && maxLabel !== void 0 ? maxLabel : max.toString(); }), maxValueLabel = _m[0], setMaxValueLabel = _m[1];
+    var _o = React.useState(function () { return maxLabel !== null && maxLabel !== void 0 ? maxLabel : max.toString(); }), maxValueLabel = _o[0], setMaxValueLabel = _o[1];
     React.useEffect(function () {
         setMaxValueLabel(maxLabel !== null && maxLabel !== void 0 ? maxLabel : max.toString());
     }, [maxLabel, max]);
-    var _o = React.useState(function () { return getDefaultTrackDisplay(trackDisplayMode, currentValues); }), trackDisplay = _o[0], setTrackDisplay = _o[1];
+    var _p = React.useState(function () { return getDefaultTrackDisplay(trackDisplayMode, currentValues); }), trackDisplay = _p[0], setTrackDisplay = _p[1];
     React.useEffect(function () {
         setTrackDisplay(getDefaultTrackDisplay(trackDisplayMode, currentValues));
     }, [trackDisplayMode, currentValues]);
@@ -127,10 +131,10 @@ export var Slider = React.forwardRef(function (props, ref) {
         }
         return [min, max];
     }, [max, min, step, thumbMode, currentValues]);
-    var _p = React.useState(undefined), activeThumbIndex = _p[0], setActiveThumbIndex = _p[1];
+    var _q = React.useState(undefined), activeThumbIndex = _q[0], setActiveThumbIndex = _q[1];
     var updateThumbValue = React.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];
@@ -156,6 +160,7 @@ export var Slider = React.forwardRef(function (props, ref) {
         currentValues,
         onUpdate,
         onChange,
+        orientation,
     ]);
     var handlePointerMove = React.useCallback(function (event) {
         if (activeThumbIndex === undefined) {
@@ -189,7 +194,7 @@ export var Slider = React.forwardRef(function (props, ref) {
     }, [activeThumbIndex, updateThumbValue]);
     var handlePointerDownOnSlider = React.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);
@@ -215,6 +220,7 @@ export var Slider = React.forwardRef(function (props, ref) {
         getAllowableThumbRange,
         onChange,
         onUpdate,
+        orientation,
     ]);
     useEventListener('pointermove', handlePointerMove, (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
     useEventListener('pointerup', handlePointerUp, (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
@@ -235,7 +241,7 @@ export var Slider = React.forwardRef(function (props, ref) {
                 ? outProps.content
                 : formatNumberValue(val, step, getNumDecimalPlaces) });
     }, [getNumDecimalPlaces, step, tooltipProps]);
-    return (React.createElement("div", __assign({ ref: ref, className: cx('iui-slider-component-container', { 'iui-disabled': disabled }, className) }, rest),
+    return (React.createElement("div", __assign({ ref: ref, className: cx('iui-slider-component-container', "iui-slider-".concat(orientation), { 'iui-disabled': disabled }, className) }, rest),
         minValueLabel && (React.createElement("span", { className: 'iui-slider-min' }, minValueLabel)),
         React.createElement("div", __assign({ ref: containerRef, className: cx('iui-slider-container', {
                 'iui-grabbing': undefined !== activeThumbIndex,
@@ -245,9 +251,9 @@ export var Slider = React.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.createElement(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.createElement(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.createElement(Track, { trackDisplayMode: trackDisplay, sliderMin: min, sliderMax: max, values: currentValues }),
+            React.createElement(Track, { trackDisplayMode: trackDisplay, sliderMin: min, sliderMax: max, values: currentValues, orientation: orientation }),
             tickMarkArea),
         maxValueLabel && (React.createElement("span", { className: 'iui-slider-max' }, maxValueLabel))));
 });

package/esm/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/esm/core/Slider/Thumb.js

@@ -33,7 +33,7 @@ import { Tooltip } from '../Tooltip';
  * it with pointer. Whenever a Thumb is active, focused, or hovered its tooltip is shown.
  */
 export 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.useRef(null);
     var handleOnKeyDown = React.useCallback(function (event) {
         if (disabled || event.altKey) {
@@ -73,7 +73,7 @@ export var Thumb = function (props) {
         }
         return value;
     }, [sliderMax, sliderMin, value]);
-    var leftPercent = React.useMemo(function () {
+    var lowPercent = React.useMemo(function () {
         if (sliderMax === sliderMin) {
             return 0;
         }
@@ -81,5 +81,7 @@ export var Thumb = function (props) {
     }, [adjustedValue, sliderMax, sliderMin]);
     var _c = thumbProps || {}, style = _c.style, className = _c.className, rest = __rest(_c, ["style", "className"]);
     return (React.createElement(Tooltip, __assign({ visible: isActive || hasFocus || isHovered, placement: 'top' }, tooltipProps),
-        React.createElement("div", __assign({}, rest, { "data-index": index, ref: thumbRef, style: __assign(__assign({}, style), { left: "".concat(leftPercent, "%") }), className: cx('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.createElement("div", __assign({}, rest, { "data-index": index, ref: thumbRef, style: __assign(__assign({}, style), (orientation === 'horizontal'
+                ? { left: "".concat(lowPercent, "%") }
+                : { bottom: "".concat(lowPercent, "%") })), className: cx('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/esm/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/esm/core/Slider/Track.js

@@ -1,3 +1,14 @@
+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)) {
@@ -44,7 +55,7 @@ function generateSegments(values, min, max) {
  * colorized is based on `trackDisplayMode`.
  */
 export 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.useState(function () {
         return generateSegments(values, sliderMin, sliderMax);
     }), segments = _a[0], setSegments = _a[1];
@@ -53,13 +64,21 @@ export var Track = function (props) {
     }, [values, sliderMin, sliderMax]);
     return (React.createElement(React.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.createElement(React.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (React.createElement("div", { className: 'iui-slider-track', style: { left: "".concat(leftPercent, "%"), right: "".concat(rightPercent, "%") } })) : null));
+            return (React.createElement(React.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (React.createElement("div", { className: 'iui-slider-track', style: __assign({}, (orientation === 'horizontal'
+                    ? {
+                        left: "".concat(lowPercent, "%"),
+                        right: "".concat(highPercent, "%"),
+                    }
+                    : {
+                        top: "".concat(highPercent, "%"),
+                        bottom: "".concat(lowPercent, "%"),
+                    })) })) : null));
         })));
 };

package/esm/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/esm/core/Table/Table.js

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

package/esm/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 {};