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

package/lib/Checkbox/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", {
@@ -20,7 +22,7 @@ Object.defineProperty(exports, "ToggleFacade", {
 });
 exports.default = void 0;
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _keycode = _interopRequireDefault(require("keycode"));
 
@@ -57,10 +59,13 @@ var _dec, _dec2, _class, _class2, _temp;
 category: components
 tags: toggle, switch
 ---
+@tsProps
 **/
 let Checkbox = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class Checkbox extends _react.Component {
   constructor(props) {
     super(props);
+    this._defaultId = void 0;
+    this._input = null;
     this.ref = null;
 
     this.handleRef = el => {
@@ -91,32 +96,31 @@ let Checkbox = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (
     };
 
     this.handleKeyDown = e => {
-      if (this.props.variant === 'toggle' && (e.keyCode === _keycode.default.codes.enter || e.keyCode === _keycode.default.codes.return)) {
-        this._input.click();
-
+      if (this.props.variant === 'toggle' && e.keyCode === _keycode.default.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
       });
@@ -124,29 +128,30 @@ let Checkbox = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (
 
     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 = (0, _uid.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() {
@@ -166,15 +171,15 @@ let Checkbox = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (
   }
 
   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;
@@ -184,7 +189,6 @@ let Checkbox = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (
       return (0, _emotion.jsx)(_ToggleFacade.ToggleFacade, {
         disabled: disabled,
         size: size,
-        hovered: hovered,
         focused: focused,
         checked: this.checked,
         readOnly: readOnly,
@@ -214,18 +218,18 @@ let Checkbox = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (
   }
 
   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 = (0, _omitProps.omitProps)(this.props, Checkbox.allowedProps);
     (0, _console.logError)(!(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/lib/Checkbox/props.js

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

package/lib/Checkbox/styles.js

@@ -39,7 +39,7 @@ exports.default = void 0;
  * @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/lib/CheckboxGroup/CheckboxGroupLocator.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 CheckboxGroupLocator = (0, _locator.locator)(_index.CheckboxGroup.selector);
 exports.CheckboxGroupLocator = CheckboxGroupLocator;

package/lib/CheckboxGroup/index.js

@@ -33,10 +33,12 @@ var _dec, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 let CheckboxGroup = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _class2 = class CheckboxGroup extends _react.Component {
   constructor(props) {
-    super();
+    super(props);
+    this._messagesId = void 0;
     this.ref = null;
 
     this.handleRef = el => {
@@ -44,7 +46,7 @@ let CheckboxGroup = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _c
     };
 
     this.handleChange = e => {
-      const newValue = this.value || [];
+      const newValue = this.value;
 
       if (this.props.disabled || this.props.readOnly) {
         e.preventDefault();
@@ -70,7 +72,7 @@ let CheckboxGroup = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _c
 
     if (typeof props.value === 'undefined') {
       this.state = {
-        value: props.defaultValue
+        value: props.defaultValue || []
       };
     }
 
@@ -82,11 +84,7 @@ let CheckboxGroup = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _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() {
@@ -96,18 +94,19 @@ let CheckboxGroup = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _c
           size = _this$props.size,
           disabled = _this$props.disabled,
           readOnly = _this$props.readOnly;
-    return _react.Children.map(children, (child, index) => {
+    return _react.Children.map(children, child => {
       if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Checkbox.Checkbox])) {
         return (0, _safeCloneElement.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;
@@ -116,15 +115,13 @@ let CheckboxGroup = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _c
   }
 
   render() {
-    return (
-      /*#__PURE__*/
-      _react.default.createElement(_FormFieldGroup.FormFieldGroup, Object.assign({}, (0, _omitProps.omitProps)(this.props, CheckboxGroup.allowedProps), (0, _pickProps.pickProps)(this.props, _FormFieldGroup.FormFieldGroup.allowedProps), {
-        rowSpacing: "small",
-        vAlign: "top",
-        messagesId: this._messagesId,
-        elementRef: this.handleRef
-      }), this.renderChildren())
-    );
+    return /*#__PURE__*/_react.default.createElement(_FormFieldGroup.FormFieldGroup, Object.assign({}, (0, _omitProps.omitProps)(this.props, CheckboxGroup.allowedProps), (0, _pickProps.pickProps)(this.props, _FormFieldGroup.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 = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-checkbox",
-  "version": "8.14.1-snapshot.7+845d7ec6c",
+  "version": "8.15.1-snapshot.2+00f55c738",
   "description": " styled HTML input type='checkbox' component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,28 +25,28 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/emotion": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/shared-types": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-dom-utils": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-form-field": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-icons": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-prop-types": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-react-utils": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-svg-images": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-testable": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-utils": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-view": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/uid": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/console": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/emotion": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/shared-types": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-dom-utils": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-form-field": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-icons": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-prop-types": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-react-utils": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-svg-images": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-testable": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-utils": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-view": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/uid": "8.15.1-snapshot.2+00f55c738",
     "keycode": "^2",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-color-utils": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-test-locator": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-test-utils": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-themes": "8.14.1-snapshot.7+845d7ec6c"
+    "@instructure/ui-babel-preset": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-color-utils": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-test-locator": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-test-utils": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-themes": "8.15.1-snapshot.2+00f55c738"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -55,5 +55,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "845d7ec6c159d8946b22caa9d8fb3d0175167a6f"
+  "gitHead": "00f55c7382e82209ea553c107951c4356ba202bf"
 }

package/src/Checkbox/CheckboxFacade/index.tsx

@@ -40,6 +40,7 @@ import type { CheckboxFacadeProps } from './props'
 ---
 parent: Checkbox
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class CheckboxFacade extends Component<CheckboxFacadeProps> {
@@ -62,14 +63,11 @@ class CheckboxFacade extends Component<CheckboxFacadeProps> {
   }
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    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) {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+  componentDidUpdate() {
+    this.props.makeStyles?.()
   }
 
   renderIcon() {

package/src/Checkbox/CheckboxFacade/props.ts

@@ -36,6 +36,9 @@ type CheckboxFacadeOwnProps = {
   focused?: boolean
   hovered?: boolean
   size?: 'small' | 'medium' | 'large'
+  /**
+   * Visual state showing that child checkboxes are a combination of checked and unchecked
+   */
   indeterminate?: boolean
 }
 
@@ -54,9 +57,6 @@ const propTypes: PropValidators<PropKeys> = {
   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
 }
 

package/src/Checkbox/ToggleFacade/index.tsx

@@ -39,6 +39,7 @@ import type { ToggleFacadeProps } from './props'
 ---
 parent: Checkbox
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class ToggleFacade extends Component<ToggleFacadeProps> {
@@ -62,14 +63,11 @@ class ToggleFacade extends Component<ToggleFacadeProps> {
   }
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    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) {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+  componentDidUpdate() {
+    this.props.makeStyles?.()
   }
 
   renderIcon() {

package/src/Checkbox/ToggleFacade/props.ts

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import type {