@wordpress/components 34.0.0 → 35.0.1

package/src/font-size-picker/index.native.js

@@ -1,190 +0,0 @@
-/**
- * External dependencies
- */
-import { View, useWindowDimensions } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { useNavigation } from '@react-navigation/native';
-import { useState } from '@wordpress/element';
-import { Icon, chevronRight, check } from '@wordpress/icons';
-import { __, _x, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { default as getPxFromCssUnit } from '../mobile/utils/get-px-from-css-unit';
-import { default as UnitControl, useCustomUnits } from '../unit-control';
-import styles from './style.scss';
-import BottomSheet from '../mobile/bottom-sheet';
-
-const DEFAULT_FONT_SIZE = 16;
-
-function FontSizePicker( {
-	fontSizes = [],
-	disableCustomFontSizes = false,
-	onChange,
-	value: selectedValue,
-} ) {
-	const [ showSubSheet, setShowSubSheet ] = useState( false );
-	const navigation = useNavigation();
-
-	const { height, width } = useWindowDimensions();
-	const cssUnitOptions = { height, width, fontSize: DEFAULT_FONT_SIZE };
-	// We need to always convert to px units because the selected value
-	// could be coming from the web where it could be stored as a different unit.
-	const selectedPxValue = getPxFromCssUnit( selectedValue, cssUnitOptions );
-
-	const onChangeValue = ( value ) => {
-		return () => {
-			goBack();
-			onChange( value );
-		};
-	};
-
-	const selectedOption = fontSizes.find(
-		( option ) => option.sizePx === selectedPxValue
-	) ?? { name: 'Custom' };
-
-	const goBack = () => {
-		setShowSubSheet( false );
-		navigation.goBack();
-	};
-
-	const openSubSheet = () => {
-		navigation.navigate( BottomSheet.SubSheet.screenName );
-		setShowSubSheet( true );
-	};
-	const label = __( 'Font Size' );
-
-	const units = useCustomUnits( {
-		availableUnits: [ 'px', 'em', 'rem', 'vw', 'vh' ],
-	} );
-
-	const accessibilityLabel = sprintf(
-		// translators: %s: Font size name e.g. Small
-		__( 'Font Size, %s' ),
-		selectedOption.name
-	);
-
-	return (
-		<BottomSheet.SubSheet
-			navigationButton={
-				<BottomSheet.Cell
-					label={ label }
-					separatorType="none"
-					value={
-						selectedValue
-							? sprintf(
-									// translators: 1: Select control font size name e.g. Small. 2: Select control font size e.g. 12px
-									_x( '%1$s (%2$s)', 'font size' ),
-									selectedOption.name,
-									selectedPxValue
-							  )
-							: __( 'Default' )
-					}
-					onPress={ openSubSheet }
-					accessibilityRole="button"
-					accessibilityLabel={ accessibilityLabel }
-					accessibilityHint={ sprintf(
-						// translators: %s: Select control button label e.g. "Button width"
-						__( 'Navigates to select %s' ),
-						selectedOption.name
-					) }
-				>
-					<Icon icon={ chevronRight }></Icon>
-				</BottomSheet.Cell>
-			}
-			showSheet={ showSubSheet }
-		>
-			<>
-				<BottomSheet.NavBar>
-					<BottomSheet.NavBar.BackButton onPress={ goBack } />
-					<BottomSheet.NavBar.Heading>
-						{ label }
-					</BottomSheet.NavBar.Heading>
-				</BottomSheet.NavBar>
-				<View style={ styles[ 'components-font-size-picker' ] }>
-					<BottomSheet.Cell
-						customActionButton
-						separatorType="none"
-						label={ __( 'Default' ) }
-						onPress={ onChangeValue( undefined ) }
-						leftAlign
-						key="default"
-						accessibilityRole="button"
-						accessibilityLabel={ __( 'Selected: Default' ) }
-						accessibilityHint={ __(
-							'Double tap to select default font size'
-						) }
-					>
-						<View>
-							{ selectedValue === undefined && (
-								<Icon icon={ check }></Icon>
-							) }
-						</View>
-					</BottomSheet.Cell>
-					{ fontSizes.map( ( item, index ) => {
-						// Only display a choice that we can currently select.
-						if ( ! parseFloat( item.sizePx ) ) {
-							return null;
-						}
-						return (
-							<BottomSheet.Cell
-								customActionButton
-								separatorType="none"
-								label={ item.name }
-								subLabel={ item.sizePx }
-								onPress={ onChangeValue( item.sizePx ) }
-								leftAlign
-								key={ index }
-								accessibilityRole="button"
-								accessibilityLabel={
-									item.sizePx === selectedValue
-										? sprintf(
-												// translators: %s: The selected option.
-												__( 'Selected: %s' ),
-												item.name
-										  )
-										: item.name
-								}
-								accessibilityHint={ __(
-									'Double tap to select font size'
-								) }
-							>
-								<View>
-									{ item.sizePx === selectedPxValue && (
-										<Icon icon={ check }></Icon>
-									) }
-								</View>
-							</BottomSheet.Cell>
-						);
-					} ) }
-					{ ! disableCustomFontSizes && (
-						<UnitControl
-							label={ __( 'Custom' ) }
-							min={ 0 }
-							max={ 200 }
-							step={ 1 }
-							value={ selectedValue }
-							onChange={ ( nextSize ) => {
-								if (
-									0 === parseFloat( nextSize ) ||
-									! nextSize
-								) {
-									onChange( undefined );
-								} else {
-									onChange( nextSize );
-								}
-							} }
-							units={ units }
-						/>
-					) }
-				</View>
-			</>
-		</BottomSheet.SubSheet>
-	);
-}
-
-export default FontSizePicker;

package/src/font-size-picker/style.native.scss

@@ -1,6 +0,0 @@
-.components-font-size-picker {
-	padding: 0 $block-edge-to-content;
-}
-.components-font-size-picker__font-size {
-	font-size: 11px;
-}

package/src/footer-message-control/index.native.js

@@ -1,14 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import FooterMessageCell from '../mobile/bottom-sheet/footer-message-cell';
-
-function FooterMessageControl( { ...props } ) {
-	return <FooterMessageCell { ...props } />;
-}
-
-export default memo( FooterMessageControl );

package/src/higher-order/with-focus-outside/index.native.js

@@ -1,38 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-/**
- * WordPress dependencies
- */
-import { useCallback, useState } from '@wordpress/element';
-import {
-	createHigherOrderComponent,
-	__experimentalUseFocusOutside as useFocusOutside,
-} from '@wordpress/compose';
-
-export default createHigherOrderComponent(
-	( WrappedComponent ) =>
-		function WithFocusOutside( props ) {
-			const [ handleFocusOutside, setHandleFocusOutside ] = useState();
-			const bindFocusOutsideHandler = useCallback(
-				( node ) =>
-					setHandleFocusOutside( () =>
-						node?.handleFocusOutside
-							? node.handleFocusOutside.bind( node )
-							: undefined
-					),
-				[]
-			);
-
-			return (
-				<View { ...useFocusOutside( handleFocusOutside ) }>
-					<WrappedComponent
-						ref={ bindFocusOutsideHandler }
-						{ ...props }
-					/>
-				</View>
-			);
-		},
-	'withFocusOutside'
-);

package/src/index.native.js

@@ -1,134 +0,0 @@
-export {
-	SVG,
-	Path,
-	Circle,
-	Polygon,
-	Rect,
-	G,
-	HorizontalRule,
-	BlockQuotation,
-} from '@wordpress/primitives';
-export { default as ColorIndicator } from './color-indicator';
-export { default as ColorPalette } from './color-palette';
-export { ColorPicker } from './color-picker';
-export { default as Dashicon } from './dashicon';
-export { default as Dropdown } from './dropdown';
-export { default as DropdownMenu } from './dropdown-menu';
-export { default as FocalPointPicker } from './focal-point-picker';
-export {
-	Toolbar,
-	ToolbarButton,
-	ToolbarContext as __experimentalToolbarContext,
-	ToolbarDropdownMenu,
-	ToolbarGroup,
-	ToolbarItem,
-} from './toolbar';
-export { default as Tooltip } from './tooltip';
-export { default as Icon } from './icon';
-export { default as Spinner } from './spinner';
-export {
-	createSlotFill,
-	Slot,
-	Fill,
-	Provider as SlotFillProvider,
-} from './slot-fill';
-
-export { default as __experimentalStyleProvider } from './style-provider';
-export { default as BaseControl } from './base-control';
-export { hasSplitBorders as __experimentalHasSplitBorders } from './border-box-control/utils';
-export { default as TextareaControl } from './textarea-control';
-export { default as PanelBody } from './panel/body';
-export { default as PanelActions } from './panel/actions';
-export { default as Button } from './button';
-export { default as __experimentalText } from './text';
-export { default as ExternalLink } from './external-link';
-export { default as TextControl } from './text-control';
-export { default as ToggleControl } from './toggle-control';
-export { default as SandBox } from './sandbox';
-export { default as SearchControl } from './search-control';
-export { default as SelectControl } from './select-control';
-export { default as RangeControl } from './range-control';
-export { default as ResizableBox } from './resizable-box';
-export { default as FooterMessageControl } from './footer-message-control';
-export { default as ColorControl } from './color-control';
-export { default as QueryControls } from './query-controls';
-export { default as Notice } from './notice';
-export { default as NoticeList } from './notice/list';
-export { default as RadioControl } from './radio-control';
-export {
-	default as UnitControl,
-	useCustomUnits as __experimentalUseCustomUnits,
-} from './unit-control';
-export {
-	CSS_UNITS as CSS_UNITS,
-	filterUnitsWithSettings as filterUnitsWithSettings,
-} from './unit-control/utils';
-export { default as Disabled } from './disabled';
-export { default as Draggable, DraggableTrigger } from './draggable';
-
-// Higher-Order Components.
-export { default as withConstrainedTabbing } from './higher-order/with-constrained-tabbing';
-export { default as withFallbackStyles } from './higher-order/with-fallback-styles';
-export { default as withFilters } from './higher-order/with-filters';
-export { default as FontSizePicker } from './font-size-picker'; // Intentionally called after slot-fill and withFilters.
-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';
-export * from './text';
-
-// Mobile Components.
-export {
-	__unstableAutocompletionItemsFill,
-	__unstableAutocompletionItemsSlot,
-} from './mobile/autocompletion-items';
-export { default as Autocomplete } from './autocomplete';
-export { default as BottomSheet } from './mobile/bottom-sheet';
-export {
-	BottomSheetConsumer,
-	BottomSheetProvider,
-	BottomSheetContext,
-} from './mobile/bottom-sheet/bottom-sheet-context';
-export { default as BottomSheetSelectControl } from './mobile/bottom-sheet-select-control';
-export { default as HTMLTextInput } from './mobile/html-text-input';
-export { default as KeyboardAvoidingView } from './mobile/keyboard-avoiding-view';
-export { default as KeyboardAwareFlatList } from './mobile/keyboard-aware-flat-list';
-export { default as Picker } from './mobile/picker';
-export { default as CycleSelectControl } from './mobile/cycle-select-control';
-export { default as Gradient } from './mobile/gradient';
-export { default as ColorSettings } from './mobile/color-settings';
-export { default as SegmentedControls } from './mobile/segmented-control';
-export { default as FocalPointSettingsPanel } from './mobile/focal-point-settings-panel';
-export { default as BottomSheetTextControl } from './mobile/bottom-sheet-text-control';
-export { default as FooterMessageLink } from './mobile/bottom-sheet/footer-message-link/footer-message-link';
-export { LinkPicker } from './mobile/link-picker';
-export { default as LinkPickerScreen } from './mobile/link-picker/link-picker-screen';
-export { default as LinkSettings } from './mobile/link-settings';
-export { default as LinkSettingsScreen } from './mobile/link-settings/link-settings-screen';
-export { default as LinkSettingsNavigation } from './mobile/link-settings/link-settings-navigation';
-export { default as SegmentedControl } from './mobile/segmented-control';
-export { default as Image } from './mobile/image';
-export { IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image/constants';
-export { default as ImageEditingButton } from './mobile/image/image-editing-button';
-export { setClipboard, getClipboard } from './mobile/clipboard';
-export { default as Badge } from './mobile/badge';
-export { default as Gridicons } from './mobile/gridicons';
-
-// Utils.
-export { colorsUtils } from './mobile/color-settings/utils';
-export {
-	WIDE_ALIGNMENTS,
-	ALIGNMENT_BREAKPOINTS,
-	alignmentHelpers,
-} from './mobile/utils/alignments';
-export { default as getPxFromCssUnit } from './mobile/utils/get-px-from-css-unit';
-
-// Hooks.
-export {
-	convertUnitToMobile,
-	useConvertUnitToMobile,
-	getValueAndUnit,
-} from './mobile/utils/use-unit-converter-to-mobile';
-
-// Private APIs.
-export { privateApis } from './private-apis';

package/src/keyboard-shortcuts/index.native.js

@@ -1,2 +0,0 @@
-const KeyboardShortcuts = () => null;
-export default KeyboardShortcuts;

package/src/mobile/README.md

@@ -1,3 +0,0 @@
-# Mobile Components
-
-This directory houses generic WordPress components to be used for creating common UI elements shared between screens and features of the WordPress native mobile apps. The components in this directory are generally mobile-specific, and not utilized for web interfaces.

package/src/mobile/autocompletion-items.native.js

@@ -1,11 +0,0 @@
-/**
- * Internal dependencies
- */
-import { createSlotFill } from '../slot-fill';
-
-const { Fill, Slot } = createSlotFill( '__unstableAutocompletionItemsSlot' );
-
-export {
-	Fill as __unstableAutocompletionItemsFill,
-	Slot as __unstableAutocompletionItemsSlot,
-};

package/src/mobile/badge/README.md

@@ -1,31 +0,0 @@
-# Badge
-
-The Badge component is designed to be wrapped around another component. It adds a "badge" with some text to the child component's upper left.
-
-An example can be found in the image block. After setting an image as featured, a "featured" badge overlays the block.
-
-### Usage
-
-```jsx
-return
-<Badge label={ __( 'Hello World!' ) } show={ optionalBoolean }/>
-    <View></View>
-</Badge>;
-```
-
-### Props
-
-#### label
-
-The text that will be displayed within the Badge component.
-
--   Type: `String`
--   Required: Yes
-
-#### show
-
-An optional boolean to determine whether the badge is displayed.
-
--   Type: `Boolean`
--   Required: No
--   Default: `true`

package/src/mobile/badge/index.native.js

@@ -1,27 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Text } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { withPreferredColorScheme } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-const Badge = ( { label, children, show = true } ) => {
-	return (
-		<>
-			{ children }
-			<View style={ styles.badgeContainer }>
-				{ show && <Text style={ styles.badge }>{ label }</Text> }
-			</View>
-		</>
-	);
-};
-
-export default withPreferredColorScheme( Badge );

package/src/mobile/badge/style.scss

@@ -1,18 +0,0 @@
-@use "@wordpress/base-styles/colors" as *;
-
-.badgeContainer {
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: 2;
-}
-
-.badge {
-	padding: 3px 6px;
-	margin: 8px;
-	color: #fff;
-	border-radius: 3px;
-	background-color: $gray-dark;
-	border-color: $gray-dark;
-	overflow: hidden;
-}

package/src/mobile/bottom-sheet/borderStyles.android.scss

@@ -1,8 +0,0 @@
-.borderStyle {
-	border-bottom-width: 1px;
-}
-
-.isSelected {
-	border-bottom-width: 2px;
-	border-color: $blue-wordpress;
-}

package/src/mobile/bottom-sheet/borderStyles.ios.scss

@@ -1,9 +0,0 @@
-.isSelected {
-	border-width: 2px;
-	border-color: $blue-wordpress;
-}
-
-.borderStyle {
-	border-width: 1px;
-	border-radius: 4px;
-}

package/src/mobile/bottom-sheet/bottom-sheet-context.native.js

@@ -1,40 +0,0 @@
-/**
- * External dependencies
- */
-import { Platform, UIManager } from 'react-native';
-/**
- * WordPress dependencies
- */
-import { createContext } from '@wordpress/element';
-
-// It's needed to set the following flags via UIManager
-// to have `LayoutAnimation` working on Android
-if (
-	Platform.OS === 'android' &&
-	UIManager.setLayoutAnimationEnabledExperimental
-) {
-	UIManager.setLayoutAnimationEnabledExperimental( true );
-}
-
-// Context in BottomSheet is necessary for controlling the
-// transition flow between subsheets and replacing a content inside them
-export const BottomSheetContext = createContext( {
-	// Specifies whether content is currently scrolling.
-	isBottomSheetContentScrolling: false,
-	// Function called to enable scroll within bottom sheet.
-	shouldEnableBottomSheetScroll: () => {},
-	// Function called to enable/disable bottom sheet max height.
-	// E.g. used to extend bottom sheet on full screen in ColorPicker,
-	// which is helpful on small devices with set the largest font/display size.
-	shouldEnableBottomSheetMaxHeight: () => {},
-	// Callback that is called on closing bottom sheet.
-	onHandleClosingBottomSheet: () => {},
-	// Android only: Function called to control android hardware back button functionality
-	// Return true if the bottom-sheet default close action shouldn't be called.
-	onHandleHardwareButtonPress: () => {},
-	// Toggle full-screen styles and dimensions
-	setIsFullScreen: () => {},
-} );
-
-export const { Provider: BottomSheetProvider, Consumer: BottomSheetConsumer } =
-	BottomSheetContext;

package/src/mobile/bottom-sheet/bottom-sheet-navigation/README.md

@@ -1,101 +0,0 @@
-# BottomSheet Navigation
-
-We use [`react-navigation`](https://reactnavigation.org/) v5 to handle multiple screens inside the bottom-sheet. We have two components that help use it w/o additional settings.
-
--   BottomSheet.NavigationContainer
--   BottomSheet.NavigationScreen
-
-## BottomSheet.NavigationContainer
-
-`BottomSheet.NavigationContainer` is a React component to render a Stack Navigator with settings prepared for the Bottom-Sheet. This component also handles the height animation of bottom-sheet when back or pushing a new screen.
-
-**NOTE:** Children of the `BottomSheet.NavigationContainer` can be only `BottomSheet.NavigationScreen`
-
-## BottomSheet.NavigationScreen
-
-`BottomSheet.NavigationScreen` is a React component to render a Screen inside the stack that is passed from parent. This component can be rendered only inside the `BottomSheet.NavigationContainer` and is responsible for handling the hardware back button on Android and setting the correct height of the parent (container).
-
-## Usage
-
-```jsx
-import { BottomSheet } from '@wordpress/components';
-
-const BottomSheetWithNavigation = () => (
-	<BottomSheet hasNavigation>
-		   
-		<BottomSheet.NavigationContainer>
-			     
-			<BottomSheet.NavigationScreen name={ 'Settings' }>
-				<InspectorControls.Slot />
-			</BottomSheet.NavigationScreen>
-			      <BottomSheet.NavigationScreen name={ 'Colors' }>
-				<ColorSettings defaultSettings={ settings } />    
-			</BottomSheet.NavigationScreen>   
-		</BottomSheet.NavigationContainer>
-		 
-	</BottomSheet>
-);
-```
-
-## Props
-
-### BottomSheet.NavigationContainer
-
-The component accepts the following props.
-
-### animate
-
-This prop determines if the container height should be animated. It should be set to `true` only for the root container in BottomSheet. In nested `BottomSheet.NavigationContainer` set it to `false`.
-
--   Type: `Boolean`
--   Required: No
--   Default: `false`
-
-### main
-
-Since we do not wrap the whole editor inside navigation (yet) we need to determine if the container is the very top one (root one). Set it to `true` in only for NOT nested navigation container.
-
-Note: This prop is needed until we wrap the editor inside the navigation container.
-
--   Type: `Boolean`
--   Required: No
--   Default: `false`
-
-### theme
-
-This prop is to set the theme of navigation containers. Please read: https://reactnavigation.org/docs/themes/
-
--   Type: `Object`
--   Required: No
-
-### BottomSheet.NavigationScreen
-
-The component accepts the following props. Props not included in this set will be applied to the Stack.Screen from `react-navigation`.
-
-### name
-
-This prop is used as a Screen name.
-
--   Type: `String`
--   Required: Yes
-
-### children
-
-The component that should be rendered as content.
-
--   Type: React Element
--   Required: Yes
-
-### isScrollable
-
-This prop determines whether the screen should be wrapped into the ScrollView - this is needed if the screen contains FlatList or any other list inside. Thanks to that we do not nest List into the ScrollView with the same orientation.
-
--   Type: `Boolean`
--   Required: No
-
-### fullScreen
-
-This prop determines if the screen should have full height of device.
-
--   Type: `Boolean`
--   Required: No

package/src/mobile/bottom-sheet/bottom-sheet-navigation/bottom-sheet-navigation-context.native.js

@@ -1,16 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext } from '@wordpress/element';
-
-// Navigation context in BottomSheet is necessary for controlling the
-// height of navigation container.
-export const BottomSheetNavigationContext = createContext( {
-	currentHeight: { value: 0 },
-	setHeight: () => {},
-} );
-
-export const {
-	Provider: BottomSheetNavigationProvider,
-	Consumer: BottomSheetNavigationConsumer,
-} = BottomSheetNavigationContext;