@wordpress/components 28.5.0 → 28.7.0

package/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.ts

@@ -1,77 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import {
-	rootBase,
-	pointBase,
-	Cell as CellBase,
-} from './alignment-matrix-control-styles';
-import type {
-	AlignmentMatrixControlIconProps,
-	AlignmentMatrixControlCellProps,
-} from '../types';
-
-const rootSize = () => {
-	const padding = 1.5;
-	const size = 24;
-
-	return css( {
-		gridTemplateRows: `repeat( 3, calc( ${ size - padding * 2 }px / 3))`,
-		padding,
-		maxHeight: size,
-		maxWidth: size,
-	} );
-};
-
-const rootPointerEvents = ( {
-	disablePointerEvents,
-}: Pick< AlignmentMatrixControlIconProps, 'disablePointerEvents' > ) => {
-	return css( {
-		pointerEvents: disablePointerEvents ? 'none' : undefined,
-	} );
-};
-
-export const Wrapper = styled.div`
-	box-sizing: border-box;
-	padding: 2px;
-`;
-
-export const Root = styled.div`
-	transform-origin: top left;
-	height: 100%;
-	width: 100%;
-
-	${ rootBase };
-	${ rootSize };
-	${ rootPointerEvents };
-`;
-
-const pointActive = ( {
-	isActive,
-}: Pick< AlignmentMatrixControlCellProps, 'isActive' > ) => {
-	const boxShadow = isActive ? `0 0 0 1px currentColor` : null;
-
-	return css`
-		box-shadow: ${ boxShadow };
-		color: currentColor;
-
-		*:hover > & {
-			color: currentColor;
-		}
-	`;
-};
-
-export const Point = styled.span`
-	height: 2px;
-	width: 2px;
-	${ pointBase };
-	${ pointActive };
-`;
-
-export const Cell = CellBase;

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

@@ -1,102 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import { COLORS } from '../../utils';
-import type {
-	AlignmentMatrixControlProps,
-	AlignmentMatrixControlCellProps,
-} from '../types';
-
-export const rootBase = () => {
-	return css`
-		border-radius: 2px;
-		box-sizing: border-box;
-		direction: ltr;
-		display: grid;
-		grid-template-columns: repeat( 3, 1fr );
-		outline: none;
-	`;
-};
-
-const rootSize = ( { size = 92 } ) => {
-	return css`
-		grid-template-rows: repeat( 3, calc( ${ size }px / 3 ) );
-		width: ${ size }px;
-	`;
-};
-
-export const Root = styled.div< {
-	size: AlignmentMatrixControlProps[ 'width' ];
-} >`
-	${ rootBase };
-
-	border: 1px solid transparent;
-	cursor: pointer;
-	grid-template-columns: auto;
-
-	${ rootSize };
-`;
-
-export const Row = styled.div`
-	box-sizing: border-box;
-	display: grid;
-	grid-template-columns: repeat( 3, 1fr );
-`;
-
-const pointActive = ( {
-	isActive,
-}: Pick< AlignmentMatrixControlCellProps, 'isActive' > ) => {
-	const boxShadow = isActive ? `0 0 0 2px ${ COLORS.gray[ 900 ] }` : null;
-	const pointColor = isActive ? COLORS.gray[ 900 ] : COLORS.gray[ 400 ];
-	const pointColorHover = isActive ? COLORS.gray[ 900 ] : COLORS.theme.accent;
-
-	return css`
-		box-shadow: ${ boxShadow };
-		color: ${ pointColor };
-
-		*:hover > & {
-			color: ${ pointColorHover };
-		}
-	`;
-};
-
-export const pointBase = (
-	props: Pick< AlignmentMatrixControlCellProps, 'isActive' >
-) => {
-	return css`
-		background: currentColor;
-		box-sizing: border-box;
-		display: grid;
-		margin: auto;
-		@media not ( prefers-reduced-motion ) {
-			transition: all 120ms linear;
-		}
-
-		${ pointActive( props ) }
-	`;
-};
-
-export const Point = styled.span`
-	height: 6px;
-	width: 6px;
-	${ pointBase }
-`;
-
-export const Cell = styled.span`
-	appearance: none;
-	border: none;
-	box-sizing: border-box;
-	margin: 0;
-	display: flex;
-	position: relative;
-	outline: none;
-	align-items: center;
-	justify-content: center;
-	padding: 0;
-`;

