@wordpress/components 25.8.2 → 25.9.0

package/build/confirm-dialog/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_i18n","_modal","_interopRequireDefault","_context","_flex","_button","_text","_vStack","styles","_interopRequireWildcard","_useCx","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ConfirmDialog","props","forwardedRef","isOpen","isOpenProp","onConfirm","onCancel","children","confirmButtonText","cancelButtonText","otherProps","useContextSystem","cx","useCx","wrapperClassName","wrapper","cancelButtonRef","useRef","confirmButtonRef","setIsOpen","useState","shouldSelfClose","setShouldSelfClose","useEffect","isIsOpenSet","handleEvent","useCallback","callback","event","handleEnter","isConfirmOrCancelButton","target","current","cancelLabel","__","confirmLabel","createElement","Fragment","onRequestClose","onKeyDown","closeButtonLabel","isDismissible","ref","overlayClassName","__experimentalHideHeader","VStack","spacing","Text","Flex","direction","justify","variant","onClick","_default","contextConnect","exports"],"sources":["@wordpress/components/src/confirm-dialog/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, KeyboardEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport type { OwnProps, DialogInputEvent } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport { useContextSystem, contextConnect } from '../ui/context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\n\nfunction ConfirmDialog(\n\tprops: WordPressComponentProps< OwnProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tisOpen: isOpenProp,\n\t\tonConfirm,\n\t\tonCancel,\n\t\tchildren,\n\t\tconfirmButtonText,\n\t\tcancelButtonText,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ConfirmDialog' );\n\n\tconst cx = useCx();\n\tconst wrapperClassName = cx( styles.wrapper );\n\tconst cancelButtonRef = useRef();\n\tconst confirmButtonRef = useRef();\n\n\tconst [ isOpen, setIsOpen ] = useState< boolean >();\n\tconst [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();\n\n\tuseEffect( () => {\n\t\t// We only allow the dialog to close itself if `isOpenProp` is *not* set.\n\t\t// If `isOpenProp` is set, then it (probably) means it's controlled by a\n\t\t// parent component. In that case, `shouldSelfClose` might do more harm than\n\t\t// good, so we disable it.\n\t\tconst isIsOpenSet = typeof isOpenProp !== 'undefined';\n\t\tsetIsOpen( isIsOpenSet ? isOpenProp : true );\n\t\tsetShouldSelfClose( ! isIsOpenSet );\n\t}, [ isOpenProp ] );\n\n\tconst handleEvent = useCallback(\n\t\t( callback?: ( event: DialogInputEvent ) => void ) =>\n\t\t\t( event: DialogInputEvent ) => {\n\t\t\t\tcallback?.( event );\n\t\t\t\tif ( shouldSelfClose ) {\n\t\t\t\t\tsetIsOpen( false );\n\t\t\t\t}\n\t\t\t},\n\t\t[ shouldSelfClose, setIsOpen ]\n\t);\n\n\tconst handleEnter = useCallback(\n\t\t( event: KeyboardEvent< HTMLDivElement > ) => {\n\t\t\t// Avoid triggering the 'confirm' action when a button is focused,\n\t\t\t// as this can cause a double submission.\n\t\t\tconst isConfirmOrCancelButton =\n\t\t\t\tevent.target === cancelButtonRef.current ||\n\t\t\t\tevent.target === confirmButtonRef.current;\n\n\t\t\tif ( ! isConfirmOrCancelButton && event.key === 'Enter' ) {\n\t\t\t\thandleEvent( onConfirm )( event );\n\t\t\t}\n\t\t},\n\t\t[ handleEvent, onConfirm ]\n\t);\n\n\tconst cancelLabel = cancelButtonText ?? __( 'Cancel' );\n\tconst confirmLabel = confirmButtonText ?? __( 'OK' );\n\n\treturn (\n\t\t<>\n\t\t\t{ isOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\tonRequestClose={ handleEvent( onCancel ) }\n\t\t\t\t\tonKeyDown={ handleEnter }\n\t\t\t\t\tcloseButtonLabel={ cancelLabel }\n\t\t\t\t\tisDismissible={ true }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\toverlayClassName={ wrapperClassName }\n\t\t\t\t\t__experimentalHideHeader\n\t\t\t\t\t{ ...otherProps }\n\t\t\t\t>\n\t\t\t\t\t<VStack spacing={ 8 }>\n\t\t\t\t\t\t<Text>{ children }</Text>\n\t\t\t\t\t\t<Flex direction=\"row\" justify=\"flex-end\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tref={ cancelButtonRef }\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onCancel ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ cancelLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tref={ confirmButtonRef }\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onConfirm ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ confirmLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default contextConnect( ConfirmDialog, 'ConfirmDialog' );\n"],"mappings":"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"}
+{"version":3,"names":["_i18n","require","_element","_modal","_interopRequireDefault","_context","_flex","_button","_text","_vStack","styles","_interopRequireWildcard","_useCx","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ConfirmDialog","props","forwardedRef","isOpen","isOpenProp","onConfirm","onCancel","children","confirmButtonText","cancelButtonText","otherProps","useContextSystem","cx","useCx","wrapperClassName","wrapper","cancelButtonRef","useRef","confirmButtonRef","setIsOpen","useState","shouldSelfClose","setShouldSelfClose","useEffect","isIsOpenSet","handleEvent","useCallback","callback","event","handleEnter","isConfirmOrCancelButton","target","current","cancelLabel","__","confirmLabel","_react","createElement","Fragment","onRequestClose","onKeyDown","closeButtonLabel","isDismissible","ref","overlayClassName","__experimentalHideHeader","VStack","spacing","Text","Flex","direction","justify","variant","onClick","_default","contextConnect","exports"],"sources":["@wordpress/components/src/confirm-dialog/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, KeyboardEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport type { OwnProps, DialogInputEvent } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport { useContextSystem, contextConnect } from '../context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\n\nfunction ConfirmDialog(\n\tprops: WordPressComponentProps< OwnProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tisOpen: isOpenProp,\n\t\tonConfirm,\n\t\tonCancel,\n\t\tchildren,\n\t\tconfirmButtonText,\n\t\tcancelButtonText,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ConfirmDialog' );\n\n\tconst cx = useCx();\n\tconst wrapperClassName = cx( styles.wrapper );\n\tconst cancelButtonRef = useRef();\n\tconst confirmButtonRef = useRef();\n\n\tconst [ isOpen, setIsOpen ] = useState< boolean >();\n\tconst [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();\n\n\tuseEffect( () => {\n\t\t// We only allow the dialog to close itself if `isOpenProp` is *not* set.\n\t\t// If `isOpenProp` is set, then it (probably) means it's controlled by a\n\t\t// parent component. In that case, `shouldSelfClose` might do more harm than\n\t\t// good, so we disable it.\n\t\tconst isIsOpenSet = typeof isOpenProp !== 'undefined';\n\t\tsetIsOpen( isIsOpenSet ? isOpenProp : true );\n\t\tsetShouldSelfClose( ! isIsOpenSet );\n\t}, [ isOpenProp ] );\n\n\tconst handleEvent = useCallback(\n\t\t( callback?: ( event: DialogInputEvent ) => void ) =>\n\t\t\t( event: DialogInputEvent ) => {\n\t\t\t\tcallback?.( event );\n\t\t\t\tif ( shouldSelfClose ) {\n\t\t\t\t\tsetIsOpen( false );\n\t\t\t\t}\n\t\t\t},\n\t\t[ shouldSelfClose, setIsOpen ]\n\t);\n\n\tconst handleEnter = useCallback(\n\t\t( event: KeyboardEvent< HTMLDivElement > ) => {\n\t\t\t// Avoid triggering the 'confirm' action when a button is focused,\n\t\t\t// as this can cause a double submission.\n\t\t\tconst isConfirmOrCancelButton =\n\t\t\t\tevent.target === cancelButtonRef.current ||\n\t\t\t\tevent.target === confirmButtonRef.current;\n\n\t\t\tif ( ! isConfirmOrCancelButton && event.key === 'Enter' ) {\n\t\t\t\thandleEvent( onConfirm )( event );\n\t\t\t}\n\t\t},\n\t\t[ handleEvent, onConfirm ]\n\t);\n\n\tconst cancelLabel = cancelButtonText ?? __( 'Cancel' );\n\tconst confirmLabel = confirmButtonText ?? __( 'OK' );\n\n\treturn (\n\t\t<>\n\t\t\t{ isOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\tonRequestClose={ handleEvent( onCancel ) }\n\t\t\t\t\tonKeyDown={ handleEnter }\n\t\t\t\t\tcloseButtonLabel={ cancelLabel }\n\t\t\t\t\tisDismissible={ true }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\toverlayClassName={ wrapperClassName }\n\t\t\t\t\t__experimentalHideHeader\n\t\t\t\t\t{ ...otherProps }\n\t\t\t\t>\n\t\t\t\t\t<VStack spacing={ 8 }>\n\t\t\t\t\t\t<Text>{ children }</Text>\n\t\t\t\t\t\t<Flex direction=\"row\" justify=\"flex-end\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tref={ cancelButtonRef }\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onCancel ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ cancelLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tref={ confirmButtonRef }\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onConfirm ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ confirmLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default contextConnect( ConfirmDialog, 'ConfirmDialog' );\n"],"mappings":"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"}

package/build/context/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["COMPONENT_NAMESPACE","exports","CONNECTED_NAMESPACE","CONNECT_STATIC_NAMESPACE"],"sources":["@wordpress/components/src/context/constants.js"],"sourcesContent":["export const COMPONENT_NAMESPACE = 'data-wp-component';\nexport const CONNECTED_NAMESPACE = 'data-wp-c16t';\n\n/**\n * Special key where the connected namespaces are stored.\n * This is attached to Context connected components as a static property.\n */\nexport const CONNECT_STATIC_NAMESPACE = '__contextSystemKey__';\n"],"mappings":";;;;;;AAAO,MAAMA,mBAAmB,GAAG,mBAAmB;AAACC,OAAA,CAAAD,mBAAA,GAAAA,mBAAA;AAChD,MAAME,mBAAmB,GAAG,cAAc;;AAEjD;AACA;AACA;AACA;AAHAD,OAAA,CAAAC,mBAAA,GAAAA,mBAAA;AAIO,MAAMC,wBAAwB,GAAG,sBAAsB;AAACF,OAAA,CAAAE,wBAAA,GAAAA,wBAAA"}

package/build/{ui/context → context}/context-connect.js

@@ -73,7 +73,7 @@ function _contextConnect(Component, namespace, options) {
   }
 
   // @ts-expect-error We can't rely on inferred types here because of the
-  // `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/9620bae6fef4fde7cc2b7833f416e240207cda29/packages/components/src/ui/context/wordpress-component.ts#L32-L33
+  // `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/4f3a11243c365f94892e479bff0b922ccc4ccda3/packages/components/src/context/wordpress-component.ts#L32-L33
   return Object.assign(WrappedComponent, {
     [_constants.CONNECT_STATIC_NAMESPACE]: [...new Set(mergedNamespace)],
     displayName: namespace,

package/build/context/context-connect.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_warning","_interopRequireDefault","_constants","_getStyledClassNameFromKey","contextConnect","Component","namespace","_contextConnect","forwardsRef","contextConnectWithoutRef","options","WrappedComponent","forwardRef","SCRIPT_DEBUG","warn","mergedNamespace","CONNECT_STATIC_NAMESPACE","Array","isArray","Object","assign","Set","displayName","selector","getStyledClassNameFromKey","getConnectNamespace","namespaces","type","hasConnectNamespace","match","includes","some","result"],"sources":["@wordpress/components/src/context/context-connect.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, ReactChild, ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { CONNECT_STATIC_NAMESPACE } from './constants';\nimport { getStyledClassNameFromKey } from './get-styled-class-name-from-key';\nimport type { WordPressComponentFromProps } from '.';\n\ntype AcceptsTwoArgs<\n\tF extends ( ...args: any ) => any,\n\tErrorMessage = never,\n> = Parameters< F >[ 'length' ] extends 2 ? {} : ErrorMessage;\n\ntype ContextConnectOptions = {\n\tforwardsRef?: boolean;\n};\n\n/**\n * Forwards ref (React.ForwardRef) and \"Connects\" (or registers) a component\n * within the Context system under a specified namespace.\n *\n * @param Component The component to register into the Context system.\n * @param namespace The namespace to register the component under.\n * @return The connected WordPressComponent\n */\nexport function contextConnect<\n\tC extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null,\n>(\n\tComponent: C &\n\t\tAcceptsTwoArgs<\n\t\t\tC,\n\t\t\t'Warning: Your component function does not take a ref as the second argument. Did you mean to use `contextConnectWithoutRef`?'\n\t\t>,\n\tnamespace: string\n) {\n\treturn _contextConnect( Component, namespace, { forwardsRef: true } );\n}\n\n/**\n * \"Connects\" (or registers) a component within the Context system under a specified namespace.\n * Does not forward a ref.\n *\n * @param Component The component to register into the Context system.\n * @param namespace The namespace to register the component under.\n * @return The connected WordPressComponent\n */\nexport function contextConnectWithoutRef< P >(\n\tComponent: ( props: P ) => JSX.Element | null,\n\tnamespace: string\n) {\n\treturn _contextConnect( Component, namespace );\n}\n\n// This is an (experimental) evolution of the initial connect() HOC.\n// The hope is that we can improve render performance by removing functional\n// component wrappers.\nfunction _contextConnect<\n\tC extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null,\n\tO extends ContextConnectOptions,\n>(\n\tComponent: C,\n\tnamespace: string,\n\toptions?: O\n): WordPressComponentFromProps<\n\tParameters< C >[ 0 ],\n\tO[ 'forwardsRef' ] extends true ? true : false\n> {\n\tconst WrappedComponent = options?.forwardsRef\n\t\t? forwardRef< any, Parameters< C >[ 0 ] >( Component )\n\t\t: Component;\n\n\tif ( typeof namespace === 'undefined' ) {\n\t\twarn( 'contextConnect: Please provide a namespace' );\n\t}\n\n\t// @ts-expect-error internal property\n\tlet mergedNamespace = WrappedComponent[ CONNECT_STATIC_NAMESPACE ] || [\n\t\tnamespace,\n\t];\n\n\t/**\n\t * Consolidate (merge) namespaces before attaching it to the WrappedComponent.\n\t */\n\tif ( Array.isArray( namespace ) ) {\n\t\tmergedNamespace = [ ...mergedNamespace, ...namespace ];\n\t}\n\tif ( typeof namespace === 'string' ) {\n\t\tmergedNamespace = [ ...mergedNamespace, namespace ];\n\t}\n\n\t// @ts-expect-error We can't rely on inferred types here because of the\n\t// `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/4f3a11243c365f94892e479bff0b922ccc4ccda3/packages/components/src/context/wordpress-component.ts#L32-L33\n\treturn Object.assign( WrappedComponent, {\n\t\t[ CONNECT_STATIC_NAMESPACE ]: [ ...new Set( mergedNamespace ) ],\n\t\tdisplayName: namespace,\n\t\tselector: `.${ getStyledClassNameFromKey( namespace ) }`,\n\t} );\n}\n\n/**\n * Attempts to retrieve the connected namespace from a component.\n *\n * @param Component The component to retrieve a namespace from.\n * @return The connected namespaces.\n */\nexport function getConnectNamespace(\n\tComponent: ReactChild | undefined | {}\n): string[] {\n\tif ( ! Component ) return [];\n\n\tlet namespaces = [];\n\n\t// @ts-ignore internal property\n\tif ( Component[ CONNECT_STATIC_NAMESPACE ] ) {\n\t\t// @ts-ignore internal property\n\t\tnamespaces = Component[ CONNECT_STATIC_NAMESPACE ];\n\t}\n\n\t// @ts-ignore\n\tif ( Component.type && Component.type[ CONNECT_STATIC_NAMESPACE ] ) {\n\t\t// @ts-ignore\n\t\tnamespaces = Component.type[ CONNECT_STATIC_NAMESPACE ];\n\t}\n\n\treturn namespaces;\n}\n\n/**\n * Checks to see if a component is connected within the Context system.\n *\n * @param Component The component to retrieve a namespace from.\n * @param match     The namespace to check.\n */\nexport function hasConnectNamespace(\n\tComponent: ReactNode,\n\tmatch: string[] | string\n): boolean {\n\tif ( ! Component ) return false;\n\n\tif ( typeof match === 'string' ) {\n\t\treturn getConnectNamespace( Component ).includes( match );\n\t}\n\tif ( Array.isArray( match ) ) {\n\t\treturn match.some( ( result ) =>\n\t\t\tgetConnectNamespace( Component ).includes( result )\n\t\t);\n\t}\n\n\treturn false;\n}\n"],"mappings":"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"}

package/build/{ui/context → context}/context-system-provider.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useComponentsContext = exports.ContextSystemProvider = exports.ComponentsContext = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _deepmerge = _interopRequireDefault(require("deepmerge"));
 var _es = _interopRequireDefault(require("fast-deep-equal/es6"));
 var _isPlainObject = require("is-plain-object");
+var _element = require("@wordpress/element");
 var _warning = _interopRequireDefault(require("@wordpress/warning"));
-var _utils = require("../../utils");
+var _utils = require("../utils");
 /**
  * External dependencies
  */
@@ -97,7 +98,7 @@ const BaseContextSystemProvider = ({
   const contextValue = useContextSystemBridge({
     value
   });
-  return (0, _element.createElement)(ComponentsContext.Provider, {
+  return (0, _react.createElement)(ComponentsContext.Provider, {
     value: contextValue
   }, children);
 };

package/build/context/context-system-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_deepmerge","_interopRequireDefault","require","_es","_isPlainObject","_element","_warning","_utils","ComponentsContext","createContext","exports","useComponentsContext","useContext","useContextSystemBridge","value","parentContext","valueRef","useRef","useUpdateEffect","fastDeepEqual","current","SCRIPT_DEBUG","warn","JSON","stringify","config","useMemo","deepmerge","isMergeableObject","isPlainObject","BaseContextSystemProvider","children","contextValue","_react","createElement","Provider","ContextSystemProvider","memo"],"sources":["@wordpress/components/src/context/context-system-provider.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport deepmerge from 'deepmerge';\nimport fastDeepEqual from 'fast-deep-equal/es6';\nimport { isPlainObject } from 'is-plain-object';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateContext,\n\tuseContext,\n\tuseRef,\n\tuseMemo,\n\tmemo,\n} from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { useUpdateEffect } from '../utils';\n\nexport const ComponentsContext = createContext(\n\t/** @type {Record<string, any>} */ ( {} )\n);\nexport const useComponentsContext = () => useContext( ComponentsContext );\n\n/**\n * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.\n *\n * Note: This function will warn if it detects an un-memoized `value`\n *\n * @param {Object}              props\n * @param {Record<string, any>} props.value\n * @return {Record<string, any>} The consolidated value.\n */\nfunction useContextSystemBridge( { value } ) {\n\tconst parentContext = useComponentsContext();\n\n\tconst valueRef = useRef( value );\n\n\tuseUpdateEffect( () => {\n\t\tif (\n\t\t\t// Objects are equivalent.\n\t\t\tfastDeepEqual( valueRef.current, value ) &&\n\t\t\t// But not the same reference.\n\t\t\tvalueRef.current !== value\n\t\t) {\n\t\t\twarn( `Please memoize your context: ${ JSON.stringify( value ) }` );\n\t\t}\n\t}, [ value ] );\n\n\t// `parentContext` will always be memoized (i.e., the result of this hook itself)\n\t// or the default value from when the `ComponentsContext` was originally\n\t// initialized (which will never change, it's a static variable)\n\t// so this memoization will prevent `deepmerge()` from rerunning unless\n\t// the references to `value` change OR the `parentContext` has an actual material change\n\t// (because again, it's guaranteed to be memoized or a static reference to the empty object\n\t// so we know that the only changes for `parentContext` are material ones... i.e., why we\n\t// don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only\n\t// need to bother with the `value`). The `useUpdateEffect` above will ensure that we are\n\t// correctly warning when the `value` isn't being properly memoized. All of that to say\n\t// that this should be super safe to assume that `useMemo` will only run on actual\n\t// changes to the two dependencies, therefore saving us calls to `deepmerge()`!\n\tconst config = useMemo( () => {\n\t\t// Deep clone `parentContext` to avoid mutating it later.\n\t\treturn deepmerge( parentContext ?? {}, value ?? {}, {\n\t\t\tisMergeableObject: isPlainObject,\n\t\t} );\n\t}, [ parentContext, value ] );\n\n\treturn config;\n}\n\n/**\n * A Provider component that can modify props for connected components within\n * the Context system.\n *\n * @example\n * ```jsx\n * <ContextSystemProvider value={{ Button: { size: 'small' }}}>\n *   <Button>...</Button>\n * </ContextSystemProvider>\n * ```\n *\n * @template {Record<string, any>} T\n * @param {Object}                    options\n * @param {import('react').ReactNode} options.children Children to render.\n * @param {T}                         options.value    Props to render into connected components.\n * @return {JSX.Element} A Provider wrapped component.\n */\nconst BaseContextSystemProvider = ( { children, value } ) => {\n\tconst contextValue = useContextSystemBridge( { value } );\n\n\treturn (\n\t\t<ComponentsContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</ComponentsContext.Provider>\n\t);\n};\n\nexport const ContextSystemProvider = memo( BaseContextSystemProvider );\n"],"mappings":";;;;;;;;AAGA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,GAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AAKA,IAAAG,QAAA,GAAAH,OAAA;AAOA,IAAAI,QAAA,GAAAL,sBAAA,CAAAC,OAAA;AAKA,IAAAK,MAAA,GAAAL,OAAA;AAtBA;AACA;AACA;;AAKA;AACA;AACA;;AAUA;AACA;AACA;;AAGO,MAAMM,iBAAiB,GAAG,IAAAC,sBAAa,GAC7C,kCAAqC,CAAC,CACvC,CAAC;AAACC,OAAA,CAAAF,iBAAA,GAAAA,iBAAA;AACK,MAAMG,oBAAoB,GAAGA,CAAA,KAAM,IAAAC,mBAAU,EAAEJ,iBAAkB,CAAC;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARAE,OAAA,CAAAC,oBAAA,GAAAA,oBAAA;AASA,SAASE,sBAAsBA,CAAE;EAAEC;AAAM,CAAC,EAAG;EAC5C,MAAMC,aAAa,GAAGJ,oBAAoB,CAAC,CAAC;EAE5C,MAAMK,QAAQ,GAAG,IAAAC,eAAM,EAAEH,KAAM,CAAC;EAEhC,IAAAI,sBAAe,EAAE,MAAM;IACtB;IACC;IACA,IAAAC,WAAa,EAAEH,QAAQ,CAACI,OAAO,EAAEN,KAAM,CAAC;IACxC;IACAE,QAAQ,CAACI,OAAO,KAAKN,KAAK,EACzB;MACD,OAAAO,YAAA,oBAAAA,YAAA,gBAAAC,gBAAI,EAAG,gCAAgCC,IAAI,CAACC,SAAS,CAAEV,KAAM,CAAG,EAAE,CAAC;IACpE;EACD,CAAC,EAAE,CAAEA,KAAK,CAAG,CAAC;;EAEd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAMW,MAAM,GAAG,IAAAC,gBAAO,EAAE,MAAM;IAC7B;IACA,OAAO,IAAAC,kBAAS,EAAEZ,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAI,CAAC,CAAC,EAAED,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,EAAE;MACnDc,iBAAiB,EAAEC;IACpB,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEd,aAAa,EAAED,KAAK,CAAG,CAAC;EAE7B,OAAOW,MAAM;AACd;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMK,yBAAyB,GAAGA,CAAE;EAAEC,QAAQ;EAAEjB;AAAM,CAAC,KAAM;EAC5D,MAAMkB,YAAY,GAAGnB,sBAAsB,CAAE;IAAEC;EAAM,CAAE,CAAC;EAExD,OACC,IAAAmB,MAAA,CAAAC,aAAA,EAAC1B,iBAAiB,CAAC2B,QAAQ;IAACrB,KAAK,EAAGkB;EAAc,GAC/CD,QACyB,CAAC;AAE/B,CAAC;AAEM,MAAMK,qBAAqB,GAAG,IAAAC,aAAI,EAAEP,yBAA0B,CAAC;AAACpB,OAAA,CAAA0B,qBAAA,GAAAA,qBAAA"}

package/build/context/get-styled-class-name-from-key.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_changeCase","require","_memize","_interopRequireDefault","getStyledClassName","namespace","kebab","kebabCase","getStyledClassNameFromKey","memoize","exports"],"sources":["@wordpress/components/src/context/get-styled-class-name-from-key.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { paramCase as kebabCase } from 'change-case';\nimport memoize from 'memize';\n\n/**\n * Generates the connected component CSS className based on the namespace.\n *\n * @param namespace The name of the connected component.\n * @return The generated CSS className.\n */\nfunction getStyledClassName( namespace: string ): string {\n\tconst kebab = kebabCase( namespace );\n\treturn `components-${ kebab }`;\n}\n\nexport const getStyledClassNameFromKey = memoize( getStyledClassName );\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AAJA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,kBAAkBA,CAAEC,SAAiB,EAAW;EACxD,MAAMC,KAAK,GAAG,IAAAC,qBAAS,EAAEF,SAAU,CAAC;EACpC,OAAQ,cAAcC,KAAO,EAAC;AAC/B;AAEO,MAAME,yBAAyB,GAAG,IAAAC,eAAO,EAAEL,kBAAmB,CAAC;AAACM,OAAA,CAAAF,yBAAA,GAAAA,yBAAA"}

package/build/context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_contextSystemProvider","require","_contextConnect","_useContextSystem","_wordpressComponent","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["@wordpress/components/src/context/index.ts"],"sourcesContent":["export {\n\tContextSystemProvider,\n\tuseComponentsContext,\n} from './context-system-provider';\nexport {\n\tcontextConnect,\n\tcontextConnectWithoutRef,\n\thasConnectNamespace,\n\tgetConnectNamespace,\n} from './context-connect';\nexport { useContextSystem } from './use-context-system';\nexport * from './wordpress-component';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,sBAAA,GAAAC,OAAA;AAIA,IAAAC,eAAA,GAAAD,OAAA;AAMA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AAAAI,MAAA,CAAAC,IAAA,CAAAF,mBAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,mBAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,mBAAA,CAAAI,GAAA;IAAA;EAAA;AAAA"}

package/build/{ui/context → context}/use-context-system.js

@@ -9,7 +9,7 @@ var _warning = _interopRequireDefault(require("@wordpress/warning"));
 var _contextSystemProvider = require("./context-system-provider");
 var _utils = require("./utils");
 var _getStyledClassNameFromKey = require("./get-styled-class-name-from-key");
-var _useCx = require("../../utils/hooks/use-cx");
+var _useCx = require("../utils/hooks/use-cx");
 /**
  * WordPress dependencies
  */

package/build/context/use-context-system.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_warning","_interopRequireDefault","require","_contextSystemProvider","_utils","_getStyledClassNameFromKey","_useCx","useContextSystem","props","namespace","contextSystemProps","useComponentsContext","SCRIPT_DEBUG","warn","contextProps","finalComponentProps","getConnectedNamespace","getNamespace","_overrides","overrideProps","otherContextProps","initialMergedProps","Object","entries","length","assign","cx","useCx","classes","getStyledClassNameFromKey","className","rendered","renderChildren","children","key","undefined"],"sources":["@wordpress/components/src/context/use-context-system.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport warn from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { useComponentsContext } from './context-system-provider';\nimport { getNamespace, getConnectedNamespace } from './utils';\nimport { getStyledClassNameFromKey } from './get-styled-class-name-from-key';\nimport { useCx } from '../utils/hooks/use-cx';\n\n/**\n * @template TProps\n * @typedef {TProps & { className: string }} ConnectedProps\n */\n\n/**\n * Custom hook that derives registered props from the Context system.\n * These derived props are then consolidated with incoming component props.\n *\n * @template {{ className?: string }} P\n * @param {P}      props     Incoming props from the component.\n * @param {string} namespace The namespace to register and to derive context props from.\n * @return {ConnectedProps<P>} The connected props.\n */\nexport function useContextSystem( props, namespace ) {\n\tconst contextSystemProps = useComponentsContext();\n\tif ( typeof namespace === 'undefined' ) {\n\t\twarn( 'useContextSystem: Please provide a namespace' );\n\t}\n\n\tconst contextProps = contextSystemProps?.[ namespace ] || {};\n\n\t/* eslint-disable jsdoc/no-undefined-types */\n\t/** @type {ConnectedProps<P>} */\n\t// @ts-ignore We fill in the missing properties below\n\tconst finalComponentProps = {\n\t\t...getConnectedNamespace(),\n\t\t...getNamespace( namespace ),\n\t};\n\t/* eslint-enable jsdoc/no-undefined-types */\n\n\tconst { _overrides: overrideProps, ...otherContextProps } = contextProps;\n\n\tconst initialMergedProps = Object.entries( otherContextProps ).length\n\t\t? Object.assign( {}, otherContextProps, props )\n\t\t: props;\n\n\tconst cx = useCx();\n\n\tconst classes = cx(\n\t\tgetStyledClassNameFromKey( namespace ),\n\t\tprops.className\n\t);\n\n\t// Provides the ability to customize the render of the component.\n\tconst rendered =\n\t\ttypeof initialMergedProps.renderChildren === 'function'\n\t\t\t? initialMergedProps.renderChildren( initialMergedProps )\n\t\t\t: initialMergedProps.children;\n\n\tfor ( const key in initialMergedProps ) {\n\t\t// @ts-ignore filling in missing props\n\t\tfinalComponentProps[ key ] = initialMergedProps[ key ];\n\t}\n\n\tfor ( const key in overrideProps ) {\n\t\t// @ts-ignore filling in missing props\n\t\tfinalComponentProps[ key ] = overrideProps[ key ];\n\t}\n\n\t// Setting an `undefined` explicitly can cause unintended overwrites\n\t// when a `cloneElement()` is involved.\n\tif ( rendered !== undefined ) {\n\t\t// @ts-ignore\n\t\tfinalComponentProps.children = rendered;\n\t}\n\n\tfinalComponentProps.className = classes;\n\n\treturn finalComponentProps;\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,sBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,0BAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASK,gBAAgBA,CAAEC,KAAK,EAAEC,SAAS,EAAG;EACpD,MAAMC,kBAAkB,GAAG,IAAAC,2CAAoB,EAAC,CAAC;EACjD,IAAK,OAAOF,SAAS,KAAK,WAAW,EAAG;IACvC,OAAAG,YAAA,oBAAAA,YAAA,gBAAAC,gBAAI,EAAE,8CAA+C,CAAC;EACvD;EAEA,MAAMC,YAAY,GAAGJ,kBAAkB,GAAID,SAAS,CAAE,IAAI,CAAC,CAAC;;EAE5D;EACA;EACA;EACA,MAAMM,mBAAmB,GAAG;IAC3B,GAAG,IAAAC,4BAAqB,EAAC,CAAC;IAC1B,GAAG,IAAAC,mBAAY,EAAER,SAAU;EAC5B,CAAC;EACD;;EAEA,MAAM;IAAES,UAAU,EAAEC,aAAa;IAAE,GAAGC;EAAkB,CAAC,GAAGN,YAAY;EAExE,MAAMO,kBAAkB,GAAGC,MAAM,CAACC,OAAO,CAAEH,iBAAkB,CAAC,CAACI,MAAM,GAClEF,MAAM,CAACG,MAAM,CAAE,CAAC,CAAC,EAAEL,iBAAiB,EAAEZ,KAAM,CAAC,GAC7CA,KAAK;EAER,MAAMkB,EAAE,GAAG,IAAAC,YAAK,EAAC,CAAC;EAElB,MAAMC,OAAO,GAAGF,EAAE,CACjB,IAAAG,oDAAyB,EAAEpB,SAAU,CAAC,EACtCD,KAAK,CAACsB,SACP,CAAC;;EAED;EACA,MAAMC,QAAQ,GACb,OAAOV,kBAAkB,CAACW,cAAc,KAAK,UAAU,GACpDX,kBAAkB,CAACW,cAAc,CAAEX,kBAAmB,CAAC,GACvDA,kBAAkB,CAACY,QAAQ;EAE/B,KAAM,MAAMC,GAAG,IAAIb,kBAAkB,EAAG;IACvC;IACAN,mBAAmB,CAAEmB,GAAG,CAAE,GAAGb,kBAAkB,CAAEa,GAAG,CAAE;EACvD;EAEA,KAAM,MAAMA,GAAG,IAAIf,aAAa,EAAG;IAClC;IACAJ,mBAAmB,CAAEmB,GAAG,CAAE,GAAGf,aAAa,CAAEe,GAAG,CAAE;EAClD;;EAEA;EACA;EACA,IAAKH,QAAQ,KAAKI,SAAS,EAAG;IAC7B;IACApB,mBAAmB,CAACkB,QAAQ,GAAGF,QAAQ;EACxC;EAEAhB,mBAAmB,CAACe,SAAS,GAAGF,OAAO;EAEvC,OAAOb,mBAAmB;AAC3B"}

package/build/context/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_constants","require","getNamespace","componentName","COMPONENT_NAMESPACE","getConnectedNamespace","CONNECTED_NAMESPACE"],"sources":["@wordpress/components/src/context/utils.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { CONNECTED_NAMESPACE, COMPONENT_NAMESPACE } from './constants';\n\n/**\n * Creates a dedicated context namespace HTML attribute for components.\n * ns is short for \"namespace\"\n *\n * @example\n * ```jsx\n * <div {...ns('Container')} />\n * ```\n *\n * @param {string} componentName The name for the component.\n * @return {Record<string, any>} A props object with the namespaced HTML attribute.\n */\nexport function getNamespace( componentName ) {\n\treturn { [ COMPONENT_NAMESPACE ]: componentName };\n}\n\n/**\n * Creates a dedicated connected context namespace HTML attribute for components.\n * ns is short for \"namespace\"\n *\n * @example\n * ```jsx\n * <div {...cns()} />\n * ```\n *\n * @return {Record<string, any>} A props object with the namespaced HTML attribute.\n */\nexport function getConnectedNamespace() {\n\treturn { [ CONNECTED_NAMESPACE ]: true };\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,UAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,YAAYA,CAAEC,aAAa,EAAG;EAC7C,OAAO;IAAE,CAAEC,8BAAmB,GAAID;EAAc,CAAC;AAClD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,qBAAqBA,CAAA,EAAG;EACvC,OAAO;IAAE,CAAEC,8BAAmB,GAAI;EAAK,CAAC;AACzC"}

package/build/context/wordpress-component.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["@wordpress/components/src/context/wordpress-component.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type * as React from 'react';\n\n// Based on https://github.com/reakit/reakit/blob/master/packages/reakit-utils/src/types.ts\nexport type WordPressComponentProps<\n\t/** Prop types. */\n\tP,\n\t/** The HTML element to inherit props from. */\n\tT extends React.ElementType,\n\t/** Supports polymorphism through the `as` prop. */\n\tIsPolymorphic extends boolean = true,\n> = P &\n\t// The `children` prop is being explicitly omitted since it is otherwise implicitly added\n\t// by `ComponentPropsWithRef`. The context is that components should require the `children`\n\t// prop explicitly when needed (see https://github.com/WordPress/gutenberg/pull/31817).\n\tOmit< React.ComponentPropsWithoutRef< T >, 'as' | keyof P | 'children' > &\n\t( IsPolymorphic extends true\n\t\t? {\n\t\t\t\t/** The HTML element or React component to render the component as. */\n\t\t\t\tas?: T | keyof JSX.IntrinsicElements;\n\t\t  }\n\t\t: {} );\n\nexport type WordPressComponent<\n\tT extends React.ElementType,\n\tO,\n\tIsPolymorphic extends boolean,\n> = {\n\t< TT extends React.ElementType >(\n\t\tprops: WordPressComponentProps< O, TT, IsPolymorphic > &\n\t\t\t( IsPolymorphic extends true ? { as: TT } : {} )\n\t): JSX.Element | null;\n\t(\n\t\tprops: WordPressComponentProps< O, T, IsPolymorphic >\n\t): JSX.Element | null;\n\tdisplayName?: string;\n\t/**\n\t * A CSS selector used to fake component interpolation in styled components\n\t * for components not generated by `styled`. Anything passed to `contextConnect`\n\t * will get this property.\n\t *\n\t * We restrict it to a class to align with the already existing class names that\n\t * are generated by the context system.\n\t */\n\tselector?: `.${ string }`;\n};\n\nexport type WordPressComponentFromProps<\n\tProps,\n\tForwardsRef extends boolean = true,\n> = Props extends WordPressComponentProps< infer P, infer T, infer I >\n\t? WordPressComponent<\n\t\t\tT,\n\t\t\tP & ( ForwardsRef extends true ? React.RefAttributes< any > : {} ),\n\t\t\tI\n\t  >\n\t: never;\n"],"mappings":""}

package/build/custom-gradient-picker/gradient-bar/control-points.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _colord = require("colord");
 var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
 var _button = _interopRequireDefault(require("../../button"));
@@ -38,7 +39,7 @@ function ControlPointButton({
 }) {
   const instanceId = (0, _compose.useInstanceId)(ControlPointButton);
   const descriptionId = `components-custom-gradient-picker__control-point-button-description-${instanceId}`;
-  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_button.default, {
+  return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_button.default, {
     "aria-label": (0, _i18n.sprintf)(
     // translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).
     (0, _i18n.__)('Gradient control point at position %1$s%% with color code %2$s.'), position, color),
@@ -49,7 +50,7 @@ function ControlPointButton({
       'is-active': isOpen
     }),
     ...additionalProps
-  }), (0, _element.createElement)(_visuallyHidden.VisuallyHidden, {
+  }), (0, _react.createElement)(_visuallyHidden.VisuallyHidden, {
     id: descriptionId
   }, (0, _i18n.__)('Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.')));
 }
@@ -64,7 +65,7 @@ function GradientColorPickerDropdown({
     offset: 8
   }), []);
   const mergedClassName = (0, _classnames.default)('components-custom-gradient-picker__control-point-dropdown', className);
-  return (0, _element.createElement)(_colorPalette.CustomColorPickerDropdown, {
+  return (0, _react.createElement)(_colorPalette.CustomColorPickerDropdown, {
     isRenderedInSidebar: isRenderedInSidebar,
     popoverProps: popoverProps,
     className: mergedClassName,
@@ -117,16 +118,16 @@ function ControlPoints({
       cleanEventListenersRef.current?.();
     };
   }, []);
-  return (0, _element.createElement)(_element.Fragment, null, controlPoints.map((point, index) => {
+  return (0, _react.createElement)(_react.Fragment, null, controlPoints.map((point, index) => {
     const initialPosition = point?.position;
-    return ignoreMarkerPosition !== initialPosition && (0, _element.createElement)(GradientColorPickerDropdown, {
+    return ignoreMarkerPosition !== initialPosition && (0, _react.createElement)(GradientColorPickerDropdown, {
       isRenderedInSidebar: __experimentalIsRenderedInSidebar,
       key: index,
       onClose: onStopControlPointChange,
       renderToggle: ({
         isOpen,
         onToggle
-      }) => (0, _element.createElement)(ControlPointButton, {
+      }) => (0, _react.createElement)(ControlPointButton, {
         key: index,
         onClick: () => {
           if (controlPointMoveState.current && controlPointMoveState.current.significantMoveHappened) {
@@ -171,16 +172,16 @@ function ControlPoints({
       }),
       renderContent: ({
         onClose
-      }) => (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_colorPicker.ColorPicker, {
+      }) => (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_colorPicker.ColorPicker, {
         enableAlpha: !disableAlpha,
         color: point.color,
         onChange: color => {
           onChange((0, _utils.updateControlPointColor)(controlPoints, index, (0, _colord.colord)(color).toRgbString()));
         }
-      }), !disableRemove && controlPoints.length > 2 && (0, _element.createElement)(_hStack.HStack, {
+      }), !disableRemove && controlPoints.length > 2 && (0, _react.createElement)(_hStack.HStack, {
         className: "components-custom-gradient-picker__remove-control-point-wrapper",
         alignment: "center"
-      }, (0, _element.createElement)(_button.default, {
+      }, (0, _react.createElement)(_button.default, {
         onClick: () => {
           onChange((0, _utils.removeControlPoint)(controlPoints, index));
           onClose();
@@ -204,7 +205,7 @@ function InsertPoint({
   __experimentalIsRenderedInSidebar
 }) {
   const [alreadyInsertedPoint, setAlreadyInsertedPoint] = (0, _element.useState)(false);
-  return (0, _element.createElement)(GradientColorPickerDropdown, {
+  return (0, _react.createElement)(GradientColorPickerDropdown, {
     isRenderedInSidebar: __experimentalIsRenderedInSidebar,
     className: "components-custom-gradient-picker__inserter",
     onClose: () => {
@@ -213,7 +214,7 @@ function InsertPoint({
     renderToggle: ({
       isOpen,
       onToggle
-    }) => (0, _element.createElement)(_button.default, {
+    }) => (0, _react.createElement)(_button.default, {
       "aria-expanded": isOpen,
       "aria-haspopup": "true",
       onClick: () => {
@@ -228,7 +229,7 @@ function InsertPoint({
       className: "components-custom-gradient-picker__insert-point-dropdown",
       icon: _icons.plus
     }),
-    renderContent: () => (0, _element.createElement)(_colorPicker.ColorPicker, {
+    renderContent: () => (0, _react.createElement)(_colorPicker.ColorPicker, {
       enableAlpha: !disableAlpha,
       onChange: color => {
         if (!alreadyInsertedPoint) {

package/build/custom-gradient-picker/gradient-bar/control-points.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_classnames","_interopRequireDefault","_colord","_compose","_i18n","_icons","_button","_hStack","_colorPicker","_visuallyHidden","_colorPalette","_utils","_constants","ControlPointButton","isOpen","position","color","additionalProps","instanceId","useInstanceId","descriptionId","createElement","Fragment","default","sprintf","__","className","classnames","VisuallyHidden","id","GradientColorPickerDropdown","isRenderedInSidebar","props","popoverProps","useMemo","placement","offset","mergedClassName","CustomColorPickerDropdown","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","__experimentalIsRenderedInSidebar","controlPointMoveState","useRef","onMouseMove","event","current","undefined","relativePosition","getHorizontalRelativeGradientPosition","clientX","initialPosition","index","significantMoveHappened","Math","abs","MINIMUM_SIGNIFICANT_MOVE","updateControlPointPosition","cleanEventListeners","window","removeEventListener","listenersActivated","cleanEventListenersRef","useEffect","map","point","key","onClose","renderToggle","onToggle","onClick","onMouseDown","addEventListener","onKeyDown","code","stopPropagation","clampPercent","KEYBOARD_CONTROL_POINT_VARIATION","renderContent","ColorPicker","enableAlpha","updateControlPointColor","colord","toRgbString","length","HStack","alignment","removeControlPoint","variant","style","left","transform","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","useState","icon","plus","addControlPoint","updateControlPointColorByPosition","_default","exports"],"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/control-points.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { HStack } from '../../h-stack';\nimport { ColorPicker } from '../../color-picker';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { CustomColorPickerDropdown } from '../../color-palette';\n\nimport {\n\taddControlPoint,\n\tclampPercent,\n\tremoveControlPoint,\n\tupdateControlPointColor,\n\tupdateControlPointColorByPosition,\n\tupdateControlPointPosition,\n\tgetHorizontalRelativeGradientPosition,\n} from './utils';\nimport {\n\tMINIMUM_SIGNIFICANT_MOVE,\n\tKEYBOARD_CONTROL_POINT_VARIATION,\n} from './constants';\nimport type { WordPressComponentProps } from '../../ui/context';\nimport type {\n\tControlPointButtonProps,\n\tControlPointMoveState,\n\tControlPointsProps,\n\tInsertPointProps,\n} from '../types';\nimport type { CustomColorPickerDropdownProps } from '../../color-palette/types';\n\nfunction ControlPointButton( {\n\tisOpen,\n\tposition,\n\tcolor,\n\t...additionalProps\n}: WordPressComponentProps< ControlPointButtonProps, 'button', true > ) {\n\tconst instanceId = useInstanceId( ControlPointButton );\n\tconst descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t// translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Gradient control point at position %1$s%% with color code %2$s.'\n\t\t\t\t\t),\n\t\t\t\t\tposition,\n\t\t\t\t\tcolor\n\t\t\t\t) }\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'components-custom-gradient-picker__control-point-button',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isOpen,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t{ __(\n\t\t\t\t\t'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'\n\t\t\t\t) }\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n\nfunction GradientColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tclassName,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\t// Open the popover below the gradient control/insertion point\n\tconst popoverProps = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tplacement: 'bottom',\n\t\t\t\toffset: 8,\n\t\t\t} ) as const,\n\t\t[]\n\t);\n\n\tconst mergedClassName = classnames(\n\t\t'components-custom-gradient-picker__control-point-dropdown',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<CustomColorPickerDropdown\n\t\t\tisRenderedInSidebar={ isRenderedInSidebar }\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tclassName={ mergedClassName }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ControlPoints( {\n\tdisableRemove,\n\tdisableAlpha,\n\tgradientPickerDomRef,\n\tignoreMarkerPosition,\n\tvalue: controlPoints,\n\tonChange,\n\tonStartControlPointChange,\n\tonStopControlPointChange,\n\t__experimentalIsRenderedInSidebar,\n}: ControlPointsProps ) {\n\tconst controlPointMoveState = useRef< ControlPointMoveState >();\n\n\tconst onMouseMove = ( event: MouseEvent ) => {\n\t\tif (\n\t\t\tcontrolPointMoveState.current === undefined ||\n\t\t\tgradientPickerDomRef.current === null\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst relativePosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current\n\t\t);\n\n\t\tconst { initialPosition, index, significantMoveHappened } =\n\t\t\tcontrolPointMoveState.current;\n\n\t\tif (\n\t\t\t! significantMoveHappened &&\n\t\t\tMath.abs( initialPosition - relativePosition ) >=\n\t\t\t\tMINIMUM_SIGNIFICANT_MOVE\n\t\t) {\n\t\t\tcontrolPointMoveState.current.significantMoveHappened = true;\n\t\t}\n\n\t\tonChange(\n\t\t\tupdateControlPointPosition( controlPoints, index, relativePosition )\n\t\t);\n\t};\n\n\tconst cleanEventListeners = () => {\n\t\tif (\n\t\t\twindow &&\n\t\t\twindow.removeEventListener &&\n\t\t\tcontrolPointMoveState.current &&\n\t\t\tcontrolPointMoveState.current.listenersActivated\n\t\t) {\n\t\t\twindow.removeEventListener( 'mousemove', onMouseMove );\n\t\t\twindow.removeEventListener( 'mouseup', cleanEventListeners );\n\t\t\tonStopControlPointChange();\n\t\t\tcontrolPointMoveState.current.listenersActivated = false;\n\t\t}\n\t};\n\n\t// Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`\n\t// This memoization would prevent the event listeners from being properly cleaned.\n\t// Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.\n\tconst cleanEventListenersRef = useRef< () => void >();\n\tcleanEventListenersRef.current = cleanEventListeners;\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanEventListenersRef.current?.();\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t{ controlPoints.map( ( point, index ) => {\n\t\t\t\tconst initialPosition = point?.position;\n\t\t\t\treturn (\n\t\t\t\t\tignoreMarkerPosition !== initialPosition && (\n\t\t\t\t\t\t<GradientColorPickerDropdown\n\t\t\t\t\t\t\tisRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tonClose={ onStopControlPointChange }\n\t\t\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t\t\t<ControlPointButton\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current &&\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current\n\t\t\t\t\t\t\t\t\t\t\t\t.significantMoveHappened\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\t\t\tonStopControlPointChange();\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonMouseDown={ () => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\twindow &&\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current = {\n\t\t\t\t\t\t\t\t\t\t\t\tinitialPosition,\n\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\tsignificantMoveHappened: false,\n\t\t\t\t\t\t\t\t\t\t\t\tlistenersActivated: true,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t\t\t'mousemove',\n\t\t\t\t\t\t\t\t\t\t\t\tonMouseMove\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t\t\t'mouseup',\n\t\t\t\t\t\t\t\t\t\t\t\tcleanEventListeners\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpoint.position -\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\t\tevent.code === 'ArrowRight'\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpoint.position +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tisOpen={ isOpen }\n\t\t\t\t\t\t\t\t\tposition={ point.position }\n\t\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointColor(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolord(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor\n\t\t\t\t\t\t\t\t\t\t\t\t\t).toRgbString()\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{ ! disableRemove &&\n\t\t\t\t\t\t\t\t\t\tcontrolPoints.length > 2 && (\n\t\t\t\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-custom-gradient-picker__remove-control-point-wrapper\"\n\t\t\t\t\t\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tremoveControlPoint(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove Control Point'\n\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tleft: `${ point.position }%`,\n\t\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n\nfunction InsertPoint( {\n\tvalue: controlPoints,\n\tonChange,\n\tonOpenInserter,\n\tonCloseInserter,\n\tinsertPosition,\n\tdisableAlpha,\n\t__experimentalIsRenderedInSidebar,\n}: InsertPointProps ) {\n\tconst [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );\n\treturn (\n\t\t<GradientColorPickerDropdown\n\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\tclassName=\"components-custom-gradient-picker__inserter\"\n\t\t\tonClose={ () => {\n\t\t\t\tonCloseInserter();\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\tonCloseInserter();\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( false );\n\t\t\t\t\t\t\tonOpenInserter();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t} }\n\t\t\t\t\tclassName=\"components-custom-gradient-picker__insert-point-dropdown\"\n\t\t\t\t\ticon={ plus }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\tif ( ! alreadyInsertedPoint ) {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\taddControlPoint(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( true );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tupdateControlPointColorByPosition(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\tstyle={\n\t\t\t\tinsertPosition !== null\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tleft: `${ insertPosition }%`,\n\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t);\n}\nControlPoints.InsertPoint = InsertPoint;\n\nexport default ControlPoints;\n"],"mappings":"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"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_colord","_compose","_element","_i18n","_icons","_button","_hStack","_colorPicker","_visuallyHidden","_colorPalette","_utils","_constants","ControlPointButton","isOpen","position","color","additionalProps","instanceId","useInstanceId","descriptionId","_react","createElement","Fragment","default","sprintf","__","className","classnames","VisuallyHidden","id","GradientColorPickerDropdown","isRenderedInSidebar","props","popoverProps","useMemo","placement","offset","mergedClassName","CustomColorPickerDropdown","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","__experimentalIsRenderedInSidebar","controlPointMoveState","useRef","onMouseMove","event","current","undefined","relativePosition","getHorizontalRelativeGradientPosition","clientX","initialPosition","index","significantMoveHappened","Math","abs","MINIMUM_SIGNIFICANT_MOVE","updateControlPointPosition","cleanEventListeners","window","removeEventListener","listenersActivated","cleanEventListenersRef","useEffect","map","point","key","onClose","renderToggle","onToggle","onClick","onMouseDown","addEventListener","onKeyDown","code","stopPropagation","clampPercent","KEYBOARD_CONTROL_POINT_VARIATION","renderContent","ColorPicker","enableAlpha","updateControlPointColor","colord","toRgbString","length","HStack","alignment","removeControlPoint","variant","style","left","transform","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","useState","icon","plus","addControlPoint","updateControlPointColorByPosition","_default","exports"],"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/control-points.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { HStack } from '../../h-stack';\nimport { ColorPicker } from '../../color-picker';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { CustomColorPickerDropdown } from '../../color-palette';\n\nimport {\n\taddControlPoint,\n\tclampPercent,\n\tremoveControlPoint,\n\tupdateControlPointColor,\n\tupdateControlPointColorByPosition,\n\tupdateControlPointPosition,\n\tgetHorizontalRelativeGradientPosition,\n} from './utils';\nimport {\n\tMINIMUM_SIGNIFICANT_MOVE,\n\tKEYBOARD_CONTROL_POINT_VARIATION,\n} from './constants';\nimport type { WordPressComponentProps } from '../../context';\nimport type {\n\tControlPointButtonProps,\n\tControlPointMoveState,\n\tControlPointsProps,\n\tInsertPointProps,\n} from '../types';\nimport type { CustomColorPickerDropdownProps } from '../../color-palette/types';\n\nfunction ControlPointButton( {\n\tisOpen,\n\tposition,\n\tcolor,\n\t...additionalProps\n}: WordPressComponentProps< ControlPointButtonProps, 'button', true > ) {\n\tconst instanceId = useInstanceId( ControlPointButton );\n\tconst descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t// translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Gradient control point at position %1$s%% with color code %2$s.'\n\t\t\t\t\t),\n\t\t\t\t\tposition,\n\t\t\t\t\tcolor\n\t\t\t\t) }\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'components-custom-gradient-picker__control-point-button',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isOpen,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t{ __(\n\t\t\t\t\t'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'\n\t\t\t\t) }\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n\nfunction GradientColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tclassName,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\t// Open the popover below the gradient control/insertion point\n\tconst popoverProps = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tplacement: 'bottom',\n\t\t\t\toffset: 8,\n\t\t\t} ) as const,\n\t\t[]\n\t);\n\n\tconst mergedClassName = classnames(\n\t\t'components-custom-gradient-picker__control-point-dropdown',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<CustomColorPickerDropdown\n\t\t\tisRenderedInSidebar={ isRenderedInSidebar }\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tclassName={ mergedClassName }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ControlPoints( {\n\tdisableRemove,\n\tdisableAlpha,\n\tgradientPickerDomRef,\n\tignoreMarkerPosition,\n\tvalue: controlPoints,\n\tonChange,\n\tonStartControlPointChange,\n\tonStopControlPointChange,\n\t__experimentalIsRenderedInSidebar,\n}: ControlPointsProps ) {\n\tconst controlPointMoveState = useRef< ControlPointMoveState >();\n\n\tconst onMouseMove = ( event: MouseEvent ) => {\n\t\tif (\n\t\t\tcontrolPointMoveState.current === undefined ||\n\t\t\tgradientPickerDomRef.current === null\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst relativePosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current\n\t\t);\n\n\t\tconst { initialPosition, index, significantMoveHappened } =\n\t\t\tcontrolPointMoveState.current;\n\n\t\tif (\n\t\t\t! significantMoveHappened &&\n\t\t\tMath.abs( initialPosition - relativePosition ) >=\n\t\t\t\tMINIMUM_SIGNIFICANT_MOVE\n\t\t) {\n\t\t\tcontrolPointMoveState.current.significantMoveHappened = true;\n\t\t}\n\n\t\tonChange(\n\t\t\tupdateControlPointPosition( controlPoints, index, relativePosition )\n\t\t);\n\t};\n\n\tconst cleanEventListeners = () => {\n\t\tif (\n\t\t\twindow &&\n\t\t\twindow.removeEventListener &&\n\t\t\tcontrolPointMoveState.current &&\n\t\t\tcontrolPointMoveState.current.listenersActivated\n\t\t) {\n\t\t\twindow.removeEventListener( 'mousemove', onMouseMove );\n\t\t\twindow.removeEventListener( 'mouseup', cleanEventListeners );\n\t\t\tonStopControlPointChange();\n\t\t\tcontrolPointMoveState.current.listenersActivated = false;\n\t\t}\n\t};\n\n\t// Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`\n\t// This memoization would prevent the event listeners from being properly cleaned.\n\t// Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.\n\tconst cleanEventListenersRef = useRef< () => void >();\n\tcleanEventListenersRef.current = cleanEventListeners;\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanEventListenersRef.current?.();\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t{ controlPoints.map( ( point, index ) => {\n\t\t\t\tconst initialPosition = point?.position;\n\t\t\t\treturn (\n\t\t\t\t\tignoreMarkerPosition !== initialPosition && (\n\t\t\t\t\t\t<GradientColorPickerDropdown\n\t\t\t\t\t\t\tisRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tonClose={ onStopControlPointChange }\n\t\t\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t\t\t<ControlPointButton\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current &&\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current\n\t\t\t\t\t\t\t\t\t\t\t\t.significantMoveHappened\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\t\t\tonStopControlPointChange();\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonMouseDown={ () => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\twindow &&\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current = {\n\t\t\t\t\t\t\t\t\t\t\t\tinitialPosition,\n\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\tsignificantMoveHappened: false,\n\t\t\t\t\t\t\t\t\t\t\t\tlistenersActivated: true,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t\t\t'mousemove',\n\t\t\t\t\t\t\t\t\t\t\t\tonMouseMove\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t\t\t'mouseup',\n\t\t\t\t\t\t\t\t\t\t\t\tcleanEventListeners\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpoint.position -\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\t\tevent.code === 'ArrowRight'\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpoint.position +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tisOpen={ isOpen }\n\t\t\t\t\t\t\t\t\tposition={ point.position }\n\t\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointColor(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolord(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor\n\t\t\t\t\t\t\t\t\t\t\t\t\t).toRgbString()\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{ ! disableRemove &&\n\t\t\t\t\t\t\t\t\t\tcontrolPoints.length > 2 && (\n\t\t\t\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-custom-gradient-picker__remove-control-point-wrapper\"\n\t\t\t\t\t\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tremoveControlPoint(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove Control Point'\n\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tleft: `${ point.position }%`,\n\t\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n\nfunction InsertPoint( {\n\tvalue: controlPoints,\n\tonChange,\n\tonOpenInserter,\n\tonCloseInserter,\n\tinsertPosition,\n\tdisableAlpha,\n\t__experimentalIsRenderedInSidebar,\n}: InsertPointProps ) {\n\tconst [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );\n\treturn (\n\t\t<GradientColorPickerDropdown\n\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\tclassName=\"components-custom-gradient-picker__inserter\"\n\t\t\tonClose={ () => {\n\t\t\t\tonCloseInserter();\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\tonCloseInserter();\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( false );\n\t\t\t\t\t\t\tonOpenInserter();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t} }\n\t\t\t\t\tclassName=\"components-custom-gradient-picker__insert-point-dropdown\"\n\t\t\t\t\ticon={ plus }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\tif ( ! alreadyInsertedPoint ) {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\taddControlPoint(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( true );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tupdateControlPointColorByPosition(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\tstyle={\n\t\t\t\tinsertPosition !== null\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tleft: `${ insertPosition }%`,\n\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t);\n}\nControlPoints.InsertPoint = InsertPoint;\n\nexport default ControlPoints;\n"],"mappings":"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"}

package/build/custom-gradient-picker/gradient-bar/index.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = CustomGradientBar;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _element = require("@wordpress/element");
 var _controlPoints = _interopRequireDefault(require("./control-points"));
 var _utils = require("./utils");
 var _constants = require("./constants");
@@ -116,23 +117,23 @@ function CustomGradientBar({
   };
   const isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';
   const isInsertingControlPoint = gradientBarState.id === 'INSERTING_CONTROL_POINT';
-  return (0, _element.createElement)("div", {
+  return (0, _react.createElement)("div", {
     className: (0, _classnames.default)('components-custom-gradient-picker__gradient-bar', {
       'has-gradient': hasGradient
     }),
     onMouseEnter: onMouseEnterAndMove,
     onMouseMove: onMouseEnterAndMove,
     onMouseLeave: onMouseLeave
-  }, (0, _element.createElement)("div", {
+  }, (0, _react.createElement)("div", {
     className: "components-custom-gradient-picker__gradient-bar-background",
     style: {
       background,
       opacity: hasGradient ? 1 : 0.4
     }
-  }), (0, _element.createElement)("div", {
+  }), (0, _react.createElement)("div", {
     ref: gradientMarkersContainerDomRef,
     className: "components-custom-gradient-picker__markers-container"
-  }, !disableInserter && (isMovingInserter || isInsertingControlPoint) && (0, _element.createElement)(_controlPoints.default.InsertPoint, {
+  }, !disableInserter && (isMovingInserter || isInsertingControlPoint) && (0, _react.createElement)(_controlPoints.default.InsertPoint, {
     __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
     disableAlpha: disableAlpha,
     insertPosition: gradientBarState.insertPosition,
@@ -148,7 +149,7 @@ function CustomGradientBar({
         type: 'CLOSE_INSERTER'
       });
     }
-  }), (0, _element.createElement)(_controlPoints.default, {
+  }), (0, _react.createElement)(_controlPoints.default, {
     __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
     disableAlpha: disableAlpha,
     disableRemove: disableInserter,

package/build/custom-gradient-picker/gradient-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_classnames","_interopRequireDefault","_controlPoints","_utils","_constants","customGradientBarReducer","state","action","type","id","insertPosition","customGradientBarReducerInitialState","CustomGradientBar","background","hasGradient","value","controlPoints","onChange","disableInserter","disableAlpha","__experimentalIsRenderedInSidebar","gradientMarkersContainerDomRef","useRef","gradientBarState","gradientBarStateDispatch","useReducer","onMouseEnterAndMove","event","current","getHorizontalRelativeGradientPosition","clientX","some","position","Math","abs","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","onMouseLeave","isMovingInserter","isInsertingControlPoint","createElement","className","classnames","onMouseEnter","onMouseMove","style","opacity","ref","default","InsertPoint","onOpenInserter","onCloseInserter","disableRemove","gradientPickerDomRef","ignoreMarkerPosition","undefined","onStartControlPointChange","onStopControlPointChange"],"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useReducer } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ControlPoints from './control-points';\nimport { getHorizontalRelativeGradientPosition } from './utils';\nimport { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';\nimport type {\n\tCustomGradientBarProps,\n\tCustomGradientBarReducerState,\n\tCustomGradientBarReducerAction,\n\tCustomGradientBarIdleState,\n} from '../types';\nimport type { MouseEventHandler } from 'react';\n\nconst customGradientBarReducer = (\n\tstate: CustomGradientBarReducerState,\n\taction: CustomGradientBarReducerAction\n): CustomGradientBarReducerState => {\n\tswitch ( action.type ) {\n\t\tcase 'MOVE_INSERTER':\n\t\t\tif ( state.id === 'IDLE' || state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'MOVING_INSERTER',\n\t\t\t\t\tinsertPosition: action.insertPosition,\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'STOP_INSERTER_MOVE':\n\t\t\tif ( state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'OPEN_INSERTER':\n\t\t\tif ( state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'INSERTING_CONTROL_POINT',\n\t\t\t\t\tinsertPosition: state.insertPosition,\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'CLOSE_INSERTER':\n\t\t\tif ( state.id === 'INSERTING_CONTROL_POINT' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'START_CONTROL_CHANGE':\n\t\t\tif ( state.id === 'IDLE' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'MOVING_CONTROL_POINT',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'STOP_CONTROL_CHANGE':\n\t\t\tif ( state.id === 'MOVING_CONTROL_POINT' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t}\n\treturn state;\n};\nconst customGradientBarReducerInitialState: CustomGradientBarIdleState = {\n\tid: 'IDLE',\n};\n\nexport default function CustomGradientBar( {\n\tbackground,\n\thasGradient,\n\tvalue: controlPoints,\n\tonChange,\n\tdisableInserter = false,\n\tdisableAlpha = false,\n\t__experimentalIsRenderedInSidebar = false,\n}: CustomGradientBarProps ) {\n\tconst gradientMarkersContainerDomRef = useRef< HTMLDivElement >( null );\n\n\tconst [ gradientBarState, gradientBarStateDispatch ] = useReducer(\n\t\tcustomGradientBarReducer,\n\t\tcustomGradientBarReducerInitialState\n\t);\n\tconst onMouseEnterAndMove: MouseEventHandler< HTMLDivElement > = (\n\t\tevent\n\t) => {\n\t\tif ( ! gradientMarkersContainerDomRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst insertPosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientMarkersContainerDomRef.current\n\t\t);\n\n\t\t// If the insert point is close to an existing control point don't show it.\n\t\tif (\n\t\t\tcontrolPoints.some( ( { position } ) => {\n\t\t\t\treturn (\n\t\t\t\t\tMath.abs( insertPosition - position ) <\n\t\t\t\t\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT\n\t\t\t\t);\n\t\t\t} )\n\t\t) {\n\t\t\tif ( gradientBarState.id === 'MOVING_INSERTER' ) {\n\t\t\t\tgradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tgradientBarStateDispatch( { type: 'MOVE_INSERTER', insertPosition } );\n\t};\n\n\tconst onMouseLeave = () => {\n\t\tgradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );\n\t};\n\n\tconst isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';\n\tconst isInsertingControlPoint =\n\t\tgradientBarState.id === 'INSERTING_CONTROL_POINT';\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-gradient-picker__gradient-bar',\n\t\t\t\t{ 'has-gradient': hasGradient }\n\t\t\t) }\n\t\t\tonMouseEnter={ onMouseEnterAndMove }\n\t\t\tonMouseMove={ onMouseEnterAndMove }\n\t\t\tonMouseLeave={ onMouseLeave }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"components-custom-gradient-picker__gradient-bar-background\"\n\t\t\t\tstyle={ {\n\t\t\t\t\tbackground,\n\t\t\t\t\topacity: hasGradient ? 1 : 0.4,\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tref={ gradientMarkersContainerDomRef }\n\t\t\t\tclassName=\"components-custom-gradient-picker__markers-container\"\n\t\t\t>\n\t\t\t\t{ ! disableInserter &&\n\t\t\t\t\t( isMovingInserter || isInsertingControlPoint ) && (\n\t\t\t\t\t\t<ControlPoints.InsertPoint\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\t\t\tinsertPosition={ gradientBarState.insertPosition }\n\t\t\t\t\t\t\tvalue={ controlPoints }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tonOpenInserter={ () => {\n\t\t\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\t\t\ttype: 'OPEN_INSERTER',\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonCloseInserter={ () => {\n\t\t\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\t\t\ttype: 'CLOSE_INSERTER',\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t<ControlPoints\n\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t}\n\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\tdisableRemove={ disableInserter }\n\t\t\t\t\tgradientPickerDomRef={ gradientMarkersContainerDomRef }\n\t\t\t\t\tignoreMarkerPosition={\n\t\t\t\t\t\tisInsertingControlPoint\n\t\t\t\t\t\t\t? gradientBarState.insertPosition\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tvalue={ controlPoints }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tonStartControlPointChange={ () => {\n\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\ttype: 'START_CONTROL_CHANGE',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tonStopControlPointChange={ () => {\n\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\ttype: 'STOP_CONTROL_CHANGE',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_element","_controlPoints","_utils","_constants","customGradientBarReducer","state","action","type","id","insertPosition","customGradientBarReducerInitialState","CustomGradientBar","background","hasGradient","value","controlPoints","onChange","disableInserter","disableAlpha","__experimentalIsRenderedInSidebar","gradientMarkersContainerDomRef","useRef","gradientBarState","gradientBarStateDispatch","useReducer","onMouseEnterAndMove","event","current","getHorizontalRelativeGradientPosition","clientX","some","position","Math","abs","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","onMouseLeave","isMovingInserter","isInsertingControlPoint","_react","createElement","className","classnames","onMouseEnter","onMouseMove","style","opacity","ref","default","InsertPoint","onOpenInserter","onCloseInserter","disableRemove","gradientPickerDomRef","ignoreMarkerPosition","undefined","onStartControlPointChange","onStopControlPointChange"],"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useReducer } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ControlPoints from './control-points';\nimport { getHorizontalRelativeGradientPosition } from './utils';\nimport { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';\nimport type {\n\tCustomGradientBarProps,\n\tCustomGradientBarReducerState,\n\tCustomGradientBarReducerAction,\n\tCustomGradientBarIdleState,\n} from '../types';\nimport type { MouseEventHandler } from 'react';\n\nconst customGradientBarReducer = (\n\tstate: CustomGradientBarReducerState,\n\taction: CustomGradientBarReducerAction\n): CustomGradientBarReducerState => {\n\tswitch ( action.type ) {\n\t\tcase 'MOVE_INSERTER':\n\t\t\tif ( state.id === 'IDLE' || state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'MOVING_INSERTER',\n\t\t\t\t\tinsertPosition: action.insertPosition,\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'STOP_INSERTER_MOVE':\n\t\t\tif ( state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'OPEN_INSERTER':\n\t\t\tif ( state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'INSERTING_CONTROL_POINT',\n\t\t\t\t\tinsertPosition: state.insertPosition,\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'CLOSE_INSERTER':\n\t\t\tif ( state.id === 'INSERTING_CONTROL_POINT' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'START_CONTROL_CHANGE':\n\t\t\tif ( state.id === 'IDLE' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'MOVING_CONTROL_POINT',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'STOP_CONTROL_CHANGE':\n\t\t\tif ( state.id === 'MOVING_CONTROL_POINT' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t}\n\treturn state;\n};\nconst customGradientBarReducerInitialState: CustomGradientBarIdleState = {\n\tid: 'IDLE',\n};\n\nexport default function CustomGradientBar( {\n\tbackground,\n\thasGradient,\n\tvalue: controlPoints,\n\tonChange,\n\tdisableInserter = false,\n\tdisableAlpha = false,\n\t__experimentalIsRenderedInSidebar = false,\n}: CustomGradientBarProps ) {\n\tconst gradientMarkersContainerDomRef = useRef< HTMLDivElement >( null );\n\n\tconst [ gradientBarState, gradientBarStateDispatch ] = useReducer(\n\t\tcustomGradientBarReducer,\n\t\tcustomGradientBarReducerInitialState\n\t);\n\tconst onMouseEnterAndMove: MouseEventHandler< HTMLDivElement > = (\n\t\tevent\n\t) => {\n\t\tif ( ! gradientMarkersContainerDomRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst insertPosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientMarkersContainerDomRef.current\n\t\t);\n\n\t\t// If the insert point is close to an existing control point don't show it.\n\t\tif (\n\t\t\tcontrolPoints.some( ( { position } ) => {\n\t\t\t\treturn (\n\t\t\t\t\tMath.abs( insertPosition - position ) <\n\t\t\t\t\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT\n\t\t\t\t);\n\t\t\t} )\n\t\t) {\n\t\t\tif ( gradientBarState.id === 'MOVING_INSERTER' ) {\n\t\t\t\tgradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tgradientBarStateDispatch( { type: 'MOVE_INSERTER', insertPosition } );\n\t};\n\n\tconst onMouseLeave = () => {\n\t\tgradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );\n\t};\n\n\tconst isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';\n\tconst isInsertingControlPoint =\n\t\tgradientBarState.id === 'INSERTING_CONTROL_POINT';\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-gradient-picker__gradient-bar',\n\t\t\t\t{ 'has-gradient': hasGradient }\n\t\t\t) }\n\t\t\tonMouseEnter={ onMouseEnterAndMove }\n\t\t\tonMouseMove={ onMouseEnterAndMove }\n\t\t\tonMouseLeave={ onMouseLeave }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"components-custom-gradient-picker__gradient-bar-background\"\n\t\t\t\tstyle={ {\n\t\t\t\t\tbackground,\n\t\t\t\t\topacity: hasGradient ? 1 : 0.4,\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tref={ gradientMarkersContainerDomRef }\n\t\t\t\tclassName=\"components-custom-gradient-picker__markers-container\"\n\t\t\t>\n\t\t\t\t{ ! disableInserter &&\n\t\t\t\t\t( isMovingInserter || isInsertingControlPoint ) && (\n\t\t\t\t\t\t<ControlPoints.InsertPoint\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\t\t\tinsertPosition={ gradientBarState.insertPosition }\n\t\t\t\t\t\t\tvalue={ controlPoints }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tonOpenInserter={ () => {\n\t\t\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\t\t\ttype: 'OPEN_INSERTER',\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonCloseInserter={ () => {\n\t\t\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\t\t\ttype: 'CLOSE_INSERTER',\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t<ControlPoints\n\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t}\n\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\tdisableRemove={ disableInserter }\n\t\t\t\t\tgradientPickerDomRef={ gradientMarkersContainerDomRef }\n\t\t\t\t\tignoreMarkerPosition={\n\t\t\t\t\t\tisInsertingControlPoint\n\t\t\t\t\t\t\t? gradientBarState.insertPosition\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tvalue={ controlPoints }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tonStartControlPointChange={ () => {\n\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\ttype: 'START_CONTROL_CHANGE',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tonStopControlPointChange={ () => {\n\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\ttype: 'STOP_CONTROL_CHANGE',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/build/custom-gradient-picker/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CustomGradientPicker = CustomGradientPicker;
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
 var _i18n = require("@wordpress/i18n");
@@ -47,7 +47,7 @@ const GradientAnglePicker = ({
       }
     }));
   };
-  return (0, _element.createElement)(_anglePickerControl.default, {
+  return (0, _react.createElement)(_anglePickerControl.default, {
     __nextHasNoMarginBottom: true,
     onChange: onAngleChange,
     value: hasGradient ? angle : ''
@@ -86,7 +86,7 @@ const GradientTypePicker = ({
       onSetRadialGradient();
     }
   };
-  return (0, _element.createElement)(_selectControl.default, {
+  return (0, _react.createElement)(_selectControl.default, {
     __nextHasNoMarginBottom: true,
     className: "components-custom-gradient-picker__type-picker",
     label: (0, _i18n.__)('Type'),
@@ -154,12 +154,12 @@ function CustomGradientPicker({
       hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version'
     });
   }
-  return (0, _element.createElement)(_vStack.VStack, {
+  return (0, _react.createElement)(_vStack.VStack, {
     spacing: 4,
     className: (0, _classnames.default)('components-custom-gradient-picker', {
       'is-next-has-no-margin': __nextHasNoMargin
     })
-  }, (0, _element.createElement)(_gradientBar.default, {
+  }, (0, _react.createElement)(_gradientBar.default, {
     __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
     background: background,
     hasGradient: hasGradient,
@@ -167,14 +167,14 @@ function CustomGradientPicker({
     onChange: newControlPoints => {
       onChange((0, _serializer.serializeGradient)((0, _utils.getGradientAstWithControlPoints)(gradientAST, newControlPoints)));
     }
-  }), (0, _element.createElement)(_flex.Flex, {
+  }), (0, _react.createElement)(_flex.Flex, {
     gap: 3,
     className: "components-custom-gradient-picker__ui-line"
-  }, (0, _element.createElement)(_customGradientPickerStyles.SelectWrapper, null, (0, _element.createElement)(GradientTypePicker, {
+  }, (0, _react.createElement)(_customGradientPickerStyles.SelectWrapper, null, (0, _react.createElement)(GradientTypePicker, {
     gradientAST: gradientAST,
     hasGradient: hasGradient,
     onChange: onChange
-  })), (0, _element.createElement)(_customGradientPickerStyles.AccessoryWrapper, null, gradientAST.type === 'linear-gradient' && (0, _element.createElement)(GradientAnglePicker, {
+  })), (0, _react.createElement)(_customGradientPickerStyles.AccessoryWrapper, null, gradientAST.type === 'linear-gradient' && (0, _react.createElement)(GradientAnglePicker, {
     gradientAST: gradientAST,
     hasGradient: hasGradient,
     onChange: onChange