@instructure/ui-radio-input 8.13.1-snapshot.9 → 8.14.1-snapshot.6

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.14.0](https://github.com/instructure/instructure-ui/compare/v8.13.0...v8.14.0) (2021-12-16)
+
+**Note:** Version bump only for package @instructure/ui-radio-input
+
 # [8.13.0](https://github.com/instructure/instructure-ui/compare/v8.12.0...v8.13.0) (2021-12-01)
 
 ### Features

package/es/RadioInput/RadioInputLocator.js

@@ -22,5 +22,6 @@
  * SOFTWARE.
  */
 import { locator } from '@instructure/ui-test-locator';
-import { RadioInput } from './index';
+import { RadioInput } 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 RadioInputLocator = locator(RadioInput.selector);

package/es/RadioInput/index.js

@@ -25,7 +25,7 @@ var _dec, _dec2, _class, _class2, _temp;
  */
 
 /** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { uid } from '@instructure/uid';
 import { testable } from '@instructure/ui-testable';
 import { omitProps } from '@instructure/ui-react-utils';
@@ -38,12 +38,15 @@ import { allowedProps, propTypes } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 
 let RadioInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class RadioInput extends Component {
   constructor(props) {
     super(props);
     this.ref = null;
+    this._defaultId = void 0;
+    this._input = null;
 
     this.handleClick = e => {
       if (this.props.disabled || this.props.readOnly) {
@@ -51,7 +54,9 @@ let RadioInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
         return;
       }
 
-      this.props.onClick(e);
+      if (typeof this.props.onClick === 'function') {
+        this.props.onClick(e);
+      }
     };
 
     this.handleChange = e => {
@@ -66,13 +71,15 @@ let RadioInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
         });
       }
 
-      this.props.onChange(e);
+      if (typeof this.props.onChange === 'function') {
+        this.props.onChange(e);
+      }
     };
 
-    this.state = {};
-
     if (typeof props.checked === 'undefined') {
-      this.state.checked = false;
+      this.state = {
+        checked: false
+      };
     }
 
     this._defaultId = uid('RadioInput');
@@ -91,7 +98,9 @@ let RadioInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
   }
 
   focus() {
-    this._input.focus();
+    var _this$_input;
+
+    (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
   }
 
   get id() {
@@ -146,8 +155,6 @@ let RadioInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
   }
 
 }, _class2.displayName = "RadioInput", _class2.componentId = 'RadioInput', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
-  onClick: function (event) {},
-  onChange: function (event) {},
   variant: 'simple',
   size: 'medium',
   disabled: false,

package/es/RadioInput/props.js

@@ -28,15 +28,7 @@ const propTypes = {
   id: PropTypes.string,
   name: PropTypes.string,
   checked: PropTypes.bool,
-
-  /**
-   * Whether or not to disable the input
-   */
   disabled: PropTypes.bool,
-
-  /**
-   * Works just like disabled but keeps the same styles as if it were active
-   */
   readOnly: PropTypes.bool,
   variant: PropTypes.oneOf(['simple', 'toggle']),
   size: PropTypes.oneOf(['small', 'medium', 'large']),

package/es/RadioInput/styles.js

@@ -295,6 +295,7 @@ const generateStyle = (componentTheme, props) => {
     control: {
       label: 'radioInput__control',
       all: 'initial',
+      // @ts-expect-error defaulting to block
       display: 'block',
       direction: 'inherit',
       textAlign: 'start',

package/es/RadioInputGroup/RadioInputGroupLocator.js

@@ -22,5 +22,6 @@
  * SOFTWARE.
  */
 import { locator } from '@instructure/ui-test-locator';
-import { RadioInputGroup } from './index';
+import { RadioInputGroup } 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 RadioInputGroupLocator = locator(RadioInputGroup.selector);

package/es/RadioInputGroup/index.js

@@ -30,16 +30,18 @@ import { testable } from '@instructure/ui-testable';
 import { matchComponentTypes, safeCloneElement, omitProps, pickProps } from '@instructure/ui-react-utils';
 import { RadioInput } from '../RadioInput';
 import { allowedProps, propTypes } from './props';
+
 /**
 ---
 category: components
 ---
+@tsProps
 **/
-
 let RadioInputGroup = (_dec = testable(), _dec(_class = (_temp = _class2 = class RadioInputGroup extends Component {
   constructor(props) {
-    super();
+    super(props);
     this.ref = null;
+    this._messagesId = void 0;
 
     this.handleRef = el => {
       this.ref = el;
@@ -74,7 +76,7 @@ let RadioInputGroup = (_dec = testable(), _dec(_class = (_temp = _class2 = class
   }
 
   get hasMessages() {
-    return this.props.messages && this.props.messages.length > 0;
+    return !!this.props.messages && this.props.messages.length > 0;
   }
 
   get value() {
@@ -104,11 +106,12 @@ let RadioInputGroup = (_dec = testable(), _dec(_class = (_temp = _class2 = class
           onChange: this.handleChange,
           readOnly: readOnly || child.props.readOnly,
           width: child.props.width || 'auto',
-          'aria-describedby': this.hasMessages && this._messagesId,
+          'aria-describedby': this.hasMessages ? this._messagesId : void 0,
           // only one radio in a group should be considered tabbable
           // if a radio is checked, it should be the input to receive focus when tabbed to
           // if none of the inputs are checked, the first should receive the focus
-          tabIndex: isChecked || defaultFocus ? '0' : '-1'
+          tabIndex: isChecked || defaultFocus ? 0 : -1,
+          label: child.props.label
         });
       } else {
         return child; // ignore (but preserve) children that aren't RadioInput
@@ -119,22 +122,21 @@ let RadioInputGroup = (_dec = testable(), _dec(_class = (_temp = _class2 = class
   render() {
     const _this$props2 = this.props,
           variant = _this$props2.variant,
-          layout = _this$props2.layout;
-    return (
-      /*#__PURE__*/
-      React.createElement(FormFieldGroup, Object.assign({}, omitProps(this.props, RadioInputGroup.allowedProps), pickProps(this.props, FormFieldGroup.allowedProps), {
-        // TODO: split out toggle variant into its own component
-        layout: layout === 'columns' && variant === 'toggle' ? 'stacked' : layout // toggles already display in cols
-        ,
-        vAlign: variant === 'toggle' ? 'middle' : 'top',
-        rowSpacing: "small",
-        colSpacing: variant === 'toggle' ? 'none' : 'small' // keep toggles close together
-        ,
-        startAt: variant === 'toggle' ? 'small' : void 0,
-        messagesId: this._messagesId,
-        elementRef: this.handleRef
-      }), this.renderChildren())
-    );
+          layout = _this$props2.layout,
+          description = _this$props2.description;
+    return /*#__PURE__*/React.createElement(FormFieldGroup, Object.assign({}, omitProps(this.props, RadioInputGroup.allowedProps), pickProps(this.props, FormFieldGroup.allowedProps), {
+      description: description // TODO: split out toggle variant into its own component
+      ,
+      layout: layout === 'columns' && variant === 'toggle' ? 'stacked' : layout // toggles already display in cols
+      ,
+      vAlign: variant === 'toggle' ? 'middle' : 'top',
+      rowSpacing: "small",
+      colSpacing: variant === 'toggle' ? 'none' : 'small' // keep toggles close together
+      ,
+      startAt: variant === 'toggle' ? 'small' : void 0,
+      messagesId: this._messagesId,
+      elementRef: this.handleRef
+    }), this.renderChildren());
   }
 
 }, _class2.displayName = "RadioInputGroup", _class2.componentId = 'RadioInputGroup', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
@@ -142,8 +144,7 @@ let RadioInputGroup = (_dec = testable(), _dec(_class = (_temp = _class2 = class
   variant: 'simple',
   size: 'medium',
   layout: 'stacked',
-  readOnly: false,
-  children: null
+  readOnly: false
 }, _temp)) || _class);
 export default RadioInputGroup;
 export { RadioInputGroup };

package/es/RadioInputGroup/props.js

@@ -27,40 +27,14 @@ import { FormPropTypes } from '@instructure/ui-form-field';
 const propTypes = {
   name: PropTypes.string.isRequired,
   description: PropTypes.node.isRequired,
-
-  /**
-   * value to set on initial render
-   */
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * the selected value (must be accompanied by an `onChange` prop)
-   */
   value: controllable(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
-
-  /**
-   * when used with the `value` prop, the component will not control its own state
-   */
   onChange: PropTypes.func,
   disabled: PropTypes.bool,
-
-  /** works just like disabled but keeps the same styles as if it were active */
   readOnly: PropTypes.bool,
-
-  /**
-   * object with shape: `{
-   * text: PropTypes.node,
-   * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   *   }`
-   */
   messages: PropTypes.arrayOf(FormPropTypes.message),
-
-  /**
-   * any children (ones that aren't `RadioInput` are passed through)
-   */
   children: PropTypes.node,
   variant: PropTypes.oneOf(['simple', 'toggle']),
-  // TODO: split toggle out to its own component
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   layout: PropTypes.oneOf(['stacked', 'columns', 'inline'])
 };

package/lib/RadioInput/RadioInputLocator.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 RadioInputLocator = (0, _locator.locator)(_index.RadioInput.selector);
 exports.RadioInputLocator = RadioInputLocator;

package/lib/RadioInput/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.RadioInput = void 0;
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _uid = require("@instructure/uid");
 
@@ -31,11 +33,14 @@ var _dec, _dec2, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 let RadioInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class RadioInput extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;
+    this._defaultId = void 0;
+    this._input = null;
 
     this.handleClick = e => {
       if (this.props.disabled || this.props.readOnly) {
@@ -43,7 +48,9 @@ let RadioInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
         return;
       }
 
-      this.props.onClick(e);
+      if (typeof this.props.onClick === 'function') {
+        this.props.onClick(e);
+      }
     };
 
     this.handleChange = e => {
@@ -58,13 +65,15 @@ let RadioInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
         });
       }
 
-      this.props.onChange(e);
+      if (typeof this.props.onChange === 'function') {
+        this.props.onChange(e);
+      }
     };
 
-    this.state = {};
-
     if (typeof props.checked === 'undefined') {
-      this.state.checked = false;
+      this.state = {
+        checked: false
+      };
     }
 
     this._defaultId = (0, _uid.uid)('RadioInput');
@@ -83,7 +92,9 @@ let RadioInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   }
 
   focus() {
-    this._input.focus();
+    var _this$_input;
+
+    (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
   }
 
   get id() {
@@ -138,8 +149,6 @@ let RadioInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   }
 
 }, _class2.displayName = "RadioInput", _class2.componentId = 'RadioInput', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
-  onClick: function (event) {},
-  onChange: function (event) {},
   variant: 'simple',
   size: 'medium',
   disabled: false,

package/lib/RadioInput/props.js

@@ -38,15 +38,7 @@ const propTypes = {
   id: _propTypes.default.string,
   name: _propTypes.default.string,
   checked: _propTypes.default.bool,
-
-  /**
-   * Whether or not to disable the input
-   */
   disabled: _propTypes.default.bool,
-
-  /**
-   * Works just like disabled but keeps the same styles as if it were active
-   */
   readOnly: _propTypes.default.bool,
   variant: _propTypes.default.oneOf(['simple', 'toggle']),
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),

package/lib/RadioInput/styles.js

@@ -302,6 +302,7 @@ const generateStyle = (componentTheme, props) => {
     control: {
       label: 'radioInput__control',
       all: 'initial',
+      // @ts-expect-error defaulting to block
       display: 'block',
       direction: 'inherit',
       textAlign: 'start',

package/lib/RadioInputGroup/RadioInputGroupLocator.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 RadioInputGroupLocator = (0, _locator.locator)(_index.RadioInputGroup.selector);
 exports.RadioInputGroupLocator = RadioInputGroupLocator;

package/lib/RadioInputGroup/index.js

@@ -33,11 +33,13 @@ var _dec, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 let RadioInputGroup = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _class2 = class RadioInputGroup extends _react.Component {
   constructor(props) {
-    super();
+    super(props);
     this.ref = null;
+    this._messagesId = void 0;
 
     this.handleRef = el => {
       this.ref = el;
@@ -72,7 +74,7 @@ let RadioInputGroup = (_dec = (0, _testable.testable)(), _dec(_class = (_temp =
   }
 
   get hasMessages() {
-    return this.props.messages && this.props.messages.length > 0;
+    return !!this.props.messages && this.props.messages.length > 0;
   }
 
   get value() {
@@ -102,11 +104,12 @@ let RadioInputGroup = (_dec = (0, _testable.testable)(), _dec(_class = (_temp =
           onChange: this.handleChange,
           readOnly: readOnly || child.props.readOnly,
           width: child.props.width || 'auto',
-          'aria-describedby': this.hasMessages && this._messagesId,
+          'aria-describedby': this.hasMessages ? this._messagesId : void 0,
           // only one radio in a group should be considered tabbable
           // if a radio is checked, it should be the input to receive focus when tabbed to
           // if none of the inputs are checked, the first should receive the focus
-          tabIndex: isChecked || defaultFocus ? '0' : '-1'
+          tabIndex: isChecked || defaultFocus ? 0 : -1,
+          label: child.props.label
         });
       } else {
         return child; // ignore (but preserve) children that aren't RadioInput
@@ -117,22 +120,21 @@ let RadioInputGroup = (_dec = (0, _testable.testable)(), _dec(_class = (_temp =
   render() {
     const _this$props2 = this.props,
           variant = _this$props2.variant,
-          layout = _this$props2.layout;
-    return (
-      /*#__PURE__*/
-      _react.default.createElement(_FormFieldGroup.FormFieldGroup, Object.assign({}, (0, _omitProps.omitProps)(this.props, RadioInputGroup.allowedProps), (0, _pickProps.pickProps)(this.props, _FormFieldGroup.FormFieldGroup.allowedProps), {
-        // TODO: split out toggle variant into its own component
-        layout: layout === 'columns' && variant === 'toggle' ? 'stacked' : layout // toggles already display in cols
-        ,
-        vAlign: variant === 'toggle' ? 'middle' : 'top',
-        rowSpacing: "small",
-        colSpacing: variant === 'toggle' ? 'none' : 'small' // keep toggles close together
-        ,
-        startAt: variant === 'toggle' ? 'small' : void 0,
-        messagesId: this._messagesId,
-        elementRef: this.handleRef
-      }), this.renderChildren())
-    );
+          layout = _this$props2.layout,
+          description = _this$props2.description;
+    return /*#__PURE__*/_react.default.createElement(_FormFieldGroup.FormFieldGroup, Object.assign({}, (0, _omitProps.omitProps)(this.props, RadioInputGroup.allowedProps), (0, _pickProps.pickProps)(this.props, _FormFieldGroup.FormFieldGroup.allowedProps), {
+      description: description // TODO: split out toggle variant into its own component
+      ,
+      layout: layout === 'columns' && variant === 'toggle' ? 'stacked' : layout // toggles already display in cols
+      ,
+      vAlign: variant === 'toggle' ? 'middle' : 'top',
+      rowSpacing: "small",
+      colSpacing: variant === 'toggle' ? 'none' : 'small' // keep toggles close together
+      ,
+      startAt: variant === 'toggle' ? 'small' : void 0,
+      messagesId: this._messagesId,
+      elementRef: this.handleRef
+    }), this.renderChildren());
   }
 
 }, _class2.displayName = "RadioInputGroup", _class2.componentId = 'RadioInputGroup', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
@@ -140,8 +142,7 @@ let RadioInputGroup = (_dec = (0, _testable.testable)(), _dec(_class = (_temp =
   variant: 'simple',
   size: 'medium',
   layout: 'stacked',
-  readOnly: false,
-  children: null
+  readOnly: false
 }, _temp)) || _class);
 exports.RadioInputGroup = RadioInputGroup;
 var _default = RadioInputGroup;

package/lib/RadioInputGroup/props.js

@@ -39,40 +39,14 @@ var _FormPropTypes = require("@instructure/ui-form-field/lib/FormPropTypes.js");
 const propTypes = {
   name: _propTypes.default.string.isRequired,
   description: _propTypes.default.node.isRequired,
-
-  /**
-   * value to set on initial render
-   */
   defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-
-  /**
-   * the selected value (must be accompanied by an `onChange` prop)
-   */
   value: (0, _controllable.controllable)(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
-
-  /**
-   * when used with the `value` prop, the component will not control its own state
-   */
   onChange: _propTypes.default.func,
   disabled: _propTypes.default.bool,
-
-  /** works just like disabled but keeps the same styles as if it were active */
   readOnly: _propTypes.default.bool,
-
-  /**
-   * object with shape: `{
-   * text: PropTypes.node,
-   * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   *   }`
-   */
   messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
-
-  /**
-   * any children (ones that aren't `RadioInput` are passed through)
-   */
   children: _propTypes.default.node,
   variant: _propTypes.default.oneOf(['simple', 'toggle']),
-  // TODO: split toggle out to its own component
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
   layout: _propTypes.default.oneOf(['stacked', 'columns', 'inline'])
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-radio-input",
-  "version": "8.13.1-snapshot.9+f32ba918e",
+  "version": "8.14.1-snapshot.6+44559fbd7",
   "description": "A styled HTML input type='radio' element",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,22 +25,22 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/shared-types": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-dom-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-form-field": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-prop-types": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-react-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-testable": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/uid": "8.13.1-snapshot.9+f32ba918e",
+    "@instructure/emotion": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/shared-types": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-dom-utils": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-form-field": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-prop-types": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-react-utils": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-testable": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/uid": "8.14.1-snapshot.6+44559fbd7",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-color-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-test-locator": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-test-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-themes": "8.13.1-snapshot.9+f32ba918e"
+    "@instructure/ui-babel-preset": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-color-utils": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-test-locator": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-test-utils": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-themes": "8.14.1-snapshot.6+44559fbd7"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -49,5 +49,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "f32ba918e4d3ce76c6ee95c856584d00a9d80958"
+  "gitHead": "44559fbd71344c571d339f20cf74491c6fd1dd2f"
 }