@itwin/itwinui-react 1.23.2 → 1.26.1

package/esm/core/utils/color/ColorValue.js

@@ -121,19 +121,20 @@ var ColorValue = /** @class */ (function () {
      * This allows component builders to know if they received bad input from user.
      */
     ColorValue.fromString = function (val, defaultColorIfNotParsed) {
-        return this.fromTbgr(this.computeTbgrFromString(val, defaultColorIfNotParsed === null || defaultColorIfNotParsed === void 0 ? void 0 : defaultColorIfNotParsed.toTbgr()));
+        var _a = this.computeTbgrFromString(val, defaultColorIfNotParsed === null || defaultColorIfNotParsed === void 0 ? void 0 : defaultColorIfNotParsed.toTbgr()), tbgr = _a[0], hue = _a[1];
+        return new ColorValue(tbgr, hue);
     };
     /** Create a ColorValue from hue, saturation, lightness values.  */
     ColorValue.fromHSL = function (hsl) {
         var _a;
         var alpha = (_a = hsl.a) !== null && _a !== void 0 ? _a : 1;
-        return new ColorValue(this.computeTbgrFromHSL(hsl.h / 360, hsl.s / 100, hsl.l / 100, (1 - alpha) * 255), hsl.h);
+        return new ColorValue(this.computeTbgrFromHSL(hsl.h / 360, hsl.s / 100, hsl.l / 100, Math.round((1 - alpha) * 255)), hsl.h);
     };
     /** Create a ColorValue from an RgbColor */
     ColorValue.fromRGB = function (rgb) {
         var _a;
         var alpha = (_a = rgb.a) !== null && _a !== void 0 ? _a : 1;
-        return ColorValue.fromRgbt(rgb.r, rgb.g, rgb.b, (1 - alpha) * 255);
+        return ColorValue.fromRgbt(rgb.r, rgb.g, rgb.b, Math.round((1 - alpha) * 255));
     };
     /**
      * Create a ColorValue from an HsvColor
@@ -141,7 +142,7 @@ var ColorValue = /** @class */ (function () {
     ColorValue.fromHSV = function (hsv) {
         var _a;
         var alpha = (_a = hsv.a) !== null && _a !== void 0 ? _a : 1;
-        var transparency = (1 - alpha) * 255;
+        var transparency = Math.round((1 - alpha) * 255);
         // Check for simple case first.
         if (!hsv.s || hsv.h === -1) {
             // hue must be undefined, have no color only white
@@ -226,7 +227,12 @@ var ColorValue = /** @class */ (function () {
                     color = /^(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(components);
                     if (color) {
                         // rgb(255,0,0) rgba(255,0,0,0.5)
-                        return this.computeTbgrFromComponents(intOrPercent(color[1]), intOrPercent(color[2]), intOrPercent(color[3]), typeof color[4] === 'string' ? 255 - floatOrPercent(color[4]) : 0);
+                        return [
+                            this.computeTbgrFromComponents(intOrPercent(color[1]), intOrPercent(color[2]), intOrPercent(color[3]), typeof color[4] === 'string'
+                                ? 255 - floatOrPercent(color[4])
+                                : 0),
+                            undefined,
+                        ];
                     }
                     break;
                 case 'hsl':
@@ -234,11 +240,11 @@ var ColorValue = /** @class */ (function () {
                     color = /^(\d*\.?\d+)\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(components);
                     if (color) {
                         // hsl(120,50%,50%) hsla(120,50%,50%,0.5)
-                        var h = parseFloat(color[1]) / 360;
+                        var h = parseFloat(color[1]);
                         var s = parseInt(color[2], 10) / 100;
                         var l = parseInt(color[3], 10) / 100;
                         var t = typeof color[4] === 'string' ? 255 - floatOrPercent(color[4]) : 0;
-                        return this.computeTbgrFromHSL(h, s, l, t);
+                        return [this.computeTbgrFromHSL(h / 360, s, l, t), h];
                     }
                     break;
             }
@@ -250,19 +256,28 @@ var ColorValue = /** @class */ (function () {
             var size = hex.length;
             if (size === 3) {
                 // #ff0
-                return this.computeTbgrFromComponents(parseInt(hex.charAt(0) + hex.charAt(0), 16), parseInt(hex.charAt(1) + hex.charAt(1), 16), parseInt(hex.charAt(2) + hex.charAt(2), 16), 0);
+                return [
+                    this.computeTbgrFromComponents(parseInt(hex.charAt(0) + hex.charAt(0), 16), parseInt(hex.charAt(1) + hex.charAt(1), 16), parseInt(hex.charAt(2) + hex.charAt(2), 16), 0),
+                    undefined,
+                ];
             }
             if (size === 6) {
                 // #ff0000
-                return this.computeTbgrFromComponents(parseInt(hex.charAt(0) + hex.charAt(1), 16), parseInt(hex.charAt(2) + hex.charAt(3), 16), parseInt(hex.charAt(4) + hex.charAt(5), 16), 0);
+                return [
+                    this.computeTbgrFromComponents(parseInt(hex.charAt(0) + hex.charAt(1), 16), parseInt(hex.charAt(2) + hex.charAt(3), 16), parseInt(hex.charAt(4) + hex.charAt(5), 16), 0),
+                    undefined,
+                ];
             }
             if (size === 8) {
                 // #ff0000ff
-                return this.computeTbgrFromComponents(parseInt(hex.charAt(0) + hex.charAt(1), 16), parseInt(hex.charAt(2) + hex.charAt(3), 16), parseInt(hex.charAt(4) + hex.charAt(5), 16), 255 - parseInt(hex.charAt(6) + hex.charAt(7), 16));
+                return [
+                    this.computeTbgrFromComponents(parseInt(hex.charAt(0) + hex.charAt(1), 16), parseInt(hex.charAt(2) + hex.charAt(3), 16), parseInt(hex.charAt(4) + hex.charAt(5), 16), 255 - parseInt(hex.charAt(6) + hex.charAt(7), 16)),
+                    undefined,
+                ];
             }
         }
         if (defaultColorIfNotParsed) {
-            return defaultColorIfNotParsed;
+            return [defaultColorIfNotParsed, undefined];
         }
         throw new Error('unable to parse string into ColorValue');
     };
@@ -309,7 +324,11 @@ var ColorValue = /** @class */ (function () {
      */
     ColorValue.prototype.toHexString = function (includeAlpha) {
         if (includeAlpha) {
-            return "#" + this.getRgb(includeAlpha).toString(16);
+            var value = this.getRgb(includeAlpha);
+            if (value < 0) {
+                value = 0xffffffff + value + 1;
+            }
+            return "#" + ("00000000" + value.toString(16)).slice(-8);
         }
         return "#" + ("000000" + this.getRgb().toString(16)).slice(-6);
     };
@@ -366,40 +385,40 @@ var ColorValue = /** @class */ (function () {
     };
     /** Create an HslColor from this ColorValue */
     ColorValue.toHsl = function (tbgr) {
-        // internally h,s,l ranges are in 0.0 - 1.0
-        var col = ColorValue.getColors(tbgr);
-        col.r /= 255;
-        col.g /= 255;
-        col.b /= 255;
-        var max = Math.max(col.r, col.g, col.b);
-        var min = Math.min(col.r, col.g, col.b);
+        var _a = ColorValue.getColors(tbgr), r = _a.r, g = _a.g, b = _a.b;
+        var red = r / 255;
+        var green = g / 255;
+        var blue = b / 255;
+        var cMin = Math.min(red, green, blue);
+        var cMax = Math.max(red, green, blue);
+        var delta = cMax - cMin;
         var hue = 0;
-        var saturation;
-        var lightness = (min + max) / 2.0;
-        if (min === max) {
-            saturation = 0;
+        var saturation = 0;
+        if (0 === delta) {
+            hue = 0;
+        }
+        else if (red === cMax) {
+            hue = ((green - blue) / delta) % 6;
+        }
+        else if (green === cMax) {
+            hue = (blue - red) / delta + 2;
         }
         else {
-            var delta = max - min;
-            saturation =
-                lightness <= 0.5 ? delta / (max + min) : delta / (2 - max - min);
-            switch (max) {
-                case col.r:
-                    hue = (col.g - col.b) / delta + (col.g < col.b ? 6 : 0);
-                    break;
-                case col.g:
-                    hue = (col.b - col.r) / delta + 2;
-                    break;
-                case col.b:
-                    hue = (col.r - col.g) / delta + 4;
-                    break;
-            }
-            hue /= 6;
+            hue = (red - green) / delta + 4;
+        }
+        hue = Math.round(hue * 60);
+        if (hue < 0) {
+            hue += 360;
         }
+        var lightness = (cMax + cMin) / 2;
+        saturation = 0 === delta ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
+        // round values to 1 decimal place
+        saturation = Number((saturation * 100).toFixed(1));
+        lightness = Number((lightness * 100).toFixed(1));
         return {
-            h: Math.round(hue * 360),
-            s: Math.round(saturation * 100),
-            l: Math.round(lightness * 100),
+            h: hue,
+            s: saturation,
+            l: lightness,
             a: this.getAlpha(tbgr) / 255,
         };
     };
@@ -421,54 +440,51 @@ var ColorValue = /** @class */ (function () {
      */
     ColorValue.toHsv = function (tbgr) {
         var _a = ColorValue.getColors(tbgr), r = _a.r, g = _a.g, b = _a.b;
-        var min = r < g ? r : g;
-        if (b < min) {
-            min = b;
+        var red = r / 255;
+        var green = g / 255;
+        var blue = b / 255;
+        var cMin = Math.min(red, green, blue);
+        var cMax = Math.max(red, green, blue);
+        var delta = cMax - cMin;
+        var hue = 0;
+        if (0 === delta) {
+            hue = 0;
         }
-        var max = r > g ? r : g;
-        if (b > max) {
-            max = b;
+        else if (red === cMax) {
+            hue = ((green - blue) / delta) % 6;
         }
-        /* amount of "blackness" present */
-        var v = Math.floor((max / 255.0) * 100 + 0.5);
-        var deltaRgb = max - min;
-        var s = max !== 0.0 ? Math.floor((deltaRgb / max) * 100 + 0.5) : 0;
-        var h = 0;
-        if (s) {
-            var redDistance = (max - r) / deltaRgb;
-            var greenDistance = (max - g) / deltaRgb;
-            var blueDistance = (max - b) / deltaRgb;
-            var intermediateHue = void 0;
-            if (r === max) {
-                /* color between yellow & magenta */
-                intermediateHue = blueDistance - greenDistance;
-            }
-            else if (g === max) {
-                /* color between cyan & yellow */
-                intermediateHue = 2.0 + redDistance - blueDistance;
-            }
-            else {
-                /* color between magenta & cyan */
-                intermediateHue = 4.0 + greenDistance - redDistance;
-            }
-            /* intermediate hue is [0..6] */
-            intermediateHue *= 60;
-            if (intermediateHue < 0.0) {
-                intermediateHue += 360;
-            }
-            h = Math.floor(intermediateHue + 0.5);
-            if (h >= 360) {
-                h = 0;
-            }
+        else if (green === cMax) {
+            hue = (blue - red) / delta + 2;
         }
         else {
-            h = 0;
+            hue = (red - green) / delta + 4;
+        }
+        hue = Math.round(hue * 60);
+        if (hue < 0) {
+            hue += 360;
         }
-        return { h: h, s: s, v: v, a: this.getAlpha(tbgr) / 255 };
+        var brightness = cMax;
+        var saturation = cMax === 0 ? 0 : delta / cMax;
+        // round values to 1 decimal place
+        saturation = Number((saturation * 100).toFixed(1));
+        brightness = Number((brightness * 100).toFixed(1));
+        return {
+            h: hue,
+            s: saturation,
+            v: brightness,
+            a: this.getAlpha(tbgr) / 255,
+        };
     };
     /** True if the value of this ColorValue is the same as another ColorValue. */
     ColorValue.prototype.equals = function (other) {
-        return this._tbgr === other._tbgr && this._hue === other._hue;
+        return this._tbgr === other._tbgr;
+    };
+    ColorValue.getFormattedColorNumber = function (value, precision) {
+        if (precision === void 0) { precision = 1; }
+        if (0 === precision) {
+            Math.round(value).toString();
+        }
+        return Number(value.toFixed(precision)).toString();
     };
     /** Convert the 0xTTBBGGRR color to a string of the form "rgba(r,g,b,a)" where the color components are specified in decimal and the alpha component is a fraction. */
     ColorValue.prototype.toRgbString = function (includeAlpha) {
@@ -477,7 +493,7 @@ var ColorValue = /** @class */ (function () {
         var rgbString = rgb.r + ", " + rgb.g + ", " + rgb.b;
         if (includeAlpha) {
             var alpha = (_a = rgb.a) !== null && _a !== void 0 ? _a : 1;
-            return "rgba(" + rgbString + ", " + alpha.toFixed(2) + ")";
+            return "rgba(" + rgbString + ", " + ColorValue.getFormattedColorNumber(alpha, 2) + ")";
         }
         return "rgb(" + rgbString + ")";
     };
@@ -485,10 +501,10 @@ var ColorValue = /** @class */ (function () {
     ColorValue.prototype.toHslString = function (includeAlpha) {
         var _a, _b;
         var hsl = this.toHslColor();
-        var hslString = ((_a = this._hue) !== null && _a !== void 0 ? _a : hsl.h) + ", " + hsl.s + "%, " + hsl.l + "%";
+        var hslString = ColorValue.getFormattedColorNumber((_a = this._hue) !== null && _a !== void 0 ? _a : hsl.h) + ", " + ColorValue.getFormattedColorNumber(hsl.s) + "%, " + ColorValue.getFormattedColorNumber(hsl.l) + "%";
         if (includeAlpha) {
             var alpha = (_b = hsl.a) !== null && _b !== void 0 ? _b : 1;
-            return "hsla(" + hslString + ", " + alpha.toFixed(2) + ")";
+            return "hsla(" + hslString + ", " + ColorValue.getFormattedColorNumber(alpha, 2) + ")";
         }
         return "hsl(" + hslString + ")";
     };
@@ -499,7 +515,7 @@ var ColorValue = /** @class */ (function () {
         var hsvString = ((_a = this._hue) !== null && _a !== void 0 ? _a : hsv.h) + ", " + hsv.s + "%, " + hsv.v + "%";
         if (includeAlpha) {
             var alpha = (_b = hsv.a) !== null && _b !== void 0 ? _b : 1;
-            return "hsva(" + hsvString + ", " + alpha.toFixed(2) + ")";
+            return "hsva(" + hsvString + ", " + ColorValue.getFormattedColorNumber(alpha, 2) + ")";
         }
         return "hsv(" + hsvString + ")";
     };

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { CommonProps } from '../props';
+export declare type MiddleTextTruncationProps = {
+    /**
+     * Text to truncate.
+     */
+    text: string;
+    /**
+     * Number of characters to leave at the end.
+     * @default 6
+     */
+    endCharsCount?: number;
+} & CommonProps;
+/**
+ * Truncates text with the ellipsis in the middle,
+ * leaving defined number of chars at the end.
+ * @example
+ * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' />
+ */
+export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => JSX.Element;
+export default MiddleTextTruncation;

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

@@ -0,0 +1,49 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { useOverflow } from '../hooks/useOverflow';
+var ELLIPSIS_CHAR = '…';
+/**
+ * Truncates text with the ellipsis in the middle,
+ * leaving defined number of chars at the end.
+ * @example
+ * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' />
+ */
+export var MiddleTextTruncation = function (props) {
+    var text = props.text, _a = props.endCharsCount, endCharsCount = _a === void 0 ? 6 : _a, style = props.style, rest = __rest(props, ["text", "endCharsCount", "style"]);
+    var _b = useOverflow(text), ref = _b[0], visibleCount = _b[1];
+    var truncatedText = React.useMemo(function () {
+        if (visibleCount < text.length) {
+            return "" + text.substr(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length) + ELLIPSIS_CHAR + text.substr(text.length - endCharsCount);
+        }
+        else {
+            return text;
+        }
+    }, [endCharsCount, text, visibleCount]);
+    return (React.createElement("span", __assign({ style: __assign({ display: 'flex', minWidth: 0, flexGrow: 1, whiteSpace: 'nowrap' }, style), ref: ref }, rest), truncatedText));
+};
+export default MiddleTextTruncation;

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

@@ -3,3 +3,4 @@ export * from './FocusTrap';
 export * from './InputContainer';
 export * from './icons';
 export * from './WithCSSTransition';
+export * from './MiddleTextTruncation';

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

@@ -7,3 +7,4 @@ export * from './FocusTrap';
 export * from './InputContainer';
 export * from './icons';
 export * from './WithCSSTransition';
+export * from './MiddleTextTruncation';

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

@@ -2,5 +2,6 @@ export * from './useEventListener';
 export * from './useMergedRefs';
 export * from './useOverflow';
 export * from './useResizeObserver';
+export * from './useContainerWidth';
 export * from './useTheme';
 export * from './useIntersection';

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

@@ -6,5 +6,6 @@ export * from './useEventListener';
 export * from './useMergedRefs';
 export * from './useOverflow';
 export * from './useResizeObserver';
+export * from './useContainerWidth';
 export * from './useTheme';
 export * from './useIntersection';

package/esm/core/utils/hooks/useContainerWidth.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Hook that returns the width of an element in three stages:
+ *  - initialized with 0
+ *  - immediately set to element's initial width as soon as it's mounted
+ *  - update to new width every time it changes (using `useResizeObserver` hook)
+ *
+ * @private
+ * @param watchResizes If false, ResizeObserver will not be connected and only the initial width will be returned
+ * @returns [ref to attach to the element, stateful width of the element]
+ *
+ * @example
+ * const [ref, width] = useContainerWidth();
+ * ... // do something with width
+ * return <div ref={ref}>...</div>;
+ */
+export declare const useContainerWidth: <T extends HTMLElement>(watchResizes?: boolean) => readonly [(instance: HTMLElement | null) => void, number];
+export default useContainerWidth;

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

@@ -0,0 +1,43 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { useMergedRefs } from './useMergedRefs';
+import { useResizeObserver } from './useResizeObserver';
+/**
+ * Hook that returns the width of an element in three stages:
+ *  - initialized with 0
+ *  - immediately set to element's initial width as soon as it's mounted
+ *  - update to new width every time it changes (using `useResizeObserver` hook)
+ *
+ * @private
+ * @param watchResizes If false, ResizeObserver will not be connected and only the initial width will be returned
+ * @returns [ref to attach to the element, stateful width of the element]
+ *
+ * @example
+ * const [ref, width] = useContainerWidth();
+ * ... // do something with width
+ * return <div ref={ref}>...</div>;
+ */
+export var useContainerWidth = function (watchResizes) {
+    if (watchResizes === void 0) { watchResizes = true; }
+    var _a = React.useState(0), contentWidth = _a[0], setContentWidth = _a[1];
+    var ref = React.useCallback(function (element) {
+        if (!element) {
+            return;
+        }
+        setContentWidth(element.getBoundingClientRect().width);
+    }, []);
+    var updateWidth = React.useCallback(function (_a) {
+        var width = _a.width;
+        return setContentWidth(width);
+    }, []);
+    var _b = useResizeObserver(updateWidth), resizeRef = _b[0], resizeObserver = _b[1];
+    if (!watchResizes) {
+        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+    }
+    var refs = useMergedRefs(ref, watchResizes ? resizeRef : undefined);
+    return [refs, contentWidth];
+};
+export default useContainerWidth;

package/esm/core/utils/hooks/useOverflow.d.ts

@@ -20,4 +20,4 @@ import React from 'react';
  *   </div>
  * );
  */
-export declare const useOverflow: <T extends HTMLElement>(items: React.ReactNode[], disabled?: boolean) => readonly [(instance: T | null) => void, number];
+export declare const useOverflow: <T extends HTMLElement>(items: React.ReactNode[] | string, disabled?: boolean) => readonly [(instance: T | null) => void, number];

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

@@ -5,6 +5,7 @@
 import React from 'react';
 import { useMergedRefs } from './useMergedRefs';
 import { useResizeObserver } from './useResizeObserver';
+var STARTING_MAX_ITEMS_COUNT = 20;
 /**
  * Hook that observes the size of an element and returns the number of items
  * that should be visible based on the width of the container element.
@@ -29,19 +30,27 @@ import { useResizeObserver } from './useResizeObserver';
 export var useOverflow = function (items, disabled) {
     if (disabled === void 0) { disabled = false; }
     var containerRef = React.useRef(null);
-    var _a = React.useState(items.length), visibleCount = _a[0], setVisibleCount = _a[1];
-    var overflowBreakpoints = React.useRef([]);
-    React.useLayoutEffect(function () {
-        setVisibleCount(items.length);
-        overflowBreakpoints.current = [];
-    }, [items]);
+    var _a = React.useState(function () {
+        return disabled ? items.length : Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
+    }), visibleCount = _a[0], setVisibleCount = _a[1];
+    var needsFullRerender = React.useRef(true);
     var _b = React.useState(0), containerWidth = _b[0], setContainerWidth = _b[1];
+    var previousContainerWidth = React.useRef(0);
     var updateContainerWidth = React.useCallback(function (_a) {
         var width = _a.width;
         return setContainerWidth(width);
     }, []);
     var _c = useResizeObserver(updateContainerWidth), resizeRef = _c[0], observer = _c[1];
     var resizeObserverRef = React.useRef(observer);
+    React.useLayoutEffect(function () {
+        if (disabled) {
+            setVisibleCount(items.length);
+        }
+        else {
+            setVisibleCount(Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
+            needsFullRerender.current = true;
+        }
+    }, [containerWidth, disabled, items]);
     var mergedRefs = useMergedRefs(containerRef, resizeRef);
     React.useLayoutEffect(function () {
         var _a;
@@ -51,18 +60,22 @@ export var useOverflow = function (items, disabled) {
         }
         var availableWidth = containerRef.current.offsetWidth;
         var requiredWidth = containerRef.current.scrollWidth;
-        // hide items when there's no space available
-        if (availableWidth < requiredWidth && visibleCount > 1) {
-            setVisibleCount(function (count) { return count - 1; });
-            overflowBreakpoints.current.push(availableWidth);
+        if (availableWidth < requiredWidth) {
+            var avgItemWidth = requiredWidth / visibleCount;
+            var visibleItems = Math.floor(availableWidth / avgItemWidth);
+            setVisibleCount(visibleItems);
         }
-        // restore items when there's enough space again
-        else if (overflowBreakpoints.current.length > 0 &&
-            availableWidth >
-                overflowBreakpoints.current[overflowBreakpoints.current.length - 1]) {
-            setVisibleCount(function (count) { return count + 1; });
-            overflowBreakpoints.current.pop();
+        else if (needsFullRerender.current) {
+            var childrenWidth = Array.from(containerRef.current.children).reduce(function (sum, child) { return sum + child.offsetWidth; }, 0);
+            var avgItemWidth = childrenWidth / visibleCount;
+            var visibleItems = Math.floor(availableWidth / avgItemWidth);
+            // Doubling the visible items to overflow the container. Just to be safe.
+            setVisibleCount(Math.min(items.length, visibleItems * 2));
         }
-    }, [containerWidth, visibleCount, disabled]);
+        needsFullRerender.current = false;
+    }, [containerWidth, visibleCount, disabled, items.length]);
+    React.useLayoutEffect(function () {
+        previousContainerWidth.current = containerWidth;
+    }, [containerWidth]);
     return [mergedRefs, visibleCount];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.23.2",
+  "version": "1.26.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -40,7 +40,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^0.38.0",
+    "@itwin/itwinui-css": "^0.39.1",
     "@itwin/itwinui-icons-react": "^1.1.1",
     "@itwin/itwinui-illustrations-react": "^1.0.1",
     "@tippyjs/react": "^4.2.5",