@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.2

package/src/mobile/link-settings/image-link-destinations-screen.native.js

@@ -1,152 +0,0 @@
-/**
- * External dependencies
- */
-import { useNavigation, useRoute } from '@react-navigation/native';
-import { StyleSheet } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Icon, check, chevronRight } from '@wordpress/icons';
-import { blockSettingsScreens } from '@wordpress/block-editor';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import PanelBody from '../../panel/body';
-import BottomSheet from '../bottom-sheet';
-
-const LINK_DESTINATION_NONE = 'none';
-const LINK_DESTINATION_MEDIA = 'media';
-const LINK_DESTINATION_ATTACHMENT = 'attachment';
-const LINK_DESTINATION_CUSTOM = 'custom';
-
-function LinkDestination( {
-	children,
-	isSelected,
-	label,
-	onPress,
-	value,
-	valueStyle,
-} ) {
-	const optionIcon = usePreferredColorSchemeStyle(
-		styles.optionIcon,
-		styles.optionIconDark
-	);
-	return (
-		<BottomSheet.Cell
-			icon={ check }
-			iconStyle={ StyleSheet.flatten( [
-				optionIcon,
-				! isSelected && styles.unselectedOptionIcon,
-			] ) }
-			label={ label }
-			leftAlign
-			onPress={ onPress }
-			value={ value }
-			valueStyle={ valueStyle }
-			separatorType="leftMargin"
-		>
-			{ children }
-		</BottomSheet.Cell>
-	);
-}
-
-function ImageLinkDestinationsScreen( props ) {
-	const navigation = useNavigation();
-	const route = useRoute();
-	const { url = '' } = props;
-	const {
-		inputValue = url,
-		imageUrl,
-		attachmentPageUrl,
-		linkDestination,
-	} = route.params || {};
-
-	function goToLinkPicker() {
-		navigation.navigate( blockSettingsScreens.linkPicker, {
-			inputValue:
-				linkDestination === LINK_DESTINATION_CUSTOM ? inputValue : '',
-		} );
-	}
-
-	const setLinkDestination = ( newLinkDestination ) => () => {
-		let newUrl;
-		switch ( newLinkDestination ) {
-			case LINK_DESTINATION_MEDIA:
-				newUrl = imageUrl;
-				break;
-			case LINK_DESTINATION_ATTACHMENT:
-				newUrl = attachmentPageUrl;
-				break;
-			default:
-				newUrl = '';
-				break;
-		}
-
-		navigation.navigate( blockSettingsScreens.settings, {
-			// The `inputValue` name is reused from LinkPicker, as it helps avoid
-			// bugs from stale values remaining in the React Navigation route
-			// parameters.
-			inputValue: newUrl,
-			// Clear link text value that may be set from LinkPicker.
-			text: '',
-		} );
-	};
-
-	return (
-		<>
-			<BottomSheet.NavBar>
-				<BottomSheet.NavBar.BackButton onPress={ navigation.goBack } />
-				<BottomSheet.NavBar.Heading>
-					{ __( 'Link To' ) }
-				</BottomSheet.NavBar.Heading>
-			</BottomSheet.NavBar>
-			<PanelBody>
-				<LinkDestination
-					isSelected={ linkDestination === LINK_DESTINATION_NONE }
-					label={ __( 'None' ) }
-					onPress={ setLinkDestination( LINK_DESTINATION_NONE ) }
-				/>
-				<LinkDestination
-					isSelected={ linkDestination === LINK_DESTINATION_MEDIA }
-					label={ __( 'Media File' ) }
-					onPress={ setLinkDestination( LINK_DESTINATION_MEDIA ) }
-				/>
-				{ !! attachmentPageUrl && (
-					<LinkDestination
-						isSelected={
-							linkDestination === LINK_DESTINATION_ATTACHMENT
-						}
-						label={ __( 'Attachment Page' ) }
-						onPress={ setLinkDestination(
-							LINK_DESTINATION_ATTACHMENT
-						) }
-					/>
-				) }
-				<LinkDestination
-					isSelected={ linkDestination === LINK_DESTINATION_CUSTOM }
-					label={ __( 'Custom URL' ) }
-					onPress={ goToLinkPicker }
-					value={
-						linkDestination === LINK_DESTINATION_CUSTOM
-							? inputValue
-							: ''
-					}
-					valueStyle={
-						linkDestination === LINK_DESTINATION_CUSTOM
-							? undefined
-							: styles.placeholderTextColor
-					}
-				>
-					<Icon icon={ chevronRight }></Icon>
-				</LinkDestination>
-			</PanelBody>
-		</>
-	);
-}
-
-export default ImageLinkDestinationsScreen;

