@wordpress/components 25.13.0 → 25.15.1-next.79a6196f.0

package/src/tooltip/types.ts

@@ -59,3 +59,7 @@ export type TooltipProps = {
 	 */
 	text?: string;
 };
+
+export type TooltipInternalContext = {
+	isNestedInTooltip?: boolean;
+};

package/src/tree-grid/README.md

@@ -3,10 +3,6 @@
 <div class="callout callout-alert">
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
 
 ## Development guidelines
 

package/src/truncate/README.md

@@ -24,6 +24,14 @@ function Example() {
 
 ## Props
 
+##### `children`: `ReactNode`
+
+The children elements.
+
+Note: text truncation will be attempted only if the `children` are either of type `string` or `number`. In any other scenarios, the component will not attempt to truncate the text, and will pass through the `children`.
+
+-   Required: Yes
+
 ##### `ellipsis`: `string`
 
 The ellipsis string when truncating the text by the `limit` prop's value.

package/src/truncate/hook.ts

@@ -33,17 +33,24 @@ export default function useTruncate(
 
 	const cx = useCx();
 
-	const truncatedContent = truncateContent(
-		typeof children === 'string' ? children : '',
-		{
-			ellipsis,
-			ellipsizeMode,
-			limit,
-			numberOfLines,
-		}
-	);
+	let childrenAsText;
+	if ( typeof children === 'string' ) {
+		childrenAsText = children;
+	} else if ( typeof children === 'number' ) {
+		childrenAsText = children.toString();
+	}
 
-	const shouldTruncate = ellipsizeMode === TRUNCATE_TYPE.auto;
+	const truncatedContent = childrenAsText
+		? truncateContent( childrenAsText, {
+				ellipsis,
+				ellipsizeMode,
+				limit,
+				numberOfLines,
+		  } )
+		: children;
+
+	const shouldTruncate =
+		!! childrenAsText && ellipsizeMode === TRUNCATE_TYPE.auto;
 
 	const classes = useMemo( () => {
 		const truncateLines = css`

package/src/truncate/test/index.tsx

@@ -8,36 +8,63 @@ import { render, screen } from '@testing-library/react';
  */
 import { Truncate } from '..';
 
-describe( 'props', () => {
-	test( 'should render correctly', () => {
-		render( <Truncate>Lorem ipsum.</Truncate> );
-		expect( screen.getByText( 'Lorem ipsum.' ) ).toBeVisible();
-	} );
+describe( 'Truncate', () => {
+	describe( 'with string or number children', () => {
+		test( 'should pass through when no truncation props are set', () => {
+			render( <Truncate>Lorem ipsum</Truncate> );
+			expect( screen.getByText( 'Lorem ipsum' ) ).toBeVisible();
+		} );
 
-	test( 'should render limit', () => {
-		render(
-			<Truncate limit={ 1 } ellipsizeMode="tail">
-				Lorem ipsum.
-			</Truncate>
-		);
-		expect( screen.getByText( 'L…' ) ).toBeVisible();
-	} );
+		test( 'should render numbers correctly', () => {
+			render( <Truncate>{ 14 }</Truncate> );
+			expect( screen.getByText( '14' ) ).toBeVisible();
+		} );
+
+		test( 'should truncate text from the start when the limit prop is set and the ellipsizeMode is tail', () => {
+			render(
+				<Truncate limit={ 1 } ellipsizeMode="tail">
+					Lorem ipsum
+				</Truncate>
+			);
+			expect( screen.getByText( 'L…' ) ).toBeVisible();
+		} );
+
+		test( 'should truncate text from the end when the limit prop is set and the ellipsizeMode is head', () => {
+			render(
+				<Truncate limit={ 1 } ellipsizeMode="head">
+					Lorem ipsum
+				</Truncate>
+			);
+			expect( screen.getByText( '…m' ) ).toBeVisible();
+		} );
+
+		test( 'should render custom ellipsis', () => {
+			render(
+				<Truncate ellipsis="!!!" limit={ 5 } ellipsizeMode="tail">
+					Lorem ipsum.
+				</Truncate>
+			);
+			expect( screen.getByText( 'Lorem!!!' ) ).toBeVisible();
+		} );
 
-	test( 'should render custom ellipsis', () => {
-		render(
-			<Truncate ellipsis="!!!" limit={ 5 } ellipsizeMode="tail">
-				Lorem ipsum.
-			</Truncate>
-		);
-		expect( screen.getByText( 'Lorem!!!' ) ).toBeVisible();
+		test( 'should render custom ellipsizeMode', () => {
+			render(
+				<Truncate ellipsis="!!!" ellipsizeMode="middle" limit={ 5 }>
+					Lorem ipsum.
+				</Truncate>
+			);
+			expect( screen.getByText( 'Lo!!!m.' ) ).toBeVisible();
+		} );
 	} );
 
-	test( 'should render custom ellipsizeMode', () => {
-		render(
-			<Truncate ellipsis="!!!" ellipsizeMode="middle" limit={ 5 }>
-				Lorem ipsum.
-			</Truncate>
-		);
-		expect( screen.getByText( 'Lo!!!m.' ) ).toBeVisible();
+	describe( 'with other children types', () => {
+		test( 'should no-op and output a warning to console', () => {
+			render(
+				<Truncate>
+					<>Lorem ipsum</>
+				</Truncate>
+			);
+			expect( screen.getByText( 'Lorem ipsum' ) ).toBeVisible();
+		} );
 	} );
 } );

package/src/truncate/types.ts

@@ -48,6 +48,10 @@ export type TruncateProps = {
 	numberOfLines?: number;
 	/**
 	 * The children elements.
+	 *
+	 * Note: text truncation will be attempted only if the `children` are either
+	 * of type `string` or `number`. In any other scenarios, the component will
+	 * not attempt to truncate the text, and will pass through the `children`.
 	 */
 	children: ReactNode;
 };

package/src/unit-control/index.tsx

@@ -188,7 +188,7 @@ function UnforwardedUnitControl(
 			isUnitSelectTabbable={ isUnitSelectTabbable }
 			onChange={ handleOnUnitChange }
 			size={
-				size === 'small' ||
+				[ 'small', 'compact' ].includes( size ) ||
 				( size === 'default' && ! props.__next40pxDefaultSize )
 					? 'small'
 					: 'default'

package/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,12 +72,39 @@ 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 str String to convert.
+ * @return Kebab-cased string
+ */
+export function kebabCase( str: unknown ) {
+	let 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.
  *
- * @param {string} string Input string.
+ * @param string Input string.
  *
- * @return {string} Regex-escaped string.
+ * @return Regex-escaped string.
  */
 export function escapeRegExp( string: string ): string {
 	return string.replace( /[\\^$.*+?()[\]{}|]/g, '\\$&' );

package/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', () => {