@wordpress/block-editor 11.1.0 → 11.3.0

package/src/hooks/supports.js

@@ -0,0 +1,302 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
+import { Platform } from '@wordpress/element';
+
+const ALIGN_SUPPORT_KEY = 'align';
+const ALIGN_WIDE_SUPPORT_KEY = 'alignWide';
+const BORDER_SUPPORT_KEY = '__experimentalBorder';
+const COLOR_SUPPORT_KEY = 'color';
+const CUSTOM_CLASS_NAME_SUPPORT_KEY = 'customClassName';
+const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
+const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
+const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';
+/**
+ * Key within block settings' support array indicating support for font style.
+ */
+const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
+/**
+ * Key within block settings' support array indicating support for font weight.
+ */
+const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
+/**
+ * Key within block settings' supports array indicating support for text
+ * decorations e.g. settings found in `block.json`.
+ */
+const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
+/**
+ * Key within block settings' supports array indicating support for text
+ * transforms e.g. settings found in `block.json`.
+ */
+const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
+/**
+ * Key within block settings' supports array indicating support for letter-spacing
+ * e.g. settings found in `block.json`.
+ */
+const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
+const LAYOUT_SUPPORT_KEY = '__experimentalLayout';
+const TYPOGRAPHY_SUPPORT_KEYS = [
+	LINE_HEIGHT_SUPPORT_KEY,
+	FONT_SIZE_SUPPORT_KEY,
+	FONT_STYLE_SUPPORT_KEY,
+	FONT_WEIGHT_SUPPORT_KEY,
+	FONT_FAMILY_SUPPORT_KEY,
+	TEXT_DECORATION_SUPPORT_KEY,
+	TEXT_TRANSFORM_SUPPORT_KEY,
+	LETTER_SPACING_SUPPORT_KEY,
+];
+const SPACING_SUPPORT_KEY = 'spacing';
+const styleSupportKeys = [
+	...TYPOGRAPHY_SUPPORT_KEYS,
+	BORDER_SUPPORT_KEY,
+	COLOR_SUPPORT_KEY,
+	SPACING_SUPPORT_KEY,
+];
+
+/**
+ * Returns true if the block defines support for align.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasAlignSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, ALIGN_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for align, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getAlignSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, ALIGN_SUPPORT_KEY );
+
+/**
+ * Returns true if the block defines support for align wide.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasAlignWideSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, ALIGN_WIDE_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for align wide, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getAlignWideSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, ALIGN_WIDE_SUPPORT_KEY );
+
+/**
+ * Determine whether there is block support for border properties.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @param {string}        feature    Border feature to check support for.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasBorderSupport( nameOrType, feature = 'any' ) {
+	if ( Platform.OS !== 'web' ) {
+		return false;
+	}
+
+	const support = getBlockSupport( nameOrType, BORDER_SUPPORT_KEY );
+
+	if ( support === true ) {
+		return true;
+	}
+
+	if ( feature === 'any' ) {
+		return !! (
+			support?.color ||
+			support?.radius ||
+			support?.width ||
+			support?.style
+		);
+	}
+
+	return !! support?.[ feature ];
+}
+
+/**
+ * Get block support for border properties.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @param {string}        feature    Border feature to get.
+ *
+ * @return {unknown} The block support.
+ */
+export const getBorderSupport = ( nameOrType, feature ) =>
+	getBlockSupport( nameOrType, [ BORDER_SUPPORT_KEY, feature ] );
+
+/**
+ * Returns true if the block defines support for color.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasColorSupport = ( nameOrType ) => {
+	const colorSupport = getBlockSupport( nameOrType, COLOR_SUPPORT_KEY );
+	return (
+		colorSupport &&
+		( colorSupport.link === true ||
+			colorSupport.gradient === true ||
+			colorSupport.background !== false ||
+			colorSupport.text !== false )
+	);
+};
+
+/**
+ * Returns true if the block defines support for link color.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasLinkColorSupport = ( nameOrType ) => {
+	if ( Platform.OS !== 'web' ) {
+		return false;
+	}
+
+	const colorSupport = getBlockSupport( nameOrType, COLOR_SUPPORT_KEY );
+
+	return (
+		colorSupport !== null &&
+		typeof colorSupport === 'object' &&
+		!! colorSupport.link
+	);
+};
+
+/**
+ * Returns true if the block defines support for gradient color.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasGradientSupport = ( nameOrType ) => {
+	const colorSupport = getBlockSupport( nameOrType, COLOR_SUPPORT_KEY );
+
+	return (
+		colorSupport !== null &&
+		typeof colorSupport === 'object' &&
+		!! colorSupport.gradients
+	);
+};
+
+/**
+ * Returns true if the block defines support for background color.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasBackgroundColorSupport = ( nameOrType ) => {
+	const colorSupport = getBlockSupport( nameOrType, COLOR_SUPPORT_KEY );
+
+	return colorSupport && colorSupport.background !== false;
+};
+
+/**
+ * Returns true if the block defines support for background color.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasTextColorSupport = ( nameOrType ) => {
+	const colorSupport = getBlockSupport( nameOrType, COLOR_SUPPORT_KEY );
+
+	return colorSupport && colorSupport.text !== false;
+};
+
+/**
+ * Get block support for color properties.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @param {string}        feature    Color feature to get.
+ *
+ * @return {unknown} The block support.
+ */
+export const getColorSupport = ( nameOrType, feature ) =>
+	getBlockSupport( nameOrType, [ COLOR_SUPPORT_KEY, feature ] );
+
+/**
+ * Returns true if the block defines support for custom class name.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasCustomClassNameSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, CUSTOM_CLASS_NAME_SUPPORT_KEY, true );
+
+/**
+ * Returns the block support value for custom class name, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getCustomClassNameSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, CUSTOM_CLASS_NAME_SUPPORT_KEY, true );
+
+/**
+ * Returns true if the block defines support for font family.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasFontFamilySupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, FONT_FAMILY_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for font family, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getFontFamilySupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, FONT_FAMILY_SUPPORT_KEY );
+
+/**
+ * Returns true if the block defines support for font size.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasFontSizeSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, FONT_SIZE_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for font size, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getFontSizeSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, FONT_SIZE_SUPPORT_KEY );
+
+/**
+ * Returns true if the block defines support for layout.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasLayoutSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, LAYOUT_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for layout, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getLayoutSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, LAYOUT_SUPPORT_KEY );
+
+/**
+ * Returns true if the block defines support for style.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasStyleSupport = ( nameOrType ) =>
+	styleSupportKeys.some( ( key ) => hasBlockSupport( nameOrType, key ) );

package/src/hooks/test/__snapshots__/align.native.js.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Align options for group block sets Full width option 1`] = `
+"<!-- wp:group {\\"align\\":\\"full\\",\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
+<div class=\\"wp-block-group alignfull\\"></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Align options for group block sets None option 1`] = `
+"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
+<div class=\\"wp-block-group\\"></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Align options for group block sets Wide width option 1`] = `
+"<!-- wp:group {\\"align\\":\\"wide\\",\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
+<div class=\\"wp-block-group alignwide\\"></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Align options for media block sets Align center option 1`] = `
+"<!-- wp:image {\\"align\\":\\"center\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image aligncenter size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets Align left option 1`] = `
+"<!-- wp:image {\\"align\\":\\"left\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image alignleft size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets Align right option 1`] = `
+"<!-- wp:image {\\"align\\":\\"right\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image alignright size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets Full width option 1`] = `
+"<!-- wp:image {\\"align\\":\\"full\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image alignfull size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets None option 1`] = `
+"<!-- wp:image {\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets Wide width option 1`] = `
+"<!-- wp:image {\\"align\\":\\"wide\\",\\"id\\":1,\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
+<figure class=\\"wp-block-image alignwide size-large\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for text block sets Align text center option 1`] = `
+"<!-- wp:paragraph {\\"align\\":\\"center\\"} -->
+<p class=\\"has-text-align-center\\"></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Align options for text block sets Align text left option 1`] = `
+"<!-- wp:paragraph {\\"align\\":\\"left\\"} -->
+<p class=\\"has-text-align-left\\"></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Align options for text block sets Align text right option 1`] = `
+"<!-- wp:paragraph {\\"align\\":\\"right\\"} -->
+<p class=\\"has-text-align-right\\"></p>
+<!-- /wp:paragraph -->"
+`;

package/src/hooks/test/align.native.js

@@ -0,0 +1,133 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getEditorHtml,
+	initializeEditor,
+	getBlock,
+	fireEvent,
+	within,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+const imageHTML = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
+<!-- /wp:image -->`;
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Align options', () => {
+	describe( 'for media block', () => {
+		[
+			'None',
+			'Align left',
+			'Align center',
+			'Align right',
+			'Wide width',
+			'Full width',
+		].forEach( ( alignmentOption ) =>
+			it( `sets ${ alignmentOption } option`, async () => {
+				const screen = await initializeEditor( {
+					initialHtml: imageHTML,
+				} );
+				const { getByLabelText } = screen;
+
+				// Get Image block
+				const imageBlock = await getBlock( screen, 'Image' );
+				expect( imageBlock ).toBeVisible();
+				fireEvent.press( imageBlock );
+
+				// Open alignments menu
+				const alignmentButtons = getByLabelText( 'Align' );
+				fireEvent.press( alignmentButtons );
+
+				// Select alignment option.
+				fireEvent.press( await getByLabelText( alignmentOption ) );
+
+				expect( getEditorHtml() ).toMatchSnapshot();
+			} )
+		);
+	} );
+
+	describe( 'for text block', () => {
+		[ 'Align text left', 'Align text center', 'Align text right' ].forEach(
+			( alignmentOption ) =>
+				it( `sets ${ alignmentOption } option`, async () => {
+					const screen = await initializeEditor();
+					const { getByLabelText } = screen;
+
+					// Add Paragraph block
+					await addBlock( screen, 'Paragraph' );
+
+					// Get Paragraph block
+					const paragraphBlock = await getBlock(
+						screen,
+						'Paragraph'
+					);
+					expect( paragraphBlock ).toBeVisible();
+
+					// Open alignments menu
+					const alignmentButtons = getByLabelText( 'Align text' );
+					fireEvent.press( alignmentButtons );
+
+					// Select alignment option.
+					fireEvent.press( await getByLabelText( alignmentOption ) );
+
+					expect( getEditorHtml() ).toMatchSnapshot();
+				} )
+		);
+	} );
+
+	describe( 'for group block', () => {
+		[ 'None', 'Wide width', 'Full width' ].forEach( ( alignmentOption ) =>
+			it( `sets ${ alignmentOption } option`, async () => {
+				const screen = await initializeEditor();
+				const { getByLabelText } = screen;
+
+				// Add Group block
+				await addBlock( screen, 'Group' );
+
+				// Get Paragraph block
+				const groupBlock = await getBlock( screen, 'Group' );
+				expect( groupBlock ).toBeVisible();
+
+				// Trigger inner blocks layout
+				const innerBlockListWrapper = await within(
+					groupBlock
+				).findByTestId( 'block-list-wrapper' );
+				fireEvent( innerBlockListWrapper, 'layout', {
+					nativeEvent: {
+						layout: {
+							width: 300,
+						},
+					},
+				} );
+
+				// Open alignments menu
+				const alignmentButtons = getByLabelText( 'Align' );
+				fireEvent.press( alignmentButtons );
+
+				// Select alignment option.
+				fireEvent.press( await getByLabelText( alignmentOption ) );
+
+				expect( getEditorHtml() ).toMatchSnapshot();
+			} )
+		);
+	} );
+} );

package/src/hooks/test/utils.js

@@ -7,9 +7,113 @@ import { applyFilters } from '@wordpress/hooks';
  * Internal dependencies
  */
 import '../anchor';
