@wordpress/components 20.0.0 → 21.0.0

package/build-types/view/stories/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/view/stories/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEtE;;GAEG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAE1B,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,IAAI,CAWrC,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,IAAI,CAAwB,CAAC"}

package/build-types/view/types.d.ts

@@ -0,0 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+export declare type ViewProps = {
+    children?: ReactNode;
+};
+//# sourceMappingURL=types.d.ts.map

package/build-types/view/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/view/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,oBAAY,SAAS,GAAG;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC"}

package/build-types/visually-hidden/component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { VisuallyHiddenProps } from './types';
 /**
  * `VisuallyHidden` is a component used to render text intended to be visually
@@ -15,6 +16,6 @@ import type { VisuallyHiddenProps } from './types';
  * }
  * ```
  */
-export declare const VisuallyHidden: import("../ui/context").WordPressComponent<"div", VisuallyHiddenProps, true>;
+export declare const VisuallyHidden: import("../ui/context").WordPressComponent<"div", VisuallyHiddenProps & import("react").RefAttributes<any>, true>;
 export default VisuallyHidden;
 //# sourceMappingURL=component.d.ts.map

package/build-types/visually-hidden/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/component.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAmBnD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc,8EAG1B,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/component.tsx"],"names":[],"mappings":";AAeA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAmBnD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc,mHAG1B,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/build-types/z-stack/component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ZStackProps } from './types';
 /**
  * `ZStack` allows you to stack things along the Z-axis.
@@ -16,6 +17,6 @@ import type { ZStackProps } from './types';
  * }
  * ```
  */
-export declare const ZStack: import("../ui/context").WordPressComponent<"div", ZStackProps, true>;
+export declare const ZStack: import("../ui/context").WordPressComponent<"div", ZStackProps & import("react").RefAttributes<any>, true>;
 export default ZStack;
 //# sourceMappingURL=component.d.ts.map

package/build-types/z-stack/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/z-stack/component.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAgD3C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,MAAM,sEAAgD,CAAC;AAEpE,eAAe,MAAM,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/z-stack/component.tsx"],"names":[],"mappings":";AAgBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAgD3C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,MAAM,2GAAgD,CAAC;AAEpE,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "20.0.0",
+	"version": "21.0.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,21 +38,21 @@
 		"@emotion/utils": "^1.0.0",
 		"@floating-ui/react-dom": "^1.0.0",
 		"@use-gesture/react": "^10.2.6",
-		"@wordpress/a11y": "^3.16.0",
-		"@wordpress/compose": "^5.14.0",
-		"@wordpress/date": "^4.16.0",
-		"@wordpress/deprecated": "^3.16.0",
-		"@wordpress/dom": "^3.16.0",
-		"@wordpress/element": "^4.14.0",
-		"@wordpress/escape-html": "^2.16.0",
-		"@wordpress/hooks": "^3.16.0",
-		"@wordpress/i18n": "^4.16.0",
-		"@wordpress/icons": "^9.7.0",
-		"@wordpress/is-shallow-equal": "^4.16.0",
-		"@wordpress/keycodes": "^3.16.0",
-		"@wordpress/primitives": "^3.14.0",
-		"@wordpress/rich-text": "^5.14.0",
-		"@wordpress/warning": "^2.16.0",
+		"@wordpress/a11y": "^3.17.0",
+		"@wordpress/compose": "^5.15.0",
+		"@wordpress/date": "^4.17.0",
+		"@wordpress/deprecated": "^3.17.0",
+		"@wordpress/dom": "^3.17.0",
+		"@wordpress/element": "^4.15.0",
+		"@wordpress/escape-html": "^2.17.0",
+		"@wordpress/hooks": "^3.17.0",
+		"@wordpress/i18n": "^4.17.0",
+		"@wordpress/icons": "^9.8.0",
+		"@wordpress/is-shallow-equal": "^4.17.0",
+		"@wordpress/keycodes": "^3.17.0",
+		"@wordpress/primitives": "^3.15.0",
+		"@wordpress/rich-text": "^5.15.0",
+		"@wordpress/warning": "^2.17.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "171b87c7465b93e685e081c5f57f153507363c95"
+	"gitHead": "0d732d4b184adcb28cc83087603e81b764390d4b"
 }

package/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js

