@wordpress/components 23.3.5 → 23.5.0

package/build-types/base-field/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/base-field/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,oBAAY,cAAc,GAAG,SAAS,GAAG;IACxC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}

package/build-types/resizable-box/styles/resizable-box.styles.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=resizable-box.styles.d.ts.map

package/build-types/resizable-box/styles/resizable-box.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"resizable-box.styles.d.ts","sourceRoot":"","sources":["../../../src/resizable-box/styles/resizable-box.styles.js"],"names":[],"mappings":""}

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

@@ -1,29 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import AnglePickerControl from '../';
-
-export default {
-	title: 'Components/AnglePickerControl',
-	component: AnglePickerControl,
-	argTypes: {
-		label: { control: { type: 'text' } },
-	},
-};
-
-const AnglePickerWithState = ( args ) => {
-	const [ angle, setAngle ] = useState();
-	return (
-		<AnglePickerControl { ...args } value={ angle } onChange={ setAngle } />
-	);
-};
-
-export const Default = AnglePickerWithState.bind( {} );
-Default.args = {
-	__nextHasNoMarginBottom: true,
-};

package/src/base-field/README.md

@@ -1,66 +0,0 @@
-# BaseField
-
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-`BaseField` is an internal (i.e., not exported in the `index.js`) primitive component used for building more complex fields like `TextField`. It provides error handling and focus styles for field components. It does _not_ handle layout of the component aside from wrapping the field in a `Flex` wrapper.
-
-## Usage
-
-`BaseField` is primarily used as a hook rather than a component:
-
-```js
-function useExampleField( props ) {
-	const { as = 'input', ...baseProps } = useBaseField( props );
-
-	const inputProps = {
-		as,
-		// more cool stuff here
-	};
-
-	return { inputProps, ...baseProps };
-}
-
-function ExampleField( props, forwardRef ) {
-	const { preFix, affix, disabled, inputProps, ...baseProps } =
-		useExampleField( props );
-
-	return (
-		<View { ...baseProps } disabled={ disabled }>
-			{ preFix }
-			<View autocomplete="off" { ...inputProps } disabled={ disabled } />
-			{ affix }
-		</View>
-	);
-}
-```
-
-## Props
-
-### `disabled`: `boolean`
-
-Whether the field is disabled.
-
--   Required: No
-
-### `hasError`: `boolean`
-
-Renders an error style around the component.
-
--   Required: No
--   Default: `false`
-
-### `isInline`: `boolean`
-
-Renders a component that can be inlined in some text.
-
--   Required: No
--   Default: `false`
-
-### `isSubtle`: `boolean`
-
-Renders a subtle variant of the component.
-
--   Required: No
--   Default: `false`

package/src/base-field/hook.ts

@@ -1,51 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useContextSystem, WordPressComponentProps } from '../ui/context';
-import { useControlGroupContext } from '../ui/control-group';
-import { useFlex } from '../flex';
-import * as styles from './styles';
-import { useCx } from '../utils/hooks/use-cx';
-import type { BaseFieldProps } from './types';
-
-export function useBaseField(
-	props: WordPressComponentProps< BaseFieldProps, 'div' >
-) {
-	const {
-		className,
-		hasError = false,
-		isInline = false,
-		isSubtle = false,
-		// Extract these because useFlex doesn't accept it.
-		defaultValue,
-		disabled,
-		...flexProps
-	} = useContextSystem( props, 'BaseField' );
-
-	const { styles: controlGroupStyles } = useControlGroupContext();
-	const cx = useCx();
-
-	const classes = useMemo(
-		() =>
-			cx(
-				styles.BaseField,
-				controlGroupStyles,
-				isSubtle && styles.subtle,
-				hasError && styles.error,
-				isInline && styles.inline,
-				className
-			),
-		[ className, controlGroupStyles, cx, hasError, isInline, isSubtle ]
-	);
-
-	return {
-		...useFlex( { ...flexProps, className: classes } ),
-		disabled,
-		defaultValue,
-	};
-}

package/src/base-field/index.ts

@@ -1 +0,0 @@
-export { useBaseField } from './hook';

package/src/base-field/styles.ts

