@wordpress/components 30.9.1-next.8b30e05b0.0 → 31.0.1-next.738bb1424.0

package/build-types/dimension-control/index.d.ts

@@ -1,29 +0,0 @@
-import type { DimensionControlProps } from './types';
-/**
- * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
- *
- * @deprecated
- *
- * ```jsx
- * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * export default function MyCustomDimensionControl() {
- * 	const [ paddingSize, setPaddingSize ] = useState( '' );
- *
- * 	return (
- * 		<DimensionControl
- * 			__next40pxDefaultSize
- * 			__nextHasNoMarginBottom
- * 			label={ 'Padding' }
- * 			icon={ 'desktop' }
- * 			onChange={ ( value ) => setPaddingSize( value ) }
- * 			value={ paddingSize }
- * 		/>
- * 	);
- * }
- * ```
- */
-export declare function DimensionControl(props: DimensionControlProps): import("react").JSX.Element;
-export default DimensionControl;
-//# sourceMappingURL=index.d.ts.map

package/build-types/dimension-control/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dimension-control/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,qBAAqB,EAAQ,MAAM,SAAS,CAAC;AAc3D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,gBAAgB,CAAE,KAAK,EAAE,qBAAqB,+BA0E7D;AAED,eAAe,gBAAgB,CAAC"}

package/build-types/dimension-control/sizes.d.ts

@@ -1,38 +0,0 @@
-/**
- * Sizes
- *
- * defines the sizes used in dimension controls
- * all hardcoded `size` values are based on the value of
- * the Sass variable `$block-padding` from
- * `packages/block-editor/src/components/dimension-control/sizes.js`.
- */
-/**
- * Internal dependencies
- */
-import type { Size } from './types';
-/**
- * Finds the correct size object from the provided sizes
- * table by size slug (eg: `medium`)
- *
- * @param sizes containing objects for each size definition.
- * @param slug  a string representation of the size (eg: `medium`).
- */
-export declare const findSizeBySlug: (sizes: Size[], slug: string) => Size | undefined;
-declare const _default: ({
-    name: import("@wordpress/i18n").TranslatableText<"None">;
-    slug: string;
-} | {
-    name: import("@wordpress/i18n").TranslatableText<"Small">;
-    slug: string;
-} | {
-    name: import("@wordpress/i18n").TranslatableText<"Medium">;
-    slug: string;
-} | {
-    name: import("@wordpress/i18n").TranslatableText<"Large">;
-    slug: string;
-} | {
-    name: import("@wordpress/i18n").TranslatableText<"Extra Large">;
-    slug: string;
-})[];
-export default _default;
-//# sourceMappingURL=sizes.d.ts.map

package/build-types/dimension-control/sizes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../src/dimension-control/sizes.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAEpC;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,GAAK,OAAO,IAAI,EAAE,EAAE,MAAM,MAAM,qBACd,CAAC;;;;;;;;;;;;;;;;;AAE9C,wBAqBE"}

package/build-types/dimension-control/stories/index.story.d.ts

@@ -1,24 +0,0 @@
-/**
- * External dependencies
- */
-import type { Meta } from '@storybook/react';
-/**
- * Internal dependencies
- */
-import { DimensionControl } from '..';
-/**
- * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
- *
- * This component is deprecated.
- */
-declare const meta: Meta<typeof DimensionControl>;
-export default meta;
-export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Pick<import("../../select-control/types").SelectControlProps, "__next40pxDefaultSize" | "__nextHasNoMarginBottom"> & {
-    label: string;
-    sizes?: import("../types").Size[];
-    icon?: import("../..").IconType;
-    value?: string;
-    onChange?: (value?: string) => void;
-    className?: string;
-}>;
-//# sourceMappingURL=index.story.d.ts.map

package/build-types/dimension-control/stories/index.story.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/dimension-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AACtD;;GAEG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,IAAI,CAAC;AAQtC;;;;GAIG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,gBAAgB,CAsBxC,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO;;;;;qBAPpB,CAAA;;EAO0C,CAAC"}

package/build-types/dimension-control/types.d.ts

