@wordpress/components 25.7.0 → 25.8.1

package/build/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js

@@ -1,78 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _element = require("@wordpress/element");
-var _styles = require("./styles");
-/**
- * WordPress dependencies
- */
-
-function ToggleGroupControlBackdrop({
-  containerRef,
-  containerWidth,
-  isAdaptiveWidth,
-  state
-}) {
-  const [left, setLeft] = (0, _element.useState)(0);
-  const [width, setWidth] = (0, _element.useState)(0);
-  const [canAnimate, setCanAnimate] = (0, _element.useState)(false);
-  const [renderBackdrop, setRenderBackdrop] = (0, _element.useState)(false);
-  (0, _element.useEffect)(() => {
-    const containerNode = containerRef?.current;
-    if (!containerNode) return;
-
-    /**
-     * Workaround for Reakit
-     */
-    const targetNode = containerNode.querySelector(`[data-value="${state}"]`);
-    setRenderBackdrop(!!targetNode);
-    if (!targetNode) {
-      return;
-    }
-    const computeDimensions = () => {
-      const {
-        width: offsetWidth,
-        x
-      } = targetNode.getBoundingClientRect();
-      const {
-        x: parentX
-      } = containerNode.getBoundingClientRect();
-      const borderWidth = 1;
-      const offsetLeft = x - parentX - borderWidth;
-      setLeft(offsetLeft);
-      setWidth(offsetWidth);
-    };
-    // Fix to make the component appear as expected inside popovers.
-    // If the targetNode width is 0 it means the element was not yet rendered we should allow
-    // some time for the render to happen.
-    // requestAnimationFrame instead of setTimeout with a small time does not seems to work.
-    const dimensionsRequestId = window.setTimeout(computeDimensions, 100);
-    let animationRequestId;
-    if (!canAnimate) {
-      animationRequestId = window.requestAnimationFrame(() => {
-        setCanAnimate(true);
-      });
-    }
-    return () => {
-      window.clearTimeout(dimensionsRequestId);
-      window.cancelAnimationFrame(animationRequestId);
-    };
-  }, [canAnimate, containerRef, containerWidth, state, isAdaptiveWidth]);
-  if (!renderBackdrop) {
-    return null;
-  }
-  return (0, _element.createElement)(_styles.BackdropView, {
-    role: "presentation",
-    style: {
-      transform: `translateX(${left}px)`,
-      transition: canAnimate ? undefined : 'none',
-      width
-    }
-  });
-}
-var _default = (0, _element.memo)(ToggleGroupControlBackdrop);
-exports.default = _default;
-//# sourceMappingURL=toggle-group-control-backdrop.js.map

