@wordpress/components 35.0.0 → 35.1.1-next.v.202606191442.0

package/src/utils/dropdown-motion.ts

@@ -1,6 +1,6 @@
 // Motion configuration for dropdown-like popovers.
 // Keep constants in sync with: packages/ui/src/utils/css/dropdown-motion.module.css
-// Values should stay in sync with --wpds-motion-* design tokens.
+// Values should stay in sync with the WPDS motion design tokens.
 
 export const DROPDOWN_MOTION = Object.freeze( {
 	SLIDE_DISTANCE: 4,
@@ -25,9 +25,11 @@ const convertEasingToString = ( easing: {
 	return easing.function;
 };
 
-// Note: --wpds-* tokens can't be used here directly because the build-time
-// fallback injection is not compatible with Emotion. This file is consumed
-// by Menu's Emotion styles.
+// Note: WPDS design tokens can't be referenced here directly. The build-time
+// fallback injection is incompatible with Emotion, and even mentioning a token's
+// full CSS custom property name in this file makes the esbuild fallback plugin
+// claim it and break the Emotion transform. This file is consumed by Menu's
+// Emotion styles.
 export const DROPDOWN_MOTION_CSS = Object.freeze( {
 	SLIDE_DISTANCE: `${ DROPDOWN_MOTION.SLIDE_DISTANCE }px`,
 	SLIDE_DURATION: `${ DROPDOWN_MOTION.SLIDE_DURATION }ms`,

package/src/utils/theme-variables.scss

@@ -1,5 +1,3 @@
-@use "@wordpress/base-styles/colors" as *;
-
 // Accent color
 //
 // If the `--wp-components-color-accent` variable is not defined, fallback to
@@ -9,22 +7,29 @@ $components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme
 $components-color-accent-darker-10: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
 $components-color-accent-darker-20: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
 
+// The non-accent values fall back to the design system (`--wpds-*`) tokens.
+// Those are defined at `:root` by the prebuilt `@wordpress/theme` stylesheet
+// when it is loaded (always the case inside WordPress). The references here
+// intentionally omit a hardcoded fallback — the build plugin injects the
+// design system default value, so component styles stay correct even when
+// neither the prebuilt stylesheet nor a runtime `<ThemeProvider>` is present.
+
 // Used when placing text on the accent color.
-$components-color-accent-inverted: var(--wp-components-color-accent-inverted, $white);
+$components-color-accent-inverted: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong));
 
-$components-color-background: var(--wp-components-color-background, $white);
-$components-color-foreground: var(--wp-components-color-foreground, $gray-900);
+$components-color-background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong));
+$components-color-foreground: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral));
 
 // Used when placing text on the foreground color.
-$components-color-foreground-inverted: var(--wp-components-color-foreground-inverted, $white);
+$components-color-foreground-inverted: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral));
 
-$components-color-gray-100: var(--wp-components-color-gray-100, $gray-100);
-$components-color-gray-200: var(--wp-components-color-gray-200, $gray-200);
-$components-color-gray-300: var(--wp-components-color-gray-300, $gray-300);
-$components-color-gray-400: var(--wp-components-color-gray-400, $gray-400);
-$components-color-gray-600: var(--wp-components-color-gray-600, $gray-600);
-$components-color-gray-700: var(--wp-components-color-gray-700, $gray-700);
-$components-color-gray-800: var(--wp-components-color-gray-800, $gray-800);
+$components-color-gray-100: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral));
+$components-color-gray-200: var(--wp-components-color-gray-200, var(--wpds-color-stroke-surface-neutral));
+$components-color-gray-300: var(--wp-components-color-gray-300, var(--wpds-color-stroke-surface-neutral));
+$components-color-gray-400: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral));
+$components-color-gray-600: var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral));
+$components-color-gray-700: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak));
+$components-color-gray-800: var(--wp-components-color-gray-800, var(--wpds-color-foreground-content-neutral));
 
 $components-color-dark-gray-placeholder: color-mix(in srgb, $components-color-foreground, transparent 38%);
 $components-color-light-gray-placeholder: color-mix(in srgb, $components-color-background, transparent 35%);

