@itwin/itwinui-react 3.2.4 → 3.3.1

package/esm/core/Table/TableCell.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { getCellStyle, getStickyStyle } from './utils.js';
+import { getCellStyle, getStickyStyle, getSubRowStyle } from './utils.js';
 import { SubRowExpander } from './SubRowExpander.js';
 import { SELECTION_CELL_ID } from './columns/index.js';
 import { DefaultCell } from './cells/index.js';
@@ -13,34 +13,19 @@ export const TableCell = (props) => {
     const { cell, cellIndex, isDisabled, tableHasSubRows, tableInstance, expanderCell, density, } = props;
     const hasSubRowExpander = cellIndex ===
         cell.row.cells.findIndex((c) => c.column.id !== SELECTION_CELL_ID);
-    const getSubRowStyle = () => {
-        if (!tableHasSubRows || !hasSubRowExpander) {
-            return undefined;
-        }
-        // If it doesn't have sub-rows then shift by another level to align with expandable rows on the same depth
-        const dynamicMargin = cell.row.depth + (cell.row.canExpand ? 0 : 1);
-        let cellPadding = 16;
-        let expanderMargin = 8;
-        if (density === 'condensed') {
-            cellPadding = 12;
-            expanderMargin = 4;
-        }
-        else if (density === 'extra-condensed') {
-            cellPadding = 8;
-            expanderMargin = 4;
-        }
-        const multiplier = 26 + expanderMargin; // 26 = expander width
-        return {
-            paddingInlineStart: cellPadding + dynamicMargin * multiplier,
-        };
-    };
     const cellElementProps = cell.getCellProps({
         className: cx('iui-table-cell', cell.column.cellClassName, {
             'iui-table-cell-sticky': !!cell.column.sticky,
         }),
         style: {
             ...getCellStyle(cell.column, !!tableInstance.state.isTableResizing),
-            ...getSubRowStyle(),
+            ...(tableHasSubRows &&
+                hasSubRowExpander &&
+                getSubRowStyle({
+                    density,
+                    // If it doesn't have sub-rows then shift by another level to align with expandable rows on the same depth
+                    depth: cell.row.depth + (cell.row.canExpand ? 0 : 1),
+                })),
             ...getStickyStyle(cell.column, tableInstance.visibleColumns),
         },
     });

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

@@ -27,7 +27,7 @@ export declare const SelectionColumn: <T extends Record<string, unknown>>(props?
     maxWidth: number;
     columnClassName: string;
     cellClassName: string;
-    Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, initialRows, state, }: HeaderProps<T>) => React.JSX.Element;
+    Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, preFilteredFlatRows, state, }: HeaderProps<T>) => React.JSX.Element;
     Cell: ({ row }: CellProps<T>) => React.JSX.Element;
     cellRenderer: (props: CellRendererProps<T>) => React.JSX.Element;
 };

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

@@ -31,9 +31,9 @@ export const SelectionColumn = (props = {}) => {
         maxWidth: densityWidth,
         columnClassName: 'iui-slot',
         cellClassName: 'iui-slot',
-        Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, initialRows, state, }) => {
-            const disabled = rows.every((row) => isDisabled?.(row.original));
-            const checked = initialRows.every((row) => state.selectedRowIds[row.id] || isDisabled?.(row.original));
+        Header: ({ getToggleAllRowsSelectedProps, toggleAllRowsSelected, rows, preFilteredFlatRows, state, }) => {
+            const disabled = preFilteredFlatRows.every((row) => isDisabled?.(row.original));
+            const checked = preFilteredFlatRows.every((row) => state.selectedRowIds[row.id] || isDisabled?.(row.original));
             const indeterminate = !checked && Object.keys(state.selectedRowIds).length > 0;
             return (React.createElement(Checkbox, { ...getToggleAllRowsSelectedProps(), style: {}, title: '' // Removes default title that comes from react-table
                 , checked: checked && !disabled, indeterminate: indeterminate, disabled: disabled, onChange: () => toggleAllRowsSelected(!rows.some((row) => row.isSelected)) }));

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

@@ -1,3 +1,9 @@
 import type { ColumnInstance } 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 }: {
+    density?: string | undefined;
+    depth?: number | undefined;
+}) => {
+    paddingInlineStart: number;
+};

package/esm/core/Table/utils.js

@@ -43,3 +43,19 @@ export const getStickyStyle = (column, columnList) => {
         '--iui-table-sticky-right': column.sticky === 'right' ? `${right}px` : undefined,
     };
 };
