@instructure/ui-truncate-text 8.11.2-snapshot.3 → 8.11.2-snapshot.39

package/es/TruncateText/index.js

@@ -48,7 +48,7 @@ let TruncateText = (_dec = withStyle(generateStyle, generateComponentTheme), _de
     this.ref = null;
 
     this.update = () => {
-      if (this._ref) {
+      if (this.ref) {
         this.setState(this.initialState);
       }
     };
@@ -56,6 +56,10 @@ let TruncateText = (_dec = withStyle(generateStyle, generateComponentTheme), _de
     this.state = this.initialState;
   }
 
+  get _ref() {
+    return this.ref;
+  }
+
   get initialState() {
     return {
       isTruncated: false,
@@ -80,7 +84,7 @@ let TruncateText = (_dec = withStyle(generateStyle, generateComponentTheme), _de
         trailing: true
       });
 
-      const _getBoundingClientRec = getBoundingClientRect(this._ref),
+      const _getBoundingClientRec = getBoundingClientRect(this.ref),
             origWidth = _getBoundingClientRec.width;
 
       this._resizeListener = new ResizeObserver(entries => {
@@ -98,7 +102,7 @@ let TruncateText = (_dec = withStyle(generateStyle, generateComponentTheme), _de
         });
       });
 
-      this._resizeListener.observe(this._ref);
+      this._resizeListener.observe(this.ref);
     }
   }
 
@@ -173,7 +177,7 @@ let TruncateText = (_dec = withStyle(generateStyle, generateComponentTheme), _de
       var _this$props$styles;
 
       const result = truncate(this._stage, { ...this.props,
-        parent: this._ref,
+        parent: this.ref,
         lineHeight: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.lineHeight
       });
 
@@ -187,12 +191,14 @@ let TruncateText = (_dec = withStyle(generateStyle, generateComponentTheme), _de
         });
       }
     } else {
+      var _this$ref;
+
       // if dom isn't available, use original children
       this.setState({
         needsSecondRender: false,
         isTruncated: false,
         truncatedElement: this._text,
-        truncatedText: this._ref.textContent
+        truncatedText: (_this$ref = this.ref) === null || _this$ref === void 0 ? void 0 : _this$ref.textContent
       });
     }
   }
@@ -239,8 +245,6 @@ let TruncateText = (_dec = withStyle(generateStyle, generateComponentTheme), _de
     return jsx("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; // TODO remove this and keep only 'ref' in V9
-
         this.ref = el;
       }
     }, children && (truncatedElement ? null : jsx("span", {

package/lib/TruncateText/index.js

@@ -50,7 +50,7 @@ let TruncateText = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
     this.ref = null;
 
     this.update = () => {
-      if (this._ref) {
+      if (this.ref) {
         this.setState(this.initialState);
       }
     };
@@ -58,6 +58,10 @@ let TruncateText = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
     this.state = this.initialState;
   }
 
+  get _ref() {
+    return this.ref;
+  }
+
   get initialState() {
     return {
       isTruncated: false,
@@ -82,7 +86,7 @@ let TruncateText = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
         trailing: true
       });
 
-      const _getBoundingClientRec = (0, _getBoundingClientRect.getBoundingClientRect)(this._ref),
+      const _getBoundingClientRec = (0, _getBoundingClientRect.getBoundingClientRect)(this.ref),
             origWidth = _getBoundingClientRec.width;
 
       this._resizeListener = new ResizeObserver(entries => {
@@ -100,7 +104,7 @@ let TruncateText = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
         });
       });
 
-      this._resizeListener.observe(this._ref);
+      this._resizeListener.observe(this.ref);
     }
   }
 
@@ -177,7 +181,7 @@ let TruncateText = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
       var _this$props$styles;
 
       const result = (0, _truncate.default)(this._stage, { ...this.props,
-        parent: this._ref,
+        parent: this.ref,
         lineHeight: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.lineHeight
       });
 
@@ -191,12 +195,14 @@ let TruncateText = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
         });
       }
     } else {
+      var _this$ref;
+
       // if dom isn't available, use original children
       this.setState({
         needsSecondRender: false,
         isTruncated: false,
         truncatedElement: this._text,
-        truncatedText: this._ref.textContent
+        truncatedText: (_this$ref = this.ref) === null || _this$ref === void 0 ? void 0 : _this$ref.textContent
       });
     }
   }
