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

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 3.0.0-dev.14
+
+### Major Changes
+
+- [#1626](https://github.com/iTwin/iTwinUI/pull/1626): Improved carousel accessibility and changed the markup so that the dots are present before the slides.
+- [#1469](https://github.com/iTwin/iTwinUI/pull/1469): Updated internal DOM structure in Slider.
+
+### Patch Changes
+
+- [#1632](https://github.com/iTwin/iTwinUI/pull/1632): Adjusted gap between adjacent icons in searchbox.
+
 ## 3.0.0-dev.13
 
 ### Major Changes
@@ -237,6 +248,18 @@
 - Updated dependencies:
   - @itwin/itwinui-css@2.0.0-dev.0
 
+## 2.12.14
+
+### Patch Changes
+
+- [#1643](https://github.com/iTwin/iTwinUI/pull/1643): Fixed an issue where ProgressRadial was not respecting explicit size.
+
+## 2.12.13
+
+### Patch Changes
+
+- [#1634](https://github.com/iTwin/iTwinUI/pull/1634): Fix overflow visible items count when item is larger than container.
+
 ## 2.12.12
 
 ### Patch Changes

package/cjs/core/Carousel/Carousel.d.ts

@@ -14,7 +14,8 @@ type CarouselProps = {
 };
 /**
  * The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is
- * located below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides.
+ * shown below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides; this navigation
+ * section must be present _before_ the slides in DOM order, even though it is visually shown below the slides.
  *
  * The currently shown slide can also be changed using the left/right arrow keys or by dragging on a touch device.
  *
@@ -22,20 +23,23 @@ type CarouselProps = {
  *
  * @example
  * <Carousel>
+ *   <Carousel.Navigation />
  *   <Carousel.Slider>
  *     <Carousel.Slide>...</Carousel.Slide>
  *     <Carousel.Slide>...</Carousel.Slide>
  *     <Carousel.Slide>...</Carousel.Slide>
  *   </Carousel.Slider>
- *   <Carousel.Navigation />
  * </Carousel>
  */
 export declare const Carousel: PolymorphicForwardRefComponent<"section", CarouselProps> & {
-    Slider: PolymorphicForwardRefComponent<"ol", {}>;
-    Slide: PolymorphicForwardRefComponent<"li", {
+    Slider: PolymorphicForwardRefComponent<"div", {}>;
+    Slide: PolymorphicForwardRefComponent<"div", {
         index?: number | undefined;
     }>;
-    Navigation: PolymorphicForwardRefComponent<"nav", {}> & {
+    /**
+     * Contains the dots and previous/next buttons for navigating the slides. Must be present _before_ the slides in DOM.
+     */
+    Navigation: PolymorphicForwardRefComponent<"div", {}> & {
         PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
         }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
@@ -55,6 +59,9 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
             as?: "button" | undefined;
         }>;
     };
+    /**
+     * Contains the dots for activating the slides. Must be present _before_ the slides in DOM.
+     */
     DotsList: PolymorphicForwardRefComponent<"div", {
         length?: number | undefined;
         currentIndex?: number | undefined;

package/cjs/core/Carousel/Carousel.js

@@ -38,42 +38,9 @@ const CarouselComponent = React.forwardRef((props, ref) => {
     scrollToSlide.current(userActiveIndex, {
       instant: justMounted.current,
     });
-    // re-focus the carousel for keyboard nav, but not on first mount
-    // because it shows outline and might interfere with other components
-    if (!justMounted.current) {
-      carouselRef.current?.focus({ preventScroll: true });
-    }
     justMounted.current = false;
   }, [userActiveIndex]);
   const [slideCount, setSlideCount] = React.useState(0);
-  const [keysPressed, setKeysPressed] = React.useState({});
-  const handleKeyDown = (event) => {
-    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
-      return;
-    }
-    const key = event.key;
-    if (key === 'ArrowLeft' || key === 'ArrowRight') {
-      setKeysPressed((old) => ({ ...old, [key]: true }));
-    }
-  };
-  const handleKeyUp = (event) => {
-    switch (event.key) {
-      case 'ArrowLeft': {
-        setKeysPressed((old) => ({ ...old, ArrowLeft: false }));
-        const prevIndex = (slideCount + currentIndex - 1) % slideCount;
-        scrollToSlide.current(prevIndex);
-        setCurrentIndex(prevIndex);
-        break;
-      }
-      case 'ArrowRight': {
-        setKeysPressed((old) => ({ ...old, ArrowRight: false }));
-        const nextIndex = (slideCount + currentIndex + 1) % slideCount;
-        scrollToSlide.current(nextIndex);
-        setCurrentIndex(nextIndex);
-        break;
-      }
-    }
-  };
   const userOnSlideChange = (0, index_js_1.useLatestRef)(onSlideChange);
   React.useEffect(() => {
     userOnSlideChange.current?.(currentIndex);
@@ -83,9 +50,6 @@ const CarouselComponent = React.forwardRef((props, ref) => {
     {
       as: 'section',
       'aria-roledescription': 'carousel',
-      tabIndex: 0,
-      onKeyDown: handleKeyDown,
-      onKeyUp: handleKeyUp,
       ref: refs,
       className: (0, classnames_1.default)('iui-carousel', className),
       ...rest,
@@ -99,7 +63,6 @@ const CarouselComponent = React.forwardRef((props, ref) => {
           setCurrentIndex,
           slideCount,
           setSlideCount,
-          keysPressed,
           idPrefix: id,
           isManuallyUpdating,
           scrollToSlide,
@@ -111,7 +74,8 @@ const CarouselComponent = React.forwardRef((props, ref) => {
 });
 /**
  * The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is
- * located below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides.
+ * shown below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides; this navigation
+ * section must be present _before_ the slides in DOM order, even though it is visually shown below the slides.
  *
  * The currently shown slide can also be changed using the left/right arrow keys or by dragging on a touch device.
  *
@@ -119,18 +83,24 @@ const CarouselComponent = React.forwardRef((props, ref) => {
  *
  * @example
  * <Carousel>
+ *   <Carousel.Navigation />
  *   <Carousel.Slider>
  *     <Carousel.Slide>...</Carousel.Slide>
  *     <Carousel.Slide>...</Carousel.Slide>
  *     <Carousel.Slide>...</Carousel.Slide>
  *   </Carousel.Slider>
- *   <Carousel.Navigation />
  * </Carousel>
  */
 exports.Carousel = Object.assign(CarouselComponent, {
   Slider: CarouselSlider_js_1.CarouselSlider,
   Slide: CarouselSlide_js_1.CarouselSlide,
+  /**
+   * Contains the dots and previous/next buttons for navigating the slides. Must be present _before_ the slides in DOM.
+   */
   Navigation: CarouselNavigation_js_1.CarouselNavigation,
+  /**
+   * Contains the dots for activating the slides. Must be present _before_ the slides in DOM.
+   */
   DotsList: CarouselDotsList_js_1.CarouselDotsList,
   Dot: CarouselDot_js_1.CarouselDot,
 });

package/cjs/core/Carousel/CarouselContext.d.ts

@@ -16,10 +16,6 @@ export declare const CarouselContext: React.Context<{
      * State updater for slideCount.
      */
     setSlideCount: (length: number | ((old: number) => void)) => void;
-    /**
-     * Stateful value of the left/right arrow keys currently pressed.
-     */
-    keysPressed: Record<string, boolean>;
     /**
      * Prefix used for setting id for internal carousel components.
      */

package/cjs/core/Carousel/CarouselDot.js

@@ -17,7 +17,7 @@ exports.CarouselDot = React.forwardRef((props, ref) => {
   const { isActive, isSmaller, isSmall, className, ...rest } = props;
   return React.createElement(index_js_1.ButtonBase, {
     role: 'tab',
-    tabIndex: -1,
+    tabIndex: isActive ? 0 : -1,
     className: (0, classnames_1.default)(
       'iui-carousel-navigation-dot',
       {

package/cjs/core/Carousel/CarouselDotsList.js

@@ -53,6 +53,7 @@ exports.CarouselDotsList = React.forwardRef((props, ref) => {
         context.setCurrentIndex(index);
         context.scrollToSlide.current(index);
       }
+      listRef.current?.children[index]?.focus();
       onSlideChange?.(index);
     },
     [context, onSlideChange],
@@ -105,13 +106,12 @@ exports.CarouselDotsList = React.forwardRef((props, ref) => {
           index < firstVisibleDotIndex || index > lastVisibleDotIndex;
         return React.createElement(CarouselDot_js_1.CarouselDot, {
           key: index,
-          'aria-label': `Slide ${index}`,
+          'aria-label': `Slide ${index + 1}`,
           isActive: index === currentIndex,
           onClick: () => handleSlideChange(index),
           isSmall: isSecondSmallDot,
           isSmaller: isFirstSmallDot || isClipped,
           id: idPrefix && `${idPrefix}--dot-${index}`,
-          'aria-controls': idPrefix && `${idPrefix}--slide-${index}`,
         });
       });
   }, [
@@ -138,6 +138,27 @@ exports.CarouselDotsList = React.forwardRef((props, ref) => {
       justMounted.current = false;
     }
   }, [currentIndex, firstVisibleDotIndex, slideCount, visibleCount, width]);
+  const handleKeyDown = (event) => {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+      return;
+    }
+    const key = event.key;
+    if (key === 'ArrowLeft' || key === 'ArrowRight') {
+      event.preventDefault();
+    }
+  };
+  const handleKeyUp = (event) => {
+    switch (event.key) {
+      case 'ArrowLeft': {
+        handleSlideChange((slideCount + currentIndex - 1) % slideCount);
+        break;
+      }
+      case 'ArrowRight': {
+        handleSlideChange((slideCount + currentIndex + 1) % slideCount);
+        break;
+      }
+    }
+  };
   return React.createElement(
     React.Fragment,
     null,
@@ -151,6 +172,9 @@ exports.CarouselDotsList = React.forwardRef((props, ref) => {
         role: 'tablist',
         'aria-label': 'Slides',
         ref: refs,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        tabIndex: -1,
         ...rest,
       },
       children ?? dots,

package/cjs/core/Carousel/CarouselNavigation.d.ts

@@ -6,7 +6,7 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
  *
  * `children` can be specified to override what is shown in this navigation section.
  */
-export declare const CarouselNavigation: PolymorphicForwardRefComponent<"nav", {}> & {
+export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {}> & {
     PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
     }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {

package/cjs/core/Carousel/CarouselNavigation.js

@@ -17,7 +17,6 @@ const CarouselNavigationComponent = React.forwardRef((props, ref) => {
   return React.createElement(
     index_js_1.Box,
     {
-      as: 'nav',
       className: (0, classnames_1.default)(
         'iui-carousel-navigation',
         className,
@@ -49,20 +48,14 @@ const PreviousButton = React.forwardRef((props, ref) => {
   if (!context) {
     throw new Error('CarouselNavigation should be used inside Carousel');
   }
-  const {
-    slideCount,
-    currentIndex,
-    setCurrentIndex,
-    keysPressed,
-    scrollToSlide,
-  } = context;
+  const { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
   return React.createElement(
     IconButton_js_1.IconButton,
     {
       styleType: 'borderless',
       size: 'small',
       tabIndex: -1,
-      'data-pressed': keysPressed['ArrowLeft'] || undefined,
+      'aria-label': 'Previous',
       ref: ref,
       ...props,
       onClick: (e) => {
@@ -81,20 +74,14 @@ const NextButton = React.forwardRef((props, ref) => {
   if (!context) {
     throw new Error('CarouselNavigation should be used inside Carousel');
   }
-  const {
-    slideCount,
-    currentIndex,
-    setCurrentIndex,
-    keysPressed,
-    scrollToSlide,
-  } = context;
+  const { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
   return React.createElement(
     IconButton_js_1.IconButton,
     {
       styleType: 'borderless',
       size: 'small',
       tabIndex: -1,
-      'data-pressed': keysPressed['ArrowRight'] || undefined,
+      'aria-label': 'Next',
       ref: ref,
       ...props,
       onClick: (e) => {

package/cjs/core/Carousel/CarouselSlide.d.ts

@@ -12,5 +12,5 @@ type CarouselSlideProps = {
  * It is recommended that the slide content bring its own dimensions (esp. height) and that
  * the dimensions should be the same for all slides.
  */
-export declare const CarouselSlide: PolymorphicForwardRefComponent<"li", CarouselSlideProps>;
+export declare const CarouselSlide: PolymorphicForwardRefComponent<"div", CarouselSlideProps>;
 export {};

package/cjs/core/Carousel/CarouselSlide.js

@@ -22,7 +22,7 @@ exports.CarouselSlide = React.forwardRef((props, ref) => {
   if (!context || index == null) {
     throw new Error('CarouselSlide must be used within Carousel');
   }
-  const { isManuallyUpdating, setCurrentIndex } = context;
+  const { isManuallyUpdating, currentIndex, setCurrentIndex } = context;
   const updateActiveIndexOnScroll = React.useCallback(() => {
     // only update index if scroll was triggered by browser
     if (!isManuallyUpdating.current) {
@@ -38,15 +38,25 @@ exports.CarouselSlide = React.forwardRef((props, ref) => {
   return React.createElement(
     index_js_1.Box,
     {
-      as: 'li',
       className: (0, classnames_1.default)(
         'iui-carousel-slider-item',
         className,
       ),
       role: 'tabpanel',
       'aria-roledescription': 'slide',
+      tabIndex: index === currentIndex ? 0 : undefined,
       ref: refs,
+      inert: index !== currentIndex ? '' : undefined,
       ...rest,
+      onKeyDown: (0, index_js_1.mergeEventHandlers)(
+        props.onKeyDown,
+        (event) => {
+          // prevent default browser scrolling on arrow keys because focus will get lost when slide switches
+          if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+            event.preventDefault();
+          }
+        },
+      ),
     },
     children,
   );

package/cjs/core/Carousel/CarouselSlider.d.ts

@@ -2,4 +2,4 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */
-export declare const CarouselSlider: PolymorphicForwardRefComponent<"ol", {}>;
+export declare const CarouselSlider: PolymorphicForwardRefComponent<"div", {}>;

package/cjs/core/Carousel/CarouselSlider.js

@@ -27,6 +27,7 @@ exports.CarouselSlider = React.forwardRef((props, ref) => {
         React.isValidElement(child)
           ? React.cloneElement(child, {
               id: `${idPrefix}--slide-${index}`,
+              'aria-labelledby': `${idPrefix}--dot-${index}`,
               index,
             })
           : child,
@@ -65,11 +66,10 @@ exports.CarouselSlider = React.forwardRef((props, ref) => {
   return React.createElement(
     index_js_1.Box,
     {
-      as: 'ol',
-      'aria-live': 'polite',
       className: (0, classnames_1.default)('iui-carousel-slider', className),
       ref: refs,
       onScroll: handleOnScroll,
+      tabIndex: -1,
       ...rest,
     },
     items,

package/cjs/core/Slider/Slider.d.ts

@@ -65,9 +65,9 @@ export type SliderProps = {
      */
     maxLabel?: React.ReactNode;
     /**
-     * Additional props for container `<div>` that hold the slider rail, thumbs, and tracks.
+     * Additional props for container `<div>` that hold the slider thumbs, and tracks.
      */
-    railContainerProps?: React.HTMLAttributes<HTMLDivElement>;
+    trackContainerProps?: React.HTMLAttributes<HTMLDivElement>;
     /**
      * Allows props to be passed for slider-min
      */
@@ -76,10 +76,6 @@ export type SliderProps = {
      * Allows props to be passed for slider-max
      */
     maxProps?: React.ComponentProps<'span'>;
-    /**
-     * Allows props to be passed for slider-rail
-     */
-    railProps?: React.ComponentProps<'div'>;
     /**
      * Allows props to be passed for slider-track
      */

package/cjs/core/Slider/Slider.js

@@ -90,10 +90,9 @@ exports.Slider = React.forwardRef((props, ref) => {
     onUpdate,
     thumbProps,
     className,
-    railContainerProps,
+    trackContainerProps,
     minProps,
     maxProps,
-    railProps,
     trackProps,
     tickProps,
     ticksProps,
@@ -332,12 +331,9 @@ exports.Slider = React.forwardRef((props, ref) => {
     index_js_1.Box,
     {
       ref: ref,
-      className: (0, classnames_1.default)(
-        'iui-slider-component-container',
-        `iui-slider-${orientation}`,
-        { 'iui-disabled': disabled },
-        className,
-      ),
+      className: (0, classnames_1.default)('iui-slider-container', className),
+      'data-iui-orientation': orientation,
+      'data-iui-disabled': disabled ? 'true' : undefined,
       ...rest,
     },
     minValueLabel &&
@@ -356,26 +352,17 @@ exports.Slider = React.forwardRef((props, ref) => {
     React.createElement(
       index_js_1.Box,
       {
-        as: 'div',
         ref: containerRef,
-        ...railContainerProps,
+        ...trackContainerProps,
         className: (0, classnames_1.default)(
-          'iui-slider-container',
+          'iui-slider',
           {
             'iui-grabbing': undefined !== activeThumbIndex,
           },
-          railContainerProps?.className,
+          trackContainerProps?.className,
         ),
         onPointerDown: handlePointerDownOnSlider,
       },
-      React.createElement(index_js_1.Box, {
-        as: 'div',
-        ...railProps,
-        className: (0, classnames_1.default)(
-          'iui-slider-rail',
-          railProps?.className,
-        ),
-      }),
       currentValues.map((thumbValue, index) => {
         const [minVal, maxVal] = getAllowableThumbRange(index);
         const thisThumbProps = thumbProps?.(index);
@@ -394,7 +381,6 @@ exports.Slider = React.forwardRef((props, ref) => {
           step: step,
           sliderMin: min,
           sliderMax: max,
-          orientation: orientation,
         });
       }),
       React.createElement(Track_js_1.Track, {
@@ -405,8 +391,8 @@ exports.Slider = React.forwardRef((props, ref) => {
         orientation: orientation,
         ...trackProps,
       }),
-      tickMarkArea,
     ),
+    tickMarkArea,
     maxValueLabel &&
       React.createElement(
         index_js_1.Box,

package/cjs/core/Slider/Thumb.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Tooltip } from '../Tooltip/Tooltip.js';
-import type { SliderProps } from './Slider.js';
 type ThumbProps = {
     /**
      * Thumb value.
@@ -54,7 +53,7 @@ type ThumbProps = {
      * Additional props for Thumb.
      */
     thumbProps?: React.HTMLAttributes<HTMLDivElement>;
-} & Pick<SliderProps, 'orientation'>;
+};
 /**
  * Thumb is a local component used to show and modify the values maintained by the Slider.
  * Only one Thumb can be active at a time. A Thumb is made active when the user selects

package/cjs/core/Slider/Thumb.js

@@ -30,7 +30,6 @@ const Thumb = (props) => {
     tooltipProps,
     thumbProps,
     disabled,
-    orientation,
   } = props;
   const thumbRef = React.useRef(null);
   const handleOnKeyboardEvent = React.useCallback(
@@ -97,13 +96,10 @@ const Thumb = (props) => {
     },
     React.createElement(index_js_1.Box, {
       ...rest,
-      'data-index': index,
       ref: thumbRef,
       style: {
         ...style,
-        ...(orientation === 'horizontal'
-          ? { insetInlineStart: `${lowPercent}%` }
-          : { insetBlockEnd: `${lowPercent}%` }),
+        '--iui-slider-thumb-position': `${lowPercent}%`,
       },
       className: (0, classnames_1.default)(
         'iui-slider-thumb',

package/cjs/core/Tabs/Tabs.js

@@ -10,11 +10,6 @@ const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
 const Icon_js_1 = require('../Icon/Icon.js');
-// Checking user motion preference for scroll into view animation
-const isMotionOk = () =>
-  (0, index_js_1.getWindow)()?.matchMedia?.(
-    '(prefers-reduced-motion: no-preference)',
-  )?.matches;
 const TabsWrapper = React.forwardRef((props, ref) => {
   const {
     className,
@@ -124,21 +119,19 @@ const Tab = React.forwardRef((props, forwardedRef) => {
   const { tabsWidth } = (0, index_js_1.useSafeContext)(TabListContext);
   const tabRef = React.useRef();
   const isActive = activeValue === value;
+  const isActiveRef = (0, index_js_1.useLatestRef)(isActive);
+  // Scroll to active tab only on initial render
   (0, index_js_1.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({
@@ -238,6 +231,7 @@ const Tab = React.forwardRef((props, forwardedRef) => {
       ),
       onKeyDown: (0, index_js_1.mergeEventHandlers)(props.onKeyDown, onKeyDown),
       onFocus: (0, index_js_1.mergeEventHandlers)(props.onFocus, () => {
+        tabRef.current?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
         if (focusActivationMode === 'auto' && !props.disabled) {
           setActiveValue(value);
         }

package/cjs/core/Tile/Tile.js

@@ -324,16 +324,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/cjs/core/utils/hooks/useOverflow.js

@@ -73,7 +73,9 @@ const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
     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}`],