package/src/radio-group/index.js

@@ -1,51 +0,0 @@
-// @ts-nocheck
-
-/**
- * External dependencies
- */
-import { useRadioState, RadioGroup as ReakitRadioGroup } from 'reakit/Radio';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import ButtonGroup from '../button-group';
-import RadioContext from './radio-context';
-
-function RadioGroup(
-	{ label, checked, defaultChecked, disabled, onChange, ...props },
-	ref
-) {
-	const radioState = useRadioState( {
-		state: defaultChecked,
-		baseId: props.id,
-	} );
-	const radioContext = {
-		...radioState,
-		disabled,
-		// Controlled or uncontrolled.
-		state: checked ?? radioState.state,
-		setState: onChange ?? radioState.setState,
-	};
-
-	return (
-		<RadioContext.Provider value={ radioContext }>
-			<ReakitRadioGroup
-				ref={ ref }
-				as={ ButtonGroup }
-				aria-label={ label }
-				{ ...radioState }
-				{ ...props }
-			/>
-		</RadioContext.Provider>
-	);
-}
-
-/**
- * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
- */
-export default forwardRef( RadioGroup );

package/src/radio-group/radio/index.js

@@ -1,40 +0,0 @@
-// @ts-nocheck
-
-/**
- * External dependencies
- */
-import { Radio as ReakitRadio } from 'reakit/Radio';
-
-/**
- * WordPress dependencies
- */
-import { useContext, forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import RadioContext from '../radio-context';
-
-function Radio( { children, value, ...props }, ref ) {
-	const radioContext = useContext( RadioContext );
-	const checked = radioContext.state === value;
-
-	return (
-		<ReakitRadio
-			ref={ ref }
-			as={ Button }
-			variant={ checked ? 'primary' : 'secondary' }
-			value={ value }
-			{ ...radioContext }
-			{ ...props }
-		>
-			{ children || value }
-		</ReakitRadio>
-	);
-}
-
-/**
- * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
- */
-export default forwardRef( Radio );

package/src/radio-group/radio-context/index.js

@@ -1,11 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext } from '@wordpress/element';
-
-const RadioContext = createContext( {
-	state: null,
-	setState: () => {},
-} );
-
-export default RadioContext;

package/src/radio-group/stories/index.story.js

@@ -1,83 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Radio from '../radio';
-import RadioGroup from '../';
-
-export default {
-	title: 'Components (Deprecated)/RadioGroup',
-	component: RadioGroup,
-	subcomponents: { Radio },
-	parameters: {
-		docs: {
-			description: {
-				component:
-					'This component is deprecated. Use `RadioControl` or `ToggleGroupControl` instead.',
-			},
-		},
-	},
-};
-
-export const _default = () => {
-	/* eslint-disable no-restricted-syntax */
-	return (
-		<RadioGroup
-			// id is required for server side rendering
-			id="default-radiogroup"
-			label="options"
-			defaultChecked="option2"
-		>
-			<Radio value="option1">Option 1</Radio>
-			<Radio value="option2">Option 2</Radio>
-			<Radio value="option3">Option 3</Radio>
-		</RadioGroup>
-	);
-	/* eslint-enable no-restricted-syntax */
-};
-
-export const Disabled = () => {
-	/* eslint-disable no-restricted-syntax */
-	return (
-		<RadioGroup
-			// id is required for server side rendering
-			id="disabled-radiogroup"
-			disabled
-			label="options"
-			defaultChecked="option2"
-		>
-			<Radio value="option1">Option 1</Radio>
-			<Radio value="option2">Option 2</Radio>
-			<Radio value="option3">Option 3</Radio>
-		</RadioGroup>
-	);
-	/* eslint-enable no-restricted-syntax */
-};
-
-const ControlledRadioGroupWithState = () => {
-	const [ checked, setChecked ] = useState( 1 );
-
-	/* eslint-disable no-restricted-syntax */
-	return (
-		<RadioGroup
-			// id is required for server side rendering
-			id="controlled-radiogroup"
-			label="options"
-			checked={ checked }
-			onChange={ setChecked }
-		>
-			<Radio value={ 0 }>Option 1</Radio>
-			<Radio value={ 1 }>Option 2</Radio>
-			<Radio value={ 2 }>Option 3</Radio>
-		</RadioGroup>
-	);
-	/* eslint-enable no-restricted-syntax */
-};
-
-export const Controlled = () => {
-	return <ControlledRadioGroupWithState />;
-};