+export const getSubRowStyle = ({ density = 'default', depth = 1 }) => {
+    let cellPadding = 16;
+    let expanderMargin = 8;
+    if (density === 'condensed') {
+        cellPadding = 12;
+        expanderMargin = 4;
+    }
+    else if (density === 'extra-condensed') {
+        cellPadding = 8;
+        expanderMargin = 4;
+    }
+    const multiplier = 26 + expanderMargin; // 26 = expander width
+    return {
+        paddingInlineStart: cellPadding + depth * multiplier,
+    };
+};

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

@@ -0,0 +1,2 @@
+/** @private */
+export declare const InputWithIcon: import("../props.js").PolymorphicForwardRefComponent<"div", {}>;

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

@@ -0,0 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { polymorphic } from '../functions/polymorphic.js';
+/** @private */
+export const InputWithIcon = polymorphic.div('iui-input-with-icon');
+InputWithIcon.displayName = 'InputWithIcon';

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

@@ -9,10 +9,12 @@ export type PortalProps = {
      *
      * Otherwise, it will portal to the element passed to `to`.
      *
+     * If `to`/`to()` === `null`/`undefined`, the default behavior will be used (i.e. as if `portal` is not passed).
+     *
      * @default true
      */
     portal?: boolean | {
-        to: HTMLElement | (() => HTMLElement);
+        to: HTMLElement | null | undefined | (() => HTMLElement | null | undefined);
     };
 };
 /**
@@ -21,6 +23,8 @@ export type PortalProps = {
  *   - if `portal` is set to true, renders into nearest ThemeContext.portalContainer
  *   - if `portal` is set to false, renders as-is without portal
  *   - otherwise renders into `portal.to` (can be an element or a function)
+ *     - If `to`/`to()` === `null`/`undefined`, the default behavior will be used (i.e. as if `portal` is not passed).
+ *     - E.g. `portal={{ to: () => document.querySelector('.may-not-exist') }}`.
  *
  * @private
  */

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

@@ -14,6 +14,8 @@ import { useIsClient } from '../hooks/useIsClient.js';
  *   - if `portal` is set to true, renders into nearest ThemeContext.portalContainer
  *   - if `portal` is set to false, renders as-is without portal
  *   - otherwise renders into `portal.to` (can be an element or a function)
+ *     - If `to`/`to()` === `null`/`undefined`, the default behavior will be used (i.e. as if `portal` is not passed).
+ *     - E.g. `portal={{ to: () => document.querySelector('.may-not-exist') }}`.
  *
  * @private
  */
@@ -29,8 +31,10 @@ export const Portal = (props) => {
 // ----------------------------------------------------------------------------
 const usePortalTo = (portal) => {
     const themeInfo = React.useContext(ThemeContext);
+    const defaultPortalTo = themeInfo?.portalContainer ?? getDocument()?.body;
     if (typeof portal === 'boolean') {
-        return portal ? themeInfo?.portalContainer ?? getDocument()?.body : null;
+        return portal ? defaultPortalTo : null;
     }
-    return typeof portal.to === 'function' ? portal.to() : portal.to;
+    const portalTo = typeof portal.to === 'function' ? portal.to() : portal.to;
+    return portalTo ?? defaultPortalTo;
 };

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

@@ -2,6 +2,7 @@ export * from './Resizer.js';
 export * from './FocusTrap.js';
 export * from './InputContainer.js';
 export * from './InputFlexContainer.js';
+export * from './InputWithIcon.js';
 export * from './WithCSSTransition.js';
 export * from './MiddleTextTruncation.js';
 export * from './VirtualScroll.js';

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

@@ -6,6 +6,7 @@ export * from './Resizer.js';
 export * from './FocusTrap.js';
 export * from './InputContainer.js';
 export * from './InputFlexContainer.js';
+export * from './InputWithIcon.js';
 export * from './WithCSSTransition.js';
 export * from './MiddleTextTruncation.js';
 export * from './VirtualScroll.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.2.4",
+  "version": "3.3.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -85,7 +85,7 @@
     "tslib": "^2.6.0"
   },
   "devDependencies": {
-    "@itwin/itwinui-css": "^2.1.0",
+    "@itwin/itwinui-css": "^2.2.1",
     "@itwin/itwinui-variables": "3.0.0",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.68",
@@ -112,7 +112,7 @@
     "ts-jest": "^29.0.0",
     "ts-node": "^10.0.0",
     "typescript": "~5.1.6",
-    "vite": "^4.5.1"
+    "vite": "^5.0.12"
   },
   "peerDependencies": {
     "react": ">= 17.0.0 < 19.0.0",