@wordpress/components 28.2.0 → 28.4.0

package/src/custom-select-control-v2/default-component/index.tsx

@@ -1,30 +0,0 @@
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import * as Ariakit from '@ariakit/react';
-/**
- * Internal dependencies
- */
-import _CustomSelect from '../custom-select';
-import type { CustomSelectProps } from '../types';
-import type { WordPressComponentProps } from '../../context';
-import Item from '../item';
-
-function CustomSelectControlV2(
-	props: WordPressComponentProps< CustomSelectProps, 'button', false >
-) {
-	const { defaultValue, onChange, value, ...restProps } = props;
-	// Forward props + store from v2 implementation
-	const store = Ariakit.useSelectStore( {
-		setValue: ( nextValue ) => onChange?.( nextValue ),
-		defaultValue,
-		value,
-	} );
-
-	return <_CustomSelect { ...restProps } store={ store } />;
-}
-
-CustomSelectControlV2.Item = Item;
-
-export default CustomSelectControlV2;

package/src/custom-select-control-v2/legacy-component/index.tsx

@@ -1,132 +0,0 @@
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import * as Ariakit from '@ariakit/react';
-
-/**
- * Internal dependencies
- */
-import _CustomSelect from '../custom-select';
-import CustomSelectItem from '../item';
-import type { LegacyCustomSelectProps } from '../types';
-import * as Styled from '../styles';
-
-function CustomSelectControl( props: LegacyCustomSelectProps ) {
-	const {
-		__experimentalShowSelectedHint = false,
-		__next40pxDefaultSize = false,
-		describedBy,
-		options,
-		onChange,
-		size = 'default',
-		value,
-		...restProps
-	} = props;
-
-	// Forward props + store from v2 implementation
-	const store = Ariakit.useSelectStore( {
-		async setValue( nextValue ) {
-			const nextOption = options.find(
-				( item ) => item.name === nextValue
-			);
-
-			if ( ! onChange || ! nextOption ) {
-				return;
-			}
-
-			// Executes the logic in a microtask after the popup is closed.
-			// This is simply to ensure the isOpen state matches that in Downshift.
-			await Promise.resolve();
-			const state = store.getState();
-
-			const changeObject = {
-				highlightedIndex: state.renderedItems.findIndex(
-					( item ) => item.value === nextValue
-				),
-				inputValue: '',
-				isOpen: state.open,
-				selectedItem: nextOption,
-				type: '',
-			};
-			onChange( changeObject );
-		},
-		value: value?.name,
-		// Setting the first option as a default value when no value is provided
-		// is already done natively by the underlying Ariakit component,
-		// but doing this explicitly avoids the `onChange` callback from firing
-		// on initial render, thus making this implementation closer to the v1.
-		defaultValue: options[ 0 ]?.name,
-	} );
-
-	const children = options.map(
-		( { name, key, __experimentalHint, style, className } ) => {
-			const withHint = (
-				<Styled.WithHintWrapper>
-					<span>{ name }</span>
-					<Styled.ExperimentalHintItem className="components-custom-select-control__item-hint">
-						{ __experimentalHint }
-					</Styled.ExperimentalHintItem>
-				</Styled.WithHintWrapper>
-			);
-
-			return (
-				<CustomSelectItem
-					key={ key }
-					value={ name }
-					children={ __experimentalHint ? withHint : name }
-					style={ style }
-					className={ className }
-				/>
-			);
-		}
-	);
-
-	const renderSelectedValueHint = () => {
-		const { value: currentValue } = store.getState();
-
-		const currentHint = options?.find(
-			( { name } ) => currentValue === name
-		);
-
-		return (
-			<Styled.SelectedExperimentalHintWrapper>
-				{ currentValue }
-				<Styled.SelectedExperimentalHintItem className="components-custom-select-control__hint">
-					{ currentHint?.__experimentalHint }
-				</Styled.SelectedExperimentalHintItem>
-			</Styled.SelectedExperimentalHintWrapper>
-		);
-	};
-
-	const translatedSize = ( () => {
-		if (
-			( __next40pxDefaultSize && size === 'default' ) ||
-			size === '__unstable-large'
-		) {
-			return 'default';
-		}
-		if ( ! __next40pxDefaultSize && size === 'default' ) {
-			return 'compact';
-		}
-		return size;
-	} )();
-
-	return (
-		<_CustomSelect
-			aria-describedby={ describedBy }
-			renderSelectedValue={
-				__experimentalShowSelectedHint
-					? renderSelectedValueHint
-					: undefined
-			}
-			size={ translatedSize }
-			store={ store }
-			{ ...restProps }
-		>
-			{ children }
-		</_CustomSelect>
-	);
-}
-
-export default CustomSelectControl;

package/src/custom-select-control-v2/stories/legacy.story.tsx

@@ -1,72 +0,0 @@
-/**
- * External dependencies
- */
-import type { Meta, StoryFn } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import CustomSelectControl from '../legacy-component';
-import * as V1Story from '../../custom-select-control/stories/index.story';
-
-const meta: Meta< typeof CustomSelectControl > = {
-	title: 'Components/CustomSelectControl v2/Legacy',
-	component: CustomSelectControl,
-	argTypes: {
-		onChange: { control: { type: null } },
-		value: { control: { type: null } },
-	},
-	tags: [ 'status-wip' ],
-	parameters: {
-		actions: { argTypesRegex: '^on.*' },
-		controls: { expanded: true },
-		docs: {
-			source: { excludeDecorators: true },
-		},
-	},
-	decorators: [
-		( Story ) => (
-			<div
-				style={ {
-					minHeight: '150px',
-				} }
-			>
-				<Story />
-			</div>
-		),
-	],
-};
-export default meta;
-
-const Template: StoryFn< typeof CustomSelectControl > = ( props ) => {
-	const [ value, setValue ] = useState( props.options[ 0 ] );
-
-	const onChange: React.ComponentProps<
-		typeof CustomSelectControl
-	>[ 'onChange' ] = ( changeObject ) => {
-		setValue( changeObject.selectedItem );
-		props.onChange?.( changeObject );
-	};
-
-	return (
-		<CustomSelectControl
-			{ ...props }
-			onChange={ onChange }
-			value={ value }
-		/>
-	);
-};
-
-export const Default = Template.bind( {} );
-Default.args = V1Story.Default.args;
-
-export const WithLongLabels = Template.bind( {} );
-WithLongLabels.args = V1Story.WithLongLabels.args;
-
-export const WithHints = Template.bind( {} );
-WithHints.args = V1Story.WithHints.args;