@instructure/ui-tree-browser 8.14.1-snapshot.7 → 8.15.1-snapshot.2

package/src/TreeBrowser/TreeButton/props.ts

@@ -30,26 +30,27 @@ import type {
   PropValidators,
   TreeBrowserButtonTheme
 } from '@instructure/shared-types'
+import type { TreeBrowserCommonProps } from '../props'
 
 type TreeBrowserButtonOwnProps = {
   id?: string | number
   name?: string
   descriptor?: string
-  type?: string
-  size?: 'small' | 'medium' | 'large'
-  variant?: 'folderTree' | 'indent'
-  collectionIcon?: React.ReactNode | ((...args: any[]) => any)
-  collectionIconExpanded?: React.ReactNode | ((...args: any[]) => any)
-  itemIcon?: React.ReactNode | ((...args: any[]) => any)
+  type?: 'collection' | 'item' | string // | string is for custom type
   thumbnail?: string
-  onClick?: (...args: any[]) => any
+  /**
+   * Called when this button is clicked
+   */
+  onClick?: (e: React.MouseEvent) => void
   expanded?: boolean
   selected?: boolean
   focused?: boolean
   level?: number
-  containerRef?: (...args: any[]) => any // TODO: function () {}
-  renderContent?: (...args: any[]) => any // TODO: function () {}
-}
+  /**
+   * A function that returns a reference to the parent li element
+   */
+  containerRef?: (el: HTMLElement | null) => void
+} & TreeBrowserCommonProps
 
 type PropKeys = keyof TreeBrowserButtonOwnProps
 

package/src/TreeBrowser/TreeCollection/index.tsx

@@ -25,7 +25,7 @@
 /** @jsx jsx */
 /** @jsxFrag React.Fragment */
 // eslint-disable-next-line no-unused-vars
-import React, { Component } from 'react'
+import React, { Component, ReactElement, SyntheticEvent } from 'react'
 
 import { testable } from '@instructure/ui-testable'
 import { withStyle, jsx } from '@instructure/emotion'
@@ -35,19 +35,25 @@ import { TreeButton } from '../TreeButton'
 
 import generateStyles from './styles'
 import generateComponentTheme from './theme'
-import type { TreeBrowserCollectionProps } from './props'
+import type { TreeBrowserCollectionProps, TreeCollectionState } from './props'
 import { allowedProps, propTypes } from './props'
+import { CollectionItem, CollectionProps, CollectionData } from '../props'
+
+type AriaSelectedType = { 'aria-selected'?: boolean }
 
 /**
 ---
 parent: TreeBrowser
 id: TreeBrowser.Collection
 ---
+@tsProps
 **/
-
 @withStyle(generateStyles, generateComponentTheme)
 @testable()
