Move Picker and BottomSheet to the @wordpress/components package (#15750

)

packages/block-editor/src/components/index.native.js

@@ -21,7 +21,3 @@ export { default as DefaultBlockAppender } from './default-block-appender';
 
 // State Related Components
 export { default as BlockEditorProvider } from './provider';
-
-// Mobile Editor Related Components
-export { default as BottomSheet } from './mobile/bottom-sheet';
-export { default as Picker } from './mobile/picker';

packages/block-editor/src/components/media-upload/index.native.js

@@ -12,7 +12,7 @@ import {
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Picker } from '@wordpress/block-editor';
+import { Picker } from '@wordpress/components';
 
 export const MEDIA_TYPE_IMAGE = 'image';
 export const MEDIA_TYPE_VIDEO = 'video';

packages/block-library/src/image/edit.native.js

@@ -15,6 +15,7 @@ import { isEmpty } from 'lodash';
  * WordPress dependencies
  */
 import {
+	BottomSheet,
 	Toolbar,
 	ToolbarButton,
 } from '@wordpress/components';
@@ -25,7 +26,6 @@ import {
 	RichText,
 	BlockControls,
 	InspectorControls,
-	BottomSheet,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { isURL } from '@wordpress/url';

packages/components/src/index.native.js

@@ -18,3 +18,7 @@ export { default as withFocusOutside } from './higher-order/with-focus-outside';
 export { default as withFocusReturn } from './higher-order/with-focus-return';
 export { default as withNotices } from './higher-order/with-notices';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
+
+// Mobile Components
+export { default as BottomSheet } from './mobile/bottom-sheet';
+export { default as Picker } from './mobile/picker';

packages/components/src/mobile/bottom-sheet/button.native.js

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { TouchableOpacity, View, Text } from 'react-native';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+const BottomSheetButton = ( {
+	onPress,
+	disabled,
+	text,
+	color,
+} ) => (
+	<TouchableOpacity
+		accessible={ true }
+		onPress={ onPress }
+		disabled={ disabled }
+	>
+		<View style={ { flexDirection: 'row', justifyContent: 'center' } }>
+			<Text style={ { ...styles.buttonText, color } }>
+				{ text }
+			</Text>
+		</View>
+	</TouchableOpacity>
+);
+
+export default BottomSheetButton;

packages/block-editor/src/components/mobile/bottom-sheet/cell.native.js → packages/components/src/mobile/bottom-sheet/cell.native.js

@@ -17,7 +17,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
 import styles from './styles.scss';
 import platformStyles from './cellStyles.scss';
 
-export default class Cell extends Component {
+export default class BottomSheetCell extends Component {
 	constructor( props ) {
 		super( ...arguments );
 		this.state = {

packages/block-editor/src/components/mobile/bottom-sheet/picker-cell.native.js → packages/components/src/mobile/bottom-sheet/picker-cell.native.js

@@ -4,7 +4,7 @@
 import Cell from './cell';
 import Picker from '../picker';
 
-export default function PickerCell( props ) {
+export default function BottomSheetPickerCell( props ) {
 	const {
 		options,
 		onChangeValue,

packages/block-editor/src/components/mobile/bottom-sheet/switch-cell.native.js → packages/components/src/mobile/bottom-sheet/switch-cell.native.js

@@ -12,7 +12,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
  */
 import Cell from './cell';
 
-export default function SwitchCell( props ) {
+export default function BottomSheetSwitchCell( props ) {
 	const {
 		value,
 		onValueChange,

packages/block-editor/src/components/mobile/picker/index.android.js → packages/components/src/mobile/picker/index.android.js

@@ -9,7 +9,11 @@ import { View } from 'react-native';
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { BottomSheet } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import BottomSheet from '../bottom-sheet';
 
 export default class Picker extends Component {
 	constructor() {

packages/block-editor/src/components/mobile/picker/index.ios.js → packages/components/src/mobile/picker/index.ios.js

@@ -15,17 +15,18 @@ class Picker extends Component {
 		const labels = options.map( ( { label } ) => label );
 		const fullOptions = [ __( 'Cancel' ) ].concat( labels );
 
-		ActionSheetIOS.showActionSheetWithOptions( {
-			options: fullOptions,
-			cancelButtonIndex: 0,
-		},
-		( buttonIndex ) => {
-			if ( buttonIndex === 0 ) {
-				return;
-			}
-			const selected = options[ buttonIndex - 1 ];
-			onChange( selected.value );
-		},
+		ActionSheetIOS.showActionSheetWithOptions(
+			{
+				options: fullOptions,
+				cancelButtonIndex: 0,
+			},
+			( buttonIndex ) => {
+				if ( buttonIndex === 0 ) {
+					return;
+				}
+				const selected = options[ buttonIndex - 1 ];
+				onChange( selected.value );
+			},
 		);
 	}
 

packages/format-library/src/link/modal.native.js

@@ -9,9 +9,9 @@ import { Platform } from 'react-native';
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { BottomSheet } from '@wordpress/block-editor';
 import { prependHTTP } from '@wordpress/url';
 import {
+	BottomSheet,
 	withSpokenMessages,
 } from '@wordpress/components';
 import {