@itwin/itwinui-react 2.11.0 → 2.11.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 2.11.2
+
+### Patch Changes
+
+- [#1288](https://github.com/iTwin/iTwinUI/pull/1288): Fixed hover styling for SearchBox.
+- Updated dependencies:
+  - @itwin/itwinui-css@1.11.1
+
+## 2.11.1
+
+### Patch Changes
+
+- [#1284](https://github.com/iTwin/iTwinUI/pull/1284): Add fix in `useId` to avoid bundlers trying to import non-existing export.
+
 ## 2.11.0
 
 ### Minor Changes

package/cjs/core/ComboBox/ComboBoxEndIcon.js

@@ -44,11 +44,8 @@ exports.ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
             'iui-actionable': !disabled,
             'iui-disabled': disabled,
             'iui-open': isOpen,
-        }, className), onClick: (e) => {
-            onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
-            if (!e.isDefaultPrevented()) {
-                dispatch({ type: isOpen ? 'close' : 'open' });
-            }
-        }, ...rest }, children !== null && children !== void 0 ? children : React.createElement(index_js_1.SvgCaretDownSmall, { "aria-hidden": true })));
+        }, className), onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, () => {
+            dispatch({ type: isOpen ? 'close' : 'open' });
+        }), ...rest }, children !== null && children !== void 0 ? children : React.createElement(index_js_1.SvgCaretDownSmall, { "aria-hidden": true })));
 });
 exports.ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';

package/cjs/core/ComboBox/ComboBoxInput.js

@@ -150,18 +150,14 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
         dispatch({ type: 'open' });
         onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(event);
     }, [dispatch, onFocusProp]);
