Components: Move kebabCase() function from block-editor package and mark it as private API

packages/block-editor/src/utils/object.js

@@ -1,37 +1,14 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { paramCase } from 'change-case';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
- * Converts any string to kebab case.
- * Backwards compatible with Lodash's `_.kebabCase()`.
- * Backwards compatible with `_wp_to_kebab_case()`.
- *
- * @see https://lodash.com/docs/4.17.15#kebabCase
- * @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/
- *
- * @param {string} str String to convert.
- * @return {string} Kebab-cased string
+ * Internal dependencies
  */
-export function kebabCase( str ) {
-	let input = str;
-	if ( typeof str !== 'string' ) {
-		input = str?.toString?.() ?? '';
-	}
+import { unlock } from '../lock-unlock';
 
-	// See https://github.com/lodash/lodash/blob/b185fcee26b2133bd071f4aaca14b455c2ed1008/lodash.js#L4970
-	input = input.replace( /['\u2019]/, '' );
-
-	return paramCase( input, {
-		splitRegexp: [
-			/(?!(?:1ST|2ND|3RD|[4-9]TH)(?![a-z]))([a-z0-9])([A-Z])/g, // fooBar => foo-bar, 3Bar => 3-bar
-			/(?!(?:1st|2nd|3rd|[4-9]th)(?![a-z]))([0-9])([a-z])/g, // 3bar => 3-bar
-			/([A-Za-z])([0-9])/g, // Foo3 => foo-3, foo3 => foo-3
-			/([A-Z])([A-Z][a-z])/g, // FOOBar => foo-bar
-		],
-	} );
-}
+export const { kebabCase } = unlock( componentsPrivateApis );
 
 /**
  * Immutably sets a value inside an object. Like `lodash#set`, but returning a

packages/block-editor/src/utils/test/object.js

@@ -1,102 +1,7 @@
 /**
  * Internal dependencies
  */
-import { kebabCase, setImmutably } from '../object';
-
-describe( 'kebabCase', () => {
-	it( 'separates lowercase letters, followed by uppercase letters', () => {
-		expect( kebabCase( 'fooBar' ) ).toEqual( 'foo-bar' );
-	} );
-
-	it( 'separates numbers, followed by uppercase letters', () => {
-		expect( kebabCase( '123FOO' ) ).toEqual( '123-foo' );
-	} );
-
-	it( 'separates numbers, followed by lowercase characters', () => {
-		expect( kebabCase( '123bar' ) ).toEqual( '123-bar' );
-	} );
-
-	it( 'separates uppercase letters, followed by numbers', () => {
-		expect( kebabCase( 'FOO123' ) ).toEqual( 'foo-123' );
-	} );
-
-	it( 'separates lowercase letters, followed by numbers', () => {
-		expect( kebabCase( 'foo123' ) ).toEqual( 'foo-123' );
-	} );
-
-	it( 'separates uppercase groups from capitalized groups', () => {
-		expect( kebabCase( 'FOOBar' ) ).toEqual( 'foo-bar' );
-	} );
-
-	it( 'removes any non-dash special characters', () => {
-		expect(
-			kebabCase( 'foo±§!@#$%^&*()-_=+/?.>,<\\|{}[]`~\'";:bar' )
-		).toEqual( 'foo-bar' );
-	} );
-
-	it( 'removes any spacing characters', () => {
-		expect( kebabCase( ' foo \t \n \r \f \v bar ' ) ).toEqual( 'foo-bar' );
-	} );
-
-	it( 'groups multiple dashes into a single one', () => {
-		expect( kebabCase( 'foo---bar' ) ).toEqual( 'foo-bar' );
-	} );
-
-	it( 'returns an empty string unchanged', () => {
-		expect( kebabCase( '' ) ).toEqual( '' );
-	} );
-
-	it( 'returns an existing kebab case string unchanged', () => {
-		expect( kebabCase( 'foo-123-bar' ) ).toEqual( 'foo-123-bar' );
-	} );
-
-	it( 'returns an empty string if any nullish type is passed', () => {
-		expect( kebabCase( undefined ) ).toEqual( '' );
-		expect( kebabCase( null ) ).toEqual( '' );
-	} );
-
-	it( 'converts any unexpected non-nullish type to a string', () => {
-		expect( kebabCase( 12345 ) ).toEqual( '12345' );
-		expect( kebabCase( [] ) ).toEqual( '' );
-		expect( kebabCase( {} ) ).toEqual( 'object-object' );
-	} );
-
-	/**
-	 * Should cover all test cases of `_wp_to_kebab_case()`.
-	 *
-	 * @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/
-	 * @see https://github.com/WordPress/wordpress-develop/blob/76376fdbc3dc0b3261de377dffc350677345e7ba/tests/phpunit/tests/functions/wpToKebabCase.php#L35-L62
-	 */
-	it.each( [
-		[ 'white', 'white' ],
-		[ 'white+black', 'white-black' ],
-		[ 'white:black', 'white-black' ],
-		[ 'white*black', 'white-black' ],
-		[ 'white.black', 'white-black' ],
-		[ 'white black', 'white-black' ],
-		[ 'white	black', 'white-black' ],
-		[ 'white-to-black', 'white-to-black' ],
-		[ 'white2white', 'white-2-white' ],
-		[ 'white2nd', 'white-2nd' ],
-		[ 'white2ndcolor', 'white-2-ndcolor' ],
-		[ 'white2ndColor', 'white-2nd-color' ],
-		[ 'white2nd_color', 'white-2nd-color' ],
-		[ 'white23color', 'white-23-color' ],
-		[ 'white23', 'white-23' ],
-		[ '23color', '23-color' ],
-		[ 'white4th', 'white-4th' ],
-		[ 'font2xl', 'font-2-xl' ],
-		[ 'whiteToWhite', 'white-to-white' ],
-		[ 'whiteTOwhite', 'white-t-owhite' ],
-		[ 'WHITEtoWHITE', 'whit-eto-white' ],
-		[ 42, '42' ],
-		[ "i've done", 'ive-done' ],
-		[ '#ffffff', 'ffffff' ],
-		[ '$ffffff', 'ffffff' ],
-	] )( 'converts %s properly to %s', ( input, expected ) => {
-		expect( kebabCase( input ) ).toEqual( expected );
-	} );
-} );
+import { setImmutably } from '../object';
 
 describe( 'setImmutably', () => {
 	describe( 'handling falsy values properly', () => {

packages/components/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Enhancements
 
+-   Move `kebabCase()` function from `block-editor` package and mark it as private API ([#56758](https://github.com/WordPress/gutenberg/pull/56758)).
 -   `FormToggle`: fix sass deprecation warning ([#56672](https://github.com/WordPress/gutenberg/pull/56672)).
 -   `QueryControls`: Add opt-in prop for 40px default size ([#56576](https://github.com/WordPress/gutenberg/pull/56576)).
 -   `CheckboxControl`: Add option to not render label ([#56158](https://github.com/WordPress/gutenberg/pull/56158)).

packages/components/src/private-apis.ts

@@ -42,6 +42,7 @@ import {
 import { ComponentsContext } from './context/context-system-provider';
 import Theme from './theme';
 import Tabs from './tabs';
+import { kebabCase } from './utils/strings';
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
@@ -81,4 +82,5 @@ lock( privateApis, {
 	DropdownMenuSeparatorV2Ariakit,
 	DropdownMenuItemLabelV2Ariakit,
 	DropdownMenuItemHelpTextV2Ariakit,
+	kebabCase,
 } );

packages/components/src/utils/strings.ts

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import removeAccents from 'remove-accents';
+import { paramCase } from 'change-case';
 
 const ALL_UNICODE_DASH_CHARACTERS = new RegExp(
 	`[${ [
@@ -71,6 +72,36 @@ export const normalizeTextString = ( value: string ): string => {
 		.replace( ALL_UNICODE_DASH_CHARACTERS, '-' );
 };
 
+/**
+ * Converts any string to kebab case.
+ * Backwards compatible with Lodash's `_.kebabCase()`.
+ * Backwards compatible with `_wp_to_kebab_case()`.
+ *
+ * @see https://lodash.com/docs/4.17.15#kebabCase
+ * @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/
+ *
+ * @param {string} str String to convert.
+ * @return {string} Kebab-cased string
+ */
+export function kebabCase( str: any ) {
+	let input = str;
+	if ( typeof str !== 'string' ) {
+		input = str?.toString?.() ?? '';
+	}
+
+	// See https://github.com/lodash/lodash/blob/b185fcee26b2133bd071f4aaca14b455c2ed1008/lodash.js#L4970
+	input = input.replace( /['\u2019]/, '' );
+
+	return paramCase( input, {
+		splitRegexp: [
+			/(?!(?:1ST|2ND|3RD|[4-9]TH)(?![a-z]))([a-z0-9])([A-Z])/g, // fooBar => foo-bar, 3Bar => 3-bar
+			/(?!(?:1st|2nd|3rd|[4-9]th)(?![a-z]))([0-9])([a-z])/g, // 3bar => 3-bar
+			/([A-Za-z])([0-9])/g, // Foo3 => foo-3, foo3 => foo-3
+			/([A-Z])([A-Z][a-z])/g, // FOOBar => foo-bar
+		],
+	} );
+}
+
 /**
  * Escapes the RegExp special characters.
  *

packages/components/src/utils/test/strings.js

@@ -1,7 +1,102 @@
 /**
  * Internal dependencies
  */
-import { normalizeTextString } from '../strings';
+import { kebabCase, normalizeTextString } from '../strings';
+
+describe( 'kebabCase', () => {
+	it( 'separates lowercase letters, followed by uppercase letters', () => {
+		expect( kebabCase( 'fooBar' ) ).toEqual( 'foo-bar' );
+	} );
+
+	it( 'separates numbers, followed by uppercase letters', () => {
+		expect( kebabCase( '123FOO' ) ).toEqual( '123-foo' );
+	} );
+
+	it( 'separates numbers, followed by lowercase characters', () => {
+		expect( kebabCase( '123bar' ) ).toEqual( '123-bar' );
+	} );
+
+	it( 'separates uppercase letters, followed by numbers', () => {
+		expect( kebabCase( 'FOO123' ) ).toEqual( 'foo-123' );
+	} );
+
+	it( 'separates lowercase letters, followed by numbers', () => {
+		expect( kebabCase( 'foo123' ) ).toEqual( 'foo-123' );
+	} );
+
+	it( 'separates uppercase groups from capitalized groups', () => {
+		expect( kebabCase( 'FOOBar' ) ).toEqual( 'foo-bar' );
+	} );
+
+	it( 'removes any non-dash special characters', () => {
+		expect(
+			kebabCase( 'foo±§!@#$%^&*()-_=+/?.>,<\\|{}[]`~\'";:bar' )
+		).toEqual( 'foo-bar' );
+	} );
+
+	it( 'removes any spacing characters', () => {
+		expect( kebabCase( ' foo \t \n \r \f \v bar ' ) ).toEqual( 'foo-bar' );
+	} );
+
+	it( 'groups multiple dashes into a single one', () => {
+		expect( kebabCase( 'foo---bar' ) ).toEqual( 'foo-bar' );
+	} );
+
+	it( 'returns an empty string unchanged', () => {
+		expect( kebabCase( '' ) ).toEqual( '' );
+	} );
+
+	it( 'returns an existing kebab case string unchanged', () => {
+		expect( kebabCase( 'foo-123-bar' ) ).toEqual( 'foo-123-bar' );
+	} );
+
+	it( 'returns an empty string if any nullish type is passed', () => {
+		expect( kebabCase( undefined ) ).toEqual( '' );
+		expect( kebabCase( null ) ).toEqual( '' );
+	} );
+
+	it( 'converts any unexpected non-nullish type to a string', () => {
+		expect( kebabCase( 12345 ) ).toEqual( '12345' );
+		expect( kebabCase( [] ) ).toEqual( '' );
+		expect( kebabCase( {} ) ).toEqual( 'object-object' );
+	} );
+
+	/**
+	 * Should cover all test cases of `_wp_to_kebab_case()`.
+	 *
+	 * @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/
+	 * @see https://github.com/WordPress/wordpress-develop/blob/76376fdbc3dc0b3261de377dffc350677345e7ba/tests/phpunit/tests/functions/wpToKebabCase.php#L35-L62
+	 */
+	it.each( [
+		[ 'white', 'white' ],
+		[ 'white+black', 'white-black' ],
+		[ 'white:black', 'white-black' ],
+		[ 'white*black', 'white-black' ],
+		[ 'white.black', 'white-black' ],
+		[ 'white black', 'white-black' ],
+		[ 'white	black', 'white-black' ],
+		[ 'white-to-black', 'white-to-black' ],
+		[ 'white2white', 'white-2-white' ],
+		[ 'white2nd', 'white-2nd' ],
+		[ 'white2ndcolor', 'white-2-ndcolor' ],
+		[ 'white2ndColor', 'white-2nd-color' ],
+		[ 'white2nd_color', 'white-2nd-color' ],
+		[ 'white23color', 'white-23-color' ],
+		[ 'white23', 'white-23' ],
+		[ '23color', '23-color' ],
+		[ 'white4th', 'white-4th' ],
+		[ 'font2xl', 'font-2-xl' ],
+		[ 'whiteToWhite', 'white-to-white' ],
+		[ 'whiteTOwhite', 'white-t-owhite' ],
+		[ 'WHITEtoWHITE', 'whit-eto-white' ],
+		[ 42, '42' ],
+		[ "i've done", 'ive-done' ],
+		[ '#ffffff', 'ffffff' ],
+		[ '$ffffff', 'ffffff' ],
+	] )( 'converts %s properly to %s', ( input, expected ) => {
+		expect( kebabCase( input ) ).toEqual( expected );
+	} );
+} );
 
 describe( 'normalizeTextString', () => {
 	it( 'should normalize hyphen-like characters to hyphens', () => {