@instructure/ui-checkbox 10.26.1 → 11.0.1-snapshot-0

package/src/Checkbox/CheckboxFacade/props.ts

@@ -22,12 +22,7 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types'
-
-import type {
-  PropValidators,
-  CheckboxFacadeTheme
-} from '@instructure/shared-types'
+import type { CheckboxFacadeTheme } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type CheckboxFacadeOwnProps = {
@@ -54,17 +49,6 @@ type CheckboxFacadeProps = CheckboxFacadeOwnProps &
   WithStyleProps<CheckboxFacadeTheme, CheckboxFacadeStyle>
 
 type CheckboxFacadeStyle = ComponentStyle<'checkboxFacade' | 'facade' | 'label'>
-
-const propTypes: PropValidators<PropKeys> = {
-  children: PropTypes.node.isRequired,
-  checked: PropTypes.bool,
-  focused: PropTypes.bool,
-  hovered: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  indeterminate: PropTypes.bool,
-  invalid: PropTypes.bool
-}
-
 const allowedProps: AllowedPropKeys = [
   'children',
   'checked',
@@ -75,4 +59,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { CheckboxFacadeProps, CheckboxFacadeStyle }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/Checkbox/ToggleFacade/index.tsx

@@ -31,7 +31,7 @@ import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { ToggleFacadeProps } from './props'
 
 /**
@@ -43,7 +43,6 @@ parent: Checkbox
 class ToggleFacade extends Component<ToggleFacadeProps> {
   static readonly componentId = 'ToggleFacade'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     checked: false,

package/src/Checkbox/ToggleFacade/props.ts

@@ -23,12 +23,7 @@
  */
 
 import React from 'react'
-import PropTypes from 'prop-types'
-
-import type {
-  PropValidators,
-  ToggleFacadeTheme
-} from '@instructure/shared-types'
+import type { ToggleFacadeTheme } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type ToggleFacadeOwnProps = {
@@ -55,18 +50,6 @@ type ToggleFacadeProps = ToggleFacadeOwnProps &
 type ToggleFacadeStyle = ComponentStyle<
   'toggleFacade' | 'facade' | 'icon' | 'iconToggle' | 'iconSVG' | 'label'
 >
-
-const propTypes: PropValidators<PropKeys> = {
-  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']),
-  invalid: PropTypes.bool
-}
-
 const allowedProps: AllowedPropKeys = [
   'children',
   'checked',
@@ -78,4 +61,4 @@ const allowedProps: AllowedPropKeys = [
 ]
 
 export type { ToggleFacadeProps, ToggleFacadeStyle }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/Checkbox/index.tsx

@@ -31,7 +31,6 @@ import { logError as error } from '@instructure/console'
 import { isActiveElement } from '@instructure/ui-dom-utils'
 import { omitProps, withDeterministicId } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
-import { testable } from '@instructure/ui-testable'
 
 import { withStyle } from '@instructure/emotion'
 
@@ -41,7 +40,7 @@ import { ToggleFacade } from './ToggleFacade'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type { CheckboxProps, CheckboxState } from './props'
 
 import type {
@@ -58,11 +57,9 @@ tags: toggle, switch
 
 @withDeterministicId()
 @withStyle(generateStyle, generateComponentTheme)
-@testable()
 class Checkbox extends Component<CheckboxProps, CheckboxState> {
   static readonly componentId = 'Checkbox'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     size: 'medium',
@@ -323,6 +320,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
         /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */
         onMouseOut={createChainedFunction(onMouseOut, this.handleMouseOut)}
         ref={this.handleRef}
+        data-cid="Checkbox"
       >
         <div css={styles?.container}>
           <input

package/src/Checkbox/props.ts

@@ -22,16 +22,10 @@
  * 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 {
   CheckboxFacadeTheme,
   OtherHTMLAttributes,
-  PropValidators,
   ToggleFacadeTheme
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
@@ -104,31 +98,6 @@ type CheckboxStyle = ComponentStyle<
   | 'indentedError'
   | 'indentedToggleError'
 >
-
-const propTypes: PropValidators<PropKeys> = {
-  label: PropTypes.node.isRequired,
-  id: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  messages: PropTypes.arrayOf(FormPropTypes.message),
-  defaultChecked: PropTypes.bool,
-  checked: controllable(PropTypes.bool, 'onChange', 'defaultChecked'),
-  onChange: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onMouseOver: PropTypes.func,
-  onMouseOut: PropTypes.func,
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  indeterminate: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  variant: PropTypes.oneOf(['simple', 'toggle']),
-  inline: PropTypes.bool,
-  labelPlacement: PropTypes.oneOf(['top', 'start', 'end']),
-  isRequired: PropTypes.bool,
-  inputRef: PropTypes.func
-}
-
 const allowedProps: AllowedPropKeys = [
   'label',
   'id',
@@ -160,4 +129,4 @@ type CheckboxState = {
 }
 
 export type { CheckboxProps, CheckboxStyle, CheckboxState }
-export { propTypes, allowedProps }
+export { allowedProps }

package/src/CheckboxGroup/index.tsx

@@ -32,11 +32,10 @@ import {
   omitProps,
   withDeterministicId
 } from '@instructure/ui-react-utils'
-import { testable } from '@instructure/ui-testable'
 
 import { Checkbox } from '../Checkbox'
 
-import { propTypes, allowedProps } from './props'
+import { allowedProps } from './props'
 import type {
   CheckboxGroupProps,
   CheckboxGroupState,
@@ -50,11 +49,9 @@ category: components
 **/
 
 @withDeterministicId()
-@testable()
 class CheckboxGroup extends Component<CheckboxGroupProps, CheckboxGroupState> {
   static readonly componentId = 'CheckboxGroup'
 
-  static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     disabled: false,
@@ -148,6 +145,7 @@ class CheckboxGroup extends Component<CheckboxGroupProps, CheckboxGroupState> {
         vAlign="top"
         messagesId={this._messagesId}
         elementRef={this.handleRef}
+        data-cid="CheckboxGroup"
       >
         {this.renderChildren()}
       </FormFieldGroup>

package/src/CheckboxGroup/props.ts

@@ -23,19 +23,8 @@
  */
 
 import { type InputHTMLAttributes } 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 {
-  OtherHTMLAttributes,
-  PropValidators
-} from '@instructure/shared-types'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 import { Checkbox } from '../Checkbox'
@@ -67,39 +56,6 @@ type CheckboxGroupProps = CheckboxGroupOwnProps &
     InputHTMLAttributes<CheckboxGroupOwnProps & Element>
   > &
   WithDeterministicIdProps
-
-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.node,
-    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',
@@ -118,4 +74,4 @@ type CheckboxGroupState = {
   value: (string | number)[]
 }
 export type { CheckboxGroupProps, CheckboxGroupState, CheckboxChild }
-export { propTypes, allowedProps }
+export { allowedProps }

package/tsconfig.build.json

@@ -13,10 +13,8 @@
     { "path": "../ui-dom-utils/tsconfig.build.json" },
     { "path": "../ui-form-field/tsconfig.build.json" },
     { "path": "../ui-icons/tsconfig.build.json" },
-    { "path": "../ui-prop-types/tsconfig.build.json" },
     { "path": "../ui-react-utils/tsconfig.build.json" },
     { "path": "../ui-svg-images/tsconfig.build.json" },
-    { "path": "../ui-testable/tsconfig.build.json" },
     { "path": "../ui-utils/tsconfig.build.json" },
     { "path": "../ui-view/tsconfig.build.json" },
     { "path": "../uid/tsconfig.build.json" },