npm - @wordpress/components - Versions diffs - 25.5.0 → 25.6.1 - Mend

@wordpress/components 25.5.0 → 25.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3594) hide show

package/src/popover/test/utils/index.tsx ADDED Viewed

@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+import { createPortal, useState } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import Popover from '../..';
+import { Provider as SlotFillProvider } from '../../../slot-fill';
+import type { WordPressComponentProps } from '../../../ui/context';
+const GenericIframe = ( {
+	children,
+	...props
+}: WordPressComponentProps< { children: React.ReactNode }, 'iframe' > ) => {
+	const [ containerNode, setContainerNode ] = useState< HTMLElement >();
+	return (
+		<iframe
+			{ ...props }
+			title="My Iframe"
+			srcDoc="<!doctype html><html><body></body></html>"
+			// Waiting for the load event ensures that this works in Firefox.
+			// See https://github.com/facebook/react/issues/22847#issuecomment-991394558
+			onLoad={ ( event ) => {
+				if ( event.currentTarget.contentDocument ) {
+					setContainerNode(
+						event.currentTarget.contentDocument.body
+					);
+				}
+			} }
+		>
+			{ containerNode && createPortal( children, containerNode ) }
+		</iframe>
+	);
+};
+export const PopoverInsideIframeRenderedInExternalSlot = (
+	props: React.ComponentProps< typeof Popover >
+) => {
+	const SLOT_NAME = 'my-slot';
+	const [ anchorRef, setAnchorRef ] = useState< HTMLParagraphElement | null >(
+		null
+	);
+	return (
+		<SlotFillProvider>
+			{ /* @ts-expect-error Slot is not currently typed on Popover */ }
+			<Popover.Slot name={ SLOT_NAME } />
+			<GenericIframe
+				style={ {
+					width: '100%',
+					height: '400px',
+					border: '0',
+					outline: '1px solid purple',
+				} }
+			>
+				<div
+					style={ {
+						height: '200vh',
+						paddingTop: '10vh',
+					} }
+				>
+					<p
+						style={ {
+							padding: '8px',
+							background: 'salmon',
+							maxWidth: '200px',
+							marginTop: '100px',
+							marginLeft: 'auto',
+							marginRight: 'auto',
+						} }
+						ref={ setAnchorRef }
+					>
+						Popover&apos;s anchor
+					</p>
+					<Popover
+						{ ...props }
+						__unstableSlotName={ SLOT_NAME }
+						anchor={ anchorRef }
+					/>
+				</div>
+			</GenericIframe>
+		</SlotFillProvider>
+	);
+};

package/src/private-apis.ts CHANGED Viewed

@@ -23,6 +23,7 @@ import {
 	DropdownSubMenuTrigger as DropdownSubMenuTriggerV2,
 } from './dropdown-menu-v2';
 import { ComponentsContext } from './ui/context/context-system-provider';
+import Theme from './theme';
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
@@ -47,4 +48,5 @@ lock( privateApis, {
 	DropdownSubMenuV2,
 	DropdownSubMenuTriggerV2,
 	ProgressBar,
+	Theme,
 } );

package/src/progress-bar/stories/{index.tsx → index.story.tsx} RENAMED Viewed

@@ -18,7 +18,7 @@ const meta: ComponentMeta< typeof ProgressBar > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/progress-bar/styles.ts CHANGED Viewed

@@ -28,8 +28,8 @@ export const Track = styled.div`
 	max-width: 160px;
 	height: ${ CONFIG.borderWidthFocus };
 	background-color: var(
-		--wp-components-color-gray-100,
-		${ COLORS.gray[ 100 ] }
+		--wp-components-color-gray-300,
+		${ COLORS.gray[ 300 ] }
 	);
 	border-radius: ${ CONFIG.radiusBlockUi };
 `;
