@itwin/itwinui-react 3.15.1 → 3.15.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # 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
+
+- [#2275](https://github.com/iTwin/iTwinUI/pull/2275): Made the `ActionType.type` type in `Table` more specific. This will help when using the `action` argument in the `stateReducer` function, for example.
+- [#2273](https://github.com/iTwin/iTwinUI/pull/2273): Fixed an issue where the internal unit test detection logic was incorrectly treating Cypress like a unit test environment.
+
 ## 3.15.1
 
 ### Patch Changes
@@ -13,6 +29,7 @@
 ### Minor Changes
 
 - [#2233](https://github.com/iTwin/iTwinUI/pull/2233): `Popover` now enables the [`hide` middleware](https://floating-ui.com/docs/hide) to hide the floating content when the trigger is hidden.
+
   - This also affects other popover-like components (e.g. `Select`, `ComboBox`, `DropdownMenu`, `SplitButton`).
   - If the floating content gets hidden even when it shouldn't (e.g. due to some custom styles interfering with the trigger's hide detection), consider disabling the `hide` middleware.
 

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/Table/columns/expanderColumn.js

@@ -41,6 +41,7 @@ const ExpanderColumn = (props = {}) => {
         return _react.createElement(
           _IconButton.IconButton,
           {
+            'aria-label': 'Toggle expandable content',
             className: 'iui-table-row-expander',
             styleType: 'borderless',
             size: 'small',

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/react-table/react-table.types-test.js

@@ -402,6 +402,7 @@ const _index1 = require('../index.js');
                 styleType: 'borderless',
                 onClick: (e) => e.stopPropagation(),
                 disabled: isRowDisabled(props.row.original),
+                label: 'Column manager',
               },
               _react.default.createElement('svg', null),
             ),

package/DEV-cjs/styles.js

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

package/DEV-cjs/utils/functions/dev.js

@@ -9,9 +9,11 @@ Object.defineProperty(exports, 'isUnitTest', {
   },
 });
 const isJest = 'undefined' != typeof jest;
+const isCypress = void 0 !== globalThis.Cypress;
 const isMocha =
   void 0 !== globalThis.beforeEach &&
   'function(name,fn){suites[0].beforeEach(name,fn);}' ===
-    `${globalThis.beforeEach}`.replace(/\s/g, '');
+    `${globalThis.beforeEach}`.replace(/\s/g, '') &&
+  !isCypress;
 const isVitest = void 0 !== globalThis.__vitest_index__;
 const isUnitTest = isJest || isVitest || isMocha;

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/Table/columns/expanderColumn.js

@@ -21,6 +21,7 @@ export const ExpanderColumn = (props = {}) => {
         return React.createElement(
           IconButton,
           {
+            'aria-label': 'Toggle expandable content',
             className: 'iui-table-row-expander',
             styleType: 'borderless',
             size: 'small',

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/react-table/react-table.types-test.js

@@ -409,6 +409,7 @@ import {
                 styleType: 'borderless',
                 onClick: (e) => e.stopPropagation(),
                 disabled: isRowDisabled(props.row.original),
+                label: 'Column manager',
               },
               React.createElement('svg', null),
             ),

package/DEV-esm/styles.js

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

package/DEV-esm/utils/functions/dev.js

@@ -1,8 +1,10 @@
 let isJest = 'undefined' != typeof jest;
+let isCypress = void 0 !== globalThis.Cypress;
 let isMocha =
   void 0 !== globalThis.beforeEach &&
   'function(name,fn){suites[0].beforeEach(name,fn);}' ===
-    `${globalThis.beforeEach}`.replace(/\s/g, '');
+    `${globalThis.beforeEach}`.replace(/\s/g, '') &&
+  !isCypress;
 let isVitest = void 0 !== globalThis.__vitest_index__;
 let isUnitTest = isJest || isVitest || isMocha;
 export { isUnitTest };

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/Table/columns/expanderColumn.js

@@ -41,6 +41,7 @@ const ExpanderColumn = (props = {}) => {
         return _react.createElement(
           _IconButton.IconButton,
           {
+            'aria-label': 'Toggle expandable content',
             className: 'iui-table-row-expander',
             styleType: 'borderless',
             size: 'small',

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

@@ -721,9 +721,12 @@ export interface SortingRule<D> {
     id: IdType<D>;
     desc?: boolean | undefined;
 }
-export declare const actions: Record<string, string>;
+type BuiltInAction = 'init' | 'resetHiddenColumns' | 'toggleHideColumn' | 'setHiddenColumns' | 'toggleHideAllColumns' | 'resetPivot' | 'togglePivot' | 'resetColumnOrder' | 'setColumnOrder' | 'resetExpanded' | 'toggleRowExpanded' | 'toggleAllRowsExpanded' | 'resetFilters' | 'setFilter' | 'setAllFilters' | 'resetGlobalFilter' | 'setGlobalFilter' | 'columnStartResizing' | 'columnResizing' | 'columnDoneResizing' | 'resetResize' | 'resetGroupBy' | 'setGroupBy' | 'toggleGroupBy' | 'resetPage' | 'gotoPage' | 'setPageSize' | 'resetSelectedRows' | 'toggleAllRowsSelected' | 'toggleRowSelected' | 'toggleAllPageRowsSelected' | 'setRowState' | 'setCellState' | 'resetRowState' | 'resetSortBy' | 'setSortBy' | 'toggleSortBy' | 'clearSortBy';
+type CustomAction = 'setScrolledLeft' | 'setScrolledRight' | 'columnDragStart' | 'columnDragEnd' | 'singleRowSelected' | 'shiftRowSelected' | 'tableResizeStart' | 'tableResizeEnd';
+type PossibleActionType = BuiltInAction | CustomAction | AnyString;
+export declare const actions: Record<PossibleActionType, string>;
 export type ActionType = {
-    type: string;
+    type: PossibleActionType;
 } & Record<string, any>;
 export declare const defaultColumn: Partial<Column> & Record<string, any>;
 export type StringKey<D> = Extract<keyof D, string>;

package/cjs/react-table/react-table.types-test.js

@@ -402,6 +402,7 @@ const _index1 = require('../index.js');
                 styleType: 'borderless',
                 onClick: (e) => e.stopPropagation(),
                 disabled: isRowDisabled(props.row.original),
+                label: 'Column manager',
               },
               _react.default.createElement('svg', null),
             ),

package/cjs/styles.js

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

package/cjs/utils/functions/dev.js

@@ -9,9 +9,11 @@ Object.defineProperty(exports, 'isUnitTest', {
   },
 });
 const isJest = 'undefined' != typeof jest;
+const isCypress = void 0 !== globalThis.Cypress;
 const isMocha =
   void 0 !== globalThis.beforeEach &&
   'function(name,fn){suites[0].beforeEach(name,fn);}' ===
-    `${globalThis.beforeEach}`.replace(/\s/g, '');
+    `${globalThis.beforeEach}`.replace(/\s/g, '') &&
+  !isCypress;
 const isVitest = void 0 !== globalThis.__vitest_index__;
 const isUnitTest = isJest || isVitest || isMocha;

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/Table/columns/expanderColumn.js

@@ -21,6 +21,7 @@ export const ExpanderColumn = (props = {}) => {
         return React.createElement(
           IconButton,
           {
+            'aria-label': 'Toggle expandable content',
             className: 'iui-table-row-expander',
             styleType: 'borderless',
             size: 'small',

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

@@ -721,9 +721,12 @@ export interface SortingRule<D> {
     id: IdType<D>;
     desc?: boolean | undefined;
 }
-export declare const actions: Record<string, string>;
+type BuiltInAction = 'init' | 'resetHiddenColumns' | 'toggleHideColumn' | 'setHiddenColumns' | 'toggleHideAllColumns' | 'resetPivot' | 'togglePivot' | 'resetColumnOrder' | 'setColumnOrder' | 'resetExpanded' | 'toggleRowExpanded' | 'toggleAllRowsExpanded' | 'resetFilters' | 'setFilter' | 'setAllFilters' | 'resetGlobalFilter' | 'setGlobalFilter' | 'columnStartResizing' | 'columnResizing' | 'columnDoneResizing' | 'resetResize' | 'resetGroupBy' | 'setGroupBy' | 'toggleGroupBy' | 'resetPage' | 'gotoPage' | 'setPageSize' | 'resetSelectedRows' | 'toggleAllRowsSelected' | 'toggleRowSelected' | 'toggleAllPageRowsSelected' | 'setRowState' | 'setCellState' | 'resetRowState' | 'resetSortBy' | 'setSortBy' | 'toggleSortBy' | 'clearSortBy';
+type CustomAction = 'setScrolledLeft' | 'setScrolledRight' | 'columnDragStart' | 'columnDragEnd' | 'singleRowSelected' | 'shiftRowSelected' | 'tableResizeStart' | 'tableResizeEnd';
+type PossibleActionType = BuiltInAction | CustomAction | AnyString;
+export declare const actions: Record<PossibleActionType, string>;
 export type ActionType = {
-    type: string;
+    type: PossibleActionType;
 } & Record<string, any>;
 export declare const defaultColumn: Partial<Column> & Record<string, any>;
 export type StringKey<D> = Extract<keyof D, string>;

package/esm/react-table/react-table.types-test.js

@@ -409,6 +409,7 @@ import {
                 styleType: 'borderless',
                 onClick: (e) => e.stopPropagation(),
                 disabled: isRowDisabled(props.row.original),
+                label: 'Column manager',
               },
               React.createElement('svg', null),
             ),

package/esm/styles.js

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

package/esm/utils/functions/dev.js

@@ -1,8 +1,10 @@
 let isJest = 'undefined' != typeof jest;
+let isCypress = void 0 !== globalThis.Cypress;
 let isMocha =
   void 0 !== globalThis.beforeEach &&
   'function(name,fn){suites[0].beforeEach(name,fn);}' ===
-    `${globalThis.beforeEach}`.replace(/\s/g, '');
+    `${globalThis.beforeEach}`.replace(/\s/g, '') &&
+  !isCypress;
 let isVitest = void 0 !== globalThis.__vitest_index__;
 let isUnitTest = isJest || isVitest || isMocha;
 export { isUnitTest };

package/package.json

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