@wordpress/compose 8.1.0 → 8.1.2-next.v.202606191442.0

package/build-types/hooks/use-fixed-window-list/index.d.ts

@@ -1,38 +1,34 @@
-export type WPFixedWindowList = {
+interface FixedWindowList {
+    /** Items visible in the current viewport */
     visibleItems: number;
+    /** Start index of the window */
     start: number;
+    /** End index of the window */
     end: number;
+    /** Returns true if item is in the window */
     itemInView: (index: number) => boolean;
-};
-export type WPFixedWindowListOptions = {
+}
+interface FixedWindowListOptions {
+    /** Renders windowOverscan number of items before and after the calculated visible window. */
     windowOverscan?: number;
+    /** When false avoids calculating the window size */
     useWindowing?: boolean;
+    /** Initial window size to use on first render before we can calculate the window size. */
     initWindowSize?: number;
+    /** Used to recalculate the window size when the expanded state of a list changes. */
     expandedState?: any;
-};
+}
 /**
- * @typedef {Object} WPFixedWindowList
  *
- * @property {number}                  visibleItems Items visible in the current viewport
- * @property {number}                  start        Start index of the window
- * @property {number}                  end          End index of the window
- * @property {(index:number)=>boolean} itemInView   Returns true if item is in the window
+ * @param elementRef Used to find the closest scroll container that contains element.
+ * @param itemHeight Fixed item height in pixels
+ * @param totalItems Total items in list
+ * @param [options]  Options object
+ * @return Array with the fixed window list and setter
  */
-/**
- * @typedef {Object} WPFixedWindowListOptions
- *
- * @property {number}  [windowOverscan] Renders windowOverscan number of items before and after the calculated visible window.
- * @property {boolean} [useWindowing]   When false avoids calculating the window size
- * @property {number}  [initWindowSize] Initial window size to use on first render before we can calculate the window size.
- * @property {any}     [expandedState]  Used to recalculate the window size when the expanded state of a list changes.
- */
-/**
- *
- * @param {React.RefObject<HTMLElement>} elementRef Used to find the closest scroll container that contains element.
- * @param { number }                     itemHeight Fixed item height in pixels
- * @param { number }                     totalItems Total items in list
- * @param { WPFixedWindowListOptions }   [options]  Options object
- * @return {[ WPFixedWindowList, setFixedListWindow:(nextWindow:WPFixedWindowList)=>void]} Array with the fixed window list and setter
- */
-export default function useFixedWindowList(elementRef: React.RefObject<HTMLElement>, itemHeight: number, totalItems: number, options?: WPFixedWindowListOptions): [WPFixedWindowList, setFixedListWindow: (nextWindow: WPFixedWindowList) => void];
+export default function useFixedWindowList(elementRef: React.RefObject<HTMLElement>, itemHeight: number, totalItems: number, options?: FixedWindowListOptions): [
+    FixedWindowList,
+    React.Dispatch<React.SetStateAction<FixedWindowList>>
+];
+export {};
 //# sourceMappingURL=index.d.ts.map

package/build-types/hooks/use-fixed-window-list/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-fixed-window-list/index.js"],"names":[],"mappings":"AAeG,YAAkB,iBAAiB,GAEnC;IAAoC,YAAY,EAArC,MAAM,CACjB;IAAoC,KAAK,EAA9B,MAAM,CACjB;IAAoC,GAAG,EAA5B,MAAM,CACjB;IAAoC,UAAU,EAAnC,CAAC,KAAK,EAAC,MAAM,KAAG,OAAO,CACpC;CAAA,CAAA;AAGE,YAAkB,wBAAwB,GAE1C;IAAqB,cAAc,AAAnC,CACA,EADW,MAAM,CACjB;IAAqB,YAAY,AAAjC,CACA,EADW,OAAO,CAClB;IAAqB,cAAc,AAAnC,CACA,EADW,MAAM,CACjB;IAAqB,aAAa,AAAlC,CACF,EADa,GAAG,CAChB;CAAA,CAAA;AAhBD;;;;;;;GAOG;AAEH;;;;;;;GAOG;AAEH;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACzC,UAAU,EAPA,KAAK,CAAC,SAAS,CAAC,WAAW,CAO3B,EACV,UAAU,EAPC,MAOD,EACV,UAAU,EAPC,MAOD,EACV,OAAO,AAPL,CACA,EADS,wBAOJ,GANI,CAAE,iBAAiB,EAAE,kBAAkB,EAAC,CAAC,UAAU,EAAC,iBAAiB,KAAG,IAAI,CAAC,CA0JxF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-fixed-window-list/index.ts"],"names":[],"mappings":"AAcA,UAAU,eAAe;IACxB,4CAA4C;IAC5C,YAAY,EAAE,MAAM,CAAC;IACrB,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,4CAA4C;IAC5C,UAAU,EAAE,CAAE,KAAK,EAAE,MAAM,KAAM,OAAO,CAAC;CACzC;AAED,UAAU,sBAAsB;IAC/B,6FAA6F;IAC7F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oDAAoD;IACpD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0FAA0F;IAC1F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qFAAqF;IACrF,aAAa,CAAC,EAAE,GAAG,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACzC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAE,WAAW,CAAE,EAC1C,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,EAClB,OAAO,CAAC,EAAE,sBAAsB,GAC9B;IACF,eAAe;IACf,KAAK,CAAC,QAAQ,CAAE,KAAK,CAAC,cAAc,CAAE,eAAe,CAAE,CAAE;CACzD,CAqJA"}

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

