@itwin/itwinui-react 1.18.0 → 1.19.0

package/cjs/core/LabeledInput/LabeledInput.js

@@ -30,11 +30,11 @@ exports.LabeledInput = 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 Input_1 = require("../Input/Input");
 var common_1 = require("../utils/common");
 var useTheme_1 = require("../utils/hooks/useTheme");
+var InputContainer_1 = require("../utils/InputContainer");
 require("@itwin/itwinui-css/css/inputs.css");
 /**
  * Basic labeled input component
@@ -45,22 +45,10 @@ require("@itwin/itwinui-css/css/inputs.css");
  * <LabeledInput status='negative' label='Negative' setFocus />
  */
 exports.LabeledInput = react_1.default.forwardRef(function (props, ref) {
-    var _a;
-    var className = props.className, _b = props.disabled, disabled = _b === void 0 ? false : _b, label = props.label, message = props.message, status = props.status, svgIcon = props.svgIcon, style = props.style, inputClassName = props.inputClassName, inputStyle = props.inputStyle, _c = props.displayStyle, displayStyle = _c === void 0 ? 'default' : _c, _d = props.required, required = _d === void 0 ? false : _d, rest = __rest(props, ["className", "disabled", "label", "message", "status", "svgIcon", "style", "inputClassName", "inputStyle", "displayStyle", "required"]);
-    useTheme_1.useTheme();
+    var className = props.className, _a = props.disabled, disabled = _a === void 0 ? false : _a, label = props.label, message = props.message, status = props.status, svgIcon = props.svgIcon, style = props.style, inputClassName = props.inputClassName, inputStyle = props.inputStyle, _b = props.displayStyle, displayStyle = _b === void 0 ? 'default' : _b, _c = props.iconDisplayStyle, iconDisplayStyle = _c === void 0 ? displayStyle === 'default' ? 'block' : 'inline' : _c, _d = props.required, required = _d === void 0 ? false : _d, rest = __rest(props, ["className", "disabled", "label", "message", "status", "svgIcon", "style", "inputClassName", "inputStyle", "displayStyle", "iconDisplayStyle", "required"]);
+    (0, useTheme_1.useTheme)();
     var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && common_1.StatusIconMap[status]());
-    return (react_1.default.createElement("label", { className: classnames_1.default('iui-input-container', (_a = {
-                'iui-disabled': disabled
-            },
-            _a["iui-" + status] = !!status,
-            _a["iui-" + displayStyle] = displayStyle !== 'default',
-            _a), className), style: style },
-        label && (react_1.default.createElement("div", { className: classnames_1.default('iui-label', {
-                'iui-required': required,
-            }) }, label)),
-        react_1.default.createElement(Input_1.Input, __assign({ disabled: disabled, className: inputClassName, style: inputStyle, required: required, ref: ref }, rest)),
-        (message || icon) && (react_1.default.createElement("div", { className: 'iui-message' },
-            icon,
-            displayStyle === 'default' && message))));
+    return (react_1.default.createElement(InputContainer_1.InputContainer, { as: 'label', label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style },
+        react_1.default.createElement(Input_1.Input, __assign({ disabled: disabled, className: inputClassName, style: inputStyle, required: required, ref: ref }, rest))));
 });
 exports.default = exports.LabeledInput;

