@wordpress/components 27.4.0 → 27.6.0

package/src/form-token-field/suggestions-list.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { MouseEventHandler, ReactNode } from 'react';
 
 /**
@@ -19,7 +19,9 @@ const handleMouseDown: MouseEventHandler = ( e ) => {
 	e.preventDefault();
 };
 
-export function SuggestionsList< T extends string | { value: string } >( {
+export function SuggestionsList<
+	T extends string | { value: string; disabled?: boolean },
+>( {
 	selectedIndex,
 	scrollIntoView,
 	match,
@@ -103,10 +105,18 @@ export function SuggestionsList< T extends string | { value: string } >( {
 		>
 			{ suggestions.map( ( suggestion, index ) => {
 				const matchText = computeSuggestionMatch( suggestion );
-				const className = classnames(
+				const isSelected = index === selectedIndex;
+				const isDisabled =
+					typeof suggestion === 'object' && suggestion?.disabled;
+				const key =
+					typeof suggestion === 'object' && 'value' in suggestion
+						? suggestion?.value
+						: displayTransform( suggestion );
+
+				const className = clsx(
 					'components-form-token-field__suggestion',
 					{
-						'is-selected': index === selectedIndex,
+						'is-selected': isSelected,
 					}
 				);
 
@@ -134,16 +144,12 @@ export function SuggestionsList< T extends string | { value: string } >( {
 						id={ `components-form-token-suggestions-${ instanceId }-${ index }` }
 						role="option"
 						className={ className }
-						key={
-							typeof suggestion === 'object' &&
-							'value' in suggestion
-								? suggestion?.value
-								: displayTransform( suggestion )
-						}
+						key={ key }
 						onMouseDown={ handleMouseDown }
 						onClick={ handleClick( suggestion ) }
 						onMouseEnter={ handleHover( suggestion ) }
 						aria-selected={ index === selectedIndex }
+						aria-disabled={ isDisabled }
 					>
 						{ output }
 					</li>

package/src/form-token-field/token-input.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ChangeEvent, ForwardedRef, FocusEventHandler } from 'react';
 
 /**
@@ -64,7 +64,7 @@ export function UnForwardedTokenInput(
 			onFocus={ onFocusHandler }
 			onBlur={ onBlurHandler }
 			size={ size }
-			className={ classnames(
+			className={ clsx(
 				className,
 				'components-form-token-field__input'
 			) }

package/src/form-token-field/token.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -34,7 +34,7 @@ export default function Token( {
 	termsCount,
 }: TokenProps ) {
 	const instanceId = useInstanceId( Token );
-	const tokenClasses = classnames( 'components-form-token-field__token', {
+	const tokenClasses = clsx( 'components-form-token-field__token', {
 		'is-error': 'error' === status,
 		'is-success': 'success' === status,
 		'is-validating': 'validating' === status,

package/src/guide/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -106,7 +106,7 @@ function Guide( {
 
 	return (
 		<Modal
-			className={ classnames( 'components-guide', className ) }
+			className={ clsx( 'components-guide', className ) }
 			contentLabel={ contentLabel }
 			isDismissible={ pages.length > 1 }
 			onRequestClose={ onFinish }

package/src/higher-order/navigate-regions/style.scss

@@ -29,9 +29,9 @@
 
 	// Header top bar when Distraction free mode is on.
 	&.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
-	.interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel,
-	.interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel,
-	.interface-interface-skeleton__actions .edit-post-layout__toggle-entities-saved-states-panel,
+	.interface-interface-skeleton__sidebar .editor-layout__toggle-sidebar-panel,
+	.interface-interface-skeleton__actions .editor-layout__toggle-publish-panel,
+	.interface-interface-skeleton__actions .editor-layout__toggle-entities-saved-states-panel,
 	.editor-post-publish-panel {
 		outline: 4px solid $components-color-accent;
 		outline-offset: -4px;

package/src/input-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -58,7 +58,7 @@ export function UnforwardedInputControl(
 	} = useDeprecated36pxDefaultSizeProp< InputControlProps >( props );
 
 	const id = useUniqueId( idProp );
-	const classes = classNames( 'components-input-control', className );
+	const classes = clsx( 'components-input-control', className );
 
 	const draftHookProps = useDraft( {
 		value,
@@ -66,10 +66,7 @@ export function UnforwardedInputControl(
 		onChange,
 	} );
 
-	// ARIA descriptions can only contain plain text, so fall back to aria-details if not.
-	const helpPropName =
-		typeof help === 'string' ? 'aria-describedby' : 'aria-details';
-	const helpProp = !! help ? { [ helpPropName ]: `${ id }__help` } : {};
+	const helpProp = !! help ? { 'aria-describedby': `${ id }__help` } : {};
 
 	return (
 		<BaseControl

package/src/input-control/input-field.tsx

@@ -155,7 +155,9 @@ function InputField(
 				target,
 			};
 
-			if ( ! distance ) return;
+			if ( ! distance ) {
+				return;
+			}
 			event.stopPropagation();
 
 			/**

package/src/input-control/label.tsx

@@ -15,7 +15,9 @@ export default function Label( {
 	htmlFor,
 	...props
 }: WordPressComponentProps< InputControlLabelProps, 'label', false > ) {
-	if ( ! children ) return null;
+	if ( ! children ) {
+		return null;
+	}
 
 	if ( hideLabelFromVision ) {
 		return (

package/src/input-control/stories/index.story.tsx

@@ -2,13 +2,18 @@
  * External dependencies
  */
 import type { Meta, StoryFn } from '@storybook/react';