package/build/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_element","require","_styles","ToggleGroupControlBackdrop","containerRef","containerWidth","isAdaptiveWidth","state","left","setLeft","useState","width","setWidth","canAnimate","setCanAnimate","renderBackdrop","setRenderBackdrop","useEffect","containerNode","current","targetNode","querySelector","computeDimensions","offsetWidth","x","getBoundingClientRect","parentX","borderWidth","offsetLeft","dimensionsRequestId","window","setTimeout","animationRequestId","requestAnimationFrame","clearTimeout","cancelAnimationFrame","createElement","BackdropView","role","style","transform","transition","undefined","_default","memo","exports","default"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useEffect, memo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ToggleGroupControlBackdropProps } from '../types';\nimport { BackdropView } from './styles';\n\nfunction ToggleGroupControlBackdrop( {\n\tcontainerRef,\n\tcontainerWidth,\n\tisAdaptiveWidth,\n\tstate,\n}: ToggleGroupControlBackdropProps ) {\n\tconst [ left, setLeft ] = useState( 0 );\n\tconst [ width, setWidth ] = useState( 0 );\n\tconst [ canAnimate, setCanAnimate ] = useState( false );\n\tconst [ renderBackdrop, setRenderBackdrop ] = useState( false );\n\n\tuseEffect( () => {\n\t\tconst containerNode = containerRef?.current;\n\t\tif ( ! containerNode ) return;\n\n\t\t/**\n\t\t * Workaround for Reakit\n\t\t */\n\t\tconst targetNode = containerNode.querySelector(\n\t\t\t`[data-value=\"${ state }\"]`\n\t\t);\n\t\tsetRenderBackdrop( !! targetNode );\n\t\tif ( ! targetNode ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst computeDimensions = () => {\n\t\t\tconst { width: offsetWidth, x } =\n\t\t\t\ttargetNode.getBoundingClientRect();\n\n\t\t\tconst { x: parentX } = containerNode.getBoundingClientRect();\n\n\t\t\tconst borderWidth = 1;\n\t\t\tconst offsetLeft = x - parentX - borderWidth;\n\n\t\t\tsetLeft( offsetLeft );\n\t\t\tsetWidth( offsetWidth );\n\t\t};\n\t\t// Fix to make the component appear as expected inside popovers.\n\t\t// If the targetNode width is 0 it means the element was not yet rendered we should allow\n\t\t// some time for the render to happen.\n\t\t// requestAnimationFrame instead of setTimeout with a small time does not seems to work.\n\t\tconst dimensionsRequestId = window.setTimeout( computeDimensions, 100 );\n\n\t\tlet animationRequestId: number;\n\t\tif ( ! canAnimate ) {\n\t\t\tanimationRequestId = window.requestAnimationFrame( () => {\n\t\t\t\tsetCanAnimate( true );\n\t\t\t} );\n\t\t}\n\t\treturn () => {\n\t\t\twindow.clearTimeout( dimensionsRequestId );\n\t\t\twindow.cancelAnimationFrame( animationRequestId );\n\t\t};\n\t}, [ canAnimate, containerRef, containerWidth, state, isAdaptiveWidth ] );\n\n\tif ( ! renderBackdrop ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BackdropView\n\t\t\trole=\"presentation\"\n\t\t\tstyle={ {\n\t\t\t\ttransform: `translateX(${ left }px)`,\n\t\t\t\ttransition: canAnimate ? undefined : 'none',\n\t\t\t\twidth,\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nexport default memo( ToggleGroupControlBackdrop );\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAMA,IAAAC,OAAA,GAAAD,OAAA;AATA;AACA;AACA;;AASA,SAASE,0BAA0BA,CAAE;EACpCC,YAAY;EACZC,cAAc;EACdC,eAAe;EACfC;AACgC,CAAC,EAAG;EACpC,MAAM,CAAEC,IAAI,EAAEC,OAAO,CAAE,GAAG,IAAAC,iBAAQ,EAAE,CAAE,CAAC;EACvC,MAAM,CAAEC,KAAK,EAAEC,QAAQ,CAAE,GAAG,IAAAF,iBAAQ,EAAE,CAAE,CAAC;EACzC,MAAM,CAAEG,UAAU,EAAEC,aAAa,CAAE,GAAG,IAAAJ,iBAAQ,EAAE,KAAM,CAAC;EACvD,MAAM,CAAEK,cAAc,EAAEC,iBAAiB,CAAE,GAAG,IAAAN,iBAAQ,EAAE,KAAM,CAAC;EAE/D,IAAAO,kBAAS,EAAE,MAAM;IAChB,MAAMC,aAAa,GAAGd,YAAY,EAAEe,OAAO;IAC3C,IAAK,CAAED,aAAa,EAAG;;IAEvB;AACF;AACA;IACE,MAAME,UAAU,GAAGF,aAAa,CAACG,aAAa,CAC5C,gBAAgBd,KAAO,IACzB,CAAC;IACDS,iBAAiB,CAAE,CAAC,CAAEI,UAAW,CAAC;IAClC,IAAK,CAAEA,UAAU,EAAG;MACnB;IACD;IAEA,MAAME,iBAAiB,GAAGA,CAAA,KAAM;MAC/B,MAAM;QAAEX,KAAK,EAAEY,WAAW;QAAEC;MAAE,CAAC,GAC9BJ,UAAU,CAACK,qBAAqB,CAAC,CAAC;MAEnC,MAAM;QAAED,CAAC,EAAEE;MAAQ,CAAC,GAAGR,aAAa,CAACO,qBAAqB,CAAC,CAAC;MAE5D,MAAME,WAAW,GAAG,CAAC;MACrB,MAAMC,UAAU,GAAGJ,CAAC,GAAGE,OAAO,GAAGC,WAAW;MAE5ClB,OAAO,CAAEmB,UAAW,CAAC;MACrBhB,QAAQ,CAAEW,WAAY,CAAC;IACxB,CAAC;IACD;IACA;IACA;IACA;IACA,MAAMM,mBAAmB,GAAGC,MAAM,CAACC,UAAU,CAAET,iBAAiB,EAAE,GAAI,CAAC;IAEvE,IAAIU,kBAA0B;IAC9B,IAAK,CAAEnB,UAAU,EAAG;MACnBmB,kBAAkB,GAAGF,MAAM,CAACG,qBAAqB,CAAE,MAAM;QACxDnB,aAAa,CAAE,IAAK,CAAC;MACtB,CAAE,CAAC;IACJ;IACA,OAAO,MAAM;MACZgB,MAAM,CAACI,YAAY,CAAEL,mBAAoB,CAAC;MAC1CC,MAAM,CAACK,oBAAoB,CAAEH,kBAAmB,CAAC;IAClD,CAAC;EACF,CAAC,EAAE,CAAEnB,UAAU,EAAET,YAAY,EAAEC,cAAc,EAAEE,KAAK,EAAED,eAAe,CAAG,CAAC;EAEzE,IAAK,CAAES,cAAc,EAAG;IACvB,OAAO,IAAI;EACZ;EAEA,OACC,IAAAf,QAAA,CAAAoC,aAAA,EAAClC,OAAA,CAAAmC,YAAY;IACZC,IAAI,EAAC,cAAc;IACnBC,KAAK,EAAG;MACPC,SAAS,EAAG,cAAchC,IAAM,KAAI;MACpCiC,UAAU,EAAE5B,UAAU,GAAG6B,SAAS,GAAG,MAAM;MAC3C/B;IACD;EAAG,CACH,CAAC;AAEJ;AAAC,IAAAgC,QAAA,GAEc,IAAAC,aAAI,EAAEzC,0BAA2B,CAAC;AAAA0C,OAAA,CAAAC,OAAA,GAAAH,QAAA"}

