@elementor/editor-editing-panel 1.30.0 → 1.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.30.0",
+  "version": "1.31.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,24 +39,24 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.19.0",
-    "@elementor/editor-canvas": "0.19.0",
-    "@elementor/editor-controls": "0.27.0",
+    "@elementor/editor": "0.19.1",
+    "@elementor/editor-canvas": "0.19.1",
+    "@elementor/editor-controls": "0.28.0",
     "@elementor/editor-current-user": "0.3.0",
     "@elementor/editor-elements": "0.8.1",
-    "@elementor/editor-panels": "0.15.0",
+    "@elementor/editor-panels": "0.15.1",
     "@elementor/editor-props": "0.12.0",
     "@elementor/editor-responsive": "0.13.4",
     "@elementor/editor-styles": "0.6.6",
-    "@elementor/editor-styles-repository": "0.8.4",
-    "@elementor/editor-ui": "0.8.0",
+    "@elementor/editor-styles-repository": "0.8.5",
+    "@elementor/editor-ui": "0.8.1",
     "@elementor/editor-v1-adapters": "0.11.0",
-    "@elementor/icons": "1.37.0",
+    "@elementor/icons": "1.40.1",
     "@elementor/locations": "0.7.7",
     "@elementor/menus": "0.1.4",
     "@elementor/schema": "0.1.2",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.33.2",
+    "@elementor/ui": "1.34.2",
     "@elementor/utils": "0.4.0",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/creatable-autocomplete/autocomplete-option-internal-properties.ts

@@ -0,0 +1,21 @@
+import { type InternalOption, type Option } from './types';
+
+export function addGroupToOptions< TOption extends Option >(
+	options: TOption[],
+	pluralEntityName?: string
+): InternalOption< TOption >[] {
+	return options.map( ( option ) => {
+		return {
+			...option,
+			_group: `Existing ${ pluralEntityName ?? 'options' }`,
+		};
+	} );
+}
+
+export function removeOptionsInternalKeys< TOption extends Option >( options: InternalOption< TOption >[] ): TOption[] {
+	return options.map( ( option ) => {
+		const { _group, _action, ...rest } = option;
+
+		return rest as unknown as TOption;
+	} );
+}

package/src/components/creatable-autocomplete/creatable-autocomplete.tsx

