@wordpress/components 28.6.0 → 28.8.0

package/build-module/utils/element-rect.js

@@ -2,98 +2,13 @@
 /**
  * WordPress dependencies
  */
-import { useRef, useEffect, useState } from '@wordpress/element';
+import { useLayoutEffect, useRef, useState } from '@wordpress/element';
+import { useResizeObserver } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 import { useEvent } from './hooks/use-event';
 
-/**
- * `useTrackElementRectUpdates` options.
- */
-
-/**
- * Tracks an element's "rect" (size and position) and fires `onRect` for all
- * of its discrete values. The element can be changed dynamically and **it
- * must not be stored in a ref**. Instead, it should be stored in a React
- * state or equivalent.
- *
- * By default, `onRect` is called initially for the target element (including
- * when the target element changes), not only on size or position updates.
- * This allows consumers of the hook to always be in sync with all rect values
- * of the target element throughout its lifetime. This behavior can be
- * disabled by setting the `fireOnElementInit` option to `false`.
- *
- * Under the hood, it sets up a `ResizeObserver` that tracks the element. The
- * target element can be changed dynamically, and the observer will be
- * updated accordingly.
- *
- * @example
- *
- * ```tsx
- * const [ targetElement, setTargetElement ] = useState< HTMLElement | null >();
- *
- * useTrackElementRectUpdates( targetElement, ( element ) => {
- *   console.log( 'Element resized:', element );
- * } );
- *
- * <div ref={ setTargetElement } />;
- * ```
- */
-export function useTrackElementRectUpdates(
-/**
- * The target element to observe. It can be changed dynamically.
- */
-targetElement,
-/**
- * Callback to fire when the element is resized. It will also be
- * called when the observer is set up, unless `fireOnElementInit` is
- * set to `false`.
- */
-onRect, {
-  fireOnElementInit = true
-} = {}) {
-  const onRectEvent = useEvent(onRect);
-  const observedElementRef = useRef();
-  const resizeObserverRef = useRef();
-
-  // TODO: could this be a layout effect?
-  useEffect(() => {
-    if (targetElement === observedElementRef.current) {
-      return;
-    }
-    observedElementRef.current = targetElement;
-
-    // Set up a ResizeObserver.
-    if (!resizeObserverRef.current) {
-      resizeObserverRef.current = new ResizeObserver(entries => {
-        if (observedElementRef.current) {
-          onRectEvent(observedElementRef.current, entries);
-        }
-      });
-    }
-    const {
-      current: resizeObserver
-    } = resizeObserverRef;
-
-    // Observe new element.
-    if (targetElement) {
-      if (fireOnElementInit) {
-        // TODO: investigate if this can be removed,
-        // see: https://stackoverflow.com/a/60026394
-        onRectEvent(targetElement);
-      }
-      resizeObserver.observe(targetElement);
-    }
-    return () => {
-      // Unobserve previous element.
-      if (observedElementRef.current) {
-        resizeObserver.unobserve(observedElementRef.current);
-      }
-    };
-  }, [fireOnElementInit, onRectEvent, targetElement]);
-}
-
 /**
  * The position and dimensions of an element, relative to its offset parent.
  */
