@instructure/ui-checkbox 8.25.1-snapshot-10 → 8.25.1-snapshot-13

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
+## [8.25.1-snapshot-13](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-13) (2022-06-22)
 
 **Note:** Version bump only for package @instructure/ui-checkbox
 

package/es/Checkbox/CheckboxFacade/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _SVGIcon, _IconCheckMarkSolid;
+var _dec, _class, _class2, _SVGIcon, _IconCheckMarkSolid;
 
 /*
  * The MIT License (MIT)
@@ -39,22 +39,15 @@ parent: Checkbox
 ---
 @tsProps
 **/
-let CheckboxFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class CheckboxFacade extends Component {
-  static displayName = "CheckboxFacade";
-  static componentId = 'CheckboxFacade';
-  static propTypes = propTypes;
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    checked: false,
-    focused: false,
-    hovered: false,
-    size: 'medium',
-    indeterminate: false
-  };
-  ref = null;
-  handleRef = el => {
-    this.ref = el;
-  };
+let CheckboxFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class CheckboxFacade extends Component {
+  constructor() {
+    super(...arguments);
+    this.ref = null;
+
+    this.handleRef = el => {
+      this.ref = el;
+    };
+  }
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -103,6 +96,12 @@ let CheckboxFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _
     }, children));
   }
 
-}) || _class);
+}, _class2.displayName = "CheckboxFacade", _class2.componentId = 'CheckboxFacade', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
+  checked: false,
+  focused: false,
+  hovered: false,
+  size: 'medium',
+  indeterminate: false
+}, _class2)) || _class);
 export default CheckboxFacade;
 export { CheckboxFacade };

package/es/Checkbox/ToggleFacade/index.js

@@ -1,4 +1,4 @@
-var _dec, _class;
+var _dec, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -38,23 +38,15 @@ parent: Checkbox
 ---
 @tsProps
 **/
-let ToggleFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class ToggleFacade extends Component {
-  static displayName = "ToggleFacade";
-  static componentId = 'ToggleFacade';
-  static propTypes = propTypes;
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    checked: false,
-    focused: false,
-    size: 'medium',
-    disabled: false,
-    readOnly: false,
-    labelPlacement: 'end'
-  };
-  ref = null;
-  handleRef = el => {
-    this.ref = el;
-  };
+let ToggleFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class ToggleFacade extends Component {
+  constructor() {
+    super(...arguments);
+    this.ref = null;
+
+    this.handleRef = el => {
+      this.ref = el;
+    };
+  }
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -110,6 +102,13 @@ let ToggleFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _de
     }, this.renderIcon()))), labelPlacement === 'end' && this.renderLabel());
   }
 
-}) || _class);
+}, _class2.displayName = "ToggleFacade", _class2.componentId = 'ToggleFacade', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
+  checked: false,
+  focused: false,
+  size: 'medium',
+  disabled: false,
+  readOnly: false,
+  labelPlacement: 'end'
+}, _class2)) || _class);
 export default ToggleFacade;
 export { ToggleFacade };

package/es/Checkbox/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _dec3, _class;
+var _dec, _dec2, _dec3, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -47,23 +47,71 @@ tags: toggle, switch
 ---
 @tsProps
 **/