-    const handleClick = React.useCallback((e) => {
-        onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
-        if (e.isDefaultPrevented()) {
-            return;
-        }
+    const handleClick = React.useCallback(() => {
         if (!isOpen) {
             dispatch({ type: 'open' });
         }
-    }, [dispatch, isOpen, onClickProp]);
+    }, [dispatch, isOpen]);
     const [tagContainerWidthRef, tagContainerWidth] = (0, index_js_2.useContainerWidth)();
     return (React.createElement(React.Fragment, null,
-        React.createElement(index_js_1.Input, { ref: refs, onKeyDown: handleKeyDown, onClick: handleClick, onFocus: handleFocus, "aria-activedescendant": isOpen && focusedIndex != undefined && focusedIndex > -1
+        React.createElement(index_js_1.Input, { ref: refs, onKeyDown: handleKeyDown, onClick: (0, index_js_2.mergeEventHandlers)(onClickProp, handleClick), onFocus: handleFocus, "aria-activedescendant": isOpen && focusedIndex != undefined && focusedIndex > -1
                 ? getIdFromIndex(focusedIndex)
                 : undefined, role: 'combobox', "aria-controls": isOpen ? `${id}-list` : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off', style: multiple ? { paddingLeft: tagContainerWidth + 18 } : {}, "aria-describedby": multiple ? `${id}-selected-live` : undefined, ...rest }),
         multiple && selectTags ? (React.createElement(ComboBoxMultipleContainer_js_1.ComboBoxMultipleContainer, { ref: tagContainerWidthRef, selectedItems: selectTags, id: `${id}-selected-live` })) : null));

package/cjs/core/Dialog/DialogTitleBar.js

@@ -60,16 +60,10 @@ exports.DialogTitleBar = Object.assign(React.forwardRef((props, ref) => {
     const dialogContext = (0, DialogContext_js_1.useDialogContext)();
     const { children, titleText, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, isDraggable = dialogContext.isDraggable, className, onPointerDown: onPointerDownProp, ...rest } = props;
     const { onPointerDown } = (0, DialogDragContext_js_1.useDialogDragContext)();
-    const handlePointerDown = React.useCallback((event) => {
-        onPointerDownProp === null || onPointerDownProp === void 0 ? void 0 : onPointerDownProp(event);
-        if (!event.defaultPrevented) {
-            onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
-        }
-    }, [onPointerDown, onPointerDownProp]);
     (0, index_js_1.useTheme)();
     return (React.createElement("div", { className: (0, classnames_1.default)('iui-dialog-title-bar', className, {
             'iui-dialog-title-bar-filled': isDraggable,
-        }), ref: ref, onPointerDown: handlePointerDown, ...rest }, children ? (children) : (React.createElement(React.Fragment, null,
+        }), ref: ref, onPointerDown: (0, index_js_1.mergeEventHandlers)(onPointerDownProp, onPointerDown), ...rest }, children ? (children) : (React.createElement(React.Fragment, null,
         React.createElement(DialogTitleBarTitle_js_1.DialogTitleBarTitle, null, titleText),
         isDismissible && (React.createElement(index_js_2.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
             React.createElement(index_js_1.SvgClose, null)))))));

package/cjs/core/FileUpload/FileUploadCard.js

@@ -107,14 +107,11 @@ const FileUploadCardInput = React.forwardRef((props, ref) => {
         }
     }, [id, inputId, setInputId]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("input", { className: (0, classnames_1.default)('iui-visually-hidden', className), type: 'file', onChange: (e) => {
-                onChange === null || onChange === void 0 ? void 0 : onChange(e);
-                if (!e.isDefaultPrevented()) {
-                    const _files = Array.from(e.currentTarget.files || []);
-                    onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(_files);
-                    setInternalFiles(_files);
-                }
-            }, ref: refs, id: id !== null && id !== void 0 ? id : inputId, ...rest }),
+        React.createElement("input", { className: (0, classnames_1.default)('iui-visually-hidden', className), type: 'file', onChange: (0, index_js_1.mergeEventHandlers)(onChange, (e) => {
+                const _files = Array.from(e.currentTarget.files || []);
+                onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(_files);
+                setInternalFiles(_files);
+            }), ref: refs, id: id !== null && id !== void 0 ? id : inputId, ...rest }),
         children));
 });
 FileUploadCardInput.displayName = 'FileUploadCard.Input';

package/cjs/core/SearchBox/SearchBox.js

@@ -123,26 +123,14 @@ SearchBoxButton.displayName = 'SearchBox.Button';
 const SearchBoxCollapseButton = React.forwardRef((props, ref) => {
     const { children, onClick: onClickProp, ...rest } = props;
     const { onCollapse, size: sizeContext, isDisabled, } = (0, index_js_1.useSafeContext)(SearchBoxContext);
-    return (React.createElement(SearchBoxButton, { ref: ref, "aria-label": 'Close searchbox', size: sizeContext, disabled: isDisabled, onClick: (e) => {
-            onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
-            if (e.isDefaultPrevented()) {
-                return;
-            }
-            onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse();
-        }, ...rest }, children !== null && children !== void 0 ? children : React.createElement(index_js_1.SvgCloseSmall, null)));
+    return (React.createElement(SearchBoxButton, { ref: ref, "aria-label": 'Close searchbox', size: sizeContext, disabled: isDisabled, onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, onCollapse), ...rest }, children !== null && children !== void 0 ? children : React.createElement(index_js_1.SvgCloseSmall, null)));
 });
 SearchBoxCollapseButton.displayName = 'SearchBox.CollapseButton';
 // ----------------------------------------------------------------------------
 const SearchBoxExpandButton = React.forwardRef((props, ref) => {
     const { children, className, onClick: onClickProp, ...rest } = props;
     const { onExpand, size: sizeContext, isDisabled, openButtonRef, } = (0, index_js_1.useSafeContext)(SearchBoxContext);
-    return (React.createElement(SearchBoxButton, { ref: (0, index_js_1.useMergedRefs)(ref, openButtonRef), className: (0, classnames_1.default)('iui-searchbox-open-button', className), "aria-label": 'Expand searchbox', size: sizeContext, disabled: isDisabled, onClick: (e) => {
-            onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
-            if (e.isDefaultPrevented()) {
-                return;
-            }
-            onExpand === null || onExpand === void 0 ? void 0 : onExpand();
-        }, ...rest }, children !== null && children !== void 0 ? children : React.createElement(index_js_1.SvgSearch, null)));
+    return (React.createElement(SearchBoxButton, { ref: (0, index_js_1.useMergedRefs)(ref, openButtonRef), className: (0, classnames_1.default)('iui-searchbox-open-button', className), "aria-label": 'Expand searchbox', size: sizeContext, disabled: isDisabled, onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, onExpand), ...rest }, children !== null && children !== void 0 ? children : React.createElement(index_js_1.SvgSearch, null)));
 });
 SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton';
 // ----------------------------------------------------------------------------

package/cjs/core/utils/functions/dom.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * Get the container as a child of body, or create one if it doesn't exist.
  * Mostly used for dynamic components like Modal or Toast.
@@ -16,3 +17,8 @@ export declare const getDocument: () => Document | undefined;
  * Used to support SSR/SSG applications.
  */
 export declare const getWindow: () => (Window & typeof globalThis) | undefined;
