@wordpress/components 23.4.0 → 23.5.0

package/src/ui/context/context-system-provider.js

@@ -1,8 +1,9 @@
 /**
  * External dependencies
  */
+import deepmerge from 'deepmerge';
 import fastDeepEqual from 'fast-deep-equal/es6';
-import { merge } from 'lodash';
+import { isPlainObject } from 'is-plain-object';
 
 /**
  * WordPress dependencies
@@ -54,7 +55,7 @@ function useContextSystemBridge( { value } ) {
 	// `parentContext` will always be memoized (i.e., the result of this hook itself)
 	// or the default value from when the `ComponentsContext` was originally
 	// initialized (which will never change, it's a static variable)
-	// so this memoization will prevent `merge` and `JSON.parse/stringify` from rerunning unless
+	// so this memoization will prevent `deepmerge()` from rerunning unless
 	// the references to `value` change OR the `parentContext` has an actual material change
 	// (because again, it's guaranteed to be memoized or a static reference to the empty object
 	// so we know that the only changes for `parentContext` are material ones... i.e., why we
@@ -62,10 +63,12 @@ function useContextSystemBridge( { value } ) {
 	// need to bother with the `value`). The `useUpdateEffect` above will ensure that we are
 	// correctly warning when the `value` isn't being properly memoized. All of that to say
 	// that this should be super safe to assume that `useMemo` will only run on actual
-	// changes to the two dependencies, therefore saving us calls to `merge` and `JSON.parse/stringify`!
+	// changes to the two dependencies, therefore saving us calls to `deepmerge()`!
 	const config = useMemo( () => {
 		// Deep clone `parentContext` to avoid mutating it later.
-		return merge( JSON.parse( JSON.stringify( parentContext ) ), value );
+		return deepmerge( parentContext ?? {}, value ?? {}, {
+			isMergeableObject: isPlainObject,
+		} );
 	}, [ parentContext, value ] );
 
 	return config;

package/src/v-stack/stories/e2e/index.tsx

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '../../../view';
+import { VStack } from '../..';
+
+const meta: ComponentMeta< typeof VStack > = {
+	component: VStack,
+	title: 'Components (Experimental)/VStack',
+};
+export default meta;
+
+const Template: ComponentStory< typeof VStack > = ( props ) => {
+	return (
+		<VStack
+			{ ...props }
+			style={ { background: '#eee', minHeight: '3rem' } }
+		>
+			{ [ 'One', 'Two', 'Three', 'Four', 'Five' ].map( ( text ) => (
+				<View key={ text } style={ { background: '#b9f9ff' } }>
+					{ text }
+				</View>
+			) ) }
+		</VStack>
+	);
+};
+
+export const Default: ComponentStory< typeof VStack > = Template.bind( {} );
+Default.args = {
+	spacing: 3,
+};