@wordpress/ui 0.5.1-next.v.0 → 0.6.0

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

@@ -0,0 +1,87 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createRef } from '@wordpress/element';
+import * as Tooltip from '../index';
+import type { ProviderProps } from '../types';
+
+// Test wrapper that sets delay={0} to avoid real-time delays in tests.
+function TestProvider( { children, ...props }: ProviderProps ) {
+	return (
+		<Tooltip.Provider delay={ 0 } { ...props }>
+			{ children }
+		</Tooltip.Provider>
+	);
+}
+
+describe( 'Tooltip', () => {
+	it( 'forwards ref', async () => {
+		const user = userEvent.setup();
+		const triggerRef = createRef< HTMLButtonElement >();
+		const popupRef = createRef< HTMLDivElement >();
+
+		render(
+			<TestProvider>
+				<Tooltip.Root>
+					<Tooltip.Trigger ref={ triggerRef }>
+						<span>Hover me</span>
+					</Tooltip.Trigger>
+					<Tooltip.Popup ref={ popupRef }>Tooltip text</Tooltip.Popup>
+				</Tooltip.Root>
+			</TestProvider>
+		);
+
+		// Test trigger ref before interaction
+		expect( triggerRef.current ).toBeInstanceOf( HTMLButtonElement );
+
+		// Hover over the trigger to open the tooltip
+		await user.hover( triggerRef.current! );
+
+		// Wait for the tooltip popup to appear
+		await waitFor( () => {
+			expect( popupRef.current ).toBeInstanceOf( HTMLDivElement );
+		} );
+	} );
+
+	it( 'shows tooltip on hover', async () => {
+		const user = userEvent.setup();
+
+		render(
+			<TestProvider>
+				<Tooltip.Root>
+					<Tooltip.Trigger>Hover me</Tooltip.Trigger>
+					<Tooltip.Popup>Tooltip content</Tooltip.Popup>
+				</Tooltip.Root>
+			</TestProvider>
+		);
+
+		const trigger = screen.getByRole( 'button', { name: 'Hover me' } );
+		await user.hover( trigger );
+
+		// waitFor is used intentionally: even with delay={0}, the popup appearing
+		// is conceptually async (state change → render → portal mount). This also
+		// makes the test resilient to future internal changes in base-ui.
+		await waitFor( () => {
+			expect( screen.getByText( 'Tooltip content' ) ).toBeVisible();
+		} );
+	} );
+
+	it( 'does not show tooltip when disabled', async () => {
+		const user = userEvent.setup();
+
+		render(
+			<TestProvider>
+				<Tooltip.Root disabled>
+					<Tooltip.Trigger>Hover me</Tooltip.Trigger>
+					<Tooltip.Popup>Tooltip content</Tooltip.Popup>
+				</Tooltip.Root>
+			</TestProvider>
+		);
+
+		const trigger = screen.getByRole( 'button', { name: 'Hover me' } );
+		await user.hover( trigger );
+
+		expect(
+			screen.queryByText( 'Tooltip content' )
+		).not.toBeInTheDocument();
+	} );
+} );

package/src/tooltip/trigger.tsx

@@ -0,0 +1,15 @@
+import { Tooltip } from '@base-ui/react/tooltip';
+import { forwardRef } from '@wordpress/element';
+import type { TriggerProps } from './types';
+
+const Trigger = forwardRef< HTMLButtonElement, TriggerProps >(
+	function TooltipTrigger( { children, ...props }, ref ) {
+		return (
+			<Tooltip.Trigger ref={ ref } { ...props }>
+				{ children }
+			</Tooltip.Trigger>
+		);
+	}
+);
+
+export { Trigger };

package/src/tooltip/types.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import type { Tooltip } from '@base-ui/react/tooltip';
+import type { ComponentProps } from '../utils/types';
+
+export type RootProps = Pick< Tooltip.Root.Props, 'disabled' | 'children' >;
+
+export type ProviderProps = Pick<
+	Tooltip.Provider.Props,
+	'delay' | 'children'
+>;
+
+export interface TriggerProps extends ComponentProps< 'button' > {
+	/**
+	 * The content to be rendered inside the component.
+	 */
+	children?: ReactNode;
+}
+
+export interface PopupProps
+	extends ComponentProps< 'div' >,
+		Pick< Tooltip.Positioner.Props, 'align' | 'side' | 'sideOffset' > {
+	/**
+	 * The content to be rendered inside the component.
+	 */
+	children?: ReactNode;
+}

