@wordpress/components 39.0.0 → 40.1.0

package/src/combobox-control/types.ts

@@ -7,6 +7,8 @@ export type ComboboxControlOption = {
 	[ key: string ]: any;
 };
 
+type ComboboxControlValue = string | null;
+
 export type ComboboxControlProps = Pick<
 	BaseControlProps,
 	| '__nextHasNoMarginBottom'
@@ -65,7 +67,7 @@ export type ComboboxControlProps = Pick<
 	/**
 	 * Function called with the selected value changes.
 	 */
-	onChange?: ( value: ComboboxControlProps[ 'value' ] ) => void;
+	onChange?: ( value: ComboboxControlValue ) => void;
 	/**
 	 * Function called when the control's search input value changes. The argument contains the next input value.
 	 *
@@ -79,7 +81,7 @@ export type ComboboxControlProps = Pick<
 	/**
 	 * The current value of the control.
 	 */
-	value?: string | null;
+	value?: ComboboxControlValue;
 	/**
 	 * If passed, the combobox input will show a placeholder string if no values are present.
 	 */

package/src/composite/README.md

@@ -136,7 +136,7 @@ Allows the component to be rendered as a different HTML element or React compone
 
 Makes the component a focusable element. When this element gains keyboard focus, it gets a `data-focus-visible` attribute and triggers the `onFocusVisible` prop.
 
-The component supports the `disabled` prop even for those elements not supporting the native `disabled` attribute. Disabled elements may be still accessible via keyboard by using the the `accessibleWhenDisabled` prop.
+The component supports the `disabled` prop even for those elements not supporting the native `disabled` attribute. Disabled elements may be still accessible via keyboard by using the `accessibleWhenDisabled` prop.
 
 Non-native focusable elements will lose their focusability entirely. However, native focusable elements will retain their inherent focusability.
 

package/src/composite/context.tsx

@@ -5,3 +5,9 @@ export const CompositeContext = createContext< CompositeContextProps >( {} );
 CompositeContext.displayName = 'CompositeContext';
 
 export const useCompositeContext = () => useContext( CompositeContext );
+
+export const CompositeGroupContext = createContext( false );
+CompositeGroupContext.displayName = 'CompositeGroupContext';
+
+export const useCompositeGroupContext = () =>
+	useContext( CompositeGroupContext );

package/src/composite/group-label.tsx

@@ -1,7 +1,7 @@
 import * as Ariakit from '@ariakit/react';
 import { forwardRef } from '@wordpress/element';
 import type { WordPressComponentProps } from '../context';
-import { useCompositeContext } from './context';
+import { useCompositeContext, useCompositeGroupContext } from './context';
 import type { CompositeGroupLabelProps } from './types';
 
 export const CompositeGroupLabel = forwardRef<
@@ -9,6 +9,13 @@ export const CompositeGroupLabel = forwardRef<
 	WordPressComponentProps< CompositeGroupLabelProps, 'div', false >
 >( function CompositeGroupLabel( props, ref ) {
 	const context = useCompositeContext();
+	const isWithinGroup = useCompositeGroupContext();
+
+	if ( ! isWithinGroup ) {
+		throw new Error(
+			'Composite.GroupLabel can only be rendered inside Composite.Group.'
+		);
+	}
 
 	// @ts-expect-error The store prop is undocumented and only used by the
 	// legacy compat layer. The `store` prop is documented, but its type is

package/src/composite/group.tsx

@@ -1,7 +1,7 @@
 import * as Ariakit from '@ariakit/react';
 import { forwardRef } from '@wordpress/element';
 import type { WordPressComponentProps } from '../context';
-import { useCompositeContext } from './context';
+import { CompositeGroupContext, useCompositeContext } from './context';
 import type { CompositeGroupProps } from './types';
 
 export const CompositeGroup = forwardRef<
@@ -9,11 +9,18 @@ export const CompositeGroup = forwardRef<
 	WordPressComponentProps< CompositeGroupProps, 'div', false >
 >( function CompositeGroup( props, ref ) {
 	const context = useCompositeContext();
+	const { children, ...restProps } = props;
 
 	// @ts-expect-error The store prop is undocumented and only used by the
 	// legacy compat layer. The `store` prop is documented, but its type is
 	// obfuscated to discourage its use outside of the component's internals.
 	const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
 
-	return <Ariakit.CompositeGroup store={ store } { ...props } ref={ ref } />;
+	return (
+		<Ariakit.CompositeGroup store={ store } { ...restProps } ref={ ref }>
+			<CompositeGroupContext.Provider value>
+				{ children }
+			</CompositeGroupContext.Provider>
+		</Ariakit.CompositeGroup>
+	);
 } );

package/src/composite/item.tsx

@@ -1,5 +1,6 @@
 import * as Ariakit from '@ariakit/react';
 import { forwardRef } from '@wordpress/element';
+import warning from '@wordpress/warning';
 import type { WordPressComponentProps } from '../context';
 import { useCompositeContext } from './context';
 import type { CompositeItemProps } from './types';
@@ -14,6 +15,11 @@ export const CompositeItem = forwardRef<
 	// legacy compat layer. The `store` prop is documented, but its type is
 	// obfuscated to discourage its use outside of the component's internals.
 	const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
+	if ( ! store ) {
+		warning(
+			'Composite.Item: Missing composite state. Render inside Composite to enable composite keyboard behavior.'
+		);
+	}
 
 	return <Ariakit.CompositeItem store={ store } { ...props } ref={ ref } />;
 } );

