@wordpress/compose 5.6.0 → 5.9.0

package/build-types/hooks/use-debounce/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-debounce/index.js"],"names":[],"mappings":"AAYA;;;;;;;;;;;;;;GAcG;AACH,4DAPwB,GAAG,EAAE,KAAK,IAAI,wIAgBrC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-debounce/index.js"],"names":[],"mappings":"AAYA;;;;;;;;;;;;;;GAcG;AACH,4DAPwB,GAAG,EAAE,KAAK,IAAI,wIAerC"}

package/build-types/hooks/use-dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-dialog/index.js"],"names":[],"mappings":";;;;;kBAkBc,kCAA2B,CAAC,CAAC,CAAC;;;;aAC9B,MAAM,IAAI;;AAHxB;;;;GAIG;AAGH;;;;;;;;GAQG;AACH,oCAFW,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;KAwDvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-dialog/index.js"],"names":[],"mappings":";;;;;kBAkBc,kCAA2B,CAAC,CAAC,CAAC;;;;aAC9B,MAAM,IAAI;;AAHxB;;;;GAIG;AAGH;;;;;;;;GAQG;AACH,oCAFW,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;KAyDvB"}

package/build-types/hooks/use-disabled/index.d.ts

@@ -3,11 +3,13 @@
  * (input fields, links, buttons, etc.) need to be disabled. This hook adds the
  * behavior to disable nested DOM elements to the returned ref.
  *
+ * @param {Object}   config            Configuration object.
+ * @param {boolean=} config.isDisabled Whether the element should be disabled.
  * @return {import('react').RefCallback<HTMLElement>} Element Ref.
  *
  * @example
  * ```js
- * import { __experimentalUseDisabled as useDisabled } from '@wordpress/compose';
+ * import { useDisabled } from '@wordpress/compose';
  * const DisabledExample = () => {
  * 	const disabledRef = useDisabled();
  *	return (
@@ -19,5 +21,7 @@
  * };
  * ```
  */
-export default function useDisabled(): import('react').RefCallback<HTMLElement>;
+export default function useDisabled({ isDisabled: isDisabledProp, }?: {
+    isDisabled?: boolean | undefined;
+}): import('react').RefCallback<HTMLElement>;
 //# sourceMappingURL=index.d.ts.map

package/build-types/hooks/use-disabled/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-disabled/index.js"],"names":[],"mappings":"AAkCA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,uCAhBY,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAyEnD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-disabled/index.js"],"names":[],"mappings":"AAkCA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH;IAjB4B,UAAU,GAA3B,OAAO;IACN,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAgKnD"}

package/build-types/hooks/use-focus-on-mount/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-on-mount/index.js"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,uDAlBW,OAAO,GAAG,cAAc,GACvB,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CA4CnD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-on-mount/index.js"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,uDAlBW,OAAO,GAAG,cAAc,GACvB,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAiDnD"}

package/build-types/hooks/use-focus-return/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-return/index.js"],"names":[],"mappings":";AAKA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,uDAlBiB,IAAI,gBACT,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CA0DnD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-return/index.js"],"names":[],"mappings":";AAKA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,uDAlBiB,IAAI,gBACT,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CA4DnD"}

package/build-types/hooks/use-merge-refs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-merge-refs/index.js"],"names":[],"mappings":"AA2BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wIAsDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-merge-refs/index.js"],"names":[],"mappings":"AA4BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wIAsDC"}

package/build-types/hooks/use-ref-effect/index.d.ts

@@ -21,5 +21,5 @@ import type { DependencyList, RefCallback } from 'react';
  *
  * @return Ref callback.
  */
-export default function useRefEffect<TElement = Node>(callback: (node: TElement) => (() => void) | undefined, dependencies: DependencyList): RefCallback<TElement | null>;
+export default function useRefEffect<TElement = Node>(callback: (node: TElement) => (() => void) | void, dependencies: DependencyList): RefCallback<TElement | null>;
 //# sourceMappingURL=index.d.ts.map