-let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, null), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = class Checkbox extends Component {
-  static displayName = "Checkbox";
-  static componentId = 'Checkbox';
-  static propTypes = propTypes;
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    size: 'medium',
-    variant: 'simple',
-    disabled: false,
-    inline: false,
-    indeterminate: false,
-    readOnly: false,
-    labelPlacement: 'end'
-  };
-
+let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, null), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Checkbox extends Component {
   constructor(props) {
     super(props);
+    this._defaultId = void 0;
+    this._input = null;
+    this.ref = null;
+
+    this.handleRef = el => {
+      this.ref = el;
+    };
+
+    this.handleChange = e => {
+      const _this$props = this.props,
+            onChange = _this$props.onChange,
+            disabled = _this$props.disabled,
+            checked = _this$props.checked,
+            readOnly = _this$props.readOnly;
+
+      if (disabled || readOnly) {
+        e.preventDefault();
+        return;
+      }
+
+      if (typeof checked === 'undefined') {
+        this.setState({
+          checked: !this.state.checked
+        });
+      }
+
+      if (typeof onChange === 'function') {
+        onChange(e);
+      }
+    };
+
+    this.handleKeyDown = e => {
+      if (this.props.variant === 'toggle' && e.keyCode === keycode.codes.enter) {
+        this._input && this._input.click();
+        e.preventDefault();
+      }
+    };
+
+    this.handleFocus = () => {
+      this.setState({
+        focused: true
+      });
+    };
+
+    this.handleBlur = () => {
+      this.setState({
+        focused: false
+      });
+    };
+
+    this.handleMouseOver = () => {
+      this.setState({
+        hovered: true
+      });
+    };
+
+    this.handleMouseOut = () => {
+      this.setState({
+        hovered: false
+      });
+    };
+
     this.state = {
       focused: false,
       hovered: false,
@@ -78,82 +126,26 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, n
     this._defaultId = props.deterministicId();
   }
 
-  _defaultId;
-  _input = null;
-  ref = null;
-  handleRef = el => {
-    this.ref = el;
-  };
-
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
+    var _this$props$makeStyle, _this$props2;
 
     if (this._input) {
       this._input.indeterminate = this.props.indeterminate;
     }
 
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
   }
 
   componentDidUpdate(prevProps) {
-    var _this$props$makeStyle2, _this$props2;
+    var _this$props$makeStyle2, _this$props3;
 
     if (prevProps.indeterminate !== this.props.indeterminate && this._input) {
       this._input.indeterminate = this.props.indeterminate || false;
     }
 
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
   }
 
-  handleChange = e => {
-    const _this$props3 = this.props,
-          onChange = _this$props3.onChange,
-          disabled = _this$props3.disabled,
-          checked = _this$props3.checked,
-          readOnly = _this$props3.readOnly;
-
-    if (disabled || readOnly) {
-      e.preventDefault();
-      return;
-    }
-
-    if (typeof checked === 'undefined') {
-      this.setState({
-        checked: !this.state.checked
-      });
-    }
-
-    if (typeof onChange === 'function') {
-      onChange(e);
-    }
-  };
-  handleKeyDown = e => {
-    if (this.props.variant === 'toggle' && e.keyCode === keycode.codes.enter) {
-      this._input && this._input.click();
-      e.preventDefault();
-    }
-  };
-  handleFocus = () => {
-    this.setState({
-      focused: true
-    });
-  };
-  handleBlur = () => {
-    this.setState({
-      focused: false
-    });
-  };
-  handleMouseOver = () => {
-    this.setState({
-      hovered: true
-    });
-  };
-  handleMouseOut = () => {
-    this.setState({
-      hovered: false
-    });
-  };
-
   get id() {
     return this.props.id || this._defaultId;
   }
@@ -261,6 +253,14 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, n
     /* eslint-enable jsx-a11y/mouse-events-have-key-events */
   }
 
-}) || _class) || _class) || _class);
+}, _class2.displayName = "Checkbox", _class2.componentId = 'Checkbox', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
+  size: 'medium',
+  variant: 'simple',
+  disabled: false,
+  inline: false,
+  indeterminate: false,
+  readOnly: false,
+  labelPlacement: 'end'
+}, _class2)) || _class) || _class) || _class);
 export default Checkbox;
 export { Checkbox, CheckboxFacade, ToggleFacade };

package/es/CheckboxGroup/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -36,21 +36,40 @@ category: components
 ---
 @tsProps
 **/