@@ -2,11 +2,11 @@
  * Adds the unmount behavior of returning focus to the element which had it
  * previously as is expected for roles like menus or dialogs.
  *
- * @param {() => void} [onFocusReturn] Overrides the default return behavior.
- * @return {React.RefCallback<HTMLElement>} Element Ref.
+ * @param onFocusReturn Overrides the default return behavior.
+ * @return Element Ref.
  *
  * @example
- * ```js
+ * ```ts
  * import { useFocusReturn } from '@wordpress/compose';
  *
  * const WithFocusReturn = () => {

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":"AAQA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,iBAAS,cAAc,CAAE,aAAa,AAlBnC,CACA,EADQ,MAAM,IAkBqB,GAjB1B,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAsEzC;eAEc,cAAc"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-return/index.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,iBAAS,cAAc,CACtB,aAAa,CAAC,EAAE,MAAM,IAAI,GACxB,KAAK,CAAC,WAAW,CAAE,WAAW,CAAE,CAyDlC;eAEc,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-isomorphic-layout-effect/index.js"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAa,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEhE;;;;GAIG;AACH,QAAA,MAAM,yBAAyB,wBAC6B,CAAC;eAE9C,yBAAyB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-isomorphic-layout-effect/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAa,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEhE;;;;GAIG;AACH,QAAA,MAAM,yBAAyB,wBAC6B,CAAC;eAE9C,yBAAyB"}

package/build-types/hooks/use-keyboard-shortcut/index.d.ts

@@ -1,34 +1,40 @@
-/**
- * External dependencies
- */
-import Mousetrap from 'mousetrap';
 import 'mousetrap/plugins/global-bind/mousetrap-global-bind.js';
-export type WPKeyboardShortcutConfig = {
-    bindGlobal?: boolean;
-    eventName?: string;
-    isDisabled?: boolean;
-    target?: React.RefObject<HTMLElement | null>;
-};
+import type { ExtendedKeyboardEvent } from 'mousetrap';
 /**
- * A block selection object.
- *
- * @typedef {Object} WPKeyboardShortcutConfig
- *
- * @property {boolean}                             [bindGlobal] Handle keyboard events anywhere including inside textarea/input fields.
- * @property {string}                              [eventName]  Event name used to trigger the handler, defaults to keydown.
- * @property {boolean}                             [isDisabled] Disables the keyboard handler if the value is true.
- * @property {React.RefObject<HTMLElement | null>} [target]     React reference to the DOM element used to catch the keyboard event.
+ * WordPress dependencies
  */
+import type { RefObject } from '@wordpress/element';
+type KeyboardShortcutConfig = {
+    /**
+     * Handle keyboard events anywhere including inside textarea/input fields.
+     */
+    bindGlobal: boolean;
+    /**
+     * Event name used to trigger the handler, defaults to keydown.
+     */
+    eventName: string;
+    /**
+     * Disables the keyboard handler if the value is true.
+     */
+    isDisabled: boolean;
+    /**
+     * React reference to the DOM element used to catch the keyboard event.
+     */
+    target: RefObject<HTMLElement>;
+};
 /**
  * Attach a keyboard shortcut handler.
  *
  * @see https://craig.is/killing/mice#api.bind for information about the `callback` parameter.
  *
- * @param {string[]|string}                                             shortcuts Keyboard Shortcuts.
- * @param {(e: Mousetrap.ExtendedKeyboardEvent, combo: string) => void} callback  Shortcut callback.
- * @param {WPKeyboardShortcutConfig}                                    options   Shortcut options.
+ * @param shortcuts          Keyboard Shortcuts.
+ * @param callback           Shortcut callback.
+ * @param options            Shortcut options.
+ * @param options.bindGlobal
+ * @param options.eventName
+ * @param options.isDisabled
+ * @param options.target
  */
-declare function useKeyboardShortcut(shortcuts: string[] | string, callback: (e: Mousetrap.ExtendedKeyboardEvent, combo: string) => void, { bindGlobal, eventName, isDisabled, // This is important for performance considerations.
-target }?: WPKeyboardShortcutConfig): void;
+declare function useKeyboardShortcut(shortcuts: string[] | string, callback: (e: ExtendedKeyboardEvent, combo: string) => void, { bindGlobal, eventName, isDisabled, target }?: Partial<KeyboardShortcutConfig>): void;
 export default useKeyboardShortcut;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-keyboard-shortcut/index.js"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,SAAS,MAAM,WAAW,CAAC;AAClC,OAAO,wDAAwD,CAAC;AAW7D,YAAkB,wBAAwB,GAE1C;IAAiD,UAAU,AAA3D,CACA,EADW,OAAO,CAClB;IAAiD,SAAS,AAA1D,CACA,EADW,MAAM,CACjB;IAAiD,UAAU,AAA3D,CACA,EADW,OAAO,CAClB;IAAiD,MAAM,AAAvD,CACF,EADa,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAChD;CAAA,CAAA;AATD;;;;;;;;;GASG;AAEH;;;;;;;;GAQG;AACH,iBAAS,mBAAmB,CAC3B,SAAS,EALC,MAAM,EAAE,GAAC,MAKV,EACT,QAAQ,EALE,CAAC,CAAC,EAAE,SAAS,CAAC,qBAAqB,EAAE,KAAK,EAAE,MAAM,KAAK,IAKzD,EACR,EACC,UAAkB,EAClB,SAAqB,EACrB,UAAkB,EAAE,oDAAoD;AACxE,MAAM,EACN,GAVS,wBAUJ,QA2DN;eAEc,mBAAmB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-keyboard-shortcut/index.ts"],"names":[],"mappings":"AAIA,OAAO,wDAAwD,CAAC;AAChE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAEvD;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAIpD,KAAK,sBAAsB,GAAG;IAC7B;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,EAAE,SAAS,CAAE,WAAW,CAAE,CAAC;CACjC,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,iBAAS,mBAAmB,CAC3B,SAAS,EAAE,MAAM,EAAE,GAAG,MAAM,EAC5B,QAAQ,EAAE,CAAE,CAAC,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,KAAM,IAAI,EAC7D,EACC,UAAkB,EAClB,SAAqB,EACrB,UAAkB,EAClB,MAAM,EACN,GAAE,OAAO,CAAE,sBAAsB,CAAO,QA4DzC;eAEc,mBAAmB"}