@@ -43,7 +43,7 @@ export const Indicator = styled.div< {
 	top: 0;
 	height: 100%;
 	border-radius: ${ CONFIG.radiusBlockUi };
-	background-color: ${ COLORS.ui.theme };
+	background-color: ${ COLORS.theme.accent };
 	${ ( { isIndeterminate, value } ) =>
 		isIndeterminate

package/src/query-controls/stories/{index.tsx → index.story.tsx} RENAMED Viewed

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, Story } from '@storybook/react';
 /**
  * WordPress dependencies
@@ -32,12 +32,12 @@ const meta: ComponentMeta< typeof QueryControls > = {
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
-export const Default: ComponentStory< typeof QueryControls > = ( args ) => {
+export const Default: Story< typeof QueryControls > = ( args ) => {
 	const {
 		onAuthorChange,
 		onCategoryChange,
@@ -146,9 +146,7 @@ Default.args = {
 	selectedAuthorId: 1,
 };
-const SingleCategoryTemplate: ComponentStory< typeof QueryControls > = (
-	args
-) => {
+const SingleCategoryTemplate: Story< typeof QueryControls > = ( args ) => {
 	const {
 		onAuthorChange,
 		onCategoryChange,
@@ -186,7 +184,7 @@ const SingleCategoryTemplate: ComponentStory< typeof QueryControls > = (
 		/>
 	);
 };
-export const SelectSingleCategory: ComponentStory< typeof QueryControls > =
+export const SelectSingleCategory: Story< typeof QueryControls > =
 	SingleCategoryTemplate.bind( {} );
 SelectSingleCategory.args = {
 	categoriesList: [

package/src/radio-control/stories/{index.tsx → index.story.tsx} RENAMED Viewed

@@ -34,7 +34,7 @@ const meta: ComponentMeta< typeof RadioControl > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/radio-group/stories/{index.js → index.story.js} RENAMED Viewed

@@ -11,7 +11,6 @@ import RadioGroup from '../';
 export default {
 	title: 'Components (Deprecated)/RadioGroup',
-	subcomponents: { Radio },
 	component: RadioGroup,
 	parameters: {
 		docs: {
@@ -40,7 +39,7 @@ export const _default = () => {
 	/* eslint-enable no-restricted-syntax */
 };