-let CheckboxGroup = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class = _dec2(_class = class CheckboxGroup extends Component {
-  static displayName = "CheckboxGroup";
-  static componentId = 'CheckboxGroup';
-  static propTypes = propTypes;
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    disabled: false,
-    readOnly: false,
-    size: 'medium',
-    layout: 'stacked',
-    children: null
-  };
-
+let CheckboxGroup = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class CheckboxGroup extends Component {
   constructor(props) {
     super(props);
+    this._messagesId = void 0;
+    this.ref = null;
+
+    this.handleRef = el => {
+      this.ref = el;
+    };
+
+    this.handleChange = e => {
+      const newValue = this.value;
+
+      if (this.props.disabled || this.props.readOnly) {
+        e.preventDefault();
+        return;
+      }
+
+      if (e.target.checked) {
+        newValue.push(e.target.value);
+      } else {
+        newValue.splice(newValue.indexOf(e.target.value), 1);
+      }
+
+      if (typeof this.props.value === 'undefined') {
+        this.setState({
+          value: newValue
+        });
+      }
+
+      if (typeof this.props.onChange === 'function') {
+        this.props.onChange(newValue);
+      }
+    };
 
     if (typeof props.value === 'undefined') {
       this.state = {
@@ -61,41 +80,10 @@ let CheckboxGroup = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_cla
     this._messagesId = props.deterministicId();
   }
 
-  _messagesId;
-  ref = null;
-  handleRef = el => {
-    this.ref = el;
-  };
-
   get hasMessages() {
     return this.props.messages && this.props.messages.length > 0;
   }
 
-  handleChange = e => {
-    const newValue = this.value;
-
-    if (this.props.disabled || this.props.readOnly) {
-      e.preventDefault();
-      return;
-    }
-
-    if (e.target.checked) {
-      newValue.push(e.target.value);
-    } else {
-      newValue.splice(newValue.indexOf(e.target.value), 1);
-    }
-
-    if (typeof this.props.value === 'undefined') {
-      this.setState({
-        value: newValue
-      });
-    }
-
-    if (typeof this.props.onChange === 'function') {
-      this.props.onChange(newValue);
-    }
-  };
-
   get value() {
     return typeof this.props.value === 'undefined' ? [...this.state.value] : [...this.props.value];
   }
@@ -137,6 +125,12 @@ let CheckboxGroup = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_cla
     }), this.renderChildren());
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "CheckboxGroup", _class2.componentId = 'CheckboxGroup', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
+  disabled: false,
+  readOnly: false,
+  size: 'medium',
+  layout: 'stacked',
+  children: null
+}, _class2)) || _class) || _class);
 export default CheckboxGroup;
 export { CheckboxGroup };

package/lib/Checkbox/CheckboxFacade/index.js

@@ -21,7 +21,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
-var _dec, _class, _SVGIcon, _IconCheckMarkSolid;
+var _dec, _class, _class2, _SVGIcon, _IconCheckMarkSolid;
 
 /**
 ---
@@ -29,22 +29,15 @@ parent: Checkbox
 ---
 @tsProps
 **/
-let CheckboxFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class CheckboxFacade extends _react.Component {
-  static displayName = "CheckboxFacade";
-  static componentId = 'CheckboxFacade';
-  static propTypes = _props.propTypes;
-  static allowedProps = _props.allowedProps;
-  static defaultProps = {
-    checked: false,
-    focused: false,
-    hovered: false,
-    size: 'medium',
-    indeterminate: false
-  };
-  ref = null;
-  handleRef = el => {
-    this.ref = el;
-  };
+let CheckboxFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_class2 = class CheckboxFacade extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this.ref = null;
+
+    this.handleRef = el => {
+      this.ref = el;
+    };
+  }
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -93,7 +86,13 @@ let CheckboxFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
     }, children));
   }
 
-}) || _class);
+}, _class2.displayName = "CheckboxFacade", _class2.componentId = 'CheckboxFacade', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
+  checked: false,
+  focused: false,
+  hovered: false,
+  size: 'medium',
+  indeterminate: false
+}, _class2)) || _class);
 exports.CheckboxFacade = CheckboxFacade;
 var _default = CheckboxFacade;
 exports.default = _default;

