@itwin/itwinui-react 1.38.1 → 1.39.0

package/esm/core/ComboBox/ComboBoxMenu.js

@@ -37,16 +37,24 @@ var VirtualizedComboBoxMenu = React.forwardRef(function (_a, forwardedRef) {
     var menuRef = useSafeContext(ComboBoxRefsContext).menuRef;
     var virtualItemRenderer = React.useCallback(function (index) {
         return filteredOptions.length > 0
-            ? getMenuItem(filteredOptions[index])
+            ? getMenuItem(filteredOptions[index], index)
             : children;
     }, // Here is expected empty state content
     [filteredOptions, getMenuItem, children]);
+    var focusedVisibleIndex = React.useMemo(function () {
+        var _a, _b;
+        var currentElement = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-iui-index=\"".concat(focusedIndex, "\"]"));
+        if (!currentElement) {
+            return focusedIndex;
+        }
+        return Number((_b = currentElement.getAttribute('data-iui-filtered-index')) !== null && _b !== void 0 ? _b : focusedIndex);
+    }, [focusedIndex, menuRef]);
     var _f = useVirtualization({
         // 'Fool' VirtualScroll by passing length 1
         // whenever there is no elements, to show empty state message
         itemsLength: filteredOptions.length || 1,
         itemRenderer: virtualItemRenderer,
-        scrollToIndex: focusedIndex,
+        scrollToIndex: focusedVisibleIndex,
     }), outerProps = _f.outerProps, innerProps = _f.innerProps, visibleChildren = _f.visibleChildren;
     var overflowY = ((_d = (_c = (_b = getWindow()) === null || _b === void 0 ? void 0 : _b.CSS) === null || _c === void 0 ? void 0 : _c.supports) === null || _d === void 0 ? void 0 : _d.call(_c, 'overflow-x: overlay'))
         ? { overflowY: 'overlay' }

package/esm/core/ComboBox/helpers.d.ts

@@ -24,7 +24,7 @@ declare type ComboBoxStateContextProps<T = unknown> = {
     minWidth: number;
     enableVirtualization: boolean;
     filteredOptions: SelectOption<T>[];
-    getMenuItem: (option: SelectOption<T>) => JSX.Element;
+    getMenuItem: (option: SelectOption<T>, filteredIndex?: number) => JSX.Element;
     focusedIndex?: number;
 };
 export declare const ComboBoxStateContext: React.Context<ComboBoxStateContextProps<unknown> | undefined>;

package/esm/core/DatePicker/DatePicker.d.ts

@@ -5,7 +5,7 @@ import { TimePickerProps } from '../TimePicker';
  * Generate localized months and days strings using `Intl.DateTimeFormat` for passed locale to use in DatePicker component.
  * If locale is not passed, browser locale will be used.
  */
-export declare const generateLocalizedStrings: (locale?: string | undefined) => {
+export declare const generateLocalizedStrings: (locale?: string) => {
     months: string[];
     shortDays: string[];
     days: string[];

package/esm/core/Table/Table.js

@@ -181,6 +181,12 @@ export var Table = function (props) {
         return result;
     }, {});
     var areFiltersSet = allColumns.some(function (column) { return column.filterValue != null && column.filterValue !== ''; });
+    var showFilterButton = function (column) {
+        return (data.length !== 0 || areFiltersSet) && column.canFilter;
+    };
+    var showSortButton = function (column) {
+        return data.length !== 0 && column.canSort;
+    };
     var onRowClickHandler = React.useCallback(function (event, row) {
         var isDisabled = isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original);
         if (!isDisabled) {
@@ -291,28 +297,32 @@ export var Table = function (props) {
             className: cx('iui-table', (_a = {}, _a["iui-".concat(density)] = density !== 'default', _a), className),
             style: style,
         }), ariaDataAttributes),
-            React.createElement("div", { className: 'iui-table-header', ref: headerRef }, headerGroups.slice(1).map(function (headerGroup) {
-                var headerGroupProps = headerGroup.getHeaderGroupProps({
-                    className: 'iui-row',
-                });
-                return (React.createElement("div", __assign({}, headerGroupProps, { key: headerGroupProps.key }), headerGroup.headers.map(function (column, index) {
-                    var columnProps = column.getHeaderProps(__assign(__assign({}, column.getSortByToggleProps()), { className: cx('iui-cell', { 'iui-actionable': column.canSort }, { 'iui-sorted': column.isSorted }, column.columnClassName), style: __assign(__assign({}, getCellStyle(column, !!state.isTableResizing)), { flexWrap: 'unset' }) }));
-                    return (React.createElement("div", __assign({}, columnProps, column.getDragAndDropProps(), { key: columnProps.key, title: undefined, ref: function (el) {
-                            if (el && isResizable) {
-                                columnRefs.current[column.id] = el;
-                                column.resizeWidth = el.getBoundingClientRect().width;
-                            }
-                        } }),
-                        column.render('Header'),
-                        (data.length !== 0 || areFiltersSet) && (React.createElement(FilterToggle, { column: column, ownerDocument: ownerDocument })),
-                        data.length !== 0 && column.canSort && (React.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (React.createElement(SvgSortDown, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (React.createElement(SvgSortUp, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
-                        isResizable &&
-                            column.isResizerVisible &&
-                            index !== headerGroup.headers.length - 1 && (React.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-resizer' }),
-                            React.createElement("div", { className: 'iui-resizer-bar' }))),
-                        enableColumnReordering && !column.disableReordering && (React.createElement("div", { className: 'iui-reorder-bar' }))));
-                })));
-            })),
+            React.createElement("div", { className: 'iui-table-header-wrapper', ref: headerRef },
+                React.createElement("div", { className: 'iui-table-header' }, headerGroups.slice(1).map(function (headerGroup) {
+                    var headerGroupProps = headerGroup.getHeaderGroupProps({
+                        className: 'iui-row',
+                    });
+                    return (React.createElement("div", __assign({}, headerGroupProps, { key: headerGroupProps.key }), headerGroup.headers.map(function (column, index) {
+                        var columnProps = column.getHeaderProps(__assign(__assign({}, column.getSortByToggleProps()), { className: cx('iui-cell', { 'iui-actionable': column.canSort }, { 'iui-sorted': column.isSorted }, column.columnClassName), style: getCellStyle(column, !!state.isTableResizing) }));
+                        return (React.createElement("div", __assign({}, columnProps, column.getDragAndDropProps(), { key: columnProps.key, title: undefined, ref: function (el) {
+                                if (el && isResizable) {
+                                    columnRefs.current[column.id] = el;
+                                    column.resizeWidth = el.getBoundingClientRect().width;
+                                }
+                            } }),
+                            column.render('Header'),
+                            (showFilterButton(column) ||
+                                showSortButton(column)) && (React.createElement("div", { className: 'iui-table-header-actions-container' },
+                                showFilterButton(column) && (React.createElement(FilterToggle, { column: column, ownerDocument: ownerDocument })),
+                                showSortButton(column) && (React.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (React.createElement(SvgSortDown, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (React.createElement(SvgSortUp, { className: 'iui-icon iui-sort', "aria-hidden": true })))))),
+                            isResizable &&
+                                column.isResizerVisible &&
+                                index !== headerGroup.headers.length - 1 && (React.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-resizer' }),
+                                React.createElement("div", { className: 'iui-resizer-bar' }))),
+                            enableColumnReordering &&
+                                !column.disableReordering && (React.createElement("div", { className: 'iui-reorder-bar' }))));
+                    })));
+                }))),
             React.createElement("div", __assign({}, getTableBodyProps({
                 className: cx('iui-table-body', {
                     'iui-zebra-striping': styleType === 'zebra-rows',

package/esm/core/Table/TablePaginator.js

@@ -143,7 +143,7 @@ export var TablePaginator = function (props) {
     }
     var hasNoRows = totalPagesCount === 0;
     var showPagesList = totalPagesCount > 1 || isLoading;
-    var showPageSizeList = pageSizeList && onPageSizeChange && !!totalRowsCount;
+    var showPageSizeList = pageSizeList && !!onPageSizeChange && !!totalRowsCount;
     var ellipsis = (React.createElement("span", { className: cx('iui-paginator-ellipsis', {
             'iui-paginator-ellipsis-small': size === 'small',
         }) }, "\u2026"));

package/esm/core/Table/filters/tableFilters.d.ts

@@ -28,7 +28,7 @@ export declare const tableFilters: {
      * Basic filter with a single input field.
      * @param translatedLabels Translated filter labels.
      */
-    TextFilter: (translatedLabels?: FilterButtonBarTranslation | undefined) => <T extends Record<string, unknown>>(props: TableFilterProps<T>) => JSX.Element;
+    TextFilter: (translatedLabels?: FilterButtonBarTranslation) => <T extends Record<string, unknown>>(props: TableFilterProps<T>) => JSX.Element;
     /**
      * Date range filter.
      *
@@ -39,7 +39,7 @@ export declare const tableFilters: {
      * If your data is different type e.g. `string`, you can use `accessor` property in column description:
      * `accessor: (rowData) => new Date(rowData.date)`.
      */
-    DateRangeFilter: (options?: DateRangeFilterOptions | undefined) => <T_1 extends Record<string, unknown>>(props: TableFilterProps<T_1>) => JSX.Element;
+    DateRangeFilter: (options?: DateRangeFilterOptions) => <T_1 extends Record<string, unknown>>(props: TableFilterProps<T_1>) => JSX.Element;
     /**
      * Number range filter.
      *
@@ -48,5 +48,5 @@ export declare const tableFilters: {
      * `accessor: (rowData) => Number(rowData.numberProp)`.
      * @param translatedLabels Translated filter labels.
      */
-    NumberRangeFilter: (translatedLabels?: (NumberRangeTranslation & FilterButtonBarTranslation) | undefined) => <T_2 extends Record<string, unknown>>(props: NumberRangeFilterProps<T_2>) => JSX.Element;
+    NumberRangeFilter: (translatedLabels?: NumberRangeTranslation & FilterButtonBarTranslation) => <T_2 extends Record<string, unknown>>(props: NumberRangeFilterProps<T_2>) => JSX.Element;
 };

package/esm/core/Table/hooks/useExpanderCell.js

@@ -18,6 +18,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
 import { ExpanderColumn, EXPANDER_CELL_ID } from '../columns';
 export var useExpanderCell = function (subComponent, expanderCell, isRowDisabled) { return function (hooks) {
     if (!subComponent) {
@@ -33,7 +38,9 @@ export var useExpanderCell = function (subComponent, expanderCell, isRowDisabled
             isDisabled: isRowDisabled,
         });
         return __spreadArray([
-            __assign(__assign({}, expanderColumn), { Cell: expanderCell !== null && expanderCell !== void 0 ? expanderCell : expanderColumn.Cell })
+            __assign(__assign({}, expanderColumn), { Cell: expanderCell
+                    ? function (cellProps) { return React.createElement(React.Fragment, null, expanderCell(cellProps)); }
+                    : expanderColumn.Cell })
         ], columns, true);
     });
 }; };

package/esm/core/Toast/Toaster.js

@@ -9,6 +9,42 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 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)) {
@@ -23,8 +59,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { getContainer } from '../utils';
+import * as ReactDOM from 'react-dom';
+import { getContainer, getDocument } from '../utils';
 import { ToastWrapper } from './ToastWrapper';
 var TOASTS_CONTAINER_ID = 'iui-toasts-container';
 var Toaster = /** @class */ (function () {
@@ -40,21 +76,41 @@ var Toaster = /** @class */ (function () {
         this.isInitialized = false;
         // Create container on demand.
         // Cannot do it in constructor, because SSG/SSR apps would fail.
-        this.asyncInit = new Promise(function (resolve) {
-            if (_this.isInitialized) {
-                resolve();
-                return;
-            }
-            var container = getContainer(TOASTS_CONTAINER_ID);
-            if (!container) {
-                // should never happen
-                resolve();
-                return;
-            }
-            _this.isInitialized = true;
-            ReactDOM.render(React.createElement(ToastWrapper, { ref: _this.toastsRef }), container);
-            resolve();
-        });
+        this.asyncInit = function () { return __awaiter(_this, void 0, void 0, function () {
+            var container, toastWrapper, _ReactDOM, _ReactDOMInternals, root;
+            var _a, _b;
+            return __generator(this, function (_c) {
+                if (this.isInitialized) {
+                    return [2 /*return*/];
+                }
+                container = (_a = getContainer(TOASTS_CONTAINER_ID)) !== null && _a !== void 0 ? _a : (_b = getDocument()) === null || _b === void 0 ? void 0 : _b.body;
+                if (!container) {
+                    return [2 /*return*/];
+                }
+                this.isInitialized = true;
+                toastWrapper = React.createElement(ToastWrapper, { ref: this.toastsRef });
+                _ReactDOM = ReactDOM;
+                // v18 mode
+                if (_ReactDOM.createRoot) {
+                    _ReactDOMInternals = _ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+                    // suppress warning about importing createRoot from react-dom/client
+                    if (_ReactDOMInternals) {
+                        _ReactDOMInternals.usingClientEntryPoint = true;
+                    }
+                    root = _ReactDOM.createRoot(container);
+                    root.render(toastWrapper);
+                    // revert suppression, not to influence users app
+                    if (_ReactDOMInternals) {
+                        _ReactDOMInternals.usingClientEntryPoint = false;
+                    }
+                }
+                else {
+                    // v17 and before
+                    ReactDOM.render(toastWrapper, container);
+                }
+                return [2 /*return*/];
+            });
+        }); };
     }
     /**
      * Set global Toaster settings for toasts order and placement.
@@ -68,7 +124,7 @@ var Toaster = /** @class */ (function () {
             ? 'ascending'
             : 'descending');
         this.settings = newSettings;
-        this.asyncInit.then(function () {
+        this.asyncInit().then(function () {
             var _a, _b;
             (_a = _this.toastsRef.current) === null || _a === void 0 ? void 0 : _a.setPlacement((_b = _this.settings.placement) !== null && _b !== void 0 ? _b : 'top');
         });
@@ -105,7 +161,7 @@ var Toaster = /** @class */ (function () {
     };
     Toaster.prototype.updateView = function () {
         var _this = this;
-        this.asyncInit.then(function () {
+        this.asyncInit().then(function () {
             var _a;
             (_a = _this.toastsRef.current) === null || _a === void 0 ? void 0 : _a.setToasts(_this.toasts);
         });

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

@@ -26,24 +26,7 @@ export declare type PopoverProps = {
  * with pre-configured props and plugins (e.g. lazy mounting, focus, etc).
  * @private
  */
-export declare const Popover: React.ForwardRefExoticComponent<Pick<{
-    /**
-     * Controlled flag for whether the popover is visible.
-     */
-    visible?: boolean | undefined;
-    /**
-     * Determines the events that cause the popover to show.
-     * Should not be used when `visible` is set.
-     * @see [tippy.js trigger prop](https://atomiks.github.io/tippyjs/v6/all-props/#trigger)
-     */
-    trigger?: string | undefined;
-    /**
-     * Placement of the popover content.
-     * @default 'bottom-start'
-     * @see [tippy.js placement prop](https://atomiks.github.io/tippyjs/v6/all-props/#placement).
-     */
-    placement?: import("@popperjs/core").Placement | undefined;
-} & Omit<TippyProps, "placement" | "trigger" | "visible">, "disabled" | "children" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "plugins" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "role" | "theme" | "zIndex" | "className" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
+export declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "disabled" | "children" | "placement" | "trigger" | "visible" | "content" | "render" | "animateFill" | "appendTo" | "aria" | "delay" | "duration" | "followCursor" | "getReferenceClientRect" | "hideOnClick" | "ignoreAttributes" | "inlinePositioning" | "interactive" | "interactiveBorder" | "interactiveDebounce" | "moveTransition" | "offset" | "plugins" | "popperOptions" | "showOnCreate" | "sticky" | "touch" | "triggerTarget" | "onAfterUpdate" | "onBeforeUpdate" | "onCreate" | "onDestroy" | "onHidden" | "onHide" | "onMount" | "onShow" | "onShown" | "onTrigger" | "onUntrigger" | "onClickOutside" | "allowHTML" | "animation" | "arrow" | "inertia" | "maxWidth" | "role" | "theme" | "zIndex" | "className" | "singleton" | "reference"> & React.RefAttributes<unknown>>;
 /**
  * Plugin to hide Popover when either Esc key is pressed,
  * or when the content inside is not tabbable and Tab key is pressed.

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import { CSSTransition } from 'react-transition-group';
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
-export declare const WithCSSTransition: (props: Partial<CSSTransition.CSSTransitionProps> & {
+export declare const WithCSSTransition: (props: Partial<CSSTransitionProps<undefined>> & {
     children: JSX.Element;
     dimension?: "width" | "height" | undefined;
 }) => JSX.Element;

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { CommonProps } from '../props';
 export declare const StatusIconMap: {
-    negative: (args?: CommonProps | undefined) => JSX.Element;
-    positive: (args?: CommonProps | undefined) => JSX.Element;
-    warning: (args?: CommonProps | undefined) => JSX.Element;
-    informational: (args?: CommonProps | undefined) => JSX.Element;
+    negative: (args?: CommonProps) => JSX.Element;
+    positive: (args?: CommonProps) => JSX.Element;
+    warning: (args?: CommonProps) => JSX.Element;
+    informational: (args?: CommonProps) => JSX.Element;
 };

package/esm/core/utils/hooks/useOverflow.js

@@ -72,8 +72,10 @@ export var useOverflow = function (items, disabled, orientation) {
             var childrenSize = Array.from(containerRef.current.children).reduce(function (sum, child) { return sum + child["offset".concat(dimension)]; }, 0);
             var avgItemSize = childrenSize / visibleCount;
             var visibleItems = Math.floor(availableSize / avgItemSize);
-            // Doubling the visible items to overflow the container. Just to be safe.
-            setVisibleCount(Math.min(items.length, visibleItems * 2));
+            if (!isNaN(visibleItems)) {
+                // Doubling the visible items to overflow the container. Just to be safe.
+                setVisibleCount(Math.min(items.length, visibleItems * 2));
+            }
         }
         needsFullRerender.current = false;
     }, [containerSize, visibleCount, disabled, items.length, orientation]);

package/esm/core/utils/hooks/useTheme.d.ts

@@ -19,4 +19,4 @@ export declare type ThemeType = 'light' | 'dark' | 'os';
  * @param theme Light, dark, or based on OS setting.
  * @param themeOptions Options that override default theming behavior.
  */
-export declare const useTheme: (theme?: ThemeType | undefined, themeOptions?: ThemeOptions | undefined) => void;
+export declare const useTheme: (theme?: ThemeType, themeOptions?: ThemeOptions) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.38.1",
+  "version": "1.39.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -40,68 +40,53 @@
     "lint": "eslint \"**/*.{js,ts,tsx}\" --max-warnings=0",
     "lint:fix": "yarn lint --fix && node ../configs/copyrightLinter.js --fix \"*/**/*.{js,ts,tsx}\"",
     "copy-files": "cpy \"../../{README,LICENSE}.md\" .",
-    "storybook": "start-storybook -p 6006",
-    "dev": "yarn storybook",
-    "build-storybook": "yarn copy-files && build-storybook"
+    "dev": "yarn build:watch"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^0.58.0",
-    "@itwin/itwinui-icons-react": "^1.5.0",
-    "@itwin/itwinui-illustrations-react": "^1.0.1",
+    "@itwin/itwinui-css": "^0.59.1",
+    "@itwin/itwinui-icons-react": "^1.10.1",
+    "@itwin/itwinui-illustrations-react": "^1.3.1",
     "@tippyjs/react": "^4.2.5",
     "@types/react-table": "^7.0.18",
     "classnames": "^2.2.6",
     "react-table": "^7.1.0",
-    "react-transition-group": "^4.1.1"
+    "react-transition-group": "^4.4.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@storybook/addon-a11y": "^6.4.19",
-    "@storybook/addon-essentials": "~6.4.19",
-    "@storybook/addon-storysource": "~6.4.19",
-    "@storybook/addons": "~6.4.19",
-    "@storybook/api": "~6.4.19",
-    "@storybook/builder-webpack5": "~6.4.19",
-    "@storybook/components": "~6.4.19",
-    "@storybook/core-events": "~6.4.19",
-    "@storybook/manager-webpack5": "~6.4.19",
-    "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/react": "~6.4.19",
-    "@storybook/theming": "~6.4.19",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^7.0.1",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.2.0",
+    "@testing-library/user-event": "^14.1.1",
     "@types/classnames": "^2.2.7",
     "@types/jest": "^27.0.0",
     "@types/node": "^10.12.2",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
-    "@types/react-transition-group": "^2.9.2",
+    "@types/react": "^18.0.6",
+    "@types/react-dom": "^18.0.2",
+    "@types/react-transition-group": "^4.4.4",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.17.0",
     "babel-loader": "^8.2.2",
     "concurrently": "^5.3.0",
     "configs": "*",
-    "creevey": "^0.8.0-beta.0",
+    "eslint": "^8.12.0",
+    "eslint-config-prettier": "^8.5.0",
     "inquirer": "^6.2.2",
-    "jest": "^27.0.6",
-    "jest-cli": "^27.0.6",
-    "jest-junit": "^12.0.0",
+    "jest": "^28.1.0",
+    "jest-cli": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
+    "jest-junit": "^13.2.0",
     "markdown-to-jsx": "6.11.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "storybook-dark-mode": "^1.0.9",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "tippy.js": "^6.3.1",
-    "ts-jest": "^27.0.4",
+    "ts-jest": "^28.0.2",
     "ts-loader": "^9.2.8",
     "ts-node": "^8.0.2",
-    "typescript": "^4.4.3",
-    "webpack": "5"
+    "typescript": "^4.4.3"
   },
   "peerDependencies": {
-    "react": "^16.8.6 || ^17.0.0",
-    "react-dom": "^16.8.6 || ^17.0.0"
+    "react": ">=16.8.6 < 19.0.0",
+    "react-dom": ">=16.8.6 < 19.0.0"
   },
   "lint-staged": {
     "*.{tsx,ts,jsx,js}": [