@itwin/itwinui-react 3.15.3 → 3.15.5

package/cjs/core/Table/ColumnHeader.js

@@ -12,39 +12,32 @@ const _interop_require_default = require('@swc/helpers/_/_interop_require_defaul
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
-const _index1 = require('./columns/index.js');
 const _FilterToggle = require('./filters/FilterToggle.js');
 const _utils = require('./utils.js');
 const _classnames = _interop_require_default._(require('classnames'));
-const ColumnHeader = (props) => {
+const ColumnHeader = _react.forwardRef((props, forwardedRef) => {
   let {
-    columnRefs,
     column,
-    index,
     areFiltersSet,
-    hasAnySubRows,
-    headers,
-    state,
-    data,
     isResizable,
     columnResizeMode,
     enableColumnReordering,
     density,
-    visibleColumns,
+    columnHasExpanders,
+    isLast,
+    isTableEmpty,
     ...rest
   } = props;
   let isHeaderDirectClick = _react.useRef(false);
+  let instance = _react.useContext(_utils.TableInstanceContext);
   let COLUMN_MIN_WIDTHS = {
     default: 72,
     withExpander: 108,
   };
   let showFilterButton = (column) =>
-    (0 !== data.length || areFiltersSet) && column.canFilter && !!column.Filter;
-  let showSortButton = (column) => 0 !== data.length && column.canSort;
+    (!isTableEmpty || areFiltersSet) && column.canFilter && !!column.Filter;
+  let showSortButton = (column) => !isTableEmpty && column.canSort;
   let { onClick, ...restSortProps } = column.getSortByToggleProps();
-  let columnHasExpanders =
-    hasAnySubRows &&
-    index === headers.findIndex((c) => c.id !== _index1.SELECTION_CELL_ID);
   if ([void 0, 0].includes(column.minWidth)) {
     column.minWidth = columnHasExpanders
       ? COLUMN_MIN_WIDTHS.withExpander
@@ -64,12 +57,12 @@ const ColumnHeader = (props) => {
       column.columnClassName,
     ),
     style: {
-      ...(0, _utils.getCellStyle)(column, !!state.isTableResizing),
+      ...(0, _utils.getCellStyle)(column, !!instance?.state.isTableResizing),
       ...(columnHasExpanders &&
         (0, _utils.getSubRowStyle)({
           density,
         })),
-      ...(0, _utils.getStickyStyle)(column, visibleColumns),
+      ...(0, _utils.getStickyStyle)(column, instance?.visibleColumns ?? []),
       flexWrap: 'wrap',
       columnGap: 'var(--iui-size-xs)',
     },
@@ -81,14 +74,14 @@ const ColumnHeader = (props) => {
       ...rest,
       key: columnProps.key,
       title: void 0,
-      ref: _react.useCallback(
-        (el) => {
-          if (el) {
-            columnRefs.current[column.id] = el;
-            column.resizeWidth = el.getBoundingClientRect().width;
-          }
-        },
-        [column, columnRefs],
+      ref: (0, _index.useMergedRefs)(
+        _react.useCallback(
+          (el) => {
+            if (el) column.resizeWidth = el.getBoundingClientRect().width;
+          },
+          [column],
+        ),
+        forwardedRef,
       ),
       onMouseDown: () => {
         isHeaderDirectClick.current = true;
@@ -159,7 +152,7 @@ const ColumnHeader = (props) => {
         ),
       isResizable &&
         column.isResizerVisible &&
-        (index !== headers.length - 1 || 'expand' === columnResizeMode) &&
+        (!isLast || 'expand' === columnResizeMode) &&
         _react.createElement(
           _index.Box,
           {
@@ -178,17 +171,17 @@ const ColumnHeader = (props) => {
           slot: 'resizers',
         }),
       'left' === column.sticky &&
-        state.sticky.isScrolledToRight &&
+        instance?.state.sticky.isScrolledToRight &&
         _react.createElement(_index.Box, {
           className: 'iui-table-cell-shadow-right',
           slot: 'shadows',
         }),
       'right' === column.sticky &&
-        state.sticky.isScrolledToLeft &&
+        instance?.state.sticky.isScrolledToLeft &&
         _react.createElement(_index.Box, {
           className: 'iui-table-cell-shadow-left',
           slot: 'shadows',
         }),
     ),
   );
-};
+});

package/cjs/core/Table/Table.js

@@ -36,6 +36,7 @@ const singleRowSelectedAction = 'singleRowSelected';
 const shiftRowSelectedAction = 'shiftRowSelected';
 const tableResizeStartAction = 'tableResizeStart';
 const tableResizeEndAction = 'tableResizeEnd';
+const iuiId = Symbol('iui-id');
 const flattenColumns = (columns) => {
   let flatColumns = [];
   columns.forEach((column) => {
@@ -88,6 +89,7 @@ const Table = (props) => {
     headerProps,
     bodyProps,
     emptyTableContentProps,
+    getRowId,
     ...rest
   } = props;
   (0, _index.useGlobals)();
@@ -225,16 +227,30 @@ const Table = (props) => {
       ),
     [data, getSubRows],
   );
-  let [rowHasParent] = _react.useState(() => new WeakSet());
   let getSubRowsWithSubComponents = _react.useCallback(
-    (originalRow) => {
-      if (!rowHasParent.has(originalRow)) {
-        rowHasParent.add(originalRow);
-        return [originalRow];
-      }
-      return originalRow.subRows || [];
+    (originalRow, relativeIndex) => {
+      if (originalRow[iuiId]) return [];
+      if (originalRow.subRows) return originalRow.subRows;
+      return [
+        {
+          [iuiId]: `subcomponent-${relativeIndex}`,
+          ...originalRow,
+        },
+      ];
     },
-    [rowHasParent],
+    [],
+  );
+  let getRowIdWithSubComponents = _react.useCallback(
+    (originalRow, relativeIndex, parent) => {
+      let defaultRowId = parent
+        ? `${parent.id}.${relativeIndex}`
+        : `${relativeIndex}`;
+      let rowIdFromUser = getRowId?.(originalRow, relativeIndex, parent);
+      if (void 0 !== rowIdFromUser && originalRow[iuiId])
+        return `${rowIdFromUser}-${defaultRowId}`;
+      return rowIdFromUser ?? defaultRowId;
+    },
+    [getRowId],
   );
   let instance = (0, _reacttable.useTable)(
     {
@@ -254,6 +270,7 @@ const Table = (props) => {
         ...props.initialState,
       },
       columnResizeMode,
+      getRowId: subComponent ? getRowIdWithSubComponents : getRowId,
     },
     _reacttable.useFlexLayout,
     (0, _index1.useResizeColumns)(ownerDocument),
@@ -289,7 +306,6 @@ const Table = (props) => {
     gotoPage,
     setPageSize,
     flatHeaders,
-    visibleColumns,
     setGlobalFilter,
   } = instance;
   let headerGroups = _headerGroups;
@@ -452,51 +468,52 @@ const Table = (props) => {
     (index, virtualItem, virtualizer) => {
       let row = page[index];
       prepareRow(row);
-      if (row.subRows.length > 0 || !subComponent)
-        return _react.createElement(_TableRowMemoized.TableRowMemoized, {
-          row: row,
-          rowProps: rowProps,
-          isLast: index === page.length - 1,
-          onRowInViewport: onRowInViewportRef,
-          onBottomReached: onBottomReachedRef,
-          intersectionMargin: intersectionMargin,
-          state: state,
-          key: row.getRowProps().key,
-          onClick: onRowClickHandler,
-          subComponent: subComponent,
-          isDisabled: !!isRowDisabled?.(row.original),
-          tableHasSubRows: hasAnySubRows,
-          tableInstance: instance,
-          expanderCell: expanderCell,
-          scrollContainerRef: tableRef.current,
-          tableRowRef: enableVirtualization ? void 0 : tableRowRef(row),
-          density: density,
-          virtualItem: virtualItem,
-          virtualizer: virtualizer,
-        });
-      return _react.createElement(
-        _TableExpandableContentMemoized.TableExpandableContentMemoized,
-        {
-          key: row.getRowProps().key,
-          virtualItem: virtualItem,
-          ref: enableVirtualization
-            ? virtualizer?.measureElement
-            : tableRowRef(row),
-          isDisabled: !!isRowDisabled?.(row.original),
-        },
-        subComponent(row),
-      );
+      let isRowASubComponent = !!row.original[iuiId] && !!subComponent;
+      if (isRowASubComponent)
+        return _react.createElement(
+          _TableExpandableContentMemoized.TableExpandableContentMemoized,
+          {
+            key: row.getRowProps().key,
+            virtualItem: virtualItem,
+            ref: enableVirtualization
+              ? virtualizer?.measureElement
+              : tableRowRef(row),
+            isDisabled: !!isRowDisabled?.(row.original),
+          },
+          subComponent(row),
+        );
+      return _react.createElement(_TableRowMemoized.TableRowMemoized, {
+        row: row,
+        rowProps: rowProps,
+        isLast: index === page.length - 1,
+        onRowInViewport: onRowInViewportRef,
+        onBottomReached: onBottomReachedRef,
+        intersectionMargin: intersectionMargin,
+        state: state,
+        key: row.getRowProps().key,
+        onClick: onRowClickHandler,
+        subComponent: subComponent,
+        isDisabled: !!isRowDisabled?.(row.original),
+        tableHasSubRows: hasAnySubRows,
+        tableInstance: instance,
+        expanderCell: expanderCell,
+        scrollContainerRef: tableRef.current,
+        tableRowRef: enableVirtualization ? void 0 : tableRowRef(row),
+        density: density,
+        virtualItem: virtualItem,
+        virtualizer: virtualizer,
+      });
     },
     [
       page,
       prepareRow,
+      subComponent,
       rowProps,
       onRowInViewportRef,
       onBottomReachedRef,
       intersectionMargin,
       state,
       onRowClickHandler,
-      subComponent,
       isRowDisabled,
       hasAnySubRows,
       instance,
@@ -533,9 +550,9 @@ const Table = (props) => {
     updateStickyState();
   }, []);
   return _react.createElement(
-    _utils.TableColumnsContext.Provider,
+    _utils.TableInstanceContext.Provider,
     {
-      value: instance.columns,
+      value: instance,
     },
     _react.createElement(
       _index.Box,
@@ -597,19 +614,23 @@ const Table = (props) => {
                 return _react.createElement(_ColumnHeader.ColumnHeader, {
                   ...dragAndDropProps,
                   key: dragAndDropProps.key || column.id || index,
-                  columnRefs: columnRefs,
                   column: column,
-                  index: index,
                   areFiltersSet: areFiltersSet,
-                  hasAnySubRows: hasAnySubRows,
-                  headers: headerGroup.headers,
-                  state: state,
-                  data: data,
+                  columnHasExpanders:
+                    hasAnySubRows &&
+                    index ===
+                      headerGroup.headers.findIndex(
+                        (c) => c.id !== _index3.SELECTION_CELL_ID,
+                      ),
+                  isLast: index === headerGroup.headers.length - 1,
+                  isTableEmpty: 0 === data.length,
                   isResizable: isResizable,
                   columnResizeMode: columnResizeMode,
                   enableColumnReordering: enableColumnReordering,
                   density: density,
-                  visibleColumns: visibleColumns,
+                  ref: (el) => {
+                    if (el) columnRefs.current[column.id] = el;
+                  },
                 });
               }),
             ),

package/cjs/core/Table/TablePaginator.js

@@ -18,6 +18,7 @@ const _DropdownButton = require('../Buttons/DropdownButton.js');
 const _ProgressRadial = require('../ProgressIndicators/ProgressRadial.js');
 const _MenuItem = require('../Menu/MenuItem.js');
 const _index = require('../../utils/index.js');
+const _styles = require('../../styles.js');
 const defaultLocalization = {
   pageSizeLabel: (size) => `${size} per page`,
   rangeLabel: (startIndex, endIndex, totalRows, isLoading) =>
@@ -59,7 +60,7 @@ const TablePaginator = (props) => {
   );
   let pageListRef = _react.useRef(null);
   let [focusedIndex, setFocusedIndex] = _react.useState(currentPage);
-  _react.useEffect(() => {
+  _react.useLayoutEffect(() => {
     setFocusedIndex(currentPage);
   }, [currentPage]);
   let needFocus = _react.useRef(false);
@@ -68,7 +69,7 @@ const TablePaginator = (props) => {
     if (isMounted.current && needFocus.current) {
       let buttonToFocus = Array.from(
         pageListRef.current?.querySelectorAll(
-          '.iui-table-paginator-page-button',
+          `.${_styles.styles['iui-table-paginator-page-button']}`,
         ) ?? [],
       ).find((el) => el.textContent?.trim() === (focusedIndex + 1).toString());
       buttonToFocus?.focus();
@@ -77,35 +78,7 @@ const TablePaginator = (props) => {
     isMounted.current = true;
   }, [focusedIndex]);
   let buttonSize = 'default' != size ? 'small' : void 0;
-  let pageButton = _react.useCallback(
-    (index, tabIndex = index === focusedIndex ? 0 : -1) =>
-      _react.createElement(
-        _Button.Button,
-        {
-          key: index,
-          className: 'iui-table-paginator-page-button',
-          styleType: 'borderless',
-          size: buttonSize,
-          'data-iui-active': index === currentPage,
-          onClick: () => onPageChange(index),
-          'aria-current': index === currentPage,
-          'aria-label': localization.goToPageLabel(index + 1),
-          tabIndex: tabIndex,
-        },
-        index + 1,
-      ),
-    [focusedIndex, currentPage, localization, buttonSize, onPageChange],
-  );
   let totalPagesCount = Math.ceil(totalRowsCount / pageSize);
-  let pageList = _react.useMemo(
-    () =>
-      new Array(totalPagesCount)
-        .fill(null)
-        .map((_, index) => pageButton(index)),
-    [pageButton, totalPagesCount],
-  );
-  let [overflowRef, visibleCount] = (0, _index.useOverflow)(pageList);
-  let [paginatorResizeRef, paginatorWidth] = (0, _index.useContainerWidth)();
   let onKeyDown = (event) => {
     if (event.altKey) return;
     let focusPage = (delta) => {
@@ -136,30 +109,10 @@ const TablePaginator = (props) => {
         break;
     }
   };
-  let halfVisibleCount = Math.floor(visibleCount / 2);
-  let startPage = focusedIndex - halfVisibleCount;
-  let endPage = focusedIndex + halfVisibleCount + 1;
-  if (startPage < 0) {
-    endPage = Math.min(totalPagesCount, endPage + Math.abs(startPage));
-    startPage = 0;
-  }
-  if (endPage > totalPagesCount) {
-    startPage = Math.max(0, startPage - (endPage - totalPagesCount));
-    endPage = totalPagesCount;
-  }
-  let hasNoRows = 0 === totalPagesCount;
+  let [paginatorResizeRef, paginatorWidth] = (0, _index.useContainerWidth)();
   let showPagesList = totalPagesCount > 1 || isLoading;
   let showPageSizeList = pageSizeList && !!onPageSizeChange && !!totalRowsCount;
-  let ellipsis = _react.createElement(
-    _index.Box,
-    {
-      as: 'span',
-      className: (0, _classnames.default)('iui-table-paginator-ellipsis', {
-        'iui-table-paginator-ellipsis-small': 'small' === size,
-      }),
-    },
-    '…',
-  );
+  let hasNoRows = 0 === totalPagesCount;
   let noRowsContent = _react.createElement(
     _react.Fragment,
     null,
@@ -200,10 +153,10 @@ const TablePaginator = (props) => {
     ),
     showPagesList &&
       _react.createElement(
-        _index.Box,
+        _index.OverflowContainer,
         {
           className: 'iui-center',
-          ref: overflowRef,
+          itemsCount: totalPagesCount,
         },
         _react.createElement(
           _IconButton.IconButton,
@@ -224,40 +177,17 @@ const TablePaginator = (props) => {
             onKeyDown: onKeyDown,
             ref: pageListRef,
           },
-          (() => {
-            if (hasNoRows) return noRowsContent;
-            if (1 === visibleCount) return pageButton(focusedIndex);
-            return _react.createElement(
-              _react.Fragment,
-              null,
-              0 !== startPage &&
-                _react.createElement(
-                  _react.Fragment,
-                  null,
-                  pageButton(0, 0),
-                  ellipsis,
-                ),
-              pageList.slice(startPage, endPage),
-              endPage !== totalPagesCount &&
-                !isLoading &&
-                _react.createElement(
-                  _react.Fragment,
-                  null,
-                  ellipsis,
-                  pageButton(totalPagesCount - 1, 0),
-                ),
-              isLoading &&
-                _react.createElement(
-                  _react.Fragment,
-                  null,
-                  ellipsis,
-                  _react.createElement(_ProgressRadial.ProgressRadial, {
-                    indeterminate: true,
-                    size: 'small',
-                  }),
-                ),
-            );
-          })(),
+          hasNoRows
+            ? noRowsContent
+            : _react.createElement(TablePaginatorPageButtons, {
+                size: size,
+                focusedIndex: focusedIndex,
+                totalPagesCount: totalPagesCount,
+                onPageChange: onPageChange,
+                currentPage: currentPage,
+                localization: localization,
+                isLoading: isLoading,
+              }),
         ),
         _react.createElement(
           _IconButton.IconButton,
@@ -322,3 +252,96 @@ const TablePaginator = (props) => {
     ),
   );
 };
+const TablePaginatorPageButtons = (props) => {
+  let {
+    focusedIndex,
+    totalPagesCount,
+    onPageChange,
+    currentPage,
+    localization,
+    isLoading,
+    size,
+  } = props;
+  let { visibleCount } = _index.OverflowContainer.useContext();
+  let buttonSize = 'default' != size ? 'small' : void 0;
+  let pageButton = _react.useCallback(
+    (index, tabIndex = index === focusedIndex ? 0 : -1) =>
+      _react.createElement(
+        _Button.Button,
+        {
+          key: index,
+          className: 'iui-table-paginator-page-button',
+          styleType: 'borderless',
+          size: buttonSize,
+          'data-iui-active': index === currentPage,
+          onClick: () => onPageChange(index),
+          'aria-current': index === currentPage,
+          'aria-label': localization.goToPageLabel?.(index + 1),
+          tabIndex: tabIndex,
+        },
+        index + 1,
+      ),
+    [focusedIndex, currentPage, localization, buttonSize, onPageChange],
+  );
+  let pageList = _react.useMemo(
+    () =>
+      new Array(totalPagesCount)
+        .fill(null)
+        .map((_, index) => pageButton(index)),
+    [pageButton, totalPagesCount],
+  );
+  let halfVisibleCount = Math.floor(visibleCount / 2);
+  let startPage = focusedIndex - halfVisibleCount;
+  let endPage = focusedIndex + halfVisibleCount + 1;
+  if (startPage < 0) {
+    endPage = Math.min(totalPagesCount, endPage + Math.abs(startPage));
+    startPage = 0;
+  }
+  if (endPage > totalPagesCount) {
+    startPage = Math.max(0, startPage - (endPage - totalPagesCount));
+    endPage = totalPagesCount;
+  }
+  let ellipsis = _react.createElement(
+    _index.Box,
+    {
+      as: 'span',
+      className: (0, _classnames.default)('iui-table-paginator-ellipsis', {
+        'iui-table-paginator-ellipsis-small': 'small' === size,
+      }),
+    },
+    '…',
+  );
+  if (1 === visibleCount) return pageButton(focusedIndex);
+  let showStartEllipsis = startPage > 1;
+  let showEndEllipsis = endPage < totalPagesCount - 1;
+  return _react.createElement(
+    _react.Fragment,
+    null,
+    0 !== startPage &&
+      _react.createElement(
+        _react.Fragment,
+        null,
+        pageButton(0, 0),
+        showStartEllipsis ? ellipsis : null,
+      ),
+    pageList.slice(startPage, endPage),
+    endPage !== totalPagesCount &&
+      !isLoading &&
+      _react.createElement(
+        _react.Fragment,
+        null,
+        showEndEllipsis ? ellipsis : null,
+        pageButton(totalPagesCount - 1, 0),
+      ),
+    isLoading &&
+      _react.createElement(
+        _react.Fragment,
+        null,
+        ellipsis,
+        _react.createElement(_ProgressRadial.ProgressRadial, {
+          indeterminate: true,
+          size: 'small',
+        }),
+      ),
+  );
+};

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

@@ -16,12 +16,12 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../../utils/index.js');
 const _utils = require('../utils.js');
 const DefaultCell = (props) => {
-  let instanceColumns = _react.useContext(_utils.TableColumnsContext);
+  let instance = _react.useContext(_utils.TableInstanceContext);
   let isCustomCell = _react.useMemo(
     () =>
-      instanceColumns.find(({ id }) => props.cellProps.column.id === id)
+      instance?.columns.find(({ id }) => props.cellProps.column.id === id)
         ?.Cell !== _reacttable.defaultColumn.Cell,
-    [instanceColumns, props.cellProps.column.id],
+    [instance, props.cellProps.column.id],
   );
   let {
     cellElementProps: {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ColumnInstance } from '../../react-table/react-table.js';
+import type { ColumnInstance, TableInstance } from '../../react-table/react-table.js';
 export declare const getCellStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, isTableResizing: boolean) => React.CSSProperties | undefined;
 export declare const getStickyStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, columnList: ColumnInstance<T>[]) => React.CSSProperties;
 export declare const getSubRowStyle: ({ density, depth }: {
@@ -8,4 +8,4 @@ export declare const getSubRowStyle: ({ density, depth }: {
 }) => {
     paddingInlineStart: number;
 };
-export declare const TableColumnsContext: React.Context<ColumnInstance<{}>[]>;
+export declare const TableInstanceContext: React.Context<TableInstance<Record<string, unknown>> | undefined>;

package/cjs/core/Table/utils.js

@@ -10,8 +10,8 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-  TableColumnsContext: function () {
-    return TableColumnsContext;
+  TableInstanceContext: function () {
+    return TableInstanceContext;
   },
   getCellStyle: function () {
     return getCellStyle;
@@ -73,4 +73,4 @@ const getSubRowStyle = ({ density = 'default', depth = 1 }) => {
     paddingInlineStart: cellPadding + depth * multiplier,
   };
 };
-const TableColumnsContext = _react.createContext([]);
+const TableInstanceContext = _react.createContext(void 0);

package/cjs/styles.js

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

package/cjs/utils/components/MiddleTextTruncation.js

@@ -10,22 +10,14 @@ Object.defineProperty(exports, 'MiddleTextTruncation', {
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
-const _useOverflow = require('../hooks/useOverflow.js');
+const _OverflowContainer = require('./OverflowContainer.js');
 const ELLIPSIS_CHAR = '…';
 const MiddleTextTruncation = (props) => {
-  let { text, endCharsCount = 6, textRenderer, style, ...rest } = props;
-  let [ref, visibleCount] = (0, _useOverflow.useOverflow)(text);
-  let truncatedText = _react.useMemo(() => {
-    if (visibleCount < text.length)
-      return `${text.substring(
-        0,
-        visibleCount - endCharsCount - ELLIPSIS_CHAR.length,
-      )}${ELLIPSIS_CHAR}${text.substring(text.length - endCharsCount)}`;
-    return text;
-  }, [endCharsCount, text, visibleCount]);
+  let { text, style, ...rest } = props;
   return _react.createElement(
-    'span',
+    _OverflowContainer.OverflowContainer,
     {
+      as: 'span',
       style: {
         display: 'flex',
         minWidth: 0,
@@ -33,9 +25,22 @@ const MiddleTextTruncation = (props) => {
         whiteSpace: 'nowrap',
         ...style,
       },
-      ref: ref,
+      itemsCount: text.length,
       ...rest,
     },
-    textRenderer?.(truncatedText, text) ?? truncatedText,
+    _react.createElement(MiddleTextTruncationContent, props),
   );
 };
+const MiddleTextTruncationContent = (props) => {
+  let { text, endCharsCount = 6, textRenderer } = props;
+  let { visibleCount } = _OverflowContainer.OverflowContainer.useContext();
+  let truncatedText = _react.useMemo(() => {
+    if (visibleCount < text.length)
+      return `${text.substring(
+        0,
+        visibleCount - endCharsCount - ELLIPSIS_CHAR.length,
+      )}${ELLIPSIS_CHAR}${text.substring(text.length - endCharsCount)}`;
+    return text;
+  }, [endCharsCount, text, visibleCount]);
+  return textRenderer?.(truncatedText, text) ?? truncatedText;
+};