@wordpress/components 23.6.0 → 23.8.0

package/build/color-list-picker/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/components/src/color-list-picker/index.tsx"],"names":["ColorOption","label","value","colors","disableCustomColors","enableAlpha","onChange","isOpen","setIsOpen","prev","swatch","ColorListPicker","labels","map","index","newColor","newColors","slice"],"mappings":";;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAbA;AACA;AACA;;AAIA;AACA;AACA;AAQA,SAASA,WAAT,OAOsB;AAAA,MAPA;AACrBC,IAAAA,KADqB;AAErBC,IAAAA,KAFqB;AAGrBC,IAAAA,MAHqB;AAIrBC,IAAAA,mBAJqB;AAKrBC,IAAAA,WALqB;AAMrBC,IAAAA;AANqB,GAOA;AACrB,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwB,uBAAU,KAAV,CAA9B;AACA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,SAAS,EAAC,6CADX;AAEC,IAAA,OAAO,EAAG,MAAMA,SAAS,CAAIC,IAAF,IAAY,CAAEA,IAAhB;AAF1B,KAIC,4BAAC,cAAD;AAAQ,IAAA,OAAO,EAAC,YAAhB;AAA6B,IAAA,OAAO,EAAG;AAAvC,KACGP,KAAK,GACN,4BAAC,uBAAD;AACC,IAAA,UAAU,EAAGA,KADd;AAEC,IAAA,SAAS,EAAC;AAFX,IADM,GAMN,4BAAC,aAAD;AAAM,IAAA,IAAI,EAAGQ;AAAb,IAPF,EASC,0CAAQT,KAAR,CATD,CAJD,CADD,EAiBGM,MAAM,IACP,4BAAC,qBAAD;AACC,IAAA,SAAS,EAAC,4CADX;AAEC,IAAA,MAAM,EAAGJ,MAFV;AAGC,IAAA,KAAK,EAAGD,KAHT;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,QAAQ,EAAGI,QALZ;AAMC,IAAA,mBAAmB,EAAGF,mBANvB;AAOC,IAAA,WAAW,EAAGC;AAPf,IAlBF,CADD;AA+BA;;AAED,SAASM,eAAT,QAO0B;AAAA,MAPA;AACzBR,IAAAA,MADyB;AAEzBS,IAAAA,MAFyB;AAGzBV,IAAAA,KAAK,GAAG,EAHiB;AAIzBE,IAAAA,mBAJyB;AAKzBC,IAAAA,WALyB;AAMzBC,IAAAA;AANyB,GAOA;AACzB,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGM,MAAM,CAACC,GAAP,CAAY,CAAEZ,KAAF,EAASa,KAAT,KACb,4BAAC,WAAD;AACC,IAAA,GAAG,EAAGA,KADP;AAEC,IAAA,KAAK,EAAGb,KAFT;AAGC,IAAA,KAAK,EAAGC,KAAK,CAAEY,KAAF,CAHd;AAIC,IAAA,MAAM,EAAGX,MAJV;AAKC,IAAA,mBAAmB,EAAGC,mBALvB;AAMC,IAAA,WAAW,EAAGC,WANf;AAOC,IAAA,QAAQ,EAAKU,QAAF,IAAgB;AAC1B,YAAMC,SAAS,GAAGd,KAAK,CAACe,KAAN,EAAlB;AACAD,MAAAA,SAAS,CAAEF,KAAF,CAAT,GAAqBC,QAArB;AACAT,MAAAA,QAAQ,CAAEU,SAAF,CAAR;AACA;AAXF,IADC,CADH,CADD;AAmBA;;eAEcL,e","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { swatch } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport ColorPalette from '../color-palette';\nimport ColorIndicator from '../color-indicator';\nimport Icon from '../icon';\nimport { HStack } from '../h-stack';\nimport type { ColorListPickerProps, ColorOptionProps } from './types';\n\nfunction ColorOption( {\n\tlabel,\n\tvalue,\n\tcolors,\n\tdisableCustomColors,\n\tenableAlpha,\n\tonChange,\n}: ColorOptionProps ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\tclassName=\"components-color-list-picker__swatch-button\"\n\t\t\t\tonClick={ () => setIsOpen( ( prev ) => ! prev ) }\n\t\t\t>\n\t\t\t\t<HStack justify=\"flex-start\" spacing={ 2 }>\n\t\t\t\t\t{ value ? (\n\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\tcolorValue={ value }\n\t\t\t\t\t\t\tclassName=\"components-color-list-picker__swatch-color\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Icon icon={ swatch } />\n\t\t\t\t\t) }\n\t\t\t\t\t<span>{ label }</span>\n\t\t\t\t</HStack>\n\t\t\t</Button>\n\t\t\t{ isOpen && (\n\t\t\t\t<ColorPalette\n\t\t\t\t\tclassName=\"components-color-list-picker__color-picker\"\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tclearable={ false }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction ColorListPicker( {\n\tcolors,\n\tlabels,\n\tvalue = [],\n\tdisableCustomColors,\n\tenableAlpha,\n\tonChange,\n}: ColorListPickerProps ) {\n\treturn (\n\t\t<div className=\"components-color-list-picker\">\n\t\t\t{ labels.map( ( label, index ) => (\n\t\t\t\t<ColorOption\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tvalue={ value[ index ] }\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tconst newColors = value.slice();\n\t\t\t\t\t\tnewColors[ index ] = newColor;\n\t\t\t\t\t\tonChange( newColors );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n\nexport default ColorListPicker;\n"]}

