@itwin/itwinui-react 3.15.4 → 3.16.0

package/cjs/core/Radio/Radio.js

@@ -28,7 +28,7 @@ const Radio = _react.forwardRef((props, ref) => {
   let refs = (0, _index.useMergedRefs)(inputElementRef, ref);
   let radio = _react.createElement(_index.Box, {
     as: 'input',
-    className: (0, _classnames.default)('iui-radio', className),
+    className: (0, _classnames.default)('iui-checkbox', 'iui-radio', className),
     style: style,
     disabled: disabled,
     type: 'radio',
@@ -42,13 +42,11 @@ const Radio = _react.forwardRef((props, ref) => {
           as: 'label',
           ...wrapperProps,
           className: (0, _classnames.default)(
-            'iui-radio-wrapper',
-            {
-              'iui-disabled': disabled,
-              [`iui-${status}`]: !!status,
-            },
+            'iui-checkbox-wrapper',
             wrapperProps?.className,
           ),
+          'data-iui-status': status,
+          'data-iui-disabled': disabled ? 'true' : void 0,
         },
         radio,
         label &&

package/cjs/core/RadioTiles/RadioTileGroup.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { InputGroup } from '../InputGroup/InputGroup.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type RadioTileGroupProps = Omit<React.ComponentProps<typeof InputGroup>, 'displayStyle' | 'disabled'>;
+type RadioTileGroupProps = {
+    tileContainerProps?: React.ComponentProps<'div'>;
+} & Omit<React.ComponentProps<typeof InputGroup>, 'displayStyle' | 'disabled'>;
 /**
  * RadioTileGroup component to group RadioTile components together
  * @example

package/cjs/core/RadioTiles/RadioTileGroup.js

@@ -8,12 +8,14 @@ Object.defineProperty(exports, 'RadioTileGroup', {
     return RadioTileGroup;
   },
 });
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
 const _InputGroup = require('../InputGroup/InputGroup.js');
 const _index = require('../../utils/index.js');
+const _classnames = _interop_require_default._(require('classnames'));
 const RadioTileGroup = _react.forwardRef((props, forwardedRef) => {
-  let { children, label, ...rest } = props;
+  let { children, label, tileContainerProps, ...rest } = props;
   return _react.createElement(
     _InputGroup.InputGroup,
     {
@@ -24,7 +26,12 @@ const RadioTileGroup = _react.forwardRef((props, forwardedRef) => {
     _react.createElement(
       _index.Box,
       {
-        className: 'iui-radio-tile-container',
+        as: 'div',
+        ...tileContainerProps,
+        className: (0, _classnames.default)(
+          'iui-radio-tile-container',
+          tileContainerProps?.className,
+        ),
       },
       children,
     ),

package/cjs/core/Select/SelectTag.d.ts

@@ -1,10 +1,12 @@
+import * as React from 'react';
+import { Tag } from '../Tag/Tag.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type SelectTagProps = {
     /**
      * Text inside the tag.
      */
     label: string;
-};
+} & Pick<React.ComponentProps<typeof Tag>, 'onClick' | 'onRemove'>;
 /**
  * Tag for showing selected value in `Select`.
  * @private

package/cjs/core/Select/SelectTag.js

@@ -12,24 +12,22 @@ const _interop_require_default = require('@swc/helpers/_/_interop_require_defaul
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _classnames = _interop_require_default._(require('classnames'));
 const _react = _interop_require_wildcard._(require('react'));
-const _index = require('../../utils/index.js');
+const _Tag = require('../Tag/Tag.js');
 const SelectTag = _react.forwardRef((props, forwardedRef) => {
   let { className, label, ...rest } = props;
   return _react.createElement(
-    _index.Box,
+    _Tag.Tag,
     {
-      as: 'span',
       className: (0, _classnames.default)('iui-select-tag', className),
+      labelProps: {
+        className: 'iui-select-tag-label',
+      },
+      removeButtonProps: {
+        className: 'iui-select-tag-button',
+      },
       ref: forwardedRef,
       ...rest,
     },
-    _react.createElement(
-      _index.Box,
-      {
-        as: 'span',
-        className: 'iui-select-tag-label',
-      },
-      label,
-    ),
+    label,
   );
 });

package/cjs/core/Select/SelectTagContainer.js

@@ -14,7 +14,7 @@ const _react = _interop_require_wildcard._(require('react'));
 const _classnames = _interop_require_default._(require('classnames'));
 const _SelectTag = require('./SelectTag.js');
 const _index = require('../../utils/index.js');
-const SelectTagContainer = _react.forwardRef((props, ref) => {
+const SelectTagContainer = _react.forwardRef((props, forwardedRef) => {
   let { tags: tagsProp, className, ...rest } = props;
   let tags = _react.useMemo(
     () => _react.Children.toArray(tagsProp),
@@ -28,7 +28,7 @@ const SelectTagContainer = _react.forwardRef((props, ref) => {
         'iui-select-tag-container',
         className,
       ),
-      ref: ref,
+      ref: forwardedRef,
       ...rest,
     },
     _react.createElement(SelectTagContainerContent, {

package/cjs/core/Stepper/Stepper.d.ts

@@ -12,6 +12,10 @@ export type StepProperties = {
      * A tooltip giving detailed description to this step.
      */
     description?: string;
+    /**
+     * Custom content displayed in the step's circle.
+     */
+    stepContent?: () => React.ReactNode;
 } & React.ComponentProps<'li'>;
 export type StepperProps = {
     /**

package/cjs/core/Stepper/Stepper.js

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

package/cjs/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/cjs/core/Stepper/StepperStep.js

@@ -29,6 +29,7 @@ const StepperStep = _react.forwardRef((props, forwardedRef) => {
     trackContentProps,
     circleProps,
     nameProps,
+    stepContent,
     ...rest
   } = props;
   let isPast = currentStepNumber > index;
@@ -89,7 +90,7 @@ const StepperStep = _react.forwardRef((props, forwardedRef) => {
             circleProps?.className,
           ),
         },
-        index + 1,
+        stepContent ? stepContent() : index + 1,
       ),
     ),
     'default' === type &&

package/cjs/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/cjs/core/Table/Table.js

@@ -13,6 +13,9 @@ _export(exports, {
   Table: function () {
     return Table;
   },
+  iuiId: function () {
+    return iuiId;
+  },
   tableResizeStartAction: function () {
     return tableResizeStartAction;
   },
@@ -36,6 +39,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 +92,7 @@ const Table = (props) => {
     headerProps,
     bodyProps,
     emptyTableContentProps,
+    getRowId,
     ...rest
   } = props;
   (0, _index.useGlobals)();
@@ -225,16 +230,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 +273,7 @@ const Table = (props) => {
         ...props.initialState,
       },
       columnResizeMode,
+      getRowId: subComponent ? getRowIdWithSubComponents : getRowId,
     },
     _reacttable.useFlexLayout,
     (0, _index1.useResizeColumns)(ownerDocument),
@@ -451,51 +471,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,
@@ -632,11 +653,7 @@ const Table = (props) => {
               },
               bodyProps?.className,
             ),
-            style: {
-              outline: 0,
-            },
           }),
-          tabIndex: -1,
           'aria-multiselectable':
             (isSelectable && 'multi' === selectionMode) || void 0,
         },

package/cjs/core/Table/TablePaginator.js

@@ -60,7 +60,7 @@ const TablePaginator = (props) => {
   );
   let pageListRef = _react.useRef(null);
   let [focusedIndex, setFocusedIndex] = _react.useState(currentPage);
-  _react.useLayoutEffect(() => {
+  (0, _index.useLayoutEffect)(() => {
     setFocusedIndex(currentPage);
   }, [currentPage]);
   let needFocus = _react.useRef(false);
@@ -182,6 +182,7 @@ const TablePaginator = (props) => {
             : _react.createElement(TablePaginatorPageButtons, {
                 size: size,
                 focusedIndex: focusedIndex,
+                setFocusedIndex: setFocusedIndex,
                 totalPagesCount: totalPagesCount,
                 onPageChange: onPageChange,
                 currentPage: currentPage,
@@ -255,6 +256,7 @@ const TablePaginator = (props) => {
 const TablePaginatorPageButtons = (props) => {
   let {
     focusedIndex,
+    setFocusedIndex,
     totalPagesCount,
     onPageChange,
     currentPage,
@@ -274,14 +276,24 @@ const 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/cjs/core/Table/actionHandlers/selectHandler.js

@@ -20,6 +20,7 @@ _export(exports, {
     return onToggleHandler;
   },
 });
+const _Table = require('../Table.js');
 const onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
   if (!instance?.rows.length) {
     onSelect?.([], newState);
@@ -29,14 +30,16 @@ const 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[_Table.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/cjs/core/Table/columns/selectionColumn.js

@@ -21,6 +21,7 @@ const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildc
 const _react = _interop_require_wildcard._(require('react'));
 const _Checkbox = require('../../Checkbox/Checkbox.js');
 const _index = require('../cells/index.js');
+const _Table = require('../Table.js');
 const SELECTION_CELL_ID = 'iui-table-checkbox-selector';
 const SelectionColumn = (props = {}) => {
   let { isDisabled, density } = props;
@@ -70,7 +71,11 @@ 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[_Table.iuiId]
+          )
             row.toggleRowSelected(
               !row.subRows.every(
                 (subRow) => subRow.isSelected || isDisabled?.(subRow.original),

package/cjs/core/Tree/Tree.js

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

package/cjs/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/cjs/index.js

@@ -371,6 +371,9 @@ _export(exports, {
   tableFilters: function () {
     return _index.tableFilters;
   },
+  unstable_Panels: function () {
+    return _Panels.Panels;
+  },
   useToaster: function () {
     return _Toaster.useToaster;
   },
@@ -437,6 +440,7 @@ const _ModalContent = require('./core/Modal/ModalContent.js');
 const _ModalButtonBar = require('./core/Modal/ModalButtonBar.js');
 const _NotificationMarker = require('./core/NotificationMarker/NotificationMarker.js');
 const _Overlay = require('./core/Overlay/Overlay.js');
+const _Panels = require('./core/Panels/Panels.js');
 const _ProgressLinear = require('./core/ProgressIndicators/ProgressLinear.js');
 const _ProgressRadial = require('./core/ProgressIndicators/ProgressRadial.js');
 const _Radio = require('./core/Radio/Radio.js');

package/cjs/styles.js

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

package/cjs/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/cjs/utils/components/MiddleTextTruncation.js

@@ -11,9 +11,11 @@ Object.defineProperty(exports, 'MiddleTextTruncation', {
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
 const _OverflowContainer = require('./OverflowContainer.js');
+const _VisuallyHidden = require('../../core/VisuallyHidden/VisuallyHidden.js');
+const _ShadowRoot = require('./ShadowRoot.js');
 const ELLIPSIS_CHAR = '…';
-const MiddleTextTruncation = (props) => {
-  let { text, style, ...rest } = props;
+const MiddleTextTruncation = _react.forwardRef((props, forwardedRef) => {
+  let { text, endCharsCount, textRenderer, style, ...rest } = props;
   return _react.createElement(
     _OverflowContainer.OverflowContainer,
     {
@@ -27,10 +29,26 @@ const MiddleTextTruncation = (props) => {
       },
       itemsCount: text.length,
       ...rest,
+      ref: forwardedRef,
     },
-    _react.createElement(MiddleTextTruncationContent, props),
+    _react.createElement(
+      _ShadowRoot.ShadowRoot,
+      null,
+      _react.createElement(_VisuallyHidden.VisuallyHidden, null, text),
+      _react.createElement('slot', {
+        'aria-hidden': true,
+        style: {
+          pointerEvents: 'none',
+        },
+      }),
+    ),
+    _react.createElement(MiddleTextTruncationContent, {
+      text: text,
+      endCharsCount: endCharsCount,
+      textRenderer: textRenderer,
+    }),
   );
-};
+});
 const MiddleTextTruncationContent = (props) => {
   let { text, endCharsCount = 6, textRenderer } = props;
   let { visibleCount } = _OverflowContainer.OverflowContainer.useContext();

package/cjs/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.