compose: Add types to useDialog and useFocusOnMount (#32676)

* compose: Add types to `useFocusOnMount`

* compose: Add types to `useDialog` and fix `useConstrainedTabbing` types

* Include all files in compose

* Publish the types

* Actually type check the compose package

packages/compose/CHANGELOG.md

@@ -6,6 +6,10 @@
 
 - `withState` HOC has been deprecated. Use `useState` hook instead.
 
+### New Features
+
+- Publish TypeScript types.
+
 ## 4.1.0 (2021-05-20)
 
 ## 4.0.0 (2021-05-14)

packages/compose/README.md

@@ -154,7 +154,7 @@ const ConstrainedTabbingExample = () => {
 
 _Returns_
 
-- `Object|Function`: Element Ref.
+- `import('react').RefCallback<Element>`: Element Ref.
 
 <a name="useCopyOnClick" href="#useCopyOnClick">#</a> **useCopyOnClick**
 
@@ -228,11 +228,11 @@ const WithFocusOnMount = () => {
 
 _Parameters_
 
-- _focusOnMount_ `boolean|string`: Focus on mount mode.
+- _focusOnMount_ `boolean | 'firstElement'`: Focus on mount mode.
 
 _Returns_
 
-- `Function`: Ref callback.
+- `import('react').RefCallback<HTMLElement>`: Ref callback.
 
 <a name="useFocusReturn" href="#useFocusReturn">#</a> **useFocusReturn**
 

packages/compose/package.json

@@ -26,6 +26,7 @@
  "main": "build/index.js",
  "module": "build-module/index.js",
  "react-native": "src/index",
+ "types": "build-types",
  "sideEffects": false,
  "dependencies": {
  "@babel/runtime": "^7.13.10",

packages/compose/src/hooks/use-constrained-tabbing/index.js

@@ -9,7 +9,7 @@ import { useCallback } from '@wordpress/element';
  * In Dialogs/modals, the tabbing must be constrained to the content of
  * the wrapper element. This hook adds the behavior to the returned ref.
  *
- * @return {Object|Function} Element Ref.
+ * @return {import('react').RefCallback<Element>} Element Ref.
  *
  * @example
  * ```js

packages/compose/src/hooks/use-dialog/index.js

@@ -13,16 +13,27 @@ import useFocusReturn from '../use-focus-return';
 import useFocusOutside from '../use-focus-outside';
 import useMergeRefs from '../use-merge-refs';
 
+/* eslint-disable jsdoc/valid-types */
+/**
+ * @typedef DialogOptions
+ * @property {Parameters<useFocusOnMount>[0]} focusOnMount Focus on mount arguments.
+ * @property {() => void} onClose Function to call when the dialog is closed.
+ */
+/* eslint-enable jsdoc/valid-types */
+
 /**
  * Returns a ref and props to apply to a dialog wrapper to enable the following behaviors:
  * - constrained tabbing.
  * - focus on mount.
  * - return focus on unmount.
  * - focus outside.
  *
- * @param {Object} options Dialog Options.
+ * @param {DialogOptions} options Dialog Options.
  */
 function useDialog( options ) {
+ /**
+ * @type {import('react').MutableRefObject<DialogOptions | undefined>}
+ */
  const currentOptions = useRef();
  useEffect( () => {
  currentOptions.current = options;
@@ -33,9 +44,11 @@ function useDialog( options ) {
  const focusOutsideProps = useFocusOutside( ( event ) => {
  // This unstable prop is here only to manage backward compatibility
  // for the Popover component otherwise, the onClose should be enough.
- if ( currentOptions.current.__unstableOnClose ) {
+ // @ts-ignore unstable property
+ if ( currentOptions.current?.__unstableOnClose ) {
+ // @ts-ignore unstable property
  currentOptions.current.__unstableOnClose( 'focus-outside', event );
- } else if ( currentOptions.current.onClose ) {
+ } else if ( currentOptions.current?.onClose ) {
  currentOptions.current.onClose();
  }
  } );
@@ -44,9 +57,11 @@ function useDialog( options ) {
  return;
  }
 
- node.addEventListener( 'keydown', ( event ) => {
+ node.addEventListener( 'keydown', (
+ /** @type {KeyboardEvent} */ event
+ ) => {
  // Close on escape
- if ( event.keyCode === ESCAPE && currentOptions.current.onClose ) {
+ if ( event.keyCode === ESCAPE && currentOptions.current?.onClose ) {
  event.stopPropagation();
  currentOptions.current.onClose();
  }

packages/compose/src/hooks/use-focus-on-mount/index.js

@@ -7,8 +7,8 @@ import { focus } from '@wordpress/dom';
 /**
  * Hook used to focus the first tabbable element on mount.
  *
- * @param {boolean|string} focusOnMount Focus on mount mode.
- * @return {Function} Ref callback.
+ * @param {boolean | 'firstElement'} focusOnMount Focus on mount mode.
+ * @return {import('react').RefCallback<HTMLElement>} Ref callback.
  *
  * @example
  * ```js
@@ -36,7 +36,7 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) {
  return;
  }
 
- if ( node.contains( node.ownerDocument.activeElement ) ) {
+ if ( node.contains( node.ownerDocument?.activeElement ?? null ) ) {
  return;
  }
 
@@ -46,7 +46,7 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) {
  const firstTabbable = focus.tabbable.find( node )[ 0 ];
 
  if ( firstTabbable ) {
- target = firstTabbable;
+ target = /** @type {HTMLElement} */ ( firstTabbable );
  }
  }
 

packages/compose/tsconfig.json

@@ -12,34 +12,6 @@
  { "path": "../keycodes" }
  ],
  "include": [
- "src/higher-order/compose.js",
- "src/higher-order/if-condition/**/*",
- "src/higher-order/pure/**/*",
- "src/higher-order/with-instance-id/**/*",
- "src/higher-order/with-global-events/**/*",
- "src/higher-order/with-safe-timeout/**/*",
- "src/higher-order/with-state/**/*",
- "src/hooks/use-async-list/**/*",
- "src/hooks/use-constrained-tabbing/**/*",
- "src/hooks/use-copy-on-click/**/*",
- "src/hooks/use-copy-to-clipboard/**/*",
- "src/hooks/use-debounce/**/*",
- "src/hooks/use-dragging/**/*",
- "src/hooks/use-drop-zone/**/*",
- "src/hooks/use-focus-outside/**/*",
- "src/hooks/use-focus-return/**/*",
- "src/hooks/use-instance-id/**/*",
- "src/hooks/use-isomorphic-layout-effect/**/*",
- "src/hooks/use-keyboard-shortcut/**/*",
- "src/hooks/use-media-query/**/*",
- "src/hooks/use-merge-refs/**/*",
- "src/hooks/use-previous/**/*",
- "src/hooks/use-reduced-motion/**/*",
- "src/hooks/use-ref-effect/**/*",
- "src/hooks/use-resize-observer/**/*",
- "src/hooks/use-throttle/**/*",
- "src/hooks/use-viewport-match/**/*",
- "src/hooks/use-warn-on-change/**/*",
- "src/utils/**/*"
+ "src/**/*"
  ]
 }

tsconfig.json

@@ -7,6 +7,7 @@
  { "path": "packages/blob" },
  { "path": "packages/block-editor" },
  { "path": "packages/components" },
+ { "path": "packages/compose" },
  { "path": "packages/date" },
  { "path": "packages/deprecated" },
  { "path": "packages/docgen" },