@instructure/ui-tag 8.13.1-snapshot.26 → 8.13.1-snapshot.36

package/es/Tag/TagLocator.js

@@ -22,5 +22,6 @@
  * SOFTWARE.
  */
 import { locator } from '@instructure/ui-test-locator';
-import { Tag } from './index';
+import { Tag } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
 export const TagLocator = locator(Tag.selector);

package/es/Tag/__examples__/Tag.examples.js

@@ -26,7 +26,7 @@ export default {
   propValues: {
     text: ['Some tag', 'A lot of content which will truncate']
   },
-  getComponentProps: props => {
+  getComponentProps: () => {
     return {
       onClick: () => {}
     };

package/es/Tag/index.js

@@ -25,7 +25,7 @@ var _dec, _dec2, _class, _class2, _temp;
  */
 
 /** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { IconXSolid } from '@instructure/ui-icons';
 import { View } from '@instructure/ui-view';
 import { omitProps } from '@instructure/ui-react-utils';
@@ -39,14 +39,16 @@ import { allowedProps, propTypes } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 
 let Tag = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Tag extends Component {
   constructor() {
     super(...arguments);
+    this.ref = null;
 
     this.focus = () => {
-      this._container && this._container.focus();
+      this.ref && this.ref.focus();
     };
 
     this.handleClick = e => {
@@ -63,8 +65,12 @@ let Tag = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = test
       }
     };
 
-    this.handleRef = node => {
-      this._container = node;
+    this.handleRef = element => {
+      this.ref = element;
+
+      if (typeof this.props.elementRef === 'function') {
+        this.props.elementRef(element);
+      }
     };
   }
 
@@ -74,14 +80,14 @@ let Tag = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = test
     (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate() {
     var _this$props$makeStyle2, _this$props3;
 
     (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
   }
 
   get focused() {
-    return isActiveElement(this._container);
+    return isActiveElement(this.ref);
   }
 
   render() {
@@ -97,8 +103,7 @@ let Tag = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = test
           styles = _this$props4.styles;
     const passthroughProps = View.omitViewProps(omitProps(this.props, Tag.allowedProps), Tag);
     return jsx(View, Object.assign({}, passthroughProps, {
-      ref: this.handleRef,
-      elementRef: this.props.elementRef,
+      elementRef: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.tag,
       className: className,
       as: onClick ? 'button' : 'span',

package/es/Tag/props.js

@@ -27,33 +27,11 @@ const propTypes = {
   className: PropTypes.string,
   text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
   title: PropTypes.string,
-
-  /**
-   * Whether or not to disable the tag
-   */
   disabled: PropTypes.bool,
-
-  /**
-   * Works just like disabled but keeps the same styles as if it were active
-   */
   readOnly: PropTypes.bool,
   dismissible: PropTypes.bool,
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: ThemeablePropTypes.spacing,
-
-  /**
-   * If you add an onClick prop, Tag renders as a clickable button
-   */
   onClick: PropTypes.func,
-
-  /**
-   * Provides a reference to the underlying html root element
-   */
   elementRef: PropTypes.func,
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   variant: PropTypes.oneOf(['default', 'inline'])

package/lib/Tag/TagLocator.js

@@ -32,5 +32,6 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const TagLocator = (0, _locator.locator)(_index.Tag.selector);
 exports.TagLocator = TagLocator;

package/lib/Tag/__examples__/Tag.examples.js

@@ -33,7 +33,7 @@ var _default = {
   propValues: {
     text: ['Some tag', 'A lot of content which will truncate']
   },
-  getComponentProps: props => {
+  getComponentProps: () => {
     return {
       onClick: () => {}
     };

package/lib/Tag/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
@@ -7,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Tag = void 0;
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _IconXSolid = require("@instructure/ui-icons/lib/IconXSolid.js");
 
@@ -33,13 +35,15 @@ var _dec, _dec2, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 let Tag = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class Tag extends _react.Component {
   constructor() {
     super(...arguments);
+    this.ref = null;
 
     this.focus = () => {
-      this._container && this._container.focus();
+      this.ref && this.ref.focus();
     };
 
     this.handleClick = e => {
@@ -56,8 +60,12 @@ let Tag = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
       }
     };
 
-    this.handleRef = node => {
-      this._container = node;
+    this.handleRef = element => {
+      this.ref = element;
+
+      if (typeof this.props.elementRef === 'function') {
+        this.props.elementRef(element);
+      }
     };
   }
 
@@ -67,14 +75,14 @@ let Tag = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
     (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate() {
     var _this$props$makeStyle2, _this$props3;
 
     (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
   }
 
   get focused() {
-    return (0, _isActiveElement.isActiveElement)(this._container);
+    return (0, _isActiveElement.isActiveElement)(this.ref);
   }
 
   render() {
@@ -92,8 +100,7 @@ let Tag = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
     const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Tag.allowedProps), Tag);
 
     return (0, _emotion.jsx)(_View.View, Object.assign({}, passthroughProps, {
-      ref: this.handleRef,
-      elementRef: this.props.elementRef,
+      elementRef: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.tag,
       className: className,
       as: onClick ? 'button' : 'span',

package/lib/Tag/props.js

@@ -38,33 +38,11 @@ const propTypes = {
   className: _propTypes.default.string,
   text: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,
   title: _propTypes.default.string,
-
-  /**
-   * Whether or not to disable the tag
-   */
   disabled: _propTypes.default.bool,
-
-  /**
-   * Works just like disabled but keeps the same styles as if it were active
-   */
   readOnly: _propTypes.default.bool,
   dismissible: _propTypes.default.bool,
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: _emotion.ThemeablePropTypes.spacing,
-
-  /**
-   * If you add an onClick prop, Tag renders as a clickable button
-   */
   onClick: _propTypes.default.func,
-
-  /**
-   * Provides a reference to the underlying html root element
-   */
   elementRef: _propTypes.default.func,
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
   variant: _propTypes.default.oneOf(['default', 'inline'])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tag",
-  "version": "8.13.1-snapshot.26+46fefbe37",
+  "version": "8.13.1-snapshot.36+fc6f2ce45",
   "description": "A tag component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,22 +25,22 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.13.1-snapshot.26+46fefbe37",
-    "@instructure/emotion": "8.13.1-snapshot.26+46fefbe37",
-    "@instructure/shared-types": "8.13.1-snapshot.26+46fefbe37",
-    "@instructure/ui-color-utils": "8.13.1-snapshot.26+46fefbe37",
-    "@instructure/ui-dom-utils": "8.13.1-snapshot.26+46fefbe37",
-    "@instructure/ui-icons": "8.13.1-snapshot.26+46fefbe37",
-    "@instructure/ui-react-utils": "8.13.1-snapshot.26+46fefbe37",
-    "@instructure/ui-testable": "8.13.1-snapshot.26+46fefbe37",
-    "@instructure/ui-view": "8.13.1-snapshot.26+46fefbe37",
+    "@instructure/console": "8.13.1-snapshot.36+fc6f2ce45",
+    "@instructure/emotion": "8.13.1-snapshot.36+fc6f2ce45",
+    "@instructure/shared-types": "8.13.1-snapshot.36+fc6f2ce45",
+    "@instructure/ui-color-utils": "8.13.1-snapshot.36+fc6f2ce45",
+    "@instructure/ui-dom-utils": "8.13.1-snapshot.36+fc6f2ce45",
+    "@instructure/ui-icons": "8.13.1-snapshot.36+fc6f2ce45",
+    "@instructure/ui-react-utils": "8.13.1-snapshot.36+fc6f2ce45",
+    "@instructure/ui-testable": "8.13.1-snapshot.36+fc6f2ce45",
+    "@instructure/ui-view": "8.13.1-snapshot.36+fc6f2ce45",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.13.1-snapshot.26+46fefbe37",
-    "@instructure/ui-test-locator": "8.13.1-snapshot.26+46fefbe37",
-    "@instructure/ui-test-utils": "8.13.1-snapshot.26+46fefbe37",
-    "@instructure/ui-themes": "8.13.1-snapshot.26+46fefbe37"
+    "@instructure/ui-babel-preset": "8.13.1-snapshot.36+fc6f2ce45",
+    "@instructure/ui-test-locator": "8.13.1-snapshot.36+fc6f2ce45",
+    "@instructure/ui-test-utils": "8.13.1-snapshot.36+fc6f2ce45",
+    "@instructure/ui-themes": "8.13.1-snapshot.36+fc6f2ce45"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -49,5 +49,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "46fefbe371fc4000ebcc26609d003d75eb81eb69"
+  "gitHead": "fc6f2ce45e81843342834c2fd6526c30441c0928"
 }

package/src/Tag/__examples__/Tag.examples.ts

@@ -21,15 +21,18 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
+import type { StoryConfig } from '@instructure/ui-test-utils'
+import type { TagProps } from '../props'
+
 export default {
   sectionProp: 'variant',
   propValues: {
     text: ['Some tag', 'A lot of content which will truncate']
   },
-  // @ts-expect-error ts-migrate(6133) FIXME: 'props' is declared but its value is never read.
-  getComponentProps: (props) => {
+  getComponentProps: () => {
     return {
       onClick: () => {}
     }
   }
-}
+} as StoryConfig<TagProps>

package/src/Tag/index.tsx

@@ -22,10 +22,11 @@
  * SOFTWARE.
  */
 /** @jsx jsx */
-import { Component } from 'react'
+import React, { Component } from 'react'
 
 import { IconXSolid } from '@instructure/ui-icons'
 import { View } from '@instructure/ui-view'
+import type { ViewProps } from '@instructure/ui-view'
 import { omitProps } from '@instructure/ui-react-utils'
 import { isActiveElement } from '@instructure/ui-dom-utils'
 import { testable } from '@instructure/ui-testable'
@@ -40,6 +41,7 @@ import { allowedProps, propTypes } from './props'
 ---
 category: components
 ---
+@tsProps
 **/
 
 @withStyle(generateStyle, generateComponentTheme)
@@ -57,27 +59,25 @@ class Tag extends Component<TagProps> {
     readOnly: false
   }
 
+  ref: Element | null = null
+
   componentDidMount() {
     this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate() {
     this.props.makeStyles?.()
   }
 
   get focused() {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_container' does not exist on type 'Tag'... Remove this comment to see the full error message
-    return isActiveElement(this._container)
+    return isActiveElement(this.ref)
   }
 
   focus = () => {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_container' does not exist on type 'Tag'... Remove this comment to see the full error message
-    this._container && this._container.focus()
+    this.ref && (this.ref as HTMLElement).focus()
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'e' implicitly has an 'any' type.
-  handleClick = (e) => {
+  handleClick = (e: React.MouseEvent<ViewProps>) => {
     const { disabled, readOnly, onClick } = this.props
 
     if (disabled || readOnly) {
@@ -88,10 +88,12 @@ class Tag extends Component<TagProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'node' implicitly has an 'any' type.
-  handleRef = (node) => {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_container' does not exist on type 'Tag'... Remove this comment to see the full error message
-    this._container = node
+  handleRef = (element: Element | null) => {
+    this.ref = element
+
+    if (typeof this.props.elementRef === 'function') {
+      this.props.elementRef(element)
+    }
   }
 
   render() {
@@ -115,8 +117,7 @@ class Tag extends Component<TagProps> {
     return (
       <View
         {...passthroughProps}
-        ref={this.handleRef}
-        elementRef={this.props.elementRef}
+        elementRef={this.handleRef}
         css={styles?.tag}
         className={className}
         as={onClick ? 'button' : 'span'}

package/src/Tag/props.ts

@@ -21,10 +21,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import { ThemeablePropTypes } from '@instructure/emotion'
 
+import type { ViewProps } from '@instructure/ui-view'
 import type {
   Spacing,
   WithStyleProps,
@@ -40,11 +43,28 @@ type TagOwnProps = {
   className?: string
   text: string | React.ReactNode
   title?: string
+  /**
+   * Whether or not to disable the tag
+   */
   disabled?: boolean
+  /**
+   * Works just like disabled but keeps the same styles as if it were active
+   */
   readOnly?: boolean
   dismissible?: boolean
+  /**
+   * Valid values are `0`, `none`, `auto`, `xxxx-small`, `xx-small`, `x-small`,
+   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
+   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
+   */
   margin?: Spacing
-  onClick?: (...args: any[]) => any
+  /**
+   * If you add an onClick prop, Tag renders as a clickable button
+   */
+  onClick?: (event: React.MouseEvent<ViewProps>) => void
+  /**
+   * Provides a reference to the underlying html root element
+   */
   elementRef?: (element: Element | null) => void
   size?: 'small' | 'medium' | 'large'
   variant?: 'default' | 'inline'
@@ -64,28 +84,11 @@ const propTypes: PropValidators<PropKeys> = {
   className: PropTypes.string,
   text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
   title: PropTypes.string,
-  /**
-   * Whether or not to disable the tag
-   */
   disabled: PropTypes.bool,
-  /**
-   * Works just like disabled but keeps the same styles as if it were active
-   */
   readOnly: PropTypes.bool,
   dismissible: PropTypes.bool,
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: ThemeablePropTypes.spacing,
-  /**
-   * If you add an onClick prop, Tag renders as a clickable button
-   */
   onClick: PropTypes.func,
-  /**
-   * Provides a reference to the underlying html root element
-   */
   elementRef: PropTypes.func,
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   variant: PropTypes.oneOf(['default', 'inline'])