package/build-types/hooks/use-media-query/index.d.ts

@@ -5,5 +5,5 @@
  * @param [view]  Window instance, else default to global window
  * @return return value of the media query.
  */
-export default function useMediaQuery(query?: string, view?: Window): boolean;
+export default function useMediaQuery(query?: string, view?: Window | undefined): boolean;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-media-query/index.ts"],"names":[],"mappings":"AAoEA;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CACpC,KAAK,CAAC,EAAE,MAAM,EACd,IAAI,GAAE,MAAe,GACnB,OAAO,CAQT"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-media-query/index.ts"],"names":[],"mappings":"AAuEA;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CACpC,KAAK,CAAC,EAAE,MAAM,EAGd,IAAI,GAAE,MAAM,GAAG,SAEH,GACV,OAAO,CAQT"}

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

@@ -15,22 +15,24 @@ import type { Ref, RefCallback } from 'react';
  * old ref callback will be called with `null` and the new ref callback will be
  * called with the same value.
  *
- * To make ref callbacks easier to use, you can also pass the result of
- * `useRefEffect`, which makes cleanup easier by allowing you to return a
- * cleanup function instead of handling `null`.
+ * Inner ref callbacks may return a cleanup function (React 19's ref callback
+ * cleanup pattern). When a ref callback returns a function, that function is
+ * invoked at teardown (node change, dependency change, or unmount) **instead
+ * of** the callback being called with `null`. Callbacks that do not return a
+ * cleanup continue to receive `null` on teardown as before.
  *
  * It's also possible to _disable_ a ref (and its behaviour) by simply not
  * passing the ref.
  *
  * ```jsx
- * const ref = useRefEffect( ( node ) => {
+ * const ref = useCallback( ( node ) => {
  *   node.addEventListener( ... );
  *   return () => {
  *     node.removeEventListener( ... );
  *   };
  * }, [ ...dependencies ] );
  * const otherRef = useRef();
- * const mergedRefs useMergeRefs( [
+ * const mergedRefs = useMergeRefs( [
  *   enabled && ref,
  *   otherRef,
  * ] );

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.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAoB,GAAG,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAUhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,CAAC,EACtC,IAAI,EAAE,GAAG,CAAE,CAAC,CAAE,EAAE,GACd,WAAW,CAAE,CAAC,CAAE,CA0DlB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-merge-refs/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAoB,GAAG,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AA+BhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,CAAC,EACtC,IAAI,EAAE,GAAG,CAAE,CAAC,CAAE,EAAE,GACd,WAAW,CAAE,CAAC,CAAE,CAkElB"}

package/build-types/hooks/use-reduced-motion/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * Hook returning whether the user has a preference for reduced motion.
  *
- * @return {boolean} Reduced motion preference value.
+ * @return Reduced motion preference value.
  */
 declare const useReducedMotion: () => boolean;
 export default useReducedMotion;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-reduced-motion/index.js"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,QAFV,OAGwC,CAAC;eAEtC,gBAAgB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-reduced-motion/index.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,QAAO,OACuB,CAAC;eAEtC,gBAAgB"}

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

@@ -1,3 +1,5 @@
+import type { ThrottleOptions } from '../../utils/throttle';
+import type { DebouncedFunc } from '../../utils/debounce';
 /**
  * Throttles a function similar to Lodash's `throttle`. A new throttled function will
  * be returned and any scheduled calls cancelled if any of the arguments change,
@@ -6,12 +8,12 @@
  *
  * @see https://lodash.com/docs/4#throttle
  *
- * @template {(...args: any[]) => void} TFunc
+ * @template TFunc
  *
- * @param {TFunc}                                          fn        The function to throttle.
- * @param {number}                                         [wait]    The number of milliseconds to throttle invocations to.
- * @param {import('../../utils/throttle').ThrottleOptions} [options] The options object. See linked documentation for details.
- * @return {import('../../utils/debounce').DebouncedFunc<TFunc>} Throttled function.
+ * @param    fn      The function to throttle.
+ * @param    wait    The number of milliseconds to throttle invocations to.
+ * @param    options The options object.
+ * @return          Throttled function.
  */
-export default function useThrottle<TFunc extends (...args: any[]) => void>(fn: TFunc, wait?: number, options?: import('../../utils/throttle').ThrottleOptions): import('../../utils/debounce').DebouncedFunc<TFunc>;
+export default function useThrottle<TFunc extends (...args: any[]) => void>(fn: TFunc, wait?: number, options?: ThrottleOptions): DebouncedFunc<TFunc>;
 //# sourceMappingURL=index.d.ts.map

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":"AAeA;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAPK,KAAK,SAA/B,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAW,EAOR,EAAE,EAL5B,KAK4B,EAAE,IAAI,AAJ1C,CACA,EADQ,MAIkC,EAAE,OAAO,AAHnD,CACA,EADQ,OAAO,sBAAsB,EAAE,eAGY,GAF1C,OAAO,sBAAsB,EAAE,aAAa,CAAC,KAAK,CAAC,CAS9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-throttle/index.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,KAAK,SAAS,CAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAM,IAAI,EAC5E,EAAE,EAAE,KAAK,EACT,IAAI,CAAC,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,eAAe,GACvB,aAAa,CAAE,KAAK,CAAE,CAOxB"}

package/build-types/hooks/use-viewport-match/index.d.ts

@@ -1,6 +1,6 @@
-export type WPBreakpoint = "xhuge" | "huge" | "wide" | "xlarge" | "large" | "medium" | "small" | "mobile";
-export type WPViewportOperator = ">=" | "<";
-declare function useViewportMatch(breakpoint: WPBreakpoint, operator?: WPViewportOperator, view?: Window): boolean;
+type Breakpoint = 'xhuge' | 'huge' | 'wide' | 'xlarge' | 'large' | 'medium' | 'small' | 'mobile';
+type ViewportOperator = '>=' | '<';
+declare function useViewportMatch(breakpoint: Breakpoint, operator?: ViewportOperator, view?: Window | undefined): boolean;
 declare namespace useViewportMatch {
     var __experimentalWidthProvider: import("react").Provider<number | null>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-viewport-match/index.js"],"names":[],"mappings":"AAWG,YAA0F,YAAY,GAA5F,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAc;AAsBtG,YAAsB,kBAAkB,GAA9B,IAAI,GAAG,GAAG,CAAoB;kCA4ChB,UAAU,EAb1B,YAa0B,EAAE,QAAQ,GAZpC,kBAY2C,EAAE,IAAI,GAXjD,MAW0D,GAFzD,OAAO;;;;eAoBJ,gBAAgB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-viewport-match/index.ts"],"names":[],"mappings":"AAUA,KAAK,UAAU,GACZ,OAAO,GACP,MAAM,GACN,MAAM,GACN,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AACZ,KAAK,gBAAgB,GAAG,IAAI,GAAG,GAAG,CAAC;kCAyDlC,UAAU,EAAE,UAAU,EACtB,QAAQ,GAAE,gBAAuB,EAGjC,IAAI,GAAE,MAAM,GAAG,SAEH,GACV,OAAO;;;;eAmBK,gBAAgB"}

package/build-types/hooks/use-warn-on-change/index.d.ts

@@ -1,21 +1,21 @@
 /**
- * Hook that performs a shallow comparison between the preview value of an object
+ * 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.
+ * This is useful in performance related work, to check why a component re-renders.
  *
  *  @example
  *
- * ```jsx
- * function MyComponent(props) {
+ * ```tsx
+ * function MyComponent(props: Record<string, any>) {
  *    useWarnOnChange(props);
  *
  *    return "Something";
  * }
  * ```
  *
- * @param {object} object Object which changes to compare.
- * @param {string} prefix Just a prefix to show when console logging.
+ * @param object Object which changes to compare.
+ * @param prefix Just a prefix to show when console logging.
  */
-declare function useWarnOnChange(object: object, prefix?: string): void;
+declare function useWarnOnChange(object: Record<string, any> | any[], prefix?: string): void;
 export default useWarnOnChange;
 //# sourceMappingURL=index.d.ts.map

package/build-types/hooks/use-warn-on-change/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-warn-on-change/index.js"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,eAAe,CAAE,MAAM,EAHrB,MAGqB,EAAE,MAAM,GAF7B,MAEkD,QAc5D;eAEc,eAAe"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-warn-on-change/index.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,eAAe,CACvB,MAAM,EAAE,MAAM,CAAE,MAAM,EAAE,GAAG,CAAE,GAAG,GAAG,EAAE,EACrC,MAAM,GAAE,MAA2B,GACjC,IAAI,CAaN;eAEc,eAAe"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "8.1.0",
+	"version": "8.1.2-next.v.202606191442.0+17fe7db8a",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -41,32 +41,41 @@
 		},
 		"./package.json": "./package.json"
 	},
