newspack-components 4.10.0-alpha.1 → 4.11.0

package/dist/esm/reorder-modal/style.scss

@@ -0,0 +1,114 @@
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/mixins" as wp-mixins;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
+.newspack-reorder-modal {
+	&__body {
+		display: flex;
+		flex-direction: column;
+		min-height: calc(#{wp-vars.$grid-unit} * 23);
+	}
+
+	&__loading {
+		align-items: center;
+		display: flex;
+		flex: 1;
+		justify-content: center;
+	}
+
+	&__notice {
+		margin: 0 0 wp-vars.$grid-unit-10;
+	}
+
+	&__list {
+		display: flex;
+		flex-direction: column;
+		gap: wp-vars.$grid-unit-10;
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	&__item {
+		--newspack-reorder-modal-divider: #{wp-colors.$gray-100};
+		--wp-ui-card-padding: #{wp-vars.$grid-unit-15};
+
+		align-items: stretch;
+		cursor: grab;
+		flex-direction: row;
+		margin: 0;
+
+		&:focus-within,
+		&:hover {
+			--newspack-reorder-modal-divider: #{wp-colors.$gray-300};
+
+			border-color: wp-colors.$gray-300;
+		}
+
+		&.is-dragging {
+			cursor: grabbing;
+			opacity: 0.5;
+		}
+	}
+
+	&__grip {
+		align-items: center;
+		color: wp-colors.$gray-700;
+		display: flex;
+		padding-left: wp-vars.$grid-unit-05;
+	}
+
+	&__move {
+		align-items: center;
+		border-right: 1px solid var(--newspack-reorder-modal-divider);
+		display: flex;
+		flex-direction: column;
+		padding: wp-vars.$grid-unit-05;
+	}
+
+	&__content {
+		align-items: center;
+		align-self: center;
+		display: flex;
+		flex: 1;
+		gap: wp-vars.$grid-unit-10;
+		min-width: 0;
+		padding-block-end: var(--wp-ui-card-padding);
+	}
+
+	&__title {
+		@include wp-mixins.heading-large();
+
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&__badge {
+		display: flex;
+		flex-shrink: 0;
+	}
+
+	&__toggle {
+		align-items: center;
+		display: flex;
+		padding-inline-end: wp-vars.$grid-unit-15;
+	}
+
+	&__description {
+		margin: 0 0 wp-vars.$grid-unit-20;
+	}
+
+	&__item.is-off &__title {
+		color: wp-colors.$gray-700;
+	}
+
+	&__footer {
+		display: flex;
+		gap: wp-vars.$grid-unit-10;
+		justify-content: flex-end;
+		margin-top: auto;
+		padding-top: wp-vars.$grid-unit-30;
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "newspack-components",
-	"version": "4.10.0-alpha.1",
+	"version": "4.11.0",
 	"description": "Newspack design system components",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -30,7 +30,7 @@
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"moment-range": "^3.1.1",
-		"newspack-icons": "1.2.0-alpha.1",
+		"newspack-icons": "1.2.0",
 		"qs": "^6.15.2",
 		"react-router-dom": "^5.3.4",
 		"@babel/runtime": "^7.29.7",
@@ -58,7 +58,7 @@
 		"@babel/preset-env": "^7.29.7",
 		"@babel/preset-react": "^7.29.7",
 		"@babel/preset-typescript": "^7.29.7",
-		"newspack-scripts": "5.12.0-alpha.1",
+		"newspack-scripts": "5.12.0",
 		"recursive-copy": "^2.0.0"
 	},
 	"babel": {

package/src/card-sortable-list/index.test.js

@@ -26,4 +26,17 @@ describe( 'CardSortableList', () => {
 		// An unguarded Badge would still emit an empty span, so assert on element children.
 		expect( container.querySelector( 'h3' ).children ).toHaveLength( 0 );
 	} );
+
+	it( 'names each toggle after its item', () => {
+		render(
+			<CardSortableList
+				items={ [
+					{ id: 1, title: 'Homepage', toggleChecked: true, onToggleChange: () => {} },
+					{ id: 2, title: 'About', toggleChecked: false, onToggleChange: () => {} },
+				] }
+			/>
+		);
+		expect( screen.getByRole( 'checkbox', { name: 'Homepage' } ) ).toBeChecked();
+		expect( screen.getByRole( 'checkbox', { name: 'About' } ) ).not.toBeChecked();
+	} );
 } );

package/src/card-sortable-list/index.tsx

@@ -12,7 +12,7 @@ import { Badge } from '@wordpress/ui';
 /**
  * Internal dependencies
  */
-import { Card } from '../';
+import Card from '../card';
 import type { CardBadge } from '../types';
 import './style.scss';
 
@@ -419,6 +419,9 @@ const CardSortableList = ( {
 												actionType: 'toggle',
 												isActive: item.toggleChecked,
 												onToggle: item.onToggleChange,
+												// Names the toggle for assistive tech. The card hides this
+												// label, since the header already shows the title.
+												title: item.title,
 											} ),
 											...( item.actions !== undefined && {
 												actions: item.actions,

package/src/card-sortable-list/style.scss

@@ -6,6 +6,14 @@ $drop-duration: 400ms; /* must match DROP_ANIMATION_DURATION in index.tsx */
 	&__item {
 		cursor: grab;
 
+		/*
+		 * Keep a card's title in the case it was written in. The block editor
+		 * sidebar uppercases every h3 (`.interface-complementary-area h3`).
+		 */
+		.newspack-card--core__header-content h3 {
+			text-transform: none;
+		}
+
 		/*
 		 * Animate items sliding to fill/make space around the dragged item.
 		 */

package/src/index.js

@@ -39,6 +39,7 @@ export { default as PluginToggle } from './plugin-toggle';
 export { default as Popover } from './popover';
 export { default as ProgressBar } from './progress-bar';
 export { default as RadioControl } from './radio-control';
+export { default as ReorderModal } from './reorder-modal';
 export { default as SectionHeader } from './section-header';
 export { default as SelectControl } from './select-control';
 export { default as Settings } from './settings';

package/src/reorder-modal/index.js

@@ -0,0 +1,484 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { speak } from '@wordpress/a11y';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import {
+	Button,
+	FormToggle,
+	Modal,
+	Notice,
+	Spinner,
+	Tooltip,
+	VisuallyHidden,
+	__experimentalConfirmDialog as ConfirmDialog, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+} from '@wordpress/components';
+import { Icon, chevronDown, chevronUp, close, dragHandle } from '@wordpress/icons';
+import { Badge, Card } from '@wordpress/ui';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+export const moveItem = ( items, from, to ) => {
+	if ( from === to || from < 0 || to < 0 || from >= items.length || to >= items.length ) {
+		return items;
+	}
+	const next = [ ...items ];
+	const [ moved ] = next.splice( from, 1 );
+	next.splice( to, 0, moved );
+	return next;
+};
+
+const OVERLAY_SELECTOR = '.components-modal__screen-overlay';
+
+// The overlay carries the dismissal handling and the drop target, and `Modal`
+// forwards its ref to it today. Deriving it from whatever node arrives keeps
+// both working if core ever forwards that ref somewhere else.
+export const findOverlay = node =>
+	node?.closest?.( OVERLAY_SELECTOR ) ||
+	node?.querySelector?.( OVERLAY_SELECTOR ) ||
+	node?.ownerDocument?.querySelector( OVERLAY_SELECTOR ) ||
+	null;
+
+// Disabled controls stay focusable here, so they report `aria-disabled` rather
+// than the native attribute.
+const isAvailable = button => !! button && ! button.matches( ':disabled, [aria-disabled="true"]' );
+
+// Speech input matches on the visible label, so it has to open the accessible
+// name. Composing both from one translated string keeps that true in every locale.
+const nameWithTitle = ( label, title ) =>
+	sprintf(
+		/* translators: keep %1$s first: it repeats the button's visible label, which speech input matches on. 1: the control's visible label. 2: title of the content being moved. */
+		__( '%1$s: %2$s', 'newspack-plugin' ),
+		label,
+		title
+	);
+
+/**
+ * Put a short list of items in order and, optionally, choose which are on.
+ * Changes apply on Save.
+ *
+ * @param {Object}   props             Component props.
+ * @param {string}   props.title       Modal title.
+ * @param {Array}    props.ids         Item IDs, in their current order.
+ * @param {Function} props.fetchItems  Resolves the IDs to `{ value, label, badge? }`, where `badge` is `{ label, tooltip? }`.
+ * @param {Function} props.onSave      Called with the new order and, when `enabledIds` is given, the enabled IDs: those
+ *                                     on, in that order, then any from `enabledIds` the modal had no row for, kept as they were.
+ * @param {Function} props.onClose     Called when the modal closes without saving.
+ * @param {Array}    props.enabledIds  Optional. Gives each row an on/off toggle, starting on for these IDs. Save is held while none is on.
+ * @param {string}   props.description Optional. Introduces the list, above it.
+ * @param {string}   props.noneOnHelp  Why Save is held while no toggle is on.
+ */
+const ReorderModal = ( {
+	title,
+	ids,
+	fetchItems,
+	onSave,
+	onClose,
+	enabledIds,
+	description,
+	noneOnHelp = __( 'Turn on at least one item to save.', 'newspack-plugin' ),
+} ) => {
+	const hasToggles = Array.isArray( enabledIds );
+	const instanceId = useInstanceId( ReorderModal, 'newspack-reorder-modal' );
+	const moveUpLabel = __( 'Move Up', 'newspack-plugin' );
+	const moveDownLabel = __( 'Move Down', 'newspack-plugin' );
+	const [ items, setItems ] = useState( null );
+	const [ dragIndex, setDragIndex ] = useState( null );
+	const [ hasFetchError, setHasFetchError ] = useState( false );
+	const [ isConfirmingDiscard, setIsConfirmingDiscard ] = useState( false );
+	const listRef = useRef( null );
+	const overlayRef = useRef( null );
+	const pendingFocus = useRef( null );
+	const closeRef = useRef( null );
+	const preDragItems = useRef( null );
+	const dragBlocked = useRef( false );
+	const captureOverlay = useCallback( node => {
+		overlayRef.current = findOverlay( node );
+	}, [] );
+
+	// The order the modal opened with. Snapshotted so a change to `ids` from
+	// elsewhere in the editor cannot desynchronise it from `items`.
+	const openedWith = useRef( ids );
+	const openedEnabled = useRef( hasToggles ? enabledIds : [] );
+	const [ enabled, setEnabled ] = useState( () => new Set( openedEnabled.current ) );
+
+	const isReordered = !! items && items.some( ( item, index ) => item.id !== openedWith.current[ index ] );
+	const isToggled = enabled.size !== openedEnabled.current.length || openedEnabled.current.some( id => ! enabled.has( id ) );
+	const isDirty = isReordered || ( hasToggles && isToggled );
+	// Enabled IDs without a row can't be switched off here, so Save keeps them.
+	const enabledWithoutRow = openedEnabled.current.filter( id => ! openedWith.current.includes( id ) );
+	const isNoneOn = hasToggles && 0 === enabled.size && 0 === enabledWithoutRow.length;
+
+	const toggleItem = id =>
+		setEnabled( current => {
+			const next = new Set( current );
+			if ( next.has( id ) ) {
+				next.delete( id );
+			} else {
+				next.add( id );
+			}
+			return next;
+		} );
+
+	useEffect( () => {
+		let cancelled = false;
+		const openIds = openedWith.current;
+		const withLabels = ( labels, badges ) =>
+			openIds.map( id => ( { id, label: labels[ id ] || __( '(no title)', 'newspack-plugin' ), badge: badges[ id ] } ) );
+
+		fetchItems( openIds )
+			.then( results => {
+				if ( cancelled ) {
+					return;
+				}
+				const labels = {};
+				const badges = {};
+				results.forEach( ( { value, label, badge } ) => {
+					labels[ value ] = label;
+					badges[ value ] = badge;
+				} );
+				const loaded = withLabels( labels, badges );
+				setItems( loaded );
+				speak(
+					sprintf(
+						/* translators: %d: number of items in the list. */
+						_n( '%d item ready to reorder.', '%d items ready to reorder.', loaded.length, 'newspack-plugin' ),
+						loaded.length
+					)
+				);
+			} )
+			.catch( error => {
+				// eslint-disable-next-line no-console
+				console.error( 'Newspack: could not prepare the items to reorder.', error );
+				if ( ! cancelled ) {
+					setHasFetchError( true );
+					// Only to leave the loading state: the error view lists nothing.
+					setItems( [] );
+				}
+			} );
+
+		return () => {
+			cancelled = true;
+		};
+	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
+
+	// A chevron that reaches an end of the list stops accepting moves, so send
+	// focus to the row's other chevron.
+	useEffect( () => {
+		const pending = pendingFocus.current;
+		pendingFocus.current = null;
+		if ( ! pending || ! listRef.current ) {
+			return;
+		}
+		const row = listRef.current.querySelector( `[data-item-id="${ pending.id }"]` );
+		if ( ! row ) {
+			return;
+		}
+		const preferred = row.querySelector( `[data-direction="${ pending.direction }"]` );
+		const fallback = row.querySelector( `[data-direction="${ 'up' === pending.direction ? 'down' : 'up' }"]` );
+		if ( isAvailable( preferred ) ) {
+			preferred.focus();
+		} else if ( isAvailable( fallback ) ) {
+			fallback.focus();
+		}
+	}, [ items ] );
+
+	const moveTo = ( from, to, direction ) => {
+		const next = moveItem( items, from, to );
+		if ( next === items ) {
+			return;
+		}
+		pendingFocus.current = { id: items[ from ].id, direction };
+		setItems( next );
+		speak(
+			sprintf(
+				/* translators: 1: title of the moved item. 2: its new position. 3: total number of items. */
+				__( '%1$s moved to position %2$d of %3$d.', 'newspack-plugin' ),
+				items[ from ].label,
+				to + 1,
+				items.length
+			)
+		);
+	};
+
+	const requestClose = () => {
+		if ( isDirty ) {
+			setIsConfirmingDiscard( true );
+			return;
+		}
+		onClose();
+	};
+
+	useEffect( () => {
+		closeRef.current = requestClose;
+	}, [ requestClose ] );
+
+	const handleKeyDown = event => {
+		if ( 'Escape' !== event.key || event.defaultPrevented ) {
+			return;
+		}
+		event.preventDefault();
+		requestClose();
+	};
+
+	// `Modal` plays its exit animation before it reports a close request, which
+	// would fade the modal out and back in whenever the confirmation vetoes one.
+	// Its own dismissal handlers are off, so drive the overlay press here.
+	useEffect( () => {
+		const overlay = overlayRef.current;
+		if ( ! overlay ) {
+			return;
+		}
+		let pressedOverlay = false;
+		const onPointerDown = event => {
+			pressedOverlay = event.target === overlay;
+			if ( pressedOverlay ) {
+				event.preventDefault();
+			}
+		};
+		const onPointerUp = event => {
+			const dismisses = pressedOverlay && 0 === event.button && event.target === overlay;
+			pressedOverlay = false;
+			if ( dismisses ) {
+				closeRef.current();
+			}
+		};
+		overlay.addEventListener( 'pointerdown', onPointerDown );
+		overlay.addEventListener( 'pointerup', onPointerUp );
+		return () => {
+			overlay.removeEventListener( 'pointerdown', onPointerDown );
+			overlay.removeEventListener( 'pointerup', onPointerUp );
+		};
+	}, [] );
+
+	// Rows are the only drop targets, and the frame's own padding is not one, so a
+	// release a few pixels wide of the list would report a cancelled drag and undo
+	// the reorder. Accepting the drop across the whole dialog leaves "cancelled"
+	// meaning only Escape or a release outside it.
+	useEffect( () => {
+		const frame = overlayRef.current?.querySelector( '.components-modal__frame' );
+		if ( ! frame ) {
+			return;
+		}
+		const accept = event => event.preventDefault();
+		frame.addEventListener( 'dragover', accept );
+		frame.addEventListener( 'drop', accept );
+		return () => {
+			frame.removeEventListener( 'dragover', accept );
+			frame.removeEventListener( 'drop', accept );
+		};
+	}, [] );
+
+	const handleDragOver = ( event, index ) => {
+		event.preventDefault();
+		if ( null === dragIndex ) {
+			return;
+		}
+		event.dataTransfer.dropEffect = 'move';
+		if ( dragIndex === index ) {
+			return;
+		}
+		setItems( moveItem( items, dragIndex, index ) );
+		setDragIndex( index );
+	};
+
+	return (
+		<>
+			<Modal
+				ref={ captureOverlay }
+				title={ title }
+				onRequestClose={ requestClose }
+				onKeyDown={ handleKeyDown }
+				isDismissible={ false }
+				shouldCloseOnEsc={ false }
+				shouldCloseOnClickOutside={ false }
+				headerActions={ <Button size="compact" icon={ close } label={ __( 'Close', 'newspack-plugin' ) } onClick={ requestClose } /> }
+				size="medium"
+				className="newspack-reorder-modal"
+				aria={ { describedby: description ? `${ instanceId }-description` : undefined } }
+			>
+				<div className="newspack-reorder-modal__body" aria-busy={ ! items }>
+					{ description && (
+						<p id={ `${ instanceId }-description` } className="newspack-reorder-modal__description">
+							{ description }
+						</p>
+					) }
+					{ ! items && (
+						<div className="newspack-reorder-modal__loading">
+							<Spinner />
+							<span className="screen-reader-text">{ __( 'Loading content…', 'newspack-plugin' ) }</span>
+						</div>
+					) }
+					{ items && hasFetchError && (
+						<>
+							<Notice status="error" isDismissible={ false } className="newspack-reorder-modal__notice">
+								{ __( 'The content could not be loaded, so the order cannot be saved.', 'newspack-plugin' ) }
+							</Notice>
+							<div className="newspack-reorder-modal__footer">
+								<Button variant="tertiary" onClick={ requestClose }>
+									{ __( 'Cancel', 'newspack-plugin' ) }
+								</Button>
+							</div>
+						</>
+					) }
+					{ items && ! hasFetchError && (
+						<>
+							{ /* `list-style: none` drops list semantics in Safari, so the role is restated. */ }
+							{ /* eslint-disable-next-line jsx-a11y/no-redundant-roles */ }
+							<ul className="newspack-reorder-modal__list" role="list" ref={ listRef }>
+								{ items.map( ( item, index ) => (
+									<Card.Root
+										key={ item.id }
+										render={ <li /> }
+										data-item-id={ item.id }
+										className={ classnames( 'newspack-reorder-modal__item', {
+											'is-dragging': dragIndex === index,
+											'is-off': hasToggles && ! enabled.has( item.id ),
+										} ) }
+										draggable
+										// `dragstart` always fires at the draggable row, never at the
+										// chevron inside it, so the grab point is recorded separately.
+										onPointerDown={ event => {
+											dragBlocked.current = !! event.target.closest?.( 'button, input' );
+										} }
+										onDragStart={ event => {
+											if ( dragBlocked.current ) {
+												event.preventDefault();
+												return;
+											}
+											preDragItems.current = items;
+											// Firefox and Safari will not start a drag until the payload is set.
+											event.dataTransfer.setData( 'text/plain', String( item.id ) );
+											event.dataTransfer.effectAllowed = 'move';
+											setDragIndex( index );
+										} }
+										onDragOver={ event => handleDragOver( event, index ) }
+										onDragEnd={ event => {
+											// A cancelled drag reports no drop effect: put the order back.
+											if ( 'none' === event.dataTransfer.dropEffect && preDragItems.current ) {
+												setItems( preDragItems.current );
+											}
+											preDragItems.current = null;
+											setDragIndex( null );
+										} }
+										onDrop={ event => event.preventDefault() }
+									>
+										<span className="newspack-reorder-modal__grip" aria-hidden="true">
+											<Icon icon={ dragHandle } />
+										</span>
+										<span className="newspack-reorder-modal__move">
+											<Button
+												icon={ chevronUp }
+												size="small"
+												data-direction="up"
+												disabled={ 0 === index }
+												accessibleWhenDisabled
+												label={ moveUpLabel }
+												aria-label={ nameWithTitle( moveUpLabel, item.label ) }
+												onClick={ () => moveTo( index, index - 1, 'up' ) }
+											/>
+											<Button
+												icon={ chevronDown }
+												size="small"
+												data-direction="down"
+												disabled={ index === items.length - 1 }
+												accessibleWhenDisabled
+												label={ moveDownLabel }
+												aria-label={ nameWithTitle( moveDownLabel, item.label ) }
+												onClick={ () => moveTo( index, index + 1, 'down' ) }
+											/>
+										</span>
+										<Card.Content className="newspack-reorder-modal__content">
+											<span className="newspack-reorder-modal__title" title={ item.label }>
+												{ item.label }
+											</span>
+											{ item.badge && (
+												<span className="newspack-reorder-modal__badge">
+													{ item.badge.tooltip ? (
+														<Tooltip text={ item.badge.tooltip }>
+															{ /* Hover only: the toggle already carries the badge and tooltip text for keyboard and screen reader users. */ }
+															<span aria-hidden="true" tabIndex={ -1 }>
+																<Badge intent="draft">{ item.badge.label }</Badge>
+															</span>
+														</Tooltip>
+													) : (
+														<span aria-hidden="true">
+															<Badge intent="draft">{ item.badge.label }</Badge>
+														</span>
+													) }
+													<VisuallyHidden id={ `${ instanceId }-badge-${ item.id }` }>
+														{ item.badge.tooltip ? `${ item.badge.label }: ${ item.badge.tooltip }` : item.badge.label }
+													</VisuallyHidden>
+												</span>
+											) }
+										</Card.Content>
+										{ hasToggles && (
+											<span className="newspack-reorder-modal__toggle">
+												<FormToggle
+													checked={ enabled.has( item.id ) }
+													onChange={ () => toggleItem( item.id ) }
+													aria-label={ item.label }
+													aria-describedby={ item.badge ? `${ instanceId }-badge-${ item.id }` : undefined }
+												/>
+											</span>
+										) }
+									</Card.Root>
+								) ) }
+							</ul>
+							<div className="newspack-reorder-modal__footer">
+								<Button variant="tertiary" onClick={ requestClose }>
+									{ __( 'Cancel', 'newspack-plugin' ) }
+								</Button>
+								<Button
+									variant="primary"
+									disabled={ ! isDirty || isNoneOn }
+									accessibleWhenDisabled
+									// A button with visible children shows a tooltip only when asked and labelled.
+									label={ __( 'Save', 'newspack-plugin' ) }
+									showTooltip={ isDirty && isNoneOn }
+									description={ isDirty && isNoneOn ? noneOnHelp : undefined }
+									onClick={ () => {
+										const order = items.map( item => item.id );
+										if ( hasToggles ) {
+											onSave( order, [ ...order.filter( id => enabled.has( id ) ), ...enabledWithoutRow ] );
+										} else {
+											onSave( order );
+										}
+									} }
+								>
+									{ __( 'Save', 'newspack-plugin' ) }
+								</Button>
+							</div>
+						</>
+					) }
+				</div>
+			</Modal>
+			{ isConfirmingDiscard && (
+				<ConfirmDialog
+					isOpen
+					contentLabel={ hasToggles ? __( 'Discard the changes?', 'newspack-plugin' ) : __( 'Discard the new order?', 'newspack-plugin' ) }
+					confirmButtonText={ __( 'Discard', 'newspack-plugin' ) }
+					cancelButtonText={ __( 'Keep editing', 'newspack-plugin' ) }
+					onConfirm={ onClose }
+					onCancel={ () => setIsConfirmingDiscard( false ) }
+				>
+					{ hasToggles
+						? __( 'The changes you made will be lost.', 'newspack-plugin' )
+						: __( 'The order you set will be lost.', 'newspack-plugin' ) }
+				</ConfirmDialog>
+			) }
+		</>
+	);
+};
+
+export default ReorderModal;