@@ -245,8 +251,6 @@ let TruncateText = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
     return (0, _emotion.jsx)("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; // TODO remove this and keep only 'ref' in V9
-
         this.ref = el;
       }
     }, children && (truncatedElement ? null : (0, _emotion.jsx)("span", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-truncate-text",
-  "version": "8.11.2-snapshot.3+6c8116bbe",
+  "version": "8.11.2-snapshot.39+5b3b94d60",
   "description": "A TruncateText component made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,23 +25,23 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.11.2-snapshot.3+6c8116bbe",
-    "@instructure/debounce": "8.11.2-snapshot.3+6c8116bbe",
-    "@instructure/emotion": "8.11.2-snapshot.3+6c8116bbe",
-    "@instructure/shared-types": "8.11.2-snapshot.3+6c8116bbe",
-    "@instructure/ui-dom-utils": "8.11.2-snapshot.3+6c8116bbe",
-    "@instructure/ui-react-utils": "8.11.2-snapshot.3+6c8116bbe",
-    "@instructure/ui-testable": "8.11.2-snapshot.3+6c8116bbe",
-    "@instructure/ui-utils": "8.11.2-snapshot.3+6c8116bbe",
+    "@instructure/console": "8.11.2-snapshot.39+5b3b94d60",
+    "@instructure/debounce": "8.11.2-snapshot.39+5b3b94d60",
+    "@instructure/emotion": "8.11.2-snapshot.39+5b3b94d60",
+    "@instructure/shared-types": "8.11.2-snapshot.39+5b3b94d60",
+    "@instructure/ui-dom-utils": "8.11.2-snapshot.39+5b3b94d60",
+    "@instructure/ui-react-utils": "8.11.2-snapshot.39+5b3b94d60",
+    "@instructure/ui-testable": "8.11.2-snapshot.39+5b3b94d60",
+    "@instructure/ui-utils": "8.11.2-snapshot.39+5b3b94d60",
     "escape-html": "^1",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.11.2-snapshot.3+6c8116bbe",
-    "@instructure/ui-color-utils": "8.11.2-snapshot.3+6c8116bbe",
-    "@instructure/ui-test-utils": "8.11.2-snapshot.3+6c8116bbe",
-    "@instructure/ui-text": "8.11.2-snapshot.3+6c8116bbe",
-    "@instructure/ui-themes": "8.11.2-snapshot.3+6c8116bbe"
+    "@instructure/ui-babel-preset": "8.11.2-snapshot.39+5b3b94d60",
+    "@instructure/ui-color-utils": "8.11.2-snapshot.39+5b3b94d60",
+    "@instructure/ui-test-utils": "8.11.2-snapshot.39+5b3b94d60",
+    "@instructure/ui-text": "8.11.2-snapshot.39+5b3b94d60",
+    "@instructure/ui-themes": "8.11.2-snapshot.39+5b3b94d60"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -50,5 +50,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "6c8116bbe87878c77fca03bf26de932b40e21302"
+  "gitHead": "5b3b94d60693dc069b6ff4fde8f2ca1a72462ab7"
 }

package/src/TruncateText/index.tsx

@@ -74,6 +74,13 @@ class TruncateText extends Component<TruncateTextProps> {
     super(props)
     this.state = this.initialState
   }
+  get _ref() {
+    console.warn(
+      '_ref property is deprecated and will be removed in v9, please use ref instead'
+    )
+
+    return this.ref
+  }
 
   get initialState() {
     return {
@@ -103,8 +110,7 @@ class TruncateText extends Component<TruncateTextProps> {
         trailing: true
       })
 
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'width' does not exist on type '{}'.
-      const { width: origWidth } = getBoundingClientRect(this._ref)
+      const { width: origWidth } = getBoundingClientRect(this.ref)
       // @ts-expect-error ts-migrate(2339) FIXME: Property '_resizeListener' does not exist on type ... Remove this comment to see the full error message
       this._resizeListener = new ResizeObserver((entries) => {
         // requestAnimationFrame call is needed becuase some truncatetext test cases
@@ -123,7 +129,7 @@ class TruncateText extends Component<TruncateTextProps> {
       })
 
       // @ts-expect-error ts-migrate(2339) FIXME: Property '_resizeListener' does not exist on type ... Remove this comment to see the full error message
-      this._resizeListener.observe(this._ref)
+      this._resizeListener.observe(this.ref)
     }
   }
 
@@ -199,8 +205,7 @@ class TruncateText extends Component<TruncateTextProps> {
   }
 
   update = () => {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_ref' does not exist on type 'TruncateTe... Remove this comment to see the full error message
-    if (this._ref) {
+    if (this.ref) {
       this.setState(this.initialState)
     }
   }
@@ -215,8 +220,7 @@ class TruncateText extends Component<TruncateTextProps> {
       // @ts-expect-error ts-migrate(2339) FIXME: Property '_stage' does not exist on type 'Truncate... Remove this comment to see the full error message
       const result = truncate(this._stage, {
         ...this.props,
-        // @ts-expect-error ts-migrate(2339) FIXME: Property '_ref' does not exist on type 'TruncateTe... Remove this comment to see the full error message
-        parent: this._ref,
+        parent: this.ref,
         lineHeight: this.props.styles?.lineHeight
       })
       if (result) {
@@ -239,8 +243,7 @@ class TruncateText extends Component<TruncateTextProps> {
         isTruncated: false,
         // @ts-expect-error ts-migrate(2339) FIXME: Property '_text' does not exist on type 'TruncateT... Remove this comment to see the full error message
         truncatedElement: this._text,
-        // @ts-expect-error ts-migrate(2339) FIXME: Property '_ref' does not exist on type 'TruncateTe... Remove this comment to see the full error message
-        truncatedText: this._ref.textContent
+        truncatedText: this.ref?.textContent
       })
     }
   }
@@ -290,8 +293,6 @@ class TruncateText extends Component<TruncateTextProps> {
       <span
         css={this.props.styles?.truncateText}
         ref={(el) => {
-          // @ts-expect-error ts-migrate(2339) FIXME: Property '_ref' does not exist on type 'TruncateTe... Remove this comment to see the full error message
-          this._ref = el // TODO remove this and keep only 'ref' in V9
           this.ref = el
         }}
       >

package/types/TruncateText/index.d.ts

@@ -42,6 +42,7 @@ declare class TruncateText extends Component<TruncateTextProps> {
     };
     ref: Element | null;
     constructor(props: any);
+    get _ref(): Element | null;
     get initialState(): {
         isTruncated: boolean;
         needsSecondRender: boolean;

package/types/TruncateText/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TruncateText/index.tsx"],"names":[],"mappings":"AAuBA,eAAe;AACf,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAWxC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAOrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEhD;;;;GAIG;AACH,cAGM,YAAa,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACrD,MAAM,CAAC,QAAQ,CAAC,WAAW,kBAAiB;IAE5C,MAAM,CAAC,YAAY;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;;;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;;;;;;;MASlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;gBAGd,KAAK,KAAA;IAKjB,IAAI,YAAY;;;;;MAOf;IAED,iBAAiB;IA2CjB,oBAAoB;IAepB,kBAAkB,CAAC,SAAS,KAAA;IAkC5B,aAAa;IAsBb,MAAM,aAKL;IAED,QAAQ;IAyCR,cAAc,CAAC,SAAS,KAAA,EAAE,IAAI,KAAA,EAAE,KAAK,KAAA;IAmCrC,MAAM;CA6BP;AAED,eAAe,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TruncateText/index.tsx"],"names":[],"mappings":"AAuBA,eAAe;AACf,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAWxC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAOrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEhD;;;;GAIG;AACH,cAGM,YAAa,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACrD,MAAM,CAAC,QAAQ,CAAC,WAAW,kBAAiB;IAE5C,MAAM,CAAC,YAAY;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,SAAS;;;;;;;;;;OAAY;IAE5B,MAAM,CAAC,YAAY;;;;;;;;MASlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;gBAGd,KAAK,KAAA;IAIjB,IAAI,IAAI,mBAMP;IAED,IAAI,YAAY;;;;;MAOf;IAED,iBAAiB;IA0CjB,oBAAoB;IAepB,kBAAkB,CAAC,SAAS,KAAA;IAkC5B,aAAa;IAsBb,MAAM,aAIL;IAED,QAAQ;IAuCR,cAAc,CAAC,SAAS,KAAA,EAAE,IAAI,KAAA,EAAE,KAAK,KAAA;IAmCrC,MAAM;CA2BP;AAED,eAAe,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,CAAA"}