package/build-module/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js

@@ -1,76 +0,0 @@
-import { createElement } from "@wordpress/element";
-/**
- * WordPress dependencies
- */
-import { useState, useEffect, memo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-
-import { BackdropView } from './styles';
-function ToggleGroupControlBackdrop({
-  containerRef,
-  containerWidth,
-  isAdaptiveWidth,
-  state
-}) {
-  const [left, setLeft] = useState(0);
-  const [width, setWidth] = useState(0);
-  const [canAnimate, setCanAnimate] = useState(false);
-  const [renderBackdrop, setRenderBackdrop] = useState(false);
-  useEffect(() => {
-    const containerNode = containerRef?.current;
-    if (!containerNode) return;
-
-    /**
-     * Workaround for Reakit
-     */
-    const targetNode = containerNode.querySelector(`[data-value="${state}"]`);
-    setRenderBackdrop(!!targetNode);
-    if (!targetNode) {
-      return;
-    }
-    const computeDimensions = () => {
-      const {
-        width: offsetWidth,
-        x
-      } = targetNode.getBoundingClientRect();
-      const {
-        x: parentX
-      } = containerNode.getBoundingClientRect();
-      const borderWidth = 1;
-      const offsetLeft = x - parentX - borderWidth;
-      setLeft(offsetLeft);
-      setWidth(offsetWidth);
-    };
-    // Fix to make the component appear as expected inside popovers.
-    // If the targetNode width is 0 it means the element was not yet rendered we should allow
-    // some time for the render to happen.
-    // requestAnimationFrame instead of setTimeout with a small time does not seems to work.
-    const dimensionsRequestId = window.setTimeout(computeDimensions, 100);
-    let animationRequestId;
-    if (!canAnimate) {
-      animationRequestId = window.requestAnimationFrame(() => {
-        setCanAnimate(true);
-      });
-    }
-    return () => {
-      window.clearTimeout(dimensionsRequestId);
-      window.cancelAnimationFrame(animationRequestId);
-    };
-  }, [canAnimate, containerRef, containerWidth, state, isAdaptiveWidth]);
-  if (!renderBackdrop) {
-    return null;
-  }
-  return createElement(BackdropView, {
-    role: "presentation",
-    style: {
-      transform: `translateX(${left}px)`,
-      transition: canAnimate ? undefined : 'none',
-      width
-    }
-  });
-}
-export default memo(ToggleGroupControlBackdrop);
-//# sourceMappingURL=toggle-group-control-backdrop.js.map

package/build-module/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useState","useEffect","memo","BackdropView","ToggleGroupControlBackdrop","containerRef","containerWidth","isAdaptiveWidth","state","left","setLeft","width","setWidth","canAnimate","setCanAnimate","renderBackdrop","setRenderBackdrop","containerNode","current","targetNode","querySelector","computeDimensions","offsetWidth","x","getBoundingClientRect","parentX","borderWidth","offsetLeft","dimensionsRequestId","window","setTimeout","animationRequestId","requestAnimationFrame","clearTimeout","cancelAnimationFrame","createElement","role","style","transform","transition","undefined"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useEffect, memo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ToggleGroupControlBackdropProps } from '../types';\nimport { BackdropView } from './styles';\n\nfunction ToggleGroupControlBackdrop( {\n\tcontainerRef,\n\tcontainerWidth,\n\tisAdaptiveWidth,\n\tstate,\n}: ToggleGroupControlBackdropProps ) {\n\tconst [ left, setLeft ] = useState( 0 );\n\tconst [ width, setWidth ] = useState( 0 );\n\tconst [ canAnimate, setCanAnimate ] = useState( false );\n\tconst [ renderBackdrop, setRenderBackdrop ] = useState( false );\n\n\tuseEffect( () => {\n\t\tconst containerNode = containerRef?.current;\n\t\tif ( ! containerNode ) return;\n\n\t\t/**\n\t\t * Workaround for Reakit\n\t\t */\n\t\tconst targetNode = containerNode.querySelector(\n\t\t\t`[data-value=\"${ state }\"]`\n\t\t);\n\t\tsetRenderBackdrop( !! targetNode );\n\t\tif ( ! targetNode ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst computeDimensions = () => {\n\t\t\tconst { width: offsetWidth, x } =\n\t\t\t\ttargetNode.getBoundingClientRect();\n\n\t\t\tconst { x: parentX } = containerNode.getBoundingClientRect();\n\n\t\t\tconst borderWidth = 1;\n\t\t\tconst offsetLeft = x - parentX - borderWidth;\n\n\t\t\tsetLeft( offsetLeft );\n\t\t\tsetWidth( offsetWidth );\n\t\t};\n\t\t// Fix to make the component appear as expected inside popovers.\n\t\t// If the targetNode width is 0 it means the element was not yet rendered we should allow\n\t\t// some time for the render to happen.\n\t\t// requestAnimationFrame instead of setTimeout with a small time does not seems to work.\n\t\tconst dimensionsRequestId = window.setTimeout( computeDimensions, 100 );\n\n\t\tlet animationRequestId: number;\n\t\tif ( ! canAnimate ) {\n\t\t\tanimationRequestId = window.requestAnimationFrame( () => {\n\t\t\t\tsetCanAnimate( true );\n\t\t\t} );\n\t\t}\n\t\treturn () => {\n\t\t\twindow.clearTimeout( dimensionsRequestId );\n\t\t\twindow.cancelAnimationFrame( animationRequestId );\n\t\t};\n\t}, [ canAnimate, containerRef, containerWidth, state, isAdaptiveWidth ] );\n\n\tif ( ! renderBackdrop ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BackdropView\n\t\t\trole=\"presentation\"\n\t\t\tstyle={ {\n\t\t\t\ttransform: `translateX(${ left }px)`,\n\t\t\t\ttransition: canAnimate ? undefined : 'none',\n\t\t\t\twidth,\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nexport default memo( ToggleGroupControlBackdrop );\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,QAAQ,EAAEC,SAAS,EAAEC,IAAI,QAAQ,oBAAoB;;AAE9D;AACA;AACA;;AAEA,SAASC,YAAY,QAAQ,UAAU;AAEvC,SAASC,0BAA0BA,CAAE;EACpCC,YAAY;EACZC,cAAc;EACdC,eAAe;EACfC;AACgC,CAAC,EAAG;EACpC,MAAM,CAAEC,IAAI,EAAEC,OAAO,CAAE,GAAGV,QAAQ,CAAE,CAAE,CAAC;EACvC,MAAM,CAAEW,KAAK,EAAEC,QAAQ,CAAE,GAAGZ,QAAQ,CAAE,CAAE,CAAC;EACzC,MAAM,CAAEa,UAAU,EAAEC,aAAa,CAAE,GAAGd,QAAQ,CAAE,KAAM,CAAC;EACvD,MAAM,CAAEe,cAAc,EAAEC,iBAAiB,CAAE,GAAGhB,QAAQ,CAAE,KAAM,CAAC;EAE/DC,SAAS,CAAE,MAAM;IAChB,MAAMgB,aAAa,GAAGZ,YAAY,EAAEa,OAAO;IAC3C,IAAK,CAAED,aAAa,EAAG;;IAEvB;AACF;AACA;IACE,MAAME,UAAU,GAAGF,aAAa,CAACG,aAAa,CAC5C,gBAAgBZ,KAAO,IACzB,CAAC;IACDQ,iBAAiB,CAAE,CAAC,CAAEG,UAAW,CAAC;IAClC,IAAK,CAAEA,UAAU,EAAG;MACnB;IACD;IAEA,MAAME,iBAAiB,GAAGA,CAAA,KAAM;MAC/B,MAAM;QAAEV,KAAK,EAAEW,WAAW;QAAEC;MAAE,CAAC,GAC9BJ,UAAU,CAACK,qBAAqB,CAAC,CAAC;MAEnC,MAAM;QAAED,CAAC,EAAEE;MAAQ,CAAC,GAAGR,aAAa,CAACO,qBAAqB,CAAC,CAAC;MAE5D,MAAME,WAAW,GAAG,CAAC;MACrB,MAAMC,UAAU,GAAGJ,CAAC,GAAGE,OAAO,GAAGC,WAAW;MAE5ChB,OAAO,CAAEiB,UAAW,CAAC;MACrBf,QAAQ,CAAEU,WAAY,CAAC;IACxB,CAAC;IACD;IACA;IACA;IACA;IACA,MAAMM,mBAAmB,GAAGC,MAAM,CAACC,UAAU,CAAET,iBAAiB,EAAE,GAAI,CAAC;IAEvE,IAAIU,kBAA0B;IAC9B,IAAK,CAAElB,UAAU,EAAG;MACnBkB,kBAAkB,GAAGF,MAAM,CAACG,qBAAqB,CAAE,MAAM;QACxDlB,aAAa,CAAE,IAAK,CAAC;MACtB,CAAE,CAAC;IACJ;IACA,OAAO,MAAM;MACZe,MAAM,CAACI,YAAY,CAAEL,mBAAoB,CAAC;MAC1CC,MAAM,CAACK,oBAAoB,CAAEH,kBAAmB,CAAC;IAClD,CAAC;EACF,CAAC,EAAE,CAAElB,UAAU,EAAER,YAAY,EAAEC,cAAc,EAAEE,KAAK,EAAED,eAAe,CAAG,CAAC;EAEzE,IAAK,CAAEQ,cAAc,EAAG;IACvB,OAAO,IAAI;EACZ;EAEA,OACCoB,aAAA,CAAChC,YAAY;IACZiC,IAAI,EAAC,cAAc;IACnBC,KAAK,EAAG;MACPC,SAAS,EAAG,cAAc7B,IAAM,KAAI;MACpC8B,UAAU,EAAE1B,UAAU,GAAG2B,SAAS,GAAG,MAAM;MAC3C7B;IACD;EAAG,CACH,CAAC;AAEJ;AAEA,eAAeT,IAAI,CAAEE,0BAA2B,CAAC"}