package/build-types/hooks/use-ref-effect/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-ref-effect/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAOzD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,QAAQ,GAAG,IAAI,EACpD,QAAQ,EAAE,CAAE,IAAI,EAAE,QAAQ,KAAM,CAAE,MAAM,IAAI,CAAE,GAAG,SAAS,EAC1D,YAAY,EAAE,cAAc,GAC1B,WAAW,CAAE,QAAQ,GAAG,IAAI,CAAE,CAShC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-ref-effect/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAOzD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,QAAQ,GAAG,IAAI,EACpD,QAAQ,EAAE,CAAE,IAAI,EAAE,QAAQ,KAAM,CAAE,MAAM,IAAI,CAAE,GAAG,IAAI,EACrD,YAAY,EAAE,cAAc,GAC1B,WAAW,CAAE,QAAQ,GAAG,IAAI,CAAE,CAShC"}

package/build-types/hooks/use-resize-observer/index.d.ts

@@ -1,3 +1,33 @@
-export default useResizeAware;
-import useResizeAware from "react-resize-aware";
+import type { WPElement } from '@wordpress/element';
+declare global {
+    interface ResizeObserverEntry {
+        readonly devicePixelContentBoxSize: ReadonlyArray<ResizeObserverSize>;
+    }
+}
+/**
+ * Hook which allows to listen the resize event of any target element when it changes sizes.
+ * _Note: `useResizeObserver` will report `null` until after first render.
+ *
+ * @example
+ *
+ * ```js
+ * const App = () => {
+ * 	const [ resizeListener, sizes ] = useResizeObserver();
+ *
+ * 	return (
+ * 		<div>
+ * 			{ resizeListener }
+ * 			Your content here
+ * 		</div>
+ * 	);
+ * };
+ * ```
+ */
+export default function useResizeAware(): [
+    WPElement,
+    {
+        width: number | null;
+        height: number | null;
+    }
+];
 //# sourceMappingURL=index.d.ts.map

package/build-types/hooks/use-resize-observer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-resize-observer/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-resize-observer/index.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AA6FpD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,mBAAmB;QAC5B,QAAQ,CAAC,yBAAyB,EAAE,aAAa,CAAE,kBAAkB,CAAE,CAAC;KACxE;CACD;AA4MD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,IAAI;IACzC,SAAS;IACT;QAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE;CAC/C,CAuBA"}

package/build-types/hooks/use-throttle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-throttle/index.js"],"names":[],"mappings":"AAWA;;;;;;;;;;;;;;GAcG;AACH,4DAPwB,GAAG,EAAE,KAAK,IAAI,wIAerC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-throttle/index.js"],"names":[],"mappings":"AAWA;;;;;;;;;;;;;;GAcG;AACH,4DAPwB,GAAG,EAAE,KAAK,IAAI,wIAcrC"}

package/build-types/index.d.ts

@@ -1,4 +1,4 @@
-export { default as createHigherOrderComponent } from "./utils/create-higher-order-component";
+export * from "./utils/create-higher-order-component";
 export { default as compose } from "./higher-order/compose";
 export { default as ifCondition } from "./higher-order/if-condition";
 export { default as pure } from "./higher-order/pure";
@@ -10,7 +10,7 @@ export { default as useConstrainedTabbing } from "./hooks/use-constrained-tabbin
 export { default as useCopyOnClick } from "./hooks/use-copy-on-click";
 export { default as useCopyToClipboard } from "./hooks/use-copy-to-clipboard";
 export { default as __experimentalUseDialog } from "./hooks/use-dialog";
-export { default as __experimentalUseDisabled } from "./hooks/use-disabled";
+export { default as useDisabled } from "./hooks/use-disabled";
 export { default as __experimentalUseDragging } from "./hooks/use-dragging";
 export { default as useFocusOnMount } from "./hooks/use-focus-on-mount";
 export { default as __experimentalUseFocusOutside } from "./hooks/use-focus-outside";

package/build-types/utils/create-higher-order-component/index.d.ts

@@ -1,14 +1,7 @@
 import type { ComponentType } from 'react';
