@itwin/itwinui-react 3.15.3 → 3.15.4

package/DEV-esm/core/Table/TablePaginator.js

@@ -8,12 +8,13 @@ import { MenuItem } from '../Menu/MenuItem.js';
 import {
   getBoundedValue,
   useGlobals,
-  useOverflow,
   useContainerWidth,
   SvgChevronLeft,
   SvgChevronRight,
   Box,
+  OverflowContainer,
 } from '../../utils/index.js';
+import { styles } from '../../styles.js';
 let defaultLocalization = {
   pageSizeLabel: (size) => `${size} per page`,
   rangeLabel: (startIndex, endIndex, totalRows, isLoading) =>
@@ -55,7 +56,7 @@ export 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);
@@ -64,7 +65,7 @@ export const TablePaginator = (props) => {
     if (isMounted.current && needFocus.current) {
       let buttonToFocus = Array.from(
         pageListRef.current?.querySelectorAll(
-          '.iui-table-paginator-page-button',
+          `.${styles['iui-table-paginator-page-button']}`,
         ) ?? [],
       ).find((el) => el.textContent?.trim() === (focusedIndex + 1).toString());
       buttonToFocus?.focus();
@@ -73,35 +74,7 @@ export 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,
-        {
-          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] = useOverflow(pageList);
-  let [paginatorResizeRef, paginatorWidth] = useContainerWidth();
   let onKeyDown = (event) => {
     if (event.altKey) return;
     let focusPage = (delta) => {
@@ -132,30 +105,10 @@ export 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] = useContainerWidth();
   let showPagesList = totalPagesCount > 1 || isLoading;
   let showPageSizeList = pageSizeList && !!onPageSizeChange && !!totalRowsCount;
-  let ellipsis = React.createElement(
-    Box,
-    {
-      as: 'span',
-      className: cx('iui-table-paginator-ellipsis', {
-        'iui-table-paginator-ellipsis-small': 'small' === size,
-      }),
-    },
-    '…',
-  );
+  let hasNoRows = 0 === totalPagesCount;
   let noRowsContent = React.createElement(
     React.Fragment,
     null,
@@ -196,10 +149,10 @@ export const TablePaginator = (props) => {
     ),
     showPagesList &&
       React.createElement(
-        Box,
+        OverflowContainer,
         {
           className: 'iui-center',
-          ref: overflowRef,
+          itemsCount: totalPagesCount,
         },
         React.createElement(
           IconButton,
@@ -220,40 +173,17 @@ export 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, {
-                    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,
@@ -318,3 +248,96 @@ export const TablePaginator = (props) => {
     ),
   );
 };
+let TablePaginatorPageButtons = (props) => {
+  let {
+    focusedIndex,
+    totalPagesCount,
+    onPageChange,
+    currentPage,
+    localization,
+    isLoading,
+    size,
+  } = props;
+  let { visibleCount } = OverflowContainer.useContext();
+  let buttonSize = 'default' != size ? 'small' : void 0;
+  let pageButton = React.useCallback(
+    (index, tabIndex = index === focusedIndex ? 0 : -1) =>
+      React.createElement(
+        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(
+    Box,
+    {
+      as: 'span',
+      className: cx('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, {
+          indeterminate: true,
+          size: 'small',
+        }),
+      ),
+  );
+};

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

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { defaultColumn } from 'react-table';
 import cx from 'classnames';
 import { Box, LineClamp, ShadowRoot } from '../../../utils/index.js';
-import { TableColumnsContext } from '../utils.js';
+import { TableInstanceContext } from '../utils.js';
 export const DefaultCell = (props) => {
-  let instanceColumns = React.useContext(TableColumnsContext);
+  let instance = React.useContext(TableInstanceContext);
   let isCustomCell = React.useMemo(
     () =>
-      instanceColumns.find(({ id }) => props.cellProps.column.id === id)
+      instance?.columns.find(({ id }) => props.cellProps.column.id === id)
         ?.Cell !== defaultColumn.Cell,
-    [instanceColumns, props.cellProps.column.id],
+    [instance, props.cellProps.column.id],
   );
   let {
     cellElementProps: {

package/DEV-esm/core/Table/utils.js

@@ -47,4 +47,4 @@ export const getSubRowStyle = ({ density = 'default', depth = 1 }) => {
     paddingInlineStart: cellPadding + depth * multiplier,
   };
 };
-export const TableColumnsContext = React.createContext([]);
+export const TableInstanceContext = React.createContext(void 0);

package/DEV-esm/styles.js

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

package/DEV-esm/utils/components/MiddleTextTruncation.js

@@ -1,20 +1,12 @@
 import * as React from 'react';
-import { useOverflow } from '../hooks/useOverflow.js';
+import { OverflowContainer } from './OverflowContainer.js';
 let ELLIPSIS_CHAR = '…';
 export const MiddleTextTruncation = (props) => {
-  let { text, endCharsCount = 6, textRenderer, style, ...rest } = props;
-  let [ref, visibleCount] = 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,
     {
+      as: 'span',
       style: {
         display: 'flex',
         minWidth: 0,
@@ -22,10 +14,23 @@ export const MiddleTextTruncation = (props) => {
         whiteSpace: 'nowrap',
         ...style,
       },
-      ref: ref,
+      itemsCount: text.length,
       ...rest,
     },
-    textRenderer?.(truncatedText, text) ?? truncatedText,
+    React.createElement(MiddleTextTruncationContent, props),
   );
 };
 MiddleTextTruncation.displayName = 'MiddleTextTruncation';
+let MiddleTextTruncationContent = (props) => {
+  let { text, endCharsCount = 6, textRenderer } = props;
+  let { visibleCount } = 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;
+};

package/DEV-esm/utils/components/OverflowContainer.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useMergedRefs } from '../hooks/useMergedRefs.js';
+import { Box } from './Box.js';
+import { useOverflow } from '../hooks/useOverflow.js';
+import { useSafeContext } from '../hooks/useSafeContext.js';
+let OverflowContainerComponent = React.forwardRef((props, ref) => {
+  let { itemsCount, children, overflowOrientation, ...rest } = props;
+  let [containerRef, visibleCount] = useOverflow(
+    itemsCount,
+    false,
+    overflowOrientation,
+  );
+  let overflowContainerContextValue = React.useMemo(
+    () => ({
+      visibleCount,
+      itemsCount,
+    }),
+    [itemsCount, visibleCount],
+  );
+  return React.createElement(
+    OverflowContainerContext.Provider,
+    {
+      value: overflowContainerContextValue,
+    },
+    React.createElement(
+      Box,
+      {
+        ref: useMergedRefs(ref, containerRef),
+        ...rest,
+      },
+      children,
+    ),
+  );
+});
+let OverflowContainerOverflowNode = (props) => {
+  let { children } = props;
+  let { visibleCount, itemsCount } = useOverflowContainerContext();
+  let isOverflowing = visibleCount < itemsCount;
+  return isOverflowing ? children : null;
+};
+export const OverflowContainer = Object.assign(OverflowContainerComponent, {
+  OverflowNode: OverflowContainerOverflowNode,
+  useContext: useOverflowContainerContext,
+});
+let OverflowContainerContext = React.createContext(void 0);
+OverflowContainerContext.displayName = 'OverflowContainerContext';
+function useOverflowContainerContext() {
+  let overflowContainerContext = useSafeContext(OverflowContainerContext);
+  return overflowContainerContext;
+}

package/DEV-esm/utils/components/index.js

@@ -12,3 +12,4 @@ export * from './Portal.js';
 export * from './ShadowRoot.js';
 export * from './LineClamp.js';
 export * from './FieldsetBase.js';
+export * from './OverflowContainer.js';

package/DEV-esm/utils/hooks/useOverflow.js

@@ -4,13 +4,13 @@ import { useResizeObserver } from './useResizeObserver.js';
 import { useLayoutEffect } from './useIsomorphicLayoutEffect.js';
 let STARTING_MAX_ITEMS_COUNT = 20;
 export const useOverflow = (
-  items,
+  itemsCount,
   disabled = false,
   orientation = 'horizontal',
 ) => {
   let containerRef = React.useRef(null);
   let [visibleCount, setVisibleCount] = React.useState(() =>
-    disabled ? items.length : Math.min(items.length, STARTING_MAX_ITEMS_COUNT),
+    disabled ? itemsCount : Math.min(itemsCount, STARTING_MAX_ITEMS_COUNT),
   );
   let needsFullRerender = React.useRef(true);
   let [containerSize, setContainerSize] = React.useState(0);
@@ -23,12 +23,12 @@ export const useOverflow = (
   let [resizeRef, observer] = useResizeObserver(updateContainerSize);
   let resizeObserverRef = React.useRef(observer);
   useLayoutEffect(() => {
-    if (disabled) setVisibleCount(items.length);
+    if (disabled) setVisibleCount(itemsCount);
     else {
-      setVisibleCount(Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
+      setVisibleCount(Math.min(itemsCount, STARTING_MAX_ITEMS_COUNT));
       needsFullRerender.current = true;
     }
-  }, [containerSize, disabled, items]);
+  }, [containerSize, disabled, itemsCount]);
   let mergedRefs = useMergedRefs(containerRef, resizeRef);
   useLayoutEffect(() => {
     if (!containerRef.current || disabled) {
@@ -48,14 +48,14 @@ export const useOverflow = (
         0,
       );
       let currentVisibleCount =
-        visibleCount || Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
+        visibleCount || Math.min(itemsCount, STARTING_MAX_ITEMS_COUNT);
       let avgItemSize = childrenSize / currentVisibleCount;
       let visibleItems = Math.floor(availableSize / avgItemSize);
       if (!isNaN(visibleItems))
-        setVisibleCount(Math.min(items.length, 2 * visibleItems));
+        setVisibleCount(Math.min(itemsCount, 2 * visibleItems));
     }
     needsFullRerender.current = false;
-  }, [containerSize, visibleCount, disabled, items.length, orientation]);
+  }, [containerSize, visibleCount, disabled, itemsCount, orientation]);
   useLayoutEffect(() => {
     previousContainerSize.current = containerSize;
   }, [containerSize]);

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -17,94 +17,114 @@ const _Button = require('../Buttons/Button.js');
 const _Anchor = require('../Typography/Anchor.js');
 const BreadcrumbsComponent = _react.forwardRef((props, ref) => {
   let {
-    children: items,
-    currentIndex = items.length - 1,
+    children: childrenProp,
+    currentIndex = _react.Children.count(childrenProp) - 1,
     separator,
     overflowButton,
     className,
     ...rest
   } = props;
-  let [overflowRef, visibleCount] = (0, _index.useOverflow)(items);
-  let refs = (0, _index.useMergedRefs)(overflowRef, ref);
+  let items = _react.useMemo(
+    () => _react.Children.toArray(childrenProp),
+    [childrenProp],
+  );
   return _react.createElement(
     _index.Box,
     {
       as: 'nav',
       className: (0, _classnames.default)('iui-breadcrumbs', className),
-      ref: refs,
+      ref: ref,
       'aria-label': 'Breadcrumb',
       ...rest,
     },
     _react.createElement(
-      _index.Box,
+      _index.OverflowContainer,
       {
         as: 'ol',
+        itemsCount: items.length,
         className: 'iui-breadcrumbs-list',
       },
-      visibleCount > 1 &&
+      _react.createElement(
+        BreadcrumbContent,
+        {
+          currentIndex: currentIndex,
+          overflowButton: overflowButton,
+          separator: separator,
+        },
+        items,
+      ),
+    ),
+  );
+});
+const BreadcrumbContent = (props) => {
+  let { children: items, currentIndex, overflowButton, separator } = props;
+  let { visibleCount } = _index.OverflowContainer.useContext();
+  return _react.createElement(
+    _react.Fragment,
+    null,
+    visibleCount > 1 &&
+      _react.createElement(
+        _react.Fragment,
+        null,
+        _react.createElement(ListItem, {
+          item: items[0],
+          isActive: 0 === currentIndex,
+        }),
+        _react.createElement(Separator, {
+          separator: separator,
+        }),
+      ),
+    items.length - visibleCount > 0 &&
+      _react.createElement(
+        _react.Fragment,
+        null,
         _react.createElement(
-          _react.Fragment,
-          null,
-          _react.createElement(ListItem, {
-            item: items[0],
-            isActive: 0 === currentIndex,
-          }),
-          _react.createElement(Separator, {
-            separator: separator,
-          }),
+          _index.Box,
+          {
+            as: 'li',
+            className: 'iui-breadcrumbs-item',
+          },
+          overflowButton
+            ? overflowButton(visibleCount)
+            : _react.createElement(
+                _index.Box,
+                {
+                  as: 'span',
+                  className: 'iui-breadcrumbs-content',
+                },
+                '…',
+              ),
         ),
-      items.length - visibleCount > 0 &&
-        _react.createElement(
+        _react.createElement(Separator, {
+          separator: separator,
+        }),
+      ),
+    items
+      .slice(
+        visibleCount > 1 ? items.length - visibleCount + 1 : items.length - 1,
+      )
+      .map((_, _index) => {
+        let index =
+          visibleCount > 1
+            ? 1 + (items.length - visibleCount) + _index
+            : items.length - 1;
+        return _react.createElement(
           _react.Fragment,
-          null,
-          _react.createElement(
-            _index.Box,
-            {
-              as: 'li',
-              className: 'iui-breadcrumbs-item',
-            },
-            overflowButton
-              ? overflowButton(visibleCount)
-              : _react.createElement(
-                  _index.Box,
-                  {
-                    as: 'span',
-                    className: 'iui-breadcrumbs-content',
-                  },
-                  '…',
-                ),
-          ),
-          _react.createElement(Separator, {
-            separator: separator,
+          {
+            key: index,
+          },
+          _react.createElement(ListItem, {
+            item: items[index],
+            isActive: currentIndex === index,
           }),
-        ),
-      items
-        .slice(
-          visibleCount > 1 ? items.length - visibleCount + 1 : items.length - 1,
-        )
-        .map((_, _index) => {
-          let index =
-            visibleCount > 1
-              ? 1 + (items.length - visibleCount) + _index
-              : items.length - 1;
-          return _react.createElement(
-            _react.Fragment,
-            {
-              key: index,
-            },
-            _react.createElement(ListItem, {
-              item: items[index],
-              isActive: currentIndex === index,
+          index < items.length - 1 &&
+            _react.createElement(Separator, {
+              separator: separator,
             }),
-            index < items.length - 1 &&
-              _react.createElement(Separator, {
-                separator: separator,
-              }),
-          );
-        }),
-    ),
+        );
+      }),
   );
-});
+};
 const ListItem = ({ item, isActive }) => {
   let children = item;
   let logWarning = (0, _index.useWarningLogger)();