@@ -0,0 +1,175 @@
+import * as React from 'react';
+import { type HTMLAttributes, useId, useMemo } from 'react';
+import {
+	Autocomplete,
+	type AutocompleteProps,
+	type AutocompleteRenderGroupParams,
+	Box,
+	Chip,
+	styled,
+	TextField,
+	type Theme,
+	Typography,
+} from '@elementor/ui';
+
+import { addGroupToOptions } from './autocomplete-option-internal-properties';
+import { type CreatableAutocompleteProps, type InternalOption, type SafeOptionConstraint } from './types';
+import { useAutocompleteChange } from './use-autocomplete-change';
+import { useInputState, useOpenState } from './use-autocomplete-states';
+import { useCreateOption } from './use-create-option';
+import { useFilterOptions } from './use-filter-options';
+
+export function CreatableAutocomplete< TOption extends SafeOptionConstraint >( {
+	selected,
+	options,
+	entityName,
+	onSelect,
+	placeholder,
+	onCreate,
+	validate,
+	...props
+}: CreatableAutocompleteProps< TOption > ) {
+	const { inputValue, setInputValue, error, setError, handleInputChange } = useInputState( validate );
+	const { open, openDropdown, closeDropdown } = useOpenState( props.open );
+	const { createOption, loading } = useCreateOption( { onCreate, validate, setInputValue, setError, closeDropdown } );
+
+	const [ internalOptions, internalSelected ] = useMemo(
+		() => [ options, selected ].map( ( optionsArr ) => addGroupToOptions( optionsArr, entityName?.plural ) ),
+		[ options, selected, entityName?.plural ]
+	);
+
+	const handleChange = useAutocompleteChange( {
+		options: internalOptions,
+		onSelect,
+		createOption,
+		setInputValue,
+		closeDropdown,
+	} );
+	const filterOptions = useFilterOptions( { options, selected, onCreate, entityName } );
+
+	return (
+		<Autocomplete< InternalOption< TOption >, true, true, true >
+			renderTags={ ( tagValue, getTagProps ) => {
+				return tagValue.map( ( option, index ) => (
+					<Chip
+						size="tiny"
+						{ ...getTagProps( { index } ) }
+						key={ option.key ?? option.value ?? option.label }
+						label={ option.label }
+					/>
+				) );
+			} }
+			{ ...( props as AutocompleteProps< InternalOption< TOption >, true, true, true > ) }
+			freeSolo
+			multiple
+			clearOnBlur
+			selectOnFocus
+			disableClearable
+			handleHomeEndKeys
+			disabled={ loading }
+			open={ open }
+			onOpen={ openDropdown }
+			onClose={ closeDropdown }
+			disableCloseOnSelect
+			value={ internalSelected }
+			options={ internalOptions }
+			ListboxComponent={
+				error
+					? React.forwardRef< HTMLElement, ErrorTextProps >( ( _, ref ) => (
+							<ErrorText ref={ ref } error={ error } />
+					  ) )
+					: undefined
+			}
+			renderGroup={ ( params ) => <Group { ...params } /> }
+			inputValue={ inputValue }
+			renderInput={ ( params ) => {
+				return (
+					<TextField
+						{ ...params }
+						placeholder={ placeholder }
+						error={ Boolean( error ) }
+						onChange={ handleInputChange }
+						sx={ ( theme: Theme ) => ( {
+							'.MuiAutocomplete-inputRoot.MuiInputBase-adornedStart': {
+								paddingLeft: theme.spacing( 0.25 ),
+								paddingRight: theme.spacing( 0.25 ),
+							},
+						} ) }
+					/>
+				);
+			} }
+			onChange={ handleChange }
+			getOptionLabel={ ( option ) => ( typeof option === 'string' ? option : option.label ) }
+			getOptionKey={ ( option ) => {
+				if ( typeof option === 'string' ) {
+					return option;
+				}
+
+				return option.key ?? option.value ?? option.label;
+			} }
+			filterOptions={ filterOptions }
+			groupBy={ ( option ) => option._group ?? '' }
+			renderOption={ ( optionProps, option ) => {
+				const { _group, label } = option;
+
+				return (
+					<li
+						{ ...optionProps }
+						style={ { display: 'block', textOverflow: 'ellipsis' } }
+						data-group={ _group }
+					>
+						{ label }
+					</li>
+				);
+			} }
+		/>
+	);
+}
+
+const Group = ( params: Omit< AutocompleteRenderGroupParams, 'key' > ) => {
+	const id = `combobox-group-${ useId().replace( /:/g, '_' ) }`;
+
+	return (
+		<StyledGroup role="group" aria-labelledby={ id }>
+			<StyledGroupHeader id={ id }> { params.group }</StyledGroupHeader>
+			<StyledGroupItems role="listbox">{ params.children }</StyledGroupItems>
+		</StyledGroup>
+	);
+};
+
+type ErrorTextProps = {
+	error?: string;
+} & HTMLAttributes< HTMLElement >;
+
+const ErrorText = React.forwardRef< HTMLElement, ErrorTextProps >( ( { error = 'error' }, ref ) => {
+	return (
+		<Box
+			ref={ ref }
+			sx={ ( theme: Theme ) => ( {
+				padding: theme.spacing( 2 ),
+			} ) }
+		>
+			<Typography variant="caption" sx={ { color: 'error.main' } }>
+				{ error }
+			</Typography>
+		</Box>
+	);
+} );
+
+const StyledGroup = styled( 'li' )`
+	&:not( :last-of-type ) {
+		border-bottom: 1px solid ${ ( { theme } ) => theme.palette.divider };
+	}
+`;
+
+const StyledGroupHeader = styled( Box )( ( { theme } ) => ( {
+	position: 'sticky',
+	top: '-8px',
+	padding: theme.spacing( 1, 2 ),
+	color: theme.palette.text.tertiary,
+	backgroundColor: theme.palette.primary.contrastText,
+} ) );
+
+const StyledGroupItems = styled( 'ul' )`
+	padding: 0;
+`;