+/**
+ * Merges multiple event handlers into one, while making sure that
+ * `defaultPrevented` is respected for each callback.
+ */
+export declare const mergeEventHandlers: <E extends import("react").SyntheticEvent<Element, Event>>(...callbacks: (((event: E) => void) | undefined)[]) => (event: E) => void;

package/cjs/core/utils/functions/dom.js

@@ -4,7 +4,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getWindow = exports.getDocument = exports.getContainer = void 0;
+exports.mergeEventHandlers = exports.getWindow = exports.getDocument = exports.getContainer = void 0;
 /**
  * Get the container as a child of body, or create one if it doesn't exist.
  * Mostly used for dynamic components like Modal or Toast.
@@ -40,3 +40,16 @@ const getWindow = () => {
     return typeof window === 'undefined' ? undefined : window;
 };
 exports.getWindow = getWindow;
+/**
+ * Merges multiple event handlers into one, while making sure that
+ * `defaultPrevented` is respected for each callback.
+ */
+const mergeEventHandlers = (...callbacks) => (event) => {
+    for (const cb of callbacks) {
+        cb === null || cb === void 0 ? void 0 : cb(event);
+        if (event === null || event === void 0 ? void 0 : event.defaultPrevented) {
+            return;
+        }
+    }
+};
+exports.mergeEventHandlers = mergeEventHandlers;

package/cjs/core/utils/hooks/useId.js

@@ -40,4 +40,7 @@ const useId = () => {
     return React.useMemo(() => `iui-${uniqueValue}`, [uniqueValue]);
 };
 exports.useId = useId;
-const useUniqueValue = (_a = React.useId) !== null && _a !== void 0 ? _a : (() => (0, numbers_js_1.getRandomValue)(10));
+// This is needed to avoid bundlers trying to import non-existing export.
+// Read more: https://github.com/webpack/webpack/issues/14814
+const _React = React;
+const useUniqueValue = (_a = _React.useId) !== null && _a !== void 0 ? _a : (() => (0, numbers_js_1.getRandomValue)(10));

package/esm/core/ComboBox/ComboBoxEndIcon.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { useSafeContext, useMergedRefs, SvgCaretDownSmall, } from '../utils/index.js';
+import { useSafeContext, useMergedRefs, SvgCaretDownSmall, mergeEventHandlers, } from '../utils/index.js';
 import { ComboBoxActionContext, ComboBoxRefsContext } from './helpers.js';
 export const ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
     const { className, children, onClick: onClickProp, disabled, isOpen, ...rest } = props;
@@ -15,11 +15,8 @@ export const ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
             'iui-actionable': !disabled,
             'iui-disabled': disabled,
             'iui-open': isOpen,
-        }, className), onClick: (e) => {
-            onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
-            if (!e.isDefaultPrevented()) {
-                dispatch({ type: isOpen ? 'close' : 'open' });
-            }
-        }, ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgCaretDownSmall, { "aria-hidden": true })));
+        }, className), onClick: mergeEventHandlers(onClickProp, () => {
+            dispatch({ type: isOpen ? 'close' : 'open' });
+        }), ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgCaretDownSmall, { "aria-hidden": true })));
 });
 ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';

package/esm/core/ComboBox/ComboBoxInput.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Input } from '../Input/index.js';
-import { useSafeContext, useMergedRefs, useContainerWidth, } from '../utils/index.js';
+import { useSafeContext, useMergedRefs, useContainerWidth, mergeEventHandlers, } from '../utils/index.js';
 import { ComboBoxMultipleContainer } from './ComboBoxMultipleContainer.js';
 import { ComboBoxStateContext, ComboBoxActionContext, ComboBoxRefsContext, } from './helpers.js';
 export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
@@ -124,18 +124,14 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
         dispatch({ type: 'open' });
         onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(event);
     }, [dispatch, onFocusProp]);
