@wordpress/components 37.0.1-next.v.202607070741.0 → 39.0.0

package/src/calendar/utils/use-localization-props.ts

@@ -1,168 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import type { Modifiers, BaseProps } from '../types';
-
-function isLocaleRTL( localeCode: string ) {
-	const localeObj = new Intl.Locale( localeCode );
-	const direction = localeObj.getTextInfo?.().direction;
-	if ( direction ) {
-		return direction === 'rtl';
-	}
-	return [
-		'ar', // Arabic
-		'he', // Hebrew
-		'fa', // Persian (Farsi)
-		'ur', // Urdu
-		'ps', // Pashto
-		'syr', // Syriac
-		'dv', // Divehi
-		'ku', // Kurdish (Sorani)
-		'yi', // Yiddish
-	].includes( localeObj.language );
-}
-
-/**
- * Returns localization props for the calendar components.
- *
- * Notes:
- * - the following props should be intended as defaults, and should
- *   be overridden by consumer props if listed as public props.
- * - It is possible for the translated strings to use a different locale
- *   than the formatted dates and the computed `dir`. This is because the
- *   translation function doesn't expose the locale used for the translated
- *   strings, meaning that the dates are formatted using the `locale` prop.
- *   For a correct localized experience, consumers should make sure that
- *   translation context and `locale` prop are consistent.
- * @param props
- * @param props.locale
- * @param props.timeZone
- * @param props.mode
- */
-export const useLocalizationProps = ( {
-	locale,
-	timeZone,
-	mode,
-}: {
-	locale: NonNullable< BaseProps[ 'locale' ] >;
-	timeZone: BaseProps[ 'timeZone' ];
-	mode: 'single' | 'range';
-} ) => {
-	return useMemo( () => {
-		// ie. April 2025
-		const monthNameFormatter = new Intl.DateTimeFormat( locale.code, {
-			year: 'numeric',
-			month: 'long',
-			timeZone,
-		} );
-		// ie. M, T, W, T, F, S, S
-		const weekdayNarrowFormatter = new Intl.DateTimeFormat( locale.code, {
-			weekday: 'narrow',
-			timeZone,
-		} );
-		// ie. Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday
-		const weekdayLongFormatter = new Intl.DateTimeFormat( locale.code, {
-			weekday: 'long',
-			timeZone,
-		} );
-		// ie. Monday, April 29, 2025
-		const fullDateFormatter = new Intl.DateTimeFormat( locale.code, {
-			weekday: 'long',
-			year: 'numeric',
-			month: 'long',
-			day: 'numeric',
-			timeZone,
-		} );
-
-		// Note: the following props should be intended as defaults, and should
-		// be overridden by consumer props if listed as public props.
-		return {
-			'aria-label':
-				mode === 'single'
-					? __( 'Date calendar' )
-					: __( 'Date range calendar' ),
-			labels: {
-				/**
-				 * The label for the month grid.
-				 * @param date
-				 */
-				labelGrid: ( date: Date ) => monthNameFormatter.format( date ),
-				/**
-				 * The label for the gridcell, when the calendar is not interactive.
-				 * @param date
-				 * @param modifiers
-				 */
-				labelGridcell: (
-					date: Date,
-					/** The modifiers for the day. */
-					modifiers?: Modifiers
-				) => {
-					const formattedDate = fullDateFormatter.format( date );
-					let label = formattedDate;
-					if ( modifiers?.today ) {
-						label = sprintf(
-							// translators: %s is the full date (e.g. "Monday, April 29, 2025")
-							__( 'Today, %s' ),
-							formattedDate
-						);
-					}
-					return label;
-				},
-				/** The label for the "next month" button. */
-				labelNext: () => __( 'Go to the Next Month' ),
-				/** The label for the "previous month" button. */
-				labelPrevious: () => __( 'Go to the Previous Month' ),
-				/**
-				 * The label for the day button.
-				 * @param date
-				 * @param modifiers
-				 */
-				labelDayButton: (
-					date: Date,
-					/** The modifiers for the day. */
-					modifiers?: Modifiers
-				) => {
-					const formattedDate = fullDateFormatter.format( date );
-					let label = formattedDate;
-					if ( modifiers?.today ) {
-						label = sprintf(
-							// translators: %s is the full date (e.g. "Monday, April 29, 2025")
-							__( 'Today, %s' ),
-							formattedDate
-						);
-					}
-					if ( modifiers?.selected ) {
-						label = sprintf(
-							// translators: %s is the full date (e.g. "Monday, April 29, 2025")
-							__( '%s, selected' ),
-							formattedDate
-						);
-					}
-					return label;
-				},
-				/**
-				 * The label for the weekday.
-				 * @param date
-				 */
-				labelWeekday: ( date: Date ) =>
-					weekdayLongFormatter.format( date ),
-			},
-			locale,
-			dir: isLocaleRTL( locale.code ) ? 'rtl' : 'ltr',
-			formatters: {
-				formatWeekdayName: ( date: Date ) => {
-					return weekdayNarrowFormatter.format( date );
-				},
-				formatCaption: ( date: Date ) => {
-					return monthNameFormatter.format( date );
-				},
-			},
-			timeZone,
-		} as const;
-	}, [ locale, timeZone, mode ] );
-};

