@itwin/itwinui-react 2.0.0-dev.1 → 2.0.0-dev.3

package/cjs/core/ProgressIndicators/ProgressRadial/ProgressRadial.js

@@ -1,26 +1,4 @@
 "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 };
 };
@@ -30,9 +8,9 @@ exports.ProgressRadial = 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");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/progress-indicator.css");
 /**
  * Circular Progress Indicator
@@ -49,27 +27,25 @@ require("@itwin/itwinui-css/css/progress-indicator.css");
  * Small
  * <ProgressRadial size={'small'} indeterminate/>
  */
-var ProgressRadial = function (props) {
-    var _a;
-    var _b = props.value, value = _b === void 0 ? 0 : _b, _c = props.indeterminate, indeterminate = _c === void 0 ? false : _c, status = props.status, children = props.children, _d = props.size, size = _d === void 0 ? '' : _d, className = props.className, style = props.style, rest = __rest(props, ["value", "indeterminate", "status", "children", "size", "className", "style"]);
+const ProgressRadial = (props) => {
+    const { value = 0, indeterminate = false, status, children, size = '', className, style, ...rest } = props;
     (0, utils_1.useTheme)();
-    var statusMap = {
+    const statusMap = {
         negative: react_1.default.createElement(utils_1.SvgImportantSmall, { "aria-hidden": true }),
         positive: react_1.default.createElement(utils_1.SvgCheckmarkSmall, { "aria-hidden": true }),
     };
-    var fillStyle = {
+    const fillStyle = {
         strokeDashoffset: status === 'positive'
             ? 0
             : 88 -
                 Math.min(88, Math.max(0, indeterminate ? 88 : (88 * value) / 100)),
     };
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-progress-indicator-radial', (_a = {
-                'iui-determinate': !indeterminate,
-                'iui-indeterminate': indeterminate
-            },
-            _a["iui-".concat(size)] = !!size,
-            _a["iui-".concat(status)] = !!status,
-            _a), className), style: style }, rest),
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-progress-indicator-radial', {
+            'iui-determinate': !indeterminate,
+            'iui-indeterminate': indeterminate,
+            [`iui-${size}`]: !!size,
+            [`iui-${status}`]: !!status,
+        }, className), style: style, ...rest },
         react_1.default.createElement("svg", { className: 'iui-radial', viewBox: '0 0 32 32', "aria-hidden": 'true' },
             react_1.default.createElement("circle", { className: 'iui-track', cx: '16', cy: '16', r: '14' }),
             react_1.default.createElement("circle", { className: 'iui-fill', cx: '16', cy: '16', r: '14', style: fillStyle })),

package/cjs/core/Radio/Radio.js

@@ -1,26 +1,4 @@
 "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 };
 };
@@ -30,9 +8,9 @@ exports.Radio = 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");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/radio.css");
 /**
  * Basic radio input component
@@ -44,19 +22,18 @@ require("@itwin/itwinui-css/css/radio.css");
  * <Radio status='warning' label='Warning' />
  * <Radio status='negative' label='Negative' />
  */