@@ -1,86 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import { CONFIG, COLORS, reduceMotion } from '../utils';
-import { safariOnly } from '../utils/browsers';
-
-export const BaseField = css`
-	background: ${ CONFIG.controlBackgroundColor };
-	border-radius: ${ CONFIG.controlBorderRadius };
-	border: 1px solid;
-	border-color: ${ COLORS.ui.border };
-	box-shadow: ${ CONFIG.controlBoxShadow };
-	display: flex;
-	flex: 1;
-	font-size: ${ CONFIG.fontSize };
-	outline: none;
-	padding: 0 8px;
-	position: relative;
-	transition: border-color ${ CONFIG.transitionDurationFastest } ease;
-	${ reduceMotion( 'transition' ) }
-	width: 100%;
-
-	&[disabled] {
-		opacity: 0.6;
-	}
-
-	&:hover {
-		border-color: ${ COLORS.ui.borderHover };
-	}
-
-	&:focus,
-	&[data-focused='true'] {
-		border-color: ${ COLORS.ui.theme };
-		box-shadow: ${ CONFIG.controlBoxShadowFocus };
-	}
-`;
-
-export const subtle = css`
-	background-color: transparent;
-
-	&:hover,
-	&:active,
-	&:focus,
-	&[data-focused='true'] {
-		background: ${ CONFIG.controlBackgroundColor };
-	}
-`;
-
-export const error = css`
-	border-color: ${ CONFIG.controlDestructiveBorderColor };
-
-	&:hover,
-	&:active {
-		border-color: ${ CONFIG.controlDestructiveBorderColor };
-	}
-
-	&:focus,
-	&[data-focused='true'] {
-		border-color: ${ CONFIG.controlDestructiveBorderColor };
-		box-shadow: 0 0 0, 0.5px, ${ CONFIG.controlDestructiveBorderColor };
-	}
-`;
-
-export const errorFocus = css`
-	border-color: ${ CONFIG.controlDestructiveBorderColor };
-	box-shadow: 0 0 0, 0.5px, ${ CONFIG.controlDestructiveBorderColor };
-
-	&:hover {
-		border-color: ${ CONFIG.controlDestructiveBorderColor };
-	}
-`;
-
-export const inline = css`
-	display: inline-flex;
-	vertical-align: baseline;
-	width: auto;
-
-	${ safariOnly`
-			vertical-align: middle;
-	` }
-`;

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

