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

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

@@ -0,0 +1,350 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _escapeHtml = _interopRequireDefault(require("escape-html"));
+var _cloneArray = require("@instructure/ui-utils/lib/cloneArray.js");
+var _console = require("@instructure/console");
+var _getCSSStyleDeclaration = require("@instructure/ui-dom-utils/lib/getCSSStyleDeclaration.js");
+var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
+var _isVisible = require("@instructure/ui-dom-utils/lib/isVisible.js");
+var _measureText = _interopRequireDefault(require("./measureText"));
+var _cleanString = _interopRequireDefault(require("./cleanString"));
+var _cleanData = _interopRequireDefault(require("./cleanData"));
+/*
+ * 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.
+ */
+
+/**
+ * ---
+ * 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) {
+      (0, _console.logError)(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 = (0, _getCSSStyleDeclaration.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 = (0, _cloneArray.cloneArray)(stringData);
+    this._nodeDataIndexes = (0, _cloneArray.cloneArray)(nodeDataIndexes);
+    this._maxHeight = maxLines === 'auto' ? (0, _getBoundingClientRect.getBoundingClientRect)(this._parent).height : maxLines * actualLineHeight;
+    this._maxWidth = (0, _measureText.default)(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 : (0, _isVisible.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 = (0, _escapeHtml.default)(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 ((0, _getBoundingClientRect.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 = (0, _cloneArray.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 = (0, _cleanData.default)(stringData, this._options, true);
+    for (let i = 0; i < stringData.length; i++) {
+      const data = stringData[i];
+      truncatedText += data.join('');
+    }
+    if (truncated && !middle) {
+      truncatedText = (0, _cleanString.default)(truncatedText.split(ellipsis)[0], ignore, false, true, true);
+      truncatedText += ellipsis;
+    } else if (truncated && middle) {
+      const halves = truncatedText.split(ellipsis);
+      truncatedText = (0, _cleanString.default)(halves[0], ignore, false, true, true) + ellipsis + (0, _cleanString.default)(halves[1], ignore, true, false, true);
+    }
+    return {
+      isTruncated: truncated,
+      text: truncatedText,
+      data: stringData,
+      constraints: {
+        width: this._maxWidth,
+        height: this._maxHeight,
+        lines: this._maxLines
+      }
+    };
+  }
+}
+var _default2 = exports.default = truncate;

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "TruncateText", {
   enumerable: true,
   get: function () {
-    return _TruncateText.TruncateText;
+    return _v.TruncateText;
   }
 });
-var _TruncateText = require("./TruncateText");
+var _v = require("../TruncateText/v1");

package/lib/exports/b.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TruncateText", {
+  enumerable: true,
+  get: function () {
+    return _v.TruncateText;
+  }
+});
+var _v = require("../TruncateText/v2");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-truncate-text",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A TruncateText component made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -16,24 +16,24 @@
   "dependencies": {
     "@babel/runtime": "^7.27.6",
     "escape-html": "^1.0.3",
-    "@instructure/console": "11.6.0",
-    "@instructure/debounce": "11.6.0",
-    "@instructure/ui-dom-utils": "11.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-utils": "11.6.0"
+    "@instructure/console": "11.6.1-snapshot-129",
+    "@instructure/debounce": "11.6.1-snapshot-129",
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-dom-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@types/escape-html": "^1.0.4",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.6.0",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/ui-text": "11.6.0",
-    "@instructure/ui-themes": "11.6.0"
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129",
+    "@instructure/ui-color-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129",
+    "@instructure/ui-axe-check": "11.6.1-snapshot-129",
+    "@instructure/ui-text": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -43,17 +43,39 @@
   },
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_6": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_7": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    },
+    "./latest": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",

package/src/TruncateText/{index.tsx → v1/index.tsx}

@@ -32,7 +32,7 @@ import {
   ensureSingleChild
 } from '@instructure/ui-react-utils'
 import { logError as error } from '@instructure/console'
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'