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

package/src/ToggleButton/index.tsx

@@ -32,16 +32,17 @@ import { Tooltip } from '@instructure/ui-tooltip'
 import { IconButton } from '../IconButton'
 
 import { propTypes, allowedProps } from './props'
-import type { ToggleButtonProps } from './props'
+import type { ToggleButtonProps, ToggleButtonState } from './props'
 
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 
 @testable()
-class ToggleButton extends Component<ToggleButtonProps> {
+class ToggleButton extends Component<ToggleButtonProps, ToggleButtonState> {
   static readonly componentId = 'ToggleButton'
 
   static propTypes = propTypes
@@ -50,18 +51,14 @@ class ToggleButton extends Component<ToggleButtonProps> {
     size: 'medium',
     as: 'button',
     // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-    // @ts-expect-error ts-migrate(6133) FIXME: 'el' is declared but its value is never read.
-    elementRef: (el) => {},
-    renderIcon: () => {},
-    onClick: () => {},
+    interaction: undefined,
     mountNode: null,
     color: 'secondary',
     placement: 'top center',
     constrain: 'window'
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-  constructor(props) {
+  constructor(props: ToggleButtonProps) {
     super(props)
 
     this.state = {
@@ -83,8 +80,7 @@ class ToggleButton extends Component<ToggleButtonProps> {
 
   get isShowingTooltip() {
     return typeof this.props.isShowingTooltip === 'undefined'
-      ? // @ts-expect-error ts-migrate(2339) FIXME: Property 'isShowingTooltip' does not exist on type... Remove this comment to see the full error message
-        this.state.isShowingTooltip
+      ? this.state.isShowingTooltip
       : this.props.isShowingTooltip
   }
 
@@ -112,12 +108,10 @@ class ToggleButton extends Component<ToggleButtonProps> {
         placement={placement}
         color={color === 'primary-inverse' ? 'primary-inverse' : 'primary'}
         isShowingContent={this.isShowingTooltip}
-        // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-        onShowContent={(event) => {
+        onShowContent={() => {
           this.setState({ isShowingTooltip: true })
         }}
-        // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-        onHideContent={(event) => {
+        onHideContent={() => {
           this.setState({ isShowingTooltip: false })
         }}
         mountNode={mountNode}
@@ -127,7 +121,6 @@ class ToggleButton extends Component<ToggleButtonProps> {
           screenReaderLabel={screenReaderLabel}
           withBackground={false}
           withBorder={false}
-          // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
           color={color}
           size={size}
           elementRef={this.handleRef}

package/src/ToggleButton/props.ts

@@ -37,90 +37,116 @@ import type {
   PositionConstraint,
   PositionMountNode
 } from '@instructure/ui-position'
+import type { ViewProps } from '@instructure/ui-view'
 
 type ToggleButtonOwnProps = {
-  screenReaderLabel: string
-  renderTooltipContent: React.ReactNode | ((...args: any[]) => any)
-  renderIcon: React.ReactNode | ((...args: any[]) => any)
-  status: 'pressed' | 'unpressed'
-  as?: AsElementType
-  interaction?: 'enabled' | 'disabled' | 'readonly'
-  size?: 'small' | 'medium' | 'large'
-  elementRef?: (element: Element | null) => void
-  onClick?: (...args: any[]) => any
-  color?: string
-  isShowingTooltip?: boolean
-  mountNode?: PositionMountNode
-  placement?: PlacementPropValues
-  constrain?: PositionConstraint
-}
-
-type PropKeys = keyof ToggleButtonOwnProps
-
-type AllowedPropKeys = Readonly<Array<PropKeys>>
-
-type ToggleButtonProps = ToggleButtonOwnProps &
-  OtherHTMLAttributes<ToggleButtonOwnProps>
-
-const propTypes: PropValidators<PropKeys> = {
   /**
    * Text to output only to screen readers
    */
-  screenReaderLabel: PropTypes.string.isRequired,
+  screenReaderLabel: string
+
   /**
    * Text to render in the tooltip shown on hover/focus
    */
-  renderTooltipContent: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
-    .isRequired,
+  renderTooltipContent: React.ReactNode | ((...args: any[]) => any)
+
   /**
    * An icon or function that returns an icon
    */
-  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  renderIcon: React.ReactNode | (() => React.ReactNode)
+
   /**
    * Toggles the `aria-pressed` attribute on the button (`true` if `pressed`; `false` if `unpressed`)
    */
-  status: PropTypes.oneOf(['pressed', 'unpressed']).isRequired,
+  status: 'pressed' | 'unpressed'
+
   /**
    * The element to render as the component root; `button` by default
    */
-  as: PropTypes.elementType,
+  as?: AsElementType
+
   /**
    * Specifies if interaction with `ToggleButton` is `enabled`, `disabled`, or `readonly`
    */
-  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
+  interaction?: 'enabled' | 'disabled' | 'readonly'
+
   /**
    * The size of the `ToggleButton`
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size?: 'small' | 'medium' | 'large'
+
   /**
    * Provides a reference to `ToggleButton`'s underlying HTML element
    */
-  elementRef: PropTypes.func,
+  elementRef?: (element: Element | null) => void
+
   /**
    * Callback fired when the `ToggleButton` is clicked
    */
-  onClick: PropTypes.func,
+  onClick?: (
+    event: React.KeyboardEvent<ViewProps> | React.MouseEvent<ViewProps>
+  ) => void
+
   /**
    * The color in which to display the icon
    */
-  color: PropTypes.string,
+  color?: 'primary' | 'primary-inverse' | 'secondary' | 'success' | 'danger'
+
   /**
    * By default, the tooltip will show on hover/focus. Use this prop if you need to override that behavior.
    */
-  isShowingTooltip: PropTypes.bool,
+  isShowingTooltip?: boolean
+
   /**
    * An element or a function returning an element to use as the mount node
    */
-  mountNode: PositionPropTypes.mountNode,
+  mountNode?: PositionMountNode
+
   /**
    * The placement of the tooltip in relation to the button
    */
-  placement: PositionPropTypes.placement,
+  placement?: PlacementPropValues
+
   /**
    * The parent in which to constrain the tooltip.
    * One of: 'window', 'scroll-parent', 'parent', 'none', an element,
    * or a function returning an element.
    */
+  constrain?: PositionConstraint
+}
+
+type PropKeys = keyof ToggleButtonOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type ToggleButtonProps = ToggleButtonOwnProps &
+  OtherHTMLAttributes<ToggleButtonOwnProps>
+
+type ToggleButtonState = {
+  isShowingTooltip: boolean
+}
+
+const propTypes: PropValidators<PropKeys> = {
+  screenReaderLabel: PropTypes.string.isRequired,
+  renderTooltipContent: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+    .isRequired,
+  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  status: PropTypes.oneOf(['pressed', 'unpressed']).isRequired,
+  as: PropTypes.elementType,
+  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  elementRef: PropTypes.func,
+  onClick: PropTypes.func,
+  color: PropTypes.oneOf([
+    'primary',
+    'primary-inverse',
+    'secondary',
+    'success',
+    'danger'
+  ]),
+  isShowingTooltip: PropTypes.bool,
+  mountNode: PositionPropTypes.mountNode,
+  placement: PositionPropTypes.placement,
   constrain: PositionPropTypes.constrain
 }
 
@@ -141,5 +167,5 @@ const allowedProps: AllowedPropKeys = [
   'status'
 ]
 
-export type { ToggleButtonProps }
+export type { ToggleButtonProps, ToggleButtonState }
 export { propTypes, allowedProps }

package/tsconfig.build.json

@@ -1,7 +1,30 @@
 {
   "extends": "../../tsconfig.build.json",
   "compilerOptions": {
-    "outDir": "./types"
+    "outDir": "./types",
+    "composite": true,
+    "rootDir": "./src"
   },
-  "include": ["src/**/*"]
+  "include": ["src"],
+  "references": [
+    { "path": "../ui-babel-preset/tsconfig.build.json" },
+    { "path": "../ui-test-locator/tsconfig.build.json" },
+    { "path": "../ui-test-queries/tsconfig.build.json" },
+    { "path": "../ui-test-utils/tsconfig.build.json" },
+    { "path": "../ui-themes/tsconfig.build.json" },
+    { "path": "../console/tsconfig.build.json" },
+    { "path": "../emotion/tsconfig.build.json" },
+    { "path": "../shared-types/tsconfig.build.json" },
+    { "path": "../ui-a11y-content/tsconfig.build.json" },
+    { "path": "../ui-a11y-utils/tsconfig.build.json" },
+    { "path": "../ui-color-utils/tsconfig.build.json" },
+    { "path": "../ui-dom-utils/tsconfig.build.json" },
+    { "path": "../ui-icons/tsconfig.build.json" },
+    { "path": "../ui-position/tsconfig.build.json" },
+    { "path": "../ui-react-utils/tsconfig.build.json" },
+    { "path": "../ui-testable/tsconfig.build.json" },
+    { "path": "../ui-tooltip/tsconfig.build.json" },
+    { "path": "../ui-utils/tsconfig.build.json" },
+    { "path": "../ui-view/tsconfig.build.json" }
+  ]
 }