package/src/utils/css/dropdown-motion.module.css

@@ -0,0 +1,47 @@
+/*
+ * Motion configuration for dropdown-like popovers.
+ * Keep constants in sync with: packages/components/src/utils/dropdown-motion.ts
+ */
+
+@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
+
+@layer wp-ui-utilities {
+	.dropdown-motion {
+		--wp-ui-dropdown-slide-distance: 4px;
+		--wp-ui-dropdown-slide-duration: 200ms;
+		--wp-ui-dropdown-slide-easing: cubic-bezier(0, 0, 0, 1);
+		--wp-ui-dropdown-fade-duration: 80ms;
+		--wp-ui-dropdown-fade-easing: linear;
+
+		@media not ( prefers-reduced-motion ) {
+			transition-property: transform, opacity;
+			transition-duration:
+				var(--wp-ui-dropdown-slide-duration),
+				var(--wp-ui-dropdown-fade-duration);
+			transition-timing-function:
+				var(--wp-ui-dropdown-slide-easing),
+				var(--wp-ui-dropdown-fade-easing);
+			will-change: transform, opacity;
+		}
+
+		opacity: 0;
+
+		&[data-side="bottom"] {
+			transform: translateY(calc(-1 * var(--wp-ui-dropdown-slide-distance)));
+		}
+		&[data-side="top"] {
+			transform: translateY(var(--wp-ui-dropdown-slide-distance));
+		}
+		&[data-side="left"] {
+			transform: translateX(var(--wp-ui-dropdown-slide-distance));
+		}
+		&[data-side="right"] {
+			transform: translateX(calc(-1 * var(--wp-ui-dropdown-slide-distance)));
+		}
+
+		&[data-open]:not([data-starting-style]) {
+			opacity: 1;
+			transform: translate(0);
+		}
+	}
+}

package/src/utils/css/focus.module.css

@@ -25,7 +25,7 @@
 	.outset-ring--focus-within:focus-within,
 	.outset-ring--focus-within-except-active:focus-within:not(:has(:active)),
 	.outset-ring--focus-within-visible:focus-within:has(:focus-visible) {
-		outline-width: var(--wpds-border-width-interactive-focus);
+		outline-width: var(--wpds-border-width-focus);
 		outline-color: var(--wpds-color-stroke-focus-brand);
 	}
 }

package/src/utils/css/item-popup.module.css