-exports.Radio = react_1.default.forwardRef(function (props, ref) {
-    var _a, _b;
-    var className = props.className, _c = props.disabled, disabled = _c === void 0 ? false : _c, label = props.label, status = props.status, style = props.style, _d = props.setFocus, setFocus = _d === void 0 ? false : _d, rest = __rest(props, ["className", "disabled", "label", "status", "style", "setFocus"]);
+exports.Radio = react_1.default.forwardRef((props, ref) => {
+    const { className, disabled = false, label, status, style, setFocus = false, ...rest } = props;
     (0, utils_1.useTheme)();
-    var inputElementRef = react_1.default.useRef(null);
-    var refs = (0, utils_1.useMergedRefs)(inputElementRef, ref);
-    react_1.default.useEffect(function () {
+    const inputElementRef = react_1.default.useRef(null);
+    const refs = (0, utils_1.useMergedRefs)(inputElementRef, ref);
+    react_1.default.useEffect(() => {
         if (inputElementRef.current && setFocus) {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
-    var radio = (react_1.default.createElement("input", __assign({ className: (0, classnames_1.default)('iui-radio', className && (_a = {}, _a[className] = !label, _a)), style: !label ? style : undefined, disabled: disabled, type: 'radio', ref: refs }, rest)));
-    return !label ? (radio) : (react_1.default.createElement("label", { className: (0, classnames_1.default)('iui-radio-wrapper', (_b = { 'iui-disabled': disabled }, _b["iui-".concat(status)] = !!status, _b), className), style: style },
+    const radio = (react_1.default.createElement("input", { className: (0, classnames_1.default)('iui-radio', className && { [className]: !label }), style: !label ? style : undefined, disabled: disabled, type: 'radio', ref: refs, ...rest }));
+    return !label ? (radio) : (react_1.default.createElement("label", { className: (0, classnames_1.default)('iui-radio-wrapper', { 'iui-disabled': disabled, [`iui-${status}`]: !!status }, className), style: style },
         radio,
         label && react_1.default.createElement("span", { className: 'iui-radio-label' }, label)));
 });

package/cjs/core/RadioTiles/RadioTile.js

@@ -1,26 +1,4 @@
 "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 };
 };
@@ -30,27 +8,27 @@ exports.RadioTile = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var classnames_1 = __importDefault(require("classnames"));
-var react_1 = __importDefault(require("react"));
-var utils_1 = require("../utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/radio-tile.css");
 /**
  * RadioTile component to be used in RadioTileGroup component
  * @example
  * <RadioTile label='My tile' description='Some info' icon={<SvgSmileyHappy />} />
  */
-exports.RadioTile = react_1.default.forwardRef(function (props, ref) {
-    var icon = props.icon, label = props.label, description = props.description, _a = props.setFocus, setFocus = _a === void 0 ? false : _a, className = props.className, style = props.style, rest = __rest(props, ["icon", "label", "description", "setFocus", "className", "style"]);
+exports.RadioTile = react_1.default.forwardRef((props, ref) => {
+    const { icon, label, description, setFocus = false, className, style, ...rest } = props;
     (0, utils_1.useTheme)();
-    var inputElementRef = react_1.default.useRef(null);
-    var refs = (0, utils_1.useMergedRefs)(inputElementRef, ref);
-    react_1.default.useEffect(function () {
+    const inputElementRef = react_1.default.useRef(null);
+    const refs = (0, utils_1.useMergedRefs)(inputElementRef, ref);
+    react_1.default.useEffect(() => {
         if (inputElementRef.current && setFocus) {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
     return (react_1.default.createElement("label", { className: (0, classnames_1.default)('iui-radio-tile', className), style: style },
-        react_1.default.createElement("input", __assign({ className: 'iui-radio-tile-input', type: 'radio', ref: refs }, rest)),
+        react_1.default.createElement("input", { className: 'iui-radio-tile-input', type: 'radio', ref: refs, ...rest }),
         react_1.default.createElement("div", { className: 'iui-radio-tile-content' },
             icon &&
                 react_1.default.cloneElement(icon, {

package/cjs/core/RadioTiles/RadioTileGroup.js

@@ -1,26 +1,4 @@
 "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 };
 };
@@ -30,10 +8,10 @@ exports.RadioTileGroup = 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 InputGroup_1 = require("../InputGroup");
+const react_1 = __importDefault(require("react"));
+const InputGroup_1 = require("../InputGroup");
 require("@itwin/itwinui-css/css/radio-tile.css");
-var utils_1 = require("../utils");
+const utils_1 = require("../utils");
 /**
  * RadioTileGroup component to group RadioTile components together
  * @example
@@ -42,10 +20,10 @@ var utils_1 = require("../utils");
  *   <RadioTile label='Second tile' icon={<SvgSmileySad />} />
  * </RadioTileGroup>
  */
-var RadioTileGroup = function (props) {
-    var children = props.children, label = props.label, rest = __rest(props, ["children", "label"]);
+const RadioTileGroup = (props) => {
+    const { children, label, ...rest } = props;
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement(InputGroup_1.InputGroup, __assign({ label: label }, rest),
+    return (react_1.default.createElement(InputGroup_1.InputGroup, { label: label, ...rest },
         react_1.default.createElement("div", { className: 'iui-radio-tile-container' }, children)));
 };
 exports.RadioTileGroup = RadioTileGroup;

package/cjs/core/Select/Select.js

@@ -1,26 +1,4 @@
 "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 };
 };
@@ -30,18 +8,18 @@ exports.Select = 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 DropdownMenu_1 = require("../DropdownMenu");
-var MenuItem_1 = require("../Menu/MenuItem");
-var utils_1 = require("../utils");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const DropdownMenu_1 = require("../DropdownMenu");
+const MenuItem_1 = require("../Menu/MenuItem");
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/select.css");
-var SelectTag_1 = __importDefault(require("./SelectTag"));
-var isMultipleEnabled = function (variable, multiple) {
+const SelectTag_1 = __importDefault(require("./SelectTag"));
+const isMultipleEnabled = (variable, multiple) => {
     return multiple;
 };
 // Type guard for multiple did not work
-var isSingleOnChange = function (onChange, multiple) {
+const isSingleOnChange = (onChange, multiple) => {
     return !multiple;
 };
 /**
@@ -93,37 +71,37 @@ var isSingleOnChange = function (onChange, multiple) {
  *   )}
  * />
  */
-var Select = function (props) {
+const Select = (props) => {
     var _a;
-    var options = props.options, value = props.value, onChange = props.onChange, placeholder = props.placeholder, _b = props.disabled, disabled = _b === void 0 ? false : _b, size = props.size, _c = props.setFocus, setFocus = _c === void 0 ? false : _c, 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, _d = props.multiple, multiple = _d === void 0 ? false : _d, rest = __rest(props, ["options", "value", "onChange", "placeholder", "disabled", "size", "setFocus", "itemRenderer", "selectedItemRenderer", "className", "style", "menuClassName", "menuStyle", "onShow", "onHide", "popoverProps", "multiple"]);
+    const { options, value, onChange, placeholder, disabled = false, size, setFocus = false, itemRenderer, selectedItemRenderer, className, style, menuClassName, menuStyle, onShow, onHide, popoverProps, multiple = false, ...rest } = props;
     (0, utils_1.useTheme)();
-    var _e = react_1.default.useState((_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _a !== void 0 ? _a : false), isOpen = _e[0], setIsOpen = _e[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; });
+    const [isOpen, setIsOpen] = react_1.default.useState((_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _a !== void 0 ? _a : false);
+    react_1.default.useEffect(() => {
+        setIsOpen((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 toggle = function () { return setIsOpen(function (open) { return !open; }); };
-    var selectRef = react_1.default.useRef(null);
-    var toggleButtonRef = react_1.default.useRef(null);
-    var onShowHandler = react_1.default.useCallback(function (instance) {
+    const [minWidth, setMinWidth] = react_1.default.useState(0);
+    const toggle = () => setIsOpen((open) => !open);
+    const selectRef = react_1.default.useRef(null);
+    const toggleButtonRef = react_1.default.useRef(null);
+    const onShowHandler = react_1.default.useCallback((instance) => {
         setIsOpen(true);
         onShow === null || onShow === void 0 ? void 0 : onShow(instance);
     }, [onShow]);
-    var onHideHandler = react_1.default.useCallback(function (instance) {
+    const onHideHandler = react_1.default.useCallback((instance) => {
         setIsOpen(false);
         onHide === null || onHide === void 0 ? void 0 : onHide(instance);
     }, [onHide]);
-    react_1.default.useEffect(function () {
+    react_1.default.useEffect(() => {
         if (selectRef.current && !disabled && setFocus) {
             selectRef.current.focus();
         }
     }, [setFocus, disabled]);
-    react_1.default.useEffect(function () {
+    react_1.default.useEffect(() => {
         if (selectRef.current) {
             setMinWidth(selectRef.current.offsetWidth);
         }
     }, [isOpen]);
-    var onKeyDown = function (event, toggle) {
+    const onKeyDown = (event, toggle) => {
         switch (event.key) {
             case 'Enter':
             case ' ':
@@ -137,15 +115,18 @@ var Select = function (props) {
                 break;
         }
     };
-    var menuItems = react_1.default.useCallback(function (close) {
-        return options.map(function (option, index) {
+    const menuItems = react_1.default.useCallback((close) => {
+        return options.map((option, index) => {
             var _a;
-            var isSelected = isMultipleEnabled(value, multiple)
+            const 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));
-            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 () {
+            const menuItem = itemRenderer ? (itemRenderer(option, { close, isSelected })) : (react_1.default.createElement(MenuItem_1.MenuItem, null, option.label));
+            const { label, ...restOption } = option;
+            return react_1.default.cloneElement(menuItem, {
+                key: `${label}-${index}`,
+                isSelected,
+                onClick: () => {
                     if (option.disabled) {
                         return;
                     }
@@ -156,48 +137,55 @@ var Select = function (props) {
                     else {
                         onChange === null || onChange === void 0 ? void 0 : onChange(option.value, isSelected ? 'removed' : 'added');
                     }
-                }, ref: function (el) {
+                },
+                ref: (el) => {
                     if (isSelected && !multiple) {
                         el === null || el === void 0 ? void 0 : el.scrollIntoView();
                     }
-                }, role: 'option' }, restOption), menuItem.props));
+                },
+                role: 'option',
+                ...restOption,
+                ...menuItem.props,
+            });
         });
     }, [itemRenderer, multiple, onChange, options, value]);
-    var selectedItems = react_1.default.useMemo(function () {
+    const selectedItems = react_1.default.useMemo(() => {
         if (value == null) {
             return undefined;
         }
         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; });
+            ? options.filter((option) => value.some((val) => val === option.value))
+            : options.find((option) => option.value === value);
     }, [multiple, options, value]);
-    var tagRenderer = react_1.default.useCallback(function (item) {
+    const tagRenderer = react_1.default.useCallback((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)") }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen, onClickOutside: function (_, _a) {
-                var _b;
-                var target = _a.target;
-                if (!((_b = toggleButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))) {
+    return (react_1.default.createElement("div", { 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, { menuItems: menuItems, placement: 'bottom-start', className: (0, classnames_1.default)('iui-scroll', menuClassName), style: {
+                minWidth,
+                maxWidth: `min(${minWidth * 2}px, 90vw)`,
+                ...menuStyle,
+            }, role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled, ...popoverProps, visible: isOpen, onClickOutside: (_, { target }) => {
+                var _a;
+                if (!((_a = toggleButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
                     setIsOpen(false);
                 }
-            } }),
+            } },
             react_1.default.createElement("div", { ref: selectRef, className: (0, classnames_1.default)('iui-select-button', {
                     'iui-placeholder': (!selectedItems || selectedItems.length === 0) && !!placeholder,
                     'iui-disabled': disabled,
-                }), "data-iui-size": size, onClick: function () { return !disabled && toggle(); }, onKeyDown: function (e) { return !disabled && onKeyDown(e, toggle); }, tabIndex: !disabled ? 0 : undefined },
+                }), "data-iui-size": size, onClick: () => !disabled && toggle(), onKeyDown: (e) => !disabled && onKeyDown(e, toggle), tabIndex: !disabled ? 0 : undefined },
                 (!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,
                 'iui-open': isOpen,
-            }), onClick: function () { return !disabled && toggle(); } },
+            }), onClick: () => !disabled && toggle() },
             react_1.default.createElement(utils_1.SvgCaretDownSmall, { "aria-hidden": true }))));
 };
 exports.Select = Select;
-var SingleSelectButton = function (_a) {
-    var selectedItem = _a.selectedItem, selectedItemRenderer = _a.selectedItemRenderer;
+const SingleSelectButton = ({ selectedItem, selectedItemRenderer, }) => {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         selectedItem &&
             selectedItemRenderer &&
@@ -209,15 +197,14 @@ var SingleSelectButton = function (_a) {
                 }),
             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 () {
+const MultipleSelectButton = ({ selectedItems, selectedItemsRenderer, tagRenderer, }) => {
+    const selectedItemsElements = react_1.default.useMemo(() => {
         if (!selectedItems) {
             return [];
         }
-        return selectedItems.map(function (item) { return tagRenderer(item); });
+        return selectedItems.map((item) => tagRenderer(item));
     }, [selectedItems, tagRenderer]);
-    var _b = (0, utils_1.useOverflow)(selectedItemsElements), containerRef = _b[0], visibleCount = _b[1];
+    const [containerRef, visibleCount] = (0, utils_1.useOverflow)(selectedItemsElements);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         selectedItems &&
             selectedItemsRenderer &&
@@ -228,6 +215,6 @@ var MultipleSelectButton = function (_a) {
                     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)") }))))))));
+                    visibleCount < selectedItemsElements.length && (react_1.default.createElement(SelectTag_1.default, { label: `+${selectedItemsElements.length - visibleCount + 1} item(s)` }))))))));
 };
 exports.default = exports.Select;

package/cjs/core/Select/SelectTag.js

@@ -1,26 +1,4 @@
 "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 };
 };
@@ -30,18 +8,18 @@ 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");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/select.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"]);
+const SelectTag = (props) => {
+    const { className, label, ...rest } = props;
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement("span", __assign({ className: (0, classnames_1.default)('iui-select-tag', className) }, rest),
+    return (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-select-tag', className), ...rest },
         react_1.default.createElement("span", { className: 'iui-select-tag-label' }, label)));
 };
 exports.SelectTag = SelectTag;