-class TreeCollection extends Component<TreeBrowserCollectionProps> {
+class TreeCollection extends Component<
+  TreeBrowserCollectionProps,
+  TreeCollectionState
+> {
   static readonly componentId = 'TreeBrowser.Collection'
 
   static allowedProps = allowedProps
@@ -60,34 +66,15 @@ class TreeCollection extends Component<TreeBrowserCollectionProps> {
     selection: '',
     size: 'medium',
     variant: 'folderTree',
-    onItemClick: function () {},
-    onCollectionClick: function () {},
-    onKeyDown: function () {},
-    id: undefined,
-    name: undefined,
-    descriptor: undefined,
-    collectionIconExpanded: undefined,
-    collectionIcon: undefined,
-    itemIcon: undefined,
-    // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-    getItemProps: (props) => props,
-    // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-    getCollectionProps: (props) => props,
-    numChildren: undefined,
-    level: undefined,
-    position: undefined,
-    renderBeforeItems: null,
-    renderAfterItems: null,
-    containerRef: function () {},
-    isCollectionFlattened: false,
-    renderContent: undefined
+    getItemProps: (props: unknown) => props,
+    getCollectionProps: (props: unknown) => props,
+    isCollectionFlattened: false
   }
+
   ref: Element | null = null
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-  constructor(props) {
+  constructor(props: TreeBrowserCollectionProps) {
     super(props)
-
     this.state = { focused: '' }
   }
 
@@ -100,45 +87,38 @@ class TreeCollection extends Component<TreeBrowserCollectionProps> {
 
   get itemsLevel() {
     const { level, isCollectionFlattened } = this.props
-    // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
     return isCollectionFlattened ? level : level + 1
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'e' implicitly has an 'any' type.
-  handleFocus = (e, item) => {
+  handleFocus = (e: SyntheticEvent, item: CollectionData) => {
     e.stopPropagation()
     this.setState({ focused: `${item.type}_${item.id}` })
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'e' implicitly has an 'any' type.
-  handleBlur = (e, item) => {
+  handleBlur = (e: SyntheticEvent, _item: CollectionData) => {
     e.stopPropagation()
     this.setState({ focused: '' })
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'e' implicitly has an 'any' type.
-  handleCollectionClick = (e) => {
+  handleCollectionClick = (e: React.MouseEvent) => {
     const { id, onCollectionClick, expanded } = this.props
     const collection = {
       id,
       expanded: !expanded,
-      type: 'collection'
+      type: 'collection' as const
     }
-
     if (onCollectionClick && typeof onCollectionClick === 'function') {
       onCollectionClick(e, collection)
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'e' implicitly has an 'any' type.
-  handleCollectionKeyDown = (e) => {
+  handleCollectionKeyDown = (e: React.KeyboardEvent) => {
     const { id, onKeyDown, expanded } = this.props
     const collection = {
       id,
       expanded: !expanded,
-      type: 'collection'
+      type: 'collection' as const
     }
-
     if (onKeyDown && typeof onKeyDown === 'function') {
       onKeyDown(e, collection)
     }
@@ -164,13 +144,8 @@ class TreeCollection extends Component<TreeBrowserCollectionProps> {
   }
 
   renderChildren() {
-    const {
-      collections,
-      items,
-      id,
-      renderBeforeItems,
-      renderAfterItems
-    } = this.props
+    const { collections, items, id, renderBeforeItems, renderAfterItems } =
+      this.props
 
     let position = 1
     return (
@@ -182,12 +157,10 @@ class TreeCollection extends Component<TreeBrowserCollectionProps> {
             position++,
             'before'
           )}
-        {/* @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'. */}
-        {collections.map((collection) => {
+        {collections!.map((collection) => {
           return this.renderCollectionNode(collection, position++)
         })}
-        {/* @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'. */}
-        {items.map((item) => {
+        {items!.map((item) => {
           return this.renderItemNode(item, position++)
         })}
         {renderAfterItems &&
@@ -201,23 +174,24 @@ class TreeCollection extends Component<TreeBrowserCollectionProps> {
     )
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'collectionId' implicitly has an 'any' t... Remove this comment to see the full error message
-  renderCollectionChildren(collectionId, child, position, keyword) {
+  renderCollectionChildren(
+    collectionId: string | number | undefined,
+    child: ReactElement,
+    position: number,
+    keyword: 'before' | 'after'
+  ) {
     const { selection, onKeyDown, getItemProps, styles } = this.props
     const key = `${collectionId}_${keyword}`
-    const ariaSelected = {}
+    const ariaSelected: AriaSelectedType = {}
     if (selection) {
-      // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
       ariaSelected['aria-selected'] = selection === `child_${key}`
     }
 
-    const itemHash = { id: key, type: 'child' }
+    const itemHash: CollectionData = { id: key, type: 'child' }
 
-    // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
-    const itemProps = getItemProps({
+    const itemProps = getItemProps!({
       key: key,
       selected: selection === `child_${key}`,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'focused' does not exist on type 'Readonl... Remove this comment to see the full error message
       focused: this.state.focused === `child_${key}`,
       level: this.itemsLevel
     })
@@ -227,8 +201,7 @@ class TreeCollection extends Component<TreeBrowserCollectionProps> {
         id={key}
         role="treeitem"
         css={styles?.item}
-        // @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'number | ... Remove this comment to see the full error message
-        tabIndex="-1"
+        tabIndex={-1}
         key={key}
         aria-posinset={position}
         aria-setsize={this.childCount}
@@ -242,27 +215,23 @@ class TreeCollection extends Component<TreeBrowserCollectionProps> {
             e.stopPropagation()
           }
         }}
-        // @ts-expect-error ts-migrate(2322) FIXME: Type '(e: any, n: any) => void' is not assignable ... Remove this comment to see the full error message
-        onFocus={(e, n) => this.handleFocus(e, itemHash)}
+        onFocus={(e) => this.handleFocus(e, itemHash)}
         // @ts-expect-error ts-migrate(2322) FIXME: Type '(e: any, n: any) => void' is not assignable ... Remove this comment to see the full error message
         onKeyDown={(e, n) => {
           if (typeof child.props.onKeyDown === 'function') {
             child.props.onKeyDown(e, n)
           } else {
-            // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-            onKeyDown(e, itemHash)
+            onKeyDown?.(e, itemHash)
           }
         }}
-        // @ts-expect-error ts-migrate(2322) FIXME: Type '(e: any, n: any) => void' is not assignable ... Remove this comment to see the full error message
-        onBlur={(e, n) => this.handleBlur(e, itemHash)}
+        onBlur={(e) => this.handleBlur(e, itemHash)}
       >
         {safeCloneElement(child, itemProps)}
       </li>
     )
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'collection' implicitly has an 'any' typ... Remove this comment to see the full error message
-  renderCollectionNode(collection, position) {
+  renderCollectionNode(collection: CollectionProps, position: number) {
     return (
       <TreeCollection
         {...this.props}
@@ -284,57 +253,43 @@ class TreeCollection extends Component<TreeBrowserCollectionProps> {
     )
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'item' implicitly has an 'any' type.
-  renderItemNode(item, position) {
-    const {
-      selection,
-      onItemClick,
-      onKeyDown,
-      getItemProps,
-      styles
-    } = this.props
+  renderItemNode(item: CollectionItem, position: number) {
+    const { selection, onItemClick, onKeyDown, getItemProps, styles } =
+      this.props
 
-    const ariaSelected = {}
+    const ariaSelected: AriaSelectedType = {}
 
     if (selection) {
-      // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
       ariaSelected['aria-selected'] = selection === `item_${item.id}`
     }
 
-    const itemHash = { id: item.id, type: 'item' }
+    const itemHash: CollectionData = { id: item.id, type: 'item' }
 
-    // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
-    const itemProps = getItemProps({
+    const itemProps = getItemProps!({
       ...this.getCommonButtonProps(),
       id: item.id,
       name: item.name,
       descriptor: item.descriptor,
       thumbnail: item.thumbnail,
       selected: selection === `item_${item.id}`,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'focused' does not exist on type 'Readonl... Remove this comment to see the full error message
       focused: this.state.focused === `item_${item.id}`,
-      type: 'item'
+      type: 'item' as const
     })
 
     return (
       <li
         key={`i${position}`}
-        // @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'number | ... Remove this comment to see the full error message
-        tabIndex="-1"
+        tabIndex={-1}
         role="treeitem"
         aria-label={item.name}
         css={styles?.item}
         aria-level={this.itemsLevel}
         aria-posinset={position}
         aria-setsize={this.childCount}
-        // @ts-expect-error ts-migrate(2322) FIXME: Type '(e: any, n: any) => any' is not assignable t... Remove this comment to see the full error message
-        onClick={(e, n) => onItemClick(e, itemHash)}
-        // @ts-expect-error ts-migrate(2322) FIXME: Type '(e: any, n: any) => any' is not assignable t... Remove this comment to see the full error message
-        onKeyDown={(e, n) => onKeyDown(e, itemHash)}
-        // @ts-expect-error ts-migrate(2322) FIXME: Type '(e: any, n: any) => void' is not assignable ... Remove this comment to see the full error message
-        onFocus={(e, n) => this.handleFocus(e, itemHash)}
-        // @ts-expect-error ts-migrate(2322) FIXME: Type '(e: any, n: any) => void' is not assignable ... Remove this comment to see the full error message
-        onBlur={(e, n) => this.handleBlur(e, itemHash)}
+        onClick={(e) => onItemClick?.(e, itemHash)}
+        onKeyDown={(e) => onKeyDown?.(e, itemHash)}
+        onFocus={(e) => this.handleFocus(e, itemHash)}
+        onBlur={(e) => this.handleBlur(e, itemHash)}
         {...ariaSelected}
       >
         <TreeButton {...itemProps} />
@@ -369,23 +324,20 @@ class TreeCollection extends Component<TreeBrowserCollectionProps> {
       styles
     } = this.props
 
-    // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
-    const collectionProps = getCollectionProps({
+    const collectionProps = getCollectionProps!({
       ...this.getCommonButtonProps(),
       expanded: expanded,
       collectionIcon: collectionIcon,
       collectionIconExpanded: collectionIconExpanded,
-      type: 'collection',
+      type: 'collection' as const,
       containerRef: this.props.containerRef,
       selected: this.props.selection === `collection_${id}`,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'focused' does not exist on type 'Readonl... Remove this comment to see the full error message
       focused: this.state.focused === `collection_${id}`,
       level
     })
 
-    const ariaSelected = {}
+    const ariaSelected: AriaSelectedType = {}
     if (this.props.selection)
-      // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
       ariaSelected['aria-selected'] =
         this.props.selection === `collection_${id}`
 
@@ -397,8 +349,7 @@ class TreeCollection extends Component<TreeBrowserCollectionProps> {
           this.ref = el
         }}
         css={styles?.treeCollection}
-        // @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'number | ... Remove this comment to see the full error message
-        tabIndex="-1"
+        tabIndex={-1}
         role="treeitem"
         aria-label={this.props.name}
         aria-level={level}
@@ -407,10 +358,8 @@ class TreeCollection extends Component<TreeBrowserCollectionProps> {
         aria-expanded={expanded}
         onClick={this.handleCollectionClick}
         onKeyDown={this.handleCollectionKeyDown}
-        // @ts-expect-error ts-migrate(2322) FIXME: Type '(e: any, n: any) => void' is not assignable ... Remove this comment to see the full error message
-        onFocus={(e, n) => this.handleFocus(e, { id: id, type: 'collection' })}
-        // @ts-expect-error ts-migrate(2322) FIXME: Type '(e: any, n: any) => void' is not assignable ... Remove this comment to see the full error message
-        onBlur={(e, n) => this.handleBlur(e, { id: id, type: 'collection' })}
+        onFocus={(e) => this.handleFocus(e, { id: id, type: 'collection' })}
+        onBlur={(e) => this.handleBlur(e, { id: id, type: 'collection' })}
         {...ariaSelected}
       >
         <TreeButton {...collectionProps} />

package/src/TreeBrowser/TreeCollection/props.ts

@@ -28,40 +28,25 @@ import PropTypes from 'prop-types'
 import { Children } from '@instructure/ui-prop-types'
 
 import { TreeNode } from '../TreeNode'
+import type { CollectionData } from '../props'
 
 import type {
   PropValidators,
   TreeBrowserCollectionTheme
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import { CollectionProps, TreeBrowserBaseProps } from '../props'
 
 type TreeBrowserCollectionOwnProps = {
-  id?: string | number
-  name?: string
-  descriptor?: string
-  items?: any[]
-  collections?: any[]
-  expanded?: boolean
-  selection?: string
-  size?: 'small' | 'medium' | 'large'
-  variant?: 'folderTree' | 'indent'
-  collectionIcon?: React.ReactNode | ((...args: any[]) => any)
-  collectionIconExpanded?: React.ReactNode | ((...args: any[]) => any)
-  itemIcon?: React.ReactNode | ((...args: any[]) => any)
-  getItemProps?: (...args: any[]) => any
-  getCollectionProps?: (...args: any[]) => any
-  onItemClick?: (...args: any[]) => any
-  onCollectionClick?: (...args: any[]) => any
-  onKeyDown?: (...args: any[]) => any
+  level: number
+  onKeyDown?: (e: React.KeyboardEvent, data: CollectionData) => void
+  // TODO it would be nice to use the same handler as in TreeBrowser
+  onItemClick?: (e: React.MouseEvent, data: CollectionData) => void
   numChildren?: number
-  level?: number
   position?: number
-  renderBeforeItems?: any // TODO: Children.oneOf([TreeNode])
-  renderAfterItems?: any // TODO: Children.oneOf([TreeNode])
-  containerRef?: (...args: any[]) => any
-  isCollectionFlattened?: boolean
-  renderContent?: (...args: any[]) => any
-}
+  selection?: string
+} & CollectionProps &
+  TreeBrowserBaseProps
 
 type PropKeys = keyof TreeBrowserCollectionOwnProps
 
@@ -93,15 +78,9 @@ const propTypes: PropValidators<PropKeys> = {
   onCollectionClick: PropTypes.func,
   onKeyDown: PropTypes.func,
   numChildren: PropTypes.number,
-  level: PropTypes.number,
+  level: PropTypes.number.isRequired,
   position: PropTypes.number,
-  /**
-   * children of type TreeNode
-   */
   renderBeforeItems: Children.oneOf([TreeNode]),
-  /**
-   * children of type TreeNode
-   */
   renderAfterItems: Children.oneOf([TreeNode]),
   containerRef: PropTypes.func,
   isCollectionFlattened: PropTypes.bool,
@@ -136,5 +115,11 @@ const allowedProps: AllowedPropKeys = [
   'renderContent'
 ]
 
-export type { TreeBrowserCollectionProps, TreeBrowserCollectionStyle }
+type TreeCollectionState = { focused: string }
+
+export type {
+  TreeBrowserCollectionProps,
+  TreeBrowserCollectionStyle,
+  TreeCollectionState
+}
 export { propTypes, allowedProps }

package/src/TreeBrowser/TreeNode/index.tsx

@@ -36,17 +36,17 @@ import generateComponentTheme from '../TreeButton/theme'
 import type { TreeBrowserNodeProps } from './props'
 import { allowedProps, propTypes } from './props'
 
+// Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
+
 /**
 ---
 parent: TreeBrowser
 id: TreeBrowser.Node
 ---
+@tsProps
 A helper class used to render the :renderBeforeItems and :renderAfterItems
 in the TreeBrowser.
 **/
-
-// Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
-
 @withStyle(generateStyles, generateComponentTheme)
 @testable()
 class TreeNode extends Component<TreeBrowserNodeProps> {
@@ -56,19 +56,10 @@ class TreeNode extends Component<TreeBrowserNodeProps> {
   static propTypes = propTypes
 
   static defaultProps = {
-    id: undefined,
     size: 'medium',
     variant: 'folderTree',
     selected: false,
-    focused: false,
-    children: undefined,
-    itemIcon: undefined,
-    thumbnail: undefined,
-    level: undefined,
-    containerRef: function () {},
-    parentRef: undefined,
-    onKeyDown: undefined,
-    onClick: undefined
+    focused: false
   }
 
   ref: Element | null = null
@@ -76,21 +67,20 @@ class TreeNode extends Component<TreeBrowserNodeProps> {
   componentDidMount() {
     this.props.makeStyles?.()
   }
+
   componentDidUpdate() {
     this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'el' implicitly has an 'any' type.
-  handleRef = (el) => {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    el && this.props.containerRef(el.parentElement)
+  handleRef = (el: HTMLDivElement) => {
+    if (el && typeof this.props.containerRef === 'function') {
+      this.props.containerRef(el.parentElement)
+    }
     this.ref = el
   }
 
-  // @ts-expect-error ts-migrate(7030) FIXME: Not all code paths return a value.
   renderItemImage() {
     const { thumbnail, itemIcon, styles } = this.props
-
     if (thumbnail) {
       return (
         <div css={styles?.thumbnail}>
@@ -98,15 +88,14 @@ class TreeNode extends Component<TreeBrowserNodeProps> {
         </div>
       )
     }
-
     if (itemIcon) {
       return <div css={styles?.icon}>{callRenderProp(itemIcon)}</div>
     }
+    return undefined
   }
 
   render() {
     const { children, styles } = this.props
-
     return (
       <div ref={this.handleRef} tabIndex={-1} css={styles?.treeButton}>
         <span css={styles?.layout}>

package/src/TreeBrowser/TreeNode/props.ts

@@ -35,6 +35,7 @@ import type {
   TreeBrowserButtonProps,
   TreeBrowserButtonStyle
 } from '../TreeButton/props'
+import { CollectionData } from '../props'
 
 type TreeBrowserNodeOwnProps = Pick<
   TreeBrowserButtonProps,
@@ -49,7 +50,10 @@ type TreeBrowserNodeOwnProps = Pick<
   | 'containerRef'
   | 'onClick'
 > & {
-  onKeyDown?: (...args: any[]) => any
+  onKeyDown?: (e: React.KeyboardEvent, data: CollectionData) => void
+  /**
+   * The children to be rendered within the `<TreeNode />`
+   */
   children?: React.ReactNode
 }
 
@@ -69,13 +73,7 @@ const propTypes: PropValidators<PropKeys> = {
   itemIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   thumbnail: PropTypes.string,
   level: PropTypes.number,
-  /**
-   * The children to be rendered within the `<TreeNode />`
-   */
   children: PropTypes.node,
-  /**
-   * A function that returns a reference to the parent li element
-   */
   containerRef: PropTypes.func,
   onKeyDown: PropTypes.func,
   onClick: PropTypes.func