@itwin/itwinui-react 1.44.0 → 1.45.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.45.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.44.0...v1.45.0) (2022-08-25)
+
+### What's new
+
+* **MiddleTextTruncation:** Add text renderer for customizing rendered content ([#787](https://www.github.com/iTwin/iTwinUI-react/issues/787)) ([293ebea](https://www.github.com/iTwin/iTwinUI-react/commit/293ebeac844eb540c1d5c7f999e176f3be377d8e))
+* **Table:** Add `Cell` and `Row` status. Icons support in `DefaultCell` ([#788](https://www.github.com/iTwin/iTwinUI-react/issues/788)) ([9b0282e](https://www.github.com/iTwin/iTwinUI-react/commit/9b0282e610434301ff69e296086304afc5648034))
+
 ## [1.44.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.43.1...v1.44.0) (2022-08-23)
 
 ### What's new

package/README.md

@@ -14,7 +14,7 @@
 ## What is iTwinUI-react?
 
 iTwinUI-react is a library built on top of the [iTwinUI](https://github.com/iTwin/iTwinUI) library.
-The goal of this project is to provide React components for using the styles and components from the core `iTwinUI` project. Check out the [demo website](https://itwin.github.io/iTwinUI-react/?path=/story/overview--overview) to see the components in action.
+The goal of this project is to provide React components for using the styles and components from the core `iTwinUI` project. Check out the [demo website](https://itwin.github.io/iTwinUI-react) to see the components in action.
 
 ---
 
@@ -102,4 +102,4 @@ Please read our [CONTRIBUTING.md](https://github.com/iTwin/iTwinUI-react/blob/ma
 
 ## Changelog
 
-Read our [CHANGELOG.md](https://github.com/iTwin/iTwinUI-react/blob/main/CHANGELOG.md) to find recent changes.
+Read our [CHANGELOG.md](https://github.com/iTwin/iTwinUI-react/blob/main/packages/iTwinUI-react/CHANGELOG.md) to find recent changes.

package/cjs/core/Table/Table.d.ts

@@ -129,7 +129,9 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
      * Function that should return custom props passed to the each row.
      * Must be memoized.
      */
-    rowProps?: (row: Row<T>) => React.ComponentPropsWithRef<'div'>;
+    rowProps?: (row: Row<T>) => React.ComponentPropsWithRef<'div'> & {
+        status?: 'positive' | 'warning' | 'negative';
+    };
     /**
      * Modify the density of the table (adjusts the row height).
      * @default 'default'

package/cjs/core/Table/TableRowMemoized.d.ts

@@ -8,7 +8,11 @@ import { CellProps, Row, TableInstance, TableState } from 'react-table';
  */
 export declare const TableRow: <T extends Record<string, unknown>>(props: {
     row: Row<T>;
-    rowProps?: ((row: Row<T>) => React.ComponentPropsWithRef<'div'>) | undefined;
+    rowProps?: ((row: Row<T>) => Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        status?: "positive" | "warning" | "negative" | undefined;
+    }) | undefined;
     isLast: boolean;
     onRowInViewport: React.MutableRefObject<((rowData: T) => void) | undefined>;
     onBottomReached: React.MutableRefObject<(() => void) | undefined>;
@@ -25,7 +29,11 @@ export declare const TableRow: <T extends Record<string, unknown>>(props: {
 }) => JSX.Element;
 export declare const TableRowMemoized: <T extends Record<string, unknown>>(props: {
     row: Row<T>;
-    rowProps?: ((row: Row<T>) => React.ComponentPropsWithRef<'div'>) | undefined;
+    rowProps?: ((row: Row<T>) => Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        status?: "positive" | "warning" | "negative" | undefined;
+    }) | undefined;
     isLast: boolean;
     onRowInViewport: React.MutableRefObject<((rowData: T) => void) | undefined>;
     onBottomReached: React.MutableRefObject<(() => void) | undefined>;

package/cjs/core/Table/TableRowMemoized.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,6 +41,8 @@ var TableCell_1 = require("./TableCell");
  * When adding new features check whether it changes state that affects row. If it does then add equality check to `React.memo`.
  */
 var TableRow = function (props) {
+    var _a;
+    var _b;
     var row = props.row, rowProps = props.rowProps, isLast = props.isLast, onRowInViewport = props.onRowInViewport, onBottomReached = props.onBottomReached, intersectionMargin = props.intersectionMargin, onClick = props.onClick, subComponent = props.subComponent, isDisabled = props.isDisabled, tableHasSubRows = props.tableHasSubRows, tableInstance = props.tableInstance, expanderCell = props.expanderCell, bodyRef = props.bodyRef, tableRowRef = props.tableRowRef;
     var onIntersect = react_1.default.useCallback(function () {
         var _a, _b;
@@ -50,13 +63,16 @@ var TableRow = function (props) {
         rootMargin: "".concat(intersectionMargin, "px"),
         root: intersectionRoot,
     });
-    var userRowProps = rowProps === null || rowProps === void 0 ? void 0 : rowProps(row);
-    var mergedProps = __assign(__assign(__assign({}, row.getRowProps({ style: { flex: "0 0 auto", minWidth: '100%' } })), userRowProps), {
-        className: (0, classnames_1.default)('iui-row', {
-            'iui-selected': row.isSelected,
-            'iui-row-expanded': row.isExpanded && subComponent,
-            'iui-disabled': isDisabled,
-        }, userRowProps === null || userRowProps === void 0 ? void 0 : userRowProps.className),
+    var userRowProps = (_b = rowProps === null || rowProps === void 0 ? void 0 : rowProps(row)) !== null && _b !== void 0 ? _b : {};
+    var status = userRowProps.status, restUserRowProps = __rest(userRowProps, ["status"]);
+    var mergedProps = __assign(__assign(__assign({}, row.getRowProps({ style: { flex: "0 0 auto", minWidth: '100%' } })), restUserRowProps), {
+        className: (0, classnames_1.default)('iui-row', (_a = {
+                'iui-selected': row.isSelected,
+                'iui-row-expanded': row.isExpanded && subComponent,
+                'iui-disabled': isDisabled
+            },
+            _a["iui-".concat(status)] = !!status,
+            _a), userRowProps === null || userRowProps === void 0 ? void 0 : userRowProps.className),
     });
     var refs = (0, utils_1.useMergedRefs)(intersectionRef, mergedProps.ref, tableRowRef);
     return (react_1.default.createElement(react_1.default.Fragment, null,

package/cjs/core/Table/cells/DefaultCell.d.ts

@@ -1,6 +1,19 @@
 import React from 'react';
 import { CellRendererProps } from 'react-table';
-export declare type DefaultCellProps<T extends Record<string, unknown>> = CellRendererProps<T> & React.ComponentPropsWithoutRef<'div'>;
+export declare type DefaultCellProps<T extends Record<string, unknown>> = {
+    /**
+     * Custom icon to be displayed at the beginning of the cell.
+     */
+    startIcon?: JSX.Element;
+    /**
+     * Custom icon to be displayed at the end of the cell.
+     */
+    endIcon?: JSX.Element;
+    /**
+     * Status of the cell.
+     */
+    status?: 'positive' | 'negative' | 'warning';
+} & CellRendererProps<T> & React.ComponentPropsWithoutRef<'div'>;
 /**
  * Default cell.
  * It should be passed to `cellRenderer`.

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

@@ -44,12 +44,18 @@ var classnames_1 = __importDefault(require("classnames"));
  * }
  */
 var DefaultCell = function (props) {
+    var _a;
     // Omitting `cellProps`
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var _a = props.cellElementProps, cellElementClassName = _a.className, cellElementStyle = _a.style, cellElementProps = __rest(_a, ["className", "style"]), children = props.children, cellProps = props.cellProps, isDisabled = props.isDisabled, className = props.className, style = props.style, rest = __rest(props, ["cellElementProps", "children", "cellProps", "isDisabled", "className", "style"]);
-    return (react_1.default.createElement("div", __assign({}, cellElementProps, rest, { className: (0, classnames_1.default)(cellElementClassName, className, {
-            'iui-disabled': isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(cellProps.row.original),
-        }), style: __assign(__assign({}, cellElementStyle), style) }), children));
+    var _b = props.cellElementProps, cellElementClassName = _b.className, cellElementStyle = _b.style, cellElementProps = __rest(_b, ["className", "style"]), children = props.children, startIcon = props.startIcon, endIcon = props.endIcon, cellProps = props.cellProps, isDisabled = props.isDisabled, className = props.className, style = props.style, status = props.status, rest = __rest(props, ["cellElementProps", "children", "startIcon", "endIcon", "cellProps", "isDisabled", "className", "style", "status"]);
+    return (react_1.default.createElement("div", __assign({}, cellElementProps, rest, { className: (0, classnames_1.default)(cellElementClassName, className, (_a = {
+                'iui-disabled': isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(cellProps.row.original)
+            },
+            _a["iui-".concat(status)] = !!status,
+            _a)), style: __assign(__assign({}, cellElementStyle), style) }),
+        startIcon && react_1.default.createElement("div", { className: 'iui-cell-start-icon' }, startIcon),
+        children,
+        endIcon && react_1.default.createElement("div", { className: 'iui-cell-end-icon' }, endIcon)));
 };
 exports.DefaultCell = DefaultCell;
 exports.default = exports.DefaultCell;

package/cjs/core/utils/components/MiddleTextTruncation.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { CommonProps } from '../props';
 export declare type MiddleTextTruncationProps = {
     /**
@@ -10,12 +10,26 @@ export declare type MiddleTextTruncationProps = {
      * @default 6
      */
     endCharsCount?: number;
+    /**
+     * Custom renderer for the truncated text.
+     */
+    textRenderer?: (truncatedText: string, originalText: string) => React.ReactNode;
 } & CommonProps;
 /**
  * Truncates text with the ellipsis in the middle,
  * leaving defined number of chars at the end.
  * @example
  * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' />
+ * @example
+ * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' endCharsCount={10} />
+ * @example
+ * <MiddleTextTruncation
+ *   text='ThisIsMyVeryLongFileName.dgn'
+ *   textRenderer={React.useCallback(
+ *     (truncatedText) => <b>{truncatedText}</b>,
+ *     []
+ *   )}
+ * />
  */
 export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => JSX.Element;
 export default MiddleTextTruncation;

package/cjs/core/utils/components/MiddleTextTruncation.js

@@ -38,10 +38,21 @@ var ELLIPSIS_CHAR = '…';
  * leaving defined number of chars at the end.
  * @example
  * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' />
+ * @example
+ * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' endCharsCount={10} />
+ * @example
+ * <MiddleTextTruncation
+ *   text='ThisIsMyVeryLongFileName.dgn'
+ *   textRenderer={React.useCallback(
+ *     (truncatedText) => <b>{truncatedText}</b>,
+ *     []
+ *   )}
+ * />
  */
 var MiddleTextTruncation = function (props) {
-    var text = props.text, _a = props.endCharsCount, endCharsCount = _a === void 0 ? 6 : _a, style = props.style, rest = __rest(props, ["text", "endCharsCount", "style"]);
-    var _b = (0, useOverflow_1.useOverflow)(text), ref = _b[0], visibleCount = _b[1];
+    var _a;
+    var text = props.text, _b = props.endCharsCount, endCharsCount = _b === void 0 ? 6 : _b, textRenderer = props.textRenderer, style = props.style, rest = __rest(props, ["text", "endCharsCount", "textRenderer", "style"]);
+    var _c = (0, useOverflow_1.useOverflow)(text), ref = _c[0], visibleCount = _c[1];
     var truncatedText = react_1.default.useMemo(function () {
         if (visibleCount < text.length) {
             return "".concat(text.substring(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length)).concat(ELLIPSIS_CHAR).concat(text.substring(text.length - endCharsCount));
@@ -50,7 +61,7 @@ var MiddleTextTruncation = function (props) {
             return text;
         }
     }, [endCharsCount, text, visibleCount]);
-    return (react_1.default.createElement("span", __assign({ style: __assign({ display: 'flex', minWidth: 0, flexGrow: 1, whiteSpace: 'nowrap' }, style), ref: ref }, rest), truncatedText));
+    return (react_1.default.createElement("span", __assign({ style: __assign({ display: 'flex', minWidth: 0, flexGrow: 1, whiteSpace: 'nowrap' }, style), ref: ref }, rest), (_a = textRenderer === null || textRenderer === void 0 ? void 0 : textRenderer(truncatedText, text)) !== null && _a !== void 0 ? _a : truncatedText));
 };
 exports.MiddleTextTruncation = MiddleTextTruncation;
 exports.default = exports.MiddleTextTruncation;

package/esm/core/Table/Table.d.ts

@@ -129,7 +129,9 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
      * Function that should return custom props passed to the each row.
      * Must be memoized.
      */
-    rowProps?: (row: Row<T>) => React.ComponentPropsWithRef<'div'>;
+    rowProps?: (row: Row<T>) => React.ComponentPropsWithRef<'div'> & {
+        status?: 'positive' | 'warning' | 'negative';
+    };
     /**
      * Modify the density of the table (adjusts the row height).
      * @default 'default'

package/esm/core/Table/TableRowMemoized.d.ts

@@ -8,7 +8,11 @@ import { CellProps, Row, TableInstance, TableState } from 'react-table';
  */
 export declare const TableRow: <T extends Record<string, unknown>>(props: {
     row: Row<T>;
-    rowProps?: ((row: Row<T>) => React.ComponentPropsWithRef<'div'>) | undefined;
+    rowProps?: ((row: Row<T>) => Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        status?: "positive" | "warning" | "negative" | undefined;
+    }) | undefined;
     isLast: boolean;
     onRowInViewport: React.MutableRefObject<((rowData: T) => void) | undefined>;
     onBottomReached: React.MutableRefObject<(() => void) | undefined>;
@@ -25,7 +29,11 @@ export declare const TableRow: <T extends Record<string, unknown>>(props: {
 }) => JSX.Element;
 export declare const TableRowMemoized: <T extends Record<string, unknown>>(props: {
     row: Row<T>;
-    rowProps?: ((row: Row<T>) => React.ComponentPropsWithRef<'div'>) | undefined;
+    rowProps?: ((row: Row<T>) => Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        status?: "positive" | "warning" | "negative" | undefined;
+    }) | undefined;
     isLast: boolean;
     onRowInViewport: React.MutableRefObject<((rowData: T) => void) | undefined>;
     onBottomReached: React.MutableRefObject<(() => void) | undefined>;

package/esm/core/Table/TableRowMemoized.js

@@ -9,6 +9,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -24,6 +35,8 @@ import { TableCell } from './TableCell';
  * When adding new features check whether it changes state that affects row. If it does then add equality check to `React.memo`.
  */
 export var TableRow = function (props) {
+    var _a;
+    var _b;
     var row = props.row, rowProps = props.rowProps, isLast = props.isLast, onRowInViewport = props.onRowInViewport, onBottomReached = props.onBottomReached, intersectionMargin = props.intersectionMargin, onClick = props.onClick, subComponent = props.subComponent, isDisabled = props.isDisabled, tableHasSubRows = props.tableHasSubRows, tableInstance = props.tableInstance, expanderCell = props.expanderCell, bodyRef = props.bodyRef, tableRowRef = props.tableRowRef;
     var onIntersect = React.useCallback(function () {
         var _a, _b;
@@ -44,13 +57,16 @@ export var TableRow = function (props) {
         rootMargin: "".concat(intersectionMargin, "px"),
         root: intersectionRoot,
     });
-    var userRowProps = rowProps === null || rowProps === void 0 ? void 0 : rowProps(row);
-    var mergedProps = __assign(__assign(__assign({}, row.getRowProps({ style: { flex: "0 0 auto", minWidth: '100%' } })), userRowProps), {
-        className: cx('iui-row', {
-            'iui-selected': row.isSelected,
-            'iui-row-expanded': row.isExpanded && subComponent,
-            'iui-disabled': isDisabled,
-        }, userRowProps === null || userRowProps === void 0 ? void 0 : userRowProps.className),
+    var userRowProps = (_b = rowProps === null || rowProps === void 0 ? void 0 : rowProps(row)) !== null && _b !== void 0 ? _b : {};
+    var status = userRowProps.status, restUserRowProps = __rest(userRowProps, ["status"]);
+    var mergedProps = __assign(__assign(__assign({}, row.getRowProps({ style: { flex: "0 0 auto", minWidth: '100%' } })), restUserRowProps), {
+        className: cx('iui-row', (_a = {
+                'iui-selected': row.isSelected,
+                'iui-row-expanded': row.isExpanded && subComponent,
+                'iui-disabled': isDisabled
+            },
+            _a["iui-".concat(status)] = !!status,
+            _a), userRowProps === null || userRowProps === void 0 ? void 0 : userRowProps.className),
     });
     var refs = useMergedRefs(intersectionRef, mergedProps.ref, tableRowRef);
     return (React.createElement(React.Fragment, null,

package/esm/core/Table/cells/DefaultCell.d.ts

@@ -1,6 +1,19 @@
 import React from 'react';
 import { CellRendererProps } from 'react-table';
-export declare type DefaultCellProps<T extends Record<string, unknown>> = CellRendererProps<T> & React.ComponentPropsWithoutRef<'div'>;
+export declare type DefaultCellProps<T extends Record<string, unknown>> = {
+    /**
+     * Custom icon to be displayed at the beginning of the cell.
+     */
+    startIcon?: JSX.Element;
+    /**
+     * Custom icon to be displayed at the end of the cell.
+     */
+    endIcon?: JSX.Element;
+    /**
+     * Status of the cell.
+     */
+    status?: 'positive' | 'negative' | 'warning';
+} & CellRendererProps<T> & React.ComponentPropsWithoutRef<'div'>;
 /**
  * Default cell.
  * It should be passed to `cellRenderer`.

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

@@ -38,11 +38,17 @@ import cx from 'classnames';
  * }
  */
 export var DefaultCell = function (props) {
+    var _a;
     // Omitting `cellProps`
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var _a = props.cellElementProps, cellElementClassName = _a.className, cellElementStyle = _a.style, cellElementProps = __rest(_a, ["className", "style"]), children = props.children, cellProps = props.cellProps, isDisabled = props.isDisabled, className = props.className, style = props.style, rest = __rest(props, ["cellElementProps", "children", "cellProps", "isDisabled", "className", "style"]);
-    return (React.createElement("div", __assign({}, cellElementProps, rest, { className: cx(cellElementClassName, className, {
-            'iui-disabled': isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(cellProps.row.original),
-        }), style: __assign(__assign({}, cellElementStyle), style) }), children));
+    var _b = props.cellElementProps, cellElementClassName = _b.className, cellElementStyle = _b.style, cellElementProps = __rest(_b, ["className", "style"]), children = props.children, startIcon = props.startIcon, endIcon = props.endIcon, cellProps = props.cellProps, isDisabled = props.isDisabled, className = props.className, style = props.style, status = props.status, rest = __rest(props, ["cellElementProps", "children", "startIcon", "endIcon", "cellProps", "isDisabled", "className", "style", "status"]);
+    return (React.createElement("div", __assign({}, cellElementProps, rest, { className: cx(cellElementClassName, className, (_a = {
+                'iui-disabled': isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(cellProps.row.original)
+            },
+            _a["iui-".concat(status)] = !!status,
+            _a)), style: __assign(__assign({}, cellElementStyle), style) }),
+        startIcon && React.createElement("div", { className: 'iui-cell-start-icon' }, startIcon),
+        children,
+        endIcon && React.createElement("div", { className: 'iui-cell-end-icon' }, endIcon)));
 };
 export default DefaultCell;

package/esm/core/utils/components/MiddleTextTruncation.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { CommonProps } from '../props';
 export declare type MiddleTextTruncationProps = {
     /**
@@ -10,12 +10,26 @@ export declare type MiddleTextTruncationProps = {
      * @default 6
      */
     endCharsCount?: number;
+    /**
+     * Custom renderer for the truncated text.
+     */
+    textRenderer?: (truncatedText: string, originalText: string) => React.ReactNode;
 } & CommonProps;
 /**
  * Truncates text with the ellipsis in the middle,
  * leaving defined number of chars at the end.
  * @example
  * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' />
+ * @example
+ * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' endCharsCount={10} />
+ * @example
+ * <MiddleTextTruncation
+ *   text='ThisIsMyVeryLongFileName.dgn'
+ *   textRenderer={React.useCallback(
+ *     (truncatedText) => <b>{truncatedText}</b>,
+ *     []
+ *   )}
+ * />
  */
 export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => JSX.Element;
 export default MiddleTextTruncation;

package/esm/core/utils/components/MiddleTextTruncation.js

@@ -32,10 +32,21 @@ var ELLIPSIS_CHAR = '…';
  * leaving defined number of chars at the end.
  * @example
  * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' />
+ * @example
+ * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' endCharsCount={10} />
+ * @example
+ * <MiddleTextTruncation
+ *   text='ThisIsMyVeryLongFileName.dgn'
+ *   textRenderer={React.useCallback(
+ *     (truncatedText) => <b>{truncatedText}</b>,
+ *     []
+ *   )}
+ * />
  */
 export var MiddleTextTruncation = function (props) {
-    var text = props.text, _a = props.endCharsCount, endCharsCount = _a === void 0 ? 6 : _a, style = props.style, rest = __rest(props, ["text", "endCharsCount", "style"]);
-    var _b = useOverflow(text), ref = _b[0], visibleCount = _b[1];
+    var _a;
+    var text = props.text, _b = props.endCharsCount, endCharsCount = _b === void 0 ? 6 : _b, textRenderer = props.textRenderer, style = props.style, rest = __rest(props, ["text", "endCharsCount", "textRenderer", "style"]);
+    var _c = useOverflow(text), ref = _c[0], visibleCount = _c[1];
     var truncatedText = React.useMemo(function () {
         if (visibleCount < text.length) {
             return "".concat(text.substring(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length)).concat(ELLIPSIS_CHAR).concat(text.substring(text.length - endCharsCount));
@@ -44,6 +55,6 @@ export var MiddleTextTruncation = function (props) {
             return text;
         }
     }, [endCharsCount, text, visibleCount]);
-    return (React.createElement("span", __assign({ style: __assign({ display: 'flex', minWidth: 0, flexGrow: 1, whiteSpace: 'nowrap' }, style), ref: ref }, rest), truncatedText));
+    return (React.createElement("span", __assign({ style: __assign({ display: 'flex', minWidth: 0, flexGrow: 1, whiteSpace: 'nowrap' }, style), ref: ref }, rest), (_a = textRenderer === null || textRenderer === void 0 ? void 0 : textRenderer(truncatedText, text)) !== null && _a !== void 0 ? _a : truncatedText));
 };
 export default MiddleTextTruncation;

package/package.json

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