package/src/composite/current/index.ts

@@ -1,20 +0,0 @@
-/**
- * Composite is a component that may contain navigable items represented by
- * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements
- * all the keyboard navigation mechanisms to ensure that there's only one
- * tab stop for the whole Composite element. This means that it can behave as
- * a roving tabindex or aria-activedescendant container.
- *
- * @see https://ariakit.org/components/composite
- */
-
-export {
-	Composite,
-	CompositeGroup,
-	CompositeGroupLabel,
-	CompositeItem,
-	CompositeRow,
-	useCompositeStore,
-} from '@ariakit/react';
-
-export type { CompositeStore, CompositeStoreProps } from '@ariakit/react';

package/src/composite/current/stories/index.story.tsx

@@ -1,86 +0,0 @@
-/**
- * External dependencies
- */
-import type { Meta, StoryFn } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { isRTL } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import {
-	Composite,
-	CompositeGroup,
-	CompositeRow,
-	CompositeItem,
-	useCompositeStore,
-} from '..';
-import { UseCompositeStorePlaceholder, transform } from './utils';
-
-const meta: Meta< typeof UseCompositeStorePlaceholder > = {
-	title: 'Components/Composite (V2)',
-	component: UseCompositeStorePlaceholder,
-	subcomponents: {
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		Composite,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		CompositeGroup,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		CompositeRow,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-		CompositeItem,
-	},
-	tags: [ 'status-private' ],
-	parameters: {
-		docs: {
-			canvas: { sourceState: 'shown' },
-			source: { transform },
-			extractArgTypes: ( component: React.FunctionComponent ) => {
-				const name = component.displayName;
-				const path = name
-					?.replace(
-						/([a-z])([A-Z])/g,
-						( _, a, b ) => `${ a }-${ b.toLowerCase() }`
-					)
-					.toLowerCase();
-				const url = `https://ariakit.org/reference/${ path }`;
-				return {
-					props: {
-						name: 'Props',
-						description: `See <a href="${ url }">Ariakit docs</a> for <code>${ name }</code>`,
-						table: { type: { summary: undefined } },
-					},
-				};
-			},
-		},
-	},
-};
-export default meta;
-
-export const Default: StoryFn< typeof Composite > = ( { ...initialState } ) => {
-	const rtl = isRTL();
-	const store = useCompositeStore( { rtl, ...initialState } );
-
-	return (
-		<Composite role="grid" store={ store } aria-label="Ariakit Composite">
-			<CompositeRow role="row">
-				<CompositeItem role="gridcell">Item A1</CompositeItem>
-				<CompositeItem role="gridcell">Item A2</CompositeItem>
-				<CompositeItem role="gridcell">Item A3</CompositeItem>
-			</CompositeRow>
-			<CompositeRow role="row">
-				<CompositeItem role="gridcell">Item B1</CompositeItem>
-				<CompositeItem role="gridcell">Item B2</CompositeItem>
-				<CompositeItem role="gridcell">Item B3</CompositeItem>
-			</CompositeRow>
-			<CompositeRow role="row">
-				<CompositeItem role="gridcell">Item C1</CompositeItem>
-				<CompositeItem role="gridcell">Item C2</CompositeItem>
-				<CompositeItem role="gridcell">Item C3</CompositeItem>
-			</CompositeRow>
-		</Composite>
-	);
-};

package/src/composite/index.ts

