@itwin/itwinui-react 1.48.0 → 2.0.0-dev.0

package/esm/core/Header/HeaderBasicButton.js

@@ -0,0 +1,46 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import cx from 'classnames';
+import React from 'react';
+import { useTheme } from '../utils';
+export var HeaderBasicButton = React.forwardRef(function (props, ref) {
+    var onClick = props.onClick, className = props.className, children = props.children, style = props.style, _a = props.type, type = _a === void 0 ? 'button' : _a, startIcon = props.startIcon, endIcon = props.endIcon, _b = props.as, Element = _b === void 0 ? 'button' : _b, styleType = props.styleType, size = props.size, rest = __rest(props, ["onClick", "className", "children", "style", "type", "startIcon", "endIcon", "as", "styleType", "size"]);
+    styleType; // To omit and prevent eslint error.
+    size; // To omit and prevent eslint error.
+    useTheme();
+    return (React.createElement(Element, __assign({ className: cx('iui-header-breadcrumb-button', className), onClick: onClick, ref: ref, type: type, style: style }, rest),
+        startIcon &&
+            React.cloneElement(startIcon, {
+                className: startIcon.props.className,
+            }),
+        children,
+        endIcon &&
+            React.cloneElement(endIcon, {
+                className: endIcon.props.className,
+            })));
+});
+export default HeaderBasicButton;

package/esm/core/Header/HeaderBreadcrumbs.js

@@ -50,9 +50,11 @@ import '@itwin/itwinui-css/css/header.css';
 export var HeaderBreadcrumbs = function (props) {
     var items = props.items, rest = __rest(props, ["items"]);
     useTheme();
-    return (React.createElement("nav", __assign({ "aria-label": 'breadcrumbs' }, rest), items.reduce(function (previous, current, index) { return __spreadArray(__spreadArray([], previous, true), [
-        current,
-        index !== items.length - 1 && (React.createElement(SvgChevronRight, { key: "chevron".concat(index), "aria-hidden": true, className: 'iui-chevron' })),
-    ], false); }, [])));
+    return (React.createElement("nav", __assign({ "aria-label": 'breadcrumbs', className: 'iui-header-breadcrumbs' }, rest),
+        React.createElement("ol", { className: 'iui-header-breadcrumbs-list' }, items.reduce(function (previous, current, index) { return __spreadArray(__spreadArray([], previous, true), [
+            current,
+            index !== items.length - 1 && (React.createElement("li", { className: 'iui-breadcrumbs-separator', key: index },
+                React.createElement(SvgChevronRight, { key: "chevron".concat(index), "aria-hidden": true, className: 'iui-chevron' }))),
+        ], false); }, []))));
 };
 export default HeaderBreadcrumbs;

package/esm/core/Header/HeaderButton.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import { ButtonProps, DropdownButtonProps } from '../Buttons';
+import { ButtonProps } from '../Buttons';
 import { PolymorphicForwardRefComponent } from '../utils';
 import '@itwin/itwinui-css/css/header.css';