-export const disabled = () => {
+export const Disabled = () => {
 	/* eslint-disable no-restricted-syntax */
 	return (
 		<RadioGroup
@@ -78,6 +77,6 @@ const ControlledRadioGroupWithState = () => {
 	/* eslint-enable no-restricted-syntax */
 };
-export const controlled = () => {
+export const Controlled = () => {
 	return <ControlledRadioGroupWithState />;
 };

package/src/range-control/index.tsx CHANGED Viewed

@@ -51,7 +51,7 @@ function UnforwardedRangeControl(
 		allowReset = false,
 		beforeIcon,
 		className,
-		color: colorProp = COLORS.ui.theme,
+		color: colorProp = COLORS.theme.accent,
 		currentInput,
 		disabled = false,
 		help,

package/src/range-control/stories/{index.tsx → index.story.tsx} RENAMED Viewed

@@ -48,7 +48,7 @@ const meta: ComponentMeta< typeof RangeControl > = {
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/range-control/styles/range-control-styles.ts CHANGED Viewed

@@ -184,7 +184,7 @@ const thumbColor = ( { disabled }: ThumbProps ) =>
 				background-color: ${ COLORS.gray[ 400 ] };
 		  `
 		: css`
-				background-color: ${ COLORS.ui.theme };
+				background-color: ${ COLORS.theme.accent };
 		  `;
 export const ThumbWrapper = styled.span`
@@ -215,7 +215,7 @@ const thumbFocus = ( { isFocused }: ThumbProps ) => {
 				&::before {
 					content: ' ';
 					position: absolute;
-					background-color: ${ COLORS.ui.theme };
+					background-color: ${ COLORS.theme.accent };
 					opacity: 0.4;
 					border-radius: 50%;
 					height: ${ thumbSize + 8 }px;

package/src/range-control/types.ts CHANGED Viewed

@@ -105,7 +105,7 @@ export type RangeControlProps = Pick<
 		/**
 		 * CSS color string for the `RangeControl` wrapper.
 		 *
-		 * @default COLORS.ui.theme
+		 * @default COLORS.theme.accent
 		 * @see /packages/components/src/utils/colors-values.js
 		 */
 		color?: CSSProperties[ 'color' ];

package/src/resizable-box/resize-tooltip/index.tsx CHANGED Viewed

@@ -13,7 +13,8 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import Label from './label';
-import { useResizeLabel, Axis, Position, POSITIONS } from './utils';
+import type { Axis, Position } from './utils';
+import { useResizeLabel, POSITIONS } from './utils';
 import { Root } from './styles/resize-tooltip.styles';
 type ResizeTooltipProps = React.ComponentProps< typeof Root > & {

package/src/resizable-box/resize-tooltip/label.tsx CHANGED Viewed

@@ -12,7 +12,8 @@ import { isRTL } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { Position, POSITIONS } from './utils';
+import type { Position } from './utils';
+import { POSITIONS } from './utils';
 import {
 	TooltipWrapper,
 	Tooltip,

package/src/resizable-box/stories/{index.tsx → index.story.tsx} RENAMED Viewed

@@ -23,7 +23,7 @@ const meta: ComponentMeta< typeof ResizableBox > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/responsive-wrapper/stories/{index.tsx → index.story.tsx} RENAMED Viewed

@@ -16,7 +16,7 @@ const meta: ComponentMeta< typeof ResponsiveWrapper > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/sandbox/index.tsx CHANGED Viewed

@@ -254,7 +254,10 @@ function SandBox( {
 		return () => {
 			iframe?.removeEventListener( 'load', tryNoForceSandBox, false );
-			defaultView?.addEventListener( 'message', checkMessageForResize );
+			defaultView?.removeEventListener(
+				'message',
+				checkMessageForResize
+			);
 		};
 		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
 		// See https://github.com/WordPress/gutenberg/pull/44378

package/src/sandbox/stories/{index.tsx → index.story.tsx} RENAMED Viewed

@@ -17,7 +17,7 @@ const meta: ComponentMeta< typeof SandBox > = {
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/scroll-lock/stories/{index.tsx → index.story.tsx} RENAMED Viewed

@@ -20,7 +20,7 @@ const meta: ComponentMeta< typeof ScrollLock > = {
 	title: 'Components/ScrollLock',
 	parameters: {
 		controls: { hideNoControlsWarning: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/scrollable/component.tsx CHANGED Viewed

@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
+import { contextConnect } from '../ui/context';
 import { View } from '../view';
 import { useScrollable } from './hook';
 import type { ScrollableProps } from './types';

package/src/scrollable/hook.ts CHANGED Viewed

@@ -6,7 +6,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
+import { useContextSystem } from '../ui/context';
 import * as styles from './styles';
 import { useCx } from '../utils/hooks/use-cx';
 import type { ScrollableProps } from './types';

package/src/scrollable/stories/{index.tsx → index.story.tsx} RENAMED Viewed

@@ -29,7 +29,7 @@ const meta: ComponentMeta< typeof Scrollable > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/search-control/stories/{index.tsx → index.story.tsx} RENAMED Viewed

@@ -21,7 +21,7 @@ const meta: ComponentMeta< typeof SearchControl > = {
 	},
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/select-control/index.tsx CHANGED Viewed

@@ -151,7 +151,7 @@ function UnforwardedSelectControl(
  * `SelectControl` allows users to select from a single or multiple option menu.
  * It functions as a wrapper around the browser's native `<select>` element.
  *
- * @example
+ * ```jsx
  * import { SelectControl } from '@wordpress/components';
  * import { useState } from '@wordpress/element';
  *
@@ -171,6 +171,7 @@ function UnforwardedSelectControl(
  *     />
  *   );
  * };
+ * ```
  */
 export const SelectControl = forwardRef( UnforwardedSelectControl );

package/src/select-control/stories/{index.tsx → index.story.tsx} RENAMED Viewed

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, Story } from '@storybook/react';
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import SelectControl from '../';
-const meta: ComponentMeta< typeof SelectControl > = {
+const meta: Meta< typeof SelectControl > = {
 	title: 'Components/SelectControl',
 	component: SelectControl,
 	argTypes: {
@@ -26,14 +26,12 @@ const meta: ComponentMeta< typeof SelectControl > = {
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;
-const SelectControlWithState: ComponentStory< typeof SelectControl > = (
-	props
-) => {
+const SelectControlWithState: Story< typeof SelectControl > = ( props ) => {
 	const [ selection, setSelection ] = useState< string[] >();
 	if ( props.multiple ) {
@@ -84,9 +82,7 @@ WithLabelAndHelpText.args = {
  * As an alternative to the `options` prop, `optgroup`s and `options` can be
  * passed in as `children` for more customizeability.
  */
-export const WithCustomChildren: ComponentStory< typeof SelectControl > = (
-	args
-) => {
+export const WithCustomChildren: Story< typeof SelectControl > = ( args ) => {
 	return (
 		<SelectControlWithState { ...args }>
 			<option value="option-1">Option 1</option>

package/src/slot-fill/stories/{index.js → index.story.js} RENAMED Viewed

@@ -10,11 +10,10 @@ import { Slot, Fill, Provider as SlotFillProvider } from '../';
 export default {
 	title: 'Components/SlotFill',
-	subcomponents: { Fill, SlotFillProvider },
 	component: Slot,
 	parameters: {
 		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
@@ -34,7 +33,7 @@ export const _default = () => {
 	);
 };
-export const withFillProps = () => {
+export const WithFillProps = () => {
 	return (
 		<SlotFillProvider>
 			<h2>Profile</h2>
@@ -62,7 +61,7 @@ export const withFillProps = () => {
 	);
 };
-export const withContext = () => {
+export const WithContext = () => {
 	const Context = createContext();
 	const ContextFill = ( { name } ) => {
 		const value = useContext( Context );

package/src/snackbar/list.tsx CHANGED Viewed

@@ -29,13 +29,21 @@ const SNACKBAR_VARIANTS = {
 		height: 'auto',
 		opacity: 1,
 		transition: {
-			height: { stiffness: 1000, velocity: -100 },
+			height: { type: 'tween', duration: 0.3, ease: [ 0, 0, 0.2, 1 ] },
+			opacity: {
+				type: 'tween',
+				duration: 0.25,
+				delay: 0.05,
+				ease: [ 0, 0, 0.2, 1 ],
+			},
 		},
 	},
 	exit: {
 		opacity: 0,
 		transition: {
-			duration: 0.5,
+			type: 'tween',
+			duration: 0.1,
+			ease: [ 0, 0, 0.2, 1 ],
 		},
 	},
 };

package/src/snackbar/stories/{index.tsx → index.story.tsx} RENAMED Viewed

@@ -29,7 +29,7 @@ const meta: ComponentMeta< typeof Snackbar > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/snackbar/stories/{list.tsx → list.story.tsx} RENAMED Viewed

@@ -27,7 +27,7 @@ const meta: ComponentMeta< typeof SnackbarList > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/snackbar/style.scss CHANGED Viewed

@@ -1,11 +1,12 @@
 .components-snackbar {
 	font-family: $default-font;
 	font-size: $default-font-size;
-	background-color: $gray-900;
+	background: rgba($black, 0.85); // Emulates #1e1e1e closely.
+	backdrop-filter: blur($grid-unit-20) saturate(180%);
 	border-radius: $radius-block-ui;
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+	box-shadow: $shadow-popover;
 	color: $white;
-	padding: 16px 24px;
+	padding: $grid-unit-15 ($grid-unit-05 * 5);
 	width: 100%;
 	max-width: 600px;
 	box-sizing: border-box;
@@ -20,9 +21,7 @@
 	}
 	&:focus {
-		box-shadow:
-			0 0 0 1px $white,
-			0 0 0 3px $components-color-accent;
+		box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 	}
 	&.components-snackbar-explicit-dismiss {
@@ -30,7 +29,7 @@
 	}
 	.components-snackbar__content-with-icon {
-		margin-left: 24px;
+		margin-left: $grid-unit-30;
 	}
 	.components-snackbar__icon {
@@ -40,7 +39,7 @@
 	}
 	.components-snackbar__dismiss-button {
-		margin-left: 32px;
+		margin-left: $grid-unit-30;
 		cursor: pointer;
 	}
 }
@@ -91,5 +90,5 @@
 .components-snackbar-list__notice-container {
 	position: relative;
-	padding-top: 8px;
+	padding-top: $grid-unit-10;
 }

package/src/spacer/component.tsx CHANGED Viewed

@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
+import { contextConnect } from '../ui/context';
 import { View } from '../view';
 import { useSpacer } from './hook';
 import type { SpacerProps } from './types';

package/src/spacer/hook.ts CHANGED Viewed

@@ -6,7 +6,8 @@ import { css } from '@emotion/react';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
+import { useContextSystem } from '../ui/context';
 import { space } from '../ui/utils/space';
 import { rtl, useCx } from '../utils';
 import type { SpacerProps } from './types';

package/src/spacer/stories/{index.tsx → index.story.tsx} RENAMED Viewed

@@ -43,7 +43,7 @@ const meta: ComponentMeta< typeof Spacer > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/spinner/stories/{index.tsx → index.story.tsx} RENAMED Viewed

@@ -16,7 +16,7 @@ const meta: ComponentMeta< typeof Spinner > = {
 		controls: {
 			expanded: true,
 		},
-		docs: { source: { state: 'open' } },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 };
 export default meta;

package/src/spinner/styles.ts CHANGED Viewed

@@ -24,7 +24,7 @@ export const StyledSpinner = styled.svg`
 	display: inline-block;
 	margin: 5px 11px 0;
 	position: relative;
-	color: ${ COLORS.ui.theme };
+	color: ${ COLORS.theme.accent };
 	overflow: visible;
 	opacity: 1;
 	background-color: transparent;