@instructure/ui-editable 8.25.1-snapshot.0 → 8.26.0

package/src/Editable/index.tsx

@@ -21,20 +21,26 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { Component } from 'react'
+import React, { Component } from 'react'
 
 import { deepEqual } from '@instructure/ui-utils'
 import { logWarn as warn } from '@instructure/console'
 import { requestAnimationFrame } from '@instructure/ui-dom-utils'
 
-import { propTypes, allowedProps } from './props'
-import type { EditableProps } from './props'
+import { propTypes, allowedProps, EditableState } from './props'
+import type {
+  EditableProps,
+  GetContainerProps,
+  GetEditButtonProps,
+  GetEditorProps,
+  GetViewerProps
+} from './props'
 
 /**
 ---
 category: components
-experimental: true
 ---
+@tsProps
 **/
 class Editable extends Component<EditableProps> {
   static propTypes = propTypes
@@ -44,16 +50,15 @@ class Editable extends Component<EditableProps> {
     children: null
   }
 
-  state = {
+  state: EditableState = {
     showModeToggle: false,
     valueOnEdit: null // the value when mode flips from view -> edit
   }
 
-  _editorRef = null
-  _editButtonRef = null
+  _editorRef: HTMLInputElement | null = null
+  _editButtonRef: HTMLButtonElement | null = null
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-  constructor(props) {
+  constructor(props: EditableProps) {
     super(props)
 
     warn(
@@ -67,10 +72,8 @@ class Editable extends Component<EditableProps> {
       this.focusEditor()
     }
   }
-  componentWillUnmount() {}
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'prevProps' implicitly has an 'any' type... Remove this comment to see the full error message
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: EditableProps) {
     const { mode, value, onChange } = this.props
 
     // on the switch from view -> edit
@@ -81,7 +84,6 @@ class Editable extends Component<EditableProps> {
 
     // on the switch from edit to view
     if (prevProps.mode === 'edit' && mode !== 'edit') {
-      // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
       this._editButtonRef && this._editButtonRef.focus()
       if (onChange && !deepEqual(this.state.valueOnEdit, value)) {
         onChange(value)
@@ -95,7 +97,6 @@ class Editable extends Component<EditableProps> {
       '[Editable] Did you forget to connect editorRef to your editor component?'
     )
     if (this._editorRef) {
-      // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
       this._editorRef.focus()
     }
   }
@@ -116,15 +117,13 @@ class Editable extends Component<EditableProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleEditESC = (event) => {
+  handleEditESC = (event: React.KeyboardEvent) => {
     if (event.key === 'Escape') {
       this.enterView()
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleViewMouseOver = (event) => {
+  handleViewMouseOver = (event: React.MouseEvent) => {
     if (this.props.mode === 'view') {
       // because the mouse event handlers are on the container, not the view
       event.stopPropagation()
@@ -132,8 +131,7 @@ class Editable extends Component<EditableProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleViewMouseOut = (event) => {
+  handleViewMouseOut = (event: React.MouseEvent) => {
     if (this.props.mode === 'view') {
       event.stopPropagation()
       this.setState({
@@ -142,8 +140,7 @@ class Editable extends Component<EditableProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleViewClick = (event) => {
+  handleViewClick = (event: React.MouseEvent) => {
     if (event.buttons === 1) {
       requestAnimationFrame(() => {
         this.enterEdit()
@@ -151,23 +148,19 @@ class Editable extends Component<EditableProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-  handleEditBlur = (event) => {
+  handleEditBlur = () => {
     this.enterView()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-  handleEditButtonFocus = (event) => {
+  handleEditButtonFocus = () => {
     this.setState({ showModeToggle: true })
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-  handleEditButtonBlur = (event) => {
+  handleEditButtonBlur = () => {
     this.setState({ showModeToggle: false })
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-  handleEditButtonClick = (event) => {
+  handleEditButtonClick = () => {
     this.enterEdit()
   }
 
@@ -184,20 +177,20 @@ class Editable extends Component<EditableProps> {
   }
 
   // ------- prop getters ------
-  getContainerProps = (props = {}) => {
+  getContainerProps: GetContainerProps = (props = {}) => {
     const { mode, readOnly } = this.props
     return {
       onMouseOver: this.handleViewMouseOver,
       onMouseOut: this.handleViewMouseOut,
-      onMouseDown: mode !== 'edit' ? this.handleViewClick : null,
-      onKeyUp: mode === 'edit' ? this.handleEditESC : null,
+      onMouseDown: mode !== 'edit' ? this.handleViewClick : undefined,
+      onKeyUp: mode === 'edit' ? this.handleEditESC : undefined,
       readOnly,
       ...props,
       ref: this.handleContainerRef
     }
   }
 
-  getViewerProps = (props = {}) => {
+  getViewerProps: GetViewerProps = (props = {}) => {
     return {
       mode: this.props.mode,
       readOnly: this.props.readOnly,
@@ -205,29 +198,26 @@ class Editable extends Component<EditableProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-  getEditorProps = (props) => {
+  getEditorProps: GetEditorProps = (props = {}) => {
     return {
       mode: this.props.mode,
       onBlur: this.handleEditBlur,
-      // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'el' implicitly has an 'any' type.
-      editorRef: (el) => {
-        this._editorRef = el
+      editorRef: (el: HTMLElement | null) => {
+        this._editorRef = el as HTMLInputElement
       },
       readOnly: this.props.readOnly,
       ...props
     }
   }
 
-  getEditButtonProps = (props = {}) => {
+  getEditButtonProps: GetEditButtonProps = (props = {}) => {
     return {
       onClick: this.handleEditButtonClick,
       onFocus: this.handleEditButtonFocus,
       onBlur: this.handleEditButtonBlur,
       isVisible: this.state.showModeToggle,
-      // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'el' implicitly has an 'any' type.
-      buttonRef: (el) => {
-        this._editButtonRef = el
+      buttonRef: (el: Element) => {
+        this._editButtonRef = el as HTMLButtonElement
       },
       readOnly: this.props.readOnly,
       ...props

package/src/Editable/props.ts

@@ -21,71 +21,106 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import type { PropValidators } from '@instructure/shared-types'
 
-type EditableOwnProps = {
+type GetContainerProps = (props?: Record<string, any>) => {
+  ref: React.RefCallback<any>
+  onMouseOver: (event: React.MouseEvent) => void
+  onMouseOut: (event: React.MouseEvent) => void
+  onMouseDown?: (event: React.MouseEvent) => void
+  onKeyUp?: (event: React.KeyboardEvent) => void
+  readOnly?: boolean
+} & Record<string, any>
+
+type GetViewerProps = (props?: Record<string, any>) => {
   mode: 'view' | 'edit'
-  onChangeMode: (...args: any[]) => any
-  children?: (...args: any[]) => any
-  render?: (...args: any[]) => any
-  value?: any
-  onChange?: (...args: any[]) => any
   readOnly?: boolean
-  elementRef?: (element: Element | null) => void
-}
+} & Record<string, any>
 
-type PropKeys = keyof EditableOwnProps
+type GetEditorProps = (props?: Record<string, any>) => {
+  mode: 'view' | 'edit'
+  onBlur: () => void
+  editorRef: (el: HTMLElement | null) => void
+  readOnly?: boolean
+} & Record<string, any>
 
-type AllowedPropKeys = Readonly<Array<PropKeys>>
+type GetEditButtonProps = (props?: Record<string, any>) => {
+  onClick: () => void
+  onFocus: () => void
+  onBlur: () => void
+  isVisible: boolean
+  buttonRef: (el: Element) => void
+  readOnly?: boolean
+} & Record<string, any>
 
-type EditableProps = EditableOwnProps
+type EditableRenderProps = {
+  mode: string
+  getContainerProps: GetContainerProps
+  getViewerProps: GetViewerProps
+  getEditorProps: GetEditorProps
+  getEditButtonProps: GetEditButtonProps
+}
 
-const propTypes: PropValidators<PropKeys> = {
+type EditableOwnProps = {
   /**
    * If `'view'`: the view component is rendered,
    * if `'edit'`: the edit component is rendered
    */
-  mode: PropTypes.oneOf(['view', 'edit']).isRequired,
+  mode: 'view' | 'edit'
   /**
-   * Called when the component's mode changes
-   * @param {string} new_mode
+   * Called when the component's mode changes.
    */
-  onChangeMode: PropTypes.func.isRequired,
-
+  onChangeMode: (newMode: string) => void
   /**
-   * @param {Object} renderProps
-   * @param {Boolean} mode
-   * @param {Function} renderProps.getContainerProps - Props to be spread onto the container element
-   * @param {Function} renderProps.getEditorProps - Props to be spread onto the editor element
-   * @param {Function} renderProps.getEditButtonProps - Props to be spread onto the edit button element
+   * Function that you can supply that will return the children of this component.
+   * It has one parameter has the following fields:
+   * - mode: `view` or `edit`, depending on whether the view or the editor should be rendered.
+   * - getContainerProps(props) - Props to be spread onto the container element
+   * - getEditorProps(props) - Props to be spread onto the editor element
+   * - getEditButtonProps(props) - Props to be spread onto the edit button element
    */
-  children: PropTypes.func,
+  children?: (props: EditableRenderProps) => React.ReactNode
   /**
    * Identical to children
    */
-  render: PropTypes.func,
-
+  render?: (props: EditableRenderProps) => React.ReactNode
   /**
    * The current value.
    * The value is managed by the consuming app, but we need to tell Editable
    * it's changed or it won't re-render
    */
-  value: PropTypes.any,
+  value?: any
   /**
    * Called when Editable switches from edit to view mode and the value has changed.
-   * @param {any} value
    */
-  onChange: PropTypes.func,
+  onChange?: (value: any) => void
   /**
    * The mode is fixed as 'view'
    */
-  readOnly: PropTypes.bool,
+  readOnly?: boolean
   /**
    * provides a reference to the underlying html root element (container)
    */
+  elementRef?: (element: Element | null) => void
+}
+
+type PropKeys = keyof EditableOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type EditableProps = EditableOwnProps
+
+const propTypes: PropValidators<PropKeys> = {
+  mode: PropTypes.oneOf(['view', 'edit']).isRequired,
+  onChangeMode: PropTypes.func.isRequired,
+  children: PropTypes.func,
+  render: PropTypes.func,
+  value: PropTypes.any,
+  onChange: PropTypes.func,
+  readOnly: PropTypes.bool,
   elementRef: PropTypes.func
 }
 
@@ -100,5 +135,17 @@ const allowedProps: AllowedPropKeys = [
   'elementRef'
 ]
 
-export type { EditableProps }
+type EditableState = {
+  showModeToggle: boolean
+  valueOnEdit: any
+}
+export type {
+  EditableProps,
+  EditableRenderProps,
+  EditableState,
+  GetContainerProps,
+  GetEditButtonProps,
+  GetEditorProps,
+  GetViewerProps
+}
 export { propTypes, allowedProps }

package/src/InPlaceEdit/index.tsx

@@ -27,6 +27,7 @@ import { Component } from 'react'
 
 import { Flex } from '@instructure/ui-flex'
 import { IconButton } from '@instructure/ui-buttons'
+import type { IconButtonProps } from '@instructure/ui-buttons'
 import { IconEditLine } from '@instructure/ui-icons'
 import { logWarn as warn } from '@instructure/console'
 import { createChainedFunction } from '@instructure/ui-utils'
@@ -38,11 +39,13 @@ import generateStyle from './styles'
 
 import { propTypes, allowedProps } from './props'
 import type { InPlaceEditProps } from './props'
+import type { EditableRenderProps } from '../Editable/props'
 
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 @withStyle(generateStyle, null)
 class InPlaceEdit extends Component<InPlaceEditProps> {
@@ -57,13 +60,13 @@ class InPlaceEdit extends Component<InPlaceEditProps> {
   }
 
   ref: Element | null = null
+  _editButtonRef: HTMLButtonElement | null = null
 
   handleRef = (el: Element | null) => {
     this.ref = el
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-  constructor(props) {
+  constructor(props: InPlaceEditProps) {
     super(props)
 
     warn(
@@ -73,24 +76,23 @@ class InPlaceEdit extends Component<InPlaceEditProps> {
   }
 
   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?.()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    // @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()
+  componentDidUpdate() {
+    this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'el' implicitly has an 'any' type.
-  handleEditButtonRef = (el) => {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_editButtonRef' does not exist on type '... Remove this comment to see the full error message
+  handleEditButtonRef = (el: HTMLButtonElement) => {
     this._editButtonRef = el
   }
 
-  // @ts-expect-error ts-migrate(7031) FIXME: Binding element 'mode' implicitly has an 'any' typ... Remove this comment to see the full error message
-  renderEditor({ mode, onBlur, editorRef, readOnly }) {
+  renderEditor({
+    mode,
+    onBlur,
+    editorRef,
+    readOnly
+  }: ReturnType<EditableRenderProps['getEditorProps']>) {
     const { showFocusRing, renderEditor } = this.props
     const isEditMode = !readOnly && mode === 'edit'
 
@@ -109,13 +111,17 @@ class InPlaceEdit extends Component<InPlaceEditProps> {
     ) : null
   }
 
-  // @ts-expect-error ts-migrate(7031) FIXME: Binding element 'readOnly' implicitly has an 'any'... Remove this comment to see the full error message
-  renderViewer({ readOnly, mode }) {
+  renderViewer({
+    readOnly,
+    mode
+  }: ReturnType<EditableRenderProps['getViewerProps']>) {
     return readOnly || mode === 'view' ? this.props.renderViewer() : null
   }
 
-  // @ts-expect-error ts-migrate(7031) FIXME: Binding element 'buttonRef' implicitly has an 'any... Remove this comment to see the full error message
-  renderEditButton({ buttonRef, ...rest }) {
+  renderEditButton({
+    buttonRef,
+    ...rest
+  }: ReturnType<EditableRenderProps['getEditButtonProps']>) {
     return this.props.renderEditButton({
       elementRef: createChainedFunction(this.handleEditButtonRef, buttonRef),
       ...rest
@@ -125,14 +131,15 @@ class InPlaceEdit extends Component<InPlaceEditProps> {
   // Render a default edit button, an icon button with the edit icon
   // the margin makes room for the focus ring
   static renderDefaultEditButton = ({
-    // @ts-expect-error ts-migrate(7031) FIXME: Binding element 'isVisible' implicitly has an 'any... Remove this comment to see the full error message
     isVisible,
-    // @ts-expect-error ts-migrate(7031) FIXME: Binding element 'readOnly' implicitly has an 'any'... Remove this comment to see the full error message
     readOnly,
-    // @ts-expect-error ts-migrate(7031) FIXME: Binding element 'label' implicitly has an 'any' ty... Remove this comment to see the full error message
     label,
     ...buttonProps
-  }) => {
+  }: {
+    isVisible: boolean
+    readOnly?: boolean
+    label: string
+  } & Partial<IconButtonProps>) => {
     if (readOnly) {
       return null
     }
@@ -150,15 +157,11 @@ class InPlaceEdit extends Component<InPlaceEditProps> {
   }
 
   renderAll = ({
-    // @ts-expect-error ts-migrate(7031) FIXME: Binding element 'getContainerProps' implicitly has... Remove this comment to see the full error message
     getContainerProps,
-    // @ts-expect-error ts-migrate(7031) FIXME: Binding element 'getViewerProps' implicitly has an... Remove this comment to see the full error message
     getViewerProps,
-    // @ts-expect-error ts-migrate(7031) FIXME: Binding element 'getEditorProps' implicitly has an... Remove this comment to see the full error message
     getEditorProps,
-    // @ts-expect-error ts-migrate(7031) FIXME: Binding element 'getEditButtonProps' implicitly ha... Remove this comment to see the full error message
     getEditButtonProps
-  }) => {
+  }: EditableRenderProps) => {
     const flexDir =
       this.props.editButtonPlacement === 'start' ? 'row-reverse' : 'row'
     const justifyItems = flexDir === 'row-reverse' ? 'end' : 'start'

package/src/InPlaceEdit/props.ts

@@ -26,39 +26,28 @@ import PropTypes from 'prop-types'
 
 import type { PropValidators } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { EditableProps } from '../Editable/props'
+import React from 'react'
 
-type InPlaceEditOwnProps = {
-  renderViewer: (...args: any[]) => any
-  renderEditor: (...args: any[]) => any
-  renderEditButton: (...args: any[]) => any
-  mode: 'view' | 'edit'
-  onChangeMode: (...args: any[]) => any
-  value?: any
-  onChange?: (...args: any[]) => any
+type ExtendedRenderEditButton = {
+  elementRef?: (el: HTMLButtonElement) => void
+  onClick: () => void
+  onFocus: () => void
+  onBlur: () => void
+  isVisible: boolean
   readOnly?: boolean
-  showFocusRing?: boolean
-  editButtonPlacement?: 'start' | 'end'
-  inline?: boolean
 }
 
-type PropKeys = keyof InPlaceEditOwnProps
-
-type AllowedPropKeys = Readonly<Array<PropKeys>>
-
-type InPlaceEditProps = InPlaceEditOwnProps &
-  WithStyleProps<null, InPlaceEditStyle>
-
-type InPlaceEditStyle = ComponentStyle<'inPlaceEdit'>
-
-const propTypes: PropValidators<PropKeys> = {
+type InPlaceEditOwnProps = {
   /**
    * Function to render the view mode component.
    * It is the consumer's responsibility to provide the
    * current value or children.
    *
-   * @returns {element} the viewer DOM sub-tree.
+   * Return value:
+   * - element: the viewer DOM sub-tree.
    */
-  renderViewer: PropTypes.func.isRequired,
+  renderViewer: () => React.ReactNode
   /**
    * Function to render the edit mode component
    * It is the consumer's responsibility to provide the
@@ -66,14 +55,25 @@ const propTypes: PropValidators<PropKeys> = {
    * event handler needed to capture the updated value. This
    * new value must then be forwarded to the view mode component.
    *
-   * @returns {element} the editor DOM sub-tree.
+   * Return value:
+   * - element: the editor DOM sub-tree.
    */
-  renderEditor: PropTypes.func.isRequired,
+  renderEditor: ({
+    onBlur,
+    editorRef
+  }: {
+    onBlur: () => void
+    editorRef: (el: HTMLElement | null) => void
+  }) => React.ReactNode
   /**
    * Function to render the edit button.
    *
-   * @param {Object} { isVisible, onClick, onFocus, onBlur, buttonRef }
-   * @returns {element} the edit button DOM sub-tree
+   * Parameters:
+   * - object: { isVisible, onClick, onFocus, onBlur, buttonRef }
+   *
+   * Return value:
+   *
+   * - element:  the edit button DOM sub-tree
    *
    * If you choose to use the default edit button, add `label` to the
    * incoming `props` parameter and call `InPlaceEdit.renderDefaultEditButton(props)`
@@ -84,43 +84,68 @@ const propTypes: PropValidators<PropKeys> = {
    * `isVisible` is a hint as to whether the button is _typically_ shown,
    * but you're free to ignore it for your use-case.
    */
-  renderEditButton: PropTypes.func.isRequired,
+  renderEditButton: (props: ExtendedRenderEditButton) => React.ReactNode | null
   /**
    * If `'view'`: the view component is rendered,
    * if `'edit'`: the edit component is rendered
    */
-  mode: PropTypes.oneOf(['view', 'edit']).isRequired,
+  mode: 'view' | 'edit'
   /**
    * Called when the component's mode changes
-   * @param {string} newMode
+   * Parameter:
+   * - newMode: string
    */
-  onChangeMode: PropTypes.func.isRequired,
+  onChangeMode: EditableProps['onChangeMode']
   /**
    * The current value.
    * The value is managed by the consuming app, but we need to tell InPlaceEdit
    * it's changed or it won't re-render
    */
-  value: PropTypes.any,
+  value?: any
   /**
    * Called when Editable switches from edit to view mode and the value has changed.
-   * @param {any} value
+   * Parameter:
+   * - value: any
    */
-  onChange: PropTypes.func,
+  onChange?: EditableProps['onChange']
   /**
    * The mode is fixed as 'view'
    */
-  readOnly: PropTypes.bool,
+  readOnly?: boolean
   /**
    * Show a focus outline when the input is focused
    */
-  showFocusRing: PropTypes.bool,
+  showFocusRing?: boolean
   /**
    * Put the edit button before or after the view
    */
-  editButtonPlacement: PropTypes.oneOf(['start', 'end']),
+  editButtonPlacement?: 'start' | 'end'
   /**
    * Render outermost element inline v. block
    */
+  inline?: boolean
+}
+
+type PropKeys = keyof InPlaceEditOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type InPlaceEditProps = InPlaceEditOwnProps &
+  WithStyleProps<null, InPlaceEditStyle>
+
+type InPlaceEditStyle = ComponentStyle<'inPlaceEdit'>
+
+const propTypes: PropValidators<PropKeys> = {
+  renderViewer: PropTypes.func.isRequired,
+  renderEditor: PropTypes.func.isRequired,
+  renderEditButton: PropTypes.func.isRequired,
+  mode: PropTypes.oneOf(['view', 'edit']).isRequired,
+  onChangeMode: PropTypes.func.isRequired,
+  value: PropTypes.any,
+  onChange: PropTypes.func,
+  readOnly: PropTypes.bool,
+  showFocusRing: PropTypes.bool,
+  editButtonPlacement: PropTypes.oneOf(['start', 'end']),
   inline: PropTypes.bool
 }