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

package/src/Checkbox/ToggleFacade/styles.ts

@@ -23,7 +23,7 @@
  */
 
 import { ToggleFacadeTheme } from '@instructure/shared-types'
-import { ToggleFacadeProps } from './types'
+import { ToggleFacadeProps } from './props'
 
 /**
  * ---

package/src/Checkbox/index.tsx

@@ -24,11 +24,9 @@
 
 /** @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'
@@ -43,7 +41,9 @@ import { CheckboxFacade } from './CheckboxFacade'
 import { ToggleFacade } from './ToggleFacade'
 
 import generateStyle from './styles'
-import { CheckboxProps } from './types'
+
+import { propTypes, allowedProps } from './props'
+import type { CheckboxProps } from './props'
 
 /**
 ---
@@ -57,54 +57,8 @@ tags: toggle, switch
 class Checkbox extends Component<CheckboxProps> {
   static readonly componentId = 'Checkbox'
 
-  static 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'])
-  }
-
+  static propTypes = propTypes
+  static allowedProps = allowedProps
   static defaultProps = {
     size: 'medium',
     variant: 'simple',
@@ -112,17 +66,6 @@ class Checkbox extends Component<CheckboxProps> {
     inline: false,
     indeterminate: false,
     readOnly: false,
-    onChange: undefined,
-    onKeyDown: undefined,
-    onFocus: undefined,
-    onBlur: undefined,
-    onMouseOut: undefined,
-    onMouseOver: undefined,
-    checked: undefined,
-    defaultChecked: undefined,
-    messages: undefined,
-    id: undefined,
-    value: undefined,
     labelPlacement: 'end'
   }
 
@@ -338,7 +281,7 @@ class Checkbox extends Component<CheckboxProps> {
 
     return (
       <div
-        css={styles.checkbox}
+        css={styles?.checkbox}
         onMouseOver={createChainedFunction(onMouseOver, this.handleMouseOver)}
         onMouseOut={createChainedFunction(onMouseOut, this.handleMouseOut)}
       >
@@ -352,16 +295,15 @@ class Checkbox extends Component<CheckboxProps> {
             this._input = c
           }}
           disabled={disabled || readOnly}
-          // @ts-expect-error ts-migrate(2322) FIXME: Type '"mixed" | null' is not assignable to type 'b... Remove this comment to see the full error message
-          aria-checked={indeterminate ? 'mixed' : null}
-          css={styles.input}
+          aria-checked={indeterminate ? 'mixed' : undefined}
+          css={styles?.input}
           onChange={this.handleChange}
           onKeyDown={createChainedFunction(onKeyDown, this.handleKeyDown)}
           onFocus={createChainedFunction(onFocus, this.handleFocus)}
           onBlur={createChainedFunction(onBlur, this.handleBlur)}
           checked={this.checked}
         />
-        <label htmlFor={this.id} css={styles.control}>
+        <label htmlFor={this.id} css={styles?.control}>
           {this.renderFacade()}
           {this.renderMessages()}
         </label>

package/src/Checkbox/props.ts

@@ -0,0 +1,129 @@
+/*
+ * 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'
+
+import type { FormMessage } from '@instructure/ui-form-field'
+import type { PropValidators } from '@instructure/shared-types'
+import type { WithStyleProps } from '@instructure/emotion'
+
+type CheckboxOwnProps = {
+  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'
+}
+
+type PropKeys = keyof CheckboxOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type CheckboxProps = CheckboxOwnProps & WithStyleProps
+
+const propTypes: PropValidators<PropKeys> = {
+  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: AllowedPropKeys = [
+  'label',
+  'id',
+  'value',
+  'messages',
+  'defaultChecked',
+  'checked',
+  'onChange',
+  'onKeyDown',
+  'onFocus',
+  'onBlur',
+  'onMouseOver',
+  'onMouseOut',
+  'disabled',
+  'readOnly',
+  'indeterminate',
+  'size',
+  'variant',
+  'inline',
+  'labelPlacement'
+]
+
+export type { CheckboxProps }
+export { propTypes, allowedProps }

package/src/Checkbox/styles.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { CheckboxProps } from './types'
+import { CheckboxProps } from './props'
 
 /**
  * ---

package/src/CheckboxGroup/index.tsx

@@ -23,13 +23,8 @@
  */
 
 import React, { Children, Component, ReactElement } 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,
@@ -40,7 +35,9 @@ import {
 import { testable } from '@instructure/ui-testable'
 
 import { Checkbox } from '../Checkbox'
-import { CheckboxGroupProps } from './types'
+
+import { propTypes, allowedProps } from './props'
+import type { CheckboxGroupProps } from './props'
 
 /**
 ---
@@ -52,47 +49,13 @@ category: components
 class CheckboxGroup extends Component<CheckboxGroupProps> {
   static readonly componentId = 'CheckboxGroup'
 
-  static 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'])
-  }
-
+  static propTypes = propTypes
+  static allowedProps = allowedProps
   static defaultProps = {
     disabled: false,
     readOnly: false,
     size: 'medium',
     layout: 'stacked',
-    defaultValue: undefined,
-    messages: undefined,
-    value: undefined,
-    onChange: undefined,
     children: null
   }
 

package/src/CheckboxGroup/props.ts

@@ -0,0 +1,106 @@
+/*
+ * 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 React from 'react'
+import PropTypes from 'prop-types'
+
+import { FormPropTypes } from '@instructure/ui-form-field'
+import {
+  controllable,
+  Children as ChildrenPropTypes
+} from '@instructure/ui-prop-types'
+
+import type { FormMessage } from '@instructure/ui-form-field'
+import type { PropValidators } from '@instructure/shared-types'
+
+import { Checkbox } from '../Checkbox'
+
+type CheckboxGroupOwnProps = {
+  children?: React.ReactNode // TODO: oneOf([Checkbox])
+  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'
+}
+
+type PropKeys = keyof CheckboxGroupOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type CheckboxGroupProps = CheckboxGroupOwnProps
+
+const propTypes: PropValidators<PropKeys> = {
+  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: AllowedPropKeys = [
+  'name',
+  'description',
+  'defaultValue',
+  'value',
+  'onChange',
+  'disabled',
+  'readOnly',
+  'messages',
+  'children',
+  'size',
+  'layout'
+]
+
+export type { CheckboxGroupProps }
+export { propTypes, allowedProps }