@itwin/itwinui-react 2.11.1 → 2.11.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 2.11.3
+
+### Patch Changes
+
+- [#1309](https://github.com/iTwin/iTwinUI/pull/1309): Fixed missing CSS imports in `FileUploadCard` and `FileUpoadTemplate`.
+
+## 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

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.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import '@itwin/itwinui-css/css/file-upload.css';
 export declare type FileUploadCardIconProps = React.ComponentPropsWithRef<'span'>;
 export declare type FileUploadCardInfoProps = React.ComponentPropsWithRef<'span'>;
 export declare type FileUploadCardTitleProps = React.ComponentPropsWithRef<'span'>;

package/cjs/core/FileUpload/FileUploadCard.js

@@ -35,6 +35,8 @@ const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
 const classnames_1 = __importDefault(require("classnames"));
 const FileEmptyCard_js_1 = require("./FileEmptyCard.js");
+const Anchor_js_1 = require("../Typography/Anchor/Anchor.js");
+require("@itwin/itwinui-css/css/file-upload.css");
 const toBytes = (bytes) => {
     const units = [' bytes', 'KB', 'MB', 'GB', 'TB'];
     let i = 0;
@@ -82,13 +84,13 @@ const FileUploadCardAction = React.forwardRef((props, ref) => {
 });
 FileUploadCardAction.displayName = 'FileUploadCard.Action';
 const FileUploadCardInputLabel = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
+    const { children, ...rest } = props;
     const { inputId } = (0, index_js_1.useSafeContext)(exports.FileUploadCardContext);
-    return (React.createElement("label", { className: (0, classnames_1.default)('iui-anchor', className), ref: ref, htmlFor: inputId, ...rest }, children));
+    return (React.createElement(Anchor_js_1.Anchor, { as: 'label', ref: ref, htmlFor: inputId, ...rest }, children));
 });
 FileUploadCardInputLabel.displayName = 'FileUploadCard.InputLabel';
 const FileUploadCardInput = React.forwardRef((props, ref) => {
-    const { children, className, onChange, id, ...rest } = props;
+    const { children, onChange, id, ...rest } = props;
     const { files, onFilesChange, setInternalFiles, inputId, setInputId } = (0, index_js_1.useSafeContext)(exports.FileUploadCardContext);
     const setNativeFilesRef = React.useCallback((node) => {
         var _a;
@@ -107,14 +109,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(index_js_1.VisuallyHidden, { as: 'input', 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/FileUpload/FileUploadTemplate.js

@@ -35,6 +35,7 @@ const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
 require("@itwin/itwinui-css/css/file-upload.css");
+const Anchor_js_1 = require("../Typography/Anchor/Anchor.js");
 /**
  * Default template to be used with the `FileUpload` wrapper component.
  * Contains a hidden input with styled labels (customizable).
@@ -47,7 +48,7 @@ const FileUploadTemplate = (props) => {
     return (React.createElement("div", { className: (0, classnames_1.default)('iui-file-upload-template', className), ...rest },
         React.createElement(index_js_1.SvgUpload, { className: 'iui-template-icon', "aria-hidden": true }),
         React.createElement("div", { className: 'iui-template-text' },
-            React.createElement("label", { className: 'iui-anchor' },
+            React.createElement(Anchor_js_1.Anchor, { as: 'label' },
                 React.createElement("input", { className: 'iui-browse-input', type: 'file', onChange: onChange, multiple: acceptMultiple, accept: acceptType }),
                 label),
             React.createElement("div", null, subtitle),

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/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.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import '@itwin/itwinui-css/css/file-upload.css';
 export declare type FileUploadCardIconProps = React.ComponentPropsWithRef<'span'>;
 export declare type FileUploadCardInfoProps = React.ComponentPropsWithRef<'span'>;
 export declare type FileUploadCardTitleProps = React.ComponentPropsWithRef<'span'>;

package/esm/core/FileUpload/FileUploadCard.js

@@ -3,9 +3,11 @@
  * 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, VisuallyHidden, } from '../utils/index.js';
 import cx from 'classnames';
 import { FileEmptyCard } from './FileEmptyCard.js';
+import { Anchor } from '../Typography/Anchor/Anchor.js';
+import '@itwin/itwinui-css/css/file-upload.css';
 const toBytes = (bytes) => {
     const units = [' bytes', 'KB', 'MB', 'GB', 'TB'];
     let i = 0;
@@ -53,13 +55,13 @@ const FileUploadCardAction = React.forwardRef((props, ref) => {
 });
 FileUploadCardAction.displayName = 'FileUploadCard.Action';
 const FileUploadCardInputLabel = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
+    const { children, ...rest } = props;
     const { inputId } = useSafeContext(FileUploadCardContext);
-    return (React.createElement("label", { className: cx('iui-anchor', className), ref: ref, htmlFor: inputId, ...rest }, children));
+    return (React.createElement(Anchor, { as: 'label', ref: ref, htmlFor: inputId, ...rest }, children));
 });
 FileUploadCardInputLabel.displayName = 'FileUploadCard.InputLabel';
 const FileUploadCardInput = React.forwardRef((props, ref) => {
-    const { children, className, onChange, id, ...rest } = props;
+    const { children, onChange, id, ...rest } = props;
     const { files, onFilesChange, setInternalFiles, inputId, setInputId } = useSafeContext(FileUploadCardContext);
     const setNativeFilesRef = React.useCallback((node) => {
         var _a;
@@ -78,14 +80,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(VisuallyHidden, { as: 'input', 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/FileUpload/FileUploadTemplate.js

@@ -6,6 +6,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { useTheme, SvgUpload } from '../utils/index.js';
 import '@itwin/itwinui-css/css/file-upload.css';
+import { Anchor } from '../Typography/Anchor/Anchor.js';
 /**
  * Default template to be used with the `FileUpload` wrapper component.
  * Contains a hidden input with styled labels (customizable).
@@ -18,7 +19,7 @@ export const FileUploadTemplate = (props) => {
     return (React.createElement("div", { className: cx('iui-file-upload-template', className), ...rest },
         React.createElement(SvgUpload, { className: 'iui-template-icon', "aria-hidden": true }),
         React.createElement("div", { className: 'iui-template-text' },
-            React.createElement("label", { className: 'iui-anchor' },
+            React.createElement(Anchor, { as: 'label' },
                 React.createElement("input", { className: 'iui-browse-input', type: 'file', onChange: onChange, multiple: acceptMultiple, accept: acceptType }),
                 label),
             React.createElement("div", null, subtitle),

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "2.11.1",
+  "version": "2.11.3",
   "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",