@@ -102,44 +17,98 @@ onRect, {
  * An `ElementOffsetRect` object with all values set to zero.
  */
 export const NULL_ELEMENT_OFFSET_RECT = {
-  left: 0,
   top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
   width: 0,
   height: 0
 };
 
 /**
  * Returns the position and dimensions of an element, relative to its offset
- * parent. This is useful in contexts where `getBoundingClientRect` is not
- * suitable, such as when the element is transformed.
+ * parent, with subpixel precision. Values reflect the real measures before any
+ * potential scaling distortions along the X and Y axes.
  *
- * **Note:** the `left` and `right` values are adjusted due to a limitation
- * in the way the browser calculates the offset position of the element,
- * which can cause unwanted scrollbars to appear. This adjustment makes the
- * values potentially inaccurate within a range of 1 pixel.
+ * Useful in contexts where plain `getBoundingClientRect` calls or `ResizeObserver`
+ * entries are not suitable, such as when the element is transformed, and when
+ * `element.offset<Top|Left|Width|Height>` methods are not precise enough.
+ *
+ * **Note:** in some contexts, like when the scale is 0, this method will fail
+ * because it's impossible to calculate a scaling ratio. When that happens, it
+ * will return `undefined`.
  */
 export function getElementOffsetRect(element) {
+  var _element$offsetParent;
+  // Position and dimension values computed with `getBoundingClientRect` have
+  // subpixel precision, but are affected by distortions since they represent
+  // the "real" measures, or in other words, the actual final values as rendered
+  // by the browser.
+  const rect = element.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) {
+    return;
+  }
+  const offsetParentRect = (_element$offsetParent = element.offsetParent?.getBoundingClientRect()) !== null && _element$offsetParent !== void 0 ? _element$offsetParent : NULL_ELEMENT_OFFSET_RECT;
+
+  // Computed widths and heights have subpixel precision, and are not affected
+  // by distortions.
+  const computedWidth = parseFloat(getComputedStyle(element).width);
+  const computedHeight = parseFloat(getComputedStyle(element).height);
+
+  // We can obtain the current scale factor for the element by comparing "computed"
+  // dimensions with the "real" ones.
+  const scaleX = computedWidth / rect.width;
+  const scaleY = computedHeight / rect.height;
   return {
-    // The adjustments mentioned in the documentation above are necessary
-    // because `offsetLeft` and `offsetTop` are rounded to the nearest pixel,
-    // which can result in a position mismatch that causes unwanted overflow.
-    // For context, see: https://github.com/WordPress/gutenberg/pull/61979
-    left: Math.max(element.offsetLeft - 1, 0),
-    top: Math.max(element.offsetTop - 1, 0),
-    // This is a workaround to obtain these values with a sub-pixel precision,
-    // since `offsetWidth` and `offsetHeight` are rounded to the nearest pixel.
-    width: parseFloat(getComputedStyle(element).width),
-    height: parseFloat(getComputedStyle(element).height)
+    // To obtain the adjusted values for the position:
+    // 1. Compute the element's position relative to the offset parent.
+    // 2. Correct for the scale factor.
+    top: (rect.top - offsetParentRect?.top) * scaleY,
+    right: (offsetParentRect?.right - rect.right) * scaleX,
+    bottom: (offsetParentRect?.bottom - rect.bottom) * scaleY,
+    left: (rect.left - offsetParentRect?.left) * scaleX,
+    // Computed dimensions don't need any adjustments.
+    width: computedWidth,
+    height: computedHeight
   };
 }
+const POLL_RATE = 100;
 
 /**
  * Tracks the position and dimensions of an element, relative to its offset
  * parent. The element can be changed dynamically.
+ *
+ * **Note:** sometimes, the measurement will fail (see `getElementOffsetRect`'s
+ * documentation for more details). When that happens, this hook will attempt
+ * to measure again after a frame, and if that fails, it will poll every 100
+ * milliseconds until it succeeds.
  */
 export function useTrackElementOffsetRect(targetElement) {
   const [indicatorPosition, setIndicatorPosition] = useState(NULL_ELEMENT_OFFSET_RECT);
-  useTrackElementRectUpdates(targetElement, element => setIndicatorPosition(getElementOffsetRect(element)));
+  const intervalRef = useRef();
+  const measure = useEvent(() => {
+    if (targetElement) {
+      const elementOffsetRect = getElementOffsetRect(targetElement);
+      if (elementOffsetRect) {
+        setIndicatorPosition(elementOffsetRect);
+        clearInterval(intervalRef.current);
+        return true;
+      }
+    } else {
+      clearInterval(intervalRef.current);
+    }
+    return false;
+  });
+  const setElement = useResizeObserver(() => {
+    if (!measure()) {
+      requestAnimationFrame(() => {
+        if (!measure()) {
+          intervalRef.current = setInterval(measure, POLL_RATE);
+        }
+      });
+    }
+  });
+  useLayoutEffect(() => setElement(targetElement), [setElement, targetElement]);
   return indicatorPosition;
 }
 

package/build-module/utils/element-rect.js.map