+import { HeaderDropdownButtonProps } from './HeaderDropdownButton';
 export declare type HeaderButtonProps = {
     /**
      * Main label of the header button.
@@ -16,7 +17,7 @@ export declare type HeaderButtonProps = {
      * @default false
      */
     isActive?: boolean;
-} & Partial<Pick<DropdownButtonProps, 'menuItems'>> & Pick<ButtonProps, 'startIcon' | 'endIcon'>;
+} & Partial<Pick<HeaderDropdownButtonProps, 'menuItems'>> & Pick<ButtonProps, 'startIcon' | 'endIcon'>;
 declare type HeaderButtonComponent = PolymorphicForwardRefComponent<'button', HeaderButtonProps>;
 /**
  * Header button that handles slim state of the `Header` it's in.

package/esm/core/Header/HeaderButton.js

@@ -26,9 +26,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import cx from 'classnames';
 import React from 'react';
-import { Button, DropdownButton, SplitButton, } from '../Buttons';
 import { useTheme } from '../utils';
 import '@itwin/itwinui-css/css/header.css';
+import { HeaderSplitButton } from './HeaderSplitButton';
+import { HeaderDropdownButton, } from './HeaderDropdownButton';
+import { HeaderBasicButton } from './HeaderBasicButton';
 var isSplitButton = function (props) {
     return !!props.menuItems && !!props.onClick;
 };
@@ -46,26 +48,16 @@ var isDropdownButton = function (props) {
  * <HeaderButton name='Project D' isActive />
  */
 export var HeaderButton = React.forwardRef(function (props, ref) {
-    var name = props.name, description = props.description, _a = props.isActive, isActive = _a === void 0 ? false : _a, className = props.className, startIcon = props.startIcon, menuItems = props.menuItems, rest = __rest(props, ["name", "description", "isActive", "className", "startIcon", "menuItems"]);
+    var name = props.name, description = props.description, _a = props.isActive, isActive = _a === void 0 ? false : _a, className = props.className, startIcon = props.startIcon, menuItems = props.menuItems, disabled = props.disabled, rest = __rest(props, ["name", "description", "isActive", "className", "startIcon", "menuItems", "disabled"]);
     useTheme();
     var buttonProps = __assign(__assign({ startIcon: React.isValidElement(startIcon)
             ? React.cloneElement(startIcon, {
-                className: cx('iui-header-button-icon', startIcon.props.className),
+                className: cx('iui-header-breadcrumb-button-icon', startIcon.props.className),
             })
-            : undefined, styleType: 'borderless', className: cx({
-            'iui-header-button': !isSplitButton(props),
-            'iui-header-split-button': isSplitButton(props),
-            'iui-header-dropdown-button': !isSplitButton(props) && isDropdownButton(props),
-            'iui-active': isActive,
-        }, className), 'aria-current': isActive ? 'location' : undefined, children: (React.createElement(React.Fragment, null,
-            React.createElement("div", null, name),
-            description && React.createElement("div", { className: 'iui-description' }, description))), ref: ref }, (!!menuItems && { menuItems: menuItems })), rest);
-    if (isSplitButton(buttonProps)) {
-        return React.createElement(SplitButton, __assign({}, buttonProps));
-    }
-    if (isDropdownButton(buttonProps)) {
-        return React.createElement(DropdownButton, __assign({}, buttonProps));
-    }
-    return React.createElement(Button, __assign({}, buttonProps));
+            : undefined, className: className, children: (React.createElement("span", { className: 'iui-header-breadcrumb-button-text' },
+            React.createElement("span", { className: 'iui-header-breadcrumb-button-text-label' }, name),
+            description && (React.createElement("span", { className: 'iui-header-breadcrumb-button-text-sublabel' }, description)))), ref: ref, disabled: disabled }, (!!menuItems && { menuItems: menuItems })), rest);
+    var headerButton = isSplitButton(buttonProps) ? (React.createElement(HeaderSplitButton, __assign({}, buttonProps))) : isDropdownButton(buttonProps) ? (React.createElement(HeaderDropdownButton, __assign({}, buttonProps))) : (React.createElement(HeaderBasicButton, __assign({}, buttonProps)));
+    return (React.createElement("li", { className: 'iui-header-breadcrumb-item', "aria-current": isActive ? 'location' : undefined, "aria-disabled": disabled ? 'true' : undefined }, headerButton));
 });
 export default HeaderButton;

package/esm/core/Header/HeaderDropdownButton.d.ts

@@ -0,0 +1,6 @@
+import { PolymorphicForwardRefComponent } from '../utils';
+import { DropdownButtonProps } from '../Buttons';
+export declare type HeaderDropdownButtonProps = DropdownButtonProps;
+declare type HeaderDropdownButtonComponent = PolymorphicForwardRefComponent<'button', HeaderDropdownButtonProps>;
+export declare const HeaderDropdownButton: HeaderDropdownButtonComponent;
+export default HeaderDropdownButton;

package/esm/core/Header/HeaderDropdownButton.js