package/lib/Checkbox/ToggleFacade/index.js

@@ -21,7 +21,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
-var _dec, _class;
+var _dec, _class, _class2;
 
 /**
 ---
@@ -29,23 +29,15 @@ parent: Checkbox
 ---
 @tsProps
 **/
-let ToggleFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = class ToggleFacade extends _react.Component {
-  static displayName = "ToggleFacade";
-  static componentId = 'ToggleFacade';
-  static propTypes = _props.propTypes;
-  static allowedProps = _props.allowedProps;
-  static defaultProps = {
-    checked: false,
-    focused: false,
-    size: 'medium',
-    disabled: false,
-    readOnly: false,
-    labelPlacement: 'end'
-  };
-  ref = null;
-  handleRef = el => {
-    this.ref = el;
-  };
+let ToggleFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_class2 = class ToggleFacade extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this.ref = null;
+
+    this.handleRef = el => {
+      this.ref = el;
+    };
+  }
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -101,7 +93,14 @@ let ToggleFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
     }, this.renderIcon()))), labelPlacement === 'end' && this.renderLabel());
   }
 
-}) || _class);
+}, _class2.displayName = "ToggleFacade", _class2.componentId = 'ToggleFacade', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
+  checked: false,
+  focused: false,
+  size: 'medium',
+  disabled: false,
+  readOnly: false,
+  labelPlacement: 'end'
+}, _class2)) || _class);
 exports.ToggleFacade = ToggleFacade;
 var _default = ToggleFacade;
 exports.default = _default;

package/lib/Checkbox/index.js

@@ -52,7 +52,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 var _props = require("./props");
 
-var _dec, _dec2, _dec3, _class;
+var _dec, _dec2, _dec3, _class, _class2;
 
 /**
 ---
@@ -61,23 +61,71 @@ tags: toggle, switch
 ---
 @tsProps
 **/