+import { immutableSet } from '../utils';
 
 const noop = () => {};
 
+describe( 'immutableSet', () => {
+	describe( 'handling falsy values properly', () => {
+		it( 'should create a new object if `undefined` is passed', () => {
+			const result = immutableSet( undefined, 'test', 1 );
+
+			expect( result ).toEqual( { test: 1 } );
+		} );
+
+		it( 'should create a new object if `null` is passed', () => {
+			const result = immutableSet( null, 'test', 1 );
+
+			expect( result ).toEqual( { test: 1 } );
+		} );
+
+		it( 'should create a new object if `false` is passed', () => {
+			const result = immutableSet( false, 'test', 1 );
+
+			expect( result ).toEqual( { test: 1 } );
+		} );
+
+		it( 'should create a new object if `0` is passed', () => {
+			const result = immutableSet( 0, 'test', 1 );
+
+			expect( result ).toEqual( { test: 1 } );
+		} );
+
+		it( 'should create a new object if an empty string is passed', () => {
+			const result = immutableSet( '', 'test', 1 );
+
+			expect( result ).toEqual( { test: 1 } );
+		} );
+
+		it( 'should create a new object if a NaN is passed', () => {
+			const result = immutableSet( NaN, 'test', 1 );
+
+			expect( result ).toEqual( { test: 1 } );
+		} );
+	} );
+
+	describe( 'manages data assignment properly', () => {
+		it( 'assigns value properly when it does not exist', () => {
+			const result = immutableSet( {}, 'test', 1 );
+
+			expect( result ).toEqual( { test: 1 } );
+		} );
+
+		it( 'overrides existing values', () => {
+			const result = immutableSet( { test: 1 }, 'test', 2 );
+
+			expect( result ).toEqual( { test: 2 } );
+		} );
+
+		describe( 'with array notation access', () => {
+			it( 'assigns values at deeper levels', () => {
+				const result = immutableSet( {}, [ 'foo', 'bar', 'baz' ], 5 );
+
+				expect( result ).toEqual( { foo: { bar: { baz: 5 } } } );
+			} );
+
+			it( 'overrides existing values at deeper levels', () => {
+				const result = immutableSet(
+					{ foo: { bar: { baz: 1 } } },
+					[ 'foo', 'bar', 'baz' ],
+					5
+				);
+
+				expect( result ).toEqual( { foo: { bar: { baz: 5 } } } );
+			} );
+
+			it( 'keeps other properties intact', () => {
+				const result = immutableSet(
+					{ foo: { bar: { baz: 1 } } },
+					[ 'foo', 'bar', 'test' ],
+					5
+				);
+
+				expect( result ).toEqual( {
+					foo: { bar: { baz: 1, test: 5 } },
+				} );
+			} );
+		} );
+	} );
+
+	describe( 'does not mutate the original object', () => {
+		it( 'clones the object at the first level', () => {
+			const input = {};
+			const result = immutableSet( input, 'test', 1 );
+
+			expect( result ).not.toBe( input );
+		} );
+
+		it( 'clones the object at deeper levels', () => {
+			const input = { foo: { bar: { baz: 1 } } };
+			const result = immutableSet( input, [ 'foo', 'bar', 'baz' ], 2 );
+
+			expect( result ).not.toBe( input );
+			expect( result.foo ).not.toBe( input.foo );
+			expect( result.foo.bar ).not.toBe( input.foo.bar );
+			expect( result.foo.bar.baz ).not.toBe( input.foo.bar.baz );
+		} );
+	} );
+} );
+
 describe( 'anchor', () => {
 	const blockSettings = {
 		save: noop,

package/src/hooks/typography.js

@@ -111,7 +111,7 @@ export function TypographyPanel( props ) {
 	} );
 
 	return (
-		<InspectorControls __experimentalGroup="typography">
+		<InspectorControls group="typography">
 			{ ! isFontFamilyDisabled && (
 				<ToolsPanelItem
 					hasValue={ () => hasFontFamilyValue( props ) }

package/src/hooks/use-color-props.js

@@ -92,9 +92,9 @@ export function useColorProps( attributes ) {
 	// Some color settings have a special handling for deprecated flags in `useSetting`,
 	// so we can't unwrap them by doing const { ... } = useSetting('color')
 	// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.
-	const userPalette = useSetting( 'color.palette.custom' ) || [];
-	const themePalette = useSetting( 'color.palette.theme' ) || [];
-	const defaultPalette = useSetting( 'color.palette.default' ) || [];
+	const userPalette = useSetting( 'color.palette.custom' );
+	const themePalette = useSetting( 'color.palette.theme' );
+	const defaultPalette = useSetting( 'color.palette.default' );
 	const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
 	const colors = useMemo(
 		() => [