@wordpress/compose 8.1.1 → 8.2.0

package/src/hooks/use-viewport-match/{index.js → index.ts}

@@ -8,18 +8,23 @@ import { createContext, useContext } from '@wordpress/element';
  */
 import useMediaQuery from '../use-media-query';
 
-/**
- * @typedef {"xhuge" | "huge" | "wide" | "xlarge" | "large" | "medium" | "small" | "mobile"} WPBreakpoint
- */
+type Breakpoint =
+	| 'xhuge'
+	| 'huge'
+	| 'wide'
+	| 'xlarge'
+	| 'large'
+	| 'medium'
+	| 'small'
+	| 'mobile';
+type ViewportOperator = '>=' | '<';
 
 /**
  * Hash of breakpoint names with pixel width at which it becomes effective.
  *
  * @see _breakpoints.scss
- *
- * @type {Record<WPBreakpoint, number>}
  */
-const BREAKPOINTS = {
+const BREAKPOINTS: Record< Breakpoint, number > = {
 	xhuge: 1920,
 	huge: 1440,
 	wide: 1280,
@@ -30,63 +35,59 @@ const BREAKPOINTS = {
 	mobile: 480,
 };
 
-/**
- * @typedef {">=" | "<"} WPViewportOperator
- */
-
 /**
  * Object mapping media query operators to the condition to be used.
- *
- * @type {Record<WPViewportOperator, string>}
  */
-const CONDITIONS = {
+const CONDITIONS: Record< ViewportOperator, string > = {
 	'>=': 'min-width',
 	'<': 'max-width',
 };
 
 /**
- * Object mapping media query operators to a function that given a breakpointValue and a width evaluates if the operator matches the values.
- *
- * @type {Record<WPViewportOperator, (breakpointValue: number, width: number) => boolean>}
+ * Object mapping media query operators to a function that evaluates if the operator matches.
  */
-const OPERATOR_EVALUATORS = {
+const OPERATOR_EVALUATORS: Record<
+	ViewportOperator,
+	( breakpointValue: number, width: number ) => boolean
+> = {
 	'>=': ( breakpointValue, width ) => width >= breakpointValue,
 	'<': ( breakpointValue, width ) => width < breakpointValue,
 };
 
-const ViewportMatchWidthContext = createContext(
-	/** @type {null | number} */ ( null )
-);
+const ViewportMatchWidthContext = createContext< number | null >( null );
 ViewportMatchWidthContext.displayName = 'ViewportMatchWidthContext';
 
 /**
  * Returns true if the viewport matches the given query, or false otherwise.
  *
- * @param {WPBreakpoint}       breakpoint      Breakpoint size name.
- * @param {WPViewportOperator} [operator=">="] Viewport operator.
- * @param {Window|undefined}   [view=window]   Window instance in which to perform viewport matching.
+ * @param breakpoint Breakpoint size name.
+ * @param operator   Viewport operator.
+ * @param view       Window instance in which to perform viewport matching.
  *
  * @example
  *
- * ```js
+ * ```ts
  * useViewportMatch( 'huge', '<' );
  * useViewportMatch( 'medium' );
  * ```
  *
- * @return {boolean} Whether viewport matches query.
+ * @return Whether viewport matches query.
  */
 const useViewportMatch = (
-	breakpoint,
-	operator = '>=',
+	breakpoint: Breakpoint,
+	operator: ViewportOperator = '>=',
 	// Resolve the default lazily so SSR (where `window` is undeclared) does not
 	// throw a ReferenceError when this default expression is evaluated.
-	view = typeof window !== 'undefined' ? window : undefined
-) => {
+	view: Window | undefined = typeof window !== 'undefined'
+		? window
+		: undefined
+): boolean => {
 	const simulatedWidth = useContext( ViewportMatchWidthContext );
 	const mediaQuery =
 		! simulatedWidth &&
 		`(${ CONDITIONS[ operator ] }: ${ BREAKPOINTS[ breakpoint ] }px)`;
 	const mediaQueryResult = useMediaQuery( mediaQuery || undefined, view );
+
 	if ( simulatedWidth ) {
 		return OPERATOR_EVALUATORS[ operator ](
 			BREAKPOINTS[ breakpoint ],

package/src/hooks/use-warn-on-change/index.ts

@@ -0,0 +1,42 @@
+/**
+ * Internal dependencies
+ */
+import usePrevious from '../use-previous';
+
+/**
+ * Hook that performs a shallow comparison between the previous value of an object
+ * and the new one, if there's a difference, it prints it to the console.
+ * This is useful in performance related work, to check why a component re-renders.
+ *
+ *  @example
+ *
+ * ```tsx
+ * function MyComponent(props: Record<string, any>) {
+ *    useWarnOnChange(props);
+ *
+ *    return "Something";
+ * }
+ * ```
+ *
+ * @param object Object which changes to compare.
+ * @param prefix Just a prefix to show when console logging.
+ */
+function useWarnOnChange(
+	object: Record< string, any > | any[],
+	prefix: string = 'Change detection'
+): void {
+	const previousValues = usePrevious( object );
+
+	Object.entries( previousValues ?? [] ).forEach( ( [ key, value ] ) => {
+		if ( value !== object[ key as keyof typeof object ] ) {
+			// eslint-disable-next-line no-console
+			console.warn(
+				`${ prefix }: ${ key } key changed:`,
+				value,
+				object[ key as keyof typeof object ]
+			);
+		}
+	} );
+}
+
+export default useWarnOnChange;

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

@@ -1,74 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import useIsomorphicLayoutEffect from '../use-isomorphic-layout-effect';
-
-// Event handlers that are triggered from `document` listeners accept a MouseEvent,
-// while those triggered from React listeners accept a React.MouseEvent.
-/**
- * @param {Object}                        props
- * @param {(e: React.MouseEvent) => void} props.onDragStart
- * @param {(e: MouseEvent) => void}       props.onDragMove
- * @param {(e?: MouseEvent) => void}      props.onDragEnd
- */
-export default function useDragging( { onDragStart, onDragMove, onDragEnd } ) {
-	const [ isDragging, setIsDragging ] = useState( false );
-
-	const eventsRef = useRef( {
-		onDragStart,
-		onDragMove,
-		onDragEnd,
-	} );
-	useIsomorphicLayoutEffect( () => {
-		eventsRef.current.onDragStart = onDragStart;
-		eventsRef.current.onDragMove = onDragMove;
-		eventsRef.current.onDragEnd = onDragEnd;
-	}, [ onDragStart, onDragMove, onDragEnd ] );
-
-	/** @type {(e: MouseEvent) => void} */
-	const onMouseMove = useCallback(
-		( event ) =>
-			eventsRef.current.onDragMove &&
-			eventsRef.current.onDragMove( event ),
-		[]
-	);
-	/** @type {(e?: MouseEvent) => void} */
-	const endDrag = useCallback( ( event ) => {
-		if ( eventsRef.current.onDragEnd ) {
-			eventsRef.current.onDragEnd( event );
-		}
-		document.removeEventListener( 'mousemove', onMouseMove );
-		document.removeEventListener( 'mouseup', endDrag );
-		setIsDragging( false );
-	}, [] );
-	/** @type {(e: React.MouseEvent) => void} */
-	const startDrag = useCallback( ( event ) => {
-		if ( eventsRef.current.onDragStart ) {
-			eventsRef.current.onDragStart( event );
-		}
-		document.addEventListener( 'mousemove', onMouseMove );
-		document.addEventListener( 'mouseup', endDrag );
-		setIsDragging( true );
-	}, [] );
-
-	// Remove the global events when unmounting if needed.
-	useEffect( () => {
-		return () => {
-			if ( isDragging ) {
-				document.removeEventListener( 'mousemove', onMouseMove );
-				document.removeEventListener( 'mouseup', endDrag );
-			}
-		};
-	}, [ isDragging ] );
-
-	return {
-		startDrag,
-		endDrag,
-		isDragging,
-	};
-}

package/src/hooks/use-warn-on-change/index.js

@@ -1,43 +0,0 @@
-/**
- * Internal dependencies
- */
-import usePrevious from '../use-previous';
-
-// Disable reason: Object and object are distinctly different types in TypeScript and we mean the lowercase object in this case
-// but eslint wants to force us to use `Object`. See https://stackoverflow.com/questions/49464634/difference-between-object-and-object-in-typescript
-/* eslint-disable jsdoc/check-types */
-/**
- * Hook that performs a shallow comparison between the preview value of an object
- * and the new one, if there's a difference, it prints it to the console.
- * this is useful in performance related work, to check why a component re-renders.
- *
- *  @example
- *
- * ```jsx
- * function MyComponent(props) {
- *    useWarnOnChange(props);
- *
- *    return "Something";
- * }
- * ```
- *
- * @param {object} object Object which changes to compare.
- * @param {string} prefix Just a prefix to show when console logging.
- */
-function useWarnOnChange( object, prefix = 'Change detection' ) {
-	const previousValues = usePrevious( object );
-
-	Object.entries( previousValues ?? [] ).forEach( ( [ key, value ] ) => {
-		if ( value !== object[ /** @type {keyof typeof object} */ ( key ) ] ) {
-			// eslint-disable-next-line no-console
-			console.warn(
-				`${ prefix }: ${ key } key changed:`,
-				value,
-				object[ /** @type {keyof typeof object} */ ( key ) ]
-				/* eslint-enable jsdoc/check-types */
-			);
-		}
-	} );
-}
-
-export default useWarnOnChange;