@itwin/itwinui-react 3.14.2 → 3.15.0

package/esm/core/Table/Table.js

@@ -48,6 +48,7 @@ import {
 } from './actionHandlers/index.js';
 import { SELECTION_CELL_ID } from './columns/index.js';
 import { ColumnHeader } from './ColumnHeader.js';
+import { TableExpandableContentMemoized } from './TableExpandableContentMemoized.js';
 let singleRowSelectedAction = 'singleRowSelected';
 let shiftRowSelectedAction = 'shiftRowSelected';
 export const tableResizeStartAction = 'tableResizeStart';
@@ -239,6 +240,17 @@ export 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 || [];
+    },
+    [rowHasParent],
+  );
   let instance = useTable(
     {
       manualPagination: !paginatorRenderer,
@@ -251,7 +263,7 @@ export const Table = (props) => {
       filterTypes,
       selectSubRows,
       data,
-      getSubRows,
+      getSubRows: subComponent ? getSubRowsWithSubComponents : getSubRows,
       initialState: {
         pageSize,
         ...props.initialState,
@@ -443,39 +455,54 @@ export const Table = (props) => {
   useLayoutEffect(() => {
     if (scrollToIndex)
       virtualizer.scrollToIndex(scrollToIndex, {
-        align: 'center',
+        align: 'start',
       });
   }, [virtualizer, scrollToIndex]);
   let getPreparedRow = React.useCallback(
     (index, virtualItem, virtualizer) => {
       let row = page[index];
       prepareRow(row);
-      return React.createElement(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,
-      });
+      if (row.subRows.length > 0 || !subComponent)
+        return React.createElement(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,
+        {
+          key: row.getRowProps().key,
+          virtualItem: virtualItem,
+          ref: enableVirtualization
+            ? virtualizer?.measureElement
+            : tableRowRef(row),
+          isDisabled: !!isRowDisabled?.(row.original),
+        },
+        subComponent(row),
+      );
     },
     [
       page,
       prepareRow,
       rowProps,
+      onRowInViewportRef,
+      onBottomReachedRef,
       intersectionMargin,
       state,
       onRowClickHandler,
@@ -487,8 +514,6 @@ export const Table = (props) => {
       enableVirtualization,
       tableRowRef,
       density,
-      onBottomReachedRef,
-      onRowInViewportRef,
     ],
   );
   let updateStickyState = () => {

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import type { VirtualItem } from '@tanstack/react-virtual';
+type TableExpandableContentProps = {
+    children: React.ReactNode;
+    virtualItem?: VirtualItem<Element>;
+    isDisabled?: boolean;
+};
+export declare const TableExpandableContentMemoized: React.MemoExoticComponent<PolymorphicForwardRefComponent<"div", TableExpandableContentProps>>;
+export {};

package/esm/core/Table/TableExpandableContentMemoized.js

@@ -0,0 +1,33 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { Box } from '../../utils/index.js';
+let TableExpandableContent = React.forwardRef((props, ref) => {
+  let { children, className, style, isDisabled, virtualItem, ...rest } = props;
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-table-row', 'iui-table-expanded-content', className),
+      style: {
+        flex: '0 0 auto',
+        minWidth: '100%',
+        ...(null != virtualItem
+          ? {
+              transform: `translateY(${virtualItem.start}px)`,
+            }
+          : {}),
+        ...style,
+      },
+      'aria-disabled': isDisabled,
+      'data-iui-index': virtualItem?.index,
+      ...(null != virtualItem && {
+        'data-iui-virtualizer': 'item',
+      }),
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
+});
+export const TableExpandableContentMemoized = React.memo(
+  TableExpandableContent,
+);

package/esm/core/Table/TableRowMemoized.js

@@ -1,11 +1,6 @@
 import * as React from 'react';
 import cx from 'classnames';
-import {
-  Box,
-  useIntersection,
-  useMergedRefs,
-  WithCSSTransition,
-} from '../../utils/index.js';
+import { Box, useIntersection, useMergedRefs } from '../../utils/index.js';
 import { TableCell } from './TableCell.js';
 export const TableRow = (props) => {
   let {
@@ -106,21 +101,6 @@ export const TableRow = (props) => {
         }),
       ),
     ),
-    subComponent &&
-      React.createElement(
-        WithCSSTransition,
-        {
-          in: row.isExpanded,
-        },
-        React.createElement(
-          Box,
-          {
-            className: cx('iui-table-row', 'iui-table-expanded-content'),
-            'aria-disabled': isDisabled,
-          },
-          subComponent(row),
-        ),
-      ),
   );
 };
 let hasAnySelectedSubRow = (row, selectedRowIds) => {

package/esm/core/Table/hooks/useColumnDragAndDrop.js

@@ -1,5 +1,7 @@
 import { actions, makePropGetter, useGetLatest } from 'react-table';
 import { styles } from '../../../styles.js';
+let leftClassName = styles['iui-table-reorder-column-left'];
+let rightClassName = styles['iui-table-reorder-column-right'];
 let REORDER_ACTIONS = {
   columnDragStart: 'columnDragStart',
   columnDragEnd: 'columnDragEnd',
@@ -21,12 +23,16 @@ let defaultGetDragAndDropProps =
     };
     let setOnDragColumnStyle = (event, position) => {
       let columnElement = event.currentTarget;
-      columnElement.classList.remove(styles['iui-table-reorder-column-right']);
-      columnElement.classList.remove(styles['iui-table-reorder-column-left']);
-      if ('left' === position)
-        columnElement.classList.add(styles['iui-table-reorder-column-left']);
-      else if ('right' === position)
-        columnElement.classList.add(styles['iui-table-reorder-column-right']);
+      if ('left' === position) {
+        columnElement.classList.remove(rightClassName);
+        columnElement.classList.add(leftClassName);
+      } else if ('right' === position) {
+        columnElement.classList.remove(leftClassName);
+        columnElement.classList.add(rightClassName);
+      } else {
+        columnElement.classList.remove(leftClassName);
+        columnElement.classList.remove(rightClassName);
+      }
     };
     let reorderColumns = (tableColumns, srcIndex, dstIndex) => {
       let newTableColumns = [...tableColumns];

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -32,6 +32,7 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
     includeCss = 'inherit' === themeProp,
     ...rest
   } = props;
+  useInertPolyfill();
   let [rootElement, setRootElement] = React.useState(null);
   let parent = useParentThemeAndContext(rootElement);
   let theme = 'inherit' === themeProp ? parent.theme || 'light' : themeProp;
@@ -254,3 +255,20 @@ let useIuiDebugRef = () => {
   var version, version1;
   _globalThis1.__iui.versions.add(JSON.stringify(meta));
 };
+let useInertPolyfill = () => {
+  let loaded = React.useRef(false);
+  let modulePath =
+    'https://cdn.jsdelivr.net/npm/wicg-inert@3.1.2/dist/inert.min.js';
+  React.useEffect(() => {
+    (async () => {
+      if (
+        !HTMLElement.prototype.hasOwnProperty('inert') &&
+        !loaded.current &&
+        !isUnitTest
+      ) {
+        await new Function('url', 'return import(url)')(modulePath);
+        loaded.current = true;
+      }
+    })();
+  }, []);
+};

package/esm/core/Toast/Toast.js

@@ -8,11 +8,10 @@ import {
   Box,
   useSafeContext,
   ButtonBase,
+  useMediaQuery,
 } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { ToasterStateContext } from './Toaster.js';
-let isMotionOk = () =>
-  getWindow()?.matchMedia?.('(prefers-reduced-motion: no-preference)')?.matches;
 export const Toast = (props) => {
   let {
     content,
@@ -34,6 +33,7 @@ export const Toast = (props) => {
   let [height, setHeight] = React.useState(0);
   let thisElement = React.useRef(null);
   let [margin, setMargin] = React.useState(0);
+  let motionOk = useMediaQuery('(prefers-reduced-motion: no-preference)');
   let marginStyle = () => {
     if ('top' === placementPosition)
       return {
@@ -98,16 +98,16 @@ export const Toast = (props) => {
       appear: true,
       unmountOnExit: true,
       onEnter: (node) => {
-        if (isMotionOk()) {
+        if (motionOk) {
           node.style.transform = 'translateY(15%)';
           node.style.transitionTimingFunction = 'ease';
         }
       },
       onEntered: (node) => {
-        if (isMotionOk()) node.style.transform = 'translateY(0)';
+        if (motionOk) node.style.transform = 'translateY(0)';
       },
       onExiting: (node) => {
-        if (isMotionOk()) {
+        if (motionOk) {
           let { translateX, translateY } = calculateOutAnimation(node);
           node.style.transform = animateOutTo
             ? `scale(0.9) translate(${translateX}px,${translateY}px)`

package/esm/styles.js

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

package/esm/utils/components/ShadowRoot.js

@@ -50,6 +50,19 @@ function useShadowRoot(templateRef, { css = '' }) {
   let styleSheet = React.useRef();
   let latestCss = useLatestRef(css);
   let latestShadowRoot = useLatestRef(shadowRoot);
+  let createStyleSheet = React.useCallback(
+    (shadow) => {
+      if (shadow && supportsAdoptedStylesheets) {
+        let currentWindow = shadow.ownerDocument.defaultView || globalThis;
+        if (styleSheet.current instanceof currentWindow.CSSStyleSheet) return;
+        styleSheet.current = new currentWindow.CSSStyleSheet();
+        shadow.adoptedStyleSheets.push(styleSheet.current);
+        if (latestCss.current)
+          styleSheet.current.replaceSync(latestCss.current);
+      }
+    },
+    [latestCss],
+  );
   useLayoutEffect(() => {
     let parent = templateRef.current?.parentElement;
     if (!parent) return;
@@ -61,22 +74,23 @@ function useShadowRoot(templateRef, { css = '' }) {
         parent.attachShadow({
           mode: 'open',
         });
-      if (supportsAdoptedStylesheets) {
-        let currentWindow = shadow.ownerDocument.defaultView || globalThis;
-        styleSheet.current = new currentWindow.CSSStyleSheet();
-        shadow.adoptedStyleSheets = [styleSheet.current];
-        if (latestCss.current)
-          styleSheet.current.replaceSync(latestCss.current);
-      }
+      createStyleSheet(shadow);
       ReactDOM.flushSync(() => setShadowRoot(shadow));
     };
     queueMicrotask(() => {
       setupOrReuseShadowRoot();
     });
     return () => void setShadowRoot(null);
-  }, [templateRef, latestCss, latestShadowRoot]);
+  }, [templateRef, createStyleSheet, latestShadowRoot]);
   useLayoutEffect(() => {
     if (css && supportsAdoptedStylesheets) styleSheet.current?.replaceSync(css);
   }, [css]);
+  React.useEffect(() => {
+    let listener = () => createStyleSheet(latestShadowRoot.current);
+    window.addEventListener('appui:reparent', listener);
+    return () => {
+      window.removeEventListener('appui:reparent', listener);
+    };
+  }, [createStyleSheet, latestShadowRoot]);
   return shadowRoot;
 }

package/esm/utils/hooks/useWarningLogger.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { isUnitTest } from '../functions/dev.js';
+import { getWindow } from '../functions/dom.js';
 let _React = React;
 let ReactInternals = _React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 export const useWarningLogger = () => () => {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.14.2",
+  "version": "3.15.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -106,7 +106,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "typescript": "5",
-    "vite": "^5.1.7",
+    "vite": "~5.1.8",
     "vitest": "^1.2.1"
   },
   "peerDependencies": {
@@ -130,7 +130,7 @@
     "build:types": "tsc -p tsconfig.build.json --outDir esm && tsc -p tsconfig.build.json --outDir cjs",
     "build:styles": "vite build src/styles.js",
     "build:post": "node ./scripts/postBuild.mjs",
-    "clean:build": "rimraf esm && rimraf cjs && rimraf DEV-esm && rimraf DEV-cjs",
+    "clean:build": "rimraf esm && rimraf cjs && rimraf DEV-esm && rimraf DEV-cjs && rimraf styles.css",
     "clean:coverage": "rimraf coverage",
     "clean": "rimraf .turbo && pnpm clean:coverage && pnpm clean:build && rimraf node_modules",
     "test": "pnpm test:types && pnpm test:unit",
@@ -140,9 +140,11 @@
     "format": "prettier --config .prettierrc **/*.{tsx,ts,js} --ignore-path .gitignore --write",
     "lint": "eslint \"**/*.{js,ts,tsx}\" --max-warnings=0",
     "lint:fix": "pnpm lint --fix && node ../../scripts/copyrightLinter.js --fix \"*/**/*.{js,ts,tsx}\"",
-    "dev": "pnpm clean:build && concurrently \"pnpm dev:esm\" \"pnpm dev:cjs\" \"pnpm dev:styles\" \"pnpm dev:types\"",
-    "dev:esm": "swc src -d esm --watch --strip-leading-paths",
-    "dev:cjs": "swc src -d cjs --watch --strip-leading-paths -C module.type=commonjs",
+    "dev": "pnpm clean:build && concurrently \"pnpm dev:esm\" \"pnpm dev:dev-esm\" \"pnpm dev:cjs\" \"pnpm dev:dev-cjs\" \"pnpm dev:styles\" \"pnpm dev:types\"",
+    "dev:esm": "swc src -d esm --env-name='production' --watch --strip-leading-paths",
+    "dev:dev-esm": "swc src -d DEV-esm --env-name='development' --watch --strip-leading-paths",
+    "dev:cjs": "swc src -d cjs --env-name='production' --watch --strip-leading-paths -C module.type=commonjs",
+    "dev:dev-cjs": "swc src -d DEV-cjs --env-name='development' --watch --strip-leading-paths -C module.type=commonjs",
     "dev:types": "concurrently \"tsc -p tsconfig.build.json --outDir esm --watch --preserveWatchOutput\" \"tsc -p tsconfig.build.json --outDir cjs --watch --preserveWatchOutput\"",
     "dev:styles": "pnpm build:styles --watch"
   }