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

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-7](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-7) (2022-06-13)
+## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
 
 **Note:** Version bump only for package @instructure/ui-checkbox
 

package/es/Checkbox/CheckboxFacade/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _class2, _SVGIcon, _IconCheckMarkSolid;
+var _dec, _class, _SVGIcon, _IconCheckMarkSolid;
 
 /*
  * The MIT License (MIT)
@@ -39,15 +39,22 @@ parent: Checkbox
 ---
 @tsProps
 **/
-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;
-    };
-  }
+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;
+  };
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -96,12 +103,6 @@ let CheckboxFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _
     }, children));
   }
 
-}, _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);
+}) || _class);
 export default CheckboxFacade;
 export { CheckboxFacade };

package/es/Checkbox/ToggleFacade/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _class2;
+var _dec, _class;
 
 /*
  * The MIT License (MIT)
@@ -38,15 +38,23 @@ parent: Checkbox
 ---
 @tsProps
 **/
-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;
-    };
-  }
+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;
+  };
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -102,13 +110,6 @@ let ToggleFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _de
     }, this.renderIcon()))), labelPlacement === 'end' && this.renderLabel());
   }
 
-}, _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);
+}) || _class);
 export default ToggleFacade;
 export { ToggleFacade };

package/es/Checkbox/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _dec3, _class, _class2;
+var _dec, _dec2, _dec3, _class;
 
 /*
  * The MIT License (MIT)
@@ -47,71 +47,23 @@ tags: toggle, switch
 ---
 @tsProps
 **/
-let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, null), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Checkbox extends Component {
+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'
+  };
+
   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,
@@ -126,26 +78,82 @@ 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$props2;
+    var _this$props$makeStyle, _this$props;
 
     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);
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
   componentDidUpdate(prevProps) {
-    var _this$props$makeStyle2, _this$props3;
+    var _this$props$makeStyle2, _this$props2;
 
     if (prevProps.indeterminate !== this.props.indeterminate && this._input) {
       this._input.indeterminate = this.props.indeterminate || false;
     }
 
-    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
+  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;
   }
@@ -253,14 +261,6 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, n
     /* eslint-enable jsx-a11y/mouse-events-have-key-events */
   }
 
-}, _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);
+}) || _class) || _class) || _class);
 export default Checkbox;
 export { Checkbox, CheckboxFacade, ToggleFacade };

package/es/CheckboxGroup/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _class2;
+var _dec, _dec2, _class;
 
 /*
  * The MIT License (MIT)
@@ -36,40 +36,21 @@ category: components
 ---
 @tsProps
 **/
-let CheckboxGroup = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class CheckboxGroup extends Component {
+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
+  };
+
   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 = {
@@ -80,10 +61,41 @@ 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];
   }
@@ -125,12 +137,6 @@ let CheckboxGroup = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_cla
     }), this.renderChildren());
   }
 
-}, _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);
+}) || _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, _class2, _SVGIcon, _IconCheckMarkSolid;
+var _dec, _class, _SVGIcon, _IconCheckMarkSolid;
 
 /**
 ---
@@ -29,15 +29,22 @@ parent: Checkbox
 ---
 @tsProps
 **/
-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;
-    };
-  }
+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;
+  };
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -86,13 +93,7 @@ let CheckboxFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
     }, children));
   }
 
-}, _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);
+}) || _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, _class2;
+var _dec, _class;
 
 /**
 ---
@@ -29,15 +29,23 @@ parent: Checkbox
 ---
 @tsProps
 **/
-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;
-    };
-  }
+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;
+  };
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -93,14 +101,7 @@ let ToggleFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
     }, this.renderIcon()))), labelPlacement === 'end' && this.renderLabel());
   }
 
-}, _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);
+}) || _class);
 exports.ToggleFacade = ToggleFacade;
 var _default = ToggleFacade;
 exports.default = _default;