@instructure/ui-truncate-list 11.7.3-snapshot-7 → 11.7.3-snapshot-26

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
+## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
 
-**Note:** Version bump only for package @instructure/ui-truncate-list
+
+### Bug Fixes
+
+* **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
 
 
 

package/es/TruncateList/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _TruncateList;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -37,93 +37,50 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 category: components/utilities
 ---
 **/
-let TruncateList = (_dec = withStyle(generateStyle, null), _dec(_class = (_TruncateList = class TruncateList extends Component {
+let TruncateList = (_dec = withStyle(generateStyle, null), _dec(_class = class TruncateList extends Component {
+  static displayName = "TruncateList";
+  static componentId = 'TruncateList';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    itemSpacing: '0',
+    debounce: 300
+  };
+  ref = null;
+  _menuTriggerRef = null;
+  _debouncedHandleResize;
+  _resizeListener;
+  handleRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
   constructor(props) {
     super(props);
-    this.ref = null;
-    this._menuTriggerRef = null;
-    this._debouncedHandleResize = void 0;
-    this._resizeListener = void 0;
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-    this.measureItems = () => {
-      const _this$props = this.props,
-        fixMenuTriggerWidth = _this$props.fixMenuTriggerWidth,
-        itemSpacing = _this$props.itemSpacing;
-      const itemSpacingPx = px(itemSpacing);
-      const menuTriggerWidthPx = px(fixMenuTriggerWidth || this.state.menuTriggerWidth);
-      let visibleItemsCount = 0;
-      if (this.ref) {
-        var _style$paddingInlineS, _style$paddingInlineE;
-        const _getBoundingClientRec = getBoundingClientRect(this.ref),
-          navWidth = _getBoundingClientRec.width;
-        const style = getCSSStyleDeclaration(this.ref);
-        const paddingInlineStart = (_style$paddingInlineS = style === null || style === void 0 ? void 0 : style.paddingInlineStart) !== null && _style$paddingInlineS !== void 0 ? _style$paddingInlineS : '0';
-        const paddingInlineEnd = (_style$paddingInlineE = style === null || style === void 0 ? void 0 : style.paddingInlineEnd) !== null && _style$paddingInlineE !== void 0 ? _style$paddingInlineE : '0';
-        const navWidthWithoutPadding = navWidth - px(paddingInlineStart) - px(paddingInlineEnd);
-        const itemWidths = Array.from(this.ref.getElementsByTagName('li')).map(item => {
-          const _getBoundingClientRec2 = getBoundingClientRect(item),
-            width = _getBoundingClientRec2.width;
-          return width;
-        });
-        let currentWidth = 0;
-        for (let i = 0; i < itemWidths.length; i++) {
-          currentWidth += itemWidths[i];
-
-          // for the last item we don't need to calculate with the menu trigger
-          const maxWidth = i === itemWidths.length - 1 ? navWidthWithoutPadding : navWidthWithoutPadding - (menuTriggerWidthPx + itemSpacingPx);
-          if (currentWidth <= maxWidth) {
-            visibleItemsCount++;
-          } else {
-            break;
-          }
-        }
-      }
-      return {
-        visibleItemsCount
-      };
-    };
-    this.handleResize = () => {
-      this.setState({
-        isMeasuring: true
-      }, () => {
-        const _this$measureItems = this.measureItems(),
-          visibleItemsCount = _this$measureItems.visibleItemsCount;
-        if (typeof this.props.onUpdate === 'function') {
-          this.props.onUpdate({
-            visibleItemsCount
-          });
-        }
-        this.setState({
-          isMeasuring: false
-        });
-      });
-    };
     this.state = {
       isMeasuring: false,
-      menuTriggerWidth: void 0
+      menuTriggerWidth: undefined
     };
   }
   componentDidMount() {
-    var _this$props$makeStyle, _this$props2;
-    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
-    const _getBoundingClientRec3 = getBoundingClientRect(this.ref),
-      origWidth = _getBoundingClientRec3.width;
+    this.props.makeStyles?.();
+    const {
+      width: origWidth
+    } = getBoundingClientRect(this.ref);
     this._debouncedHandleResize = debounce(this.handleResize, this.props.debounce, {
       leading: true,
       trailing: true
     });
     this._resizeListener = new ResizeObserver(entries => {
       for (const entry of entries) {
-        const width = entry.contentRect.width;
+        const {
+          width
+        } = entry.contentRect;
         if (origWidth !== width) {
-          var _this$_debouncedHandl;
-          (_this$_debouncedHandl = this._debouncedHandleResize) === null || _this$_debouncedHandl === void 0 ? void 0 : _this$_debouncedHandl.call(this);
+          this._debouncedHandleResize?.();
         }
       }
     });
@@ -133,17 +90,14 @@ let TruncateList = (_dec = withStyle(generateStyle, null), _dec(_class = (_Trunc
     this.setState({
       menuTriggerWidth
     }, () => {
-      var _this$_resizeListener, _this$_debouncedHandl2;
-      (_this$_resizeListener = this._resizeListener) === null || _this$_resizeListener === void 0 ? void 0 : _this$_resizeListener.observe(this.ref);
-      (_this$_debouncedHandl2 = this._debouncedHandleResize) === null || _this$_debouncedHandl2 === void 0 ? void 0 : _this$_debouncedHandl2.call(this);
+      this._resizeListener?.observe(this.ref);
+      this._debouncedHandleResize?.();
     });
   }
   componentDidUpdate(prevProps, prevState) {
-    var _this$props$makeStyle2, _this$props3;
-    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    this.props.makeStyles?.();
     if (prevProps.fixMenuTriggerWidth !== this.props.fixMenuTriggerWidth || prevProps.itemSpacing !== this.props.itemSpacing) {
-      var _this$_debouncedHandl3;
-      (_this$_debouncedHandl3 = this._debouncedHandleResize) === null || _this$_debouncedHandl3 === void 0 ? void 0 : _this$_debouncedHandl3.call(this);
+      this._debouncedHandleResize?.();
     }
     if (this.ref && prevState.isMeasuring && prevState.isMeasuring !== this.state.isMeasuring) {
       const menuTriggerWidth = this.calcMenuTriggerWidth();
@@ -151,8 +105,7 @@ let TruncateList = (_dec = withStyle(generateStyle, null), _dec(_class = (_Trunc
         this.setState({
           menuTriggerWidth
         }, () => {
-          var _this$_debouncedHandl4;
-          (_this$_debouncedHandl4 = this._debouncedHandleResize) === null || _this$_debouncedHandl4 === void 0 ? void 0 : _this$_debouncedHandl4.call(this);
+          this._debouncedHandleResize?.();
         });
       }
     }
@@ -169,10 +122,13 @@ let TruncateList = (_dec = withStyle(generateStyle, null), _dec(_class = (_Trunc
     return Children.toArray(this.props.children);
   }
   get visibleChildren() {
-    const visibleItemsCount = this.props.visibleItemsCount;
-    const _this$state = this.state,
-      isMeasuring = _this$state.isMeasuring,
-      menuTriggerWidth = _this$state.menuTriggerWidth;
+    const {
+      visibleItemsCount
+    } = this.props;
+    const {
+      isMeasuring,
+      menuTriggerWidth
+    } = this.state;
 
     // for the first render we need to measure the trigger width
     if (typeof menuTriggerWidth === 'undefined') {
@@ -182,32 +138,97 @@ let TruncateList = (_dec = withStyle(generateStyle, null), _dec(_class = (_Trunc
     return isMeasuring ? this.childrenArray : visibleChildren;
   }
   get hiddenChildren() {
-    const isMeasuring = this.state.isMeasuring;
+    const {
+      isMeasuring
+    } = this.state;
     return isMeasuring ? [] : this.childrenArray.splice(this.visibleChildren.length, this.childrenArray.length);
   }
   calcMenuTriggerWidth() {
-    const fixMenuTriggerWidth = this.props.fixMenuTriggerWidth;
+    const {
+      fixMenuTriggerWidth
+    } = this.props;
     if (!this._menuTriggerRef) {
       return 0;
     }
     if (fixMenuTriggerWidth) {
       return px(fixMenuTriggerWidth);
     }
-    const children = this._menuTriggerRef.children;
+    const {
+      children
+    } = this._menuTriggerRef;
     let width = 0;
     Array.from(children).forEach(child => {
       width += getBoundingClientRect(child).width;
     });
     return width;
   }
+  measureItems = () => {
+    const {
+      fixMenuTriggerWidth,
+      itemSpacing
+    } = this.props;
+    const itemSpacingPx = px(itemSpacing);
+    const menuTriggerWidthPx = px(fixMenuTriggerWidth || this.state.menuTriggerWidth);
+    let visibleItemsCount = 0;
+    if (this.ref) {
+      const {
+        width: navWidth
+      } = getBoundingClientRect(this.ref);
+      const style = getCSSStyleDeclaration(this.ref);
+      const paddingInlineStart = style?.paddingInlineStart ?? '0';
+      const paddingInlineEnd = style?.paddingInlineEnd ?? '0';
+      const navWidthWithoutPadding = navWidth - px(paddingInlineStart) - px(paddingInlineEnd);
+      const itemWidths = Array.from(this.ref.getElementsByTagName('li')).map(item => {
+        const {
+          width
+        } = getBoundingClientRect(item);
+        return width;
+      });
+      let currentWidth = 0;
+      for (let i = 0; i < itemWidths.length; i++) {
+        currentWidth += itemWidths[i];
+
+        // for the last item we don't need to calculate with the menu trigger
+        const maxWidth = i === itemWidths.length - 1 ? navWidthWithoutPadding : navWidthWithoutPadding - (menuTriggerWidthPx + itemSpacingPx);
+        if (currentWidth <= maxWidth) {
+          visibleItemsCount++;
+        } else {
+          break;
+        }
+      }
+    }
+    return {
+      visibleItemsCount
+    };
+  };
+  handleResize = () => {
+    this.setState({
+      isMeasuring: true
+    }, () => {
+      const {
+        visibleItemsCount
+      } = this.measureItems();
+      if (typeof this.props.onUpdate === 'function') {
+        this.props.onUpdate({
+          visibleItemsCount
+        });
+      }
+      this.setState({
+        isMeasuring: false
+      });
+    });
+  };
   render() {
-    const _this$props4 = this.props,
-      styles = _this$props4.styles,
-      className = _this$props4.className,
-      style = _this$props4.style,
-      renderHiddenItemMenu = _this$props4.renderHiddenItemMenu;
-    const visibleChildren = this.visibleChildren,
-      hiddenChildren = this.hiddenChildren;
+    const {
+      styles,
+      className,
+      style,
+      renderHiddenItemMenu
+    } = this.props;
+    const {
+      visibleChildren,
+      hiddenChildren
+    } = this;
     return _jsxs("ul", {
       ref: this.handleRef,
       ...omitProps(this.props, allowedProps),
@@ -215,15 +236,15 @@ let TruncateList = (_dec = withStyle(generateStyle, null), _dec(_class = (_Trunc
       // (e.g. if emotion style is provided, it will be passed as a className)
       style: style,
       className: className,
-      css: styles === null || styles === void 0 ? void 0 : styles.truncateList,
+      css: styles?.truncateList,
       "data-cid": combineDataCid('TruncateList', this.props),
       children: [visibleChildren.map((child, index) => {
         return _jsx("li", {
-          css: styles === null || styles === void 0 ? void 0 : styles.listItem,
+          css: styles?.listItem,
           children: child
         }, index);
       }), typeof renderHiddenItemMenu === 'function' && hiddenChildren && hiddenChildren.length > 0 && _jsx("li", {
-        css: [styles === null || styles === void 0 ? void 0 : styles.listItem, styles === null || styles === void 0 ? void 0 : styles.menuTrigger],
+        css: [styles?.listItem, styles?.menuTrigger],
         ref: e => {
           this._menuTriggerRef = e;
         },
@@ -231,9 +252,6 @@ let TruncateList = (_dec = withStyle(generateStyle, null), _dec(_class = (_Trunc
       }, "menuTrigger")]
     });
   }
-}, _TruncateList.displayName = "TruncateList", _TruncateList.componentId = 'TruncateList', _TruncateList.allowedProps = allowedProps, _TruncateList.defaultProps = {
-  itemSpacing: '0',
-  debounce: 300
-}, _TruncateList)) || _class);
+}) || _class);
 export { TruncateList };
 export default TruncateList;

package/es/TruncateList/styles.js

@@ -31,8 +31,10 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (_componentTheme, props) => {
-  const itemSpacing = props.itemSpacing,
-    fixMenuTriggerWidth = props.fixMenuTriggerWidth;
+  const {
+    itemSpacing,
+    fixMenuTriggerWidth
+  } = props;
   const listItemStyle = {
     minWidth: '0.0625rem',
     flexShrink: 0,

package/lib/TruncateList/index.js

@@ -16,7 +16,7 @@ var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class, _TruncateList;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -45,93 +45,50 @@ var _dec, _class, _TruncateList;
 category: components/utilities
 ---
 **/
-let TruncateList = exports.TruncateList = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, null), _dec(_class = (_TruncateList = class TruncateList extends _react.Component {
+let TruncateList = exports.TruncateList = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, null), _dec(_class = class TruncateList extends _react.Component {
+  static displayName = "TruncateList";
+  static componentId = 'TruncateList';
+  static allowedProps = _props.allowedProps;
+  static defaultProps = {
+    itemSpacing: '0',
+    debounce: 300
+  };
+  ref = null;
+  _menuTriggerRef = null;
+  _debouncedHandleResize;
+  _resizeListener;
+  handleRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
   constructor(props) {
     super(props);
-    this.ref = null;
-    this._menuTriggerRef = null;
-    this._debouncedHandleResize = void 0;
-    this._resizeListener = void 0;
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-    this.measureItems = () => {
-      const _this$props = this.props,
-        fixMenuTriggerWidth = _this$props.fixMenuTriggerWidth,
-        itemSpacing = _this$props.itemSpacing;
-      const itemSpacingPx = (0, _px.px)(itemSpacing);
-      const menuTriggerWidthPx = (0, _px.px)(fixMenuTriggerWidth || this.state.menuTriggerWidth);
-      let visibleItemsCount = 0;
-      if (this.ref) {
-        var _style$paddingInlineS, _style$paddingInlineE;
-        const _getBoundingClientRec = (0, _getBoundingClientRect.getBoundingClientRect)(this.ref),
-          navWidth = _getBoundingClientRec.width;
-        const style = (0, _getCSSStyleDeclaration.getCSSStyleDeclaration)(this.ref);
-        const paddingInlineStart = (_style$paddingInlineS = style === null || style === void 0 ? void 0 : style.paddingInlineStart) !== null && _style$paddingInlineS !== void 0 ? _style$paddingInlineS : '0';
-        const paddingInlineEnd = (_style$paddingInlineE = style === null || style === void 0 ? void 0 : style.paddingInlineEnd) !== null && _style$paddingInlineE !== void 0 ? _style$paddingInlineE : '0';
-        const navWidthWithoutPadding = navWidth - (0, _px.px)(paddingInlineStart) - (0, _px.px)(paddingInlineEnd);
-        const itemWidths = Array.from(this.ref.getElementsByTagName('li')).map(item => {
-          const _getBoundingClientRec2 = (0, _getBoundingClientRect.getBoundingClientRect)(item),
-            width = _getBoundingClientRec2.width;
-          return width;
-        });
-        let currentWidth = 0;
-        for (let i = 0; i < itemWidths.length; i++) {
-          currentWidth += itemWidths[i];
-
-          // for the last item we don't need to calculate with the menu trigger
-          const maxWidth = i === itemWidths.length - 1 ? navWidthWithoutPadding : navWidthWithoutPadding - (menuTriggerWidthPx + itemSpacingPx);
-          if (currentWidth <= maxWidth) {
-            visibleItemsCount++;
-          } else {
-            break;
-          }
-        }
-      }
-      return {
-        visibleItemsCount
-      };
-    };
-    this.handleResize = () => {
-      this.setState({
-        isMeasuring: true
-      }, () => {
-        const _this$measureItems = this.measureItems(),
-          visibleItemsCount = _this$measureItems.visibleItemsCount;
-        if (typeof this.props.onUpdate === 'function') {
-          this.props.onUpdate({
-            visibleItemsCount
-          });
-        }
-        this.setState({
-          isMeasuring: false
-        });
-      });
-    };
     this.state = {
       isMeasuring: false,
-      menuTriggerWidth: void 0
+      menuTriggerWidth: undefined
     };
   }
   componentDidMount() {
-    var _this$props$makeStyle, _this$props2;
-    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
-    const _getBoundingClientRec3 = (0, _getBoundingClientRect.getBoundingClientRect)(this.ref),
-      origWidth = _getBoundingClientRec3.width;
+    this.props.makeStyles?.();
+    const {
+      width: origWidth
+    } = (0, _getBoundingClientRect.getBoundingClientRect)(this.ref);
     this._debouncedHandleResize = (0, _debounce.debounce)(this.handleResize, this.props.debounce, {
       leading: true,
       trailing: true
     });
     this._resizeListener = new ResizeObserver(entries => {
       for (const entry of entries) {
-        const width = entry.contentRect.width;
+        const {
+          width
+        } = entry.contentRect;
         if (origWidth !== width) {
-          var _this$_debouncedHandl;
-          (_this$_debouncedHandl = this._debouncedHandleResize) === null || _this$_debouncedHandl === void 0 ? void 0 : _this$_debouncedHandl.call(this);
+          this._debouncedHandleResize?.();
         }
       }
     });
@@ -141,17 +98,14 @@ let TruncateList = exports.TruncateList = (_dec = (0, _emotion.withStyleLegacy)(
     this.setState({
       menuTriggerWidth
     }, () => {
-      var _this$_resizeListener, _this$_debouncedHandl2;
-      (_this$_resizeListener = this._resizeListener) === null || _this$_resizeListener === void 0 ? void 0 : _this$_resizeListener.observe(this.ref);
-      (_this$_debouncedHandl2 = this._debouncedHandleResize) === null || _this$_debouncedHandl2 === void 0 ? void 0 : _this$_debouncedHandl2.call(this);
+      this._resizeListener?.observe(this.ref);
+      this._debouncedHandleResize?.();
     });
   }
   componentDidUpdate(prevProps, prevState) {
-    var _this$props$makeStyle2, _this$props3;
-    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    this.props.makeStyles?.();
     if (prevProps.fixMenuTriggerWidth !== this.props.fixMenuTriggerWidth || prevProps.itemSpacing !== this.props.itemSpacing) {
-      var _this$_debouncedHandl3;
-      (_this$_debouncedHandl3 = this._debouncedHandleResize) === null || _this$_debouncedHandl3 === void 0 ? void 0 : _this$_debouncedHandl3.call(this);
+      this._debouncedHandleResize?.();
     }
     if (this.ref && prevState.isMeasuring && prevState.isMeasuring !== this.state.isMeasuring) {
       const menuTriggerWidth = this.calcMenuTriggerWidth();
@@ -159,8 +113,7 @@ let TruncateList = exports.TruncateList = (_dec = (0, _emotion.withStyleLegacy)(
         this.setState({
           menuTriggerWidth
         }, () => {
-          var _this$_debouncedHandl4;
-          (_this$_debouncedHandl4 = this._debouncedHandleResize) === null || _this$_debouncedHandl4 === void 0 ? void 0 : _this$_debouncedHandl4.call(this);
+          this._debouncedHandleResize?.();
         });
       }
     }
@@ -177,10 +130,13 @@ let TruncateList = exports.TruncateList = (_dec = (0, _emotion.withStyleLegacy)(
     return _react.Children.toArray(this.props.children);
   }
   get visibleChildren() {
-    const visibleItemsCount = this.props.visibleItemsCount;
-    const _this$state = this.state,
-      isMeasuring = _this$state.isMeasuring,
-      menuTriggerWidth = _this$state.menuTriggerWidth;
+    const {
+      visibleItemsCount
+    } = this.props;
+    const {
+      isMeasuring,
+      menuTriggerWidth
+    } = this.state;
 
     // for the first render we need to measure the trigger width
     if (typeof menuTriggerWidth === 'undefined') {
@@ -190,32 +146,97 @@ let TruncateList = exports.TruncateList = (_dec = (0, _emotion.withStyleLegacy)(
     return isMeasuring ? this.childrenArray : visibleChildren;
   }
   get hiddenChildren() {
-    const isMeasuring = this.state.isMeasuring;
+    const {
+      isMeasuring
+    } = this.state;
     return isMeasuring ? [] : this.childrenArray.splice(this.visibleChildren.length, this.childrenArray.length);
   }
   calcMenuTriggerWidth() {
-    const fixMenuTriggerWidth = this.props.fixMenuTriggerWidth;
+    const {
+      fixMenuTriggerWidth
+    } = this.props;
     if (!this._menuTriggerRef) {
       return 0;
     }
     if (fixMenuTriggerWidth) {
       return (0, _px.px)(fixMenuTriggerWidth);
     }
-    const children = this._menuTriggerRef.children;
+    const {
+      children
+    } = this._menuTriggerRef;
     let width = 0;
     Array.from(children).forEach(child => {
       width += (0, _getBoundingClientRect.getBoundingClientRect)(child).width;
     });
     return width;
   }
+  measureItems = () => {
+    const {
+      fixMenuTriggerWidth,
+      itemSpacing
+    } = this.props;
+    const itemSpacingPx = (0, _px.px)(itemSpacing);
+    const menuTriggerWidthPx = (0, _px.px)(fixMenuTriggerWidth || this.state.menuTriggerWidth);
+    let visibleItemsCount = 0;
+    if (this.ref) {
+      const {
+        width: navWidth
+      } = (0, _getBoundingClientRect.getBoundingClientRect)(this.ref);
+      const style = (0, _getCSSStyleDeclaration.getCSSStyleDeclaration)(this.ref);
+      const paddingInlineStart = style?.paddingInlineStart ?? '0';
+      const paddingInlineEnd = style?.paddingInlineEnd ?? '0';
+      const navWidthWithoutPadding = navWidth - (0, _px.px)(paddingInlineStart) - (0, _px.px)(paddingInlineEnd);
+      const itemWidths = Array.from(this.ref.getElementsByTagName('li')).map(item => {
+        const {
+          width
+        } = (0, _getBoundingClientRect.getBoundingClientRect)(item);
+        return width;
+      });
+      let currentWidth = 0;
+      for (let i = 0; i < itemWidths.length; i++) {
+        currentWidth += itemWidths[i];
+
+        // for the last item we don't need to calculate with the menu trigger
+        const maxWidth = i === itemWidths.length - 1 ? navWidthWithoutPadding : navWidthWithoutPadding - (menuTriggerWidthPx + itemSpacingPx);
+        if (currentWidth <= maxWidth) {
+          visibleItemsCount++;
+        } else {
+          break;
+        }
+      }
+    }
+    return {
+      visibleItemsCount
+    };
+  };
+  handleResize = () => {
+    this.setState({
+      isMeasuring: true
+    }, () => {
+      const {
+        visibleItemsCount
+      } = this.measureItems();
+      if (typeof this.props.onUpdate === 'function') {
+        this.props.onUpdate({
+          visibleItemsCount
+        });
+      }
+      this.setState({
+        isMeasuring: false
+      });
+    });
+  };
   render() {
-    const _this$props4 = this.props,
-      styles = _this$props4.styles,
-      className = _this$props4.className,
-      style = _this$props4.style,
-      renderHiddenItemMenu = _this$props4.renderHiddenItemMenu;
-    const visibleChildren = this.visibleChildren,
-      hiddenChildren = this.hiddenChildren;
+    const {
+      styles,
+      className,
+      style,
+      renderHiddenItemMenu
+    } = this.props;
+    const {
+      visibleChildren,
+      hiddenChildren
+    } = this;
     return (0, _jsxRuntime.jsxs)("ul", {
       ref: this.handleRef,
       ...(0, _omitProps.omitProps)(this.props, _props.allowedProps),
@@ -223,15 +244,15 @@ let TruncateList = exports.TruncateList = (_dec = (0, _emotion.withStyleLegacy)(
       // (e.g. if emotion style is provided, it will be passed as a className)
       style: style,
       className: className,
-      css: styles === null || styles === void 0 ? void 0 : styles.truncateList,
+      css: styles?.truncateList,
       "data-cid": (0, _combineDataCid.combineDataCid)('TruncateList', this.props),
       children: [visibleChildren.map((child, index) => {
         return (0, _jsxRuntime.jsx)("li", {
-          css: styles === null || styles === void 0 ? void 0 : styles.listItem,
+          css: styles?.listItem,
           children: child
         }, index);
       }), typeof renderHiddenItemMenu === 'function' && hiddenChildren && hiddenChildren.length > 0 && (0, _jsxRuntime.jsx)("li", {
-        css: [styles === null || styles === void 0 ? void 0 : styles.listItem, styles === null || styles === void 0 ? void 0 : styles.menuTrigger],
+        css: [styles?.listItem, styles?.menuTrigger],
         ref: e => {
           this._menuTriggerRef = e;
         },
@@ -239,8 +260,5 @@ let TruncateList = exports.TruncateList = (_dec = (0, _emotion.withStyleLegacy)(
       }, "menuTrigger")]
     });
   }
-}, _TruncateList.displayName = "TruncateList", _TruncateList.componentId = 'TruncateList', _TruncateList.allowedProps = _props.allowedProps, _TruncateList.defaultProps = {
-  itemSpacing: '0',
-  debounce: 300
-}, _TruncateList)) || _class);
+}) || _class);
 var _default = exports.default = TruncateList;

package/lib/TruncateList/styles.js

@@ -37,8 +37,10 @@ exports.default = void 0;
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (_componentTheme, props) => {
-  const itemSpacing = props.itemSpacing,
-    fixMenuTriggerWidth = props.fixMenuTriggerWidth;
+  const {
+    itemSpacing,
+    fixMenuTriggerWidth
+  } = props;
   const listItemStyle = {
     minWidth: '0.0625rem',
     flexShrink: 0,