-/**
- * Higher order components can cause props to be obviated. For example a HOC that
- * injects i18n props will obviate the need for the i18n props to be passed to the component.
- *
- * If a HOC does not obviate the need for any specific props then we default to `{}` which
- * essentially subtracts 0 from the original props of the passed in component. An example
- * of this is the `pure` HOC which does not change the API surface of the component but
- * simply modifies the internals.
- */
-export declare type HigherOrderComponent<HOCProps extends Record<string, any>> = <InnerProps extends HOCProps>(Inner: ComponentType<InnerProps>) => {} extends HOCProps ? ComponentType<InnerProps> : ComponentType<Omit<InnerProps, keyof HOCProps>>;
+declare type GetProps<C> = C extends ComponentType<infer P> ? P : never;
+export declare type WithoutInjectedProps<C, I> = Omit<GetProps<C>, keyof I>;
+export declare type WithInjectedProps<C, I> = ComponentType<WithoutInjectedProps<C, I> & I>;
 /**
  * Given a function mapping a component to an enhanced component and modifier
  * name, returns the enhanced component augmented with a generated displayName.
@@ -18,6 +11,6 @@ export declare type HigherOrderComponent<HOCProps extends Record<string, any>> =
  *
  * @return Component class with generated display name assigned.
  */
-declare function createHigherOrderComponent<HOCProps extends Record<string, any> = {}>(mapComponent: HigherOrderComponent<HOCProps>, modifierName: string): <InnerProps extends HOCProps>(Inner: ComponentType<InnerProps>) => {} extends HOCProps ? ComponentType<InnerProps> : ComponentType<Omit<InnerProps, keyof HOCProps>>;
-export default createHigherOrderComponent;
+export declare function createHigherOrderComponent<TInner extends ComponentType<any>, TOuter extends ComponentType<any>>(mapComponent: (Inner: TInner) => TOuter, modifierName: string): (Inner: TInner) => TOuter;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/build-types/utils/create-higher-order-component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/create-higher-order-component/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;;;;;GAQG;AACH,oBAAY,oBAAoB,CAAE,QAAQ,SAAS,MAAM,CAAE,MAAM,EAAE,GAAG,CAAE,IAAK,CAC5E,UAAU,SAAS,QAAQ,EAE3B,KAAK,EAAE,aAAa,CAAE,UAAU,CAAE,KAC9B,EAAE,SAAS,QAAQ,GACrB,aAAa,CAAE,UAAU,CAAE,GAC3B,aAAa,CAAE,IAAI,CAAE,UAAU,EAAE,MAAM,QAAQ,CAAE,CAAE,CAAC;AAEvD;;;;;;;;GAQG;AACH,iBAAS,0BAA0B,CAClC,QAAQ,SAAS,MAAM,CAAE,MAAM,EAAE,GAAG,CAAE,GAAG,EAAE,EACzC,YAAY,EAAE,oBAAoB,CAAE,QAAQ,CAAE,EAAE,YAAY,EAAE,MAAM,wKAWtE;AAED,eAAe,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/create-higher-order-component/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,aAAK,QAAQ,CAAE,CAAC,IAAK,CAAC,SAAS,aAAa,CAAE,MAAM,CAAC,CAAE,GAAG,CAAC,GAAG,KAAK,CAAC;AAEpE,oBAAY,oBAAoB,CAAE,CAAC,EAAE,CAAC,IAAK,IAAI,CAAE,QAAQ,CAAE,CAAC,CAAE,EAAE,MAAM,CAAC,CAAE,CAAC;AAE1E,oBAAY,iBAAiB,CAAE,CAAC,EAAE,CAAC,IAAK,aAAa,CACpD,oBAAoB,CAAE,CAAC,EAAE,CAAC,CAAE,GAAG,CAAC,CAChC,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,0BAA0B,CACzC,MAAM,SAAS,aAAa,CAAE,GAAG,CAAE,EACnC,MAAM,SAAS,aAAa,CAAE,GAAG,CAAE,EACjC,YAAY,EAAE,CAAE,KAAK,EAAE,MAAM,KAAM,MAAM,EAAE,YAAY,EAAE,MAAM,WACjD,MAAM,YAKtB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "5.6.0",
+	"version": "5.9.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,16 +32,15 @@
 		"@babel/runtime": "^7.16.0",
 		"@types/lodash": "^4.14.172",
 		"@types/mousetrap": "^1.6.8",
