@instructure/ui-truncate-text 11.6.0 → 11.6.1-snapshot-129

package/es/TruncateText/v2/utils/truncate.js

@@ -0,0 +1,341 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import escapeHtml from 'escape-html';
+import { cloneArray } from '@instructure/ui-utils';
+import { logError as error } from '@instructure/console';
+import { getCSSStyleDeclaration, getBoundingClientRect, isVisible } from '@instructure/ui-dom-utils';
+import measureText from "./measureText.js";
+import cleanString from "./cleanString.js";
+import cleanData from "./cleanData.js";
+/**
+ * ---
+ * parent: TruncateText
+ * private: true
+ * ---
+ * Truncate the text content of an HTML element and its children.
+ *
+ * @param {DOMNode} element A single element containing the content to be truncated.
+ * @param {Object} options={} The options object.
+ * @param {DOMNode} options.parent An optional parent element to use for calculations.
+ * @param {number|string} options.maxLines Number of lines to allow before truncating.
+ * @param {string} options.position=end Where to place the ellipsis within the string.
+ * @param {string} options.truncate=character Add ellipsis after words or after any character.
+ * @param {string} options.ellipsis=\u2026 Where to place the ellipsis within the string.
+ * @param {string[]} options.ignore Characters to ignore at truncated end of string.
+ * @param {number} options.lineHeight=1.2 Unitless multiplier to use in case element can have
+ * 'normal' lineHeight. Adjust this to better match your font if needed.
+ */
+function truncate(element, options) {
+  const truncator = new Truncator(element, options);
+  if (truncator) {
+    return truncator.truncate();
+  }
+  return;
+}
+class Truncator {
+  constructor(element, options = {}) {
+    this._options = void 0;
+    this._stage = void 0;
+    this._parent = void 0;
+    this._nodeMap = void 0;
+    this._defaultStringData = void 0;
+    this._nodeDataIndexes = void 0;
+    this._maxHeight = void 0;
+    this._maxWidth = void 0;
+    this._maxLines = void 0;
+    const parentElement = element !== null && element !== void 0 && element.parentElement ? element === null || element === void 0 ? void 0 : element.parentElement : void 0;
+    this._options = {
+      parent: options.parent || parentElement,
+      maxLines: options.maxLines || 1,
+      position: options.position || 'end',
+      truncate: options.truncate || 'character',
+      ellipsis: options.ellipsis || '\u2026',
+      ignore: options.ignore || [' ', '.', ','],
+      lineHeight: options.lineHeight || 1.2,
+      shouldTruncateWhenInvisible: !!options.shouldTruncateWhenInvisible
+    };
+    if (!element) {
+      error(false, '[Truncator] No element to truncate.');
+      return;
+    }
+    this._stage = element;
+    if (options.parent) {
+      this._parent = this._options.parent;
+    } else {
+      const parentEl = this._stage.parentElement ? this._stage.parentElement : void 0;
+      this._parent = this._options.maxLines === 'auto' ? parentEl : this._stage;
+    }
+    this.setup();
+  }
+  setup() {
+    if (!this._stage) {
+      return;
+    }
+    const style = getCSSStyleDeclaration(this._parent);
+    if (!style) {
+      return;
+    }
+    const _this$_options = this._options,
+      maxLines = _this$_options.maxLines,
+      truncate = _this$_options.truncate,
+      lineHeight = _this$_options.lineHeight;
+    // if no explicit lineHeight is inherited, use lineHeight multiplier for calculations
+    const actualLineHeight = style.lineHeight === 'normal' ? lineHeight * parseFloat(style.fontSize) : parseFloat(style.lineHeight);
+    const node = this._stage.firstChild.children ? this._stage.firstChild : this._stage;
+    const nodeDataIndexes = [];
+    const stringData = [];
+    this._nodeMap = this.getNodeMap(node);
+    for (let i = 0; i < this._nodeMap.length; i++) {
+      const item = this._nodeMap[i];
+      if (truncate === 'word' && item.data[item.data.length - 1] === ' ') {
+        // remove random whitespace data between nodes
+        item.data.length -= 1;
+      }
+      stringData[i] = item.data;
+      for (let j = 0; j < item.data.length; j++) {
+        // map each word or character datum index to its corresponding node
+        nodeDataIndexes.push(i);
+      }
+    }
+    this._defaultStringData = cloneArray(stringData);
+    this._nodeDataIndexes = cloneArray(nodeDataIndexes);
+    this._maxHeight = maxLines === 'auto' ? getBoundingClientRect(this._parent).height : maxLines * actualLineHeight;
+    this._maxWidth = measureText(this._nodeMap.map(item => item.node), this._parent);
+    this._maxLines = maxLines === 'auto' ? Math.round(this._maxHeight / actualLineHeight) : maxLines;
+  }
+  getNodeMap(rootNode) {
+    const _this$_options2 = this._options,
+      shouldTruncateWhenInvisible = _this$_options2.shouldTruncateWhenInvisible,
+      truncate = _this$_options2.truncate;
+    const nodes = Array.from(rootNode.childNodes);
+    const map = [];
+    // parse child nodes and build a data map to associate each node with its data
+    nodes.forEach(node => {
+      if (node.nodeType === 1 || node.nodeType === 3) {
+        const shouldTruncate = shouldTruncateWhenInvisible ? true : isVisible(node, false);
+        const textContent = node.textContent + ' ';
+        map.push({
+          node,
+          data: truncate === 'word' ? shouldTruncate ?
+          // eslint-disable-next-line no-useless-escape
+          textContent.match(/.*?[\.\s\/]+?/g) : [''] : shouldTruncate ? node.textContent.split('') : []
+        });
+      }
+    });
+    return map;
+  }
+  getNodeIndexes(data) {
+    const nodeDataIndexes = [];
+    for (let i = 0; i < data.length; i++) {
+      for (let j = 0; j < data[i].length; j++) {
+        nodeDataIndexes.push([i, j]);
+      }
+    }
+    return nodeDataIndexes;
+  }
+  domString(data) {
+    let html = '';
+    for (let i = 0; i < data.length; i++) {
+      const mapItem = this._nodeMap[i];
+      const text = data[i].join('');
+      const safeText = escapeHtml(text);
+      if (mapItem.node.nodeType === Node.ELEMENT_NODE) {
+        const name = mapItem.node.nodeName;
+        const attr = mapItem.node.attributes;
+        let attributes = '';
+        for (let j = 0; j < attr.length; j++) {
+          const att = attr[j];
+          attributes += ` ${att.nodeName}="${att.nodeValue}"`;
+        }
+        html += `<${name}${attributes}>${safeText}</${name}>`;
+      } else if (mapItem.node.nodeType === 3) {
+        html += safeText;
+      }
+    }
+    return html;
+  }
+  checkFit(data) {
+    const html = this.domString(data);
+    const node = this._options.maxLines === 'auto' ? this._stage : this._parent;
+    let fits = true;
+    this._stage.innerHTML = html;
+    // allow a 0.5 px margin of error for browser calculation discrepancies
+    if (getBoundingClientRect(node).height - this._maxHeight > 0.5) {
+      fits = false;
+    }
+    return fits;
+  }
+  truncate() {
+    const _this$_options3 = this._options,
+      ellipsis = _this$_options3.ellipsis,
+      ignore = _this$_options3.ignore,
+      position = _this$_options3.position;
+    const middle = position === 'middle';
+    let truncated = false;
+    let truncatedText = '';
+    let stringData = null;
+    if (!this._stage) {
+      return;
+    }
+    const binarySearch = (_low, _high, ev, middle,
+    // in case we can not find the result
+    _default = null) => {
+      let low = _low;
+      let high = _high;
+      let bestResult = _default;
+      while (low <= high) {
+        const tryNumber = Math.floor((low + high) / 2);
+        if (ev(tryNumber, middle)) {
+          high = tryNumber - 1;
+          bestResult = tryNumber;
+        } else {
+          low = tryNumber + 1;
+        }
+      }
+      return bestResult;
+    };
+    const truncateArray = (truncatedLength, originalArray, indexArray, middle) => {
+      let truncated = false;
+      const truncatedArray = cloneArray(originalArray);
+      switch (truncatedLength) {
+        // truncate nothing
+        case 0:
+          break;
+
+        // truncate all
+        case indexArray.length:
+          truncated = true;
+          for (let i = 0; i < truncatedArray.length; i++) {
+            truncatedArray[i] = [];
+          }
+          truncatedArray[0].push(ellipsis);
+          break;
+
+        // truncate a positive amount of elements
+        default:
+          truncated = true;
+          if (middle) {
+            const dataHalves = Array(2);
+            // calculate the indexes for two parts
+            dataHalves[0] = Math.floor((indexArray.length - truncatedLength - 1) / 2);
+            dataHalves[1] = dataHalves[0] + truncatedLength + 1;
+            const nodeHalves = dataHalves.map(index => indexArray[index]);
+            const sliceAmounts = Array(2);
+            sliceAmounts[0] = dataHalves[0] + 1;
+            sliceAmounts[1] = indexArray.length - truncatedLength - sliceAmounts[0];
+
+            // keep the first part
+            for (let i = 0; i <= nodeHalves[0]; i++) {
+              switch (true) {
+                case i < nodeHalves[0]:
+                  sliceAmounts[0] -= truncatedArray[i].length;
+                  break;
+                case i === nodeHalves[0]:
+                  truncatedArray[i] = originalArray[i].slice(0, sliceAmounts[0]);
+                  truncatedArray[i].push(ellipsis);
+                  break;
+              }
+            }
+
+            // and the second part
+            for (let i = originalArray.length - 1; i >= nodeHalves[1]; i--) {
+              switch (true) {
+                case i > nodeHalves[1]:
+                  sliceAmounts[1] -= originalArray[i].length;
+                  break;
+                case i === nodeHalves[1]:
+                  if (nodeHalves[1] > nodeHalves[0]) truncatedArray[i] = originalArray[i].slice(-sliceAmounts[1]);
+                  if (nodeHalves[1] === nodeHalves[0]) truncatedArray[i] = truncatedArray[i].concat(originalArray[i].slice(-sliceAmounts[1]));
+                  break;
+              }
+            }
+
+            // delete the middle
+            for (let i = nodeHalves[0] + 1; i < nodeHalves[1]; i++) {
+              truncatedArray[i] = [];
+            }
+          } else {
+            // the right most index to keep from truncating
+            const indexToTry = indexArray.length - truncatedLength - 1;
+            const nodeIndex = indexArray[indexToTry];
+            let sliceAmount = indexToTry + 1;
+            for (let i = 0; i < originalArray.length; i++) {
+              switch (true) {
+                case i < nodeIndex:
+                  sliceAmount -= truncatedArray[i].length;
+                  break;
+                case i === nodeIndex:
+                  truncatedArray[i] = truncatedArray[i].slice(0, sliceAmount);
+                  truncatedArray[i].push(ellipsis);
+                  break;
+                case i > nodeIndex:
+                  truncatedArray[i] = [];
+                  break;
+              }
+            }
+          }
+          break;
+      }
+      return {
+        truncated,
+        truncatedArray
+      };
+    };
+    const truncateEvaluate = (truncatedLength, middle) => {
+      const _truncateArray = truncateArray(truncatedLength, this._defaultStringData, this._nodeDataIndexes, middle),
+        truncatedArray = _truncateArray.truncatedArray;
+      return this.checkFit(truncatedArray);
+    };
+
+    // find the best number of element to truncate
+    const finestMatch = binarySearch(0, this._nodeDataIndexes.length, truncateEvaluate, middle, this._nodeDataIndexes.length);
+    var _truncateArray2 = truncateArray(finestMatch, this._defaultStringData, this._nodeDataIndexes, middle);
+    truncated = _truncateArray2.truncated;
+    stringData = _truncateArray2.truncatedArray;
+    stringData = cleanData(stringData, this._options, true);
+    for (let i = 0; i < stringData.length; i++) {
+      const data = stringData[i];
+      truncatedText += data.join('');
+    }
+    if (truncated && !middle) {
+      truncatedText = cleanString(truncatedText.split(ellipsis)[0], ignore, false, true, true);
+      truncatedText += ellipsis;
+    } else if (truncated && middle) {
+      const halves = truncatedText.split(ellipsis);
+      truncatedText = cleanString(halves[0], ignore, false, true, true) + ellipsis + cleanString(halves[1], ignore, true, false, true);
+    }
+    return {
+      isTruncated: truncated,
+      text: truncatedText,
+      data: stringData,
+      constraints: {
+        width: this._maxWidth,
+        height: this._maxHeight,
+        lines: this._maxLines
+      }
+    };
+  }
+}
+export default truncate;

