@instructure/ui-truncate-text 8.33.1 → 8.33.2

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.33.2](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2) (2023-01-25)
+
+**Note:** Version bump only for package @instructure/ui-truncate-text
+
 ## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
 
 **Note:** Version bump only for package @instructure/ui-truncate-text

package/es/TruncateText/index.js

@@ -1,5 +1,4 @@
 var _dec, _dec2, _dec3, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -23,7 +22,6 @@ var _dec, _dec2, _dec3, _class, _class2;
  * 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 { debounce } from '@instructure/debounce';
@@ -36,7 +34,6 @@ import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import truncate from './utils/truncate';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 category: components
@@ -52,20 +49,16 @@ let TruncateText = (_dec = withStyle(generateStyle, generateComponentTheme), _de
     this._stage = null;
     this._wasTruncated = void 0;
     this._resizeListener = void 0;
-
     this.update = () => {
       if (this.ref) {
         this.setState(this.initialState);
       }
     };
-
     this.state = this.initialState;
   }
-
   get _ref() {
     return this.ref;
   }
-
   get initialState() {
     return {
       isTruncated: false,
@@ -74,13 +67,11 @@ let TruncateText = (_dec = withStyle(generateStyle, generateComponentTheme), _de
       truncatedText: void 0
     };
   }
-
   componentDidMount() {
     const _this$props = this.props,
-          children = _this$props.children,
-          makeStyles = _this$props.makeStyles;
+      children = _this$props.children,
+      makeStyles = _this$props.makeStyles;
     makeStyles === null || makeStyles === void 0 ? void 0 : makeStyles();
-
     if (children) {
       this.checkChildren();
       const txt = ensureSingleChild(children);
@@ -90,10 +81,8 @@ let TruncateText = (_dec = withStyle(generateStyle, generateComponentTheme), _de
         leading: true,
         trailing: true
       });
-
       const _getBoundingClientRec = getBoundingClientRect(this.ref),
-            origWidth = _getBoundingClientRec.width;
-
+        origWidth = _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
@@ -101,39 +90,33 @@ let TruncateText = (_dec = withStyle(generateStyle, generateComponentTheme), _de
         requestAnimationFrame(() => {
           for (const entry of entries) {
             const width = entry.contentRect.width;
-
             if (origWidth !== 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();
     }
   }
-
   componentDidUpdate(prevProps) {
     const _this$props2 = this.props,
-          children = _this$props2.children,
-          onUpdate = _this$props2.onUpdate,
-          makeStyles = _this$props2.makeStyles;
+      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;
-
+      isTruncated = _this$state.isTruncated,
+      needsSecondRender = _this$state.needsSecondRender,
+      truncatedText = _this$state.truncatedText;
     if (children) {
       if (prevProps !== this.props) {
         if (prevProps.children !== this.props.children) {
@@ -141,13 +124,11 @@ let TruncateText = (_dec = withStyle(generateStyle, generateComponentTheme), _de
           this.checkChildren();
           const txt = ensureSingleChild(children);
           this._text = txt ? txt : void 0;
-        } // require the double render whenever props change
-
-
+        }
+        // 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;
@@ -156,7 +137,6 @@ let TruncateText = (_dec = withStyle(generateStyle, generateComponentTheme), _de
       }
     }
   }
-
   checkChildren() {
     error(!(() => {
       let isTooDeep = false;
@@ -175,20 +155,17 @@ let TruncateText = (_dec = withStyle(generateStyle, generateComponentTheme), _de
       return isTooDeep;
     })(), `[TruncateText] Some children are too deep in the node tree and will not render.`);
   }
-
   truncate() {
     if (!this.state.needsSecondRender) {
       return;
     }
-
     if (canUseDOM) {
       var _this$props$styles;
-
-      const result = truncate(this._stage, { ...this.props,
+      const result = truncate(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({
@@ -200,9 +177,8 @@ let TruncateText = (_dec = withStyle(generateStyle, generateComponentTheme), _de
       }
     } 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
-
+      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,
@@ -211,32 +187,27 @@ let TruncateText = (_dec = withStyle(generateStyle, generateComponentTheme), _de
       });
     }
   }
-
   renderChildren(truncated, data, width) {
     var _this$props$styles2;
-
     if (!truncated) {
       return this._text;
     }
-
-    const childElements = []; // iterate over each node used in the truncated string
-
+    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(safeCloneElement(element, element.props, nodeText));
       } else {
         childElements.push(nodeText);
       }
-    } // this spacer element is set to the max width the full text could
+    }
+    // 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", {
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.spacer,
       style: {
@@ -246,10 +217,8 @@ let TruncateText = (_dec = withStyle(generateStyle, generateComponentTheme), _de
     const children = React.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", {
@@ -263,7 +232,6 @@ let TruncateText = (_dec = withStyle(generateStyle, generateComponentTheme), _de
       }
     }, ensureSingleChild(children))), truncatedElement);
   }
-
 }, _class2.displayName = "TruncateText", _class2.componentId = 'TruncateText', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   maxLines: 1,
   ellipsis: '\u2026',

package/es/TruncateText/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 const propTypes = {
   children: PropTypes.node.isRequired,

package/es/TruncateText/styles.js

@@ -54,5 +54,4 @@ const generateStyle = componentTheme => {
     lineHeight: componentTheme.lineHeight
   };
 };
-
 export default generateStyle;

package/es/TruncateText/theme.js

@@ -33,8 +33,8 @@ const generateComponentTheme = theme => {
     fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
     lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 export default generateComponentTheme;

package/es/TruncateText/utils/cleanData.js

@@ -21,8 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { cloneArray } from '@instructure/ui-utils';
 
+import { cloneArray } from '@instructure/ui-utils';
 /**
  * ---
  * parent: TruncateText
@@ -41,91 +41,73 @@ import { cloneArray } from '@instructure/ui-utils';
 function cleanData(stringData, options) {
   let repeat = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
   const truncate = options.truncate,
-        ignore = options.ignore,
-        ellipsis = options.ellipsis;
+    ignore = options.ignore,
+    ellipsis = options.ellipsis;
   let newData = cloneArray(stringData);
   let ellipsisNode = -1;
   let ellipsisIndex = -1;
-
   const findEllipsis = () => {
     for (let i = 0; i < newData.length; i++) {
       const nodeData = newData[i];
-
       if (nodeData.indexOf(ellipsis) !== -1) {
         ellipsisNode = i;
         ellipsisIndex = nodeData.indexOf(ellipsis);
       }
     }
   };
-
   if (truncate === 'character') {
     findEllipsis();
     let node = newData[ellipsisNode];
-
     if (node) {
       const before = node[ellipsisIndex - 1];
-
       if (before && ignore.indexOf(before) !== -1) {
         // remove character immediately BEFORE the ellipsis in the same node
         newData[ellipsisNode].splice(ellipsisIndex - 1, 1);
       }
-
       if (!before) {
         // character before the ellipsis is part of a different node
         // find the next node with data and remove last datum
         let prevNode = null;
         let prevNodeIndex = ellipsisNode - 1;
-
         while (prevNodeIndex >= 0) {
           prevNode = newData[prevNodeIndex];
-
           if (prevNode.length > 0) {
             break;
           } else {
             prevNodeIndex--;
           }
         }
-
         if (prevNode) {
           const lastChar = String(prevNode.slice(-1));
-
           if (ignore.indexOf(lastChar) !== -1) {
             newData[prevNodeIndex].length -= 1;
           }
         }
       }
     }
-
     findEllipsis();
     node = newData[ellipsisNode];
-
     if (node) {
       const after = node[ellipsisIndex + 1];
-
       if (after && ignore.indexOf(after) !== -1) {
         // remove character immediately AFTER the ellipsis in the same node
         newData[ellipsisNode].splice(ellipsisIndex + 1, 1);
       }
-
       if (!after) {
         // character after the ellipsis is part of a different node
         // find the next node with data and remove first datum
         let nextNode = null;
         let nextNodeIndex = ellipsisNode + 1;
-
         while (nextNodeIndex < newData.length) {
           nextNode = newData[nextNodeIndex];
-
           if (nextNode.length > 0) {
             break;
           } else {
             nextNodeIndex++;
           }
         }
-
         if (nextNode) {
           const firstChar = String(nextNode[0]);
-
           if (ignore.indexOf(firstChar) !== -1) {
             newData[nextNodeIndex].shift();
           }
@@ -135,10 +117,8 @@ function cleanData(stringData, options) {
   } else {
     findEllipsis();
     const node = newData[ellipsisNode];
-
     if (node) {
       const before = node[ellipsisIndex - 1];
-
       if (before && ignore.indexOf(before.slice(-1)) !== -1) {
         if (before.length === 1) {
           // remove entire word datum
@@ -148,26 +128,21 @@ function cleanData(stringData, options) {
           newData[ellipsisNode][ellipsisIndex - 1] = before.slice(0, -1);
         }
       }
-
       if (!before) {
         // word before the ellipsis is part of a different node
         // find the next node with data and remove last datum
         let prevNode = null;
         let prevNodeIndex = ellipsisNode - 1;
-
         while (prevNodeIndex >= 0) {
           prevNode = newData[prevNodeIndex];
-
           if (prevNode.length > 0) {
             break;
           } else {
             prevNodeIndex--;
           }
         }
-
         if (prevNode) {
           const lastChar = String(prevNode.slice(-1)).slice(-1);
-
           if (ignore.indexOf(lastChar) !== -1) {
             const lastItem = prevNode.length - 1;
             newData[prevNodeIndex][lastItem] = prevNode[lastItem].slice(0, -1);
@@ -176,12 +151,9 @@ function cleanData(stringData, options) {
       }
     }
   }
-
   if (repeat) {
     newData = cleanData(newData, options, false);
   }
-
   return newData;
 }
-
 export default cleanData;

package/es/TruncateText/utils/cleanString.js

@@ -42,20 +42,15 @@ function cleanString(string, ignore) {
   let text = string;
   const firstChar = text.charAt(0);
   const lastChar = text.slice(-1);
-
   if (start && ignore.indexOf(firstChar) !== -1) {
     text = text.slice(1);
   }
-
   if (end && ignore.indexOf(lastChar) !== -1) {
     text = text.slice(0, -1);
   }
-
   if (repeat) {
     text = cleanString(text, ignore, start, end, false);
   }
-
   return text;
 }
-
 export default cleanString;

package/es/TruncateText/utils/measureText.js

@@ -21,7 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { getComputedStyle } from '@instructure/ui-dom-utils';
+
 /**
  * ---
  * parent: TruncateText
@@ -32,36 +34,29 @@ import { getComputedStyle } from '@instructure/ui-dom-utils';
  * @param {DOMNode[]} nodes Array of DOM nodes.
  * @param {DOMNode} parentNode The node to inherit default styles from.
  */
-
 function measureText(nodes, parentNode) {
   let width = 0;
-
   for (let i = 0; i < nodes.length; i++) {
     const node = nodes[i];
     width += measure(node.textContent, node.nodeType === 1 ? node : parentNode);
   }
-
   return width;
 }
-
 function measure(string, domNode) {
-  const style = getComputedStyle(domNode); // we use a canvas in a doc fragment to prevent having to render the string full width in the DOM
-
+  const style = getComputedStyle(domNode);
+  // we use a canvas in a doc fragment to prevent having to render the string full width in the DOM
   const canvas = document.createElement('canvas');
   document.createDocumentFragment().appendChild(canvas);
   const context = canvas.getContext('2d');
-
   if (!context || !string) {
     return 0;
   }
-
   let text = string;
   let letterOffset = 0;
-  let width = 0; // grab individual font styles
+  let width = 0;
+  // grab individual font styles
   // some browsers don't report a value for style['font']
-
   context.font = [style.fontWeight, style.fontStyle, style.fontSize, style.fontFamily].join(' ');
-
   if (style.textTransform === 'uppercase') {
     text = string.toUpperCase();
   } else if (style.textTransform === 'lowercase') {
@@ -69,14 +64,11 @@ function measure(string, domNode) {
   } else if (style.textTransform === 'capitalize') {
     text = string.replace(/\b\w/g, str => str.toUpperCase());
   }
-
   if (style.letterSpacing !== 'normal') {
     letterOffset = text.length * parseInt(style.letterSpacing);
   }
-
-  width = context.measureText(text).width + letterOffset; // returns the max potential width of the text, assuming the text was on a single line
-
+  width = context.measureText(text).width + letterOffset;
+  // returns the max potential width of the text, assuming the text was on a single line
   return width;
 }
-
 export default measureText;