@@ -1 +1 @@
-{"version":3,"names":["useRef","useEffect","useState","useEvent","useTrackElementRectUpdates","targetElement","onRect","fireOnElementInit","onRectEvent","observedElementRef","resizeObserverRef","current","ResizeObserver","entries","resizeObserver","observe","unobserve","NULL_ELEMENT_OFFSET_RECT","left","top","width","height","getElementOffsetRect","element","Math","max","offsetLeft","offsetTop","parseFloat","getComputedStyle","useTrackElementOffsetRect","indicatorPosition","setIndicatorPosition"],"sources":["@wordpress/components/src/utils/element-rect.ts"],"sourcesContent":["/* eslint-disable jsdoc/require-param */\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useState } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport { useEvent } from './hooks/use-event';\n\n/**\n * `useTrackElementRectUpdates` options.\n */\nexport type UseTrackElementRectUpdatesOptions = {\n\t/**\n\t * Whether to trigger the callback when an element's ResizeObserver is\n\t * first set up, including when the target element changes.\n\t *\n\t * @default true\n\t */\n\tfireOnElementInit?: boolean;\n};\n\n/**\n * Tracks an element's \"rect\" (size and position) and fires `onRect` for all\n * of its discrete values. The element can be changed dynamically and **it\n * must not be stored in a ref**. Instead, it should be stored in a React\n * state or equivalent.\n *\n * By default, `onRect` is called initially for the target element (including\n * when the target element changes), not only on size or position updates.\n * This allows consumers of the hook to always be in sync with all rect values\n * of the target element throughout its lifetime. This behavior can be\n * disabled by setting the `fireOnElementInit` option to `false`.\n *\n * Under the hood, it sets up a `ResizeObserver` that tracks the element. The\n * target element can be changed dynamically, and the observer will be\n * updated accordingly.\n *\n * @example\n *\n * ```tsx\n * const [ targetElement, setTargetElement ] = useState< HTMLElement | null >();\n *\n * useTrackElementRectUpdates( targetElement, ( element ) => {\n *   console.log( 'Element resized:', element );\n * } );\n *\n * <div ref={ setTargetElement } />;\n * ```\n */\nexport function useTrackElementRectUpdates(\n\t/**\n\t * The target element to observe. It can be changed dynamically.\n\t */\n\ttargetElement: HTMLElement | undefined | null,\n\t/**\n\t * Callback to fire when the element is resized. It will also be\n\t * called when the observer is set up, unless `fireOnElementInit` is\n\t * set to `false`.\n\t */\n\tonRect: (\n\t\t/**\n\t\t * The element being tracked at the time of this update.\n\t\t */\n\t\telement: HTMLElement,\n\t\t/**\n\t\t * The list of\n\t\t * [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)\n\t\t * objects passed to the `ResizeObserver.observe` callback. This list\n\t\t * won't be available when the observer is set up, and only on updates.\n\t\t */\n\t\tresizeObserverEntries?: ResizeObserverEntry[]\n\t) => void,\n\t{ fireOnElementInit = true }: UseTrackElementRectUpdatesOptions = {}\n) {\n\tconst onRectEvent = useEvent( onRect );\n\n\tconst observedElementRef = useRef< HTMLElement | null >();\n\tconst resizeObserverRef = useRef< ResizeObserver >();\n\n\t// TODO: could this be a layout effect?\n\tuseEffect( () => {\n\t\tif ( targetElement === observedElementRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tobservedElementRef.current = targetElement;\n\n\t\t// Set up a ResizeObserver.\n\t\tif ( ! resizeObserverRef.current ) {\n\t\t\tresizeObserverRef.current = new ResizeObserver( ( entries ) => {\n\t\t\t\tif ( observedElementRef.current ) {\n\t\t\t\t\tonRectEvent( observedElementRef.current, entries );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t\tconst { current: resizeObserver } = resizeObserverRef;\n\n\t\t// Observe new element.\n\t\tif ( targetElement ) {\n\t\t\tif ( fireOnElementInit ) {\n\t\t\t\t// TODO: investigate if this can be removed,\n\t\t\t\t// see: https://stackoverflow.com/a/60026394\n\t\t\t\tonRectEvent( targetElement );\n\t\t\t}\n\t\t\tresizeObserver.observe( targetElement );\n\t\t}\n\n\t\treturn () => {\n\t\t\t// Unobserve previous element.\n\t\t\tif ( observedElementRef.current ) {\n\t\t\t\tresizeObserver.unobserve( observedElementRef.current );\n\t\t\t}\n\t\t};\n\t}, [ fireOnElementInit, onRectEvent, targetElement ] );\n}\n\n/**\n * The position and dimensions of an element, relative to its offset parent.\n */\nexport type ElementOffsetRect = {\n\t/**\n\t * The distance from the left edge of the offset parent to the left edge of\n\t * the element.\n\t */\n\tleft: number;\n\t/**\n\t * The distance from the top edge of the offset parent to the top edge of\n\t * the element.\n\t */\n\ttop: number;\n\t/**\n\t * The width of the element.\n\t */\n\twidth: number;\n\t/**\n\t * The height of the element.\n\t */\n\theight: number;\n};\n\n/**\n * An `ElementOffsetRect` object with all values set to zero.\n */\nexport const NULL_ELEMENT_OFFSET_RECT = {\n\tleft: 0,\n\ttop: 0,\n\twidth: 0,\n\theight: 0,\n} satisfies ElementOffsetRect;\n\n/**\n * Returns the position and dimensions of an element, relative to its offset\n * parent. This is useful in contexts where `getBoundingClientRect` is not\n * suitable, such as when the element is transformed.\n *\n * **Note:** the `left` and `right` values are adjusted due to a limitation\n * in the way the browser calculates the offset position of the element,\n * which can cause unwanted scrollbars to appear. This adjustment makes the\n * values potentially inaccurate within a range of 1 pixel.\n */\nexport function getElementOffsetRect(\n\telement: HTMLElement\n): ElementOffsetRect {\n\treturn {\n\t\t// The adjustments mentioned in the documentation above are necessary\n\t\t// because `offsetLeft` and `offsetTop` are rounded to the nearest pixel,\n\t\t// which can result in a position mismatch that causes unwanted overflow.\n\t\t// For context, see: https://github.com/WordPress/gutenberg/pull/61979\n\t\tleft: Math.max( element.offsetLeft - 1, 0 ),\n\t\ttop: Math.max( element.offsetTop - 1, 0 ),\n\t\t// This is a workaround to obtain these values with a sub-pixel precision,\n\t\t// since `offsetWidth` and `offsetHeight` are rounded to the nearest pixel.\n\t\twidth: parseFloat( getComputedStyle( element ).width ),\n\t\theight: parseFloat( getComputedStyle( element ).height ),\n\t};\n}\n\n/**\n * Tracks the position and dimensions of an element, relative to its offset\n * parent. The element can be changed dynamically.\n */\nexport function useTrackElementOffsetRect(\n\ttargetElement: HTMLElement | undefined | null\n) {\n\tconst [ indicatorPosition, setIndicatorPosition ] =\n\t\tuseState< ElementOffsetRect >( NULL_ELEMENT_OFFSET_RECT );\n\n\tuseTrackElementRectUpdates( targetElement, ( element ) =>\n\t\tsetIndicatorPosition( getElementOffsetRect( element ) )\n\t);\n\n\treturn indicatorPosition;\n}\n\n/* eslint-enable jsdoc/require-param */\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useLayoutEffect","useRef","useState","useResizeObserver","useEvent","NULL_ELEMENT_OFFSET_RECT","top","right","bottom","left","width","height","getElementOffsetRect","element","_element$offsetParent","rect","getBoundingClientRect","offsetParentRect","offsetParent","computedWidth","parseFloat","getComputedStyle","computedHeight","scaleX","scaleY","POLL_RATE","useTrackElementOffsetRect","targetElement","indicatorPosition","setIndicatorPosition","intervalRef","measure","elementOffsetRect","clearInterval","current","setElement","requestAnimationFrame","setInterval"],"sources":["@wordpress/components/src/utils/element-rect.ts"],"sourcesContent":["/* eslint-disable jsdoc/require-param */\n/**\n * WordPress dependencies\n */\nimport { useLayoutEffect, useRef, useState } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport { useEvent } from './hooks/use-event';\n\n/**\n * The position and dimensions of an element, relative to its offset parent.\n */\nexport type ElementOffsetRect = {\n\t/**\n\t * The distance from the top edge of the offset parent to the top edge of\n\t * the element.\n\t */\n\ttop: number;\n\t/**\n\t * The distance from the right edge of the offset parent to the right edge\n\t * of the element.\n\t */\n\tright: number;\n\t/**\n\t * The distance from the bottom edge of the offset parent to the bottom edge\n\t * of the element.\n\t */\n\tbottom: number;\n\t/**\n\t * The distance from the left edge of the offset parent to the left edge of\n\t * the element.\n\t */\n\tleft: number;\n\t/**\n\t * The width of the element.\n\t */\n\twidth: number;\n\t/**\n\t * The height of the element.\n\t */\n\theight: number;\n};\n\n/**\n * An `ElementOffsetRect` object with all values set to zero.\n */\nexport const NULL_ELEMENT_OFFSET_RECT = {\n\ttop: 0,\n\tright: 0,\n\tbottom: 0,\n\tleft: 0,\n\twidth: 0,\n\theight: 0,\n} satisfies ElementOffsetRect;\n\n/**\n * Returns the position and dimensions of an element, relative to its offset\n * parent, with subpixel precision. Values reflect the real measures before any\n * potential scaling distortions along the X and Y axes.\n *\n * Useful in contexts where plain `getBoundingClientRect` calls or `ResizeObserver`\n * entries are not suitable, such as when the element is transformed, and when\n * `element.offset<Top|Left|Width|Height>` methods are not precise enough.\n *\n * **Note:** in some contexts, like when the scale is 0, this method will fail\n * because it's impossible to calculate a scaling ratio. When that happens, it\n * will return `undefined`.\n */\nexport function getElementOffsetRect(\n\telement: HTMLElement\n): ElementOffsetRect | undefined {\n\t// Position and dimension values computed with `getBoundingClientRect` have\n\t// subpixel precision, but are affected by distortions since they represent\n\t// the \"real\" measures, or in other words, the actual final values as rendered\n\t// by the browser.\n\tconst rect = element.getBoundingClientRect();\n\tif ( rect.width === 0 || rect.height === 0 ) {\n\t\treturn;\n\t}\n\tconst offsetParentRect =\n\t\telement.offsetParent?.getBoundingClientRect() ??\n\t\tNULL_ELEMENT_OFFSET_RECT;\n\n\t// Computed widths and heights have subpixel precision, and are not affected\n\t// by distortions.\n\tconst computedWidth = parseFloat( getComputedStyle( element ).width );\n\tconst computedHeight = parseFloat( getComputedStyle( element ).height );\n\n\t// We can obtain the current scale factor for the element by comparing \"computed\"\n\t// dimensions with the \"real\" ones.\n\tconst scaleX = computedWidth / rect.width;\n\tconst scaleY = computedHeight / rect.height;\n\n\treturn {\n\t\t// To obtain the adjusted values for the position:\n\t\t// 1. Compute the element's position relative to the offset parent.\n\t\t// 2. Correct for the scale factor.\n\t\ttop: ( rect.top - offsetParentRect?.top ) * scaleY,\n\t\tright: ( offsetParentRect?.right - rect.right ) * scaleX,\n\t\tbottom: ( offsetParentRect?.bottom - rect.bottom ) * scaleY,\n\t\tleft: ( rect.left - offsetParentRect?.left ) * scaleX,\n\t\t// Computed dimensions don't need any adjustments.\n\t\twidth: computedWidth,\n\t\theight: computedHeight,\n\t};\n}\n\nconst POLL_RATE = 100;\n\n/**\n * Tracks the position and dimensions of an element, relative to its offset\n * parent. The element can be changed dynamically.\n *\n * **Note:** sometimes, the measurement will fail (see `getElementOffsetRect`'s\n * documentation for more details). When that happens, this hook will attempt\n * to measure again after a frame, and if that fails, it will poll every 100\n * milliseconds until it succeeds.\n */\nexport function useTrackElementOffsetRect(\n\ttargetElement: HTMLElement | undefined | null\n) {\n\tconst [ indicatorPosition, setIndicatorPosition ] =\n\t\tuseState< ElementOffsetRect >( NULL_ELEMENT_OFFSET_RECT );\n\tconst intervalRef = useRef< ReturnType< typeof setInterval > >();\n\n\tconst measure = useEvent( () => {\n\t\tif ( targetElement ) {\n\t\t\tconst elementOffsetRect = getElementOffsetRect( targetElement );\n\t\t\tif ( elementOffsetRect ) {\n\t\t\t\tsetIndicatorPosition( elementOffsetRect );\n\t\t\t\tclearInterval( intervalRef.current );\n\t\t\t\treturn true;\n\t\t\t}\n\t\t} else {\n\t\t\tclearInterval( intervalRef.current );\n\t\t}\n\t\treturn false;\n\t} );\n\n\tconst setElement = useResizeObserver( () => {\n\t\tif ( ! measure() ) {\n\t\t\trequestAnimationFrame( () => {\n\t\t\t\tif ( ! measure() ) {\n\t\t\t\t\tintervalRef.current = setInterval( measure, POLL_RATE );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t} );\n\n\tuseLayoutEffect(\n\t\t() => setElement( targetElement ),\n\t\t[ setElement, targetElement ]\n\t);\n\n\treturn indicatorPosition;\n}\n\n/* eslint-enable jsdoc/require-param */\n"],"mappings":"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","ignoreList":[]}