package/src/confirm-dialog/styles.ts

@@ -1,18 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * The z-index for ConfirmDialog is being set here instead of in
- * packages/base-styles/_z-index.scss, because this component uses
- * emotion instead of sass.
- *
- * ConfirmDialog needs this higher z-index to ensure it renders on top of
- * any parent Popover component.
- */
-export const wrapper = css`
-	&& {
-		z-index: 1000001;
-	}
-`;

package/src/disabled/styles/disabled-styles.tsx

@@ -1,23 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-export const disabledStyles = css`
-	position: relative;
-	pointer-events: none;
-
-	&::after {
-		content: '';
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-	}
-
-	// Also make nested blocks unselectable.
-	* {
-		pointer-events: none;
-	}
-`;

package/src/form-token-field/styles.ts

@@ -1,15 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
-/**
- * Internal dependencies
- */
-import { Flex } from '../flex';
-import { boxSizingReset } from '../utils';
-
-export const TokensAndInputWrapperFlex = styled( Flex )`
-	padding: 7px;
-	${ boxSizingReset }
-`;

package/src/item-group/styles.ts

@@ -1,116 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import { CONFIG, COLORS, font } from '../utils';
-
-export const unstyledButton = ( as: 'a' | 'button' ) => {
-	return css`
-		font-size: ${ font( 'default.fontSize' ) };
-		font-family: inherit;
-		appearance: none;
-		border: 1px solid transparent;
-		cursor: pointer;
-		background: none;
-		text-align: start;
-		text-decoration: ${ as === 'a' ? 'none' : undefined };
-
-		svg,
-		path {
-			fill: currentColor;
-		}
-
-		&:hover {
-			color: ${ COLORS.theme.accent };
-		}
-
-		&:focus {
-			box-shadow: none;
-			outline: none;
-		}
-
-		&:focus-visible {
-			box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
-				${ COLORS.theme.accent };
-			// Windows high contrast mode.
-			outline: 2px solid transparent;
-			outline-offset: 0;
-		}
-	`;
-};
-
-export const itemWrapper = css`
-	width: 100%;
-	display: block;
-`;
-
-export const item = css`
-	box-sizing: border-box;
-	width: 100%;
-	display: block;
-	margin: 0;
-	color: inherit;
-`;
-
-export const bordered = css`
-	border: 1px solid ${ CONFIG.surfaceBorderColor };
-`;
-
-export const separated = css`
-	> *:not( marquee ) > * {
-		border-bottom: 1px solid ${ CONFIG.surfaceBorderColor };
-	}
-
-	> *:last-of-type > * {
-		border-bottom-color: transparent;
-	}
-`;
-
-const borderRadius = CONFIG.radiusSmall;
-
-export const spacedAround = css`
-	border-radius: ${ borderRadius };
-`;
-
-export const rounded = css`
-	border-radius: ${ borderRadius };
-
-	> *:first-of-type > * {
-		border-top-left-radius: ${ borderRadius };
-		border-top-right-radius: ${ borderRadius };
-	}
-
-	> *:last-of-type > * {
-		border-bottom-left-radius: ${ borderRadius };
-		border-bottom-right-radius: ${ borderRadius };
-	}
-`;
-
-const baseFontHeight = `calc(${ CONFIG.fontSize } * ${ CONFIG.fontLineHeightBase })`;
-
-/*
- * Math:
- * - Use the desired height as the base value
- * - Subtract the computed height of (default) text
- * - Subtract the effects of border
- * - Divide the calculated number by 2, in order to get an individual top/bottom padding
- */
-const paddingY = `calc((${ CONFIG.controlHeight } - ${ baseFontHeight } - 2px) / 2)`;
-const paddingYSmall = `calc((${ CONFIG.controlHeightSmall } - ${ baseFontHeight } - 2px) / 2)`;
-const paddingYLarge = `calc((${ CONFIG.controlHeightLarge } - ${ baseFontHeight } - 2px) / 2)`;
-
-export const itemSizes = {
-	small: css`
-		padding: ${ paddingYSmall } ${ CONFIG.controlPaddingXSmall }px;
-	`,
-	medium: css`
-		padding: ${ paddingY } ${ CONFIG.controlPaddingX }px;
-	`,
-	large: css`
-		padding: ${ paddingYLarge } ${ CONFIG.controlPaddingXLarge }px;
-	`,
-};

