@itwin/itwinui-react 1.23.2 → 1.26.1

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

@@ -127,19 +127,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
@@ -147,7 +148,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
@@ -232,7 +233,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':
@@ -240,11 +246,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;
             }
@@ -256,19 +262,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');
     };
@@ -315,7 +330,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);
     };
@@ -372,40 +391,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,
         };
     };
@@ -427,54 +446,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) {
@@ -483,7 +499,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 + ")";
     };
@@ -491,10 +507,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 + ")";
     };
@@ -505,7 +521,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/cjs/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/cjs/core/utils/components/MiddleTextTruncation.js

@@ -0,0 +1,56 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MiddleTextTruncation = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var useOverflow_1 = require("../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' />
+ */
+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 = (0, useOverflow_1.useOverflow)(text), ref = _b[0], visibleCount = _b[1];
+    var truncatedText = react_1.default.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_1.default.createElement("span", __assign({ style: __assign({ display: 'flex', minWidth: 0, flexGrow: 1, whiteSpace: 'nowrap' }, style), ref: ref }, rest), truncatedText));
+};
+exports.MiddleTextTruncation = MiddleTextTruncation;
+exports.default = exports.MiddleTextTruncation;

package/cjs/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/cjs/core/utils/components/index.js

@@ -19,3 +19,4 @@ __exportStar(require("./FocusTrap"), exports);
 __exportStar(require("./InputContainer"), exports);
 __exportStar(require("./icons"), exports);
 __exportStar(require("./WithCSSTransition"), exports);
+__exportStar(require("./MiddleTextTruncation"), exports);

package/cjs/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/cjs/core/utils/hooks/index.js

@@ -18,5 +18,6 @@ __exportStar(require("./useEventListener"), exports);
 __exportStar(require("./useMergedRefs"), exports);
 __exportStar(require("./useOverflow"), exports);
 __exportStar(require("./useResizeObserver"), exports);
+__exportStar(require("./useContainerWidth"), exports);
 __exportStar(require("./useTheme"), exports);
 __exportStar(require("./useIntersection"), exports);

package/cjs/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/cjs/core/utils/hooks/useContainerWidth.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContainerWidth = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var useMergedRefs_1 = require("./useMergedRefs");
+var useResizeObserver_1 = require("./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>;
+ */
+var useContainerWidth = function (watchResizes) {
+    if (watchResizes === void 0) { watchResizes = true; }
+    var _a = react_1.default.useState(0), contentWidth = _a[0], setContentWidth = _a[1];
+    var ref = react_1.default.useCallback(function (element) {
+        if (!element) {
+            return;
+        }
+        setContentWidth(element.getBoundingClientRect().width);
+    }, []);
+    var updateWidth = react_1.default.useCallback(function (_a) {
+        var width = _a.width;
+        return setContentWidth(width);
+    }, []);
+    var _b = (0, useResizeObserver_1.useResizeObserver)(updateWidth), resizeRef = _b[0], resizeObserver = _b[1];
+    if (!watchResizes) {
+        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+    }
+    var refs = (0, useMergedRefs_1.useMergedRefs)(ref, watchResizes ? resizeRef : undefined);
+    return [refs, contentWidth];
+};
+exports.useContainerWidth = useContainerWidth;
+exports.default = exports.useContainerWidth;

package/cjs/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/cjs/core/utils/hooks/useOverflow.js

@@ -11,6 +11,7 @@ exports.useOverflow = void 0;
 var react_1 = __importDefault(require("react"));
 var useMergedRefs_1 = require("./useMergedRefs");
 var useResizeObserver_1 = require("./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.
@@ -35,19 +36,27 @@ var useResizeObserver_1 = require("./useResizeObserver");
 var useOverflow = function (items, disabled) {
     if (disabled === void 0) { disabled = false; }
     var containerRef = react_1.default.useRef(null);
-    var _a = react_1.default.useState(items.length), visibleCount = _a[0], setVisibleCount = _a[1];
-    var overflowBreakpoints = react_1.default.useRef([]);
-    react_1.default.useLayoutEffect(function () {
-        setVisibleCount(items.length);
-        overflowBreakpoints.current = [];
-    }, [items]);
+    var _a = react_1.default.useState(function () {
+        return disabled ? items.length : Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
+    }), visibleCount = _a[0], setVisibleCount = _a[1];
+    var needsFullRerender = react_1.default.useRef(true);
     var _b = react_1.default.useState(0), containerWidth = _b[0], setContainerWidth = _b[1];
+    var previousContainerWidth = react_1.default.useRef(0);
     var updateContainerWidth = react_1.default.useCallback(function (_a) {
         var width = _a.width;
         return setContainerWidth(width);
     }, []);
     var _c = (0, useResizeObserver_1.useResizeObserver)(updateContainerWidth), resizeRef = _c[0], observer = _c[1];
     var resizeObserverRef = react_1.default.useRef(observer);
+    react_1.default.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 = (0, useMergedRefs_1.useMergedRefs)(containerRef, resizeRef);
     react_1.default.useLayoutEffect(function () {
         var _a;
@@ -57,19 +66,23 @@ 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_1.default.useLayoutEffect(function () {
+        previousContainerWidth.current = containerWidth;
+    }, [containerWidth]);
     return [mergedRefs, visibleCount];
 };
 exports.useOverflow = useOverflow;

package/esm/core/Buttons/Button/Button.d.ts

@@ -43,7 +43,7 @@ export declare const Button: React.ForwardRefExoticComponent<{
      * Use 'borderless' to hide outline.
      * @default 'default'
      */
-    styleType?: "cta" | "high-visibility" | "default" | "borderless" | undefined;
+    styleType?: "default" | "cta" | "high-visibility" | "borderless" | undefined;
     /**
      * Icon shown before the main button content.
      */