package/build-module/color-list-picker/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/components/src/color-list-picker/index.tsx"],"names":["useState","swatch","Button","ColorPalette","ColorIndicator","Icon","HStack","ColorOption","label","value","colors","disableCustomColors","enableAlpha","onChange","isOpen","setIsOpen","prev","ColorListPicker","labels","map","index","newColor","newColors","slice"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,oBAAzB;AACA,SAASC,MAAT,QAAuB,kBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,IAAP,MAAiB,SAAjB;AACA,SAASC,MAAT,QAAuB,YAAvB;;AAGA,SAASC,WAAT,OAOsB;AAAA,MAPA;AACrBC,IAAAA,KADqB;AAErBC,IAAAA,KAFqB;AAGrBC,IAAAA,MAHqB;AAIrBC,IAAAA,mBAJqB;AAKrBC,IAAAA,WALqB;AAMrBC,IAAAA;AANqB,GAOA;AACrB,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwBf,QAAQ,CAAE,KAAF,CAAtC;AACA,SACC,8BACC,cAAC,MAAD;AACC,IAAA,SAAS,EAAC,6CADX;AAEC,IAAA,OAAO,EAAG,MAAMe,SAAS,CAAIC,IAAF,IAAY,CAAEA,IAAhB;AAF1B,KAIC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC,YAAhB;AAA6B,IAAA,OAAO,EAAG;AAAvC,KACGP,KAAK,GACN,cAAC,cAAD;AACC,IAAA,UAAU,EAAGA,KADd;AAEC,IAAA,SAAS,EAAC;AAFX,IADM,GAMN,cAAC,IAAD;AAAM,IAAA,IAAI,EAAGR;AAAb,IAPF,EASC,4BAAQO,KAAR,CATD,CAJD,CADD,EAiBGM,MAAM,IACP,cAAC,YAAD;AACC,IAAA,SAAS,EAAC,4CADX;AAEC,IAAA,MAAM,EAAGJ,MAFV;AAGC,IAAA,KAAK,EAAGD,KAHT;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,QAAQ,EAAGI,QALZ;AAMC,IAAA,mBAAmB,EAAGF,mBANvB;AAOC,IAAA,WAAW,EAAGC;AAPf,IAlBF,CADD;AA+BA;;AAED,SAASK,eAAT,QAO0B;AAAA,MAPA;AACzBP,IAAAA,MADyB;AAEzBQ,IAAAA,MAFyB;AAGzBT,IAAAA,KAAK,GAAG,EAHiB;AAIzBE,IAAAA,mBAJyB;AAKzBC,IAAAA,WALyB;AAMzBC,IAAAA;AANyB,GAOA;AACzB,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGK,MAAM,CAACC,GAAP,CAAY,CAAEX,KAAF,EAASY,KAAT,KACb,cAAC,WAAD;AACC,IAAA,GAAG,EAAGA,KADP;AAEC,IAAA,KAAK,EAAGZ,KAFT;AAGC,IAAA,KAAK,EAAGC,KAAK,CAAEW,KAAF,CAHd;AAIC,IAAA,MAAM,EAAGV,MAJV;AAKC,IAAA,mBAAmB,EAAGC,mBALvB;AAMC,IAAA,WAAW,EAAGC,WANf;AAOC,IAAA,QAAQ,EAAKS,QAAF,IAAgB;AAC1B,YAAMC,SAAS,GAAGb,KAAK,CAACc,KAAN,EAAlB;AACAD,MAAAA,SAAS,CAAEF,KAAF,CAAT,GAAqBC,QAArB;AACAR,MAAAA,QAAQ,CAAES,SAAF,CAAR;AACA;AAXF,IADC,CADH,CADD;AAmBA;;AAED,eAAeL,eAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { swatch } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport ColorPalette from '../color-palette';\nimport ColorIndicator from '../color-indicator';\nimport Icon from '../icon';\nimport { HStack } from '../h-stack';\nimport type { ColorListPickerProps, ColorOptionProps } from './types';\n\nfunction ColorOption( {\n\tlabel,\n\tvalue,\n\tcolors,\n\tdisableCustomColors,\n\tenableAlpha,\n\tonChange,\n}: ColorOptionProps ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\tclassName=\"components-color-list-picker__swatch-button\"\n\t\t\t\tonClick={ () => setIsOpen( ( prev ) => ! prev ) }\n\t\t\t>\n\t\t\t\t<HStack justify=\"flex-start\" spacing={ 2 }>\n\t\t\t\t\t{ value ? (\n\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\tcolorValue={ value }\n\t\t\t\t\t\t\tclassName=\"components-color-list-picker__swatch-color\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Icon icon={ swatch } />\n\t\t\t\t\t) }\n\t\t\t\t\t<span>{ label }</span>\n\t\t\t\t</HStack>\n\t\t\t</Button>\n\t\t\t{ isOpen && (\n\t\t\t\t<ColorPalette\n\t\t\t\t\tclassName=\"components-color-list-picker__color-picker\"\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tclearable={ false }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction ColorListPicker( {\n\tcolors,\n\tlabels,\n\tvalue = [],\n\tdisableCustomColors,\n\tenableAlpha,\n\tonChange,\n}: ColorListPickerProps ) {\n\treturn (\n\t\t<div className=\"components-color-list-picker\">\n\t\t\t{ labels.map( ( label, index ) => (\n\t\t\t\t<ColorOption\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tvalue={ value[ index ] }\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tconst newColors = value.slice();\n\t\t\t\t\t\tnewColors[ index ] = newColor;\n\t\t\t\t\t\tonChange( newColors );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n\nexport default ColorListPicker;\n"]}