package/build/mobile/image/constants.cjs

@@ -1,34 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/components/src/mobile/image/constants.js
-var constants_exports = {};
-__export(constants_exports, {
-  IMAGE_DEFAULT_FOCAL_POINT: () => IMAGE_DEFAULT_FOCAL_POINT
-});
-module.exports = __toCommonJS(constants_exports);
-var IMAGE_DEFAULT_FOCAL_POINT = {
-  x: 0.5,
-  y: 0.5
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  IMAGE_DEFAULT_FOCAL_POINT
-});
-//# sourceMappingURL=constants.cjs.map

package/build/mobile/image/constants.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/mobile/image/constants.js"],
-  "sourcesContent": ["export const IMAGE_DEFAULT_FOCAL_POINT = {\n  x: 0.5,\n  y: 0.5\n};"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,IAAM,4BAA4B;AAAA,EACvC,GAAG;AAAA,EACH,GAAG;AACL;",
-  "names": []
-}

package/build-module/mobile/image/constants.mjs

@@ -1,9 +0,0 @@
-// packages/components/src/mobile/image/constants.js
-var IMAGE_DEFAULT_FOCAL_POINT = {
-  x: 0.5,
-  y: 0.5
-};
-export {
-  IMAGE_DEFAULT_FOCAL_POINT
-};
-//# sourceMappingURL=constants.mjs.map

package/build-module/mobile/image/constants.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/mobile/image/constants.js"],
-  "sourcesContent": ["export const IMAGE_DEFAULT_FOCAL_POINT = {\n  x: 0.5,\n  y: 0.5\n};"],
-  "mappings": ";AAAO,IAAM,4BAA4B;AAAA,EACvC,GAAG;AAAA,EACH,GAAG;AACL;",
-  "names": []
-}

package/build-types/mobile/image/constants.d.ts

@@ -1,5 +0,0 @@
-export declare const IMAGE_DEFAULT_FOCAL_POINT: {
-    x: number;
-    y: number;
-};
-//# sourceMappingURL=constants.d.ts.map

package/build-types/mobile/image/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/mobile/image/constants.js"],"names":[],"mappings":"AAAA,eAAO,MAAM,yBAAyB;IAAK,CAAC;IAAO,CAAC;CAAO,CAAC"}

package/src/autocomplete/autocompleter-ui.native.js