package/src/components/creatable-autocomplete/index.ts

@@ -0,0 +1,3 @@
+export * from './creatable-autocomplete';
+
+export { type Option, type CreatableAutocompleteProps, type ValidationEvent, type ValidationResult } from './types';

package/src/components/creatable-autocomplete/types.ts

@@ -0,0 +1,38 @@
+import { type AutocompleteProps } from '@elementor/ui';
+
+export type Option = {
+	label: string;
+	value: string | null;
+	fixed?: boolean;
+	key?: string;
+};
+
+type InternalKeys = '_group' | '_action';
+
+export type InternalOption< TOption extends Option > = Omit< TOption, InternalKeys > & {
+	_group: string;
+	_action?: 'create';
+};
+
+export type SafeOptionConstraint = Option & {
+	[ K in InternalKeys ]?: never;
+};
+
+export type ValidationResult = { isValid: true; errorMessage: null } | { isValid: false; errorMessage: string };
+export type ValidationEvent = 'inputChange' | 'create';
+
+export type CreatableAutocompleteProps< TOption extends SafeOptionConstraint > = Omit<
+	AutocompleteProps< TOption, true, true, true >,
+	'renderInput' | 'onSelect' | 'options'
+> & {
+	selected: TOption[];
+	options: TOption[];
+	placeholder?: string;
+	entityName?: {
+		singular: string;
+		plural: string;
+	};
+	onSelect?: ( value: TOption[] ) => void;
+	onCreate?: ( value: string ) => unknown;
+	validate?: ( value: string, event: ValidationEvent ) => ValidationResult;
+};

package/src/components/creatable-autocomplete/use-autocomplete-change.ts

@@ -0,0 +1,75 @@
+import { removeOptionsInternalKeys } from './autocomplete-option-internal-properties';
+import { type InternalOption, type Option } from './types';
+
+export function useAutocompleteChange< TOption extends Option >( params: {
+	options: InternalOption< TOption >[];
+	onSelect?: ( value: TOption[] ) => void;
+	createOption: ( value: string ) => Promise< unknown >;
+	setInputValue: ( value: string ) => void;
+	closeDropdown: () => void;
+} ) {
+	const { options, onSelect, createOption, setInputValue, closeDropdown } = params;
+
+	const handleChange = async (
+		_: React.SyntheticEvent,
+		selectedOrInputValue: Array< InternalOption< TOption > | string >,
+		reason: string
+	) => {
+		// Separate options and new input value
+		const selectedOptions = selectedOrInputValue.filter( ( option ) => typeof option !== 'string' );
+
+		const newInputValue = selectedOrInputValue.reduce( ( acc: string | null, option ): string | null => {
+			if ( typeof option === 'string' ) {
+				return option;
+			} else if ( option._action === 'create' ) {
+				return option.value;
+			}
+			return acc;
+		}, null );
+
+		const inputValueMatchesExistingOption =
+			newInputValue && options.find( ( option ) => option.label === newInputValue );
+
+		// Handle creation of new option
+		if (
+			newInputValue &&
+			shouldCreateNewOption( reason, selectedOptions, newInputValue, Boolean( inputValueMatchesExistingOption ) )
+		) {
+			return createOption( newInputValue );
+		}
+
+		// Handle selection of existing option
+		if ( reason === 'createOption' && inputValueMatchesExistingOption ) {
+			selectedOptions.push( inputValueMatchesExistingOption );
+		}
+
+		updateSelectedOptions( selectedOptions );
+		setInputValue( '' );
+		closeDropdown();
+	};
+
+	return handleChange;
+
+	function shouldCreateNewOption(
+		reason: string,
+		selectedOptions: InternalOption< TOption >[],
+		newInputValue: string | undefined,
+		inputValueMatchesExistingOption: boolean
+	) {
+		const createOptionWasClicked =
+			reason === 'selectOption' && selectedOptions.some( ( option ) => option._action === 'create' );
+
+		const enterWasPressed =
+			reason === 'createOption' && ! options.some( ( option ) => option.label === newInputValue );
+		const createOptionWasDisplayed = ! inputValueMatchesExistingOption;
+
+		return createOptionWasClicked || ( enterWasPressed && createOptionWasDisplayed );
+	}
+
+	function updateSelectedOptions( selectedOptions: InternalOption< TOption >[] ) {
+		const fixedOptions = options.filter( ( option ) => !! option.fixed );
+		const updatedOptions = [ ...fixedOptions, ...selectedOptions.filter( ( option ) => ! option.fixed ) ];
+
+		onSelect?.( removeOptionsInternalKeys( updatedOptions ) );
+	}
+}

