Merge branch 'trunk' of github.com:amitraj2203/gutenberg into fix/iss…

…ue-62889

docs/reference-guides/interactivity-api/api-reference.md

@@ -220,10 +220,36 @@ The `wp-class` directive is executed:
 - When the element is created
 - Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference)
 
-When `wp-class` directive references a callback to get its final boolean value, the callback receives the class name: `className`.
-
 The boolean value received by the directive is used to toggle (add when `true` or remove when `false`) the associated class name from the `class` attribute.
 
+It's important to note that when using the `wp-class` directive, it's recommended to use kebab-case for class names instead of camelCase. This is because HTML attributes are not case-sensitive, and HTML will treat `data-wp-class--isDark` the same as `data-wp-class--isdark` or `DATA-WP-CLASS--ISDARK`.
+
+So, for example, use the class name `is-dark` instead of `isDark` and `data-wp-class--is-dark` instead of `data-wp-class--isDark`:
+
+```html
+<!-- Recommended -->
+<div data-wp-class--is-dark="context.isDarkMode">
+  <!-- ... -->
+</div>
+
+<!-- Not recommended -->
+<div data-wp-class--isDark="context.isDarkMode">
+  <!-- ... -->
+</div>
+```
+
+```css
+/* Recommended */
+.is-dark {
+  /* ... */
+}
+
+/* Not recommended */
+.isDark {
+  /* ... */
+}
+```
+
 ### `wp-style`
 
 This directive adds or removes inline style to an HTML element, depending on its value. It follows the syntax `data-wp-style--css-property`.
@@ -256,8 +282,6 @@ The `wp-style` directive is executed:
 - When the element is created
 - Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference)
 
-When `wp-style` directive references a callback to get its final value, the callback receives the class style property: `css-property`.
-
 The value received by the directive is used to add or remove the style attribute with the associated CSS property:
 
 - If the value is `false`, the style attribute is removed: `<div>`

packages/components/src/tabs/styles.ts

@@ -36,22 +36,20 @@ export const TabListWrapper = styled.div`
 		outline-offset: -1px;
 	}
 	&:not( [aria-orientation='vertical'] )::after {
-		left: var( --indicator-left );
 		bottom: 0;
+		left: var( --indicator-left );
 		width: var( --indicator-width );
 		height: 0;
 		border-bottom: var( --wp-admin-border-width-focus ) solid
 			${ COLORS.theme.accent };
 	}
 	&[aria-orientation='vertical']::after {
-		/* Temporarily hidden, context: https://github.com/WordPress/gutenberg/pull/60560#issuecomment-2126670072 */
-		opacity: 0;
-
-		right: 0;
+		z-index: -1;
+		left: 0;
+		width: 100%;
 		top: var( --indicator-top );
 		height: var( --indicator-height );
-		border-right: var( --wp-admin-border-width-focus ) solid
-			${ COLORS.theme.accent };
+		background-color: ${ COLORS.theme.gray[ 100 ] };
 	}
 `;
 

packages/dataviews/src/bulk-actions-toolbar.tsx

@@ -20,6 +20,7 @@ import { useRegistry } from '@wordpress/data';
 import { ActionWithModal } from './item-actions';
 import type { Action } from './types';
 import type { ActionTriggerProps } from './item-actions';
