@wordpress/components 30.2.2-next.e256d081a.0 → 30.3.2-next.6870dfe5b.0

package/src/composite/context.tsx

@@ -9,5 +9,6 @@ import { createContext, useContext } from '@wordpress/element';
 import type { CompositeContextProps } from './types';
 
 export const CompositeContext = createContext< CompositeContextProps >( {} );
+CompositeContext.displayName = 'CompositeContext';
 
 export const useCompositeContext = () => useContext( CompositeContext );

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

@@ -25,6 +25,8 @@ import { useUpdateEffect } from '../utils';
 export const ComponentsContext = createContext(
 	/** @type {Record<string, any>} */ ( {} )
 );
+ComponentsContext.displayName = 'ComponentsContext';
+
 export const useComponentsContext = () => useContext( ComponentsContext );
 
 /**

package/src/custom-select-control-v2/custom-select.tsx

@@ -28,6 +28,7 @@ import BaseControl from '../base-control';
 
 export const CustomSelectContext =
 	createContext< CustomSelectContextType >( undefined );
+CustomSelectContext.displayName = 'CustomSelectContext';
 
 function defaultRenderSelectedValue(
 	value: CustomSelectButtonProps[ 'value' ]

package/src/disabled/index.tsx

@@ -12,6 +12,8 @@ import type { WordPressComponentProps } from '../context';
 import { useCx } from '../utils';
 
 const Context = createContext< boolean >( false );
+Context.displayName = 'DisabledContext';
+
 const { Consumer, Provider } = Context;
 
 /**

package/src/item-group/context.ts

@@ -11,5 +11,6 @@ import type { ItemGroupContext as Context } from './types';
 export const ItemGroupContext = createContext( {
 	size: 'medium',
 } as Context );
+ItemGroupContext.displayName = 'ItemGroupContext';
 
 export const useItemGroupContext = () => useContext( ItemGroupContext );

package/src/menu/context.tsx

@@ -9,3 +9,4 @@ import { createContext } from '@wordpress/element';
 import type { ContextProps } from './types';
 
 export const Context = createContext< ContextProps | undefined >( undefined );
+Context.displayName = 'MenuContext';

package/src/modal/index.tsx

@@ -44,6 +44,7 @@ type Dismissers = Set<
 	React.RefObject< ModalProps[ 'onRequestClose' ] | undefined >
 >;
 const ModalContext = createContext< Dismissers >( new Set() );
+ModalContext.displayName = 'ModalContext';
 
 // Used to track body class names applied while modals are open.
 const bodyOpenClasses = new Map< string, number >();

package/src/modal/style.scss

@@ -31,11 +31,19 @@
 	overflow: hidden;
 	// Have the content element fill the vertical space yet not overflow.
 	display: flex;
+	color: $gray-900;
 	// Animate the modal frame/contents appearing on the page.
 	animation-name: components-modal__appear-animation;
 	animation-fill-mode: forwards;
 	animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
 
+	// Ensure all headings use the proper editor text color, overriding wp-admin common.css
+	h1,
+	h2,
+	h3 {
+		color: $gray-900;
+	}
+
 	@media not (prefers-reduced-motion) {
 		animation-duration: var(--modal-frame-animation-duration);
 	}

package/src/navigation/context.tsx

@@ -34,4 +34,7 @@ export const NavigationContext = createContext< NavigationContextType >( {
 		isMenuEmpty: defaultIsEmpty,
 	},
 } );
+
+NavigationContext.displayName = 'NavigationContext';
+
 export const useNavigationContext = () => useContext( NavigationContext );

package/src/navigation/group/context.tsx

@@ -10,6 +10,7 @@ import type { NavigationGroupContext as NavigationGroupContextType } from '../ty
 
 export const NavigationGroupContext =
 	createContext< NavigationGroupContextType >( { group: undefined } );
+NavigationGroupContext.displayName = 'NavigationGroupContext';
 
 export const useNavigationGroupContext = () =>
 	useContext( NavigationGroupContext );

package/src/navigation/menu/context.tsx

@@ -14,5 +14,7 @@ export const NavigationMenuContext = createContext< NavigationMenuContextType >(
 		search: '',
 	}
 );
+NavigationMenuContext.displayName = 'NavigationMenuContext';
+
 export const useNavigationMenuContext = () =>
 	useContext( NavigationMenuContext );

package/src/navigator/context.ts

@@ -18,3 +18,4 @@ const initialContextValue: NavigatorContextType = {
 	params: {},
 };
 export const NavigatorContext = createContext( initialContextValue );
+NavigatorContext.displayName = 'NavigatorContext';

package/src/popover/index.tsx

@@ -102,6 +102,7 @@ const ArrowTriangle = () => (
 );
 
 const slotNameContext = createContext< string | undefined >( undefined );
+slotNameContext.displayName = '__unstableSlotNameContext';
 
 const fallbackContainerClassname = 'components-popover__fallback-container';
 const getPopoverFallbackContainer = () => {

package/src/private-apis.ts

@@ -13,10 +13,13 @@ import Badge from './badge';
 
 import { DateCalendar, DateRangeCalendar, TZDate } from './calendar';
 import {
+	ValidatedCheckboxControl,
+	ValidatedInputControl,
 	ValidatedNumberControl,
 	ValidatedTextControl,
 	ValidatedToggleControl,
 } from './validated-form-controls';
+import { Picker } from './color-picker/picker';
 
 export const privateApis = {};
 lock( privateApis, {
@@ -32,6 +35,9 @@ lock( privateApis, {
 	DateCalendar,
 	DateRangeCalendar,
 	TZDate,
+	Picker,
+	ValidatedInputControl,
+	ValidatedCheckboxControl,
 	ValidatedNumberControl,
 	ValidatedTextControl,
 	ValidatedToggleControl,

package/src/radio-group/context.tsx

@@ -15,3 +15,4 @@ export const RadioGroupContext = createContext< {
 	store: undefined,
 	disabled: undefined,
 } );
+RadioGroupContext.displayName = 'RadioGroupContext';

package/src/slot-fill/bubbles-virtually/slot-fill-context.ts

@@ -29,5 +29,6 @@ const initialContextValue: SlotFillBubblesVirtuallyContext = {
 };
 
 const SlotFillContext = createContext( initialContextValue );
+SlotFillContext.displayName = 'SlotFillContext';
 
 export default SlotFillContext;

package/src/slot-fill/context.ts

@@ -19,5 +19,6 @@ const initialValue: BaseSlotFillContext = {
 	updateFill: () => {},
 };
 export const SlotFillContext = createContext( initialValue );
+SlotFillContext.displayName = 'SlotFillContext';
 
 export default SlotFillContext;

package/src/tabs/context.ts

@@ -9,5 +9,6 @@ import { createContext, useContext } from '@wordpress/element';
 import type { TabsContextProps } from './types';
 
 export const TabsContext = createContext< TabsContextProps >( undefined );
+TabsContext.displayName = 'TabsContext';
 
 export const useTabsContext = () => useContext( TabsContext );

package/src/toggle-group-control/context.ts

@@ -11,6 +11,8 @@ import type { ToggleGroupControlContextProps } from './types';
 const ToggleGroupControlContext = createContext(
 	{} as ToggleGroupControlContextProps
 );
+ToggleGroupControlContext.displayName = 'ToggleGroupControlContext';
+
 export const useToggleGroupControlContext = () =>
 	useContext( ToggleGroupControlContext );
 export default ToggleGroupControlContext;

package/src/toolbar/toolbar-context/index.ts

@@ -11,5 +11,6 @@ import { createContext } from '@wordpress/element';
 const ToolbarContext = createContext< Ariakit.ToolbarStore | undefined >(
 	undefined
 );
+ToolbarContext.displayName = 'ToolbarContext';
 
 export default ToolbarContext;

package/src/tools-panel/context.ts

@@ -22,6 +22,7 @@ export const ToolsPanelContext = createContext< ToolsPanelContextType >( {
 	deregisterResetAllFilter: noop,
 	areAllOptionalControlsHidden: true,
 } );
+ToolsPanelContext.displayName = 'ToolsPanelContext';
 
 export const useToolsPanelContext = () =>
 	useContext< ToolsPanelContextType >( ToolsPanelContext );

package/src/tooltip/index.tsx

@@ -30,6 +30,7 @@ import { positionToPlacement } from '../popover/utils';
 const TooltipInternalContext = createContext< TooltipInternalContextType >( {
 	isNestedInTooltip: false,
 } );
+TooltipInternalContext.displayName = 'TooltipInternalContext';
 
 /**
  * Time over anchor to wait before showing tooltip

package/src/tree-grid/roving-tab-index-context.ts

@@ -12,6 +12,8 @@ const RovingTabIndexContext = createContext<
 	  }
 	| undefined
 >( undefined );
+RovingTabIndexContext.displayName = 'RovingTabIndexContext';
+
 export const useRovingTabIndexContext = () =>
 	useContext( RovingTabIndexContext );
 export const RovingTabIndexProvider = RovingTabIndexContext.Provider;

package/src/validated-form-controls/control-with-error.tsx

@@ -81,6 +81,11 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 		getValidityTarget: () => ValidityTarget | null | undefined;
 		/**
 		 * The control component to apply validation to.
+		 *
+		 * As `children` will be cloned with additional props,
+		 * the component at the root of `children` should accept
+		 * `label`, `onChange`, and `required` props, and process them
+		 * appropriately.
 		 */
 		children: C;
 	},

package/src/validated-form-controls/style.scss

@@ -2,14 +2,14 @@
 	// For components based on InputBase
 	&:has(:is(input, select):user-invalid)
 	.components-input-control__backdrop {
-		--wp-components-color-accent: $alert-red;
+		--wp-components-color-accent: #{$alert-red};
 		border-color: $alert-red;
 	}
 
 	// For TextControl, TextareaControl
 	:is(textarea, input[type="text"]):user-invalid {
-		--wp-admin-theme-color: $alert-red;
-		--wp-components-color-accent: $alert-red;
+		--wp-admin-theme-color: #{$alert-red};
+		--wp-components-color-accent: #{$alert-red};
 		border-color: $alert-red;
 	}
 
@@ -26,13 +26,13 @@
 
 	// For CustomSelectControl
 	&:has(select:user-invalid) .components-input-control__backdrop {
-		--wp-components-color-accent: $alert-red;
+		--wp-components-color-accent: #{$alert-red};
 		border-color: $alert-red;
 	}
 
 	// For ToggleGroupControl
 	&:has(input[type="radio"]:invalid) {
-		--wp-components-color-accent: $alert-red;
+		--wp-components-color-accent: #{$alert-red};
 	}
 }