package/src/search-control/style.scss

@@ -1,58 +0,0 @@
-.components-search-control {
-	position: relative;
-
-	input[type="search"].components-search-control__input {
-		@include input-control;
-		display: block;
-		padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20;
-		background: $gray-100;
-		border: none;
-		width: 100%;
-		height: $grid-unit-60;
-
-		// Unset inherited values.
-		margin-left: 0;
-		margin-right: 0;
-
-		/* Fonts smaller than 16px causes mobile safari to zoom. */
-		font-size: $mobile-text-min-font-size;
-		@include break-small {
-			font-size: $default-font-size;
-		}
-
-		&:focus {
-			background: $white;
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
-		}
-
-		&::placeholder {
-			color: $gray-700;
-		}
-
-		&::-webkit-search-decoration,
-		&::-webkit-search-cancel-button,
-		&::-webkit-search-results-button,
-		&::-webkit-search-results-decoration {
-			-webkit-appearance: none;
-		}
-	}
-}
-
-.components-search-control__icon {
-	position: absolute;
-	top: 0;
-	width: $icon-size;
-	right: ( $grid-unit-60 - $icon-size ) * 0.5;
-	bottom: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	> svg {
-		margin: $grid-unit-10 0;
-	}
-}
-
-.components-search-control__input-wrapper {
-	position: relative;
-}

package/src/slot-fill/bubbles-virtually/slot-fill-provider.js

@@ -1,95 +0,0 @@
-// @ts-nocheck
-/**
- * External dependencies
- */
-import { ref as valRef } from 'valtio';
-import { proxyMap } from 'valtio/utils';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import isShallowEqual from '@wordpress/is-shallow-equal';
-
-/**
- * Internal dependencies
- */
-import SlotFillContext from './slot-fill-context';
-
-function createSlotRegistry() {
-	const slots = proxyMap();
-	const fills = proxyMap();
-
-	function registerSlot( name, ref, fillProps ) {
-		const slot = slots.get( name ) || {};
-		slots.set(
-			name,
-			valRef( {
-				...slot,
-				ref: ref || slot.ref,
-				fillProps: fillProps || slot.fillProps || {},
-			} )
-		);
-	}
-
-	function unregisterSlot( name, ref ) {
-		// Make sure we're not unregistering a slot registered by another element
-		// See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412
-		if ( slots.get( name )?.ref === ref ) {
-			slots.delete( name );
-		}
-	}
-
-	function updateSlot( name, fillProps ) {
-		const slot = slots.get( name );
-		if ( ! slot ) {
-			return;
-		}
-
-		if ( isShallowEqual( slot.fillProps, fillProps ) ) {
-			return;
-		}
-
-		slot.fillProps = fillProps;
-		const slotFills = fills.get( name );
-		if ( slotFills ) {
-			// Force update fills.
-			slotFills.map( ( fill ) => fill.current.rerender() );
-		}
-	}
-
-	function registerFill( name, ref ) {
-		fills.set( name, valRef( [ ...( fills.get( name ) || [] ), ref ] ) );
-	}
-
-	function unregisterFill( name, ref ) {
-		const fillsForName = fills.get( name );
-		if ( ! fillsForName ) {
-			return;
-		}
-
-		fills.set(
-			name,
-			valRef( fillsForName.filter( ( fillRef ) => fillRef !== ref ) )
-		);
-	}
-
-	return {
-		slots,
-		fills,
-		registerSlot,
-		updateSlot,
-		unregisterSlot,
-		registerFill,
-		unregisterFill,
-	};
-}
-
-export default function SlotFillProvider( { children } ) {
-	const [ registry ] = useState( createSlotRegistry );
-	return (
-		<SlotFillContext.Provider value={ registry }>
-			{ children }
-		</SlotFillContext.Provider>
-	);
-}

