@wordpress/components 19.9.0 → 19.12.0

package/src/select-control/stories/index.js

@@ -1,104 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, object, select, text } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import SelectControl from '..';
-
-export default {
-	title: 'Components/SelectControl',
-	component: SelectControl,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const SelectControlWithState = ( props ) => {
-	const [ selection, setSelection ] = useState();
-
-	return (
-		<SelectControl
-			{ ...props }
-			value={ selection }
-			onChange={ setSelection }
-		/>
-	);
-};
-
-export const _default = () => {
-	const props = {
-		disabled: boolean( 'disabled', false ),
-		help: text( 'help', 'Help text to explain the select control.' ),
-		hideLabelFromVision: boolean( 'hideLabelFromVision', false ),
-		label: text( 'label', 'Value' ),
-		labelPosition: select(
-			'labelPosition',
-			{
-				top: 'top',
-				side: 'side',
-				bottom: 'bottom',
-			},
-			'top'
-		),
-		multiple: boolean( 'multiple', false ),
-		options: object( 'Options', [
-			{ value: null, label: 'Select an Option', disabled: true },
-			{ value: 'a', label: 'Option A' },
-			{ value: 'b', label: 'Option B' },
-			{ value: 'c', label: 'Option C' },
-		] ),
-		size: select(
-			'size',
-			{
-				default: 'default',
-				small: 'small',
-				'__unstable-large': '__unstable-large',
-			},
-			'default'
-		),
-	};
-
-	return <SelectControlWithState { ...props } />;
-};
-
-export const withCustomChildren = () => {
-	return (
-		<SelectControlWithState label="Value">
-			<option value="option-1">Option 1</option>
-			<option value="option-2" disabled>
-				Option 2 - Disabled
-			</option>
-			<option value="option-3">Option 3</option>
-			<optgroup label="Option Group 1">
-				<option value="option-group-1-option-1">
-					Option Group 1 - Option 1
-				</option>
-				<option value="option-group-1-option-2" disabled>
-					Option Group 1 - Option 2 - Disabled
-				</option>
-				<option value="option-group-1-option-3">
-					Option Group 1 - Option 3
-				</option>
-			</optgroup>
-			<optgroup label="Option Group 2">
-				<option value="option-group-2-option-1">
-					Option Group 2 - Option 1
-				</option>
-				<option value="option-group-2-option-2" disabled>
-					Option Group 2 - Option 2 - Disabled
-				</option>
-				<option value="option-group-2-option-3">
-					Option Group 2 - Option 3
-				</option>
-			</optgroup>
-		</SelectControlWithState>
-	);
-};

package/src/surface/stories/index.js

@@ -1,46 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, number, select } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import { Surface } from '../';
-import { Text } from '../../text';
-
-export default {
-	component: Surface,
-	title: 'Components (Experimental)/Surface',
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const variantOptions = {
-	default: 'default',
-	secondary: 'secondary',
-	tertiary: 'tertiary',
-	dotted: 'dotted',
-	grid: 'grid',
-};
-
-export const _default = () => {
-	const props = {
-		backgroundSize: number( 'backgroundSize', 12 ),
-		borderTop: boolean( 'borderTop', false ),
-		borderBottom: boolean( 'borderBottom', false ),
-		borderLeft: boolean( 'borderLeft', false ),
-		borderRight: boolean( 'borderRight', false ),
-		variant: select( 'variant', variantOptions, 'default' ),
-	};
-
-	return (
-		<Surface
-			{ ...props }
-			style={ { padding: 20, maxWidth: 400, margin: '20vh auto' } }
-		>
-			<Text>Surface</Text>
-		</Surface>
-	);
-};

package/src/text-control/index.js

@@ -1,72 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import BaseControl from '../base-control';
-
-/**
- * @typedef OwnProps
- * @property {string}                  label                 Label for the control.
- * @property {boolean}                 [hideLabelFromVision] Whether to accessibly hide the label.
- * @property {string}                  value                 Value of the input.
- * @property {string}                  [help]                Optional help text for the control.
- * @property {string}                  [className]           Classname passed to BaseControl wrapper
- * @property {(value: string) => void} onChange              Handle changes.
- * @property {string}                  [type='text']         Type of the input.
- */
-
-/** @typedef {OwnProps & import('react').ComponentProps<'input'>} Props */
-
-/**
- *
- * @param {Props}                                          props Props
- * @param {import('react').ForwardedRef<HTMLInputElement>} ref
- */
-function TextControl(
-	{
-		label,
-		hideLabelFromVision,
-		value,
-		help,
-		className,
-		onChange,
-		type = 'text',
-		...props
-	},
-	ref
-) {
-	const instanceId = useInstanceId( TextControl );
-	const id = `inspector-text-control-${ instanceId }`;
-	const onChangeValue = (
-		/** @type {import('react').ChangeEvent<HTMLInputElement>} */
-		event
-	) => onChange( event.target.value );
-
-	return (
-		<BaseControl
-			label={ label }
-			hideLabelFromVision={ hideLabelFromVision }
-			id={ id }
-			help={ help }
-			className={ className }
-		>
-			<input
-				className="components-text-control__input"
-				type={ type }
-				id={ id }
-				value={ value }
-				onChange={ onChangeValue }
-				aria-describedby={ !! help ? id + '__help' : undefined }
-				ref={ ref }
-				{ ...props }
-			/>
-		</BaseControl>
-	);
-}
-
-export default forwardRef( TextControl );

package/src/text-control/stories/index.js

@@ -1,46 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, text } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import TextControl from '../';
-
-export default {
-	title: 'Components/TextControl',
-	component: TextControl,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const TextControlWithState = ( props ) => {
-	const [ value, setValue ] = useState();
-
-	return <TextControl { ...props } value={ value } onChange={ setValue } />;
-};
-
-export const _default = () => {
-	const label = text( 'Label', 'Label Text' );
-	const hideLabelFromVision = boolean( 'Hide Label From Vision', false );
-	const help = text( 'Help Text', 'Help text to explain the input.' );
-	const type = text( 'Input Type', 'text' );
-	const className = text( 'Class Name', '' );
-
-	return (
-		<TextControlWithState
-			label={ label }
-			hideLabelFromVision={ hideLabelFromVision }
-			help={ help }
-			type={ type }
-			className={ className }
-		/>
-	);
-};

package/src/textarea-control/index.js

@@ -1,45 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import BaseControl from '../base-control';
-import { StyledTextarea } from './styles/textarea-control-styles';
-
-export default function TextareaControl( {
-	label,
-	hideLabelFromVision,
-	value,
-	help,
-	onChange,
-	rows = 4,
-	className,
-	...props
-} ) {
-	const instanceId = useInstanceId( TextareaControl );
-	const id = `inspector-textarea-control-${ instanceId }`;
-	const onChangeValue = ( event ) => onChange( event.target.value );
-
-	return (
-		<BaseControl
-			label={ label }
-			hideLabelFromVision={ hideLabelFromVision }
-			id={ id }
-			help={ help }
-			className={ className }
-		>
-			<StyledTextarea
-				className="components-textarea-control__input"
-				id={ id }
-				rows={ rows }
-				onChange={ onChangeValue }
-				aria-describedby={ !! help ? id + '__help' : undefined }
-				value={ value }
-				{ ...props }
-			/>
-		</BaseControl>
-	);
-}

package/src/textarea-control/stories/index.js

@@ -1,48 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, number, text } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import TextareaControl from '../';
-
-export default {
-	title: 'Components/TextareaControl',
-	component: TextareaControl,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const TextareaControlWithState = ( props ) => {
-	const [ value, setValue ] = useState();
-
-	return (
-		<TextareaControl { ...props } value={ value } onChange={ setValue } />
-	);
-};
-
-export const _default = () => {
-	const label = text( 'Label', 'Label Text' );
-	const hideLabelFromVision = boolean( 'Hide Label From Vision', false );
-	const help = text( 'Help Text', 'Help text to explain the textarea.' );
-	const rows = number( 'Rows', 4 );
-	const className = text( 'Class Name', '' );
-
-	return (
-		<TextareaControlWithState
-			label={ label }
-			hideLabelFromVision={ hideLabelFromVision }
-			help={ help }
-			rows={ rows }
-			className={ className }
-		/>
-	);
-};

package/src/utils/hooks/use-combined-ref.ts

@@ -1,28 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRef, useEffect } from '@wordpress/element';
-/**
- * External dependencies
- */
-import type { MutableRefObject, RefCallback } from 'react';
-
-type Ref< T > = MutableRefObject< T | null > | RefCallback< T | null >;
-
-export function useCombinedRef< T extends HTMLElement >( ...refs: Ref< T >[] ) {
-	const targetRef = useRef( null );
-
-	useEffect( () => {
-		refs.forEach( ( ref ) => {
-			if ( ! ref ) return;
-
-			if ( typeof ref === 'function' ) {
-				ref( targetRef.current );
-			} else {
-				ref.current = targetRef.current;
-			}
-		} );
-	}, [ refs ] );
-
-	return targetRef;
-}