@@ -1,48 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { IconType } from '../icon';
-import type { SelectControlProps } from '../select-control/types';
-export type Size = {
-    /**
-     * Human-readable name of the size.
-     */
-    name: string;
-    /**
-     * Short unique identifying name of the size.
-     */
-    slug: string;
-};
-export type DimensionControlProps = Pick<SelectControlProps, '__next40pxDefaultSize' | '__nextHasNoMarginBottom'> & {
-    /**
-     * Label for the control.
-     */
-    label: string;
-    /**
-     * An array of sizes to choose from.
-     *
-     * @default DEFAULT_SIZES
-     *
-     * @see packages/components/src/dimension-control/sizes.ts
-     */
-    sizes?: Size[];
-    /**
-     * Optional icon rendered in front on the label.
-     */
-    icon?: IconType;
-    /**
-     * Used to externally control the current value of the control.
-     */
-    value?: string;
-    /**
-     * Function called with the control's internal state changes. The `value` property is equal to a given size slug.
-     */
-    onChange?: (value?: string) => void;
-    /**
-     * CSS class applied to `SelectControl`.
-     *
-     * @default ''
-     */
-    className?: string;
-};
-//# sourceMappingURL=types.d.ts.map

package/build-types/dimension-control/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/dimension-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE,MAAM,MAAM,IAAI,GAAG;IAClB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACvC,kBAAkB,EAClB,uBAAuB,GAAG,yBAAyB,CACnD,GAAG;IACH;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAE,KAAK,CAAC,EAAE,MAAM,KAAM,IAAI,CAAC;IACtC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC"}

package/schemas/docs-manifest.json

@@ -1,38 +0,0 @@
-{
-	"title": "JSON schema for @wordpress/components README manifests",
-	"$schema": "http://json-schema.org/draft-07/schema#",
-	"type": "object",
-	"properties": {
-		"displayName": {
-			"type": "string",
-			"description": "The `displayName` of the component, as determined in code. Used to identify the component in the specified source file."
-		},
-		"filePath": {
-			"type": "string",
-			"description": "The file path where the component is located."
-		},
-		"subcomponents": {
-			"type": "array",
-			"description": "List of subcomponents related to the component.",
-			"items": {
-				"type": "object",
-				"properties": {
-					"displayName": {
-						"type": "string",
-						"description": "The `displayName` of the subcomponent, as determined in code. Used to identify the component in the specified source file."
-					},
-					"preferredDisplayName": {
-						"type": "string",
-						"description": "The display name to use in the README, if it is different from the `displayName` as determined in code."
-					},
-					"filePath": {
-						"type": "string",
-						"description": "The file path where the subcomponent is located."
-					}
-				},
-				"required": [ "displayName", "filePath" ]
-			}
-		}
-	},
-	"required": [ "displayName", "filePath" ]
-}

package/src/alignment-matrix-control/styles.ts

@@ -1,113 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import { COLORS, CONFIG } from '../utils';
-import type {
-	AlignmentMatrixControlProps,
-	AlignmentMatrixControlIconProps,
-} from './types';
-
-// Grid structure
-
-const rootBase = ( { size = 92 } ) => css`
-	direction: ltr;
-
-	display: grid;
-	grid-template-columns: repeat( 3, 1fr );
-	grid-template-rows: repeat( 3, 1fr );
-
-	box-sizing: border-box;
-	width: ${ size }px;
-	aspect-ratio: 1;
-
-	border-radius: ${ CONFIG.radiusMedium };
-	outline: none;
-`;
-
-export const GridContainer = styled.div< {
-	size?: AlignmentMatrixControlProps[ 'width' ];
-	disablePointerEvents?: AlignmentMatrixControlIconProps[ 'disablePointerEvents' ];
-} >`
-	${ rootBase }
-
-	border: 1px solid transparent;
-
-	${ ( props ) =>
-		props.disablePointerEvents
-			? css``
-			: css`
-					cursor: pointer;
-			  ` }
-`;
-
-export const GridRow = styled.div`
-	grid-column: 1 / -1;
-
-	box-sizing: border-box;
-	display: grid;
-	grid-template-columns: repeat( 3, 1fr );
-`;
-
-// Cell
-export const Cell = styled.span`
-	position: relative;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	box-sizing: border-box;
-	margin: 0;
-	padding: 0;
-
-	appearance: none;
-	border: none;
-	outline: none;
-`;
-
-const POINT_SIZE = 6;
-export const Point = styled.span`
-	display: block;
-	contain: strict;
-
-	box-sizing: border-box;
-	width: ${ POINT_SIZE }px;
-	aspect-ratio: 1;
-
-	margin: auto;
-
-	color: ${ COLORS.theme.gray[ 400 ] };
-
-	/* Use border instead of background color so that the point shows
-	in Windows High Contrast Mode */
-	border: ${ POINT_SIZE / 2 }px solid currentColor;
-
-	/* Highlight active item */
-	${ Cell }[data-active-item] & {
-		color: ${ COLORS.gray[ 900 ] };
-		transform: scale( calc( 5 / 3 ) );
-	}
-
-	/* Hover styles for non-active items */
-	${ Cell }:not([data-active-item]):hover & {
-		color: ${ COLORS.theme.accent };
-	}
-
-	/* Show an outline only when interacting with keyboard */
-	${ Cell }[data-focus-visible] & {
-		outline: 1px solid ${ COLORS.theme.accent };
-		outline-offset: 1px;
-	}
-
-	@media not ( prefers-reduced-motion ) {
-		transition-property: color, transform;
-		transition-duration: 120ms;
-		transition-timing-function: linear;
-	}
-`;

