Disabled: migrate to TypeScript (#42708)

* refactor storybook

* convert to typescript

* fix ComponentProps

* add changelog.

* fix imports order

* use WordPressComponentProps.

* add example

* Update packages/components/src/disabled/types.ts

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

* Update packages/components/src/disabled/index.tsx

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

* Update packages/components/src/disabled/index.tsx

Co-authored-by: Petter Walbø Johnsgård <petter@dekode.no>

* Update packages/components/src/disabled/index.tsx

Co-authored-by: Petter Walbø Johnsgård <petter@dekode.no>

* Remove unused imports.

* Rewrite to Testing-library `will disable all fields`

* Rewrite to Testing-library `should cleanly un-disable via reconciliation`

* use rerender

* refactor test.

* replace react-dom/test-utils to testing-library.

* remove unnecessary MutationObserver stab.
@see #20766 #20514

* Convert to typescript.

* add story for contentEditable

* add control settings.

* fix changelog

* Update packages/components/CHANGELOG.md

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

* Omit ref.

* avoid querying

* rename div.

* test before rerender

* Simplify

* Update packages/components/src/disabled/test/index.tsx

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

* test for sneaky DOM manipulation

* Fix `isDisabled` so that it keeps its value even if it is changed.

* add default args

* Revert "Fix `isDisabled` so that it keeps its value even if it is changed."

This reverts commit 28820f0.

* Update packages/components/src/disabled/test/index.tsx

* Update packages/components/CHANGELOG.md

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
Co-authored-by: Petter Walbø Johnsgård <petter@dekode.no>

packages/components/CHANGELOG.md

@@ -40,6 +40,7 @@
 -   `contextConnect`: Refactor away from `_.uniq()` ([#43330](https://github.com/WordPress/gutenberg/pull/43330/)).
 -   `ColorPalette`: Refactor away from `_.uniq()` ([#43330](https://github.com/WordPress/gutenberg/pull/43330/)).
 -   `Guide`: Refactor away from `_.times()` ([#43374](https://github.com/WordPress/gutenberg/pull/43374/)).
+-   `Disabled`: Convert to TypeScript ([#42708](https://github.com/WordPress/gutenberg/pull/42708)).
 -   `Guide`: Update tests to use `@testing-library/react` ([#43380](https://github.com/WordPress/gutenberg/pull/43380)).
 -   `Modal`: use `KeyboardEvent.code` instead of deprecated `KeyboardEvent.keyCode`. improve unit tests ([#43429](https://github.com/WordPress/gutenberg/pull/43429/)).
 -   `FocalPointPicker`: use `KeyboardEvent.code`, partially refactor tests to modern RTL and `user-event` ([#43441](https://github.com/WordPress/gutenberg/pull/43441/)).

packages/components/src/disabled/index.tsx

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useDisabled } from '@wordpress/compose';
+import { createContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { StyledWrapper } from './styles/disabled-styles';
+import type { DisabledProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
+
+const Context = createContext< boolean >( false );
+const { Consumer, Provider } = Context;
+
+/**
+ * `Disabled` is a component which disables descendant tabbable elements and prevents pointer interaction.
+ *
+ * ```jsx
+ * import { Button, Disabled, TextControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyDisabled = () => {
+ * 	const [ isDisabled, setIsDisabled ] = useState( true );
+ *
+ * 	let input = <TextControl label="Input" onChange={ () => {} } />;
+ * 	if ( isDisabled ) {
+ * 		input = <Disabled>{ input }</Disabled>;
+ * 	}
+ *
+ * 	const toggleDisabled = () => {
+ * 		setIsDisabled( ( state ) => ! state );
+ * 	};
+ *
+ * 	return (
+ * 		<div>
+ * 			{ input }
+ * 			<Button variant="primary" onClick={ toggleDisabled }>
+ * 				Toggle Disabled
+ * 			</Button>
+ * 		</div>
+ * 	);
+ * };
+ * ```
+ */
+function Disabled( {
+	className,
+	children,
+	isDisabled = true,
+	...props
+}: Omit< WordPressComponentProps< DisabledProps, 'div' >, 'ref' > ) {
+	const ref = useDisabled();
+
+	if ( ! isDisabled ) {
+		return <Provider value={ false }>{ children }</Provider>;
+	}
+
+	return (
+		<Provider value={ true }>
+			<StyledWrapper
+				ref={ ref }
+				className={ classnames( className, 'components-disabled' ) }
+				{ ...props }
+			>
+				{ children }
+			</StyledWrapper>
+		</Provider>
+	);
+}
+
+Disabled.Context = Context;
+Disabled.Consumer = Consumer;
+
+export default Disabled;

packages/components/src/disabled/stories/index.tsx

@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Disabled from '../';
+import SelectControl from '../../select-control/';
+import TextControl from '../../text-control/';
+import TextareaControl from '../../textarea-control/';
+
+const meta: ComponentMeta< typeof Disabled > = {
+	title: 'Components/Disabled',
+	component: Disabled,
+	argTypes: {
+		as: { control: { type: null } },
+		children: { control: { type: null } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+
+export default meta;
+
+const Form = () => {
+	const [ textControlValue, setTextControlValue ] = useState( '' );
+	const [ textAreaValue, setTextAreaValue ] = useState( '' );
+	return (
+		<div>
+			<TextControl
+				label="Text Control"
+				value={ textControlValue }
+				onChange={ setTextControlValue }
+			/>
+			<TextareaControl
+				label="TextArea Control"
+				value={ textAreaValue }
+				onChange={ setTextAreaValue }
+			/>
+			<SelectControl
+				label="Select Control"
+				onChange={ () => {} }
+				options={ [
+					{ value: '', label: 'Select an option', disabled: true },
+					{ value: 'a', label: 'Option A' },
+					{ value: 'b', label: 'Option B' },
+					{ value: 'c', label: 'Option C' },
+				] }
+			/>
+		</div>
+	);
+};
+
+export const Default: ComponentStory< typeof Disabled > = ( args ) => {
+	return (
+		<Disabled { ...args }>
+			<Form />
+		</Disabled>
+	);
+};
+Default.args = {
+	isDisabled: true,
+};
+
+export const ContentEditable: ComponentStory< typeof Disabled > = ( args ) => {
+	return (
+		<Disabled { ...args }>
+			<div contentEditable tabIndex={ 0 }>
+				contentEditable
+			</div>
+		</Disabled>
+	);
+};
+ContentEditable.args = {
+	isDisabled: true,
+};