package/src/components/creatable-autocomplete/use-autocomplete-states.ts

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+
+import { type ValidationEvent, type ValidationResult } from './types';
+
+export function useInputState( validate?: ( value: string, event: ValidationEvent ) => ValidationResult ) {
+	const [ inputValue, setInputValue ] = useState( '' );
+	const [ error, setError ] = useState< string | null >( null );
+
+	const handleInputChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		const { value } = event.target;
+
+		setInputValue( value );
+
+		if ( ! validate ) {
+			return;
+		}
+
+		if ( ! value ) {
+			setError( null );
+			return;
+		}
+
+		const { isValid, errorMessage } = validate( value, 'inputChange' );
+
+		if ( isValid ) {
+			setError( null );
+		} else {
+			setError( errorMessage );
+		}
+	};
+
+	return { inputValue, setInputValue, error, setError, handleInputChange };
+}
+
+export function useOpenState( initialOpen: boolean = false ) {
+	const [ open, setOpen ] = useState( initialOpen );
+
+	const openDropdown = () => setOpen( true );
+	const closeDropdown = () => setOpen( false );
+
+	return { open, openDropdown, closeDropdown };
+}

package/src/components/creatable-autocomplete/use-create-option.ts

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+
+import { type ValidationEvent, type ValidationResult } from './types';
+
+export function useCreateOption( params: {
+	onCreate?: ( value: string ) => Promise< unknown > | unknown;
+	validate?: ( value: string, event: ValidationEvent ) => ValidationResult;
+	setInputValue: ( value: string ) => void;
+	setError: ( error: string | null ) => void;
+	closeDropdown: () => void;
+} ) {
+	const { onCreate, validate, setInputValue, setError, closeDropdown } = params;
+
+	const [ loading, setLoading ] = useState( false );
+
+	const createOption = async ( value: string ) => {
+		if ( ! onCreate ) {
+			return;
+		}
+
+		setLoading( true );
+
+		if ( validate ) {
+			const { isValid, errorMessage } = validate( value, 'create' );
+
+			if ( ! isValid ) {
+				setError( errorMessage );
+				setLoading( false );
+				return;
+			}
+		}
+
+		try {
+			setInputValue( '' );
+			closeDropdown();
+			await onCreate( value );
+		} catch {
+			// TODO: Do something with the error.
+		} finally {
+			setLoading( false );
+		}
+	};
+
+	return { createOption, loading };
+}

package/src/components/creatable-autocomplete/use-filter-options.ts

@@ -0,0 +1,50 @@
+import { createFilterOptions } from '@elementor/ui';
+
+import { type InternalOption, type Option } from './types';
+
+export function useFilterOptions< TOption extends Option >( parameters: {
+	options: TOption[];
+	selected: TOption[];
+	onCreate?: ( value: string ) => Promise< unknown > | unknown;
+	entityName?: { singular: string; plural: string };
+} ) {
+	const { options, selected, onCreate, entityName } = parameters;
+
+	const filter = createFilterOptions< InternalOption< TOption > >();
+
+	const filterOptions = (
+		optionList: InternalOption< TOption >[],
+		params: {
+			inputValue: string;
+			getOptionLabel: ( option: InternalOption< TOption > ) => string;
+		}
+	) => {
+		const selectedValues = selected.map( ( option ) => option.value );
+
+		const filteredOptions = filter(
+			optionList.filter( ( option ) => ! selectedValues.includes( option.value ) ),
+			params
+		);
+
+		const isExisting = options.some( ( option ) => params.inputValue === option.label );
+		const allowCreate =
+			Boolean( onCreate ) &&
+			params.inputValue !== '' &&
+			! selectedValues.includes( params.inputValue ) &&
+			! isExisting;
+
+		if ( allowCreate ) {
+			filteredOptions.unshift( {
+				label: `Create "${ params.inputValue }"`,
+				value: params.inputValue,
+				_group: `Create a new ${ entityName?.singular ?? 'option' }`,
+				key: `create-${ params.inputValue }`,
+				_action: 'create',
+			} as InternalOption< TOption > );
+		}
+
+		return filteredOptions;
+	};
+
+	return filterOptions;
+}