package/src/angle-picker-control/styles/angle-picker-control-styles.tsx

@@ -1,58 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
-/**
- * Internal dependencies
- */
-import { COLORS } from '../../utils';
-import { space } from '../../utils/space';
-import { Text } from '../../text';
-import CONFIG from '../../utils/config-values';
-
-const CIRCLE_SIZE = 32;
-const INNER_CIRCLE_SIZE = 6;
-
-export const CircleRoot = styled.div`
-	border-radius: ${ CONFIG.radiusRound };
-	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
-	box-sizing: border-box;
-	cursor: grab;
-	height: ${ CIRCLE_SIZE }px;
-	overflow: hidden;
-	width: ${ CIRCLE_SIZE }px;
-
-	:active {
-		cursor: grabbing;
-	}
-`;
-
-export const CircleIndicatorWrapper = styled.div`
-	box-sizing: border-box;
-	position: relative;
-	width: 100%;
-	height: 100%;
-
-	:focus-visible {
-		outline: none;
-	}
-`;
-
-export const CircleIndicator = styled.div`
-	background: ${ COLORS.theme.accent };
-	border-radius: ${ CONFIG.radiusRound };
-	box-sizing: border-box;
-	display: block;
-	left: 50%;
-	top: 4px;
-	transform: translateX( -50% );
-	position: absolute;
-	width: ${ INNER_CIRCLE_SIZE }px;
-	height: ${ INNER_CIRCLE_SIZE }px;
-`;
-
-export const UnitText = styled( Text )`
-	color: ${ COLORS.theme.accent };
-	margin-right: ${ space( 3 ) };
-`;

package/src/dimension-control/README.md

