@instructure/ui-truncate-text 10.16.1-snapshot-0 → 10.16.1

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.16.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
+## [10.16.1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1) (2025-04-22)
 
 **Note:** Version bump only for package @instructure/ui-truncate-text
 

package/es/TruncateText/__new-tests__/TruncateText.test.js

@@ -23,12 +23,12 @@ var _TruncateText, _TruncateText2, _TruncateText3, _TruncateText4, _TruncateText
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, waitFor } from '@testing-library/react';
 import { vi, expect } from 'vitest';
 import '@testing-library/jest-dom';
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import { TruncateText } from '../index';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const defaultText = 'Hello world! This is a long string that should truncate';
 describe('<TruncateText />', () => {
   let consoleErrorMock;
@@ -40,11 +40,18 @@ describe('<TruncateText />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should warn if children prop receives too deep of a node tree', async () => {
-    render(/*#__PURE__*/React.createElement("div", {
+    render(_jsx("div", {
       style: {
         width: '200px'
-      }
-    }, _TruncateText || (_TruncateText = /*#__PURE__*/React.createElement(TruncateText, null, "Hello world!", ' ', /*#__PURE__*/React.createElement("strong", null, /*#__PURE__*/React.createElement("span", null, "This is a")), ' ', "long string that should truncate"))));
+      },
+      children: _TruncateText || (_TruncateText = _jsxs(TruncateText, {
+        children: ["Hello world!", ' ', _jsx("strong", {
+          children: _jsx("span", {
+            children: "This is a"
+          })
+        }), ' ', "long string that should truncate"]
+      }))
+    }));
     const expectedErrorMessage = 'Some children are too deep in the node tree and will not render.';
     await waitFor(() => {
       expect(consoleErrorMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
@@ -53,21 +60,30 @@ describe('<TruncateText />', () => {
   it('should handle the empty string as a child', async () => {
     let error = false;
     try {
-      const _render = render(_TruncateText2 || (_TruncateText2 = /*#__PURE__*/React.createElement(TruncateText, null, ''))),
+      const _render = render(_TruncateText2 || (_TruncateText2 = _jsx(TruncateText, {
+          children: ''
+        }))),
         rerender = _render.rerender;
-      rerender(_TruncateText3 || (_TruncateText3 = /*#__PURE__*/React.createElement(TruncateText, null, 'hello world')));
-      rerender(_TruncateText4 || (_TruncateText4 = /*#__PURE__*/React.createElement(TruncateText, null, '')));
+      rerender(_TruncateText3 || (_TruncateText3 = _jsx(TruncateText, {
+        children: 'hello world'
+      })));
+      rerender(_TruncateText4 || (_TruncateText4 = _jsx(TruncateText, {
+        children: ''
+      })));
     } catch (_e) {
       error = true;
     }
     expect(error).toBe(false);
   });
   it('should meet a11y standards', async () => {
-    const _render2 = render(/*#__PURE__*/React.createElement("div", {
+    const _render2 = render(_jsx("div", {
         style: {
           width: '200px'
-        }
-      }, _TruncateText5 || (_TruncateText5 = /*#__PURE__*/React.createElement(TruncateText, null, defaultText)))),
+        },
+        children: _TruncateText5 || (_TruncateText5 = _jsx(TruncateText, {
+          children: defaultText
+        }))
+      })),
       container = _render2.container;
     const axeCheck = await runAxeCheck(container);
     expect(axeCheck).toBe(true);

package/es/TruncateText/index.js

@@ -22,18 +22,19 @@ var _dec, _dec2, _dec3, _class, _TruncateText;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
-import React, { Component } from 'react';
+
+import { Children, Component } from 'react';
 import { debounce } from '@instructure/debounce';
 import { canUseDOM, getBoundingClientRect } from '@instructure/ui-dom-utils';
 import { safeCloneElement, ensureSingleChild, hack } from '@instructure/ui-react-utils';
 import { logError as error } from '@instructure/console';
 import { testable } from '@instructure/ui-testable';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import truncate from './utils/truncate';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
@@ -142,9 +143,9 @@ let TruncateText = (_dec = withStyle(generateStyle, generateComponentTheme), _de
     error(!(() => {
       let isTooDeep = false;
       const text = ensureSingleChild(this.props.children);
-      React.Children.forEach(text.props.children, child => {
+      Children.forEach(text.props.children, child => {
         if (child.props) {
-          React.Children.forEach(child.props.children, grandChild => {
+          Children.forEach(child.props.children, grandChild => {
             // currently we don't support node trees deeper than 2 levels
             // truncation will still occur on their text content, but their actual node structure will be lost
             if (grandChild.props) {
@@ -209,29 +210,31 @@ let TruncateText = (_dec = withStyle(generateStyle, generateComponentTheme), _de
     // this spacer element is set to the max width the full text could
     // potentially be without this, text in `width: auto` elements won't expand
     // to accommodate more text, once truncated
-    childElements.push(jsx("span", {
+    childElements.push(_jsx("span", {
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.spacer,
       style: {
         width: width || void 0
       }
     }));
-    const children = React.Children.map(childElements, child => child);
+    const children = Children.map(childElements, child => child);
     return this._text.props ? safeCloneElement(this._text, this._text.props, children) : children;
   }
   render() {
     var _this$props$styles3;
     const truncatedElement = this.state.truncatedElement;
     const children = this.props.children;
-    return jsx("span", {
+    return _jsxs("span", {
       css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.truncateText,
       ref: el => {
         this.ref = el;
-      }
-    }, children && (truncatedElement ? null : jsx("span", {
-      ref: el => {
-        this._stage = el;
-      }
-    }, ensureSingleChild(children))), truncatedElement);
+      },
+      children: [children && (truncatedElement ? null : _jsx("span", {
+        ref: el => {
+          this._stage = el;
+        },
+        children: ensureSingleChild(children)
+      })), truncatedElement]
+    });
   }
 }, _TruncateText.displayName = "TruncateText", _TruncateText.componentId = 'TruncateText', _TruncateText.allowedProps = allowedProps, _TruncateText.propTypes = propTypes, _TruncateText.defaultProps = {
   maxLines: 1,

package/es/TruncateText/utils/__new-tests__/measureText.test.js

@@ -23,11 +23,11 @@ var _div, _div2, _div3, _div4;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { vi, expect } from 'vitest';
 import '@testing-library/jest-dom';
 import measureText from '../measureText';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const baseStyle = {
   fontSize: '16px',
   fontFamily: 'Arial',
@@ -67,34 +67,39 @@ describe('measureText', () => {
     expect(width).toBe(0);
   });
   it('should calculate text width correctly', () => {
-    render(_div || (_div = /*#__PURE__*/React.createElement("div", {
+    render(_div || (_div = _jsxs("div", {
       "data-testid": "stage",
-      style: baseStyle
-    }, "Lorem ipsum ", /*#__PURE__*/React.createElement("span", {
-      style: baseStyle
-    }, "DOLOR SIT AMET."))));
+      style: baseStyle,
+      children: ["Lorem ipsum ", _jsx("span", {
+        style: baseStyle,
+        children: "DOLOR SIT AMET."
+      })]
+    })));
     const stage = screen.getByTestId('stage');
     const nodes = getNodes(stage);
     const width = measureText(nodes, stage);
     expect(width).toBe(270);
   });
   it('should account for different nodes', async () => {
-    const _render = render(_div2 || (_div2 = /*#__PURE__*/React.createElement("div", {
+    const _render = render(_div2 || (_div2 = _jsxs("div", {
         "data-testid": "stage",
-        style: baseStyle
-      }, "Lorem ipsum ", /*#__PURE__*/React.createElement("span", {
-        style: baseStyle
-      }, "DOLOR SIT AMET.")))),
+        style: baseStyle,
+        children: ["Lorem ipsum ", _jsx("span", {
+          style: baseStyle,
+          children: "DOLOR SIT AMET."
+        })]
+      }))),
       rerender = _render.rerender;
     const stage = screen.getByTestId('stage');
     const nodes = getNodes(stage);
     const width = measureText(nodes, stage);
 
     // Set child
-    rerender(_div3 || (_div3 = /*#__PURE__*/React.createElement("div", {
+    rerender(_div3 || (_div3 = _jsx("div", {
       "data-testid": "stage",
-      style: baseStyle
-    }, "Lorem ipsum DOLOR SIT AMET.")));
+      style: baseStyle,
+      children: "Lorem ipsum DOLOR SIT AMET."
+    })));
     const stage2 = screen.getByTestId('stage');
     const nodes2 = getNodes(stage2);
     const width2 = measureText(nodes2, stage2);
@@ -107,10 +112,11 @@ describe('measureText', () => {
       fontStyle: 'italic',
       fontFamily: 'Arial'
     };
-    render(/*#__PURE__*/React.createElement("div", {
+    render(_jsx("div", {
       "data-testid": "stage",
-      style: mockedStyle
-    }, "Lorem ipsum"));
+      style: mockedStyle,
+      children: "Lorem ipsum"
+    }));
     const stage = screen.getByTestId('stage');
     const nodes = getNodes(stage);
     measureText(nodes, stage);
@@ -122,10 +128,11 @@ describe('measureText', () => {
     expect(context.font).toBe('bold italic 20px Arial');
   });
   it('should account for letter spacing styles', async () => {
-    const _render2 = render(_div4 || (_div4 = /*#__PURE__*/React.createElement("div", {
+    const _render2 = render(_div4 || (_div4 = _jsx("div", {
         "data-testid": "stage",
-        style: baseStyle
-      }, "Lorem ipsum"))),
+        style: baseStyle,
+        children: "Lorem ipsum"
+      }))),
       rerender = _render2.rerender;
     const stage = screen.getByTestId('stage');
     const nodes = getNodes(stage);
@@ -133,13 +140,14 @@ describe('measureText', () => {
     expect(width).toBe(110); // default mocked width (text.length * 10)
 
     // Set letterSpacing
-    rerender(/*#__PURE__*/React.createElement("div", {
+    rerender(_jsx("div", {
       "data-testid": "stage2",
       style: {
         ...baseStyle,
         letterSpacing: '5px'
-      }
-    }, "Lorem ipsum"));
+      },
+      children: "Lorem ipsum"
+    }));
     const stage2 = screen.getByTestId('stage2');
     const nodes2 = getNodes(stage2);
     const width2 = measureText(nodes2, stage2);

package/lib/TruncateText/__new-tests__/TruncateText.test.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
+var _react = require("@testing-library/react");
 var _vitest = require("vitest");
 require("@testing-library/jest-dom");
 var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
 var _index = require("../index");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _TruncateText, _TruncateText2, _TruncateText3, _TruncateText4, _TruncateText5;
 /*
  * The MIT License (MIT)
@@ -42,34 +41,50 @@ describe('<TruncateText />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should warn if children prop receives too deep of a node tree', async () => {
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement("div", {
+    (0, _react.render)((0, _jsxRuntime.jsx)("div", {
       style: {
         width: '200px'
-      }
-    }, _TruncateText || (_TruncateText = /*#__PURE__*/_react.default.createElement(_index.TruncateText, null, "Hello world!", ' ', /*#__PURE__*/_react.default.createElement("strong", null, /*#__PURE__*/_react.default.createElement("span", null, "This is a")), ' ', "long string that should truncate"))));
+      },
+      children: _TruncateText || (_TruncateText = (0, _jsxRuntime.jsxs)(_index.TruncateText, {
+        children: ["Hello world!", ' ', (0, _jsxRuntime.jsx)("strong", {
+          children: (0, _jsxRuntime.jsx)("span", {
+            children: "This is a"
+          })
+        }), ' ', "long string that should truncate"]
+      }))
+    }));
     const expectedErrorMessage = 'Some children are too deep in the node tree and will not render.';
-    await (0, _react2.waitFor)(() => {
+    await (0, _react.waitFor)(() => {
       (0, _vitest.expect)(consoleErrorMock).toHaveBeenCalledWith(_vitest.expect.stringContaining(expectedErrorMessage), _vitest.expect.any(String));
     });
   });
   it('should handle the empty string as a child', async () => {
     let error = false;
     try {
-      const _render = (0, _react2.render)(_TruncateText2 || (_TruncateText2 = /*#__PURE__*/_react.default.createElement(_index.TruncateText, null, ''))),
+      const _render = (0, _react.render)(_TruncateText2 || (_TruncateText2 = (0, _jsxRuntime.jsx)(_index.TruncateText, {
+          children: ''
+        }))),
         rerender = _render.rerender;
-      rerender(_TruncateText3 || (_TruncateText3 = /*#__PURE__*/_react.default.createElement(_index.TruncateText, null, 'hello world')));
-      rerender(_TruncateText4 || (_TruncateText4 = /*#__PURE__*/_react.default.createElement(_index.TruncateText, null, '')));
+      rerender(_TruncateText3 || (_TruncateText3 = (0, _jsxRuntime.jsx)(_index.TruncateText, {
+        children: 'hello world'
+      })));
+      rerender(_TruncateText4 || (_TruncateText4 = (0, _jsxRuntime.jsx)(_index.TruncateText, {
+        children: ''
+      })));
     } catch (_e) {
       error = true;
     }
     (0, _vitest.expect)(error).toBe(false);
   });
   it('should meet a11y standards', async () => {
-    const _render2 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement("div", {
+    const _render2 = (0, _react.render)((0, _jsxRuntime.jsx)("div", {
         style: {
           width: '200px'
-        }
-      }, _TruncateText5 || (_TruncateText5 = /*#__PURE__*/_react.default.createElement(_index.TruncateText, null, defaultText)))),
+        },
+        children: _TruncateText5 || (_TruncateText5 = (0, _jsxRuntime.jsx)(_index.TruncateText, {
+          children: defaultText
+        }))
+      })),
       container = _render2.container;
     const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
     (0, _vitest.expect)(axeCheck).toBe(true);

package/lib/TruncateText/index.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TruncateText = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _debounce = require("@instructure/debounce");
 var _canUseDOM = require("@instructure/ui-dom-utils/lib/canUseDOM.js");
 var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
@@ -20,6 +19,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _truncate = _interopRequireDefault(require("./utils/truncate"));
 var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _dec2, _dec3, _class, _TruncateText;
 /*
  * The MIT License (MIT)
@@ -44,7 +44,6 @@ var _dec, _dec2, _dec3, _class, _TruncateText;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
 /**
 ---
 category: components
@@ -153,9 +152,9 @@ let TruncateText = exports.TruncateText = (_dec = (0, _emotion.withStyle)(_style
     (0, _console.logError)(!(() => {
       let isTooDeep = false;
       const text = (0, _ensureSingleChild.ensureSingleChild)(this.props.children);
-      _react.default.Children.forEach(text.props.children, child => {
+      _react.Children.forEach(text.props.children, child => {
         if (child.props) {
-          _react.default.Children.forEach(child.props.children, grandChild => {
+          _react.Children.forEach(child.props.children, grandChild => {
             // currently we don't support node trees deeper than 2 levels
             // truncation will still occur on their text content, but their actual node structure will be lost
             if (grandChild.props) {
@@ -220,29 +219,31 @@ let TruncateText = exports.TruncateText = (_dec = (0, _emotion.withStyle)(_style
     // this spacer element is set to the max width the full text could
     // potentially be without this, text in `width: auto` elements won't expand
     // to accommodate more text, once truncated
-    childElements.push((0, _emotion.jsx)("span", {
+    childElements.push((0, _jsxRuntime.jsx)("span", {
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.spacer,
       style: {
         width: width || void 0
       }
     }));
-    const children = _react.default.Children.map(childElements, child => child);
+    const children = _react.Children.map(childElements, child => child);
     return this._text.props ? (0, _safeCloneElement.safeCloneElement)(this._text, this._text.props, children) : children;
   }
   render() {
     var _this$props$styles3;
     const truncatedElement = this.state.truncatedElement;
     const children = this.props.children;
-    return (0, _emotion.jsx)("span", {
+    return (0, _jsxRuntime.jsxs)("span", {
       css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.truncateText,
       ref: el => {
         this.ref = el;
-      }
-    }, children && (truncatedElement ? null : (0, _emotion.jsx)("span", {
-      ref: el => {
-        this._stage = el;
-      }
-    }, (0, _ensureSingleChild.ensureSingleChild)(children))), truncatedElement);
+      },
+      children: [children && (truncatedElement ? null : (0, _jsxRuntime.jsx)("span", {
+        ref: el => {
+          this._stage = el;
+        },
+        children: (0, _ensureSingleChild.ensureSingleChild)(children)
+      })), truncatedElement]
+    });
   }
 }, _TruncateText.displayName = "TruncateText", _TruncateText.componentId = 'TruncateText', _TruncateText.allowedProps = _props.allowedProps, _TruncateText.propTypes = _props.propTypes, _TruncateText.defaultProps = {
   maxLines: 1,

package/lib/TruncateText/utils/__new-tests__/measureText.test.js

@@ -1,11 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
+var _react = require("@testing-library/react");
 var _vitest = require("vitest");
 require("@testing-library/jest-dom");
 var _measureText = _interopRequireDefault(require("../measureText"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _div, _div2, _div3, _div4;
 /*
  * The MIT License (MIT)
@@ -69,35 +69,40 @@ describe('measureText', () => {
     (0, _vitest.expect)(width).toBe(0);
   });
   it('should calculate text width correctly', () => {
-    (0, _react2.render)(_div || (_div = /*#__PURE__*/_react.default.createElement("div", {
+    (0, _react.render)(_div || (_div = (0, _jsxRuntime.jsxs)("div", {
       "data-testid": "stage",
-      style: baseStyle
-    }, "Lorem ipsum ", /*#__PURE__*/_react.default.createElement("span", {
-      style: baseStyle
-    }, "DOLOR SIT AMET."))));
-    const stage = _react2.screen.getByTestId('stage');
+      style: baseStyle,
+      children: ["Lorem ipsum ", (0, _jsxRuntime.jsx)("span", {
+        style: baseStyle,
+        children: "DOLOR SIT AMET."
+      })]
+    })));
+    const stage = _react.screen.getByTestId('stage');
     const nodes = getNodes(stage);
     const width = (0, _measureText.default)(nodes, stage);
     (0, _vitest.expect)(width).toBe(270);
   });
   it('should account for different nodes', async () => {
-    const _render = (0, _react2.render)(_div2 || (_div2 = /*#__PURE__*/_react.default.createElement("div", {
+    const _render = (0, _react.render)(_div2 || (_div2 = (0, _jsxRuntime.jsxs)("div", {
         "data-testid": "stage",
-        style: baseStyle
-      }, "Lorem ipsum ", /*#__PURE__*/_react.default.createElement("span", {
-        style: baseStyle
-      }, "DOLOR SIT AMET.")))),
+        style: baseStyle,
+        children: ["Lorem ipsum ", (0, _jsxRuntime.jsx)("span", {
+          style: baseStyle,
+          children: "DOLOR SIT AMET."
+        })]
+      }))),
       rerender = _render.rerender;
-    const stage = _react2.screen.getByTestId('stage');
+    const stage = _react.screen.getByTestId('stage');
     const nodes = getNodes(stage);
     const width = (0, _measureText.default)(nodes, stage);
 
     // Set child
-    rerender(_div3 || (_div3 = /*#__PURE__*/_react.default.createElement("div", {
+    rerender(_div3 || (_div3 = (0, _jsxRuntime.jsx)("div", {
       "data-testid": "stage",
-      style: baseStyle
-    }, "Lorem ipsum DOLOR SIT AMET.")));
-    const stage2 = _react2.screen.getByTestId('stage');
+      style: baseStyle,
+      children: "Lorem ipsum DOLOR SIT AMET."
+    })));
+    const stage2 = _react.screen.getByTestId('stage');
     const nodes2 = getNodes(stage2);
     const width2 = (0, _measureText.default)(nodes2, stage2);
     (0, _vitest.expect)(width).toEqual(width2);
@@ -109,11 +114,12 @@ describe('measureText', () => {
       fontStyle: 'italic',
       fontFamily: 'Arial'
     };
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement("div", {
+    (0, _react.render)((0, _jsxRuntime.jsx)("div", {
       "data-testid": "stage",
-      style: mockedStyle
-    }, "Lorem ipsum"));
-    const stage = _react2.screen.getByTestId('stage');
+      style: mockedStyle,
+      children: "Lorem ipsum"
+    }));
+    const stage = _react.screen.getByTestId('stage');
     const nodes = getNodes(stage);
     (0, _measureText.default)(nodes, stage);
 
@@ -124,25 +130,27 @@ describe('measureText', () => {
     (0, _vitest.expect)(context.font).toBe('bold italic 20px Arial');
   });
   it('should account for letter spacing styles', async () => {
-    const _render2 = (0, _react2.render)(_div4 || (_div4 = /*#__PURE__*/_react.default.createElement("div", {
+    const _render2 = (0, _react.render)(_div4 || (_div4 = (0, _jsxRuntime.jsx)("div", {
         "data-testid": "stage",
-        style: baseStyle
-      }, "Lorem ipsum"))),
+        style: baseStyle,
+        children: "Lorem ipsum"
+      }))),
       rerender = _render2.rerender;
-    const stage = _react2.screen.getByTestId('stage');
+    const stage = _react.screen.getByTestId('stage');
     const nodes = getNodes(stage);
     const width = (0, _measureText.default)(nodes, stage);
     (0, _vitest.expect)(width).toBe(110); // default mocked width (text.length * 10)
 
     // Set letterSpacing
-    rerender(/*#__PURE__*/_react.default.createElement("div", {
+    rerender((0, _jsxRuntime.jsx)("div", {
       "data-testid": "stage2",
       style: {
         ...baseStyle,
         letterSpacing: '5px'
-      }
-    }, "Lorem ipsum"));
-    const stage2 = _react2.screen.getByTestId('stage2');
+      },
+      children: "Lorem ipsum"
+    }));
+    const stage2 = _react.screen.getByTestId('stage2');
     const nodes2 = getNodes(stage2);
     const width2 = (0, _measureText.default)(nodes2, stage2);
     (0, _vitest.expect)(width2).toBe(165); // default mocked width + letterOffset (text.length * letterSpacing)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-truncate-text",
-  "version": "10.16.1-snapshot-0",
+  "version": "10.16.1",
   "description": "A TruncateText component made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,24 +24,24 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.16.1-snapshot-0",
-    "@instructure/debounce": "10.16.1-snapshot-0",
-    "@instructure/emotion": "10.16.1-snapshot-0",
-    "@instructure/shared-types": "10.16.1-snapshot-0",
-    "@instructure/ui-dom-utils": "10.16.1-snapshot-0",
-    "@instructure/ui-react-utils": "10.16.1-snapshot-0",
-    "@instructure/ui-testable": "10.16.1-snapshot-0",
-    "@instructure/ui-utils": "10.16.1-snapshot-0",
+    "@instructure/console": "10.16.1",
+    "@instructure/debounce": "10.16.1",
+    "@instructure/emotion": "10.16.1",
+    "@instructure/shared-types": "10.16.1",
+    "@instructure/ui-dom-utils": "10.16.1",
+    "@instructure/ui-react-utils": "10.16.1",
+    "@instructure/ui-testable": "10.16.1",
+    "@instructure/ui-utils": "10.16.1",
     "escape-html": "^1.0.3",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.16.1-snapshot-0",
-    "@instructure/ui-babel-preset": "10.16.1-snapshot-0",
-    "@instructure/ui-color-utils": "10.16.1-snapshot-0",
-    "@instructure/ui-test-utils": "10.16.1-snapshot-0",
-    "@instructure/ui-text": "10.16.1-snapshot-0",
-    "@instructure/ui-themes": "10.16.1-snapshot-0",
+    "@instructure/ui-axe-check": "10.16.1",
+    "@instructure/ui-babel-preset": "10.16.1",
+    "@instructure/ui-color-utils": "10.16.1",
+    "@instructure/ui-test-utils": "10.16.1",
+    "@instructure/ui-text": "10.16.1",
+    "@instructure/ui-themes": "10.16.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@types/escape-html": "^1.0.4",

package/src/TruncateText/__new-tests__/TruncateText.test.tsx

@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 
-import React from 'react'
 import { render, waitFor } from '@testing-library/react'
 import { vi, expect } from 'vitest'
 import type { MockInstance } from 'vitest'

package/src/TruncateText/index.tsx

@@ -21,8 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
-import React, { Component } from 'react'
+
+import { Children, Component } from 'react'
 
 import { debounce } from '@instructure/debounce'
 import type { Debounced } from '@instructure/debounce'
@@ -34,7 +34,7 @@ import {
 } from '@instructure/ui-react-utils'
 import { logError as error } from '@instructure/console'
 import { testable } from '@instructure/ui-testable'
-import { withStyle, jsx } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
@@ -176,9 +176,9 @@ class TruncateText extends Component<TruncateTextProps, TruncateTextState> {
       !(() => {
         let isTooDeep = false
         const text = ensureSingleChild(this.props.children)!
-        React.Children.forEach(text.props.children, (child) => {
+        Children.forEach(text.props.children, (child) => {
           if (child.props) {
-            React.Children.forEach(child.props.children, (grandChild) => {
+            Children.forEach(child.props.children, (grandChild) => {
               // currently we don't support node trees deeper than 2 levels
               // truncation will still occur on their text content, but their actual node structure will be lost
               if (grandChild.props) {
@@ -266,7 +266,7 @@ class TruncateText extends Component<TruncateTextProps, TruncateTextState> {
       />
     )
 
-    const children = React.Children.map(childElements, (child) => child)
+    const children = Children.map(childElements, (child) => child)
     return this._text!.props
       ? safeCloneElement(this._text!, this._text!.props, children)
       : children