@wordpress/components 28.2.0 → 28.4.0

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

@@ -0,0 +1,147 @@
+/* eslint-disable jsdoc/require-param */
+/**
+ * WordPress dependencies
+ */
+import { useRef, useEffect, useState } from '@wordpress/element';
+/**
+ * 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.
+ */
+
+/**
+ * An `ElementOffsetRect` object with all values set to zero.
+ */
+export const NULL_ELEMENT_OFFSET_RECT = {
+  left: 0,
+  top: 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.
+ *
+ * **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.
+ */
+export function getElementOffsetRect(element) {
+  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)
+  };
+}
+
+/**
+ * Tracks the position and dimensions of an element, relative to its offset
+ * parent. The element can be changed dynamically.
+ */
+export function useTrackElementOffsetRect(targetElement) {
+  const [indicatorPosition, setIndicatorPosition] = useState(NULL_ELEMENT_OFFSET_RECT);
+  useTrackElementRectUpdates(targetElement, element => setIndicatorPosition(getElementOffsetRect(element)));
+  return indicatorPosition;
+}
+
+/* eslint-enable jsdoc/require-param */
+//# sourceMappingURL=element-rect.js.map

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

@@ -0,0 +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":[]}

package/build-module/utils/hooks/use-event.js

@@ -0,0 +1,35 @@
+/* eslint-disable jsdoc/require-param */
+/**
+ * WordPress dependencies
+ */
+import { useRef, useInsertionEffect, useCallback } from '@wordpress/element';
+
+/**
+ * Any function.
+ */
+
+/**
+ * Creates a stable callback function that has access to the latest state and
+ * can be used within event handlers and effect callbacks. Throws when used in
+ * the render phase.
+ *
+ * @example
+ *
+ * ```tsx
+ * function Component(props) {
+ *   const onClick = useEvent(props.onClick);
+ *   React.useEffect(() => {}, [onClick]);
+ * }
+ * ```
+ */
+export function useEvent(callback) {
+  const ref = useRef(() => {
+    throw new Error('Cannot call an event handler while rendering.');
+  });
+  useInsertionEffect(() => {
+    ref.current = callback;
+  });
+  return useCallback((...args) => ref.current?.(...args), []);
+}
+/* eslint-enable jsdoc/require-param */
+//# sourceMappingURL=use-event.js.map

package/build-module/utils/hooks/use-event.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useRef","useInsertionEffect","useCallback","useEvent","callback","ref","Error","current","args"],"sources":["@wordpress/components/src/utils/hooks/use-event.ts"],"sourcesContent":["/* eslint-disable jsdoc/require-param */\n/**\n * WordPress dependencies\n */\nimport { useRef, useInsertionEffect, useCallback } from '@wordpress/element';\n\n/**\n * Any function.\n */\nexport type AnyFunction = ( ...args: any ) => any;\n\n/**\n * Creates a stable callback function that has access to the latest state and\n * can be used within event handlers and effect callbacks. Throws when used in\n * the render phase.\n *\n * @example\n *\n * ```tsx\n * function Component(props) {\n *   const onClick = useEvent(props.onClick);\n *   React.useEffect(() => {}, [onClick]);\n * }\n * ```\n */\nexport function useEvent< T extends AnyFunction >( callback?: T ) {\n\tconst ref = useRef< AnyFunction | undefined >( () => {\n\t\tthrow new Error( 'Cannot call an event handler while rendering.' );\n\t} );\n\tuseInsertionEffect( () => {\n\t\tref.current = callback;\n\t} );\n\treturn useCallback< AnyFunction >(\n\t\t( ...args ) => ref.current?.( ...args ),\n\t\t[]\n\t) as T;\n}\n/* eslint-enable jsdoc/require-param */\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,QAAQ,oBAAoB;;AAE5E;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,QAAQA,CAA2BC,QAAY,EAAG;EACjE,MAAMC,GAAG,GAAGL,MAAM,CAA6B,MAAM;IACpD,MAAM,IAAIM,KAAK,CAAE,+CAAgD,CAAC;EACnE,CAAE,CAAC;EACHL,kBAAkB,CAAE,MAAM;IACzBI,GAAG,CAACE,OAAO,GAAGH,QAAQ;EACvB,CAAE,CAAC;EACH,OAAOF,WAAW,CACjB,CAAE,GAAGM,IAAI,KAAMH,GAAG,CAACE,OAAO,GAAI,GAAGC,IAAK,CAAC,EACvC,EACD,CAAC;AACF;AACA","ignoreList":[]}

package/build-module/utils/hooks/use-on-value-update.js

