@wordpress/components 34.0.0 → 35.0.1

package/src/search-control/platform-style.android.scss

@@ -1,57 +0,0 @@
-.search-control__container--active {
-	border-bottom-color: $light-gray-500;
-	border-bottom-width: 1px;
-	margin-bottom: 0;
-	margin-left: 0;
-	margin-right: 0;
-	border-radius: 0;
-	elevation: 0;
-}
-
-.search-control__container--active-dark {
-	border-bottom-color: $gray-70;
-}
-
-.search-control__input-container {
-	background-color: $gray-light;
-}
-
-.search-control__input-container--active,
-.search-control__input-container--active-dark {
-	background-color: transparent;
-}
-
-.search-control__input-container--dark {
-	background-color: $dark-ultra-dim;
-}
-
-.search-control__form-input--active {
-	flex: 1;
-}
-
-.search-control__input-button-left--active {
-	margin: 0 8px 0 12px;
-}
-
-.search-control__input-button-right--active {
-	margin: 0 12px 0 8px;
-}
-
-.search-control__cancel-button {
-	height: 100%;
-	justify-content: center;
-	flex: 1;
-	flex-basis: auto;
-	flex-grow: 0;
-}
-
-.search-control__cancel-button-text {
-	color: $blue-wordpress;
-	font-size: 17px;
-	padding-left: 8px;
-	padding-right: 16px;
-}
-
-.search-control__cancel-button-text--dark {
-	color: $blue-30;
-}

package/src/search-control/platform-style.ios.scss

@@ -1,43 +0,0 @@
-.search-control__container--active {
-	margin-right: 0;
-}
-
-.search-control__input-container {
-	background-color: $gray-light;
-}
-
-.search-control__input-container--dark {
-	background-color: $dark-ultra-dim;
-}
-
-.search-control__form-input--active {
-	flex: 1;
-}
-
-.search-control__input-button-left--active {
-	margin: 0 8px 0 12px;
-}
-
-.search-control__input-button-right--active {
-	margin: 0 12px 0 8px;
-}
-
-.search-control__cancel-button {
-	height: 100%;
-	justify-content: center;
-	flex: 1;
-	flex-basis: auto;
-	flex-grow: 0;
-}
-
-.search-control__cancel-button-text {
-	color: $blue-wordpress;
-	font-size: 17px;
-	padding-left: 8px;
-	padding-right: 16px;
-	align-self: flex-start;
-}
-
-.search-control__cancel-button-text--dark {
-	color: $blue-30;
-}

package/src/search-control/style.native.scss

@@ -1,63 +0,0 @@
-.search-control__container {
-	height: 48px;
-	margin: 0 16px $grid-unit-10;
-}
-
-.search-control__inner-container {
-	flex: 1;
-	flex-direction: row;
-}
-
-.search-control__input-container {
-	height: 100%;
-	border-radius: $grid-unit;
-	flex-direction: row;
-	justify-content: space-between;
-	flex: 1;
-}
-
-.search-control__input-container--dark {
-	background-color: $dark-ultra-dim;
-}
-
-.search-control__form-input {
-	color: $gray-dark;
-	text-align: left;
-	font-size: 17px;
-	padding: 0;
-}
-
-.search-control__form-input--dark {
-	color: $white;
-}
-
-.search-control__form-input-placeholder {
-	color: $gray;
-}
-
-.search-control__form-input-placeholder--dark {
-	color: $dark-primary;
-}
-.search-control__icon {
-	margin: 0 12px;
-	justify-content: center;
-	width: 19px;
-	color: $gray;
-}
-
-.search-control__icon--dark {
-	color: $white;
-}
-
-.search-control__input-button {
-	justify-content: center;
-	width: 19px;
-}
-
-.search-control__input-button-left {
-	margin: 0 12px;
-}
-
-.search-control__input-button-right {
-	margin: 0 12px;
-}

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

@@ -1,41 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import PickerCell from '../mobile/bottom-sheet/picker-cell';
-
-export const SelectControl = memo(
-	( {
-		help,
-		instanceId,
-		label,
-		multiple = false,
-		onChange,
-		options = [],
-		className,
-		hideLabelFromVision,
-		...props
-	} ) => {
-		const id = `inspector-select-control-${ instanceId }`;
-
-		return (
-			<PickerCell
-				label={ label }
-				hideLabelFromVision={ hideLabelFromVision }
-				id={ id }
-				help={ help }
-				className={ className }
-				onChangeValue={ onChange }
-				aria-describedby={ !! help ? `${ id }__help` : undefined }
-				multiple={ multiple }
-				options={ options }
-				{ ...props }
-			/>
-		);
-	}
-);
-
-export default SelectControl;

package/src/slot-fill/index.native.js

@@ -1,25 +0,0 @@
-/**
- * Internal dependencies
- */
-import BaseSlot from './slot';
-import Fill from './fill';
-import Provider from './provider';
-
-export { Fill, Provider };
-
-export function Slot( { bubblesVirtually, ...restProps } ) {
-	return <BaseSlot { ...restProps } />;
-}
-
-export function createSlotFill( name ) {
-	const FillComponent = ( props ) => <Fill name={ name } { ...props } />;
-	FillComponent.displayName = name + 'Fill';
-
-	const SlotComponent = ( props ) => <Slot name={ name } { ...props } />;
-	SlotComponent.displayName = name + 'Slot';
-
-	return {
-		Fill: FillComponent,
-		Slot: SlotComponent,
-	};
-}