-    const handleClick = React.useCallback((e) => {
-        onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
-        if (e.isDefaultPrevented()) {
-            return;
-        }
+    const handleClick = React.useCallback(() => {
         if (!isOpen) {
             dispatch({ type: 'open' });
         }
-    }, [dispatch, isOpen, onClickProp]);
+    }, [dispatch, isOpen]);
     const [tagContainerWidthRef, tagContainerWidth] = useContainerWidth();
     return (React.createElement(React.Fragment, null,
-        React.createElement(Input, { ref: refs, onKeyDown: handleKeyDown, onClick: handleClick, onFocus: handleFocus, "aria-activedescendant": isOpen && focusedIndex != undefined && focusedIndex > -1
+        React.createElement(Input, { ref: refs, onKeyDown: handleKeyDown, onClick: mergeEventHandlers(onClickProp, handleClick), onFocus: handleFocus, "aria-activedescendant": isOpen && focusedIndex != undefined && focusedIndex > -1
                 ? getIdFromIndex(focusedIndex)
                 : undefined, role: 'combobox', "aria-controls": isOpen ? `${id}-list` : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off', style: multiple ? { paddingLeft: tagContainerWidth + 18 } : {}, "aria-describedby": multiple ? `${id}-selected-live` : undefined, ...rest }),
         multiple && selectTags ? (React.createElement(ComboBoxMultipleContainer, { ref: tagContainerWidthRef, selectedItems: selectTags, id: `${id}-selected-live` })) : null));

package/esm/core/Dialog/DialogTitleBar.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useTheme, SvgClose } from '../utils/index.js';
+import { useTheme, SvgClose, mergeEventHandlers } from '../utils/index.js';
 import { IconButton } from '../Buttons/index.js';
 import '@itwin/itwinui-css/css/dialog.css';
 import { useDialogContext } from './DialogContext.js';
@@ -31,16 +31,10 @@ export const DialogTitleBar = Object.assign(React.forwardRef((props, ref) => {
     const dialogContext = useDialogContext();
     const { children, titleText, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, isDraggable = dialogContext.isDraggable, className, onPointerDown: onPointerDownProp, ...rest } = props;
     const { onPointerDown } = useDialogDragContext();
-    const handlePointerDown = React.useCallback((event) => {
-        onPointerDownProp === null || onPointerDownProp === void 0 ? void 0 : onPointerDownProp(event);
-        if (!event.defaultPrevented) {
-            onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
-        }
-    }, [onPointerDown, onPointerDownProp]);
     useTheme();
     return (React.createElement("div", { className: cx('iui-dialog-title-bar', className, {
             'iui-dialog-title-bar-filled': isDraggable,
-        }), ref: ref, onPointerDown: handlePointerDown, ...rest }, children ? (children) : (React.createElement(React.Fragment, null,
+        }), ref: ref, onPointerDown: mergeEventHandlers(onPointerDownProp, onPointerDown), ...rest }, children ? (children) : (React.createElement(React.Fragment, null,
         React.createElement(DialogTitleBarTitle, null, titleText),
         isDismissible && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
             React.createElement(SvgClose, null)))))));

package/esm/core/FileUpload/FileUploadCard.js

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { getWindow, SvgDocument, useMergedRefs, useSafeContext, useId, } from '../utils/index.js';
+import { getWindow, SvgDocument, useMergedRefs, useSafeContext, useId, mergeEventHandlers, } from '../utils/index.js';
 import cx from 'classnames';
 import { FileEmptyCard } from './FileEmptyCard.js';
 const toBytes = (bytes) => {
@@ -78,14 +78,11 @@ const FileUploadCardInput = React.forwardRef((props, ref) => {
         }
     }, [id, inputId, setInputId]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("input", { className: cx('iui-visually-hidden', className), type: 'file', onChange: (e) => {
-                onChange === null || onChange === void 0 ? void 0 : onChange(e);
-                if (!e.isDefaultPrevented()) {
-                    const _files = Array.from(e.currentTarget.files || []);
-                    onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(_files);
-                    setInternalFiles(_files);
-                }
-            }, ref: refs, id: id !== null && id !== void 0 ? id : inputId, ...rest }),
+        React.createElement("input", { className: cx('iui-visually-hidden', className), type: 'file', onChange: mergeEventHandlers(onChange, (e) => {
+                const _files = Array.from(e.currentTarget.files || []);
+                onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(_files);
+                setInternalFiles(_files);
+            }), ref: refs, id: id !== null && id !== void 0 ? id : inputId, ...rest }),
         children));
 });
 FileUploadCardInput.displayName = 'FileUploadCard.Input';

package/esm/core/SearchBox/SearchBox.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { InputFlexContainer, useTheme, SvgSearch, SvgCloseSmall, useSafeContext, useId, Icon, useMergedRefs, } from '../utils/index.js';
+import { InputFlexContainer, useTheme, SvgSearch, SvgCloseSmall, useSafeContext, useId, Icon, useMergedRefs, mergeEventHandlers, } from '../utils/index.js';
 import { IconButton } from '../Buttons/IconButton/index.js';
 import '@itwin/itwinui-css/css/searchbox.css';
 const SearchBoxContext = React.createContext(undefined);