@@ -1,211 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	View,
-	Animated,
-	StyleSheet,
-	Text,
-	TouchableOpacity,
-	ScrollView,
-} from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import {
-	useLayoutEffect,
-	useEffect,
-	useRef,
-	useState,
-	useCallback,
-} from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import BackgroundView from './background-view';
-import getDefaultUseItems from './get-default-use-items';
-import styles from './style.scss';
-import Icon from '../icon';
-import { __unstableAutocompletionItemsFill as AutocompletionItemsFill } from '../mobile/autocompletion-items';
-
-const { compose: stylesCompose } = StyleSheet;
-
-export function AutocompleterUI( {
-	autocompleter,
-	filterValue,
-	selectedIndex,
-	onChangeOptions,
-	onSelect,
-	reset,
-} ) {
-	// The useItems hook is derived from the autocompleter prop. This is safe
-	// because the parent renders this component with a key that triggers
-	// remount when the completer changes.
-	const useItems = autocompleter.useItems
-		? autocompleter.useItems
-		: getDefaultUseItems( autocompleter );
-	const [ items ] = useItems( filterValue );
-	const filteredItems = items.filter( ( item ) => ! item.isDisabled );
-	const scrollViewRef = useRef();
-	const animationValue = useRef( new Animated.Value( 0 ) ).current;
-	const [ isVisible, setIsVisible ] = useState( false );
-
-	useEffect( () => {
-		if ( ! isVisible && filterValue.length > 0 ) {
-			setIsVisible( true );
-		}
-	}, [ isVisible, filterValue ] );
-
-	useLayoutEffect( () => {
-		onChangeOptions( items );
-		scrollViewRef.current?.scrollTo( { x: 0, animated: false } );
-
-		if ( isVisible && filterValue.length > 0 ) {
-			startAnimation( true );
-		} else if ( isVisible && filterValue.length === 0 ) {
-			startAnimation( false );
-		}
-		// We want to avoid introducing unexpected side effects.
-		// See https://github.com/WordPress/gutenberg/pull/41820
-	}, [ items, isVisible, filterValue ] );
-
-	const activeItemStyles = usePreferredColorSchemeStyle(
-		styles[ 'components-autocomplete__item-active' ],
-		styles[ 'components-autocomplete__item-active-dark' ]
-	);
-
-	const iconStyles = usePreferredColorSchemeStyle(
-		styles[ 'components-autocomplete__icon' ],
-		styles[ 'components-autocomplete__icon-active-dark' ]
-	);
-
-	const activeIconStyles = usePreferredColorSchemeStyle(
-		styles[ 'components-autocomplete__icon-active ' ],
-		styles[ 'components-autocomplete__icon-active-dark' ]
-	);
-
-	const textStyles = usePreferredColorSchemeStyle(
-		styles[ 'components-autocomplete__text' ],
-		styles[ 'components-autocomplete__text-dark' ]
-	);
-
-	const activeTextStyles = usePreferredColorSchemeStyle(
-		styles[ 'components-autocomplete__text-active' ],
-		styles[ 'components-autocomplete__text-active-dark' ]
-	);
-
-	const startAnimation = useCallback(
-		( show ) => {
-			Animated.timing( animationValue, {
-				toValue: show ? 1 : 0,
-				duration: show ? 200 : 100,
-				useNativeDriver: true,
-			} ).start( ( { finished } ) => {
-				if ( finished && ! show && isVisible ) {
-					setIsVisible( false );
-					reset();
-				}
-			} );
-		},
-		// We want to avoid introducing unexpected side effects.
-		// See https://github.com/WordPress/gutenberg/pull/41820
-		[ isVisible ]
-	);
-
-	const contentStyles = {
-		transform: [
-			{
-				translateY: animationValue.interpolate( {
-					inputRange: [ 0, 1 ],
-					outputRange: [
-						styles[ 'components-autocomplete' ].height,
-						0,
-					],
-				} ),
-			},
-		],
-	};
-
-	if ( ! filteredItems.length > 0 || ! isVisible ) {
-		return null;
-	}
-
-	return (
-		<AutocompletionItemsFill>
-			<View style={ styles[ 'components-autocomplete' ] }>
-				<Animated.View style={ contentStyles }>
-					<BackgroundView>
-						<ScrollView
-							testID="autocompleter"
-							ref={ scrollViewRef }
-							horizontal
-							contentContainerStyle={
-								styles[ 'components-autocomplete__content' ]
-							}
-							showsHorizontalScrollIndicator={ false }
-							keyboardShouldPersistTaps="always"
-							accessibilityLabel={
-								// translators: Slash inserter autocomplete results
-								__( 'Slash inserter results' )
-							}
-						>
-							{ filteredItems.map( ( option, index ) => {
-								const isActive = index === selectedIndex;
-								const itemStyle = stylesCompose(
-									styles[ 'components-autocomplete__item' ],
-									isActive && activeItemStyles
-								);
-								const textStyle = stylesCompose(
-									textStyles,
-									isActive && activeTextStyles
-								);
-								const iconStyle = stylesCompose(
-									iconStyles,
-									isActive && activeIconStyles
-								);
-								const iconSource =
-									option?.value?.icon?.src ||
-									option?.value?.icon;
-
-								return (
-									<TouchableOpacity
-										activeOpacity={ 0.5 }
-										style={ itemStyle }
-										key={ index }
-										onPress={ () => onSelect( option ) }
-										accessibilityLabel={ sprintf(
-											// translators: %s: Block name e.g. "Image block"
-											__( '%s block' ),
-											option?.value?.title
-										) }
-									>
-										<View
-											style={
-												styles[
-													'components-autocomplete__icon'
-												]
-											}
-										>
-											<Icon
-												icon={ iconSource }
-												size={ 24 }
-												style={ iconStyle }
-											/>
-										</View>
-										<Text style={ textStyle }>
-											{ option?.value?.title }
-										</Text>
-									</TouchableOpacity>
-								);
-							} ) }
-						</ScrollView>
-					</BackgroundView>
-				</Animated.View>
-			</View>
-		</AutocompletionItemsFill>
-	);
-}