package/src/spinner/index.native.js

@@ -1,22 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * Internal dependencies
- */
-import style from './style.scss';
-
-export default function Spinner( props ) {
-	const { progress = 0, testID } = props;
-
-	const width = progress + '%';
-
-	return (
-		<View
-			style={ [ style.spinner, { width }, props.style ] }
-			testID={ testID }
-		/>
-	);
-}

package/src/spinner/style.native.scss

@@ -1,4 +0,0 @@
-.spinner {
-	height: 6;
-	background: $blue-wordpress;
-}

package/src/style-provider/index.native.js

@@ -1,3 +0,0 @@
-export default function StyleProvider( { children } ) {
-	return children;
-}

package/src/text/index.native.js

@@ -1,13 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/native';
-
-/**
- * Internal dependencies
- */
-import { text } from './styles/text-mixins';
-
-const Text = styled.Text( text );
-
-export default Text;

package/src/text/styles/emotion-css.native.js

@@ -1,6 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/native';
-
-export default css;

package/src/text/styles/font-family.native.js

@@ -1 +0,0 @@
-export const fontFamily = '';

package/src/text/styles/text-mixins.native.js

@@ -1,163 +0,0 @@
-/**
- * Internal dependencies
- */
-import { fontFamily } from './font-family';
-import css from './emotion-css';
-import { COLORS } from '../../utils/colors-values';
-
-const fontWeightNormal = `font-weight: 400;`;
-const fontWeightMedium = `font-weight: 500;`;
-const fontWeightSemibold = `font-weight: 600;`;
-
-const title = `
-  ${ fontWeightNormal }
-`;
-
-const titleLarge = `
-	font-size: 32px;
-	line-height: 40px;
-`;
-
-const titleMedium = `
-	font-size: 24px;
-	line-height: 32px;
-`;
-
-const titleSmall = `
-	font-size: 20px;
-	line-height: 28px;
-`;
-
-const subtitle = `
-	${ fontWeightSemibold }
-	font-size: 14px;
-	line-height: 20px;
-`;
-
-const subtitleLarge = `
-	font-size: 16px;
-	line-height: 24px;
-`;
-
-const subtitleSmall = `
-	font-size: 14px;
-	line-height: 20px;
-`;
-
-const body = `
-	${ fontWeightNormal }
-`;
-
-const bodyLarge = `
-	font-size: 16px;
-	line-height: 24px;
-`;
-
-const bodySmall = `
-	font-size: 14px;
-	line-height: 20px;
-`;
-
-const button = `
-  ${ fontWeightSemibold }
-  font-size: 14px;
-  line-height: 20px;
-`;
-
-const caption = `
-	${ fontWeightNormal }
-	font-size: 12px;
-	line-height: 16px;
-`;
-
-const label = `
-	${ fontWeightSemibold }
-	font-size: 12px;
-	line-height: 16px;
-`;
-
-const sectionHeading = `
-	${ fontWeightMedium }
-	font-size: 11px;
-	line-height: 1.4;
-	text-transform: uppercase;
-	color: ${ COLORS.gray[ 700 ] }
-`;
-
-/**
- * @typedef {'title.large'|'title.medium'|'title.small'|'subtitle'|'subtitle.small'|'body'|'body.large'|'body.small'|'button'|'caption'|'label'|'sectionheading'} TextVariant
- */
-
-/**
- * @param {TextVariant} variantName
- */
-const variant = ( variantName = 'body' ) => {
-	switch ( variantName ) {
-		case 'title.large':
-			return css`
-				${ title }
-				${ titleLarge }
-			`;
-		case 'title.medium':
-			return css`
-				${ title }
-				${ titleMedium }
-			`;
-		case 'title.small':
-			return css`
-				${ title }
-				${ titleSmall }
-			`;
-
-		case 'subtitle':
-			return css`
-				${ subtitle }
-				${ subtitleLarge }
-			`;
-		case 'subtitle.small':
-			return css`
-				${ subtitle }
-				${ subtitleSmall }
-			`;
-
-		case 'body':
-			return css`
-				${ body }
-			`;
-		case 'body.large':
-			return css`
-				${ body }
-				${ bodyLarge }
-			`;
-		case 'body.small':
-			return css`
-				${ body }
-				${ bodySmall }
-			`;
-
-		case 'button':
-			return button;
-
-		case 'caption':
-			return caption;
-
-		case 'label':
-			return label;
-
-		case 'sectionheading':
-			return sectionHeading;
-	}
-};
-
-/**
- * @typedef {Object} TextProps
- * @property {TextVariant} variant one of TextVariant to be used
- */
-
-/**
- * @param {TextProps} props
- */
-export const text = ( props ) => css`
-	${ fontFamily }
-	${ variant( props.variant ) }
-`;

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

