@wordpress/components 25.6.1 → 25.8.0

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/popover/limit-shift.ts

@@ -1,205 +0,0 @@
-/**
- * External dependencies
- */
-import type {
-	Axis,
-	Coords,
-	Placement,
-	Side,
-	MiddlewareArguments,
-} from '@floating-ui/react-dom';
-
-/**
- * Parts of this source were derived and modified from `floating-ui`,
- * released under the MIT license.
- *
- * https://github.com/floating-ui/floating-ui
- *
- * Copyright (c) 2021 Floating UI contributors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-/**
- * Custom limiter function for the `shift` middleware.
- * This function is mostly identical default `limitShift` from ``@floating-ui`;
- * the only difference is that, when computing the min/max shift limits, it
- * also takes into account the iframe offset that is added by the
- * custom "frameOffset" middleware.
- *
- * All unexported types and functions are also from the `@floating-ui` library,
- * and have been copied to this file for convenience.
- */
-
-type LimitShiftOffset =
-	| ( ( args: MiddlewareArguments ) =>
-			| number
-			| {
-					/**
-					 * Offset the limiting of the axis that runs along the alignment of the
-					 * floating element.
-					 */
-					mainAxis?: number;
-					/**
-					 * Offset the limiting of the axis that runs along the side of the
-					 * floating element.
-					 */
-					crossAxis?: number;
-			  } )
-	| number
-	| {
-			/**
-			 * Offset the limiting of the axis that runs along the alignment of the
-			 * floating element.
-			 */
-			mainAxis?: number;
-			/**
-			 * Offset the limiting of the axis that runs along the side of the
-			 * floating element.
-			 */
-			crossAxis?: number;
-	  };
-
-type LimitShiftOptions = {
-	/**
-	 * Offset when limiting starts. `0` will limit when the opposite edges of the
-	 * reference and floating elements are aligned.
-	 * - positive = start limiting earlier
-	 * - negative = start limiting later
-	 */
-	offset: LimitShiftOffset;
-	/**
-	 * Whether to limit the axis that runs along the alignment of the floating
-	 * element.
-	 */
-	mainAxis: boolean;
-	/**
-	 * Whether to limit the axis that runs along the side of the floating element.
-	 */
-	crossAxis: boolean;
-};
-
-function getSide( placement: Placement ): Side {
-	return placement.split( '-' )[ 0 ] as Side;
-}
-
-function getMainAxisFromPlacement( placement: Placement ): Axis {
-	return [ 'top', 'bottom' ].includes( getSide( placement ) ) ? 'x' : 'y';
-}
-
-function getCrossAxis( axis: Axis ): Axis {
-	return axis === 'x' ? 'y' : 'x';
-}
-
-export const limitShift = (
-	options: Partial< LimitShiftOptions > = {}
-): {
-	options: Partial< LimitShiftOffset >;
-	fn: ( middlewareArguments: MiddlewareArguments ) => Coords;
-} => ( {
-	options,
-	fn( middlewareArguments ) {
-		const { x, y, placement, rects, middlewareData } = middlewareArguments;
-		const {
-			offset = 0,
-			mainAxis: checkMainAxis = true,
-			crossAxis: checkCrossAxis = true,
-		} = options;
-
-		const coords = { x, y };
-		const mainAxis = getMainAxisFromPlacement( placement );
-		const crossAxis = getCrossAxis( mainAxis );
-
-		let mainAxisCoord = coords[ mainAxis ];
-		let crossAxisCoord = coords[ crossAxis ];
-
-		const rawOffset =
-			typeof offset === 'function'
-				? offset( middlewareArguments )
-				: offset;
-		const computedOffset =
-			typeof rawOffset === 'number'
-				? { mainAxis: rawOffset, crossAxis: 0 }
-				: { mainAxis: 0, crossAxis: 0, ...rawOffset };
-
-		// At the moment of writing, this is the only difference
-		// with the `limitShift` function from `@floating-ui`.
-		// This offset needs to be added to all min/max limits
-		// in order to make the shift-limiting work as expected.
-		const additionalFrameOffset = {
-			x: 0,
-			y: 0,
-			...middlewareData.frameOffset?.amount,
-		};
-
-		if ( checkMainAxis ) {
-			const len = mainAxis === 'y' ? 'height' : 'width';
-			const limitMin =
-				rects.reference[ mainAxis ] -
-				rects.floating[ len ] +
-				computedOffset.mainAxis +
-				additionalFrameOffset[ mainAxis ];
-			const limitMax =
-				rects.reference[ mainAxis ] +
-				rects.reference[ len ] -
-				computedOffset.mainAxis +
-				additionalFrameOffset[ mainAxis ];
-
-			if ( mainAxisCoord < limitMin ) {
-				mainAxisCoord = limitMin;
-			} else if ( mainAxisCoord > limitMax ) {
-				mainAxisCoord = limitMax;
-			}
-		}
-
-		if ( checkCrossAxis ) {
-			const len = mainAxis === 'y' ? 'width' : 'height';
-			const isOriginSide = [ 'top', 'left' ].includes(
-				getSide( placement )
-			);
-			const limitMin =
-				rects.reference[ crossAxis ] -
-				rects.floating[ len ] +
-				( isOriginSide
-					? middlewareData.offset?.[ crossAxis ] ?? 0
-					: 0 ) +
-				( isOriginSide ? 0 : computedOffset.crossAxis ) +
-				additionalFrameOffset[ crossAxis ];
-			const limitMax =
-				rects.reference[ crossAxis ] +
-				rects.reference[ len ] +
-				( isOriginSide
-					? 0
-					: middlewareData.offset?.[ crossAxis ] ?? 0 ) -
-				( isOriginSide ? computedOffset.crossAxis : 0 ) +
-				additionalFrameOffset[ crossAxis ];
-
-			if ( crossAxisCoord < limitMin ) {
-				crossAxisCoord = limitMin;
-			} else if ( crossAxisCoord > limitMax ) {
-				crossAxisCoord = limitMax;
-			}
-		}
-
-		return {
-			[ mainAxis ]: mainAxisCoord,
-			[ crossAxis ]: crossAxisCoord,
-		} as Coords;
-	},
-} );

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;