-	"react-native": "src/index",
 	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
 		"@types/mousetrap": "^1.6.8",
-		"@wordpress/deprecated": "^4.48.0",
-		"@wordpress/dom": "^4.48.0",
-		"@wordpress/element": "^8.0.0",
-		"@wordpress/is-shallow-equal": "^5.48.0",
-		"@wordpress/keycodes": "^4.48.0",
-		"@wordpress/priority-queue": "^3.48.0",
-		"@wordpress/private-apis": "^1.48.0",
-		"@wordpress/undo-manager": "^1.48.0",
+		"@wordpress/deprecated": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/dom": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/element": "^8.0.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/is-shallow-equal": "^5.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/keycodes": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/priority-queue": "^3.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/private-apis": "^1.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/undo-manager": "^1.48.2-next.v.202606191442.0+17fe7db8a",
 		"change-case": "^4.1.2",
 		"mousetrap": "^1.6.5",
 		"use-memo-one": "^1.1.1"
 	},
 	"devDependencies": {
-		"mock-match-media": "0.4.2"
+		"@testing-library/dom": "^10.4.1",
+		"@testing-library/react": "^16.3.2",
+		"@testing-library/user-event": "^14.6.1",
+		"mock-match-media": "^0.4.2",
+		"react-dom": "^18.3.1"
 	},
 	"peerDependencies": {
+		"@types/react": "^18.3.27",
 		"react": "^18.0.0"
 	},