package/src/slot-fill/context.js

@@ -1,17 +0,0 @@
-// @ts-nocheck
-/**
- * WordPress dependencies
- */
-import { createContext } from '@wordpress/element';
-
-export const SlotFillContext = createContext( {
-	registerSlot: () => {},
-	unregisterSlot: () => {},
-	registerFill: () => {},
-	unregisterFill: () => {},
-	getSlot: () => {},
-	getFills: () => {},
-	subscribe: () => {},
-} );
-
-export default SlotFillContext;

package/src/slot-fill/provider.js

@@ -1,119 +0,0 @@
-// @ts-nocheck
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import SlotFillContext from './context';
-
-export default class SlotFillProvider extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.registerSlot = this.registerSlot.bind( this );
-		this.registerFill = this.registerFill.bind( this );
-		this.unregisterSlot = this.unregisterSlot.bind( this );
-		this.unregisterFill = this.unregisterFill.bind( this );
-		this.getSlot = this.getSlot.bind( this );
-		this.getFills = this.getFills.bind( this );
-		this.subscribe = this.subscribe.bind( this );
-
-		this.slots = {};
-		this.fills = {};
-		this.listeners = [];
-		this.contextValue = {
-			registerSlot: this.registerSlot,
-			unregisterSlot: this.unregisterSlot,
-			registerFill: this.registerFill,
-			unregisterFill: this.unregisterFill,
-			getSlot: this.getSlot,
-			getFills: this.getFills,
-			subscribe: this.subscribe,
-		};
-	}
-
-	registerSlot( name, slot ) {
-		const previousSlot = this.slots[ name ];
-		this.slots[ name ] = slot;
-		this.triggerListeners();
-
-		// Sometimes the fills are registered after the initial render of slot
-		// But before the registerSlot call, we need to rerender the slot.
-		this.forceUpdateSlot( name );
-
-		// If a new instance of a slot is being mounted while another with the
-		// same name exists, force its update _after_ the new slot has been
-		// assigned into the instance, such that its own rendering of children
-		// will be empty (the new Slot will subsume all fills for this name).
-		if ( previousSlot ) {
-			previousSlot.forceUpdate();
-		}
-	}
-
-	registerFill( name, instance ) {
-		this.fills[ name ] = [ ...( this.fills[ name ] || [] ), instance ];
-		this.forceUpdateSlot( name );
-	}
-
-	unregisterSlot( name, instance ) {
-		// If a previous instance of a Slot by this name unmounts, do nothing,
-		// as the slot and its fills should only be removed for the current
-		// known instance.
-		if ( this.slots[ name ] !== instance ) {
-			return;
-		}
-
-		delete this.slots[ name ];
-		this.triggerListeners();
-	}
-
-	unregisterFill( name, instance ) {
-		this.fills[ name ] =
-			this.fills[ name ]?.filter( ( fill ) => fill !== instance ) ?? [];
-		this.forceUpdateSlot( name );
-	}
-
-	getSlot( name ) {
-		return this.slots[ name ];
-	}
-
-	getFills( name, slotInstance ) {
-		// Fills should only be returned for the current instance of the slot
-		// in which they occupy.
-		if ( this.slots[ name ] !== slotInstance ) {
-			return [];
-		}
-		return this.fills[ name ];
-	}
-
-	forceUpdateSlot( name ) {
-		const slot = this.getSlot( name );
-
-		if ( slot ) {
-			slot.forceUpdate();
-		}
-	}
-
-	triggerListeners() {
-		this.listeners.forEach( ( listener ) => listener() );
-	}
-
-	subscribe( listener ) {
-		this.listeners.push( listener );
-
-		return () => {
-			this.listeners = this.listeners.filter( ( l ) => l !== listener );
-		};
-	}
-
-	render() {
-		return (
-			<SlotFillContext.Provider value={ this.contextValue }>
-				{ this.props.children }
-			</SlotFillContext.Provider>
-		);
-	}
-}