@@ -1,7 +0,0 @@
-// Originally this pointed at a Reakit implementation of
-// `Composite`, but we are removing Reakit entirely from the
-// codebase. We will continue to support the Reakit API
-// through the 'legacy' version, which uses Ariakit under
-// the hood.
-
-export * from './legacy';

package/src/composite/v2.ts

@@ -1,4 +0,0 @@
-// Although we have migrated away from Reakit, the 'current'
-// Ariakit implementation is still considered a v2.
-
-export * from './current';

package/src/navigator/navigator-back-button/index.ts

@@ -1 +0,0 @@
-export { default as NavigatorBackButton } from './component';

package/src/navigator/navigator-button/index.ts

@@ -1 +0,0 @@
-export { default as NavigatorButton } from './component';

package/src/navigator/navigator-provider/index.ts

@@ -1 +0,0 @@
-export { default as NavigatorProvider } from './component';

package/src/navigator/navigator-screen/index.ts

@@ -1 +0,0 @@
-export { default as NavigatorScreen } from './component';

package/src/navigator/navigator-to-parent-button/index.ts

@@ -1 +0,0 @@
-export { default as NavigatorToParentButton } from './component';

package/src/utils/input/base.js

@@ -1,30 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import { COLORS } from '../colors-values';
-import { CONFIG } from '../';
-
-export const inputStyleNeutral = css`
-	box-shadow: 0 0 0 transparent;
-	border-radius: ${ CONFIG.radiusBlockUi };
-	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
-
-	@media not ( prefers-reduced-motion ) {
-		transition: box-shadow 0.1s linear;
-	}
-`;
-
-export const inputStyleFocus = css`
-	border-color: ${ COLORS.theme.accent };
-	box-shadow: 0 0 0
-		calc( ${ CONFIG.borderWidthFocus } - ${ CONFIG.borderWidth } )
-		${ COLORS.theme.accent };
-
-	// Windows High Contrast mode will show this outline, but not the box-shadow.
-	outline: 2px solid transparent;
-`;

package/src/utils/input/index.js

@@ -1 +0,0 @@
-export * from './input-control';

package/src/utils/input/input-control.js

@@ -1,63 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import { inputStyleNeutral, inputStyleFocus } from './base';
-import { font } from '../font';
-import { COLORS } from '../colors-values';
-import { breakpoint } from '../breakpoint';
-
-export const inputControl = css`
-	display: block;
-	font-family: ${ font( 'default.fontFamily' ) };
-	padding: 6px 8px;
-	${ inputStyleNeutral };
-
-	/* Fonts smaller than 16px causes mobile safari to zoom. */
-	font-size: ${ font( 'mobileTextMinFontSize' ) };
-	/* Override core line-height. To be reviewed. */
-	line-height: normal;
-
-	${ breakpoint( 'small' ) } {
-		font-size: ${ font( 'default.fontSize' ) };
-		/* Override core line-height. To be reviewed. */
-		line-height: normal;
-	}
-
-	&:focus {
-		${ inputStyleFocus }
-	}
-
-	// Use opacity to work in various editor styles.
-	&::-webkit-input-placeholder {
-		color: ${ COLORS.ui.darkGrayPlaceholder };
-	}
-
-	&::-moz-placeholder {
-		opacity: 1; // Necessary because Firefox reduces this from 1.
-		color: ${ COLORS.ui.darkGrayPlaceholder };
-	}
-
-	&:-ms-input-placeholder {
-		color: ${ COLORS.ui.darkGrayPlaceholder };
-	}
-
-	.is-dark-theme & {
-		&::-webkit-input-placeholder {
-			color: ${ COLORS.ui.lightGrayPlaceholder };
-		}
-
-		&::-moz-placeholder {
-			opacity: 1; // Necessary because Firefox reduces this from 1.
-			color: ${ COLORS.ui.lightGrayPlaceholder };
-		}
-
-		&:-ms-input-placeholder {
-			color: ${ COLORS.ui.lightGrayPlaceholder };
-		}
-	}
-`;