@instructure/ui-checkbox 8.8.1-snapshot.3 → 8.9.0

package/es/CheckboxGroup/props.js

@@ -0,0 +1,65 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import PropTypes from 'prop-types';
+import { FormPropTypes } from '@instructure/ui-form-field';
+import { controllable, Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
+import { Checkbox } from '../Checkbox';
+const propTypes = {
+  name: PropTypes.string.isRequired,
+  description: PropTypes.node.isRequired,
+
+  /**
+   * value to set on initial render
+   */
+  defaultValue: PropTypes.array,
+
+  /**
+   * the selected values (must be accompanied by an `onChange` prop)
+   */
+  value: controllable(PropTypes.array),
+
+  /**
+   * when used with the `value` prop, the component will not control its own state
+   */
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+
+  /**
+   * object with shape: `{
+    text: PropTypes.string,
+    type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
+      }`
+   */
+  messages: PropTypes.arrayOf(FormPropTypes.message),
+
+  /**
+   * children of type `Checkbox`
+   */
+  children: ChildrenPropTypes.oneOf([Checkbox]),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  layout: PropTypes.oneOf(['stacked', 'columns', 'inline'])
+};
+const allowedProps = ['name', 'description', 'defaultValue', 'value', 'onChange', 'disabled', 'readOnly', 'messages', 'children', 'size', 'layout'];
+export { propTypes, allowedProps };

package/lib/Checkbox/CheckboxFacade/index.js

@@ -9,8 +9,6 @@ exports.CheckboxFacade = exports.default = void 0;
 
 var _react = require("react");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _SVGIcon2 = require("@instructure/ui-svg-images/lib/SVGIcon");
 
 var _IconCheckMarkSolid2 = require("@instructure/ui-icons/lib/IconCheckMarkSolid.js");
@@ -21,6 +19,8 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 var _theme = _interopRequireDefault(require("./theme"));
 
+var _props = require("./props");
+
 var _dec, _class, _class2, _temp, _SVGIcon, _IconCheckMarkSolid;
 
 /**
@@ -62,31 +62,16 @@ let CheckboxFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
           children = _this$props.children,
           styles = _this$props.styles;
     return (0, _emotion.jsx)("span", {
-      css: styles.checkboxFacade
+      css: styles === null || styles === void 0 ? void 0 : styles.checkboxFacade
     }, (0, _emotion.jsx)("span", {
-      css: styles.facade,
+      css: styles === null || styles === void 0 ? void 0 : styles.facade,
       "aria-hidden": "true"
     }, this.renderIcon()), (0, _emotion.jsx)("span", {
-      css: styles.label
+      css: styles === null || styles === void 0 ? void 0 : styles.label
     }, children));
   }
 
-}, _class2.displayName = "CheckboxFacade", _class2.componentId = 'CheckboxFacade', _class2.propTypes = {
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: _propTypes.default.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: _propTypes.default.object,
-  children: _propTypes.default.node.isRequired,
-  checked: _propTypes.default.bool,
-  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
-}, _class2.defaultProps = {
+}, _class2.displayName = "CheckboxFacade", _class2.componentId = 'CheckboxFacade', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   checked: false,
   focused: false,
   hovered: false,

package/lib/Checkbox/CheckboxFacade/props.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+const propTypes = {
+  children: _propTypes.default.node.isRequired,
+  checked: _propTypes.default.bool,
+  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;
+const allowedProps = ['children', 'checked', 'focused', 'hovered', 'size', 'indeterminate'];
+exports.allowedProps = allowedProps;

package/lib/Checkbox/ToggleFacade/index.js

@@ -9,8 +9,6 @@ exports.ToggleFacade = exports.default = void 0;
 
 var _react = require("react");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _IconCheckSolid = require("@instructure/ui-icons/lib/IconCheckSolid.js");
 
 var _IconXSolid = require("@instructure/ui-icons/lib/IconXSolid.js");
@@ -21,6 +19,8 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 var _theme = _interopRequireDefault(require("./theme"));
 
+var _props = require("./props");
+
 var _dec, _class, _class2, _temp;
 
 /**
@@ -44,11 +44,11 @@ let ToggleFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
 
     if (checked) {
       return (0, _emotion.jsx)(_IconCheckSolid.IconCheckSolid, {
-        css: styles.iconSVG
+        css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
       });
     } else {
       return (0, _emotion.jsx)(_IconXSolid.IconXSolid, {
-        css: styles.iconSVG
+        css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
       });
     }
   }
@@ -58,7 +58,7 @@ let ToggleFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
           children = _this$props2.children,
           styles = _this$props2.styles;
     return (0, _emotion.jsx)("span", {
-      css: styles.label
+      css: styles === null || styles === void 0 ? void 0 : styles.label
     }, children);
   }
 
@@ -67,30 +67,18 @@ let ToggleFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
           labelPlacement = _this$props3.labelPlacement,
           styles = _this$props3.styles;
     return (0, _emotion.jsx)("span", {
-      css: styles.toggleFacade
+      css: styles === null || styles === void 0 ? void 0 : styles.toggleFacade
     }, (labelPlacement === 'top' || labelPlacement === 'start') && this.renderLabel(), (0, _emotion.jsx)("span", {
-      css: styles.facade,
+      css: styles === null || styles === void 0 ? void 0 : styles.facade,
       "aria-hidden": "true"
     }, (0, _emotion.jsx)("span", {
-      css: styles.icon
+      css: styles === null || styles === void 0 ? void 0 : styles.icon
     }, (0, _emotion.jsx)("span", {
-      css: styles.iconToggle
+      css: styles === null || styles === void 0 ? void 0 : styles.iconToggle
     }, this.renderIcon()))), labelPlacement === 'end' && this.renderLabel());
   }
 
-}, _class2.displayName = "ToggleFacade", _class2.componentId = 'ToggleFacade', _class2.propTypes = {
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: _propTypes.default.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: _propTypes.default.object,
-  children: _propTypes.default.node.isRequired,
-  checked: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  readOnly: _propTypes.default.bool,
-  focused: _propTypes.default.bool,
-  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  labelPlacement: _propTypes.default.oneOf(['top', 'start', 'end'])
-}, _class2.defaultProps = {
+}, _class2.displayName = "ToggleFacade", _class2.componentId = 'ToggleFacade', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   checked: false,
   focused: false,
   size: 'medium',

package/{src/Checkbox/types.ts → lib/Checkbox/ToggleFacade/props.js}

@@ -1,3 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 /*
  * The MIT License (MIT)
  *
@@ -21,29 +32,15 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-import type { FormMessage } from '@instructure/ui-form-field'
-
-export type CheckboxProps = {
-  makeStyles?: (...args: any[]) => any
-  styles?: any
-  label: React.ReactNode
-  id?: string
-  value?: string | number
-  messages?: FormMessage[]
-  defaultChecked?: boolean
-  checked?: any // TODO: controllable(PropTypes.bool, 'onChange', 'defaultChecked')
-  onChange?: (...args: any[]) => any
-  onKeyDown?: (...args: any[]) => any
-  onFocus?: (...args: any[]) => any
-  onBlur?: (...args: any[]) => any
-  onMouseOver?: (...args: any[]) => any
-  onMouseOut?: (...args: any[]) => any
-  disabled?: boolean
-  readOnly?: boolean
-  indeterminate?: boolean
-  size?: 'small' | 'medium' | 'large'
-  variant?: 'simple' | 'toggle'
-  inline?: boolean
-  labelPlacement?: 'top' | 'start' | 'end'
-}
+const propTypes = {
+  children: _propTypes.default.node.isRequired,
+  checked: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  readOnly: _propTypes.default.bool,
+  focused: _propTypes.default.bool,
+  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
+  labelPlacement: _propTypes.default.oneOf(['top', 'start', 'end'])
+};
+exports.propTypes = propTypes;
+const allowedProps = ['children', 'checked', 'disabled', 'readOnly', 'focused', 'size', 'labelPlacement'];
+exports.allowedProps = allowedProps;

package/lib/Checkbox/index.js

@@ -21,14 +21,8 @@ exports.Checkbox = exports.default = void 0;
 
 var _react = require("react");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _keycode = _interopRequireDefault(require("keycode"));
 
-var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
-
-var _FormPropTypes = require("@instructure/ui-form-field/lib/FormPropTypes.js");
-
 var _FormFieldMessages = require("@instructure/ui-form-field/lib/FormFieldMessages");
 
 var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
@@ -53,6 +47,8 @@ var _ToggleFacade = require("./ToggleFacade");
 
 var _styles = _interopRequireDefault(require("./styles"));
 
+var _props = require("./props");
+
 var _dec, _dec2, _class, _class2, _temp;
 
 /**
@@ -229,7 +225,7 @@ let Checkbox = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (
     /* eslint-disable jsx-a11y/mouse-events-have-key-events */
 
     return (0, _emotion.jsx)("div", {
-      css: styles.checkbox,
+      css: styles === null || styles === void 0 ? void 0 : styles.checkbox,
       onMouseOver: (0, _createChainedFunction.createChainedFunction)(onMouseOver, this.handleMouseOver),
       onMouseOut: (0, _createChainedFunction.createChainedFunction)(onMouseOut, this.handleMouseOut)
     }, (0, _emotion.jsx)("input", Object.assign({}, props, {
@@ -240,8 +236,8 @@ let Checkbox = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (
         this._input = c;
       },
       disabled: disabled || readOnly,
-      "aria-checked": indeterminate ? 'mixed' : null,
-      css: styles.input,
+      "aria-checked": indeterminate ? 'mixed' : void 0,
+      css: styles === null || styles === void 0 ? void 0 : styles.input,
       onChange: this.handleChange,
       onKeyDown: (0, _createChainedFunction.createChainedFunction)(onKeyDown, this.handleKeyDown),
       onFocus: (0, _createChainedFunction.createChainedFunction)(onFocus, this.handleFocus),
@@ -249,82 +245,18 @@ let Checkbox = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (
       checked: this.checked
     })), (0, _emotion.jsx)("label", {
       htmlFor: this.id,
-      css: styles.control
+      css: styles === null || styles === void 0 ? void 0 : styles.control
     }, this.renderFacade(), this.renderMessages()));
     /* eslint-enable jsx-a11y/mouse-events-have-key-events */
   }
 
-}, _class2.displayName = "Checkbox", _class2.componentId = 'Checkbox', _class2.propTypes = {
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: _propTypes.default.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: _propTypes.default.object,
-  label: _propTypes.default.node.isRequired,
-  id: _propTypes.default.string,
-  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-
-  /**
-   * object with shape: `{
-   * text: PropTypes.string,
-   * 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']),
-  inline: _propTypes.default.bool,
-  labelPlacement: _propTypes.default.oneOf(['top', 'start', 'end'])
-}, _class2.defaultProps = {
+}, _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,
-  onChange: void 0,
-  onKeyDown: void 0,
-  onFocus: void 0,
-  onBlur: void 0,
-  onMouseOut: void 0,
-  onMouseOver: void 0,
-  checked: void 0,
-  defaultChecked: void 0,
-  messages: void 0,
-  id: void 0,
-  value: void 0,
   labelPlacement: 'end'
 }, _temp)) || _class) || _class);
 exports.Checkbox = Checkbox;

package/lib/Checkbox/props.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _FormPropTypes = require("@instructure/ui-form-field/lib/FormPropTypes.js");
+
+var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+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.string,
+   * 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']),
+  inline: _propTypes.default.bool,
+  labelPlacement: _propTypes.default.oneOf(['top', 'start', 'end'])
+};
+exports.propTypes = propTypes;
+const allowedProps = ['label', 'id', 'value', 'messages', 'defaultChecked', 'checked', 'onChange', 'onKeyDown', 'onFocus', 'onBlur', 'onMouseOver', 'onMouseOut', 'disabled', 'readOnly', 'indeterminate', 'size', 'variant', 'inline', 'labelPlacement'];
+exports.allowedProps = allowedProps;