package/src/components/css-classes/css-class-item.tsx

@@ -154,11 +154,11 @@ export function CssClassItem( {
 }
 
 const validateLabel = ( newLabel: string ) => {
-	const result = validateStyleLabel( newLabel );
+	const result = validateStyleLabel( newLabel, 'rename' );
 
 	if ( result.isValid ) {
 		return null;
 	}
 
-	return result.error;
+	return result.errorMessage;
 };

package/src/components/css-classes/css-class-selector.tsx

@@ -8,7 +8,7 @@ import {
 	type StylesProvider,
 	stylesRepository,
 	type UpdateActionPayload,
-	useCreateActionsByProvider,
+	useGetStylesRepositoryCreateAction,
 	useProviders,
 	validateStyleLabel,
 } from '@elementor/editor-styles-repository';
@@ -20,7 +20,13 @@ import { __ } from '@wordpress/i18n';
 import { useClassesProp } from '../../contexts/classes-prop-context';
 import { useElement } from '../../contexts/element-context';
 import { useStyle } from '../../contexts/style-context';
-import { type Action, MultiCombobox, type Option } from '../multi-combobox';
+import {
+	CreatableAutocomplete,
+	type CreatableAutocompleteProps,
+	type Option,
+	type ValidationEvent,
+	type ValidationResult,
+} from '../creatable-autocomplete';
 import { CssClassItem } from './css-class-item';
 
 const ID = 'elementor-css-class-selector';
@@ -54,9 +60,8 @@ export function CssClassSelector() {
 	const { value: appliedIds, setValue: setAppliedIds, pushValue: pushAppliedId } = useAppliedClassesIds();
 	const { id: activeId, setId: setActiveId } = useStyle();
 
-	const actions = useCreateActions( { pushAppliedId, setActiveId } );
-
 	const handleApply = useHandleApply( appliedIds, setAppliedIds );
+	const { create, validate, entityName } = useCreateAction( { pushAppliedId, setActiveId } );
 
 	const applied = useAppliedOptions( options, appliedIds );
 	const active = applied.find( ( option ) => option.value === activeId ) ?? EMPTY_OPTION;
@@ -73,15 +78,17 @@ export function CssClassSelector() {
 					<ClassSelectorActionsSlot />
 				</Stack>
 			</Stack>
-			<MultiCombobox
+			<CreatableAutocomplete
 				id={ ID }
 				size="tiny"
 				placeholder={ showPlaceholder ? __( 'Type class name', 'elementor' ) : undefined }
 				options={ options }
 				selected={ applied }
+				entityName={ entityName }
 				onSelect={ handleApply }
+				onCreate={ create ?? undefined }
+				validate={ validate ?? undefined }
 				limitTags={ TAGS_LIMIT }
-				actions={ actions }
 				getLimitTagsText={ ( more ) => (
 					<Chip size="tiny" variant="standard" label={ `+${ more }` } clickable />
 				) }
@@ -156,39 +163,49 @@ function useOptions() {
 					color: isElements ? 'accent' : 'global',
 					icon: isElements ? <MapPinIcon /> : null,
 					provider: provider.getKey(),
-					// translators: %s is the plural label of the provider (e.g "Existing classes").
-					group: __( 'Existing %s', 'elementor' ).replace( '%s', provider.labels?.plural ?? '' ),
 				};
 			} );
 		} );
 }
 