package/src/search-control/styles.ts

@@ -1,27 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
-/**
- * Internal dependencies
- */
-import InputControl from '../input-control';
-import Icon from '../icon';
-
-export const StyledInputControl = styled( InputControl )`
-	input[type='search'] {
-		&::-webkit-search-decoration,
-		&::-webkit-search-cancel-button,
-		&::-webkit-search-results-button,
-		&::-webkit-search-results-decoration {
-			-webkit-appearance: none;
-		}
-	}
-`;
-
-export const StyledIcon = styled( Icon )`
-	&:dir( ltr ) {
-		transform: scaleX( -1 );
-	}
-`;

package/src/spinner/styles.ts

@@ -1,50 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-import { css, keyframes } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import { COLORS, CONFIG } from '../utils';
-
-const spinAnimation = keyframes`
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
- `;
-
-export const StyledSpinner = styled.svg`
-	width: ${ CONFIG.spinnerSize }px;
-	height: ${ CONFIG.spinnerSize }px;
-	display: inline-block;
-	margin: 5px 11px 0;
-	position: relative;
-	color: ${ COLORS.theme.accent };
-	overflow: visible;
-	opacity: 1;
-	background-color: transparent;
-`;
-
-const commonPathProps = css`
-	fill: transparent;
-	stroke-width: 1.5px;
-`;
-
-// TODO: should use the `stroke-surface-neutral` WPDS token when refactored to SCSS modules
-export const SpinnerTrack = styled.circle`
-	${ commonPathProps };
-	stroke: ${ COLORS.gray[ 300 ] };
-`;
-
-export const SpinnerIndicator = styled.path`
-	${ commonPathProps };
-	stroke: currentColor;
-	stroke-linecap: round;
-	transform-origin: 50% 50%;
-	animation: 1.4s linear infinite both ${ spinAnimation };
-`;

package/src/theme/README.md