package/build-module/utils/hooks/use-update-effect.js

@@ -12,12 +12,12 @@ import { useRef, useEffect } from '@wordpress/element';
  * @param {import('react').DependencyList} deps
  */
 function useUpdateEffect(effect, deps) {
-  const mounted = useRef(false);
+  const mountedRef = useRef(false);
   useEffect(() => {
-    if (mounted.current) {
+    if (mountedRef.current) {
       return effect();
     }
-    mounted.current = true;
+    mountedRef.current = true;
     return undefined;
     // Disable reasons:
     // 1. This hook needs to pass a dep list that isn't an array literal
@@ -26,7 +26,7 @@ function useUpdateEffect(effect, deps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
   useEffect(() => () => {
-    mounted.current = false;
+    mountedRef.current = false;
   }, []);
 }
 export default useUpdateEffect;

package/build-module/utils/hooks/use-update-effect.js.map

@@ -1 +1 @@
-{"version":3,"names":["useRef","useEffect","useUpdateEffect","effect","deps","mounted","current","undefined"],"sources":["@wordpress/components/src/utils/hooks/use-update-effect.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\n\n/**\n * A `React.useEffect` that will not run on the first render.\n * Source:\n * https://github.com/ariakit/ariakit/blob/main/packages/ariakit-react-core/src/utils/hooks.ts\n *\n * @param {import('react').EffectCallback} effect\n * @param {import('react').DependencyList} deps\n */\nfunction useUpdateEffect( effect, deps ) {\n\tconst mounted = useRef( false );\n\tuseEffect( () => {\n\t\tif ( mounted.current ) {\n\t\t\treturn effect();\n\t\t}\n\t\tmounted.current = true;\n\t\treturn undefined;\n\t\t// Disable reasons:\n\t\t// 1. This hook needs to pass a dep list that isn't an array literal\n\t\t// 2. `effect` is missing from the array, and will need to be added carefully to avoid additional warnings\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, deps );\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\tmounted.current = false;\n\t\t},\n\t\t[]\n\t);\n}\n\nexport default useUpdateEffect;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,SAAS,QAAQ,oBAAoB;;AAEtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,eAAeA,CAAEC,MAAM,EAAEC,IAAI,EAAG;EACxC,MAAMC,OAAO,GAAGL,MAAM,CAAE,KAAM,CAAC;EAC/BC,SAAS,CAAE,MAAM;IAChB,IAAKI,OAAO,CAACC,OAAO,EAAG;MACtB,OAAOH,MAAM,CAAC,CAAC;IAChB;IACAE,OAAO,CAACC,OAAO,GAAG,IAAI;IACtB,OAAOC,SAAS;IAChB;IACA;IACA;IACA;IACA;EACD,CAAC,EAAEH,IAAK,CAAC;EAETH,SAAS,CACR,MAAM,MAAM;IACXI,OAAO,CAACC,OAAO,GAAG,KAAK;EACxB,CAAC,EACD,EACD,CAAC;AACF;AAEA,eAAeJ,eAAe","ignoreList":[]}
+{"version":3,"names":["useRef","useEffect","useUpdateEffect","effect","deps","mountedRef","current","undefined"],"sources":["@wordpress/components/src/utils/hooks/use-update-effect.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\n\n/**\n * A `React.useEffect` that will not run on the first render.\n * Source:\n * https://github.com/ariakit/ariakit/blob/main/packages/ariakit-react-core/src/utils/hooks.ts\n *\n * @param {import('react').EffectCallback} effect\n * @param {import('react').DependencyList} deps\n */\nfunction useUpdateEffect( effect, deps ) {\n\tconst mountedRef = useRef( false );\n\tuseEffect( () => {\n\t\tif ( mountedRef.current ) {\n\t\t\treturn effect();\n\t\t}\n\t\tmountedRef.current = true;\n\t\treturn undefined;\n\t\t// Disable reasons:\n\t\t// 1. This hook needs to pass a dep list that isn't an array literal\n\t\t// 2. `effect` is missing from the array, and will need to be added carefully to avoid additional warnings\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, deps );\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\tmountedRef.current = false;\n\t\t},\n\t\t[]\n\t);\n}\n\nexport default useUpdateEffect;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,SAAS,QAAQ,oBAAoB;;AAEtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,eAAeA,CAAEC,MAAM,EAAEC,IAAI,EAAG;EACxC,MAAMC,UAAU,GAAGL,MAAM,CAAE,KAAM,CAAC;EAClCC,SAAS,CAAE,MAAM;IAChB,IAAKI,UAAU,CAACC,OAAO,EAAG;MACzB,OAAOH,MAAM,CAAC,CAAC;IAChB;IACAE,UAAU,CAACC,OAAO,GAAG,IAAI;IACzB,OAAOC,SAAS;IAChB;IACA;IACA;IACA;IACA;EACD,CAAC,EAAEH,IAAK,CAAC;EAETH,SAAS,CACR,MAAM,MAAM;IACXI,UAAU,CAACC,OAAO,GAAG,KAAK;EAC3B,CAAC,EACD,EACD,CAAC;AACF;AAEA,eAAeJ,eAAe","ignoreList":[]}

package/build-style/style-rtl.css

@@ -1052,18 +1052,6 @@ input.components-combobox-control__input[type=text]:focus {
   height: 20px;
 }
 
-.components-custom-gradient-picker .components-custom-gradient-picker__toolbar {
-  border: none;
-}
-.components-custom-gradient-picker .components-custom-gradient-picker__toolbar > div + div {
-  margin-right: 1px;
-}
-.components-custom-gradient-picker .components-custom-gradient-picker__toolbar button.is-pressed > svg {
-  background: #fff;
-  border: 1px solid #949494;
-  border-radius: 2px;
-}
-
 .components-custom-gradient-picker__ui-line {
   position: relative;
   z-index: 0;
@@ -1368,6 +1356,7 @@ body.is-dragging-components-draggable {
   border-radius: 50%;
   transition: 0.2s transform ease, 0.2s background-color ease-out;
   background-color: #1e1e1e;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
   border: 6px solid transparent;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1539,7 +1528,6 @@ body.is-dragging-components-draggable {
 }
 .components-form-token-field__token.is-borderless.is-error .components-form-token-field__token-text {
   color: #cc1818;
-  border-radius: 0 4px 4px 0;
   padding: 0 6px 0 4px;
 }
 .components-form-token-field__token.is-borderless.is-validating .components-form-token-field__token-text {
@@ -1569,7 +1557,7 @@ body.is-dragging-components-draggable {
 }
 
 .components-form-token-field__token-text {
-  border-radius: 0 2px 2px 0;
+  border-radius: 0 1px 1px 0;
   padding: 0 8px 0 0;
   white-space: nowrap;
   overflow: hidden;
@@ -1578,7 +1566,7 @@ body.is-dragging-components-draggable {
 
 .components-form-token-field__remove-token.components-button {
   cursor: pointer;
-  border-radius: 2px 0 0 2px;
+  border-radius: 1px 0 0 1px;
   padding: 0 2px;
   color: #1e1e1e;
   line-height: 10px;
@@ -1885,27 +1873,55 @@ body.is-dragging-components-draggable {
   background-color: rgba(0, 0, 0, 0.35);
   z-index: 100000;
   display: flex;
-  animation: edit-post__fade-in-animation 0.2s ease-out 0s;
+  animation: __wp-base-styles-fade-in 0.08s linear 0s;
   animation-fill-mode: forwards;
 }
+@keyframes __wp-base-styles-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   .components-modal__screen-overlay {
     animation-duration: 1ms;
     animation-delay: 0s;
   }
 }
+.components-modal__screen-overlay.is-animating-out {
+  animation: __wp-base-styles-fade-out 0.08s linear 80ms;
+  animation-fill-mode: forwards;
+}
+@keyframes __wp-base-styles-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .components-modal__screen-overlay.is-animating-out {
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
+}
 
 .components-modal__frame {
   box-sizing: border-box;
   margin: 40px 0 0 0;
   width: 100%;
   background: #fff;
-  box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.15), 0 2.7px 3.8px -0.2px rgba(0, 0, 0, 0.15), 0 5.5px 7.8px -0.3px rgba(0, 0, 0, 0.15), -0.1px 11.5px 16.4px -0.5px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02);
   border-radius: 8px 8px 0 0;
   overflow: hidden;
   display: flex;
-  animation: components-modal__appear-animation 0.1s ease-out;
+  animation-name: components-modal__appear-animation;
+  animation-duration: var(--modal-frame-animation-duration);
   animation-fill-mode: forwards;
+  animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
 }
 .components-modal__frame *,
 .components-modal__frame *::before,
@@ -1918,6 +1934,10 @@ body.is-dragging-components-draggable {
     animation-delay: 0s;
   }
 }
+.components-modal__screen-overlay.is-animating-out .components-modal__frame {
+  animation-name: components-modal__disappear-animation;
+  animation-timing-function: cubic-bezier(1, 0, 0.2, 1);
+}
 @media (min-width: 600px) {
   .components-modal__frame {
     border-radius: 8px;
@@ -1970,10 +1990,22 @@ body.is-dragging-components-draggable {
 
 @keyframes components-modal__appear-animation {
   from {
-    transform: translateY(32px);
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes components-modal__disappear-animation {
+  from {
+    opacity: 1;
+    transform: scale(1);
   }
   to {
-    transform: translateY(0);
+    opacity: 0;
+    transform: scale(0.9);
   }
 }
 .components-modal__header {
@@ -1999,10 +2031,6 @@ body.is-dragging-components-draggable {
   line-height: 1;
   margin: 0;
 }
-.components-modal__header .components-button {
-  position: relative;
-  right: 8px;
-}
 .components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header {
   border-bottom-color: #ddd;
 }
@@ -2517,13 +2545,14 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 
 .components-popover__content {
   background: #fff;
-  box-shadow: 0 0 0 1px #ccc, 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 0 1px #ccc, 0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02);
   border-radius: 4px;
   box-sizing: border-box;
   width: min-content;
 }
 .is-alternate .components-popover__content {
   box-shadow: 0 0 0 1px #1e1e1e;
+  border-radius: 2px;
 }
 .is-unstyled .components-popover__content {
   background: none;
@@ -2783,13 +2812,13 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   position: absolute;
   top: calc(50% - 8px);
   left: calc(50% - 8px);
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)), 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
   outline: 2px solid transparent;
 }
 
 .components-resizable-box__side-handle::before {
   display: block;
-  border-radius: 2px;
+  border-radius: 9999px;
   content: "";
   width: 3px;
   height: 3px;
@@ -2969,7 +2998,7 @@ body.lockscroll {
   -webkit-backdrop-filter: blur(16px) saturate(180%);
           backdrop-filter: blur(16px) saturate(180%);
   border-radius: 4px;
-  box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
   color: #fff;
   padding: 12px 20px;
   width: 100%;
@@ -3123,7 +3152,6 @@ body.lockscroll {
   outline: none;
 }
 .components-tab-panel__tab-content:focus-visible {
-  border-radius: 2px;
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
   outline-offset: 0;
@@ -3278,8 +3306,8 @@ body.lockscroll {
 .components-text-control__input[type=month].is-next-40px-default-size,
 .components-text-control__input[type=number].is-next-40px-default-size {
   height: 40px;
-  padding-right: 16px;
-  padding-left: 16px;
+  padding-right: 12px;
+  padding-left: 12px;
 }
 
 .components-tip {
@@ -3498,6 +3526,7 @@ div.components-toolbar > div + div.has-left-divider::before {
   font-size: 12px;
   padding: 4px 8px;
   z-index: 1000002;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
 }
 
 .components-tooltip__shortcut {