@plaudit/gutenberg-api-extensions 2.89.0 → 2.90.0

package/src/blocks/simple-native-property-impl.tsx

@@ -1,3 +1,4 @@
+import {store as blockEditorStore} from "@wordpress/block-editor";
 import {createHigherOrderComponent} from "@wordpress/compose";
 import {dispatch, select} from "@wordpress/data";
 import {useEffect, useMemo} from "@wordpress/element";
@@ -86,14 +87,13 @@ export function installSimpleNativePropertiesSupport() {
 	});
 
 	addFilter('editor.BlockEdit', 'plaudit/gutenberg-api-extensions/simple-native-properties',
-		createHigherOrderComponent(BlockEdit => (blockEditProps: ActualBlockEditProps) => {
+		createHigherOrderComponent(BlockEdit => function SNPBlockEdit(blockEditProps: ActualBlockEditProps) {
 			const blockSimpleNativePanelsAndTabs = select(gutenbergApiExtensionsStore).preppedProperties(blockEditProps.name);
 			if (!blockSimpleNativePanelsAndTabs) {
 				return <BlockEdit {...blockEditProps} />;
 			}
-			const selectedEditor = select("core/block-editor");
-			if (selectedEditor.getBlockParentsByBlockName(blockEditProps.clientId, "core/block")?.length) {
-				// If we have a core/block ancestor, then we can't be edited and attempting to self-edit will cause a crash
+			if (select(blockEditorStore).getBlockParentsByBlockName(blockEditProps.clientId, "core/block")?.length) {
+				// If we have a core/block ancestor, then we can't be edited, and attempting to self-edit will cause a crash
 				return <BlockEdit {...blockEditProps} />;
 			}
 			return <DataControllerInitializationIsolator bep={blockEditProps} dcm={dataControllerManager} BlockEdit={BlockEdit} snpPanelsAndTabs={blockSimpleNativePanelsAndTabs} />;
@@ -120,7 +120,7 @@ export function installSimpleNativePropertiesSupport() {
 		});
 
 	addFilter('editor.BlockListBlock', 'plaudit/gutenberg-api-extensions/simple-native-properties',
-		createHigherOrderComponent(BlockListBlock => (props: ActualBlockListBlockProps) => {
+		createHigherOrderComponent(BlockListBlock => function SNPBlockListBlock(props: ActualBlockListBlockProps) {
 			const wrapperProps: {className?: string, style?: Record<string, unknown>} = {...props.wrapperProps};
 			const extraPropTransforms = select(gutenbergApiExtensionsStore).computedExtraPropTransforms(props.name);
 			if (!extraPropTransforms || !extraPropTransforms.appliesInEditor) {

package/src/controls/AsynchronousFormTokenField.tsx

@@ -63,6 +63,7 @@ export function AsynchronousFormTokenField(props: AsynchronousFormTokenFieldProp
 	//TODO: If focus is in field but user hasn't started typing, show a message telling them to start typing
 	return <>
 		<FormTokenField
+			__next40pxDefaultSize
 			value={currentTokens}
 			label={props.label}
 			placeholder="Start typing to see suggestions"

package/src/controls/BaseSortableItemsControl.tsx

@@ -2,10 +2,10 @@ import {BaseControl, Button, useBaseControlProps} from "@wordpress/components";
 import {useCallback} from "@wordpress/element";
 import {dragHandle, Icon} from "@wordpress/icons";
 
-import {ProvidedSlot} from "../blocks";
-
 import {Reorder, useDragControls} from "framer-motion";
-import type {ReactNode} from "react";
+import type {PointerEvent, ReactNode} from "react";
+
+import {ProvidedSlot} from "../blocks";
 import {IndexedItemActionsMaker, KeyedValue, useSortableItemsModel} from "./hooks/useSortableItemsModel";
 
 export type BaseSortableItemsControlProps<D> = Omit<Parameters<typeof useBaseControlProps>[0], 'children'|'id'>&{
@@ -33,7 +33,7 @@ export function BaseSortableItemsControl<D>({
 	const removeDisabled = min !== undefined && listLength <= min;
 	const {baseControlProps, controlProps} = useBaseControlProps({...wrapperProps, label: Label ? <Label /> : label});
 
-	return <BaseControl {...baseControlProps}>
+	return <BaseControl {...baseControlProps} __nextHasNoMarginBottom>
 		<div {...controlProps} className="plaudit-sortable-items-container">
 			<Reorder.Group
 				axis="y" onReorder={commit} values={keyedValues}
@@ -58,7 +58,7 @@ function SortableItemsListNode<D>({datum, index, listLength, makeChild, makeInde
 	//TODO: If used, implement addBefore and addAfter the same way as moveUp and moveDown
 
 	const dragControls = useDragControls();
-	const dragStartHandler = useCallback((event: React.PointerEvent) => dragControls.start(event), [dragControls]);
+	const dragStartHandler = useCallback((event: PointerEvent) => dragControls.start(event), [dragControls]);
 
 	return <Reorder.Item className="plaudit-sortable-items-row" data-index={index} dragListener={false} dragControls={dragControls} layout="position" value={datum}>
 		<div className="plaudit-sortable-items-ordering-controls">
@@ -66,8 +66,8 @@ function SortableItemsListNode<D>({datum, index, listLength, makeChild, makeInde
 				<Icon icon={dragHandle} onPointerDown={dragStartHandler} />
 			</div>
 			<div className="plaudit-sortable-items-ordering-control">
-				<Button icon="arrow-up" aria-label="Move Up" disabled={index < 1} onClick={moveUp} />
-				<Button icon="arrow-down" aria-label="Move Down" disabled={index >= listLength - 1} onClick={moveDown} />
+				<Button icon="arrow-up" aria-label="Move Up" disabled={index < 1} onClick={moveUp} __next40pxDefaultSize accessibleWhenDisabled />
+				<Button icon="arrow-down" aria-label="Move Down" disabled={index >= listLength - 1} onClick={moveDown} __next40pxDefaultSize accessibleWhenDisabled />
 			</div>
 		</div>
 		<div className="plaudit-sortable-items-inputs plaudit-sortable-items-padded">
@@ -76,7 +76,7 @@ function SortableItemsListNode<D>({datum, index, listLength, makeChild, makeInde
 		<div className="plaudit-sortable-items-presence-controls plaudit-sortable-items-padded">
 			{/*addEmptyHandlers && index === 0 &&
 				<Button icon="insert" className="insert-before" disabled={addDisabled} onClick={addEmptyHandlers[0]} aria-label="Insert Before"/>*/}
-			<Button icon="remove" disabled={removeDisabled} onClick={remove} aria-label="Remove"/>
+			<Button icon="remove" disabled={removeDisabled} onClick={remove} aria-label="Remove" __next40pxDefaultSize accessibleWhenDisabled />
 			{/*addEmptyHandlers && <Button icon="insert" className="insert-after" disabled={addDisabled} onClick={addEmptyHandlers[1]}
 			                             aria-label={index < listLength - 1 ? "Insert Between" : "Insert After"}/>*/}
 		</div>

package/src/controls/ExtendedFormTokenField.tsx

@@ -97,6 +97,8 @@ export function ExtendedFormTokenField(props: ExtendedFormTokenFieldProps) {
 			__experimentalShowHowTo={props.multiple !== false}
 			onInputChange={setDebouncedInput}
 			onFocus={useCallback(() => setImmediateInput(input), [input])}
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 		/>
 		{help && <div><span className="components-form-token-field__help">{help}</span></div>}
 		{hasLoadingError && <div><Spinner /><span className="components-form-token-field__help">{__("An Error Occurred While Loading Suggestions")}</span></div>}

package/src/controls/ExtendedRadioControl.tsx

@@ -71,7 +71,7 @@ export function ExtendedRadioControl(props: ExtendedRadioControlProps) {
 							value={option.value}
 							onChange={onChangeValue}
 							checked={option.value === selected}
-							aria-describedby={!!help ? `${id}__help` : undefined}
+							aria-describedby={help ? `${id}__help` : undefined}
 							{...additionalProps}
 						/>
 						<label
@@ -94,7 +94,7 @@ export function ExtendedRadioControl(props: ExtendedRadioControlProps) {
                         value={customValue ?? ''}
                         onChange={onChangeValue}
                         checked={valueIsCustom}
-                        aria-describedby={!!help ? `${id}__help` : undefined}
+                        aria-describedby={help ? `${id}__help` : undefined}
 						{...additionalProps}
                     />
 					<label id={`${id}-custom-label`} className="components-radio-control__label" htmlFor={`${id}-${options.length}`}>Custom:</label>

package/src/controls/ExtendedTextareaControl.tsx

@@ -58,7 +58,7 @@ export const ExtendedTextareaControl = (() => {
 		}, [rich, debouncedUpdate, textareaRef.current]);
 
 		return <>
-			<TextareaControl ref={textareaRef} {...forwardedProps} value={v} onChange={safeOnChange} />
+			<TextareaControl {...forwardedProps} ref={textareaRef} value={v} onChange={safeOnChange} __nextHasNoMarginBottom />
 			{Messages && <Messages/>}
 		</>;
 	})

package/src/controls/FileControl.tsx

@@ -24,7 +24,7 @@ export function FileControl(props: FileControlProps) {
 
 	const attachment = useSuspenseSelect(select => value !== undefined ? select(coreStore).getMedia(value) : undefined, [value]);
 	const {baseControlProps, controlProps} = useBaseControlProps({label, help});
-	return <BaseControl {...baseControlProps}>
+	return <BaseControl {...baseControlProps} __nextHasNoMarginBottom>
 		<MediaUploadCheck>
 			<MediaUpload
 				onSelect={onSelect}
@@ -32,13 +32,13 @@ export function FileControl(props: FileControlProps) {
 				allowedTypes={allowedTypes}
 				render={useCallback(({open}) => {
 					if (!attachment?.id) {
-						return <div {...controlProps}><Button onClick={open} children={__('Select a File', 'plaudit')}/></div>
+						return <div {...controlProps}><Button onClick={open} children={__('Select a File', 'plaudit')} __next40pxDefaultSize /></div>
 					}
 					return <div {...controlProps}>
 						<p>{__('Selected File', 'plaudit')}: <a href={attachment.source_url} target="_blank" rel="noopener noreferrer">{attachment.title.rendered}</a></p>
 						<div className="selected-file-control-buttons">
-							<Button onClick={open} variant="secondary" children="Replace File" />
-							<Button onClick={() => onChange(undefined)} isDestructive children={__('Remove File', 'plaudit')} />
+							<Button onClick={open} variant="secondary" children="Replace File" __next40pxDefaultSize />
+							<Button onClick={() => onChange(undefined)} isDestructive children={__('Remove File', 'plaudit')} __next40pxDefaultSize />
 						</div>
 					</div>;
 				}, [attachment, onChange, controlProps])}

package/src/controls/FullSizeToggleControl.tsx

@@ -77,6 +77,7 @@ export const ToggleGroupControlOptionWithOptionalIcon
 });
 
 function i18nSwitchLabel(label: NonNullable<OptionalLabel>): typeof label {
+	// eslint-disable-next-line @wordpress/i18n-no-variables -- There's nothing we can do about this - it's a requirement for being able to pass arbitrary labels
 	return typeof label === 'string' ? __(label) : {...label, text: __(label.text)};
 }
 

package/src/controls/ImageControl.tsx

@@ -27,7 +27,7 @@ export function ImageControl(props: ImageControlProps) {
 
 	const media = useSelect(select => value?.media?.id ? select(coreStore).getMedia(value.media.id) : undefined, [value]);
 	const {baseControlProps, controlProps} = useBaseControlProps({label: Label ? <Label /> : label, help});
-	return <BaseControl {...baseControlProps}>
+	return <BaseControl {...baseControlProps} __nextHasNoMarginBottom>
 		<div {...controlProps} className="editor-post-featured-image">
 			{media
 				? <ImageControlWithUploadedImage {...props} media={media} />
@@ -52,7 +52,7 @@ function ImageControlWithUploadedImage(props: ImageControlProps&{media: Attachme
 	const {includeFocalPointPicker, media, storage, onChange, value} = props;
 	const onFPPChange = useCallback((pos: FocalPoint) => onChange(mergeInUpdatedValuePart(value, 'pos', {x: pos.x * 100, y: pos.y * 100}, storage)), [onChange, value]);
 	const onSelect = useCallback((media: {id: number}&{[k: string]: any}) => onChange(mergeInUpdatedValuePart(value, 'media', media, storage)), [onChange, value]);
-	const renderOpenButton = useCallback(({open}: {open(): void}) => <Button onClick={open} variant="secondary">{__('Replace image', 'plaudit')}</Button>, []);
+	const renderOpenButton = useCallback(({open}: {open(): void}) => <Button onClick={open} variant="secondary" __next40pxDefaultSize>{__('Replace image', 'plaudit')}</Button>, []);
 	const clear = useCallback(() => onChange(undefined), [onChange]);
 
 	const fppValue = useMemo(() => ({
@@ -66,6 +66,7 @@ function ImageControlWithUploadedImage(props: ImageControlProps&{media: Attachme
 			onChange={onFPPChange}
 			url={value?.media?.url ?? ''}
 			value={fppValue}
+			__nextHasNoMarginBottom
 		/>;
 	} else {
 		fppOrMedia = <ResponsiveWrapper
@@ -85,7 +86,7 @@ function ImageControlWithUploadedImage(props: ImageControlProps&{media: Attachme
 				allowedTypes={ALLOWED_TYPES}
 				render={renderOpenButton}
 			/>
-			<Button onClick={clear} isDestructive>{__('Remove image', 'plaudit')}</Button>
+			<Button onClick={clear} isDestructive  __next40pxDefaultSize>{__('Remove image', 'plaudit')}</Button>
 		</MediaUploadCheck>
 	</>;
 }
@@ -94,8 +95,7 @@ function ImageControlWithoutUploadedImage(props: ImageControlProps&{media: Attac
 	const onSelect = useCallback((media: {id: number}&{[k: string]: any}) => onChange(mergeInUpdatedValuePart(value, 'media', media, storage)), [onChange, value]);
 	const renderOpenButton = useCallback(({open}: {open(): void}) => (
 		<Button
-			className={!value?.media?.id ? 'editor-post-featured-image__toggle' : 'editor-post-featured-image__preview'}
-			onClick={open}
+			className={value?.media?.id ? 'editor-post-featured-image__preview' : 'editor-post-featured-image__toggle'} onClick={open} __next40pxDefaultSize
 		>
 			{!value?.media?.id && __('Choose an image', 'plaudit')}
 			{media &&

package/src/controls/LazySuggestionsComboboxControl.tsx

@@ -1,10 +1,10 @@
 import {BaseControl, ComboboxControl, Spinner} from "@wordpress/components";
 import {useCallback, useMemo, useState} from "@wordpress/element";
-import {__} from "@wordpress/i18n";
+import {__, sprintf} from "@wordpress/i18n";
 
 import {useSuggestions} from "./hooks/useSuggestions";
 
-import type {ComponentProps} from "react";
+import type {ComponentProps, FocusEvent} from "react";
 
 type ComboboxControlProps = ComponentProps<typeof ComboboxControl>;
 type ComboboxControlOption = ComboboxControlProps['options'][number];
@@ -24,8 +24,8 @@ export function LazySuggestionsComboboxControl(props: LazySuggestionsComboboxCon
 		() => hasFocus && input.length < 2 || (isLoading && !suggestions.length) ? [{label: input, value: "", disabled: true}] : suggestions,
 		[hasFocus, input, isLoading, suggestions]);
 
-	const onFocus = useCallback((e: React.FocusEvent<HTMLElement>) => setHasFocus(e.currentTarget.contains(e.target)), [setHasFocus]);
-	const onBlur = useCallback((e: React.FocusEvent<HTMLElement>) => setHasFocus(e.currentTarget.contains(e.relatedTarget)), [setHasFocus]);
+	const onFocus = useCallback((e: FocusEvent<HTMLElement>) => setHasFocus(e.currentTarget.contains(e.target)), [setHasFocus]);
+	const onBlur = useCallback((e: FocusEvent<HTMLElement>) => setHasFocus(e.currentTarget.contains(e.relatedTarget)), [setHasFocus]);
 
 	const onFilterValueChange = useCallback((value: string) => {
 		if (props.onFilterValueChange) {
@@ -35,13 +35,13 @@ export function LazySuggestionsComboboxControl(props: LazySuggestionsComboboxCon
 	}, [props.onFilterValueChange, setInput]);
 
 	const __experimentalRenderItem = useMemo(() => {
-		return hasFocus && input.length < 2 ? () => __("Start typing to see suggestions")
-			: (isLoading && !suggestions.length ? () => __("Loading suggestions") : undefined);
+		return hasFocus && input.length < 2 ? () => __("Start typing to see suggestions", 'plaudit')
+			: (isLoading && !suggestions.length ? () => __("Loading suggestions", 'plaudit') : undefined);
 	}, [hasFocus, input, isLoading, suggestions])
 
 	if (isInitializing) {
-		return <BaseControl {...props}>
-			<Spinner /><span>{__(`Initializing ${props.label}`)}</span>
+		return <BaseControl {...props} __nextHasNoMarginBottom>
+			<Spinner /><span>{/* translators: %s is replaced with the label of the property */ sprintf(__("Initializing %s", 'plaudit'), props.label)}</span>
 		</BaseControl>
 	}
 
@@ -56,7 +56,9 @@ export function LazySuggestionsComboboxControl(props: LazySuggestionsComboboxCon
 			onFilterValueChange={onFilterValueChange}
 			__experimentalRenderItem={__experimentalRenderItem}
 			allowReset={allowReset !== false}
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 		/>
-		{hasLoadingError && <div><span className="components-base-control__help">{__("An error occurred while updating suggestions")}</span></div>}
+		{hasLoadingError && <div><span className="components-base-control__help">{__("An error occurred while updating suggestions", 'plaudit')}</span></div>}
 	</div>;
 }

package/src/controls/PickOne.tsx

@@ -42,6 +42,7 @@ export function PickOneFromSelect<T extends string>(props: SimpleBlockControlPro
 	return <SelectControl
 		{...makeSharedRadioAndSelectProps(props)}
 		value={props.attributes[props.attribute]}
+		__next40pxDefaultSize __nextHasNoMarginBottom
 	/>;
 }
 export function PickOneFromRadios<T extends string>(props: SimpleBlockControlProps<T, string>& { options: PickableOptions<string> }) {
@@ -71,7 +72,7 @@ export function PickOneFromColors<T extends string>(props: SimpleBlockControlPro
 
 	const currentColor = valueToColorMap.get(props.attributes[props.attribute]) ?? props.attributes[props.attribute];
 	const {baseControlProps, controlProps} = useBaseControlProps({label: props.label, help: props.help});
-	return <BaseControl {...baseControlProps}>
+	return <BaseControl {...baseControlProps} __nextHasNoMarginBottom>
 		<ColorPalette
 			{...controlProps}
 			disableCustomColors={true}

package/src/controls/ProperLinkControl.tsx

@@ -52,15 +52,17 @@ export function ProperLinkControl(props: ProperLinkControlProps) {
 
 	const renderableSettings = settings === false ? [] : settings;
 	const renderControlBottom = useCallback(() => (value?.url && renderableSettings?.length && <>
-		<Button variant="tertiary" onClick={() => setAreAdvancedSettingsVisible(!areAdvancedSettingsVisible)}
-		        icon={areAdvancedSettingsVisible ? chevronUp : chevronDown} iconPosition="right" text="Advanced"
+		<Button
+			variant="tertiary" onClick={() => setAreAdvancedSettingsVisible(!areAdvancedSettingsVisible)}
+			icon={areAdvancedSettingsVisible ? chevronUp : chevronDown} iconPosition="right" text="Advanced"
+			__next40pxDefaultSize accessibleWhenDisabled
 		/>
 		<div ref={advancedSettingsRef} style={{display: "none", transition: "max-height 200ms ease-in-out", overflow: "hidden"}}>
-			{...renderableSettings.map(setting => <ProperLinkControlSetting setting={setting} onChange={onChange} value={value} />)}
+			{...renderableSettings.map(setting => <ProperLinkControlSetting key={setting.id} setting={setting} onChange={onChange} value={value} />)}
 		</div>
 	</>) || "", [value, settings, areAdvancedSettingsVisible, onChange]);
 
-	return <BaseControl id="" label={props.label} help={props.help}>
+	return <BaseControl __nextHasNoMarginBottom id="" label={props.label} help={props.help}>
 		<LinkControl
 			{...linkControlProps}
 			value={value}
@@ -84,8 +86,11 @@ type ProperLinkControlSettingProps = {value?: LinkControl.Value, onChange?: (nex
 function ProperLinkControlSetting({value, onChange, setting}: ProperLinkControlSettingProps) {
 	return <div style={{marginTop: "8px"}}>
 		{setting.type === 'text'
-			? <TextControl style={{marginTop: "8px"}} value={value?.[setting.id] ?? setting.default ?? ''} label={setting.title}
-			               onChange={v => onChange?.({...value, [setting.id]: v})} />
+			? <TextControl
+				style={{marginTop: "8px"}} value={value?.[setting.id] ?? setting.default ?? ''} label={setting.title}
+			    onChange={v => onChange?.({...value, [setting.id]: v})}
+				__next40pxDefaultSize __nextHasNoMarginBottom
+			/>
 			: <ToggleControl style={{marginTop: "8px"}} checked={value?.[setting.id] ?? setting.default ?? false} label={setting.title}
 			                 onChange={v => onChange?.({...value, [setting.id]: v})} />
 		}

package/src/controls/SimpleToggle.tsx

@@ -5,5 +5,5 @@ import type {SimpleBlockControlProps} from "./types";
 
 export function SimpleToggle<T extends string>(props: SimpleBlockControlProps<T, boolean>) {
 	const onChange = useCallback((checked: boolean) => props.setAttributes({[props.attribute]: checked}), [props.setAttributes, props.attribute]);
-	return <ToggleControl checked={props.attributes[props.attribute]} label={props.label} onChange={onChange} />;
+	return <ToggleControl __nextHasNoMarginBottom checked={props.attributes[props.attribute]} label={props.label} onChange={onChange} />;
 }

package/src/controls/SortableFlexibleItemsControl.tsx

@@ -11,8 +11,8 @@ type SortableFlexibleItemsControlSpecificProps<T extends string> = {
 	availableTypes: NonEmptyArray<{label: string, value: T}>,
 	emptyValueBuilder: (type: T) => FlexibleItem<T>
 };
-export type SortableFlexibleItemsControl<T extends string> = Omit<BaseSortableItemsControlProps<FlexibleItem<T>>, 'buttonsArea'>&SortableFlexibleItemsControlSpecificProps<T>;
-export function SortableFlexibleItemsControl<T extends string>({availableTypes, emptyValueBuilder, ...baseProps}: SortableFlexibleItemsControl<T>) {
+export type SortableFlexibleItemsControlProps<T extends string> = Omit<BaseSortableItemsControlProps<FlexibleItem<T>>, 'buttonsArea'>&SortableFlexibleItemsControlSpecificProps<T>;
+export function SortableFlexibleItemsControl<T extends string>({availableTypes, emptyValueBuilder, ...baseProps}: SortableFlexibleItemsControlProps<T>) {
 	const buttonsArea = useCallback<BaseSortableItemsControlProps<FlexibleItem<T>>['buttonsArea']>(
 		// Unfortunately, the typedefs for React memo components don't allow us to properly check the emptyValueBuilder function
 		args => <ButtonsArea {...args} availableTypes={availableTypes} emptyValueBuilder={emptyValueBuilder} />, [availableTypes, emptyValueBuilder]);
@@ -23,8 +23,10 @@ type ButtonsAreaProps<T extends string> = Parameters<BaseSortableItemsControlPro
 function ButtonsArea<T extends string>({addHandler, disabled, availableTypes, emptyValueBuilder}: ButtonsAreaProps<T>): ReactNode {
 	const [selectedType, setSelectedType] = useState(availableTypes[0].value);
 	return <div className="plaudit-sortable-items-buttons flexible-items">
-		<Button icon="insert" disabled={disabled} onClick={() => addHandler(emptyValueBuilder(selectedType))}>Add</Button>
+		<Button icon="insert" disabled={disabled} onClick={() => addHandler(emptyValueBuilder(selectedType))} __next40pxDefaultSize accessibleWhenDisabled>Add</Button>
 		<SelectControl
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 			label="Type"
 			hideLabelFromVision={true}
 			value={selectedType}

package/src/controls/SortableItemsControl.tsx

@@ -13,6 +13,10 @@ export function SortableItemsControl<D>({emptyValue, addRowText, ...baseProps}:
 type ButtonsAreaProps<D = any> = Parameters<BaseSortableItemsControlProps<D>['buttonsArea']>[0]&{emptyValue: D, addRowText?: string};
 function ButtonsArea<D>({addHandler, disabled, emptyValue, addRowText}: ButtonsAreaProps<D>) {
 	return <div className="plaudit-sortable-items-buttons">
-		<Button icon="insert" disabled={disabled} onClick={() => addHandler(typeof emptyValue === 'object' ? {...emptyValue} : emptyValue)}>{addRowText ?? "Add Row"}</Button>
+		<Button
+			icon="insert" disabled={disabled}
+	        onClick={() => addHandler(typeof emptyValue === 'object' ? {...emptyValue} : emptyValue)}
+			__next40pxDefaultSize accessibleWhenDisabled
+		>{addRowText ?? "Add Row"}</Button>
 	</div>
 }