-function useCreateActions( {
+function useCreateAction( {
 	pushAppliedId,
 	setActiveId,
 }: {
 	pushAppliedId: ( id: StyleDefinitionID ) => void;
 	setActiveId: ( id: StyleDefinitionID ) => void;
 } ) {
-	return useCreateActionsByProvider().map( ( [ provider, create ] ): Action< StyleDefOption > => {
-		return {
-			// translators: %s is the label of the new class.
-			label: ( value ) => __( 'Create "%s"', 'elementor' ).replace( '%s', value ),
-			// translators: %s is the singular label of css class provider (e.g "CSS Class").
-			group: __( 'Create a new %s', 'elementor' ).replace( '%s', provider.labels?.singular ?? '' ),
-			condition: ( _, inputValue ) => validateStyleLabel( inputValue ).isValid && ! hasReachedLimit( provider ),
-			apply: ( label ) => {
-				const createdId = create( label );
-
-				if ( ! createdId ) {
-					return;
-				}
+	const [ provider, createAction ] = useGetStylesRepositoryCreateAction() ?? [ null, null ];
+	if ( ! provider || ! createAction ) {
+		return {};
+	}
 
-				pushAppliedId( createdId );
-				setActiveId( createdId );
-			},
-		};
-	} );
+	const create = ( newClassLabel: string ) => {
+		const createdId = createAction( newClassLabel );
+
+		pushAppliedId( createdId );
+		setActiveId( createdId );
+	};
+
+	const validate = ( newClassLabel: string, event: ValidationEvent ): ValidationResult => {
+		if ( hasReachedLimit( provider ) ) {
+			return {
+				isValid: false,
+				errorMessage: __(
+					'You’ve reached the limit of 50 classes. Please remove an existing one to create a new class.',
+					'elementor'
+				),
+			};
+		}
+		return validateStyleLabel( newClassLabel, event );
+	};
+
+	const entityName =
+		provider.labels.singular && provider.labels.plural
+			? ( provider.labels as CreatableAutocompleteProps< StyleDefOption >[ 'entityName' ] )
+			: undefined;
+
+	return { create, validate, entityName };
 }
 
 function hasReachedLimit( provider: StylesProvider ) {

package/src/components/editing-panel-tabs.tsx

@@ -4,8 +4,9 @@ import { Divider, Stack, Tab, TabPanel, Tabs, useTabs } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useElement } from '../contexts/element-context';
+import { ScrollProvider } from '../contexts/scroll-context';
 import { SettingsTab } from './settings-tab';
-import { StyleTab } from './style-tab';
+import { stickyHeaderStyles, StyleTab } from './style-tab';
 
 type TabValue = 'settings' | 'style';
 
@@ -18,19 +19,23 @@ export const EditingPanelTabs = () => {
 		// When switching between elements, the local states should be reset. We are using key to rerender the tabs.
 		// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
 		<Fragment key={ element.id }>
-			<Stack direction="column" sx={ { width: '100%' } }>
-				<Tabs variant="fullWidth" size="small" sx={ { mt: 0.5 } } { ...getTabsProps() }>
-					<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />
-					<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />
-				</Tabs>
-				<Divider />
-				<TabPanel { ...getTabPanelProps( 'settings' ) } disablePadding>
-					<SettingsTab />
-				</TabPanel>
-				<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>
-					<StyleTab />
-				</TabPanel>
-			</Stack>
+			<ScrollProvider>
+				<Stack direction="column" sx={ { width: '100%' } }>
+					<Stack sx={ { ...stickyHeaderStyles, top: 0 } }>
+						<Tabs variant="fullWidth" size="small" sx={ { mt: 0.5 } } { ...getTabsProps() }>
+							<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />
+							<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />
+						</Tabs>
+						<Divider />
+					</Stack>
+					<TabPanel { ...getTabPanelProps( 'settings' ) } disablePadding>
+						<SettingsTab />
+					</TabPanel>
+					<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>
+						<StyleTab />
+					</TabPanel>
+				</Stack>
+			</ScrollProvider>
 		</Fragment>
 	);
 };