@instructure/ui-focusable 8.12.0 → 8.12.1-snapshot.3

package/LICENSE.md

@@ -0,0 +1,27 @@
+---
+title: The MIT License (MIT)
+category: Getting Started
+order: 9
+---
+
+# The MIT License (MIT)
+
+Copyright (c) 2015 Instructure, Inc.
+
+**Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions.**
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/es/Focusable/index.js

@@ -26,12 +26,13 @@ import { addInputModeListener, addEventListener, containsActiveElement, findFocu
 import { logWarn as warn } from '@instructure/console';
 import { propTypes, allowedProps } from './props';
 import { createChainedFunction } from '@instructure/ui-utils';
+
 /**
 ---
 category: components/utilities
 ---
+@tsProps
 **/
-
 class Focusable extends Component {
   constructor(...args) {
     super(...args);
@@ -40,21 +41,21 @@ class Focusable extends Component {
     this._inputModeListener = null;
     this.state = {
       focused: false,
-      focusable: false
+      focusable: void 0
     };
 
     this.handleInputModeChange = () => {
       this.forceUpdate();
     };
 
-    this.handleFocus = event => {
+    this.handleFocus = () => {
       this.removeFocusListener();
       this.setState({
         focused: true
       });
     };
 
-    this.handleBlur = event => {
+    this.handleBlur = () => {
       this.removeBlurListener();
       this.setState({
         focused: false
@@ -71,7 +72,7 @@ class Focusable extends Component {
   componentDidMount() {
     const focusable = this.focusable,
           focused = this.focused;
-    this.addFocusableListeners(focusable, focused);
+    this.addFocusableListeners(focused, focusable);
     this._inputModeListener = addInputModeListener({
       onInputModeChange: this.handleInputModeChange
     });
@@ -81,7 +82,7 @@ class Focusable extends Component {
     });
   }
 
-  getSnapshotBeforeUpdate(prevProps, prevState) {
+  getSnapshotBeforeUpdate(prevProps) {
     const _this$props = this.props,
           render = _this$props.render,
           children = _this$props.children; // prevent blur from firing when focusable element is replaced
@@ -93,28 +94,29 @@ class Focusable extends Component {
     return null;
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate() {
     const focusable = this.focusable;
 
     if (!focusable && this.state.focusable) {
       this.removeFocusableListeners();
       this.setState({
-        focusable: false,
+        focusable: void 0,
         focused: false
       });
     } else if (focusable !== this.state.focusable) {
       this.removeFocusableListeners();
 
       if (this.state.focused) {
+        ;
         focusable.focus();
       }
 
-      this.addFocusableListeners(focusable, this.state.focused);
+      this.addFocusableListeners(this.state.focused, focusable);
       this.setState({
         focusable
       });
     } else {
-      this.addFocusableListeners(focusable, this.state.focused);
+      this.addFocusableListeners(this.state.focused, focusable);
     }
   }
 
@@ -128,7 +130,7 @@ class Focusable extends Component {
     this.removeFocusableListeners();
   }
 
-  addFocusableListeners(focusable, focused) {
+  addFocusableListeners(focused, focusable) {
     if (!focusable) return;
 
     if (focused && !this._blurListener) {
@@ -164,15 +166,15 @@ class Focusable extends Component {
   }
 
   get focusable() {
-    let focusable = findFocusable(this, () => true, true) || [];
-    const focusableCount = focusable && focusable.length || 0;
+    const focusableArr = findFocusable(this, () => true, true) || [];
+    const focusableCount = focusableArr && focusableArr.length || 0;
     warn(focusableCount === 1, `[Focusable] Exactly one focusable child is required (${focusableCount} found).`);
-    focusable = focusable ? focusable[0] : false;
+    const focusable = focusableArr ? focusableArr[0] : false;
 
     if (focusable && typeof focusable.focus === 'function') {
       return focusable;
     } else {
-      return false;
+      return void 0;
     }
   }
 
@@ -180,7 +182,7 @@ class Focusable extends Component {
     const _this$state = this.state,
           focusable = _this$state.focusable,
           focused = _this$state.focused;
-    return this.isFocusVisible(focusable, focused);
+    return this.isFocusVisible(focused, focusable);
   }
 
   focus() {
@@ -191,10 +193,11 @@ class Focusable extends Component {
     }
   }
 
-  isFocusVisible(focusable, focused) {
+  isFocusVisible(focused, focusable) {
     if (!focusable || !focused) return false; // always show focus for keyboard input mode
 
-    if (this._inputModeListener && this._inputModeListener.isKeyboardMode()) return true;
+    if (this._inputModeListener && this._inputModeListener.isKeyboardMode()) return true; // note: the type property exist on input fields like HtmlInputElement
+
     const tagName = focusable.tagName,
           type = focusable.type,
           isContentEditable = focusable.isContentEditable;
@@ -227,7 +230,7 @@ class Focusable extends Component {
       const rendered = render({
         focused,
         focusable,
-        focusVisible: this.isFocusVisible(focusable, focused),
+        focusVisible: this.isFocusVisible(focused, focusable),
         attachRef: this.attachRef
       });
       return /*#__PURE__*/cloneElement(rendered, {

package/es/Focusable/props.js

@@ -23,17 +23,7 @@
  */
 import PropTypes from 'prop-types';
 const propTypes = {
-  /**
-   * @param {Object} renderProps
-   * @param {Boolean} renderProps.focused - Is the element focused (via keyboard only)?
-   * @param {HTMLElement} renderProps.focusable - The focusable element
-   * @param {Boolean} renderProps.focusVisible - Whether the focus state should be visible or not
-   */
   children: PropTypes.func,
-
-  /**
-   * Identical to children
-   */
   render: PropTypes.func
 };
 const allowedProps = ['children', 'render'];

package/lib/Focusable/index.js

@@ -49,6 +49,7 @@ var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFun
 ---
 category: components/utilities
 ---
+@tsProps
 **/
 class Focusable extends _react.Component {
   constructor(...args) {
@@ -58,21 +59,21 @@ class Focusable extends _react.Component {
     this._inputModeListener = null;
     this.state = {
       focused: false,
-      focusable: false
+      focusable: void 0
     };
 
     this.handleInputModeChange = () => {
       this.forceUpdate();
     };
 
-    this.handleFocus = event => {
+    this.handleFocus = () => {
       this.removeFocusListener();
       this.setState({
         focused: true
       });
     };
 
-    this.handleBlur = event => {
+    this.handleBlur = () => {
       this.removeBlurListener();
       this.setState({
         focused: false
@@ -89,7 +90,7 @@ class Focusable extends _react.Component {
   componentDidMount() {
     const focusable = this.focusable,
           focused = this.focused;
-    this.addFocusableListeners(focusable, focused);
+    this.addFocusableListeners(focused, focusable);
     this._inputModeListener = (0, _addInputModeListener.addInputModeListener)({
       onInputModeChange: this.handleInputModeChange
     });
@@ -99,7 +100,7 @@ class Focusable extends _react.Component {
     });
   }
 
-  getSnapshotBeforeUpdate(prevProps, prevState) {
+  getSnapshotBeforeUpdate(prevProps) {
     const _this$props = this.props,
           render = _this$props.render,
           children = _this$props.children; // prevent blur from firing when focusable element is replaced
@@ -111,28 +112,29 @@ class Focusable extends _react.Component {
     return null;
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate() {
     const focusable = this.focusable;
 
     if (!focusable && this.state.focusable) {
       this.removeFocusableListeners();
       this.setState({
-        focusable: false,
+        focusable: void 0,
         focused: false
       });
     } else if (focusable !== this.state.focusable) {
       this.removeFocusableListeners();
 
       if (this.state.focused) {
+        ;
         focusable.focus();
       }
 
-      this.addFocusableListeners(focusable, this.state.focused);
+      this.addFocusableListeners(this.state.focused, focusable);
       this.setState({
         focusable
       });
     } else {
-      this.addFocusableListeners(focusable, this.state.focused);
+      this.addFocusableListeners(this.state.focused, focusable);
     }
   }
 
@@ -146,7 +148,7 @@ class Focusable extends _react.Component {
     this.removeFocusableListeners();
   }
 
-  addFocusableListeners(focusable, focused) {
+  addFocusableListeners(focused, focusable) {
     if (!focusable) return;
 
     if (focused && !this._blurListener) {
@@ -182,15 +184,15 @@ class Focusable extends _react.Component {
   }
 
   get focusable() {
-    let focusable = (0, _findFocusable.findFocusable)(this, () => true, true) || [];
-    const focusableCount = focusable && focusable.length || 0;
+    const focusableArr = (0, _findFocusable.findFocusable)(this, () => true, true) || [];
+    const focusableCount = focusableArr && focusableArr.length || 0;
     (0, _console.logWarn)(focusableCount === 1, `[Focusable] Exactly one focusable child is required (${focusableCount} found).`);
-    focusable = focusable ? focusable[0] : false;
+    const focusable = focusableArr ? focusableArr[0] : false;
 
     if (focusable && typeof focusable.focus === 'function') {
       return focusable;
     } else {
-      return false;
+      return void 0;
     }
   }
 
@@ -198,7 +200,7 @@ class Focusable extends _react.Component {
     const _this$state = this.state,
           focusable = _this$state.focusable,
           focused = _this$state.focused;
-    return this.isFocusVisible(focusable, focused);
+    return this.isFocusVisible(focused, focusable);
   }
 
   focus() {
@@ -209,10 +211,11 @@ class Focusable extends _react.Component {
     }
   }
 
-  isFocusVisible(focusable, focused) {
+  isFocusVisible(focused, focusable) {
     if (!focusable || !focused) return false; // always show focus for keyboard input mode
 
-    if (this._inputModeListener && this._inputModeListener.isKeyboardMode()) return true;
+    if (this._inputModeListener && this._inputModeListener.isKeyboardMode()) return true; // note: the type property exist on input fields like HtmlInputElement
+
     const tagName = focusable.tagName,
           type = focusable.type,
           isContentEditable = focusable.isContentEditable;
@@ -245,7 +248,7 @@ class Focusable extends _react.Component {
       const rendered = render({
         focused,
         focusable,
-        focusVisible: this.isFocusVisible(focusable, focused),
+        focusVisible: this.isFocusVisible(focused, focusable),
         attachRef: this.attachRef
       });
       return /*#__PURE__*/(0, _react.cloneElement)(rendered, {

package/lib/Focusable/props.js

@@ -33,17 +33,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * @param {Object} renderProps
-   * @param {Boolean} renderProps.focused - Is the element focused (via keyboard only)?
-   * @param {HTMLElement} renderProps.focusable - The focusable element
-   * @param {Boolean} renderProps.focusVisible - Whether the focus state should be visible or not
-   */
   children: _propTypes.default.func,
-
-  /**
-   * Identical to children
-   */
   render: _propTypes.default.func
 };
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-focusable",
-  "version": "8.12.0",
+  "version": "8.12.1-snapshot.3+ff273fca9",
   "description": "A utility used to identify when an element receives focus.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,16 +24,16 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.12.0",
-    "@instructure/ui-test-utils": "8.12.0"
+    "@instructure/ui-babel-preset": "8.12.1-snapshot.3+ff273fca9",
+    "@instructure/ui-test-utils": "8.12.1-snapshot.3+ff273fca9"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.12.0",
-    "@instructure/ui-dom-utils": "8.12.0",
-    "@instructure/ui-react-utils": "8.12.0",
-    "@instructure/ui-utils": "8.12.0",
-    "@instructure/ui-view": "8.12.0",
+    "@instructure/console": "8.12.1-snapshot.3+ff273fca9",
+    "@instructure/ui-dom-utils": "8.12.1-snapshot.3+ff273fca9",
+    "@instructure/ui-react-utils": "8.12.1-snapshot.3+ff273fca9",
+    "@instructure/ui-utils": "8.12.1-snapshot.3+ff273fca9",
+    "@instructure/ui-view": "8.12.1-snapshot.3+ff273fca9",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -42,5 +42,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "gitHead": "ff273fca985c08abf804c155bbd3a6a893a142c8"
 }

package/src/Focusable/README.md

@@ -11,26 +11,27 @@ a `render` or `children` method that returns content which must have exactly one
 example: true
 ---
 <Focusable>
-{({ focused }) => (
-  <span>
-    <div>
-      <Button>Focus me!</Button>
-    </div>
-    {focused && (
-      <ContextView
-        margin="small 0"
-        placement="bottom"
-        as="div"
-        background="primary"
-        padding="small"
-        borderWidth="small"
-        display="block"
-      >
-        I&#39;m focused!
-      </ContextView>
-    )}
-  </span>
-)}
+  {(options) => {
+    console.log(options)
+    return <span>
+      <div>
+        <Button>Focus me!</Button>
+      </div>
+      {options.focused && (
+        <ContextView
+          margin="small 0"
+          placement="bottom"
+          as="div"
+          background="inverse"
+          padding="small"
+          borderWidth="small"
+          display="block"
+        >
+          I&#39;m focused!
+        </ContextView>
+      )}
+    </span>
+  }}
 </Focusable>
 ```
 

package/src/Focusable/index.tsx

@@ -32,16 +32,21 @@ import {
 } from '@instructure/ui-dom-utils'
 import { logWarn as warn } from '@instructure/console'
 
-import { propTypes, allowedProps } from './props'
+import { propTypes, allowedProps, FocusableState } from './props'
 import type { FocusableProps } from './props'
 import { createChainedFunction } from '@instructure/ui-utils'
 
+type HTMLElementWithType = HTMLElement & {
+  type?: keyof typeof Focusable.inputTypes
+}
+
 /**
 ---
 category: components/utilities
 ---
+@tsProps
 **/
-class Focusable extends Component<FocusableProps> {
+class Focusable extends Component<FocusableProps, FocusableState> {
   static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
@@ -71,14 +76,14 @@ class Focusable extends Component<FocusableProps> {
     remove(): void
   } | null = null
 
-  state = {
+  state: FocusableState = {
     focused: false,
-    focusable: false
+    focusable: undefined
   }
 
   componentDidMount() {
     const { focusable, focused } = this
-    this.addFocusableListeners(focusable, focused)
+    this.addFocusableListeners(focused, focusable)
     this._inputModeListener = addInputModeListener({
       onInputModeChange: this.handleInputModeChange
     })
@@ -88,8 +93,7 @@ class Focusable extends Component<FocusableProps> {
     })
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'prevProps' implicitly has an 'any' type... Remove this comment to see the full error message
-  getSnapshotBeforeUpdate(prevProps, prevState) {
+  getSnapshotBeforeUpdate(prevProps: FocusableProps) {
     const { render, children } = this.props
     // prevent blur from firing when focusable element is replaced
     if (prevProps.children !== children || prevProps.render !== render) {
@@ -98,30 +102,24 @@ class Focusable extends Component<FocusableProps> {
     return null
   }
 
-  // @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) {
-    const { focusable } = this
-
+  componentDidUpdate() {
+    const focusable = this.focusable
     if (!focusable && this.state.focusable) {
       this.removeFocusableListeners()
 
       this.setState({
-        focusable: false,
+        focusable: undefined,
         focused: false
       })
     } else if (focusable !== this.state.focusable) {
       this.removeFocusableListeners()
-
       if (this.state.focused) {
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'focus' does not exist on type 'false | u... Remove this comment to see the full error message
-        focusable.focus()
+        ;(focusable as HTMLElement).focus()
       }
-
-      this.addFocusableListeners(focusable, this.state.focused)
-
+      this.addFocusableListeners(this.state.focused, focusable)
       this.setState({ focusable })
     } else {
-      this.addFocusableListeners(focusable, this.state.focused)
+      this.addFocusableListeners(this.state.focused, focusable)
     }
   }
 
@@ -133,8 +131,7 @@ class Focusable extends Component<FocusableProps> {
     this.removeFocusableListeners()
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'focusable' implicitly has an 'any' type... Remove this comment to see the full error message
-  addFocusableListeners(focusable, focused) {
+  addFocusableListeners(focused: boolean, focusable?: HTMLElement) {
     if (!focusable) return
 
     if (focused && !this._blurListener) {
@@ -177,14 +174,12 @@ class Focusable extends Component<FocusableProps> {
     this.forceUpdate()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-  handleFocus = (event) => {
+  handleFocus = () => {
     this.removeFocusListener()
     this.setState({ focused: true })
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-  handleBlur = (event) => {
+  handleBlur = () => {
     this.removeBlurListener()
     this.setState({ focused: false })
   }
@@ -194,34 +189,31 @@ class Focusable extends Component<FocusableProps> {
   }
 
   get focusable() {
-    let focusable = findFocusable(this, () => true, true) || []
-    const focusableCount = (focusable && focusable.length) || 0
+    const focusableArr = findFocusable(this, () => true, true) || []
+    const focusableCount = (focusableArr && focusableArr.length) || 0
 
     warn(
       focusableCount === 1,
       `[Focusable] Exactly one focusable child is required (${focusableCount} found).`
     )
 
-    // @ts-expect-error ts-migrate(2322) FIXME: Type 'unknown' is not assignable to type 'unknown[... Remove this comment to see the full error message
-    focusable = focusable ? focusable[0] : false
+    const focusable = focusableArr ? focusableArr[0] : false
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'focus' does not exist on type 'unknown[]... Remove this comment to see the full error message
-    if (focusable && typeof focusable.focus === 'function') {
-      return focusable
+    if (focusable && typeof (focusable as HTMLElement).focus === 'function') {
+      return focusable as HTMLElement
     } else {
-      return false
+      return undefined
     }
   }
 
   get focusVisible() {
     const { focusable, focused } = this.state
-    return this.isFocusVisible(focusable, focused)
+    return this.isFocusVisible(focused, focusable)
   }
 
   focus() {
     const { focusable } = this
     if (focusable) {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'focus' does not exist on type 'unknown[]... Remove this comment to see the full error message
       focusable.focus()
     }
   }
@@ -232,29 +224,24 @@ class Focusable extends Component<FocusableProps> {
     this.ref = el
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'focusable' implicitly has an 'any' type... Remove this comment to see the full error message
-  isFocusVisible(focusable, focused) {
+  isFocusVisible(focused: boolean, focusable?: HTMLElementWithType) {
     if (!focusable || !focused) return false
 
     // always show focus for keyboard input mode
     if (this._inputModeListener && this._inputModeListener.isKeyboardMode())
       return true
-
+    // note: the type property exist on input fields like HtmlInputElement
     const { tagName, type, isContentEditable } = focusable
 
-    // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-    if (tagName == 'INPUT' && Focusable.inputTypes[type]) {
+    if (tagName == 'INPUT' && Focusable.inputTypes[type!]) {
       return true
     }
-
     if (tagName == 'TEXTAREA') {
       return true
     }
-
     if (isContentEditable) {
       return true
     }
-
     return false
   }
 
@@ -266,10 +253,9 @@ class Focusable extends Component<FocusableProps> {
       const rendered = render({
         focused,
         focusable,
-        focusVisible: this.isFocusVisible(focusable, focused),
+        focusVisible: this.isFocusVisible(focused, focusable),
         attachRef: this.attachRef
       })
-
       return cloneElement(rendered, {
         ref: rendered.ref
           ? createChainedFunction(rendered.ref, this.attachRef)

package/src/Focusable/props.ts

@@ -24,10 +24,59 @@
 
 import type { PropValidators } from '@instructure/shared-types'
 import PropTypes from 'prop-types'
+import {
+  CElement,
+  DOMElement,
+  FunctionComponentElement,
+  ReactComponentElement,
+  ReactElement
+} from 'react'
+
+export type FocusableRenderOptions = {
+  /**
+   * Is the element focused (via keyboard only)?
+   */
+  focused: boolean
+  /**
+   * The focusable element
+   */
+  focusable?: HTMLElement
+  /**
+   * Whether the focus state should be visible or not
+   */
+  focusVisible: boolean
+  attachRef: (el: Element) => void
+}
+
+type FocusableRenderFunction = (
+  opts: FocusableRenderOptions
+) => (
+  | ReactElement
+  | ReactComponentElement<any>
+  | DOMElement<any, any>
+  | CElement<any, any>
+  | FunctionComponentElement<any>
+) & { ref?: (args: any[]) => unknown }
 
 type FocusableOwnProps = {
-  children?: (...args: any[]) => any
-  render?: (...args: any[]) => any
+  /**
+   * The function called on each render. Identical to `render()`
+   * @param {Object} opts - Render options
+   * @param {boolean} opts.focused - Is the element focused (via keyboard only)?
+   * @param {HTMLElement} opts.focusable - The focusable element.
+   * @param {boolean} opts.focusVisible - Whether the focus state should be visible or not.
+   * @param {function} opts.attachRef - Used internally to get a reference to the object.
+   */
+  children?: FocusableRenderFunction
+  /**
+   * The function called on each render. Identical to `children()`.
+   * @param {Object} opts - Render options
+   * @param {boolean} opts.focused - Is the element focused (via keyboard only)?
+   * @param {HTMLElement} opts.focusable - The focusable element.
+   * @param {boolean} opts.focusVisible - Whether the focus state should be visible or not.
+   * @param {function} opts.attachRef - Used internally to get a reference to the object.
+   */
+  render?: FocusableRenderFunction
 }
 
 type PropKeys = keyof FocusableOwnProps
@@ -37,20 +86,16 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 type FocusableProps = FocusableOwnProps
 
 const propTypes: PropValidators<PropKeys> = {
-  /**
-   * @param {Object} renderProps
-   * @param {Boolean} renderProps.focused - Is the element focused (via keyboard only)?
-   * @param {HTMLElement} renderProps.focusable - The focusable element
-   * @param {Boolean} renderProps.focusVisible - Whether the focus state should be visible or not
-   */
   children: PropTypes.func,
-  /**
-   * Identical to children
-   */
   render: PropTypes.func
 }
 
 const allowedProps: AllowedPropKeys = ['children', 'render']
 
-export type { FocusableProps }
+type FocusableState = {
+  focused: boolean
+  focusable?: HTMLElement
+}
+
+export type { FocusableProps, FocusableState }
 export { propTypes, allowedProps }

package/types/Focusable/index.d.ts

@@ -1,18 +1,31 @@
 import { Component } from 'react';
+import { FocusableState } from './props';
 import type { FocusableProps } from './props';
+declare type HTMLElementWithType = HTMLElement & {
+    type?: keyof typeof Focusable.inputTypes;
+};
 /**
 ---
 category: components/utilities
 ---
+@tsProps
 **/
-declare class Focusable extends Component<FocusableProps> {
+declare class Focusable extends Component<FocusableProps, FocusableState> {
     static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
-        children?: ((...args: any[]) => any) | undefined;
-        render?: ((...args: any[]) => any) | undefined;
+        children?: ((opts: import("./props").FocusableRenderOptions) => (import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactComponentElement<any, Pick<any, string | number | symbol>> | import("react").DOMElement<any, any> | import("react").CElement<any, any> | import("react").FunctionComponentElement<any>) & {
+            ref?: ((args: any[]) => unknown) | undefined;
+        }) | undefined;
+        render?: ((opts: import("./props").FocusableRenderOptions) => (import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactComponentElement<any, Pick<any, string | number | symbol>> | import("react").DOMElement<any, any> | import("react").CElement<any, any> | import("react").FunctionComponentElement<any>) & {
+            ref?: ((args: any[]) => unknown) | undefined;
+        }) | undefined;
     }>;
     static allowedProps: readonly (keyof {
-        children?: ((...args: any[]) => any) | undefined;
-        render?: ((...args: any[]) => any) | undefined;
+        children?: ((opts: import("./props").FocusableRenderOptions) => (import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactComponentElement<any, Pick<any, string | number | symbol>> | import("react").DOMElement<any, any> | import("react").CElement<any, any> | import("react").FunctionComponentElement<any>) & {
+            ref?: ((args: any[]) => unknown) | undefined;
+        }) | undefined;
+        render?: ((opts: import("./props").FocusableRenderOptions) => (import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactComponentElement<any, Pick<any, string | number | symbol>> | import("react").DOMElement<any, any> | import("react").CElement<any, any> | import("react").FunctionComponentElement<any>) & {
+            ref?: ((args: any[]) => unknown) | undefined;
+        }) | undefined;
     })[];
     static defaultProps: {
         children: null;
@@ -42,31 +55,26 @@ declare class Focusable extends Component<FocusableProps> {
         isKeyboardMode(): boolean;
         remove(): void;
     } | null;
-    state: {
-        focused: boolean;
-        focusable: boolean;
-    };
+    state: FocusableState;
     componentDidMount(): void;
-    getSnapshotBeforeUpdate(prevProps: any, prevState: any): null;
-    componentDidUpdate(prevProps: any, prevState: any): void;
+    getSnapshotBeforeUpdate(prevProps: FocusableProps): null;
+    componentDidUpdate(): void;
     componentWillUnmount(): void;
-    addFocusableListeners(focusable: any, focused: any): void;
+    addFocusableListeners(focused: boolean, focusable?: HTMLElement): void;
     removeFocusableListeners(): void;
     removeFocusListener(): void;
     removeBlurListener(): void;
     handleInputModeChange: () => void;
-    handleFocus: (event: any) => void;
-    handleBlur: (event: any) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
     get focused(): boolean;
-    get focusable(): false | Element[];
+    get focusable(): HTMLElement | undefined;
     get focusVisible(): boolean;
     focus(): void;
     ref: Element | null;
     attachRef: (el: Element) => void;
-    isFocusVisible(focusable: any, focused: any): boolean;
-    render(): import("react").FunctionComponentElement<{
-        ref: (...args: any[]) => any;
-    }> | null;
+    isFocusVisible(focused: boolean, focusable?: HTMLElementWithType): boolean;
+    render(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 }
 export default Focusable;
 export { Focusable };

package/types/Focusable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Focusable/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAA;AAW/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAG7C;;;;GAIG;AACH,cAAM,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/C,MAAM,CAAC,SAAS;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;SAAe;IAClC,MAAM,CAAC,YAAY;;MAElB;IAED,MAAM,CAAC,UAAU;;;;;;;;;;;;;;MAchB;IAED,cAAc,EAAE;QAAE,MAAM,IAAI,IAAI,CAAA;KAAE,GAAG,IAAI,CAAO;IAChD,aAAa,EAAE;QAAE,MAAM,IAAI,IAAI,CAAA;KAAE,GAAG,IAAI,CAAO;IAC/C,kBAAkB,EAAE;QAClB,cAAc,IAAI,OAAO,CAAA;QACzB,MAAM,IAAI,IAAI,CAAA;KACf,GAAG,IAAI,CAAO;IAEf,KAAK;;;MAGJ;IAED,iBAAiB;IAajB,uBAAuB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA;IAU5C,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA;IA0BvC,oBAAoB;IASpB,qBAAqB,CAAC,SAAS,KAAA,EAAE,OAAO,KAAA;IAoBxC,wBAAwB;IAKxB,mBAAmB;IAOnB,kBAAkB;IAOlB,qBAAqB,aAEpB;IAGD,WAAW,uBAGV;IAGD,UAAU,uBAGT;IAED,IAAI,OAAO,YAEV;IAED,IAAI,SAAS,sBAkBZ;IAED,IAAI,YAAY,YAGf;IAED,KAAK;IAQL,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,UAEvB;IAGD,cAAc,CAAC,SAAS,KAAA,EAAE,OAAO,KAAA;IAyBjC,MAAM;;;CAqBP;AAED,eAAe,SAAS,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Focusable/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAA;AAU/C,OAAO,EAA2B,cAAc,EAAE,MAAM,SAAS,CAAA;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAG7C,aAAK,mBAAmB,GAAG,WAAW,GAAG;IACvC,IAAI,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC,UAAU,CAAA;CACzC,CAAA;AAED;;;;;GAKG;AACH,cAAM,SAAU,SAAQ,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;IAC/D,MAAM,CAAC,SAAS;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;MAElB;IAED,MAAM,CAAC,UAAU;;;;;;;;;;;;;;MAchB;IAED,cAAc,EAAE;QAAE,MAAM,IAAI,IAAI,CAAA;KAAE,GAAG,IAAI,CAAO;IAChD,aAAa,EAAE;QAAE,MAAM,IAAI,IAAI,CAAA;KAAE,GAAG,IAAI,CAAO;IAC/C,kBAAkB,EAAE;QAClB,cAAc,IAAI,OAAO,CAAA;QACzB,MAAM,IAAI,IAAI,CAAA;KACf,GAAG,IAAI,CAAO;IAEf,KAAK,EAAE,cAAc,CAGpB;IAED,iBAAiB;IAYjB,uBAAuB,CAAC,SAAS,EAAE,cAAc;IASjD,kBAAkB;IAqBlB,oBAAoB;IAQpB,qBAAqB,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,EAAE,WAAW;IAoB/D,wBAAwB;IAKxB,mBAAmB;IAOnB,kBAAkB;IAOlB,qBAAqB,aAEpB;IAED,WAAW,aAGV;IAED,UAAU,aAGT;IAED,IAAI,OAAO,YAEV;IAED,IAAI,SAAS,4BAgBZ;IAED,IAAI,YAAY,YAGf;IAED,KAAK;IAOL,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,UAEvB;IAED,cAAc,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,EAAE,mBAAmB;IAqBhE,MAAM;CAoBP;AAED,eAAe,SAAS,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/types/Focusable/props.d.ts

@@ -1,13 +1,52 @@
 import type { PropValidators } from '@instructure/shared-types';
+import { CElement, DOMElement, FunctionComponentElement, ReactComponentElement, ReactElement } from 'react';
+export declare type FocusableRenderOptions = {
+    /**
+     * Is the element focused (via keyboard only)?
+     */
+    focused: boolean;
+    /**
+     * The focusable element
+     */
+    focusable?: HTMLElement;
+    /**
+     * Whether the focus state should be visible or not
+     */
+    focusVisible: boolean;
+    attachRef: (el: Element) => void;
+};
+declare type FocusableRenderFunction = (opts: FocusableRenderOptions) => (ReactElement | ReactComponentElement<any> | DOMElement<any, any> | CElement<any, any> | FunctionComponentElement<any>) & {
+    ref?: (args: any[]) => unknown;
+};
 declare type FocusableOwnProps = {
-    children?: (...args: any[]) => any;
-    render?: (...args: any[]) => any;
+    /**
+     * The function called on each render. Identical to `render()`
+     * @param {Object} opts - Render options
+     * @param {boolean} opts.focused - Is the element focused (via keyboard only)?
+     * @param {HTMLElement} opts.focusable - The focusable element.
+     * @param {boolean} opts.focusVisible - Whether the focus state should be visible or not.
+     * @param {function} opts.attachRef - Used internally to get a reference to the object.
+     */
+    children?: FocusableRenderFunction;
+    /**
+     * The function called on each render. Identical to `children()`.
+     * @param {Object} opts - Render options
+     * @param {boolean} opts.focused - Is the element focused (via keyboard only)?
+     * @param {HTMLElement} opts.focusable - The focusable element.
+     * @param {boolean} opts.focusVisible - Whether the focus state should be visible or not.
+     * @param {function} opts.attachRef - Used internally to get a reference to the object.
+     */
+    render?: FocusableRenderFunction;
 };
 declare type PropKeys = keyof FocusableOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
 declare type FocusableProps = FocusableOwnProps;
 declare const propTypes: PropValidators<PropKeys>;
 declare const allowedProps: AllowedPropKeys;
-export type { FocusableProps };
+declare type FocusableState = {
+    focused: boolean;
+    focusable?: HTMLElement;
+};
+export type { FocusableProps, FocusableState };
 export { propTypes, allowedProps };
 //# sourceMappingURL=props.d.ts.map

package/types/Focusable/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Focusable/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAG/D,aAAK,iBAAiB,GAAG;IACvB,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAClC,MAAM,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;CACjC,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,iBAAiB,CAAA;AAEvC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,cAAc,GAAG,iBAAiB,CAAA;AAEvC,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAYvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAAwC,CAAA;AAE5D,YAAY,EAAE,cAAc,EAAE,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Focusable/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE/D,OAAO,EACL,QAAQ,EACR,UAAU,EACV,wBAAwB,EACxB,qBAAqB,EACrB,YAAY,EACb,MAAM,OAAO,CAAA;AAEd,oBAAY,sBAAsB,GAAG;IACnC;;OAEG;IACH,OAAO,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAA;IACvB;;OAEG;IACH,YAAY,EAAE,OAAO,CAAA;IACrB,SAAS,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAA;CACjC,CAAA;AAED,aAAK,uBAAuB,GAAG,CAC7B,IAAI,EAAE,sBAAsB,KACzB,CACD,YAAY,GACZ,qBAAqB,CAAC,GAAG,CAAC,GAC1B,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,GACpB,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC,GAClB,wBAAwB,CAAC,GAAG,CAAC,CAChC,GAAG;IAAE,GAAG,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAA;CAAE,CAAA;AAEtC,aAAK,iBAAiB,GAAG;IACvB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,uBAAuB,CAAA;IAClC;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,uBAAuB,CAAA;CACjC,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,iBAAiB,CAAA;AAEvC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,cAAc,GAAG,iBAAiB,CAAA;AAEvC,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAGvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAAwC,CAAA;AAE5D,aAAK,cAAc,GAAG;IACpB,OAAO,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,WAAW,CAAA;CACxB,CAAA;AAED,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}