npm - @wordpress/components - Versions diffs - 28.13.1-next.082ed6819.0 → 29.0.1-next.a9f418477.0 - Mend

@wordpress/components 28.13.1-next.082ed6819.0 → 29.0.1-next.a9f418477.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (586) hide show

package/build/context/context-connect.js CHANGED Viewed

@@ -1,4 +1,3 @@
-/* wp:polyfill */
 "use strict";
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_element","require","_warning","_interopRequireDefault","_constants","_getStyledClassNameFromKey","contextConnect","Component","namespace","_contextConnect","forwardsRef","contextConnectWithoutRef","options","WrappedComponent","forwardRef","globalThis","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 ) {\n\t\treturn [];\n\t}\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 ) {\n\t\treturn false;\n\t}\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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","ignoreList":[]}
1	+ {"version":3,"names":["_element","require","_warning","_interopRequireDefault","_constants","_getStyledClassNameFromKey","contextConnect","Component","namespace","_contextConnect","forwardsRef","contextConnectWithoutRef","options","WrappedComponent","forwardRef","globalThis","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 ) {\n\t\treturn [];\n\t}\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 ) {\n\t\treturn false;\n\t}\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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","ignoreList":[]}

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

@@ -48,6 +48,7 @@ function ControlPointButton({
       "aria-describedby": descriptionId,
       "aria-haspopup": "true",
       "aria-expanded": isOpen,
+      __next40pxDefaultSize: true,
       className: (0, _clsx.default)('components-custom-gradient-picker__control-point-button', {
         'is-active': isOpen
       }),
@@ -228,6 +229,7 @@ function InsertPoint({
       isOpen,
       onToggle
     }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+      __next40pxDefaultSize: true,
       "aria-expanded": isOpen,
       "aria-haspopup": "true",
       onClick: () => {

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_clsx","_interopRequireDefault","require","_colord","_compose","_element","_i18n","_icons","_button","_hStack","_colorPicker","_visuallyHidden","_colorPalette","_utils","_constants","_dropdownContentWrapper","_jsxRuntime","ControlPointButton","isOpen","position","color","additionalProps","instanceId","useInstanceId","descriptionId","jsxs","Fragment","children","jsx","default","sprintf","__","className","clsx","VisuallyHidden","id","GradientColorPickerDropdown","isRenderedInSidebar","props","popoverProps","useMemo","placement","offset","resize","mergedClassName","CustomColorPickerDropdown","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","__experimentalIsRenderedInSidebar","controlPointMoveStateRef","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","onClose","renderToggle","onToggle","onClick","onMouseDown","addEventListener","onKeyDown","code","stopPropagation","clampPercent","KEYBOARD_CONTROL_POINT_VARIATION","renderContent","paddingSize","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 clsx from 'clsx';\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';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\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: gradient position e.g: 70. 2: 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={ clsx(\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\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t\t// popover edge.\n\t\t\t\tresize: false,\n\t\t\t} ) as const,\n\t\t[]\n\t);\n\n\tconst mergedClassName = clsx(\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 controlPointMoveStateRef = useRef< ControlPointMoveState >();\n\n\tconst onMouseMove = ( event: MouseEvent ) => {\n\t\tif (\n\t\t\tcontrolPointMoveStateRef.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\tcontrolPointMoveStateRef.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\tcontrolPointMoveStateRef.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\tcontrolPointMoveStateRef.current &&\n\t\t\tcontrolPointMoveStateRef.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\tcontrolPointMoveStateRef.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\tcontrolPointMoveStateRef.current &&\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveStateRef.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\tcontrolPointMoveStateRef.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<DropdownContentWrapper paddingSize=\"none\">\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</DropdownContentWrapper>\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<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\tif ( ! alreadyInsertedPoint ) {\n\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\taddControlPoint(\n\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\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\tsetAlreadyInsertedPoint( true );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\tupdateControlPointColorByPosition(\n\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\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} }\n\t\t\t\t\t/>\n\t\t\t\t</DropdownContentWrapper>\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":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AAKA,IAAAM,OAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,OAAA,GAAAP,OAAA;AACA,IAAAQ,YAAA,GAAAR,OAAA;AACA,IAAAS,eAAA,GAAAT,OAAA;AACA,IAAAU,aAAA,GAAAV,OAAA;AAEA,IAAAW,MAAA,GAAAX,OAAA;AASA,IAAAY,UAAA,GAAAZ,OAAA;AAYA,IAAAa,uBAAA,GAAAd,sBAAA,CAAAC,OAAA;AAA6E,IAAAc,WAAA,GAAAd,OAAA;AA5C7E;AACA;AACA;;AAIA;AACA;AACA;;AAMA;AACA;AACA;;AA8BA,SAASe,kBAAkBA,CAAE;EAC5BC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACL,GAAGC;AACgE,CAAC,EAAG;EACvE,MAAMC,UAAU,GAAG,IAAAC,sBAAa,EAAEN,kBAAmB,CAAC;EACtD,MAAMO,aAAa,GAAG,uEAAwEF,UAAU,EAAG;EAC3G,oBACC,IAAAN,WAAA,CAAAS,IAAA,EAAAT,WAAA,CAAAU,QAAA;IAAAC,QAAA,gBACC,IAAAX,WAAA,CAAAY,GAAA,EAACpB,OAAA,CAAAqB,OAAM;MACN,cAAa,IAAAC,aAAO;MACnB;MACA,IAAAC,QAAE,EACD,iEACD,CAAC,EACDZ,QAAQ,EACRC,KACD,CAAG;MACH,oBAAmBI,aAAe;MAClC,iBAAc,MAAM;MACpB,iBAAgBN,MAAQ;MACxBc,SAAS,EAAG,IAAAC,aAAI,EACf,yDAAyD,EACzD;QACC,WAAW,EAAEf;MACd,CACD,CAAG;MAAA,GACEG;IAAe,CACpB,CAAC,eACF,IAAAL,WAAA,CAAAY,GAAA,EAACjB,eAAA,CAAAuB,cAAc;MAACC,EAAE,EAAGX,aAAe;MAAAG,QAAA,EACjC,IAAAI,QAAE,EACH,sKACD;IAAC,CACc,CAAC;EAAA,CAChB,CAAC;AAEL;AAEA,SAASK,2BAA2BA,CAAE;EACrCC,mBAAmB;EACnBL,SAAS;EACT,GAAGM;AAC4B,CAAC,EAAG;EACnC;EACA,MAAMC,YAAY,GAAG,IAAAC,gBAAO,EAC3B,OACG;IACDC,SAAS,EAAE,QAAQ;IACnBC,MAAM,EAAE,CAAC;IACT;IACA;IACA;IACAC,MAAM,EAAE;EACT,CAAC,CAAW,EACb,EACD,CAAC;EAED,MAAMC,eAAe,GAAG,IAAAX,aAAI,EAC3B,2DAA2D,EAC3DD,SACD,CAAC;EAED,oBACC,IAAAhB,WAAA,CAAAY,GAAA,EAAChB,aAAA,CAAAiC,yBAAyB;IACzBR,mBAAmB,EAAGA,mBAAqB;IAC3CE,YAAY,EAAGA,YAAc;IAC7BP,SAAS,EAAGY,eAAiB;IAAA,GACxBN;EAAK,CACV,CAAC;AAEJ;AAEA,SAASQ,aAAaA,CAAE;EACvBC,aAAa;EACbC,YAAY;EACZC,oBAAoB;EACpBC,oBAAoB;EACpBC,KAAK,EAAEC,aAAa;EACpBC,QAAQ;EACRC,yBAAyB;EACzBC,wBAAwB;EACxBC;AACmB,CAAC,EAAG;EACvB,MAAMC,wBAAwB,GAAG,IAAAC,eAAM,EAA0B,CAAC;EAElE,MAAMC,WAAW,GAAKC,KAAiB,IAAM;IAC5C,IACCH,wBAAwB,CAACI,OAAO,KAAKC,SAAS,IAC9Cb,oBAAoB,CAACY,OAAO,KAAK,IAAI,EACpC;MACD;IACD;IAEA,MAAME,gBAAgB,GAAG,IAAAC,4CAAqC,EAC7DJ,KAAK,CAACK,OAAO,EACbhB,oBAAoB,CAACY,OACtB,CAAC;IAED,MAAM;MAAEK,eAAe;MAAEC,KAAK;MAAEC;IAAwB,CAAC,GACxDX,wBAAwB,CAACI,OAAO;IAEjC,IACC,CAAEO,uBAAuB,IACzBC,IAAI,CAACC,GAAG,CAAEJ,eAAe,GAAGH,gBAAiB,CAAC,IAC7CQ,mCAAwB,EACxB;MACDd,wBAAwB,CAACI,OAAO,CAACO,uBAAuB,GAAG,IAAI;IAChE;IAEAf,QAAQ,CACP,IAAAmB,iCAA0B,EAAEpB,aAAa,EAAEe,KAAK,EAAEJ,gBAAiB,CACpE,CAAC;EACF,CAAC;EAED,MAAMU,mBAAmB,GAAGA,CAAA,KAAM;IACjC,IACCC,MAAM,IACNA,MAAM,CAACC,mBAAmB,IAC1BlB,wBAAwB,CAACI,OAAO,IAChCJ,wBAAwB,CAACI,OAAO,CAACe,kBAAkB,EAClD;MACDF,MAAM,CAACC,mBAAmB,CAAE,WAAW,EAAEhB,WAAY,CAAC;MACtDe,MAAM,CAACC,mBAAmB,CAAE,SAAS,EAAEF,mBAAoB,CAAC;MAC5DlB,wBAAwB,CAAC,CAAC;MAC1BE,wBAAwB,CAACI,OAAO,CAACe,kBAAkB,GAAG,KAAK;IAC5D;EACD,CAAC;;EAED;EACA;EACA;EACA,MAAMC,sBAAsB,GAAG,IAAAnB,eAAM,EAAe,CAAC;EACrDmB,sBAAsB,CAAChB,OAAO,GAAGY,mBAAmB;EAEpD,IAAAK,kBAAS,EAAE,MAAM;IAChB,OAAO,MAAM;MACZD,sBAAsB,CAAChB,OAAO,GAAG,CAAC;IACnC,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,oBACC,IAAA7C,WAAA,CAAAY,GAAA,EAAAZ,WAAA,CAAAU,QAAA;IAAAC,QAAA,EACGyB,aAAa,CAAC2B,GAAG,CAAE,CAAEC,KAAK,EAAEb,KAAK,KAAM;MACxC,MAAMD,eAAe,GAAGc,KAAK,EAAE7D,QAAQ;MACvC,OACC+B,oBAAoB,KAAKgB,eAAe,iBACvC,IAAAlD,WAAA,CAAAY,GAAA,EAACQ,2BAA2B;QAC3BC,mBAAmB,EAClBmB,iCACA;QAEDyB,OAAO,EAAG1B,wBAA0B;QACpC2B,YAAY,EAAGA,CAAE;UAAEhE,MAAM;UAAEiE;QAAS,CAAC,kBACpC,IAAAnE,WAAA,CAAAY,GAAA,EAACX,kBAAkB;UAElBmE,OAAO,EAAGA,CAAA,KAAM;YACf,IACC3B,wBAAwB,CAACI,OAAO,IAChCJ,wBAAwB,CAACI,OAAO,CAC9BO,uBAAuB,EACxB;cACD;YACD;YACA,IAAKlD,MAAM,EAAG;cACbqC,wBAAwB,CAAC,CAAC;YAC3B,CAAC,MAAM;cACND,yBAAyB,CAAC,CAAC;YAC5B;YACA6B,QAAQ,CAAC,CAAC;UACX,CAAG;UACHE,WAAW,EAAGA,CAAA,KAAM;YACnB,IACCX,MAAM,IACNA,MAAM,CAACY,gBAAgB,EACtB;cACD7B,wBAAwB,CAACI,OAAO,GAAG;gBAClCK,eAAe;gBACfC,KAAK;gBACLC,uBAAuB,EAAE,KAAK;gBAC9BQ,kBAAkB,EAAE;cACrB,CAAC;cACDtB,yBAAyB,CAAC,CAAC;cAC3BoB,MAAM,CAACY,gBAAgB,CACtB,WAAW,EACX3B,WACD,CAAC;cACDe,MAAM,CAACY,gBAAgB,CACtB,SAAS,EACTb,mBACD,CAAC;YACF;UACD,CAAG;UACHc,SAAS,EAAK3B,KAAK,IAAM;YACxB,IAAKA,KAAK,CAAC4B,IAAI,KAAK,WAAW,EAAG;cACjC;cACA;cACA5B,KAAK,CAAC6B,eAAe,CAAC,CAAC;cACvBpC,QAAQ,CACP,IAAAmB,iCAA0B,EACzBpB,aAAa,EACbe,KAAK,EACL,IAAAuB,mBAAY,EACXV,KAAK,CAAC7D,QAAQ,GACbwE,2CACF,CACD,CACD,CAAC;YACF,CAAC,MAAM,IACN/B,KAAK,CAAC4B,IAAI,KAAK,YAAY,EAC1B;cACD;cACA;cACA5B,KAAK,CAAC6B,eAAe,CAAC,CAAC;cACvBpC,QAAQ,CACP,IAAAmB,iCAA0B,EACzBpB,aAAa,EACbe,KAAK,EACL,IAAAuB,mBAAY,EACXV,KAAK,CAAC7D,QAAQ,GACbwE,2CACF,CACD,CACD,CAAC;YACF;UACD,CAAG;UACHzE,MAAM,EAAGA,MAAQ;UACjBC,QAAQ,EAAG6D,KAAK,CAAC7D,QAAU;UAC3BC,KAAK,EAAG4D,KAAK,CAAC5D;QAAO,GAzEf+C,KA0EN,CACC;QACHyB,aAAa,EAAGA,CAAE;UAAEX;QAAQ,CAAC,kBAC5B,IAAAjE,WAAA,CAAAS,IAAA,EAACV,uBAAA,CAAAc,OAAsB;UAACgE,WAAW,EAAC,MAAM;UAAAlE,QAAA,gBACzC,IAAAX,WAAA,CAAAY,GAAA,EAAClB,YAAA,CAAAoF,WAAW;YACXC,WAAW,EAAG,CAAE/C,YAAc;YAC9B5B,KAAK,EAAG4D,KAAK,CAAC5D,KAAO;YACrBiC,QAAQ,EAAKjC,KAAK,IAAM;cACvBiC,QAAQ,CACP,IAAA2C,8BAAuB,EACtB5C,aAAa,EACbe,KAAK,EACL,IAAA8B,cAAM,EACL7E,KACD,CAAC,CAAC8E,WAAW,CAAC,CACf,CACD,CAAC;YACF;UAAG,CACH,CAAC,EACA,CAAEnD,aAAa,IAChBK,aAAa,CAAC+C,MAAM,GAAG,CAAC,iBACvB,IAAAnF,WAAA,CAAAY,GAAA,EAACnB,OAAA,CAAA2F,MAAM;YACNpE,SAAS,EAAC,iEAAiE;YAC3EqE,SAAS,EAAC,QAAQ;YAAA1E,QAAA,eAElB,IAAAX,WAAA,CAAAY,GAAA,EAACpB,OAAA,CAAAqB,OAAM;cACNuD,OAAO,EAAGA,CAAA,KAAM;gBACf/B,QAAQ,CACP,IAAAiD,yBAAkB,EACjBlD,aAAa,EACbe,KACD,CACD,CAAC;gBACDc,OAAO,CAAC,CAAC;cACV,CAAG;cACHsB,OAAO,EAAC,MAAM;cAAA5E,QAAA,EAEZ,IAAAI,QAAE,EACH,sBACD;YAAC,CACM;UAAC,CACF,CACR;QAAA,CACqB,CACtB;QACHyE,KAAK,EAAG;UACPC,IAAI,EAAE,GAAIzB,KAAK,CAAC7D,QAAQ,GAAI;UAC5BuF,SAAS,EAAE;QACZ;MAAG,GA9HGvC,KA+HN,CACD;IAEH,CAAE;EAAC,CACF,CAAC;AAEL;AAEA,SAASwC,WAAWA,CAAE;EACrBxD,KAAK,EAAEC,aAAa;EACpBC,QAAQ;EACRuD,cAAc;EACdC,eAAe;EACfC,cAAc;EACd9D,YAAY;EACZQ;AACiB,CAAC,EAAG;EACrB,MAAM,CAAEuD,oBAAoB,EAAEC,uBAAuB,CAAE,GAAG,IAAAC,iBAAQ,EAAE,KAAM,CAAC;EAC3E,oBACC,IAAAjG,WAAA,CAAAY,GAAA,EAACQ,2BAA2B;IAC3BC,mBAAmB,EAAGmB,iCAAmC;IACzDxB,SAAS,EAAC,6CAA6C;IACvDiD,OAAO,EAAGA,CAAA,KAAM;MACf4B,eAAe,CAAC,CAAC;IAClB,CAAG;IACH3B,YAAY,EAAGA,CAAE;MAAEhE,MAAM;MAAEiE;IAAS,CAAC,kBACpC,IAAAnE,WAAA,CAAAY,GAAA,EAACpB,OAAA,CAAAqB,OAAM;MACN,iBAAgBX,MAAQ;MACxB,iBAAc,MAAM;MACpBkE,OAAO,EAAGA,CAAA,KAAM;QACf,IAAKlE,MAAM,EAAG;UACb2F,eAAe,CAAC,CAAC;QAClB,CAAC,MAAM;UACNG,uBAAuB,CAAE,KAAM,CAAC;UAChCJ,cAAc,CAAC,CAAC;QACjB;QACAzB,QAAQ,CAAC,CAAC;MACX,CAAG;MACHnD,SAAS,EAAC,0DAA0D;MACpEkF,IAAI,EAAGC;IAAM,CACb,CACC;IACHvB,aAAa,EAAGA,CAAA,kBACf,IAAA5E,WAAA,CAAAY,GAAA,EAACb,uBAAA,CAAAc,OAAsB;MAACgE,WAAW,EAAC,MAAM;MAAAlE,QAAA,eACzC,IAAAX,WAAA,CAAAY,GAAA,EAAClB,YAAA,CAAAoF,WAAW;QACXC,WAAW,EAAG,CAAE/C,YAAc;QAC9BK,QAAQ,EAAKjC,KAAK,IAAM;UACvB,IAAK,CAAE2F,oBAAoB,EAAG;YAC7B1D,QAAQ,CACP,IAAA+D,sBAAe,EACdhE,aAAa,EACb0D,cAAc,EACd,IAAAb,cAAM,EAAE7E,KAAM,CAAC,CAAC8E,WAAW,CAAC,CAC7B,CACD,CAAC;YACDc,uBAAuB,CAAE,IAAK,CAAC;UAChC,CAAC,MAAM;YACN3D,QAAQ,CACP,IAAAgE,wCAAiC,EAChCjE,aAAa,EACb0D,cAAc,EACd,IAAAb,cAAM,EAAE7E,KAAM,CAAC,CAAC8E,WAAW,CAAC,CAC7B,CACD,CAAC;UACF;QACD;MAAG,CACH;IAAC,CACqB,CACtB;IACHM,KAAK,EACJM,cAAc,KAAK,IAAI,GACpB;MACAL,IAAI,EAAE,GAAIK,cAAc,GAAI;MAC5BJ,SAAS,EAAE;IACX,CAAC,GACD5C;EACH,CACD,CAAC;AAEJ;AACAhB,aAAa,CAAC6D,WAAW,GAAGA,WAAW;AAAC,IAAAW,QAAA,GAAAC,OAAA,CAAA1F,OAAA,GAEzBiB,aAAa","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_colord","_compose","_element","_i18n","_icons","_button","_hStack","_colorPicker","_visuallyHidden","_colorPalette","_utils","_constants","_dropdownContentWrapper","_jsxRuntime","ControlPointButton","isOpen","position","color","additionalProps","instanceId","useInstanceId","descriptionId","jsxs","Fragment","children","jsx","default","sprintf","__","__next40pxDefaultSize","className","clsx","VisuallyHidden","id","GradientColorPickerDropdown","isRenderedInSidebar","props","popoverProps","useMemo","placement","offset","resize","mergedClassName","CustomColorPickerDropdown","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","__experimentalIsRenderedInSidebar","controlPointMoveStateRef","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","onClose","renderToggle","onToggle","onClick","onMouseDown","addEventListener","onKeyDown","code","stopPropagation","clampPercent","KEYBOARD_CONTROL_POINT_VARIATION","renderContent","paddingSize","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 clsx from 'clsx';\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';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\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: gradient position e.g: 70. 2: 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\t__next40pxDefaultSize\n\t\t\t\tclassName={ clsx(\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\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t\t// popover edge.\n\t\t\t\tresize: false,\n\t\t\t} ) as const,\n\t\t[]\n\t);\n\n\tconst mergedClassName = clsx(\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 controlPointMoveStateRef = useRef< ControlPointMoveState >();\n\n\tconst onMouseMove = ( event: MouseEvent ) => {\n\t\tif (\n\t\t\tcontrolPointMoveStateRef.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\tcontrolPointMoveStateRef.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\tcontrolPointMoveStateRef.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\tcontrolPointMoveStateRef.current &&\n\t\t\tcontrolPointMoveStateRef.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\tcontrolPointMoveStateRef.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\tcontrolPointMoveStateRef.current &&\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveStateRef.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\tcontrolPointMoveStateRef.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<DropdownContentWrapper paddingSize=\"none\">\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</DropdownContentWrapper>\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\t__next40pxDefaultSize\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<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\tif ( ! alreadyInsertedPoint ) {\n\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\taddControlPoint(\n\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\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\tsetAlreadyInsertedPoint( true );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\tupdateControlPointColorByPosition(\n\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\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} }\n\t\t\t\t\t/>\n\t\t\t\t</DropdownContentWrapper>\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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","ignoreList":[]}

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

@@ -119,6 +119,7 @@ const GradientTypePicker = ({
 function CustomGradientPicker({
   value,
   onChange,
+  enableAlpha = true,
   __experimentalIsRenderedInSidebar = false
 }) {
   const {
@@ -147,6 +148,7 @@ function CustomGradientPicker({
     className: "components-custom-gradient-picker",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_gradientBar.default, {
       __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+      disableAlpha: !enableAlpha,
       background: background,
       hasGradient: hasGradient,
       value: controlPoints,

package/build/custom-gradient-picker/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_i18n","require","_anglePickerControl","_interopRequireDefault","_gradientBar","_flex","_selectControl","_vStack","_utils","_serializer","_constants","_customGradientPickerStyles","_jsxRuntime","GradientAnglePicker","gradientAST","hasGradient","onChange","_gradientAST$orientat","angle","orientation","value","DEFAULT_LINEAR_GRADIENT_ANGLE","onAngleChange","newAngle","serializeGradient","type","jsx","default","GradientTypePicker","onSetLinearGradient","undefined","HORIZONTAL_GRADIENT_ORIENTATION","onSetRadialGradient","restGradientAST","handleOnChange","next","__nextHasNoMarginBottom","className","label","__","labelPosition","options","GRADIENT_OPTIONS","size","CustomGradientPicker","__experimentalIsRenderedInSidebar","getGradientAstWithDefault","background","getLinearGradientRepresentation","controlPoints","colorStops","map","colorStop","color","getStopCssColor","position","parseInt","length","jsxs","VStack","spacing","children","newControlPoints","getGradientAstWithControlPoints","Flex","gap","SelectWrapper","AccessoryWrapper","_default","exports"],"sources":["@wordpress/components/src/custom-gradient-picker/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport { type LinearGradientNode } from 'gradient-parser';\n\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport {\n\tgetGradientAstWithDefault,\n\tgetLinearGradientRepresentation,\n\tgetGradientAstWithControlPoints,\n\tgetStopCssColor,\n} from './utils';\nimport { serializeGradient } from './serializer';\nimport {\n\tDEFAULT_LINEAR_GRADIENT_ANGLE,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tGRADIENT_OPTIONS,\n} from './constants';\nimport {\n\tAccessoryWrapper,\n\tSelectWrapper,\n} from './styles/custom-gradient-picker-styles';\nimport type {\n\tCustomGradientPickerProps,\n\tGradientAnglePickerProps,\n\tGradientTypePickerProps,\n} from './types';\n\nconst GradientAnglePicker = ( {\n\tgradientAST,\n\thasGradient,\n\tonChange,\n}: GradientAnglePickerProps ) => {\n\tconst angle =\n\t\tgradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n\tconst onAngleChange = ( newAngle: number ) => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: {\n\t\t\t\t\ttype: 'angular',\n\t\t\t\t\tvalue: `${ newAngle }`,\n\t\t\t\t},\n\t\t\t} )\n\t\t);\n\t};\n\treturn (\n\t\t<AnglePickerControl\n\t\t\tonChange={ onAngleChange }\n\t\t\tvalue={ hasGradient ? angle : '' }\n\t\t/>\n\t);\n};\n\nconst GradientTypePicker = ( {\n\tgradientAST,\n\thasGradient,\n\tonChange,\n}: GradientTypePickerProps ) => {\n\tconst { type } = gradientAST;\n\n\tconst onSetLinearGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: gradientAST.orientation\n\t\t\t\t\t? undefined\n\t\t\t\t\t: HORIZONTAL_GRADIENT_ORIENTATION,\n\t\t\t\ttype: 'linear-gradient',\n\t\t\t} satisfies LinearGradientNode )\n\t\t);\n\t};\n\n\tconst onSetRadialGradient = () => {\n\t\tconst { orientation, ...restGradientAST } = gradientAST;\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...restGradientAST,\n\t\t\t\ttype: 'radial-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst handleOnChange = ( next: string ) => {\n\t\tif ( next === 'linear-gradient' ) {\n\t\t\tonSetLinearGradient();\n\t\t}\n\t\tif ( next === 'radial-gradient' ) {\n\t\t\tonSetRadialGradient();\n\t\t}\n\t};\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tclassName=\"components-custom-gradient-picker__type-picker\"\n\t\t\tlabel={ __( 'Type' ) }\n\t\t\tlabelPosition=\"top\"\n\t\t\tonChange={ handleOnChange }\n\t\t\toptions={ GRADIENT_OPTIONS }\n\t\t\tsize=\"__unstable-large\"\n\t\t\tvalue={ hasGradient ? type : undefined }\n\t\t/>\n\t);\n};\n\n/\n CustomGradientPicker is a React component that renders a UI for specifying\n * linear or radial gradients. Radial gradients are displayed in the picker as\n * a slice of the gradient from the center to the outside.\n \n ```jsx\n * import { CustomGradientPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyCustomGradientPicker = () => {\n * const [ gradient, setGradient ] = useState();\n \n return (\n * <CustomGradientPicker\n \t\t\tvalue={ gradient }\n \t\t\tonChange={ setGradient }\n * />\n * );\n * };\n * ```\n */\nexport function CustomGradientPicker( {\n\tvalue,\n\tonChange,\n\t__experimentalIsRenderedInSidebar = false,\n}: CustomGradientPickerProps ) {\n\tconst { gradientAST, hasGradient } = getGradientAstWithDefault( value );\n\n\t// On radial gradients the bar should display a linear gradient.\n\t// On radial gradients the bar represents a slice of the gradient from the center until the outside.\n\t// On liner gradients the bar represents the color stops from left to right independently of the angle.\n\tconst background = getLinearGradientRepresentation( gradientAST );\n\n\t// Control points color option may be hex from presets, custom colors will be rgb.\n\t// The position should always be a percentage.\n\tconst controlPoints = gradientAST.colorStops.map( ( colorStop ) => {\n\t\treturn {\n\t\t\tcolor: getStopCssColor( colorStop ),\n\t\t\t// Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,\n\t\t\t// TypeScript doesn't know that `colorStop.length` is not undefined here.\n\t\t\t// @ts-expect-error\n\t\t\tposition: parseInt( colorStop.length.value ),\n\t\t};\n\t} );\n\n\treturn (\n\t\t<VStack spacing={ 4 } className=\"components-custom-gradient-picker\">\n\t\t\t<CustomGradientBar\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tbackground={ background }\n\t\t\t\thasGradient={ hasGradient }\n\t\t\t\tvalue={ controlPoints }\n\t\t\t\tonChange={ ( newControlPoints ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tserializeGradient(\n\t\t\t\t\t\t\tgetGradientAstWithControlPoints(\n\t\t\t\t\t\t\t\tgradientAST,\n\t\t\t\t\t\t\t\tnewControlPoints\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\t<Flex\n\t\t\t\tgap={ 3 }\n\t\t\t\tclassName=\"components-custom-gradient-picker__ui-line\"\n\t\t\t>\n\t\t\t\t<SelectWrapper>\n\t\t\t\t\t<GradientTypePicker\n\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</SelectWrapper>\n\t\t\t\t<AccessoryWrapper>\n\t\t\t\t\t{ gradientAST.type === 'linear-gradient' && (\n\t\t\t\t\t\t<GradientAnglePicker\n\t\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</AccessoryWrapper>\n\t\t\t</Flex>\n\t\t</VStack>\n\t);\n}\n\nexport default CustomGradientPicker;\n"],"mappings":";;;;;;;;AAQA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,mBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,cAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AAMA,IAAAQ,WAAA,GAAAR,OAAA;AACA,IAAAS,UAAA,GAAAT,OAAA;AAKA,IAAAU,2BAAA,GAAAV,OAAA;AAGgD,IAAAW,WAAA,GAAAX,OAAA;AAjChD;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AA4BA,MAAMY,mBAAmB,GAAGA,CAAE;EAC7BC,WAAW;EACXC,WAAW;EACXC;AACyB,CAAC,KAAM;EAAA,IAAAC,qBAAA;EAChC,MAAMC,KAAK,IAAAD,qBAAA,GACVH,WAAW,EAAEK,WAAW,EAAEC,KAAK,cAAAH,qBAAA,cAAAA,qBAAA,GAAII,wCAA6B;EACjE,MAAMC,aAAa,GAAKC,QAAgB,IAAM;IAC7CP,QAAQ,CACP,IAAAQ,6BAAiB,EAAE;MAClB,GAAGV,WAAW;MACdK,WAAW,EAAE;QACZM,IAAI,EAAE,SAAS;QACfL,KAAK,EAAE,GAAIG,QAAQ;MACpB;IACD,CAAE,CACH,CAAC;EACF,CAAC;EACD,oBACC,IAAAX,WAAA,CAAAc,GAAA,EAACxB,mBAAA,CAAAyB,OAAkB;IAClBX,QAAQ,EAAGM,aAAe;IAC1BF,KAAK,EAAGL,WAAW,GAAGG,KAAK,GAAG;EAAI,CAClC,CAAC;AAEJ,CAAC;AAED,MAAMU,kBAAkB,GAAGA,CAAE;EAC5Bd,WAAW;EACXC,WAAW;EACXC;AACwB,CAAC,KAAM;EAC/B,MAAM;IAAES;EAAK,CAAC,GAAGX,WAAW;EAE5B,MAAMe,mBAAmB,GAAGA,CAAA,KAAM;IACjCb,QAAQ,CACP,IAAAQ,6BAAiB,EAAE;MAClB,GAAGV,WAAW;MACdK,WAAW,EAAEL,WAAW,CAACK,WAAW,GACjCW,SAAS,GACTC,0CAA+B;MAClCN,IAAI,EAAE;IACP,CAA+B,CAChC,CAAC;EACF,CAAC;EAED,MAAMO,mBAAmB,GAAGA,CAAA,KAAM;IACjC,MAAM;MAAEb,WAAW;MAAE,GAAGc;IAAgB,CAAC,GAAGnB,WAAW;IACvDE,QAAQ,CACP,IAAAQ,6BAAiB,EAAE;MAClB,GAAGS,eAAe;MAClBR,IAAI,EAAE;IACP,CAAE,CACH,CAAC;EACF,CAAC;EAED,MAAMS,cAAc,GAAKC,IAAY,IAAM;IAC1C,IAAKA,IAAI,KAAK,iBAAiB,EAAG;MACjCN,mBAAmB,CAAC,CAAC;IACtB;IACA,IAAKM,IAAI,KAAK,iBAAiB,EAAG;MACjCH,mBAAmB,CAAC,CAAC;IACtB;EACD,CAAC;EAED,oBACC,IAAApB,WAAA,CAAAc,GAAA,EAACpB,cAAA,CAAAqB,OAAa;IACbS,uBAAuB;IACvBC,SAAS,EAAC,gDAAgD;IAC1DC,KAAK,EAAG,IAAAC,QAAE,EAAE,MAAO,CAAG;IACtBC,aAAa,EAAC,KAAK;IACnBxB,QAAQ,EAAGkB,cAAgB;IAC3BO,OAAO,EAAGC,2BAAkB;IAC5BC,IAAI,EAAC,kBAAkB;IACvBvB,KAAK,EAAGL,WAAW,GAAGU,IAAI,GAAGK;EAAW,CACxC,CAAC;AAEJ,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASc,oBAAoBA,CAAE;EACrCxB,KAAK;EACLJ,QAAQ;EACR6B,iCAAiC,GAAG;AACV,CAAC,EAAG;EAC9B,MAAM;IAAE/B,WAAW;IAAEC;EAAY,CAAC,GAAG,IAAA+B,gCAAyB,EAAE1B,KAAM,CAAC;;EAEvE;EACA;EACA;EACA,MAAM2B,UAAU,GAAG,IAAAC,sCAA+B,EAAElC,WAAY,CAAC;;EAEjE;EACA;EACA,MAAMmC,aAAa,GAAGnC,WAAW,CAACoC,UAAU,CAACC,GAAG,CAAIC,SAAS,IAAM;IAClE,OAAO;MACNC,KAAK,EAAE,IAAAC,sBAAe,EAAEF,SAAU,CAAC;MACnC;MACA;MACA;MACAG,QAAQ,EAAEC,QAAQ,CAAEJ,SAAS,CAACK,MAAM,CAACrC,KAAM;IAC5C,CAAC;EACF,CAAE,CAAC;EAEH,oBACC,IAAAR,WAAA,CAAA8C,IAAA,EAACnD,OAAA,CAAAoD,MAAM;IAACC,OAAO,EAAG,CAAG;IAACvB,SAAS,EAAC,mCAAmC;IAAAwB,QAAA,gBAClE,IAAAjD,WAAA,CAAAc,GAAA,EAACtB,YAAA,CAAAuB,OAAiB;MACjBkB,iCAAiC,EAChCA,iCACA;MACDE,UAAU,EAAGA,UAAY;MACzBhC,WAAW,EAAGA,WAAa;MAC3BK,KAAK,EAAG6B,aAAe;MACvBjC,QAAQ,EAAK8C,gBAAgB,IAAM;QAClC9C,QAAQ,CACP,IAAAQ,6BAAiB,EAChB,IAAAuC,sCAA+B,EAC9BjD,WAAW,EACXgD,gBACD,CACD,CACD,CAAC;MACF;IAAG,CACH,CAAC,eACF,IAAAlD,WAAA,CAAA8C,IAAA,EAACrD,KAAA,CAAA2D,IAAI;MACJC,GAAG,EAAG,CAAG;MACT5B,SAAS,EAAC,4CAA4C;MAAAwB,QAAA,gBAEtD,IAAAjD,WAAA,CAAAc,GAAA,EAACf,2BAAA,CAAAuD,aAAa;QAAAL,QAAA,eACb,IAAAjD,WAAA,CAAAc,GAAA,EAACE,kBAAkB;UAClBd,WAAW,EAAGA,WAAa;UAC3BC,WAAW,EAAGA,WAAa;UAC3BC,QAAQ,EAAGA;QAAU,CACrB;MAAC,CACY,CAAC,eAChB,IAAAJ,WAAA,CAAAc,GAAA,EAACf,2BAAA,CAAAwD,gBAAgB;QAAAN,QAAA,EACd/C,WAAW,CAACW,IAAI,KAAK,iBAAiB,iBACvC,IAAAb,WAAA,CAAAc,GAAA,EAACb,mBAAmB;UACnBC,WAAW,EAAGA,WAAa;UAC3BC,WAAW,EAAGA,WAAa;UAC3BC,QAAQ,EAAGA;QAAU,CACrB;MACD,CACgB,CAAC;IAAA,CACd,CAAC;EAAA,CACA,CAAC;AAEX;AAAC,IAAAoD,QAAA,GAAAC,OAAA,CAAA1C,OAAA,GAEciB,oBAAoB","ignoreList":[]}
1	+ {"version":3,"names":["_i18n","require","_anglePickerControl","_interopRequireDefault","_gradientBar","_flex","_selectControl","_vStack","_utils","_serializer","_constants","_customGradientPickerStyles","_jsxRuntime","GradientAnglePicker","gradientAST","hasGradient","onChange","_gradientAST$orientat","angle","orientation","value","DEFAULT_LINEAR_GRADIENT_ANGLE","onAngleChange","newAngle","serializeGradient","type","jsx","default","GradientTypePicker","onSetLinearGradient","undefined","HORIZONTAL_GRADIENT_ORIENTATION","onSetRadialGradient","restGradientAST","handleOnChange","next","__nextHasNoMarginBottom","className","label","__","labelPosition","options","GRADIENT_OPTIONS","size","CustomGradientPicker","enableAlpha","__experimentalIsRenderedInSidebar","getGradientAstWithDefault","background","getLinearGradientRepresentation","controlPoints","colorStops","map","colorStop","color","getStopCssColor","position","parseInt","length","jsxs","VStack","spacing","children","disableAlpha","newControlPoints","getGradientAstWithControlPoints","Flex","gap","SelectWrapper","AccessoryWrapper","_default","exports"],"sources":["@wordpress/components/src/custom-gradient-picker/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport { type LinearGradientNode } from 'gradient-parser';\n\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport {\n\tgetGradientAstWithDefault,\n\tgetLinearGradientRepresentation,\n\tgetGradientAstWithControlPoints,\n\tgetStopCssColor,\n} from './utils';\nimport { serializeGradient } from './serializer';\nimport {\n\tDEFAULT_LINEAR_GRADIENT_ANGLE,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tGRADIENT_OPTIONS,\n} from './constants';\nimport {\n\tAccessoryWrapper,\n\tSelectWrapper,\n} from './styles/custom-gradient-picker-styles';\nimport type {\n\tCustomGradientPickerProps,\n\tGradientAnglePickerProps,\n\tGradientTypePickerProps,\n} from './types';\n\nconst GradientAnglePicker = ( {\n\tgradientAST,\n\thasGradient,\n\tonChange,\n}: GradientAnglePickerProps ) => {\n\tconst angle =\n\t\tgradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n\tconst onAngleChange = ( newAngle: number ) => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: {\n\t\t\t\t\ttype: 'angular',\n\t\t\t\t\tvalue: `${ newAngle }`,\n\t\t\t\t},\n\t\t\t} )\n\t\t);\n\t};\n\treturn (\n\t\t<AnglePickerControl\n\t\t\tonChange={ onAngleChange }\n\t\t\tvalue={ hasGradient ? angle : '' }\n\t\t/>\n\t);\n};\n\nconst GradientTypePicker = ( {\n\tgradientAST,\n\thasGradient,\n\tonChange,\n}: GradientTypePickerProps ) => {\n\tconst { type } = gradientAST;\n\n\tconst onSetLinearGradient = () => {\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...gradientAST,\n\t\t\t\torientation: gradientAST.orientation\n\t\t\t\t\t? undefined\n\t\t\t\t\t: HORIZONTAL_GRADIENT_ORIENTATION,\n\t\t\t\ttype: 'linear-gradient',\n\t\t\t} satisfies LinearGradientNode )\n\t\t);\n\t};\n\n\tconst onSetRadialGradient = () => {\n\t\tconst { orientation, ...restGradientAST } = gradientAST;\n\t\tonChange(\n\t\t\tserializeGradient( {\n\t\t\t\t...restGradientAST,\n\t\t\t\ttype: 'radial-gradient',\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst handleOnChange = ( next: string ) => {\n\t\tif ( next === 'linear-gradient' ) {\n\t\t\tonSetLinearGradient();\n\t\t}\n\t\tif ( next === 'radial-gradient' ) {\n\t\t\tonSetRadialGradient();\n\t\t}\n\t};\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tclassName=\"components-custom-gradient-picker__type-picker\"\n\t\t\tlabel={ __( 'Type' ) }\n\t\t\tlabelPosition=\"top\"\n\t\t\tonChange={ handleOnChange }\n\t\t\toptions={ GRADIENT_OPTIONS }\n\t\t\tsize=\"__unstable-large\"\n\t\t\tvalue={ hasGradient ? type : undefined }\n\t\t/>\n\t);\n};\n\n/\n CustomGradientPicker is a React component that renders a UI for specifying\n * linear or radial gradients. Radial gradients are displayed in the picker as\n * a slice of the gradient from the center to the outside.\n \n ```jsx\n * import { CustomGradientPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyCustomGradientPicker = () => {\n * const [ gradient, setGradient ] = useState();\n \n return (\n * <CustomGradientPicker\n \t\t\tvalue={ gradient }\n \t\t\tonChange={ setGradient }\n * />\n * );\n * };\n * ```\n */\nexport function CustomGradientPicker( {\n\tvalue,\n\tonChange,\n\tenableAlpha = true,\n\t__experimentalIsRenderedInSidebar = false,\n}: CustomGradientPickerProps ) {\n\tconst { gradientAST, hasGradient } = getGradientAstWithDefault( value );\n\n\t// On radial gradients the bar should display a linear gradient.\n\t// On radial gradients the bar represents a slice of the gradient from the center until the outside.\n\t// On liner gradients the bar represents the color stops from left to right independently of the angle.\n\tconst background = getLinearGradientRepresentation( gradientAST );\n\n\t// Control points color option may be hex from presets, custom colors will be rgb.\n\t// The position should always be a percentage.\n\tconst controlPoints = gradientAST.colorStops.map( ( colorStop ) => {\n\t\treturn {\n\t\t\tcolor: getStopCssColor( colorStop ),\n\t\t\t// Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,\n\t\t\t// TypeScript doesn't know that `colorStop.length` is not undefined here.\n\t\t\t// @ts-expect-error\n\t\t\tposition: parseInt( colorStop.length.value ),\n\t\t};\n\t} );\n\n\treturn (\n\t\t<VStack spacing={ 4 } className=\"components-custom-gradient-picker\">\n\t\t\t<CustomGradientBar\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tdisableAlpha={ ! enableAlpha }\n\t\t\t\tbackground={ background }\n\t\t\t\thasGradient={ hasGradient }\n\t\t\t\tvalue={ controlPoints }\n\t\t\t\tonChange={ ( newControlPoints ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tserializeGradient(\n\t\t\t\t\t\t\tgetGradientAstWithControlPoints(\n\t\t\t\t\t\t\t\tgradientAST,\n\t\t\t\t\t\t\t\tnewControlPoints\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\t<Flex\n\t\t\t\tgap={ 3 }\n\t\t\t\tclassName=\"components-custom-gradient-picker__ui-line\"\n\t\t\t>\n\t\t\t\t<SelectWrapper>\n\t\t\t\t\t<GradientTypePicker\n\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</SelectWrapper>\n\t\t\t\t<AccessoryWrapper>\n\t\t\t\t\t{ gradientAST.type === 'linear-gradient' && (\n\t\t\t\t\t\t<GradientAnglePicker\n\t\t\t\t\t\t\tgradientAST={ gradientAST }\n\t\t\t\t\t\t\thasGradient={ hasGradient }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</AccessoryWrapper>\n\t\t\t</Flex>\n\t\t</VStack>\n\t);\n}\n\nexport default CustomGradientPicker;\n"],"mappings":"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","ignoreList":[]}

package/build/custom-gradient-picker/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/custom-gradient-picker/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type gradientParser from 'gradient-parser';\n\nexport type CustomGradientPickerProps = {\n\t/\n\t Start opting in to the new margin-free styles that will become the default\n\t * in a future version, currently scheduled to be WordPress 6.4. (The prop\n\t * can be safely removed once this happens.)\n\t \n\t @default false\n\t * @deprecated Default behavior since WP 6.5. Prop can be safely removed.\n\t * @ignore\n\t /\n\t__nextHasNoMargin?: boolean;\n\t/\n\t The current value of the gradient. Pass a css gradient string (See default value for example).\n\t * Optionally pass in a `null` value to specify no gradient is currently selected.\n\t \n\t @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'\n\t /\n\tvalue?: string \| null;\n\t/\n\t The function called when a new gradient has been defined. It is passed to\n\t * the `currentGradient` as an argument.\n\t /\n\tonChange: ( currentGradient: string ) => void;\n\t/\n\t Whether this is rendered in the sidebar.\n\t \n\t @default false\n\t */\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n\nexport type GradientAnglePickerProps = {\n\tgradientAST:\n\t\t\| gradientParser.LinearGradientNode\n\t\t\| gradientParser.RepeatingLinearGradientNode;\n\thasGradient: boolean;\n\tonChange: ( gradient: string ) => void;\n};\n\nexport type GradientTypePickerProps = {\n\tgradientAST: gradientParser.GradientNode;\n\thasGradient: boolean;\n\tonChange: ( gradient: string ) => void;\n};\n\nexport type ControlPoint = { color: string; position: number };\n\nexport type CustomGradientBarProps = {\n\tbackground: React.CSSProperties[ 'background' ];\n\thasGradient: boolean;\n\tvalue: ControlPoint[];\n\tonChange: ( newControlPoints: ControlPoint[] ) => void;\n\tdisableInserter?: boolean;\n\tdisableAlpha?: boolean;\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n\nexport type CustomGradientBarIdleState = { id: 'IDLE' };\ntype CustomGradientBarMovingInserterState = {\n\tid: 'MOVING_INSERTER';\n\tinsertPosition: number;\n};\ntype CustomGradientBarInsertingControlPointState = {\n\tid: 'INSERTING_CONTROL_POINT';\n\tinsertPosition: number;\n};\ntype CustomGradientBarMovingControlPointState = { id: 'MOVING_CONTROL_POINT' };\n\nexport type CustomGradientBarReducerState =\n\t\| CustomGradientBarIdleState\n\t\| CustomGradientBarMovingInserterState\n\t\| CustomGradientBarInsertingControlPointState\n\t\| CustomGradientBarMovingControlPointState;\n\nexport type CustomGradientBarReducerAction =\n\t\| { type: 'MOVE_INSERTER'; insertPosition: number }\n\t\| { type: 'STOP_INSERTER_MOVE' }\n\t\| { type: 'OPEN_INSERTER' }\n\t\| { type: 'CLOSE_INSERTER' }\n\t\| { type: 'START_CONTROL_CHANGE' }\n\t\| { type: 'STOP_CONTROL_CHANGE' };\n\nexport type ControlPointButtonProps = {\n\tisOpen: boolean;\n\tposition: ControlPoint[ 'position' ];\n\tcolor: string;\n};\n\nexport type ControlPointsProps = {\n\tdisableRemove: boolean;\n\tdisableAlpha: boolean;\n\tgradientPickerDomRef: React.RefObject< HTMLDivElement >;\n\tignoreMarkerPosition?: number;\n\tvalue: ControlPoint[];\n\tonChange: ( controlPoints: ControlPoint[] ) => void;\n\tonStartControlPointChange: () => void;\n\tonStopControlPointChange: () => void;\n\t__experimentalIsRenderedInSidebar: boolean;\n};\n\nexport type ControlPointMoveState = {\n\tinitialPosition: number;\n\tindex: number;\n\tsignificantMoveHappened: boolean;\n\tlistenersActivated: boolean;\n};\n\nexport type InsertPointProps = {\n\tvalue: ControlPoint[];\n\tonChange: ( controlPoints: ControlPoint[] ) => void;\n\tonOpenInserter: () => void;\n\tonCloseInserter: () => void;\n\tinsertPosition: number;\n\tdisableAlpha: boolean;\n\t__experimentalIsRenderedInSidebar: boolean;\n};\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/custom-gradient-picker/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type gradientParser from 'gradient-parser';\n\nexport type CustomGradientPickerProps = {\n\t/\n\t Start opting in to the new margin-free styles that will become the default\n\t * in a future version, currently scheduled to be WordPress 6.4. (The prop\n\t * can be safely removed once this happens.)\n\t \n\t @default false\n\t * @deprecated Default behavior since WP 6.5. Prop can be safely removed.\n\t * @ignore\n\t /\n\t__nextHasNoMargin?: boolean;\n\t/\n\t The current value of the gradient. Pass a css gradient string (See default value for example).\n\t * Optionally pass in a `null` value to specify no gradient is currently selected.\n\t \n\t @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'\n\t /\n\tvalue?: string \| null;\n\t/\n\t The function called when a new gradient has been defined. It is passed to\n\t * the `currentGradient` as an argument.\n\t /\n\tonChange: ( currentGradient: string ) => void;\n\t/\n\t Whether to enable alpha transparency options in the picker.\n\t \n\t @default true\n\t /\n\tenableAlpha?: boolean;\n\t/\n\t Whether this is rendered in the sidebar.\n\t \n\t @default false\n\t */\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n\nexport type GradientAnglePickerProps = {\n\tgradientAST:\n\t\t\| gradientParser.LinearGradientNode\n\t\t\| gradientParser.RepeatingLinearGradientNode;\n\thasGradient: boolean;\n\tonChange: ( gradient: string ) => void;\n};\n\nexport type GradientTypePickerProps = {\n\tgradientAST: gradientParser.GradientNode;\n\thasGradient: boolean;\n\tonChange: ( gradient: string ) => void;\n};\n\nexport type ControlPoint = { color: string; position: number };\n\nexport type CustomGradientBarProps = {\n\tbackground: React.CSSProperties[ 'background' ];\n\thasGradient: boolean;\n\tvalue: ControlPoint[];\n\tonChange: ( newControlPoints: ControlPoint[] ) => void;\n\tdisableInserter?: boolean;\n\tdisableAlpha?: boolean;\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n\nexport type CustomGradientBarIdleState = { id: 'IDLE' };\ntype CustomGradientBarMovingInserterState = {\n\tid: 'MOVING_INSERTER';\n\tinsertPosition: number;\n};\ntype CustomGradientBarInsertingControlPointState = {\n\tid: 'INSERTING_CONTROL_POINT';\n\tinsertPosition: number;\n};\ntype CustomGradientBarMovingControlPointState = { id: 'MOVING_CONTROL_POINT' };\n\nexport type CustomGradientBarReducerState =\n\t\| CustomGradientBarIdleState\n\t\| CustomGradientBarMovingInserterState\n\t\| CustomGradientBarInsertingControlPointState\n\t\| CustomGradientBarMovingControlPointState;\n\nexport type CustomGradientBarReducerAction =\n\t\| { type: 'MOVE_INSERTER'; insertPosition: number }\n\t\| { type: 'STOP_INSERTER_MOVE' }\n\t\| { type: 'OPEN_INSERTER' }\n\t\| { type: 'CLOSE_INSERTER' }\n\t\| { type: 'START_CONTROL_CHANGE' }\n\t\| { type: 'STOP_CONTROL_CHANGE' };\n\nexport type ControlPointButtonProps = {\n\tisOpen: boolean;\n\tposition: ControlPoint[ 'position' ];\n\tcolor: string;\n};\n\nexport type ControlPointsProps = {\n\tdisableRemove: boolean;\n\tdisableAlpha: boolean;\n\tgradientPickerDomRef: React.RefObject< HTMLDivElement >;\n\tignoreMarkerPosition?: number;\n\tvalue: ControlPoint[];\n\tonChange: ( controlPoints: ControlPoint[] ) => void;\n\tonStartControlPointChange: () => void;\n\tonStopControlPointChange: () => void;\n\t__experimentalIsRenderedInSidebar: boolean;\n};\n\nexport type ControlPointMoveState = {\n\tinitialPosition: number;\n\tindex: number;\n\tsignificantMoveHappened: boolean;\n\tlistenersActivated: boolean;\n};\n\nexport type InsertPointProps = {\n\tvalue: ControlPoint[];\n\tonChange: ( controlPoints: ControlPoint[] ) => void;\n\tonOpenInserter: () => void;\n\tonCloseInserter: () => void;\n\tinsertPosition: number;\n\tdisableAlpha: boolean;\n\t__experimentalIsRenderedInSidebar: boolean;\n};\n"],"mappings":"","ignoreList":[]}

package/build/custom-select-control/index.js CHANGED Viewed

@@ -13,6 +13,7 @@ var _customSelect = _interopRequireDefault(require("../custom-select-control-v2/
 var _item = _interopRequireDefault(require("../custom-select-control-v2/item"));
 var Styled = _interopRequireWildcard(require("../custom-select-control-v2/styles"));
 var _visuallyHidden = require("../visually-hidden");
+var _deprecated36pxSize = require("../utils/deprecated-36px-size");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -61,6 +62,7 @@ function getDescribedBy(currentValue, describedBy) {
 function CustomSelectControl(props) {
   const {
     __next40pxDefaultSize = false,
+    __shouldNotWarnDeprecated36pxSize,
     describedBy,
     options,
     onChange,
@@ -70,6 +72,12 @@ function CustomSelectControl(props) {
     showSelectedHint = false,
     ...restProps
   } = useDeprecatedProps(props);
+  (0, _deprecated36pxSize.maybeWarnDeprecated36pxSize)({
+    componentName: 'CustomSelectControl',
+    __next40pxDefaultSize,
+    size,
+    __shouldNotWarnDeprecated36pxSize
+  });
   const descriptionId = (0, _compose.useInstanceId)(CustomSelectControl, 'custom-select-control__description');
   // Forward props + store from v2 implementation

package/build/custom-select-control/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["Ariakit","_interopRequireWildcard","require","_clsx","_interopRequireDefault","_compose","_i18n","_customSelect","_item","Styled","_visuallyHidden","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","useDeprecatedProps","__experimentalShowSelectedHint","otherProps","showSelectedHint","applyOptionDeprecations","__experimentalHint","rest","hint","getDescribedBy","currentValue","describedBy","sprintf","__","CustomSelectControl","props","__next40pxDefaultSize","options","onChange","size","value","className","classNameProp","restProps","descriptionId","useInstanceId","store","useSelectStore","setValue","nextValue","nextOption","find","item","name","Promise","resolve","state","getState","changeObject","highlightedIndex","renderedItems","findIndex","inputValue","isOpen","open","selectedItem","type","defaultValue","children","map","key","style","withHint","jsxs","WithHintItemWrapper","jsx","WithHintItemHint","clsx","renderSelectedValueHint","selectedOptionHint","SelectedExperimentalHintWrapper","SelectedExperimentalHintItem","translatedSize","Fragment","renderSelectedValue","undefined","isLegacy","VisuallyHidden","id","_default","exports"],"sources":["@wordpress/components/src/custom-select-control/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n\n/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport _CustomSelect from '../custom-select-control-v2/custom-select';\nimport CustomSelectItem from '../custom-select-control-v2/item';\nimport as Styled from '../custom-select-control-v2/styles';\nimport type { CustomSelectProps, CustomSelectOption } from './types';\nimport { VisuallyHidden } from '../visually-hidden';\n\nfunction useDeprecatedProps< T extends CustomSelectOption >( {\n\t__experimentalShowSelectedHint,\n\t...otherProps\n}: CustomSelectProps< T > ) {\n\treturn {\n\t\tshowSelectedHint: __experimentalShowSelectedHint,\n\t\t...otherProps,\n\t};\n}\n\n// The removal of `__experimentalHint` in favour of `hint` doesn't happen in\n// the `useDeprecatedProps` hook in order not to break consumers that rely\n// on object identity (see https://github.com/WordPress/gutenberg/pull/63248#discussion_r1672213131)\nfunction applyOptionDeprecations( {\n\t__experimentalHint,\n\t...rest\n}: CustomSelectOption ) {\n\treturn {\n\t\thint: __experimentalHint,\n\t\t...rest,\n\t};\n}\n\nfunction getDescribedBy( currentValue: string, describedBy?: string ) {\n\tif ( describedBy ) {\n\t\treturn describedBy;\n\t}\n\n\t// translators: %s: The selected option.\n\treturn sprintf( __( 'Currently selected: %s' ), currentValue );\n}\n\nfunction CustomSelectControl< T extends CustomSelectOption >(\n\tprops: CustomSelectProps< T >\n) {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\tdescribedBy,\n\t\toptions,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tclassName: classNameProp,\n\t\tshowSelectedHint = false,\n\t\t...restProps\n\t} = useDeprecatedProps( props );\n\n\tconst descriptionId = useInstanceId(\n\t\tCustomSelectControl,\n\t\t'custom-select-control__description'\n\t);\n\n\t// Forward props + store from v2 implementation\n\tconst store = Ariakit.useSelectStore< string >( {\n\t\tasync setValue( nextValue ) {\n\t\t\tconst nextOption = options.find(\n\t\t\t\t( item ) => item.name === nextValue\n\t\t\t);\n\n\t\t\tif ( ! onChange \|\| ! nextOption ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Executes the logic in a microtask after the popup is closed.\n\t\t\t// This is simply to ensure the isOpen state matches the one from the\n\t\t\t// previous legacy implementation.\n\t\t\tawait Promise.resolve();\n\t\t\tconst state = store.getState();\n\n\t\t\tconst changeObject = {\n\t\t\t\thighlightedIndex: state.renderedItems.findIndex(\n\t\t\t\t\t( item ) => item.value === nextValue\n\t\t\t\t),\n\t\t\t\tinputValue: '',\n\t\t\t\tisOpen: state.open,\n\t\t\t\tselectedItem: nextOption,\n\t\t\t\ttype: '',\n\t\t\t};\n\t\t\tonChange( changeObject );\n\t\t},\n\t\tvalue: value?.name,\n\t\t// Setting the first option as a default value when no value is provided\n\t\t// is already done natively by the underlying Ariakit component,\n\t\t// but doing this explicitly avoids the `onChange` callback from firing\n\t\t// on initial render, thus making this implementation closer to the v1.\n\t\tdefaultValue: options[ 0 ]?.name,\n\t} );\n\n\tconst children = options\n\t\t.map( applyOptionDeprecations )\n\t\t.map( ( { name, key, hint, style, className } ) => {\n\t\t\tconst withHint = (\n\t\t\t\t<Styled.WithHintItemWrapper>\n\t\t\t\t\t<span>{ name }</span>\n\t\t\t\t\t<Styled.WithHintItemHint\n\t\t\t\t\t\t// Keeping the classname for legacy reasons\n\t\t\t\t\t\tclassName=\"components-custom-select-control__item-hint\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ hint }\n\t\t\t\t\t</Styled.WithHintItemHint>\n\t\t\t\t</Styled.WithHintItemWrapper>\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<CustomSelectItem\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvalue={ name }\n\t\t\t\t\tchildren={ hint ? withHint : name }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t// Keeping the classnames for legacy reasons\n\t\t\t\t\t\t'components-custom-select-control__item',\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'has-hint': hint,\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\n\tconst { value: currentValue } = store.getState();\n\n\tconst renderSelectedValueHint = () => {\n\t\tconst selectedOptionHint = options\n\t\t\t?.map( applyOptionDeprecations )\n\t\t\t?.find( ( { name } ) => currentValue === name )?.hint;\n\n\t\treturn (\n\t\t\t<Styled.SelectedExperimentalHintWrapper>\n\t\t\t\t{ currentValue }\n\t\t\t\t{ selectedOptionHint && (\n\t\t\t\t\t<Styled.SelectedExperimentalHintItem\n\t\t\t\t\t\t// Keeping the classname for legacy reasons\n\t\t\t\t\t\tclassName=\"components-custom-select-control__hint\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ selectedOptionHint }\n\t\t\t\t\t</Styled.SelectedExperimentalHintItem>\n\t\t\t\t) }\n\t\t\t</Styled.SelectedExperimentalHintWrapper>\n\t\t);\n\t};\n\n\tconst translatedSize = ( () => {\n\t\tif (\n\t\t\t( __next40pxDefaultSize && size === 'default' ) \|\|\n\t\t\tsize === '__unstable-large'\n\t\t) {\n\t\t\treturn 'default';\n\t\t}\n\t\tif ( ! __next40pxDefaultSize && size === 'default' ) {\n\t\t\treturn 'compact';\n\t\t}\n\t\treturn size;\n\t} )();\n\n\treturn (\n\t\t<>\n\t\t\t<_CustomSelect\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\trenderSelectedValue={\n\t\t\t\t\tshowSelectedHint ? renderSelectedValueHint : undefined\n\t\t\t\t}\n\t\t\t\tsize={ translatedSize }\n\t\t\t\tstore={ store }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t// Keeping the classname for legacy reasons\n\t\t\t\t\t'components-custom-select-control',\n\t\t\t\t\tclassNameProp\n\t\t\t\t) }\n\t\t\t\tisLegacy\n\t\t\t\t{ ...restProps }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</_CustomSelect>\n\t\t\t<VisuallyHidden>\n\t\t\t\t<span id={ descriptionId }>\n\t\t\t\t\t{ getDescribedBy( currentValue, describedBy ) }\n\t\t\t\t</span>\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n\nexport default CustomSelectControl;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["Ariakit","_interopRequireWildcard","require","_clsx","_interopRequireDefault","_compose","_i18n","_customSelect","_item","Styled","_visuallyHidden","_deprecated36pxSize","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","useDeprecatedProps","__experimentalShowSelectedHint","otherProps","showSelectedHint","applyOptionDeprecations","__experimentalHint","rest","hint","getDescribedBy","currentValue","describedBy","sprintf","__","CustomSelectControl","props","__next40pxDefaultSize","__shouldNotWarnDeprecated36pxSize","options","onChange","size","value","className","classNameProp","restProps","maybeWarnDeprecated36pxSize","componentName","descriptionId","useInstanceId","store","useSelectStore","setValue","nextValue","nextOption","find","item","name","Promise","resolve","state","getState","changeObject","highlightedIndex","renderedItems","findIndex","inputValue","isOpen","open","selectedItem","type","defaultValue","children","map","key","style","withHint","jsxs","WithHintItemWrapper","jsx","WithHintItemHint","clsx","renderSelectedValueHint","selectedOptionHint","SelectedExperimentalHintWrapper","SelectedExperimentalHintItem","translatedSize","Fragment","renderSelectedValue","undefined","isLegacy","VisuallyHidden","id","_default","exports"],"sources":["@wordpress/components/src/custom-select-control/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n\n/*\n WordPress dependencies\n /\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport _CustomSelect from '../custom-select-control-v2/custom-select';\nimport CustomSelectItem from '../custom-select-control-v2/item';\nimport as Styled from '../custom-select-control-v2/styles';\nimport type { CustomSelectProps, CustomSelectOption } from './types';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\nfunction useDeprecatedProps< T extends CustomSelectOption >( {\n\t__experimentalShowSelectedHint,\n\t...otherProps\n}: CustomSelectProps< T > ) {\n\treturn {\n\t\tshowSelectedHint: __experimentalShowSelectedHint,\n\t\t...otherProps,\n\t};\n}\n\n// The removal of `__experimentalHint` in favour of `hint` doesn't happen in\n// the `useDeprecatedProps` hook in order not to break consumers that rely\n// on object identity (see https://github.com/WordPress/gutenberg/pull/63248#discussion_r1672213131)\nfunction applyOptionDeprecations( {\n\t__experimentalHint,\n\t...rest\n}: CustomSelectOption ) {\n\treturn {\n\t\thint: __experimentalHint,\n\t\t...rest,\n\t};\n}\n\nfunction getDescribedBy( currentValue: string, describedBy?: string ) {\n\tif ( describedBy ) {\n\t\treturn describedBy;\n\t}\n\n\t// translators: %s: The selected option.\n\treturn sprintf( __( 'Currently selected: %s' ), currentValue );\n}\n\nfunction CustomSelectControl< T extends CustomSelectOption >(\n\tprops: CustomSelectProps< T >\n) {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\t__shouldNotWarnDeprecated36pxSize,\n\t\tdescribedBy,\n\t\toptions,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tclassName: classNameProp,\n\t\tshowSelectedHint = false,\n\t\t...restProps\n\t} = useDeprecatedProps( props );\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'CustomSelectControl',\n\t\t__next40pxDefaultSize,\n\t\tsize,\n\t\t__shouldNotWarnDeprecated36pxSize,\n\t} );\n\n\tconst descriptionId = useInstanceId(\n\t\tCustomSelectControl,\n\t\t'custom-select-control__description'\n\t);\n\n\t// Forward props + store from v2 implementation\n\tconst store = Ariakit.useSelectStore< string >( {\n\t\tasync setValue( nextValue ) {\n\t\t\tconst nextOption = options.find(\n\t\t\t\t( item ) => item.name === nextValue\n\t\t\t);\n\n\t\t\tif ( ! onChange \|\| ! nextOption ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Executes the logic in a microtask after the popup is closed.\n\t\t\t// This is simply to ensure the isOpen state matches the one from the\n\t\t\t// previous legacy implementation.\n\t\t\tawait Promise.resolve();\n\t\t\tconst state = store.getState();\n\n\t\t\tconst changeObject = {\n\t\t\t\thighlightedIndex: state.renderedItems.findIndex(\n\t\t\t\t\t( item ) => item.value === nextValue\n\t\t\t\t),\n\t\t\t\tinputValue: '',\n\t\t\t\tisOpen: state.open,\n\t\t\t\tselectedItem: nextOption,\n\t\t\t\ttype: '',\n\t\t\t};\n\t\t\tonChange( changeObject );\n\t\t},\n\t\tvalue: value?.name,\n\t\t// Setting the first option as a default value when no value is provided\n\t\t// is already done natively by the underlying Ariakit component,\n\t\t// but doing this explicitly avoids the `onChange` callback from firing\n\t\t// on initial render, thus making this implementation closer to the v1.\n\t\tdefaultValue: options[ 0 ]?.name,\n\t} );\n\n\tconst children = options\n\t\t.map( applyOptionDeprecations )\n\t\t.map( ( { name, key, hint, style, className } ) => {\n\t\t\tconst withHint = (\n\t\t\t\t<Styled.WithHintItemWrapper>\n\t\t\t\t\t<span>{ name }</span>\n\t\t\t\t\t<Styled.WithHintItemHint\n\t\t\t\t\t\t// Keeping the classname for legacy reasons\n\t\t\t\t\t\tclassName=\"components-custom-select-control__item-hint\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ hint }\n\t\t\t\t\t</Styled.WithHintItemHint>\n\t\t\t\t</Styled.WithHintItemWrapper>\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<CustomSelectItem\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvalue={ name }\n\t\t\t\t\tchildren={ hint ? withHint : name }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t// Keeping the classnames for legacy reasons\n\t\t\t\t\t\t'components-custom-select-control__item',\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'has-hint': hint,\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\n\tconst { value: currentValue } = store.getState();\n\n\tconst renderSelectedValueHint = () => {\n\t\tconst selectedOptionHint = options\n\t\t\t?.map( applyOptionDeprecations )\n\t\t\t?.find( ( { name } ) => currentValue === name )?.hint;\n\n\t\treturn (\n\t\t\t<Styled.SelectedExperimentalHintWrapper>\n\t\t\t\t{ currentValue }\n\t\t\t\t{ selectedOptionHint && (\n\t\t\t\t\t<Styled.SelectedExperimentalHintItem\n\t\t\t\t\t\t// Keeping the classname for legacy reasons\n\t\t\t\t\t\tclassName=\"components-custom-select-control__hint\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ selectedOptionHint }\n\t\t\t\t\t</Styled.SelectedExperimentalHintItem>\n\t\t\t\t) }\n\t\t\t</Styled.SelectedExperimentalHintWrapper>\n\t\t);\n\t};\n\n\tconst translatedSize = ( () => {\n\t\tif (\n\t\t\t( __next40pxDefaultSize && size === 'default' ) \|\|\n\t\t\tsize === '__unstable-large'\n\t\t) {\n\t\t\treturn 'default';\n\t\t}\n\t\tif ( ! __next40pxDefaultSize && size === 'default' ) {\n\t\t\treturn 'compact';\n\t\t}\n\t\treturn size;\n\t} )();\n\n\treturn (\n\t\t<>\n\t\t\t<_CustomSelect\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\trenderSelectedValue={\n\t\t\t\t\tshowSelectedHint ? renderSelectedValueHint : undefined\n\t\t\t\t}\n\t\t\t\tsize={ translatedSize }\n\t\t\t\tstore={ store }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t// Keeping the classname for legacy reasons\n\t\t\t\t\t'components-custom-select-control',\n\t\t\t\t\tclassNameProp\n\t\t\t\t) }\n\t\t\t\tisLegacy\n\t\t\t\t{ ...restProps }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</_CustomSelect>\n\t\t\t<VisuallyHidden>\n\t\t\t\t<span id={ descriptionId }>\n\t\t\t\t\t{ getDescribedBy( currentValue, describedBy ) }\n\t\t\t\t</span>\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n\nexport default CustomSelectControl;\n"],"mappings":"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","ignoreList":[]}

package/build/custom-select-control/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/custom-select-control/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type { FocusEventHandler, MouseEventHandler } from 'react';\n\n/\n The object structure for the options array.\n /\nexport type CustomSelectOption = {\n\tkey: string;\n\tname: string;\n\tstyle?: React.CSSProperties;\n\tclassName?: string;\n\thint?: string;\n\t/\n\t Use the `hint` property instead\n\t * @deprecated\n\t * @ignore\n\t /\n\t__experimentalHint?: string;\n\t[ key: string ]: any;\n};\n\n/\n The object returned from the onChange event.\n /\ntype CustomSelectChangeObject< T extends CustomSelectOption > = {\n\thighlightedIndex?: number;\n\tinputValue?: string;\n\tisOpen?: boolean;\n\ttype?: string;\n\tselectedItem: T;\n};\n\nexport type CustomSelectProps< T extends CustomSelectOption > = {\n\t/\n\t Optional classname for the component.\n\t /\n\tclassName?: string;\n\t/\n\t Hide the label visually, while keeping available to assistive technology.\n\t /\n\thideLabelFromVision?: boolean;\n\t/\n\t Description for the select trigger button used by assistive technology.\n\t * If no value is passed, the text \"Currently selected: selectedItem.name\"\n\t * will be used fully translated.\n\t /\n\tdescribedBy?: string;\n\t/\n\t Label for the control.\n\t /\n\tlabel: string;\n\t/\n\t Function called with the control's internal state changes. The `selectedItem`\n\t * property contains the next selected item.\n\t /\n\tonChange?: ( newValue: CustomSelectChangeObject< NoInfer< T > > ) => void;\n\t/\n\t A handler for `blur` events on the trigger button.\n\t \n\t @ignore\n\t /\n\tonBlur?: FocusEventHandler< HTMLButtonElement >;\n\t/\n\t A handler for `focus` events on the trigger button.\n\t \n\t @ignore\n\t /\n\tonFocus?: FocusEventHandler< HTMLButtonElement >;\n\t/\n\t A handler for `mouseout` events on the trigger button.\n\t \n\t @ignore\n\t /\n\tonMouseOut?: MouseEventHandler< HTMLButtonElement >;\n\t/\n\t A handler for `mouseover` events on the trigger button.\n\t \n\t @ignore\n\t /\n\tonMouseOver?: MouseEventHandler< HTMLButtonElement >;\n\t/\n\t The list of options that can be chosen from.\n\t /\n\toptions: ReadonlyArray< T >;\n\t/\n\t The size of the control.\n\t \n\t @default 'default'\n\t /\n\tsize?: 'default' \| 'small' \| '__unstable-large';\n\t/\n\t Can be used to externally control the value of the control.\n\t /\n\tvalue?: NoInfer< T >;\n\t/\n\t Use the `showSelectedHint` property instead.\n\t * @deprecated\n\t * @ignore\n\t /\n\t__experimentalShowSelectedHint?: boolean;\n\t/\n\t Show the hint of the selected item in the trigger button.\n\t \n\t @default false\n\t /\n\tshowSelectedHint?: boolean;\n\t/\n\t Opt-in prop for an unconstrained width style which became the default in\n\t * WordPress 6.5. The prop is no longer needed and can be safely removed.\n\t \n\t @deprecated\n\t * @ignore\n\t /\n\t__nextUnconstrainedWidth?: boolean;\n\t/\n\t Start opting into the larger default height that will become the default size in a future version.\n\t \n\t @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n};\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/custom-select-control/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type { FocusEventHandler, MouseEventHandler } from 'react';\n\n/\n The object structure for the options array.\n /\nexport type CustomSelectOption = {\n\tkey: string;\n\tname: string;\n\tstyle?: React.CSSProperties;\n\tclassName?: string;\n\thint?: string;\n\t/\n\t Use the `hint` property instead\n\t * @deprecated\n\t * @ignore\n\t /\n\t__experimentalHint?: string;\n\t[ key: string ]: any;\n};\n\n/\n The object returned from the onChange event.\n /\ntype CustomSelectChangeObject< T extends CustomSelectOption > = {\n\thighlightedIndex?: number;\n\tinputValue?: string;\n\tisOpen?: boolean;\n\ttype?: string;\n\tselectedItem: T;\n};\n\nexport type CustomSelectProps< T extends CustomSelectOption > = {\n\t/\n\t Optional classname for the component.\n\t /\n\tclassName?: string;\n\t/\n\t Hide the label visually, while keeping available to assistive technology.\n\t /\n\thideLabelFromVision?: boolean;\n\t/\n\t Description for the select trigger button used by assistive technology.\n\t * If no value is passed, the text \"Currently selected: selectedItem.name\"\n\t * will be used fully translated.\n\t /\n\tdescribedBy?: string;\n\t/\n\t Label for the control.\n\t /\n\tlabel: string;\n\t/\n\t Function called with the control's internal state changes. The `selectedItem`\n\t * property contains the next selected item.\n\t /\n\tonChange?: ( newValue: CustomSelectChangeObject< NoInfer< T > > ) => void;\n\t/\n\t A handler for `blur` events on the trigger button.\n\t \n\t @ignore\n\t /\n\tonBlur?: FocusEventHandler< HTMLButtonElement >;\n\t/\n\t A handler for `focus` events on the trigger button.\n\t \n\t @ignore\n\t /\n\tonFocus?: FocusEventHandler< HTMLButtonElement >;\n\t/\n\t A handler for `mouseout` events on the trigger button.\n\t \n\t @ignore\n\t /\n\tonMouseOut?: MouseEventHandler< HTMLButtonElement >;\n\t/\n\t A handler for `mouseover` events on the trigger button.\n\t \n\t @ignore\n\t /\n\tonMouseOver?: MouseEventHandler< HTMLButtonElement >;\n\t/\n\t The list of options that can be chosen from.\n\t /\n\toptions: ReadonlyArray< T >;\n\t/\n\t The size of the control.\n\t \n\t @default 'default'\n\t /\n\tsize?: 'default' \| 'small' \| '__unstable-large';\n\t/\n\t Can be used to externally control the value of the control.\n\t /\n\tvalue?: NoInfer< T >;\n\t/\n\t Use the `showSelectedHint` property instead.\n\t * @deprecated\n\t * @ignore\n\t /\n\t__experimentalShowSelectedHint?: boolean;\n\t/\n\t Show the hint of the selected item in the trigger button.\n\t \n\t @default false\n\t /\n\tshowSelectedHint?: boolean;\n\t/\n\t Opt-in prop for an unconstrained width style which became the default in\n\t * WordPress 6.5. The prop is no longer needed and can be safely removed.\n\t \n\t @deprecated\n\t * @ignore\n\t /\n\t__nextUnconstrainedWidth?: boolean;\n\t/\n\t Start opting into the larger default height that will become the default size in a future version.\n\t \n\t @default false\n\t /\n\t__next40pxDefaultSize?: boolean;\n\t/\n\t Do not throw a warning for the deprecated 36px default size.\n\t * For internal components of other components that already throw the warning.\n\t \n\t @ignore\n\t */\n\t__shouldNotWarnDeprecated36pxSize?: boolean;\n};\n"],"mappings":"","ignoreList":[]}

package/build/drop-zone/index.js CHANGED Viewed

@@ -54,15 +54,19 @@ function DropZoneComponent({
   onFilesDrop,
   onHTMLDrop,
   onDrop,
+  isEligible = () => true,
   ...restProps
 }) {
   const [isDraggingOverDocument, setIsDraggingOverDocument] = (0, _element.useState)();
   const [isDraggingOverElement, setIsDraggingOverElement] = (0, _element.useState)();
-  const [type, setType] = (0, _element.useState)();
+  const [isActive, setIsActive] = (0, _element.useState)();
   const ref = (0, _compose.__experimentalUseDropZone)({
     onDrop(event) {
-      const files = event.dataTransfer ? (0, _dom.getFilesFromDataTransfer)(event.dataTransfer) : [];
-      const html = event.dataTransfer?.getData('text/html');
+      if (!event.dataTransfer) {
+        return;
+      }
+      const files = (0, _dom.getFilesFromDataTransfer)(event.dataTransfer);
+      const html = event.dataTransfer.getData('text/html');
       /**
        * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
@@ -78,26 +82,29 @@ function DropZoneComponent({
     },
     onDragStart(event) {
       setIsDraggingOverDocument(true);
-      let _type = 'default';
+      if (!event.dataTransfer) {
+        return;
+      }
       /**
        * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
        * The order of the checks is important to recognize the HTML drop.
        */
-      if (event.dataTransfer?.types.includes('text/html')) {
-        _type = 'html';
+      if (event.dataTransfer.types.includes('text/html')) {
+        setIsActive(!!onHTMLDrop);
       } else if (
       // Check for the types because sometimes the files themselves
       // are only available on drop.
-      event.dataTransfer?.types.includes('Files') || (event.dataTransfer ? (0, _dom.getFilesFromDataTransfer)(event.dataTransfer) : []).length > 0) {
-        _type = 'file';
+      event.dataTransfer.types.includes('Files') || (0, _dom.getFilesFromDataTransfer)(event.dataTransfer).length > 0) {
+        setIsActive(!!onFilesDrop);
+      } else {
+        setIsActive(!!onDrop && isEligible(event.dataTransfer));
       }
-      setType(_type);
     },
     onDragEnd() {
       setIsDraggingOverElement(false);
       setIsDraggingOverDocument(false);
-      setType(undefined);
+      setIsActive(undefined);
     },
     onDragEnter() {
       setIsDraggingOverElement(true);
@@ -107,10 +114,9 @@ function DropZoneComponent({
     }
   });
   const classes = (0, _clsx.default)('components-drop-zone', className, {
-    'is-active': (isDraggingOverDocument || isDraggingOverElement) && (type === 'file' && onFilesDrop || type === 'html' && onHTMLDrop || type === 'default' && onDrop),
+    'is-active': isActive,
     'is-dragging-over-document': isDraggingOverDocument,
-    'is-dragging-over-element': isDraggingOverElement,
-    [`is-dragging-${type}`]: !!type
+    'is-dragging-over-element': isDraggingOverElement
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ...restProps,

package/build/drop-zone/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_element","_icons","_dom","_compose","_jsxRuntime","DropZoneComponent","className","label","onFilesDrop","onHTMLDrop","onDrop","restProps","isDraggingOverDocument","setIsDraggingOverDocument","useState","isDraggingOverElement","setIsDraggingOverElement","~~type~~","~~setType~~","ref","useDropZone","event","~~files~~","~~dataTransfer~~","getFilesFromDataTransfer","html","getData","length","onDragStart","~~_type","~~types","includes","onDragEnd","undefined","onDragEnter","onDragLeave","classes","clsx","jsx","children","jsxs","Icon","icon","upload","__","_default","exports","default"],"sources":["@wordpress/components/src/drop-zone/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { upload, Icon } from '@wordpress/icons';\nimport { getFilesFromDataTransfer } from '@wordpress/dom';\nimport { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport type { ~~DropType,~~ DropZoneProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/\n `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.\n \n ```jsx\n * import { DropZone } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyDropZone = () => {\n * const [ hasDropped, setHasDropped ] = useState( false );\n \n return (\n * <div>\n * { hasDropped ? 'Dropped!' : 'Drop something here' }\n * <DropZone\n * onFilesDrop={ () => setHasDropped( true ) }\n * onHTMLDrop={ () => setHasDropped( true ) }\n * onDrop={ () => setHasDropped( true ) }\n * />\n * </div>\n * );\n * }\n * ```\n /\nexport function DropZoneComponent( {\n\tclassName,\n\tlabel,\n\tonFilesDrop,\n\tonHTMLDrop,\n\tonDrop,\n\t...restProps\n}: WordPressComponentProps< DropZoneProps, 'div', false > ) {\n\tconst [ isDraggingOverDocument, setIsDraggingOverDocument ] =\n\t\tuseState< boolean >();\n\tconst [ isDraggingOverElement, setIsDraggingOverElement ] =\n\t\tuseState< boolean >();\n\tconst [ ~~type~~, ~~setType~~ ] = useState< ~~DropType~~ >();\n\tconst ref = useDropZone( {\n\t\tonDrop( event ) {\n\t\t\~~tconst~~ ~~files~~ = event.dataTransfer\n\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )~~\n\t\t\t\t: []~~;\n\t\t\tconst html = event.dataTransfer?.getData( 'text/html' );\n\n\t\t\t/\n\t\t\t From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognize the HTML drop.\n\t\t\t /\n\t\t\tif ( html && onHTMLDrop ) {\n\t\t\t\tonHTMLDrop( html );\n\t\t\t} else if ( files.length && onFilesDrop ) {\n\t\t\t\tonFilesDrop( files );\n\t\t\t} else if ( onDrop ) {\n\t\t\t\tonDrop( event );\n\t\t\t}\n\t\t},\n\t\tonDragStart( event ) {\n\t\t\tsetIsDraggingOverDocument( true );\n\n\t\t\~~tlet~~ ~~_type:~~ ~~DropType~~ = ~~'default'~~;\n\n\t\t\t/\n\t\t\t From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognize the HTML drop.\n\t\t\t */\n\t\t\tif ( event.dataTransfer?.types.includes( 'text/html' ) ) {\n\t\t\t\~~t_type~~ = ~~'html'~~;\n\t\t\t} else if (\n\t\t\t\t// Check for the types because sometimes the files themselves\n\t\t\t\t// are only available on drop.\n\t\t\t\tevent.dataTransfer?.types.includes( 'Files' ) \|\|\n\t\t\t\t( event.dataTransfer~~\n\t\t\t\t\t?~~ ~~getFilesFromDataTransfer( event~~.~~dataTransfer~~ )\n\t\t\t~~\t\t:~~ []\n\t\t\t\~~t).length~~ > 0\n\t\t\t) {\n\t\t\t\~~t_type~~ = ~~'file'~~;\n\t\t\t}\n\n\t\t~~\tsetType( _type );\n\t\t~~},\n\t\tonDragEnd() {\n\t\t\tsetIsDraggingOverElement( false );\n\t\t\tsetIsDraggingOverDocument( false );\n\t\t\~~tsetType~~( undefined );\n\t\t},\n\t\tonDragEnter() {\n\t\t\tsetIsDraggingOverElement( true );\n\t\t},\n\t\tonDragLeave() {\n\t\t\tsetIsDraggingOverElement( false );\n\t\t},\n\t} );\n\n\tconst classes = clsx( 'components-drop-zone', className, {\n\t\t'is-active'~~:\n\t\t\t(~~ ~~isDraggingOverDocument \|\| isDraggingOverElement ) &&\n\t\t\t( ( type === 'file' && onFilesDrop ) \|\|\n\t\t\t\t( type === 'html' && onHTMLDrop ) \|\|\n\t\t\t\t( type === 'default' && onDrop ) )~~,\n\t\t'is-dragging-over-document': isDraggingOverDocument,\n\t\t'is-dragging-over-element': isDraggingOverElement,\n\t~~\t[ `is-dragging-${ type~~ }` ~~]: !! type,\n\t}~~ );\n\n\treturn (\n\t\t<div { ...restProps } ref={ ref } className={ classes }>\n\t\t\t<div className=\"components-drop-zone__content\">\n\t\t\t\t<div className=\"components-drop-zone__content-inner\">\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ upload }\n\t\t\t\t\t\tclassName=\"components-drop-zone__content-icon\"\n\t\t\t\t\t/>\n\t\t\t\t\t<span className=\"components-drop-zone__content-text\">\n\t\t\t\t\t\t{ label ? label : __( 'Drop files to upload' ) }\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default DropZoneComponent;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,IAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AAA8E,IAAAM,WAAA,GAAAN,OAAA;AAZ9E;AACA;AACA;;AAGA;AACA;AACA;;AAOA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASO,iBAAiBA,CAAE;EAClCC,SAAS;EACTC,KAAK;EACLC,WAAW;EACXC,UAAU;EACVC,MAAM;~~EACN~~,GAAGC;AACoD,CAAC,EAAG;EAC3D,MAAM,CAAEC,sBAAsB,EAAEC,yBAAyB,CAAE,GAC1D,IAAAC,iBAAQ,EAAY,CAAC;EACtB,MAAM,CAAEC,qBAAqB,EAAEC,wBAAwB,CAAE,GACxD,IAAAF,iBAAQ,EAAY,CAAC;EACtB,MAAM,CAAEG,~~IAAI~~,EAAEC,~~OAAO~~,CAAE,GAAG,IAAAJ,iBAAQ,~~EAAa~~,CAAC;~~EAChD~~,MAAMK,GAAG,GAAG,IAAAC,kCAAW,EAAE;~~IACxBV~~,MAAMA,~~CAAEW~~,KAAK,EAAG;MACf,~~MAAMC~~,~~KAAK~~,~~GAAGD,~~KAAK,~~CAACE~~,YAAY,~~GAC7B~~,IAAAC,6BAAwB,EAAEH,KAAK,~~CAACE~~,YAAa,CAAC~~,GAC9C,EAAE~~;~~MACL~~,~~MAAME~~,IAAI,GAAGJ,KAAK,~~CAACE~~,YAAY,~~EAAEG~~,OAAO,CAAE,WAAY,CAAC;;~~MAEvD~~;AACH;AACA;AACA;MACG,IAAKD,IAAI,~~IAAIhB~~,UAAU,EAAG;QACzBA,UAAU,~~CAAEgB~~,IAAK,CAAC;MACnB,CAAC,MAAM,~~IAAKH~~,KAAK,~~CAACK~~,MAAM,~~IAAInB~~,WAAW,EAAG;QACzCA,WAAW,~~CAAEc~~,KAAM,CAAC;MACrB,CAAC,MAAM,~~IAAKZ~~,MAAM,EAAG;QACpBA,MAAM,~~CAAEW~~,KAAM,CAAC;MAChB;IACD,CAAC;IACDO,WAAWA,CAAEP,KAAK,EAAG;MACpBR,yBAAyB,CAAE,IAAK,CAAC;MAEjC,~~IAAIgB~~,~~KAAe~~,~~GAAG~~,~~SAAS~~;;~~MAE/B~~;AACH;AACA;AACA;MACG,~~IAAKR~~,KAAK,~~CAACE~~,YAAY,~~EAAEO~~,KAAK,CAACC,QAAQ,CAAE,WAAY,CAAC,EAAG;~~QACxDF~~,~~KAAK~~,~~GAAG~~,~~MAAM~~;~~MACf~~,CAAC,MAAM;MACN;MACA;~~MACAR~~,KAAK,~~CAACE~~,YAAY,~~EAAEO~~,KAAK,CAACC,QAAQ,CAAE,OAAQ,CAAC,~~IAC7C~~,~~CAAEV~~,~~KAAK,CAACE,YAAY,GACjB,IAAAC,~~6BAAwB,EAAEH,KAAK,~~CAACE~~,YAAa,CAAC,~~GAC9C~~,~~EAAE,EACHI,~~MAAM,GAAG,CAAC,~~EACX~~;~~QACDE~~,~~KAAK~~,~~GAAG~~,MAAM;~~MACf;MAEAX~~,~~OAAO~~,CAAEW,~~KAAM~~,CAAC;~~IACjB~~,CAAC;~~IACDG~~,SAASA,CAAA,EAAG;~~MACXhB~~,wBAAwB,CAAE,KAAM,CAAC;MACjCH,yBAAyB,CAAE,KAAM,CAAC;MAClCK,~~OAAO~~,~~CAAEe~~,SAAU,CAAC;~~IACrB~~,CAAC;IACDC,WAAWA,CAAA,EAAG;~~MACblB~~,wBAAwB,CAAE,IAAK,CAAC;IACjC,CAAC;~~IACDmB~~,WAAWA,CAAA,EAAG;~~MACbnB~~,wBAAwB,CAAE,KAAM,CAAC;IAClC;EACD,CAAE,CAAC;EAEH,~~MAAMoB~~,OAAO,GAAG,IAAAC,aAAI,EAAE,sBAAsB,EAAE/B,SAAS,EAAE;IACxD,WAAW,~~EACV~~,~~CAAEM,sBAAsB,IAAIG,qBAAqB,MAC7CE,IAAI,KAAK,MAAM,IAAIT,WAAW,IAC/BS,IAAI,KAAK,MAAM,IAAIR,UAAY,IAC/BQ,IAAI,KAAK,SAAS,IAAIP,MAAQ,CAAE~~;~~IACpC~~,2BAA2B,~~EAAEE~~,sBAAsB;IACnD,0BAA0B,EAAEG~~,qBAAqB~~;~~IACjD~~,CAAE,~~eAAgBE,IAAI,EAAG,GAAI,~~CAAC~~,CAAEA~~;~~EACjC,CAAE,CAAC;~~EAEH,oBACC,~~IAAAb~~,WAAA,CAAAkC,GAAA;IAAA,~~GAAU3B~~,SAAS;IAAGQ,GAAG,EAAGA,GAAK;~~IAACb~~,SAAS,EAAG8B,OAAS;IAAAG,QAAA,eACtD,IAAAnC,WAAA,CAAAkC,GAAA;MAAKhC,SAAS,EAAC,+BAA+B;MAAAiC,QAAA,eAC7C,IAAAnC,WAAA,CAAAoC,IAAA;QAAKlC,SAAS,EAAC,qCAAqC;QAAAiC,QAAA,gBACnD,IAAAnC,WAAA,CAAAkC,GAAA,EAACrC,MAAA,CAAAwC,IAAI;UACJC,IAAI,EAAGC,aAAQ;UACfrC,SAAS,EAAC;QAAoC,CAC9C,CAAC,eACF,IAAAF,WAAA,CAAAkC,GAAA;UAAMhC,SAAS,EAAC,oCAAoC;UAAAiC,QAAA,EACjDhC,KAAK,GAAGA,KAAK,GAAG,IAAAqC,QAAE,EAAE,sBAAuB;QAAC,CACzC,CAAC;MAAA,CACH;IAAC,CACF;EAAC,CACF,CAAC;AAER;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc1C,iBAAiB","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_element","_icons","_dom","_compose","_jsxRuntime","DropZoneComponent","className","label","onFilesDrop","onHTMLDrop","onDrop","isEligible","restProps","isDraggingOverDocument","setIsDraggingOverDocument","useState","isDraggingOverElement","setIsDraggingOverElement","isActive","setIsActive","ref","useDropZone","event","dataTransfer","files","getFilesFromDataTransfer","html","getData","length","onDragStart","types","includes","onDragEnd","undefined","onDragEnter","onDragLeave","classes","clsx","jsx","children","jsxs","Icon","icon","upload","__","_default","exports","default"],"sources":["@wordpress/components/src/drop-zone/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { upload, Icon } from '@wordpress/icons';\nimport { getFilesFromDataTransfer } from '@wordpress/dom';\nimport { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport type { DropZoneProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/\n `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.\n \n ```jsx\n * import { DropZone } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const MyDropZone = () => {\n * const [ hasDropped, setHasDropped ] = useState( false );\n \n return (\n * <div>\n * { hasDropped ? 'Dropped!' : 'Drop something here' }\n * <DropZone\n * onFilesDrop={ () => setHasDropped( true ) }\n * onHTMLDrop={ () => setHasDropped( true ) }\n * onDrop={ () => setHasDropped( true ) }\n * />\n * </div>\n * );\n * }\n * ```\n /\nexport function DropZoneComponent( {\n\tclassName,\n\tlabel,\n\tonFilesDrop,\n\tonHTMLDrop,\n\tonDrop,\n\tisEligible = () => true,\n\t...restProps\n}: WordPressComponentProps< DropZoneProps, 'div', false > ) {\n\tconst [ isDraggingOverDocument, setIsDraggingOverDocument ] =\n\t\tuseState< boolean >();\n\tconst [ isDraggingOverElement, setIsDraggingOverElement ] =\n\t\tuseState< boolean >();\n\tconst [ isActive, setIsActive ] = useState< boolean >();\n\tconst ref = useDropZone( {\n\t\tonDrop( event ) {\n\t\t\tif ( ! event.dataTransfer ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst files = getFilesFromDataTransfer( event.dataTransfer );\n\t\t\tconst html = event.dataTransfer.getData( 'text/html' );\n\n\t\t\t/\n\t\t\t From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognize the HTML drop.\n\t\t\t /\n\t\t\tif ( html && onHTMLDrop ) {\n\t\t\t\tonHTMLDrop( html );\n\t\t\t} else if ( files.length && onFilesDrop ) {\n\t\t\t\tonFilesDrop( files );\n\t\t\t} else if ( onDrop ) {\n\t\t\t\tonDrop( event );\n\t\t\t}\n\t\t},\n\t\tonDragStart( event ) {\n\t\t\tsetIsDraggingOverDocument( true );\n\n\t\t\tif ( ! event.dataTransfer ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t/\n\t\t\t From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognize the HTML drop.\n\t\t\t */\n\t\t\tif ( event.dataTransfer.types.includes( 'text/html' ) ) {\n\t\t\t\tsetIsActive( !! onHTMLDrop );\n\t\t\t} else if (\n\t\t\t\t// Check for the types because sometimes the files themselves\n\t\t\t\t// are only available on drop.\n\t\t\t\tevent.dataTransfer.types.includes( 'Files' ) \|\|\n\t\t\t\tgetFilesFromDataTransfer( event.dataTransfer ).length > 0\n\t\t\t) {\n\t\t\t\tsetIsActive( !! onFilesDrop );\n\t\t\t} else {\n\t\t\t\tsetIsActive( !! onDrop && isEligible( event.dataTransfer ) );\n\t\t\t}\n\t\t},\n\t\tonDragEnd() {\n\t\t\tsetIsDraggingOverElement( false );\n\t\t\tsetIsDraggingOverDocument( false );\n\t\t\tsetIsActive( undefined );\n\t\t},\n\t\tonDragEnter() {\n\t\t\tsetIsDraggingOverElement( true );\n\t\t},\n\t\tonDragLeave() {\n\t\t\tsetIsDraggingOverElement( false );\n\t\t},\n\t} );\n\n\tconst classes = clsx( 'components-drop-zone', className, {\n\t\t'is-active': isActive,\n\t\t'is-dragging-over-document': isDraggingOverDocument,\n\t\t'is-dragging-over-element': isDraggingOverElement,\n\t} );\n\n\treturn (\n\t\t<div { ...restProps } ref={ ref } className={ classes }>\n\t\t\t<div className=\"components-drop-zone__content\">\n\t\t\t\t<div className=\"components-drop-zone__content-inner\">\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ upload }\n\t\t\t\t\t\tclassName=\"components-drop-zone__content-icon\"\n\t\t\t\t\t/>\n\t\t\t\t\t<span className=\"components-drop-zone__content-text\">\n\t\t\t\t\t\t{ label ? label : __( 'Drop files to upload' ) }\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default DropZoneComponent;\n"],"mappings":"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","ignoreList":[]}

package/build/drop-zone/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/drop-zone/types.ts"],"sourcesContent":["export type DropType = 'file' \| 'html' \| 'default';\n\nexport type DropZoneProps = {\n\t/*\n\t A CSS `class` to give to the wrapper element.\n\t /\n\tclassName?: string;\n\t/\n\t A string to be shown within the drop zone area.\n\t \n\t @default `__( 'Drop files to upload' )`\n\t /\n\tlabel?: string;\n\t/\n\t The function is generic drop handler called if the `onFilesDrop` or `onHTMLDrop` are not called.\n\t * It receives the drop `event` object as an argument.\n\t /\n\tonDrop?: ( event: DragEvent ) => void;\n\t/\n\t The function is called when dropping a file into the `DropZone`.\n\t * It receives an array of dropped files as an argument.\n\t /\n\tonFilesDrop?: ( files: File[] ) => void;\n\t/\n\t The function is called when dropping HTML into the `DropZone`.\n\t * It receives the HTML being dropped as an argument.\n\t */\n\tonHTMLDrop?: ( html: string ) => void;\n};\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/drop-zone/types.ts"],"sourcesContent":["export type DropType = 'file' \| 'html' \| 'default';\n\nexport type DropZoneProps = {\n\t/*\n\t A CSS `class` to give to the wrapper element.\n\t /\n\tclassName?: string;\n\t/\n\t A string to be shown within the drop zone area.\n\t \n\t @default `__( 'Drop files to upload' )`\n\t /\n\tlabel?: string;\n\t/\n\t The function is generic drop handler called if the `onFilesDrop` or `onHTMLDrop` are not called.\n\t * It receives the drop `event` object as an argument.\n\t /\n\tonDrop?: ( event: DragEvent ) => void;\n\t/\n\t The function is called when dropping a file into the `DropZone`.\n\t * It receives an array of dropped files as an argument.\n\t /\n\tonFilesDrop?: ( files: File[] ) => void;\n\t/\n\t The function is called when dropping HTML into the `DropZone`.\n\t * It receives the HTML being dropped as an argument.\n\t /\n\tonHTMLDrop?: ( html: string ) => void;\n\t/\n\t A function to determine if the drop zone is eligible to handle the drop\n\t * data transfer items.\n\t */\n\tisEligible?: ( dataTransfer: DataTransfer ) => boolean;\n};\n"],"mappings":"","ignoreList":[]}

package/build/dropdown-menu/index.js CHANGED Viewed

@@ -136,6 +136,7 @@ function UnconnectedDropdownMenu(dropdownMenuProps) {
         ...mergedMenuProps,
         role: "menu",
         children: [isFunction(children) ? children(props) : null, controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+          __next40pxDefaultSize: true,
           onClick: event => {
             event.stopPropagation();
             props.onClose();