@itwin/itwinui-react 3.11.0 → 3.11.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 3.11.1
+
+### Patch Changes
+
+- [#2074](https://github.com/iTwin/iTwinUI/pull/2074): Fixed indentation of `Tree` nodes to be aligned regardless of the presence of expander button.
+- [#2064](https://github.com/iTwin/iTwinUI/pull/2064): Adjusted `Dialog` and `ExpandableBlock` to round some CSS `transform` values. This helps avoid blurry text on Windows in some cases.
+- [#2055](https://github.com/iTwin/iTwinUI/pull/2055): Fixed an issue in `Breadcrumbs.Item` where using a custom link component (e.g. `as={Link}` for client side routing) would break the CSS styling.
+- [#2071](https://github.com/iTwin/iTwinUI/pull/2071): Fixed a minor issue in `ComboBox` where a `label` attribute was accidentally being added to options in the DOM.
+- [#2068](https://github.com/iTwin/iTwinUI/pull/2068): Fixed `EditableCell` so that it correctly merges `className` and `style` props with the corresponding internal props.
+- [#2073](https://github.com/iTwin/iTwinUI/pull/2073): Fixed CommonJS types exports for the `/react-table` entrypoint.
+- [#2055](https://github.com/iTwin/iTwinUI/pull/2055): Fixed a regression from `v3.10.0` where non-button and non-link `Breadcrumbs.Item`s were getting a hover styling as if it were a button.
+
 ## 3.11.0
 
 ### Minor Changes

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -102,9 +102,19 @@ const ListItem = ({ item, isActive, }) => {
 const Separator = ({ separator }) => (React.createElement(index_js_1.Box, { as: 'li', className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator ?? React.createElement(index_js_1.SvgChevronRight, null)));
 // ----------------------------------------------------------------------------
 const BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
-    const { children, className, ...rest } = props;
-    const defaultAs = !!props.href ? Anchor_js_1.Anchor : !!props.onClick ? 'button' : 'span';
-    return (React.createElement(Button_js_1.Button, { as: defaultAs, className: (0, classnames_1.default)('iui-breadcrumbs-content', className), styleType: 'borderless', ref: forwardedRef, ...rest }, children));
+    const { as: asProp, ...rest } = props;
+    const commonProps = {
+        ...rest,
+        className: (0, classnames_1.default)('iui-breadcrumbs-content', props.className),
+        ref: forwardedRef,
+    };
+    if (String(asProp) === 'span' ||
+        (props.href == null && props.onClick == null && asProp == null)) {
+        return React.createElement(index_js_1.Box, { as: 'span', ...commonProps });
+    }
+    return (React.createElement(Button_js_1.Button, { as: (asProp === 'a' || (asProp == null && !!props.href)
+            ? Anchor_js_1.Anchor
+            : asProp), styleType: 'borderless', ...commonProps }));
 });
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
 // ----------------------------------------------------------------------------

package/cjs/core/ComboBox/ComboBox.js

@@ -264,7 +264,7 @@ exports.ComboBox = React.forwardRef((props, forwardedRef) => {
     const getMenuItem = React.useCallback((option, filteredIndex) => {
         const optionId = getOptionId(option, id);
         const { __originalIndex } = optionsExtraInfoRef.current[optionId];
-        const { icon, startIcon: startIconProp, ...restOptions } = option;
+        const { icon, startIcon: startIconProp, label, ...restOptions } = option;
         const startIcon = startIconProp ?? icon;
         const customItem = itemRenderer
             ? itemRenderer(option, {
@@ -291,7 +291,7 @@ exports.ComboBox = React.forwardRef((props, forwardedRef) => {
             }),
         })) : (React.createElement(ComboBoxMenuItem_js_1.ComboBoxMenuItem, { key: optionId, id: optionId, startIcon: startIcon, ...restOptions, isSelected: isMenuItemSelected(__originalIndex), onClick: () => {
                 onClickHandler(__originalIndex);
-            }, index: __originalIndex, "data-iui-filtered-index": filteredIndex }, option.label));
+            }, index: __originalIndex, "data-iui-filtered-index": filteredIndex }, label));
     }, [
         enableVirtualization,
         focusedIndex,

package/cjs/core/Table/cells/EditableCell.js

@@ -22,6 +22,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditableCell = void 0;
 /*---------------------------------------------------------------------------------------------
@@ -30,6 +33,7 @@ exports.EditableCell = void 0;
  *--------------------------------------------------------------------------------------------*/
 const React = __importStar(require("react"));
 const index_js_1 = require("../../../utils/index.js");
+const classnames_1 = __importDefault(require("classnames"));
 /**
  * Editable cell.
  * It should be passed to `cellRenderer`.
@@ -41,7 +45,7 @@ const index_js_1 = require("../../../utils/index.js");
  * }
  */
 const EditableCell = (props) => {
-    const { cellElementProps, cellProps, onCellEdit, children, isDisabled, ...rest } = props;
+    const { cellElementProps: { className: cellElementClassName, style: cellElementStyle, ...cellElementProps }, cellProps, onCellEdit, children, isDisabled, className, style, ...rest } = props;
     isDisabled; // To omit and prevent eslint error.
     const sanitizeString = (text) => {
         return text.replace(/(\r\n|\n|\r)+/gm, ' ');
@@ -52,7 +56,7 @@ const EditableCell = (props) => {
     }, [cellProps.value]);
     const [key, setKey] = React.useState((0, index_js_1.getRandomValue)(10));
     const [isDirty, setIsDirty] = React.useState(false);
-    return (React.createElement(index_js_1.Box, { ...cellElementProps, contentEditable: true, suppressContentEditableWarning: true, key: key, ...rest, onInput: (e) => {
+    return (React.createElement(index_js_1.Box, { ...cellElementProps, contentEditable: true, suppressContentEditableWarning: true, key: key, ...rest, className: (0, classnames_1.default)(cellElementClassName, className), style: { ...cellElementStyle, ...style }, onInput: (e) => {
             setValue(sanitizeString(e.target.innerText));
             setIsDirty(true);
             props.onInput?.(e);

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -73,9 +73,19 @@ const ListItem = ({ item, isActive, }) => {
 const Separator = ({ separator }) => (React.createElement(Box, { as: 'li', className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator ?? React.createElement(SvgChevronRight, null)));
 // ----------------------------------------------------------------------------
 const BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
-    const { children, className, ...rest } = props;
-    const defaultAs = !!props.href ? Anchor : !!props.onClick ? 'button' : 'span';
-    return (React.createElement(Button, { as: defaultAs, className: cx('iui-breadcrumbs-content', className), styleType: 'borderless', ref: forwardedRef, ...rest }, children));
+    const { as: asProp, ...rest } = props;
+    const commonProps = {
+        ...rest,
+        className: cx('iui-breadcrumbs-content', props.className),
+        ref: forwardedRef,
+    };
+    if (String(asProp) === 'span' ||
+        (props.href == null && props.onClick == null && asProp == null)) {
+        return React.createElement(Box, { as: 'span', ...commonProps });
+    }
+    return (React.createElement(Button, { as: (asProp === 'a' || (asProp == null && !!props.href)
+            ? Anchor
+            : asProp), styleType: 'borderless', ...commonProps }));
 });
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
 // ----------------------------------------------------------------------------

package/esm/core/ComboBox/ComboBox.js

@@ -238,7 +238,7 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
     const getMenuItem = React.useCallback((option, filteredIndex) => {
         const optionId = getOptionId(option, id);
         const { __originalIndex } = optionsExtraInfoRef.current[optionId];
-        const { icon, startIcon: startIconProp, ...restOptions } = option;
+        const { icon, startIcon: startIconProp, label, ...restOptions } = option;
         const startIcon = startIconProp ?? icon;
         const customItem = itemRenderer
             ? itemRenderer(option, {
@@ -265,7 +265,7 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
             }),
         })) : (React.createElement(ComboBoxMenuItem, { key: optionId, id: optionId, startIcon: startIcon, ...restOptions, isSelected: isMenuItemSelected(__originalIndex), onClick: () => {
                 onClickHandler(__originalIndex);
-            }, index: __originalIndex, "data-iui-filtered-index": filteredIndex }, option.label));
+            }, index: __originalIndex, "data-iui-filtered-index": filteredIndex }, label));
     }, [
         enableVirtualization,
         focusedIndex,

package/esm/core/Table/cells/EditableCell.js

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Box, getRandomValue } from '../../../utils/index.js';
+import cx from 'classnames';
 /**
  * Editable cell.
  * It should be passed to `cellRenderer`.
@@ -15,7 +16,7 @@ import { Box, getRandomValue } from '../../../utils/index.js';
  * }
  */
 export const EditableCell = (props) => {
-    const { cellElementProps, cellProps, onCellEdit, children, isDisabled, ...rest } = props;
+    const { cellElementProps: { className: cellElementClassName, style: cellElementStyle, ...cellElementProps }, cellProps, onCellEdit, children, isDisabled, className, style, ...rest } = props;
     isDisabled; // To omit and prevent eslint error.
     const sanitizeString = (text) => {
         return text.replace(/(\r\n|\n|\r)+/gm, ' ');
@@ -26,7 +27,7 @@ export const EditableCell = (props) => {
     }, [cellProps.value]);
     const [key, setKey] = React.useState(getRandomValue(10));
     const [isDirty, setIsDirty] = React.useState(false);
-    return (React.createElement(Box, { ...cellElementProps, contentEditable: true, suppressContentEditableWarning: true, key: key, ...rest, onInput: (e) => {
+    return (React.createElement(Box, { ...cellElementProps, contentEditable: true, suppressContentEditableWarning: true, key: key, ...rest, className: cx(cellElementClassName, className), style: { ...cellElementStyle, ...style }, onInput: (e) => {
             setValue(sanitizeString(e.target.innerText));
             setIsDirty(true);
             props.onInput?.(e);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.11.0",
+  "version": "3.11.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -19,6 +19,12 @@
       }
     },
     "./react-table": {
+      "import": {
+        "types": "./esm/react-table/react-table.d.ts"
+      },
+      "require": {
+        "types": "./cjs/react-table/react-table.d.ts"
+      },
       "types": "./react-table.d.ts"
     },
     "./styles.css": "./styles.css",