@wordpress/components 38.0.0 → 39.0.0

package/src/context/wordpress-component.ts

@@ -1,7 +1,15 @@
+import type * as React from 'react';
+
 /**
- * External dependencies
+ * Loose intrinsic attribute bag used when a polymorphic component is rendered
+ * with an `as` prop. Previous implementations enabled precise typings for the
+ * given `as` element (e.g. `as="label"` unlocks `htmlFor`), but doing so
+ * contributed to high memory usage and slow compilation times.
  */
-import type * as React from 'react';
+type PolymorphicIntrinsicProps = Omit<
+	React.AllHTMLAttributes< Element > & React.SVGAttributes< Element >,
+	'as' | 'children'
+>;
 
 // Based on https://github.com/ariakit/ariakit/blob/reakit/packages/reakit-utils/src/types.ts
 export type WordPressComponentProps<
@@ -24,7 +32,10 @@ export type WordPressComponentProps<
 	( IsPolymorphic extends true
 		? {
 				/** The HTML element or React component to render the component as. */
-				as?: T | keyof React.JSX.IntrinsicElements;
+				as?:
+					| T
+					| keyof React.JSX.IntrinsicElements
+					| React.JSXElementConstructor< any >;
 		  }
 		: {} );
 
@@ -32,16 +43,32 @@ export type WordPressComponent<
 	T extends React.ElementType | null,
 	O,
 	IsPolymorphic extends boolean,
