@wordpress/components 37.0.1-next.v.202607070741.0 → 38.0.0

package/src/color-picker/test/index.tsx

@@ -378,6 +378,102 @@ describe( 'ColorPicker', () => {
 			expect( onChange ).toHaveBeenLastCalledWith( '#000000' );
 		} );
 
+		it.each( [
+			[ 'black', 0 ],
+			[ 'white', 100 ],
+		] )(
+			'should allow saturation 50→0 at %s without firing onChange',
+			async ( _label, lightness ) => {
+				const onChange = jest.fn();
+
+				render(
+					<ControlledColorPicker
+						onChange={ onChange }
+						enableAlpha={ false }
+						initialColor="#000000"
+					/>
+				);
+
+				const formatSelector = screen.getByRole( 'combobox' );
+				await userEvent.setup().selectOptions( formatSelector, 'hsl' );
+
+				const hueSlider = screen
+					.getAllByRole( 'slider', { name: 'Hue' } )
+					.at( -1 )!;
+				const saturationSlider = screen.getByRole( 'slider', {
+					name: 'Saturation',
+				} );
+				const lightnessSlider = screen.getByRole( 'slider', {
+					name: 'Lightness',
+				} );
+				const saturationNumberInput = screen.getByRole( 'spinbutton', {
+					name: 'Saturation',
+				} );
+
+				// Build hsl(200, 50%, lightness%) via HSL controls.
+				fireEvent.change( hueSlider, { target: { value: 200 } } );
+				fireEvent.change( saturationSlider, { target: { value: 50 } } );
+				fireEvent.change( lightnessSlider, {
+					target: { value: lightness },
+				} );
+				await waitFor( () =>
+					expect( lightnessSlider ).toHaveValue( String( lightness ) )
+				);
+
+				expect( saturationSlider ).toHaveValue( '50' );
+				expect( saturationNumberInput ).toHaveValue( 50 );
+				onChange.mockClear();
+
+				fireEvent.change( saturationSlider, { target: { value: 0 } } );
+
+				expect( saturationSlider ).toHaveValue( '0' );
+				expect( saturationNumberInput ).toHaveValue( 0 );
+				expect( onChange ).not.toHaveBeenCalled();
+			}
+		);
+
+		it( 'should fire onChange once per real color change in controlled mode', async () => {
+			const onChange = jest.fn();
+
+			render(
+				<ControlledColorPicker
+					onChange={ onChange }
+					enableAlpha={ false }
+					initialColor="#2ad5d5" // hsl(180, 67%, 50%)
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			await userEvent.setup().selectOptions( formatSelector, 'hsl' );
+
+			const lightnessSlider = screen.getByRole( 'slider', {
+				name: 'Lightness',
+			} );
+
+			fireEvent.change( lightnessSlider, { target: { value: 40 } } );
+			await waitFor( () =>
+				expect( lightnessSlider ).toHaveValue( '40' )
+			);
+			expect( onChange ).toHaveBeenCalledTimes( 1 );
+
+			fireEvent.change( lightnessSlider, { target: { value: 30 } } );
+			await waitFor( () =>
+				expect( lightnessSlider ).toHaveValue( '30' )
+			);
+			expect( onChange ).toHaveBeenCalledTimes( 2 );
+
+			fireEvent.change( lightnessSlider, { target: { value: 0 } } );
+			await waitFor( () => expect( lightnessSlider ).toHaveValue( '0' ) );
+			expect( onChange ).toHaveBeenCalledTimes( 3 );
+			onChange.mockClear();
+
+			const hueSlider = screen
+				.getAllByRole( 'slider', { name: 'Hue' } )
+				.at( -1 )!;
+			fireEvent.change( hueSlider, { target: { value: 90 } } );
+			expect( onChange ).not.toHaveBeenCalled();
+		} );
+
 		it( 'should reset saturation to 0 when a mid-gray is entered via hex input', async () => {
 			const user = userEvent.setup();
 
@@ -501,6 +597,412 @@ describe( 'ColorPicker', () => {
 		} );
 	} );
 
+	describe( 'visual picker', () => {
+		const mockInteractiveBounds = ( interactive: HTMLElement ) => {
+			interactive.getBoundingClientRect = () =>
+				( {
+					left: 0,
+					top: 0,
+					width: 100,
+					height: 100,
+					right: 100,
+					bottom: 100,
+					x: 0,
+					y: 0,
+					toJSON: () => ( {} ),
+				} ) as DOMRect;
+		};
+
+		it( 'preserves saturation when keyboard-navigating to black in controlled mode', () => {
+			const onChange = jest.fn();
+
+			// Saturated red with mid brightness — HSVA s stays high at black.
+			const { container } = render(
+				<ControlledColorPicker
+					onChange={ onChange }
+					enableAlpha={ false }
+					initialColor="#cc0000"
+				/>
+			);
+
+			const colorSlider = screen.getByRole( 'slider', { name: 'Color' } );
+			// Pointer is a presentational sibling; no accessible role.
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+			const pointer = container.querySelector(
+				'.react-colorful__saturation-pointer'
+			) as HTMLElement;
+			expect( pointer ).toBeTruthy();
+
+			const leftBefore = pointer.style.left;
+			expect( parseFloat( leftBefore ) ).toBeGreaterThan( 50 );
+
+			// react-colorful reads which/keyCode (37–40), not event.key.
+			// From v≈80, 5% steps need at least 16 ArrowDown presses to reach black.
+			colorSlider.focus();
+			for ( let i = 0; i < 20; i++ ) {
+				fireEvent.keyDown( colorSlider, {
+					key: 'ArrowDown',
+					keyCode: 40,
+					which: 40,
+				} );
+			}
+
+			expect( pointer ).toHaveStyle( { top: '100%', left: leftBefore } );
+			expect( onChange ).toHaveBeenLastCalledWith( '#000000' );
+		} );
+
+		it( 'preserves saturation when pointer selects black in controlled mode', () => {
+			const onChange = jest.fn();
+
+			const { container } = render(
+				<ControlledColorPicker
+					onChange={ onChange }
+					enableAlpha={ false }
+					initialColor="#cc0000"
+				/>
+			);
+
+			const interactive = screen.getByRole( 'slider', { name: 'Color' } );
+			mockInteractiveBounds( interactive );
+
+			// Pointer is a presentational sibling; no accessible role.
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+			const pointer = container.querySelector(
+				'.react-colorful__saturation-pointer'
+			) as HTMLElement;
+			expect( parseFloat( pointer.style.left ) ).toBeGreaterThan( 50 );
+
+			// Click the bottom of the saturation surface (v = 0) at ~80% saturation.
+			fireEvent.mouseDown( interactive, {
+				buttons: 1,
+				pageX: 80,
+				pageY: 100,
+				clientX: 80,
+				clientY: 100,
+			} );
+
+			expect( pointer ).toHaveStyle( { top: '100%' } );
+			// Lossy HSVA→HSLA→HSVA sync would snap left to 0%.
+			expect( pointer ).not.toHaveStyle( { left: '0%' } );
+			expect( parseFloat( pointer.style.left ) ).toBeGreaterThan( 50 );
+			expect( onChange ).toHaveBeenLastCalledWith( '#000000' );
+		} );
+
+		it( 'preserves saturation after a full pointer drag to black then HSL hue edit', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const { container } = render(
+				<ControlledColorPicker
+					onChange={ onChange }
+					enableAlpha={ false }
+					initialColor="#cc0000"
+				/>
+			);
+
+			const interactive = screen.getByRole( 'slider', { name: 'Color' } );
+			mockInteractiveBounds( interactive );
+
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+			const pointer = container.querySelector(
+				'.react-colorful__saturation-pointer'
+			) as HTMLElement;
+
+			// Full pointer lifecycle so isPointerInteractingRef is exercised
+			// and prevHslaRef stays in sync across mid-gesture parent updates.
+			fireEvent.pointerDown( interactive, {
+				pointerId: 1,
+				buttons: 1,
+				pageX: 80,
+				pageY: 50,
+				clientX: 80,
+				clientY: 50,
+			} );
+			fireEvent.mouseDown( interactive, {
+				buttons: 1,
+				pageX: 80,
+				pageY: 50,
+				clientX: 80,
+				clientY: 50,
+			} );
+			fireEvent.mouseMove( interactive, {
+				buttons: 1,
+				pageX: 80,
+				pageY: 100,
+				clientX: 80,
+				clientY: 100,
+			} );
+			fireEvent.pointerUp( interactive, {
+				pointerId: 1,
+				buttons: 0,
+				pageX: 80,
+				pageY: 100,
+				clientX: 80,
+				clientY: 100,
+			} );
+			fireEvent.mouseUp( interactive, {
+				buttons: 0,
+				pageX: 80,
+				pageY: 100,
+				clientX: 80,
+				clientY: 100,
+			} );
+
+			expect( pointer ).toHaveStyle( { top: '100%' } );
+			expect( parseFloat( pointer.style.left ) ).toBeGreaterThan( 50 );
+			expect( onChange ).toHaveBeenLastCalledWith( '#000000' );
+			const leftAfterDrag = pointer.style.left;
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			await user.selectOptions( formatSelector, 'hsl' );
+
+			const hueSlider = screen
+				.getAllByRole( 'slider', { name: 'Hue' } )
+				.at( -1 )!;
+			fireEvent.change( hueSlider, { target: { value: 200 } } );
+			await waitFor( () => expect( hueSlider ).toHaveValue( '200' ) );
+
+			// Stale prevHslaRef would mistake the hue edit for a saturation
+			// change and snap the pointer to left: 0%.
+			expect( pointer ).toHaveStyle( {
+				top: '100%',
+				left: leftAfterDrag,
+			} );
+		} );
+
+		it( 'places the pointer at s:0 when HSL lightness is set to white', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const { container } = render(
+				<ControlledColorPicker
+					onChange={ onChange }
+					enableAlpha={ false }
+					initialColor="#cc0000"
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			await user.selectOptions( formatSelector, 'hsl' );
+
+			const lightnessSlider = screen.getByRole( 'slider', {
+				name: 'Lightness',
+			} );
+			fireEvent.change( lightnessSlider, { target: { value: 100 } } );
+			await waitFor( () =>
+				expect( lightnessSlider ).toHaveValue( '100' )
+			);
+			expect( onChange ).toHaveBeenLastCalledWith( '#ffffff' );
+
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+			const pointer = container.querySelector(
+				'.react-colorful__saturation-pointer'
+			) as HTMLElement;
+			// Only v:100,s:0 is white; a preserved chromatic s leaves the
+			// pointer at top-right and makes the next key step jump to red.
+			expect( pointer ).toHaveStyle( { top: '0%', left: '0%' } );
+
+			const colorSlider = screen.getByRole( 'slider', { name: 'Color' } );
+			colorSlider.focus();
+			fireEvent.keyDown( colorSlider, {
+				key: 'ArrowDown',
+				keyCode: 40,
+				which: 40,
+			} );
+
+			expect( onChange ).not.toHaveBeenLastCalledWith( '#f50000' );
+			expect( onChange ).not.toHaveBeenLastCalledWith( '#cc0000' );
+		} );
+
+		it( 'preserves visual saturation when HSL hue is edited at black', async () => {
+			const user = userEvent.setup();
+
+			const { container } = render(
+				<ControlledColorPicker
+					enableAlpha={ false }
+					initialColor="#cc0000"
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			await user.selectOptions( formatSelector, 'hsl' );
+
+			const lightnessSlider = screen.getByRole( 'slider', {
+				name: 'Lightness',
+			} );
+			fireEvent.change( lightnessSlider, { target: { value: 0 } } );
+			await waitFor( () => expect( lightnessSlider ).toHaveValue( '0' ) );
+
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+			const pointer = container.querySelector(
+				'.react-colorful__saturation-pointer'
+			) as HTMLElement;
+			const leftBefore = pointer.style.left;
+			expect( parseFloat( leftBefore ) ).toBeGreaterThan( 50 );
+			expect( pointer ).toHaveStyle( { top: '100%' } );
+
+			const hueSlider = screen
+				.getAllByRole( 'slider', { name: 'Hue' } )
+				.at( -1 )!;
+			fireEvent.change( hueSlider, { target: { value: 200 } } );
+			await waitFor( () => expect( hueSlider ).toHaveValue( '200' ) );
+
+			expect( pointer ).toHaveStyle( {
+				top: '100%',
+				left: leftBefore,
+			} );
+		} );
+
+		it( 'keeps the white visual coordinate at s:0 when HSL hue is edited', async () => {
+			const user = userEvent.setup();
+
+			const { container } = render(
+				<ControlledColorPicker
+					enableAlpha={ false }
+					initialColor="#cc0000"
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			await user.selectOptions( formatSelector, 'hsl' );
+
+			const lightnessSlider = screen.getByRole( 'slider', {
+				name: 'Lightness',
+			} );
+			fireEvent.change( lightnessSlider, { target: { value: 100 } } );
+			await waitFor( () =>
+				expect( lightnessSlider ).toHaveValue( '100' )
+			);
+
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+			const pointer = container.querySelector(
+				'.react-colorful__saturation-pointer'
+			) as HTMLElement;
+			expect( pointer ).toHaveStyle( { top: '0%', left: '0%' } );
+
+			const hueSlider = screen
+				.getAllByRole( 'slider', { name: 'Hue' } )
+				.at( -1 )!;
+			fireEvent.change( hueSlider, { target: { value: 200 } } );
+			await waitFor( () => expect( hueSlider ).toHaveValue( '200' ) );
+
+			expect( pointer ).toHaveStyle( { top: '0%', left: '0%' } );
+		} );
+
+		it( 'uses the HSL hue when leaving white through the visual surface', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			render(
+				<ControlledColorPicker
+					onChange={ onChange }
+					enableAlpha={ false }
+					initialColor="#cc0000"
+				/>
+			);
+
+			await user.selectOptions( screen.getByRole( 'combobox' ), 'hsl' );
+			const lightnessSlider = screen.getByRole( 'slider', {
+				name: 'Lightness',
+			} );
+			fireEvent.change( lightnessSlider, { target: { value: 100 } } );
+
+			const hueSlider = screen
+				.getAllByRole( 'slider', { name: 'Hue' } )
+				.at( -1 )!;
+			fireEvent.change( hueSlider, { target: { value: 200 } } );
+			await waitFor( () => expect( hueSlider ).toHaveValue( '200' ) );
+
+			const colorSlider = screen.getByRole( 'slider', { name: 'Color' } );
+			mockInteractiveBounds( colorSlider );
+			onChange.mockClear();
+			fireEvent.mouseDown( colorSlider, {
+				buttons: 1,
+				pageX: 50,
+				pageY: 0,
+				clientX: 50,
+				clientY: 0,
+			} );
+
+			expect( onChange ).toHaveBeenLastCalledWith( '#80d4ff' );
+		} );
+
+		it( 'uses the HSL hue when leaving a mid-gray through the visual surface', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			render(
+				<ControlledColorPicker
+					onChange={ onChange }
+					enableAlpha={ false }
+					initialColor="#808080"
+				/>
+			);
+
+			await user.selectOptions( screen.getByRole( 'combobox' ), 'hsl' );
+			const hueSlider = screen
+				.getAllByRole( 'slider', { name: 'Hue' } )
+				.at( -1 )!;
+			fireEvent.change( hueSlider, { target: { value: 200 } } );
+			await waitFor( () => expect( hueSlider ).toHaveValue( '200' ) );
+
+			const colorSlider = screen.getByRole( 'slider', { name: 'Color' } );
+			mockInteractiveBounds( colorSlider );
+			onChange.mockClear();
+			fireEvent.mouseDown( colorSlider, {
+				buttons: 1,
+				pageX: 50,
+				pageY: 50,
+				clientX: 50,
+				clientY: 50,
+			} );
+
+			expect( onChange ).toHaveBeenLastCalledWith( '#416c81' );
+		} );
+
+		it( 'updates visual saturation when HSL saturation is edited at black', async () => {
+			const user = userEvent.setup();
+
+			const { container } = render(
+				<ControlledColorPicker
+					enableAlpha={ false }
+					initialColor="#cc0000"
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			await user.selectOptions( formatSelector, 'hsl' );
+
+			const lightnessSlider = screen.getByRole( 'slider', {
+				name: 'Lightness',
+			} );
+			fireEvent.change( lightnessSlider, { target: { value: 0 } } );
+			await waitFor( () => expect( lightnessSlider ).toHaveValue( '0' ) );
+
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+			const pointer = container.querySelector(
+				'.react-colorful__saturation-pointer'
+			) as HTMLElement;
+			expect( pointer ).toHaveStyle( { top: '100%' } );
+			expect( parseFloat( pointer.style.left ) ).toBeGreaterThan( 50 );
+
+			const saturationSlider = screen.getByRole( 'slider', {
+				name: 'Saturation',
+			} );
+			fireEvent.change( saturationSlider, {
+				target: { value: 25 },
+			} );
+			await waitFor( () =>
+				expect( saturationSlider ).toHaveValue( '25' )
+			);
+
+			expect( pointer ).toHaveStyle( {
+				top: '100%',
+				left: '25%',
+			} );
+		} );
+	} );
+
 	describe.each( [
 		[ 'hsl', 'HSL' ],
 		[ 'rgb', 'RGB' ],

package/src/color-picker/types.ts

@@ -59,6 +59,8 @@ export interface PickerProps {
 	hsla: HslaColor;
 	enableAlpha: boolean;
 	onChange: ( nextHsla: HslaColor ) => void;
+	onInteractionStart?: () => void;
+	onInteractionEnd?: () => void;
 }
 
 export interface ColorInputProps {

package/src/combobox-control/style.scss

@@ -33,7 +33,7 @@ input.components-combobox-control__input[type="text"] {
 }
 
 .components-combobox-control__suggestions-container {
-	@include input-control($components-color-accent);
+	@include input-control;
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-start;
@@ -41,7 +41,7 @@ input.components-combobox-control__input[type="text"] {
 	padding: 0;
 
 	&:focus-within {
-		@include input-style__focus($components-color-accent);
+		@include input-style__focus;
 	}
 
 	.components-spinner {

package/src/confirm-dialog/component.tsx

@@ -15,8 +15,7 @@ import { Flex } from '../flex';
 import Button from '../button';
 import { Text } from '../text';
 import { VStack } from '../v-stack';
-import * as styles from './styles';
-import { useCx } from '../utils/hooks/use-cx';
+import styles from './style.module.scss';
 
 const UnconnectedConfirmDialog = (
 	props: WordPressComponentProps< ConfirmDialogProps, 'div', false >,
@@ -33,8 +32,7 @@ const UnconnectedConfirmDialog = (
 		...otherProps
 	} = useContextSystem( props, 'ConfirmDialog' );
 
-	const cx = useCx();
-	const wrapperClassName = cx( styles.wrapper );
+	const wrapperClassName = styles.wrapper;
 	const cancelButtonRef = useRef< HTMLButtonElement >( null );
 	const confirmButtonRef = useRef< HTMLButtonElement >( null );
 

package/src/confirm-dialog/stories/index.story.tsx

@@ -36,7 +36,7 @@ const meta: Meta< typeof ConfirmDialog > = {
 		componentStatus: {
 			status: 'recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by `AlertDialog` in `@wordpress/ui`, but continue using for now.',
+			notes: 'Will be superseded by [`AlertDialog`](?path=/docs/design-system-components-alertdialog--docs) in `@wordpress/ui`, but continue using for now.',
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 	},

package/src/confirm-dialog/style.module.scss

@@ -0,0 +1,7 @@
+@use "@wordpress/base-styles/z-index" as *;
+
+// Match the previous Emotion `&&` specificity so this rule continues to
+// override the Modal overlay's default z-index regardless of source order.
+.wrapper.wrapper {
+	z-index: z-index(".components-confirm-dialog");
+}

package/src/confirm-dialog/test/index.tsx

@@ -8,6 +8,7 @@ import userEvent from '@testing-library/user-event';
  * Internal dependencies
  */
 import { ConfirmDialog } from '..';
+import styles from '../style.module.scss';
 
 const noop = () => {};
 
@@ -25,6 +26,10 @@ describe( 'Confirm', () => {
 				const elementsTexts = [ 'Are you sure?', 'OK', 'Cancel' ];
 
 				expect( dialog ).toBeInTheDocument();
+				expect( dialog ).toHaveClass( 'components-confirm-dialog' );
+				// Disable reason: Semantic queries can't reach the overlay.
+				// eslint-disable-next-line testing-library/no-node-access
+				expect( dialog.parentElement ).toHaveClass( styles.wrapper );
 
 				elementsTexts.forEach( ( txt ) => {
 					const el = screen.getByText( txt );

package/src/content-editable-control/README.md

@@ -0,0 +1,88 @@
+# ContentEditableControl
+
+<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. -->
+
+🔒 This component is locked as a [private API](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-private-apis/). We do not yet recommend using this outside of the Gutenberg project.
+
+<p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-contenteditablecontrol--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>
+
+A presentational `contentEditable` form control: a labeled editable element
+rendered with the chrome (`BaseControl` + label) shared by the other form
+controls in the package.
+
+Unlike the in-canvas `RichText` from `@wordpress/block-editor`, this control
+is intended for standalone form fields (DataForms, sidebar inputs, etc.).
+It is deliberately **presentational only** and has no `@wordpress/rich-text`
+dependency: the editable behavior (value, formatting, keyboard shortcuts)
+and any focus/selection tracking are owned by the consumer, which wires them
+through the forwarded ref and native event props (see the richtext DataForm
+control in `@wordpress/dataviews` for the canonical assembly).
+
+```jsx
+// The rich-text "assembly" lives in the consumer.
+<ContentEditableControl
+    label="Caption"
+    ref={ mergedRef }
+    onFocus={ onEditableFocus }
+    onBlur={ onEditableBlur }
+/>
+```
+
+## Props
+
+### `className`
+
+ - Type: `string`
+ - Required: No
+
+### `disabled`
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
+
+Whether the field is non-editable. A disabled field is not
+`contentEditable` (so it is neither focusable nor editable) and exposes
+`aria-disabled` to assistive technology.
+
+### `hideLabelFromVision`
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
+
+If true, the label will only be visible to screen readers.
+
+### `help`
+
+ - Type: `ReactNode`
+ - Required: No
+
+Additional description for the control.
+
+Only use for meaningful description or instructions for the control. An element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute.
+
+### `label`
+
+ - Type: `string`
+ - Required: Yes
+
+Label text for the control.
+
+### `placeholder`
+
+ - Type: `string`
+ - Required: No
+
+Placeholder text shown while the element has no content. Exposed to
+assistive technology via `aria-placeholder` and drawn by the stylesheet
+when the element is empty.
+
+### `required`
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
+
+Whether the field is required. Exposed to assistive technology via
+`aria-required`.

package/src/content-editable-control/docs-manifest.json

@@ -0,0 +1,5 @@
+{
+	"$schema": "../../schemas/docs-manifest.json",
+	"displayName": "ContentEditableControl",
+	"filePath": "./index.tsx"
+}