@itwin/itwinui-react 3.2.3 → 3.3.0

package/esm/core/InputGroup/InputGroup.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { StatusIconMap, Box } from '../utils/index.js';
+import { Box } from '../utils/index.js';
 import { InputGrid } from '../InputGrid/InputGrid.js';
 import { Label } from '../Label/Label.js';
 import { StatusMessage } from '../StatusMessage/StatusMessage.js';
@@ -25,20 +25,11 @@ import { StatusMessage } from '../StatusMessage/StatusMessage.js';
  */
 export const InputGroup = React.forwardRef((props, forwardedRef) => {
     const { className, children, disabled = false, displayStyle = 'default', label, message, status, svgIcon, required = false, labelProps, messageProps, innerProps, ...rest } = props;
-    const icon = () => {
-        if (svgIcon) {
-            return React.cloneElement(svgIcon, { 'aria-hidden': true });
-        }
-        if (status && message) {
-            return React.cloneElement(StatusIconMap[status](), {
-                'aria-hidden': true,
-            });
-        }
-        return undefined;
-    };
-    return (React.createElement(InputGrid, { ref: forwardedRef, as: 'div', labelPlacement: displayStyle, className: cx('iui-input-group-wrapper', className), ...rest },
+    return (React.createElement(InputGrid, { ref: forwardedRef, as: 'div', labelPlacement: displayStyle, className: cx('iui-input-group-wrapper', className), "data-iui-status": status, ...rest },
         label && (React.createElement(Label, { as: 'label', required: required, disabled: disabled, ...labelProps }, label)),
         React.createElement(Box, { as: 'div', ...innerProps, className: cx('iui-input-group', innerProps?.className) }, children),
-        (message || status || svgIcon) && (React.createElement(StatusMessage, { startIcon: icon(), status: status, ...messageProps }, displayStyle !== 'inline' && message))));
+        (message || status || svgIcon) && (React.createElement(StatusMessage, { iconProps: {
+                'aria-hidden': true,
+            }, startIcon: svgIcon, status: status, ...messageProps }, displayStyle !== 'inline' && message))));
 });
 export default InputGroup;

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { Input } from '../Input/Input.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import { InputGrid } from '../InputGrid/InputGrid.js';
-import { InputWithDecorations } from '../InputWithDecorations/InputWithDecorations.js';
 import { Icon } from '../Icon/Icon.js';
 export type LabeledInputProps = {
     /**
@@ -48,7 +47,7 @@ export type LabeledInputProps = {
     /**
      *  Passes properties for input wrapper.
      */
-    inputWrapperProps?: React.ComponentProps<typeof InputWithDecorations>;
+    inputWrapperProps?: React.ComponentPropsWithRef<'div'>;
 } & React.ComponentProps<typeof Input>;
 /**
  * Basic labeled input component

package/esm/core/LabeledInput/LabeledInput.js

@@ -4,12 +4,12 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Input } from '../Input/Input.js';
-import { StatusIconMap, useId } from '../utils/index.js';
+import { InputWithIcon, StatusIconMap } from '../utils/index.js';
 import { InputGrid } from '../InputGrid/InputGrid.js';
-import { InputWithDecorations } from '../InputWithDecorations/InputWithDecorations.js';
 import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 import { Label } from '../Label/Label.js';
 import { Icon } from '../Icon/Icon.js';
+import cx from 'classnames';
 /**
  * Basic labeled input component
  * @example
@@ -19,15 +19,14 @@ import { Icon } from '../Icon/Icon.js';
  * <LabeledInput status='negative' label='Negative' />
  */
 export const LabeledInput = React.forwardRef((props, ref) => {
-    const uid = useId();
-    const { disabled = false, label, message, status, svgIcon, wrapperProps, labelProps, messageContentProps, iconProps, inputWrapperProps, displayStyle = 'default', required = false, id = uid, ...rest } = props;
+    const { disabled = false, label, message, status, svgIcon, wrapperProps, labelProps, messageContentProps, iconProps, inputWrapperProps, displayStyle = 'default', required = false, ...rest } = props;
     const icon = svgIcon ?? (status && StatusIconMap[status]());
     const shouldShowIcon = svgIcon !== null && (svgIcon || (status && !message));
-    return (React.createElement(InputGrid, { labelPlacement: displayStyle, ...wrapperProps },
-        label && (React.createElement(Label, { as: 'label', required: required, disabled: disabled, htmlFor: id, ...labelProps }, label)),
-        React.createElement(InputWithDecorations, { status: status, isDisabled: disabled, ...inputWrapperProps },
-            React.createElement(InputWithDecorations.Input, { disabled: disabled, required: required, id: id, ref: ref, ...rest }),
-            shouldShowIcon && (React.createElement(Icon, { fill: !svgIcon ? status : undefined, padded: true, ...iconProps }, icon))),
+    return (React.createElement(InputGrid, { labelPlacement: displayStyle, "data-iui-status": status, ...wrapperProps },
+        label && (React.createElement(Label, { as: 'label', required: required, disabled: disabled, ...labelProps }, label)),
+        React.createElement(InputWithIcon, { ...inputWrapperProps },
+            React.createElement(Input, { disabled: disabled, required: required, ref: ref, ...rest }),
+            shouldShowIcon && (React.createElement(Icon, { fill: status, ...iconProps, className: cx('iui-end-icon', iconProps?.className) }, icon))),
         typeof message === 'string' ? (React.createElement(StatusMessage, { status: status, iconProps: iconProps, contentProps: messageContentProps }, message)) : (message)));
 });
 export default LabeledInput;

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

@@ -10,6 +10,22 @@ export type LabeledSelectProps<T> = {
     label?: React.ReactNode;
     /**
      * Message below the select. Does not apply to 'inline' select.
+     *
+     * @example
+     * <caption>strings</caption>
+     * <LabeledSelect message='Positive Message' … />
+     *
+     * @example
+     * <caption>Using StatusMessage for complete customization (e.g. icon)</caption>
+     * <LabeledSelect
+     *   status="positive"
+     *   message={
+     *     <StatusMessage status="positive" startIcon={<SvgStar />}>
+     *       Help message
+     *     </StatusMessage>
+     *   }
+     *   …
+     * />
      */
     message?: React.ReactNode;
     /**
@@ -18,6 +34,8 @@ export type LabeledSelectProps<T> = {
      */
     status?: 'positive' | 'warning' | 'negative';
     /**
+     * @deprecated Pass a `<StatusMessage startIcon={svgIcon} />` to the `message` prop instead.
+     *
      * Custom svg icon. Will override status icon if specified.
      */
     svgIcon?: JSX.Element;
@@ -76,5 +94,7 @@ export type LabeledSelectProps<T> = {
  *   svgIcon={<SvgCamera />}
  * />
  */
-export declare const LabeledSelect: React.ForwardRefExoticComponent<LabeledSelectProps<unknown> & React.RefAttributes<HTMLElement>>;
+export declare const LabeledSelect: <T>(props: LabeledSelectProps<T> & {
+    ref?: React.ForwardedRef<HTMLElement> | undefined;
+}) => JSX.Element;
 export default LabeledSelect;

package/esm/core/LabeledSelect/LabeledSelect.js

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Select } from '../Select/Select.js';
-import { StatusIconMap, useId } from '../utils/index.js';
 import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 import { InputGrid } from '../InputGrid/InputGrid.js';
 import { Label } from '../Label/Label.js';
@@ -43,23 +42,10 @@ import { Icon } from '../Icon/Icon.js';
  * />
  */
 export const LabeledSelect = React.forwardRef((props, forwardedRef) => {
-    const { className, disabled = false, label, message, status, svgIcon, displayStyle = 'default', style, required = false, triggerProps, wrapperProps, labelProps, messageContentProps, messageIconProps, ...rest } = props;
-    const labelId = `${useId()}-label`;
-    const icon = () => {
-        if (svgIcon) {
-            return React.createElement(Icon, null, svgIcon);
-        }
-        if (status && message) {
-            return StatusIconMap[status]();
-        }
-        return undefined;
-    };
-    return (React.createElement(InputGrid, { labelPlacement: displayStyle, ...wrapperProps },
-        label && (React.createElement(Label, { as: 'div', required: required, disabled: disabled, id: labelId, ...labelProps }, label)),
-        React.createElement(Select, { disabled: disabled, className: className, style: style, status: status, ...rest, ref: forwardedRef, triggerProps: {
-                'aria-labelledby': labelId,
-                ...triggerProps,
-            } }),
-        typeof message === 'string' ? (React.createElement(StatusMessage, { status: status, startIcon: displayStyle === 'default' ? icon() : undefined, iconProps: messageIconProps, contentProps: messageContentProps }, message)) : (message)));
+    const { className, disabled = false, label, message, status, svgIcon, displayStyle = 'default', style, required = false, wrapperProps, labelProps, messageContentProps, messageIconProps, ...rest } = props;
+    return (React.createElement(InputGrid, { labelPlacement: displayStyle, "data-iui-status": status, ...wrapperProps },
+        label && (React.createElement(Label, { as: 'div', required: required, disabled: disabled, ...labelProps }, label)),
+        React.createElement(Select, { disabled: disabled, className: className, style: style, ...rest, ref: forwardedRef }),
+        typeof message === 'string' ? (React.createElement(StatusMessage, { status: status, startIcon: svgIcon, iconProps: messageIconProps, contentProps: messageContentProps }, message)) : (message)));
 });
 export default LabeledSelect;

package/esm/core/List/ListItem.d.ts

@@ -68,4 +68,14 @@ export declare const ListItem: PolymorphicForwardRefComponent<"li", ListItemOwnP
      * </ListItem>
      */
     Description: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+    /**
+     * Wrapper over [LinkAction](https://itwinui.bentley.com/docs/linkaction) which allows rendering a link inside a ListItem.
+     * This ensures that clicking anywhere on the ListItem will trigger the link.
+     *
+     * @example
+     * <ListItem>
+     *  <ListItem.Action href='https://example.com'>Example link</ListItem.Action>
+     * </ListItem>
+     */
+    Action: PolymorphicForwardRefComponent<"a", {}>;
 };

package/esm/core/List/ListItem.js

@@ -5,6 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { polymorphic, Box } from '../utils/index.js';
+import { LinkAction } from '../LinkAction/LinkAction.js';
 const ListItemComponent = React.forwardRef((props, ref) => {
     const { size = 'default', disabled = false, active = false, actionable = false, focused = false, className, ...rest } = props;
     return (React.createElement(Box, { as: 'li', className: cx('iui-list-item', className), "data-iui-active": active ? 'true' : undefined, "data-iui-disabled": disabled ? 'true' : undefined, "data-iui-size": size === 'large' ? 'large' : undefined, "data-iui-actionable": actionable ? 'true' : undefined, "data-iui-focused": focused ? 'true' : undefined, ref: ref, ...rest }));
@@ -20,6 +21,9 @@ ListItemContent.displayName = 'ListItem.Content';
 const ListItemDescription = polymorphic('iui-list-item-description');
 ListItemDescription.displayName = 'ListItem.Description';
 // ----------------------------------------------------------------------------
+const ListItemAction = LinkAction;
+ListItemAction.displayName = 'ListItem.Action';
+// ----------------------------------------------------------------------------
 // Exported compound component
 /**
  * A generic ListItem component that can be used simply for displaying data, or as a base
@@ -61,4 +65,14 @@ export const ListItem = Object.assign(ListItemComponent, {
      * </ListItem>
      */
     Description: ListItemDescription,
+    /**
+     * Wrapper over [LinkAction](https://itwinui.bentley.com/docs/linkaction) which allows rendering a link inside a ListItem.
+     * This ensures that clicking anywhere on the ListItem will trigger the link.
+     *
+     * @example
+     * <ListItem>
+     *  <ListItem.Action href='https://example.com'>Example link</ListItem.Action>
+     * </ListItem>
+     */
+    Action: ListItemAction,
 });

package/esm/core/Menu/MenuItem.d.ts

@@ -43,7 +43,7 @@ export type MenuItemProps = {
      */
     endIcon?: JSX.Element;
     /**
-     * @deprecated Use endIcon
+     * @deprecated Use endIcon.
      * SVG icon component shown on the right.
      */
     badge?: JSX.Element;

package/esm/core/Modal/Modal.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent, PortalProps } from '../utils/index.js';
 import type { DialogMainProps } from '../Dialog/DialogMain.js';
 type ModalProps = {
     /**
@@ -33,12 +33,11 @@ type ModalProps = {
      * If true, the dialog will be portaled into a <div> inside the nearest `ThemeProvider`.
      *
      * Can be set to an object with a `to` property to portal into a specific element.
+     * If `to`/`to()` === `null`/`undefined`, the default behavior will be used (i.e. as if `portal` is not passed).
      *
      * @default true
      */
-    portal?: boolean | {
-        to: HTMLElement;
-    };
+    portal?: PortalProps['portal'];
     /**
      * Content of the modal.
      */

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

@@ -168,5 +168,7 @@ export type SelectProps<T> = {
  *   )}
  * />
  */
-export declare const Select: React.ForwardRefExoticComponent<SelectProps<unknown> & React.RefAttributes<HTMLElement>>;
+export declare const Select: <T>(props: SelectProps<T> & {
+    ref?: React.ForwardedRef<HTMLElement> | undefined;
+}) => JSX.Element;
 export default Select;

package/esm/core/Select/Select.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Menu } from '../Menu/Menu.js';
 import { MenuItem } from '../Menu/MenuItem.js';
-import { SvgCaretDownSmall, useId, AutoclearingHiddenLiveRegion, Box, Portal, useMergedRefs, SvgCheckmark, useLatestRef, } from '../utils/index.js';
+import { SvgCaretDownSmall, useId, AutoclearingHiddenLiveRegion, Box, Portal, useMergedRefs, SvgCheckmark, useLatestRef, InputWithIcon, } from '../utils/index.js';
 import { SelectTag } from './SelectTag.js';
 import { SelectTagContainer } from './SelectTagContainer.js';
 import { Icon } from '../Icon/Icon.js';
@@ -69,7 +69,7 @@ const isSingleOnChange = (onChange, multiple) => {
  */
 export const Select = React.forwardRef((props, forwardedRef) => {
     const uid = useId();
-    const { options, value: valueProp, onChange: onChangeProp, placeholder, disabled = false, size, itemRenderer, selectedItemRenderer, className, style, menuClassName, menuStyle, multiple = false, triggerProps, status, popoverProps, ...rest } = props;
+    const { options, value: valueProp, onChange: onChangeProp, placeholder, disabled = false, size, itemRenderer, selectedItemRenderer, menuClassName, menuStyle, multiple = false, triggerProps, status, popoverProps, ...rest } = props;
     const [isOpen, setIsOpen] = React.useState(false);
     const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
     const [uncontrolledValue, setUncontrolledValue] = React.useState();
@@ -160,7 +160,7 @@ export const Select = React.forwardRef((props, forwardedRef) => {
         onVisibleChange: (open) => (open ? show() : hide()),
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement(Box, { className: cx('iui-input-with-icon', className), style: style, ...rest, ref: useMergedRefs(popover.refs.setPositionReference, forwardedRef) },
+        React.createElement(InputWithIcon, { ...rest, ref: useMergedRefs(popover.refs.setPositionReference, forwardedRef) },
             React.createElement(Box, { ...popover.getReferenceProps(), tabIndex: 0, role: 'combobox', "data-iui-size": size, "data-iui-status": status, "aria-disabled": disabled, "aria-autocomplete": 'none', "aria-expanded": isOpen, "aria-haspopup": 'listbox', "aria-controls": `${uid}-menu`, ...triggerProps, ref: useMergedRefs(selectRef, triggerProps?.ref, popover.refs.setReference), className: cx('iui-select-button', {
                     'iui-placeholder': (!selectedItems || selectedItems.length === 0) &&
                         !!placeholder,

package/esm/core/StatusMessage/StatusMessage.d.ts

@@ -4,9 +4,11 @@ import { Icon } from '../Icon/Icon.js';
 type StatusMessageProps = {
     /**
      * Custom icon to be displayed at the beginning.
-     * It will default to the `status` icon, if it's set.
+     *
+     * - It will default to the `status` icon, if `status` is set.
+     * - If `startIcon` is set to `null`, no icon will be displayed, even if `status` is set.
      */
-    startIcon?: JSX.Element;
+    startIcon?: JSX.Element | null;
     /**
      * Message content.
      */

package/esm/core/StatusMessage/StatusMessage.js

@@ -15,8 +15,10 @@ import { Icon } from '../Icon/Icon.js';
 export const StatusMessage = React.forwardRef((props, ref) => {
     const { children, startIcon: userStartIcon, status, className, iconProps, contentProps, ...rest } = props;
     const icon = userStartIcon ?? (status && StatusIconMap[status]());
+    // If user passes null, we don't want to show the icon
+    const shouldShowIcon = userStartIcon !== null && !!icon;
     return (React.createElement(Box, { className: cx('iui-status-message', className), "data-iui-status": status, ref: ref, ...rest },
-        !!icon ? (React.createElement(Icon, { "aria-hidden": true, ...iconProps }, icon)) : null,
+        shouldShowIcon ? (React.createElement(Icon, { "aria-hidden": true, ...iconProps }, icon)) : null,
         React.createElement(Box, { ...contentProps }, children)));
 });
 export default StatusMessage;

package/esm/core/Table/columns/selectionColumn.d.ts

@@ -27,7 +27,7 @@ export declare const SelectionColumn: <T extends Record<string, unknown>>(props?
     maxWidth: number;
     columnClassName: string;
     cellClassName: string;
-    Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, initialRows, state, }: HeaderProps<T>) => React.JSX.Element;
+    Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, preFilteredFlatRows, state, }: HeaderProps<T>) => React.JSX.Element;
     Cell: ({ row }: CellProps<T>) => React.JSX.Element;
     cellRenderer: (props: CellRendererProps<T>) => React.JSX.Element;
 };

package/esm/core/Table/columns/selectionColumn.js

@@ -31,9 +31,9 @@ export const SelectionColumn = (props = {}) => {
         maxWidth: densityWidth,
         columnClassName: 'iui-slot',
         cellClassName: 'iui-slot',
-        Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, initialRows, state, }) => {
-            const disabled = rows.every((row) => isDisabled?.(row.original));
-            const checked = initialRows.every((row) => state.selectedRowIds[row.id] || isDisabled?.(row.original));
+        Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, preFilteredFlatRows, state, }) => {
+            const disabled = preFilteredFlatRows.every((row) => isDisabled?.(row.original));
+            const checked = preFilteredFlatRows.every((row) => state.selectedRowIds[row.id] || isDisabled?.(row.original));
             const indeterminate = !checked && Object.keys(state.selectedRowIds).length > 0;
             return (React.createElement(Checkbox, { ...getToggleAllRowsSelectedProps(), style: {}, title: '' // Removes default title that comes from react-table
                 , checked: checked && !disabled, indeterminate: indeterminate, disabled: disabled, onChange: () => toggleAllRowsSelected(!rows.some((row) => row.isSelected)) }));

package/esm/core/utils/components/InputWithIcon.d.ts

@@ -0,0 +1,2 @@
+/** @private */
+export declare const InputWithIcon: import("../props.js").PolymorphicForwardRefComponent<"div", {}>;

package/esm/core/utils/components/InputWithIcon.js

@@ -0,0 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { polymorphic } from '../functions/polymorphic.js';
+/** @private */
+export const InputWithIcon = polymorphic.div('iui-input-with-icon');
+InputWithIcon.displayName = 'InputWithIcon';

package/esm/core/utils/components/Portal.d.ts

@@ -9,10 +9,12 @@ export type PortalProps = {
      *
      * Otherwise, it will portal to the element passed to `to`.
      *
+     * If `to`/`to()` === `null`/`undefined`, the default behavior will be used (i.e. as if `portal` is not passed).
+     *
      * @default true
      */
     portal?: boolean | {
-        to: HTMLElement | (() => HTMLElement);
+        to: HTMLElement | null | undefined | (() => HTMLElement | null | undefined);
     };
 };
 /**
@@ -21,6 +23,8 @@ export type PortalProps = {
  *   - if `portal` is set to true, renders into nearest ThemeContext.portalContainer
  *   - if `portal` is set to false, renders as-is without portal
  *   - otherwise renders into `portal.to` (can be an element or a function)
+ *     - If `to`/`to()` === `null`/`undefined`, the default behavior will be used (i.e. as if `portal` is not passed).
+ *     - E.g. `portal={{ to: () => document.querySelector('.may-not-exist') }}`.
  *
  * @private
  */

package/esm/core/utils/components/Portal.js

@@ -14,6 +14,8 @@ import { useIsClient } from '../hooks/useIsClient.js';
  *   - if `portal` is set to true, renders into nearest ThemeContext.portalContainer
  *   - if `portal` is set to false, renders as-is without portal
  *   - otherwise renders into `portal.to` (can be an element or a function)
+ *     - If `to`/`to()` === `null`/`undefined`, the default behavior will be used (i.e. as if `portal` is not passed).
+ *     - E.g. `portal={{ to: () => document.querySelector('.may-not-exist') }}`.
  *
  * @private
  */
@@ -29,8 +31,10 @@ export const Portal = (props) => {
 // ----------------------------------------------------------------------------
 const usePortalTo = (portal) => {
     const themeInfo = React.useContext(ThemeContext);
+    const defaultPortalTo = themeInfo?.portalContainer ?? getDocument()?.body;
     if (typeof portal === 'boolean') {
-        return portal ? themeInfo?.portalContainer ?? getDocument()?.body : null;
+        return portal ? defaultPortalTo : null;
     }
-    return typeof portal.to === 'function' ? portal.to() : portal.to;
+    const portalTo = typeof portal.to === 'function' ? portal.to() : portal.to;
+    return portalTo ?? defaultPortalTo;
 };

package/esm/core/utils/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './Resizer.js';
 export * from './FocusTrap.js';
 export * from './InputContainer.js';
 export * from './InputFlexContainer.js';
+export * from './InputWithIcon.js';
 export * from './WithCSSTransition.js';
 export * from './MiddleTextTruncation.js';
 export * from './VirtualScroll.js';

package/esm/core/utils/components/index.js

@@ -6,6 +6,7 @@ export * from './Resizer.js';
 export * from './FocusTrap.js';
 export * from './InputContainer.js';
 export * from './InputFlexContainer.js';
+export * from './InputWithIcon.js';
 export * from './WithCSSTransition.js';
 export * from './MiddleTextTruncation.js';
 export * from './VirtualScroll.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.2.3",
+  "version": "3.3.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -85,7 +85,7 @@
     "tslib": "^2.6.0"
   },
   "devDependencies": {
-    "@itwin/itwinui-css": "^2.1.0",
+    "@itwin/itwinui-css": "^2.2.0",
     "@itwin/itwinui-variables": "3.0.0",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.68",
@@ -112,7 +112,7 @@
     "ts-jest": "^29.0.0",
     "ts-node": "^10.0.0",
     "typescript": "~5.1.6",
-    "vite": "^4.5.1"
+    "vite": "^5.0.12"
   },
   "peerDependencies": {
     "react": ">= 17.0.0 < 19.0.0",