-let Checkbox = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, null), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = class Checkbox extends _react.Component {
-  static displayName = "Checkbox";
-  static componentId = 'Checkbox';
-  static propTypes = _props.propTypes;
-  static allowedProps = _props.allowedProps;
-  static defaultProps = {
-    size: 'medium',
-    variant: 'simple',
-    disabled: false,
-    inline: false,
-    indeterminate: false,
-    readOnly: false,
-    labelPlacement: 'end'
-  };
-
+let Checkbox = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, null), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Checkbox extends _react.Component {
   constructor(props) {
     super(props);
+    this._defaultId = void 0;
+    this._input = null;
+    this.ref = null;
+
+    this.handleRef = el => {
+      this.ref = el;
+    };
+
+    this.handleChange = e => {
+      const _this$props = this.props,
+            onChange = _this$props.onChange,
+            disabled = _this$props.disabled,
+            checked = _this$props.checked,
+            readOnly = _this$props.readOnly;
+
+      if (disabled || readOnly) {
+        e.preventDefault();
+        return;
+      }
+
+      if (typeof checked === 'undefined') {
+        this.setState({
+          checked: !this.state.checked
+        });
+      }
+
+      if (typeof onChange === 'function') {
+        onChange(e);
+      }
+    };
+
+    this.handleKeyDown = e => {
+      if (this.props.variant === 'toggle' && e.keyCode === _keycode.default.codes.enter) {
+        this._input && this._input.click();
+        e.preventDefault();
+      }
+    };
+
+    this.handleFocus = () => {
+      this.setState({
+        focused: true
+      });
+    };
+
+    this.handleBlur = () => {
+      this.setState({
+        focused: false
+      });
+    };
+
+    this.handleMouseOver = () => {
+      this.setState({
+        hovered: true
+      });
+    };
+
+    this.handleMouseOut = () => {
+      this.setState({
+        hovered: false
+      });
+    };
+
     this.state = {
       focused: false,
       hovered: false,
@@ -92,82 +140,26 @@ let Checkbox = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     this._defaultId = props.deterministicId();
   }
 
-  _defaultId;
-  _input = null;
-  ref = null;
-  handleRef = el => {
-    this.ref = el;
-  };
-
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
+    var _this$props$makeStyle, _this$props2;
 
     if (this._input) {
       this._input.indeterminate = this.props.indeterminate;
     }
 
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
   }
 
   componentDidUpdate(prevProps) {
-    var _this$props$makeStyle2, _this$props2;
+    var _this$props$makeStyle2, _this$props3;
 
     if (prevProps.indeterminate !== this.props.indeterminate && this._input) {
       this._input.indeterminate = this.props.indeterminate || false;
     }
 
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
   }
 
-  handleChange = e => {
-    const _this$props3 = this.props,
-          onChange = _this$props3.onChange,
-          disabled = _this$props3.disabled,
-          checked = _this$props3.checked,
-          readOnly = _this$props3.readOnly;
-
-    if (disabled || readOnly) {
-      e.preventDefault();
-      return;
-    }
-
-    if (typeof checked === 'undefined') {
-      this.setState({
-        checked: !this.state.checked
-      });
-    }
-
-    if (typeof onChange === 'function') {
-      onChange(e);
-    }
-  };
-  handleKeyDown = e => {
-    if (this.props.variant === 'toggle' && e.keyCode === _keycode.default.codes.enter) {
-      this._input && this._input.click();
-      e.preventDefault();
-    }
-  };
-  handleFocus = () => {
-    this.setState({
-      focused: true
-    });
-  };
-  handleBlur = () => {
-    this.setState({
-      focused: false
-    });
-  };
-  handleMouseOver = () => {
-    this.setState({
-      hovered: true
-    });
-  };
-  handleMouseOut = () => {
-    this.setState({
-      hovered: false
-    });
-  };
-
   get id() {
     return this.props.id || this._defaultId;
   }
@@ -275,7 +267,15 @@ let Checkbox = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     /* eslint-enable jsx-a11y/mouse-events-have-key-events */
   }
 
-}) || _class) || _class) || _class);
+}, _class2.displayName = "Checkbox", _class2.componentId = 'Checkbox', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
+  size: 'medium',
+  variant: 'simple',
+  disabled: false,
+  inline: false,
+  indeterminate: false,
+  readOnly: false,
+  labelPlacement: 'end'
+}, _class2)) || _class) || _class) || _class);
 exports.Checkbox = Checkbox;
 var _default = Checkbox;
 exports.default = _default;

package/lib/CheckboxGroup/index.js

@@ -27,7 +27,7 @@ var _Checkbox = require("../Checkbox");
 
 var _props = require("./props");
 
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /**
 ---
@@ -35,21 +35,40 @@ category: components
 ---
 @tsProps
 **/