package/src/autocomplete/background-view.android.js

@@ -1,25 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-const BackgroundView = ( { children } ) => {
-	const backgroundStyles = usePreferredColorSchemeStyle(
-		styles[ 'components-autocomplete__background' ],
-		styles[ 'components-autocomplete__background-dark' ]
-	);
-
-	return <View style={ backgroundStyles }>{ children }</View>;
-};
-
-export default BackgroundView;

package/src/autocomplete/background-view.ios.js

@@ -1,23 +0,0 @@
-/**
- * External dependencies
- */
-import { BlurView } from '@react-native-community/blur';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-const BackgroundView = ( { children } ) => {
-	return (
-		<BlurView
-			style={ styles[ 'components-autocomplete__background-blur' ] }
-			blurType="prominent"
-			blurAmount={ 10 }
-		>
-			{ children }
-		</BlurView>
-	);
-};
-
-export default BackgroundView;

package/src/autocomplete/style.android.scss

@@ -1,7 +0,0 @@
-@import "./style.native.scss";
-
-.components-autocomplete {
-	width: 100%;
-	height: $mobile-header-toolbar-height;
-	bottom: $mobile-header-toolbar-height;
-}

package/src/autocomplete/style.native.scss

@@ -1,74 +0,0 @@
-.components-autocomplete {
-	width: 100%;
-	height: $mobile-header-toolbar-height;
-	overflow: hidden;
-}
-
-.components-autocomplete__background {
-	height: $mobile-header-toolbar-height;
-	background-color: $gray-0;
-}
-
-.components-autocomplete__background-dark {
-	background-color: $app-background-dark-alt;
-}
-
-.components-autocomplete__background-blur {
-	width: 100%;
-	height: $mobile-header-toolbar-height;
-}
-
-.components-autocomplete__content {
-	flex-grow: 1;
-	padding-left: 6px;
-}
-
-.components-autocomplete__item {
-	flex-direction: row;
-	align-items: center;
-	padding: 5px 12px 5px 8px;
-	margin-right: 2px;
-	margin-top: 3px;
-	margin-bottom: 3px;
-}
-
-.components-autocomplete__icon {
-	margin-right: 4px;
-	color: $gray-darken-30;
-}
-
-.components-autocomplete__icon-active {
-	color: $gray-dark;
-}
-
-.components-autocomplete__icon-active-dark {
-	color: $gray-20;
-}
-
-.components-autocomplete__text {
-	color: $gray-darken-30;
-}
-
-.components-autocomplete__text-dark {
-	color: $gray-20;
-}
-
-.components-autocomplete__text-active {
-	color: $gray-dark;
-	text-decoration: underline;
-	text-decoration-color: $gray-darken-30;
-}
-
-.components-autocomplete__text-active-dark {
-	color: $gray-20;
-	text-decoration-color: $gray-20;
-}
-
-.components-autocomplete__item-active {
-	border-radius: 22px;
-	background-color: transparentize($color: $gray-darken-20, $amount: 0.9);
-}
-
-.components-autocomplete__item-active-dark {
-	background-color: $dark-ultra-dim;
-}

package/src/base-control/index.native.js

@@ -1,14 +0,0 @@
-/**
- * External dependencies
- */
-import { Text, View } from 'react-native';
-
-export default function BaseControl( { label, help, children } ) {
-	return (
-		<View accessible accessibilityLabel={ label }>
-			{ label && <Text>{ label }</Text> }
-			{ children }
-			{ help && <Text>{ help }</Text> }
-		</View>
-	);
-}