package/cjs/core/LabeledSelect/LabeledSelect.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { SelectProps } from '../Select/Select';
+import { LabeledInputProps } from '../LabeledInput';
 import '@itwin/itwinui-css/css/inputs.css';
 export declare type LabeledSelectProps<T> = {
     /**
@@ -7,7 +8,7 @@ export declare type LabeledSelectProps<T> = {
      */
     label?: React.ReactNode;
     /**
-     * Message below the select.
+     * Message below the select. Does not apply to 'inline' select.
      */
     message?: React.ReactNode;
     /**
@@ -16,7 +17,7 @@ export declare type LabeledSelectProps<T> = {
      */
     status?: 'positive' | 'warning' | 'negative';
     /**
-     * Custom svg icon. If select has status, default status icon is used instead.
+     * Custom svg icon. Will override status icon if specified.
      */
     svgIcon?: JSX.Element;
     /**
@@ -27,17 +28,12 @@ export declare type LabeledSelectProps<T> = {
      * Custom CSS Style for the select element.
      */
     selectStyle?: React.CSSProperties;
-    /**
-     * You can choose between default and inline.
-     * @default 'default'
-     */
-    displayStyle?: 'default' | 'inline';
     /**
      * If true, shows a red asterisk but does not prevent form submission.
      * @default false
      */
     required?: boolean;
-} & SelectProps<T>;
+} & Pick<LabeledInputProps, 'displayStyle'> & SelectProps<T>;
 /**
  * Labeled select component to select value from options.
  * @example

package/cjs/core/LabeledSelect/LabeledSelect.js

@@ -31,10 +31,10 @@ exports.LabeledSelect = void 0;
  * 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 Select_1 = require("../Select");
 var common_1 = require("../utils/common");
 var useTheme_1 = require("../utils/hooks/useTheme");
+var InputContainer_1 = require("../utils/InputContainer");
 require("@itwin/itwinui-css/css/inputs.css");
 /**
  * Labeled select component to select value from options.
@@ -70,23 +70,13 @@ require("@itwin/itwinui-css/css/inputs.css");
  * />
  */
 var LabeledSelect = function (props) {
-    var _a;
-    var className = props.className, _b = props.disabled, disabled = _b === void 0 ? false : _b, label = props.label, message = props.message, status = props.status, svgIcon = props.svgIcon, _c = props.displayStyle, displayStyle = _c === void 0 ? 'default' : _c, style = props.style, selectClassName = props.selectClassName, selectStyle = props.selectStyle, _d = props.required, required = _d === void 0 ? false : _d, rest = __rest(props, ["className", "disabled", "label", "message", "status", "svgIcon", "displayStyle", "style", "selectClassName", "selectStyle", "required"]);
-    useTheme_1.useTheme();
+    var className = props.className, _a = props.disabled, disabled = _a === void 0 ? false : _a, label = props.label, message = props.message, status = props.status, svgIcon = props.svgIcon, _b = props.displayStyle, displayStyle = _b === void 0 ? 'default' : _b, style = props.style, selectClassName = props.selectClassName, selectStyle = props.selectStyle, _c = props.required, required = _c === void 0 ? false : _c, rest = __rest(props, ["className", "disabled", "label", "message", "status", "svgIcon", "displayStyle", "style", "selectClassName", "selectStyle", "required"]);
+    (0, useTheme_1.useTheme)();
     var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && common_1.StatusIconMap[status]());
-    return (react_1.default.createElement("div", { className: classnames_1.default('iui-input-container', (_a = {
-                'iui-disabled': disabled
-            },
-            _a["iui-" + status] = !!status,
-            _a["iui-" + displayStyle] = displayStyle !== 'default',
-            _a), className), style: style },
-        label && (react_1.default.createElement("div", { className: classnames_1.default('iui-label', {
-                'iui-required': required,
-            }) }, label)),
-        react_1.default.createElement(Select_1.Select, __assign({ disabled: disabled, className: selectClassName, style: selectStyle }, rest)),
-        displayStyle === 'default' && (message || icon) && (react_1.default.createElement("div", { className: 'iui-message' },
-            icon,
-            message))));
+    return (react_1.default.createElement(InputContainer_1.InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: displayStyle === 'default' && icon
+            ? react_1.default.cloneElement(icon, { 'aria-hidden': true })
+            : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style },
+        react_1.default.createElement(Select_1.Select, __assign({ disabled: disabled, className: selectClassName, style: selectStyle }, rest))));
 };
 exports.LabeledSelect = LabeledSelect;
 exports.default = exports.LabeledSelect;

package/cjs/core/LabeledTextarea/LabeledTextarea.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { TextareaProps } from '../Textarea/Textarea';
+import { LabeledInputProps } from '../LabeledInput';
 import '@itwin/itwinui-css/css/inputs.css';
 export declare type LabeledTextareaProps = {
     /**
@@ -7,7 +8,7 @@ export declare type LabeledTextareaProps = {
      */
     label: React.ReactNode;
     /**
-     * Message below the textarea.
+     * Message below the textarea. Does not apply to 'inline' textarea.
      */
     message?: React.ReactNode;
     /**
@@ -22,16 +23,7 @@ export declare type LabeledTextareaProps = {
      * Custom style for textarea.
      */
     textareaStyle?: React.CSSProperties;
-    /**
-     * You can choose between default and inline.
-     * @default 'default'
-     */
-    displayStyle?: 'default' | 'inline';
-    /**
-     * Custom icon. If textarea has status, default status icon is used instead.
-     */
-    svgIcon?: JSX.Element;
-} & TextareaProps;
+} & Pick<LabeledInputProps, 'svgIcon' | 'displayStyle' | 'iconDisplayStyle'> & TextareaProps;
 /**
  * Textarea wrapper that allows for additional styling and labelling
  * @example
@@ -59,7 +51,7 @@ export declare const LabeledTextarea: React.ForwardRefExoticComponent<{
      */
     label: React.ReactNode;
     /**
-     * Message below the textarea.
+     * Message below the textarea. Does not apply to 'inline' textarea.
      */
     message?: React.ReactNode;
     /**
@@ -74,18 +66,7 @@ export declare const LabeledTextarea: React.ForwardRefExoticComponent<{
      * Custom style for textarea.
      */
     textareaStyle?: React.CSSProperties | undefined;
