@wordpress/components 20.0.2-next.957ca95e4c.0 → 21.0.1

package/src/utils/values.js

@@ -4,8 +4,8 @@
  *
  * @template T
  *
- * @param {T | null | undefined} value The value to check.
- * @return {value is T} Whether value is not null or undefined.
+ * @param {T} value The value to check.
+ * @return {value is Exclude<T, null | undefined>} Whether value is not null or undefined.
  */
 export function isValueDefined( value ) {
 	return value !== undefined && value !== null;
@@ -16,10 +16,8 @@ export function isValueDefined( value ) {
 /**
  * Determines if a value is empty, null, or undefined.
  *
- * @template T
- *
- * @param {T | "" | null | undefined} value The value to check.
- * @return {value is T} Whether value is empty.
+ * @param {string | number | null | undefined} value The value to check.
+ * @return {value is ("" | null | undefined)} Whether value is empty.
  */
 export function isValueEmpty( value ) {
 	const isEmptyString = value === '';
@@ -99,3 +97,47 @@ export function isValueNumeric( value, locale = window.navigator.language ) {
 			: value;
 	return ! isNaN( parseFloat( valueToCheck ) ) && isFinite( valueToCheck );
 }
+
+/**
+ * Converts a string to a number.
+ *
+ * @param {string} value
+ * @return {number} String as a number.
+ */
+export const stringToNumber = ( value ) => {
+	return parseFloat( value );
+};
+
+/**
+ * Converts a number to a string.
+ *
+ * @param {number} value
+ * @return {string} Number as a string.
+ */
+export const numberToString = ( value ) => {
+	return `${ value }`;
+};
+
+/**
+ * Regardless of the input being a string or a number, returns a number.
+ *
+ * Returns `undefined` in case the string is `undefined` or not a valid numeric value.
+ *
+ * @param {string | number} value
+ * @return {number} The parsed number.
+ */
+export const ensureNumber = ( value ) => {
+	return typeof value === 'string' ? stringToNumber( value ) : value;
+};
+
+/**
+ * Regardless of the input being a string or a number, returns a number.
+ *
+ * Returns `undefined` in case the string is `undefined` or not a valid numeric value.
+ *
+ * @param {string | number} value
+ * @return {string} The converted string, or `undefined` in case the input is `undefined` or `NaN`.
+ */
+export const ensureString = ( value ) => {
+	return typeof value === 'string' ? value : numberToString( value );
+};

package/src/v-stack/test/__snapshots__/index.tsx.snap

@@ -13,16 +13,13 @@ exports[`props should render alignment 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: calc(4px * 2);
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
 }
 
-.emotion-0>*+*:not( marquee ) {
-  margin-top: calc(4px * 2);
-}
-
 .emotion-0>* {
   min-height: 0;
 }
@@ -54,15 +51,12 @@ exports[`props should render correctly 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: calc(4px * 2);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
 }
 
-.emotion-0>*+*:not( marquee ) {
-  margin-top: calc(4px * 2);
-}
-
 .emotion-0>* {
   min-height: 0;
 }
@@ -94,15 +88,12 @@ exports[`props should render spacing 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: calc(4px * 5);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
 }
 
-.emotion-0>*+*:not( marquee ) {
-  margin-top: calc(4px * 5);
-}
-
 .emotion-0>* {
   min-height: 0;
 }

package/src/view/{component.js → component.tsx}

@@ -2,6 +2,13 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
+import type { RefAttributes } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponent } from '../ui/context/wordpress-component';
+import type { ViewProps } from './types';
 
 /**
  * `View` is a core component that renders everything in the library.
@@ -19,11 +26,13 @@ import styled from '@emotion/styled';
  * 	);
  * }
  * ```
- *
- * @type {import('../ui/context').WordPressComponent<'div', { children?: import('react').ReactNode }, true>}
  */
-// @ts-ignore
-const View = styled.div``;
+// @ts-expect-error
+export const View: WordPressComponent<
+	'div',
+	ViewProps & RefAttributes< any >
+> = styled.div``;
+
 View.selector = '.components-view';
 View.displayName = 'View';
 

package/src/view/stories/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '..';
+
+const meta: ComponentMeta< typeof View > = {
+	component: View,
+	title: 'Components (Experimental)/View',
+	argTypes: {
+		as: { control: { type: null } },
+		children: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof View > = ( args ) => {
+	return <View { ...args } />;
+};
+
+export const Default: ComponentStory< typeof View > = Template.bind( {} );
+Default.args = {
+	children: 'An example tip',
+};

package/src/view/types.ts

@@ -0,0 +1,6 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type ViewProps = { children?: ReactNode };

package/tsconfig.json

@@ -18,6 +18,7 @@
 		"strictNullChecks": true
 	},
 	"references": [
+		{ "path": "../a11y" },
 		{ "path": "../compose" },
 		{ "path": "../date" },
 		{ "path": "../deprecated" },
@@ -48,11 +49,8 @@
 		"src/custom-gradient-picker",
 		"src/custom-select-control",
 		"src/dimension-control",
-		"src/drop-zone",
 		"src/duotone-picker",
-		"src/focal-point-picker",
 		"src/font-size-picker",
-		"src/form-file-upload",
 		"src/gradient-picker",
 		"src/guide",
 		"src/higher-order/navigate-regions",
@@ -71,10 +69,7 @@
 		"src/radio-group",
 		"src/responsive-wrapper",
 		"src/sandbox",
-		"src/search-control",
 		"src/snackbar",
-		"src/tab-panel",
-		"src/toggle-control",
 		"src/toolbar",
 		"src/toolbar-button",
 		"src/toolbar-context",