@@ -0,0 +1,39 @@
+/* eslint-disable jsdoc/require-param */
+/**
+ * WordPress dependencies
+ */
+import { useRef, useEffect } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import { useEvent } from './use-event';
+
+/**
+ * Context object for the `onUpdate` callback of `useOnValueUpdate`.
+ */
+
+/**
+ * Calls the `onUpdate` callback when the `value` changes.
+ */
+export function useOnValueUpdate(
+/**
+ * The value to watch for changes.
+ */
+value,
+/**
+ * Callback to fire when the value changes.
+ */
+onUpdate) {
+  const previousValueRef = useRef(value);
+  const updateCallbackEvent = useEvent(onUpdate);
+  useEffect(() => {
+    if (previousValueRef.current !== value) {
+      updateCallbackEvent({
+        previousValue: previousValueRef.current
+      });
+      previousValueRef.current = value;
+    }
+  }, [updateCallbackEvent, value]);
+}
+/* eslint-enable jsdoc/require-param */
+//# sourceMappingURL=use-on-value-update.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useRef","useEffect","useEvent","useOnValueUpdate","value","onUpdate","previousValueRef","updateCallbackEvent","current","previousValue"],"sources":["@wordpress/components/src/utils/hooks/use-on-value-update.ts"],"sourcesContent":["/* eslint-disable jsdoc/require-param */\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport { useEvent } from './use-event';\n\n/**\n * Context object for the `onUpdate` callback of `useOnValueUpdate`.\n */\nexport type ValueUpdateContext< T > = {\n\tpreviousValue: T;\n};\n\n/**\n * Calls the `onUpdate` callback when the `value` changes.\n */\nexport function useOnValueUpdate< T >(\n\t/**\n\t * The value to watch for changes.\n\t */\n\tvalue: T,\n\t/**\n\t * Callback to fire when the value changes.\n\t */\n\tonUpdate: ( context: ValueUpdateContext< T > ) => void\n) {\n\tconst previousValueRef = useRef( value );\n\tconst updateCallbackEvent = useEvent( onUpdate );\n\tuseEffect( () => {\n\t\tif ( previousValueRef.current !== value ) {\n\t\t\tupdateCallbackEvent( {\n\t\t\t\tpreviousValue: previousValueRef.current,\n\t\t\t} );\n\t\t\tpreviousValueRef.current = value;\n\t\t}\n\t}, [ updateCallbackEvent, value ] );\n}\n/* eslint-enable jsdoc/require-param */\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,SAAS,QAAQ,oBAAoB;AACtD;AACA;AACA;AACA,SAASC,QAAQ,QAAQ,aAAa;;AAEtC;AACA;AACA;;AAKA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA;AAC/B;AACD;AACA;AACCC,KAAQ;AACR;AACD;AACA;AACCC,QAAsD,EACrD;EACD,MAAMC,gBAAgB,GAAGN,MAAM,CAAEI,KAAM,CAAC;EACxC,MAAMG,mBAAmB,GAAGL,QAAQ,CAAEG,QAAS,CAAC;EAChDJ,SAAS,CAAE,MAAM;IAChB,IAAKK,gBAAgB,CAACE,OAAO,KAAKJ,KAAK,EAAG;MACzCG,mBAAmB,CAAE;QACpBE,aAAa,EAAEH,gBAAgB,CAACE;MACjC,CAAE,CAAC;MACHF,gBAAgB,CAACE,OAAO,GAAGJ,KAAK;IACjC;EACD,CAAC,EAAE,CAAEG,mBAAmB,EAAEH,KAAK,CAAG,CAAC;AACpC;AACA","ignoreList":[]}

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

