@itwin/itwinui-react 3.14.1 → 3.15.0

package/esm/core/Footer/Footer.js

@@ -5,7 +5,7 @@ import { FooterItem } from './FooterItem.js';
 import { FooterSeparator } from './FooterSeparator.js';
 import { FooterList } from './FooterList.js';
 import { Anchor } from '../Typography/Anchor.js';
-let footerTranslations = {
+let defaultTranslatedTitles = {
   cookies: 'Cookies',
   legalNotices: 'Legal notices',
   privacy: 'Privacy',
@@ -19,27 +19,27 @@ export const defaultFooterElements = [
   },
   {
     key: 'termsOfService',
-    title: footerTranslations.termsOfService,
+    title: defaultTranslatedTitles.termsOfService,
     url: 'https://connect-agreementportal.bentley.com/AgreementApp/Home/Eula/view/readonly/BentleyConnect',
   },
   {
     key: 'privacy',
-    title: footerTranslations.privacy,
+    title: defaultTranslatedTitles.privacy,
     url: 'https://www.bentley.com/en/privacy-policy',
   },
   {
     key: 'termsOfUse',
-    title: footerTranslations.termsOfUse,
+    title: defaultTranslatedTitles.termsOfUse,
     url: 'https://www.bentley.com/en/terms-of-use-and-select-online-agreement',
   },
   {
     key: 'cookies',
-    title: footerTranslations.cookies,
+    title: defaultTranslatedTitles.cookies,
     url: 'https://www.bentley.com/en/cookie-policy',
   },
   {
     key: 'legalNotices',
-    title: footerTranslations.legalNotices,
+    title: defaultTranslatedTitles.legalNotices,
     url: 'https://connect.bentley.com/Legal',
   },
 ];
@@ -48,7 +48,7 @@ export const Footer = Object.assign(
     let { children, customElements, translatedTitles, className, ...rest } =
       props;
     let titles = {
-      ...footerTranslations,
+      ...defaultTranslatedTitles,
       ...translatedTitles,
     };
     let translatedElements = defaultFooterElements.map((element) => {

package/esm/core/Overlay/Overlay.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box, isUnitTest, polymorphic } from '../../utils/index.js';
+import { Box, polymorphic } from '../../utils/index.js';
 let OverlayComponent = React.forwardRef((props, forwardedRef) => {
   let { content, children, ...rest } = props;
   return React.createElement(
@@ -14,7 +14,6 @@ let OverlayComponent = React.forwardRef((props, forwardedRef) => {
 });
 let OverlayHiddenContent = React.forwardRef((props, ref) => {
   let { children, ...rest } = props;
-  useInertPolyfill();
   return React.createElement(
     Box,
     {
@@ -32,20 +31,3 @@ export const Overlay = Object.assign(OverlayComponent, {
   HiddenContent: OverlayHiddenContent,
   Overlay: OverlayOverlay,
 });
-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/Popover/Popover.d.ts

@@ -26,7 +26,10 @@ type PopoverOptions = {
     /**
      * Middleware options.
      *
-     * By default, `flip`, `shift` and `size` are enabled.
+     * By default, `flip`, `shift`, `size`, and `hide` are enabled.
+     *
+     * If the floating content gets hidden even when it shouldn't (e.g. some custom styles interfering with the trigger's
+     * hide detection) consider disabling the `hide` middleware.
      *
      * @see https://floating-ui.com/docs/middleware
      */

package/esm/core/Popover/Popover.js

@@ -25,6 +25,7 @@ import {
   Box,
   ShadowRoot,
   cloneElementWithRef,
+  isUnitTest,
   mergeEventHandlers,
   useControlledState,
   useId,
@@ -47,21 +48,22 @@ export const usePopover = (options) => {
   } = options;
   let mergedInteractions = React.useMemo(
     () => ({
-      click: true,
-      dismiss: true,
-      hover: false,
-      focus: false,
       ...interactionsProp,
+      click: interactionsProp?.click ?? true,
+      dismiss: interactionsProp?.dismiss ?? true,
+      hover: interactionsProp?.hover ?? false,
+      focus: interactionsProp?.focus ?? false,
     }),
     [interactionsProp],
   );
   let tree = useFloatingTree();
   let middleware = React.useMemo(
     () => ({
-      flip: true,
-      shift: true,
-      size: true,
       ...options.middleware,
+      flip: options.middleware?.flip ?? true,
+      shift: options.middleware?.shift ?? true,
+      size: options.middleware?.size ?? true,
+      hide: options.middleware?.hide || !isUnitTest,
     }),
     [options.middleware],
   );
@@ -166,17 +168,23 @@ export const usePopover = (options) => {
                 maxInlineSize: `min(${2 * referenceWidth}px, 90vw)`,
               }
             : {}),
+          ...(middleware.hide &&
+            floating.middlewareData.hide?.referenceHidden && {
+              visibility: 'hidden',
+            }),
           ...userProps?.style,
         },
       }),
     [
-      floating.floatingStyles,
       interactions,
-      matchWidth,
-      referenceWidth,
+      floating.floatingStyles,
+      floating.middlewareData.hide?.referenceHidden,
       middleware.size,
+      middleware.hide,
       availableHeight,
       maxHeight,
+      matchWidth,
+      referenceWidth,
     ],
   );
   let getReferenceProps = React.useCallback(

package/esm/core/Select/Select.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CommonProps } from '../../utils/index.js';
+import type { CommonProps, PortalProps } from '../../utils/index.js';
 import { usePopover } from '../Popover/Popover.js';
 /**
  * Select component to select value from options.
@@ -182,7 +182,19 @@ export type CustomSelectProps<T> = SelectCommonProps & {
     /**
      * Props to customize Popover behavior.
      */
-    popoverProps?: Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth' | 'closeOnOutsideClick'>;
+    popoverProps?: Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth' | 'closeOnOutsideClick'> & {
+        /**
+         * Middleware options.
+         *
+         * By default, `hide` is enabled. If the floating options get hidden even when they shouldn't (e.g. some custom
+         * styles interfering with the trigger's hide detection) consider disabling the `hide` middleware.
+         *
+         * @see https://floating-ui.com/docs/middleware
+         */
+        middleware?: {
+            hide?: boolean;
+        };
+    } & Pick<PortalProps, 'portal'>;
     /**
      * Props to pass to the select button (trigger) element.
      */

package/esm/core/Select/Select.js

@@ -109,7 +109,7 @@ let CustomSelect = React.forwardRef((props, forwardedRef) => {
     multiple = false,
     triggerProps,
     status,
-    popoverProps,
+    popoverProps: { portal = true, ...popoverProps } = {},
     styleType,
     ...rest
   } = props;
@@ -303,7 +303,9 @@ let CustomSelect = React.forwardRef((props, forwardedRef) => {
     popover.open &&
       React.createElement(
         Portal,
-        null,
+        {
+          portal: portal,
+        },
         React.createElement(
           SelectListbox,
           {

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 = () => {
@@ -520,7 +545,7 @@ export const Table = (props) => {
   return React.createElement(
     TableColumnsContext.Provider,
     {
-      value: columns,
+      value: instance.columns,
     },
     React.createElement(
       Box,

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/cells/DefaultCell.js

@@ -1,15 +1,15 @@
 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';
 export const DefaultCell = (props) => {
-  let columnsProp = React.useContext(TableColumnsContext);
+  let instanceColumns = React.useContext(TableColumnsContext);
   let isCustomCell = React.useMemo(
     () =>
-      columnsProp
-        .find(({ id }) => props.cellProps.column.id === id)
-        ?.hasOwnProperty('Cell'),
-    [props.cellProps.column.id, columnsProp],
+      instanceColumns.find(({ id }) => props.cellProps.column.id === id)
+        ?.Cell !== defaultColumn.Cell,
+    [instanceColumns, props.cellProps.column.id],
   );
   let {
     cellElementProps: {

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/Table/utils.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ColumnInstance, Column } from '../../react-table/react-table.js';
+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 }: {
@@ -8,4 +8,4 @@ export declare const getSubRowStyle: ({ density, depth }: {
 }) => {
     paddingInlineStart: number;
 };
-export declare const TableColumnsContext: React.Context<Column<Record<string, unknown>>[]>;
+export declare const TableColumnsContext: React.Context<ColumnInstance<{}>[]>;

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;
@@ -233,7 +234,7 @@ let FallbackStyles = ({ root }) => {
       } catch (error) {
         console.log('Error loading styles.css locally', error);
         let css = await importCss(
-          'https://cdn.jsdelivr.net/npm/@itwin/itwinui-react@3/styles.css',
+          `https://cdn.jsdelivr.net/npm/@itwin/itwinui-react@${meta.version}/styles.css`,
         );
         document.adoptedStyleSheets = [
           ...document.adoptedStyleSheets,
@@ -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.1';
+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 = () => () => {};