@@ -1,41 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import Cell from '../mobile/bottom-sheet/cell';
-
-function TextControl( {
-	label,
-	hideLabelFromVision,
-	value,
-	help,
-	className,
-	instanceId,
-	onChange,
-	type = 'text',
-	placeholder,
-	...props
-} ) {
-	const id = `inspector-text-control-${ instanceId }`;
-
-	return (
-		<Cell
-			label={ label }
-			hideLabelFromVision={ hideLabelFromVision }
-			id={ id }
-			help={ help }
-			className={ className }
-			type={ type }
-			value={ value }
-			onChangeValue={ onChange }
-			aria-describedby={ !! help ? id + '__help' : undefined }
-			valuePlaceholder={ placeholder }
-			{ ...props }
-		/>
-	);
-}
-
-export default memo( TextControl );

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

@@ -1,26 +0,0 @@
-/**
- * External dependencies
- */
-import { TextInput } from 'react-native';
-
-/**
- * Internal dependencies
- */
-import BaseControl from '../base-control';
-
-function TextareaControl( { label, value, help, onChange, rows = 4 } ) {
-	return (
-		<BaseControl label={ label } help={ help }>
-			<TextInput
-				style={ { height: 80, borderColor: 'gray', borderWidth: 1 } }
-				value={ value }
-				onChangeText={ onChange }
-				numberOfLines={ rows }
-				multiline={ rows > 1 }
-				textAlignVertical="top"
-			/>
-		</BaseControl>
-	);
-}
-
-export default TextareaControl;

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

@@ -1,31 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import SwitchCell from '../mobile/bottom-sheet/switch-cell';
-
-const ToggleControl = memo(
-	( { label, checked, help, instanceId, className, onChange, ...props } ) => {
-		const id = `inspector-toggle-control-${ instanceId }`;
-
-		const helpLabel =
-			help && typeof help === 'function' ? help( checked ) : help;
-
-		return (
-			<SwitchCell
-				label={ label }
-				id={ id }
-				help={ helpLabel }
-				className={ className }
-				value={ checked }
-				onValueChange={ onChange }
-				{ ...props }
-			/>
-		);
-	}
-);
-
-export default ToggleControl;

package/src/toolbar/toolbar/style.native.scss

@@ -1,11 +0,0 @@
-.container {
-	flex-direction: row;
-	border-left-width: 1px;
-	border-color: #e9eff3;
-	padding-left: 5px;
-	padding-right: 5px;
-}
-
-.containerDark {
-	border-color: #525354;
-}

package/src/toolbar/toolbar/toolbar-container.native.js

@@ -1,8 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-const ToolbarContainer = ( { children } ) => <View>{ children }</View>;
-
-export default ToolbarContainer;

package/src/toolbar/toolbar-button/toolbar-button-container.native.js

@@ -1,8 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-export default function ToolbarButtonContainer( props ) {
-	return <View>{ props.children }</View>;
-}

package/src/toolbar/toolbar-group/style.native.scss

@@ -1,10 +0,0 @@
-.container {
-	flex-direction: row;
-	border-color: $light-quaternary;
-	padding-left: 5px;
-	padding-right: 5px;
-}
-
-.containerDark {
-	border-color: $dark-quaternary;
-}

package/src/toolbar/toolbar-group/toolbar-group-collapsed.native.js

@@ -1,36 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-/**
- * WordPress dependencies
- */
-import { withPreferredColorScheme } from '@wordpress/compose';
-/**
- * Internal dependencies
- */
-import DropdownMenu from '../../dropdown-menu';
-import styles from './style.scss';
-
-function ToolbarGroupCollapsed( {
-	controls = [],
-	getStylesFromColorScheme,
-	passedStyle,
-	...props
-} ) {
-	return (
-		<View
-			style={ [
-				getStylesFromColorScheme(
-					styles.container,
-					styles.containerDark
-				),
-				passedStyle,
-			] }
-		>
-			<DropdownMenu controls={ controls } { ...props } />
-		</View>
-	);
-}
-
-export default withPreferredColorScheme( ToolbarGroupCollapsed );

package/src/toolbar/toolbar-group/toolbar-group-container.native.js

@@ -1,26 +0,0 @@
-/**
- * External dependencies
- */
-import { StyleSheet, View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-const ToolbarGroupContainer = ( { passedStyle, children } ) => {
-	const groupStyles = [
-		usePreferredColorSchemeStyle( styles.container, styles.containerDark ),
-		{ borderLeftWidth: StyleSheet.hairlineWidth },
-		passedStyle,
-	];
-
-	return <View style={ groupStyles }>{ children }</View>;
-};
-
-export default ToolbarGroupContainer;

package/src/toolbar/toolbar-item/index.native.js

@@ -1,17 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-import warning from '@wordpress/warning';
-
-function ToolbarItem( { children, ...props }, ref ) {
-	if ( typeof children !== 'function' ) {
-		warning(
-			'`ToolbarItem` is a generic headless component that accepts only function children props'
-		);
-		return null;
-	}
-	return children( { ...props, ref } );
-}
-
-export default forwardRef( ToolbarItem );