@@ -0,0 +1,127 @@
+@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
+
+@layer wp-ui-utilities {
+	.popup {
+		composes: dropdown-motion from "./dropdown-motion.module.css";
+
+		--wp-ui-popup-padding: 4px;
+
+		display: grid;
+		grid-template-rows: auto minmax(0, 1fr);
+		grid-template-areas: "header" "main";
+		max-height: min(var(--available-height), 480px, 60dvh);
+		min-width: var(--anchor-width);
+		max-width: var(--available-width);
+		border-radius: var(--wpds-border-radius-md);
+		border: 1px solid var(--wpds-color-stroke-surface-neutral);
+		box-shadow: var(--wpds-elevation-medium);
+		background-color: var(--wpds-color-bg-surface-neutral-strong);
+		font-family: var(--wpds-font-family-body);
+		font-size: var(--wpds-font-size-md);
+		line-height: 1.4;
+		color: var(--wpds-color-fg-interactive-neutral);
+	}
+
+	.list {
+		display: grid;
+		grid-area: main;
+		grid-template-rows: minmax(0, 1fr) auto;
+		grid-template-areas: "scrollable" "footer";
+	}
+
+	.list-scrollable-container {
+		overflow-block: auto;
+		overscroll-behavior: contain;
+		grid-area: scrollable;
+		scroll-padding-block: var(--wp-ui-popup-padding);
+
+		&:not(:empty) {
+			padding-block: var(--wp-ui-popup-padding);
+		}
+	}
+
+	.list-footer {
+		grid-area: footer;
+		padding-block: var(--wp-ui-popup-padding);
+
+		.list-scrollable-container:not(:empty) + & {
+			border-block-start: 1px solid var(--wpds-color-stroke-surface-neutral);
+		}
+	}
+
+	/* TODO: Use padding token */
+	.item {
+		--wp-ui-popup-item-height: 40px;
+		--wp-ui-popup-item-padding-inline: 12px;
+		--wp-ui-popup-item-padding-block: 4px;
+
+		display: grid;
+		grid-template-columns: 24px 1fr;
+		align-items: center;
+		justify-content: flex-start;
+		gap: var(--wpds-dimension-gap-2xs);
+		min-height: var(--wp-ui-popup-item-height);
+		border-radius: var(--wpds-border-radius-sm);
+		user-select: none;
+		margin-inline: var(--wp-ui-popup-padding);
+		padding-block: var(--wp-ui-popup-item-padding-block);
+
+		/* Optically adjust the prefix icon to a more balanced position. */
+		padding-inline-start: calc(var(--wp-ui-popup-item-padding-inline) - 4px);
+		padding-inline-end: var(--wp-ui-popup-item-padding-inline);
+
+		&.is-size-compact {
+			--wp-ui-popup-item-height: 32px;
+			--wp-ui-popup-item-padding-inline: 8px;
+		}
+
+		&.is-size-small {
+			--wp-ui-popup-item-height: 24px;
+			--wp-ui-popup-item-padding-inline: 8px;
+			--wp-ui-popup-item-padding-block: 2px;
+		}
+
+		&:not([data-selected]) {
+			.item-indicator-icon {
+				opacity: 0;
+			}
+		}
+
+		&[data-highlighted]:not([aria-disabled="true"]) {
+			background-color: var(--wpds-color-bg-interactive-brand-weak-active);
+			color: var(--wpds-color-fg-interactive-neutral);
+
+			@media ( forced-colors: active ) {
+				outline: 1px solid Highlight;
+			}
+		}
+
+		&[aria-disabled="true"] {
+			color: var(--wpds-color-fg-interactive-neutral-disabled);
+
+			@media ( forced-colors: active ) {
+				color: GrayText;
+			}
+		}
+	}
+
+	.item-indicator {
+		justify-self: center;
+	}
+
+	.empty {
+		--wp-ui-popup-empty-min-height: 40px;
+		--wp-ui-popup-empty-padding-inline: 12px;
+
+		grid-area: main;
+		display: flex;
+		align-items: center;
+		padding-inline: var(--wp-ui-popup-empty-padding-inline);
+		color: var(--wpds-color-fg-content-neutral-weak);
+
+		&:not(:empty) {
+			min-height: var(--wp-ui-popup-empty-min-height);
+		}
+	}
+
+}

package/src/utils/css/select-trigger.module.css

@@ -0,0 +1,58 @@
+@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
+
+@layer wp-ui-utilities {
+	.trigger-wrapper {
+		&.is-minimal {
+			width: fit-content;
+		}
+	}
+
+	.trigger {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: var(--wpds-dimension-gap-2xs);
+		width: 100%;
+		padding-block: 4px;
+
+		/* Optically adjust the caret to a more balanced position. */
+		padding-inline-start: var(--wp-ui-input-layout-padding-inline);
+		padding-inline-end: calc(var(--wp-ui-input-layout-padding-inline) - 4px);
+
+		background-color: transparent;
+		border: none;
+		color: var(--wpds-color-fg-interactive-neutral);
+		font-family: inherit;
+		font-size: inherit;
+		line-height: 1.4;
+		text-align: start;
+		user-select: none;
+
+		&.is-minimal {
+			width: auto;
+		}
+
+		&:focus {
+			outline: none; /* handled by InputLayout component */
+		}
+
+		&[data-disabled] {
+			background-color: var(--wpds-color-bg-interactive-neutral-weak-disabled);
+			color: var(--wpds-color-fg-interactive-neutral-disabled);
+		}
+	}
+
+	.trigger-value {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+
+		&.is-placeholder {
+			color: var(--wpds-color-fg-interactive-neutral-disabled);
+		}
+	}
+
+	.trigger-caret {
+		flex: 0 0 auto;
+	}
+}

package/src/utils/types.ts

@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
 import {
 	type ElementType,
 	type ComponentPropsWithoutRef,

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { VisuallyHidden } from '../';
 
 const meta: Meta< typeof VisuallyHidden > = {