@instructure/ui-checkbox 8.8.1-snapshot.8 → 8.9.1

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.9.1](https://github.com/instructure/instructure-ui/compare/v8.9.0...v8.9.1) (2021-09-16)
+
+**Note:** Version bump only for package @instructure/ui-checkbox
+
+# [8.9.0](https://github.com/instructure/instructure-ui/compare/v8.8.0...v8.9.0) (2021-09-15)
+
+### Bug Fixes
+
+- fix shared-types TS errors ([7b83164](https://github.com/instructure/instructure-ui/commit/7b83164f4c5872f3a217e010563f59bf584ae4fc))
+
 # [8.8.0](https://github.com/instructure/instructure-ui/compare/v8.7.0...v8.8.0) (2021-08-27)
 
 ### Features

package/es/Checkbox/CheckboxFacade/index.js

@@ -26,12 +26,12 @@ var _dec, _class, _class2, _temp, _SVGIcon, _IconCheckMarkSolid;
 
 /** @jsx jsx */
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { SVGIcon } from '@instructure/ui-svg-images';
 import { IconCheckMarkSolid } from '@instructure/ui-icons';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
+import { propTypes, allowedProps } from './props';
 
 /**
 ---
@@ -72,31 +72,16 @@ let CheckboxFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _
           children = _this$props.children,
           styles = _this$props.styles;
     return jsx("span", {
-      css: styles.checkboxFacade
+      css: styles === null || styles === void 0 ? void 0 : styles.checkboxFacade
     }, jsx("span", {
-      css: styles.facade,
+      css: styles === null || styles === void 0 ? void 0 : styles.facade,
       "aria-hidden": "true"
     }, this.renderIcon()), 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.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: PropTypes.object,
-  children: PropTypes.node.isRequired,
-  checked: PropTypes.bool,
-  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
-}, _class2.defaultProps = {
+}, _class2.displayName = "CheckboxFacade", _class2.componentId = 'CheckboxFacade', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   checked: false,
   focused: false,
   hovered: false,

package/{src/CheckboxGroup/types.ts → es/Checkbox/CheckboxFacade/props.js}

@@ -21,19 +21,18 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import PropTypes from 'prop-types';
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  checked: PropTypes.bool,
+  focused: PropTypes.bool,
+  hovered: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
 
-import React from 'react'
-import type { FormMessage } from '@instructure/ui-form-field'
-
-export type CheckboxGroupProps = {
-  name: string
-  description: React.ReactNode
-  defaultValue?: any[]
-  value?: any // TODO: controllable(PropTypes.array)
-  onChange?: (...args: any[]) => any
-  disabled?: boolean
-  readOnly?: boolean
-  messages?: FormMessage[]
-  size?: 'small' | 'medium' | 'large'
-  layout?: 'stacked' | 'columns' | 'inline'
-}
+  /**
+   * Visual state showing that child checkboxes are a combination of checked and unchecked
+   */
+  indeterminate: PropTypes.bool
+};
+const allowedProps = ['children', 'checked', 'focused', 'hovered', 'size', 'indeterminate'];
+export { propTypes, allowedProps };

package/es/Checkbox/ToggleFacade/index.js

@@ -26,11 +26,11 @@ var _dec, _class, _class2, _temp;
 
 /** @jsx jsx */
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { IconCheckSolid, IconXSolid } from '@instructure/ui-icons';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
+import { propTypes, allowedProps } from './props';
 
 /**
 ---
@@ -53,11 +53,11 @@ let ToggleFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _de
 
     if (checked) {
       return jsx(IconCheckSolid, {
-        css: styles.iconSVG
+        css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
       });
     } else {
       return jsx(IconXSolid, {
-        css: styles.iconSVG
+        css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
       });
     }
   }
@@ -67,7 +67,7 @@ let ToggleFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _de
           children = _this$props2.children,
           styles = _this$props2.styles;
     return jsx("span", {
-      css: styles.label
+      css: styles === null || styles === void 0 ? void 0 : styles.label
     }, children);
   }
 
@@ -76,30 +76,18 @@ let ToggleFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _de
           labelPlacement = _this$props3.labelPlacement,
           styles = _this$props3.styles;
     return jsx("span", {
-      css: styles.toggleFacade
+      css: styles === null || styles === void 0 ? void 0 : styles.toggleFacade
     }, (labelPlacement === 'top' || labelPlacement === 'start') && this.renderLabel(), jsx("span", {
-      css: styles.facade,
+      css: styles === null || styles === void 0 ? void 0 : styles.facade,
       "aria-hidden": "true"
     }, jsx("span", {
-      css: styles.icon
+      css: styles === null || styles === void 0 ? void 0 : styles.icon
     }, 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.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: PropTypes.object,
-  children: PropTypes.node.isRequired,
-  checked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  focused: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  labelPlacement: PropTypes.oneOf(['top', 'start', 'end'])
-}, _class2.defaultProps = {
+}, _class2.displayName = "ToggleFacade", _class2.componentId = 'ToggleFacade', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   checked: false,
   focused: false,
   size: 'medium',

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

@@ -21,13 +21,15 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-export type CheckboxFacadeProps = {
-  makeStyles?: (...args: any[]) => any
-  styles?: any
-  checked?: boolean
-  focused?: boolean
-  hovered?: boolean
-  size?: 'small' | 'medium' | 'large'
-  indeterminate?: boolean
-}
+import PropTypes from 'prop-types';
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  focused: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  labelPlacement: PropTypes.oneOf(['top', 'start', 'end'])
+};
+const allowedProps = ['children', 'checked', 'disabled', 'readOnly', 'focused', 'size', 'labelPlacement'];
+export { propTypes, allowedProps };

package/es/Checkbox/index.js

@@ -26,10 +26,8 @@ var _dec, _dec2, _class, _class2, _temp;
 
 /** @jsx jsx */
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import keycode from 'keycode';
-import { controllable } from '@instructure/ui-prop-types';
-import { FormPropTypes, FormFieldMessages } from '@instructure/ui-form-field';
+import { FormFieldMessages } from '@instructure/ui-form-field';
 import { createChainedFunction } from '@instructure/ui-utils';
 import { logError as error } from '@instructure/console';
 import { uid } from '@instructure/uid';
@@ -41,6 +39,7 @@ import { withStyle, jsx } from '@instructure/emotion';
 import { CheckboxFacade } from './CheckboxFacade';
 import { ToggleFacade } from './ToggleFacade';
 import generateStyle from './styles';
+import { propTypes, allowedProps } from './props';
 
 /**
 ---
@@ -216,7 +215,7 @@ let Checkbox = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(
     /* eslint-disable jsx-a11y/mouse-events-have-key-events */
 
     return jsx("div", {
-      css: styles.checkbox,
+      css: styles === null || styles === void 0 ? void 0 : styles.checkbox,
       onMouseOver: createChainedFunction(onMouseOver, this.handleMouseOver),
       onMouseOut: createChainedFunction(onMouseOut, this.handleMouseOut)
     }, jsx("input", Object.assign({}, props, {
@@ -228,7 +227,7 @@ let Checkbox = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(
       },
       disabled: disabled || readOnly,
       "aria-checked": indeterminate ? 'mixed' : void 0,
-      css: styles.input,
+      css: styles === null || styles === void 0 ? void 0 : styles.input,
       onChange: this.handleChange,
       onKeyDown: createChainedFunction(onKeyDown, this.handleKeyDown),
       onFocus: createChainedFunction(onFocus, this.handleFocus),
@@ -236,82 +235,18 @@ let Checkbox = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(
       checked: this.checked
     })), 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.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: PropTypes.object,
-  label: PropTypes.node.isRequired,
-  id: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * object with shape: `{
-   * text: PropTypes.string,
-   * 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']),
-  inline: PropTypes.bool,
-  labelPlacement: PropTypes.oneOf(['top', 'start', 'end'])
-}, _class2.defaultProps = {
+}, _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,
-  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);
 export default Checkbox;

package/es/Checkbox/props.js

@@ -0,0 +1,78 @@
+/*
+ * 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 } from '@instructure/ui-prop-types';
+const propTypes = {
+  label: PropTypes.node.isRequired,
+  id: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * object with shape: `{
+   * text: PropTypes.string,
+   * 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']),
+  inline: PropTypes.bool,
+  labelPlacement: PropTypes.oneOf(['top', 'start', 'end'])
+};
+const allowedProps = ['label', 'id', 'value', 'messages', 'defaultChecked', 'checked', 'onChange', 'onKeyDown', 'onFocus', 'onBlur', 'onMouseOver', 'onMouseOut', 'disabled', 'readOnly', 'indeterminate', 'size', 'variant', 'inline', 'labelPlacement'];
+export { propTypes, allowedProps };

package/es/CheckboxGroup/index.js

@@ -24,13 +24,12 @@ var _dec, _class, _class2, _temp;
  * SOFTWARE.
  */
 import React, { Children, Component } from 'react';
-import PropTypes from 'prop-types';
-import { controllable, Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
-import { FormPropTypes, FormFieldGroup } from '@instructure/ui-form-field';
+import { FormFieldGroup } from '@instructure/ui-form-field';
 import { uid } from '@instructure/uid';
 import { matchComponentTypes, safeCloneElement, pickProps, omitProps } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 import { Checkbox } from '../Checkbox';
+import { propTypes, allowedProps } from './props';
 
 /**
 ---
@@ -124,50 +123,11 @@ let CheckboxGroup = (_dec = testable(), _dec(_class = (_temp = _class2 = class C
     );
   }
 
-}, _class2.displayName = "CheckboxGroup", _class2.componentId = 'CheckboxGroup', _class2.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'])
-}, _class2.defaultProps = {
+}, _class2.displayName = "CheckboxGroup", _class2.componentId = 'CheckboxGroup', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   disabled: false,
   readOnly: false,
   size: 'medium',
   layout: 'stacked',
-  defaultValue: void 0,
-  messages: void 0,
-  value: void 0,
-  onChange: void 0,
   children: null
 }, _temp)) || _class);
 export default CheckboxGroup;