@@ -0,0 +1,50 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import cx from 'classnames';
+import React from 'react';
+import { DropdownMenu } from '../DropdownMenu';
+import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall';
+import SvgCaretUpSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretUpSmall';
+import { useTheme } from '../utils';
+import { useMergedRefs } from '../utils';
+import { HeaderBasicButton } from './HeaderBasicButton';
+export var HeaderDropdownButton = React.forwardRef(function (props, ref) {
+    var menuItems = props.menuItems, className = props.className, children = props.children, rest = __rest(props, ["menuItems", "className", "children"]);
+    useTheme();
+    var _a = React.useState(false), isMenuOpen = _a[0], setIsMenuOpen = _a[1];
+    var _b = React.useState(0), menuWidth = _b[0], setMenuWidth = _b[1];
+    var buttonRef = React.useRef(null);
+    var refs = useMergedRefs(ref, buttonRef);
+    React.useEffect(function () {
+        if (buttonRef.current) {
+            setMenuWidth(buttonRef.current.offsetWidth);
+        }
+    }, [children]);
+    return (React.createElement(DropdownMenu, { menuItems: menuItems, style: { minWidth: menuWidth }, onShow: function () { return setIsMenuOpen(true); }, onHide: function () { return setIsMenuOpen(false); } },
+        React.createElement(HeaderBasicButton, __assign({ className: cx('iui-header-breadcrumb-button', className), ref: refs, "aria-label": 'Dropdown', endIcon: isMenuOpen ? (React.createElement(SvgCaretUpSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })) : (React.createElement(SvgCaretDownSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })) }, rest), children)));
+});
+export default HeaderDropdownButton;

package/esm/core/Header/HeaderLogo.js

@@ -46,12 +46,12 @@ export var HeaderLogo = function (props) {
         }
     };
     useTheme();
-    return (React.createElement("div", __assign({ className: cx('iui-header-logo', className), role: onClick && 'button', tabIndex: onClick && 0, onKeyDown: keyDownHandler, onClick: onClick }, rest),
+    return (React.createElement("div", __assign({ className: cx('iui-header-brand', className), role: onClick && 'button', tabIndex: onClick && 0, onKeyDown: keyDownHandler, onClick: onClick }, rest),
         React.isValidElement(logo)
             ? React.cloneElement(logo, {
-                className: cx('iui-header-button-icon', logo.props.className),
+                className: cx('iui-header-brand-icon', logo.props.className),
             })
             : undefined,
-        children && React.createElement("span", { className: 'iui-label' }, children)));
+        children && React.createElement("span", { className: 'iui-header-brand-label' }, children)));
 };
 export default HeaderLogo;

package/esm/core/Header/HeaderSplitButton.d.ts

@@ -0,0 +1,6 @@
+import { PolymorphicForwardRefComponent } from '../utils';
+import { SplitButtonProps } from '../Buttons';
+export declare type HeaderSplitButtonProps = SplitButtonProps;
+declare type HeaderSplitButtonComponent = PolymorphicForwardRefComponent<'button', HeaderSplitButtonProps>;
+export declare const HeaderSplitButton: HeaderSplitButtonComponent;
+export default HeaderSplitButton;

package/esm/core/Header/HeaderSplitButton.js

@@ -0,0 +1,50 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import cx from 'classnames';
+import React from 'react';
+import { DropdownMenu } from '../DropdownMenu';
+import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall';
+import SvgCaretUpSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretUpSmall';
+import { useTheme } from '../utils';
+import { HeaderBasicButton } from './HeaderBasicButton';
+export var HeaderSplitButton = React.forwardRef(function (props, forwardedRef) {
+    var menuItems = props.menuItems, className = props.className, _a = props.menuPlacement, menuPlacement = _a === void 0 ? 'bottom-end' : _a, children = props.children, style = props.style, title = props.title, disabled = props.disabled, rest = __rest(props, ["menuItems", "className", "menuPlacement", "children", "style", "title", "disabled"]);
+    useTheme();
+    var _b = React.useState(false), isMenuOpen = _b[0], setIsMenuOpen = _b[1];
+    var _c = React.useState(0), menuWidth = _c[0], setMenuWidth = _c[1];
+    var ref = React.useRef(null);
+    React.useEffect(function () {
+        if (ref.current) {
+            setMenuWidth(ref.current.offsetWidth);
+        }
+    }, [children]);
+    return (React.createElement("span", { className: cx('iui-header-breadcrumb-button-wrapper', className), style: style, title: title, ref: ref },
+        React.createElement(HeaderBasicButton, __assign({ ref: forwardedRef, disabled: disabled }, rest), children),
+        React.createElement(DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minWidth: menuWidth }, onShow: React.useCallback(function () { return setIsMenuOpen(true); }, []), onHide: React.useCallback(function () { return setIsMenuOpen(false); }, []) },
+            React.createElement("button", { className: 'iui-header-breadcrumb-button iui-header-breadcrumb-button-split', disabled: disabled }, isMenuOpen ? (React.createElement(SvgCaretUpSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })) : (React.createElement(SvgCaretDownSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true }))))));
+});
+export default HeaderSplitButton;

