@itwin/itwinui-react 3.0.0-dev.13 → 3.0.0-dev.15

package/esm/core/Tabs/Tabs.js

@@ -16,12 +16,9 @@ import {
   mergeEventHandlers,
   useControlledState,
   useId,
-  getWindow,
+  useLatestRef,
 } from '../utils/index.js';
 import { Icon } from '../Icon/Icon.js';
-// Checking user motion preference for scroll into view animation
-const isMotionOk = () =>
-  getWindow()?.matchMedia?.('(prefers-reduced-motion: no-preference)')?.matches;
 const TabsWrapper = React.forwardRef((props, ref) => {
   const {
     className,
@@ -123,21 +120,19 @@ const Tab = React.forwardRef((props, forwardedRef) => {
   const { tabsWidth } = useSafeContext(TabListContext);
   const tabRef = React.useRef();
   const isActive = activeValue === value;
+  const isActiveRef = useLatestRef(isActive);
+  // Scroll to active tab only on initial render
   useIsomorphicLayoutEffect(() => {
-    if (isActive) {
-      if (orientation === 'horizontal') {
-        tabRef.current?.scrollIntoView({
-          inline: 'center',
-          behavior: isMotionOk() ? 'smooth' : 'auto',
-        });
-      } else {
-        tabRef.current?.scrollIntoView({
-          block: 'center',
-          behavior: isMotionOk() ? 'smooth' : 'auto',
-        });
-      }
+    if (isActiveRef.current) {
+      tabRef.current?.parentElement?.scrollTo({
+        [orientation === 'horizontal' ? 'left' : 'top']:
+          tabRef.current?.[
+            orientation === 'horizontal' ? 'offsetLeft' : 'offsetTop'
+          ] - 4,
+        behavior: 'instant', // not using 'smooth' to reduce layout shift on page load
+      });
     }
-  }, [isActive]);
+  }, []);
   const updateStripe = () => {
     const currentTabRect = tabRef.current?.getBoundingClientRect();
     setStripeProperties({
@@ -231,6 +226,7 @@ const Tab = React.forwardRef((props, forwardedRef) => {
       onClick: mergeEventHandlers(props.onClick, () => setActiveValue(value)),
       onKeyDown: mergeEventHandlers(props.onKeyDown, onKeyDown),
       onFocus: mergeEventHandlers(props.onFocus, () => {
+        tabRef.current?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
         if (focusActivationMode === 'auto' && !props.disabled) {
           setActiveValue(value);
         }

package/esm/core/ThemeProvider/ThemeProvider.d.ts

@@ -17,9 +17,10 @@ type RootProps = {
      * This can cause a flash of incorrect theme on first render.
      *
      * The 'inherit' option is intended to be used by packages, to enable incremental adoption
-     * of iTwinUI v2 in app that might be using v1 in other places.
+     * of iTwinUI while respecting the theme set by the consuming app. It will fall back to 'light'
+     * if no parent theme is found. Additionally, it will attempt to inherit the `portalContainer` if possible.
      *
-     * @default 'light'
+     * @default 'inherit'
      */
     theme?: ThemeType | 'inherit';
     themeOptions?: Pick<ThemeOptions, 'highContrast'> & {

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -50,12 +50,19 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
     portalContainer: portalContainerProp,
     ...rest
   } = props;
+  const [parentTheme, rootRef, parentContext] = useParentTheme();
+  const theme = themeProp === 'inherit' ? parentTheme || 'light' : themeProp;
+  /**
+   * We will portal our portal container into `portalContainer` prop (if specified),
+   * or inherit `portalContainer` from context (if also inheriting theme).
+   */
+  const portaledPortalContainer =
+    portalContainerProp ||
+    (themeProp === 'inherit' ? parentContext?.portalContainer : undefined);
   const [portalContainer, setPortalContainer] = useControlledState(
     null,
-    portalContainerProp,
+    portaledPortalContainer,
   );
-  const [parentTheme, rootRef] = useParentTheme();
-  const theme = themeProp === 'inherit' ? parentTheme || 'light' : themeProp;
   const shouldApplyBackground = themeOptions?.applyBackground ?? !parentTheme;
   const contextValue = React.useMemo(
     () => ({ theme, themeOptions, portalContainer }),
@@ -79,14 +86,14 @@ export const ThemeProvider = React.forwardRef((props, forwardedRef) => {
         ToastProvider,
         null,
         children,
-        portalContainerProp
+        portaledPortalContainer
           ? ReactDOM.createPortal(
               React.createElement(Toaster, null),
-              portalContainerProp,
+              portaledPortalContainer,
             )
           : React.createElement(
               'div',
-              { ref: setPortalContainer },
+              { ref: setPortalContainer, style: { display: 'contents' } },
               React.createElement(Toaster, null),
             ),
       ),
@@ -144,5 +151,5 @@ const useParentTheme = () => {
           ?.getAttribute('data-iui-theme'),
     );
   }, []);
-  return [parentContext?.theme ?? parentThemeState, rootRef];
+  return [parentContext?.theme ?? parentThemeState, rootRef, parentContext];
 };

package/esm/core/Tile/Tile.js

@@ -308,16 +308,17 @@ const TileComponent = React.forwardRef((props, forwardedRef) => {
           : name,
       ),
     ),
-    React.createElement(
-      TileThumbnailArea,
-      null,
-      typeof thumbnail !== 'string'
-        ? React.createElement(TileThumbnailPicture, null, thumbnail)
-        : React.createElement(TileThumbnailPicture, { url: thumbnail }),
-      badge && React.createElement(TileBadgeContainer, null, badge),
-      leftIcon && React.createElement(TileTypeIndicator, null, leftIcon),
-      rightIcon && React.createElement(TileQuickAction, null, rightIcon),
-    ),
+    thumbnail &&
+      React.createElement(
+        TileThumbnailArea,
+        null,
+        typeof thumbnail !== 'string'
+          ? React.createElement(TileThumbnailPicture, null, thumbnail)
+          : React.createElement(TileThumbnailPicture, { url: thumbnail }),
+        badge && React.createElement(TileBadgeContainer, null, badge),
+        leftIcon && React.createElement(TileTypeIndicator, null, leftIcon),
+        rightIcon && React.createElement(TileQuickAction, null, rightIcon),
+      ),
     React.createElement(
       TileContentArea,
       null,

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

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { CSSTransition } from 'react-transition-group';
+import styles from '../../../styles.js';
 export const WithCSSTransition = (props) => {
   const { in: visible, dimension = 'height', children, ...rest } = props;
   const expandedSize = React.useRef(0);
@@ -32,7 +33,12 @@ export const WithCSSTransition = (props) => {
         node.style[`min${dimensionCamelCase}`] = 'initial';
         node.style[dimension] = '0px';
       },
-      classNames: 'iui',
+      classNames: {
+        enter: styles['iui-enter'],
+        enterActive: styles['iui-enter-active'],
+        exit: styles['iui-exit'],
+        exitActive: styles['iui-exit-active'],
+      },
       ...rest,
     },
     React.isValidElement(children)

package/esm/core/utils/hooks/useOverflow.js

@@ -68,7 +68,9 @@ export const useOverflow = (
     if (availableSize < requiredSize) {
       const avgItemSize = requiredSize / visibleCount;
       const visibleItems = Math.floor(availableSize / avgItemSize);
-      setVisibleCount(visibleItems);
+      /* When first item is larger than the container - visibleItems count is 0,
+            We can assume that at least some part of the first item is visible and return 1. */
+      setVisibleCount(visibleItems > 0 ? visibleItems : 1);
     } else if (needsFullRerender.current) {
       const childrenSize = Array.from(containerRef.current.children).reduce(
         (sum, child) => sum + child[`offset${dimension}`],

package/esm/styles.js

@@ -71,9 +71,7 @@ const styles = {
   'iui-color-selection-wrapper': '_iui3-color-selection-wrapper',
   'iui-color-field': '_iui3-color-field',
   'iui-hue-slider': '_iui3-hue-slider',
-  'iui-slider-container': '_iui3-slider-container',
-  'iui-slider-rail': '_iui3-slider-rail',
-  'iui-slider-thumb': '_iui3-slider-thumb',
+  'iui-slider': '_iui3-slider',
   'iui-opacity-slider': '_iui3-opacity-slider',
   'iui-color-dot': '_iui3-color-dot',
   'iui-date-picker': '_iui3-date-picker',
@@ -214,10 +212,10 @@ const styles = {
   'iui-overlay-exiting': '_iui3-overlay-exiting',
   closeAnimation,
   'iui-progress-indicator-radial': '_iui3-progress-indicator-radial',
-  'iui-uktpgli': '_iui3-uktpgli',
+  'iui-uodwwa8': '_iui3-uodwwa8',
   'iui-progress-indicator-linear-label':
     '_iui3-progress-indicator-linear-label',
-  'iui-uktpgmg': '_iui3-uktpgmg',
+  'iui-uodwwal': '_iui3-uodwwal',
   'iui-radio': '_iui3-radio',
   'iui-radio-tile': '_iui3-radio-tile',
   'iui-radio-tile-icon': '_iui3-radio-tile-icon',
@@ -229,6 +227,7 @@ const styles = {
   'iui-expandable-searchbox': '_iui3-expandable-searchbox',
   'iui-searchbox-open-button': '_iui3-searchbox-open-button',
   'iui-search-icon': '_iui3-search-icon',
+  'iui-search-input': '_iui3-search-input',
   'iui-placeholder': '_iui3-placeholder',
   'iui-select-tag': '_iui3-select-tag',
   'iui-select-tag-label': '_iui3-select-tag-label',
@@ -256,15 +255,14 @@ const styles = {
     '_iui3-side-navigation-submenu-header-actions',
   'iui-side-navigation-wrapper': '_iui3-side-navigation-wrapper',
   'iui-skip-to-content-link': '_iui3-skip-to-content-link',
-  'iui-slider-component-container': '_iui3-slider-component-container',
-  'iui-slider-track': '_iui3-slider-track',
+  'iui-slider-container': '_iui3-slider-container',
   'iui-slider-min': '_iui3-slider-min',
   'iui-slider-max': '_iui3-slider-max',
+  'iui-slider-ticks': '_iui3-slider-ticks',
   'iui-slider-tick': '_iui3-slider-tick',
+  'iui-slider-track': '_iui3-slider-track',
+  'iui-slider-thumb': '_iui3-slider-thumb',
   'iui-grabbing': '_iui3-grabbing',
-  'iui-slider-ticks': '_iui3-slider-ticks',
-  'iui-slider-horizontal': '_iui3-slider-horizontal',
-  'iui-slider-vertical': '_iui3-slider-vertical',
   'iui-stepper': '_iui3-stepper',
   'iui-stepper-step': '_iui3-stepper-step',
   'iui-current': '_iui3-current',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.0.0-dev.13",
+  "version": "3.0.0-dev.15",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -83,7 +83,7 @@
     "tslib": "^2.6.0"
   },
   "devDependencies": {
-    "@itwin/itwinui-css": "^2.0.0-dev.12",
+    "@itwin/itwinui-css": "^2.0.0-dev.13",
     "@itwin/itwinui-illustrations-react": "^2.1.0",
     "@itwin/itwinui-variables": "3.0.0-dev.1",
     "@swc/cli": "^0.1.62",