+import type { SetSelection } from './private-types';
 
 interface ActionButtonProps< Item > {
 	action: Action< Item >;
@@ -32,14 +33,14 @@ interface ToolbarContentProps< Item > {
 	selection: string[];
 	actionsToShow: Action< Item >[];
 	selectedItems: Item[];
-	onSelectionChange: ( selection: Item[] ) => void;
+	onSelectionChange: SetSelection;
 }
 
 interface BulkActionsToolbarProps< Item > {
 	data: Item[];
 	selection: string[];
 	actions: Action< Item >[];
-	onSelectionChange: ( selection: Item[] ) => void;
+	onSelectionChange: SetSelection;
 	getItemId: ( item: Item ) => string;
 }
 
@@ -131,7 +132,7 @@ function renderToolbarContent< Item >(
 	selectedItems: Item[],
 	actionInProgress: string | null,
 	setActionInProgress: ( actionId: string | null ) => void,
-	onSelectionChange: ( selection: Item[] ) => void
+	onSelectionChange: SetSelection
 ) {
 	return (
 		<>

packages/dataviews/src/bulk-actions.tsx

@@ -15,6 +15,7 @@ import { useRegistry } from '@wordpress/data';
  */
 import { unlock } from './lock-unlock';
 import type { Action, ActionModal } from './types';
+import type { SetSelection } from './private-types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -46,7 +47,7 @@ interface BulkActionsProps< Item > {
 	data: Item[];
 	actions: Action< Item >[];
 	selection: string[];
-	onSelectionChange: ( selection: Item[] ) => void;
+	onSelectionChange: SetSelection;
 	getItemId: ( item: Item ) => string;
 }
 
@@ -248,7 +249,11 @@ export default function BulkActions< Item >( {
 						disabled={ areAllSelected }
 						hideOnClick={ false }
 						onClick={ () => {
-							onSelectionChange( selectableItems );
+							onSelectionChange(
+								selectableItems.map( ( item ) =>
+									getItemId( item )
+								)
+							);
 						} }
 						suffix={ numberSelectableItems }
 					>

packages/dataviews/src/dataviews.tsx

@@ -7,7 +7,7 @@ import type { ComponentType } from 'react';
  * WordPress dependencies
  */
 import { __experimentalHStack as HStack } from '@wordpress/components';
-import { useMemo, useState, useCallback } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,6 +22,7 @@ import BulkActions from './bulk-actions';
 import { normalizeFields } from './normalize-fields';
 import BulkActionsToolbar from './bulk-actions-toolbar';
 import type { Action, Field, View, ViewBaseProps } from './types';
+import type { SetSelection, SelectionOrUpdater } from './private-types';
 
 type ItemWithId = { id: string };
 
@@ -40,7 +41,7 @@ type DataViewsProps< Item > = {
 	};
 	supportedLayouts: string[];
 	selection?: string[];
-	setSelection?: ( selection: string[] ) => void;
+	setSelection?: SetSelection;
 	onSelectionChange?: ( items: Item[] ) => void;
 } & ( Item extends ItemWithId
 	? { getItemId?: ( item: Item ) => string }
@@ -83,26 +84,22 @@ export default function DataViews< Item >( {
 	onSelectionChange = defaultOnSelectionChange,
 }: DataViewsProps< Item > ) {
 	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
-	let selection, setSelection;
-	if (
-		selectionProperty !== undefined &&
-		setSelectionProperty !== undefined
-	) {
-		selection = selectionProperty;
-		setSelection = setSelectionProperty;
-	} else {
-		selection = selectionState;
-		setSelection = setSelectionState;
-	}
+	const isUncontrolled =
+		selectionProperty === undefined || setSelectionProperty === undefined;
+	const selection = isUncontrolled ? selectionState : selectionProperty;
+	const setSelection = isUncontrolled
+		? setSelectionState
+		: setSelectionProperty;
 	const [ openedFilter, setOpenedFilter ] = useState< string | null >( null );
 
-	const onSetSelection = useCallback(
-		( items: Item[] ) => {
-			setSelection( items.map( ( item ) => getItemId( item ) ) );
-			onSelectionChange( items );
-		},
-		[ setSelection, getItemId, onSelectionChange ]
-	);
+	function setSelectionWithChange( value: SelectionOrUpdater ) {
+		const newValue =
+			typeof value === 'function' ? value( selection ) : value;
+		onSelectionChange(
+			data.filter( ( item ) => newValue.includes( getItemId( item ) ) )
+		);
+		return setSelection( value );
+	}
 
 	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
 		?.component as ComponentType< ViewBaseProps< Item > >;
@@ -149,7 +146,7 @@ export default function DataViews< Item >( {
 						<BulkActions
 							actions={ actions }
 							data={ data }
-							onSelectionChange={ onSetSelection }
+							onSelectionChange={ setSelectionWithChange }
 							selection={ _selection }
 							getItemId={ getItemId }
 						/>
@@ -168,7 +165,7 @@ export default function DataViews< Item >( {
 				getItemId={ getItemId }
 				isLoading={ isLoading }
 				onChangeView={ onChangeView }
-				onSelectionChange={ onSetSelection }
+				onSelectionChange={ setSelectionWithChange }
 				selection={ _selection }
 				setOpenedFilter={ setOpenedFilter }
 				view={ view }
@@ -184,7 +181,7 @@ export default function DataViews< Item >( {
 						data={ data }
 						actions={ actions }
 						selection={ _selection }
-						onSelectionChange={ onSetSelection }
+						onSelectionChange={ setSelectionWithChange }
 						getItemId={ getItemId }
 					/>
 				) }

packages/dataviews/src/private-types.tsx

@@ -0,0 +1,2 @@
+export type SelectionOrUpdater = string[] | ( ( prev: string[] ) => string[] );
+export type SetSelection = ( selection: SelectionOrUpdater ) => void;

packages/dataviews/src/single-selection-checkbox.tsx

@@ -8,12 +8,12 @@ import { CheckboxControl } from '@wordpress/components';
  * Internal dependencies
  */
 import type { Field } from './types';
+import type { SetSelection } from './private-types';
 
 interface SingleSelectionCheckboxProps< Item > {
 	selection: string[];
-	onSelectionChange: ( selection: Item[] ) => void;
+	onSelectionChange: SetSelection;
 	item: Item;
-	data: Item[];
 	getItemId: ( item: Item ) => string;
 	primaryField?: Field< Item >;
 	disabled: boolean;
@@ -23,23 +23,22 @@ export default function SingleSelectionCheckbox< Item >( {
 	selection,
 	onSelectionChange,
 	item,
-	data,
 	getItemId,
 	primaryField,
 	disabled,
 }: SingleSelectionCheckboxProps< Item > ) {
 	const id = getItemId( item );
-	const isSelected = ! disabled && selection.includes( id );
+	const checked = ! disabled && selection.includes( id );
 	let selectionLabel;
 	if ( primaryField?.getValue && item ) {
 		// eslint-disable-next-line @wordpress/valid-sprintf
 		selectionLabel = sprintf(
 			/* translators: %s: item title. */
-			isSelected ? __( 'Deselect item: %s' ) : __( 'Select item: %s' ),
+			checked ? __( 'Deselect item: %s' ) : __( 'Select item: %s' ),
 			primaryField.getValue( { item } )
 		);
 	} else {
-		selectionLabel = isSelected
+		selectionLabel = checked
 			? __( 'Select a new item' )
 			: __( 'Deselect item' );
 	}
@@ -49,31 +48,17 @@ export default function SingleSelectionCheckbox< Item >( {
 			__nextHasNoMarginBottom
 			aria-label={ selectionLabel }
 			aria-disabled={ disabled }
-			checked={ isSelected }
+			checked={ checked }
 			onChange={ () => {
 				if ( disabled ) {
 					return;
 				}
 
-				if ( ! isSelected ) {
-					onSelectionChange(
-						data.filter( ( _item ) => {
-							const itemId = getItemId?.( _item );
-							return (
-								itemId === id || selection.includes( itemId )
-							);
-						} )
-					);
-				} else {
-					onSelectionChange(
-						data.filter( ( _item ) => {
-							const itemId = getItemId?.( _item );
-							return (
-								itemId !== id && selection.includes( itemId )
-							);
-						} )
-					);
-				}
+				onSelectionChange(
+					selection.includes( id )
+						? selection.filter( ( itemId ) => id !== itemId )
+						: [ ...selection, id ]
+				);
 			} }
 		/>
 	);

packages/dataviews/src/types.ts

@@ -3,6 +3,11 @@
  */
 import type { ReactElement, ReactNode } from 'react';
 
+/**
+ * Internal dependencies
+ */
+import type { SetSelection } from './private-types';
+
 export type SortDirection = 'asc' | 'desc';
 
 /**
@@ -383,7 +388,7 @@ export interface ViewBaseProps< Item > {
 	getItemId: ( item: Item ) => string;
 	isLoading?: boolean;
 	onChangeView( view: View ): void;
-	onSelectionChange: ( items: Item[] ) => void;
+	onSelectionChange: SetSelection;
 	selection: string[];
 	setOpenedFilter: ( fieldId: string ) => void;
 	view: View;