@@ -94,26 +94,14 @@ SearchBoxButton.displayName = 'SearchBox.Button';
 const SearchBoxCollapseButton = React.forwardRef((props, ref) => {
     const { children, onClick: onClickProp, ...rest } = props;
     const { onCollapse, size: sizeContext, isDisabled, } = useSafeContext(SearchBoxContext);
-    return (React.createElement(SearchBoxButton, { ref: ref, "aria-label": 'Close searchbox', size: sizeContext, disabled: isDisabled, onClick: (e) => {
-            onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
-            if (e.isDefaultPrevented()) {
-                return;
-            }
-            onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse();
-        }, ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgCloseSmall, null)));
+    return (React.createElement(SearchBoxButton, { ref: ref, "aria-label": 'Close searchbox', size: sizeContext, disabled: isDisabled, onClick: mergeEventHandlers(onClickProp, onCollapse), ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgCloseSmall, null)));
 });
 SearchBoxCollapseButton.displayName = 'SearchBox.CollapseButton';
 // ----------------------------------------------------------------------------
 const SearchBoxExpandButton = React.forwardRef((props, ref) => {
     const { children, className, onClick: onClickProp, ...rest } = props;
     const { onExpand, size: sizeContext, isDisabled, openButtonRef, } = useSafeContext(SearchBoxContext);
-    return (React.createElement(SearchBoxButton, { ref: useMergedRefs(ref, openButtonRef), className: cx('iui-searchbox-open-button', className), "aria-label": 'Expand searchbox', size: sizeContext, disabled: isDisabled, onClick: (e) => {
-            onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
-            if (e.isDefaultPrevented()) {
-                return;
-            }
-            onExpand === null || onExpand === void 0 ? void 0 : onExpand();
-        }, ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgSearch, null)));
+    return (React.createElement(SearchBoxButton, { ref: useMergedRefs(ref, openButtonRef), className: cx('iui-searchbox-open-button', className), "aria-label": 'Expand searchbox', size: sizeContext, disabled: isDisabled, onClick: mergeEventHandlers(onClickProp, onExpand), ...rest }, children !== null && children !== void 0 ? children : React.createElement(SvgSearch, null)));
 });
 SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton';
 // ----------------------------------------------------------------------------

package/esm/core/utils/functions/dom.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * Get the container as a child of body, or create one if it doesn't exist.
  * Mostly used for dynamic components like Modal or Toast.
@@ -16,3 +17,8 @@ export declare const getDocument: () => Document | undefined;
  * Used to support SSR/SSG applications.
  */
 export declare const getWindow: () => (Window & typeof globalThis) | undefined;
+/**
+ * Merges multiple event handlers into one, while making sure that
+ * `defaultPrevented` is respected for each callback.
+ */
+export declare const mergeEventHandlers: <E extends import("react").SyntheticEvent<Element, Event>>(...callbacks: (((event: E) => void) | undefined)[]) => (event: E) => void;

package/esm/core/utils/functions/dom.js

@@ -34,3 +34,15 @@ export const getDocument = () => {
 export const getWindow = () => {
     return typeof window === 'undefined' ? undefined : window;
 };
+/**
+ * Merges multiple event handlers into one, while making sure that
+ * `defaultPrevented` is respected for each callback.
+ */
+export const mergeEventHandlers = (...callbacks) => (event) => {
+    for (const cb of callbacks) {
+        cb === null || cb === void 0 ? void 0 : cb(event);
+        if (event === null || event === void 0 ? void 0 : event.defaultPrevented) {
+            return;
+        }
+    }
+};

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

@@ -13,4 +13,7 @@ export const useId = () => {
     const uniqueValue = useUniqueValue();
     return React.useMemo(() => `iui-${uniqueValue}`, [uniqueValue]);
 };
-const useUniqueValue = (_a = React.useId) !== null && _a !== void 0 ? _a : (() => getRandomValue(10));
+// This is needed to avoid bundlers trying to import non-existing export.
+// Read more: https://github.com/webpack/webpack/issues/14814
+const _React = React;
+const useUniqueValue = (_a = _React.useId) !== null && _a !== void 0 ? _a : (() => getRandomValue(10));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "2.11.0",
+  "version": "2.11.2",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -67,7 +67,7 @@
     "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\""
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^1.11.0",
+    "@itwin/itwinui-css": "^1.11.1",
     "@itwin/itwinui-illustrations-react": "^2.0.0",
     "@itwin/itwinui-variables": "^2.0.0",
     "@tippyjs/react": "^4.2.6",