@@ -1,141 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`base field props should render error styles 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-@@ -11,11 +11,11 @@
-      "-webkit-justify-content": "space-between",
-      "-webkit-transition": "border-color 100ms ease",
-      "align-items": "center",
-      "background": "#fff",
-      "border": "1px solid",
--     "border-color": "#d94f4f",
-+     "border-color": "#949494",
-      "border-radius": "2px",
-      "box-shadow": "transparent",
-      "display": "flex",
-      "flex": "1",
-      "flex-direction": "row",
-`;
-
-exports[`base field props should render inline styles 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-@@ -14,19 +14,18 @@
-      "background": "#fff",
-      "border": "1px solid",
-      "border-color": "#949494",
-      "border-radius": "2px",
-      "box-shadow": "transparent",
--     "display": "inline-flex",
-+     "display": "flex",
-      "flex": "1",
-      "flex-direction": "row",
-      "font-size": "13px",
-      "gap": "calc(4px * 2)",
-      "justify-content": "space-between",
-      "outline": "none",
-      "padding": "0 8px",
-      "position": "relative",
-      "transition": "border-color 100ms ease",
--     "vertical-align": "baseline",
--     "width": "auto",
-+     "width": "100%",
-    },
-  ]
-`;
-
-exports[`base field props should render subtle styles 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-@@ -10,11 +10,10 @@
-      "-webkit-flex-direction": "row",
-      "-webkit-justify-content": "space-between",
-      "-webkit-transition": "border-color 100ms ease",
-      "align-items": "center",
-      "background": "#fff",
--     "background-color": "transparent",
-      "border": "1px solid",
-      "border-color": "#949494",
-      "border-radius": "2px",
-      "box-shadow": "transparent",
-      "display": "flex",
-`;
-
-exports[`base field should render correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -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;
-  width: 100%;
-  background: #fff;
-  border-radius: 2px;
-  border: 1px solid;
-  border-color: #949494;
-  box-shadow: transparent;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  font-size: 13px;
-  outline: none;
-  padding: 0 8px;
-  position: relative;
-  -webkit-transition: border-color 100ms ease;
-  transition: border-color 100ms ease;
-  width: 100%;
-}
-
-.emotion-0>* {
-  min-width: 0;
-}
-
-@media ( prefers-reduced-motion: reduce ) {
-  .emotion-0 {
-    transition-duration: 0ms;
-  }
-}
-
-.emotion-0[disabled] {
-  opacity: 0.6;
-}
-
-.emotion-0:hover {
-  border-color: #757575;
-}
-
-.emotion-0:focus,
-.emotion-0[data-focused='true'] {
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-}
-
-<div>
-  <div
-    class="components-flex components-base-field emotion-0 emotion-1"
-    data-wp-c16t="true"
-    data-wp-component="BaseField"
-  />
-</div>
-`;

package/src/base-field/test/index.tsx

@@ -1,84 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { useBaseField } from '../index';
-import { View } from '../../view';
-import type { BaseFieldProps } from '../types';
-
-const TestField = ( props: Omit< BaseFieldProps, 'children' > ) => {
-	return <View { ...useBaseField( { ...props, children: '' } ) } />;
-};
-
-describe( 'base field', () => {
-	it( 'should render correctly', () => {
-		const { container } = render( <TestField /> );
-		expect( container ).toMatchSnapshot();
-	} );
-
-	describe( 'props', () => {
-		it( 'should render error styles', () => {
-			render(
-				<>
-					<TestField data-testid="base-field" />
-					<TestField hasError data-testid="base-field-error" />
-				</>
-			);
-			expect(
-				screen.getByTestId( 'base-field-error' )
-			).toMatchStyleDiffSnapshot( screen.getByTestId( 'base-field' ) );
-		} );
-
-		it( 'should render inline styles', () => {
-			render(
-				<>
-					<TestField data-testid="base-field" />
-					<TestField isInline data-testid="base-field-inline" />
-				</>
-			);
-			expect(
-				screen.getByTestId( 'base-field-inline' )
-			).toMatchStyleDiffSnapshot( screen.getByTestId( 'base-field' ) );
-		} );
-
-		it( 'should render subtle styles', () => {
-			render(
-				<>
-					<TestField data-testid="base-field" />
-					<TestField isSubtle data-testid="base-field-subtle" />
-				</>
-			);
-			expect(
-				screen.getByTestId( 'base-field-subtle' )
-			).toMatchStyleDiffSnapshot( screen.getByTestId( 'base-field' ) );
-		} );
-	} );
-
-	describe( 'useBaseField', () => {
-		it( 'should pass through disabled and defaultValue props', () => {
-			// wrap this in a component so that `useContext` calls don't fail inside the hook
-			// assertions will still run as normal when we `render` the component :)
-			const Component = () => {
-				const disabled = true;
-				const defaultValue = 'Lorem ipsum';
-
-				const result = useBaseField( {
-					disabled,
-					defaultValue,
-					children: '',
-				} );
-
-				expect( result.disabled ).toBe( disabled );
-				expect( result.defaultValue ).toBe( defaultValue );
-
-				return null;
-			};
-
-			render( <Component /> );
-		} );
-	} );
-} );

package/src/base-field/types.ts

@@ -1,29 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { FlexProps } from '../flex/types';
-
-export type BaseFieldProps = FlexProps & {
-	/**
-	 * Whether the field is disabled.
-	 */
-	disabled?: boolean;
-	/**
-	 * Renders an error style around the component.
-	 *
-	 * @default false
-	 */
-	hasError?: boolean;
-	/**
-	 * Renders a component that can be inlined in some text.
-	 *
-	 * @default false
-	 */
-	isInline?: boolean;
-	/**
-	 * Renders a subtle variant of the component.
-	 *
-	 * @default false
-	 */
-	isSubtle?: boolean;
-};