-		"@wordpress/deprecated": "^3.8.0",
-		"@wordpress/dom": "^3.8.0",
-		"@wordpress/element": "^4.6.0",
-		"@wordpress/is-shallow-equal": "^4.8.0",
-		"@wordpress/keycodes": "^3.8.0",
-		"@wordpress/priority-queue": "^2.8.0",
+		"@wordpress/deprecated": "^3.11.0",
+		"@wordpress/dom": "^3.11.0",
+		"@wordpress/element": "^4.9.0",
+		"@wordpress/is-shallow-equal": "^4.11.0",
+		"@wordpress/keycodes": "^3.11.0",
+		"@wordpress/priority-queue": "^2.11.0",
 		"clipboard": "^2.0.8",
 		"lodash": "^4.17.21",
 		"mousetrap": "^1.6.5",
-		"react-resize-aware": "^3.1.0",
 		"use-memo-one": "^1.1.1"
 	},
 	"peerDependencies": {
@@ -50,5 +49,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "4631d515033397fcfeda77e5755960253caef9bf"
+	"gitHead": "48d5f37dfb52d2e77c8eeb662f9874cf141b8c6b"
 }

package/src/higher-order/if-condition/index.tsx

@@ -1,7 +1,12 @@
+/**
+ * External dependencies
+ */
+import type { ComponentType } from 'react';
+
 /**
  * Internal dependencies
  */
-import createHigherOrderComponent from '../../utils/create-higher-order-component';
+import { createHigherOrderComponent } from '../../utils/create-higher-order-component';
 
 /**
  * Higher-order component creator, creating a new component which renders if
@@ -20,12 +25,10 @@ import createHigherOrderComponent from '../../utils/create-higher-order-componen
  *
  * @return Higher-order component.
  */