-
+/**
+ * WordPress dependencies
+ */
+import { seen, unseen } from '@wordpress/icons';
+import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import InputControl from '..';
 import { InputControlPrefixWrapper } from '../input-prefix-wrapper';
 import { InputControlSuffixWrapper } from '../input-suffix-wrapper';
+import Button from '../../button';
 
 const meta: Meta< typeof InputControl > = {
 	title: 'Components (Experimental)/InputControl',
@@ -82,3 +87,28 @@ WithEdgeLabel.args = {
 	__unstableInputWidth: '20em',
 	labelPosition: 'edge',
 };
+
+export const ShowPassword: StoryFn< typeof InputControl > = ( args ) => {
+	const [ visible, setVisible ] = useState( false );
+	return (
+		<InputControl
+			type={ visible ? 'text' : 'password' }
+			label="Password"
+			suffix={
+				<InputControlSuffixWrapper>
+					<div style={ { display: 'flex' } }>
+						<Button
+							size="small"
+							icon={ visible ? unseen : seen }
+							onClick={ () => setVisible( ( value ) => ! value ) }
+							label={
+								visible ? 'Hide password' : 'Show password'
+							}
+						/>
+					</div>
+				</InputControlSuffixWrapper>
+			}
+			{ ...args }
+		/>
+	);
+};

package/src/input-control/styles/input-control-styles.tsx

@@ -107,9 +107,13 @@ const containerWidthStyles = ( {
 	__unstableInputWidth,
 	labelPosition,
 }: ContainerProps ) => {
-	if ( ! __unstableInputWidth ) return css( { width: '100%' } );
+	if ( ! __unstableInputWidth ) {
+		return css( { width: '100%' } );
+	}
 
-	if ( labelPosition === 'side' ) return '';
+	if ( labelPosition === 'side' ) {
+		return '';
+	}
 
 	if ( labelPosition === 'edge' ) {
 		return css( {
@@ -143,7 +147,9 @@ type InputProps = {
 };
 
 const disabledStyles = ( { disabled }: InputProps ) => {
-	if ( ! disabled ) return '';
+	if ( ! disabled ) {
+		return '';
+	}
 
 	return css( {
 		color: COLORS.ui.textDisabled,
@@ -161,7 +167,9 @@ export const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 	const fontSize = sizes[ size as Size ] || sizes.default;
 	const fontSizeMobile = '16px';
 
-	if ( ! fontSize ) return '';
+	if ( ! fontSize ) {
+		return '';
+	}
 
 	return css`
 		font-size: ${ fontSizeMobile };

package/src/input-control/test/index.js

@@ -53,7 +53,7 @@ describe( 'InputControl', () => {
 			).toBeInTheDocument();
 		} );
 
-		it( 'should render help as aria-details when not plain text', () => {
+		it( 'should still render help as aria-describedby when not plain text', () => {
 			render( <InputControl help={ <a href="/foo">My help text</a> } /> );
 
 			const input = screen.getByRole( 'textbox' );
@@ -61,7 +61,7 @@ describe( 'InputControl', () => {
 
 			expect(
 				// eslint-disable-next-line testing-library/no-node-access
-				help.closest( `#${ input.getAttribute( 'aria-details' ) }` )
+				help.closest( `#${ input.getAttribute( 'aria-describedby' ) }` )
 			).toBeVisible();
 		} );
 	} );
@@ -112,10 +112,13 @@ describe( 'InputControl', () => {
 				const onKeyDown = ( { key } ) => {
 					heldKeySet.add( key );
 					if ( key === 'Escape' ) {
-						if ( heldKeySet.has( 'Meta' ) ) setState( 'qux' );
-						else if ( heldKeySet.has( 'Alt' ) )
+						if ( heldKeySet.has( 'Meta' ) ) {
+							setState( 'qux' );
+						} else if ( heldKeySet.has( 'Alt' ) ) {
 							setState( undefined );
-						else setState( '' );
+						} else {
+							setState( '' );
+						}
 					}
 				};
 				const onKeyUp = ( { key } ) => heldKeySet.delete( key );
@@ -204,8 +207,9 @@ describe( 'InputControl', () => {
 						if (
 							action.type === 'COMMIT' &&
 							action.payload.event.type === 'blur'
-						)
+						) {
 							value = value.replace( /\bnow\b/, 'meow' );
+						}
 
 						return { ...state, value };
 					} }

package/src/input-control/utils.ts

@@ -86,10 +86,11 @@ export function useDraft( props: {
 	useLayoutEffect( () => {
 		const { current: previousValue } = refPreviousValue;
 		refPreviousValue.current = props.value;
-		if ( draft.value !== undefined && ! draft.isStale )
+		if ( draft.value !== undefined && ! draft.isStale ) {
 			setDraft( { ...draft, isStale: true } );
-		else if ( draft.isStale && props.value !== previousValue )
+		} else if ( draft.isStale && props.value !== previousValue ) {
 			setDraft( {} );
+		}
 	}, [ props.value, draft ] );
 
 	const onChange: InputChangeCallback = ( nextValue, extra ) => {

package/src/item-group/item/hook.ts

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import type { ElementType } from 'react';
-
 /**
  * WordPress dependencies
  */
@@ -32,11 +27,7 @@ export function useItem( props: WordPressComponentProps< ItemProps, 'div' > ) {
 
 	const size = sizeProp || contextSize;
 
-	const as =
-		asProp ||
-		( ( typeof onClick !== 'undefined'
-			? 'button'
-			: 'div' ) as ElementType );
+	const as = asProp || ( typeof onClick !== 'undefined' ? 'button' : 'div' );
 
 	const cx = useCx();
 

package/src/item-group/test/__snapshots__/index.js.snap

@@ -11,8 +11,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-gg7ygh-View-large-item-spacedAround e19lxcc00"
+-         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-1h3jinl-PolymorphicDiv-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -24,8 +24,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-gg7ygh-View-large-item-spacedAround e19lxcc00"
+-         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-1h3jinl-PolymorphicDiv-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -44,8 +44,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-1lf4kzd-View-medium-item e19lxcc00"
-+       class="components-item css-1vv4aem-View-large-item e19lxcc00"
+-       class="components-item css-tpom78-PolymorphicDiv-medium-item e19lxcc00"
++       class="components-item css-vss65r-PolymorphicDiv-large-item e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -114,8 +114,8 @@ Snapshot Diff:
 @@ -1,18 +1,18 @@
   <div>
     <div
--     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+     class="components-item-group css-18qvw1m-View-separated-rounded e19lxcc00"
+-     class="components-item-group css-1iattls-PolymorphicDiv-rounded e19lxcc00"
++     class="components-item-group css-zgfros-PolymorphicDiv-separated-rounded e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"
@@ -125,8 +125,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-1lf4kzd-View-medium-item e19lxcc00"
+-         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-tpom78-PolymorphicDiv-medium-item e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -142,8 +142,8 @@ Snapshot Diff:
 @@ -1,18 +1,18 @@
   <div>
     <div
--     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+     class="components-item-group css-acyoj6-View-bordered-rounded e19lxcc00"
+-     class="components-item-group css-1iattls-PolymorphicDiv-rounded e19lxcc00"
++     class="components-item-group css-1ibn92o-PolymorphicDiv-bordered-rounded e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"
@@ -153,8 +153,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-1lf4kzd-View-medium-item e19lxcc00"
+-         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-tpom78-PolymorphicDiv-medium-item e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -170,8 +170,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+     class="components-item-group css-1mm2cvy-View e19lxcc00"
+-     class="components-item-group css-1iattls-PolymorphicDiv-rounded e19lxcc00"
++     class="components-item-group css-161q9d5-PolymorphicDiv e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"

package/src/menu-group/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -38,7 +38,7 @@ export function MenuGroup( props: MenuGroupProps ) {
 	}
 
 	const labelId = `components-menu-group-label-${ instanceId }`;
-	const classNames = classnames( className, 'components-menu-group', {
+	const classNames = clsx( className, 'components-menu-group', {
 		'has-hidden-separator': hideSeparator,
 	} );
 

package/src/menu-item/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -35,7 +35,7 @@ function UnforwardedMenuItem(
 		...buttonProps
 	} = props;
 
-	className = classnames( 'components-menu-item__button', className );
+	className = clsx( 'components-menu-item__button', className );
 
 	if ( info ) {
 		children = (
@@ -48,7 +48,7 @@ function UnforwardedMenuItem(
 
 	if ( icon && typeof icon !== 'string' ) {
 		icon = cloneElement( icon, {
-			className: classnames( 'components-menu-items__item-icon', {
+			className: clsx( 'components-menu-items__item-icon', {
 				'has-icon-right': iconPosition === 'right',
 			} ),
 		} );

package/src/mobile/color-settings/utils.native.js

@@ -28,7 +28,7 @@ export const colorsUtils = {
 		picker: 'Picker',
 		palette: 'Palette',
 	},
-	segments: [ __( 'Solid' ), __( 'Gradient' ) ],
+	segments: [ __( 'Color' ), __( 'Gradient' ) ],
 	gradients,
 	gradientOptions,
 	getGradientType,

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

@@ -51,7 +51,9 @@ export function getGradientAngle( gradientValue ) {
 		}
 	} else if ( angleType === 'angle' ) {
 		return parseFloat( angle );
-	} else return 4 * angleBase;
+	} else {
+		return 4 * angleBase;
+	}
 }
 
 export function getGradientColorGroup( gradientValue ) {

package/src/mobile/keyboard-aware-flat-list/index.android.js

@@ -18,8 +18,10 @@ import {
  */
 import useScroll from './use-scroll';
 import KeyboardAvoidingView from '../keyboard-avoiding-view';
+import { OPTIMIZATION_ITEMS_THRESHOLD, OPTIMIZATION_PROPS } from './shared';
 
 const AnimatedFlatList = Animated.createAnimatedComponent( FlatList );
+const EMPTY_OBJECT = {};
 
 export const KeyboardAwareFlatList = ( { onScroll, ...props }, ref ) => {
 	const { extraScrollHeight, scrollEnabled, shouldPreventAutomaticScroll } =
@@ -41,8 +43,6 @@ export const KeyboardAwareFlatList = ( { onScroll, ...props }, ref ) => {
 
 	const getFlatListRef = useCallback(
 		( flatListRef ) => {
-			// On Android, we get the ref of the associated scroll
-			// view to the FlatList.
 			scrollViewRef.current = flatListRef?.getNativeScrollRef();
 		},
 		[ scrollViewRef ]
@@ -57,12 +57,21 @@ export const KeyboardAwareFlatList = ( { onScroll, ...props }, ref ) => {
 		};
 	} );
 
+	const optimizationProps =
+		props.data?.length > OPTIMIZATION_ITEMS_THRESHOLD
+			? OPTIMIZATION_PROPS
+			: EMPTY_OBJECT;
+
 	return (
 		<KeyboardAvoidingView style={ { flex: 1 } }>
 			<AnimatedFlatList
 				ref={ getFlatListRef }
 				onScroll={ scrollHandler }
 				onContentSizeChange={ onContentSizeChange }
+				// Disable clipping to fix focus losing.
+				// See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
+				removeClippedSubviews={ false }
+				{ ...optimizationProps }
 				{ ...props }
 			/>
 		</KeyboardAvoidingView>

package/src/mobile/keyboard-aware-flat-list/index.ios.js

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-
-import { ScrollView, FlatList } from 'react-native';
+import { FlatList, View } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 /**
@@ -22,9 +21,12 @@ import { useThrottle } from '@wordpress/compose';
 import useScroll from './use-scroll';
 import useTextInputOffset from './use-text-input-offset';
 import useTextInputCaretPosition from './use-text-input-caret-position';
+import { OPTIMIZATION_ITEMS_THRESHOLD, OPTIMIZATION_PROPS } from './shared';
+import styles from './styles.scss';
 
 const DEFAULT_FONT_SIZE = 16;
-const AnimatedScrollView = Animated.createAnimatedComponent( ScrollView );
+const AnimatedFlatList = Animated.createAnimatedComponent( FlatList );
+const EMPTY_OBJECT = {};
 
 /** @typedef {import('@wordpress/element').RefObject} RefObject */
 /**
@@ -35,7 +37,6 @@ const AnimatedScrollView = Animated.createAnimatedComponent( ScrollView );
  * @param {number}    props.extraScrollHeight            Extra scroll height for the content.
  * @param {Function}  props.onScroll                     Function to be called when the list is scrolled.
  * @param {boolean}   props.scrollEnabled                Whether the list can be scrolled.
- * @param {Object}    props.scrollViewStyle              Additional style for the ScrollView component.
  * @param {boolean}   props.shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.
  * @param {Object}    props...                           Other props to pass to the FlatList component.
  * @param {RefObject} ref
@@ -46,7 +47,6 @@ export const KeyboardAwareFlatList = (
 		extraScrollHeight,
 		onScroll,
 		scrollEnabled,
-		scrollViewStyle,
 		shouldPreventAutomaticScroll,
 		...props
 	},
@@ -105,7 +105,12 @@ export const KeyboardAwareFlatList = (
 	// extra padding at the bottom.
 	const contentInset = { bottom: keyboardOffset };
 
-	const style = [ { flex: 1 }, scrollViewStyle ];
+	const getFlatListRef = useCallback(
+		( flatListRef ) => {
+			scrollViewRef.current = flatListRef?.getNativeScrollRef();
+		},
+		[ scrollViewRef ]
+	);
 
 	useImperativeHandle( ref, () => {
 		return {
@@ -116,20 +121,26 @@ export const KeyboardAwareFlatList = (
 		};
 	} );
 
+	const optimizationProps =
+		props.data?.length > OPTIMIZATION_ITEMS_THRESHOLD
+			? OPTIMIZATION_PROPS
+			: EMPTY_OBJECT;
+
 	return (
-		<AnimatedScrollView
-			automaticallyAdjustContentInsets={ false }
-			contentInset={ contentInset }
-			keyboardShouldPersistTaps="handled"
-			onContentSizeChange={ onContentSizeChange }
-			onScroll={ scrollHandler }
-			ref={ scrollViewRef }
-			scrollEnabled={ scrollEnabled }
-			scrollEventThrottle={ 16 }
-			style={ style }
-		>
-			<FlatList { ...props } scrollEnabled={ false } />
-		</AnimatedScrollView>
+		<View style={ styles.list__container }>
+			<AnimatedFlatList
+				ref={ getFlatListRef }
+				automaticallyAdjustContentInsets={ false }
+				contentInset={ contentInset }
+				keyboardShouldPersistTaps="handled"
+				onContentSizeChange={ onContentSizeChange }
+				onScroll={ scrollHandler }
+				scrollEventThrottle={ 16 }
+				style={ styles.list__content }
+				{ ...optimizationProps }
+				{ ...props }
+			/>
+		</View>
 	);
 };
 

package/src/mobile/keyboard-aware-flat-list/shared.native.js

@@ -0,0 +1,26 @@
+/**
+ * Optimization properties for FlatList.
+ * @typedef {Object} OptimizationProps
+ * @property {number} maxToRenderPerBatch - Controls the amount of items rendered per batch during scrolling.
+ *                                        Increasing this number reduces visual blank areas but may affect responsiveness.
+ *                                        Default: 10
+ * @property {number} windowSize          - Measurement unit representing viewport height.
+ *                                        Default: 21 (10 viewports above, 10 below, and 1 in between).
+ *                                        Larger values reduce chances of seeing blank spaces while scrolling but increase memory consumption.
+ *                                        Smaller values save memory but increase chances of seeing blank areas.
+ */
+
+/**
+ * Threshold for applying optimization settings.
+ * @type {number}
+ */
+export const OPTIMIZATION_ITEMS_THRESHOLD = 30;
+
+/**
+ * Optimization properties for FlatList.
+ * @type {OptimizationProps}
+ */
+export const OPTIMIZATION_PROPS = {
+	maxToRenderPerBatch: 15,
+	windowSize: 17,
+};