@itwin/itwinui-react 3.15.2 → 3.15.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 3.15.3
+
+### Patch Changes
+
+- [#2285](https://github.com/iTwin/iTwinUI/pull/2285): Fixed an issue in `ProgressLinear` where passing a `style` prop would cause it to lose its `value`.
+- [#2281](https://github.com/iTwin/iTwinUI/pull/2281): Inputs (e.g. `Input`, `ComboBox`, etc.) with "small" size now have the same height as other field elements with "small" size (e.g. `Button`).
+- [#2274](https://github.com/iTwin/iTwinUI/pull/2274): `IconButton`s inside `TransferList.Toolbar` will now show tooltips on the right side by default to avoid obscuring adjacent buttons in the group. This placement can be changed using the `labelProps.placement` prop on the `IconButton`.
+- [#2274](https://github.com/iTwin/iTwinUI/pull/2274): `TransferList.Toolbar` implements the previously missing [toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/), including the arrow-key navigation functionality.
+
 ## 3.15.2
 
 ### Patch Changes

package/DEV-cjs/core/ProgressIndicators/ProgressLinear.js

@@ -37,10 +37,11 @@ const ProgressLinear = _react.forwardRef((props, forwardedRef) => {
       'data-iui-status': status,
       'data-iui-indeterminate': indeterminate ? 'true' : void 0,
       'data-iui-animated': isAnimated ? 'true' : void 0,
+      ...rest,
       style: {
         '--iui-progress-percentage': `${boundedValue}%`,
+        ...props.style,
       },
-      ...rest,
     },
     _react.createElement(
       _index.ShadowRoot,

package/DEV-cjs/core/TransferList/TransferList.js

@@ -25,6 +25,7 @@ const _index = require('../../utils/index.js');
 const _List = require('../List/List.js');
 const _ListItem = require('../List/ListItem.js');
 const _Label = require('../Label/Label.js');
+const _ButtonGroup = require('../ButtonGroup/ButtonGroup.js');
 const TransferListComponent = _index.polymorphic.div(
   'iui-transfer-list-wrapper',
 );
@@ -174,12 +175,23 @@ const TransferListListboxLabel = _react.forwardRef((props, ref) => {
   );
 });
 TransferListListboxLabel.displayName = 'TransferList.ListboxLabel';
-const TransferListToolbar = _index.polymorphic.div(
-  'iui-transfer-list-toolbar',
-  {
-    role: 'toolbar',
-  },
-);
+const TransferListToolbar = _react.forwardRef((props, ref) => {
+  let { className, children, ...rest } = props;
+  return _react.createElement(
+    _ButtonGroup.ButtonGroup,
+    {
+      role: 'toolbar',
+      ref: ref,
+      ...rest,
+      orientation: 'vertical',
+      className: (0, _classnames.default)(
+        'iui-transfer-list-toolbar',
+        className,
+      ),
+    },
+    children,
+  );
+});
 TransferListToolbar.displayName = 'TransferList.Toolbar';
 const TransferList = Object.assign(TransferListComponent, {
   ListboxWrapper: TransferListListboxWrapper,

package/DEV-cjs/styles.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const e = '3.15.2';
+const e = '3.15.3';
 const u = new Proxy(
   {},
   {

package/DEV-esm/core/ProgressIndicators/ProgressLinear.js

@@ -22,10 +22,11 @@ export const ProgressLinear = React.forwardRef((props, forwardedRef) => {
       'data-iui-status': status,
       'data-iui-indeterminate': indeterminate ? 'true' : void 0,
       'data-iui-animated': isAnimated ? 'true' : void 0,
+      ...rest,
       style: {
         '--iui-progress-percentage': `${boundedValue}%`,
+        ...props.style,
       },
-      ...rest,
     },
     React.createElement(
       ShadowRoot,

package/DEV-esm/core/TransferList/TransferList.js

@@ -11,6 +11,7 @@ import {
 import { List } from '../List/List.js';
 import { ListItem } from '../List/ListItem.js';
 import { Label } from '../Label/Label.js';
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
 let TransferListComponent = polymorphic.div('iui-transfer-list-wrapper');
 TransferListComponent.displayName = 'TransferList';
 let TransferListListboxWrapper = React.forwardRef((props, ref) => {
@@ -152,8 +153,19 @@ let TransferListListboxLabel = React.forwardRef((props, ref) => {
   );
 });
 TransferListListboxLabel.displayName = 'TransferList.ListboxLabel';
-let TransferListToolbar = polymorphic.div('iui-transfer-list-toolbar', {
-  role: 'toolbar',
+let TransferListToolbar = React.forwardRef((props, ref) => {
+  let { className, children, ...rest } = props;
+  return React.createElement(
+    ButtonGroup,
+    {
+      role: 'toolbar',
+      ref: ref,
+      ...rest,
+      orientation: 'vertical',
+      className: cx('iui-transfer-list-toolbar', className),
+    },
+    children,
+  );
 });
 TransferListToolbar.displayName = 'TransferList.Toolbar';
 export const TransferList = Object.assign(TransferListComponent, {

package/DEV-esm/styles.js

@@ -1,4 +1,4 @@
-const t = '3.15.2';
+const t = '3.15.3';
 const u = new Proxy(
   {},
   {

package/cjs/core/ProgressIndicators/ProgressLinear.js

@@ -37,10 +37,11 @@ const ProgressLinear = _react.forwardRef((props, forwardedRef) => {
       'data-iui-status': status,
       'data-iui-indeterminate': indeterminate ? 'true' : void 0,
       'data-iui-animated': isAnimated ? 'true' : void 0,
+      ...rest,
       style: {
         '--iui-progress-percentage': `${boundedValue}%`,
+        ...props.style,
       },
-      ...rest,
     },
     _react.createElement(
       _index.ShadowRoot,

package/cjs/core/TransferList/TransferList.d.ts

@@ -54,7 +54,7 @@ export declare const TransferList: PolymorphicForwardRefComponent<"div", {}> & {
     /**
      * 	TransferList toolbar subcomponent
      */
-    Toolbar: PolymorphicForwardRefComponent<"div", {}>;
+    Toolbar: PolymorphicForwardRefComponent<"div", object>;
 };
 export declare const TransferListContext: React.Context<{
     /**

package/cjs/core/TransferList/TransferList.js

@@ -25,6 +25,7 @@ const _index = require('../../utils/index.js');
 const _List = require('../List/List.js');
 const _ListItem = require('../List/ListItem.js');
 const _Label = require('../Label/Label.js');
+const _ButtonGroup = require('../ButtonGroup/ButtonGroup.js');
 const TransferListComponent = _index.polymorphic.div(
   'iui-transfer-list-wrapper',
 );
@@ -169,12 +170,23 @@ const TransferListListboxLabel = _react.forwardRef((props, ref) => {
     children,
   );
 });
-const TransferListToolbar = _index.polymorphic.div(
-  'iui-transfer-list-toolbar',
-  {
-    role: 'toolbar',
-  },
-);
+const TransferListToolbar = _react.forwardRef((props, ref) => {
+  let { className, children, ...rest } = props;
+  return _react.createElement(
+    _ButtonGroup.ButtonGroup,
+    {
+      role: 'toolbar',
+      ref: ref,
+      ...rest,
+      orientation: 'vertical',
+      className: (0, _classnames.default)(
+        'iui-transfer-list-toolbar',
+        className,
+      ),
+    },
+    children,
+  );
+});
 const TransferList = Object.assign(TransferListComponent, {
   ListboxWrapper: TransferListListboxWrapper,
   Listbox: TransferListListbox,

package/cjs/styles.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const e = '3.15.2';
+const e = '3.15.3';
 const u = new Proxy(
   {},
   {

package/esm/core/ProgressIndicators/ProgressLinear.js

@@ -22,10 +22,11 @@ export const ProgressLinear = React.forwardRef((props, forwardedRef) => {
       'data-iui-status': status,
       'data-iui-indeterminate': indeterminate ? 'true' : void 0,
       'data-iui-animated': isAnimated ? 'true' : void 0,
+      ...rest,
       style: {
         '--iui-progress-percentage': `${boundedValue}%`,
+        ...props.style,
       },
-      ...rest,
     },
     React.createElement(
       ShadowRoot,

package/esm/core/TransferList/TransferList.d.ts

@@ -54,7 +54,7 @@ export declare const TransferList: PolymorphicForwardRefComponent<"div", {}> & {
     /**
      * 	TransferList toolbar subcomponent
      */
-    Toolbar: PolymorphicForwardRefComponent<"div", {}>;
+    Toolbar: PolymorphicForwardRefComponent<"div", object>;
 };
 export declare const TransferListContext: React.Context<{
     /**

package/esm/core/TransferList/TransferList.js

@@ -11,6 +11,7 @@ import {
 import { List } from '../List/List.js';
 import { ListItem } from '../List/ListItem.js';
 import { Label } from '../Label/Label.js';
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
 let TransferListComponent = polymorphic.div('iui-transfer-list-wrapper');
 let TransferListListboxWrapper = React.forwardRef((props, ref) => {
   let { className, children, ...rest } = props;
@@ -147,8 +148,19 @@ let TransferListListboxLabel = React.forwardRef((props, ref) => {
     children,
   );
 });
-let TransferListToolbar = polymorphic.div('iui-transfer-list-toolbar', {
-  role: 'toolbar',
+let TransferListToolbar = React.forwardRef((props, ref) => {
+  let { className, children, ...rest } = props;
+  return React.createElement(
+    ButtonGroup,
+    {
+      role: 'toolbar',
+      ref: ref,
+      ...rest,
+      orientation: 'vertical',
+      className: cx('iui-transfer-list-toolbar', className),
+    },
+    children,
+  );
 });
 export const TransferList = Object.assign(TransferListComponent, {
   ListboxWrapper: TransferListListboxWrapper,

package/esm/styles.js

@@ -1,4 +1,4 @@
-const t = '3.15.2';
+const t = '3.15.3';
 const u = new Proxy(
   {},
   {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.15.2",
+  "version": "3.15.3",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",