@plaudit/gutenberg-api-extensions 2.94.2 → 2.96.0

package/src/blocks/common-native-property-constructors.tsx

@@ -1,927 +0,0 @@
-import {
-	BaseControl,
-	ColorPalette,
-	DatePicker,
-	DateTimePicker,
-	Disabled,
-	RadioControl,
-	RangeControl,
-	SelectControl,
-	TextControl,
-	ToggleControl,
-	useBaseControlProps,
-	__experimentalToggleGroupControl as ToggleGroupControl
-} from "@wordpress/components";
-import {dispatch, select} from "@wordpress/data";
-import {useCallback, useMemo, useRef} from "@wordpress/element";
-import {applyFilters} from "@wordpress/hooks";
-
-import {
-	ExtendedPostPicker, ExtendedRadioControl, ImageControl, type ImageData,
-	ExtendedTextareaControl, MultiSelectControl, type Dict,
-	ProperLinkControl, SortableItemsControl, type PickableOptions,
-	FullSizeToggleControl, ToggleGroupControlOptionWithOptionalIcon, ExtendedTaxonomyPicker, ExtendedTermPicker, ExtendedUserPicker, FileControl
-} from "../controls";
-import {normalizePickableOptionsToObjects, normalizePickableOptionsToPairs} from "../controls/shared";
-import {recordCloneableDefaultValueForNode} from "./data-controller/utils";
-import {useSuspendableOptions} from "./hooks/useSuspendableOptions";
-import {makeToolsPanelContextValue, ToolsPanelContext} from "./layout/ToolsPanelContext";
-import {store as gutenbergApiExtensionsStore} from "../lib/gutenberg-api-extensions-state";
-import {clone} from "../lib/helpers";
-import {arrayIsNotEmpty, BlockName} from "../lib/useful-types";
-import type {CSNPControlComponentProps} from "./shared-internal-types";
-import type {GenericSimpleNativeProperty, HydratedSimpleNativeProperty, PDSimpleNativeProperty, SNPControlProps, SNPControlSlots} from "./simple-native-property-api";
-import {SNPFlexibleItemsListComponent} from "./SNPFlexibleItemsListComponent";
-import {SNPGroupComponent} from "./SNPGroupComponent";
-import {SNPListComponent} from "./SNPListComponent";
-
-import type {ComponentPropsWithoutRef, CSSProperties} from "react";
-import {
-	CSNPConfig, FlexibleItemsListPropertyConfig, getPropType, isObjectListPropertyConfig, isStringValuedToggleGroupCSNPConfig,
-	ObjectListPropertyConfig, PostPropertyCSNPConfig, RadioPropertyCSNPConfig, SelectPropertyCSNPConfig, ShareableSNPElements,
-	TaxonomyPropertyCSNPConfig, TermPropertyCSNPConfig, UserPropertyCSNPConfig
-} from "./csnp-api";
-
-export type OutsideHydrationInfo = {forLayeredStyles: boolean, blockName: BlockName};
-export function hydrateSimpleNativeProperty(
-	config: PDSimpleNativeProperty, parentPath: string, outsideHydrationInfo: OutsideHydrationInfo, parentTypes: string[]
-): HydratedSimpleNativeProperty {
-	const propPath = parentPath.length !== 0 ? parentPath + "." + config.name : config.name;
-	if (parentPath.length === 0) {
-		config = injectBlockSourcedDefault(config, outsideHydrationInfo.blockName);
-	}
-
-	config = applyFilters('plaudit.gutenbergApiExtensions.simpleNativeProperties.field', config, outsideHydrationInfo.blockName, propPath) as typeof config;
-	const res = recordCloneableDefaultValueForNode(typeof config.control === 'string'
-		? hydrateDesiccatedSimpleNativeProperty(config, propPath, outsideHydrationInfo, parentTypes) : config);
-	validateAndRecordPotentialStyleProperty(res, propPath, outsideHydrationInfo, parentTypes);
-	return res;
-}
-function validateAndRecordPotentialStyleProperty(
-	config: HydratedSimpleNativeProperty, propPath: string, {forLayeredStyles, blockName}: OutsideHydrationInfo, parentTypes: string[]
-) {
-	if ("styleProperty" in config && config.styleProperty !== undefined) {
-		if (parentTypes.includes('array')) {
-			console.error(`A SNP was configured with a styleProperty, but it is within an array-type SNP. This is unsupported`, "SNP in error:", config);
-		} else {
-			dispatch(gutenbergApiExtensionsStore)
-				.addOrUpdateExtraPropTransform(blockName, propPath, {propName: config.name, forLayeredStyles, styleProperty: config.styleProperty});
-		}
-	}
-}
-function injectBlockSourcedDefault(config: PDSimpleNativeProperty, blockName: BlockName): typeof config {
-	if (config.default === undefined) {
-		const existingAttr = select(gutenbergApiExtensionsStore).baselineBlockAttrs(blockName)?.attributes?.[config.name];
-		if (existingAttr && typeof existingAttr === 'object' && 'default' in existingAttr) {
-			if (existingAttr.default !== undefined) {
-				const expectedPropType = getPropType(config);
-				if (expectedPropType === 'array' ? Array.isArray(existingAttr.default) : (typeof existingAttr.default) === expectedPropType) {
-					return {...config, default: clone<any>(existingAttr.default)};
-				} else {
-					console.error('Encountered a preexisting default value on a block that does not overlap with the datatype for an SNP');
-				}
-			}
-		}
-	}
-	return config;
-}
-
-type PassthroughPropsType = Pick<PDSimpleNativeProperty, 'condition'|'name'|'label'|'required'>&{controlType: string, styleProperty?: string};
-function hydrateDesiccatedSimpleNativeProperty(
-	config: CSNPConfig, propPath: string, outsideHydrationInfo: OutsideHydrationInfo, parentTypes: string[]
-): HydratedSimpleNativeProperty {
-	const passthroughProps: PassthroughPropsType = {
-		condition: config.condition, label: config.label, name: config.name, required: config.required, controlType: config.control,
-		styleProperty: config.styleProperty
-	};
-	switch (config.control) {
-		case "colorPalette":
-			return {
-				type: 'string',
-				default: config.default,
-				alwaysStore: config.alwaysStore,
-				...passthroughProps,
-				validator: config.validator,
-				transformer: config.transformer,
-				control({value, onChange, slots: {Label, Messages}}) {
-					const resolvedOptions = useSuspendableOptions(config);
-					const {colors, valueToColor, colorToValue} = useMemo(() => {
-						const normalizedOptions = normalizePickableOptionsToObjects(resolvedOptions);
-						const options = normalizedOptions.map(opt => {
-							if (hasDefinedKey(opt, 'color') && CSS.supports('color', opt.color)) {
-								return opt;
-							} else if (CSS.supports('color', opt.value)) {
-								return {...opt, color: opt.value};
-							} else if (CSS.supports('color', '#' + opt.value)) {
-								return {...opt, color: '#' + opt.value};
-							} else {
-								console.error(`The color property was ${opt.color ? "invalid" : "not set"} and value could not be converted to a valid CSS color.`,
-									"The color will be displayed as transparent.", "Option in error:", opt);
-								return {...opt, color: 'transparent'};
-							}
-						});
-
-						return {
-							colors: options.map(({value, label = value, color}) => ({color, name: label})),
-							valueToColor: Object.fromEntries(options.map(opt => [opt.value, opt.color])) as Dict<CSSProperties['color']>,
-							colorToValue: Object.fromEntries(options.map(opt => [opt.color, opt.value])) as Record<NonNullable<CSSProperties['color']>, string>
-						};
-					}, [resolvedOptions]);
-
-					const safeOnChange = useCallback((v: string|undefined) => onChange(v ? colorToValue[v] : undefined), [colorToValue, onChange]);
-
-					const {baseControlProps, controlProps} = useBaseControlProps({label: <Label />, help: config.help});
-					return <BaseControl __nextHasNoMarginBottom {...baseControlProps}>
-						<ColorPalette
-							{...config.component}
-							{...controlProps}
-							value={value ? valueToColor[value] : undefined}
-							onChange={safeOnChange}
-							colors={colors}
-							clearable={config.clearable ?? false}
-							disableCustomColors={config.allowCustom !== true}
-							__experimentalIsRenderedInSidebar={true}
-						/>
-						<Messages />
-					</BaseControl>;
-				}
-			};
-		case "constant":
-			return {
-				type: config.type as any,
-				default: config.default,
-				alwaysStore: true,
-				...passthroughProps,
-				validator: config.validator,
-				transformer: config.transformer as any,
-				control({value, slots: {Label, Messages}}: SNPControlProps<any>) {
-					const {current: voidChangeHandler} = useRef(() => {});
-					return <Disabled>
-						<TextControl __nextHasNoMarginBottom __next40pxDefaultSize {...config.component} value={value} onChange={voidChangeHandler} label={<Label />} help={config.help} disabled={true} />
-						<Messages />
-					</Disabled>;
-				}
-			};
-		case "date":
-			return {
-				type: 'number',
-				default: config.default,
-				alwaysStore: config.alwaysStore,
-				...passthroughProps,
-				validator: config.validator,
-				transformer: config.transformer,
-				control({value, onChange, slots: {Label, Messages}}) {
-					const safeOnChange = useCallback((v: string|null) => onChange(v === null ? undefined : new Date(v).getTime()), [onChange]);
-					return <BaseControl __nextHasNoMarginBottom id="" label={<Label />} help={config.help}>
-						{config.time
-							? <DateTimePicker {...config.component} currentDate={value ?? null} onChange={safeOnChange} />
-							: <DatePicker {...config.component} currentDate={value ?? null} onChange={safeOnChange} />
-						}
-						<Messages />
-					</BaseControl>;
-				}
-			}
-		case "file":
-			return {
-				type: 'number',
-				alwaysStore: config.alwaysStore,
-				default: config.default,
-				...passthroughProps,
-				validator: config.validator,
-				transformer: config.transformer,
-				control({value, onChange, slots: {Label}}) {
-					return <FileControl label={<Label />} help={config.help} onChange={onChange} value={value} allowedTypes={config.allowedTypes} />;
-				}
-			};
-		case "group": {
-			registerPlainTextLabelRequiredMarker("post", " > .components-tools-panel > .components-tools-panel-header > *");
-			const currentTypes = parentTypes.toSpliced(parentTypes.length - 1, 0, 'object');
-			const hydratedProperties = (config.fields ?? [])
-				.map(property => hydrateSimpleNativeProperty(property, propPath, outsideHydrationInfo, currentTypes));
-			if (config.default !== undefined) {
-				if (parentTypes.length !== 0) {
-					console.error("Non-root groups should not have default values set.",
-						"The resulting behavior is undefined and almost guaranteed to break.");
-				} else if (hydratedProperties.some(prop => prop.name in config.default!)) {
-					console.error("Groups should not have default values that conflict with their contained fields set.",
-						"The resulting behavior is undefined and almost guaranteed to break.");
-				}
-			}
-			const actualDefaultValues: {[key in string]: unknown} = {};
-			if (config.interface === 'toolsPanel') {
-				for (const hydratedProperty of hydratedProperties) {
-					actualDefaultValues[hydratedProperty.name] = hydratedProperty.default;
-					hydratedProperty.default = undefined;
-					recordCloneableDefaultValueForNode(hydratedProperty, true);
-				}
-			}
-			return {
-				type: 'object',
-				alwaysStore: config.alwaysStore,
-				default: config.default ?? {},
-				children: hydratedProperties,
-				branching: config.interface === 'toolsPanel',
-				...passthroughProps,
-				validator: config.validator,
-				transformer: config.transformer,
-				control({value, onChange, slots}: SNPControlProps<Dict<any>>) {
-					return <ToolsPanelContext.Provider value={makeToolsPanelContextValue(actualDefaultValues)}>
-						<SNPGroupComponent config={config} hydratedProperties={hydratedProperties} onChange={onChange} value={value} {...slots} />
-					</ToolsPanelContext.Provider>;
-				}
-			};
-		}
-		case "image":
-			return {
-				type: 'object',
-				alwaysStore: config.alwaysStore,
-				default: undefined,
-				...passthroughProps,
-				validator: config.validator,
-				transformer: config.transformer,
-				control({value, onChange, slots}: SNPControlProps<ImageData>) {
-					return <ImageControl includeFocalPointPicker={config.includeFocalPointPicker} storage={config.storage} label={config.label} help={config.help} onChange={onChange} value={value} {...slots} />;
-				}
-			} as GenericSimpleNativeProperty<ImageData, 'object'>;
-		case "link":
-			return {
-				type: 'object',
-				default: config.default,
-				alwaysStore: config.alwaysStore,
-				...passthroughProps,
-				validator: config.validator,
-				transformer: config.transformer,
-				control({value, onChange, slots: {Label, Messages}}) {
-					return <>
-						<ProperLinkControl
-							{...config.component}
-							hasRichPreviews
-							hasTextControl
-							help={config.help}
-							label={<Label />}
-							onChange={onChange}
-							settings={config.settings === false || config.settings === undefined ? false : (config.settings === true ? ProperLinkControl.DEFAULT_LINK_SETTINGS : config.settings)}
-							value={value}
-						/>
-						<Messages />
-					</>;
-				}
-			};
-		case "list": {
-			const sharedProps: ShareableSNPElements<'array'> = {...passthroughProps, type: 'array', alwaysStore: config.alwaysStore};
-			switch (config.itemType) {
-				case undefined:
-				case "string":
-					return {
-						...sharedProps,
-						default:     config.default,
-						type:        'array',
-						validator:   config.validator,
-						transformer: config.transformer,
-						control({value, onChange, slots}) {
-							const children = useCallback((datum: any, onDatumChange: (datum: any) => void) => {
-								return <TextControl {...config.listComponent} __nextHasNoMarginBottom __next40pxDefaultSize value={datum} onChange={onDatumChange} />;
-							}, [config.listComponent]);
-							return <SortableItemsControl {...config.component} {...slots}
-							                             value={value} onChange={onChange} min={config.min} max={config.max} label={config.label}
-							                             help={config.help} emptyValue={config.emptyValue ?? ''} children={children}
-							/>;
-						}
-					};
-				case "float":
-				case "int":
-				case "integer":
-					return {
-						...sharedProps,
-						default:     config.default,
-						type:        'array',
-						validator:   config.validator,
-						transformer: config.transformer,
-						control({value, onChange, slots}) {
-							const children = useCallback((datum: any, onDatumChange: (datum: any) => void) => {
-								return <NumberLikeListTextControl listComponent={config.listComponent} datum={datum} itemType={config.itemType}
-								                                  onDatumChange={onDatumChange} />;
-							}, [config.listComponent, config.itemType]);
-							return <SortableItemsControl {...config.component} {...slots}
-							                             value={value} onChange={onChange} min={config.min} max={config.max} label={config.label}
-							                             help={config.help} emptyValue={config.emptyValue ?? 0} children={children}
-							/>;
-						}
-					};
-				default: {
-					const currentTypes = parentTypes.toSpliced(parentTypes.length - 1, 0, 'array');
-					if (isObjectListPropertyConfig(config)) {
-						const hydratedProperties = config.itemType
-							.map(property => hydrateSimpleNativeProperty(property, propPath, outsideHydrationInfo, currentTypes));
-						const def = config.default ?? [];
-						return {
-							...sharedProps,
-							children:    hydratedProperties,
-							default:     def, // This type-checks, but directly inlining the value doesn't
-							validator:   config.validator,
-							transformer: config.transformer,
-							control({value, onChange, slots}) {
-								return <SNPListComponent config={config as ObjectListPropertyConfig} onChange={onChange} value={value}
-								                         hydratedProperties={hydratedProperties} {...slots} />;
-							}
-						}
-					} else {
-						const sharedProperties = config.sharedProperties;
-						const completedItemTypes = sharedProperties?.length
-							? Object.fromEntries(Object.entries(config.itemType)
-								.map(([key, v]) => [key, {...v, properties: [...sharedProperties, ...v.properties]}]))
-							: config.itemType;
-						const availableTypes = Object.entries(completedItemTypes)
-							.map(([value, {label}]) => ({value, label}));
-						if (!arrayIsNotEmpty(availableTypes)) {
-							return invalidConfigMessageControl(config, passthroughProps, "Flexible Items lists must defined at least one item type.");
-						}
-
-						const invalidFlexibleItemDefinition = Object.values(completedItemTypes)
-							.find(({properties}) => properties.some(property => property.name === 'type'));
-						if (invalidFlexibleItemDefinition) {
-							return invalidConfigMessageControl(config, passthroughProps, "Flexible item definitions CANNOT include a property named 'type'");
-						}
-						const hydratedProperties = Object.fromEntries(
-							Object.entries(completedItemTypes)
-								.map(([itemType, {properties}]) => {
-									return [itemType, properties
-										.map(property => hydrateSimpleNativeProperty(property, propPath, outsideHydrationInfo, currentTypes))]
-								})
-						);
-						const emptyValues = Object.fromEntries(
-							Object.entries(completedItemTypes).map(([itemType, {emptyValue}]) => {
-								return [itemType, {...emptyValue, type: itemType}];
-							}));
-						const def = config.default ?? [];
-						return {
-							...sharedProps,
-							children:    hydratedProperties,
-							default:     def, // This type-checks, but directly inlining the value doesn't
-							validator:   config.validator,
-							transformer: config.transformer,
-							control({value, onChange, slots}) {
-								return <SNPFlexibleItemsListComponent
-									config={config as FlexibleItemsListPropertyConfig} onChange={onChange} value={value} emptyValues={emptyValues}
-									hydratedProperties={hydratedProperties} availableTypes={availableTypes} {...slots}
-								/>;
-							}
-						}
-					}
-				}
-			}
-		}
-		case "message":
-			return {
-				type: 'string',
-				default: config.default,
-				alwaysStore: false,
-				...passthroughProps,
-				validator: config.validator,
-				transformer: config.transformer as any,
-				control({value}: SNPControlProps<string>) {
-					const lines = useMemo(() => {
-						if (value && /\r?\n/.exec(value)) {
-							// eslint-disable-next-line react/jsx-key -- random <br /> elements don't need a key
-							return value.split(/\r?\n/g).flatMap(line => [<br />, line]).slice(1);
-						}
-						return value;
-					}, [value]);
-					return <Disabled children={lines} />;
-				}
-			};
-		case "number":
-			return {
-				type: 'number',
-				default: config.default,
-				alwaysStore: config.alwaysStore,
-				...passthroughProps,
-				validator: config.validator,
-				transformer: config.transformer,
-				control({value, onChange, slots: {Label, Messages}}) {
-					const safeOnChange = useCallback((v: string) => onChange(float ? parseFloat(v) : parseInt(v)), [onChange]);
-					const float = config.float || config.step === 'any'
-						|| (config.min !== undefined && !Number.isInteger(config.min))
-						|| (config.max !== undefined && !Number.isInteger(config.max))
-						|| (config.step !== undefined && !Number.isInteger(config.step));
-					return <>
-						<TextControl {...config.component}
-						    __nextHasNoMarginBottom __next40pxDefaultSize
-							type="number" value={value ?? ''} min={config.min} max={config.max} step={config.step ?? (float ? "any" : undefined)}
-							onChange={safeOnChange} label={<Label />} help={config.help} placeholder={config.placeholder}
-						/>
-						<Messages />
-					</>;
-				}
-			};
-		case "post":
-			registerPlainTextLabelRequiredMarker("post", " > .components-form-token-field .components-form-token-field__label");
-			return hydratePostProperty(config);
-		case "radio":
-			return {
-				type: 'string',
-				enum: config.enum,
-				default: config.default,
-				alwaysStore: config.alwaysStore,
-				...passthroughProps,
-				validator: config.validator,
-				transformer: config.transformer,
-				control({value, onChange, slots}) {
-					return <PotentiallyExtendedRadioControl config={config} onChange={onChange} value={value} {...slots} />;
-				}
-			};
-		case "range":
-			registerPlainTextLabelRequiredMarker("range", " > .components-range-control > .components-base-control__field > .components-base-control__label");
-			return {
-				type: 'number',
-				enum: config.enum,
-				default: config.default,
-				alwaysStore: config.alwaysStore,
-				...passthroughProps,
-				validator: config.validator,
-				transformer: config.transformer,
-				control({value, onChange, slots: {Messages}}) {
-					return <>
-						<RangeControl
-							{...config.component} value={value} onChange={onChange} min={config.min} max={config.max} label={config.label}
-							step={config.step} help={config.help} __nextHasNoMarginBottom __next40pxDefaultSize
-						/>
-						<Messages />
-					</>;
-				}
-			};
-		case "select":
-			return hydrateSelectProperty(config);
-		case "taxonomy":
-			return hydrateTaxonomyProperty(config);
-		case "term":
-			return hydrateTermProperty(config);
-		case "textarea":
-			return {
-				type: 'string',
-				default: config.default,
-				alwaysStore: config.alwaysStore,
-				...passthroughProps,
-				validator: config.validator,
-				transformer: config.transformer,
-				control({value, onChange, slots}) {
-					return <ExtendedTextareaControl {...config} value={value} onChange={onChange} {...slots} />;
-				}
-			};
-		case "text":
-			return {
-				type: 'string',
-				default: config.default,
-				alwaysStore: config.alwaysStore,
-				...passthroughProps,
-				validator: config.validator,
-				transformer: config.transformer,
-				control({value, onChange, slots: {Label, Messages}}) {
-					return <>
-						<TextControl {...config.component} __nextHasNoMarginBottom __next40pxDefaultSize value={value ?? ''}
-						             onChange={onChange} label={<Label />} help={config.help} placeholder={config.placeholder} />
-						<Messages />
-					</>;
-				}
-			};
-		case "toggle":
-			registerPlainTextLabelRequiredMarker("toggle", ToggleGroupControlLabelSelector);
-			return {
-				type: 'boolean',
-				default: config.default,
-				alwaysStore: config.alwaysStore,
-				...passthroughProps,
-				validator: config.validator,
-				transformer: config.transformer,
-				control({value, onChange, slots: {Label, Messages}}) {
-					const switchCfg = useMemo(() => config.switch ?? {}, [config.switch]);
-					if (switchCfg.small === true) {
-						return <>
-							<ToggleControl {...config.component as Partial<ComponentPropsWithoutRef<typeof ToggleControl>>}
-							               __nextHasNoMarginBottom checked={value} onChange={onChange} label={<Label />} help={config.help} />
-							<Messages />
-						</>;
-					} else {
-						return <>
-							<FullSizeToggleControl
-								componentConfig={config.component as Partial<ComponentPropsWithoutRef<typeof ToggleGroupControl>>} label={config.label} help={config.help}
-								onChange={onChange} switchCfg={switchCfg} value={value} />
-							<Messages />
-						</>;
-					}
-				}
-			};
-		case "toggleGroup":
-			registerPlainTextLabelRequiredMarker("toggleGroup", ToggleGroupControlLabelSelector);
-			if (isStringValuedToggleGroupCSNPConfig(config)) {
-				return {
-					type: 'string',
-					default: config.default,
-					alwaysStore: config.alwaysStore,
-					...passthroughProps,
-					validator: config.validator,
-					transformer: config.transformer,
-					control({value, onChange, slots: {Messages}}) {
-						const unsuspendedOptions = useSuspendableOptions(config);
-						const options = useMemo(() => {
-							return normalizePickableOptionsToPairs(unsuspendedOptions);
-						}, [unsuspendedOptions]);
-						const safeOnChange = useCallback((v: string|number|undefined) => onChange(v?.toString()), [onChange]);
-						return <>
-							<ToggleGroupControl
-								{...config.component} value={value} onChange={safeOnChange} label={config.label} help={config.help} isBlock isDeselectable={config.clearable ?? false}
-								children={options.map(([value, label]) => {
-									return <ToggleGroupControlOptionWithOptionalIcon key={value} value={value} label={label}/>;
-								})}
-								__nextHasNoMarginBottom
-								__next40pxDefaultSize
-							/>
-							<Messages />
-						</>;
-					}
-				};
-			} else {
-				return {
-					type: 'number',
-					default: config.default,
-					alwaysStore: config.alwaysStore,
-					...passthroughProps,
-					validator: config.validator,
-					transformer: config.transformer,
-					control({value, onChange, slots: {Messages}}) {
-						const unsuspendedOptions = useSuspendableOptions(config);
-						const options = useMemo(() => {
-							return normalizePickableOptionsToPairs(unsuspendedOptions);
-						}, [unsuspendedOptions]);
-						const safeOnChange = useCallback(
-							(v: string|number|undefined) => onChange(v === undefined || typeof v === 'number' ? v : (v.includes('.') ? parseFloat(v) : parseInt(v))),
-							[onChange]);
-						return <>
-							<ToggleGroupControl
-								{...config.component} value={value} label={config.label} help={config.help} isBlock isDeselectable={config.clearable ?? false}
-								onChange={safeOnChange} __nextHasNoMarginBottom __next40pxDefaultSize
-							>
-								{...options.map(([value, label]) =>
-									(<ToggleGroupControlOptionWithOptionalIcon key={value} value={value} label={label} />))}
-							</ToggleGroupControl>
-							<Messages />
-						</>;
-					}
-				};
-			}
-		case "user":
-			registerPlainTextLabelRequiredMarker("user", " > .components-form-token-field .components-form-token-field__label");
-			return hydrateUserProperty(config);
-		default:
-			console.error("Invalid control name:", (config as any).control, "\nFalling back to a minimally-configured text control.");
-			return hydrateDesiccatedSimpleNativeProperty({
-				control: "text",
-				name: (config as any).name,
-				label: (config as any).label
-			}, propPath, outsideHydrationInfo, parentTypes);
-	}
-}
-const ToggleGroupControlLabelSelector: string = " > .components-base-control > .components-base-control__field:has(> [data-wp-component='ToggleGroupControl']) .components-base-control__label";
-
-type NumberLikeListTextControlProps = {listComponent?: ComponentPropsWithoutRef<typeof TextControl>, datum: string, itemType: string, onDatumChange(value: any): void};
-function NumberLikeListTextControl({listComponent, datum, itemType, onDatumChange}: NumberLikeListTextControlProps) {
-	const onChange = useCallback((v: string) => onDatumChange(itemType !== 'float' ? parseInt(v) : parseFloat(v)), [itemType, onDatumChange])
-	return <TextControl {...listComponent} __nextHasNoMarginBottom __next40pxDefaultSize type="number" value={datum} onChange={onChange} />
-}
-
-type PotentiallyExtendedRadioControlProps = CSNPControlComponentProps<RadioPropertyCSNPConfig, string>&SNPControlSlots;
-function PotentiallyExtendedRadioControl({config, value, onChange, Label, Messages}: PotentiallyExtendedRadioControlProps) {
-	const unsuspendedOptions = useSuspendableOptions(config);
-	const options = useAsOptions(unsuspendedOptions, value, undefined);
-
-	if (config.allowCustom) {
-		return <ExtendedRadioControl {...config.component} selected={value} onChange={onChange} options={options} label={config.label} help={config.help}
-		                             allowCustom={true} Label={Label} Messages={Messages} />;
-	} else {
-		return <>
-			<RadioControl {...config.component} selected={value} onChange={onChange} options={options} label={Label ? <Label /> : config.label} help={config.help} />
-			<Messages />
-		</>;
-	}
-}
-
-export function hydratePostProperty(config: PostPropertyCSNPConfig): HydratedSimpleNativeProperty {
-	if (config.multiple) {
-		return {
-			name: config.name,
-			type: 'array',
-			default: config.default,
-			condition: config.condition,
-			alwaysStore: config.alwaysStore,
-			required: config.required,
-			validator: config.validator,
-			transformer: config.transformer,
-			controlType: 'post',
-			control({value, onChange, slots: {Messages}}: SNPControlProps<number[]>) {
-				const safeOnChange = useCallback((v: string[]) => onChange(v.map(v => parseInt(v))), [onChange]);
-				const safeValue = useMemo(() => value?.map(v => v.toString()), [value]);
-				return <ExtendedPostPicker
-					{...config.component}
-					multiple={true}
-					label={config.label}
-					help={config.help}
-					value={safeValue}
-					onChange={safeOnChange}
-					postTypes={config.postTypes}
-					Messages={Messages}
-				/>;
-			}
-		};
-	} else {
-		return {
-			name: config.name,
-			type: 'number',
-			default: config.default,
-			condition: config.condition,
-			alwaysStore: config.alwaysStore,
-			required: config.required,
-			validator: config.validator,
-			transformer: config.transformer,
-			controlType: 'post',
-			control({value, onChange, slots: {Messages}}: SNPControlProps<number>) {
-				return <ExtendedPostPicker
-					{...config.component}
-					multiple={false}
-					label={config.label}
-					help={config.help}
-					value={value?.toString()}
-					onChange={useCallback(v => onChange(parseInt(v)), [onChange])}
-					postTypes={config.postTypes}
-					Messages={Messages}
-				/>;
-			}
-		};
-	}
-}
-
-export function hydrateUserProperty(config: UserPropertyCSNPConfig): HydratedSimpleNativeProperty {
-	if (config.multiple) {
-		return {
-			name: config.name,
-			type: 'array',
-			default: config.default,
-			condition: config.condition,
-			alwaysStore: config.alwaysStore,
-			required: config.required,
-			validator: config.validator,
-			transformer: config.transformer,
-			controlType: 'user',
-			control({value, onChange, slots: {Messages}}: SNPControlProps<number[]>) {
-				const safeOnChange = useCallback((v: string[]) => onChange(v.map(v => parseInt(v))), [onChange]);
-				const safeValue = useMemo(() => value?.map(v => v.toString()), [value]);
-				return <ExtendedUserPicker
-					{...config.component}
-					multiple={true}
-					label={config.label}
-					help={config.help}
-					value={safeValue}
-					onChange={safeOnChange}
-					userRoles={config.userRoles}
-					Messages={Messages}
-				/>;
-			}
-		};
-	} else {
-		return {
-			name: config.name,
-			type: 'number',
-			default: config.default,
-			condition: config.condition,
-			alwaysStore: config.alwaysStore,
-			required: config.required,
-			validator: config.validator,
-			transformer: config.transformer,
-			controlType: 'user',
-			control({value, onChange, slots: {Messages}}: SNPControlProps<number>) {
-				return <ExtendedUserPicker
-					{...config.component}
-					multiple={false}
-					label={config.label}
-					help={config.help}
-					value={value?.toString()}
-					onChange={useCallback(v => onChange(parseInt(v)), [onChange])}
-					userRoles={config.userRoles}
-					Messages={Messages}
-				/>;
-			}
-		};
-	}
-}
-
-export function hydrateTaxonomyProperty(config: TaxonomyPropertyCSNPConfig): HydratedSimpleNativeProperty {
-	registerPlainTextLabelRequiredMarker("taxonomy", " > .components-form-token-field .components-form-token-field__label");
-	if (config.multiple === false) {
-		return {
-			name: config.name,
-			type: 'string',
-			default: config.default,
-			condition: config.condition,
-			alwaysStore: config.alwaysStore,
-			required: config.required,
-			validator: config.validator,
-			transformer: config.transformer,
-			controlType: 'taxonomy',
-			control({value, onChange, slots: {Messages}}) {
-				return <ExtendedTaxonomyPicker
-					{...config.component}
-					multiple={false}
-					label={config.label}
-					help={config.help}
-					value={value}
-					visibility={config.visibility}
-					onChange={onChange}
-					Messages={Messages}
-				/>;
-			}
-		};
-	} else {
-		return {
-			name: config.name,
-			type: 'array',
-			default: config.default,
-			condition: config.condition,
-			alwaysStore: config.alwaysStore,
-			required: config.required,
-			validator: config.validator,
-			transformer: config.transformer,
-			controlType: 'taxonomy',
-			control({value, onChange, slots: {Messages}}: SNPControlProps<string[]>) {
-				return <ExtendedTaxonomyPicker
-					{...config.component}
-					multiple={true}
-					label={config.label}
-					help={config.help}
-					value={value}
-					visibility={config.visibility}
-					onChange={onChange}
-					Messages={Messages}
-				/>;
-			}
-		};
-	}
-}
-
-export function hydrateTermProperty(config: TermPropertyCSNPConfig): HydratedSimpleNativeProperty {
-	registerPlainTextLabelRequiredMarker("term", " > .components-form-token-field .components-form-token-field__label");
-	if (config.multiple === false) {
-		return {
-			name: config.name,
-			type: 'string',
-			default: config.default,
-			condition: config.condition,
-			alwaysStore: config.alwaysStore,
-			required: config.required,
-			validator: config.validator,
-			transformer: config.transformer,
-			controlType: 'taxonomy',
-			control({value, onChange, slots: {Messages}}) {
-				return <ExtendedTermPicker
-					{...config.component}
-					multiple={false}
-					label={config.label}
-					help={config.help}
-					value={value}
-					taxonomy={config.taxonomy}
-					onChange={onChange}
-					Messages={Messages}
-				/>;
-			}
-		};
-	} else {
-		return {
-			name: config.name,
-			type: 'array',
-			default: config.default,
-			condition: config.condition,
-			alwaysStore: config.alwaysStore,
-			required: config.required,
-			validator: config.validator,
-			transformer: config.transformer,
-			controlType: 'taxonomy',
-			control({value, onChange, slots: {Messages}}: SNPControlProps<string[]>) {
-				return <ExtendedTermPicker
-					{...config.component}
-					multiple={true}
-					label={config.label}
-					help={config.help}
-					value={value}
-					taxonomy={config.taxonomy}
-					onChange={onChange}
-					Messages={Messages}
-				/>;
-			}
-		};
-	}
-}
-
-function hydrateSelectProperty(config: SelectPropertyCSNPConfig): HydratedSimpleNativeProperty {
-	registerPlainTextLabelRequiredMarker("select", " > .components-form-token-field .components-form-token-field__label");
-	if (config.multiple) {
-		return {
-			name: config.name,
-			label: config.label,
-			type: 'array',
-			default: config.default,
-			condition: config.condition,
-			alwaysStore: config.alwaysStore,
-			required: config.required,
-			validator: config.validator,
-			transformer: config.transformer,
-			controlType: 'select',
-			control({value, onChange, slots: {Messages}}) {
-				return <MultiSelectControl value={value ?? config.default} onChange={onChange} options={useSuspendableOptions(config)} label={config.label}
-				                           help={config.help} expandOnFocus={config.expandOnFocus} Messages={Messages} maxLength={config.maxLength} />;
-			}
-		};
-	} else {
-		return {
-			name: config.name,
-			label: config.label,
-			type: 'string',
-			enum: config.enum,
-			default: config.default,
-			condition: config.condition,
-			alwaysStore: config.alwaysStore,
-			required: config.required,
-			validator: config.validator,
-			transformer: config.transformer,
-			controlType: 'select',
-			control({value, onChange, slots: {Label, Messages}}) {
-				const currentValue = value ?? config.default;
-				const normalizedOptions = useAsOptions(useSuspendableOptions(config), currentValue, config.clearable ? '' : undefined);
-				return <>
-					<SelectControl
-						value={currentValue ?? ''} onChange={onChange} options={normalizedOptions} label={<Label />} help={config.help}
-						__nextHasNoMarginBottom __next40pxDefaultSize
-					/>
-					<Messages />
-				</>;
-			}
-		};
-	}
-}
-
-function useAsOptions<T extends string>(options: PickableOptions<T>, currentValue: T|undefined|null, noSelectionValue: T|undefined) {
-	const normalizedOptions = useMemo(() => asOptions(options, noSelectionValue), [options, noSelectionValue]);
-	return useMemo(() => {
-		if (!normalizedOptions.find(opt => opt.value === currentValue)) {
-			if (currentValue !== undefined && currentValue !== null) {
-				const defaultValueItem = {value: currentValue, label: currentValue === "" ? "-- Default --" : currentValue.toString(), disabled: true};
-				if (noSelectionValue !== undefined && !normalizedOptions.some(opt => !opt.value)) {
-					return normalizedOptions.toSpliced(1, 0, defaultValueItem);
-				} else {
-					return [defaultValueItem, ...normalizedOptions];
-				}
-			} else if (noSelectionValue === undefined) {
-				return [{value: "", label: "-- Default --", disabled: true}, ...normalizedOptions];
-			}
-		}
-		return normalizedOptions;
-	}, [normalizedOptions, currentValue]);
-}
-function asOptions<T extends string|number>(options: PickableOptions<T>, noSelectionValue?: T) {
-	const res: Array<{ value: T, label: string, disabled?: boolean }> = normalizePickableOptionsToPairs(options)
-		.map(opt => ({value: opt[0], label: (typeof opt[1] === 'string' ? opt[1] : opt[1].text) ?? opt[0].toString()}));
-	if (noSelectionValue !== undefined && !res.some(opt => !opt.value)) {
-		res.splice(0, 0, {value: noSelectionValue, label: "-- No Selection --"});
-	}
-	return res;
-}
-
-function hasDefinedKey<O extends object, K extends keyof O>(obj: O, key: K): obj is O&Required<Pick<O, K>> {
-	return obj[key] !== undefined;
-}
-
-function invalidConfigMessageControl(config: CSNPConfig, passthroughProps: PassthroughPropsType, message: string) {
-	return {
-		type: 'string',
-		default: config.default,
-		alwaysStore: true,
-		...passthroughProps,
-		validator: config.validator,
-		transformer: config.transformer,
-		control() {
-			return <Disabled>
-				<p>Invalid configuration for {config.label}: {message}</p>
-			</Disabled>;
-		}
-	} as any;
-}
-
-export function registerPlainTextLabelRequiredMarker(componentType: string, labelSelectorFragment: string) {
-	let loadedStyles: { componentTypes: Set<string>, sheet: CSSStyleSheet }|undefined = (window as any).plauditGutenbergExtensionsPlainTextLabelCSSLoaded;
-	if (loadedStyles === undefined) {
-		(window as any).plauditGutenbergExtensionsPlainTextLabelCSSLoaded = loadedStyles = {componentTypes: new Set(), sheet: new CSSStyleSheet()};
-		document.adoptedStyleSheets.push(loadedStyles.sheet);
-	}
-	if (loadedStyles.componentTypes.has(componentType)) {
-		return;
-	}
-	loadedStyles.componentTypes.add(componentType);
-	loadedStyles.sheet.insertRule(`.plaudit-snp-laid-out-property.required[data-plaudit-snp-control-type='${componentType}']${labelSelectorFragment}:after {content:" *";color: red;}`);
-}