@wordpress/components 32.6.0 → 33.0.0

package/src/resizable-box/style.scss

@@ -1,7 +1,6 @@
 @use "sass:math";
 @use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/z-index" as *;
 @use "../utils/theme-variables" as *;
 
 $resize-handler-size: 15px;
@@ -15,7 +14,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	height: $resize-handler-container-size;
 
 	// Elevate the resize handle above the focus style.
-	z-index: z-index(".components-resizable-box__handle");
+	z-index: 2;
 
 	// Show the resize handle if set in props
 	.components-resizable-box__container.has-show-handle & {
@@ -26,7 +25,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 		position: relative;
 		width: 100%;
 		height: 100%;
-		z-index: z-index(".components-resizable-box__handle");
+		z-index: 2;
 		outline: none;
 	}
 }
@@ -77,11 +76,11 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 
 // Show corner handles on top of side handles so they can be used
 .components-resizable-box__side-handle {
-	z-index: z-index(".components-resizable-box__side-handle");
+	z-index: 2;
 }
 
 .components-resizable-box__corner-handle {
-	z-index: z-index(".components-resizable-box__corner-handle");
+	z-index: 2;
 }
 
 // Make horizontal side-handles full width

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

@@ -10,6 +10,7 @@ import { fn } from 'storybook/test';
 import SandBox from '..';
 
 const meta: Meta< typeof SandBox > = {
+	tags: [ 'manifest' ],
 	component: SandBox,
 	title: 'Components/Utilities/SandBox',
 	id: 'components-sandbox',

package/src/scroll-lock/stories/index.story.tsx

@@ -16,6 +16,7 @@ import Button from '../../button';
 import ScrollLock from '..';
 
 const meta: Meta< typeof ScrollLock > = {
+	tags: [ 'manifest' ],
 	component: ScrollLock,
 	title: 'Components/Utilities/ScrollLock',
 	id: 'components-scrolllock',

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

@@ -14,6 +14,7 @@ import { useState } from '@wordpress/element';
 import SearchControl from '..';
 
 const meta: Meta< typeof SearchControl > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Selection & Input/Common/SearchControl',
 	id: 'components-searchcontrol',
 	component: SearchControl,

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

@@ -16,6 +16,7 @@ import SelectControl from '../';
 import { InputControlPrefixWrapper } from '../../input-control/input-prefix-wrapper';
 
 const meta: Meta< typeof SelectControl > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Selection & Input/Common/SelectControl',
 	id: 'components-selectcontrol',
 	component: SelectControl,

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

@@ -9,6 +9,7 @@ import type { Meta, StoryFn } from '@storybook/react-vite';
 import Shortcut from '../';
 
 const meta: Meta< typeof Shortcut > = {
+	tags: [ 'manifest' ],
 	component: Shortcut,
 	title: 'Components/Utilities/Shortcut',
 	id: 'components-shortcut',

package/src/slot-fill/stories/index.story.tsx

@@ -14,6 +14,7 @@ import { createContext, useContext } from '@wordpress/element';
 import { Slot, Fill, Provider as SlotFillProvider } from '../';
 
 const meta: Meta< typeof Slot > = {
+	tags: [ 'manifest' ],
 	component: Slot,
 	title: 'Components/Utilities/SlotFill',
 	id: 'components-slotfill',

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

@@ -15,6 +15,7 @@ import Icon from '../../icon';
 import Snackbar from '..';
 
 const meta: Meta< typeof Snackbar > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Feedback/Snackbar',
 	id: 'components-snackbar',
 	component: Snackbar,

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

@@ -10,6 +10,7 @@ import Spinner from '../';
 import { space } from '../../utils/space';
 
 const meta: Meta< typeof Spinner > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Feedback/Spinner',
 	id: 'components-spinner',
 	component: Spinner,

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

@@ -14,6 +14,7 @@ import { useState } from '@wordpress/element';
 import TextControl from '..';
 
 const meta: Meta< typeof TextControl > = {
+	tags: [ 'manifest' ],
 	component: TextControl,
 	title: 'Components/Selection & Input/Common/TextControl',
 	id: 'components-textcontrol',

package/src/text-highlight/stories/index.story.tsx

@@ -9,6 +9,7 @@ import type { Meta, StoryFn } from '@storybook/react-vite';
 import TextHighlight from '..';
 
 const meta: Meta< typeof TextHighlight > = {
+	tags: [ 'manifest' ],
 	component: TextHighlight,
 	title: 'Components/Typography/TextHighlight',
 	id: 'components-texthighlight',

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

@@ -14,6 +14,7 @@ import { useState } from '@wordpress/element';
 import TextareaControl from '..';
 
 const meta: Meta< typeof TextareaControl > = {
+	tags: [ 'manifest' ],
 	component: TextareaControl,
 	title: 'Components/Selection & Input/Common/TextareaControl',
 	id: 'components-textareacontrol',

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

@@ -14,6 +14,7 @@ import { useState } from '@wordpress/element';
 import ToggleControl from '..';
 
 const meta: Meta< typeof ToggleControl > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Selection & Input/Common/ToggleControl',
 	id: 'components-togglecontrol',
 	component: ToggleControl,

package/src/toggle-group-control/stories/index.story.tsx

@@ -33,7 +33,7 @@ const meta: Meta< typeof ToggleGroupControl > = {
 		onChange: { action: 'onChange' },
 		value: { control: false },
 	},
-	tags: [ 'status-experimental' ],
+	tags: [ 'status-experimental', 'manifest' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

package/src/toolbar/toolbar-group/index.tsx

@@ -17,7 +17,7 @@ import ToolbarGroupCollapsed from './toolbar-group-collapsed';
 import ToolbarContext from '../toolbar-context';
 import type { ToolbarGroupProps, ToolbarGroupControls } from './types';
 
-function isNestedArray< T = any >( arr: T[] | T[][] ): arr is T[][] {
+function isNestedArray< T >( arr: T | T[] ): arr is T[] {
 	return Array.isArray( arr ) && Array.isArray( arr[ 0 ] );
 }
 
@@ -78,7 +78,7 @@ function ToolbarGroup( {
 
 	// Normalize controls to nested array of objects (sets of controls)
 	let controlSets: ToolbarGroupControls[][];
-	if ( isNestedArray( controls ) ) {
+	if ( isNestedArray< ToolbarGroupControls[] >( controls ) ) {
 		controlSets = controls;
 	} else {
 		controlSets = [ controls ];

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

@@ -15,6 +15,7 @@ import Tooltip from '..';
 import Button from '../../button';
 
 const meta: Meta< typeof Tooltip > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Overlays/Tooltip',
 	id: 'components-tooltip',
 	component: Tooltip,

package/src/tooltip/test/index.tsx

@@ -286,7 +286,7 @@ describe( 'Tooltip', () => {
 
 	describe( 'delay', () => {
 		it( 'should respect custom delay prop when showing tooltip', async () => {
-			const ADDITIONAL_DELAY = 100;
+			const ADDITIONAL_DELAY = 500;
 
 			render(
 				<Tooltip
@@ -304,7 +304,8 @@ describe( 'Tooltip', () => {
 			await hover( anchor );
 			expectTooltipToBeHidden();
 
-			// Advance time by default delay
+			// Advance time by default delay, which is still well before the
+			// custom delay even when CI is slow to resolve the hover event.
 			await sleep( TOOLTIP_DELAY );
 
 			// Tooltip hasn't appeared yet

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

@@ -24,7 +24,7 @@ const meta: Meta< typeof TreeGrid > = {
 	argTypes: {
 		children: { control: false },
 	},
-	tags: [ 'status-experimental' ],
+	tags: [ 'status-experimental', 'manifest' ],
 	args: {
 		onExpandRow: fn(),
 		onCollapseRow: fn(),

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

@@ -14,6 +14,7 @@ import { useState } from '@wordpress/element';
 import TreeSelect from '../';
 
 const meta: Meta< typeof TreeSelect > = {
+	tags: [ 'manifest' ],
 	title: 'Components/Selection & Input/Common/TreeSelect',
 	id: 'components-treeselect',
 	component: TreeSelect,

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

@@ -16,7 +16,7 @@ const meta: Meta< typeof Truncate > = {
 		children: { control: { type: 'text' } },
 		as: { control: { type: 'text' } },
 	},
-	tags: [ 'status-experimental' ],
+	tags: [ 'status-experimental', 'manifest' ],
 	parameters: {
 		controls: {
 			expanded: true,

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

@@ -27,7 +27,7 @@ const meta: Meta< typeof UnitControl > = {
 		prefix: { control: { type: 'text' } },
 		value: { control: false },
 	},
-	tags: [ 'status-experimental' ],
+	tags: [ 'status-experimental', 'manifest' ],
 	args: {
 		onChange: fn(),
 		onUnitChange: fn(),

package/src/utils/breakpoint.js

@@ -4,7 +4,7 @@
 import breakpoints from './breakpoint-values';
 
 /**
- * @param {keyof breakpoints} point
+ * @param {keyof typeof breakpoints} point
  * @return {string} Media query declaration.
  */
 export const breakpoint = ( point ) =>

package/src/utils/font.js

@@ -5,7 +5,7 @@ import FONT from './font-values';
 
 /**
  *
- * @param {keyof FONT} value Path of value from `FONT`
+ * @param {keyof typeof FONT} value Path of value from `FONT`
  * @return {string} Font rule value
  */
 export function font( value ) {

package/src/visually-hidden/component.tsx

@@ -24,6 +24,7 @@ function UnconnectedVisuallyHidden(
 		<View
 			ref={ forwardedRef }
 			{ ...contextProps }
+			data-visually-hidden=""
 			style={ { ...visuallyHidden, ...( styleProp || {} ) } }
 		/>
 	);

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

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
-
-/**
- * Internal dependencies
- */
 import { VisuallyHidden } from '..';
 
 const meta: Meta< typeof VisuallyHidden > = {
@@ -22,8 +15,9 @@ const meta: Meta< typeof VisuallyHidden > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'not-recommended',
 			whereUsed: 'global',
+			notes: 'Use `VisuallyHidden` from `@wordpress/ui` instead.',
 		},
 	},
 };

package/build/card/context.cjs

@@ -1,36 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/components/src/card/context.ts
-var context_exports = {};
-__export(context_exports, {
-  CardContext: () => CardContext,
-  useCardContext: () => useCardContext
-});
-module.exports = __toCommonJS(context_exports);
-var import_element = require("@wordpress/element");
-var CardContext = (0, import_element.createContext)({});
-CardContext.displayName = "CardContext";
-var useCardContext = () => (0, import_element.useContext)(CardContext);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  CardContext,
-  useCardContext
-});
-//# sourceMappingURL=context.cjs.map

package/build/card/context.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/card/context.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\nexport const CardContext = createContext({});\nCardContext.displayName = 'CardContext';\nexport const useCardContext = () => useContext(CardContext);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA0C;AACnC,IAAM,kBAAc,8BAAc,CAAC,CAAC;AAC3C,YAAY,cAAc;AACnB,IAAM,iBAAiB,UAAM,2BAAW,WAAW;",
-  "names": []
-}

package/build-module/card/context.mjs

@@ -1,10 +0,0 @@
-// packages/components/src/card/context.ts
-import { createContext, useContext } from "@wordpress/element";
-var CardContext = createContext({});
-CardContext.displayName = "CardContext";
-var useCardContext = () => useContext(CardContext);
-export {
-  CardContext,
-  useCardContext
-};
-//# sourceMappingURL=context.mjs.map

package/build-module/card/context.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/card/context.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\nexport const CardContext = createContext({});\nCardContext.displayName = 'CardContext';\nexport const useCardContext = () => useContext(CardContext);"],
-  "mappings": ";AAGA,SAAS,eAAe,kBAAkB;AACnC,IAAM,cAAc,cAAc,CAAC,CAAC;AAC3C,YAAY,cAAc;AACnB,IAAM,iBAAiB,MAAM,WAAW,WAAW;",
-  "names": []
-}

package/build-types/card/context.d.ts

@@ -1,3 +0,0 @@
-export declare const CardContext: import("react").Context<{}>;
-export declare const useCardContext: () => {};
-//# sourceMappingURL=context.d.ts.map

package/build-types/card/context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/card/context.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW,6BAAsB,CAAC;AAG/C,eAAO,MAAM,cAAc,UAAkC,CAAC"}

package/build-types/visually-hidden/test/index.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=index.d.ts.map

package/build-types/visually-hidden/test/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/visually-hidden/test/index.tsx"],"names":[],"mappings":""}

package/src/card/context.ts

@@ -1,9 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-export const CardContext = createContext( {} );
-CardContext.displayName = 'CardContext';
-
-export const useCardContext = () => useContext( CardContext );

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

@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VisuallyHidden should render correctly 1`] = `
-<div
-  class="components-visually-hidden css-1ragr82-PolymorphicDiv emotion-0"
-  data-wp-c16t="true"
-  data-wp-component="VisuallyHidden"
-  style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal; word-break: normal;"
->
-  This is hidden
-</div>
-`;

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

@@ -1,17 +0,0 @@
-/**
- * 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();
-	} );
-} );