+	"peerDependenciesMeta": {
+		"@types/react": {
+			"optional": true
+		}
+	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e7856693aeb4e2522d13608cd32c994e4a97cb9c"
+	"gitHead": "1b6a19222df5a88f161880b5789efb3171d8f425"
 }

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

@@ -8,6 +8,7 @@ import type { ComponentType, ComponentClass } from 'react';
  */
 import { isShallowEqual } from '@wordpress/is-shallow-equal';
 import { Component } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -23,6 +24,11 @@ import { createHigherOrderComponent } from '../../utils/create-higher-order-comp
 const pure = createHigherOrderComponent( function < Props extends {} >(
 	WrappedComponent: ComponentType< Props >
 ): ComponentType< Props > {
+	deprecated( 'wp.compose.pure', {
+		since: '7.1',
+		alternative: 'Use `memo` or `PureComponent` instead',
+	} );
+
 	if ( WrappedComponent.prototype instanceof Component ) {
 		return class extends ( WrappedComponent as ComponentClass< Props > ) {
 			shouldComponentUpdate( nextProps: Props, nextState: any ) {

package/src/higher-order/pure/test/index.js

@@ -2,12 +2,11 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { logged } from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -15,88 +14,22 @@ import { Component } from '@wordpress/element';
 import pure from '../';
 
 describe( 'pure', () => {
-	it( 'functional component should rerender only when props change', () => {
-		let i = 0;
-		const MyComp = pure( () => {
-			return <p data-testid="counter">{ ++i }</p>;
-		} );
-		const { rerender } = render( <MyComp /> );
-
-		// Updating with same props doesn't rerender.
-		rerender( <MyComp /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '1' );
-
-		// New prop should trigger a rerender.
-		rerender( <MyComp { ...{ prop: 'a' } } /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '2' );
-
-		// Keeping the same prop value should not rerender.
-		rerender( <MyComp { ...{ prop: 'a' } } /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '2' );
-
-		// Changing the prop value should rerender.
-		rerender( <MyComp { ...{ prop: 'b' } } /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '3' );
+	afterEach( () => {
+		for ( const key in logged ) {
+			delete logged[ key ];
+		}
 	} );
 
-	it( 'class component should rerender if the props or state change', async () => {
-		const user = userEvent.setup();
-		let i = 0;
-		const MyComp = pure(
-			class extends Component {
-				constructor() {
-					super( ...arguments );
-					this.state = {
-						val: '',
-					};
-				}
-				render() {
-					return (
-						<>
-							<p data-testid="counter">{ ++i }</p>
-							<input
-								type="text"
-								value={ this.state.val }
-								onChange={ ( e ) =>
-									this.setState( { val: e.target.value } )
-								}
-							/>
-							<input
-								type="button"
-								onClick={ () =>
-									this.setState( { val: this.state.val } )
-								}
-							/>
-						</>
-					);
-				}
-			}
-		);
-
-		const { rerender } = render( <MyComp /> );
+	it( 'wraps a component and logs a deprecation warning', () => {
+		const MyComp = pure( () => <p data-testid="content">content</p> );
 
-		// Updating with same props doesn't rerender.
-		rerender( <MyComp /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '1' );
+		render( <MyComp /> );
 
-		// New prop should trigger a rerender.
-		rerender( <MyComp { ...{ prop: 'a' } } /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '2' );
-
-		// Keeping the same prop value should not rerender.
-		rerender( <MyComp { ...{ prop: 'a' } } /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '2' );
-
-		// Changing the prop value should rerender.
-		rerender( <MyComp { ...{ prop: 'b' } } /> );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '3' );
-
-		// New state value should trigger a rerender.
-		await user.type( screen.getByRole( 'textbox' ), 'a' );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '4' );
-
-		// Keeping the same state value should not trigger a rerender.
-		await user.click( screen.getByRole( 'button' ) );
-		expect( screen.getByTestId( 'counter' ) ).toHaveTextContent( '4' );
+		expect( console ).toHaveWarnedWith(
+			'wp.compose.pure is deprecated since version 7.1. Please use Use `memo` or `PureComponent` instead instead.'
+		);
+		expect( screen.getByTestId( 'content' ) ).toHaveTextContent(
+			'content'
+		);
 	} );
 } );

package/src/hooks/use-constrained-tabbing/{index.js → index.ts}

@@ -12,10 +12,10 @@ import useRefEffect from '../use-ref-effect';
  * 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 {React.RefCallback<Element>} Element Ref.
+ * @return Element Ref.
  *
  * @example
- * ```js
+ * ```ts
  * import { useConstrainedTabbing } from '@wordpress/compose';
  *
  * const ConstrainedTabbingExample = () => {
@@ -29,9 +29,9 @@ import useRefEffect from '../use-ref-effect';
  * }
  * ```
  */
-function useConstrainedTabbing() {
-	return useRefEffect( ( /** @type {HTMLElement} */ node ) => {
-		function onKeyDown( /** @type {KeyboardEvent} */ event ) {
+function useConstrainedTabbing(): React.RefCallback< Element > {
+	return useRefEffect( ( node: HTMLElement ) => {
+		function onKeyDown( event: KeyboardEvent ): void {
 			const { key, shiftKey, target } = event;
 
 			if ( key !== 'Tab' ) {
@@ -40,9 +40,7 @@ function useConstrainedTabbing() {
 
 			const action = shiftKey ? 'findPrevious' : 'findNext';
 			const nextElement =
-				focus.tabbable[ action ](
-					/** @type {HTMLElement} */ ( target )
-				) || null;
+				focus.tabbable[ action ]( target as HTMLElement ) || null;
 
 			// When the target element contains the element that is about to
 			// receive focus, for example when the target is a tabbable
@@ -50,9 +48,7 @@ function useConstrainedTabbing() {
 			// In this case we can't rely on native browsers behavior. We need
 			// to manage focus instead.
 			// See https://github.com/WordPress/gutenberg/issues/46041.
-			if (
-				/** @type {HTMLElement} */ ( target ).contains( nextElement )
-			) {
+			if ( ( target as HTMLElement ).contains( nextElement ) ) {
 				event.preventDefault();
 				nextElement?.focus();
 				return;

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

@@ -12,6 +12,7 @@ import { useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import { debounce } from '../../utils/debounce';
+import type { DebounceOptions, DebouncedFunc } from '../../utils/debounce';
 
 /**
  * Debounces a function similar to Lodash's `debounce`. A new debounced function will
@@ -21,14 +22,18 @@ import { debounce } from '../../utils/debounce';
  *
  * @see https://lodash.com/docs/4#debounce
  *
- * @template {(...args: any[]) => void} TFunc
+ * @template TFunc
  *
- * @param {TFunc}                                          fn        The function to debounce.
- * @param {number}                                         [wait]    The number of milliseconds to delay.
- * @param {import('../../utils/debounce').DebounceOptions} [options] The options object.
- * @return {import('../../utils/debounce').DebouncedFunc<TFunc>} Debounced function.
+ * @param    fn      The function to debounce.
+ * @param    wait    The number of milliseconds to delay.
+ * @param    options The options object.
+ * @return          Debounced function.
  */
-export default function useDebounce( fn, wait, options ) {
+export default function useDebounce< TFunc extends ( ...args: any[] ) => void >(
+	fn: TFunc,
+	wait?: number,
+	options?: DebounceOptions
+): DebouncedFunc< TFunc > {
 	const debounced = useMemoOne(
 		() => debounce( fn, wait ?? 0, options ),
 		[ fn, wait, options?.leading, options?.trailing, options?.maxWait ]

package/src/hooks/use-disabled/index.ts

@@ -32,6 +32,8 @@ import useRefEffect from '../use-ref-effect';
  */
 export default function useDisabled( {
 	isDisabled: isDisabledProp = false,
+}: {
+	isDisabled?: boolean;
 } = {} ) {
 	return useRefEffect(
 		( node ) => {
@@ -45,7 +47,7 @@ export default function useDisabled( {
 			}
 
 			/** A variable keeping track of the previous updates in order to restore them. */
-			const updates: Function[] = [];
+			const updates: ( () => void )[] = [];
 			const disable = () => {
 				node.childNodes.forEach( ( child ) => {
 					if ( ! ( child instanceof defaultView.HTMLElement ) ) {