@instructure/ui-checkbox 8.14.1-snapshot.7 → 8.15.1-snapshot.2

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.15.0](https://github.com/instructure/instructure-ui/compare/v8.14.0...v8.15.0) (2022-01-26)
+
+**Note:** Version bump only for package @instructure/ui-checkbox
+
 # [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-checkbox

package/es/Checkbox/CheckboxFacade/index.js

@@ -37,6 +37,7 @@ import { propTypes, allowedProps } from './props';
 ---
 parent: Checkbox
 ---
+@tsProps
 **/
 let CheckboxFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class CheckboxFacade extends Component {
   constructor() {
@@ -49,11 +50,15 @@ let CheckboxFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   renderIcon() {
@@ -77,9 +82,9 @@ let CheckboxFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _
   }
 
   render() {
-    const _this$props = this.props,
-          children = _this$props.children,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          styles = _this$props3.styles;
     return jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.checkboxFacade,
       ref: this.handleRef

package/es/Checkbox/CheckboxFacade/props.js

@@ -28,10 +28,6 @@ const propTypes = {
   focused: PropTypes.bool,
   hovered: PropTypes.bool,
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * Visual state showing that child checkboxes are a combination of checked and unchecked
-   */
   indeterminate: PropTypes.bool
 };
 const allowedProps = ['children', 'checked', 'focused', 'hovered', 'size', 'indeterminate'];

package/es/Checkbox/CheckboxLocator.js

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

package/es/Checkbox/ToggleFacade/index.js

@@ -36,6 +36,7 @@ import { propTypes, allowedProps } from './props';
 ---
 parent: Checkbox
 ---
+@tsProps
 **/
 let ToggleFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class ToggleFacade extends Component {
   constructor() {
@@ -48,17 +49,21 @@ let ToggleFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _de
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   renderIcon() {
-    const _this$props = this.props,
-          styles = _this$props.styles,
-          checked = _this$props.checked;
+    const _this$props3 = this.props,
+          styles = _this$props3.styles,
+          checked = _this$props3.checked;
 
     if (checked) {
       return jsx(IconCheckSolid, {
@@ -72,18 +77,18 @@ let ToggleFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _de
   }
 
   renderLabel() {
-    const _this$props2 = this.props,
-          children = _this$props2.children,
-          styles = _this$props2.styles;
+    const _this$props4 = this.props,
+          children = _this$props4.children,
+          styles = _this$props4.styles;
     return jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.label
     }, children);
   }
 
   render() {
-    const _this$props3 = this.props,
-          labelPlacement = _this$props3.labelPlacement,
-          styles = _this$props3.styles;
+    const _this$props5 = this.props,
+          labelPlacement = _this$props5.labelPlacement,
+          styles = _this$props5.styles;
     return jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.toggleFacade,
       ref: this.handleRef

package/es/Checkbox/index.js

@@ -25,7 +25,7 @@ var _dec, _dec2, _class, _class2, _temp;
  */
 
 /** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import keycode from 'keycode';
 import { FormFieldMessages } from '@instructure/ui-form-field';
 import { createChainedFunction } from '@instructure/ui-utils';
@@ -46,10 +46,13 @@ import { propTypes, allowedProps } from './props';
 category: components
 tags: toggle, switch
 ---
+@tsProps
 **/
 let Checkbox = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Checkbox extends Component {
   constructor(props) {
     super(props);
+    this._defaultId = void 0;
+    this._input = null;
     this.ref = null;
 
     this.handleRef = el => {
@@ -80,32 +83,31 @@ let Checkbox = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(
     };
 
     this.handleKeyDown = e => {
-      if (this.props.variant === 'toggle' && (e.keyCode === keycode.codes.enter || e.keyCode === keycode.codes.return)) {
-        this._input.click();
-
+      if (this.props.variant === 'toggle' && e.keyCode === keycode.codes.enter) {
+        this._input && this._input.click();
         e.preventDefault();
       }
     };
 
-    this.handleFocus = e => {
+    this.handleFocus = () => {
       this.setState({
         focused: true
       });
     };
 
-    this.handleBlur = e => {
+    this.handleBlur = () => {
       this.setState({
         focused: false
       });
     };
 
-    this.handleMouseOver = e => {
+    this.handleMouseOver = () => {
       this.setState({
         hovered: true
       });
     };
 
-    this.handleMouseOut = e => {
+    this.handleMouseOut = () => {
       this.setState({
         hovered: false
       });
@@ -113,29 +115,30 @@ let Checkbox = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(
 
     this.state = {
       focused: false,
-      hovered: false
+      hovered: false,
+      checked: typeof props.checked === 'undefined' ? !!props.defaultChecked : void 0
     };
-
-    if (typeof props.checked === 'undefined') {
-      this.state.checked = !!props.defaultChecked;
-    }
-
     this._defaultId = uid('Checkbox');
   }
 
   componentDidMount() {
-    // see https://github.com/facebook/react/issues/1798
-    this._input.indeterminate = this.props.indeterminate;
-    this.props.makeStyles();
+    var _this$props$makeStyle, _this$props2;
+
+    if (this._input) {
+      this._input.indeterminate = this.props.indeterminate;
+    }
+
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
   }
 
   componentDidUpdate(prevProps) {
-    // see https://github.com/facebook/react/issues/1798
-    if (prevProps.indeterminate !== this.props.indeterminate) {
-      this._input.indeterminate = this.props.indeterminate;
+    var _this$props$makeStyle2, _this$props3;
+
+    if (prevProps.indeterminate !== this.props.indeterminate && this._input) {
+      this._input.indeterminate = this.props.indeterminate || false;
     }
 
-    this.props.makeStyles();
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
   }
 
   get id() {
@@ -155,15 +158,15 @@ let Checkbox = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(
   }
 
   renderFacade() {
-    const _this$props2 = this.props,
-          size = _this$props2.size,
-          disabled = _this$props2.disabled,
-          variant = _this$props2.variant,
-          label = _this$props2.label,
-          readOnly = _this$props2.readOnly,
-          indeterminate = _this$props2.indeterminate,
-          labelPlacement = _this$props2.labelPlacement,
-          themeOverride = _this$props2.themeOverride;
+    const _this$props4 = this.props,
+          size = _this$props4.size,
+          disabled = _this$props4.disabled,
+          variant = _this$props4.variant,
+          label = _this$props4.label,
+          readOnly = _this$props4.readOnly,
+          indeterminate = _this$props4.indeterminate,
+          labelPlacement = _this$props4.labelPlacement,
+          themeOverride = _this$props4.themeOverride;
     const _this$state = this.state,
           hovered = _this$state.hovered,
           focused = _this$state.focused;
@@ -173,7 +176,6 @@ let Checkbox = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(
       return jsx(ToggleFacade, {
         disabled: disabled,
         size: size,
-        hovered: hovered,
         focused: focused,
         checked: this.checked,
         readOnly: readOnly,
@@ -203,18 +205,18 @@ let Checkbox = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(
   }
 
   render() {
-    const _this$props3 = this.props,
-          disabled = _this$props3.disabled,
-          readOnly = _this$props3.readOnly,
-          value = _this$props3.value,
-          onKeyDown = _this$props3.onKeyDown,
-          onFocus = _this$props3.onFocus,
-          onBlur = _this$props3.onBlur,
-          onMouseOver = _this$props3.onMouseOver,
-          onMouseOut = _this$props3.onMouseOut,
-          indeterminate = _this$props3.indeterminate,
-          variant = _this$props3.variant,
-          styles = _this$props3.styles;
+    const _this$props5 = this.props,
+          disabled = _this$props5.disabled,
+          readOnly = _this$props5.readOnly,
+          value = _this$props5.value,
+          onKeyDown = _this$props5.onKeyDown,
+          onFocus = _this$props5.onFocus,
+          onBlur = _this$props5.onBlur,
+          onMouseOver = _this$props5.onMouseOver,
+          onMouseOut = _this$props5.onMouseOut,
+          indeterminate = _this$props5.indeterminate,
+          variant = _this$props5.variant,
+          styles = _this$props5.styles;
     const props = omitProps(this.props, Checkbox.allowedProps);
     error(!(variant === 'toggle' && indeterminate), `[Checkbox] The \`toggle\` variant does not support the \`indeterminate\` property. Use the \`simple\` variant instead.`);
     /* eslint-disable jsx-a11y/mouse-events-have-key-events */

package/es/Checkbox/props.js

@@ -28,46 +28,17 @@ const propTypes = {
   label: PropTypes.node.isRequired,
   id: PropTypes.string,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * object with shape: `{
-   * text: PropTypes.node,
-   * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   *   }`
-   */
   messages: PropTypes.arrayOf(FormPropTypes.message),
-
-  /* whether to set the input to checked or not on initial render */
   defaultChecked: PropTypes.bool,
-
-  /**
-   * whether the input is checked or not (must be accompanied by an `onChange` prop)
-   */
   checked: controllable(PropTypes.bool, 'onChange', 'defaultChecked'),
-
-  /**
-   * when used with the `checked` prop, the component will not control its own state
-   */
   onChange: PropTypes.func,
   onKeyDown: PropTypes.func,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
   onMouseOver: PropTypes.func,
   onMouseOut: PropTypes.func,
-
-  /**
-   * Whether or not to disable the checkbox
-   */
   disabled: PropTypes.bool,
-
-  /**
-   * Works just like disabled but keeps the same styles as if it were active
-   */
   readOnly: PropTypes.bool,
-
-  /**
-   * Visual state showing that child checkboxes are a combination of checked and unchecked
-   */
   indeterminate: PropTypes.bool,
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   variant: PropTypes.oneOf(['simple', 'toggle']),

package/es/Checkbox/styles.js

@@ -32,7 +32,7 @@
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme, props) => {
+const generateStyle = (_componentTheme, props) => {
   const inline = props.inline,
         disabled = props.disabled;
   return {

package/es/CheckboxGroup/CheckboxGroupLocator.js

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

package/es/CheckboxGroup/index.js

@@ -35,10 +35,12 @@ import { propTypes, allowedProps } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 let CheckboxGroup = (_dec = testable(), _dec(_class = (_temp = _class2 = class CheckboxGroup extends Component {
   constructor(props) {
-    super();
+    super(props);
+    this._messagesId = void 0;
     this.ref = null;
 
     this.handleRef = el => {
@@ -46,7 +48,7 @@ let CheckboxGroup = (_dec = testable(), _dec(_class = (_temp = _class2 = class C
     };
 
     this.handleChange = e => {
-      const newValue = this.value || [];
+      const newValue = this.value;
 
       if (this.props.disabled || this.props.readOnly) {
         e.preventDefault();
@@ -72,7 +74,7 @@ let CheckboxGroup = (_dec = testable(), _dec(_class = (_temp = _class2 = class C
 
     if (typeof props.value === 'undefined') {
       this.state = {
-        value: props.defaultValue
+        value: props.defaultValue || []
       };
     }
 
@@ -84,11 +86,7 @@ let CheckboxGroup = (_dec = testable(), _dec(_class = (_temp = _class2 = class C
   }
 
   get value() {
-    if (typeof this.props.value === 'undefined' && typeof this.state.value === 'undefined') {
-      return [];
-    } else {
-      return typeof this.props.value === 'undefined' ? [...this.state.value] : [...this.props.value];
-    }
+    return typeof this.props.value === 'undefined' ? [...this.state.value] : [...this.props.value];
   }
 
   renderChildren() {
@@ -98,18 +96,19 @@ let CheckboxGroup = (_dec = testable(), _dec(_class = (_temp = _class2 = class C
           size = _this$props.size,
           disabled = _this$props.disabled,
           readOnly = _this$props.readOnly;
-    return Children.map(children, (child, index) => {
+    return Children.map(children, child => {
       if (matchComponentTypes(child, [Checkbox])) {
         return safeCloneElement(child, {
           key: `${child.props.name}`,
           name,
+          label: child.props.label,
           disabled: disabled || child.props.disabled,
           readOnly: readOnly || child.props.readOnly,
           size,
           checked: this.value.indexOf(child.props.value) > -1,
           onChange: this.handleChange,
           width: child.props.width || 'auto',
-          'aria-describedby': this.hasMessages && this._messagesId
+          'aria-describedby': this.hasMessages ? this._messagesId : void 0
         });
       } else {
         return child;
@@ -118,15 +117,13 @@ let CheckboxGroup = (_dec = testable(), _dec(_class = (_temp = _class2 = class C
   }
 
   render() {
-    return (
-      /*#__PURE__*/
-      React.createElement(FormFieldGroup, Object.assign({}, omitProps(this.props, CheckboxGroup.allowedProps), pickProps(this.props, FormFieldGroup.allowedProps), {
-        rowSpacing: "small",
-        vAlign: "top",
-        messagesId: this._messagesId,
-        elementRef: this.handleRef
-      }), this.renderChildren())
-    );
+    return /*#__PURE__*/React.createElement(FormFieldGroup, Object.assign({}, omitProps(this.props, CheckboxGroup.allowedProps), pickProps(this.props, FormFieldGroup.allowedProps), {
+      description: this.props.description,
+      rowSpacing: "small",
+      vAlign: "top",
+      messagesId: this._messagesId,
+      elementRef: this.handleRef
+    }), this.renderChildren());
   }
 
 }, _class2.displayName = "CheckboxGroup", _class2.componentId = 'CheckboxGroup', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {

package/lib/Checkbox/CheckboxFacade/index.js

@@ -27,6 +27,7 @@ var _dec, _class, _class2, _temp, _SVGIcon, _IconCheckMarkSolid;
 ---
 parent: Checkbox
 ---
+@tsProps
 **/
 let CheckboxFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class CheckboxFacade extends _react.Component {
   constructor() {
@@ -39,11 +40,15 @@ let CheckboxFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   renderIcon() {
@@ -67,9 +72,9 @@ let CheckboxFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   }
 
   render() {
-    const _this$props = this.props,
-          children = _this$props.children,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          styles = _this$props3.styles;
     return (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.checkboxFacade,
       ref: this.handleRef

package/lib/Checkbox/CheckboxFacade/props.js

@@ -38,10 +38,6 @@ const propTypes = {
   focused: _propTypes.default.bool,
   hovered: _propTypes.default.bool,
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * Visual state showing that child checkboxes are a combination of checked and unchecked
-   */
   indeterminate: _propTypes.default.bool
 };
 exports.propTypes = propTypes;

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

package/lib/Checkbox/ToggleFacade/index.js

@@ -27,6 +27,7 @@ var _dec, _class, _class2, _temp;
 ---
 parent: Checkbox
 ---
+@tsProps
 **/
 let ToggleFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class ToggleFacade extends _react.Component {
   constructor() {
@@ -39,17 +40,21 @@ let ToggleFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   renderIcon() {
-    const _this$props = this.props,
-          styles = _this$props.styles,
-          checked = _this$props.checked;
+    const _this$props3 = this.props,
+          styles = _this$props3.styles,
+          checked = _this$props3.checked;
 
     if (checked) {
       return (0, _emotion.jsx)(_IconCheckSolid.IconCheckSolid, {
@@ -63,18 +68,18 @@ let ToggleFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
   }
 
   renderLabel() {
-    const _this$props2 = this.props,
-          children = _this$props2.children,
-          styles = _this$props2.styles;
+    const _this$props4 = this.props,
+          children = _this$props4.children,
+          styles = _this$props4.styles;
     return (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.label
     }, children);
   }
 
   render() {
-    const _this$props3 = this.props,
-          labelPlacement = _this$props3.labelPlacement,
-          styles = _this$props3.styles;
+    const _this$props5 = this.props,
+          labelPlacement = _this$props5.labelPlacement,
+          styles = _this$props5.styles;
     return (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.toggleFacade,
       ref: this.handleRef