package/build-types/color-list-picker/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/color-list-picker/index.tsx"],"names":[],"mappings":";AAcA,OAAO,KAAK,EAAE,oBAAoB,EAAoB,MAAM,SAAS,CAAC;AA4CtE,iBAAS,eAAe,CAAE,EACzB,MAAM,EACN,MAAM,EACN,KAAU,EACV,mBAAmB,EACnB,WAAW,EACX,QAAQ,GACR,EAAE,oBAAoB,eAoBtB;AAED,eAAe,eAAe,CAAC"}

package/build-types/color-list-picker/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/color-list-picker/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,MAAM,oBAAoB,GAAG;IAClC;;;;;OAKG;IACH,MAAM,EAAE,KAAK,CAAE;QACd,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,WAAW,CAAE,aAAa,CAAE,OAAO,CAAE,CAAE,CAAC;KAC/C,CAAE,CAAC;IACJ;;OAEG;IACH,MAAM,EAAE,KAAK,CAAE,MAAM,CAAE,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAE,MAAM,GAAG,SAAS,CAAE,CAAC;IACpC;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,CAAE,QAAQ,EAAE,KAAK,CAAE,MAAM,GAAG,SAAS,CAAE,KAAM,IAAI,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAClC,oBAAoB,EACpB,QAAQ,GAAG,qBAAqB,GAAG,aAAa,CAChD,GAAG;IACH,KAAK,EAAE,oBAAoB,CAAE,QAAQ,CAAE,CAAE,MAAM,CAAE,CAAC;IAClD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,CAAE,QAAQ,EAAE,MAAM,GAAG,SAAS,KAAM,IAAI,CAAC;CACnD,CAAC"}

