@wordpress/components 25.4.0 → 25.5.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 ## Unreleased
 
+## 25.5.0 (2023-08-10)
+
+### New Feature
+
+-   Add a new `ProgressBar` component. ([#53030](https://github.com/WordPress/gutenberg/pull/53030)).
+
+### Enhancements
+
+-   `ColorPalette`, `BorderControl`: Don't hyphenate hex value in `aria-label` ([#52932](https://github.com/WordPress/gutenberg/pull/52932)).
+-   `MenuItemsChoice`, `MenuItem`: Support a `disabled` prop on a menu item ([#52737](https://github.com/WordPress/gutenberg/pull/52737)).
+-   `TabPanel`: Introduce a new version of `TabPanel` with updated internals and improved adherence to ARIA guidance on `tabpanel` focus behavior while maintaining the same functionality and API surface.([#52133](https://github.com/WordPress/gutenberg/pull/52133)).
+
+### Bug Fix
+
+-   `Modal`: Fix loss of focus when clicking outside ([#52653](https://github.com/WordPress/gutenberg/pull/52653)).
+
 ## 25.4.0 (2023-07-20)
 
 ### Enhancements

package/build/border-control/border-control-dropdown/component.js

@@ -49,10 +49,8 @@ var _utils = require("../../color-palette/utils");
  * Internal dependencies
  */
 const getAriaLabelColorValue = colorValue => {
-  const isHex = colorValue.startsWith('#'); // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
-
-  const displayValue = colorValue.replace(/^var\((.+)\)$/, '$1');
-  return isHex ? displayValue.split('').join('-') : displayValue;
+  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
+  return colorValue.replace(/^var\((.+)\)$/, '$1');
 };
 
 const getColorObject = (colorValue, colors) => {
@@ -82,15 +80,15 @@ const getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {
   if (isStyleEnabled) {
     if (colorObject) {
       const ariaLabelValue = getAriaLabelColorValue(colorObject.color);
-      return style ? (0, _i18n.sprintf)( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0". %3$s: The current border style selection e.g. "solid".
-      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".', colorObject.name, ariaLabelValue, style) : (0, _i18n.sprintf)( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+      return style ? (0, _i18n.sprintf)( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". %3$s: The current border style selection e.g. "solid".
+      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".', colorObject.name, ariaLabelValue, style) : (0, _i18n.sprintf)( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
       'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, ariaLabelValue);
     }
 
     if (colorValue) {
       const ariaLabelValue = getAriaLabelColorValue(colorValue);
-      return style ? (0, _i18n.sprintf)( // translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0". %2$s: The current border style selection e.g. "solid".
-      'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".', ariaLabelValue, style) : (0, _i18n.sprintf)( // translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+      return style ? (0, _i18n.sprintf)( // translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid".
+      'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".', ariaLabelValue, style) : (0, _i18n.sprintf)( // translators: %1$s: The color's hex code e.g: "#f00".
       'Border color and style picker. The currently selected color has a value of "%1$s".', ariaLabelValue);
     }
 
@@ -98,12 +96,12 @@ const getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {
   }
 
   if (colorObject) {
-    return (0, _i18n.sprintf)( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+    return (0, _i18n.sprintf)( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g: "#f00".
     'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, getAriaLabelColorValue(colorObject.color));
   }
 
   if (colorValue) {
-    return (0, _i18n.sprintf)( // translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+    return (0, _i18n.sprintf)( // translators: %1$s: The color's hex code e.g: "#f00".
     'Border color picker. The currently selected color has a value of "%1$s".', getAriaLabelColorValue(colorValue));
   }
 

package/build/border-control/border-control-dropdown/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"names":["getAriaLabelColorValue","colorValue","isHex","startsWith","displayValue","replace","split","join","getColorObject","colors","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","ariaLabelValue","name","BorderControlDropdown","props","forwardedRef","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","enableStyle","indicatorClassName","indicatorWrapperClassName","onReset","onColorChange","onStyleChange","popoverContentClassName","popoverControlsClassName","resetButtonClassName","showDropdownHeader","__unstablePopoverProps","otherProps","toggleAriaLabel","showResetButton","dropdownPosition","undefined","renderToggle","onToggle","renderContent","onClose","closeSmall","ConnectedBorderControlDropdown"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { HStack } from '../../h-stack';\nimport { VStack } from '../../v-stack';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControlDropdown } from './hook';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\n\nimport type { ColorObject } from '../../color-palette/types';\nimport { isMultiplePaletteArray } from '../../color-palette/utils';\nimport type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';\nimport type { ColorProps, DropdownProps } from '../types';\n\nconst getAriaLabelColorValue = ( colorValue: string ) => {\n\tconst isHex = colorValue.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = colorValue.replace( /^var\\((.+)\\)$/, '$1' );\n\n\treturn isHex ? displayValue.split( '' ).join( '-' ) : displayValue;\n};\n\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: ColorProps[ 'colors' ] | undefined\n) => {\n\tif ( ! colorValue || ! colors ) {\n\t\treturn;\n\t}\n\n\tif ( isMultiplePaletteArray( colors ) ) {\n\t\t// Multiple origins\n\t\tlet matchedColor;\n\n\t\tcolors.some( ( origin ) =>\n\t\t\torigin.colors.some( ( color ) => {\n\t\t\t\tif ( color.color === colorValue ) {\n\t\t\t\t\tmatchedColor = color;\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\treturn false;\n\t\t\t} )\n\t\t);\n\n\t\treturn matchedColor;\n\t}\n\n\t// Single origin\n\treturn colors.find( ( color ) => color.color === colorValue );\n};\n\nconst getToggleAriaLabel = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolorObject: ColorObject | undefined,\n\tstyle: CSSProperties[ 'borderStyle' ],\n\tisStyleEnabled: boolean\n) => {\n\tif ( isStyleEnabled ) {\n\t\tif ( colorObject ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( colorObject.color );\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code, with added hyphens e.g: \"#-f-0-0\". %3$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tariaLabelValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t  )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code, with added hyphens e.g: \"#-f-0-0\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tariaLabelValue\n\t\t\t\t  );\n\t\t}\n\n\t\tif ( colorValue ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( colorValue );\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code, with added hyphens e.g: \"#-f-0-0\". %2$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".',\n\t\t\t\t\t\tariaLabelValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t  )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code, with added hyphens e.g: \"#-f-0-0\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\".',\n\t\t\t\t\t\tariaLabelValue\n\t\t\t\t  );\n\t\t}\n\n\t\treturn __( 'Border color and style picker.' );\n\t}\n\n\tif ( colorObject ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code, with added hyphens e.g: \"#-f-0-0\".\n\t\t\t'Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\tcolorObject.name,\n\t\t\tgetAriaLabelColorValue( colorObject.color )\n\t\t);\n\t}\n\n\tif ( colorValue ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The color's hex code, with added hyphens e.g: \"#-f-0-0\".\n\t\t\t'Border color picker. The currently selected color has a value of \"%1$s\".',\n\t\t\tgetAriaLabelColorValue( colorValue )\n\t\t);\n\t}\n\n\treturn __( 'Border color picker.' );\n};\n\nconst BorderControlDropdown = (\n\tprops: WordPressComponentProps< DropdownProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__experimentalIsRenderedInSidebar,\n\t\tborder,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonReset,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\tshowDropdownHeader,\n\t\t__unstablePopoverProps,\n\t\t...otherProps\n\t} = useBorderControlDropdown( props );\n\n\tconst { color, style } = border || {};\n\tconst colorObject = getColorObject( color, colors );\n\n\tconst toggleAriaLabel = getToggleAriaLabel(\n\t\tcolor,\n\t\tcolorObject,\n\t\tstyle,\n\t\tenableStyle\n\t);\n\n\tconst showResetButton = color || ( style && style !== 'none' );\n\tconst dropdownPosition = __experimentalIsRenderedInSidebar\n\t\t? 'bottom left'\n\t\t: undefined;\n\n\tconst renderToggle: DropdownComponentProps[ 'renderToggle' ] = ( {\n\t\tonToggle,\n\t} ) => (\n\t\t<Button\n\t\t\tonClick={ onToggle }\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-label={ toggleAriaLabel }\n\t\t\ttooltipPosition={ dropdownPosition }\n\t\t\tlabel={ __( 'Border color and style picker' ) }\n\t\t\tshowTooltip={ true }\n\t\t>\n\t\t\t<span className={ indicatorWrapperClassName }>\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tclassName={ indicatorClassName }\n\t\t\t\t\tcolorValue={ color }\n\t\t\t\t/>\n\t\t\t</span>\n\t\t</Button>\n\t);\n\n\tconst renderContent: DropdownComponentProps[ 'renderContent' ] = ( {\n\t\tonClose,\n\t} ) => (\n\t\t<>\n\t\t\t<DropdownContentWrapper paddingSize=\"medium\">\n\t\t\t\t<VStack className={ popoverControlsClassName } spacing={ 6 }>\n\t\t\t\t\t{ showDropdownHeader ? (\n\t\t\t\t\t\t<HStack>\n\t\t\t\t\t\t\t<StyledLabel>{ __( 'Border color' ) }</StyledLabel>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\tlabel={ __( 'Close border color' ) }\n\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t) : undefined }\n\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\tclassName={ popoverContentClassName }\n\t\t\t\t\t\tvalue={ color }\n\t\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t\t{ enableStyle && (\n\t\t\t\t\t\t<BorderControlStylePicker\n\t\t\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\t\tonChange={ onStyleChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</DropdownContentWrapper>\n\t\t\t{ showResetButton && (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName={ resetButtonClassName }\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Reset to default' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\trenderToggle={ renderToggle }\n\t\t\trenderContent={ renderContent }\n\t\t\tpopoverProps={ {\n\t\t\t\t...__unstablePopoverProps,\n\t\t\t} }\n\t\t\t{ ...otherProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n};\n\nconst ConnectedBorderControlDropdown = contextConnect(\n\tBorderControlDropdown,\n\t'BorderControlDropdown'\n);\n\nexport default ConnectedBorderControlDropdown;\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control-dropdown/component.tsx"],"names":["getAriaLabelColorValue","colorValue","replace","getColorObject","colors","matchedColor","some","origin","color","find","getToggleAriaLabel","colorObject","style","isStyleEnabled","ariaLabelValue","name","BorderControlDropdown","props","forwardedRef","__experimentalIsRenderedInSidebar","border","disableCustomColors","enableAlpha","enableStyle","indicatorClassName","indicatorWrapperClassName","onReset","onColorChange","onStyleChange","popoverContentClassName","popoverControlsClassName","resetButtonClassName","showDropdownHeader","__unstablePopoverProps","otherProps","toggleAriaLabel","showResetButton","dropdownPosition","undefined","renderToggle","onToggle","renderContent","onClose","closeSmall","ConnectedBorderControlDropdown"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { HStack } from '../../h-stack';\nimport { VStack } from '../../v-stack';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderControlDropdown } from './hook';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\n\nimport type { ColorObject } from '../../color-palette/types';\nimport { isMultiplePaletteArray } from '../../color-palette/utils';\nimport type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';\nimport type { ColorProps, DropdownProps } from '../types';\n\nconst getAriaLabelColorValue = ( colorValue: string ) => {\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\treturn colorValue.replace( /^var\\((.+)\\)$/, '$1' );\n};\n\nconst getColorObject = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolors: ColorProps[ 'colors' ] | undefined\n) => {\n\tif ( ! colorValue || ! colors ) {\n\t\treturn;\n\t}\n\n\tif ( isMultiplePaletteArray( colors ) ) {\n\t\t// Multiple origins\n\t\tlet matchedColor;\n\n\t\tcolors.some( ( origin ) =>\n\t\t\torigin.colors.some( ( color ) => {\n\t\t\t\tif ( color.color === colorValue ) {\n\t\t\t\t\tmatchedColor = color;\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\treturn false;\n\t\t\t} )\n\t\t);\n\n\t\treturn matchedColor;\n\t}\n\n\t// Single origin\n\treturn colors.find( ( color ) => color.color === colorValue );\n};\n\nconst getToggleAriaLabel = (\n\tcolorValue: CSSProperties[ 'borderColor' ],\n\tcolorObject: ColorObject | undefined,\n\tstyle: CSSProperties[ 'borderStyle' ],\n\tisStyleEnabled: boolean\n) => {\n\tif ( isStyleEnabled ) {\n\t\tif ( colorObject ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( colorObject.color );\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\". %3$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tariaLabelValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t  )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g.: \"#f00:\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\t\t\t\tcolorObject.name,\n\t\t\t\t\t\tariaLabelValue\n\t\t\t\t  );\n\t\t}\n\n\t\tif ( colorValue ) {\n\t\t\tconst ariaLabelValue = getAriaLabelColorValue( colorValue );\n\t\t\treturn style\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code e.g.: \"#f00:\". %2$s: The current border style selection e.g. \"solid\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".',\n\t\t\t\t\t\tariaLabelValue,\n\t\t\t\t\t\tstyle\n\t\t\t\t  )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t// translators: %1$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t\t\t'Border color and style picker. The currently selected color has a value of \"%1$s\".',\n\t\t\t\t\t\tariaLabelValue\n\t\t\t\t  );\n\t\t}\n\n\t\treturn __( 'Border color and style picker.' );\n\t}\n\n\tif ( colorObject ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The name of the color e.g. \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t'Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".',\n\t\t\tcolorObject.name,\n\t\t\tgetAriaLabelColorValue( colorObject.color )\n\t\t);\n\t}\n\n\tif ( colorValue ) {\n\t\treturn sprintf(\n\t\t\t// translators: %1$s: The color's hex code e.g: \"#f00\".\n\t\t\t'Border color picker. The currently selected color has a value of \"%1$s\".',\n\t\t\tgetAriaLabelColorValue( colorValue )\n\t\t);\n\t}\n\n\treturn __( 'Border color picker.' );\n};\n\nconst BorderControlDropdown = (\n\tprops: WordPressComponentProps< DropdownProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\t__experimentalIsRenderedInSidebar,\n\t\tborder,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tindicatorClassName,\n\t\tindicatorWrapperClassName,\n\t\tonReset,\n\t\tonColorChange,\n\t\tonStyleChange,\n\t\tpopoverContentClassName,\n\t\tpopoverControlsClassName,\n\t\tresetButtonClassName,\n\t\tshowDropdownHeader,\n\t\t__unstablePopoverProps,\n\t\t...otherProps\n\t} = useBorderControlDropdown( props );\n\n\tconst { color, style } = border || {};\n\tconst colorObject = getColorObject( color, colors );\n\n\tconst toggleAriaLabel = getToggleAriaLabel(\n\t\tcolor,\n\t\tcolorObject,\n\t\tstyle,\n\t\tenableStyle\n\t);\n\n\tconst showResetButton = color || ( style && style !== 'none' );\n\tconst dropdownPosition = __experimentalIsRenderedInSidebar\n\t\t? 'bottom left'\n\t\t: undefined;\n\n\tconst renderToggle: DropdownComponentProps[ 'renderToggle' ] = ( {\n\t\tonToggle,\n\t} ) => (\n\t\t<Button\n\t\t\tonClick={ onToggle }\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-label={ toggleAriaLabel }\n\t\t\ttooltipPosition={ dropdownPosition }\n\t\t\tlabel={ __( 'Border color and style picker' ) }\n\t\t\tshowTooltip={ true }\n\t\t>\n\t\t\t<span className={ indicatorWrapperClassName }>\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tclassName={ indicatorClassName }\n\t\t\t\t\tcolorValue={ color }\n\t\t\t\t/>\n\t\t\t</span>\n\t\t</Button>\n\t);\n\n\tconst renderContent: DropdownComponentProps[ 'renderContent' ] = ( {\n\t\tonClose,\n\t} ) => (\n\t\t<>\n\t\t\t<DropdownContentWrapper paddingSize=\"medium\">\n\t\t\t\t<VStack className={ popoverControlsClassName } spacing={ 6 }>\n\t\t\t\t\t{ showDropdownHeader ? (\n\t\t\t\t\t\t<HStack>\n\t\t\t\t\t\t\t<StyledLabel>{ __( 'Border color' ) }</StyledLabel>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\tlabel={ __( 'Close border color' ) }\n\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t) : undefined }\n\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\tclassName={ popoverContentClassName }\n\t\t\t\t\t\tvalue={ color }\n\t\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t\t{ enableStyle && (\n\t\t\t\t\t\t<BorderControlStylePicker\n\t\t\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\t\tonChange={ onStyleChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</DropdownContentWrapper>\n\t\t\t{ showResetButton && (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName={ resetButtonClassName }\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Reset to default' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\trenderToggle={ renderToggle }\n\t\t\trenderContent={ renderContent }\n\t\t\tpopoverProps={ {\n\t\t\t\t...__unstablePopoverProps,\n\t\t\t} }\n\t\t\t{ ...otherProps }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n};\n\nconst ConnectedBorderControlDropdown = contextConnect(\n\tBorderControlDropdown,\n\t'BorderControlDropdown'\n);\n\nexport default ConnectedBorderControlDropdown;\n"]}

package/build/color-palette/index.js

@@ -183,8 +183,8 @@ function UnforwardedColorPalette(props, forwardedRef) {
   const isHex = value?.startsWith('#'); // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
 
   const displayValue = value?.replace(/^var\((.+)\)$/, '$1');
-  const customColorAccessibleLabel = !!displayValue ? (0, _i18n.sprintf)( // translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
-  (0, _i18n.__)('Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), buttonLabelName, isHex ? displayValue.split('').join('-') : displayValue) : (0, _i18n.__)('Custom color picker.');
+  const customColorAccessibleLabel = !!displayValue ? (0, _i18n.sprintf)( // translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
+  (0, _i18n.__)('Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), buttonLabelName, displayValue) : (0, _i18n.__)('Custom color picker.');
   const paletteCommonProps = {
     clearable,
     clearColor,

package/build/color-palette/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-palette/index.tsx"],"names":["namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","map","color","name","index","colordColor","isSelected","fill","contrast","backgroundColor","MultiplePalettes","headingLevel","length","colorPalette","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","placement","offset","UnforwardedColorPalette","forwardedRef","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","otherProps","normalizedColorValue","setNormalizedColorValue","undefined","customColorPaletteCallbackRef","node","hasMultipleColorOrigins","buttonLabelName","renderCustomColorPicker","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","split","join","paletteCommonProps","isOpen","onToggle","background","ColorPalette"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t  }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t  } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t...otherProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code, with added hyphens e.g: \"#-f-0-0\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tisHex ? displayValue.split( '' ).join( '-' ) : displayValue\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearable,\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t\tactions: !! clearable && (\n\t\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t\t{ __( 'Clear' ) }\n\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t),\n\t\theadingLevel,\n\t};\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...otherProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: 'No color selected' }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\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>\n\t\t\t\t\t\t\t\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasMultipleColorOrigins ? (\n\t\t\t\t<MultiplePalettes\n\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<SinglePalette\n\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-palette/index.tsx"],"names":["namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","map","color","name","index","colordColor","isSelected","fill","contrast","backgroundColor","MultiplePalettes","headingLevel","length","colorPalette","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","placement","offset","UnforwardedColorPalette","forwardedRef","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","otherProps","normalizedColorValue","setNormalizedColorValue","undefined","customColorPaletteCallbackRef","node","hasMultipleColorOrigins","buttonLabelName","renderCustomColorPicker","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","isOpen","onToggle","background","ColorPalette"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t  }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t  } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t...otherProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tdisplayValue\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearable,\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t\tactions: !! clearable && (\n\t\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t\t{ __( 'Clear' ) }\n\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t),\n\t\theadingLevel,\n\t};\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...otherProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: 'No color selected' }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\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>\n\t\t\t\t\t\t\t\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasMultipleColorOrigins ? (\n\t\t\t\t<MultiplePalettes\n\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<SinglePalette\n\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"]}

package/build/focal-point-picker/index.native.js

@@ -168,12 +168,13 @@ function FocalPointPicker(props) {
     }]
   }];
   const FOCAL_POINT_SIZE = 50;
-  const focalPointStyles = [_style.default.focalPoint, {
+
+  const focalPointStyles = _reactNative.StyleSheet.flatten([_style.default.focalPoint, {
     height: FOCAL_POINT_SIZE,
     marginLeft: -(FOCAL_POINT_SIZE / 2),
     marginTop: -(FOCAL_POINT_SIZE / 2),
     width: FOCAL_POINT_SIZE
-  }];
+  }]);
 
   const onTooltipPress = () => setTooltipVisible(false);
 
@@ -252,9 +253,10 @@ function FocalPointPicker(props) {
     text: (0, _i18n.__)('Drag to adjust focal point'),
     yOffset: -(FOCAL_POINT_SIZE / 2)
   }), (0, _element.createElement)(_focalPoint.default, {
-    height: _style.default.focalPoint?.height,
+    height: focalPointStyles.height,
     style: focalPointStyles,
-    width: _style.default.focalPoint?.width
+    testID: "focal-point-picker-handle",
+    width: focalPointStyles.width
   })))), (0, _element.createElement)(_components.UnitControl, {
     key: `xAxis-${sliderKey}`,
     label: (0, _i18n.__)('X-Axis Position'),

package/build/focal-point-picker/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/index.native.js"],"names":["MIN_POSITION_VALUE","MAX_POSITION_VALUE","FOCAL_POINT_UNITS","default","label","value","FocalPointPicker","props","focalPoint","onChange","shouldEnableBottomSheetScroll","url","isVideo","containerSize","setContainerSize","sliderKey","setSliderKey","displayPlaceholder","setDisplayPlaceholder","videoNaturalSize","setVideoNaturalSize","tooltipVisible","setTooltipVisible","locationPageOffsetX","locationPageOffsetY","videoRef","tooltipShown","pan","Animated","ValueXY","current","setValue","x","width","y","height","panResponder","PanResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","event","locationX","locationY","pageX","pageY","nativeEvent","extractOffset","onPanResponderMove","dx","dy","useNativeDriver","onPanResponderRelease","flattenOffset","toFixed","prevState","mediaBackground","styles","mediaBackgroundDark","imagePreviewStyles","mediaPlaceholder","image","videoPreviewStyles","aspectRatio","opacity","video","focalPointGroupStyles","focalPointGroup","transform","translateX","interpolate","inputRange","outputRange","extrapolate","translateY","FOCAL_POINT_SIZE","focalPointStyles","marginLeft","marginTop","onTooltipPress","onMediaLayout","layout","onImageDataLoad","onVideoLoad","naturalSize","seek","onXCoordinateChange","onYCoordinateChange","container","media","panHandlers","mediaContainer","uri","Math","round"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, PanResponder, View } from 'react-native';\nimport Video from 'react-native-video';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trequestFocalPointPickerTooltipShown,\n\tsetFocalPointPickerTooltipShown,\n} from '@wordpress/react-native-bridge';\nimport { __ } from '@wordpress/i18n';\nimport { Image, UnitControl } from '@wordpress/components';\nimport { useRef, useState, useMemo, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport FocalPoint from './focal-point';\nimport Tooltip from './tooltip';\nimport styles from './style.scss';\nimport { isVideoType } from './utils';\nimport { clamp } from '../utils/math';\n\nconst MIN_POSITION_VALUE = 0;\nconst MAX_POSITION_VALUE = 100;\nconst FOCAL_POINT_UNITS = [ { default: 50, label: '%', value: '%' } ];\n\nfunction FocalPointPicker( props ) {\n\tconst { focalPoint, onChange, shouldEnableBottomSheetScroll, url } = props;\n\n\tconst isVideo = isVideoType( url );\n\n\tconst [ containerSize, setContainerSize ] = useState( null );\n\tconst [ sliderKey, setSliderKey ] = useState( 0 );\n\tconst [ displayPlaceholder, setDisplayPlaceholder ] = useState( true );\n\tconst [ videoNaturalSize, setVideoNaturalSize ] = useState( null );\n\tconst [ tooltipVisible, setTooltipVisible ] = useState( false );\n\n\tconst locationPageOffsetX = useRef();\n\tconst locationPageOffsetY = useRef();\n\tconst videoRef = useRef( null );\n\n\tuseEffect( () => {\n\t\trequestFocalPointPickerTooltipShown( ( tooltipShown ) => {\n\t\t\tif ( ! tooltipShown ) {\n\t\t\t\tsetTooltipVisible( true );\n\t\t\t\tsetFocalPointPickerTooltipShown( true );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\t// Animated coordinates for drag handle.\n\tconst pan = useRef( new Animated.ValueXY() ).current;\n\n\t/**\n\t * Set drag handle position anytime focal point coordinates change.\n\t * E.g. initial render, dragging range sliders.\n\t */\n\tuseEffect( () => {\n\t\tif ( containerSize ) {\n\t\t\tpan.setValue( {\n\t\t\t\tx: focalPoint.x * containerSize.width,\n\t\t\t\ty: focalPoint.y * containerSize.height,\n\t\t\t} );\n\t\t}\n\t}, [ focalPoint, containerSize, pan ] );\n\n\t// Pan responder to manage drag handle interactivity.\n\tconst panResponder = useMemo(\n\t\t() =>\n\t\t\tPanResponder.create( {\n\t\t\t\tonStartShouldSetPanResponder: () => true,\n\t\t\t\tonStartShouldSetPanResponderCapture: () => true,\n\t\t\t\tonMoveShouldSetPanResponder: () => true,\n\t\t\t\tonMoveShouldSetPanResponderCapture: () => true,\n\n\t\t\t\tonPanResponderGrant: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t\tconst {\n\t\t\t\t\t\tlocationX: x,\n\t\t\t\t\t\tlocationY: y,\n\t\t\t\t\t\tpageX,\n\t\t\t\t\t\tpageY,\n\t\t\t\t\t} = event.nativeEvent;\n\t\t\t\t\tlocationPageOffsetX.current = pageX - x;\n\t\t\t\t\tlocationPageOffsetY.current = pageY - y;\n\t\t\t\t\tpan.setValue( { x, y } ); // Set cursor to tap location.\n\t\t\t\t\tpan.extractOffset(); // Set offset to current value.\n\t\t\t\t},\n\t\t\t\t// Move cursor to match delta drag.\n\t\t\t\tonPanResponderMove: Animated.event(\n\t\t\t\t\t[ null, { dx: pan.x, dy: pan.y } ],\n\t\t\t\t\t{ useNativeDriver: false }\n\t\t\t\t),\n\t\t\t\tonPanResponderRelease: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( true );\n\t\t\t\t\tpan.flattenOffset(); // Flatten offset into value.\n\t\t\t\t\tconst { pageX, pageY } = event.nativeEvent;\n\t\t\t\t\t// Ideally, x and y below are merely locationX and locationY from the\n\t\t\t\t\t// nativeEvent. However, we are required to compute these relative\n\t\t\t\t\t// coordinates to workaround a bug affecting Android's PanResponder.\n\t\t\t\t\t// Specifically, dragging the handle outside the bounds of the image\n\t\t\t\t\t// results in inaccurate locationX and locationY coordinates to be\n\t\t\t\t\t// reported. https://github.com/facebook/react-native/issues/15290#issuecomment-435494944\n\t\t\t\t\tconst x = pageX - locationPageOffsetX.current;\n\t\t\t\t\tconst y = pageY - locationPageOffsetY.current;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tx: clamp( x / containerSize?.width, 0, 1 ).toFixed( 2 ),\n\t\t\t\t\t\ty: clamp( y / containerSize?.height, 0, 1 ).toFixed(\n\t\t\t\t\t\t\t2\n\t\t\t\t\t\t),\n\t\t\t\t\t} );\n\t\t\t\t\t// Slider (child of RangeCell) is uncontrolled, so we must increment a\n\t\t\t\t\t// key to re-mount and sync the pan gesture values to the sliders\n\t\t\t\t\t// https://github.com/callstack/react-native-slider/tree/v3.0.3#value\n\t\t\t\t\tsetSliderKey( ( prevState ) => prevState + 1 );\n\t\t\t\t},\n\t\t\t} ),\n\t\t[ containerSize, pan, onChange, shouldEnableBottomSheetScroll ]\n\t);\n\n\tconst mediaBackground = usePreferredColorSchemeStyle(\n\t\tstyles.mediaBackground,\n\t\tstyles.mediaBackgroundDark\n\t);\n\tconst imagePreviewStyles = [\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t\tstyles.image,\n\t];\n\tconst videoPreviewStyles = [\n\t\t{\n\t\t\taspectRatio:\n\t\t\t\tvideoNaturalSize &&\n\t\t\t\tvideoNaturalSize.width / videoNaturalSize.height,\n\t\t\t// Hide Video component since it has black background while loading the source\n\t\t\topacity: displayPlaceholder ? 0 : 1,\n\t\t},\n\t\tstyles.video,\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t];\n\tconst focalPointGroupStyles = [\n\t\tstyles.focalPointGroup,\n\t\t{\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateX: pan.x.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttranslateY: pan.y.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t];\n\tconst FOCAL_POINT_SIZE = 50;\n\tconst focalPointStyles = [\n\t\tstyles.focalPoint,\n\t\t{\n\t\t\theight: FOCAL_POINT_SIZE,\n\t\t\tmarginLeft: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\tmarginTop: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\twidth: FOCAL_POINT_SIZE,\n\t\t},\n\t];\n\n\tconst onTooltipPress = () => setTooltipVisible( false );\n\tconst onMediaLayout = ( event ) => {\n\t\tconst { height, width } = event.nativeEvent.layout;\n\n\t\tif (\n\t\t\twidth !== 0 &&\n\t\t\theight !== 0 &&\n\t\t\t( containerSize?.width !== width ||\n\t\t\t\tcontainerSize?.height !== height )\n\t\t) {\n\t\t\tsetContainerSize( { width, height } );\n\t\t}\n\t};\n\tconst onImageDataLoad = () => setDisplayPlaceholder( false );\n\tconst onVideoLoad = ( event ) => {\n\t\tconst { height, width } = event.naturalSize;\n\t\tsetVideoNaturalSize( { height, width } );\n\t\tsetDisplayPlaceholder( false );\n\t\t// Avoid invisible, paused video on Android, presumably related to\n\t\t// https://github.com/react-native-video/react-native-video/issues/1979\n\t\tvideoRef?.current.seek( 0 );\n\t};\n\tconst onXCoordinateChange = ( x ) =>\n\t\tonChange( { x: ( x / 100 ).toFixed( 2 ) } );\n\tconst onYCoordinateChange = ( y ) =>\n\t\tonChange( { y: ( y / 100 ).toFixed( 2 ) } );\n\n\treturn (\n\t\t<View style={ styles.container }>\n\t\t\t<Tooltip onPress={ onTooltipPress } visible={ tooltipVisible }>\n\t\t\t\t<View style={ [ styles.media, mediaBackground ] }>\n\t\t\t\t\t<View\n\t\t\t\t\t\t{ ...panResponder.panHandlers }\n\t\t\t\t\t\tonLayout={ onMediaLayout }\n\t\t\t\t\t\tstyle={ styles.mediaContainer }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isVideo && (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\teditButton={ false }\n\t\t\t\t\t\t\t\thighlightSelected={ false }\n\t\t\t\t\t\t\t\tisSelected={ ! displayPlaceholder }\n\t\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t\t\tstyle={ imagePreviewStyles }\n\t\t\t\t\t\t\t\tonImageDataLoad={ onImageDataLoad }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ isVideo && (\n\t\t\t\t\t\t\t<Video\n\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\tpaused\n\t\t\t\t\t\t\t\tdisableFocus\n\t\t\t\t\t\t\t\tonLoad={ onVideoLoad }\n\t\t\t\t\t\t\t\tref={ videoRef }\n\t\t\t\t\t\t\t\tresizeMode=\"contain\"\n\t\t\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t\t\t\tstyle={ videoPreviewStyles }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! displayPlaceholder && (\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\t\t\t\tstyle={ focalPointGroupStyles }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tooltip.Label\n\t\t\t\t\t\t\t\t\ttext={ __( 'Drag to adjust focal point' ) }\n\t\t\t\t\t\t\t\t\tyOffset={ -( FOCAL_POINT_SIZE / 2 ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t\t\t\theight={ styles.focalPoint?.height }\n\t\t\t\t\t\t\t\t\tstyle={ focalPointStyles }\n\t\t\t\t\t\t\t\t\twidth={ styles.focalPoint?.width }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Animated.View>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</View>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `xAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'X-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onXCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.x * 100 ) }\n\t\t\t\t/>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `yAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'Y-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onYCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.y * 100 ) }\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t</View>\n\t);\n}\n\nexport default FocalPointPicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/index.native.js"],"names":["MIN_POSITION_VALUE","MAX_POSITION_VALUE","FOCAL_POINT_UNITS","default","label","value","FocalPointPicker","props","focalPoint","onChange","shouldEnableBottomSheetScroll","url","isVideo","containerSize","setContainerSize","sliderKey","setSliderKey","displayPlaceholder","setDisplayPlaceholder","videoNaturalSize","setVideoNaturalSize","tooltipVisible","setTooltipVisible","locationPageOffsetX","locationPageOffsetY","videoRef","tooltipShown","pan","Animated","ValueXY","current","setValue","x","width","y","height","panResponder","PanResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","event","locationX","locationY","pageX","pageY","nativeEvent","extractOffset","onPanResponderMove","dx","dy","useNativeDriver","onPanResponderRelease","flattenOffset","toFixed","prevState","mediaBackground","styles","mediaBackgroundDark","imagePreviewStyles","mediaPlaceholder","image","videoPreviewStyles","aspectRatio","opacity","video","focalPointGroupStyles","focalPointGroup","transform","translateX","interpolate","inputRange","outputRange","extrapolate","translateY","FOCAL_POINT_SIZE","focalPointStyles","StyleSheet","flatten","marginLeft","marginTop","onTooltipPress","onMediaLayout","layout","onImageDataLoad","onVideoLoad","naturalSize","seek","onXCoordinateChange","onYCoordinateChange","container","media","panHandlers","mediaContainer","uri","Math","round"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, PanResponder, StyleSheet, View } from 'react-native';\nimport Video from 'react-native-video';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trequestFocalPointPickerTooltipShown,\n\tsetFocalPointPickerTooltipShown,\n} from '@wordpress/react-native-bridge';\nimport { __ } from '@wordpress/i18n';\nimport { Image, UnitControl } from '@wordpress/components';\nimport { useRef, useState, useMemo, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport FocalPoint from './focal-point';\nimport Tooltip from './tooltip';\nimport styles from './style.scss';\nimport { isVideoType } from './utils';\nimport { clamp } from '../utils/math';\n\nconst MIN_POSITION_VALUE = 0;\nconst MAX_POSITION_VALUE = 100;\nconst FOCAL_POINT_UNITS = [ { default: 50, label: '%', value: '%' } ];\n\nfunction FocalPointPicker( props ) {\n\tconst { focalPoint, onChange, shouldEnableBottomSheetScroll, url } = props;\n\n\tconst isVideo = isVideoType( url );\n\n\tconst [ containerSize, setContainerSize ] = useState( null );\n\tconst [ sliderKey, setSliderKey ] = useState( 0 );\n\tconst [ displayPlaceholder, setDisplayPlaceholder ] = useState( true );\n\tconst [ videoNaturalSize, setVideoNaturalSize ] = useState( null );\n\tconst [ tooltipVisible, setTooltipVisible ] = useState( false );\n\n\tconst locationPageOffsetX = useRef();\n\tconst locationPageOffsetY = useRef();\n\tconst videoRef = useRef( null );\n\n\tuseEffect( () => {\n\t\trequestFocalPointPickerTooltipShown( ( tooltipShown ) => {\n\t\t\tif ( ! tooltipShown ) {\n\t\t\t\tsetTooltipVisible( true );\n\t\t\t\tsetFocalPointPickerTooltipShown( true );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\t// Animated coordinates for drag handle.\n\tconst pan = useRef( new Animated.ValueXY() ).current;\n\n\t/**\n\t * Set drag handle position anytime focal point coordinates change.\n\t * E.g. initial render, dragging range sliders.\n\t */\n\tuseEffect( () => {\n\t\tif ( containerSize ) {\n\t\t\tpan.setValue( {\n\t\t\t\tx: focalPoint.x * containerSize.width,\n\t\t\t\ty: focalPoint.y * containerSize.height,\n\t\t\t} );\n\t\t}\n\t}, [ focalPoint, containerSize, pan ] );\n\n\t// Pan responder to manage drag handle interactivity.\n\tconst panResponder = useMemo(\n\t\t() =>\n\t\t\tPanResponder.create( {\n\t\t\t\tonStartShouldSetPanResponder: () => true,\n\t\t\t\tonStartShouldSetPanResponderCapture: () => true,\n\t\t\t\tonMoveShouldSetPanResponder: () => true,\n\t\t\t\tonMoveShouldSetPanResponderCapture: () => true,\n\n\t\t\t\tonPanResponderGrant: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t\tconst {\n\t\t\t\t\t\tlocationX: x,\n\t\t\t\t\t\tlocationY: y,\n\t\t\t\t\t\tpageX,\n\t\t\t\t\t\tpageY,\n\t\t\t\t\t} = event.nativeEvent;\n\t\t\t\t\tlocationPageOffsetX.current = pageX - x;\n\t\t\t\t\tlocationPageOffsetY.current = pageY - y;\n\t\t\t\t\tpan.setValue( { x, y } ); // Set cursor to tap location.\n\t\t\t\t\tpan.extractOffset(); // Set offset to current value.\n\t\t\t\t},\n\t\t\t\t// Move cursor to match delta drag.\n\t\t\t\tonPanResponderMove: Animated.event(\n\t\t\t\t\t[ null, { dx: pan.x, dy: pan.y } ],\n\t\t\t\t\t{ useNativeDriver: false }\n\t\t\t\t),\n\t\t\t\tonPanResponderRelease: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( true );\n\t\t\t\t\tpan.flattenOffset(); // Flatten offset into value.\n\t\t\t\t\tconst { pageX, pageY } = event.nativeEvent;\n\t\t\t\t\t// Ideally, x and y below are merely locationX and locationY from the\n\t\t\t\t\t// nativeEvent. However, we are required to compute these relative\n\t\t\t\t\t// coordinates to workaround a bug affecting Android's PanResponder.\n\t\t\t\t\t// Specifically, dragging the handle outside the bounds of the image\n\t\t\t\t\t// results in inaccurate locationX and locationY coordinates to be\n\t\t\t\t\t// reported. https://github.com/facebook/react-native/issues/15290#issuecomment-435494944\n\t\t\t\t\tconst x = pageX - locationPageOffsetX.current;\n\t\t\t\t\tconst y = pageY - locationPageOffsetY.current;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tx: clamp( x / containerSize?.width, 0, 1 ).toFixed( 2 ),\n\t\t\t\t\t\ty: clamp( y / containerSize?.height, 0, 1 ).toFixed(\n\t\t\t\t\t\t\t2\n\t\t\t\t\t\t),\n\t\t\t\t\t} );\n\t\t\t\t\t// Slider (child of RangeCell) is uncontrolled, so we must increment a\n\t\t\t\t\t// key to re-mount and sync the pan gesture values to the sliders\n\t\t\t\t\t// https://github.com/callstack/react-native-slider/tree/v3.0.3#value\n\t\t\t\t\tsetSliderKey( ( prevState ) => prevState + 1 );\n\t\t\t\t},\n\t\t\t} ),\n\t\t[ containerSize, pan, onChange, shouldEnableBottomSheetScroll ]\n\t);\n\n\tconst mediaBackground = usePreferredColorSchemeStyle(\n\t\tstyles.mediaBackground,\n\t\tstyles.mediaBackgroundDark\n\t);\n\tconst imagePreviewStyles = [\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t\tstyles.image,\n\t];\n\tconst videoPreviewStyles = [\n\t\t{\n\t\t\taspectRatio:\n\t\t\t\tvideoNaturalSize &&\n\t\t\t\tvideoNaturalSize.width / videoNaturalSize.height,\n\t\t\t// Hide Video component since it has black background while loading the source\n\t\t\topacity: displayPlaceholder ? 0 : 1,\n\t\t},\n\t\tstyles.video,\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t];\n\tconst focalPointGroupStyles = [\n\t\tstyles.focalPointGroup,\n\t\t{\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateX: pan.x.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttranslateY: pan.y.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t];\n\tconst FOCAL_POINT_SIZE = 50;\n\tconst focalPointStyles = StyleSheet.flatten( [\n\t\tstyles.focalPoint,\n\t\t{\n\t\t\theight: FOCAL_POINT_SIZE,\n\t\t\tmarginLeft: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\tmarginTop: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\twidth: FOCAL_POINT_SIZE,\n\t\t},\n\t] );\n\n\tconst onTooltipPress = () => setTooltipVisible( false );\n\tconst onMediaLayout = ( event ) => {\n\t\tconst { height, width } = event.nativeEvent.layout;\n\n\t\tif (\n\t\t\twidth !== 0 &&\n\t\t\theight !== 0 &&\n\t\t\t( containerSize?.width !== width ||\n\t\t\t\tcontainerSize?.height !== height )\n\t\t) {\n\t\t\tsetContainerSize( { width, height } );\n\t\t}\n\t};\n\tconst onImageDataLoad = () => setDisplayPlaceholder( false );\n\tconst onVideoLoad = ( event ) => {\n\t\tconst { height, width } = event.naturalSize;\n\t\tsetVideoNaturalSize( { height, width } );\n\t\tsetDisplayPlaceholder( false );\n\t\t// Avoid invisible, paused video on Android, presumably related to\n\t\t// https://github.com/react-native-video/react-native-video/issues/1979\n\t\tvideoRef?.current.seek( 0 );\n\t};\n\tconst onXCoordinateChange = ( x ) =>\n\t\tonChange( { x: ( x / 100 ).toFixed( 2 ) } );\n\tconst onYCoordinateChange = ( y ) =>\n\t\tonChange( { y: ( y / 100 ).toFixed( 2 ) } );\n\n\treturn (\n\t\t<View style={ styles.container }>\n\t\t\t<Tooltip onPress={ onTooltipPress } visible={ tooltipVisible }>\n\t\t\t\t<View style={ [ styles.media, mediaBackground ] }>\n\t\t\t\t\t<View\n\t\t\t\t\t\t{ ...panResponder.panHandlers }\n\t\t\t\t\t\tonLayout={ onMediaLayout }\n\t\t\t\t\t\tstyle={ styles.mediaContainer }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isVideo && (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\teditButton={ false }\n\t\t\t\t\t\t\t\thighlightSelected={ false }\n\t\t\t\t\t\t\t\tisSelected={ ! displayPlaceholder }\n\t\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t\t\tstyle={ imagePreviewStyles }\n\t\t\t\t\t\t\t\tonImageDataLoad={ onImageDataLoad }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ isVideo && (\n\t\t\t\t\t\t\t<Video\n\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\tpaused\n\t\t\t\t\t\t\t\tdisableFocus\n\t\t\t\t\t\t\t\tonLoad={ onVideoLoad }\n\t\t\t\t\t\t\t\tref={ videoRef }\n\t\t\t\t\t\t\t\tresizeMode=\"contain\"\n\t\t\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t\t\t\tstyle={ videoPreviewStyles }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! displayPlaceholder && (\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\t\t\t\tstyle={ focalPointGroupStyles }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tooltip.Label\n\t\t\t\t\t\t\t\t\ttext={ __( 'Drag to adjust focal point' ) }\n\t\t\t\t\t\t\t\t\tyOffset={ -( FOCAL_POINT_SIZE / 2 ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t\t\t\theight={ focalPointStyles.height }\n\t\t\t\t\t\t\t\t\tstyle={ focalPointStyles }\n\t\t\t\t\t\t\t\t\ttestID=\"focal-point-picker-handle\"\n\t\t\t\t\t\t\t\t\twidth={ focalPointStyles.width }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Animated.View>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</View>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `xAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'X-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onXCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.x * 100 ) }\n\t\t\t\t/>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `yAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'Y-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onYCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.y * 100 ) }\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t</View>\n\t);\n}\n\nexport default FocalPointPicker;\n"]}

package/build/menu-items-choice/index.js

@@ -67,6 +67,7 @@ function MenuItemsChoice({
     return (0, _element.createElement)(_menuItem.default, {
       key: item.value,
       role: "menuitemradio",
+      disabled: item.disabled,
       icon: isSelected && _icons.check,
       info: item.info,
       isSelected: isSelected,

package/build/menu-items-choice/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/menu-items-choice/index.tsx"],"names":["noop","MenuItemsChoice","choices","onHover","onSelect","value","map","item","isSelected","check","info","shortcut","label"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAMA,IAAI,GAAG,MAAM,CAAE,CAArB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASC,eAAT,CAA0B;AACzBC,EAAAA,OAAO,GAAG,EADe;AAEzBC,EAAAA,OAAO,GAAGH,IAFe;AAGzBI,EAAAA,QAHyB;AAIzBC,EAAAA;AAJyB,CAA1B,EAK0B;AACzB,SACC,qDACGH,OAAO,CAACI,GAAR,CAAeC,IAAF,IAAY;AAC1B,UAAMC,UAAU,GAAGH,KAAK,KAAKE,IAAI,CAACF,KAAlC;AACA,WACC,4BAAC,iBAAD;AACC,MAAA,GAAG,EAAGE,IAAI,CAACF,KADZ;AAEC,MAAA,IAAI,EAAC,eAFN;AAGC,MAAA,IAAI,EAAGG,UAAU,IAAIC,YAHtB;AAIC,MAAA,IAAI,EAAGF,IAAI,CAACG,IAJb;AAKC,MAAA,UAAU,EAAGF,UALd;AAMC,MAAA,QAAQ,EAAGD,IAAI,CAACI,QANjB;AAOC,MAAA,SAAS,EAAC,8BAPX;AAQC,MAAA,OAAO,EAAG,MAAM;AACf,YAAK,CAAEH,UAAP,EAAoB;AACnBJ,UAAAA,QAAQ,CAAEG,IAAI,CAACF,KAAP,CAAR;AACA;AACD,OAZF;AAaC,MAAA,YAAY,EAAG,MAAMF,OAAO,CAAEI,IAAI,CAACF,KAAP,CAb7B;AAcC,MAAA,YAAY,EAAG,MAAMF,OAAO,CAAE,IAAF,CAd7B;AAeC,oBAAaI,IAAI,CAAE,YAAF;AAflB,OAiBGA,IAAI,CAACK,KAjBR,CADD;AAqBA,GAvBC,CADH,CADD;AA4BA;;eAEcX,e","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport MenuItem from '../menu-item';\nimport type { MenuItemsChoiceProps } from './types';\n\nconst noop = () => {};\n\n/**\n * `MenuItemsChoice` functions similarly to a set of `MenuItem`s, but allows the user to select one option from a set of multiple choices.\n *\n *\n * ```jsx\n * import { MenuGroup, MenuItemsChoice } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyMenuItemsChoice = () => {\n * \tconst [ mode, setMode ] = useState( 'visual' );\n * \tconst choices = [\n * \t\t{\n * \t\t\tvalue: 'visual',\n * \t\t\tlabel: 'Visual editor',\n * \t\t},\n * \t\t{\n * \t\t\tvalue: 'text',\n * \t\t\tlabel: 'Code editor',\n * \t\t},\n * \t];\n *\n * \treturn (\n * \t\t<MenuGroup label=\"Editor\">\n * \t\t\t<MenuItemsChoice\n * \t\t\t\tchoices={ choices }\n * \t\t\t\tvalue={ mode }\n * \t\t\t\tonSelect={ ( newMode ) => setMode( newMode ) }\n * \t\t\t/>\n * \t\t</MenuGroup>\n * \t);\n * };\n * ```\n */\nfunction MenuItemsChoice( {\n\tchoices = [],\n\tonHover = noop,\n\tonSelect,\n\tvalue,\n}: MenuItemsChoiceProps ) {\n\treturn (\n\t\t<>\n\t\t\t{ choices.map( ( item ) => {\n\t\t\t\tconst isSelected = value === item.value;\n\t\t\t\treturn (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tkey={ item.value }\n\t\t\t\t\t\trole=\"menuitemradio\"\n\t\t\t\t\t\ticon={ isSelected && check }\n\t\t\t\t\t\tinfo={ item.info }\n\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\tshortcut={ item.shortcut }\n\t\t\t\t\t\tclassName=\"components-menu-items-choice\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tif ( ! isSelected ) {\n\t\t\t\t\t\t\t\tonSelect( item.value );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonMouseEnter={ () => onHover( item.value ) }\n\t\t\t\t\t\tonMouseLeave={ () => onHover( null ) }\n\t\t\t\t\t\taria-label={ item[ 'aria-label' ] }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ item.label }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n\nexport default MenuItemsChoice;\n"]}
+{"version":3,"sources":["@wordpress/components/src/menu-items-choice/index.tsx"],"names":["noop","MenuItemsChoice","choices","onHover","onSelect","value","map","item","isSelected","disabled","check","info","shortcut","label"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAMA,IAAI,GAAG,MAAM,CAAE,CAArB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASC,eAAT,CAA0B;AACzBC,EAAAA,OAAO,GAAG,EADe;AAEzBC,EAAAA,OAAO,GAAGH,IAFe;AAGzBI,EAAAA,QAHyB;AAIzBC,EAAAA;AAJyB,CAA1B,EAK0B;AACzB,SACC,qDACGH,OAAO,CAACI,GAAR,CAAeC,IAAF,IAAY;AAC1B,UAAMC,UAAU,GAAGH,KAAK,KAAKE,IAAI,CAACF,KAAlC;AACA,WACC,4BAAC,iBAAD;AACC,MAAA,GAAG,EAAGE,IAAI,CAACF,KADZ;AAEC,MAAA,IAAI,EAAC,eAFN;AAGC,MAAA,QAAQ,EAAGE,IAAI,CAACE,QAHjB;AAIC,MAAA,IAAI,EAAGD,UAAU,IAAIE,YAJtB;AAKC,MAAA,IAAI,EAAGH,IAAI,CAACI,IALb;AAMC,MAAA,UAAU,EAAGH,UANd;AAOC,MAAA,QAAQ,EAAGD,IAAI,CAACK,QAPjB;AAQC,MAAA,SAAS,EAAC,8BARX;AASC,MAAA,OAAO,EAAG,MAAM;AACf,YAAK,CAAEJ,UAAP,EAAoB;AACnBJ,UAAAA,QAAQ,CAAEG,IAAI,CAACF,KAAP,CAAR;AACA;AACD,OAbF;AAcC,MAAA,YAAY,EAAG,MAAMF,OAAO,CAAEI,IAAI,CAACF,KAAP,CAd7B;AAeC,MAAA,YAAY,EAAG,MAAMF,OAAO,CAAE,IAAF,CAf7B;AAgBC,oBAAaI,IAAI,CAAE,YAAF;AAhBlB,OAkBGA,IAAI,CAACM,KAlBR,CADD;AAsBA,GAxBC,CADH,CADD;AA6BA;;eAEcZ,e","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport MenuItem from '../menu-item';\nimport type { MenuItemsChoiceProps } from './types';\n\nconst noop = () => {};\n\n/**\n * `MenuItemsChoice` functions similarly to a set of `MenuItem`s, but allows the user to select one option from a set of multiple choices.\n *\n *\n * ```jsx\n * import { MenuGroup, MenuItemsChoice } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyMenuItemsChoice = () => {\n * \tconst [ mode, setMode ] = useState( 'visual' );\n * \tconst choices = [\n * \t\t{\n * \t\t\tvalue: 'visual',\n * \t\t\tlabel: 'Visual editor',\n * \t\t},\n * \t\t{\n * \t\t\tvalue: 'text',\n * \t\t\tlabel: 'Code editor',\n * \t\t},\n * \t];\n *\n * \treturn (\n * \t\t<MenuGroup label=\"Editor\">\n * \t\t\t<MenuItemsChoice\n * \t\t\t\tchoices={ choices }\n * \t\t\t\tvalue={ mode }\n * \t\t\t\tonSelect={ ( newMode ) => setMode( newMode ) }\n * \t\t\t/>\n * \t\t</MenuGroup>\n * \t);\n * };\n * ```\n */\nfunction MenuItemsChoice( {\n\tchoices = [],\n\tonHover = noop,\n\tonSelect,\n\tvalue,\n}: MenuItemsChoiceProps ) {\n\treturn (\n\t\t<>\n\t\t\t{ choices.map( ( item ) => {\n\t\t\t\tconst isSelected = value === item.value;\n\t\t\t\treturn (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tkey={ item.value }\n\t\t\t\t\t\trole=\"menuitemradio\"\n\t\t\t\t\t\tdisabled={ item.disabled }\n\t\t\t\t\t\ticon={ isSelected && check }\n\t\t\t\t\t\tinfo={ item.info }\n\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\tshortcut={ item.shortcut }\n\t\t\t\t\t\tclassName=\"components-menu-items-choice\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tif ( ! isSelected ) {\n\t\t\t\t\t\t\t\tonSelect( item.value );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonMouseEnter={ () => onHover( item.value ) }\n\t\t\t\t\t\tonMouseLeave={ () => onHover( null ) }\n\t\t\t\t\t\taria-label={ item[ 'aria-label' ] }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ item.label }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n\nexport default MenuItemsChoice;\n"]}

package/build/mobile/bottom-sheet/bottom-sheet-navigation/bottom-sheet-navigation-context.native.js

@@ -13,7 +13,9 @@ var _element = require("@wordpress/element");
 // Navigation context in BottomSheet is necessary for controlling the
 // height of navigation container.
 const BottomSheetNavigationContext = (0, _element.createContext)({
-  currentHeight: 1,
+  currentHeight: {
+    value: 0
+  },
   setHeight: () => {}
 });
 exports.BottomSheetNavigationContext = BottomSheetNavigationContext;

package/build/mobile/bottom-sheet/bottom-sheet-navigation/bottom-sheet-navigation-context.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/mobile/bottom-sheet/bottom-sheet-navigation/bottom-sheet-navigation-context.native.js"],"names":["BottomSheetNavigationContext","currentHeight","setHeight","Provider","BottomSheetNavigationProvider","Consumer","BottomSheetNavigationConsumer"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGA;AACA;AACO,MAAMA,4BAA4B,GAAG,4BAAe;AAC1DC,EAAAA,aAAa,EAAE,CAD2C;AAE1DC,EAAAA,SAAS,EAAE,MAAM,CAAE;AAFuC,CAAf,CAArC;;AAKA,MAAM;AACZC,EAAAA,QAAQ,EAAEC,6BADE;AAEZC,EAAAA,QAAQ,EAAEC;AAFE,IAGTN,4BAHG","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n// Navigation context in BottomSheet is necessary for controlling the\n// height of navigation container.\nexport const BottomSheetNavigationContext = createContext( {\n\tcurrentHeight: 1,\n\tsetHeight: () => {},\n} );\n\nexport const {\n\tProvider: BottomSheetNavigationProvider,\n\tConsumer: BottomSheetNavigationConsumer,\n} = BottomSheetNavigationContext;\n"]}
+{"version":3,"sources":["@wordpress/components/src/mobile/bottom-sheet/bottom-sheet-navigation/bottom-sheet-navigation-context.native.js"],"names":["BottomSheetNavigationContext","currentHeight","value","setHeight","Provider","BottomSheetNavigationProvider","Consumer","BottomSheetNavigationConsumer"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGA;AACA;AACO,MAAMA,4BAA4B,GAAG,4BAAe;AAC1DC,EAAAA,aAAa,EAAE;AAAEC,IAAAA,KAAK,EAAE;AAAT,GAD2C;AAE1DC,EAAAA,SAAS,EAAE,MAAM,CAAE;AAFuC,CAAf,CAArC;;AAKA,MAAM;AACZC,EAAAA,QAAQ,EAAEC,6BADE;AAEZC,EAAAA,QAAQ,EAAEC;AAFE,IAGTP,4BAHG","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n// Navigation context in BottomSheet is necessary for controlling the\n// height of navigation container.\nexport const BottomSheetNavigationContext = createContext( {\n\tcurrentHeight: { value: 0 },\n\tsetHeight: () => {},\n} );\n\nexport const {\n\tProvider: BottomSheetNavigationProvider,\n\tConsumer: BottomSheetNavigationConsumer,\n} = BottomSheetNavigationContext;\n"]}

package/build/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js

@@ -9,20 +9,24 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _reactNative = require("react-native");
-
 var _native = require("@react-navigation/native");
 
 var _stack = require("@react-navigation/stack");
 
-var _compose = require("@wordpress/compose");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 
-var _layoutAnimation = require("../../layout-animation");
+var _compose = require("@wordpress/compose");
 
 var _bottomSheetNavigationContext = require("./bottom-sheet-navigation-context");
 
+var _bottomSheetContext = require("../bottom-sheet-context");
+
 var _styles = _interopRequireDefault(require("./styles.scss"));
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * External dependencies
  */
@@ -38,7 +42,7 @@ const AnimationSpec = {
   animation: 'timing',
   config: {
     duration: 200,
-    easing: _reactNative.Easing.ease
+    easing: _reactNativeReanimated.Easing.ease
   }
 };
 
@@ -61,48 +65,53 @@ const options = {
   gestureEnabled: false,
   cardStyleInterpolator: fadeConfig
 };
-const ANIMATION_DURATION = 190;
+const HEIGHT_ANIMATION_DURATION = 300;
+const DEFAULT_HEIGHT = 1;
 
 function BottomSheetNavigationContainer({
   children,
   animate,
   main,
   theme,
-  style
+  style,
+  testID
 }) {
   const Stack = (0, _element.useRef)((0, _stack.createStackNavigator)()).current;
-  const context = (0, _element.useContext)(_bottomSheetNavigationContext.BottomSheetNavigationContext);
-  const [currentHeight, setCurrentHeight] = (0, _element.useState)(context.currentHeight || 1);
+  const navigationContext = (0, _element.useContext)(_bottomSheetNavigationContext.BottomSheetNavigationContext);
+  const {
+    maxHeight: sheetMaxHeight,
+    isMaxHeightSet: isSheetMaxHeightSet
+  } = (0, _element.useContext)(_bottomSheetContext.BottomSheetContext);
+  const currentHeight = (0, _reactNativeReanimated.useSharedValue)(navigationContext.currentHeight?.value || DEFAULT_HEIGHT);
   const backgroundStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.background, _styles.default.backgroundDark);
-
-  const _theme = theme || { ..._native.DefaultTheme,
+  const defaultTheme = (0, _element.useMemo)(() => ({ ..._native.DefaultTheme,
     colors: { ..._native.DefaultTheme.colors,
       background: backgroundStyle.backgroundColor
     }
-  };
+  }), [backgroundStyle.backgroundColor]);
 
-  const setHeight = (0, _element.useCallback)(height => {
-    // The screen is fullHeight.
-    if (typeof height === 'string' && typeof height !== typeof currentHeight) {
-      (0, _layoutAnimation.performLayoutAnimation)(ANIMATION_DURATION);
-      setCurrentHeight(height);
-      return;
-    }
+  const _theme = theme || defaultTheme;
 
-    if (height > 1 && Math.round(height) !== Math.round(currentHeight)) {
-      if (currentHeight === 1) {
-        setCurrentHeight(height);
-      } else if (animate) {
-        (0, _layoutAnimation.performLayoutAnimation)(ANIMATION_DURATION);
-        setCurrentHeight(height);
+  const setHeight = (0, _element.useCallback)(height => {
+    if (height > DEFAULT_HEIGHT && Math.round(height) !== Math.round(currentHeight.value)) {
+      // If max height is set in the bottom sheet, we clamp
+      // the new height using that value.
+      const newHeight = isSheetMaxHeightSet ? Math.min(sheetMaxHeight, height) : height;
+      const shouldAnimate = animate && currentHeight.value !== DEFAULT_HEIGHT;
+
+      if (shouldAnimate) {
+        currentHeight.value = (0, _reactNativeReanimated.withTiming)(newHeight, {
+          duration: HEIGHT_ANIMATION_DURATION,
+          easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)
+        });
       } else {
-        setCurrentHeight(height);
+        currentHeight.value = newHeight;
       }
     }
-  }, // Disable reason: deferring this refactor to the native team.
-  // see https://github.com/WordPress/gutenberg/pull/41166
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [currentHeight]);
+  }, [animate, currentHeight, isSheetMaxHeightSet, sheetMaxHeight]);
+  const animatedStyles = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    height: currentHeight.value
+  }));
   const screens = (0, _element.useMemo)(() => {
     return _element.Children.map(children, child => {
       let screen = child;
@@ -122,15 +131,12 @@ function BottomSheetNavigationContainer({
         ...otherProps,
         children: () => screen
       });
-    }); // Disable reason: deferring this refactor to the native team.
-    // see https://github.com/WordPress/gutenberg/pull/41166
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [children]);
+    });
+  }, [children, main]);
   return (0, _element.useMemo)(() => {
-    return (0, _element.createElement)(_reactNative.View, {
-      style: [style, {
-        height: currentHeight
-      }]
+    return (0, _element.createElement)(_reactNativeReanimated.default.View, {
+      style: [style, animatedStyles],
+      testID: testID
     }, (0, _element.createElement)(_bottomSheetNavigationContext.BottomSheetNavigationProvider, {
       value: {
         setHeight,
@@ -139,13 +145,13 @@ function BottomSheetNavigationContainer({
     }, main ? (0, _element.createElement)(_native.NavigationContainer, {
       theme: _theme
     }, (0, _element.createElement)(Stack.Navigator, {
-      screenOptions: options
+      screenOptions: options,
+      detachInactiveScreens: false
     }, screens)) : (0, _element.createElement)(Stack.Navigator, {
-      screenOptions: options
-    }, screens))); // Disable reason: deferring this refactor to the native team.
-    // see https://github.com/WordPress/gutenberg/pull/41166
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentHeight, _theme]);
+      screenOptions: options,
+      detachInactiveScreens: false
+    }, screens)));
+  }, [_theme, animatedStyles, currentHeight, main, screens, setHeight, style, testID]);
 }
 
 var _default = BottomSheetNavigationContainer;