@instructure/ui-truncate-text 8.56.1 → 8.56.2-pr-snapshot-1721749364069

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/lib/TruncateText/index.js +12 -15
  3. package/lib/TruncateText/utils/cleanData.js +2 -2
  4. package/lib/TruncateText/utils/measureText.js +2 -2
  5. package/lib/TruncateText/utils/truncate.js +9 -11
  6. package/package.json +14 -14
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [8.56.2-pr-snapshot-1721749364069](https://github.com/instructure/instructure-ui/compare/v8.56.1...v8.56.2-pr-snapshot-1721749364069) (2024-07-23)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-truncate-text
9
+
10
+
11
+
12
+
13
+
6
14
  ## [8.56.1](https://github.com/instructure/instructure-ui/compare/v8.56.0...v8.56.1) (2024-06-13)
7
15
 
8
16
  **Note:** Version bump only for package @instructure/ui-truncate-text
package/lib/TruncateText/index.js CHANGED
@@ -8,13 +8,10 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.default = exports.TruncateText = void 0;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
10
  var _debounce = require("@instructure/debounce");
11
- var _canUseDOM = require("@instructure/ui-dom-utils/lib/canUseDOM.js");
12
- var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
13
- var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
14
- var _ensureSingleChild = require("@instructure/ui-react-utils/lib/ensureSingleChild.js");
15
- var _hack = require("@instructure/ui-react-utils/lib/hack.js");
11
+ var _uiDomUtils = require("@instructure/ui-dom-utils");
12
+ var _uiReactUtils = require("@instructure/ui-react-utils");
16
13
  var _console = require("@instructure/console");
17
- var _testable = require("@instructure/ui-testable/lib/testable.js");
14
+ var _uiTestable = require("@instructure/ui-testable");
18
15
  var _emotion = require("@instructure/emotion");
19
16
  var _styles = _interopRequireDefault(require("./styles"));
20
17
  var _theme = _interopRequireDefault(require("./theme"));
@@ -50,7 +47,7 @@ var _dec, _dec2, _dec3, _class, _class2;
50
47
  category: components
51
48
  ---
52
49
  **/
53
- let TruncateText = exports.TruncateText = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec3 = (0, _hack.hack)(['shouldTruncateWhenInvisible']), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class TruncateText extends _react.Component {
50
+ let TruncateText = exports.TruncateText = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _uiTestable.testable)(), _dec3 = (0, _uiReactUtils.hack)(['shouldTruncateWhenInvisible']), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class TruncateText extends _react.Component {
54
51
  constructor(props) {
55
52
  super(props);
56
53
  this.ref = null;
@@ -86,14 +83,14 @@ let TruncateText = exports.TruncateText = (_dec = (0, _emotion.withStyle)(_style
86
83
  if (children) {
87
84
  var _getBoundingClientRec;
88
85
  this.checkChildren();
89
- const txt = (0, _ensureSingleChild.ensureSingleChild)(children);
86
+ const txt = (0, _uiReactUtils.ensureSingleChild)(children);
90
87
  this._text = txt ? txt : void 0;
91
88
  this.truncate();
92
89
  this._debounced = (0, _debounce.debounce)(this.update, this.props.debounce, {
93
90
  leading: true,
94
91
  trailing: true
95
92
  });
96
- this._prevWidth = (_getBoundingClientRec = (0, _getBoundingClientRect.getBoundingClientRect)(this.ref)) === null || _getBoundingClientRec === void 0 ? void 0 : _getBoundingClientRec.width;
93
+ this._prevWidth = (_getBoundingClientRec = (0, _uiDomUtils.getBoundingClientRect)(this.ref)) === null || _getBoundingClientRec === void 0 ? void 0 : _getBoundingClientRec.width;
97
94
  this._resizeListener = new ResizeObserver(entries => {
98
95
  // requestAnimationFrame call is needed becuase some truncatetext test cases
99
96
  // failed due to ResizeObserver was not able to deliver all observations within a single animation frame
@@ -134,7 +131,7 @@ let TruncateText = exports.TruncateText = (_dec = (0, _emotion.withStyle)(_style
134
131
  if (prevProps.children !== this.props.children) {
135
132
  // reset internal text variable if children change
136
133
  this.checkChildren();
137
- const txt = (0, _ensureSingleChild.ensureSingleChild)(children);
134
+ const txt = (0, _uiReactUtils.ensureSingleChild)(children);
138
135
  this._text = txt ? txt : void 0;
139
136
  }
140
137
  // require the double render whenever props change
@@ -152,7 +149,7 @@ let TruncateText = exports.TruncateText = (_dec = (0, _emotion.withStyle)(_style
152
149
  checkChildren() {
153
150
  (0, _console.logError)(!(() => {
154
151
  let isTooDeep = false;
155
- const text = (0, _ensureSingleChild.ensureSingleChild)(this.props.children);
152
+ const text = (0, _uiReactUtils.ensureSingleChild)(this.props.children);
156
153
  _react.default.Children.forEach(text.props.children, child => {
157
154
  if (child.props) {
158
155
  _react.default.Children.forEach(child.props.children, grandChild => {
@@ -171,7 +168,7 @@ let TruncateText = exports.TruncateText = (_dec = (0, _emotion.withStyle)(_style
171
168
  if (!this.state.needsSecondRender) {
172
169
  return;
173
170
  }
174
- if (_canUseDOM.canUseDOM) {
171
+ if (_uiDomUtils.canUseDOM) {
175
172
  var _this$props$styles;
176
173
  const result = (0, _truncate.default)(this._stage, {
177
174
  ...this.props,
@@ -212,7 +209,7 @@ let TruncateText = exports.TruncateText = (_dec = (0, _emotion.withStyle)(_style
212
209
  const nodeText = item.join('');
213
210
  if (element && element.props) {
214
211
  // if node is an html element and not just a string
215
- childElements.push((0, _safeCloneElement.safeCloneElement)(element, element.props, nodeText));
212
+ childElements.push((0, _uiReactUtils.safeCloneElement)(element, element.props, nodeText));
216
213
  } else {
217
214
  childElements.push(nodeText);
218
215
  }
@@ -227,7 +224,7 @@ let TruncateText = exports.TruncateText = (_dec = (0, _emotion.withStyle)(_style
227
224
  }
228
225
  }));
229
226
  const children = _react.default.Children.map(childElements, child => child);
230
- return this._text.props ? (0, _safeCloneElement.safeCloneElement)(this._text, this._text.props, children) : children;
227
+ return this._text.props ? (0, _uiReactUtils.safeCloneElement)(this._text, this._text.props, children) : children;
231
228
  }
232
229
  render() {
233
230
  var _this$props$styles3;
@@ -242,7 +239,7 @@ let TruncateText = exports.TruncateText = (_dec = (0, _emotion.withStyle)(_style
242
239
  ref: el => {
243
240
  this._stage = el;
244
241
  }
245
- }, (0, _ensureSingleChild.ensureSingleChild)(children))), truncatedElement);
242
+ }, (0, _uiReactUtils.ensureSingleChild)(children))), truncatedElement);
246
243
  }
247
244
  }, _class2.displayName = "TruncateText", _class2.componentId = 'TruncateText', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
248
245
  maxLines: 1,
package/lib/TruncateText/utils/cleanData.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _cloneArray = require("@instructure/ui-utils/lib/cloneArray.js");
7
+ var _uiUtils = require("@instructure/ui-utils");
8
8
  /*
9
9
  * The MIT License (MIT)
10
10
  *
@@ -48,7 +48,7 @@ function cleanData(stringData, options, repeat = false) {
48
48
  const truncate = options.truncate,
49
49
  ignore = options.ignore,
50
50
  ellipsis = options.ellipsis;
51
- let newData = (0, _cloneArray.cloneArray)(stringData);
51
+ let newData = (0, _uiUtils.cloneArray)(stringData);
52
52
  let ellipsisNode = -1;
53
53
  let ellipsisIndex = -1;
54
54
  const findEllipsis = () => {
package/lib/TruncateText/utils/measureText.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _getComputedStyle = require("@instructure/ui-dom-utils/lib/getComputedStyle.js");
7
+ var _uiDomUtils = require("@instructure/ui-dom-utils");
8
8
  /*
9
9
  * The MIT License (MIT)
10
10
  *
@@ -48,7 +48,7 @@ function measureText(nodes, parentNode) {
48
48
  return width;
49
49
  }
50
50
  function measure(string, domNode) {
51
- const style = (0, _getComputedStyle.getComputedStyle)(domNode);
51
+ const style = (0, _uiDomUtils.getComputedStyle)(domNode);
52
52
  // we use a canvas in a doc fragment to prevent having to render the string full width in the DOM
53
53
  const canvas = document.createElement('canvas');
54
54
  document.createDocumentFragment().appendChild(canvas);
package/lib/TruncateText/utils/truncate.js CHANGED
@@ -6,11 +6,9 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = void 0;
8
8
  var _escapeHtml = _interopRequireDefault(require("escape-html"));
9
- var _cloneArray = require("@instructure/ui-utils/lib/cloneArray.js");
9
+ var _uiUtils = require("@instructure/ui-utils");
10
10
  var _console = require("@instructure/console");
11
- var _getComputedStyle = require("@instructure/ui-dom-utils/lib/getComputedStyle.js");
12
- var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
13
- var _isVisible = require("@instructure/ui-dom-utils/lib/isVisible.js");
11
+ var _uiDomUtils = require("@instructure/ui-dom-utils");
14
12
  var _measureText = _interopRequireDefault(require("./measureText"));
15
13
  var _cleanString = _interopRequireDefault(require("./cleanString"));
16
14
  var _cleanData = _interopRequireDefault(require("./cleanData"));
@@ -106,7 +104,7 @@ class Truncator {
106
104
  maxLines = _this$_options.maxLines,
107
105
  truncate = _this$_options.truncate,
108
106
  lineHeight = _this$_options.lineHeight;
109
- const style = (0, _getComputedStyle.getComputedStyle)(this._parent);
107
+ const style = (0, _uiDomUtils.getComputedStyle)(this._parent);
110
108
  // if no explicit lineHeight is inherited, use lineHeight multiplier for calculations
111
109
  const actualLineHeight = style.lineHeight === 'normal' ? lineHeight * parseFloat(style.fontSize) : parseFloat(style.lineHeight);
112
110
  const node = this._stage.firstChild.children ? this._stage.firstChild : this._stage;
@@ -125,9 +123,9 @@ class Truncator {
125
123
  nodeDataIndexes.push(i);
126
124
  }
127
125
  }
128
- this._defaultStringData = (0, _cloneArray.cloneArray)(stringData);
129
- this._nodeDataIndexes = (0, _cloneArray.cloneArray)(nodeDataIndexes);
130
- this._maxHeight = maxLines === 'auto' ? (0, _getBoundingClientRect.getBoundingClientRect)(this._parent).height : maxLines * actualLineHeight;
126
+ this._defaultStringData = (0, _uiUtils.cloneArray)(stringData);
127
+ this._nodeDataIndexes = (0, _uiUtils.cloneArray)(nodeDataIndexes);
128
+ this._maxHeight = maxLines === 'auto' ? (0, _uiDomUtils.getBoundingClientRect)(this._parent).height : maxLines * actualLineHeight;
131
129
  this._maxWidth = (0, _measureText.default)(this._nodeMap.map(item => item.node), this._parent);
132
130
  this._maxLines = maxLines === 'auto' ? Math.round(this._maxHeight / actualLineHeight) : maxLines;
133
131
  }
@@ -140,7 +138,7 @@ class Truncator {
140
138
  // parse child nodes and build a data map to associate each node with its data
141
139
  nodes.forEach(node => {
142
140
  if (node.nodeType === 1 || node.nodeType === 3) {
143
- const shouldTruncate = shouldTruncateWhenInvisible ? true : (0, _isVisible.isVisible)(node, false);
141
+ const shouldTruncate = shouldTruncateWhenInvisible ? true : (0, _uiDomUtils.isVisible)(node, false);
144
142
  const textContent = node.textContent + ' ';
145
143
  map.push({
146
144
  node,
@@ -188,7 +186,7 @@ class Truncator {
188
186
  let fits = true;
189
187
  this._stage.innerHTML = html;
190
188
  // allow a 0.5 px margin of error for browser calculation discrepancies
191
- if ((0, _getBoundingClientRect.getBoundingClientRect)(node).height - this._maxHeight > 0.5) {
189
+ if ((0, _uiDomUtils.getBoundingClientRect)(node).height - this._maxHeight > 0.5) {
192
190
  fits = false;
193
191
  }
194
192
  return fits;
@@ -224,7 +222,7 @@ class Truncator {
224
222
  };
225
223
  const truncateArray = (truncatedLength, originalArray, indexArray, middle) => {
226
224
  let truncated = false;
227
- const truncatedArray = (0, _cloneArray.cloneArray)(originalArray);
225
+ const truncatedArray = (0, _uiUtils.cloneArray)(originalArray);
228
226
  switch (truncatedLength) {
229
227
  // truncate nothing
230
228
  case 0:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-truncate-text",
3
- "version": "8.56.1",
3
+ "version": "8.56.2-pr-snapshot-1721749364069",
4
4
  "description": "A TruncateText component made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,23 +24,23 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.23.2",
27
- "@instructure/console": "8.56.1",
28
- "@instructure/debounce": "8.56.1",
29
- "@instructure/emotion": "8.56.1",
30
- "@instructure/shared-types": "8.56.1",
31
- "@instructure/ui-dom-utils": "8.56.1",
32
- "@instructure/ui-react-utils": "8.56.1",
33
- "@instructure/ui-testable": "8.56.1",
34
- "@instructure/ui-utils": "8.56.1",
27
+ "@instructure/console": "8.56.2-pr-snapshot-1721749364069",
28
+ "@instructure/debounce": "8.56.2-pr-snapshot-1721749364069",
29
+ "@instructure/emotion": "8.56.2-pr-snapshot-1721749364069",
30
+ "@instructure/shared-types": "8.56.2-pr-snapshot-1721749364069",
31
+ "@instructure/ui-dom-utils": "8.56.2-pr-snapshot-1721749364069",
32
+ "@instructure/ui-react-utils": "8.56.2-pr-snapshot-1721749364069",
33
+ "@instructure/ui-testable": "8.56.2-pr-snapshot-1721749364069",
34
+ "@instructure/ui-utils": "8.56.2-pr-snapshot-1721749364069",
35
35
  "escape-html": "^1.0.3",
36
36
  "prop-types": "^15.8.1"
37
37
  },
38
38
  "devDependencies": {
39
- "@instructure/ui-babel-preset": "8.56.1",
40
- "@instructure/ui-color-utils": "8.56.1",
41
- "@instructure/ui-test-utils": "8.56.1",
42
- "@instructure/ui-text": "8.56.1",
43
- "@instructure/ui-themes": "8.56.1",
39
+ "@instructure/ui-babel-preset": "8.56.2-pr-snapshot-1721749364069",
40
+ "@instructure/ui-color-utils": "8.56.2-pr-snapshot-1721749364069",
41
+ "@instructure/ui-test-utils": "8.56.2-pr-snapshot-1721749364069",
42
+ "@instructure/ui-text": "8.56.2-pr-snapshot-1721749364069",
43
+ "@instructure/ui-themes": "8.56.2-pr-snapshot-1721749364069",
44
44
  "@types/escape-html": "^1.0.2"
45
45
  },
46
46
  "peerDependencies": {