-    /**
-     * You can choose between default and inline.
-     * @default 'default'
-     */
-    displayStyle?: "default" | "inline" | undefined;
-    /**
-     * Custom icon. If textarea has status, default status icon is used instead.
-     */
-    svgIcon?: JSX.Element | undefined;
-} & {
-    setFocus?: boolean | undefined; /**
-     * Label for the textarea.
-     */
+} & Pick<LabeledInputProps, "svgIcon" | "displayStyle" | "iconDisplayStyle"> & {
+    setFocus?: boolean | undefined;
 } & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
 export default LabeledTextarea;

package/cjs/core/LabeledTextarea/LabeledTextarea.js

@@ -30,11 +30,11 @@ exports.LabeledTextarea = 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 common_1 = require("../utils/common");
 var Textarea_1 = require("../Textarea");
 var useTheme_1 = require("../utils/hooks/useTheme");
+var InputContainer_1 = require("../utils/InputContainer");
 require("@itwin/itwinui-css/css/inputs.css");
 /**
  * Textarea wrapper that allows for additional styling and labelling
@@ -58,22 +58,10 @@ require("@itwin/itwinui-css/css/inputs.css");
  * />
  */
 exports.LabeledTextarea = react_1.default.forwardRef(function (props, ref) {
-    var _a;
-    var className = props.className, style = props.style, _b = props.disabled, disabled = _b === void 0 ? false : _b, label = props.label, message = props.message, status = props.status, textareaClassName = props.textareaClassName, textareaStyle = props.textareaStyle, _c = props.displayStyle, displayStyle = _c === void 0 ? 'default' : _c, svgIcon = props.svgIcon, _d = props.required, required = _d === void 0 ? false : _d, textareaProps = __rest(props, ["className", "style", "disabled", "label", "message", "status", "textareaClassName", "textareaStyle", "displayStyle", "svgIcon", "required"]);
-    useTheme_1.useTheme();
+    var className = props.className, style = props.style, _a = props.disabled, disabled = _a === void 0 ? false : _a, label = props.label, message = props.message, status = props.status, textareaClassName = props.textareaClassName, textareaStyle = props.textareaStyle, _b = props.displayStyle, displayStyle = _b === void 0 ? 'default' : _b, _c = props.iconDisplayStyle, iconDisplayStyle = _c === void 0 ? displayStyle === 'default' ? 'block' : 'inline' : _c, svgIcon = props.svgIcon, _d = props.required, required = _d === void 0 ? false : _d, textareaProps = __rest(props, ["className", "style", "disabled", "label", "message", "status", "textareaClassName", "textareaStyle", "displayStyle", "iconDisplayStyle", "svgIcon", "required"]);
+    (0, useTheme_1.useTheme)();
     var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && common_1.StatusIconMap[status]());
-    return (react_1.default.createElement("label", { className: classnames_1.default('iui-input-container', (_a = {
-                'iui-disabled': disabled
-            },
-            _a["iui-" + status] = !!status,
-            _a["iui-" + displayStyle] = displayStyle !== 'default',
-            _a), className), style: style },
-        label && (react_1.default.createElement("div", { className: classnames_1.default('iui-label', {
-                'iui-required': required,
-            }) }, label)),
-        react_1.default.createElement(Textarea_1.Textarea, __assign({ disabled: disabled, className: textareaClassName, style: textareaStyle, required: required }, textareaProps, { ref: ref })),
-        (message || icon) && (react_1.default.createElement("div", { className: 'iui-message' },
-            icon,
-            displayStyle === 'default' && message))));
+    return (react_1.default.createElement(InputContainer_1.InputContainer, { as: 'label', label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style },
+        react_1.default.createElement(Textarea_1.Textarea, __assign({ disabled: disabled, className: textareaClassName, style: textareaStyle, required: required }, textareaProps, { ref: ref }))));
 });
 exports.default = exports.LabeledTextarea;

package/cjs/core/Menu/Menu.js

