@wordpress/components 27.2.0 → 27.3.0

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 ## Unreleased
 
+## 27.3.0 (2024-04-03)
+
+### Bug Fix
+
+-   `Dropdown`: Fix bug with separator styling. ([#60336](https://github.com/WordPress/gutenberg/pull/60336)).
+-   `InputControl`: Ignore IME events when `isPressEnterToChange` is enabled ([#60090](https://github.com/WordPress/gutenberg/pull/60090)).
+-   `TextControl`: Apply zero margin to input element ([#60282](https://github.com/WordPress/gutenberg/pull/60282)).
+
+### Experimental
+
+-   `CustomSelectControlV2`: Rename for consistency ([#60178](https://github.com/WordPress/gutenberg/pull/60178)).
+
+### Internal
+
+-   `Popover`, `ColorPicker`: Obviate pointer event trap #59449 ([#59449](https://github.com/WordPress/gutenberg/pull/59449)).
+-   `Popover`, `ToggleGroupControl`: Use `useReducedMotion()` ([#60168](https://github.com/WordPress/gutenberg/pull/60168)).
+-   `NavigatorProvider`: Simplify the router state logic ([#60190](https://github.com/WordPress/gutenberg/pull/60190)).
+-   Update `date-fns` to version `3.6.0` ([#60163](https://github.com/WordPress/gutenberg/pull/60163)).
+-   Update `use-lilius` to version `2.0.5` ([#60163](https://github.com/WordPress/gutenberg/pull/60163)).
+
+### Experimental
+
+-   `CustomSelectControlV2`: Fix hint behavior in legacy ([#60183](https://github.com/WordPress/gutenberg/pull/60183)).
+
 ## 27.2.0 (2024-03-21)
 
 -   `Dropdown` : Add styling support for `MenuGroup` ([#59723](https://github.com/WordPress/gutenberg/pull/59723)).

package/README.md

@@ -57,6 +57,19 @@ const Example = () => {
 };
 ```
 
+### TypeScript
+
+This package exposes its own types for the components it exports, however it doesn't export its own types for component props. If you need to extract the props type, please use `React.ComponentProps` to get the types from the element.
+
+```tsx
+import type { ComponentProps } from 'react';
+import { Button } from '@wordpress/components';
+
+export default function MyButton( props: ComponentProps< typeof Button > ) {
+	return <Button { ...props }>Click Me!</Button>;
+}
+```
+
 ## Docs & examples
 
 You can browse the components docs and examples at [https://wordpress.github.io/gutenberg/](https://wordpress.github.io/gutenberg/)

package/build/button/index.js

@@ -44,7 +44,7 @@ function useDeprecatedProps({
   let computedSize = size;
   let computedVariant = variant;
   const newProps = {
-    // @TODO Mark `isPressed` as deprecated
+    // @todo Mark `isPressed` as deprecated
     'aria-pressed': isPressed
   };
   if (isSmall) {

package/build/button/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_deprecated","_element","_compose","_tooltip","_icon","_visuallyHidden","_utils","disabledEventsOnDisabledButton","useDeprecatedProps","isDefault","isPrimary","isSecondary","isTertiary","isLink","isPressed","isSmall","size","variant","otherProps","computedSize","computedVariant","newProps","_computedSize","_computedVariant","_computedVariant2","_computedVariant3","_computedVariant4","deprecated","since","alternative","_computedVariant5","UnforwardedButton","props","ref","__next40pxDefaultSize","isBusy","isDestructive","className","disabled","icon","iconPosition","iconSize","showTooltip","tooltipPosition","shortcut","label","children","text","__experimentalIsFocusable","isFocusable","describedBy","buttonOrAnchorProps","href","target","ariaChecked","ariaPressed","ariaSelected","additionalProps","undefined","instanceId","useInstanceId","Button","hasChildren","Array","isArray","truthyAriaPressedValues","classes","classnames","includes","trulyDisabled","Tag","buttonProps","type","anchorProps","disabledEvent","event","stopPropagation","preventDefault","shouldShowTooltip","length","descriptionId","describedById","commonProps","elementChildren","_react","createElement","Fragment","default","element","tooltipProps","placement","positionToPlacement","VisuallyHidden","id","exports","forwardRef","_default"],"sources":["@wordpress/components/src/button/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type {\n\tComponentPropsWithoutRef,\n\tForwardedRef,\n\tHTMLAttributes,\n\tMouseEvent,\n\tReactElement,\n} from 'react';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport Icon from '../icon';\nimport { VisuallyHidden } from '../visually-hidden';\nimport type { ButtonProps, DeprecatedButtonProps } from './types';\nimport { positionToPlacement } from '../popover/utils';\n\nconst disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ] as const;\n\nfunction useDeprecatedProps( {\n\tisDefault,\n\tisPrimary,\n\tisSecondary,\n\tisTertiary,\n\tisLink,\n\tisPressed,\n\tisSmall,\n\tsize,\n\tvariant,\n\t...otherProps\n}: ButtonProps & DeprecatedButtonProps ): ButtonProps {\n\tlet computedSize = size;\n\tlet computedVariant = variant;\n\n\tconst newProps: { 'aria-pressed'?: boolean } = {\n\t\t// @TODO Mark `isPressed` as deprecated\n\t\t'aria-pressed': isPressed,\n\t};\n\n\tif ( isSmall ) {\n\t\tcomputedSize ??= 'small';\n\t}\n\n\tif ( isPrimary ) {\n\t\tcomputedVariant ??= 'primary';\n\t}\n\n\tif ( isTertiary ) {\n\t\tcomputedVariant ??= 'tertiary';\n\t}\n\n\tif ( isSecondary ) {\n\t\tcomputedVariant ??= 'secondary';\n\t}\n\n\tif ( isDefault ) {\n\t\tdeprecated( 'wp.components.Button `isDefault` prop', {\n\t\t\tsince: '5.4',\n\t\t\talternative: 'variant=\"secondary\"',\n\t\t} );\n\n\t\tcomputedVariant ??= 'secondary';\n\t}\n\n\tif ( isLink ) {\n\t\tcomputedVariant ??= 'link';\n\t}\n\n\treturn {\n\t\t...newProps,\n\t\t...otherProps,\n\t\tsize: computedSize,\n\t\tvariant: computedVariant,\n\t};\n}\n\nexport function UnforwardedButton(\n\tprops: ButtonProps & DeprecatedButtonProps,\n\tref: ForwardedRef< any >\n) {\n\tconst {\n\t\t__next40pxDefaultSize,\n\t\tisBusy,\n\t\tisDestructive,\n\t\tclassName,\n\t\tdisabled,\n\t\ticon,\n\t\ticonPosition = 'left',\n\t\ticonSize,\n\t\tshowTooltip,\n\t\ttooltipPosition,\n\t\tshortcut,\n\t\tlabel,\n\t\tchildren,\n\t\tsize = 'default',\n\t\ttext,\n\t\tvariant,\n\t\t__experimentalIsFocusable: isFocusable,\n\t\tdescribedBy,\n\t\t...buttonOrAnchorProps\n\t} = useDeprecatedProps( props );\n\n\tconst {\n\t\thref,\n\t\ttarget,\n\t\t'aria-checked': ariaChecked,\n\t\t'aria-pressed': ariaPressed,\n\t\t'aria-selected': ariaSelected,\n\t\t...additionalProps\n\t} = 'href' in buttonOrAnchorProps\n\t\t? buttonOrAnchorProps\n\t\t: { href: undefined, target: undefined, ...buttonOrAnchorProps };\n\n\tconst instanceId = useInstanceId(\n\t\tButton,\n\t\t'components-button__description'\n\t);\n\n\tconst hasChildren =\n\t\t( 'string' === typeof children && !! children ) ||\n\t\t( Array.isArray( children ) &&\n\t\t\tchildren?.[ 0 ] &&\n\t\t\tchildren[ 0 ] !== null &&\n\t\t\t// Tooltip should not considered as a child\n\t\t\tchildren?.[ 0 ]?.props?.className !== 'components-tooltip' );\n\n\tconst truthyAriaPressedValues: ( typeof ariaPressed )[] = [\n\t\ttrue,\n\t\t'true',\n\t\t'mixed',\n\t];\n\n\tconst classes = classnames( 'components-button', className, {\n\t\t'is-next-40px-default-size': __next40pxDefaultSize,\n\t\t'is-secondary': variant === 'secondary',\n\t\t'is-primary': variant === 'primary',\n\t\t'is-small': size === 'small',\n\t\t'is-compact': size === 'compact',\n\t\t'is-tertiary': variant === 'tertiary',\n\n\t\t'is-pressed': truthyAriaPressedValues.includes( ariaPressed ),\n\t\t'is-pressed-mixed': ariaPressed === 'mixed',\n\n\t\t'is-busy': isBusy,\n\t\t'is-link': variant === 'link',\n\t\t'is-destructive': isDestructive,\n\t\t'has-text': !! icon && ( hasChildren || text ),\n\t\t'has-icon': !! icon,\n\t} );\n\n\tconst trulyDisabled = disabled && ! isFocusable;\n\tconst Tag = href !== undefined && ! trulyDisabled ? 'a' : 'button';\n\tconst buttonProps: ComponentPropsWithoutRef< 'button' > =\n\t\tTag === 'button'\n\t\t\t? {\n\t\t\t\t\ttype: 'button',\n\t\t\t\t\tdisabled: trulyDisabled,\n\t\t\t\t\t'aria-checked': ariaChecked,\n\t\t\t\t\t'aria-pressed': ariaPressed,\n\t\t\t\t\t'aria-selected': ariaSelected,\n\t\t\t  }\n\t\t\t: {};\n\tconst anchorProps: ComponentPropsWithoutRef< 'a' > =\n\t\tTag === 'a' ? { href, target } : {};\n\n\tif ( disabled && isFocusable ) {\n\t\t// In this case, the button will be disabled, but still focusable and\n\t\t// perceivable by screen reader users.\n\t\tbuttonProps[ 'aria-disabled' ] = true;\n\t\tanchorProps[ 'aria-disabled' ] = true;\n\n\t\tfor ( const disabledEvent of disabledEventsOnDisabledButton ) {\n\t\t\tadditionalProps[ disabledEvent ] = ( event: MouseEvent ) => {\n\t\t\t\tif ( event ) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t}\n\n\t// Should show the tooltip if...\n\tconst shouldShowTooltip =\n\t\t! trulyDisabled &&\n\t\t// An explicit tooltip is passed or...\n\t\t( ( showTooltip && !! label ) ||\n\t\t\t// There's a shortcut or...\n\t\t\t!! shortcut ||\n\t\t\t// There's a label and...\n\t\t\t( !! label &&\n\t\t\t\t// The children are empty and...\n\t\t\t\t! ( children as string | ReactElement[] )?.length &&\n\t\t\t\t// The tooltip is not explicitly disabled.\n\t\t\t\tfalse !== showTooltip ) );\n\n\tconst descriptionId = describedBy ? instanceId : undefined;\n\n\tconst describedById =\n\t\tadditionalProps[ 'aria-describedby' ] || descriptionId;\n\n\tconst commonProps = {\n\t\tclassName: classes,\n\t\t'aria-label': additionalProps[ 'aria-label' ] || label,\n\t\t'aria-describedby': describedById,\n\t\tref,\n\t};\n\n\tconst elementChildren = (\n\t\t<>\n\t\t\t{ icon && iconPosition === 'left' && (\n\t\t\t\t<Icon icon={ icon } size={ iconSize } />\n\t\t\t) }\n\t\t\t{ text && <>{ text }</> }\n\t\t\t{ children }\n\t\t\t{ icon && iconPosition === 'right' && (\n\t\t\t\t<Icon icon={ icon } size={ iconSize } />\n\t\t\t) }\n\t\t</>\n\t);\n\n\tconst element =\n\t\tTag === 'a' ? (\n\t\t\t<a\n\t\t\t\t{ ...anchorProps }\n\t\t\t\t{ ...( additionalProps as HTMLAttributes< HTMLAnchorElement > ) }\n\t\t\t\t{ ...commonProps }\n\t\t\t>\n\t\t\t\t{ elementChildren }\n\t\t\t</a>\n\t\t) : (\n\t\t\t<button\n\t\t\t\t{ ...buttonProps }\n\t\t\t\t{ ...( additionalProps as HTMLAttributes< HTMLButtonElement > ) }\n\t\t\t\t{ ...commonProps }\n\t\t\t>\n\t\t\t\t{ elementChildren }\n\t\t\t</button>\n\t\t);\n\n\t// In order to avoid some React reconciliation issues, we are always rendering\n\t// the `Tooltip` component even when `shouldShowTooltip` is `false`.\n\t// In order to make sure that the tooltip doesn't show when it shouldn't,\n\t// we don't pass the props to the `Tooltip` component.\n\tconst tooltipProps = shouldShowTooltip\n\t\t? {\n\t\t\t\ttext:\n\t\t\t\t\t( children as string | ReactElement[] )?.length &&\n\t\t\t\t\tdescribedBy\n\t\t\t\t\t\t? describedBy\n\t\t\t\t\t\t: label,\n\t\t\t\tshortcut,\n\t\t\t\tplacement:\n\t\t\t\t\ttooltipPosition &&\n\t\t\t\t\t// Convert legacy `position` values to be used with the new `placement` prop\n\t\t\t\t\tpositionToPlacement( tooltipPosition ),\n\t\t  }\n\t\t: {};\n\n\treturn (\n\t\t<>\n\t\t\t<Tooltip { ...tooltipProps }>{ element }</Tooltip>\n\t\t\t{ describedBy && (\n\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t<span id={ descriptionId }>{ describedBy }</span>\n\t\t\t\t</VisuallyHidden>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\n/**\n * Lets users take actions and make choices with a single click or tap.\n *\n * ```jsx\n * import { Button } from '@wordpress/components';\n * const Mybutton = () => (\n *   <Button\n *     variant=\"primary\"\n *     onClick={ handleClick }\n *   >\n *     Click here\n *   </Button>\n * );\n * ```\n */\nexport const Button = forwardRef( UnforwardedButton );\nexport default Button;\n"],"mappings":"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"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_deprecated","_element","_compose","_tooltip","_icon","_visuallyHidden","_utils","disabledEventsOnDisabledButton","useDeprecatedProps","isDefault","isPrimary","isSecondary","isTertiary","isLink","isPressed","isSmall","size","variant","otherProps","computedSize","computedVariant","newProps","_computedSize","_computedVariant","_computedVariant2","_computedVariant3","_computedVariant4","deprecated","since","alternative","_computedVariant5","UnforwardedButton","props","ref","__next40pxDefaultSize","isBusy","isDestructive","className","disabled","icon","iconPosition","iconSize","showTooltip","tooltipPosition","shortcut","label","children","text","__experimentalIsFocusable","isFocusable","describedBy","buttonOrAnchorProps","href","target","ariaChecked","ariaPressed","ariaSelected","additionalProps","undefined","instanceId","useInstanceId","Button","hasChildren","Array","isArray","truthyAriaPressedValues","classes","classnames","includes","trulyDisabled","Tag","buttonProps","type","anchorProps","disabledEvent","event","stopPropagation","preventDefault","shouldShowTooltip","length","descriptionId","describedById","commonProps","elementChildren","_react","createElement","Fragment","default","element","tooltipProps","placement","positionToPlacement","VisuallyHidden","id","exports","forwardRef","_default"],"sources":["@wordpress/components/src/button/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type {\n\tComponentPropsWithoutRef,\n\tForwardedRef,\n\tHTMLAttributes,\n\tMouseEvent,\n\tReactElement,\n} from 'react';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport Icon from '../icon';\nimport { VisuallyHidden } from '../visually-hidden';\nimport type { ButtonProps, DeprecatedButtonProps } from './types';\nimport { positionToPlacement } from '../popover/utils';\n\nconst disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ] as const;\n\nfunction useDeprecatedProps( {\n\tisDefault,\n\tisPrimary,\n\tisSecondary,\n\tisTertiary,\n\tisLink,\n\tisPressed,\n\tisSmall,\n\tsize,\n\tvariant,\n\t...otherProps\n}: ButtonProps & DeprecatedButtonProps ): ButtonProps {\n\tlet computedSize = size;\n\tlet computedVariant = variant;\n\n\tconst newProps: { 'aria-pressed'?: boolean } = {\n\t\t// @todo Mark `isPressed` as deprecated\n\t\t'aria-pressed': isPressed,\n\t};\n\n\tif ( isSmall ) {\n\t\tcomputedSize ??= 'small';\n\t}\n\n\tif ( isPrimary ) {\n\t\tcomputedVariant ??= 'primary';\n\t}\n\n\tif ( isTertiary ) {\n\t\tcomputedVariant ??= 'tertiary';\n\t}\n\n\tif ( isSecondary ) {\n\t\tcomputedVariant ??= 'secondary';\n\t}\n\n\tif ( isDefault ) {\n\t\tdeprecated( 'wp.components.Button `isDefault` prop', {\n\t\t\tsince: '5.4',\n\t\t\talternative: 'variant=\"secondary\"',\n\t\t} );\n\n\t\tcomputedVariant ??= 'secondary';\n\t}\n\n\tif ( isLink ) {\n\t\tcomputedVariant ??= 'link';\n\t}\n\n\treturn {\n\t\t...newProps,\n\t\t...otherProps,\n\t\tsize: computedSize,\n\t\tvariant: computedVariant,\n\t};\n}\n\nexport function UnforwardedButton(\n\tprops: ButtonProps & DeprecatedButtonProps,\n\tref: ForwardedRef< any >\n) {\n\tconst {\n\t\t__next40pxDefaultSize,\n\t\tisBusy,\n\t\tisDestructive,\n\t\tclassName,\n\t\tdisabled,\n\t\ticon,\n\t\ticonPosition = 'left',\n\t\ticonSize,\n\t\tshowTooltip,\n\t\ttooltipPosition,\n\t\tshortcut,\n\t\tlabel,\n\t\tchildren,\n\t\tsize = 'default',\n\t\ttext,\n\t\tvariant,\n\t\t__experimentalIsFocusable: isFocusable,\n\t\tdescribedBy,\n\t\t...buttonOrAnchorProps\n\t} = useDeprecatedProps( props );\n\n\tconst {\n\t\thref,\n\t\ttarget,\n\t\t'aria-checked': ariaChecked,\n\t\t'aria-pressed': ariaPressed,\n\t\t'aria-selected': ariaSelected,\n\t\t...additionalProps\n\t} = 'href' in buttonOrAnchorProps\n\t\t? buttonOrAnchorProps\n\t\t: { href: undefined, target: undefined, ...buttonOrAnchorProps };\n\n\tconst instanceId = useInstanceId(\n\t\tButton,\n\t\t'components-button__description'\n\t);\n\n\tconst hasChildren =\n\t\t( 'string' === typeof children && !! children ) ||\n\t\t( Array.isArray( children ) &&\n\t\t\tchildren?.[ 0 ] &&\n\t\t\tchildren[ 0 ] !== null &&\n\t\t\t// Tooltip should not considered as a child\n\t\t\tchildren?.[ 0 ]?.props?.className !== 'components-tooltip' );\n\n\tconst truthyAriaPressedValues: ( typeof ariaPressed )[] = [\n\t\ttrue,\n\t\t'true',\n\t\t'mixed',\n\t];\n\n\tconst classes = classnames( 'components-button', className, {\n\t\t'is-next-40px-default-size': __next40pxDefaultSize,\n\t\t'is-secondary': variant === 'secondary',\n\t\t'is-primary': variant === 'primary',\n\t\t'is-small': size === 'small',\n\t\t'is-compact': size === 'compact',\n\t\t'is-tertiary': variant === 'tertiary',\n\n\t\t'is-pressed': truthyAriaPressedValues.includes( ariaPressed ),\n\t\t'is-pressed-mixed': ariaPressed === 'mixed',\n\n\t\t'is-busy': isBusy,\n\t\t'is-link': variant === 'link',\n\t\t'is-destructive': isDestructive,\n\t\t'has-text': !! icon && ( hasChildren || text ),\n\t\t'has-icon': !! icon,\n\t} );\n\n\tconst trulyDisabled = disabled && ! isFocusable;\n\tconst Tag = href !== undefined && ! trulyDisabled ? 'a' : 'button';\n\tconst buttonProps: ComponentPropsWithoutRef< 'button' > =\n\t\tTag === 'button'\n\t\t\t? {\n\t\t\t\t\ttype: 'button',\n\t\t\t\t\tdisabled: trulyDisabled,\n\t\t\t\t\t'aria-checked': ariaChecked,\n\t\t\t\t\t'aria-pressed': ariaPressed,\n\t\t\t\t\t'aria-selected': ariaSelected,\n\t\t\t  }\n\t\t\t: {};\n\tconst anchorProps: ComponentPropsWithoutRef< 'a' > =\n\t\tTag === 'a' ? { href, target } : {};\n\n\tif ( disabled && isFocusable ) {\n\t\t// In this case, the button will be disabled, but still focusable and\n\t\t// perceivable by screen reader users.\n\t\tbuttonProps[ 'aria-disabled' ] = true;\n\t\tanchorProps[ 'aria-disabled' ] = true;\n\n\t\tfor ( const disabledEvent of disabledEventsOnDisabledButton ) {\n\t\t\tadditionalProps[ disabledEvent ] = ( event: MouseEvent ) => {\n\t\t\t\tif ( event ) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t}\n\n\t// Should show the tooltip if...\n\tconst shouldShowTooltip =\n\t\t! trulyDisabled &&\n\t\t// An explicit tooltip is passed or...\n\t\t( ( showTooltip && !! label ) ||\n\t\t\t// There's a shortcut or...\n\t\t\t!! shortcut ||\n\t\t\t// There's a label and...\n\t\t\t( !! label &&\n\t\t\t\t// The children are empty and...\n\t\t\t\t! ( children as string | ReactElement[] )?.length &&\n\t\t\t\t// The tooltip is not explicitly disabled.\n\t\t\t\tfalse !== showTooltip ) );\n\n\tconst descriptionId = describedBy ? instanceId : undefined;\n\n\tconst describedById =\n\t\tadditionalProps[ 'aria-describedby' ] || descriptionId;\n\n\tconst commonProps = {\n\t\tclassName: classes,\n\t\t'aria-label': additionalProps[ 'aria-label' ] || label,\n\t\t'aria-describedby': describedById,\n\t\tref,\n\t};\n\n\tconst elementChildren = (\n\t\t<>\n\t\t\t{ icon && iconPosition === 'left' && (\n\t\t\t\t<Icon icon={ icon } size={ iconSize } />\n\t\t\t) }\n\t\t\t{ text && <>{ text }</> }\n\t\t\t{ children }\n\t\t\t{ icon && iconPosition === 'right' && (\n\t\t\t\t<Icon icon={ icon } size={ iconSize } />\n\t\t\t) }\n\t\t</>\n\t);\n\n\tconst element =\n\t\tTag === 'a' ? (\n\t\t\t<a\n\t\t\t\t{ ...anchorProps }\n\t\t\t\t{ ...( additionalProps as HTMLAttributes< HTMLAnchorElement > ) }\n\t\t\t\t{ ...commonProps }\n\t\t\t>\n\t\t\t\t{ elementChildren }\n\t\t\t</a>\n\t\t) : (\n\t\t\t<button\n\t\t\t\t{ ...buttonProps }\n\t\t\t\t{ ...( additionalProps as HTMLAttributes< HTMLButtonElement > ) }\n\t\t\t\t{ ...commonProps }\n\t\t\t>\n\t\t\t\t{ elementChildren }\n\t\t\t</button>\n\t\t);\n\n\t// In order to avoid some React reconciliation issues, we are always rendering\n\t// the `Tooltip` component even when `shouldShowTooltip` is `false`.\n\t// In order to make sure that the tooltip doesn't show when it shouldn't,\n\t// we don't pass the props to the `Tooltip` component.\n\tconst tooltipProps = shouldShowTooltip\n\t\t? {\n\t\t\t\ttext:\n\t\t\t\t\t( children as string | ReactElement[] )?.length &&\n\t\t\t\t\tdescribedBy\n\t\t\t\t\t\t? describedBy\n\t\t\t\t\t\t: label,\n\t\t\t\tshortcut,\n\t\t\t\tplacement:\n\t\t\t\t\ttooltipPosition &&\n\t\t\t\t\t// Convert legacy `position` values to be used with the new `placement` prop\n\t\t\t\t\tpositionToPlacement( tooltipPosition ),\n\t\t  }\n\t\t: {};\n\n\treturn (\n\t\t<>\n\t\t\t<Tooltip { ...tooltipProps }>{ element }</Tooltip>\n\t\t\t{ describedBy && (\n\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t<span id={ descriptionId }>{ describedBy }</span>\n\t\t\t\t</VisuallyHidden>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\n/**\n * Lets users take actions and make choices with a single click or tap.\n *\n * ```jsx\n * import { Button } from '@wordpress/components';\n * const Mybutton = () => (\n *   <Button\n *     variant=\"primary\"\n *     onClick={ handleClick }\n *   >\n *     Click here\n *   </Button>\n * );\n * ```\n */\nexport const Button = forwardRef( UnforwardedButton );\nexport default Button;\n"],"mappings":"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"}

package/build/color-picker/component.js

@@ -54,15 +54,8 @@ const UnconnectedColorPicker = (props, forwardedRef) => {
     onChange,
     defaultValue = '#fff',
     copyFormat,
-    // Context
-    onPickerDragStart,
-    onPickerDragEnd,
     ...divProps
   } = (0, _context.useContextSystem)(props, 'ColorPicker');
-  const [containerEl, setContainerEl] = (0, _element.useState)(null);
-  const containerRef = node => {
-    setContainerEl(node);
-  };
 
   // Use a safe default value for the color and remove the possibility of `undefined`.
   const [color, setColor] = (0, _hooks.useControlledValue)({
@@ -79,15 +72,12 @@ const UnconnectedColorPicker = (props, forwardedRef) => {
   }, [debouncedSetColor]);
   const [colorType, setColorType] = (0, _element.useState)(copyFormat || 'hex');
   return (0, _react.createElement)(_styles.ColorfulWrapper, {
-    ref: (0, _compose.useMergeRefs)([containerRef, forwardedRef]),
+    ref: forwardedRef,
     ...divProps
   }, (0, _react.createElement)(_picker.Picker, {
-    containerEl: containerEl,
     onChange: handleChange,
     color: safeColordColor,
-    enableAlpha: enableAlpha,
-    onDragStart: onPickerDragStart,
-    onDragEnd: onPickerDragEnd
+    enableAlpha: enableAlpha
   }), (0, _react.createElement)(_styles.AuxiliaryColorArtefactWrapper, null, (0, _react.createElement)(_styles.AuxiliaryColorArtefactHStackHeader, {
     justify: "space-between"
   }, (0, _react.createElement)(_context.ContextSystemProvider, {

package/build/color-picker/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_colord","require","_names","_interopRequireDefault","_element","_compose","_i18n","_context","_styles","_colorCopyButton","_colorInput","_picker","_hooks","extend","namesPlugin","options","label","value","BORDERLESS_SELECT_CONTROL_CONTEXT","InputBase","isBorderless","UnconnectedColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","onPickerDragStart","onPickerDragEnd","divProps","useContextSystem","containerEl","setContainerEl","useState","containerRef","node","setColor","useControlledValue","safeColordColor","useMemo","colord","debouncedSetColor","useDebounce","handleChange","useCallback","nextValue","toHex","colorType","setColorType","_react","createElement","ColorfulWrapper","ref","useMergeRefs","Picker","onDragStart","onDragEnd","AuxiliaryColorArtefactWrapper","AuxiliaryColorArtefactHStackHeader","justify","ContextSystemProvider","SelectControl","__nextHasNoMarginBottom","nextColorType","__","hideLabelFromVision","ColorCopyButton","ColorInputWrapper","direction","gap","ColorInput","ColorPicker","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/color-picker/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport type { Colord } from 'colord';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { useDebounce, useMergeRefs } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tContextSystemProvider,\n} from '../context';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tAuxiliaryColorArtefactHStackHeader,\n\tColorInputWrapper,\n} from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorPickerProps, ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\n// `isBorderless` is still experimental and not a public prop for InputControl yet.\nconst BORDERLESS_SELECT_CONTROL_CONTEXT = { InputBase: { isBorderless: true } };\n\nconst UnconnectedColorPicker = (\n\tprops: ColorPickerProps,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\n\t\t// Context\n\t\tonPickerDragStart,\n\t\tonPickerDragEnd,\n\t\t...divProps\n\t} = useContextSystem<\n\t\tColorPickerProps & {\n\t\t\tonPickerDragStart?: ( event: MouseEvent ) => void;\n\t\t\tonPickerDragEnd?: ( event: MouseEvent ) => void;\n\t\t}\n\t>( props, 'ColorPicker' );\n\n\tconst [ containerEl, setContainerEl ] = useState< HTMLElement | null >(\n\t\tnull\n\t);\n\tconst containerRef = ( node: HTMLElement | null ) => {\n\t\tsetContainerEl( node );\n\t};\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color || '' );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper\n\t\t\tref={ useMergeRefs( [ containerRef, forwardedRef ] ) }\n\t\t\t{ ...divProps }\n\t\t>\n\t\t\t<Picker\n\t\t\t\tcontainerEl={ containerEl }\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\tonDragStart={ onPickerDragStart }\n\t\t\t\tonDragEnd={ onPickerDragEnd }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<AuxiliaryColorArtefactHStackHeader justify=\"space-between\">\n\t\t\t\t\t<ContextSystemProvider\n\t\t\t\t\t\tvalue={ BORDERLESS_SELECT_CONTROL_CONTEXT }\n\t\t\t\t\t>\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ContextSystemProvider>\n\t\t\t\t\t<ColorCopyButton\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t/>\n\t\t\t\t</AuxiliaryColorArtefactHStackHeader>\n\t\t\t\t<ColorInputWrapper direction=\"column\" gap={ 2 }>\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t</ColorInputWrapper>\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nexport const ColorPicker = contextConnect(\n\tUnconnectedColorPicker,\n\t'ColorPicker'\n);\n\nexport default ColorPicker;\n"],"mappings":"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"}
+{"version":3,"names":["_colord","require","_names","_interopRequireDefault","_element","_compose","_i18n","_context","_styles","_colorCopyButton","_colorInput","_picker","_hooks","extend","namesPlugin","options","label","value","BORDERLESS_SELECT_CONTROL_CONTEXT","InputBase","isBorderless","UnconnectedColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","useContextSystem","setColor","useControlledValue","safeColordColor","useMemo","colord","debouncedSetColor","useDebounce","handleChange","useCallback","nextValue","toHex","colorType","setColorType","useState","_react","createElement","ColorfulWrapper","ref","Picker","AuxiliaryColorArtefactWrapper","AuxiliaryColorArtefactHStackHeader","justify","ContextSystemProvider","SelectControl","__nextHasNoMarginBottom","nextColorType","__","hideLabelFromVision","ColorCopyButton","ColorInputWrapper","direction","gap","ColorInput","ColorPicker","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/color-picker/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport type { Colord } from 'colord';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tContextSystemProvider,\n} from '../context';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tAuxiliaryColorArtefactHStackHeader,\n\tColorInputWrapper,\n} from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorPickerProps, ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\n// `isBorderless` is still experimental and not a public prop for InputControl yet.\nconst BORDERLESS_SELECT_CONTROL_CONTEXT = { InputBase: { isBorderless: true } };\n\nconst UnconnectedColorPicker = (\n\tprops: ColorPickerProps,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color || '' );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<AuxiliaryColorArtefactHStackHeader justify=\"space-between\">\n\t\t\t\t\t<ContextSystemProvider\n\t\t\t\t\t\tvalue={ BORDERLESS_SELECT_CONTROL_CONTEXT }\n\t\t\t\t\t>\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ContextSystemProvider>\n\t\t\t\t\t<ColorCopyButton\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t/>\n\t\t\t\t</AuxiliaryColorArtefactHStackHeader>\n\t\t\t\t<ColorInputWrapper direction=\"column\" gap={ 2 }>\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t</ColorInputWrapper>\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nexport const ColorPicker = contextConnect(\n\tUnconnectedColorPicker,\n\t'ColorPicker'\n);\n\nexport default ColorPicker;\n"],"mappings":"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"}

package/build/color-picker/picker.js

@@ -16,94 +16,35 @@ var _element = require("@wordpress/element");
  * WordPress dependencies
  */
 
-/**
- * Track the start and the end of drag pointer events related to controlling
- * the picker's saturation / hue / alpha, and fire the corresponding callbacks.
- * This is particularly useful to implement synergies like the one with the
- * `Popover` component, where a pointer events "trap" is rendered while
- * the user is dragging the pointer to avoid potential interference with iframe
- * elements.
- *
- * @param props
- * @param props.containerEl
- * @param props.onDragStart
- * @param props.onDragEnd
- */
-const useOnPickerDrag = ({
-  containerEl,
-  onDragStart,
-  onDragEnd
-}) => {
-  const isDragging = (0, _element.useRef)(false);
-  const leftWhileDragging = (0, _element.useRef)(false);
-  (0, _element.useEffect)(() => {
-    if (!containerEl || !onDragStart && !onDragEnd) {
-      return;
-    }
-    const interactiveElements = [containerEl.querySelector('.react-colorful__saturation'), containerEl.querySelector('.react-colorful__hue'), containerEl.querySelector('.react-colorful__alpha')].filter(el => !!el);
-    if (interactiveElements.length === 0) {
-      return;
-    }
-    const doc = containerEl.ownerDocument;
-    const onPointerUp = event => {
-      isDragging.current = false;
-      leftWhileDragging.current = false;
-      onDragEnd?.(event);
-    };
-    const onPointerDown = event => {
-      isDragging.current = true;
-      onDragStart?.(event);
-    };
-    const onPointerLeave = () => {
-      leftWhileDragging.current = isDragging.current;
-    };
-
-    // Try to detect if the user released the pointer while away from the
-    // current window. If the check is successfull, the dragEnd callback will
-    // called as soon as the pointer re-enters the window (better late than never)
-    const onPointerEnter = event => {
-      const noPointerButtonsArePressed = event.buttons === 0;
-      if (leftWhileDragging.current && noPointerButtonsArePressed) {
-        onPointerUp(event);
-      }
-    };
-
-    // The pointerdown event is added on the interactive elements,
-    // while the remaining events are added on the document object since
-    // the pointer wouldn't necessarily be hovering the initial interactive
-    // element at that point.
-    interactiveElements.forEach(el => el.addEventListener('pointerdown', onPointerDown));
-    doc.addEventListener('pointerup', onPointerUp);
-    doc.addEventListener('pointerenter', onPointerEnter);
-    doc.addEventListener('pointerleave', onPointerLeave);
-    return () => {
-      interactiveElements.forEach(el => el.removeEventListener('pointerdown', onPointerDown));
-      doc.removeEventListener('pointerup', onPointerUp);
-      doc.removeEventListener('pointerenter', onPointerEnter);
-      doc.removeEventListener('pointerleave', onPointerUp);
-    };
-  }, [onDragStart, onDragEnd, containerEl]);
-};
 const Picker = ({
   color,
   enableAlpha,
-  onChange,
-  onDragStart,
-  onDragEnd,
-  containerEl
+  onChange
 }) => {
   const Component = enableAlpha ? _reactColorful.RgbaStringColorPicker : _reactColorful.RgbStringColorPicker;
   const rgbColor = (0, _element.useMemo)(() => color.toRgbString(), [color]);
-  useOnPickerDrag({
-    containerEl,
-    onDragStart,
-    onDragEnd
-  });
   return (0, _react.createElement)(Component, {
     color: rgbColor,
     onChange: nextColor => {
       onChange((0, _colord.colord)(nextColor));
     }
+    // Pointer capture fortifies drag gestures so that they continue to
+    // work while dragging outside the component over objects like
+    // iframes. If a newer version of react-colorful begins to employ
+    // pointer capture this will be redundant and should be removed.
+    ,
+    onPointerDown: ({
+      currentTarget,
+      pointerId
+    }) => {
+      currentTarget.setPointerCapture(pointerId);
+    },
+    onPointerUp: ({
+      currentTarget,
+      pointerId
+    }) => {
+      currentTarget.releasePointerCapture(pointerId);
+    }
   });
 };
 exports.Picker = Picker;

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

@@ -1 +1 @@
-{"version":3,"names":["_reactColorful","require","_colord","_element","useOnPickerDrag","containerEl","onDragStart","onDragEnd","isDragging","useRef","leftWhileDragging","useEffect","interactiveElements","querySelector","filter","el","length","doc","ownerDocument","onPointerUp","event","current","onPointerDown","onPointerLeave","onPointerEnter","noPointerButtonsArePressed","buttons","forEach","addEventListener","removeEventListener","Picker","color","enableAlpha","onChange","Component","RgbaStringColorPicker","RgbStringColorPicker","rgbColor","useMemo","toRgbString","_react","createElement","nextColor","colord","exports"],"sources":["@wordpress/components/src/color-picker/picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useEffect, useRef } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport type { PickerProps } from './types';\n\n/**\n * Track the start and the end of drag pointer events related to controlling\n * the picker's saturation / hue / alpha, and fire the corresponding callbacks.\n * This is particularly useful to implement synergies like the one with the\n * `Popover` component, where a pointer events \"trap\" is rendered while\n * the user is dragging the pointer to avoid potential interference with iframe\n * elements.\n *\n * @param props\n * @param props.containerEl\n * @param props.onDragStart\n * @param props.onDragEnd\n */\nconst useOnPickerDrag = ( {\n\tcontainerEl,\n\tonDragStart,\n\tonDragEnd,\n}: Pick< PickerProps, 'containerEl' | 'onDragStart' | 'onDragEnd' > ) => {\n\tconst isDragging = useRef( false );\n\tconst leftWhileDragging = useRef( false );\n\tuseEffect( () => {\n\t\tif ( ! containerEl || ( ! onDragStart && ! onDragEnd ) ) {\n\t\t\treturn;\n\t\t}\n\t\tconst interactiveElements = [\n\t\t\tcontainerEl.querySelector( '.react-colorful__saturation' ),\n\t\t\tcontainerEl.querySelector( '.react-colorful__hue' ),\n\t\t\tcontainerEl.querySelector( '.react-colorful__alpha' ),\n\t\t].filter( ( el ) => !! el ) as Element[];\n\n\t\tif ( interactiveElements.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst doc = containerEl.ownerDocument;\n\n\t\tconst onPointerUp: EventListener = ( event ) => {\n\t\t\tisDragging.current = false;\n\t\t\tleftWhileDragging.current = false;\n\t\t\tonDragEnd?.( event as MouseEvent );\n\t\t};\n\n\t\tconst onPointerDown: EventListener = ( event ) => {\n\t\t\tisDragging.current = true;\n\t\t\tonDragStart?.( event as MouseEvent );\n\t\t};\n\n\t\tconst onPointerLeave: EventListener = () => {\n\t\t\tleftWhileDragging.current = isDragging.current;\n\t\t};\n\n\t\t// Try to detect if the user released the pointer while away from the\n\t\t// current window. If the check is successfull, the dragEnd callback will\n\t\t// called as soon as the pointer re-enters the window (better late than never)\n\t\tconst onPointerEnter: EventListener = ( event ) => {\n\t\t\tconst noPointerButtonsArePressed =\n\t\t\t\t( event as PointerEvent ).buttons === 0;\n\n\t\t\tif ( leftWhileDragging.current && noPointerButtonsArePressed ) {\n\t\t\t\tonPointerUp( event );\n\t\t\t}\n\t\t};\n\n\t\t// The pointerdown event is added on the interactive elements,\n\t\t// while the remaining events are added on the document object since\n\t\t// the pointer wouldn't necessarily be hovering the initial interactive\n\t\t// element at that point.\n\t\tinteractiveElements.forEach( ( el ) =>\n\t\t\tel.addEventListener( 'pointerdown', onPointerDown )\n\t\t);\n\t\tdoc.addEventListener( 'pointerup', onPointerUp );\n\t\tdoc.addEventListener( 'pointerenter', onPointerEnter );\n\t\tdoc.addEventListener( 'pointerleave', onPointerLeave );\n\n\t\treturn () => {\n\t\t\tinteractiveElements.forEach( ( el ) =>\n\t\t\t\tel.removeEventListener( 'pointerdown', onPointerDown )\n\t\t\t);\n\t\t\tdoc.removeEventListener( 'pointerup', onPointerUp );\n\t\t\tdoc.removeEventListener( 'pointerenter', onPointerEnter );\n\t\t\tdoc.removeEventListener( 'pointerleave', onPointerUp );\n\t\t};\n\t}, [ onDragStart, onDragEnd, containerEl ] );\n};\n\nexport const Picker = ( {\n\tcolor,\n\tenableAlpha,\n\tonChange,\n\tonDragStart,\n\tonDragEnd,\n\tcontainerEl,\n}: PickerProps ) => {\n\tconst Component = enableAlpha\n\t\t? RgbaStringColorPicker\n\t\t: RgbStringColorPicker;\n\tconst rgbColor = useMemo( () => color.toRgbString(), [ color ] );\n\n\tuseOnPickerDrag( { containerEl, onDragStart, onDragEnd } );\n\n\treturn (\n\t\t<Component\n\t\t\tcolor={ rgbColor }\n\t\t\tonChange={ ( nextColor ) => {\n\t\t\t\tonChange( colord( nextColor ) );\n\t\t\t} }\n\t\t/>\n\t);\n};\n"],"mappings":"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"}
+{"version":3,"names":["_reactColorful","require","_colord","_element","Picker","color","enableAlpha","onChange","Component","RgbaStringColorPicker","RgbStringColorPicker","rgbColor","useMemo","toRgbString","_react","createElement","nextColor","colord","onPointerDown","currentTarget","pointerId","setPointerCapture","onPointerUp","releasePointerCapture","exports"],"sources":["@wordpress/components/src/color-picker/picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport type { PickerProps } from './types';\n\nexport const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {\n\tconst Component = enableAlpha\n\t\t? RgbaStringColorPicker\n\t\t: RgbStringColorPicker;\n\tconst rgbColor = useMemo( () => color.toRgbString(), [ color ] );\n\n\treturn (\n\t\t<Component\n\t\t\tcolor={ rgbColor }\n\t\t\tonChange={ ( nextColor ) => {\n\t\t\t\tonChange( colord( nextColor ) );\n\t\t\t} }\n\t\t\t// Pointer capture fortifies drag gestures so that they continue to\n\t\t\t// work while dragging outside the component over objects like\n\t\t\t// iframes. If a newer version of react-colorful begins to employ\n\t\t\t// pointer capture this will be redundant and should be removed.\n\t\t\tonPointerDown={ ( { currentTarget, pointerId } ) => {\n\t\t\t\tcurrentTarget.setPointerCapture( pointerId );\n\t\t\t} }\n\t\t\tonPointerUp={ ( { currentTarget, pointerId } ) => {\n\t\t\t\tcurrentTarget.releasePointerCapture( pointerId );\n\t\t\t} }\n\t\t/>\n\t);\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,cAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAOO,MAAMG,MAAM,GAAGA,CAAE;EAAEC,KAAK;EAAEC,WAAW;EAAEC;AAAsB,CAAC,KAAM;EAC1E,MAAMC,SAAS,GAAGF,WAAW,GAC1BG,oCAAqB,GACrBC,mCAAoB;EACvB,MAAMC,QAAQ,GAAG,IAAAC,gBAAO,EAAE,MAAMP,KAAK,CAACQ,WAAW,CAAC,CAAC,EAAE,CAAER,KAAK,CAAG,CAAC;EAEhE,OACC,IAAAS,MAAA,CAAAC,aAAA,EAACP,SAAS;IACTH,KAAK,EAAGM,QAAU;IAClBJ,QAAQ,EAAKS,SAAS,IAAM;MAC3BT,QAAQ,CAAE,IAAAU,cAAM,EAAED,SAAU,CAAE,CAAC;IAChC;IACA;IACA;IACA;IACA;IAAA;IACAE,aAAa,EAAGA,CAAE;MAAEC,aAAa;MAAEC;IAAU,CAAC,KAAM;MACnDD,aAAa,CAACE,iBAAiB,CAAED,SAAU,CAAC;IAC7C,CAAG;IACHE,WAAW,EAAGA,CAAE;MAAEH,aAAa;MAAEC;IAAU,CAAC,KAAM;MACjDD,aAAa,CAACI,qBAAqB,CAAEH,SAAU,CAAC;IACjD;EAAG,CACH,CAAC;AAEJ,CAAC;AAACI,OAAA,CAAApB,MAAA,GAAAA,MAAA"}

package/build/color-picker/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/color-picker/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tColord,\n\tHslColor,\n\tHsvaColor,\n\tHsvColor,\n\tRgbaColor,\n\tRgbColor,\n} from 'colord';\nimport type { HslaColor } from 'react-colorful';\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport type { useDeprecatedProps } from './use-deprecated-props';\n\nexport type ColorType = 'rgb' | 'hsl' | 'hex';\nexport type ColorCopyButtonProps = {\n\tcolor: Colord;\n\tcolorType: ColorType;\n};\n\nexport type LegacyAdapterProps = Parameters< typeof useDeprecatedProps >[ 0 ];\n\nexport type ColorPickerProps = WordPressComponentProps<\n\t{\n\t\t/**\n\t\t * When `true` the color picker will display the alpha channel both in\n\t\t * the bottom inputs as well as in the color picker itself.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tenableAlpha?: boolean;\n\t\t/**\n\t\t * The current color value to display in the picker.\n\t\t * Must be a hex or hex8 string.\n\t\t */\n\t\tcolor?: string;\n\t\t/**\n\t\t * Fired when the color changes. Always passes a hex or hex8 color string.\n\t\t */\n\t\tonChange?: ( color: string ) => void;\n\t\t/**\n\t\t * An optional default value to use for the color picker.\n\t\t */\n\t\tdefaultValue?: string;\n\t\t/**\n\t\t * The format to copy when clicking the displayed color format.\n\t\t */\n\t\tcopyFormat?: ColorType;\n\t},\n\t'div',\n\tfalse\n>;\n\nexport interface PickerProps {\n\tcolor: Colord;\n\tenableAlpha: boolean;\n\tonChange: ( nextColor: Colord ) => void;\n\tcontainerEl: HTMLElement | null;\n\tonDragStart?: ( event: MouseEvent ) => void;\n\tonDragEnd?: ( event: MouseEvent ) => void;\n}\n\nexport interface ColorInputProps {\n\tcolorType: 'hsl' | 'hex' | 'rgb';\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport interface InputWithSliderProps {\n\tmin: number;\n\tmax: number;\n\tvalue: number;\n\tlabel: string;\n\tabbreviation: string;\n\tonChange: ( value: number ) => void;\n}\n\nexport interface HexInputProps {\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport interface HslInputProps {\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport interface RgbInputProps {\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\n/**\n * @deprecated\n */\nexport type LegacyColor =\n\t| string\n\t| {\n\t\t\thex: string;\n\t\t\thsl: HslColor | HslaColor;\n\t\t\thsv: HsvColor | HsvaColor;\n\t\t\trgb: RgbColor | RgbaColor;\n\t\t\t/**\n\t\t\t * @deprecated\n\t\t\t */\n\t\t\toldHue: number;\n\t\t\t/**\n\t\t\t * @deprecated\n\t\t\t */\n\t\t\tsource: 'hex';\n\t  };\n\n/**\n * @deprecated\n */\nexport interface LegacyProps {\n\tcolor?: LegacyColor;\n\t/**\n\t * @deprecated\n\t */\n\tonChangeComplete: ( colors: LegacyColor ) => void;\n\t/**\n\t * @deprecated\n\t */\n\toldHue: string;\n\tclassName: string;\n\t/**\n\t * @deprecated\n\t */\n\tdisableAlpha: boolean;\n\tonChange?: never;\n}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/color-picker/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tColord,\n\tHslColor,\n\tHsvaColor,\n\tHsvColor,\n\tRgbaColor,\n\tRgbColor,\n} from 'colord';\nimport type { HslaColor } from 'react-colorful';\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport type { useDeprecatedProps } from './use-deprecated-props';\n\nexport type ColorType = 'rgb' | 'hsl' | 'hex';\nexport type ColorCopyButtonProps = {\n\tcolor: Colord;\n\tcolorType: ColorType;\n};\n\nexport type LegacyAdapterProps = Parameters< typeof useDeprecatedProps >[ 0 ];\n\nexport type ColorPickerProps = WordPressComponentProps<\n\t{\n\t\t/**\n\t\t * When `true` the color picker will display the alpha channel both in\n\t\t * the bottom inputs as well as in the color picker itself.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tenableAlpha?: boolean;\n\t\t/**\n\t\t * The current color value to display in the picker.\n\t\t * Must be a hex or hex8 string.\n\t\t */\n\t\tcolor?: string;\n\t\t/**\n\t\t * Fired when the color changes. Always passes a hex or hex8 color string.\n\t\t */\n\t\tonChange?: ( color: string ) => void;\n\t\t/**\n\t\t * An optional default value to use for the color picker.\n\t\t */\n\t\tdefaultValue?: string;\n\t\t/**\n\t\t * The format to copy when clicking the displayed color format.\n\t\t */\n\t\tcopyFormat?: ColorType;\n\t},\n\t'div',\n\tfalse\n>;\n\nexport interface PickerProps {\n\tcolor: Colord;\n\tenableAlpha: boolean;\n\tonChange: ( nextColor: Colord ) => void;\n}\n\nexport interface ColorInputProps {\n\tcolorType: 'hsl' | 'hex' | 'rgb';\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport interface InputWithSliderProps {\n\tmin: number;\n\tmax: number;\n\tvalue: number;\n\tlabel: string;\n\tabbreviation: string;\n\tonChange: ( value: number ) => void;\n}\n\nexport interface HexInputProps {\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport interface HslInputProps {\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport interface RgbInputProps {\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\n/**\n * @deprecated\n */\nexport type LegacyColor =\n\t| string\n\t| {\n\t\t\thex: string;\n\t\t\thsl: HslColor | HslaColor;\n\t\t\thsv: HsvColor | HsvaColor;\n\t\t\trgb: RgbColor | RgbaColor;\n\t\t\t/**\n\t\t\t * @deprecated\n\t\t\t */\n\t\t\toldHue: number;\n\t\t\t/**\n\t\t\t * @deprecated\n\t\t\t */\n\t\t\tsource: 'hex';\n\t  };\n\n/**\n * @deprecated\n */\nexport interface LegacyProps {\n\tcolor?: LegacyColor;\n\t/**\n\t * @deprecated\n\t */\n\tonChangeComplete: ( colors: LegacyColor ) => void;\n\t/**\n\t * @deprecated\n\t */\n\toldHue: string;\n\tclassName: string;\n\t/**\n\t * @deprecated\n\t */\n\tdisableAlpha: boolean;\n\tonChange?: never;\n}\n"],"mappings":""}

package/build/custom-select-control-v2/default-component/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = require("react");
 var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
 var _customSelect = _interopRequireDefault(require("../custom-select"));
+var _item = _interopRequireDefault(require("../item"));
 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 && Object.prototype.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; }
 /**
@@ -19,7 +20,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * Internal dependencies
  */
 
-function CustomSelect(props) {
+function CustomSelectControlV2(props) {
   const {
     defaultValue,
     onChange,
@@ -37,5 +38,6 @@ function CustomSelect(props) {
     store: store
   });
 }
-var _default = exports.default = CustomSelect;
+CustomSelectControlV2.Item = _item.default;
+var _default = exports.default = CustomSelectControlV2;
 //# sourceMappingURL=index.js.map

package/build/custom-select-control-v2/default-component/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_customSelect","_interopRequireDefault","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","CustomSelect","props","defaultValue","onChange","value","restProps","store","useSelectStore","setValue","nextValue","_react","createElement","_default","exports"],"sources":["@wordpress/components/src/custom-select-control-v2/default-component/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n/**\n * Internal dependencies\n */\nimport _CustomSelect from '../custom-select';\nimport type { CustomSelectProps } from '../types';\nimport type { WordPressComponentProps } from '../../context';\n\nfunction CustomSelect(\n\tprops: WordPressComponentProps< CustomSelectProps, 'button', false >\n) {\n\tconst { defaultValue, onChange, value, ...restProps } = props;\n\t// Forward props + store from v2 implementation\n\tconst store = Ariakit.useSelectStore( {\n\t\tsetValue: ( nextValue ) => onChange?.( nextValue ),\n\t\tdefaultValue,\n\t\tvalue,\n\t} );\n\n\treturn <_CustomSelect { ...restProps } store={ store } />;\n}\n\nexport default CustomSelect;\n"],"mappings":";;;;;;;;AAIA,IAAAA,OAAA,GAAAC,uBAAA,CAAAC,OAAA;AAIA,IAAAC,aAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA6C,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAR7C;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAKA,SAASY,YAAYA,CACpBC,KAAoE,EACnE;EACD,MAAM;IAAEC,YAAY;IAAEC,QAAQ;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK;EAC7D;EACA,MAAMK,KAAK,GAAGhC,OAAO,CAACiC,cAAc,CAAE;IACrCC,QAAQ,EAAIC,SAAS,IAAMN,QAAQ,GAAIM,SAAU,CAAC;IAClDP,YAAY;IACZE;EACD,CAAE,CAAC;EAEH,OAAO,IAAAM,MAAA,CAAAC,aAAA,EAAClC,aAAA,CAAAQ,OAAa;IAAA,GAAMoB,SAAS;IAAGC,KAAK,EAAGA;EAAO,CAAE,CAAC;AAC1D;AAAC,IAAAM,QAAA,GAAAC,OAAA,CAAA5B,OAAA,GAEce,YAAY"}
+{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_customSelect","_interopRequireDefault","_item","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","CustomSelectControlV2","props","defaultValue","onChange","value","restProps","store","useSelectStore","setValue","nextValue","_react","createElement","Item","_default","exports"],"sources":["@wordpress/components/src/custom-select-control-v2/default-component/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n/**\n * Internal dependencies\n */\nimport _CustomSelect from '../custom-select';\nimport type { CustomSelectProps } from '../types';\nimport type { WordPressComponentProps } from '../../context';\nimport Item from '../item';\n\nfunction CustomSelectControlV2(\n\tprops: WordPressComponentProps< CustomSelectProps, 'button', false >\n) {\n\tconst { defaultValue, onChange, value, ...restProps } = props;\n\t// Forward props + store from v2 implementation\n\tconst store = Ariakit.useSelectStore( {\n\t\tsetValue: ( nextValue ) => onChange?.( nextValue ),\n\t\tdefaultValue,\n\t\tvalue,\n\t} );\n\n\treturn <_CustomSelect { ...restProps } store={ store } />;\n}\n\nCustomSelectControlV2.Item = Item;\n\nexport default CustomSelectControlV2;\n"],"mappings":";;;;;;;;AAIA,IAAAA,OAAA,GAAAC,uBAAA,CAAAC,OAAA;AAIA,IAAAC,aAAA,GAAAC,sBAAA,CAAAF,OAAA;AAGA,IAAAG,KAAA,GAAAD,sBAAA,CAAAF,OAAA;AAA2B,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAX3B;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAMA,SAASY,qBAAqBA,CAC7BC,KAAoE,EACnE;EACD,MAAM;IAAEC,YAAY;IAAEC,QAAQ;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK;EAC7D;EACA,MAAMK,KAAK,GAAGjC,OAAO,CAACkC,cAAc,CAAE;IACrCC,QAAQ,EAAIC,SAAS,IAAMN,QAAQ,GAAIM,SAAU,CAAC;IAClDP,YAAY;IACZE;EACD,CAAE,CAAC;EAEH,OAAO,IAAAM,MAAA,CAAAC,aAAA,EAACnC,aAAA,CAAAS,OAAa;IAAA,GAAMoB,SAAS;IAAGC,KAAK,EAAGA;EAAO,CAAE,CAAC;AAC1D;AAEAN,qBAAqB,CAACY,IAAI,GAAGA,aAAI;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA7B,OAAA,GAEnBe,qBAAqB"}

package/build/custom-select-control-v2/index.js

@@ -4,18 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "CustomSelect", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
     return _defaultComponent.default;
   }
 });
-Object.defineProperty(exports, "CustomSelectItem", {
-  enumerable: true,
-  get: function () {
-    return _customSelectItem.default;
-  }
-});
 var _defaultComponent = _interopRequireDefault(require("./default-component"));
-var _customSelectItem = _interopRequireDefault(require("./custom-select-item"));
 //# sourceMappingURL=index.js.map

package/build/custom-select-control-v2/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_defaultComponent","_interopRequireDefault","require","_customSelectItem"],"sources":["@wordpress/components/src/custom-select-control-v2/index.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nexport { default as CustomSelect } from './default-component';\nexport { default as CustomSelectItem } from './custom-select-item';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAGA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA"}
+{"version":3,"names":["_defaultComponent","_interopRequireDefault","require"],"sources":["@wordpress/components/src/custom-select-control-v2/index.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nexport { default } from './default-component';\n"],"mappings":";;;;;;;;;;;;AAGA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA"}

package/build/custom-select-control-v2/{custom-select-item.js → item.js}

@@ -28,5 +28,6 @@ function CustomSelectItem({
     icon: _icons.check
   })));
 }
+CustomSelectItem.displayName = 'CustomSelectControlV2.Item';
 var _default = exports.default = CustomSelectItem;
-//# sourceMappingURL=custom-select-item.js.map
+//# sourceMappingURL=item.js.map

package/build/custom-select-control-v2/{custom-select-item.js.map → item.js.map}

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_icons","Styled","_interopRequireWildcard","_customSelect","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","CustomSelectItem","children","props","customSelectContext","useContext","CustomSelectContext","_react","createElement","SelectItem","store","value","SelectedItemCheck","Icon","icon","check","_default","exports"],"sources":["@wordpress/components/src/custom-select-control-v2/custom-select-item.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n/**\n * Internal dependencies\n */\nimport type { CustomSelectItemProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport * as Styled from './styles';\nimport { CustomSelectContext } from './custom-select';\n\nexport function CustomSelectItem( {\n\tchildren,\n\t...props\n}: WordPressComponentProps< CustomSelectItemProps, 'div', false > ) {\n\tconst customSelectContext = useContext( CustomSelectContext );\n\treturn (\n\t\t<Styled.SelectItem store={ customSelectContext?.store } { ...props }>\n\t\t\t{ children ?? props.value }\n\t\t\t<Styled.SelectedItemCheck>\n\t\t\t\t<Icon icon={ check } />\n\t\t\t</Styled.SelectedItemCheck>\n\t\t</Styled.SelectItem>\n\t);\n}\n\nexport default CustomSelectItem;\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAMA,IAAAE,MAAA,GAAAC,uBAAA,CAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AAAsD,SAAAK,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAXtD;AACA;AACA;;AAWO,SAASY,gBAAgBA,CAAE;EACjCC,QAAQ;EACR,GAAGC;AAC4D,CAAC,EAAG;EACnE,MAAMC,mBAAmB,GAAG,IAAAC,mBAAU,EAAEC,iCAAoB,CAAC;EAC7D,OACC,IAAAC,MAAA,CAAAC,aAAA,EAAC/B,MAAM,CAACgC,UAAU;IAACC,KAAK,EAAGN,mBAAmB,EAAEM,KAAO;IAAA,GAAMP;EAAK,GAC/DD,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIC,KAAK,CAACQ,KAAK,EACzB,IAAAJ,MAAA,CAAAC,aAAA,EAAC/B,MAAM,CAACmC,iBAAiB,QACxB,IAAAL,MAAA,CAAAC,aAAA,EAAChC,MAAA,CAAAqC,IAAI;IAACC,IAAI,EAAGC;EAAO,CAAE,CACG,CACR,CAAC;AAEtB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA/B,OAAA,GAEce,gBAAgB"}
+{"version":3,"names":["_element","require","_icons","Styled","_interopRequireWildcard","_customSelect","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","CustomSelectItem","children","props","customSelectContext","useContext","CustomSelectContext","_react","createElement","SelectItem","store","value","SelectedItemCheck","Icon","icon","check","displayName","_default","exports"],"sources":["@wordpress/components/src/custom-select-control-v2/item.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n/**\n * Internal dependencies\n */\nimport type { CustomSelectItemProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport * as Styled from './styles';\nimport { CustomSelectContext } from './custom-select';\n\nexport function CustomSelectItem( {\n\tchildren,\n\t...props\n}: WordPressComponentProps< CustomSelectItemProps, 'div', false > ) {\n\tconst customSelectContext = useContext( CustomSelectContext );\n\treturn (\n\t\t<Styled.SelectItem store={ customSelectContext?.store } { ...props }>\n\t\t\t{ children ?? props.value }\n\t\t\t<Styled.SelectedItemCheck>\n\t\t\t\t<Icon icon={ check } />\n\t\t\t</Styled.SelectedItemCheck>\n\t\t</Styled.SelectItem>\n\t);\n}\n\nCustomSelectItem.displayName = 'CustomSelectControlV2.Item';\n\nexport default CustomSelectItem;\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAMA,IAAAE,MAAA,GAAAC,uBAAA,CAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AAAsD,SAAAK,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAXtD;AACA;AACA;;AAWO,SAASY,gBAAgBA,CAAE;EACjCC,QAAQ;EACR,GAAGC;AAC4D,CAAC,EAAG;EACnE,MAAMC,mBAAmB,GAAG,IAAAC,mBAAU,EAAEC,iCAAoB,CAAC;EAC7D,OACC,IAAAC,MAAA,CAAAC,aAAA,EAAC/B,MAAM,CAACgC,UAAU;IAACC,KAAK,EAAGN,mBAAmB,EAAEM,KAAO;IAAA,GAAMP;EAAK,GAC/DD,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIC,KAAK,CAACQ,KAAK,EACzB,IAAAJ,MAAA,CAAAC,aAAA,EAAC/B,MAAM,CAACmC,iBAAiB,QACxB,IAAAL,MAAA,CAAAC,aAAA,EAAChC,MAAA,CAAAqC,IAAI;IAACC,IAAI,EAAGC;EAAO,CAAE,CACG,CACR,CAAC;AAEtB;AAEAd,gBAAgB,CAACe,WAAW,GAAG,4BAA4B;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAhC,OAAA,GAE7Ce,gBAAgB"}

package/build/custom-select-control-v2/legacy-component/index.js

@@ -9,7 +9,7 @@ var _react = require("react");
 var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
 var _element = require("@wordpress/element");
 var _customSelect = _interopRequireDefault(require("../custom-select"));
-var _ = require("..");
+var _item = _interopRequireDefault(require("../item"));
 var Styled = _interopRequireWildcard(require("../styles"));
 var _context = require("../../context");
 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); }
@@ -27,7 +27,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * Internal dependencies
  */
 
-function CustomSelect(props) {
+function CustomSelectControl(props) {
   const {
     __experimentalShowSelectedHint,
     __next40pxDefaultSize = false,
@@ -69,10 +69,10 @@ function CustomSelect(props) {
     const withHint = (0, _react.createElement)(Styled.WithHintWrapper, null, (0, _react.createElement)("span", null, name), (0, _react.createElement)(Styled.ExperimentalHintItem, {
       className: "components-custom-select-control__item-hint"
     }, __experimentalHint));
-    return (0, _react.createElement)(_.CustomSelectItem, {
+    return (0, _react.createElement)(_item.default, {
       key: key,
       value: name,
-      children: __experimentalShowSelectedHint ? withHint : name,
+      children: __experimentalHint ? withHint : name,
       ...rest
     });
   });
@@ -119,5 +119,5 @@ function CustomSelect(props) {
     store: store
   }));
 }
-var _default = exports.default = CustomSelect;
+var _default = exports.default = CustomSelectControl;
 //# sourceMappingURL=index.js.map

package/build/custom-select-control-v2/legacy-component/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_element","_customSelect","_interopRequireDefault","_","Styled","_context","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","CustomSelect","props","__experimentalShowSelectedHint","__next40pxDefaultSize","options","onChange","size","value","restProps","store","useSelectStore","setValue","nextValue","Promise","resolve","state","getState","changeObject","highlightedIndex","renderedItems","findIndex","item","inputValue","isOpen","open","selectedItem","name","key","type","children","map","__experimentalHint","rest","withHint","_react","createElement","WithHintWrapper","ExperimentalHintItem","className","CustomSelectItem","renderSelectedValueHint","currentValue","currentHint","find","Fragment","SelectedExperimentalHintItem","contextSystemValue","useMemo","selectedSize","CustomSelectControlButton","_overrides","translatedProps","describedBy","renderSelectedValue","undefined","ContextSystemProvider","_default","exports"],"sources":["@wordpress/components/src/custom-select-control-v2/legacy-component/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport _CustomSelect from '../custom-select';\nimport type { LegacyCustomSelectProps } from '../types';\nimport { CustomSelectItem } from '..';\nimport * as Styled from '../styles';\nimport { ContextSystemProvider } from '../../context';\n\nfunction CustomSelect( props: LegacyCustomSelectProps ) {\n\tconst {\n\t\t__experimentalShowSelectedHint,\n\t\t__next40pxDefaultSize = false,\n\t\toptions,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\t...restProps\n\t} = props;\n\n\t// Forward props + store from v2 implementation\n\tconst store = Ariakit.useSelectStore( {\n\t\tasync setValue( nextValue ) {\n\t\t\tif ( ! onChange ) return;\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 that in Downshift.\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: {\n\t\t\t\t\tname: nextValue as string,\n\t\t\t\t\tkey: nextValue as string,\n\t\t\t\t},\n\t\t\t\ttype: '',\n\t\t\t};\n\t\t\tonChange( changeObject );\n\t\t},\n\t} );\n\n\tconst children = options.map(\n\t\t( { name, key, __experimentalHint, ...rest } ) => {\n\t\t\tconst withHint = (\n\t\t\t\t<Styled.WithHintWrapper>\n\t\t\t\t\t<span>{ name }</span>\n\t\t\t\t\t<Styled.ExperimentalHintItem className=\"components-custom-select-control__item-hint\">\n\t\t\t\t\t\t{ __experimentalHint }\n\t\t\t\t\t</Styled.ExperimentalHintItem>\n\t\t\t\t</Styled.WithHintWrapper>\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={\n\t\t\t\t\t\t__experimentalShowSelectedHint ? withHint : name\n\t\t\t\t\t}\n\t\t\t\t\t{ ...rest }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t);\n\n\tconst renderSelectedValueHint = () => {\n\t\tconst { value: currentValue } = store.getState();\n\n\t\tconst currentHint = options?.find(\n\t\t\t( { name } ) => currentValue === name\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ currentValue }\n\t\t\t\t<Styled.SelectedExperimentalHintItem className=\"components-custom-select-control__hint\">\n\t\t\t\t\t{ currentHint?.__experimentalHint }\n\t\t\t\t</Styled.SelectedExperimentalHintItem>\n\t\t\t</>\n\t\t);\n\t};\n\n\t// translate legacy button sizing\n\tconst contextSystemValue = useMemo( () => {\n\t\tlet selectedSize;\n\n\t\tif (\n\t\t\t( __next40pxDefaultSize && size === 'default' ) ||\n\t\t\tsize === '__unstable-large'\n\t\t) {\n\t\t\tselectedSize = 'default';\n\t\t} else if ( ! __next40pxDefaultSize && size === 'default' ) {\n\t\t\tselectedSize = 'compact';\n\t\t} else {\n\t\t\tselectedSize = size;\n\t\t}\n\n\t\treturn {\n\t\t\tCustomSelectControlButton: { _overrides: { size: selectedSize } },\n\t\t};\n\t}, [ __next40pxDefaultSize, size ] );\n\n\tconst translatedProps = {\n\t\t'aria-describedby': props.describedBy,\n\t\tchildren,\n\t\trenderSelectedValue: __experimentalShowSelectedHint\n\t\t\t? renderSelectedValueHint\n\t\t\t: undefined,\n\t\t...restProps,\n\t};\n\n\treturn (\n\t\t<ContextSystemProvider value={ contextSystemValue }>\n\t\t\t<_CustomSelect { ...translatedProps } store={ store } />\n\t\t</ContextSystemProvider>\n\t);\n}\n\nexport default CustomSelect;\n"],"mappings":"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"}
+{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_element","_customSelect","_interopRequireDefault","_item","Styled","_context","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","CustomSelectControl","props","__experimentalShowSelectedHint","__next40pxDefaultSize","options","onChange","size","value","restProps","store","useSelectStore","setValue","nextValue","Promise","resolve","state","getState","changeObject","highlightedIndex","renderedItems","findIndex","item","inputValue","isOpen","open","selectedItem","name","key","type","children","map","__experimentalHint","rest","withHint","_react","createElement","WithHintWrapper","ExperimentalHintItem","className","renderSelectedValueHint","currentValue","currentHint","find","Fragment","SelectedExperimentalHintItem","contextSystemValue","useMemo","selectedSize","CustomSelectControlButton","_overrides","translatedProps","describedBy","renderSelectedValue","undefined","ContextSystemProvider","_default","exports"],"sources":["@wordpress/components/src/custom-select-control-v2/legacy-component/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport _CustomSelect from '../custom-select';\nimport CustomSelectItem from '../item';\nimport type { LegacyCustomSelectProps } from '../types';\nimport * as Styled from '../styles';\nimport { ContextSystemProvider } from '../../context';\n\nfunction CustomSelectControl( props: LegacyCustomSelectProps ) {\n\tconst {\n\t\t__experimentalShowSelectedHint,\n\t\t__next40pxDefaultSize = false,\n\t\toptions,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\t...restProps\n\t} = props;\n\n\t// Forward props + store from v2 implementation\n\tconst store = Ariakit.useSelectStore( {\n\t\tasync setValue( nextValue ) {\n\t\t\tif ( ! onChange ) return;\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 that in Downshift.\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: {\n\t\t\t\t\tname: nextValue as string,\n\t\t\t\t\tkey: nextValue as string,\n\t\t\t\t},\n\t\t\t\ttype: '',\n\t\t\t};\n\t\t\tonChange( changeObject );\n\t\t},\n\t} );\n\n\tconst children = options.map(\n\t\t( { name, key, __experimentalHint, ...rest } ) => {\n\t\t\tconst withHint = (\n\t\t\t\t<Styled.WithHintWrapper>\n\t\t\t\t\t<span>{ name }</span>\n\t\t\t\t\t<Styled.ExperimentalHintItem className=\"components-custom-select-control__item-hint\">\n\t\t\t\t\t\t{ __experimentalHint }\n\t\t\t\t\t</Styled.ExperimentalHintItem>\n\t\t\t\t</Styled.WithHintWrapper>\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={ __experimentalHint ? withHint : name }\n\t\t\t\t\t{ ...rest }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t);\n\n\tconst renderSelectedValueHint = () => {\n\t\tconst { value: currentValue } = store.getState();\n\n\t\tconst currentHint = options?.find(\n\t\t\t( { name } ) => currentValue === name\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ currentValue }\n\t\t\t\t<Styled.SelectedExperimentalHintItem className=\"components-custom-select-control__hint\">\n\t\t\t\t\t{ currentHint?.__experimentalHint }\n\t\t\t\t</Styled.SelectedExperimentalHintItem>\n\t\t\t</>\n\t\t);\n\t};\n\n\t// translate legacy button sizing\n\tconst contextSystemValue = useMemo( () => {\n\t\tlet selectedSize;\n\n\t\tif (\n\t\t\t( __next40pxDefaultSize && size === 'default' ) ||\n\t\t\tsize === '__unstable-large'\n\t\t) {\n\t\t\tselectedSize = 'default';\n\t\t} else if ( ! __next40pxDefaultSize && size === 'default' ) {\n\t\t\tselectedSize = 'compact';\n\t\t} else {\n\t\t\tselectedSize = size;\n\t\t}\n\n\t\treturn {\n\t\t\tCustomSelectControlButton: { _overrides: { size: selectedSize } },\n\t\t};\n\t}, [ __next40pxDefaultSize, size ] );\n\n\tconst translatedProps = {\n\t\t'aria-describedby': props.describedBy,\n\t\tchildren,\n\t\trenderSelectedValue: __experimentalShowSelectedHint\n\t\t\t? renderSelectedValueHint\n\t\t\t: undefined,\n\t\t...restProps,\n\t};\n\n\treturn (\n\t\t<ContextSystemProvider value={ contextSystemValue }>\n\t\t\t<_CustomSelect { ...translatedProps } store={ store } />\n\t\t</ContextSystemProvider>\n\t);\n}\n\nexport default CustomSelectControl;\n"],"mappings":"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"}

package/build/input-control/input-field.js

@@ -10,6 +10,7 @@ var _element = require("@wordpress/element");
 var _utils = require("./utils");
 var _inputControlStyles = require("./styles/input-control-styles");
 var _reducer = require("./reducer/reducer");
+var _withIgnoreImeEvents = require("../utils/with-ignore-ime-events");
 /**
  * External dependencies
  */
@@ -194,7 +195,7 @@ function InputField({
     onBlur: handleOnBlur,
     onChange: handleOnChange,
     onFocus: handleOnFocus,
-    onKeyDown: handleOnKeyDown,
+    onKeyDown: (0, _withIgnoreImeEvents.withIgnoreIMEEvents)(handleOnKeyDown),
     onMouseDown: handleOnMouseDown,
     ref: ref,
     inputSize: size