package/src/composite/legacy/stories/index.story.tsx

@@ -147,19 +147,19 @@ export const OneDimensionWithStateProp: StoryFn<
 			state={ state }
 			aria-label="Legacy Composite with state prop (one dimension)"
 		>
-			<CompositeItem state={ state } role="listitem">
+			<CompositeItem state={ state } role="listitem" render={ <div /> }>
 				Item 1
 			</CompositeItem>
-			<CompositeItem state={ state } role="listitem">
+			<CompositeItem state={ state } role="listitem" render={ <div /> }>
 				Item 2
 			</CompositeItem>
-			<CompositeItem state={ state } role="listitem">
+			<CompositeItem state={ state } role="listitem" render={ <div /> }>
 				Item 3
 			</CompositeItem>
-			<CompositeItem state={ state } role="listitem">
+			<CompositeItem state={ state } role="listitem" render={ <div /> }>
 				Item 4
 			</CompositeItem>
-			<CompositeItem state={ state } role="listitem">
+			<CompositeItem state={ state } role="listitem" render={ <div /> }>
 				Item 5
 			</CompositeItem>
 		</Composite>
@@ -178,19 +178,19 @@ export const OneDimensionWithSpreadProps: StoryFn<
 			{ ...state }
 			aria-label="Legacy Composite with spread props (one dimension)"
 		>
-			<CompositeItem { ...state } role="listitem">
+			<CompositeItem { ...state } role="listitem" render={ <div /> }>
 				Item 1
 			</CompositeItem>
-			<CompositeItem { ...state } role="listitem">
+			<CompositeItem { ...state } role="listitem" render={ <div /> }>
 				Item 2
 			</CompositeItem>
-			<CompositeItem { ...state } role="listitem">
+			<CompositeItem { ...state } role="listitem" render={ <div /> }>
 				Item 3
 			</CompositeItem>
-			<CompositeItem { ...state } role="listitem">
+			<CompositeItem { ...state } role="listitem" render={ <div /> }>
 				Item 4
 			</CompositeItem>
-			<CompositeItem { ...state } role="listitem">
+			<CompositeItem { ...state } role="listitem" render={ <div /> }>
 				Item 5
 			</CompositeItem>
 		</Composite>

