@wordpress/components 25.6.1 → 25.8.0

package/src/tooltip/test/index.tsx

@@ -0,0 +1,335 @@
+/**
+ * External dependencies
+ */
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { shortcutAriaLabel } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import Modal from '../../modal';
+import Tooltip, { TOOLTIP_DELAY } from '..';
+import cleanupTooltip from './utils/';
+
+const props = {
+	children: <Button>Button</Button>,
+	text: 'tooltip text',
+};
+
+describe( 'Tooltip', () => {
+	it( 'should not render the tooltip if multiple children are passed', async () => {
+		render(
+			// expected TS error since Tooltip cannot have more than one child element
+			// @ts-expect-error
+			<Tooltip { ...props }>
+				<Button>This is a button</Button>
+				<Button>This is another button</Button>
+			</Tooltip>
+		);
+
+		expect(
+			screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'should not render the tooltip if there is no focus', () => {
+		render( <Tooltip { ...props } /> );
+
+		expect(
+			screen.getByRole( 'button', { name: /Button/i } )
+		).toBeVisible();
+
+		expect(
+			screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'should render the tooltip when focusing on the tooltip anchor via tab', async () => {
+		const user = userEvent.setup();
+
+		render( <Tooltip { ...props } /> );
+
+		await user.tab();
+
+		expect(
+			screen.getByRole( 'button', { name: /Button/i } )
+		).toHaveFocus();
+
+		expect(
+			await screen.findByRole( 'tooltip', { name: /tooltip text/i } )
+		).toBeVisible();
+
+		await cleanupTooltip( user );
+	} );
+
+	it( 'should render the tooltip when the tooltip anchor is hovered', async () => {
+		const user = userEvent.setup();
+
+		render( <Tooltip { ...props } /> );
+
+		await user.hover( screen.getByRole( 'button', { name: /Button/i } ) );
+
+		expect(
+			await screen.findByRole( 'tooltip', { name: /tooltip text/i } )
+		).toBeVisible();
+
+		await cleanupTooltip( user );
+	} );
+
+	it( 'should not show tooltip on focus as result of mouse click', async () => {
+		const user = userEvent.setup();
+
+		render( <Tooltip { ...props } /> );
+
+		await user.click( screen.getByRole( 'button', { name: /Button/i } ) );
+
+		expect(
+			screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
+		).not.toBeInTheDocument();
+
+		await cleanupTooltip( user );
+	} );
+
+	it( 'should respect custom delay prop when showing tooltip', async () => {
+		const user = userEvent.setup();
+		const ADDITIONAL_DELAY = 100;
+
+		render(
+			<Tooltip { ...props } delay={ TOOLTIP_DELAY + ADDITIONAL_DELAY } />
+		);
+
+		await user.hover( screen.getByRole( 'button', { name: /Button/i } ) );
+
+		// Advance time by default delay
+		await new Promise( ( resolve ) =>
+			setTimeout( resolve, TOOLTIP_DELAY )
+		);
+
+		// Tooltip hasn't appeared yet
+		expect(
+			screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
+		).not.toBeInTheDocument();
+
+		// wait for additional delay for tooltip to appear
+		await waitFor(
+			() =>
+				new Promise( ( resolve ) =>
+					setTimeout( resolve, ADDITIONAL_DELAY )
+				)
+		);
+
+		expect(
+			screen.getByRole( 'tooltip', { name: /tooltip text/i } )
+		).toBeVisible();
+
+		await cleanupTooltip( user );
+	} );
+
+	it( 'should show tooltip when an element is disabled', async () => {
+		const user = userEvent.setup();
+
+		render(
+			<Tooltip { ...props }>
+				<Button aria-disabled>Button</Button>
+			</Tooltip>
+		);
+
+		const button = screen.getByRole( 'button', { name: /Button/i } );
+
+		expect( button ).toBeVisible();
+		expect( button ).toHaveAttribute( 'aria-disabled' );
+
+		await user.hover( button );
+
+		expect(
+			await screen.findByRole( 'tooltip', { name: /tooltip text/i } )
+		).toBeVisible();
+
+		await cleanupTooltip( user );
+	} );
+
+	it( 'should not show tooltip if the mouse leaves the tooltip anchor before set delay', async () => {
+		const user = userEvent.setup();
+		const onMouseEnterMock = jest.fn();
+		const onMouseLeaveMock = jest.fn();
+		const MOUSE_LEAVE_DELAY = TOOLTIP_DELAY - 200;
+
+		render(
+			<>
+				<Tooltip { ...props }>
+					<Button
+						onMouseEnter={ onMouseEnterMock }
+						onMouseLeave={ onMouseLeaveMock }
+					>
+						Button 1
+					</Button>
+				</Tooltip>
+				<Button>Button 2</Button>
+			</>
+		);
+
+		await user.hover(
+			screen.getByRole( 'button', {
+				name: 'Button 1',
+			} )
+		);
+
+		// Tooltip hasn't appeared yet
+		expect(
+			screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
+		).not.toBeInTheDocument();
+		expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
+
+		// Advance time by MOUSE_LEAVE_DELAY time
+		await new Promise( ( resolve ) =>
+			setTimeout( resolve, MOUSE_LEAVE_DELAY )
+		);
+
+		expect(
+			screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
+		).not.toBeInTheDocument();
+
+		// Hover the other button, meaning that the mouse will leave the tooltip anchor
+		await user.hover(
+			screen.getByRole( 'button', {
+				name: 'Button 2',
+			} )
+		);
+
+		// Tooltip still hasn't appeared yet
+		expect(
+			screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
+		).not.toBeInTheDocument();
+		expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
+		expect( onMouseLeaveMock ).toHaveBeenCalledTimes( 1 );
+
+		// Advance time again, so that we reach the full TOOLTIP_DELAY time
+		await new Promise( ( resolve ) =>
+			setTimeout( resolve, TOOLTIP_DELAY )
+		);
+
+		// Tooltip won't show, since the mouse has left the tooltip anchor
+		expect(
+			screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
+		).not.toBeInTheDocument();
+
+		await cleanupTooltip( user );
+	} );
+
+	it( 'should render the shortcut display text when a string is passed as the shortcut', async () => {
+		const user = userEvent.setup();
+
+		render( <Tooltip { ...props } shortcut="shortcut text" /> );
+
+		await user.hover( screen.getByRole( 'button', { name: /Button/i } ) );
+
+		await waitFor( () =>
+			expect( screen.getByText( 'shortcut text' ) ).toBeVisible()
+		);
+
+		await cleanupTooltip( user );
+	} );
+
+	it( 'should render the keyboard shortcut display text and aria-label when an object is passed as the shortcut', async () => {
+		const user = userEvent.setup();
+
+		render(
+			<Tooltip
+				{ ...props }
+				shortcut={ {
+					display: '⇧⌘,',
+					ariaLabel: shortcutAriaLabel.primaryShift( ',' ),
+				} }
+			/>
+		);
+
+		await user.hover( screen.getByRole( 'button', { name: /Button/i } ) );
+
+		await waitFor( () =>
+			expect( screen.getByText( '⇧⌘,' ) ).toBeVisible()
+		);
+
+		expect( screen.getByText( '⇧⌘,' ) ).toHaveAttribute(
+			'aria-label',
+			'Control + Shift + Comma'
+		);
+
+		await cleanupTooltip( user );
+	} );
+
+	it( 'esc should close modal even when tooltip is visible', async () => {
+		const user = userEvent.setup();
+		const onRequestClose = jest.fn();
+		render(
+			<Modal onRequestClose={ onRequestClose }>
+				<p>Modal content</p>
+			</Modal>
+		);
+
+		expect(
+			screen.queryByRole( 'tooltip', { name: /close/i } )
+		).not.toBeInTheDocument();
+
+		await user.hover(
+			screen.getByRole( 'button', {
+				name: /Close/i,
+			} )
+		);
+
+		await waitFor( () =>
+			expect(
+				screen.getByRole( 'tooltip', { name: /close/i } )
+			).toBeVisible()
+		);
+
+		await user.keyboard( '[Escape]' );
+
+		expect( onRequestClose ).toHaveBeenCalled();
+
+		await cleanupTooltip( user );
+	} );
+
+	it( 'should associate the tooltip text with its anchor via the accessible description when visible', async () => {
+		const user = userEvent.setup();
+
+		render( <Tooltip { ...props } /> );
+
+		await user.hover(
+			screen.getByRole( 'button', {
+				name: /Button/i,
+			} )
+		);
+
+		expect(
+			await screen.findByRole( 'button', { description: 'tooltip text' } )
+		).toBeInTheDocument();
+	} );
+
+	it( 'should not hide tooltip when the anchor is clicked if hideOnClick is false', async () => {
+		const user = userEvent.setup();
+
+		render( <Tooltip { ...props } hideOnClick={ false } /> );
+
+		const button = screen.getByRole( 'button', { name: /Button/i } );
+
+		await user.hover( button );
+
+		expect(
+			await screen.findByRole( 'tooltip', { name: /tooltip text/i } )
+		).toBeVisible();
+
+		await user.click( button );
+
+		expect(
+			screen.getByRole( 'tooltip', { name: /tooltip text/i } )
+		).toBeVisible();
+
+		await cleanupTooltip( user );
+	} );
+} );

package/src/tooltip/test/utils/index.tsx

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import type { UserEvent } from '@testing-library/user-event/dist/types/setup/setup';
+
+// TODO: may need to be tested with Playwright; further context:
+// https://github.com/WordPress/gutenberg/pull/52133#issuecomment-1613691258
+// below workaround ensures tooltip is umounted after each test to prevent leaking
+// similarly to ariakit tooltip tests: https://github.com/ariakit/ariakit/blob/249d376e41115e6d4ceba244e231a95fa457bd04/examples/tooltip/test.ts#L12-L14
+
+/**
+ * Ensures the async behaviors and animations in tooltip complete
+ * to avoid leaking into other tests
+ *
+ */
+export default async function cleanupTooltip( user: UserEvent ) {
+	await user.tab();
+	await user.tab();
+	await user.click( document.body );
+}

package/src/tooltip/types.ts

@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import type { Placement } from '@floating-ui/react-dom';
+
+/**
+ * Internal dependencies
+ */
+import type { PopoverProps } from '../popover/types';
+import type { ShortcutProps } from '../shortcut/types';
+
+export type TooltipProps = {
+	/**
+	 * The anchor for the tooltip.
+	 *
+	 * **Note**: Accepts only one child element.
+	 */
+	children: React.ReactElement;
+	/**
+	 * Option to hide the tooltip when the anchor is clicked.
+	 *
+	 * @default true
+	 */
+	hideOnClick?: boolean;
+	/**
+	 * The amount of time in milliseconds to wait before showing the tooltip.
+	 *
+	 * @default 700
+	 */
+	delay?: number;
+	/**
+	 * Where the tooltip should be positioned relative to its parent.
+	 *
+	 * @default bottom
+	 */
+	placement?: Placement;
+	/**
+	 * _Note: this prop is deprecated. Please use the `placement` prop instead._
+	 *
+	 * Legacy way of specifying the tooltip's position relative to its parent.
+	 *
+	 * Specify y- and x-axis as a space-separated string. Supports `"top"`,
+	 * `"bottom"` y axis, and `"left"`, `"center"`, `"right"` x axis.
+	 *
+	 * @deprecated
+	 * @default bottom
+	 */
+	position?: PopoverProps[ 'position' ];
+	/**
+	 * An option for adding accessible keyboard shortcuts.
+	 *
+	 * If shortcut is a string, it is expecting the display text. If shortcut is an
+	 * object, it will accept the properties of `display` (string) and `ariaLabel`
+	 * (string).
+	 */
+	shortcut?: ShortcutProps[ 'shortcut' ];
+	/**
+	 * The text shown in the tooltip when anchor element is focused or hovered.
+	 */
+	text?: string;
+};

package/src/tree-grid/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -15,9 +15,11 @@ import TreeGrid, { TreeGridRow, TreeGridCell } from '..';
 import { Button } from '../../button';
 import InputControl from '../../input-control';
 
-const meta: ComponentMeta< typeof TreeGrid > = {
+const meta: Meta< typeof TreeGrid > = {
 	title: 'Components (Experimental)/TreeGrid',
 	component: TreeGrid,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { TreeGridRow, TreeGridCell },
 	argTypes: {
 		children: { control: { type: null } },
 	},
@@ -133,7 +135,7 @@ const Rows = ( {
 	);
 };
 
-const Template: ComponentStory< typeof TreeGrid > = ( args ) => (
+const Template: StoryFn< typeof TreeGrid > = ( args ) => (
 	<TreeGrid { ...args } />
 );
 

package/src/tree-select/index.tsx

@@ -27,7 +27,6 @@ function getSelectOptions(
 /**
  * TreeSelect component is used to generate select input fields.
  *
- * @example
  * ```jsx
  * import { TreeSelect } from '@wordpress/components';
  * import { useState } from '@wordpress/element';

package/src/tree-select/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ComponentProps } from 'react';
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import TreeSelect from '../';
 
-const meta: ComponentMeta< typeof TreeSelect > = {
+const meta: Meta< typeof TreeSelect > = {
 	title: 'Components/TreeSelect',
 	component: TreeSelect,
 	argTypes: {
@@ -33,7 +33,7 @@ const meta: ComponentMeta< typeof TreeSelect > = {
 
 export default meta;
 
-const TreeSelectWithState: ComponentStory< typeof TreeSelect > = ( props ) => {
+const TreeSelectWithState: StoryFn< typeof TreeSelect > = ( props ) => {
 	const [ selection, setSelection ] =
 		useState< ComponentProps< typeof TreeSelect >[ 'selectedId' ] >();
 

package/src/truncate/stories/index.story.tsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { Truncate } from '..';
 
-const meta: ComponentMeta< typeof Truncate > = {
+const meta: Meta< typeof Truncate > = {
 	component: Truncate,
 	title: 'Components (Experimental)/Truncate',
 	argTypes: {
@@ -27,19 +27,17 @@ export default meta;
 const defaultText =
 	'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt. Duis semper dui id augue malesuada, ut feugiat nisi aliquam. Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel. In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada ultricies eros ut faucibus. Aliquam erat volutpat. Nulla nec feugiat risus. Vivamus iaculis dui aliquet ante ultricies feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus nec pretium velit, sit amet consectetur ante. Praesent porttitor ex eget fermentum mattis.';
 
-const Template: ComponentStory< typeof Truncate > = ( args ) => {
+const Template: StoryFn< typeof Truncate > = ( args ) => {
 	return <Truncate { ...args } />;
 };
 
-export const Default: ComponentStory< typeof Truncate > = Template.bind( {} );
+export const Default: StoryFn< typeof Truncate > = Template.bind( {} );
 Default.args = {
 	numberOfLines: 2,
 	children: defaultText,
 };
 
-export const CharacterCount: ComponentStory< typeof Truncate > = Template.bind(
-	{}
-);
+export const CharacterCount: StoryFn< typeof Truncate > = Template.bind( {} );
 CharacterCount.args = {
 	limit: 23,
 	children: defaultText,

package/src/ui/context/context-connect.ts

@@ -18,7 +18,7 @@ import type { WordPressComponentFromProps } from '.';
 
 type AcceptsTwoArgs<
 	F extends ( ...args: any ) => any,
-	ErrorMessage = never
+	ErrorMessage = never,
 > = Parameters< F >[ 'length' ] extends 2 ? {} : ErrorMessage;
 
 type ContextConnectOptions = {
@@ -34,7 +34,7 @@ type ContextConnectOptions = {
  * @return The connected WordPressComponent
  */
 export function contextConnect<
-	C extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null
+	C extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null,
 >(
 	Component: C &
 		AcceptsTwoArgs<
@@ -66,7 +66,7 @@ export function contextConnectWithoutRef< P >(
 // component wrappers.
 function _contextConnect<
 	C extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null,
-	O extends ContextConnectOptions
+	O extends ContextConnectOptions,
 >(
 	Component: C,
 	namespace: string,

package/src/ui/context/wordpress-component.ts

@@ -10,11 +10,11 @@ export type WordPressComponentProps<
 	/** The HTML element to inherit props from. */
 	T extends React.ElementType,
 	/** Supports polymorphism through the `as` prop. */
-	IsPolymorphic extends boolean = true
+	IsPolymorphic extends boolean = true,
 > = P &
 	// The `children` prop is being explicitly omitted since it is otherwise implicitly added
 	// by `ComponentPropsWithRef`. The context is that components should require the `children`
-	// prop explicitely when needed (see https://github.com/WordPress/gutenberg/pull/31817).
+	// prop explicitly when needed (see https://github.com/WordPress/gutenberg/pull/31817).
 	Omit< React.ComponentPropsWithoutRef< T >, 'as' | keyof P | 'children' > &
 	( IsPolymorphic extends true
 		? {
@@ -26,7 +26,7 @@ export type WordPressComponentProps<
 export type WordPressComponent<
 	T extends React.ElementType,
 	O,
-	IsPolymorphic extends boolean
+	IsPolymorphic extends boolean,
 > = {
 	< TT extends React.ElementType >(
 		props: WordPressComponentProps< O, TT, IsPolymorphic > &
@@ -49,7 +49,7 @@ export type WordPressComponent<
 
 export type WordPressComponentFromProps<
 	Props,
-	ForwardsRef extends boolean = true
+	ForwardsRef extends boolean = true,
 > = Props extends WordPressComponentProps< infer P, infer T, infer I >
 	? WordPressComponent<
 			T,

package/src/unit-control/index.tsx

@@ -76,10 +76,15 @@ function UnforwardedUnitControl(
 			unitsProp
 		);
 		const [ { value: firstUnitValue = '' } = {}, ...rest ] = list;
-		const firstCharacters = rest.reduce( ( carry, { value } ) => {
-			const first = escapeRegExp( value?.substring( 0, 1 ) || '' );
-			return carry.includes( first ) ? carry : `${ carry }|${ first }`;
-		}, escapeRegExp( firstUnitValue.substring( 0, 1 ) ) );
+		const firstCharacters = rest.reduce(
+			( carry, { value } ) => {
+				const first = escapeRegExp( value?.substring( 0, 1 ) || '' );
+				return carry.includes( first )
+					? carry
+					: `${ carry }|${ first }`;
+			},
+			escapeRegExp( firstUnitValue.substring( 0, 1 ) )
+		);
 		return [ list, new RegExp( `^(?:${ firstCharacters })$`, 'i' ) ];
 	}, [ nonNullValueProp, unitProp, unitsProp ] );
 	const [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(
@@ -223,7 +228,6 @@ function UnforwardedUnitControl(
  * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).
  *
  *
- * @example
  * ```jsx
  * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
  * import { useState } from '@wordpress/element';

package/src/unit-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import { UnitControl } from '../';
 import { CSS_UNITS } from '../utils';
 
-const meta: ComponentMeta< typeof UnitControl > = {
+const meta: Meta< typeof UnitControl > = {
 	component: UnitControl,
 	title: 'Components (Experimental)/UnitControl',
 	argTypes: {
@@ -35,7 +35,7 @@ const meta: ComponentMeta< typeof UnitControl > = {
 };
 export default meta;
 
-const DefaultTemplate: ComponentStory< typeof UnitControl > = ( {
+const DefaultTemplate: StoryFn< typeof UnitControl > = ( {
 	onChange,
 	...args
 } ) => {
@@ -53,8 +53,9 @@ const DefaultTemplate: ComponentStory< typeof UnitControl > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof UnitControl > =
-	DefaultTemplate.bind( {} );
+export const Default: StoryFn< typeof UnitControl > = DefaultTemplate.bind(
+	{}
+);
 Default.args = {
 	label: 'Label',
 };
@@ -64,7 +65,7 @@ Default.args = {
  * will not fire while a new value is typed in the input field (you can verify this
  * behavior by inspecting the console's output).
  */
-export const PressEnterToChange: ComponentStory< typeof UnitControl > =
+export const PressEnterToChange: StoryFn< typeof UnitControl > =
 	DefaultTemplate.bind( {} );
 PressEnterToChange.args = {
 	...Default.args,
@@ -75,7 +76,7 @@ PressEnterToChange.args = {
  * Most of `NumberControl`'s props can be passed to `UnitControl`, and they will
  * affect its numeric input field.
  */
-export const TweakingTheNumberInput: ComponentStory< typeof UnitControl > =
+export const TweakingTheNumberInput: StoryFn< typeof UnitControl > =
 	DefaultTemplate.bind( {} );
 TweakingTheNumberInput.args = {
 	...Default.args,
@@ -88,7 +89,7 @@ TweakingTheNumberInput.args = {
 /**
  * When only one unit is available, the unit selection dropdown becomes static text.
  */
-export const WithSingleUnit: ComponentStory< typeof UnitControl > =
+export const WithSingleUnit: StoryFn< typeof UnitControl > =
 	DefaultTemplate.bind( {} );
 WithSingleUnit.args = {
 	...Default.args,
@@ -100,7 +101,7 @@ WithSingleUnit.args = {
  * if the `isResetValueOnUnitChange` is set to `true`, the input's quantity is
  * reset to the new unit's default value.
  */
-export const WithCustomUnits: ComponentStory< typeof UnitControl > = ( {
+export const WithCustomUnits: StoryFn< typeof UnitControl > = ( {
 	onChange,
 	...args
 } ) => {