@@ -13,6 +13,7 @@ export const rootBase = () => {
 	return css`
 		border-radius: 2px;
 		box-sizing: border-box;
+		direction: ltr;
 		display: grid;
 		grid-template-columns: repeat( 3, 1fr );
 		outline: none;
@@ -44,7 +45,7 @@ export const Row = styled.div`
 
 const pointActive = ( { isActive } ) => {
 	const boxShadow = isActive ? `0 0 0 2px ${ COLORS.gray[ 900 ] }` : null;
-	const pointColor = isActive ? COLORS.gray[ 900 ] : COLORS.lightGray[ 800 ];
+	const pointColor = isActive ? COLORS.gray[ 900 ] : COLORS.gray[ 400 ];
 	const pointColorHover = isActive ? COLORS.gray[ 900 ] : COLORS.ui.theme;
 
 	return css`

package/src/angle-picker-control/README.md

@@ -11,7 +11,7 @@ import { AnglePickerControl } from '@wordpress/components';
 
 const MyAnglePicker = () => {
 	const [ angle, setAngle ] = useState();
-	return <AnglePickerControl value={ angle } onChange={ setAngle } />;
+	return <AnglePickerControl value={ angle } onChange={ setAngle } __nextHasNoMarginBottom />;
 };
 ```
 
@@ -39,3 +39,11 @@ A function that receives the new value of the input.
 
 -   Type: `function`
 -   Required: Yes
+
+### __nextHasNoMarginBottom
+
+Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `false`

package/src/angle-picker-control/index.js

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -27,6 +28,17 @@ export default function AnglePickerControl( {
 	onChange,
 	value,
 } ) {
+	if ( ! __nextHasNoMarginBottom ) {
+		deprecated(
+			'Bottom margin styles for wp.components.AnglePickerControl',
+			{
+				since: '6.1',
+				version: '6.4',
+				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
+			}
+		);
+	}
+
 	const handleOnNumberChange = ( unprocessedValue ) => {
 		const inputValue =
 			unprocessedValue !== '' ? parseInt( unprocessedValue, 10 ) : 0;

package/src/angle-picker-control/stories/index.js

@@ -11,9 +11,6 @@ import AnglePickerControl from '../';
 export default {
 	title: 'Components/AnglePickerControl',
 	component: AnglePickerControl,
-	argTypes: {
-		__nextHasNoMarginBottom: { control: { type: 'boolean' } },
-	},
 };
 
 const AnglePickerWithState = ( args ) => {
@@ -24,3 +21,6 @@ const AnglePickerWithState = ( args ) => {
 };
 
 export const Default = AnglePickerWithState.bind( {} );
+Default.args = {
+	__nextHasNoMarginBottom: true,
+};

package/src/autocomplete/get-default-use-items.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { debounce, escapeRegExp } from 'lodash';
+import { debounce } from 'lodash';
 import removeAccents from 'remove-accents';
 
 /**
@@ -9,6 +9,11 @@ import removeAccents from 'remove-accents';
  */
 import { useLayoutEffect, useState } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { escapeRegExp } from '../utils/strings';
+
 function filterOptions( search, options = [], maxResults = 10 ) {
 	const filtered = [];
 	for ( let i = 0; i < options.length; i++ ) {

package/src/autocomplete/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { escapeRegExp, find } from 'lodash';
+import { find } from 'lodash';
 import removeAccents from 'remove-accents';
 
 /**
@@ -34,6 +34,7 @@ import { speak } from '@wordpress/a11y';
  * Internal dependencies
  */
 import { getAutoCompleterUI } from './autocompleter-ui';
+import { escapeRegExp } from '../utils/strings';
 
 /**
  * A raw completer option.

package/src/base-field/test/__snapshots__/index.js.snap

@@ -25,7 +25,7 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
-@@ -14,18 +14,17 @@
+@@ -14,19 +14,18 @@
       "background": "#fff",
       "border": "1px solid",
       "border-color": "#757575",
@@ -36,6 +36,7 @@ Snapshot Diff:
       "flex": "1",
       "flex-direction": "row",
       "font-size": "13px",
+      "gap": "calc(4px * 2)",
       "justify-content": "space-between",
       "outline": "none",
       "padding": "0 8px",
@@ -80,6 +81,7 @@ exports[`base field should render correctly 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
+  gap: calc(4px * 2);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
@@ -105,10 +107,6 @@ exports[`base field should render correctly 1`] = `
   width: 100%;
 }
 
-.emotion-0>*+*:not( marquee ) {
-  margin-left: calc(4px * 2);
-}
-
 .emotion-0>* {
   min-width: 0;
 }

package/src/border-box-control/border-box-control/component.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentProps } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -64,12 +69,14 @@ const BorderBoxControl = (
 	} = useBorderBoxControl( props );
 	const containerRef = useRef();
 	const mergedRef = useMergeRefs( [ containerRef, forwardedRef ] );
-	const popoverProps = popoverPlacement
+	const popoverProps: ComponentProps<
+		typeof BorderControl
+	>[ '__unstablePopoverProps' ] = popoverPlacement
 		? {
 				placement: popoverPlacement,
 				offset: popoverOffset,
 				anchorRef: containerRef,
-				__unstableShift: true,
+				shift: true,
 		  }
 		: undefined;
 

package/src/border-box-control/border-box-control-split-controls/component.tsx

@@ -1,3 +1,7 @@
+/**
+ * External dependencies
+ */
+import type { ComponentProps } from 'react';
 /**
  * WordPress dependencies
  */
@@ -38,12 +42,14 @@ const BorderBoxControlSplitControls = (
 	} = useBorderBoxControlSplitControls( props );
 	const containerRef = useRef();
 	const mergedRef = useMergeRefs( [ containerRef, forwardedRef ] );
-	const popoverProps = popoverPlacement
+	const popoverProps: ComponentProps<
+		typeof BorderControl
+	>[ '__unstablePopoverProps' ] = popoverPlacement
 		? {
 				placement: popoverPlacement,
 				offset: popoverOffset,
 				anchorRef: containerRef,
-				__unstableShift: true,
+				shift: true,
 		  }
 		: undefined;
 

package/src/border-box-control/types.ts

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import type { Border, ColorProps, LabelProps } from '../border-control/types';
+import type { PopoverProps } from '../popover/types';
 
 export type Borders = {
 	top?: Border;
@@ -29,11 +30,11 @@ export type BorderBoxControlProps = ColorProps &
 		/**
 		 * The position of the color popovers compared to the control wrapper.
 		 */
-		popoverPlacement?: string;
+		popoverPlacement?: PopoverProps[ 'placement' ];
 		/**
 		 * The space between the popover and the control wrapper.
 		 */
-		popoverOffset?: number;
+		popoverOffset?: PopoverProps[ 'offset' ];
 		/**
 		 * An object representing the current border configuration.
 		 *
@@ -103,11 +104,11 @@ export type SplitControlsProps = ColorProps & {
 	/**
 	 * The position of the color popovers compared to the control wrapper.
 	 */
-	popoverPlacement?: string;
+	popoverPlacement?: PopoverProps[ 'placement' ];
 	/**
 	 * The space between the popover and the control wrapper.
 	 */
-	popoverOffset?: number;
+	popoverOffset?: PopoverProps[ 'offset' ];
 	/**
 	 * An object representing the current border configuration. It contains
 	 * properties for each side, with each side an object reflecting the border

package/src/border-control/border-control-dropdown/component.tsx

@@ -24,13 +24,7 @@ import { useBorderControlDropdown } from './hook';
 import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
 
-import type {
-	Color,
-	ColorOrigin,
-	Colors,
-	DropdownProps,
-	PopoverProps,
-} from '../types';
+import type { Color, ColorOrigin, Colors, DropdownProps } from '../types';
 
 const noop = () => undefined;
 const getColorObject = (
@@ -188,7 +182,8 @@ const BorderControlDropdown = (
 		</Button>
 	);
 
-	const renderContent = ( { onClose }: PopoverProps ) => (
+	// TODO: update types once Dropdown component is refactored to TypeScript.
+	const renderContent = ( { onClose }: { onClose: () => void } ) => (
 		<>
 			<DropdownContentWrapper paddingSize="medium">
 				<VStack className={ popoverControlsClassName } spacing={ 6 }>

package/src/border-control/types.ts

@@ -3,6 +3,11 @@
  */
 import type { CSSProperties } from 'react';
 
+/**
+ * Internal dependencies
+ */
+import type { PopoverProps } from '../popover/types';
+
 export type Border = {
 	color?: CSSProperties[ 'borderColor' ];
 	style?: CSSProperties[ 'borderStyle' ];
@@ -83,7 +88,7 @@ export type BorderControlProps = ColorProps &
 		/**
 		 * An internal prop used to control the visibility of the dropdown.
 		 */
-		__unstablePopoverProps?: Record< string, unknown >;
+		__unstablePopoverProps?: Omit< PopoverProps, 'children' >;
 		/**
 		 * If opted into, sanitizing the border means that if no width or color
 		 * have been selected, the border style is also cleared and `undefined`
@@ -132,7 +137,7 @@ export type DropdownProps = ColorProps & {
 	/**
 	 * An internal prop used to control the visibility of the dropdown.
 	 */
-	__unstablePopoverProps?: Record< string, unknown >;
+	__unstablePopoverProps?: Omit< PopoverProps, 'children' >;
 	/**
 	 * This controls whether to render border style options.
 	 *
@@ -176,10 +181,3 @@ export type StylePickerProps = LabelProps & {
 	 */
 	value?: string;
 };
-
-export type PopoverProps = {
-	/**
-	 * Callback function to invoke when closing the border dropdown's popover.
-	 */
-	onClose: () => void;
-};

package/src/card/styles.ts

@@ -115,5 +115,5 @@ export const cardPaddings = {
 };
 
 export const shady = css`
-	background-color: ${ COLORS.lightGray[ 200 ] };
+	background-color: ${ COLORS.ui.backgroundDisabled };
 `;