@wordpress/components 19.14.0 → 19.15.0

package/src/tip/stories/index.tsx

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Tip from '..';
+
+const meta: ComponentMeta< typeof Tip > = {
+	component: Tip,
+	title: 'Components/Tip',
+	argTypes: {
+		children: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof Tip > = ( args ) => {
+	return <Tip { ...args } />;
+};
+
+export const Default: ComponentStory< typeof Tip > = Template.bind( {} );
+Default.args = {
+	children: 'An example tip',
+};

package/src/tip/types.ts

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type TipProps = {
+	/**
+	 * Children to render in the tip.
+	 */
+	children: ReactNode;
+};

package/src/toolbar-group/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { flatMap } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -92,7 +91,7 @@ function ToolbarGroup( {
 
 	return (
 		<ToolbarGroupContainer className={ finalClassName } { ...props }>
-			{ flatMap( controlSets, ( controlSet, indexOfSet ) =>
+			{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>
 				controlSet.map( ( control, indexOfControl ) => (
 					<ToolbarButton
 						key={ [ indexOfSet, indexOfControl ].join() }

package/src/tree-select/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { unescape as unescapeString, repeat, flatMap, compact } from 'lodash';
+import { unescape as unescapeString, compact } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -14,11 +14,11 @@ import { SelectControl } from '../select-control';
 import type { TreeSelectProps, Tree, SelectOptions } from './types';
 
 function getSelectOptions( tree: Tree[], level = 0 ): SelectOptions {
-	return flatMap( tree, ( treeNode ) => [
+	return tree.flatMap( ( treeNode ) => [
 		{
 			value: treeNode.id,
 			label:
-				repeat( '\u00A0', level * 3 ) + unescapeString( treeNode.name ),
+				'\u00A0'.repeat( level * 3 ) + unescapeString( treeNode.name ),
 		},
 		...getSelectOptions( treeNode.children || [], level + 1 ),
 	] );

package/src/ui/form-group/types.ts

@@ -7,7 +7,7 @@ import type { CSSProperties, ReactNode, ReactText } from 'react';
  * Internal dependencies
  */
 import type { Props as ControlLabelProps } from '../control-label/types';
-import type { Props as GridProps } from '../../grid/types';
+import type { GridProps } from '../../grid/types';
 
 export type FormGroupLabelProps = ControlLabelProps & {
 	labelHidden?: boolean;

package/src/ui/utils/get-valid-children.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ReactNode, ReactNodeArray } from 'react';
+import type { ReactNode, ReactChild, ReactFragment, ReactPortal } from 'react';
 
 /**
  * WordPress dependencies
@@ -15,7 +15,9 @@ import { Children, isValidElement } from '@wordpress/element';
  *
  * @return An array of available children.
  */
-export function getValidChildren( children: ReactNode ): ReactNodeArray {
+export function getValidChildren(
+	children: ReactNode
+): Array< ReactChild | ReactFragment | ReactPortal > {
 	if ( typeof children === 'string' ) return [ children ];
 
 	return Children.toArray( children ).filter( ( child ) =>

package/src/visually-hidden/{component.js → component.tsx}

@@ -1,15 +1,24 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * Internal dependencies
  */
-import { useContextSystem, contextConnect } from '../ui/context';
+import {
+	useContextSystem,
+	contextConnect,
+	WordPressComponentProps,
+} from '../ui/context';
 import { visuallyHidden } from './styles';
 import { View } from '../view';
+import type { VisuallyHiddenProps } from './types';
 
-/**
- * @param {import('../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                               forwardedRef
- */
-function VisuallyHidden( props, forwardedRef ) {
+function UnconnectedVisuallyHidden(
+	props: WordPressComponentProps< VisuallyHiddenProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const { style: styleProp, ...contextProps } = useContextSystem(
 		props,
 		'VisuallyHidden'
@@ -27,22 +36,21 @@ function VisuallyHidden( props, forwardedRef ) {
  * `VisuallyHidden` is a component used to render text intended to be visually
  * hidden, but will show for alternate devices, for example a screen reader.
  *
- * @example
  * ```jsx
  * import { VisuallyHidden } from `@wordpress/components`;
  *
  * function Example() {
- * 	return (
- * 		<VisuallyHidden>
- * 			<label>Code is Poetry</label>
- * 		</VisuallyHidden>
- * 	);
+ *   return (
+ *     <VisuallyHidden>
+ *       <label>Code is Poetry</label>
+ *     </VisuallyHidden>
+ *   );
  * }
  * ```
  */
-const ConnectedVisuallyHidden = contextConnect(
-	VisuallyHidden,
+export const VisuallyHidden = contextConnect(
+	UnconnectedVisuallyHidden,
 	'VisuallyHidden'
 );
 
-export default ConnectedVisuallyHidden;
+export default VisuallyHidden;

package/src/visually-hidden/stories/index.tsx

@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { VisuallyHidden } from '..';
+
+const meta: ComponentMeta< typeof VisuallyHidden > = {
+	component: VisuallyHidden,
+	title: 'Components/VisuallyHidden',
+	argTypes: {
+		children: { control: { type: null } },
+		as: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+export const Default: ComponentStory< typeof VisuallyHidden > = ( args ) => (
+	<>
+		<VisuallyHidden as="span" { ...args }>
+			This should not show.
+		</VisuallyHidden>
+		<div>
+			This text will{ ' ' }
+			<VisuallyHidden as="span" { ...args }>
+				but not inline{ ' ' }
+			</VisuallyHidden>{ ' ' }
+			always show.
+		</div>
+	</>
+);
+
+export const WithForwardedProps: ComponentStory< typeof VisuallyHidden > = (
+	args
+) => (
+	<>
+		Additional props can be passed to VisuallyHidden and are forwarded to
+		the rendered element.{ ' ' }
+		<VisuallyHidden as="span" data-id="test" { ...args }>
+			Check out my data attribute!{ ' ' }
+		</VisuallyHidden>
+		Inspect the HTML to see!
+	</>
+);
+
+export const WithAdditionalClassNames: ComponentStory<
+	typeof VisuallyHidden
+> = ( args ) => (
+	<>
+		Additional class names passed to VisuallyHidden extend the component
+		class name.{ ' ' }
+		<VisuallyHidden as="label" className="test-input" { ...args }>
+			Check out my class!{ ' ' }
+		</VisuallyHidden>
+		Inspect the HTML to see!
+	</>
+);

package/src/visually-hidden/{styles.js → styles.ts}

@@ -1,5 +1,9 @@
-/** @type {import('react').CSSProperties} */
-export const visuallyHidden = {
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+
+export const visuallyHidden: CSSProperties = {
 	border: 0,
 	clip: 'rect(1px, 1px, 1px, 1px)',
 	WebkitClipPath: 'inset( 50% )',

package/src/visually-hidden/test/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { VisuallyHidden } from '..';
+
+describe( 'VisuallyHidden', () => {
+	it( 'should render correctly', () => {
+		const text = 'This is hidden';
+		render( <VisuallyHidden>{ text }</VisuallyHidden> );
+		expect( screen.getByText( text ) ).toMatchSnapshot();
+	} );
+} );

package/src/visually-hidden/types.ts

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type VisuallyHiddenProps = {
+	/**
+	 * The children elements.
+	 */
+	children: ReactNode;
+};

package/tsconfig.json

@@ -87,6 +87,7 @@
 		"src/surface/**/*",
 		"src/text/**/*",
 		"src/text-control/**/*",
+		"src/text-highlight/**/*",
 		"src/textarea-control/**/*",
 		"src/tip/**/*",
 		"src/toggle-group-control/**/*",