@instructure/ui-toggle-details 8.24.5 → 8.24.6-snapshot.9

package/src/ToggleDetails/index.tsx

@@ -22,8 +22,7 @@
  * SOFTWARE.
  */
 /** @jsx jsx */
-import { Component } from 'react'
-
+import React, { Component } from 'react'
 import { Button } from '@instructure/ui-buttons'
 import {
   IconArrowOpenEndSolid,
@@ -35,16 +34,17 @@ import { isActiveElement } from '@instructure/ui-dom-utils'
 import { testable } from '@instructure/ui-testable'
 
 import { withStyle, jsx } from '@instructure/emotion'
-
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import type { ToggleDetailsProps, ToggleDetailsStyleProps } from './props'
 import { allowedProps, propTypes } from './props'
+import type { ExpandableToggleProps } from '@instructure/ui-expandable'
 
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
@@ -61,21 +61,18 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
     iconExpanded: IconArrowOpenDownSolid,
     iconPosition: 'start',
     defaultExpanded: false,
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onToggle: function (event, expanded) {},
     children: null
   }
 
   ref: Element | null = null
+  _button: HTMLElement | null = null
 
   get focused() {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_button' does not exist on type 'ToggleD... Remove this comment to see the full error message
     return isActiveElement(this._button)
   }
 
   focus() {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_button' does not exist on type 'ToggleD... Remove this comment to see the full error message
-    this._button.focus()
+    this._button?.focus()
   }
 
   componentDidMount() {
@@ -86,11 +83,9 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
     this.props.makeStyles?.({ animate: true } as ToggleDetailsStyleProps)
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'el' implicitly has an 'any' type.
-  getButtonRef = (el) => (this._button = el)
+  getButtonRef = (el: Element | null) => (this._button = el as HTMLElement)
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'expanded' implicitly has an 'any' type.
-  renderSummary(expanded) {
+  renderSummary(expanded: boolean) {
     const { summary, iconPosition } = this.props
 
     return (
@@ -102,17 +97,18 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
     )
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'toggleProps' implicitly has an 'any' ty... Remove this comment to see the full error message
-  renderToggle(toggleProps, expanded) {
+  renderToggle(
+    toggleProps: ReturnType<ExpandableToggleProps>,
+    expanded: boolean
+  ) {
     const { variant } = this.props
 
     const props = {
       ...omitProps(this.props, ToggleDetails.allowedProps),
       ...toggleProps,
-      // @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
-      children: this.renderSummary()
-    }
-
+      children: this.renderSummary(expanded)
+      // spread operator makes toggleProps loose Record<string, any>>
+    } as Record<string, any>
     const summary = this.renderSummary(expanded)
 
     if (variant === 'filled') {
@@ -146,20 +142,17 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'expanded' implicitly has an 'any' type.
-  renderIcon(expanded) {
+  renderIcon(expanded: boolean) {
     const Icon = expanded ? this.props.iconExpanded : this.props.icon
 
-    return this.props.children ? (
+    return this.props.children && Icon ? (
       <span css={this.props.styles?.icon}>
-        {/* @ts-expect-error ts-migrate(2604) FIXME: JSX element type 'Icon' does not have any construc... Remove this comment to see the full error message */}
         <Icon />
       </span>
     ) : null
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'expanded' implicitly has an 'any' type.
-  renderDetails(expanded, detailsProps) {
+  renderDetails(expanded: boolean, detailsProps: { id: string }) {
     const { children } = this.props
     const expandedStyles = expanded ? { display: 'block' } : { display: 'none' }
     return (
@@ -173,10 +166,10 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
     return <div css={this.props.styles?.content}>{this.props.children}</div>
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleToggle = (event, expanded) => {
-    // @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.onToggle(event, expanded)
+  handleToggle = (event: React.MouseEvent, expanded: boolean) => {
+    if (typeof this.props.onToggle === 'function') {
+      this.props.onToggle(event, expanded)
+    }
     this.props.makeStyles?.({ animate: true })
   }
 

package/src/ToggleDetails/props.ts

@@ -36,15 +36,42 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type ToggleDetailsOwnProps = {
   variant?: 'default' | 'filled'
+  /**
+   * The summary that displays and can be interacted with
+   */
   summary: React.ReactNode
+  /**
+   * Whether the content is expanded or hidden
+   */
   expanded?: boolean // TODO: controllable(PropTypes.bool, 'onToggle', 'defaultExpanded')
+  /**
+   * Whether the content is initially expanded or hidden (uncontrolled)
+   */
   defaultExpanded?: boolean
-  onToggle?: (...args: any[]) => any
-  icon?: (...args: any[]) => any
-  iconExpanded?: (...args: any[]) => any
+  onToggle?: (event: React.MouseEvent, expanded: boolean) => void
+  /**
+   * The icon to display next to the summary text when content is hidden
+   */
+  icon?: (...args: any[]) => React.ReactElement
+  /**
+   * The icon to display when content is expanded
+   */
+  iconExpanded?: (...args: any[]) => React.ReactElement
+  /**
+   * Icon position at the start or end of the summary text
+   */
   iconPosition?: 'start' | 'end'
+  /**
+   * should the summary fill the width of its container
+   */
   fluidWidth?: boolean
+  /**
+   * Choose a size for the expand/collapse icon
+   */
   size?: 'small' | 'medium' | 'large'
+  /**
+   * The toggleable content passed inside the ToggleDetails component
+   */
   children?: React.ReactNode
 }
 
@@ -72,42 +99,15 @@ type ToggleDetailsStyleProps = {
 
 const propTypes: PropValidators<PropKeys> = {
   variant: PropTypes.oneOf(['default', 'filled']),
-  /**
-   * The summary that displays and can be interacted with
-   */
   summary: PropTypes.node.isRequired,
-  /**
-   * Whether the content is expanded or hidden
-   */
   expanded: controllable(PropTypes.bool, 'onToggle', 'defaultExpanded'),
-  /**
-   * Whether the content is initially expanded or hidden (uncontrolled)
-   */
   defaultExpanded: PropTypes.bool,
   onToggle: PropTypes.func,
-  /**
-   * The icon to display next to the summary text when content is hidden
-   */
   icon: PropTypes.func,
-  /**
-   * The icon to display when content is expanded
-   */
   iconExpanded: PropTypes.func,
-  /**
-   * Icon position at the start or end of the summary text
-   */
   iconPosition: PropTypes.oneOf(['start', 'end']),
-  /**
-   * should the summary fill the width of its container
-   */
   fluidWidth: PropTypes.bool,
-  /**
-   * The toggleable content passed inside the ToggleDetails component
-   */
   children: PropTypes.node,
-  /**
-   * Choose a size for the expand/collapse icon
-   */
   size: PropTypes.oneOf(['small', 'medium', 'large'])
 }
 

package/src/ToggleGroup/index.tsx

@@ -27,11 +27,13 @@ import React, { Component } from 'react'
 import {
   omitProps,
   pickProps,
-  getElementType
+  getElementType,
+  callRenderProp
 } from '@instructure/ui-react-utils'
 import { IconButton } from '@instructure/ui-buttons'
 import { Transition } from '@instructure/ui-motion'
 import { Expandable } from '@instructure/ui-expandable'
+import type { ExpandableToggleProps } from '@instructure/ui-expandable'
 import { isActiveElement } from '@instructure/ui-dom-utils'
 import { Flex } from '@instructure/ui-flex'
 import { View } from '@instructure/ui-view'
@@ -47,6 +49,7 @@ import { allowedProps, propTypes } from './props'
 ---
 category: components
 ---
+@tsProps
 **/
 @testable()
 class ToggleGroup extends Component<ToggleGroupProps> {
@@ -60,17 +63,13 @@ class ToggleGroup extends Component<ToggleGroupProps> {
     icon: IconArrowOpenEndSolid,
     iconExpanded: IconArrowOpenDownSolid,
     defaultExpanded: false,
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onToggle: function (event, expanded) {},
     transition: true,
     as: 'span',
-    // @ts-expect-error ts-migrate(6133) FIXME: 'el' is declared but its value is never read.
-    elementRef: (el) => {},
     border: true
   } as const
 
   ref: Element | null = null
-  _button: Element | null = null
+  _button: HTMLElement | null = null
   _shouldTransition = false
 
   handleRef = (el: Element | null) => {
@@ -84,7 +83,7 @@ class ToggleGroup extends Component<ToggleGroupProps> {
   }
 
   handleButtonRef = (el: Element | null) => {
-    this._button = el
+    this._button = el as HTMLElement
   }
 
   get focused() {
@@ -92,23 +91,22 @@ class ToggleGroup extends Component<ToggleGroupProps> {
   }
 
   focus() {
-    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-    this._button.focus()
+    this._button?.focus()
   }
 
   componentDidMount() {
     this._shouldTransition = true
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'expanded' implicitly has an 'any' type.
-  renderIcon(expanded) {
+  renderIcon(expanded: boolean) {
     const Icon = expanded ? this.props.iconExpanded : this.props.icon
-    // @ts-expect-error ts-migrate(2604) FIXME: JSX element type 'Icon' does not have any construc... Remove this comment to see the full error message
-    return <Icon />
+    return Icon ? callRenderProp(Icon) : null
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'toggleProps' implicitly has an 'any' ty... Remove this comment to see the full error message
-  renderToggle(toggleProps, expanded) {
+  renderToggle(
+    toggleProps: ReturnType<ExpandableToggleProps>,
+    expanded: boolean
+  ) {
     const { toggleLabel, size } = this.props
     let label
     if (typeof toggleLabel === 'function') {
@@ -116,9 +114,11 @@ class ToggleGroup extends Component<ToggleGroupProps> {
     } else {
       label = toggleLabel
     }
+
+    const props = { ...toggleProps } as Record<string, any>
     return (
       <IconButton
-        {...toggleProps}
+        {...props}
         withBackground={false}
         withBorder={false}
         size={size === 'large' ? 'medium' : 'small'}
@@ -130,8 +130,7 @@ class ToggleGroup extends Component<ToggleGroupProps> {
     )
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'detailsProps' implicitly has an 'any' t... Remove this comment to see the full error message
-  renderDetails(detailsProps) {
+  renderDetails(detailsProps: { id: string }) {
     return (
       <View
         {...detailsProps}

package/src/ToggleGroup/props.ts

@@ -34,78 +34,78 @@ import {
 } from '@instructure/shared-types'
 
 type ToggleGroupOwnProps = {
-  children: React.ReactNode
-  summary: React.ReactNode
-  toggleLabel: React.ReactNode | ((...args: any[]) => any)
-  as?: AsElementType
-  elementRef?: (element: Element | null) => void
-  size?: 'small' | 'medium' | 'large'
-  expanded?: any // TODO: controllable(PropTypes.bool, 'onToggle', 'defaultExpanded')
-  defaultExpanded?: boolean
-  onToggle?: (...args: any[]) => any
-  icon?: React.ReactNode | ((...args: any[]) => any)
-  iconExpanded?: React.ReactNode | ((...args: any[]) => any)
-  transition?: boolean
-  border?: boolean
-}
-
-type PropKeys = keyof ToggleGroupOwnProps
-
-type AllowedPropKeys = Readonly<Array<PropKeys>>
-
-type ToggleGroupProps = ToggleGroupOwnProps &
-  OtherHTMLAttributes<ToggleGroupOwnProps>
-
-const propTypes: PropValidators<PropKeys> = {
   /**
    * the content to show and hide
    */
-  children: PropTypes.node.isRequired,
+  children: React.ReactNode
   /**
    * the content area next to the toggle button
    */
-  summary: PropTypes.node.isRequired,
+  summary: React.ReactNode
   /**
    * provides a screenreader label for the toggle button
    * (takes `expanded` as an argument if a function)
    */
-  toggleLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  toggleLabel: React.ReactNode | ((expanded: boolean) => React.ReactNode)
   /**
    * the element type to render as
    */
-  as: PropTypes.elementType,
+  as?: AsElementType
   /**
    * provides a reference to the underlying html root element
    */
-  elementRef: PropTypes.func,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  elementRef?: (element: Element | null) => void
+  size?: 'small' | 'medium' | 'large'
   /**
    * Whether the content is expanded or hidden
    */
-  expanded: controllable(PropTypes.bool, 'onToggle', 'defaultExpanded'),
+  expanded?: boolean // TODO: controllable(PropTypes.bool, 'onToggle', 'defaultExpanded')
   /**
    * Whether the content is initially expanded or hidden (uncontrolled)
    */
-  defaultExpanded: PropTypes.bool,
+  defaultExpanded?: boolean
   /**
    * Fired when the content display is toggled
    */
-  onToggle: PropTypes.func,
+  onToggle?: (event: React.MouseEvent, expanded: boolean) => void
   /**
    * The icon displayed in the toggle button when the content is hidden
    */
-  icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  icon?: React.ReactNode | ((...args: any[]) => React.ReactElement)
   /**
    * The icon displayed in the toggle button when the content is showing
    */
-  iconExpanded: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  iconExpanded?: React.ReactNode | ((...args: any[]) => React.ReactElement)
   /**
    * Transition content into view
    */
-  transition: PropTypes.bool,
+  transition?: boolean
   /**
    * Toggle the border around the component
    */
+  border?: boolean
+}
+
+type PropKeys = keyof ToggleGroupOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type ToggleGroupProps = ToggleGroupOwnProps &
+  OtherHTMLAttributes<ToggleGroupOwnProps>
+
+const propTypes: PropValidators<PropKeys> = {
+  children: PropTypes.node.isRequired,
+  summary: PropTypes.node.isRequired,
+  toggleLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  as: PropTypes.elementType,
+  elementRef: PropTypes.func,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  expanded: controllable(PropTypes.bool, 'onToggle', 'defaultExpanded'),
+  defaultExpanded: PropTypes.bool,
+  onToggle: PropTypes.func,
+  icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  iconExpanded: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  transition: PropTypes.bool,
   border: PropTypes.bool
 }