-let CheckboxGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class CheckboxGroup extends _react.Component {
-  static displayName = "CheckboxGroup";
-  static componentId = 'CheckboxGroup';
-  static propTypes = _props.propTypes;
-  static allowedProps = _props.allowedProps;
-  static defaultProps = {
-    disabled: false,
-    readOnly: false,
-    size: 'medium',
-    layout: 'stacked',
-    children: null
-  };
-
+let CheckboxGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class CheckboxGroup extends _react.Component {
   constructor(props) {
     super(props);
+    this._messagesId = void 0;
+    this.ref = null;
+
+    this.handleRef = el => {
+      this.ref = el;
+    };
+
+    this.handleChange = e => {
+      const newValue = this.value;
+
+      if (this.props.disabled || this.props.readOnly) {
+        e.preventDefault();
+        return;
+      }
+
+      if (e.target.checked) {
+        newValue.push(e.target.value);
+      } else {
+        newValue.splice(newValue.indexOf(e.target.value), 1);
+      }
+
+      if (typeof this.props.value === 'undefined') {
+        this.setState({
+          value: newValue
+        });
+      }
+
+      if (typeof this.props.onChange === 'function') {
+        this.props.onChange(newValue);
+      }
+    };
 
     if (typeof props.value === 'undefined') {
       this.state = {
@@ -60,41 +79,10 @@ let CheckboxGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _de
     this._messagesId = props.deterministicId();
   }
 
-  _messagesId;
-  ref = null;
-  handleRef = el => {
-    this.ref = el;
-  };
-
   get hasMessages() {
     return this.props.messages && this.props.messages.length > 0;
   }
 
-  handleChange = e => {
-    const newValue = this.value;
-
-    if (this.props.disabled || this.props.readOnly) {
-      e.preventDefault();
-      return;
-    }
-
-    if (e.target.checked) {
-      newValue.push(e.target.value);
-    } else {
-      newValue.splice(newValue.indexOf(e.target.value), 1);
-    }
-
-    if (typeof this.props.value === 'undefined') {
-      this.setState({
-        value: newValue
-      });
-    }
-
-    if (typeof this.props.onChange === 'function') {
-      this.props.onChange(newValue);
-    }
-  };
-
   get value() {
     return typeof this.props.value === 'undefined' ? [...this.state.value] : [...this.props.value];
   }
@@ -136,7 +124,13 @@ let CheckboxGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _de
     }), this.renderChildren());
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "CheckboxGroup", _class2.componentId = 'CheckboxGroup', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
+  disabled: false,
+  readOnly: false,
+  size: 'medium',
+  layout: 'stacked',
+  children: null
+}, _class2)) || _class) || _class);
 exports.CheckboxGroup = CheckboxGroup;
 var _default = CheckboxGroup;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-checkbox",
-  "version": "8.25.1-snapshot-10",
+  "version": "8.25.1-snapshot-13",
   "description": " styled HTML input type='checkbox' component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,28 +24,28 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.25.1-snapshot-10",
-    "@instructure/emotion": "8.25.1-snapshot-10",
-    "@instructure/shared-types": "8.25.1-snapshot-10",
-    "@instructure/ui-dom-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-form-field": "8.25.1-snapshot-10",
-    "@instructure/ui-icons": "8.25.1-snapshot-10",
-    "@instructure/ui-prop-types": "8.25.1-snapshot-10",
-    "@instructure/ui-react-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-svg-images": "8.25.1-snapshot-10",
-    "@instructure/ui-testable": "8.25.1-snapshot-10",
-    "@instructure/ui-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-view": "8.25.1-snapshot-10",
-    "@instructure/uid": "8.25.1-snapshot-10",
+    "@instructure/console": "8.25.1-snapshot-13",
+    "@instructure/emotion": "8.25.1-snapshot-13",
+    "@instructure/shared-types": "8.25.1-snapshot-13",
+    "@instructure/ui-dom-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-form-field": "8.25.1-snapshot-13",
+    "@instructure/ui-icons": "8.25.1-snapshot-13",
+    "@instructure/ui-prop-types": "8.25.1-snapshot-13",
+    "@instructure/ui-react-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-svg-images": "8.25.1-snapshot-13",
+    "@instructure/ui-testable": "8.25.1-snapshot-13",
+    "@instructure/ui-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-view": "8.25.1-snapshot-13",
+    "@instructure/uid": "8.25.1-snapshot-13",
     "keycode": "^2",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.25.1-snapshot-10",
-    "@instructure/ui-color-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-test-locator": "8.25.1-snapshot-10",
-    "@instructure/ui-test-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-themes": "8.25.1-snapshot-10"
+    "@instructure/ui-babel-preset": "8.25.1-snapshot-13",
+    "@instructure/ui-color-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-test-locator": "8.25.1-snapshot-13",
+    "@instructure/ui-test-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-themes": "8.25.1-snapshot-13"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"