@@ -40,10 +40,10 @@ var useMergedRefs_1 = require("../utils/hooks/useMergedRefs");
  */
 exports.Menu = react_1.default.forwardRef(function (props, ref) {
     var children = props.children, _a = props.role, role = _a === void 0 ? 'menu' : _a, className = props.className, style = props.style, rest = __rest(props, ["children", "role", "className", "style"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var _b = react_1.default.useState(), focusedIndex = _b[0], setFocusedIndex = _b[1];
     var menuRef = react_1.default.useRef(null);
-    var refs = useMergedRefs_1.useMergedRefs(menuRef, ref);
+    var refs = (0, useMergedRefs_1.useMergedRefs)(menuRef, ref);
     react_1.default.useEffect(function () {
         var _a, _b;
         var items = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.children;
@@ -91,6 +91,6 @@ exports.Menu = react_1.default.forwardRef(function (props, ref) {
                 break;
         }
     };
-    return (react_1.default.createElement("ul", __assign({ className: classnames_1.default('iui-menu', className), style: style, role: role, onKeyDown: onKeyDown, ref: refs }, rest), children));
+    return (react_1.default.createElement("ul", __assign({ className: (0, classnames_1.default)('iui-menu', className), style: style, role: role, onKeyDown: onKeyDown, ref: refs }, rest), children));
 });
 exports.default = exports.Menu;

package/cjs/core/Menu/MenuItem.js

@@ -47,9 +47,9 @@ var MenuItemContext = react_1.default.createContext({ ref: undefined });
  */
 exports.MenuItem = react_1.default.forwardRef(function (props, ref) {
     var children = props.children, isSelected = props.isSelected, disabled = props.disabled, value = props.value, onClick = props.onClick, sublabel = props.sublabel, _a = props.size, size = _a === void 0 ? !!sublabel ? 'large' : 'default' : _a, icon = props.icon, badge = props.badge, className = props.className, style = props.style, _b = props.role, role = _b === void 0 ? 'menuitem' : _b, _c = props.subMenuItems, subMenuItems = _c === void 0 ? [] : _c, rest = __rest(props, ["children", "isSelected", "disabled", "value", "onClick", "sublabel", "size", "icon", "badge", "className", "style", "role", "subMenuItems"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var menuItemRef = react_1.default.useRef(null);
-    var refs = useMergedRefs_1.useMergedRefs(menuItemRef, ref);
+    var refs = (0, useMergedRefs_1.useMergedRefs)(menuItemRef, ref);
     var parentMenuItemRef = react_1.default.useContext(MenuItemContext).ref;
     var subMenuRef = react_1.default.useRef(null);
     var _d = react_1.default.useState(false), isSubmenuVisible = _d[0], setIsSubmenuVisible = _d[1];
@@ -84,7 +84,7 @@ exports.MenuItem = react_1.default.forwardRef(function (props, ref) {
                 break;
         }
     };
-    var listItem = (react_1.default.createElement("li", __assign({ className: classnames_1.default('iui-menu-item', {
+    var listItem = (react_1.default.createElement("li", __assign({ className: (0, classnames_1.default)('iui-menu-item', {
             'iui-large': size === 'large',
             'iui-active': isSelected,
             'iui-disabled': disabled,
@@ -97,7 +97,7 @@ exports.MenuItem = react_1.default.forwardRef(function (props, ref) {
         } }, rest),
         icon &&
             react_1.default.cloneElement(icon, {
-                className: classnames_1.default(icon.props.className, 'iui-icon'),
+                className: (0, classnames_1.default)(icon.props.className, 'iui-icon'),
             }),
         react_1.default.createElement("span", { className: 'iui-content' },
             react_1.default.createElement("div", { className: 'iui-menu-label' }, children),
@@ -105,7 +105,7 @@ exports.MenuItem = react_1.default.forwardRef(function (props, ref) {
         !badge && subMenuItems.length > 0 && (react_1.default.createElement(CaretRightSmall_1.default, { className: 'iui-icon' })),
         badge &&
             react_1.default.cloneElement(badge, {
-                className: classnames_1.default(badge.props.className, 'iui-icon'),
+                className: (0, classnames_1.default)(badge.props.className, 'iui-icon'),
             })));
     return subMenuItems.length === 0 ? (listItem) : (react_1.default.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef } },
         react_1.default.createElement(Popover_1.Popover, { placement: 'right-start', visible: isSubmenuVisible, content: react_1.default.createElement("div", { onMouseLeave: function () { return setIsSubmenuVisible(false); }, onBlur: function (e) {

package/cjs/core/Modal/Modal.js

@@ -61,9 +61,9 @@ var FocusTrap_1 = __importDefault(require("../utils/FocusTrap"));
  * </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.modalRootId, modalRootId = _e === void 0 ? 'iui-react-portal-container' : _e, _f = props.ownerDocument, ownerDocument = _f === void 0 ? common_1.getDocument() : _f, rest = __rest(props, ["isOpen", "isDismissible", "closeOnEsc", "closeOnExternalClick", "onClose", "title", "onKeyDown", "id", "className", "style", "children", "modalRootId", "ownerDocument"]);
-    useTheme_1.useTheme();
-    var container = common_1.getContainer(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, onKeyDown = props.onKeyDown, id = props.id, className = props.className, style = props.style, children = props.children, _e = props.modalRootId, modalRootId = _e === void 0 ? 'iui-react-portal-container' : _e, _f = props.ownerDocument, ownerDocument = _f === void 0 ? (0, common_1.getDocument)() : _f, rest = __rest(props, ["isOpen", "isDismissible", "closeOnEsc", "closeOnExternalClick", "onClose", "title", "onKeyDown", "id", "className", "style", "children", "modalRootId", "ownerDocument"]);
+    (0, useTheme_1.useTheme)();
+    var container = (0, common_1.getContainer)(modalRootId, ownerDocument);
     var overlayRef = react_1.default.useRef(null);
     var originalBodyOverflow = react_1.default.useRef('');
     var previousFocusedElement = react_1.default.useRef();
@@ -117,7 +117,7 @@ var Modal = function (props) {
         }
     };
     return !!container ? (react_dom_1.default.createPortal(isOpen && (react_1.default.createElement(FocusTrap_1.default, null,
-        react_1.default.createElement("div", __assign({ className: classnames_1.default('iui-modal', 'iui-modal-visible', className), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }, rest),
+        react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-modal', 'iui-modal-visible', className), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }, rest),
             react_1.default.createElement("div", { className: 'iui-modal-dialog', id: id, style: style, role: 'dialog', "aria-modal": 'true', onMouseDown: function (event) { return event.stopPropagation(); } },
                 react_1.default.createElement("div", { className: 'iui-title-bar' },
                     react_1.default.createElement("div", { className: 'iui-title' }, title),

package/cjs/core/Modal/ModalButtonBar.js

@@ -38,7 +38,7 @@ require("@itwin/itwinui-css/css/modal.css");
  */
 var ModalButtonBar = function (props) {
     var children = props.children, rest = __rest(props, ["children"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     return (react_1.default.createElement("div", __assign({ className: 'iui-button-bar' }, rest), children));
 };
 exports.ModalButtonBar = ModalButtonBar;

package/cjs/core/ProgressIndicators/ProgressLinear/ProgressLinear.js

@@ -52,13 +52,13 @@ require("@itwin/itwinui-css/css/progress-indicator.css");
 var ProgressLinear = function (props) {
     var _a;
     var _b = props.value, value = _b === void 0 ? 0 : _b, _c = props.indeterminate, indeterminate = _c === void 0 ? false : _c, _d = props.labels, labels = _d === void 0 ? [] : _d, _e = props.isAnimated, isAnimated = _e === void 0 ? false : _e, status = props.status, className = props.className, style = props.style, rest = __rest(props, ["value", "indeterminate", "labels", "isAnimated", "status", "className", "style"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var boundedValue = Math.min(100, Math.max(0, value));
-    return (react_1.default.createElement("div", __assign({ className: classnames_1.default('iui-progress-indicator-linear', (_a = {},
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-progress-indicator-linear', (_a = {},
             _a["iui-" + status] = !!status,
             _a), className), style: style }, rest),
         react_1.default.createElement("div", { className: 'iui-track' },
-            react_1.default.createElement("div", { className: classnames_1.default('iui-fill', {
+            react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-fill', {
                     'iui-determinate': !indeterminate && isAnimated,
                     'iui-indeterminate': indeterminate,
                 }), style: { width: indeterminate ? '100%' : boundedValue + "%" } })),

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

@@ -54,7 +54,7 @@ require("@itwin/itwinui-css/css/progress-indicator.css");
 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"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var statusMap = {
         negative: react_1.default.createElement(ImportantSmall_1.default, { "aria-hidden": true }),
         positive: react_1.default.createElement(CheckmarkSmall_1.default, { "aria-hidden": true }),
@@ -65,7 +65,7 @@ var ProgressRadial = function (props) {
             : 88 -
                 Math.min(88, Math.max(0, indeterminate ? 88 : (88 * value) / 100)),
     };
-    return (react_1.default.createElement("div", __assign({ className: classnames_1.default('iui-progress-indicator-radial', (_a = {
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-progress-indicator-radial', (_a = {
                 'iui-determinate': !indeterminate,
                 'iui-indeterminate': indeterminate
             },

package/cjs/core/Radio/Radio.js

@@ -47,19 +47,19 @@ require("@itwin/itwinui-css/css/inputs.css");
 exports.Radio = react_1.default.forwardRef(function (props, ref) {
     var _a;
     var className = props.className, _b = props.disabled, disabled = _b === void 0 ? false : _b, label = props.label, status = props.status, style = props.style, checkmarkClassName = props.checkmarkClassName, checkmarkStyle = props.checkmarkStyle, _c = props.setFocus, setFocus = _c === void 0 ? false : _c, rest = __rest(props, ["className", "disabled", "label", "status", "style", "checkmarkClassName", "checkmarkStyle", "setFocus"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var inputElementRef = react_1.default.useRef(null);
-    var refs = useMergedRefs_1.useMergedRefs(inputElementRef, ref);
+    var refs = (0, useMergedRefs_1.useMergedRefs)(inputElementRef, ref);
     react_1.default.useEffect(function () {
         if (inputElementRef.current && setFocus) {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
-    return (react_1.default.createElement("label", { className: classnames_1.default('iui-radio', (_a = { 'iui-disabled': disabled }, _a["iui-" + status] = !!status, _a), className), style: style },
+    return (react_1.default.createElement("label", { className: (0, classnames_1.default)('iui-radio', (_a = { 'iui-disabled': disabled }, _a["iui-" + status] = !!status, _a), className), style: style },
         react_1.default.createElement("input", __assign({ disabled: disabled, type: 'radio', ref: refs }, rest)),
-        react_1.default.createElement("span", { className: classnames_1.default('iui-radio-dot', checkmarkClassName), style: checkmarkStyle },
+        react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-radio-dot', checkmarkClassName), style: checkmarkStyle },
             react_1.default.createElement("svg", { viewBox: '0 0 16 16', "aria-hidden": 'true', focusable: 'false' },
                 react_1.default.createElement("circle", { cx: '8', cy: '8', r: '6' }))),
-        label && react_1.default.createElement("div", { className: 'iui-label' }, label)));
+        label && react_1.default.createElement("span", { className: 'iui-label' }, label)));
 });
 exports.default = exports.Radio;

package/cjs/core/RadioTiles/RadioTile.js

@@ -43,9 +43,9 @@ require("@itwin/itwinui-css/css/inputs.css");
  */
 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"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var inputElementRef = react_1.default.useRef(null);
-    var refs = useMergedRefs_1.useMergedRefs(inputElementRef, ref);
+    var refs = (0, useMergedRefs_1.useMergedRefs)(inputElementRef, ref);
     react_1.default.useEffect(function () {
         if (inputElementRef.current && setFocus) {
             inputElementRef.current.focus();
@@ -57,7 +57,7 @@ exports.RadioTile = react_1.default.forwardRef(function (props, ref) {
             react_1.default.createElement(Checkmark_1.default, { className: 'iui-checkmark', "aria-hidden": true }),
             icon &&
                 react_1.default.cloneElement(icon, {
-                    className: classnames_1.default('iui-icon', icon.props.className),
+                    className: (0, classnames_1.default)('iui-icon', icon.props.className),
                 }),
             label && react_1.default.createElement("div", { className: 'iui-label' }, label),
             description && react_1.default.createElement("div", { className: 'iui-description' }, description))));

package/cjs/core/RadioTiles/RadioTileGroup.js

@@ -44,7 +44,7 @@ var useTheme_1 = require("../utils/hooks/useTheme");
  */
 var RadioTileGroup = function (props) {
     var children = props.children, label = props.label, rest = __rest(props, ["children", "label"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     return (react_1.default.createElement(InputGroup_1.InputGroup, __assign({ label: label }, rest),
         react_1.default.createElement("div", { className: 'iui-radio-tile-container' }, children)));
 };

package/cjs/core/Select/Select.js

@@ -89,7 +89,7 @@ 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"]);
-    useTheme_1.useTheme();
+    (0, useTheme_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];
     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; });
@@ -143,9 +143,9 @@ var Select = function (props) {
         }
         return options.find(function (option) { return option.value === value; });
     }, [options, value]);
-    return (react_1.default.createElement("div", __assign({ className: classnames_1.default('iui-select', (_a = {}, _a["iui-" + size] = !!size, _a), className), "aria-expanded": isOpen, "aria-haspopup": 'listbox', style: style }, rest),
-        react_1.default.createElement(DropdownMenu_1.DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: classnames_1.default('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxHeight: "300px" }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen }),
-            react_1.default.createElement("div", { ref: selectRef, className: classnames_1.default('iui-select-button', {
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-select', (_a = {}, _a["iui-" + size] = !!size, _a), 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, maxHeight: "300px" }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen }),
+            react_1.default.createElement("div", { ref: selectRef, className: (0, classnames_1.default)('iui-select-button', {
                     'iui-placeholder': !selectedItem && !!placeholder,
                     'iui-disabled': disabled,
                     'iui-active': isOpen,
@@ -157,7 +157,7 @@ var Select = function (props) {
                 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: classnames_1.default(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon.props.className, 'iui-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)))))));
 };

package/cjs/core/SideNavigation/SideNavigation.js

@@ -53,7 +53,7 @@ require("@itwin/itwinui-css/css/side-navigation.css");
  */
 var SideNavigation = function (props) {
     var items = props.items, secondaryItems = props.secondaryItems, _a = props.expanderPlacement, expanderPlacement = _a === void 0 ? 'top' : _a, className = props.className, _b = props.isExpanded, isExpanded = _b === void 0 ? false : _b, onExpanderClick = props.onExpanderClick, rest = __rest(props, ["items", "secondaryItems", "expanderPlacement", "className", "isExpanded", "onExpanderClick"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var _c = react_1.default.useState(isExpanded), _isExpanded = _c[0], _setIsExpanded = _c[1];
     react_1.default.useEffect(function () {
         _setIsExpanded(isExpanded);
@@ -63,7 +63,7 @@ var SideNavigation = function (props) {
             onExpanderClick === null || onExpanderClick === void 0 ? void 0 : onExpanderClick();
         }, [onExpanderClick]) },
         react_1.default.createElement(ChevronRight_1.default, null)));
-    return (react_1.default.createElement("div", __assign({ className: classnames_1.default('iui-side-navigation', {
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-side-navigation', {
             'iui-expanded': _isExpanded,
             'iui-collapsed': !_isExpanded,
         }, className) }, rest),

package/cjs/core/SideNavigation/SidenavButton.js

@@ -41,7 +41,7 @@ require("@itwin/itwinui-css/css/side-navigation.css");
  */
 exports.SidenavButton = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, children = props.children, _a = props.isActive, isActive = _a === void 0 ? false : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, rest = __rest(props, ["className", "children", "isActive", "disabled"]);
-    useTheme_1.useTheme();
-    return (react_1.default.createElement(Buttons_1.Button, __assign({ className: classnames_1.default('iui-sidenav-button', { 'iui-active': isActive }, className), size: 'large', disabled: disabled, ref: ref }, rest), children));
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement(Buttons_1.Button, __assign({ className: (0, classnames_1.default)('iui-sidenav-button', { 'iui-active': isActive }, className), size: 'large', disabled: disabled, ref: ref }, rest), children));
 });
 exports.default = exports.SidenavButton;

package/cjs/core/Slider/Slider.js

@@ -21,10 +21,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+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)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -44,7 +48,7 @@ var useEventListener_1 = require("../utils/hooks/useEventListener");
 var Track_1 = require("./Track");
 var Thumb_1 = require("./Thumb");
 var getPercentageOfRectangle = function (rect, pointer) {
-    var position = common_1.getBoundedValue(pointer, rect.left, rect.right);
+    var position = (0, common_1.getBoundedValue)(pointer, rect.left, rect.right);
     return (position - rect.left) / rect.width;
 };
 var getClosestValueIndex = function (values, pointerValue) {
@@ -109,7 +113,7 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
     react_1.default.useEffect(function () {
         setTrackDisplay(getDefaultTrackDisplay(trackDisplayMode, currentValues));
     }, [trackDisplayMode, currentValues]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var containerRef = react_1.default.useRef(null);
     react_1.default.useEffect(function () {
         if (containerRef.current && setFocus) {
@@ -138,9 +142,9 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
             var pointerValue = min + (max - min) * percent;
             pointerValue = roundValueToClosestStep(pointerValue, step, min);
             var _a = getAllowableThumbRange(activeThumbIndex), minVal = _a[0], maxVal = _a[1];
-            pointerValue = common_1.getBoundedValue(pointerValue, minVal, maxVal);
+            pointerValue = (0, common_1.getBoundedValue)(pointerValue, minVal, maxVal);
             if (pointerValue !== currentValues[activeThumbIndex]) {
-                var newValues = __spreadArray([], currentValues);
+                var newValues = __spreadArray([], currentValues, true);
                 newValues[activeThumbIndex] = pointerValue;
                 setCurrentValues(newValues);
                 'onChange' === callbackType
@@ -171,7 +175,7 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
         if (currentValues[index] === value) {
             return;
         }
-        var newValues = __spreadArray([], currentValues);
+        var newValues = __spreadArray([], currentValues, true);
         newValues[index] = value;
         setCurrentValues(newValues);
         onChange === null || onChange === void 0 ? void 0 : onChange(newValues);
@@ -192,11 +196,11 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
             pointerValue = roundValueToClosestStep(pointerValue, step, min);
             var closestValueIndex = getClosestValueIndex(currentValues, pointerValue);
             var _a = getAllowableThumbRange(closestValueIndex), minVal = _a[0], maxVal = _a[1];
-            pointerValue = common_1.getBoundedValue(pointerValue, minVal, maxVal);
+            pointerValue = (0, common_1.getBoundedValue)(pointerValue, minVal, maxVal);
             if (pointerValue === currentValues[closestValueIndex]) {
                 return;
             }
-            var newValues = __spreadArray([], currentValues);
+            var newValues = __spreadArray([], currentValues, true);
             newValues[closestValueIndex] = pointerValue;
             setCurrentValues(newValues);
             onChange === null || onChange === void 0 ? void 0 : onChange(newValues);
@@ -205,8 +209,8 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
             event.stopPropagation();
         }
     }, [min, max, step, currentValues, getAllowableThumbRange, onChange]);
-    useEventListener_1.useEventListener('pointermove', handlePointerMove, (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
-    useEventListener_1.useEventListener('pointerup', handlePointerUp, (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
+    (0, useEventListener_1.useEventListener)('pointermove', handlePointerMove, (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
+    (0, useEventListener_1.useEventListener)('pointerup', handlePointerUp, (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
     var tickMarkArea = react_1.default.useMemo(function () {
         if (!tickLabels) {
             return null;
@@ -224,9 +228,9 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
                 ? outProps.content
                 : formatNumberValue(val, step, getNumDecimalPlaces) });
     }, [getNumDecimalPlaces, step, tooltipProps]);
-    return (react_1.default.createElement("div", __assign({ ref: ref, className: classnames_1.default('iui-slider-component-container', { 'iui-disabled': disabled }, className) }, rest),
+    return (react_1.default.createElement("div", __assign({ ref: ref, className: (0, classnames_1.default)('iui-slider-component-container', { 'iui-disabled': disabled }, className) }, rest),
         minValueLabel && (react_1.default.createElement("span", { className: 'iui-slider-min' }, minValueLabel)),
-        react_1.default.createElement("div", __assign({ ref: containerRef, className: classnames_1.default('iui-slider-container', {
+        react_1.default.createElement("div", __assign({ ref: containerRef, className: (0, classnames_1.default)('iui-slider-container', {
                 'iui-grabbing': undefined !== activeThumbIndex,
             }), onPointerDown: handlePointerDownOnSlider }, railContainerProps),
             react_1.default.createElement("div", { className: 'iui-slider-rail' }),

package/cjs/core/Slider/Thumb.js

@@ -72,7 +72,7 @@ var Thumb = function (props) {
     var _b = react_1.default.useState(false), isHovered = _b[0], setIsHovered = _b[1];
     var leftPercent = (100.0 * (value - sliderMin)) / (sliderMax - sliderMin);
     var _c = thumbProps || {}, style = _c.style, className = _c.className, rest = __rest(_c, ["style", "className"]);
-    return (react_1.default.createElement(Tooltip_1.Tooltip, __assign({ visible: isActive || hasFocus || isHovered, content: tooltipProps.content, placement: 'top' }, tooltipProps),
-        react_1.default.createElement("div", __assign({}, rest, { "data-index": index, ref: thumbRef, style: __assign(__assign({}, style), { left: leftPercent + "%" }), className: classnames_1.default('iui-slider-thumb', { 'iui-active': isActive }, className), role: 'slider', tabIndex: disabled ? undefined : 0, "aria-valuemin": minVal, "aria-valuenow": value, "aria-valuemax": maxVal, "aria-disabled": disabled, onPointerDown: handlePointerDownOnThumb, onKeyDown: handleOnKeyDown, onFocus: function () { return setHasFocus(true); }, onBlur: function () { return setHasFocus(false); }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }))));
+    return (react_1.default.createElement(Tooltip_1.Tooltip, __assign({ visible: isActive || hasFocus || isHovered, placement: 'top' }, tooltipProps),
+        react_1.default.createElement("div", __assign({}, rest, { "data-index": index, ref: thumbRef, style: __assign(__assign({}, style), { left: leftPercent + "%" }), className: (0, classnames_1.default)('iui-slider-thumb', { 'iui-active': isActive }, className), role: 'slider', tabIndex: disabled ? undefined : 0, "aria-valuemin": minVal, "aria-valuenow": value, "aria-valuemax": maxVal, "aria-disabled": disabled, onPointerDown: handlePointerDownOnThumb, onKeyDown: handleOnKeyDown, onFocus: function () { return setHasFocus(true); }, onBlur: function () { return setHasFocus(false); }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }))));
 };
 exports.Thumb = Thumb;