package/esm/core/Input/Input.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/input.css';
 export declare type InputProps = {
     /**
      * Set focus on input element.

package/esm/core/Input/Input.js

@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useMergedRefs, useTheme } from '../utils';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/input.css';
 /**
  * Basic input component
  * @example
@@ -36,8 +36,7 @@ import '@itwin/itwinui-css/css/inputs.css';
  * <Input size='small' />
  */
 export var Input = React.forwardRef(function (props, ref) {
-    var _a;
-    var _b = props.setFocus, setFocus = _b === void 0 ? false : _b, size = props.size, className = props.className, rest = __rest(props, ["setFocus", "size", "className"]);
+    var _a = props.setFocus, setFocus = _a === void 0 ? false : _a, size = props.size, className = props.className, rest = __rest(props, ["setFocus", "size", "className"]);
     useTheme();
     var inputRef = React.useRef(null);
     var refs = useMergedRefs(inputRef, ref);
@@ -46,6 +45,6 @@ export var Input = React.forwardRef(function (props, ref) {
             inputRef.current.focus();
         }
     }, [setFocus]);
-    return (React.createElement("input", __assign({ className: cx('iui-input', (_a = {}, _a["iui-".concat(size)] = !!size, _a), className), ref: refs }, rest)));
+    return (React.createElement("input", __assign({ className: cx('iui-input', className), "data-iui-size": size, ref: refs }, rest)));
 });
 export default Input;