@@ -1,115 +0,0 @@
-# DimensionControl
-
-<div class="callout callout-alert">
-This component is deprecated.
-</div>
-
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-`DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
-
-## Usage
-
-```jsx
-import { useState } from 'react';
-import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
-
-export default function MyCustomDimensionControl() {
-	const [ paddingSize, setPaddingSize ] = useState( '' );
-
-	return (
-		<DimensionControl
-			__nextHasNoMarginBottom
-			__next40pxDefaultSize
-			label={ 'Padding' }
-			icon={ 'desktop' }
-			onChange={ ( value ) => setPaddingSize( value ) }
-			value={ paddingSize }
-		/>
-	);
-}
-```
-
-_Note:_ by default, if you do not provide an initial `value` prop for the current dimension value, then no value will be selected (ie: there is no default dimension set).
-
-## Props
-
-### `label`
-
--   **Type:** `string`
--   **Required:** Yes
-
-The human readable label for the control.
-
-### `value`
-
--   **Type:** `string`
--   **Required:** No
-
-The current value of the dimension UI control. If provided the UI with automatically select the value.
-
-### `sizes`
-
--   **Type:** `{ name: string; slug: string }[]`
--   **Default:** See `packages/block-editor/src/components/dimension-control/sizes.ts`
--   **Required:** No
-
-An optional array of size objects in the following shape:
-
-```
-[
-	{
-		name: __( 'Small' ),
-		slug: 'small',
-	},
-		{
-		name: __( 'Medium' ),
-		slug: 'small',
-	},
-	// ...etc
-]
-```
-
-By default a set of relative sizes (`small`, `medium`...etc) are provided. See `packages/block-editor/src/components/dimension-control/sizes.js`.
-
-### `icon`
-
--   **Type:** `string`
--   **Required:** No
-
-An optional dashicon to display before to the control label.
-
-### `onChange`
-
--   **Type:** `( value?: string ) => void;`
--   **Required:** No
--   **Arguments:**:
-    -   `size` - a string representing the selected size (eg: `medium`)
-
-A callback which is triggered when a spacing size value changes (is selected/clicked).
-
-### `className`
-
--   **Type:** `string`
--   **Default:** `''`
--   **Required:** No
-
-A string of classes to be added to the control component.
-
-### `__next40pxDefaultSize`
-
--   **Type:** `Boolean`
--   **Required:** No
--   **Default:** `false`
-
-Start opting into the larger default height that will become the default size in a future version.
-
-### `__nextHasNoMarginBottom`
-
--   **Type:** `Boolean`
--   **Required:** No
--   **Default:** `false`
-
-Start opting into the new margin-free styles that will become the default in a future version.

package/src/dimension-control/index.tsx

@@ -1,132 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import Icon from '../icon';
-import SelectControl from '../select-control';
-import sizesTable, { findSizeBySlug } from './sizes';
-import type { DimensionControlProps, Size } from './types';
-import type { SelectControlSingleSelectionProps } from '../select-control/types';
-import { ContextSystemProvider } from '../context';
-import deprecated from '@wordpress/deprecated';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
-
-const CONTEXT_VALUE = {
-	BaseControl: {
-		// Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName`
-		// via the context system to override the value set by SelectControl.
-		_overrides: { __associatedWPComponentName: 'DimensionControl' },
-	},
-};
-
-/**
- * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
- *
- * @deprecated
- *
- * ```jsx
- * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * export default function MyCustomDimensionControl() {
- * 	const [ paddingSize, setPaddingSize ] = useState( '' );
- *
- * 	return (
- * 		<DimensionControl
- * 			__next40pxDefaultSize
- * 			__nextHasNoMarginBottom
- * 			label={ 'Padding' }
- * 			icon={ 'desktop' }
- * 			onChange={ ( value ) => setPaddingSize( value ) }
- * 			value={ paddingSize }
- * 		/>
- * 	);
- * }
- * ```
- */
-export function DimensionControl( props: DimensionControlProps ) {
-	const {
-		__next40pxDefaultSize = false,
-		__nextHasNoMarginBottom = false,
-		label,
-		value,
-		sizes = sizesTable,
-		icon,
-		onChange,
-		className = '',
-	} = props;
-
-	deprecated( 'wp.components.DimensionControl', {
-		since: '6.7',
-		version: '7.0',
-	} );
-
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'DimensionControl',
-		__next40pxDefaultSize,
-		size: undefined,
-	} );
-
-	const onChangeSpacingSize: SelectControlSingleSelectionProps[ 'onChange' ] =
-		( val ) => {
-			const theSize = findSizeBySlug( sizes, val );
-
-			if ( ! theSize || value === theSize.slug ) {
-				onChange?.( undefined );
-			} else if ( typeof onChange === 'function' ) {
-				onChange( theSize.slug );
-			}
-		};
-
-	const formatSizesAsOptions = ( theSizes: Size[] ) => {
-		const options = theSizes.map( ( { name, slug } ) => ( {
-			label: name,
-			value: slug,
-		} ) );
-
-		return [
-			{
-				label: __( 'Default' ),
-				value: '',
-			},
-			...options,
-		];
-	};
-
-	const selectLabel = (
-		<>
-			{ icon && <Icon icon={ icon } /> }
-			{ label }
-		</>
-	);
-
-	return (
-		<ContextSystemProvider value={ CONTEXT_VALUE }>
-			<SelectControl
-				__next40pxDefaultSize={ __next40pxDefaultSize }
-				__shouldNotWarnDeprecated36pxSize
-				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-				className={ clsx(
-					className,
-					'block-editor-dimension-control'
-				) }
-				label={ selectLabel }
-				hideLabelFromVision={ false }
-				value={ value }
-				onChange={ onChangeSpacingSize }
-				options={ formatSizesAsOptions( sizes ) }
-			/>
-		</ContextSystemProvider>
-	);
-}
-
-export default DimensionControl;

package/src/dimension-control/sizes.ts

@@ -1,51 +0,0 @@
-/**
- * Sizes
- *
- * defines the sizes used in dimension controls
- * all hardcoded `size` values are based on the value of
- * the Sass variable `$block-padding` from
- * `packages/block-editor/src/components/dimension-control/sizes.js`.
- */
-
-/**
- * WordPress dependencies
- */
-import { _x } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import type { Size } from './types';
-
-/**
- * Finds the correct size object from the provided sizes
- * table by size slug (eg: `medium`)
- *
- * @param sizes containing objects for each size definition.
- * @param slug  a string representation of the size (eg: `medium`).
- */
-export const findSizeBySlug = ( sizes: Size[], slug: string ) =>
-	sizes.find( ( size ) => slug === size.slug );
-
-export default [
-	{
-		name: _x( 'None', 'Size of a UI element' ),
-		slug: 'none',
-	},
-	{
-		name: _x( 'Small', 'Size of a UI element' ),
-		slug: 'small',
-	},
-	{
-		name: _x( 'Medium', 'Size of a UI element' ),
-		slug: 'medium',
-	},
-	{
-		name: _x( 'Large', 'Size of a UI element' ),
-		slug: 'large',
-	},
-	{
-		name: _x( 'Extra Large', 'Size of a UI element' ),
-		slug: 'xlarge',
-	},
-];