@itwin/itwinui-react 2.12.19 → 2.12.20

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 2.12.20
+
+### Patch Changes
+
+- 9f1f3cff: Fixed `ComboBox` to correctly merge `inputProps.style` with internal styles.
+
 ## 2.12.19
 
 ### Patch Changes

package/cjs/core/ComboBox/ComboBoxInput.js

@@ -34,7 +34,7 @@ const index_js_2 = require("../utils/index.js");
 const ComboBoxMultipleContainer_js_1 = require("./ComboBoxMultipleContainer.js");
 const helpers_js_1 = require("./helpers.js");
 exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
-    const { onKeyDown: onKeyDownProp, onFocus: onFocusProp, onClick: onClickProp, selectTags, ...rest } = props;
+    const { onKeyDown: onKeyDownProp, onFocus: onFocusProp, onClick: onClickProp, selectTags, style, ...rest } = props;
     const { isOpen, id, focusedIndex, enableVirtualization, multiple, onClickHandler, } = (0, index_js_2.useSafeContext)(helpers_js_1.ComboBoxStateContext);
     const dispatch = (0, index_js_2.useSafeContext)(helpers_js_1.ComboBoxActionContext);
     const { inputRef, menuRef, optionsExtraInfoRef } = (0, index_js_2.useSafeContext)(helpers_js_1.ComboBoxRefsContext);
@@ -159,7 +159,10 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     return (React.createElement(React.Fragment, null,
         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 }),
+                : undefined, role: 'combobox', "aria-controls": isOpen ? `${id}-list` : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off', style: {
+                ...(multiple && { paddingInlineStart: tagContainerWidth + 18 }),
+                ...style,
+            }, "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));
 });
 exports.ComboBoxInput.displayName = 'ComboBoxInput';

package/esm/core/ComboBox/ComboBoxInput.js

@@ -8,7 +8,7 @@ import { useSafeContext, useMergedRefs, useContainerWidth, mergeEventHandlers, }
 import { ComboBoxMultipleContainer } from './ComboBoxMultipleContainer.js';
 import { ComboBoxStateContext, ComboBoxActionContext, ComboBoxRefsContext, } from './helpers.js';
 export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
-    const { onKeyDown: onKeyDownProp, onFocus: onFocusProp, onClick: onClickProp, selectTags, ...rest } = props;
+    const { onKeyDown: onKeyDownProp, onFocus: onFocusProp, onClick: onClickProp, selectTags, style, ...rest } = props;
     const { isOpen, id, focusedIndex, enableVirtualization, multiple, onClickHandler, } = useSafeContext(ComboBoxStateContext);
     const dispatch = useSafeContext(ComboBoxActionContext);
     const { inputRef, menuRef, optionsExtraInfoRef } = useSafeContext(ComboBoxRefsContext);
@@ -133,7 +133,10 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     return (React.createElement(React.Fragment, null,
         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 }),
+                : undefined, role: 'combobox', "aria-controls": isOpen ? `${id}-list` : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off', style: {
+                ...(multiple && { paddingInlineStart: tagContainerWidth + 18 }),
+                ...style,
+            }, "aria-describedby": multiple ? `${id}-selected-live` : undefined, ...rest }),
         multiple && selectTags ? (React.createElement(ComboBoxMultipleContainer, { ref: tagContainerWidthRef, selectedItems: selectTags, id: `${id}-selected-live` })) : null));
 });
 ComboBoxInput.displayName = 'ComboBoxInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "2.12.19",
+  "version": "2.12.20",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",