package/build-types/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-/**
- * Internal dependencies
- */
-import type { ToggleGroupControlBackdropProps } from '../types';
-declare function ToggleGroupControlBackdrop({ containerRef, containerWidth, isAdaptiveWidth, state, }: ToggleGroupControlBackdropProps): JSX.Element | null;
-declare const _default: import("react").MemoExoticComponent<typeof ToggleGroupControlBackdrop>;
-export default _default;
-//# sourceMappingURL=toggle-group-control-backdrop.d.ts.map

package/build-types/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"toggle-group-control-backdrop.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.tsx"],"names":[],"mappings":";AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,UAAU,CAAC;AAGhE,iBAAS,0BAA0B,CAAE,EACpC,YAAY,EACZ,cAAc,EACd,eAAe,EACf,KAAK,GACL,EAAE,+BAA+B,sBAiEjC;;AAED,wBAAkD"}

package/src/color-palette/test/__snapshots__/index.tsx.snap

@@ -1,288 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ColorPalette should allow disabling custom color picker 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: calc(4px * 3);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-0>* {
-  min-height: 0;
-}
-
-<div>
-  <div
-    class="components-flex components-h-stack components-v-stack emotion-0 emotion-1"
-    data-wp-c16t="true"
-    data-wp-component="VStack"
-  >
-    <div
-      class="components-circular-option-picker"
-    >
-      <div
-        class="components-circular-option-picker__swatches"
-      >
-        <div
-          class="components-circular-option-picker__option-wrapper"
-        >
-          <button
-            aria-label="Color: red"
-            aria-pressed="true"
-            class="components-button components-circular-option-picker__option is-pressed"
-            style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
-            type="button"
-          />
-          <svg
-            aria-hidden="true"
-            fill="#000"
-            focusable="false"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
-            />
-          </svg>
-        </div>
-        <div
-          class="components-circular-option-picker__option-wrapper"
-        >
-          <button
-            aria-label="Color: green"
-            aria-pressed="false"
-            class="components-button components-circular-option-picker__option"
-            style="background-color: rgb(0, 255, 0); color: rgb(0, 255, 0);"
-            type="button"
-          />
-        </div>
-        <div
-          class="components-circular-option-picker__option-wrapper"
-        >
-          <button
-            aria-label="Color: blue"
-            aria-pressed="false"
-            class="components-button components-circular-option-picker__option"
-            style="background-color: rgb(0, 0, 255); color: rgb(0, 0, 255);"
-            type="button"
-          />
-        </div>
-      </div>
-      <div
-        class="components-circular-option-picker__custom-clear-wrapper"
-      >
-        <button
-          class="components-button components-circular-option-picker__clear is-tertiary"
-          type="button"
-        >
-          Clear
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: calc(4px * 3);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-0>* {
-  min-height: 0;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 0;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-2>* {
-  min-height: 0;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: calc(4px * 0.5);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-4>* {
-  min-height: 0;
-}
-
-.emotion-6 {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-<div>
-  <div
-    class="components-flex components-h-stack components-v-stack emotion-0 emotion-1"
-    data-wp-c16t="true"
-    data-wp-component="VStack"
-  >
-    <div
-      class="components-dropdown"
-      tabindex="-1"
-    >
-      <div
-        class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-wrapper emotion-2 emotion-1"
-        data-wp-c16t="true"
-        data-wp-component="VStack"
-      >
-        <button
-          aria-expanded="false"
-          aria-haspopup="true"
-          aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#f00"."
-          class="components-color-palette__custom-color-button"
-          style="background: rgb(255, 0, 0);"
-        />
-        <div
-          class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-text-wrapper emotion-4 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="VStack"
-        >
-          <span
-            class="components-truncate components-color-palette__custom-color-name emotion-6 emotion-1"
-            data-wp-c16t="true"
-            data-wp-component="Truncate"
-          >
-            red
-          </span>
-          <span
-            class="components-truncate components-color-palette__custom-color-value components-color-palette__custom-color-value--is-hex emotion-6 emotion-1"
-            data-wp-c16t="true"
-            data-wp-component="Truncate"
-          >
-            #f00
-          </span>
-        </div>
-      </div>
-    </div>
-    <div
-      class="components-circular-option-picker"
-    >
-      <div
-        class="components-circular-option-picker__swatches"
-      >
-        <div
-          class="components-circular-option-picker__option-wrapper"
-        >
-          <button
-            aria-label="Color: red"
-            aria-pressed="true"
-            class="components-button components-circular-option-picker__option is-pressed"
-            style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
-            type="button"
-          />
-          <svg
-            aria-hidden="true"
-            fill="#000"
-            focusable="false"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
-            />
-          </svg>
-        </div>
-        <div
-          class="components-circular-option-picker__option-wrapper"
-        >
-          <button
-            aria-label="Color: green"
-            aria-pressed="false"
-            class="components-button components-circular-option-picker__option"
-            style="background-color: rgb(0, 255, 0); color: rgb(0, 255, 0);"
-            type="button"
-          />
-        </div>
-        <div
-          class="components-circular-option-picker__option-wrapper"
-        >
-          <button
-            aria-label="Color: blue"
-            aria-pressed="false"
-            class="components-button components-circular-option-picker__option"
-            style="background-color: rgb(0, 0, 255); color: rgb(0, 0, 255);"
-            type="button"
-          />
-        </div>
-      </div>
-      <div
-        class="components-circular-option-picker__custom-clear-wrapper"
-      >
-        <button
-          class="components-button components-circular-option-picker__clear is-tertiary"
-          type="button"
-        >
-          Clear
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/src/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.tsx

@@ -1,84 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useEffect, memo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import type { ToggleGroupControlBackdropProps } from '../types';
-import { BackdropView } from './styles';
-
-function ToggleGroupControlBackdrop( {
-	containerRef,
-	containerWidth,
-	isAdaptiveWidth,
-	state,
-}: ToggleGroupControlBackdropProps ) {
-	const [ left, setLeft ] = useState( 0 );
-	const [ width, setWidth ] = useState( 0 );
-	const [ canAnimate, setCanAnimate ] = useState( false );
-	const [ renderBackdrop, setRenderBackdrop ] = useState( false );
-
-	useEffect( () => {
-		const containerNode = containerRef?.current;
-		if ( ! containerNode ) return;
-
-		/**
-		 * Workaround for Reakit
-		 */
-		const targetNode = containerNode.querySelector(
-			`[data-value="${ state }"]`
-		);
-		setRenderBackdrop( !! targetNode );
-		if ( ! targetNode ) {
-			return;
-		}
-
-		const computeDimensions = () => {
-			const { width: offsetWidth, x } =
-				targetNode.getBoundingClientRect();
-
-			const { x: parentX } = containerNode.getBoundingClientRect();
-
-			const borderWidth = 1;
-			const offsetLeft = x - parentX - borderWidth;
-
-			setLeft( offsetLeft );
-			setWidth( offsetWidth );
-		};
-		// Fix to make the component appear as expected inside popovers.
-		// If the targetNode width is 0 it means the element was not yet rendered we should allow
-		// some time for the render to happen.
-		// requestAnimationFrame instead of setTimeout with a small time does not seems to work.
-		const dimensionsRequestId = window.setTimeout( computeDimensions, 100 );
-
-		let animationRequestId: number;
-		if ( ! canAnimate ) {
-			animationRequestId = window.requestAnimationFrame( () => {
-				setCanAnimate( true );
-			} );
-		}
-		return () => {
-			window.clearTimeout( dimensionsRequestId );
-			window.cancelAnimationFrame( animationRequestId );
-		};
-	}, [ canAnimate, containerRef, containerWidth, state, isAdaptiveWidth ] );
-
-	if ( ! renderBackdrop ) {
-		return null;
-	}
-
-	return (
-		<BackdropView
-			role="presentation"
-			style={ {
-				transform: `translateX(${ left }px)`,
-				transition: canAnimate ? undefined : 'none',
-				width,
-			} }
-		/>
-	);
-}
-
-export default memo( ToggleGroupControlBackdrop );

package/src/toolbar/toolbar-group/toolbar-group-container.js

@@ -1,8 +0,0 @@
-// @ts-nocheck
-
-const ToolbarGroupContainer = ( { className, children, ...props } ) => (
-	<div className={ className } { ...props }>
-		{ children }
-	</div>
-);
-export default ToolbarGroupContainer;