-const ifCondition = < TProps extends Record< string, any > >(
-	predicate: ( props: TProps ) => boolean
-) =>
-	createHigherOrderComponent< {} >(
-		( WrappedComponent ) => ( props ) => {
-			if ( ! predicate( props as TProps ) ) {
+function ifCondition< Props >( predicate: ( props: Props ) => boolean ) {
+	return createHigherOrderComponent(
+		( WrappedComponent: ComponentType< Props > ) => ( props: Props ) => {
+			if ( ! predicate( props ) ) {
 				return null;
 			}
 
@@ -33,5 +36,6 @@ const ifCondition = < TProps extends Record< string, any > >(
 		},
 		'ifCondition'
 	);
+}
 
 export default ifCondition;

package/src/higher-order/pure/index.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentType, ComponentClass } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -7,43 +12,36 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import createHigherOrderComponent from '../../utils/create-higher-order-component';
-
-/**
- * External dependencies
- */
-import type { ComponentType, ComponentClass } from 'react';
+import { createHigherOrderComponent } from '../../utils/create-higher-order-component';
 
 /**
  * Given a component returns the enhanced component augmented with a component
  * only re-rendering when its props/state change
  */
-const pure = createHigherOrderComponent(
-	< TProps extends Record< string, any > >(
-		Wrapped: ComponentType< TProps >
-	) => {
-		if ( Wrapped.prototype instanceof Component ) {
-			return class extends ( Wrapped as ComponentClass< TProps > ) {
-				shouldComponentUpdate( nextProps: TProps, nextState: any ) {
-					return (
-						! isShallowEqual( nextProps, this.props ) ||
-						! isShallowEqual( nextState, this.state )
-					);
-				}
-			};
-		}
-
-		return class extends Component< TProps > {
-			shouldComponentUpdate( nextProps: TProps ) {
-				return ! isShallowEqual( nextProps, this.props );
-			}
-
-			render() {
-				return <Wrapped { ...this.props } />;
+const pure = createHigherOrderComponent( function < Props >(
+	WrappedComponent: ComponentType< Props >
+): ComponentType< Props > {
+	if ( WrappedComponent.prototype instanceof Component ) {
+		return class extends ( WrappedComponent as ComponentClass< Props > ) {
+			shouldComponentUpdate( nextProps: Props, nextState: any ) {
+				return (
+					! isShallowEqual( nextProps, this.props ) ||
+					! isShallowEqual( nextState, this.state )
+				);
 			}
 		};
-	},
-	'pure'
-);
+	}
+
+	return class extends Component< Props > {
+		shouldComponentUpdate( nextProps: Props ) {
+			return ! isShallowEqual( nextProps, this.props );
+		}
+
+		render() {
+			return <WrappedComponent { ...this.props } />;
+		}
+	};
+},
+'pure' );
 
 export default pure;

package/src/higher-order/with-global-events/index.js

@@ -12,7 +12,7 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import createHigherOrderComponent from '../../utils/create-higher-order-component';
+import { createHigherOrderComponent } from '../../utils/create-higher-order-component';
 import Listener from './listener';
 
 /**
@@ -71,7 +71,9 @@ export default function withGlobalEvents( eventTypesToHandlers ) {
 			handleEvent( /** @type {any} */ event ) {
 				const handler =
 					eventTypesToHandlers[
-						/** @type {keyof GlobalEventHandlersEventMap} */ ( event.type )
+						/** @type {keyof GlobalEventHandlersEventMap} */ (
+							event.type
+						)
 						/* eslint-enable jsdoc/no-undefined-types */
 					];
 				if ( typeof this.wrappedRef[ handler ] === 'function' ) {

package/src/higher-order/with-global-events/test/index.js

@@ -82,8 +82,8 @@ describe( 'withGlobalEvents', () => {
 		mountEnhancedComponent();
 
 		// Get the HOC wrapper instance.
-		const hocInstance = wrapper.root.findByType( OriginalComponent ).parent
-			.instance;
+		const hocInstance =
+			wrapper.root.findByType( OriginalComponent ).parent.instance;
 
 		expect( Listener._instance.add ).toHaveBeenCalledWith(
 			'resize',

package/src/higher-order/with-instance-id/index.tsx

@@ -1,21 +1,30 @@
 /**
  * Internal dependencies
  */
-import createHigherOrderComponent from '../../utils/create-higher-order-component';
+import {
+	createHigherOrderComponent,
+	WithInjectedProps,
+	WithoutInjectedProps,
+} from '../../utils/create-higher-order-component';
 import useInstanceId from '../../hooks/use-instance-id';
 
+type InstanceIdProps = { instanceId: string | number };
+
 /**
  * A Higher Order Component used to be provide a unique instance ID by
  * component.
  */
-const withInstanceId = createHigherOrderComponent< {
-	instanceId: string | number;
-} >( ( WrappedComponent ) => {
-	return ( props ) => {
-		const instanceId = useInstanceId( WrappedComponent );
-		// @ts-ignore
-		return <WrappedComponent { ...props } instanceId={ instanceId } />;
-	};
-}, 'withInstanceId' );
+const withInstanceId = createHigherOrderComponent(
+	< C extends WithInjectedProps< C, InstanceIdProps > >(
+		WrappedComponent: C
+	) => {
+		return ( props: WithoutInjectedProps< C, InstanceIdProps > ) => {
+			const instanceId = useInstanceId( WrappedComponent );
+			// @ts-ignore
+			return <WrappedComponent { ...props } instanceId={ instanceId } />;
+		};
+	},
+	'instanceId'
+);
 
 export default withInstanceId;

package/src/higher-order/with-preferred-color-scheme/index.native.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import createHigherOrderComponent from '../../utils/create-higher-order-component';
+import { createHigherOrderComponent } from '../../utils/create-higher-order-component';
 import usePreferredColorScheme from '../../hooks/use-preferred-color-scheme';
 
 /**

package/src/higher-order/with-safe-timeout/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { without } from 'lodash';
-import type { ComponentType } from 'react';
 
 /**
  * WordPress dependencies
@@ -12,7 +11,11 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import createHigherOrderComponent from '../../utils/create-higher-order-component';
+import {
+	createHigherOrderComponent,
+	WithInjectedProps,
+	WithoutInjectedProps,
+} from '../../utils/create-higher-order-component';
 
 /**
  * We cannot use the `Window['setTimeout']` and `Window['clearTimeout']`
@@ -22,25 +25,24 @@ import createHigherOrderComponent from '../../utils/create-higher-order-componen
  * In the case of this component, we only handle the simplest case where
  * `setTimeout` only accepts a function (not a string) and an optional delay.
  */
-type TimeoutProps = {
+interface TimeoutProps {
 	setTimeout: ( fn: () => void, delay: number ) => number;
 	clearTimeout: ( id: number ) => void;
-};
+}
 
 /**
  * A higher-order component used to provide and manage delayed function calls
  * that ought to be bound to a component's lifecycle.
  */
-const withSafeTimeout = createHigherOrderComponent< TimeoutProps >(
-	< TProps extends TimeoutProps >(
-		OriginalComponent: ComponentType< TProps >
+const withSafeTimeout = createHigherOrderComponent(
+	< C extends WithInjectedProps< C, TimeoutProps > >(
+		OriginalComponent: C
 	) => {
-		return class WrappedComponent extends Component<
-			Omit< TProps, keyof TimeoutProps >
-		> {
+		type WrappedProps = WithoutInjectedProps< C, TimeoutProps >;
+		return class WrappedComponent extends Component< WrappedProps > {
 			timeouts: number[];
 
-			constructor( props: Omit< TProps, keyof TimeoutProps > ) {
+			constructor( props: WrappedProps ) {
 				super( props );
 				this.timeouts = [];
 				this.setTimeout = this.setTimeout.bind( this );
@@ -51,7 +53,7 @@ const withSafeTimeout = createHigherOrderComponent< TimeoutProps >(
 				this.timeouts.forEach( clearTimeout );
 			}
 
-			setTimeout( fn: ( ...args: any[] ) => void, delay: number ) {
+			setTimeout( fn: () => void, delay: number ) {
 				const id = setTimeout( () => {
 					fn();
 					this.clearTimeout( id );
@@ -66,13 +68,14 @@ const withSafeTimeout = createHigherOrderComponent< TimeoutProps >(
 			}
 
 			render() {
-				const props = {
-					...this.props,
-					setTimeout: this.setTimeout,
-					clearTimeout: this.clearTimeout,
-				} as TProps;
-
-				return <OriginalComponent { ...props } />;
+				return (
+					// @ts-ignore
+					<OriginalComponent
+						{ ...this.props }
+						setTimeout={ this.setTimeout }
+						clearTimeout={ this.clearTimeout }
+					/>
+				);
 			}
 		};
 	},

package/src/higher-order/with-state/index.js

@@ -7,7 +7,7 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import createHigherOrderComponent from '../../utils/create-higher-order-component';
+import { createHigherOrderComponent } from '../../utils/create-higher-order-component';
 
 /**
  * A Higher Order Component used to provide and manage internal component state

package/src/hooks/use-copy-to-clipboard/index.js

@@ -35,7 +35,7 @@ function useUpdatedRef( value ) {
  * @return {import('react').Ref<TElementType>} A ref to assign to the target element.
  */
 export default function useCopyToClipboard( text, onSuccess ) {
-	// Store the dependencies as refs and continuesly update them so they're
+	// Store the dependencies as refs and continuously update them so they're
 	// fresh when the callback is called.
 	const textRef = useUpdatedRef( text );
 	const onSuccessRef = useUpdatedRef( onSuccess );

package/src/hooks/use-debounce/index.js

@@ -27,11 +27,10 @@ import { useEffect } from '@wordpress/element';
  */
 export default function useDebounce( fn, wait, options ) {
 	/* eslint-enable jsdoc/valid-types */
-	const debounced = useMemoOne( () => debounce( fn, wait, options ), [
-		fn,
-		wait,
-		options,
-	] );
+	const debounced = useMemoOne(
+		() => debounce( fn, wait, options ),
+		[ fn, wait, options ]
+	);
 	useEffect( () => () => debounced.cancel(), [ debounced ] );
 	return debounced;
 }

package/src/hooks/use-dialog/index.js

@@ -57,19 +57,20 @@ function useDialog( options ) {
 			return;
 		}
 
-		node.addEventListener( 'keydown', (
-			/** @type {KeyboardEvent} */ event
-		) => {
-			// Close on escape.
-			if (
-				event.keyCode === ESCAPE &&
-				! event.defaultPrevented &&
-				currentOptions.current?.onClose
-			) {
-				event.preventDefault();
-				currentOptions.current.onClose();
+		node.addEventListener(
+			'keydown',
+			( /** @type {KeyboardEvent} */ event ) => {
+				// Close on escape.
+				if (
+					event.keyCode === ESCAPE &&
+					! event.defaultPrevented &&
+					currentOptions.current?.onClose
+				) {
+					event.preventDefault();
+					currentOptions.current.onClose();
+				}
 			}
-		} );
+		);
 	}, [] );
 
 	return [