package/src/animate/index.js

@@ -1,60 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * @typedef {'top' | 'top left' | 'top right' | 'middle' | 'middle left' | 'middle right' | 'bottom' | 'bottom left' | 'bottom right'} AppearOrigin
- * @typedef {'left' | 'right'} SlideInOrigin
- * @typedef {{ type: 'appear'; origin?: AppearOrigin }} AppearOptions
- * @typedef {{ type: 'slide-in'; origin?: SlideInOrigin }} SlideInOptions
- * @typedef {{ type: 'loading' }} LoadingOptions
- * @typedef {AppearOptions | SlideInOptions | LoadingOptions} GetAnimateOptions
- */
-
-/* eslint-disable jsdoc/valid-types */
-/**
- * @param {GetAnimateOptions['type']} type The animation type
- * @return {'top' | 'left'} Default origin
- */
-function getDefaultOrigin( type ) {
-	return type === 'appear' ? 'top' : 'left';
-}
-/* eslint-enable jsdoc/valid-types */
-
-/**
- * @param {GetAnimateOptions} options
- *
- * @return {string | undefined} ClassName that applies the animations
- */
-export function getAnimateClassName( options ) {
-	if ( options.type === 'loading' ) {
-		return classnames( 'components-animate__loading' );
-	}
-
-	const { type, origin = getDefaultOrigin( type ) } = options;
-
-	if ( type === 'appear' ) {
-		const [ yAxis, xAxis = 'center' ] = origin.split( ' ' );
-		return classnames( 'components-animate__appear', {
-			[ 'is-from-' + xAxis ]: xAxis !== 'center',
-			[ 'is-from-' + yAxis ]: yAxis !== 'middle',
-		} );
-	}
-
-	if ( type === 'slide-in' ) {
-		return classnames(
-			'components-animate__slide-in',
-			'is-from-' + origin
-		);
-	}
-
-	return undefined;
-}
-
-// @ts-ignore Reason: Planned for deprecation
-export default function Animate( { type, options = {}, children } ) {
-	return children( {
-		className: getAnimateClassName( { type, ...options } ),
-	} );
-}

package/src/animate/stories/index.js

@@ -1,53 +0,0 @@
-/**
- * Internal dependencies
- */
-import Animate from '../';
-import Notice from '../../notice';
-
-export default { title: 'Components/Animate', component: Animate };
-
-export const _default = () => (
-	<Animate>
-		{ ( { className } ) => (
-			<Notice className={ className } status="success">
-				<p>{ `No default animation. Use one of type = "appear", "slide-in", or "loading".` }</p>
-			</Notice>
-		) }
-	</Animate>
-);
-
-// Unexported helper for different origins.
-const Appear = ( { origin } ) => (
-	<Animate type="appear" options={ { origin } }>
-		{ ( { className } ) => (
-			<Notice className={ className } status="success">
-				<p>Appear animation. Origin: { origin }.</p>
-			</Notice>
-		) }
-	</Animate>
-);
-
-export const appearTopLeft = () => <Appear origin="top left" />;
-export const appearTopRight = () => <Appear origin="top right" />;
-export const appearBottomLeft = () => <Appear origin="bottom left" />;
-export const appearBottomRight = () => <Appear origin="bottom right" />;
-
-export const loading = () => (
-	<Animate type="loading">
-		{ ( { className } ) => (
-			<Notice className={ className } status="success">
-				<p>Loading animation.</p>
-			</Notice>
-		) }
-	</Animate>
-);
-
-export const slideIn = () => (
-	<Animate type="slide-in">
-		{ ( { className } ) => (
-			<Notice className={ className } status="success">
-				<p>Slide-in animation.</p>
-			</Notice>
-		) }
-	</Animate>
-);