package/es/{index.js → exports/a.js}

@@ -21,4 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { TruncateText } from "./TruncateText/index.js";
+export { TruncateText } from "../TruncateText/v1/index.js";

package/{src/index.ts → es/exports/b.js}

@@ -21,5 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { TruncateText } from './TruncateText'
-export type { TruncateTextProps } from './TruncateText/props'
+export { TruncateText } from "../TruncateText/v2/index.js";

package/lib/TruncateText/{index.js → v1/index.js}

@@ -47,7 +47,7 @@ var _dec, _class, _TruncateText;
 category: components
 ---
 **/
-let TruncateText = exports.TruncateText = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_TruncateText = class TruncateText extends _react.Component {
+let TruncateText = exports.TruncateText = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_TruncateText = class TruncateText extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;

package/lib/TruncateText/v2/index.js

@@ -0,0 +1,271 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TruncateText = void 0;
+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");
+var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
+var _ensureSingleChild = require("@instructure/ui-react-utils/lib/ensureSingleChild.js");
+var _console = require("@instructure/console");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _truncate = _interopRequireDefault(require("./utils/truncate"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _class, _TruncateText;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+---
+category: components
+---
+**/
+let TruncateText = exports.TruncateText = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_TruncateText = class TruncateText extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.ref = null;
+    this._text = void 0;
+    this._debounced = void 0;
+    this._stage = null;
+    this._wasTruncated = void 0;
+    this._resizeListener = void 0;
+    this._prevWidth = null;
+    this.update = () => {
+      if (this.ref) {
+        this.setState(this.initialState);
+      }
+    };
+    this.state = this.initialState;
+  }
+  get _ref() {
+    return this.ref;
+  }
+  get initialState() {
+    return {
+      isTruncated: false,
+      needsSecondRender: true,
+      truncatedElement: void 0,
+      truncatedText: void 0
+    };
+  }
+  componentDidMount() {
+    const _this$props = this.props,
+      children = _this$props.children,
+      makeStyles = _this$props.makeStyles;
+    makeStyles === null || makeStyles === void 0 ? void 0 : makeStyles();
+    if (children) {
+      var _getBoundingClientRec;
+      this.checkChildren();
+      const txt = (0, _ensureSingleChild.ensureSingleChild)(children);
+      this._text = txt ? txt : void 0;
+      this.truncate();
+      this._debounced = (0, _debounce.debounce)(this.update, this.props.debounce, {
+        leading: true,
+        trailing: true
+      });
+      this._prevWidth = (_getBoundingClientRec = (0, _getBoundingClientRect.getBoundingClientRect)(this.ref)) === null || _getBoundingClientRec === void 0 ? void 0 : _getBoundingClientRec.width;
+      this._resizeListener = new ResizeObserver(entries => {
+        // requestAnimationFrame call is needed becuase some truncatetext test cases
+        // failed due to ResizeObserver was not able to deliver all observations within a single animation frame
+        // see: https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded
+        requestAnimationFrame(() => {
+          for (const entry of entries) {
+            const width = entry.contentRect.width;
+            if (this._prevWidth !== width) {
+              this._prevWidth = width;
+              this.props.debounce === 0 ? this.update() : this._debounced();
+            }
+          }
+        });
+      });
+      this._resizeListener.observe(this.ref);
+    }
+  }
+  componentWillUnmount() {
+    if (this._resizeListener) {
+      this._resizeListener.disconnect();
+    }
+    if (this._debounced) {
+      this._debounced.cancel();
+    }
+  }
+  shallowCompare(obj1, obj2) {
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+    if (keys1.length !== keys2.length) {
+      return false;
+    }
+    for (const key of keys1) {
+      if (obj1[key] !== obj2[key]) {
+        return false;
+      }
+    }
+    return true;
+  }
+  componentDidUpdate(prevProps) {
+    const _this$props2 = this.props,
+      children = _this$props2.children,
+      onUpdate = _this$props2.onUpdate,
+      makeStyles = _this$props2.makeStyles;
+    makeStyles === null || makeStyles === void 0 ? void 0 : makeStyles();
+    const _this$state = this.state,
+      isTruncated = _this$state.isTruncated,
+      needsSecondRender = _this$state.needsSecondRender,
+      truncatedText = _this$state.truncatedText;
+    if (children) {
+      // for some reason in React 19 prevPros and this.props are a different
+      // object even if their contents are the same, so we cannot use !==
+      if (!this.shallowCompare(prevProps, this.props)) {
+        if (prevProps.children !== this.props.children) {
+          // reset internal text variable if children change
+          this.checkChildren();
+          const txt = (0, _ensureSingleChild.ensureSingleChild)(children);
+          this._text = txt ? txt : void 0;
+        }
+        // require the double render whenever props change
+        this.setState(this.initialState);
+        return;
+      }
+      if (!needsSecondRender && (isTruncated || this._wasTruncated)) {
+        onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(isTruncated, truncatedText);
+        this._wasTruncated = isTruncated;
+      } else {
+        this.truncate();
+      }
+    }
+  }
+  checkChildren() {
+    (0, _console.logError)(!(() => {
+      let isTooDeep = false;
+      const text = (0, _ensureSingleChild.ensureSingleChild)(this.props.children);
+      _react.Children.forEach(text.props.children, child => {
+        if (child.props) {
+          _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) {
+              isTooDeep = true;
+            }
+          });
+        }
+      });
+      return isTooDeep;
+    })(), `[TruncateText] Some children are too deep in the node tree and will not render.`);
+  }
+  truncate() {
+    if (!this.state.needsSecondRender) {
+      return;
+    }
+    if (_canUseDOM.canUseDOM) {
+      var _this$props$styles;
+      const result = (0, _truncate.default)(this._stage, {
+        ...this.props,
+        parent: this.ref ? this.ref : void 0,
+        lineHeight: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.lineHeight
+      });
+      if (result) {
+        const element = this.renderChildren(result.isTruncated, result.data, result.constraints.width);
+        this.setState({
+          needsSecondRender: false,
+          isTruncated: result.isTruncated,
+          truncatedElement: element,
+          truncatedText: result.text
+        });
+      }
+    } else {
+      var _this$ref, _this$ref2;
+      const textContent = (_this$ref = this.ref) !== null && _this$ref !== void 0 && _this$ref.textContent ? (_this$ref2 = this.ref) === null || _this$ref2 === void 0 ? void 0 : _this$ref2.textContent : void 0;
+      // if dom isn't available, use original children
+      this.setState({
+        needsSecondRender: false,
+        isTruncated: false,
+        truncatedElement: this._text,
+        truncatedText: textContent
+      });
+    }
+  }
+  renderChildren(truncated, data, width) {
+    var _this$props$styles2;
+    if (!truncated) {
+      return this._text;
+    }
+    const childElements = [];
+    // iterate over each node used in the truncated string
+    for (let i = 0; i < data.length; i++) {
+      const item = data[i];
+      const element = this._text.props.children[i];
+      const nodeText = item.join('');
+      if (element && element.props) {
+        // if node is an html element and not just a string
+        childElements.push((0, _safeCloneElement.safeCloneElement)(element, element.props, nodeText));
+      } else {
+        childElements.push(nodeText);
+      }
+    }
+    // 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
+    // Breadcrumb is modifying this element's display to inline to prevent layout issues
+    // TODO: find a better way to handle this
+    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
+      }
+    }, "spacer"));
+    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, _jsxRuntime.jsxs)("span", {
+      "data-cid": "TruncateText",
+      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: [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.defaultProps = {
+  maxLines: 1,
+  ellipsis: '\u2026',
+  truncate: 'character',
+  position: 'end',
+  ignore: [' ', '.', ','],
+  debounce: 0
+}, _TruncateText)) || _class);
+var _default = exports.default = TruncateText;

package/lib/TruncateText/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['children', 'maxLines', 'position', 'truncate', 'ellipsis', 'ignore', 'debounce', 'onUpdate', 'shouldTruncateWhenInvisible'];