npm - @wordpress/components - Versions diffs - 19.17.0 → 20.0.2-next.957ca95e4c.0 - Mend

@wordpress/components 19.17.0 → 20.0.2-next.957ca95e4c.0

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

Files changed (916) hide show

package/build-module/color-palette/index.js CHANGED Viewed

@@ -5,7 +5,6 @@ import { createElement } from "@wordpress/element";
 /**
  * External dependencies
  */
-import { map } from 'lodash';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
@@ -26,6 +25,7 @@ import { VStack } from '../v-stack';
 import { Flex, FlexItem } from '../flex';
 import { Truncate } from '../truncate';
 import { ColorHeading } from './styles';
+import DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';
 extend([namesPlugin, a11yPlugin]);
 function SinglePalette(_ref) {
@@ -38,16 +38,17 @@ function SinglePalette(_ref) {
     actions
   } = _ref;
   const colorOptions = useMemo(() => {
-    return map(colors, _ref2 => {
+    return colors.map((_ref2, index) => {
       let {
         color,
         name
       } = _ref2;
       const colordColor = colord(color);
+      const isSelected = value === color;
       return createElement(CircularOptionPicker.Option, {
-        key: color,
-        isSelected: value === color,
-        selectedIconProps: value === color ? {
+        key: `${color}-${index}`,
+        isSelected: isSelected,
+        selectedIconProps: isSelected ? {
           fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'
         } : {},
         tooltipText: name || // translators: %s: color hex code e.g: "#f00".
@@ -56,7 +57,7 @@ function SinglePalette(_ref) {
           backgroundColor: color,
           color
         },
-        onClick: value === color ? clearColor : () => onChange(color),
+        onClick: isSelected ? clearColor : () => onChange(color),
         "aria-label": name ? // translators: %s: The name of the color e.g: "vivid red".
         sprintf(__('Color: %s'), name) : // translators: %s: color hex code e.g: "#f00".
         sprintf(__('Color code: %s'), color)
@@ -103,15 +104,26 @@ function MultiplePalettes(_ref3) {
 export function CustomColorPickerDropdown(_ref5) {
   let {
     isRenderedInSidebar,
+    popoverProps: receivedPopoverProps,
     ...props
   } = _ref5;
+  const popoverProps = useMemo(() => ({
+    __unstableShift: true,
+    ...(isRenderedInSidebar ? {
+      // When in the sidebar: open to the left (stacking),
+      // leaving the same gap as the parent popover.
+      placement: 'left-start',
+      offset: 34
+    } : {
+      // Default behavior: open below the anchor
+      placement: 'bottom',
+      offset: 8
+    }),
+    ...receivedPopoverProps
+  }), [isRenderedInSidebar, receivedPopoverProps]);
   return createElement(Dropdown, _extends({
     contentClassName: "components-color-palette__custom-color-dropdown-content",
-    popoverProps: isRenderedInSidebar ? {
-      placement: 'left-start',
-      offset: 20,
-      __unstableShift: true
-    } : undefined
+    popoverProps: popoverProps
   }, props));
 }
 export const extractColorNameFromCurrentValue = function (currentValue) {
@@ -170,11 +182,13 @@ export default function ColorPalette(_ref6) {
   const showMultiplePalettes = __experimentalHasMultipleOrigins && (colors === null || colors === void 0 ? void 0 : colors.length);
   const Component = showMultiplePalettes ? MultiplePalettes : SinglePalette;
-  const renderCustomColorPicker = () => createElement(ColorPicker, {
+  const renderCustomColorPicker = () => createElement(DropdownContentWrapper, {
+    paddingSize: "none"
+  }, createElement(ColorPicker, {
     color: value,
     onChange: color => onChange(color),
     enableAlpha: enableAlpha
-  });
+  }));
   const colordColor = colord(value);
   const valueWithoutLeadingHash = value !== null && value !== void 0 && value.startsWith('#') ? value.substring(1) : value !== null && value !== void 0 ? value : '';

package/build-module/color-palette/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["map","colord","extend","namesPlugin","a11yPlugin","__","sprintf","useCallback","useMemo","Dropdown","ColorPicker","CircularOptionPicker","VStack","Flex","FlexItem","Truncate","ColorHeading","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","MultiplePalettes","index","colorPalette","length","CustomColorPickerDropdown","isRenderedInSidebar","props","placement","offset","__unstableShift","undefined","extractColorNameFromCurrentValue","currentValue","showMultiplePalettes","currentValueIsCssVariable","test","normalizedCurrentValue","toHex","colorPalettes","paletteColors","colorName","colorValue","normalizedColorValue","showTransparentBackground","alpha","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","Component","renderCustomColorPicker","valueWithoutLeadingHash","startsWith","substring","buttonLabelName","customColorAccessibleLabel","isOpen","onToggle","background"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/*\n External dependencies\n /\nimport { map } from 'lodash';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/\n WordPress dependencies\n /\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } 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 { Flex, FlexItem } from '../flex';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn map( colors, ( { color, name } ) => {\n\t\t\tconst colordColor = colord( color );\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ color }\n\t\t\t\t\tisSelected={ value === color }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tvalue === color\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\tvalue === color ? clearColor : () => onChange( color )\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\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} ) {\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>{ name }</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={ onChange }\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( { isRenderedInSidebar, ...props } ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={\n\t\t\t\tisRenderedInSidebar\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\t\toffset: 20,\n\t\t\t\t\t\t\t__unstableShift: true,\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport const extractColorNameFromCurrentValue = (\n\tcurrentValue,\n\tcolors = [],\n\tshowMultiplePalettes = false\n) => {\n\tif ( ! currentValue ) {\n\t\treturn '';\n\t}\n\n\tconst currentValueIsCssVariable = /^var\\(/.test( currentValue );\n\tconst normalizedCurrentValue = currentValueIsCssVariable\n\t\t? currentValue\n\t\t: colord( currentValue ).toHex();\n\n\t// Normalize format of `colors` to simplify the following loop\n\tconst colorPalettes = showMultiplePalettes ? colors : [ { colors } ];\n\tfor ( const { colors: paletteColors } of colorPalettes ) {\n\t\tfor ( const { name: colorName, color: colorValue } of paletteColors ) {\n\t\t\tconst normalizedColorValue = currentValueIsCssVariable\n\t\t\t\t? colorValue\n\t\t\t\t: colord( colorValue ).toHex();\n\n\t\t\tif ( normalizedCurrentValue === normalizedColorValue ) {\n\t\t\t\treturn colorName;\n\t\t\t}\n\t\t}\n\t}\n\n\t// translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n\treturn __( 'Custom' );\n};\n\nexport const showTransparentBackground = ( currentValue ) => {\n\tif ( typeof currentValue === 'undefined' ) {\n\t\treturn true;\n\t}\n\treturn colord( currentValue ).alpha() === 0;\n};\n\nexport default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n\t__experimentalIsRenderedInSidebar = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst showMultiplePalettes =\n\t\t__experimentalHasMultipleOrigins && colors?.length;\n\tconst Component = showMultiplePalettes ? MultiplePalettes : SinglePalette;\n\n\tconst renderCustomColorPicker = () => (\n\t\t<ColorPicker\n\t\t\tcolor={ value }\n\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t/>\n\t);\n\n\tconst colordColor = colord( value );\n\n\tconst valueWithoutLeadingHash = value?.startsWith( '#' )\n\t\t? value.substring( 1 )\n\t\t: value ?? '';\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\tshowMultiplePalettes\n\t\t\t),\n\t\t[ value, colors, showMultiplePalettes ]\n\t);\n\n\tconst customColorAccessibleLabel = !! valueWithoutLeadingHash\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\tvalueWithoutLeadingHash\n\t\t )\n\t\t: __( 'Custom color picker.' );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\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<Flex\n\t\t\t\t\t\t\tas={ 'button' }\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\talign=\"flex-start\"\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\tshowTransparentBackground( value )\n\t\t\t\t\t\t\t\t\t? { color: '#000' }\n\t\t\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\t\tas={ Truncate }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-name\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ buttonLabelName }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-value\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ valueWithoutLeadingHash }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Component\n\t\t\t\tclearable={ clearable }\n\t\t\t\tclearColor={ clearColor }\n\t\t\t\tcolors={ colors }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ value }\n\t\t\t\tactions={\n\t\t\t\t\t!! clearable && (\n\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\tonClick={ clearColor }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["colord","extend","namesPlugin","a11yPlugin","__","sprintf","useCallback","useMemo","Dropdown","ColorPicker","CircularOptionPicker","VStack","Flex","FlexItem","Truncate","ColorHeading","DropdownContentWrapper","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","map","index","color","name","colordColor","isSelected","fill","contrast","backgroundColor","MultiplePalettes","colorPalette","length","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","__unstableShift","placement","offset","extractColorNameFromCurrentValue","currentValue","showMultiplePalettes","currentValueIsCssVariable","test","normalizedCurrentValue","toHex","colorPalettes","paletteColors","colorName","colorValue","normalizedColorValue","showTransparentBackground","alpha","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","undefined","Component","renderCustomColorPicker","valueWithoutLeadingHash","startsWith","substring","buttonLabelName","customColorAccessibleLabel","isOpen","onToggle","background"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/*\n External dependencies\n /\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/\n WordPress dependencies\n /\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } 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 { Flex, FlexItem } from '../flex';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\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 )\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\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} ) {\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>{ name }</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={ onChange }\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} ) {\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\t__unstableShift: 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\nexport const extractColorNameFromCurrentValue = (\n\tcurrentValue,\n\tcolors = [],\n\tshowMultiplePalettes = false\n) => {\n\tif ( ! currentValue ) {\n\t\treturn '';\n\t}\n\n\tconst currentValueIsCssVariable = /^var\\(/.test( currentValue );\n\tconst normalizedCurrentValue = currentValueIsCssVariable\n\t\t? currentValue\n\t\t: colord( currentValue ).toHex();\n\n\t// Normalize format of `colors` to simplify the following loop\n\tconst colorPalettes = showMultiplePalettes ? colors : [ { colors } ];\n\tfor ( const { colors: paletteColors } of colorPalettes ) {\n\t\tfor ( const { name: colorName, color: colorValue } of paletteColors ) {\n\t\t\tconst normalizedColorValue = currentValueIsCssVariable\n\t\t\t\t? colorValue\n\t\t\t\t: colord( colorValue ).toHex();\n\n\t\t\tif ( normalizedCurrentValue === normalizedColorValue ) {\n\t\t\t\treturn colorName;\n\t\t\t}\n\t\t}\n\t}\n\n\t// translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n\treturn __( 'Custom' );\n};\n\nexport const showTransparentBackground = ( currentValue ) => {\n\tif ( typeof currentValue === 'undefined' ) {\n\t\treturn true;\n\t}\n\treturn colord( currentValue ).alpha() === 0;\n};\n\nexport default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n\t__experimentalIsRenderedInSidebar = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst showMultiplePalettes =\n\t\t__experimentalHasMultipleOrigins && colors?.length;\n\tconst Component = showMultiplePalettes ? MultiplePalettes : SinglePalette;\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ value }\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\n\tconst colordColor = colord( value );\n\n\tconst valueWithoutLeadingHash = value?.startsWith( '#' )\n\t\t? value.substring( 1 )\n\t\t: value ?? '';\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\tshowMultiplePalettes\n\t\t\t),\n\t\t[ value, colors, showMultiplePalettes ]\n\t);\n\n\tconst customColorAccessibleLabel = !! valueWithoutLeadingHash\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\tvalueWithoutLeadingHash\n\t\t )\n\t\t: __( 'Custom color picker.' );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\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<Flex\n\t\t\t\t\t\t\tas={ 'button' }\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\talign=\"flex-start\"\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\tshowTransparentBackground( value )\n\t\t\t\t\t\t\t\t\t? { color: '#000' }\n\t\t\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\t\tas={ Truncate }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-name\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ buttonLabelName }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-value\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ valueWithoutLeadingHash }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Component\n\t\t\t\tclearable={ clearable }\n\t\t\t\tclearColor={ clearColor }\n\t\t\t\tcolors={ colors }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ value }\n\t\t\t\tactions={\n\t\t\t\t\t!! clearable && (\n\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\tonClick={ clearColor }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}

package/build-module/color-palette/index.native.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { createElement, Fragment } from "@wordpress/element";
  * External dependencies
  */
 import { ScrollView, TouchableWithoutFeedback, View, Animated, Easing, Dimensions, Platform, Text } from 'react-native';
-import { map, uniq } from 'lodash';
+import { map } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -47,9 +47,9 @@ function ColorPalette(_ref) {
   const isGradientSegment = currentSegment === colorsUtils.segments[1];
   const scale = useRef(new Animated.Value(1)).current;
   const opacity = useRef(new Animated.Value(1)).current;
-  const defaultColors = uniq(map(defaultSettings.colors, 'color'));
-  const mergedColors = uniq(map(defaultSettings.allColors, 'color'));
-  const defaultGradientColors = uniq(map(defaultSettings.gradients, 'gradient'));
+  const defaultColors = [...new Set(map(defaultSettings.colors, 'color'))];
+  const mergedColors = [...new Set(map(defaultSettings.allColors, 'color'))];
+  const defaultGradientColors = [...new Set(map(defaultSettings.gradients, 'gradient'))];
   const colors = isGradientSegment ? defaultGradientColors : defaultColors;
   const customIndicatorColor = isGradientSegment ? activeColor : customSwatchGradients;
   const isCustomGradientColor = isGradientColor && isSelectedCustom();

package/build-module/color-palette/index.native.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/color-palette/index.native.js"],"names":["ScrollView","TouchableWithoutFeedback","View","Animated","Easing","Dimensions","Platform","Text","map","uniq","__","useRef","useEffect","usePreferredColorSchemeStyle","styles","ColorIndicator","colorsUtils","ANIMATION_DURATION","contentWidth","scrollPosition","customIndicatorWidth","ColorPalette","enableCustomColor","setColor","activeColor","isGradientColor","defaultSettings","currentSegment","onCustomPress","shouldEnableBottomSheetScroll","shouldShowCustomIndicatorOption","shouldShowCustomLabel","shouldShowCustomVerticalSeparator","customColorIndicatorStyles","customIndicatorWrapperStyles","label","customSwatchGradients","scrollViewRef","isIOS","OS","isGradientSegment","segments","scale","Value","current","opacity","defaultColors","colors","mergedColors","allColors","defaultGradientColors","gradients","customIndicatorColor","isCustomGradientColor","isSelectedCustom","shouldShowCustomIndicator","accessibilityHint","customText","scrollToEndWithDelay","scrollTo","x","y","isWithinColors","includes","isSelected","color","timingAnimation","property","toValue","timing","duration","easing","ease","useNativeDriver","performAnimation","setValue","parallel","start","scaleInterpolation","interpolate","inputRange","outputRange","deselectCustomGradient","width","get","isVisible","onColorPress","onContentSizeChange","delayedScroll","setTimeout","scrollToEnd","clearTimeout","onCustomIndicatorLayout","nativeEvent","layout","onScroll","contentOffset","verticalSeparatorStyle","verticalSeparator","verticalSeparatorDark","customTextStyle","customTextAndroid","customTextDark","customIndicatorWrapperStyle","customIndicatorWrapper","headerText","contentContainer","scaleValue","selected","transform","colorIndicator","toUpperCase"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport {\n\tScrollView,\n\tTouchableWithoutFeedback,\n\tView,\n\tAnimated,\n\tEasing,\n\tDimensions,\n\tPlatform,\n\tText,\n} from 'react-native';\nimport { map, uniq } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useRef, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/\n Internal dependencies\n */\nimport styles from './style.scss';\nimport ColorIndicator from '../color-indicator';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nconst ANIMATION_DURATION = 200;\n\nlet contentWidth = 0;\nlet scrollPosition = 0;\nlet customIndicatorWidth = 0;\n\nfunction ColorPalette( {\n\tenableCustomColor = true,\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tdefaultSettings,\n\tcurrentSegment,\n\tonCustomPress,\n\tshouldEnableBottomSheetScroll,\n\tshouldShowCustomIndicatorOption = true,\n\tshouldShowCustomLabel = true,\n\tshouldShowCustomVerticalSeparator = true,\n\tcustomColorIndicatorStyles,\n\tcustomIndicatorWrapperStyles,\n\tlabel,\n} ) {\n\tconst customSwatchGradients = [\n\t\t'linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)',\n\t\t'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)',\n\t\t'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)',\n\t];\n\n\tconst scrollViewRef = useRef();\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];\n\n\tconst scale = useRef( new Animated.Value( 1 ) ).current;\n\tconst opacity = useRef( new Animated.Value( 1 ) ).current;\n\n\tconst defaultColors = uniq( map( defaultSettings.colors, 'color' ) );\n\tconst mergedColors = uniq( map( defaultSettings.allColors, 'color' ) );\n\tconst defaultGradientColors = uniq(\n\t\tmap( defaultSettings.gradients, 'gradient' )\n\t);\n\tconst colors = isGradientSegment ? defaultGradientColors : defaultColors;\n\n\tconst customIndicatorColor = isGradientSegment\n\t\t? activeColor\n\t\t: customSwatchGradients;\n\tconst isCustomGradientColor = isGradientColor && isSelectedCustom();\n\tconst shouldShowCustomIndicator =\n\t\tenableCustomColor &&\n\t\tshouldShowCustomIndicatorOption &&\n\t\t( ! isGradientSegment \|\| isCustomGradientColor );\n\n\tconst accessibilityHint = isGradientSegment\n\t\t? __( 'Navigates to customize the gradient' )\n\t\t: __( 'Navigates to custom color picker' );\n\tconst customText = __( 'Custom' );\n\n\tuseEffect( () => {\n\t\tif ( scrollViewRef.current ) {\n\t\t\tif ( isSelectedCustom() ) {\n\t\t\t\tscrollToEndWithDelay();\n\t\t\t} else {\n\t\t\t\tscrollViewRef.current.scrollTo( { x: 0, y: 0 } );\n\t\t\t}\n\t\t}\n\t\t// Temporarily disabling exhuastive-deps until the component can be refactored and updated safely.\n\t\t// Please see https://github.com/WordPress/gutenberg/pull/41253 for discussion and details.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ currentSegment ] );\n\n\tfunction isSelectedCustom() {\n\t\tconst isWithinColors =\n\t\t\tactiveColor && mergedColors && mergedColors.includes( activeColor );\n\t\tif ( enableCustomColor && activeColor ) {\n\t\t\tif ( isGradientSegment ) {\n\t\t\t\treturn isGradientColor && ! isWithinColors;\n\t\t\t}\n\t\t\treturn ! isGradientColor && ! isWithinColors;\n\t\t}\n\t\treturn false;\n\t}\n\n\tfunction isSelected( color ) {\n\t\treturn ! isSelectedCustom() && activeColor === color;\n\t}\n\n\tfunction timingAnimation( property, toValue ) {\n\t\treturn Animated.timing( property, {\n\t\t\ttoValue,\n\t\t\tduration: ANIMATION_DURATION,\n\t\t\teasing: Easing.ease,\n\t\t\tuseNativeDriver: true,\n\t\t} );\n\t}\n\n\tfunction performAnimation( color ) {\n\t\tif ( ! isSelected( color ) ) {\n\t\t\topacity.setValue( 0 );\n\t\t}\n\n\t\tAnimated.parallel( [\n\t\t\ttimingAnimation( scale, 2 ),\n\t\t\ttimingAnimation( opacity, 1 ),\n\t\t] ).start( () => {\n\t\t\topacity.setValue( 1 );\n\t\t\tscale.setValue( 1 );\n\t\t} );\n\t}\n\n\tconst scaleInterpolation = scale.interpolate( {\n\t\tinputRange: [ 1, 1.5, 2 ],\n\t\toutputRange: [ 1, 0.7, 1 ],\n\t} );\n\n\tfunction deselectCustomGradient() {\n\t\tconst { width } = Dimensions.get( 'window' );\n\t\tconst isVisible =\n\t\t\tcontentWidth - scrollPosition - customIndicatorWidth < width;\n\n\t\tif ( isCustomGradientColor ) {\n\t\t\tif ( ! isIOS ) {\n\t\t\t\t// Scroll position on Android doesn't adjust automatically when removing the last item from the horizontal list.\n\t\t\t\t// https://github.com/facebook/react-native/issues/27504\n\t\t\t\t// Workaround: Force the scroll when deselecting custom gradient color and when custom indicator is visible on layout.\n\t\t\t\tif (\n\t\t\t\t\tisCustomGradientColor &&\n\t\t\t\t\tisVisible &&\n\t\t\t\t\tscrollViewRef.current\n\t\t\t\t) {\n\t\t\t\t\tscrollViewRef.current.scrollTo( {\n\t\t\t\t\t\tx: scrollPosition - customIndicatorWidth,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction onColorPress( color ) {\n\t\tdeselectCustomGradient();\n\t\tperformAnimation( color );\n\t\tsetColor( color );\n\t}\n\n\tfunction onContentSizeChange( width ) {\n\t\tcontentWidth = width;\n\t\tif ( isSelectedCustom() && scrollViewRef.current ) {\n\t\t\tscrollToEndWithDelay();\n\t\t}\n\t}\n\n\tfunction scrollToEndWithDelay() {\n\t\tconst delayedScroll = setTimeout( () => {\n\t\t\tscrollViewRef.current.scrollToEnd();\n\t\t}, ANIMATION_DURATION );\n\t\treturn () => {\n\t\t\tclearTimeout( delayedScroll );\n\t\t};\n\t}\n\n\tfunction onCustomIndicatorLayout( { nativeEvent } ) {\n\t\tconst { width } = nativeEvent.layout;\n\t\tif ( width !== customIndicatorWidth ) {\n\t\t\tcustomIndicatorWidth = width;\n\t\t}\n\t}\n\n\tfunction onScroll( { nativeEvent } ) {\n\t\tscrollPosition = nativeEvent.contentOffset.x;\n\t}\n\n\tconst verticalSeparatorStyle = usePreferredColorSchemeStyle(\n\t\tstyles.verticalSeparator,\n\t\tstyles.verticalSeparatorDark\n\t);\n\n\tconst customTextStyle = usePreferredColorSchemeStyle(\n\t\t[ styles.customText, ! isIOS && styles.customTextAndroid ],\n\t\tstyles.customTextDark\n\t);\n\n\tconst customIndicatorWrapperStyle = [\n\t\tstyles.customIndicatorWrapper,\n\t\tcustomIndicatorWrapperStyles,\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t{ label && (\n\t\t\t\t<Text accessibilityRole=\"header\" style={ styles.headerText }>\n\t\t\t\t\t{ label }\n\t\t\t\t</Text>\n\t\t\t) }\n\n\t\t\t<ScrollView\n\t\t\t\tcontentContainerStyle={ styles.contentContainer }\n\t\t\t\thorizontal\n\t\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\t\tdisableScrollViewPanResponder\n\t\t\t\tscrollEventThrottle={ 16 }\n\t\t\t\tonScroll={ onScroll }\n\t\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\t\tonScrollBeginDrag={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( false )\n\t\t\t\t}\n\t\t\t\tonScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }\n\t\t\t\tref={ scrollViewRef }\n\t\t\t\ttestID={ `color-palette${ label ? '-' + label : '' }` }\n\t\t\t>\n\t\t\t\t{ colors.map( ( color ) => {\n\t\t\t\t\tconst scaleValue = isSelected( color )\n\t\t\t\t\t\t? scaleInterpolation\n\t\t\t\t\t\t: 1;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<View key={ `${ color }-${ isSelected( color ) }` }>\n\t\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\t\tonPress={ () => onColorPress( color ) }\n\t\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\t\tselected: isSelected( color ),\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\taccessibilityHint={ color }\n\t\t\t\t\t\t\t\ttestID={ color }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tscale: scaleValue,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\t\tisSelected={ isSelected( color ) }\n\t\t\t\t\t\t\t\t\t\topacity={ opacity }\n\t\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\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</Animated.View>\n\t\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ shouldShowCustomIndicator && (\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ customIndicatorWrapperStyle }\n\t\t\t\t\t\tonLayout={ onCustomIndicatorLayout }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ shouldShowCustomVerticalSeparator && (\n\t\t\t\t\t\t\t<View style={ verticalSeparatorStyle } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\tselected: isSelectedCustom(),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<View style={ customIndicatorWrapperStyle }>\n\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\twithCustomPicker={ ! isGradientSegment }\n\t\t\t\t\t\t\t\t\tcolor={ customIndicatorColor }\n\t\t\t\t\t\t\t\t\tisSelected={ isSelectedCustom() }\n\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\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{ shouldShowCustomLabel && (\n\t\t\t\t\t\t\t\t\t<Text style={ customTextStyle }>\n\t\t\t\t\t\t\t\t\t\t{ isIOS\n\t\t\t\t\t\t\t\t\t\t\t? customText\n\t\t\t\t\t\t\t\t\t\t\t: customText.toUpperCase() }\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\t\t\t</ScrollView>\n\t\t</>\n\t);\n}\n\nexport default ColorPalette;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/color-palette/index.native.js"],"names":["ScrollView","TouchableWithoutFeedback","View","Animated","Easing","Dimensions","Platform","Text","map","__","useRef","useEffect","usePreferredColorSchemeStyle","styles","ColorIndicator","colorsUtils","ANIMATION_DURATION","contentWidth","scrollPosition","customIndicatorWidth","ColorPalette","enableCustomColor","setColor","activeColor","isGradientColor","defaultSettings","currentSegment","onCustomPress","shouldEnableBottomSheetScroll","shouldShowCustomIndicatorOption","shouldShowCustomLabel","shouldShowCustomVerticalSeparator","customColorIndicatorStyles","customIndicatorWrapperStyles","label","customSwatchGradients","scrollViewRef","isIOS","OS","isGradientSegment","segments","scale","Value","current","opacity","defaultColors","Set","colors","mergedColors","allColors","defaultGradientColors","gradients","customIndicatorColor","isCustomGradientColor","isSelectedCustom","shouldShowCustomIndicator","accessibilityHint","customText","scrollToEndWithDelay","scrollTo","x","y","isWithinColors","includes","isSelected","color","timingAnimation","property","toValue","timing","duration","easing","ease","useNativeDriver","performAnimation","setValue","parallel","start","scaleInterpolation","interpolate","inputRange","outputRange","deselectCustomGradient","width","get","isVisible","onColorPress","onContentSizeChange","delayedScroll","setTimeout","scrollToEnd","clearTimeout","onCustomIndicatorLayout","nativeEvent","layout","onScroll","contentOffset","verticalSeparatorStyle","verticalSeparator","verticalSeparatorDark","customTextStyle","customTextAndroid","customTextDark","customIndicatorWrapperStyle","customIndicatorWrapper","headerText","contentContainer","scaleValue","selected","transform","colorIndicator","toUpperCase"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport {\n\tScrollView,\n\tTouchableWithoutFeedback,\n\tView,\n\tAnimated,\n\tEasing,\n\tDimensions,\n\tPlatform,\n\tText,\n} from 'react-native';\nimport { map } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useRef, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/\n Internal dependencies\n */\nimport styles from './style.scss';\nimport ColorIndicator from '../color-indicator';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nconst ANIMATION_DURATION = 200;\n\nlet contentWidth = 0;\nlet scrollPosition = 0;\nlet customIndicatorWidth = 0;\n\nfunction ColorPalette( {\n\tenableCustomColor = true,\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tdefaultSettings,\n\tcurrentSegment,\n\tonCustomPress,\n\tshouldEnableBottomSheetScroll,\n\tshouldShowCustomIndicatorOption = true,\n\tshouldShowCustomLabel = true,\n\tshouldShowCustomVerticalSeparator = true,\n\tcustomColorIndicatorStyles,\n\tcustomIndicatorWrapperStyles,\n\tlabel,\n} ) {\n\tconst customSwatchGradients = [\n\t\t'linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)',\n\t\t'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)',\n\t\t'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)',\n\t];\n\n\tconst scrollViewRef = useRef();\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];\n\n\tconst scale = useRef( new Animated.Value( 1 ) ).current;\n\tconst opacity = useRef( new Animated.Value( 1 ) ).current;\n\n\tconst defaultColors = [\n\t\t...new Set( map( defaultSettings.colors, 'color' ) ),\n\t];\n\tconst mergedColors = [\n\t\t...new Set( map( defaultSettings.allColors, 'color' ) ),\n\t];\n\tconst defaultGradientColors = [\n\t\t...new Set( map( defaultSettings.gradients, 'gradient' ) ),\n\t];\n\tconst colors = isGradientSegment ? defaultGradientColors : defaultColors;\n\n\tconst customIndicatorColor = isGradientSegment\n\t\t? activeColor\n\t\t: customSwatchGradients;\n\tconst isCustomGradientColor = isGradientColor && isSelectedCustom();\n\tconst shouldShowCustomIndicator =\n\t\tenableCustomColor &&\n\t\tshouldShowCustomIndicatorOption &&\n\t\t( ! isGradientSegment \|\| isCustomGradientColor );\n\n\tconst accessibilityHint = isGradientSegment\n\t\t? __( 'Navigates to customize the gradient' )\n\t\t: __( 'Navigates to custom color picker' );\n\tconst customText = __( 'Custom' );\n\n\tuseEffect( () => {\n\t\tif ( scrollViewRef.current ) {\n\t\t\tif ( isSelectedCustom() ) {\n\t\t\t\tscrollToEndWithDelay();\n\t\t\t} else {\n\t\t\t\tscrollViewRef.current.scrollTo( { x: 0, y: 0 } );\n\t\t\t}\n\t\t}\n\t\t// Temporarily disabling exhuastive-deps until the component can be refactored and updated safely.\n\t\t// Please see https://github.com/WordPress/gutenberg/pull/41253 for discussion and details.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ currentSegment ] );\n\n\tfunction isSelectedCustom() {\n\t\tconst isWithinColors =\n\t\t\tactiveColor && mergedColors && mergedColors.includes( activeColor );\n\t\tif ( enableCustomColor && activeColor ) {\n\t\t\tif ( isGradientSegment ) {\n\t\t\t\treturn isGradientColor && ! isWithinColors;\n\t\t\t}\n\t\t\treturn ! isGradientColor && ! isWithinColors;\n\t\t}\n\t\treturn false;\n\t}\n\n\tfunction isSelected( color ) {\n\t\treturn ! isSelectedCustom() && activeColor === color;\n\t}\n\n\tfunction timingAnimation( property, toValue ) {\n\t\treturn Animated.timing( property, {\n\t\t\ttoValue,\n\t\t\tduration: ANIMATION_DURATION,\n\t\t\teasing: Easing.ease,\n\t\t\tuseNativeDriver: true,\n\t\t} );\n\t}\n\n\tfunction performAnimation( color ) {\n\t\tif ( ! isSelected( color ) ) {\n\t\t\topacity.setValue( 0 );\n\t\t}\n\n\t\tAnimated.parallel( [\n\t\t\ttimingAnimation( scale, 2 ),\n\t\t\ttimingAnimation( opacity, 1 ),\n\t\t] ).start( () => {\n\t\t\topacity.setValue( 1 );\n\t\t\tscale.setValue( 1 );\n\t\t} );\n\t}\n\n\tconst scaleInterpolation = scale.interpolate( {\n\t\tinputRange: [ 1, 1.5, 2 ],\n\t\toutputRange: [ 1, 0.7, 1 ],\n\t} );\n\n\tfunction deselectCustomGradient() {\n\t\tconst { width } = Dimensions.get( 'window' );\n\t\tconst isVisible =\n\t\t\tcontentWidth - scrollPosition - customIndicatorWidth < width;\n\n\t\tif ( isCustomGradientColor ) {\n\t\t\tif ( ! isIOS ) {\n\t\t\t\t// Scroll position on Android doesn't adjust automatically when removing the last item from the horizontal list.\n\t\t\t\t// https://github.com/facebook/react-native/issues/27504\n\t\t\t\t// Workaround: Force the scroll when deselecting custom gradient color and when custom indicator is visible on layout.\n\t\t\t\tif (\n\t\t\t\t\tisCustomGradientColor &&\n\t\t\t\t\tisVisible &&\n\t\t\t\t\tscrollViewRef.current\n\t\t\t\t) {\n\t\t\t\t\tscrollViewRef.current.scrollTo( {\n\t\t\t\t\t\tx: scrollPosition - customIndicatorWidth,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction onColorPress( color ) {\n\t\tdeselectCustomGradient();\n\t\tperformAnimation( color );\n\t\tsetColor( color );\n\t}\n\n\tfunction onContentSizeChange( width ) {\n\t\tcontentWidth = width;\n\t\tif ( isSelectedCustom() && scrollViewRef.current ) {\n\t\t\tscrollToEndWithDelay();\n\t\t}\n\t}\n\n\tfunction scrollToEndWithDelay() {\n\t\tconst delayedScroll = setTimeout( () => {\n\t\t\tscrollViewRef.current.scrollToEnd();\n\t\t}, ANIMATION_DURATION );\n\t\treturn () => {\n\t\t\tclearTimeout( delayedScroll );\n\t\t};\n\t}\n\n\tfunction onCustomIndicatorLayout( { nativeEvent } ) {\n\t\tconst { width } = nativeEvent.layout;\n\t\tif ( width !== customIndicatorWidth ) {\n\t\t\tcustomIndicatorWidth = width;\n\t\t}\n\t}\n\n\tfunction onScroll( { nativeEvent } ) {\n\t\tscrollPosition = nativeEvent.contentOffset.x;\n\t}\n\n\tconst verticalSeparatorStyle = usePreferredColorSchemeStyle(\n\t\tstyles.verticalSeparator,\n\t\tstyles.verticalSeparatorDark\n\t);\n\n\tconst customTextStyle = usePreferredColorSchemeStyle(\n\t\t[ styles.customText, ! isIOS && styles.customTextAndroid ],\n\t\tstyles.customTextDark\n\t);\n\n\tconst customIndicatorWrapperStyle = [\n\t\tstyles.customIndicatorWrapper,\n\t\tcustomIndicatorWrapperStyles,\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t{ label && (\n\t\t\t\t<Text accessibilityRole=\"header\" style={ styles.headerText }>\n\t\t\t\t\t{ label }\n\t\t\t\t</Text>\n\t\t\t) }\n\n\t\t\t<ScrollView\n\t\t\t\tcontentContainerStyle={ styles.contentContainer }\n\t\t\t\thorizontal\n\t\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\t\tdisableScrollViewPanResponder\n\t\t\t\tscrollEventThrottle={ 16 }\n\t\t\t\tonScroll={ onScroll }\n\t\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\t\tonScrollBeginDrag={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( false )\n\t\t\t\t}\n\t\t\t\tonScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }\n\t\t\t\tref={ scrollViewRef }\n\t\t\t\ttestID={ `color-palette${ label ? '-' + label : '' }` }\n\t\t\t>\n\t\t\t\t{ colors.map( ( color ) => {\n\t\t\t\t\tconst scaleValue = isSelected( color )\n\t\t\t\t\t\t? scaleInterpolation\n\t\t\t\t\t\t: 1;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<View key={ `${ color }-${ isSelected( color ) }` }>\n\t\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\t\tonPress={ () => onColorPress( color ) }\n\t\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\t\tselected: isSelected( color ),\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\taccessibilityHint={ color }\n\t\t\t\t\t\t\t\ttestID={ color }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tscale: scaleValue,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\t\tisSelected={ isSelected( color ) }\n\t\t\t\t\t\t\t\t\t\topacity={ opacity }\n\t\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\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</Animated.View>\n\t\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ shouldShowCustomIndicator && (\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ customIndicatorWrapperStyle }\n\t\t\t\t\t\tonLayout={ onCustomIndicatorLayout }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ shouldShowCustomVerticalSeparator && (\n\t\t\t\t\t\t\t<View style={ verticalSeparatorStyle } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\tselected: isSelectedCustom(),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<View style={ customIndicatorWrapperStyle }>\n\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\twithCustomPicker={ ! isGradientSegment }\n\t\t\t\t\t\t\t\t\tcolor={ customIndicatorColor }\n\t\t\t\t\t\t\t\t\tisSelected={ isSelectedCustom() }\n\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\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{ shouldShowCustomLabel && (\n\t\t\t\t\t\t\t\t\t<Text style={ customTextStyle }>\n\t\t\t\t\t\t\t\t\t\t{ isIOS\n\t\t\t\t\t\t\t\t\t\t\t? customText\n\t\t\t\t\t\t\t\t\t\t\t: customText.toUpperCase() }\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\t\t\t</ScrollView>\n\t\t</>\n\t);\n}\n\nexport default ColorPalette;\n"]}

package/build-module/combobox-control/index.js CHANGED Viewed

@@ -4,7 +4,6 @@ import { createElement } from "@wordpress/element";
  * External dependencies
  */
 import classnames from 'classnames';
-import removeAccents from 'remove-accents';
 /**
  * WordPress dependencies
  */
@@ -26,6 +25,7 @@ import Button from '../button';
 import { FlexBlock, FlexItem } from '../flex';
 import withFocusOutside from '../higher-order/with-focus-outside';
 import { useControlledValue } from '../utils/hooks';
+import { normalizeTextString } from '../utils/strings';
 const noop = () => {};
@@ -44,6 +44,8 @@ function ComboboxControl(_ref) {
   var _currentOption$label;
   let {
+    /** Start opting into the new margin-free styles that will become the default in a future version. */
+    __nextHasNoMarginBottom = false,
     __next36pxDefaultSize,
     value: valueProp,
     label,
@@ -77,9 +79,9 @@ function ComboboxControl(_ref) {
   const matchingSuggestions = useMemo(() => {
     const startsWithMatch = [];
     const containsMatch = [];
-    const match = removeAccents(inputValue.toLocaleLowerCase());
+    const match = normalizeTextString(inputValue);
     options.forEach(option => {
-      const index = removeAccents(option.label).toLocaleLowerCase().indexOf(match);
+      const index = normalizeTextString(option.label).indexOf(match);
       if (index === 0) {
         startsWithMatch.push(option);
@@ -213,6 +215,7 @@ function ComboboxControl(_ref) {
   return createElement(DetectOutside, {
     onFocusOutside: onFocusOutside
   }, createElement(BaseControl, {
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     className: classnames(className, 'components-combobox-control'),
     tabIndex: "-1",
     label: label,

package/build-module/combobox-control/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/combobox-control/index.js"],"names":["classnames","removeAccents","__","_n","sprintf","Component","useState","useMemo","useRef","useEffect","useInstanceId","speak","closeSmall","InputWrapperFlex","TokenInput","SuggestionsList","BaseControl","Button","FlexBlock","FlexItem","withFocusOutside","useControlledValue","noop","DetectOutside","handleFocusOutside","event","props","onFocusOutside","render","children","ComboboxControl","__next36pxDefaultSize","value","valueProp","label","options","onChange","onChangeProp","onFilterValueChange","hideLabelFromVision","help","allowReset","className","messages","selected","__experimentalRenderItem","setValue","currentOption","find","option","currentLabel","instanceId","selectedSuggestion","setSelectedSuggestion","isExpanded","setIsExpanded","inputHasFocus","setInputHasFocus","inputValue","setInputValue","inputContainer","matchingSuggestions","startsWithMatch","containsMatch","match","toLocaleLowerCase","forEach","index","indexOf","push","concat","onSuggestionSelected","newSelectedSuggestion","handleArrowNavigation","offset","nextIndex","length","onKeyDown","preventDefault","defaultPrevented","code","onBlur","onFocus","onInputChange","text","handleOnReset","current","focus","hasMatchingSuggestions","hasSelectedMatchingSuggestions","message","suggestion"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport removeAccents from 'remove-accents';\n\n/\n WordPress dependencies\n /\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport {\n\tComponent,\n\tuseState,\n\tuseMemo,\n\tuseRef,\n\tuseEffect,\n} from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { closeSmall } from '@wordpress/icons';\n\n/\n Internal dependencies\n /\nimport { InputWrapperFlex } from './styles';\nimport TokenInput from '../form-token-field/token-input';\nimport SuggestionsList from '../form-token-field/suggestions-list';\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { FlexBlock, FlexItem } from '../flex';\nimport withFocusOutside from '../higher-order/with-focus-outside';\nimport { useControlledValue } from '../utils/hooks';\n\nconst noop = () => {};\n\nconst DetectOutside = withFocusOutside(\n\tclass extends Component {\n\t\thandleFocusOutside( event ) {\n\t\t\tthis.props.onFocusOutside( event );\n\t\t}\n\n\t\trender() {\n\t\t\treturn this.props.children;\n\t\t}\n\t}\n);\n\nfunction ComboboxControl( {\n\t__next36pxDefaultSize,\n\tvalue: valueProp,\n\tlabel,\n\toptions,\n\tonChange: onChangeProp,\n\tonFilterValueChange = noop,\n\thideLabelFromVision,\n\thelp,\n\tallowReset = true,\n\tclassName,\n\tmessages = {\n\t\tselected: __( 'Item selected.' ),\n\t},\n\t__experimentalRenderItem,\n} ) {\n\tconst [ value, setValue ] = useControlledValue( {\n\t\tvalue: valueProp,\n\t\tonChange: onChangeProp,\n\t} );\n\n\tconst currentOption = options.find( ( option ) => option.value === value );\n\tconst currentLabel = currentOption?.label ?? '';\n\t// Use a custom prefix when generating the `instanceId` to avoid having\n\t// duplicate input IDs when rendering this component and `FormTokenField`\n\t// in the same page (see https://github.com/WordPress/gutenberg/issues/42112).\n\tconst instanceId = useInstanceId( ComboboxControl, 'combobox-control' );\n\tconst [ selectedSuggestion, setSelectedSuggestion ] = useState(\n\t\tcurrentOption \|\| null\n\t);\n\tconst [ isExpanded, setIsExpanded ] = useState( false );\n\tconst [ inputHasFocus, setInputHasFocus ] = useState( false );\n\tconst [ inputValue, setInputValue ] = useState( '' );\n\tconst inputContainer = useRef();\n\n\tconst matchingSuggestions = useMemo( () => {\n\t\tconst startsWithMatch = [];\n\t\tconst containsMatch = [];\n\t\tconst match = removeAccents( inputValue.toLocaleLowerCase() );\n\t\toptions.forEach( ( option ) => {\n\t\t\tconst index = removeAccents( option.label )\n\t\t\t\t.toLocaleLowerCase()\n\t\t\t\t.indexOf( match );\n\t\t\tif ( index === 0 ) {\n\t\t\t\tstartsWithMatch.push( option );\n\t\t\t} else if ( index > 0 ) {\n\t\t\t\tcontainsMatch.push( option );\n\t\t\t}\n\t\t} );\n\n\t\treturn startsWithMatch.concat( containsMatch );\n\t}, [ inputValue, options, value ] );\n\n\tconst onSuggestionSelected = ( newSelectedSuggestion ) => {\n\t\tsetValue( newSelectedSuggestion.value );\n\t\tspeak( messages.selected, 'assertive' );\n\t\tsetSelectedSuggestion( newSelectedSuggestion );\n\t\tsetInputValue( '' );\n\t\tsetIsExpanded( false );\n\t};\n\n\tconst handleArrowNavigation = ( offset = 1 ) => {\n\t\tconst index = matchingSuggestions.indexOf( selectedSuggestion );\n\t\tlet nextIndex = index + offset;\n\t\tif ( nextIndex < 0 ) {\n\t\t\tnextIndex = matchingSuggestions.length - 1;\n\t\t} else if ( nextIndex >= matchingSuggestions.length ) {\n\t\t\tnextIndex = 0;\n\t\t}\n\t\tsetSelectedSuggestion( matchingSuggestions[ nextIndex ] );\n\t\tsetIsExpanded( true );\n\t};\n\n\tconst onKeyDown = ( event ) => {\n\t\tlet preventDefault = false;\n\n\t\tif ( event.defaultPrevented ) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( event.code ) {\n\t\t\tcase 'Enter':\n\t\t\t\tif ( selectedSuggestion ) {\n\t\t\t\t\tonSuggestionSelected( selectedSuggestion );\n\t\t\t\t\tpreventDefault = true;\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowUp':\n\t\t\t\thandleArrowNavigation( -1 );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\t\thandleArrowNavigation( 1 );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tcase 'Escape':\n\t\t\t\tsetIsExpanded( false );\n\t\t\t\tsetSelectedSuggestion( null );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif ( preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t};\n\n\tconst onBlur = () => {\n\t\tsetInputHasFocus( false );\n\t};\n\n\tconst onFocus = () => {\n\t\tsetInputHasFocus( true );\n\t\tsetIsExpanded( true );\n\t\tonFilterValueChange( '' );\n\t\tsetInputValue( '' );\n\t};\n\n\tconst onFocusOutside = () => {\n\t\tsetIsExpanded( false );\n\t};\n\n\tconst onInputChange = ( event ) => {\n\t\tconst text = event.value;\n\t\tsetInputValue( text );\n\t\tonFilterValueChange( text );\n\t\tif ( inputHasFocus ) {\n\t\t\tsetIsExpanded( true );\n\t\t}\n\t};\n\n\tconst handleOnReset = () => {\n\t\tsetValue( null );\n\t\tinputContainer.current.focus();\n\t};\n\n\t// Update current selections when the filter input changes.\n\tuseEffect( () => {\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\t\tconst hasSelectedMatchingSuggestions =\n\t\t\tmatchingSuggestions.indexOf( selectedSuggestion ) > 0;\n\n\t\tif ( hasMatchingSuggestions && ! hasSelectedMatchingSuggestions ) {\n\t\t\t// If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.\n\t\t\tsetSelectedSuggestion( matchingSuggestions[ 0 ] );\n\t\t}\n\t}, [ matchingSuggestions, selectedSuggestion ] );\n\n\t// Announcements.\n\tuseEffect( () => {\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\t\tif ( isExpanded ) {\n\t\t\tconst message = hasMatchingSuggestions\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t/ translators: %d: number of results. /\n\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t )\n\t\t\t\t: __( 'No results.' );\n\n\t\t\tspeak( message, 'polite' );\n\t\t}\n\t}, [ matchingSuggestions, isExpanded ] );\n\n\t// Disable reason: There is no appropriate role which describes the\n\t// input container intended accessible usability.\n\t// TODO: Refactor click detection to use blur to stop propagation.\n\t/ eslint-disable jsx-a11y/no-static-element-interactions /\n\treturn (\n\t\t<DetectOutside onFocusOutside={ onFocusOutside }>\n\t\t\t<BaseControl\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\tclassName,\n\t\t\t\t\t'components-combobox-control'\n\t\t\t\t) }\n\t\t\t\ttabIndex=\"-1\"\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ `components-form-token-input-${ instanceId }` }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\thelp={ help }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-combobox-control__suggestions-container\"\n\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<InputWrapperFlex\n\t\t\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t<TokenInput\n\t\t\t\t\t\t\t\tclassName=\"components-combobox-control__input\"\n\t\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\t\tref={ inputContainer }\n\t\t\t\t\t\t\t\tvalue={ isExpanded ? inputValue : currentLabel }\n\t\t\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\t\t\tcurrentLabel\n\t\t\t\t\t\t\t\t\t\t? `${ currentLabel }, ${ label }`\n\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\t\t\t\tonBlur={ onBlur }\n\t\t\t\t\t\t\t\tisExpanded={ isExpanded }\n\t\t\t\t\t\t\t\tselectedSuggestionIndex={ matchingSuggestions.indexOf(\n\t\t\t\t\t\t\t\t\tselectedSuggestion\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ onInputChange }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t{ allowReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"components-combobox-control__reset\"\n\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\tdisabled={ ! value }\n\t\t\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</InputWrapperFlex>\n\t\t\t\t\t{ isExpanded && (\n\t\t\t\t\t\t<SuggestionsList\n\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\tmatch={ { label: inputValue } }\n\t\t\t\t\t\t\tdisplayTransform={ ( suggestion ) =>\n\t\t\t\t\t\t\t\tsuggestion.label\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsuggestions={ matchingSuggestions }\n\t\t\t\t\t\t\tselectedIndex={ matchingSuggestions.indexOf(\n\t\t\t\t\t\t\t\tselectedSuggestion\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonHover={ setSelectedSuggestion }\n\t\t\t\t\t\t\tonSelect={ onSuggestionSelected }\n\t\t\t\t\t\t\tscrollIntoView\n\t\t\t\t\t\t\t__experimentalRenderItem={\n\t\t\t\t\t\t\t\t__experimentalRenderItem\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</BaseControl>\n\t\t</DetectOutside>\n\t);\n\t/ eslint-enable jsx-a11y/no-static-element-interactions */\n}\n\nexport default ComboboxControl;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/combobox-control/index.js"],"names":["classnames","__","_n","sprintf","Component","useState","useMemo","useRef","useEffect","useInstanceId","speak","closeSmall","InputWrapperFlex","TokenInput","SuggestionsList","BaseControl","Button","FlexBlock","FlexItem","withFocusOutside","useControlledValue","normalizeTextString","noop","DetectOutside","handleFocusOutside","event","props","onFocusOutside","render","children","ComboboxControl","__nextHasNoMarginBottom","__next36pxDefaultSize","value","valueProp","label","options","onChange","onChangeProp","onFilterValueChange","hideLabelFromVision","help","allowReset","className","messages","selected","__experimentalRenderItem","setValue","currentOption","find","option","currentLabel","instanceId","selectedSuggestion","setSelectedSuggestion","isExpanded","setIsExpanded","inputHasFocus","setInputHasFocus","inputValue","setInputValue","inputContainer","matchingSuggestions","startsWithMatch","containsMatch","match","forEach","index","indexOf","push","concat","onSuggestionSelected","newSelectedSuggestion","handleArrowNavigation","offset","nextIndex","length","onKeyDown","preventDefault","defaultPrevented","code","onBlur","onFocus","onInputChange","text","handleOnReset","current","focus","hasMatchingSuggestions","hasSelectedMatchingSuggestions","message","suggestion"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport {\n\tComponent,\n\tuseState,\n\tuseMemo,\n\tuseRef,\n\tuseEffect,\n} from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { closeSmall } from '@wordpress/icons';\n\n/\n Internal dependencies\n /\nimport { InputWrapperFlex } from './styles';\nimport TokenInput from '../form-token-field/token-input';\nimport SuggestionsList from '../form-token-field/suggestions-list';\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { FlexBlock, FlexItem } from '../flex';\nimport withFocusOutside from '../higher-order/with-focus-outside';\nimport { useControlledValue } from '../utils/hooks';\nimport { normalizeTextString } from '../utils/strings';\n\nconst noop = () => {};\n\nconst DetectOutside = withFocusOutside(\n\tclass extends Component {\n\t\thandleFocusOutside( event ) {\n\t\t\tthis.props.onFocusOutside( event );\n\t\t}\n\n\t\trender() {\n\t\t\treturn this.props.children;\n\t\t}\n\t}\n);\n\nfunction ComboboxControl( {\n\t/* Start opting into the new margin-free styles that will become the default in a future version. /\n\t__nextHasNoMarginBottom = false,\n\t__next36pxDefaultSize,\n\tvalue: valueProp,\n\tlabel,\n\toptions,\n\tonChange: onChangeProp,\n\tonFilterValueChange = noop,\n\thideLabelFromVision,\n\thelp,\n\tallowReset = true,\n\tclassName,\n\tmessages = {\n\t\tselected: __( 'Item selected.' ),\n\t},\n\t__experimentalRenderItem,\n} ) {\n\tconst [ value, setValue ] = useControlledValue( {\n\t\tvalue: valueProp,\n\t\tonChange: onChangeProp,\n\t} );\n\n\tconst currentOption = options.find( ( option ) => option.value === value );\n\tconst currentLabel = currentOption?.label ?? '';\n\t// Use a custom prefix when generating the `instanceId` to avoid having\n\t// duplicate input IDs when rendering this component and `FormTokenField`\n\t// in the same page (see https://github.com/WordPress/gutenberg/issues/42112).\n\tconst instanceId = useInstanceId( ComboboxControl, 'combobox-control' );\n\tconst [ selectedSuggestion, setSelectedSuggestion ] = useState(\n\t\tcurrentOption \|\| null\n\t);\n\tconst [ isExpanded, setIsExpanded ] = useState( false );\n\tconst [ inputHasFocus, setInputHasFocus ] = useState( false );\n\tconst [ inputValue, setInputValue ] = useState( '' );\n\tconst inputContainer = useRef();\n\n\tconst matchingSuggestions = useMemo( () => {\n\t\tconst startsWithMatch = [];\n\t\tconst containsMatch = [];\n\t\tconst match = normalizeTextString( inputValue );\n\t\toptions.forEach( ( option ) => {\n\t\t\tconst index = normalizeTextString( option.label ).indexOf( match );\n\t\t\tif ( index === 0 ) {\n\t\t\t\tstartsWithMatch.push( option );\n\t\t\t} else if ( index > 0 ) {\n\t\t\t\tcontainsMatch.push( option );\n\t\t\t}\n\t\t} );\n\n\t\treturn startsWithMatch.concat( containsMatch );\n\t}, [ inputValue, options, value ] );\n\n\tconst onSuggestionSelected = ( newSelectedSuggestion ) => {\n\t\tsetValue( newSelectedSuggestion.value );\n\t\tspeak( messages.selected, 'assertive' );\n\t\tsetSelectedSuggestion( newSelectedSuggestion );\n\t\tsetInputValue( '' );\n\t\tsetIsExpanded( false );\n\t};\n\n\tconst handleArrowNavigation = ( offset = 1 ) => {\n\t\tconst index = matchingSuggestions.indexOf( selectedSuggestion );\n\t\tlet nextIndex = index + offset;\n\t\tif ( nextIndex < 0 ) {\n\t\t\tnextIndex = matchingSuggestions.length - 1;\n\t\t} else if ( nextIndex >= matchingSuggestions.length ) {\n\t\t\tnextIndex = 0;\n\t\t}\n\t\tsetSelectedSuggestion( matchingSuggestions[ nextIndex ] );\n\t\tsetIsExpanded( true );\n\t};\n\n\tconst onKeyDown = ( event ) => {\n\t\tlet preventDefault = false;\n\n\t\tif ( event.defaultPrevented ) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( event.code ) {\n\t\t\tcase 'Enter':\n\t\t\t\tif ( selectedSuggestion ) {\n\t\t\t\t\tonSuggestionSelected( selectedSuggestion );\n\t\t\t\t\tpreventDefault = true;\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowUp':\n\t\t\t\thandleArrowNavigation( -1 );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\t\thandleArrowNavigation( 1 );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tcase 'Escape':\n\t\t\t\tsetIsExpanded( false );\n\t\t\t\tsetSelectedSuggestion( null );\n\t\t\t\tpreventDefault = true;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif ( preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t};\n\n\tconst onBlur = () => {\n\t\tsetInputHasFocus( false );\n\t};\n\n\tconst onFocus = () => {\n\t\tsetInputHasFocus( true );\n\t\tsetIsExpanded( true );\n\t\tonFilterValueChange( '' );\n\t\tsetInputValue( '' );\n\t};\n\n\tconst onFocusOutside = () => {\n\t\tsetIsExpanded( false );\n\t};\n\n\tconst onInputChange = ( event ) => {\n\t\tconst text = event.value;\n\t\tsetInputValue( text );\n\t\tonFilterValueChange( text );\n\t\tif ( inputHasFocus ) {\n\t\t\tsetIsExpanded( true );\n\t\t}\n\t};\n\n\tconst handleOnReset = () => {\n\t\tsetValue( null );\n\t\tinputContainer.current.focus();\n\t};\n\n\t// Update current selections when the filter input changes.\n\tuseEffect( () => {\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\t\tconst hasSelectedMatchingSuggestions =\n\t\t\tmatchingSuggestions.indexOf( selectedSuggestion ) > 0;\n\n\t\tif ( hasMatchingSuggestions && ! hasSelectedMatchingSuggestions ) {\n\t\t\t// If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.\n\t\t\tsetSelectedSuggestion( matchingSuggestions[ 0 ] );\n\t\t}\n\t}, [ matchingSuggestions, selectedSuggestion ] );\n\n\t// Announcements.\n\tuseEffect( () => {\n\t\tconst hasMatchingSuggestions = matchingSuggestions.length > 0;\n\t\tif ( isExpanded ) {\n\t\t\tconst message = hasMatchingSuggestions\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t/ translators: %d: number of results. /\n\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\tmatchingSuggestions.length\n\t\t\t\t )\n\t\t\t\t: __( 'No results.' );\n\n\t\t\tspeak( message, 'polite' );\n\t\t}\n\t}, [ matchingSuggestions, isExpanded ] );\n\n\t// Disable reason: There is no appropriate role which describes the\n\t// input container intended accessible usability.\n\t// TODO: Refactor click detection to use blur to stop propagation.\n\t/ eslint-disable jsx-a11y/no-static-element-interactions /\n\treturn (\n\t\t<DetectOutside onFocusOutside={ onFocusOutside }>\n\t\t\t<BaseControl\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\tclassName,\n\t\t\t\t\t'components-combobox-control'\n\t\t\t\t) }\n\t\t\t\ttabIndex=\"-1\"\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ `components-form-token-input-${ instanceId }` }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\thelp={ help }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-combobox-control__suggestions-container\"\n\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<InputWrapperFlex\n\t\t\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t<TokenInput\n\t\t\t\t\t\t\t\tclassName=\"components-combobox-control__input\"\n\t\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\t\tref={ inputContainer }\n\t\t\t\t\t\t\t\tvalue={ isExpanded ? inputValue : currentLabel }\n\t\t\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\t\t\tcurrentLabel\n\t\t\t\t\t\t\t\t\t\t? `${ currentLabel }, ${ label }`\n\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\t\t\t\tonBlur={ onBlur }\n\t\t\t\t\t\t\t\tisExpanded={ isExpanded }\n\t\t\t\t\t\t\t\tselectedSuggestionIndex={ matchingSuggestions.indexOf(\n\t\t\t\t\t\t\t\t\tselectedSuggestion\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ onInputChange }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t{ allowReset && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"components-combobox-control__reset\"\n\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\tdisabled={ ! value }\n\t\t\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</InputWrapperFlex>\n\t\t\t\t\t{ isExpanded && (\n\t\t\t\t\t\t<SuggestionsList\n\t\t\t\t\t\t\tinstanceId={ instanceId }\n\t\t\t\t\t\t\tmatch={ { label: inputValue } }\n\t\t\t\t\t\t\tdisplayTransform={ ( suggestion ) =>\n\t\t\t\t\t\t\t\tsuggestion.label\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsuggestions={ matchingSuggestions }\n\t\t\t\t\t\t\tselectedIndex={ matchingSuggestions.indexOf(\n\t\t\t\t\t\t\t\tselectedSuggestion\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonHover={ setSelectedSuggestion }\n\t\t\t\t\t\t\tonSelect={ onSuggestionSelected }\n\t\t\t\t\t\t\tscrollIntoView\n\t\t\t\t\t\t\t__experimentalRenderItem={\n\t\t\t\t\t\t\t\t__experimentalRenderItem\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</BaseControl>\n\t\t</DetectOutside>\n\t);\n\t/ eslint-enable jsx-a11y/no-static-element-interactions */\n}\n\nexport default ComboboxControl;\n"]}

package/build-module/{custom-gradient-bar → custom-gradient-picker/gradient-bar}/constants.js RENAMED Viewed

File without changes

package/build-module/custom-gradient-picker/gradient-bar/constants.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/constants.js"],"names":["GRADIENT_MARKERS_WIDTH","INSERT_POINT_WIDTH","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","MINIMUM_DISTANCE_BETWEEN_POINTS","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER"],"mappings":"AAAA,OAAO,MAAMA,sBAAsB,GAAG,EAA/B;AACP,OAAO,MAAMC,kBAAkB,GAAG,EAA3B;AACP,OAAO,MAAMC,2CAA2C,GAAG,EAApD;AACP,OAAO,MAAMC,+BAA+B,GAAG,CAAxC;AACP,OAAO,MAAMC,wBAAwB,GAAG,CAAjC;AAEP,OAAO,MAAMC,gCAAgC,GAC5CH,2CADM;AAEP,OAAO,MAAMI,4CAA4C,GACxD,CAAEL,kBAAkB,GAAGD,sBAAvB,IAAkD,CAD5C","sourcesContent":["export const GRADIENT_MARKERS_WIDTH = 16;\nexport const INSERT_POINT_WIDTH = 16;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;\nexport const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;\nexport const MINIMUM_SIGNIFICANT_MOVE = 5;\n\nexport const KEYBOARD_CONTROL_POINT_VARIATION =\n\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER =\n\t( INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH ) / 2;\n"]}

package/build-module/{custom-gradient-bar → custom-gradient-picker/gradient-bar}/control-points.js RENAMED Viewed

@@ -14,15 +14,15 @@ import { useInstanceId } from '@wordpress/compose';
 import { useEffect, useRef, useState, useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { plus } from '@wordpress/icons';
-import { LEFT, RIGHT } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
-import Button from '../button';
-import { ColorPicker } from '../color-picker';
-import { VisuallyHidden } from '../visually-hidden';
-import { CustomColorPickerDropdown } from '../color-palette';
+import Button from '../../button';
+import { HStack } from '../../h-stack';
+import { ColorPicker } from '../../color-picker';
+import { VisuallyHidden } from '../../visually-hidden';
+import { CustomColorPickerDropdown } from '../../color-palette';
 import { addControlPoint, clampPercent, removeControlPoint, updateControlPointColor, updateControlPointColorByPosition, updateControlPointPosition, getHorizontalRelativeGradientPosition } from './utils';
 import { MINIMUM_SIGNIFICANT_MOVE, KEYBOARD_CONTROL_POINT_VARIATION } from './constants';
@@ -43,11 +43,7 @@ function ControlPointButton(_ref) {
     "aria-expanded": isOpen,
     className: classnames('components-custom-gradient-picker__control-point-button', {
       'is-active': isOpen
-    }),
-    style: {
-      left: `${position}%`,
-      transform: 'translateX( -50% )'
-    }
+    })
   }, additionalProps)), createElement(VisuallyHidden, {
     id: descriptionId
   }, __('Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.')));
@@ -56,25 +52,19 @@ function ControlPointButton(_ref) {
 function GradientColorPickerDropdown(_ref2) {
   let {
     isRenderedInSidebar,
-    gradientPickerDomRef,
+    className,
     ...props
   } = _ref2;
-  const popoverProps = useMemo(() => {
-    const result = {
-      className: 'components-custom-gradient-picker__color-picker-popover',
-      position: 'top'
-    };
-    if (isRenderedInSidebar) {
-      result.anchorRef = gradientPickerDomRef.current;
-      result.position = 'bottom left';
-    }
-    return result;
-  }, [gradientPickerDomRef, isRenderedInSidebar]);
+  // Open the popover below the gradient control/insertion point
+  const popoverProps = useMemo(() => ({
+    placement: 'bottom',
+    offset: 8
+  }), []);
+  const mergedClassName = classnames('components-custom-gradient-picker__control-point-dropdown', className);
   return createElement(CustomColorPickerDropdown, _extends({
     isRenderedInSidebar: isRenderedInSidebar,
-    popoverProps: popoverProps
+    popoverProps: popoverProps,
+    className: mergedClassName
   }, props));
 }
@@ -129,7 +119,6 @@ function ControlPoints(_ref3) {
   return controlPoints.map((point, index) => {
     const initialPosition = point === null || point === void 0 ? void 0 : point.position;
     return ignoreMarkerPosition !== initialPosition && createElement(GradientColorPickerDropdown, {
-      gradientPickerDomRef: gradientPickerDomRef,
       isRenderedInSidebar: __experimentalIsRenderedInSidebar,
       key: index,
       onClose: onStopControlPointChange,
@@ -167,12 +156,12 @@ function ControlPoints(_ref3) {
             }
           },
           onKeyDown: event => {
-            if (event.keyCode === LEFT) {
+            if (event.code === 'ArrowLeft') {
               // Stop propagation of the key press event to avoid focus moving
               // to another editor area.
               event.stopPropagation();
               onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position - KEYBOARD_CONTROL_POINT_VARIATION)));
-            } else if (event.keyCode === RIGHT) {
+            } else if (event.code === 'ArrowRight') {
               // Stop propagation of the key press event to avoid focus moving
               // to another editor area.
               event.stopPropagation();
@@ -194,14 +183,20 @@ function ControlPoints(_ref3) {
           onChange: color => {
             onChange(updateControlPointColor(controlPoints, index, colord(color).toRgbString()));
           }
-        }), !disableRemove && controlPoints.length > 2 && createElement(Button, {
-          className: "components-custom-gradient-picker__remove-control-point",
+        }), !disableRemove && controlPoints.length > 2 && createElement(HStack, {
+          className: "components-custom-gradient-picker__remove-control-point-wrapper",
+          alignment: "center"
+        }, createElement(Button, {
           onClick: () => {
             onChange(removeControlPoint(controlPoints, index));
             onClose();
           },
           variant: "link"
-        }, __('Remove Control Point')));
+        }, __('Remove Control Point'))));
+      },
+      style: {
+        left: `${point.position}%`,
+        transform: 'translateX( -50% )'
       }
     });
   });
@@ -215,12 +210,10 @@ function InsertPoint(_ref6) {
     onCloseInserter,
     insertPosition,
     disableAlpha,
-    __experimentalIsRenderedInSidebar,
-    gradientPickerDomRef
+    __experimentalIsRenderedInSidebar
   } = _ref6;
   const [alreadyInsertedPoint, setAlreadyInsertedPoint] = useState(false);
   return createElement(GradientColorPickerDropdown, {
-    gradientPickerDomRef: gradientPickerDomRef,
     isRenderedInSidebar: __experimentalIsRenderedInSidebar,
     className: "components-custom-gradient-picker__inserter",
     onClose: () => {
@@ -244,12 +237,8 @@ function InsertPoint(_ref6) {
           onToggle();
         },
-        className: "components-custom-gradient-picker__insert-point",
-        icon: plus,
-        style: insertPosition !== null ? {
-          left: `${insertPosition}%`,
-          transform: 'translateX( -50% )'
-        } : undefined
+        className: "components-custom-gradient-picker__insert-point-dropdown",
+        icon: plus
       });
     },
     renderContent: () => createElement(ColorPicker, {
@@ -262,7 +251,11 @@ function InsertPoint(_ref6) {
           onChange(updateControlPointColorByPosition(controlPoints, insertPosition, colord(color).toRgbString()));
         }
       }
-    })
+    }),
+    style: insertPosition !== null ? {
+      left: `${insertPosition}%`,
+      transform: 'translateX( -50% )'
+    } : undefined
   });
 }