@@ -1,47 +0,0 @@
-# Theme
-
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-`Theme` allows defining theme variables for components in the `@wordpress/components` package.
-
-Multiple `Theme` components can be nested in order to override specific theme variables.
-
-## Props
-
-### `accent`: `string`
-
-The accent color (used by components as the primary color). If an accent color is not defined, the default fallback value is the original WP Admin main theme color.
-
-Not all valid CSS color syntaxes are supported — in particular, keywords (like `'currentcolor'`, `'inherit'`, `'initial'`, `'revert'`, `'unset'`...) and CSS custom properties (e.g. `var(--my-custom-property)`) are _not_ supported values for this property.
-
--   Required: No
-
-### `background`: `string`
-
-The background color.  If a component explicitly has a background, it will be this color. Otherwise, this color will simply be used to determine what the foreground colors should be. The actual background color will need to be set on the component's container element. If a background color is not defined, the default fallback value is #fff.
-
-Not all valid CSS color syntaxes are supported — in particular, keywords (like `'currentcolor'`, `'inherit'`, `'initial'`, `'revert'`, `'unset'`...) and CSS custom properties (e.g. `var(--my-custom-property)`) are _not_ supported values for this property.
-
--   Required: No
-
-## Writing themeable components
-
-If you would like your custom component to be themeable as a child of the `Theme` component, it should use these color variables. (This is a work in progress, and this list of variables may change. We do not recommend using these variables in production at this time.)
-
--  `--wp-components-color-accent`: The accent color.
--  `--wp-components-color-accent-darker-10`: A slightly darker version of the accent color.
--  `--wp-components-color-accent-darker-20`: An even darker version of the accent color.
--  `--wp-components-color-accent-inverted`: The foreground color when the accent color is the background, for example when placing text on the accent color.
--  `--wp-components-color-background`: The background color.
--  `--wp-components-color-foreground`: The foreground color, for example text.
--  `--wp-components-color-foreground-inverted`: The foreground color when the foreground color is the background, for example when placing text on the foreground color.
--  Grayscale:
-   -  `--wp-components-color-gray-100`: Used for light gray backgrounds.
-   -  `--wp-components-color-gray-200`: Used sparingly for light borders.
-   -	`--wp-components-color-gray-300`: Used for most borders.
-   -	`--wp-components-color-gray-400`
-   -	`--wp-components-color-gray-600`: Meets 3:1 UI or large text contrast against white.
-   -	`--wp-components-color-gray-700`: Meets 4.6:1 text contrast against white.
-   -	`--wp-components-color-gray-800`

package/src/theme/color-algorithms.ts

@@ -1,142 +0,0 @@
-/**
- * External dependencies
- */
-import { colord, extend } from 'colord';
-import a11yPlugin from 'colord/plugins/a11y';
-import namesPlugin from 'colord/plugins/names';
-
-/**
- * WordPress dependencies
- */
-import warning from '@wordpress/warning';
-
-/**
- * Internal dependencies
- */
-import type { ThemeInputValues, ThemeOutputValues } from './types';
-import { COLORS } from '../utils';
-
-extend( [ namesPlugin, a11yPlugin ] );
-
-export function generateThemeVariables(
-	inputs: ThemeInputValues
-): ThemeOutputValues {
-	validateInputs( inputs );
-
-	const generatedColors = {
-		...generateAccentDependentColors( inputs.accent ),
-		...generateBackgroundDependentColors( inputs.background ),
-	};
-
-	warnContrastIssues( checkContrasts( inputs, generatedColors ) );
-
-	return { colors: generatedColors };
-}
-
-function validateInputs( inputs: ThemeInputValues ) {
-	for ( const [ key, value ] of Object.entries( inputs ) ) {
-		if ( typeof value !== 'undefined' && ! colord( value ).isValid() ) {
-			warning(
-				`wp.components.Theme: "${ value }" is not a valid color value for the '${ key }' prop.`
-			);
-		}
-	}
-}
-
-export function checkContrasts(
-	inputs: ThemeInputValues,
-	outputs: ThemeOutputValues[ 'colors' ]
-) {
-	const background = inputs.background || COLORS.white;
-	const accent = inputs.accent || '#3858e9';
-	const foreground = outputs.foreground || COLORS.gray[ 900 ];
-	const gray = outputs.gray || COLORS.gray;
-
-	return {
-		accent: colord( background ).isReadable( accent )
-			? undefined
-			: `The background color ("${ background }") does not have sufficient contrast against the accent color ("${ accent }").`,
-		foreground: colord( background ).isReadable( foreground )
-			? undefined
-			: `The background color provided ("${ background }") does not have sufficient contrast against the standard foreground colors.`,
-		grays:
-			colord( background ).contrast( gray[ 600 ] ) >= 3 &&
-			colord( background ).contrast( gray[ 700 ] ) >= 4.5
-				? undefined
-				: `The background color provided ("${ background }") cannot generate a set of grayscale foreground colors with sufficient contrast. Try adjusting the color to be lighter or darker.`,
-	};
-}
-
-function warnContrastIssues( issues: ReturnType< typeof checkContrasts > ) {
-	for ( const error of Object.values( issues ) ) {
-		if ( error ) {
-			warning( 'wp.components.Theme: ' + error );
-		}
-	}
-}
-
-function generateAccentDependentColors( accent?: string ) {
-	if ( ! accent ) {
-		return {};
-	}
-
-	return {
-		accent,
-		accentDarker10: colord( accent ).darken( 0.1 ).toHex(),
-		accentDarker20: colord( accent ).darken( 0.2 ).toHex(),
-		accentInverted: getForegroundForColor( accent ),
-	};
-}
-
-function generateBackgroundDependentColors( background?: string ) {
-	if ( ! background ) {
-		return {};
-	}
-
-	const foreground = getForegroundForColor( background );
-
-	return {
-		background,
-		foreground,
-		foregroundInverted: getForegroundForColor( foreground ),
-		gray: generateShades( background, foreground ),
-	};
-}
-
-function getForegroundForColor( color: string ) {
-	return colord( color ).isDark() ? COLORS.white : COLORS.gray[ 900 ];
-}
-
-export function generateShades( background: string, foreground: string ) {
-	// How much darkness you need to add to #fff to get the COLORS.gray[n] color
-	const SHADES = {
-		100: 0.06,
-		200: 0.121,
-		300: 0.132,
-		400: 0.2,
-		600: 0.42,
-		700: 0.543,
-		800: 0.821,
-	};
-
-	// Darkness of COLORS.gray[ 900 ], relative to #fff
-	const limit = 0.884;
-
-	const direction = colord( background ).isDark() ? 'lighten' : 'darken';
-
-	// Lightness delta between the background and foreground colors
-	const range =
-		Math.abs(
-			colord( background ).toHsl().l - colord( foreground ).toHsl().l
-		) / 100;
-
-	const result: Record< number, string > = {};
-
-	Object.entries( SHADES ).forEach( ( [ key, value ] ) => {
-		result[ parseInt( key ) ] = colord( background )
-			[ direction ]( ( value / limit ) * range )
-			.toHex();
-	} );
-
-	return result as NonNullable< ThemeOutputValues[ 'colors' ][ 'gray' ] >;
-}