-> = {
-	< TT extends React.ElementType >(
-		props: WordPressComponentProps< O, TT, false > &
-			( IsPolymorphic extends true
-				? {
-						/** The HTML element or React component to render the component as. */
-						as: TT;
-				  }
-				: {} )
-	): React.ReactNode;
+> = ( IsPolymorphic extends true
+	? {
+			/**
+			 * Intrinsic `as` (e.g. `as="label"`): accept a flat HTML/SVG attribute
+			 * bag instead of remapping to that tag's props.
+			 */
+			(
+				props: WordPressComponentProps< O, T, false > & {
+					/** The HTML element to render the component as. */
+					as: keyof React.JSX.IntrinsicElements;
+				} & Omit< PolymorphicIntrinsicProps, keyof O >
+			): React.ReactNode;
+			/**
+			 * Component `as` (e.g. `as={ Item }`): remap to that component's props.
+			 */
+			< C extends React.JSXElementConstructor< any > >(
+				props: WordPressComponentProps< O, T, false > & {
+					/** The React component to render the component as. */
+					as: C;
+				} & Omit<
+						React.ComponentPropsWithoutRef< C >,
+						'as' | keyof O | 'children'
+					>
+			): React.ReactNode;
+	  }
+	: unknown ) & {
 	( props: WordPressComponentProps< O, T, IsPolymorphic > ): React.ReactNode;
 	displayName?: string;
 	/**

package/src/custom-gradient-picker/constants.ts

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 
 export const DEFAULT_GRADIENT =

package/src/custom-gradient-picker/gradient-bar/control-points.tsx

@@ -1,26 +1,14 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
 import { colord } from 'colord';
-
-/**
- * WordPress dependencies
- */
 import { useInstanceId } from '@wordpress/compose';
 import { useEffect, useRef, useState, useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { plus } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import Button from '../../button';
 import { HStack } from '../../h-stack';
 import { ColorPicker } from '../../color-picker';
 import { VisuallyHidden } from '../../visually-hidden';
 import { CustomColorPickerDropdown } from '../../color-palette';
-
 import {
 	addControlPoint,
 	clampPercent,

package/src/custom-gradient-picker/gradient-bar/index.tsx

@@ -1,16 +1,6 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { useRef, useReducer } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
+import type { MouseEventHandler } from 'react';
 import ControlPoints from './control-points';
 import { getHorizontalRelativeGradientPosition } from './utils';
 import { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';
@@ -20,7 +10,6 @@ import type {
 	CustomGradientBarReducerAction,
 	CustomGradientBarIdleState,
 } from '../types';
-import type { MouseEventHandler } from 'react';
 
 const customGradientBarReducer = (
 	state: CustomGradientBarReducerState,

package/src/custom-gradient-picker/gradient-bar/test/utils.ts

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { getHorizontalRelativeGradientPosition } from '../utils';
 
 describe( 'getHorizontalRelativeGradientPosition', () => {

package/src/custom-gradient-picker/gradient-bar/utils.ts

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';
 import type { ControlPoint } from '../types';
 

package/src/custom-gradient-picker/index.tsx

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import { type LinearGradientNode } from 'gradient-parser';
-
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import { useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import AnglePickerControl from '../angle-picker-control';
 import CustomGradientBar from './gradient-bar';
 import { Flex } from '../flex';
@@ -166,7 +155,7 @@ export function CustomGradientPicker( {
 			color: getStopCssColor( colorStop ),
 			// Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,
 			// TypeScript doesn't know that `colorStop.length` is not undefined here.
-			// @ts-expect-error
+			// @ts-expect-error `colorStop.length` is possibly `undefined`.
 			position: parseInt( colorStop.length.value ),
 		};
 	} );

package/src/custom-gradient-picker/serializer.ts

@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
 import type gradientParser from 'gradient-parser';
 
 export function serializeGradientColor( {

package/src/custom-gradient-picker/stories/index.story.tsx

@@ -1,16 +1,6 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import CustomGradientPicker from '../';
 
 const meta: Meta< typeof CustomGradientPicker > = {

package/src/custom-gradient-picker/styles/custom-gradient-picker-styles.tsx

@@ -1,10 +1,4 @@
-/**
- * External dependencies
- */
 import styled from '@emotion/styled';
-/**
- * Internal dependencies
- */
 import { FlexBlock } from '../../flex';
 
 export const SelectWrapper = styled( FlexBlock )`

package/src/custom-gradient-picker/test/index.tsx

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import CustomGradientPicker from '../';
 
 function ControlledCustomGradientPicker( {

package/src/custom-gradient-picker/test/serializer.ts

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import {
 	serializeGradientColor,
 	serializeGradientPosition,

package/src/custom-gradient-picker/types.ts

@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
 import type gradientParser from 'gradient-parser';
 
 export type CustomGradientPickerProps = {

package/src/custom-gradient-picker/utils.ts

@@ -1,13 +1,6 @@
-/**
- * External dependencies
- */
 import gradientParser from 'gradient-parser';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
-
-/**
- * Internal dependencies
- */
 import {
 	DEFAULT_GRADIENT,
 	HORIZONTAL_GRADIENT_ORIENTATION,

package/src/custom-select-control/index.tsx

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import * as Ariakit from '@ariakit/react';
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { useInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import CustomSelect from '../custom-select-control-v2/custom-select';
 import CustomSelectItem from '../custom-select-control-v2/item';
 import * as Styled from '../custom-select-control-v2/styles';

package/src/custom-select-control/stories/index.story.tsx

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
-
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import CustomSelectControl from '..';
 
 const meta: Meta< typeof CustomSelectControl > = {

package/src/custom-select-control/test/index.tsx

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import { screen } from '@testing-library/react';
 import { click, press, sleep, type, waitFor } from '@ariakit/test';
 import { render } from '@ariakit/test/react';
-
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import _CustomSelectControl from '..';
 
 const UncontrolledCustomSelectControl = (

package/src/custom-select-control/types.ts

@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
 import type { FocusEventHandler, MouseEventHandler } from 'react';
 
 /**

package/src/custom-select-control-v2/custom-select.tsx

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import * as Ariakit from '@ariakit/react';
-
-/**
- * WordPress dependencies
- */
 import { createContext, useCallback, useMemo } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { VisuallyHidden } from '../visually-hidden';
 import * as Styled from './styles';
 import type {

package/src/custom-select-control-v2/index.tsx

@@ -1,10 +1,4 @@
-/**
- * External dependencies
- */
 import * as Ariakit from '@ariakit/react';
-/**
- * Internal dependencies
- */
 import CustomSelect from './custom-select';
 import type { CustomSelectProps } from './types';
 import type { WordPressComponentProps } from '../context';

package/src/custom-select-control-v2/item.tsx

@@ -1,11 +1,5 @@
-/**
- * WordPress dependencies
- */
 import { useContext } from '@wordpress/element';
 import { Icon, check } from '@wordpress/icons';
-/**
- * Internal dependencies
- */
 import type { CustomSelectItemProps } from './types';
 import type { WordPressComponentProps } from '../context';
 import * as Styled from './styles';

package/src/custom-select-control-v2/stories/index.story.tsx

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
-
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import CustomSelectControlV2 from '..';
 
 const meta: Meta< typeof CustomSelectControlV2 > = {

package/src/custom-select-control-v2/styles.ts

@@ -1,12 +1,6 @@
-/**
- * External dependencies
- */
 import * as Ariakit from '@ariakit/react';
 import { css, keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
-/**
- * Internal dependencies
- */
 import { COLORS, CONFIG } from '../utils';
 import { space } from '../utils/space';
 import { chevronIconSize } from '../select-control/styles/select-control-styles';

package/src/custom-select-control-v2/test/index.tsx

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import { screen } from '@testing-library/react';
 import { click, press, type } from '@ariakit/test';
 import { render } from '@ariakit/test/react';
-
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import UncontrolledCustomSelectControlV2 from '..';
 import type { CustomSelectProps } from '../types';
 

package/src/custom-select-control-v2/types.ts

@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
 import type * as Ariakit from '@ariakit/react';
 
 export type CustomSelectStore = {

package/src/dashicon/index.tsx

@@ -5,10 +5,6 @@
  * @property {string}                    [className] Class name
  * @property {number}                    [size]      Size of the icon
  */
-
-/**
- * Internal dependencies
- */
 import type { WordPressComponentProps } from '../context';
 import type { DashiconProps } from './types';
 

package/src/date-time/date-picker/index.tsx

@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
 import {
 	isSameDay,
 	subMonths,
@@ -13,18 +10,10 @@ import {
 	isSameMonth,
 } from 'date-fns';
 import type { KeyboardEventHandler } from 'react';
-
-/**
- * WordPress dependencies
- */
 import { __, _n, sprintf, isRTL } from '@wordpress/i18n';
 import { arrowLeft, arrowRight } from '@wordpress/icons';
 import { dateI18n, date as formatDate, getSettings } from '@wordpress/date';
 import { useState, useRef, useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { useLilius } from './use-lilius';
 import type { DatePickerProps } from '../types';
 import {

package/src/date-time/date-picker/styles.ts

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import styled from '@emotion/styled';
-
-/**
- * Internal dependencies
- */
 import Button from '../../button';
 import { boxSizingReset, COLORS, CONFIG } from '../../utils';
 import { HStack } from '../../h-stack';

package/src/date-time/date-picker/test/index.tsx

@@ -1,13 +1,6 @@
-/**
- * External dependencies
- */
 import { format } from 'date-fns';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
 import DatePicker from '..';
 
 describe( 'DatePicker', () => {

package/src/date-time/date-picker/test/use-lilius.ts

@@ -1,12 +1,5 @@
-/**
- * External dependencies
- */
 import { act, renderHook } from '@testing-library/react';
 import { addYears, getYear, set, startOfToday, subYears } from 'date-fns';
-
-/**
- * Internal dependencies
- */
 import { Month, useLilius } from '../use-lilius';
 
 const getDate = ( {

package/src/date-time/date-picker/use-lilius/index.ts

@@ -28,10 +28,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-/**
- * External dependencies
- */
 import {
 	addMonths,
 	addYears,
@@ -52,10 +48,6 @@ import {
 	subMonths,
 	subYears,
 } from 'date-fns';
-
-/**
- * WordPress dependencies
- */
 import { useCallback, useMemo, useState } from '@wordpress/element';
 
 export enum Month {

package/src/date-time/date-time/index.tsx

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import type { ForwardedRef } from 'react';
-
-/**
- * WordPress dependencies
- */
 import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { default as DatePicker } from '../date-picker';
 import { default as TimePicker } from '../time-picker';
 import type { DateTimePickerProps } from '../types';

package/src/date-time/date-time/styles.ts

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import styled from '@emotion/styled';
-
-/**
- * Internal dependencies
- */
 import { VStack } from '../../v-stack';
 
 export const Wrapper = styled( VStack )`

package/src/date-time/date-time/test/index.tsx

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import timezoneMock from 'timezone-mock';
-
-/**
- * WordPress dependencies
- */
 import { getSettings, setSettings, type DateSettings } from '@wordpress/date';
-
-/**
- * Internal dependencies
- */
 import DateTimePicker from '..';
 
 describe( 'DateTimePicker', () => {

package/src/date-time/index.ts

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import { default as DatePicker } from './date-picker';
 import { default as TimePicker } from './time-picker';
 import { default as DateTimePicker } from './date-time';

package/src/date-time/stories/date-time.story.tsx

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
-
-/**
- * WordPress dependencies
- */
 import { useState, useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import DateTimePicker from '../date-time';
 import { daysFromNow, isWeekend } from './utils';
 

package/src/date-time/stories/date.story.tsx

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
-
-/**
- * WordPress dependencies
- */
 import { useState, useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import DatePicker from '../date-picker';
 import { daysFromNow, isWeekend } from './utils';
 

package/src/date-time/stories/time.story.tsx

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
-
-/**
- * WordPress dependencies
- */
 import { useState, useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import TimePicker from '../time-picker';
 
 const meta: Meta< typeof TimePicker > = {

package/src/date-time/time-picker/styles.ts

@@ -1,12 +1,5 @@
-/**
- * External dependencies
- */
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
 import { COLORS, CONFIG } from '../../utils';
 import { space } from '../../utils/space';
 import {