@itwin/itwinui-react 1.42.0 → 1.44.0

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

@@ -43,9 +43,6 @@ exports.Menu = react_1.default.forwardRef(function (props, ref) {
     var _c = react_1.default.useState(), focusedIndex = _c[0], setFocusedIndex = _c[1];
     var menuRef = react_1.default.useRef(null);
     var refs = (0, utils_1.useMergedRefs)(menuRef, ref);
-    react_1.default.useEffect(function () {
-        setFocusedIndex(null);
-    }, [children]);
     var getFocusableNodes = react_1.default.useCallback(function () {
         var focusableItems = (0, utils_1.getFocusableElements)(menuRef.current);
         // Filter out focusable elements that are inside each menu item, e.g. checkbox, anchor

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/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/cjs/core/Select/Select.js

@@ -37,6 +37,14 @@ var MenuItem_1 = require("../Menu/MenuItem");
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/inputs.css");
 var CaretDownSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall"));
+var SelectTag_1 = __importDefault(require("./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`.
@@ -89,13 +97,13 @@ var CaretDownSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/i
 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"]);
     (0, utils_1.useTheme)();
-    var _e = react_1.default.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_1.default.useState((_b = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _b !== void 0 ? _b : false), isOpen = _f[0], setIsOpen = _f[1];
     react_1.default.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_1.default.useState(0), minWidth = _f[0], setMinWidth = _f[1];
+    var _g = react_1.default.useState(0), minWidth = _g[0], setMinWidth = _g[1];
     var toggle = function () { return setIsOpen(function (open) { return !open; }); };
     var selectRef = react_1.default.useRef(null);
     var toggleButtonRef = react_1.default.useRef(null);
@@ -122,8 +130,10 @@ var Select = function (props) {
             case 'Enter':
             case ' ':
             case 'Spacebar':
-                toggle();
-                event.preventDefault();
+                if (event.target === selectRef.current) {
+                    toggle();
+                    event.preventDefault();
+                }
                 break;
             default:
                 break;
@@ -131,20 +141,41 @@ var Select = function (props) {
     };
     var menuItems = react_1.default.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_1.default.createElement(MenuItem_1.MenuItem, null, option.label));
-            return react_1.default.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_1.default.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_1.default.useMemo(function () {
+    }, [itemRenderer, multiple, onChange, options, value]);
+    var selectedItems = react_1.default.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_1.default.useCallback(function (item) {
+        return react_1.default.createElement(SelectTag_1.default, { key: item.label, label: item.label });
+    }, []);
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-input-with-icon', className), "aria-expanded": isOpen, "aria-haspopup": 'listbox', style: style }, rest),
         react_1.default.createElement(DropdownMenu_1.DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: (0, classnames_1.default)('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"), maxHeight: 315 }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen, onClickOutside: function (_, _a) {
                 var _b;
@@ -154,21 +185,13 @@ var Select = function (props) {
                 }
             } }),
             react_1.default.createElement("div", { ref: selectRef, className: (0, classnames_1.default)('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_1.default.createElement("span", { className: 'iui-content' }, placeholder),
-                selectedItem &&
-                    selectedItemRenderer &&
-                    selectedItemRenderer(selectedItem),
-                selectedItem && !selectedItemRenderer && (react_1.default.createElement(react_1.default.Fragment, null,
-                    (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) &&
-                        react_1.default.cloneElement(selectedItem.icon, {
-                            className: (0, classnames_1.default)(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon.props.className, 'iui-icon'),
-                        }),
-                    react_1.default.createElement("span", { className: 'iui-content' }, selectedItem.label))))),
+                (!selectedItems || selectedItems.length === 0) && (react_1.default.createElement("span", { className: 'iui-content' }, placeholder)),
+                isMultipleEnabled(selectedItems, multiple) ? (react_1.default.createElement(MultipleSelectButton, { selectedItems: selectedItems, selectedItemsRenderer: selectedItemRenderer, tagRenderer: tagRenderer })) : (react_1.default.createElement(SingleSelectButton, { selectedItem: selectedItems, selectedItemRenderer: selectedItemRenderer })))),
         react_1.default.createElement("span", { ref: toggleButtonRef, className: (0, classnames_1.default)('iui-end-icon', {
                 'iui-actionable': !disabled,
                 'iui-disabled': disabled,
@@ -177,4 +200,38 @@ var Select = function (props) {
             react_1.default.createElement(CaretDownSmall_1.default, { "aria-hidden": true }))));
 };
 exports.Select = Select;
+var SingleSelectButton = function (_a) {
+    var selectedItem = _a.selectedItem, selectedItemRenderer = _a.selectedItemRenderer;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        selectedItem &&
+            selectedItemRenderer &&
+            selectedItemRenderer(selectedItem),
+        selectedItem && !selectedItemRenderer && (react_1.default.createElement(react_1.default.Fragment, null,
+            selectedItem.icon &&
+                react_1.default.cloneElement(selectedItem.icon, {
+                    className: (0, classnames_1.default)(selectedItem.icon.props.className, 'iui-icon'),
+                }),
+            react_1.default.createElement("span", { className: 'iui-content' }, selectedItem.label)))));
+};
+var MultipleSelectButton = function (_a) {
+    var selectedItems = _a.selectedItems, selectedItemsRenderer = _a.selectedItemsRenderer, tagRenderer = _a.tagRenderer;
+    var selectedItemsElements = react_1.default.useMemo(function () {
+        if (!selectedItems) {
+            return [];
+        }
+        return selectedItems.map(function (item) { return tagRenderer(item); });
+    }, [selectedItems, tagRenderer]);
+    var _b = (0, utils_1.useOverflow)(selectedItemsElements), containerRef = _b[0], visibleCount = _b[1];
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        selectedItems &&
+            selectedItemsRenderer &&
+            selectedItemsRenderer(selectedItems),
+        selectedItems && !selectedItemsRenderer && (react_1.default.createElement("span", { className: 'iui-content' },
+            react_1.default.createElement("div", { className: 'iui-select-tag-container', ref: containerRef },
+                react_1.default.createElement(react_1.default.Fragment, null,
+                    visibleCount < selectedItemsElements.length
+                        ? selectedItemsElements.slice(0, visibleCount - 1)
+                        : selectedItemsElements,
+                    visibleCount < selectedItemsElements.length && (react_1.default.createElement(SelectTag_1.default, { label: "+".concat(selectedItemsElements.length - visibleCount + 1, " item(s)") }))))))));
+};
 exports.default = exports.Select;

package/cjs/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/cjs/core/Select/SelectTag.js

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

package/cjs/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/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;