package/src/theme/index.tsx

@@ -1,80 +0,0 @@
-import clsx from 'clsx';
-import type { CSSProperties } from 'react';
-
-import { useMemo } from '@wordpress/element';
-
-import type { ThemeOutputValues, ThemeProps } from './types';
-import type { WordPressComponentProps } from '../context';
-import { generateThemeVariables } from './color-algorithms';
-import styles from './style.module.scss';
-import { PolymorphicElement } from '../utils/polymorphic-element';
-
-const getColorVariables = ( {
-	colors,
-}: ThemeOutputValues ): CSSProperties => ( {
-	'--wp-components-color-accent': colors.accent,
-	'--wp-components-color-accent-darker-10': colors.accentDarker10,
-	'--wp-components-color-accent-darker-20': colors.accentDarker20,
-	'--wp-components-color-accent-inverted': colors.accentInverted,
-	'--wp-components-color-background': colors.background,
-	'--wp-components-color-foreground': colors.foreground,
-	'--wp-components-color-foreground-inverted': colors.foregroundInverted,
-	...Object.fromEntries(
-		Object.entries( colors.gray ?? {} ).map( ( [ key, value ] ) => [
-			`--wp-components-color-gray-${ key }`,
-			value,
-		] )
-	),
-} );
-
-/**
- * `Theme` allows defining theme variables for components in the `@wordpress/components` package.
- *
- * Multiple `Theme` components can be nested in order to override specific theme variables.
- *
- *
- * ```jsx
- * const Example = () => {
- *   return (
- *     <Theme accent="red">
- *       <Button variant="primary">I'm red</Button>
- *       <Theme accent="blue">
- *         <Button variant="primary">I'm blue</Button>
- *       </Theme>
- *     </Theme>
- *   );
- * };
- * ```
- */
-function Theme( {
-	accent,
-	background,
-	className,
-	style,
-	...props
-}: WordPressComponentProps< ThemeProps, 'div', true > ) {
-	const themeVariables = useMemo(
-		() =>
-			getColorVariables(
-				generateThemeVariables( { accent, background } )
-			),
-		[ accent, background ]
-	);
-	const wrapperStyle = useMemo(
-		() => ( {
-			...themeVariables,
-			...style,
-		} ),
-		[ style, themeVariables ]
-	);
-
-	return (
-		<PolymorphicElement
-			className={ clsx( styles.wrapper, className ) }
-			style={ wrapperStyle }
-			{ ...props }
-		/>
-	);
-}
-
-export default Theme;