@@ -6,7 +6,7 @@ import { useRef, useEffect } from '@wordpress/element';
 /**
  * A `React.useEffect` that will not run on the first render.
  * Source:
- * https://github.com/ariakit/ariakit/blob/reakit/packages/reakit-utils/src/useUpdateEffect.ts
+ * https://github.com/ariakit/ariakit/blob/main/packages/ariakit-react-core/src/utils/hooks.ts
  *
  * @param {import('react').EffectCallback} effect
  * @param {import('react').DependencyList} deps
@@ -25,6 +25,9 @@ function useUpdateEffect(effect, deps) {
     // see https://github.com/WordPress/gutenberg/pull/41166
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
+  useEffect(() => () => {
+    mounted.current = false;
+  }, []);
 }
 export default useUpdateEffect;
 //# sourceMappingURL=use-update-effect.js.map

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/reakit/packages/reakit-utils/src/useUpdateEffect.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\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;AACV;AAEA,eAAeF,eAAe","ignoreList":[]}
+{"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":[]}

package/build-style/style-rtl.css

@@ -494,12 +494,13 @@ p + .components-button.is-tertiary {
 }
 @media (min-width: 600px) {
   .components-checkbox-control {
-    --checkbox-input-size: 20px;
+    --checkbox-input-size: 16px;
   }
 }
 
 .components-checkbox-control__label {
   line-height: var(--checkbox-input-size);
+  cursor: pointer;
 }
 
 .components-checkbox-control__input[type=checkbox] {
@@ -638,6 +639,7 @@ p + .components-button.is-tertiary {
   vertical-align: middle;
   width: var(--checkbox-input-size);
   aspect-ratio: 1;
+  line-height: 1;
   flex-shrink: 0;
 }
 
@@ -1051,75 +1053,6 @@ input.components-combobox-control__input[type=text]:focus {
   z-index: 0;
 }
 
-.components-custom-select-control {
-  position: relative;
-  font-size: 13px;
-}
-
-.components-custom-select-control__button {
-  position: relative;
-  text-align: right;
-  outline: 0;
-}
-
-.components-custom-select-control__hint {
-  color: #949494;
-  margin-right: 10px;
-}
-
-.components-custom-select-control__menu-wrapper {
-  position: absolute;
-  min-width: 100%;
-  bottom: 0;
-}
-
-.components-custom-select-control__menu {
-  border: 1px solid #1e1e1e;
-  background-color: #fff;
-  border-radius: 2px;
-  outline: none;
-  transition: none;
-  max-height: 400px;
-  min-width: 100%;
-  overflow: auto;
-  padding: 0;
-  position: absolute;
-  z-index: 1000000;
-}
-.components-custom-select-control__menu[aria-hidden=true] {
-  display: none;
-}
-
-.components-custom-select-control__item {
-  align-items: center;
-  display: grid;
-  grid-template-columns: auto auto;
-  list-style-type: none;
-  padding: 8px 16px;
-  cursor: default;
-  line-height: 28px;
-}
-.components-custom-select-control__item:not(.is-next-40px-default-size) {
-  padding: 8px;
-}
-.components-custom-select-control__item.has-hint {
-  grid-template-columns: auto auto 30px;
-}
-.components-custom-select-control__item.is-highlighted {
-  background: #ddd;
-}
-.components-custom-select-control__item .components-custom-select-control__item-hint {
-  color: #949494;
-  text-align: left;
-  padding-left: 4px;
-}
-.components-custom-select-control__item .components-custom-select-control__item-icon {
-  margin-right: auto;
-}
-.components-custom-select-control__item:last-child {
-  margin-bottom: 0;
-}
-
 .block-editor-dimension-control .components-base-control__field {
   display: flex;
   align-items: center;
@@ -1371,6 +1304,7 @@ body.is-dragging-components-draggable {
 .components-form-toggle {
   position: relative;
   display: inline-block;
+  height: 16px;
 }
 .components-form-toggle .components-form-toggle__track {
   position: relative;
@@ -1379,10 +1313,10 @@ body.is-dragging-components-draggable {
   box-sizing: border-box;
   vertical-align: top;
   background-color: #fff;
-  border: 1px solid #1e1e1e;
-  width: 36px;
-  height: 18px;
-  border-radius: 9px;
+  border: 1px solid #949494;
+  width: 32px;
+  height: 16px;
+  border-radius: 8px;
   transition: 0.2s background-color ease, 0.2s border-color ease;
   overflow: hidden;
 }
@@ -1397,7 +1331,7 @@ body.is-dragging-components-draggable {
   position: absolute;
   inset: 0;
   box-sizing: border-box;
-  border-top: 18px solid transparent;
+  border-top: 16px solid transparent;
   transition: 0.2s opacity ease;
   opacity: 0;
 }
@@ -1411,8 +1345,8 @@ body.is-dragging-components-draggable {
   display: block;
   position: absolute;
   box-sizing: border-box;
-  top: 3px;
-  right: 3px;
+  top: 2px;
+  right: 2px;
   width: 12px;
   height: 12px;
   border-radius: 50%;
@@ -1441,7 +1375,7 @@ body.is-dragging-components-draggable {
 .components-form-toggle.is-checked .components-form-toggle__thumb {
   background-color: #fff;
   border-width: 0;
-  transform: translateX(-18px);
+  transform: translateX(-16px);
 }
 .components-form-toggle.is-disabled, .components-disabled .components-form-toggle {
   opacity: 0.3;
@@ -1465,6 +1399,9 @@ body.is-dragging-components-draggable {
 .components-form-toggle input.components-form-toggle__input[type=checkbox]::before {
   content: "";
 }
+.components-form-toggle input.components-form-toggle__input[type=checkbox]:not(:disabled, [aria-disabled=true]) {
+  cursor: pointer;
+}
 
 .components-form-token-field__input-container {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -1773,17 +1710,33 @@ body.is-dragging-components-draggable {
 [role=region] {
   position: relative;
 }
-
-.is-focusing-regions [role=region]:focus::after {
+[role=region].interface-interface-skeleton__content:focus-visible::after {
+  content: "";
   position: absolute;
+  pointer-events: none;
   top: 0;
-  right: 0;
   left: 0;
   bottom: 0;
+  right: 0;
+  outline-color: var(--wp-admin-theme-color);
+  outline-style: solid;
+  outline-width: calc(2 * (var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
+  outline-offset: calc(2 * ((-1 * var(--wp-admin-border-width-focus) ) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
+  z-index: 1000000;
+}
+
+.is-focusing-regions [role=region]:focus::after {
   content: "";
+  position: absolute;
   pointer-events: none;
-  outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  outline-offset: -4px;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  outline-color: var(--wp-admin-theme-color);
+  outline-style: solid;
+  outline-width: calc(2 * (var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
+  outline-offset: calc(2 * ((-1 * var(--wp-admin-border-width-focus) ) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
   z-index: 1000000;
 }
 .is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
@@ -1791,8 +1744,10 @@ body.is-dragging-components-draggable {
 .is-focusing-regions .interface-interface-skeleton__actions .editor-layout__toggle-publish-panel,
 .is-focusing-regions .interface-interface-skeleton__actions .editor-layout__toggle-entities-saved-states-panel,
 .is-focusing-regions .editor-post-publish-panel {
-  outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  outline-offset: -4px;
+  outline-color: var(--wp-admin-theme-color);
+  outline-style: solid;
+  outline-width: calc(2 * (var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
+  outline-offset: calc(2 * ((-1 * var(--wp-admin-border-width-focus) ) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
 }
 
 .components-menu-group + .components-menu-group {
@@ -2667,6 +2622,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   height: 24px;
   min-width: 24px;
   max-width: 24px;
+  position: relative;
   display: inline-flex;
   margin: 0 0 0 8px;
   padding: 0;
@@ -2703,24 +2659,28 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 }
 @media (min-width: 600px) {
   .components-radio-control__input[type=radio] {
-    height: 20px;
-    width: 20px;
-    min-width: 20px;
-    max-width: 20px;
+    height: 16px;
+    width: 16px;
+    min-width: 16px;
+    max-width: 16px;
   }
 }
 .components-radio-control__input[type=radio]:checked::before {
   box-sizing: inherit;
-  width: 8px;
-  height: 8px;
-  transform: translate(-7px, 7px);
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  top: 50%;
+  right: 50%;
+  transform: translate(50%, -50%);
   margin: 0;
   background-color: #fff;
   border: 4px solid #fff;
 }
 @media (min-width: 600px) {
   .components-radio-control__input[type=radio]:checked::before {
-    transform: translate(-5px, 5px);
+    width: 8px;
+    height: 8px;
   }
 }
 .components-radio-control__input[type=radio]:focus {
@@ -2729,10 +2689,12 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 }
 .components-radio-control__input[type=radio]:checked {
   background: var(--wp-admin-theme-color);
-  border-color: var(--wp-admin-theme-color);
+  border: none;
 }
 .components-radio-control__input[type=radio]:focus {
-  box-shadow: 0 0 0 2px var(--wp-components-color-background, #fff), 0 0 0 4px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 .components-radio-control__input[type=radio]:checked {
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -2745,6 +2707,12 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 
 .components-radio-control__label {
   cursor: pointer;
+  line-height: 24px;
+}
+@media (min-width: 600px) {
+  .components-radio-control__label {
+    line-height: 16px;
+  }
 }
 
 .components-resizable-box__handle {
@@ -3283,6 +3251,17 @@ body.lockscroll {
   margin: 0;
 }
 
+.components-toggle-control__label {
+  line-height: 16px;
+}
+.components-toggle-control__label:not(.is-disabled) {
+  cursor: pointer;
+}
+
+.components-toggle-control__help {
+  margin-right: 40px;
+}
+
 .components-accessible-toolbar {
   display: inline-flex;
   border: 1px solid #1e1e1e;
@@ -3299,6 +3278,12 @@ body.lockscroll {
   border-left: none;
 }
 
+.components-accessible-toolbar[aria-orientation=vertical],
+.components-toolbar[aria-orientation=vertical] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 .components-accessible-toolbar .components-button,
 .components-toolbar .components-button {
   position: relative;