@itwin/itwinui-react 3.15.5 → 3.16.0

package/esm/core/Stepper/Stepper.js

@@ -53,6 +53,7 @@ export const Stepper = React.forwardRef((props, ref) => {
           type: type,
           onClick: onStepClick,
           description: s.description,
+          stepContent: s.stepContent,
         });
       }),
     ),

package/esm/core/Stepper/StepperStep.d.ts

@@ -29,6 +29,10 @@ export type StepperStepProps = {
      * A tooltip giving detailed description to this step.
      */
     description?: string;
+    /**
+     * Custom content displayed in the step's circle.
+     */
+    stepContent?: () => React.ReactNode;
     /**
      * Allows props to be passed for stepper step.
      */

package/esm/core/Stepper/StepperStep.js

@@ -17,6 +17,7 @@ export const StepperStep = React.forwardRef((props, forwardedRef) => {
     trackContentProps,
     circleProps,
     nameProps,
+    stepContent,
     ...rest
   } = props;
   let isPast = currentStepNumber > index;
@@ -74,7 +75,7 @@ export const StepperStep = React.forwardRef((props, forwardedRef) => {
           ...circleProps,
           className: cx('iui-stepper-circle', circleProps?.className),
         },
-        index + 1,
+        stepContent ? stepContent() : index + 1,
       ),
     ),
     'default' === type &&

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

@@ -3,6 +3,7 @@ import type { CellProps, TableOptions, Row, TableState } from '../../react-table
 import type { CommonProps } from '../../utils/index.js';
 import type { TableFilterValue } from './filters/index.js';
 export declare const tableResizeStartAction = "tableResizeStart";
+export declare const iuiId: unique symbol;
 export type TablePaginatorRendererProps = {
     /**
      * The zero-based index of the current page.

package/esm/core/Table/Table.js

@@ -53,7 +53,7 @@ let singleRowSelectedAction = 'singleRowSelected';
 let shiftRowSelectedAction = 'shiftRowSelected';
 export const tableResizeStartAction = 'tableResizeStart';
 let tableResizeEndAction = 'tableResizeEnd';
-let iuiId = Symbol('iui-id');
+export const iuiId = Symbol('iui-id');
 let flattenColumns = (columns) => {
   let flatColumns = [];
   columns.forEach((column) => {
@@ -657,11 +657,7 @@ export const Table = (props) => {
               },
               bodyProps?.className,
             ),
-            style: {
-              outline: 0,
-            },
           }),
-          tabIndex: -1,
           'aria-multiselectable':
             (isSelectable && 'multi' === selectionMode) || void 0,
         },

package/esm/core/Table/TablePaginator.js

@@ -13,6 +13,7 @@ import {
   SvgChevronRight,
   Box,
   OverflowContainer,
+  useLayoutEffect,
 } from '../../utils/index.js';
 import { styles } from '../../styles.js';
 let defaultLocalization = {
@@ -56,7 +57,7 @@ export const TablePaginator = (props) => {
   );
   let pageListRef = React.useRef(null);
   let [focusedIndex, setFocusedIndex] = React.useState(currentPage);
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     setFocusedIndex(currentPage);
   }, [currentPage]);
   let needFocus = React.useRef(false);
@@ -178,6 +179,7 @@ export const TablePaginator = (props) => {
             : React.createElement(TablePaginatorPageButtons, {
                 size: size,
                 focusedIndex: focusedIndex,
+                setFocusedIndex: setFocusedIndex,
                 totalPagesCount: totalPagesCount,
                 onPageChange: onPageChange,
                 currentPage: currentPage,
@@ -251,6 +253,7 @@ export const TablePaginator = (props) => {
 let TablePaginatorPageButtons = (props) => {
   let {
     focusedIndex,
+    setFocusedIndex,
     totalPagesCount,
     onPageChange,
     currentPage,
@@ -270,14 +273,24 @@ let TablePaginatorPageButtons = (props) => {
           styleType: 'borderless',
           size: buttonSize,
           'data-iui-active': index === currentPage,
-          onClick: () => onPageChange(index),
+          onClick: () => {
+            setFocusedIndex(index);
+            onPageChange(index);
+          },
           'aria-current': index === currentPage,
           'aria-label': localization.goToPageLabel?.(index + 1),
           tabIndex: tabIndex,
         },
         index + 1,
       ),
-    [focusedIndex, currentPage, localization, buttonSize, onPageChange],
+    [
+      focusedIndex,
+      buttonSize,
+      currentPage,
+      localization,
+      setFocusedIndex,
+      onPageChange,
+    ],
   );
   let pageList = React.useMemo(
     () =>

package/esm/core/Table/actionHandlers/selectHandler.js

@@ -1,3 +1,4 @@
+import { iuiId } from '../Table.js';
 let onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
   if (!instance?.rows.length) {
     onSelect?.([], newState);
@@ -7,14 +8,16 @@ let onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
   let handleRow = (row) => {
     if (isRowDisabled?.(row.original)) return false;
     let isAllSubSelected = true;
-    row.initialSubRows.forEach((subRow) => {
-      let result = handleRow(subRow);
-      if (!result) isAllSubSelected = false;
-    });
+    if (row.initialSubRows[0]?.original[iuiId] === void 0)
+      row.initialSubRows.forEach((subRow) => {
+        let result = handleRow(subRow);
+        if (!result) isAllSubSelected = false;
+      });
     if (
-      (!instance.selectSubRows && newState.selectedRowIds[row.id]) ||
-      (!row.initialSubRows.length && newState.selectedRowIds[row.id]) ||
-      (row.initialSubRows.length && isAllSubSelected)
+      newState.selectedRowIds[row.id] &&
+      (!instance.selectSubRows ||
+        !row.initialSubRows.length ||
+        isAllSubSelected)
     )
       newSelectedRowIds[row.id] = true;
     return !!newSelectedRowIds[row.id];

package/esm/core/Table/columns/selectionColumn.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Checkbox } from '../../Checkbox/Checkbox.js';
 import { DefaultCell } from '../cells/index.js';
+import { iuiId } from '../Table.js';
 export const SELECTION_CELL_ID = 'iui-table-checkbox-selector';
 export const SelectionColumn = (props = {}) => {
   let { isDisabled, density } = props;
@@ -50,7 +51,11 @@ export const SelectionColumn = (props = {}) => {
         disabled: isDisabled?.(row.original),
         onClick: (e) => e.stopPropagation(),
         onChange: () => {
-          if (row.subRows.length > 0 && selectSubRows)
+          if (
+            row.subRows.length > 0 &&
+            selectSubRows &&
+            void 0 === row.initialSubRows[0].original[iuiId]
+          )
             row.toggleRowSelected(
               !row.subRows.every(
                 (subRow) => subRow.isSelected || isDisabled?.(subRow.original),

package/esm/core/Tree/Tree.js

@@ -164,6 +164,7 @@ export const Tree = (props) => {
           onKeyDown: handleKeyDown,
           ref: treeRef,
           className: className,
+          'data-iui-size': 'small' === size ? 'small' : void 0,
           style: style,
           ...rest,
         })

package/esm/index.d.ts

@@ -62,6 +62,7 @@ export { ModalContent } from './core/Modal/ModalContent.js';
 export { ModalButtonBar } from './core/Modal/ModalButtonBar.js';
 export { NotificationMarker } from './core/NotificationMarker/NotificationMarker.js';
 export { Overlay } from './core/Overlay/Overlay.js';
+export { Panels as unstable_Panels } from './core/Panels/Panels.js';
 export { ProgressLinear } from './core/ProgressIndicators/ProgressLinear.js';
 export { ProgressRadial } from './core/ProgressIndicators/ProgressRadial.js';
 export { Radio } from './core/Radio/Radio.js';

package/esm/index.js

@@ -64,6 +64,7 @@ export { ModalContent } from './core/Modal/ModalContent.js';
 export { ModalButtonBar } from './core/Modal/ModalButtonBar.js';
 export { NotificationMarker } from './core/NotificationMarker/NotificationMarker.js';
 export { Overlay } from './core/Overlay/Overlay.js';
+export { Panels as unstable_Panels } from './core/Panels/Panels.js';
 export { ProgressLinear } from './core/ProgressIndicators/ProgressLinear.js';
 export { ProgressRadial } from './core/ProgressIndicators/ProgressRadial.js';
 export { Radio } from './core/Radio/Radio.js';

package/esm/styles.js

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { CommonProps } from '../props.js';
-export type MiddleTextTruncationProps = {
+import type { PolymorphicForwardRefComponent } from '../props.js';
+type MiddleTextTruncationProps = {
     /**
      * Text to truncate.
      */
@@ -14,7 +14,7 @@ export type MiddleTextTruncationProps = {
      * 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.
@@ -31,7 +31,5 @@ export type MiddleTextTruncationProps = {
  *   )}
  * />
  */
-export declare const MiddleTextTruncation: {
-    (props: MiddleTextTruncationProps): React.JSX.Element;
-    displayName: string;
-};
+export declare const MiddleTextTruncation: PolymorphicForwardRefComponent<"span", MiddleTextTruncationProps>;
+export {};

package/esm/utils/components/MiddleTextTruncation.js

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { OverflowContainer } from './OverflowContainer.js';
+import { VisuallyHidden } from '../../core/VisuallyHidden/VisuallyHidden.js';
+import { ShadowRoot } from './ShadowRoot.js';
 let ELLIPSIS_CHAR = '…';
-export const MiddleTextTruncation = (props) => {
-  let { text, style, ...rest } = props;
+export const MiddleTextTruncation = React.forwardRef((props, forwardedRef) => {
+  let { text, endCharsCount, textRenderer, style, ...rest } = props;
   return React.createElement(
     OverflowContainer,
     {
@@ -16,10 +18,26 @@ export const MiddleTextTruncation = (props) => {
       },
       itemsCount: text.length,
       ...rest,
+      ref: forwardedRef,
     },
-    React.createElement(MiddleTextTruncationContent, props),
+    React.createElement(
+      ShadowRoot,
+      null,
+      React.createElement(VisuallyHidden, null, text),
+      React.createElement('slot', {
+        'aria-hidden': true,
+        style: {
+          pointerEvents: 'none',
+        },
+      }),
+    ),
+    React.createElement(MiddleTextTruncationContent, {
+      text: text,
+      endCharsCount: endCharsCount,
+      textRenderer: textRenderer,
+    }),
   );
-};
+});
 let MiddleTextTruncationContent = (props) => {
   let { text, endCharsCount = 6, textRenderer } = props;
   let { visibleCount } = OverflowContainer.useContext();

package/esm/utils/components/OverflowContainer.d.ts

@@ -15,6 +15,7 @@ type OverflowContainerOverflowNodeProps = {
     children: React.ReactNode;
 };
 /**
+ * @private
  * Wrapper over `useOverflow`.
  *
  * - Use `OverflowContainer.useContext()` to get overflow related properties.

package/esm/utils/components/OverflowContainer.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import { useMergedRefs } from '../hooks/useMergedRefs.js';
 import { Box } from './Box.js';
-import { useOverflow } from '../hooks/useOverflow.js';
+import { useLayoutEffect } from '../hooks/useIsomorphicLayoutEffect.js';
 import { useSafeContext } from '../hooks/useSafeContext.js';
-let OverflowContainerComponent = React.forwardRef((props, ref) => {
+import { isUnitTest } from '../functions/dev.js';
+import { useResizeObserver } from '../hooks/useResizeObserver.js';
+let OverflowContainerMain = React.forwardRef((props, forwardedRef) => {
   let { itemsCount, children, overflowOrientation, ...rest } = props;
   let [containerRef, visibleCount] = useOverflow(
     itemsCount,
-    false,
     overflowOrientation,
   );
   let overflowContainerContextValue = React.useMemo(
@@ -25,7 +26,7 @@ let OverflowContainerComponent = React.forwardRef((props, ref) => {
     React.createElement(
       Box,
       {
-        ref: useMergedRefs(ref, containerRef),
+        ref: useMergedRefs(forwardedRef, containerRef),
         ...rest,
       },
       children,
@@ -38,11 +39,149 @@ let OverflowContainerOverflowNode = (props) => {
   let isOverflowing = visibleCount < itemsCount;
   return isOverflowing ? children : null;
 };
+let OverflowContainerComponent = React.forwardRef((props, forwardedRef) => {
+  let { itemsCount, overflowOrientation = 'horizontal', ...rest } = props;
+  let [size, setSize] = React.useState(null);
+  let [resizeRef] = useResizeObserver(setSize);
+  let ref = useMergedRefs(resizeRef, forwardedRef);
+  let key = `${itemsCount}${
+    'vertical' === overflowOrientation ? size?.height : size?.width
+  }`;
+  return React.createElement(OverflowContainerMain, {
+    ...rest,
+    key: key,
+    ref: ref,
+    itemsCount: itemsCount,
+    overflowOrientation: overflowOrientation,
+  });
+});
 export const OverflowContainer = Object.assign(OverflowContainerComponent, {
   OverflowNode: OverflowContainerOverflowNode,
   useContext: useOverflowContainerContext,
 });
 let OverflowContainerContext = React.createContext(void 0);
+let useOverflow = (itemsCount, orientation = 'horizontal') => {
+  let [guessState, dispatch] = React.useReducer(
+    overflowGuessReducer,
+    {
+      itemsCount,
+    },
+    overflowGuessReducerInitialState,
+  );
+  let containerRef = React.useRef(null);
+  let isGuessing = React.useRef(false);
+  useLayoutEffect(() => {
+    let { minGuess, maxGuess, isStabilized, visibleCount } = guessState;
+    if (isStabilized) return;
+    guessVisibleCount();
+    function guessVisibleCount() {
+      if (isStabilized || isGuessing.current || isUnitTest) return;
+      try {
+        isGuessing.current = true;
+        if (null == containerRef.current) return;
+        let dimension = 'horizontal' === orientation ? 'Width' : 'Height';
+        let availableSize = containerRef.current[`offset${dimension}`];
+        let requiredSize = containerRef.current[`scroll${dimension}`];
+        let isOverflowing = availableSize < requiredSize;
+        if (
+          0 === itemsCount ||
+          (1 === visibleCount && isOverflowing) ||
+          (visibleCount === itemsCount && !isOverflowing) ||
+          (maxGuess - minGuess === 1 && visibleCount === minGuess)
+        ) {
+          dispatch({
+            type: 'stabilize',
+          });
+          return;
+        }
+        if (maxGuess === visibleCount && !isOverflowing) {
+          dispatch({
+            type: 'shiftGuessRangeForward',
+          });
+          return;
+        }
+        isOverflowing
+          ? dispatch({
+              type: 'decreaseMaxGuess',
+              currentState: guessState,
+            })
+          : dispatch({
+              type: 'increaseMinGuess',
+              currentState: guessState,
+            });
+      } finally {
+        isGuessing.current = false;
+      }
+    }
+  }, [guessState, itemsCount, orientation]);
+  return [containerRef, guessState.visibleCount];
+};
+let STARTING_MAX_ITEMS_COUNT = 32;
+let overflowGuessReducerInitialState = ({ itemsCount }) => {
+  let initialVisibleCount = Math.min(itemsCount, STARTING_MAX_ITEMS_COUNT);
+  return isUnitTest
+    ? {
+        isStabilized: true,
+        minGuess: null,
+        maxGuess: null,
+        itemsCount,
+        visibleCount: itemsCount,
+      }
+    : {
+        isStabilized: false,
+        minGuess: 0,
+        maxGuess: initialVisibleCount,
+        itemsCount,
+        visibleCount: initialVisibleCount,
+      };
+};
+let overflowGuessReducer = (state, action) => {
+  let getSafeVisibleCount = ({ visibleCount, itemsCount }) =>
+    Math.min(itemsCount, visibleCount);
+  switch (action.type) {
+    case 'decreaseMaxGuess':
+    case 'increaseMinGuess':
+      if (state.isStabilized) return state;
+      let newMinGuess = state.minGuess;
+      let newMaxGuess = state.maxGuess;
+      if ('decreaseMaxGuess' === action.type)
+        newMaxGuess = action.currentState.visibleCount;
+      else newMinGuess = action.currentState.visibleCount;
+      let newVisibleCount = Math.floor((newMinGuess + newMaxGuess) / 2);
+      return {
+        ...state,
+        isStabilized: false,
+        minGuess: newMinGuess,
+        maxGuess: newMaxGuess,
+        visibleCount: getSafeVisibleCount({
+          visibleCount: newVisibleCount,
+          itemsCount: state.itemsCount,
+        }),
+      };
+    case 'shiftGuessRangeForward':
+      if (state.isStabilized) return state;
+      let doubleOfMaxGuess = 2 * state.maxGuess;
+      return {
+        ...state,
+        isStabilized: false,
+        minGuess: state.maxGuess,
+        maxGuess: doubleOfMaxGuess,
+        visibleCount: getSafeVisibleCount({
+          visibleCount: doubleOfMaxGuess,
+          itemsCount: state.itemsCount,
+        }),
+      };
+    case 'stabilize':
+      return {
+        ...state,
+        isStabilized: true,
+        minGuess: null,
+        maxGuess: null,
+      };
+    default:
+      return state;
+  }
+};
 function useOverflowContainerContext() {
   let overflowContainerContext = useSafeContext(OverflowContainerContext);
   return overflowContainerContext;

package/esm/utils/hooks/index.d.ts

@@ -1,6 +1,5 @@
 export * from './useEventListener.js';
 export * from './useMergedRefs.js';
-export * from './useOverflow.js';
 export * from './useResizeObserver.js';
 export * from './useContainerWidth.js';
 export * from './useGlobals.js';
@@ -14,4 +13,5 @@ export * from './useId.js';
 export * from './useControlledState.js';
 export * from './useSyncExternalStore.js';
 export * from './useVirtualScroll.js';
+export * from './useInstance.js';
 export * from './useWarningLogger.js';

package/esm/utils/hooks/index.js

@@ -1,6 +1,5 @@
 export * from './useEventListener.js';
 export * from './useMergedRefs.js';
-export * from './useOverflow.js';
 export * from './useResizeObserver.js';
 export * from './useContainerWidth.js';
 export * from './useGlobals.js';
@@ -14,4 +13,5 @@ export * from './useId.js';
 export * from './useControlledState.js';
 export * from './useSyncExternalStore.js';
 export * from './useVirtualScroll.js';
+export * from './useInstance.js';
 export * from './useWarningLogger.js';

package/esm/utils/hooks/useInstance.d.ts

@@ -0,0 +1,22 @@
+declare class Instance {
+}
+export declare const useInstance: () => Instance;
+/**
+ * Synchronizes the instance with the provided properties.
+ *
+ * @param instance Instance created by `useInstance`.
+ * @param properties Memoized object containing properties to be synchronized.
+ *
+ * @example
+ * const instance = useInstance();
+ *
+ * const properties = React.useMemo(() => ({
+ *   show: () => console.log('show'),
+ * }), []);
+ *
+ * useSynchronizeInstance(instance, properties);
+ *
+ * instance.show(); // logs 'show'
+ */
+export declare const useSynchronizeInstance: <T>(instance: T, properties: T) => T;
+export {};

package/esm/utils/hooks/useInstance.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useSyncExternalStore } from './useSyncExternalStore.js';
+class Instance {}
+export const useInstance = () => React.useMemo(() => new Instance(), []);
+export const useSynchronizeInstance = (instance, properties) => {
+  let synchronize = React.useCallback(() => {
+    if (!(instance instanceof Instance)) return () => {};
+    Object.assign(instance, properties);
+    return () => {
+      for (let key in properties) delete instance[key];
+    };
+  }, [instance, properties]);
+  return useSyncExternalStore(
+    synchronize,
+    () => instance,
+    () => instance,
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.15.5",
+  "version": "3.16.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -89,7 +89,7 @@
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
-    "@swc/cli": "^0.3.12",
+    "@swc/cli": "^0.5.1",
     "@swc/core": "^1.5.28",
     "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/react": "^13.2.0",