package/esm/core/InputGroup/InputGroup.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/utils.css';
 export declare type InputGroupProps = {
     /**
      * Label of the group.

package/esm/core/InputGroup/InputGroup.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import { StatusIconMap, useTheme, InputContainer } from '../utils';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/utils.css';
 /**
  * Group Checkbox/Radio components together
  * @example

package/esm/core/Label/Label.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/utils.css';
 declare type LabelOwnProps<T extends React.ElementType = 'label'> = {
     /**
      * What element should the label be rendered as?

package/esm/core/Label/Label.js

@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme } from '../utils';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/utils.css';
 /**
  * A standalone label to be used with input components (using `htmlFor`).
  * Can be rendered as any element, e.g. span, using the `as` prop.

package/esm/core/LabeledInput/LabeledInput.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { InputProps } from '../Input/Input';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/input.css';
 export declare type LabeledInputProps = {
     /**
      * Label of the input.
@@ -93,7 +93,7 @@ export declare const LabeledInput: React.ForwardRefExoticComponent<{
      *
      * Defaults to 'block' if `displayStyle` is `default`, else 'inline'.
      */
-    iconDisplayStyle?: "block" | "inline" | undefined;
+    iconDisplayStyle?: "inline" | "block" | undefined;
 } & {
     setFocus?: boolean | undefined;
     size?: "small" | "large" | undefined;

package/esm/core/LabeledInput/LabeledInput.js

@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { Input } from '../Input/Input';
 import { StatusIconMap, useTheme, InputContainer } from '../utils';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/input.css';
 /**
  * Basic labeled input component
  * @example

package/esm/core/LabeledSelect/LabeledSelect.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SelectProps } from '../Select/Select';
 import { LabeledInputProps } from '../LabeledInput';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/select.css';
 export declare type LabeledSelectProps<T> = {
     /**
      * Label of the select.

package/esm/core/LabeledSelect/LabeledSelect.js

@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { Select } from '../Select';
 import { StatusIconMap, useTheme, InputContainer } from '../utils';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/select.css';
 /**
  * Labeled select component to select value from options.
  * @example

package/esm/core/LabeledTextarea/LabeledTextarea.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextareaProps } from '../Textarea/Textarea';
 import { LabeledInputProps } from '../LabeledInput';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/input.css';
 export declare type LabeledTextareaProps = {
     /**
      * Label for the textarea.

package/esm/core/LabeledTextarea/LabeledTextarea.js

@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { StatusIconMap, useTheme, InputContainer } from '../utils';
 import { Textarea } from '../Textarea';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/input.css';
 /**
  * Textarea wrapper that allows for additional styling and labelling
  * @example

package/esm/core/Radio/Radio.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/radio.css';
 export declare type RadioProps = {
     /**
      * Label of the radio.
@@ -9,20 +9,6 @@ export declare type RadioProps = {
      * Status of the radio.
      */
     status?: 'positive' | 'warning' | 'negative';
-    /**
-     * Custom CSS class name for the checkmark element.
-     *
-     * @deprecated As of 1.32.0, this is applied on the actual radio `<input>` element.
-     * The checkmark has been moved into a pseudo-element.
-     */
-    checkmarkClassName?: string;
-    /**
-     * Custom CSS Style for the checkmark element.
-     *
-     * @deprecated As of 1.32.0, this is applied on the actual radio `<input>` element.
-     * The checkmark has been moved into a pseudo-element.
-     */
-    checkmarkStyle?: React.CSSProperties;
     /**
      * Set focus on radio element.
      * @default false
@@ -48,20 +34,6 @@ export declare const Radio: React.ForwardRefExoticComponent<{
      * Status of the radio.
      */
     status?: "positive" | "warning" | "negative" | undefined;
-    /**
-     * Custom CSS class name for the checkmark element.
-     *
-     * @deprecated As of 1.32.0, this is applied on the actual radio `<input>` element.
-     * The checkmark has been moved into a pseudo-element.
-     */
-    checkmarkClassName?: string | undefined;
-    /**
-     * Custom CSS Style for the checkmark element.
-     *
-     * @deprecated As of 1.32.0, this is applied on the actual radio `<input>` element.
-     * The checkmark has been moved into a pseudo-element.
-     */
-    checkmarkStyle?: React.CSSProperties | undefined;
     /**
      * Set focus on radio element.
      * @default false

package/esm/core/Radio/Radio.js

@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useMergedRefs, useTheme } from '../utils';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/radio.css';
 /**
  * Basic radio input component
  * @example
@@ -40,7 +40,7 @@ import '@itwin/itwinui-css/css/inputs.css';
  */
 export var Radio = React.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, checkmarkClassName = props.checkmarkClassName, checkmarkStyle = props.checkmarkStyle, _d = props.setFocus, setFocus = _d === void 0 ? false : _d, rest = __rest(props, ["className", "disabled", "label", "status", "style", "checkmarkClassName", "checkmarkStyle", "setFocus"]);
+    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"]);
     useTheme();
     var inputElementRef = React.useRef(null);
     var refs = useMergedRefs(inputElementRef, ref);
@@ -49,7 +49,7 @@ export var Radio = React.forwardRef(function (props, ref) {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
-    var radio = (React.createElement("input", __assign({ className: cx('iui-radio', className && (_a = {}, _a[className] = !label, _a), checkmarkClassName), style: __assign(__assign({}, (!label && style)), checkmarkStyle), disabled: disabled, type: 'radio', ref: refs }, rest)));
+    var radio = (React.createElement("input", __assign({ className: cx('iui-radio', className && (_a = {}, _a[className] = !label, _a)), style: !label ? style : undefined, disabled: disabled, type: 'radio', ref: refs }, rest)));
     return !label ? (radio) : (React.createElement("label", { className: cx('iui-radio-wrapper', (_b = { 'iui-disabled': disabled }, _b["iui-".concat(status)] = !!status, _b), className), style: style },
         radio,
         label && React.createElement("span", { className: 'iui-radio-label' }, label)));

package/esm/core/RadioTiles/RadioTileGroup.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { InputGroupProps } from '../InputGroup';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/radio-tile.css';
 export declare type RadioTileGroupProps = Omit<InputGroupProps, 'displayStyle' | 'disabled'>;
 /**
  * RadioTileGroup component to group RadioTile components together

package/esm/core/RadioTiles/RadioTileGroup.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import { InputGroup } from '../InputGroup';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/radio-tile.css';
 import { useTheme } from '../utils';
 /**
  * RadioTileGroup component to group RadioTile components together

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PopoverProps, CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/select.css';
 export declare type ItemRendererProps = {
     /**
      * Close handler that closes the dropdown.

package/esm/core/Select/Select.js

@@ -29,7 +29,7 @@ import cx from 'classnames';
 import { DropdownMenu } from '../DropdownMenu';
 import { MenuItem } from '../Menu/MenuItem';
 import { useTheme, useOverflow, } from '../utils';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/select.css';
 import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall';
 import SelectTag from './SelectTag';
 var isMultipleEnabled = function (variable, multiple) {
@@ -90,14 +90,13 @@ var isSingleOnChange = function (onChange, multiple) {
  */
 export var Select = function (props) {
     var _a;
-    var _b;
-    var options = props.options, value = props.value, onChange = props.onChange, placeholder = props.placeholder, _c = props.disabled, disabled = _c === void 0 ? false : _c, size = props.size, _d = props.setFocus, setFocus = _d === void 0 ? false : _d, itemRenderer = props.itemRenderer, selectedItemRenderer = props.selectedItemRenderer, className = props.className, style = props.style, menuClassName = props.menuClassName, menuStyle = props.menuStyle, onShow = props.onShow, onHide = props.onHide, popoverProps = props.popoverProps, _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"]);
+    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"]);
     useTheme();
-    var _f = React.useState((_b = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _b !== void 0 ? _b : false), isOpen = _f[0], setIsOpen = _f[1];
+    var _e = React.useState((_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _a !== void 0 ? _a : false), isOpen = _e[0], setIsOpen = _e[1];
     React.useEffect(function () {
         setIsOpen(function (open) { var _a; return (_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _a !== void 0 ? _a : open; });
     }, [popoverProps]);
-    var _g = React.useState(0), minWidth = _g[0], setMinWidth = _g[1];
+    var _f = React.useState(0), minWidth = _f[0], setMinWidth = _f[1];
     var toggle = function () { return setIsOpen(function (open) { return !open; }); };
     var selectRef = React.useRef(null);
     var toggleButtonRef = React.useRef(null);
@@ -171,19 +170,17 @@ export var Select = function (props) {
         return React.createElement(SelectTag, { key: item.label, label: item.label });
     }, []);
     return (React.createElement("div", __assign({ className: cx('iui-input-with-icon', className), "aria-expanded": isOpen, "aria-haspopup": 'listbox', style: style }, rest),
-        React.createElement(DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: cx('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(".concat(minWidth * 2, "px, 90vw)"), maxHeight: 315 }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen, onClickOutside: function (_, _a) {
+        React.createElement(DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: cx('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(".concat(minWidth * 2, "px, 90vw)") }, 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))) {
                     setIsOpen(false);
                 }
             } }),
-            React.createElement("div", { ref: selectRef, className: cx('iui-select-button', (_a = {
-                        '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 },
+            React.createElement("div", { ref: selectRef, className: cx('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 },
                 (!selectedItems || selectedItems.length === 0) && (React.createElement("span", { className: 'iui-content' }, placeholder)),
                 isMultipleEnabled(selectedItems, multiple) ? (React.createElement(MultipleSelectButton, { selectedItems: selectedItems, selectedItemsRenderer: selectedItemRenderer, tagRenderer: tagRenderer })) : (React.createElement(SingleSelectButton, { selectedItem: selectedItems, selectedItemRenderer: selectedItemRenderer })))),
         React.createElement("span", { ref: toggleButtonRef, className: cx('iui-end-icon', {

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/select.css';
 export declare type SelectTagProps = {
     /**
      * Text inside the tag.

package/esm/core/Select/SelectTag.js

@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../utils';
-import '@itwin/itwinui-css/css/inputs.css';
+import '@itwin/itwinui-css/css/select.css';
 /**
  * Tag for showing selected value in `Select`.
  * @private

package/esm/core/SideNavigation/SidenavButton.js

@@ -37,8 +37,7 @@ export var SidenavButton = React.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, _c = props.isSubmenuOpen, isSubmenuOpen = _c === void 0 ? false : _c, rest = __rest(props, ["className", "children", "isActive", "disabled", "isSubmenuOpen"]);
     useTheme();
     return (React.createElement(Button, __assign({ className: cx('iui-sidenav-button', {
-            'iui-active': isActive,
             'iui-submenu-open': isSubmenuOpen,
-        }, className), size: 'large', disabled: disabled, ref: ref }, rest), children));
+        }, className), "data-iui-active": isActive, size: 'large', disabled: disabled, ref: ref }, rest), children));
 });
 export default SidenavButton;