package/src/color-picker/stories/index.js

@@ -1,41 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { ColorPicker } from '..';
-
-export default {
-	component: ColorPicker,
-	title: 'Components/ColorPicker',
-	argTypes: {
-		color: { control: { type: null } },
-		copyFormat: {
-			control: { type: 'select' },
-			options: [ 'rgb', 'hsl', 'hex', undefined ],
-		},
-		// We can't use a `on*` regex because this component will switch to
-		// legacy mode when an onChangeComplete prop is passed.
-		onChange: { action: 'onChange' },
-	},
-};
-
-const Template = ( { onChange, ...props } ) => {
-	const [ color, setColor ] = useState();
-
-	return (
-		<ColorPicker
-			{ ...props }
-			color={ color }
-			onChange={ ( ...changeArgs ) => {
-				onChange( ...changeArgs );
-				setColor( ...changeArgs );
-			} }
-		/>
-	);
-};
-
-export const Default = Template.bind( {} );

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

@@ -1,189 +0,0 @@
-// @ts-nocheck
-
-/**
- * Internal dependencies
- */
-import { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';
-
-/**
- * Control point for the gradient bar.
- *
- * @typedef {Object} ControlPoint
- * @property {string} color    Color of the control point.
- * @property {number} position Integer position of the control point as a percentage.
- */
-
-/**
- * Color as parsed from the gradient by gradient-parser.
- *
- * @typedef {Object} Color
- * @property {string} r   Red component.
- * @property {string} g   Green component.
- * @property {string} b   Green component.
- * @property {string} [a] Optional alpha component.
- */
-
-/**
- * Clamps a number between 0 and 100.
- *
- * @param {number} value Value to clamp.
- *
- * @return {number} Value clamped between 0 and 100.
- */
-export function clampPercent( value ) {
-	return Math.max( 0, Math.min( 100, value ) );
-}
-
-/**
- * Check if a control point is overlapping with another.
- *
- * @param {ControlPoint[]} value        Array of control points.
- * @param {number}         initialIndex Index of the position to test.
- * @param {number}         newPosition  New position of the control point.
- * @param {number}         minDistance  Distance considered to be overlapping.
- *
- * @return {boolean} True if the point is overlapping.
- */
-export function isOverlapping(
-	value,
-	initialIndex,
-	newPosition,
-	minDistance = MINIMUM_DISTANCE_BETWEEN_POINTS
-) {
-	const initialPosition = value[ initialIndex ].position;
-	const minPosition = Math.min( initialPosition, newPosition );
-	const maxPosition = Math.max( initialPosition, newPosition );
-
-	return value.some( ( { position }, index ) => {
-		return (
-			index !== initialIndex &&
-			( Math.abs( position - newPosition ) < minDistance ||
-				( minPosition < position && position < maxPosition ) )
-		);
-	} );
-}
-
-/**
- * Adds a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points   Array of control points.
- * @param {number}         position Position to insert the new point.
- * @param {Color}          color    Color to update the control point at index.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function addControlPoint( points, position, color ) {
-	const nextIndex = points.findIndex(
-		( point ) => point.position > position
-	);
-	const newPoint = { color, position };
-	const newPoints = points.slice();
-	newPoints.splice( nextIndex - 1, 0, newPoint );
-	return newPoints;
-}
-
-/**
- * Removes a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points Array of control points.
- * @param {number}         index  Index to remove.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function removeControlPoint( points, index ) {
-	return points.filter( ( point, pointIndex ) => {
-		return pointIndex !== index;
-	} );
-}
-
-/**
- * Updates a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points   Array of control points.
- * @param {number}         index    Index to update.
- * @param {ControlPoint[]} newPoint New control point to replace the index.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function updateControlPoint( points, index, newPoint ) {
-	const newValue = points.slice();
-	newValue[ index ] = newPoint;
-	return newValue;
-}
-
-/**
- * Updates the position of a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points      Array of control points.
- * @param {number}         index       Index to update.
- * @param {number}         newPosition Position to move the control point at index.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function updateControlPointPosition( points, index, newPosition ) {
-	if ( isOverlapping( points, index, newPosition ) ) {
-		return points;
-	}
-	const newPoint = {
-		...points[ index ],
-		position: newPosition,
-	};
-	return updateControlPoint( points, index, newPoint );
-}
-
-/**
- * Updates the position of a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points   Array of control points.
- * @param {number}         index    Index to update.
- * @param {Color}          newColor Color to update the control point at index.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function updateControlPointColor( points, index, newColor ) {
-	const newPoint = {
-		...points[ index ],
-		color: newColor,
-	};
-	return updateControlPoint( points, index, newPoint );
-}
-
-/**
- * Updates the position of a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points   Array of control points.
- * @param {number}         position Position of the color stop.
- * @param {string}         newColor Color to update the control point at index.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function updateControlPointColorByPosition(
-	points,
-	position,
-	newColor
-) {
-	const index = points.findIndex( ( point ) => point.position === position );
-	return updateControlPointColor( points, index, newColor );
-}
-
-/**
- * Gets the horizontal coordinate when dragging a control point with the mouse.
- *
- * @param {number}  mouseXCoordinate Horizontal coordinate of the mouse position.
- * @param {Element} containerElement Container for the gradient picker.
- *
- * @return {number | undefined} Whole number percentage from the left.
- */
-export function getHorizontalRelativeGradientPosition(
-	mouseXCoordinate,
-	containerElement
-) {
-	if ( ! containerElement ) {
-		return;
-	}
-	const { x, width } = containerElement.getBoundingClientRect();
-	const absolutePositionValue = mouseXCoordinate - x;
-	return Math.round(
-		clampPercent( ( absolutePositionValue * 100 ) / width )
-	);
-}

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

@@ -1,48 +0,0 @@
-// @ts-nocheck
-
-export function serializeGradientColor( { type, value } ) {
-	if ( type === 'literal' ) {
-		return value;
-	}
-	if ( type === 'hex' ) {
-		return `#${ value }`;
-	}
-	return `${ type }(${ value.join( ',' ) })`;
-}
-
-export function serializeGradientPosition( position ) {
-	if ( ! position ) {
-		return '';
-	}
-	const { value, type } = position;
-	return `${ value }${ type }`;
-}
-
-export function serializeGradientColorStop( { type, value, length } ) {
-	return `${ serializeGradientColor( {
-		type,
-		value,
-	} ) } ${ serializeGradientPosition( length ) }`;
-}
-
-export function serializeGradientOrientation( orientation ) {
-	if ( ! orientation || orientation.type !== 'angular' ) {
-		return;
-	}
-	return `${ orientation.value }deg`;
-}
-
-export function serializeGradient( { type, orientation, colorStops } ) {
-	const serializedOrientation = serializeGradientOrientation( orientation );
-	const serializedColorStops = colorStops
-		.sort( ( colorStop1, colorStop2 ) => {
-			return (
-				( colorStop1?.length?.value ?? 0 ) -
-				( colorStop2?.length?.value ?? 0 )
-			);
-		} )
-		.map( serializeGradientColorStop );
-	return `${ type }(${ [ serializedOrientation, ...serializedColorStops ]
-		.filter( Boolean )
-		.join( ',' ) })`;
-}

package/src/custom-gradient-picker/stories/index.js

@@ -1,33 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import CustomGradientPicker from '../';
-
-export default {
-	title: 'Components/CustomGradientPicker',
-	component: CustomGradientPicker,
-	argTypes: {
-		__nextHasNoMargin: { control: { type: 'boolean' } },
-	},
-};
-
-const CustomGradientPickerWithState = ( props ) => {
-	const [ gradient, setGradient ] = useState();
-	return (
-		<CustomGradientPicker
-			{ ...props }
-			value={ gradient }
-			onChange={ setGradient }
-		/>
-	);
-};
-
-export const Default = CustomGradientPickerWithState.bind( {} );
-Default.args = {
-	__nextHasNoMargin: true,
-};