package/src/composite/legacy/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { beforeEach, describe, expect, it, test, vi } from 'vitest';
 import {
 	queryByAttribute,
 	render,
@@ -16,23 +17,15 @@ import {
 // page down. Without this, nothing has a height, and so paging up
 // and down doesn't behave as expected in tests.
 
-let clientHeightSpy: jest.SpiedGetter<
-	typeof HTMLElement.prototype.clientHeight
->;
-
-beforeAll( () => {
-	clientHeightSpy = jest
-		.spyOn( HTMLElement.prototype, 'clientHeight', 'get' )
-		.mockImplementation( function getClientHeight( this: HTMLElement ) {
+beforeEach( () => {
+	vi.spyOn( HTMLElement.prototype, 'clientHeight', 'get' ).mockImplementation(
+		function getClientHeight( this: HTMLElement ) {
 			if ( this.tagName === 'BODY' ) {
 				return window.outerHeight;
 			}
 			return 50;
-		} );
-} );
-
-afterAll( () => {
-	clientHeightSpy?.mockRestore();
+		}
+	);
 } );
 
 type InitialState = Parameters< typeof useCompositeState >[ 0 ];

package/src/composite/stories/index.story.tsx

@@ -19,11 +19,6 @@ const meta: Meta< typeof Composite > = {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		'Composite.Context': Composite.Context,
 	},
-	// Temporary: Due to an upstream bug, render the root explicitly so the
-	// components manifest extractor can resolve props from the JSX.
-	//
-	// See: https://github.com/storybookjs/storybook/issues/34877
-	render: ( args ) => <Composite { ...args } />,
 	argTypes: {
 		children: { control: false },
 		render: { control: false },

package/src/composite/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,5 +1,7 @@
+import { beforeEach, describe, expect, it, test, vi } from 'vitest';
 import { queryByAttribute, render, screen } from '@testing-library/react';
 import { click, press, waitFor } from '@ariakit/test';
+import * as Ariakit from '@ariakit/react';
 import type { ComponentProps } from 'react';
 import { useState } from '@wordpress/element';
 import { Composite } from '..';
@@ -18,26 +20,20 @@ async function renderAndValidate( ...args: Parameters< typeof render > ) {
 }
 
 describe( 'Composite', () => {
-	let clientHeightSpy: jest.SpiedGetter<
-		typeof HTMLElement.prototype.clientHeight
-	>;
-
-	beforeAll( () => {
+	beforeEach( () => {
 		// This is necessary because of how Ariakit calculates page up and
 		// page down. Without this, nothing has a height, and so paging up
 		// and down doesn't behave as expected in tests.
-		clientHeightSpy = jest
-			.spyOn( HTMLElement.prototype, 'clientHeight', 'get' )
-			.mockImplementation( function getClientHeight( this: HTMLElement ) {
-				if ( this.tagName === 'BODY' ) {
-					return window.outerHeight;
-				}
-				return 50;
-			} );
-	} );
-
-	afterAll( () => {
-		clientHeightSpy?.mockRestore();
+		vi.spyOn(
+			HTMLElement.prototype,
+			'clientHeight',
+			'get'
+		).mockImplementation( function getClientHeight( this: HTMLElement ) {
+			if ( this.tagName === 'BODY' ) {
+				return window.outerHeight;
+			}
+			return 50;
+		} );
 	} );
 
 	test( 'Renders as a single tab stop', async () => {
@@ -700,4 +696,51 @@ describe( 'Composite', () => {
 			} );
 		} );
 	} );
+
+	describe( 'required context', () => {
+		it( 'warns when Composite.Item has no composite state', () => {
+			render( <Composite.Item>Item</Composite.Item> );
+
+			expect(
+				screen.getByRole( 'button', { name: 'Item' } )
+			).toBeVisible();
+			expect( console ).toHaveWarnedWith(
+				'Composite.Item: Missing composite state. Render inside Composite to enable composite keyboard behavior.'
+			);
+		} );
+
+		it( 'supports an explicit store prop for Composite.Item', () => {
+			function ItemWithStore() {
+				const store = Ariakit.useCompositeStore();
+
+				return (
+					<Composite.Item
+						// @ts-expect-error The store prop is intentionally omitted from the public types.
+						store={ store }
+					>
+						Item
+					</Composite.Item>
+				);
+			}
+
+			render( <ItemWithStore /> );
+
+			expect(
+				screen.getByRole( 'button', { name: 'Item' } )
+			).toBeVisible();
+		} );
+
+		it( 'throws when Composite.GroupLabel is outside Composite.Group', () => {
+			expect( () =>
+				render(
+					<Composite>
+						<Composite.GroupLabel>Label</Composite.GroupLabel>
+					</Composite>
+				)
+			).toThrow(
+				'Composite.GroupLabel can only be rendered inside Composite.Group.'
+			);
+			expect( console ).toHaveErrored();
+		} );
+	} );
 } );

package/src/composite/types.ts

@@ -141,7 +141,7 @@ export type CompositeProps = CompositeStoreProps & {
 	 * `onFocusVisible` prop.
 	 * The component supports the `disabled` prop even for those elements not
 	 * supporting the native `disabled` attribute. Disabled elements may be
-	 * still accessible via keyboard by using the the `accessibleWhenDisabled`
+	 * still accessible via keyboard by using the `accessibleWhenDisabled`
 	 * prop.
 	 * Non-native focusable elements will lose their focusability entirely.
 	 * However, native focusable elements will retain their inherent focusability.

package/src/confirm-dialog/README.md

@@ -81,6 +81,14 @@ function Example() {
 
 ## Props
 
+### `__experimentalHideHeader`
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `true`
+
+Whether the underlying `Modal` should hide its header, `title` included.
+
 ### `children`
 
  - Type: `ReactNode`
@@ -150,3 +158,11 @@ dialog to close when the user cancels.
  - Required: No
 
 Size of the underlying Modal. See `Modal`'s `size` prop.
+
+### `title`
+
+ - Type: `string`
+ - Required: No
+
+The title of the underlying `Modal`: its accessible name, and the
+visible heading unless `__experimentalHideHeader` is `true`.

package/src/confirm-dialog/component.tsx

@@ -22,6 +22,8 @@ const UnconnectedConfirmDialog = (
 		confirmButtonText,
 		cancelButtonText,
 		isBusy,
+		title,
+		__experimentalHideHeader = true,
 		...otherProps
 	} = useContextSystem( props, 'ConfirmDialog' );
 
@@ -81,7 +83,11 @@ const UnconnectedConfirmDialog = (
 					isDismissible
 					ref={ forwardedRef }
 					overlayClassName={ wrapperClassName }
-					__experimentalHideHeader
+					title={ title }
+					contentLabel={
+						__experimentalHideHeader ? title : undefined
+					}
+					__experimentalHideHeader={ __experimentalHideHeader }
 					{ ...otherProps }
 				>
 					<VStack spacing={ 8 }>

package/src/confirm-dialog/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,7 +1,9 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ConfirmDialog } from '..';
 import styles from '../style.module.scss';
+globalThis.wpVitest.mockMatchMedia();
 
 const noop = () => {};
 
@@ -29,6 +31,47 @@ describe( 'Confirm', () => {
 					expect( el ).toBeInTheDocument();
 				} );
 			} );
+			it( 'uses title as the dialog accessible name while the default header is hidden', () => {
+				const title = 'Delete item?';
+
+				render(
+					<ConfirmDialog
+						title={ title }
+						onConfirm={ noop }
+						onCancel={ noop }
+					>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				expect(
+					screen.getByRole( 'dialog', { name: title } )
+				).toBeInTheDocument();
+				expect(
+					screen.queryByRole( 'heading', { name: title } )
+				).not.toBeInTheDocument();
+			} );
+			it( 'renders the title heading when __experimentalHideHeader is false', () => {
+				const title = 'Delete item?';
+
+				render(
+					<ConfirmDialog
+						title={ title }
+						__experimentalHideHeader={ false }
+						onConfirm={ noop }
+						onCancel={ noop }
+					>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				expect(
+					screen.getByRole( 'dialog', { name: title } )
+				).toBeInTheDocument();
+				expect(
+					screen.getByRole( 'heading', { name: title } )
+				).toBeInTheDocument();
+			} );
 			it( 'should render correctly with custom button labels', () => {
 				const cancelButtonText = 'No thanks';
 				const confirmButtonText = 'Yes please!';
@@ -74,7 +117,7 @@ describe( 'Confirm', () => {
 			it( 'should not render if closed by clicking `OK`, and the `onConfirm` callback should be called', async () => {
 				const user = userEvent.setup();
 
-				const onConfirm = jest.fn().mockName( 'onConfirm()' );
+				const onConfirm = vi.fn().mockName( 'onConfirm()' );
 
 				render(
 					<ConfirmDialog onConfirm={ onConfirm }>
@@ -94,7 +137,7 @@ describe( 'Confirm', () => {
 			it( 'should not render if closed by clicking `Cancel`, and the `onCancel` callback should be called', async () => {
 				const user = userEvent.setup();
 
-				const onCancel = jest.fn().mockName( 'onCancel()' );
+				const onCancel = vi.fn().mockName( 'onCancel()' );
 
 				render(
 					<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
@@ -130,7 +173,7 @@ describe( 'Confirm', () => {
 
 			it( 'should not render if dialog is closed by clicking the overlay, and the `onCancel` callback should be called', async () => {
 				const user = userEvent.setup();
-				const onCancel = jest.fn().mockName( 'onCancel()' );
+				const onCancel = vi.fn().mockName( 'onCancel()' );
 
 				render(
 					<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
@@ -151,7 +194,7 @@ describe( 'Confirm', () => {
 			it( 'should not render if dialog is closed by pressing `Escape`, and the `onCancel` callback should be called', async () => {
 				const user = userEvent.setup();
 
-				const onCancel = jest.fn().mockName( 'onCancel()' );
+				const onCancel = vi.fn().mockName( 'onCancel()' );
 
 				render(
 					<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
@@ -170,7 +213,7 @@ describe( 'Confirm', () => {
 			it( 'should not render if dialog is closed by pressing `Enter`, and the `onConfirm` callback should be called', async () => {
 				const user = userEvent.setup();
 
-				const onConfirm = jest.fn().mockName( 'onConfirm()' );
+				const onConfirm = vi.fn().mockName( 'onConfirm()' );
 
 				render(
 					<ConfirmDialog onConfirm={ onConfirm }>
@@ -189,8 +232,8 @@ describe( 'Confirm', () => {
 			it( 'calls only the `onCancel` callback and not the `onConfirm` callback when the cancel button is submitted using the keyboard', async () => {
 				const user = userEvent.setup();
 
-				const onConfirm = jest.fn().mockName( 'onConfirm()' );
-				const onCancel = jest.fn().mockName( 'onCancel()' );
+				const onConfirm = vi.fn().mockName( 'onConfirm()' );
+				const onCancel = vi.fn().mockName( 'onCancel()' );
 
 				render(
 					<ConfirmDialog
@@ -210,8 +253,8 @@ describe( 'Confirm', () => {
 			it( 'calls only the `onConfirm` callback when the confirm button is submitted using the keyboard', async () => {
 				const user = userEvent.setup();
 
-				const onConfirm = jest.fn().mockName( 'onConfirm()' );
-				const onCancel = jest.fn().mockName( 'onCancel()' );
+				const onConfirm = vi.fn().mockName( 'onConfirm()' );
+				const onCancel = vi.fn().mockName( 'onCancel()' );
 
 				render(
 					<ConfirmDialog
@@ -264,7 +307,7 @@ describe( 'Confirm', () => {
 		it( 'should call the `onConfirm` callback if `OK`', async () => {
 			const user = userEvent.setup();
 
-			const onConfirm = jest.fn().mockName( 'onConfirm()' );
+			const onConfirm = vi.fn().mockName( 'onConfirm()' );
 
 			render(
 				<ConfirmDialog isOpen onConfirm={ onConfirm }>
@@ -282,7 +325,7 @@ describe( 'Confirm', () => {
 		it( 'should call the `onCancel` callback if `Cancel` is clicked', async () => {
 			const user = userEvent.setup();
 
-			const onCancel = jest.fn().mockName( 'onCancel()' );
+			const onCancel = vi.fn().mockName( 'onCancel()' );
 
 			render(
 				<ConfirmDialog isOpen onConfirm={ noop } onCancel={ onCancel }>
@@ -299,7 +342,7 @@ describe( 'Confirm', () => {
 
 		it( 'should call the `onCancel` callback if the overlay is clicked', async () => {
 			const user = userEvent.setup();
-			const onCancel = jest.fn().mockName( 'onCancel()' );
+			const onCancel = vi.fn().mockName( 'onCancel()' );
 
 			render(
 				<ConfirmDialog isOpen onConfirm={ noop } onCancel={ onCancel }>
@@ -319,7 +362,7 @@ describe( 'Confirm', () => {
 		it( 'should call the `onCancel` callback if the `Escape` key is pressed', async () => {
 			const user = userEvent.setup();
 
-			const onCancel = jest.fn().mockName( 'onCancel()' );
+			const onCancel = vi.fn().mockName( 'onCancel()' );
 
 			render(
 				<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
@@ -335,7 +378,7 @@ describe( 'Confirm', () => {
 		it( 'should call the `onConfirm` callback if the `Enter` key is pressed', async () => {
 			const user = userEvent.setup();
 
-			const onConfirm = jest.fn().mockName( 'onConfirm()' );
+			const onConfirm = vi.fn().mockName( 'onConfirm()' );
 
 			render(
 				<ConfirmDialog isOpen onConfirm={ onConfirm } onCancel={ noop }>

package/src/confirm-dialog/types.ts

@@ -53,4 +53,15 @@ export type ConfirmDialogProps = {
 	 * Both buttons will be disabled.
 	 */
 	isBusy?: boolean;
+	/**
+	 * The title of the underlying `Modal`: its accessible name, and the
+	 * visible heading unless `__experimentalHideHeader` is `true`.
+	 */
+	title?: ModalProps[ 'title' ];
+	/**
+	 * Whether the underlying `Modal` should hide its header, `title` included.
+	 *
+	 * @default true
+	 */
+	__experimentalHideHeader?: ModalProps[ '__experimentalHideHeader' ];
 };

package/src/content-editable-control/style.module.scss

@@ -7,7 +7,6 @@
 	background: $components-color-background;
 	color: $components-color-foreground;
 	@include input-control;
-	border-color: $components-color-border;
 
 	// `::placeholder` only applies to native form fields, so draw the text
 	// from the `aria-placeholder` attribute while the element has no content.

package/src/content-editable-control/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import ContentEditableControl from '..';
 
@@ -142,15 +143,15 @@ describe( 'ContentEditableControl', () => {
 	it( 'forwards its ref to the contenteditable element', () => {
 		// The rich-text wiring (the `useRichText` ref, event-listener refs,
 		// an anchor ref, …) is injected through this forwarded ref.
-		const ref = jest.fn();
+		const ref = vi.fn();
 		render( <ContentEditableControl label="Note" ref={ ref } /> );
 
 		expect( ref ).toHaveBeenCalledWith( screen.getByRole( 'textbox' ) );
 	} );
 
 	it( 'calls consumer-supplied focus and blur handlers', () => {
-		const onFocus = jest.fn();
-		const onBlur = jest.fn();
+		const onFocus = vi.fn();
+		const onBlur = vi.fn();
 		render(
 			<ContentEditableControl
 				label="Field"

package/src/context/{context-system-provider.js → context-system-provider.tsx}

@@ -1,7 +1,7 @@
 import deepmerge from 'deepmerge';
 import fastDeepEqual from 'fast-deep-equal/es6/index.js';
-// @ts-expect-error https://github.com/jonschlinkert/is-plain-object/pull/47
 import { isPlainObject } from 'is-plain-object';
+import type { ReactNode } from 'react';
 import {
 	createContext,
 	useContext,
@@ -12,9 +12,12 @@ import {
 import warn from '@wordpress/warning';
 import { useUpdateEffect } from '../utils';
 
-export const ComponentsContext = createContext(
-	/** @type {Record<string, any>} */ ( {} )
-);
+type ContextSystemValue = Record<
+	string,
+	Record< string, unknown > | undefined
+>;
+
+export const ComponentsContext = createContext< ContextSystemValue >( {} );
 ComponentsContext.displayName = 'ComponentsContext';
 
 export const useComponentsContext = () => useContext( ComponentsContext );
@@ -28,7 +31,11 @@ export const useComponentsContext = () => useContext( ComponentsContext );
  * @param {Record<string, any>} props.value
  * @return {Record<string, any>} The consolidated value.
  */
-function useContextSystemBridge( { value } ) {
+function useContextSystemBridge( {
+	value,
+}: {
+	value?: ContextSystemValue;
+} ): ContextSystemValue {
 	const parentContext = useComponentsContext();
 
 	const valueRef = useRef( value );
@@ -83,7 +90,13 @@ function useContextSystemBridge( { value } ) {
  * @param {T}               options.value    Props to render into connected components.
  * @return {React.JSX.Element} A Provider wrapped component.
  */
-const BaseContextSystemProvider = ( { children, value } ) => {
+const BaseContextSystemProvider = ( {
+	children,
+	value,
+}: {
+	children: ReactNode;
+	value?: ContextSystemValue;
+} ) => {
 	const contextValue = useContextSystemBridge( { value } );
 
 	return (

package/src/context/stories/{ComponentsProvider.stories.jsx → ComponentsProvider.stories.tsx}

@@ -4,7 +4,7 @@ import { View } from '../../view';
 import { Text } from '../../text';
 import { ContextSystemProvider } from '../index';
 
-const SomeContext = createContext();
+const SomeContext = createContext< number | undefined >( undefined );
 const useSomeContext = () => useContext( SomeContext );
 
 export default {
@@ -39,7 +39,7 @@ const innerContext = {
 
 const InnerContent = memo( () => {
 	const state = useSomeContext();
-	const isEven = state % 2 === 0;
+	const isEven = state !== undefined && state % 2 === 0;
 	return (
 		<View style={ { background: isEven ? 'red' : 'initial' } }>
 			<Text>Card (inside innerContext)</Text>