@instructure/ui-buttons 8.13.1-snapshot.9 → 8.14.0

package/src/CloseButton/index.tsx

@@ -43,6 +43,7 @@ import type { CloseButtonProps } from './props'
 ---
 category: components
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
@@ -52,9 +53,8 @@ class CloseButton extends Component<CloseButtonProps> {
   static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onClick: (event) => {},
     // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+    interaction: undefined,
     type: 'button',
     placement: 'static',
     offset: 'x-small',
@@ -77,13 +77,11 @@ class CloseButton extends Component<CloseButtonProps> {
   }
 
   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?.()
   }
 
   componentDidUpdate() {
-    // @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?.()
   }
 
   get interaction() {

package/src/CloseButton/props.ts

@@ -22,7 +22,9 @@
  * SOFTWARE.
  */
 
+import React from 'react'
 import PropTypes from 'prop-types'
+
 import { ThemeablePropTypes } from '@instructure/emotion'
 
 import type {
@@ -31,102 +33,126 @@ import type {
   ComponentStyle
 } from '@instructure/emotion'
 import type {
+  ToProp,
   AsElementType,
   CloseButtonTheme,
   OtherHTMLAttributes,
   PropValidators
 } from '@instructure/shared-types'
 import type { Cursor } from '@instructure/ui-prop-types'
+import type { ViewProps } from '@instructure/ui-view'
 
 type CloseButtonOwnProps = {
-  screenReaderLabel: string | React.ReactNode
-  color?: 'primary' | 'primary-inverse'
-  interaction?: 'enabled' | 'disabled' | 'readonly'
-  elementRef?: (element: Element | null) => void
-  size?: 'small' | 'medium' | 'large'
-  onClick?: (...args: any[]) => any
-  margin?: Spacing
-  placement?: 'start' | 'end' | 'static'
-  offset?: 'none' | 'x-small' | 'small' | 'medium'
-  type?: 'button' | 'submit' | 'reset'
-  as?: AsElementType
-  href?: string
-  cursor?: Cursor
-  tabIndex?: number | string
-}
-
-type PropKeys = keyof CloseButtonOwnProps
-
-type AllowedPropKeys = Readonly<Array<PropKeys>>
-
-type CloseButtonProps = CloseButtonOwnProps &
-  WithStyleProps<CloseButtonTheme, CloseButtonStyle> &
-  OtherHTMLAttributes<CloseButtonOwnProps>
-
-type CloseButtonStyle = ComponentStyle<'closeButton'>
-
-const propTypes: PropValidators<PropKeys> = {
   /**
    * An accessible label for the `CloseButton` (required)
    */
-  screenReaderLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
-    .isRequired,
+  screenReaderLabel: React.ReactNode
+
   /**
    * Specifies the color for the `CloseButton`.
    */
-  color: PropTypes.oneOf(['primary', 'primary-inverse']),
+  color?: 'primary' | 'primary-inverse'
+
   /**
    * Specifies if interaction with the `CloseButton` is enabled, disabled, or readonly.
    */
-  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
+  interaction?: 'enabled' | 'disabled' | 'readonly'
+
   /**
    * Provides a reference to the `CloseButton`'s underlying html element.
    */
-  elementRef: PropTypes.func,
+  elementRef?: (element: Element | null) => void
+
   /**
    * The size of the `CloseButton`
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size?: 'small' | 'medium' | 'large'
+
   /**
    * Callback fired when the `CloseButton` is clicked.
    */
-  onClick: PropTypes.func,
+  onClick?: (
+    event: React.KeyboardEvent<ViewProps> | React.MouseEvent<ViewProps>
+  ) => void
+
   /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
    * familiar CSS-like shorthand. For example: `margin="small auto large"`.
    */
-  margin: ThemeablePropTypes.spacing,
+  margin?: Spacing
+
   /**
    * Specifies the placement of the `CloseButton`
    */
-  placement: PropTypes.oneOf(['start', 'end', 'static']),
+  placement?: 'start' | 'end' | 'static'
+
   /**
    * Specifies the offset distance for the `CloseButton` with respect to both the top and start/end of the container.
    * Note that for this property to have an effect, the `placement` prop must be set to either `start` or `end`. The
    * offset will also be created with respect to a positioned parent. If it does not appear to be working, try setting
    * the `position` of the parent container to `relative`.
    */
-  offset: PropTypes.oneOf(['none', 'x-small', 'small', 'medium']),
+  offset?: 'none' | 'x-small' | 'small' | 'medium'
+
   /**
    * Specifies the type of the `Button`'s underlying html element.
    */
-  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  type?: 'button' | 'submit' | 'reset'
+
   /**
    * The element to render as the component root, `CloseButton` by default.
    */
-  as: PropTypes.elementType,
+  as?: AsElementType
+
   /**
    * Specifies an href attribute for the `CloseButton`'s underlying html element.
    */
-  href: PropTypes.string,
+  href?: string
+
   /**
    * Specify a mouse cursor to use when hovering over the `CloseButton`.
    */
-  cursor: PropTypes.string,
+  cursor?: Cursor
+
+  // Deprecated `string` tabIndex type
+  // TODO: remove string type in v9
   /**
    * Specifies the tabindex of the `CloseButton`.
+   *
+   * (`string` type is __deprecated__, use `number`)
    */
+  tabIndex?: number | string
+}
+
+type PropKeys = keyof CloseButtonOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type CloseButtonProps = CloseButtonOwnProps &
+  WithStyleProps<CloseButtonTheme, CloseButtonStyle> &
+  OtherHTMLAttributes<CloseButtonOwnProps> &
+  ToProp
+
+type CloseButtonStyle = ComponentStyle<'closeButton'>
+
+const propTypes: PropValidators<PropKeys> = {
+  screenReaderLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+    .isRequired,
+  color: PropTypes.oneOf(['primary', 'primary-inverse']),
+  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
+  elementRef: PropTypes.func,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  onClick: PropTypes.func,
+  margin: ThemeablePropTypes.spacing,
+  placement: PropTypes.oneOf(['start', 'end', 'static']),
+  offset: PropTypes.oneOf(['none', 'x-small', 'small', 'medium']),
+  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  as: PropTypes.elementType,
+  href: PropTypes.string,
+  cursor: PropTypes.string,
+  // Deprecated `string` tabIndex type
+  // TODO: remove string type in v9
   tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 }
 

package/src/CondensedButton/index.tsx

@@ -39,6 +39,7 @@ import type { CondensedButtonProps } from './props'
 ---
 category: components
 ---
+@tsProps
 **/
 // needed for listing the available theme variables on docs page
 @withStyle(null, generateComponentTheme)
@@ -49,19 +50,17 @@ class CondensedButton extends Component<CondensedButtonProps> {
   static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
-    children: null,
     type: 'button',
     size: 'medium',
-    // @ts-expect-error ts-migrate(6133) FIXME: 'el' is declared but its value is never read.
-    elementRef: (el) => {},
     as: 'button',
     // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+    interaction: undefined,
     color: 'primary',
     margin: '0',
     cursor: 'pointer'
   }
 
-  _baseButton = null
+  _baseButton: BaseButton | null = null
 
   ref: Element | null = null
 
@@ -76,12 +75,10 @@ class CondensedButton extends Component<CondensedButtonProps> {
   }
 
   get focused() {
-    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
     return this._baseButton && this._baseButton.focused
   }
 
   focus() {
-    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
     this._baseButton && this._baseButton.focus()
   }
 
@@ -121,7 +118,6 @@ class CondensedButton extends Component<CondensedButtonProps> {
         renderIcon={renderIcon}
         themeOverride={themeOverride}
         ref={(component) => {
-          // @ts-expect-error ts-migrate(2322) FIXME: Type 'BaseButton | null' is not assignable to type... Remove this comment to see the full error message
           this._baseButton = component
         }}
       >

package/src/CondensedButton/props.ts

@@ -29,83 +29,104 @@ import { ThemeablePropTypes } from '@instructure/emotion'
 
 import type { Spacing, WithStyleProps } from '@instructure/emotion'
 import type {
+  ToProp,
   AsElementType,
   BaseButtonTheme,
   OtherHTMLAttributes,
   PropValidators
 } from '@instructure/shared-types'
 import type { Cursor } from '@instructure/ui-prop-types'
+import type { ViewProps } from '@instructure/ui-view'
 
 type CondensedButtonOwnProps = {
-  children?: React.ReactNode
-  type?: 'button' | 'submit' | 'reset'
-  size?: 'small' | 'medium' | 'large'
-  elementRef?: (element: Element | null) => void
-  as?: AsElementType
-  interaction?: 'enabled' | 'disabled' | 'readonly'
-  color?: 'primary' | 'primary-inverse'
-  margin?: Spacing
-  cursor?: Cursor
-  href?: string
-  renderIcon?: React.ReactNode | ((...args: any[]) => any)
-}
-
-type PropKeys = keyof CondensedButtonOwnProps
-
-type AllowedPropKeys = Readonly<Array<PropKeys>>
-
-type CondensedButtonProps = CondensedButtonOwnProps &
-  WithStyleProps<BaseButtonTheme, null> &
-  OtherHTMLAttributes<CondensedButtonOwnProps>
-
-const propTypes: PropValidators<PropKeys> = {
   /**
    * Specifies the `CondensedButton` children.
    */
-  children: PropTypes.node,
+  children?: React.ReactNode
+
   /**
    * Specifies the type of the `CondensedButton`'s underlying html element.
    */
-  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  type?: 'button' | 'submit' | 'reset'
+
   /**
    * The size of the `CondensedButton`
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size?: 'small' | 'medium' | 'large'
+
   /**
    * Provides a reference to the `CondensedButton`'s underlying html element.
    */
-  elementRef: PropTypes.func,
+  elementRef?: (element: Element | null) => void
+
   /**
    * The element to render as the component root, `button` by default.
    */
-  as: PropTypes.elementType,
+  as?: AsElementType
+
   /**
    * Specifies if interaction with the `CondensedButton` is enabled, disabled, or readonly.
    */
-  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
+  interaction?: 'enabled' | 'disabled' | 'readonly'
+
   /**
    * Specifies the color for the `CondensedButton`.
    */
-  color: PropTypes.oneOf(['primary', 'primary-inverse']),
+  color?: 'primary' | 'primary-inverse'
+
   /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
    * familiar CSS-like shorthand. For example: `margin="small auto large"`.
    */
-  margin: ThemeablePropTypes.spacing,
+  margin?: Spacing
+
   /**
    * Specify a mouse cursor to use when hovering over the button.
    * The `pointer` cursor is used by default.
    */
-  cursor: PropTypes.string,
+  cursor?: Cursor
+
   /**
    * Specifies an href attribute for the `CondensedButton`'s underlying html element.
    */
-  href: PropTypes.string,
+  href?: string
+
   /**
    * An icon, or function that returns an icon.
    */
-  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+  renderIcon?: React.ReactNode | (() => React.ReactNode)
+
+  /**
+   * Callback fired when the `CondensedButton` is clicked.
+   */
+  onClick?: (
+    event: React.KeyboardEvent<ViewProps> | React.MouseEvent<ViewProps>
+  ) => void
+}
+
+type PropKeys = keyof CondensedButtonOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type CondensedButtonProps = CondensedButtonOwnProps &
+  WithStyleProps<BaseButtonTheme, null> &
+  OtherHTMLAttributes<CondensedButtonOwnProps> &
+  ToProp
+
+const propTypes: PropValidators<PropKeys> = {
+  children: PropTypes.node,
+  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  elementRef: PropTypes.func,
+  as: PropTypes.elementType,
+  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
+  color: PropTypes.oneOf(['primary', 'primary-inverse']),
+  margin: ThemeablePropTypes.spacing,
+  cursor: PropTypes.string,
+  href: PropTypes.string,
+  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  onClick: PropTypes.func
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -119,7 +140,8 @@ const allowedProps: AllowedPropKeys = [
   'margin',
   'renderIcon',
   'size',
-  'type'
+  'type',
+  'onClick'
 ]
 
 export type { CondensedButtonProps }

package/src/IconButton/index.tsx

@@ -40,6 +40,7 @@ import type { IconButtonProps } from './props'
 ---
 category: components
 ---
+@tsProps
 **/
 
 // needed for listing the available theme variables on docs page
@@ -51,13 +52,11 @@ class IconButton extends Component<IconButtonProps> {
   static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
-    children: null,
     type: 'button',
     size: 'medium',
-    // @ts-expect-error ts-migrate(6133) FIXME: 'el' is declared but its value is never read.
-    elementRef: (el) => {},
     as: 'button',
     // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+    interaction: undefined,
     color: 'secondary',
     shape: 'rectangle',
     withBackground: true,
@@ -66,7 +65,7 @@ class IconButton extends Component<IconButtonProps> {
     cursor: 'pointer'
   }
 
-  _baseButton = null
+  _baseButton: BaseButton | null = null
 
   ref: Element | null = null
 
@@ -81,12 +80,10 @@ class IconButton extends Component<IconButtonProps> {
   }
 
   get focused() {
-    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
     return this._baseButton && this._baseButton.focused
   }
 
   focus() {
-    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
     this._baseButton && this._baseButton.focus()
   }
 
@@ -132,7 +129,6 @@ class IconButton extends Component<IconButtonProps> {
         renderIcon={children || renderIcon}
         themeOverride={themeOverride}
         ref={(component) => {
-          // @ts-expect-error ts-migrate(2322) FIXME: Type 'BaseButton | null' is not assignable to type... Remove this comment to see the full error message
           this._baseButton = component
         }}
       >

package/src/IconButton/props.ts

@@ -29,114 +29,140 @@ import { ThemeablePropTypes } from '@instructure/emotion'
 
 import type { Spacing, WithStyleProps } from '@instructure/emotion'
 import type {
+  ToProp,
   AsElementType,
   PropValidators,
   BaseButtonTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { Cursor } from '@instructure/ui-prop-types'
+import type { ViewProps } from '@instructure/ui-view'
 
 type IconButtonOwnProps = {
-  children?: React.ReactNode | ((...args: any[]) => React.ReactNode)
-  renderIcon?: React.ReactNode | ((...args: any[]) => any)
-  screenReaderLabel: string
-  type?: 'button' | 'submit' | 'reset'
-  size?: 'small' | 'medium' | 'large'
-  elementRef?: (element: Element | null) => void
-  as?: AsElementType
-  interaction?: 'enabled' | 'disabled' | 'readonly'
-  color?: 'primary' | 'primary-inverse' | 'secondary' | 'success' | 'danger'
-  focusColor?: 'info' | 'inverse'
-  shape?: 'rectangle' | 'circle'
-  withBackground?: boolean
-  withBorder?: boolean
-  margin?: Spacing
-  cursor?: Cursor
-  href?: string
-}
-
-type PropKeys = keyof IconButtonOwnProps
-
-type AllowedPropKeys = Readonly<Array<PropKeys>>
-
-type IconButtonProps = IconButtonOwnProps &
-  WithStyleProps<BaseButtonTheme, null> &
-  OtherHTMLAttributes<IconButtonOwnProps>
-
-const propTypes: PropValidators<PropKeys> = {
   /**
    * An icon, or function returning an icon (identical to the `renderIcon` prop).
    */
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  children?: React.ReactNode | (() => React.ReactNode)
+
   /**
    * An icon, or function that returns an icon (identical to the `children` prop).
    */
-  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderIcon?: React.ReactNode | (() => React.ReactNode)
+
   /**
    * An accessible label for the `IconButton`.
    */
-  screenReaderLabel: PropTypes.string.isRequired,
+  screenReaderLabel: string
+
   /**
    * Specifies the type of the `IconButton`'s underlying html element.
    */
-  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  type?: 'button' | 'submit' | 'reset'
+
   /**
    * The size of the `IconButton`
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size?: 'small' | 'medium' | 'large'
+
   /**
    * Provides a reference to the `IconButton`'s underlying html element.
    */
-  elementRef: PropTypes.func,
+  elementRef?: (element: Element | null) => void
+
   /**
    * The element to render as the component root, `button` by default.
    */
-  as: PropTypes.elementType,
+  as?: AsElementType
+
   /**
    * Specifies if interaction with the `IconButton` is enabled, disabled, or readonly.
    */
-  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
+  interaction?: 'enabled' | 'disabled' | 'readonly'
+
   /**
    * Specifies the color for the `IconButton`.
    */
-  color: PropTypes.oneOf([
-    'primary',
-    'primary-inverse',
-    'secondary',
-    'success',
-    'danger'
-  ]),
+  color?: 'primary' | 'primary-inverse' | 'secondary' | 'success' | 'danger'
+
   /**
    * Override the `Button`'s default focus outline color.
    */
-  focusColor: PropTypes.oneOf(['info', 'inverse']),
+  focusColor?: 'info' | 'inverse'
+
   /**
    * Specifies if the `IconButton` shape should be a circle or rectangle.
    */
-  shape: PropTypes.oneOf(['rectangle', 'circle']),
+  shape?: 'rectangle' | 'circle'
+
   /**
    * Specifies if the `IconButton` should render with a solid background. When false, the background is transparent.
    */
-  withBackground: PropTypes.bool,
+  withBackground?: boolean
+
   /**
    * Specifies if the `IconButton` should render with a border.
    */
-  withBorder: PropTypes.bool,
+  withBorder?: boolean
+
   /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
    * familiar CSS-like shorthand. For example: `margin="small auto large"`.
    */
-  margin: ThemeablePropTypes.spacing,
+  margin?: Spacing
+
   /**
    * Specify a mouse cursor to use when hovering over the button.
    * The `pointer` cursor is used by default.
    */
-  cursor: PropTypes.string,
+  cursor?: Cursor
+
   /**
    * Specifies an href attribute for the `IconButton`'s underlying html element.
    */
-  href: PropTypes.string
+  href?: string
+
+  /**
+   * Callback fired when the `Button` is clicked.
+   */
+  onClick?: (
+    event: React.KeyboardEvent<ViewProps> | React.MouseEvent<ViewProps>
+  ) => void
+}
+
+type PropKeys = keyof IconButtonOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type IconButtonProps = IconButtonOwnProps &
+  WithStyleProps<BaseButtonTheme, null> &
+  OtherHTMLAttributes<IconButtonOwnProps> &
+  ToProp
+
+const propTypes: PropValidators<PropKeys> = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  screenReaderLabel: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  elementRef: PropTypes.func,
+  as: PropTypes.elementType,
+  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
+  color: PropTypes.oneOf([
+    'primary',
+    'primary-inverse',
+    'secondary',
+    'success',
+    'danger'
+  ]),
+  focusColor: PropTypes.oneOf(['info', 'inverse']),
+  shape: PropTypes.oneOf(['rectangle', 'circle']),
+  withBackground: PropTypes.bool,
+  withBorder: PropTypes.bool,
+  margin: ThemeablePropTypes.spacing,
+  cursor: PropTypes.string,
+  href: PropTypes.string,
+  onClick: PropTypes.func
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -155,7 +181,8 @@ const allowedProps: AllowedPropKeys = [
   'size',
   'type',
   'withBackground',
-  'withBorder'
+  'withBorder',
+  'onClick'
 ]
 
 export type { IconButtonProps }