@wordpress/components 19.8.4 → 19.11.0

package/build-module/navigation/styles/navigation-styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigation/styles/navigation-styles.js"],"names":["isRTL","BASE","G2","UI","Button","Text","Heading","reduceMotion","rtl","space","SearchControl","NavigationUI","MenuUI","MenuBackButtonUI","MenuTitleUI","MenuTitleActionsUI","MenuTitleSearchUI","GroupTitleUI","ItemBaseUI","textAlign","theme","white","lightGray","ui","ItemUI","ItemIconUI","ItemBadgeUI","ItemTitleUI"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * WordPress dependencies\n */\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { BASE, G2, UI } from '../../utils/colors-values';\nimport Button from '../../button';\nimport { Text } from '../../text';\nimport { Heading } from '../../heading';\nimport { reduceMotion, rtl } from '../../utils';\nimport { space } from '../../ui/utils/space';\nimport SearchControl from '../../search-control';\n\nexport const NavigationUI = styled.div`\n\twidth: 100%;\n\tbox-sizing: border-box;\n\tpadding: 0 ${ space( 4 ) };\n\toverflow: hidden;\n`;\n\nexport const MenuUI = styled.div`\n\tmargin-top: ${ space( 6 ) };\n\tmargin-bottom: ${ space( 6 ) };\n\tdisplay: flex;\n\tflex-direction: column;\n\tul {\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\tlist-style: none;\n\t}\n\t.components-navigation__back-button {\n\t\tmargin-bottom: ${ space( 6 ) };\n\t}\n\n\t.components-navigation__group + .components-navigation__group {\n\t\tmargin-top: ${ space( 6 ) };\n\t}\n`;\n\nexport const MenuBackButtonUI = styled( Button )`\n\t&.is-tertiary {\n\t\tcolor: inherit;\n\t\topacity: 0.7;\n\n\t\t&:hover:not( :disabled ) {\n\t\t\topacity: 1;\n\t\t\tbox-shadow: none;\n\t\t\tcolor: inherit;\n\t\t}\n\n\t\t&:active:not( :disabled ) {\n\t\t\tbackground: transparent;\n\t\t\topacity: 1;\n\t\t\tcolor: inherit;\n\t\t}\n\t}\n`;\n\nexport const MenuTitleUI = styled.div`\n\toverflow: hidden;\n\twidth: 100%;\n`;\n\nexport const MenuTitleActionsUI = styled.span`\n\theight: ${ space( 6 ) }; // 24px, same height as the buttons inside\n\n\t.components-button.is-small {\n\t\tcolor: inherit;\n\t\topacity: 0.7;\n\t\tmargin-right: ${ space( 1 ) }; // Avoid hiding the focus outline\n\t\tpadding: 0;\n\n\t\t&:active:not( :disabled ) {\n\t\t\tbackground: none;\n\t\t\topacity: 1;\n\t\t\tcolor: inherit;\n\t\t}\n\t\t&:hover:not( :disabled ) {\n\t\t\tbox-shadow: none;\n\t\t\topacity: 1;\n\t\t\tcolor: inherit;\n\t\t}\n\t}\n`;\n\nexport const MenuTitleSearchUI = styled( SearchControl )`\n\tinput[type='search'].components-search-control__input {\n\t\tmargin: 0;\n\t\tbackground: #303030;\n\t\tcolor: #fff;\n\n\t\t&:focus {\n\t\t\tbackground: #434343;\n\t\t\tcolor: #fff;\n\t\t}\n\n\t\t&::placeholder {\n\t\t\tcolor: rgba( 255, 255, 255, 0.6 );\n\t\t}\n\t}\n\n\tsvg {\n\t\tfill: white;\n\t}\n\n\t.components-button.has-icon {\n\t\tpadding: 0;\n\t\tmin-width: auto;\n\t}\n`;\n\nexport const GroupTitleUI = styled( Heading )`\n\tmin-height: ${ space( 12 ) };\n\talign-items: center;\n\tcolor: inherit;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tmargin-bottom: ${ space( 2 ) };\n\tpadding: ${ () =>\n\t\tisRTL()\n\t\t\t? `${ space( 1 ) } ${ space( 4 ) } ${ space( 1 ) } ${ space( 2 ) }`\n\t\t\t: `${ space( 1 ) } ${ space( 2 ) } ${ space( 1 ) } ${ space(\n\t\t\t\t\t4\n\t\t\t  ) }` };\n`;\n\nexport const ItemBaseUI = styled.li`\n\tborder-radius: 2px;\n\tcolor: inherit;\n\tmargin-bottom: 0;\n\n\t> button,\n\t> a.components-button,\n\t> a {\n\t\twidth: 100%;\n\t\tcolor: inherit;\n\t\topacity: 0.7;\n\t\tpadding: ${ space( 2 ) } ${ space( 4 ) }; /* 8px 16px */\n\t\t${ rtl( { textAlign: 'left' }, { textAlign: 'right' } ) }\n\n\t\t&:hover,\n\t\t&:focus:not( [aria-disabled='true'] ):active,\n\t\t&:active:not( [aria-disabled='true'] ):active {\n\t\t\tcolor: inherit;\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t&.is-active {\n\t\tbackground-color: ${ UI.theme };\n\t\tcolor: ${ BASE.white };\n\n\t\t> button,\n\t\t> a {\n\t\t\tcolor: ${ BASE.white };\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t> svg path {\n\t\tcolor: ${ G2.lightGray.ui };\n\t}\n`;\n\nexport const ItemUI = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\theight: auto;\n\tmin-height: 40px;\n\tmargin: 0;\n\tpadding: ${ space( 1.5 ) } ${ space( 4 ) };\n\tfont-weight: 400;\n\tline-height: 20px;\n\twidth: 100%;\n\tcolor: inherit;\n\topacity: 0.7;\n`;\n\nexport const ItemIconUI = styled.span`\n\tdisplay: flex;\n\tmargin-right: ${ space( 2 ) };\n`;\n\nexport const ItemBadgeUI = styled.span`\n\tmargin-left: ${ () => ( isRTL() ? '0' : space( 2 ) ) };\n\tmargin-right: ${ () => ( isRTL() ? space( 2 ) : '0' ) };\n\tdisplay: inline-flex;\n\tpadding: ${ space( 1 ) } ${ space( 3 ) };\n\tborder-radius: 2px;\n\tanimation: fade-in 250ms ease-out;\n\n\t@keyframes fade-in {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t${ reduceMotion( 'animation' ) };\n`;\n\nexport const ItemTitleUI = styled( Text )`\n\t${ () => ( isRTL() ? 'margin-left: auto;' : 'margin-right: auto;' ) }\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: inherit;\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigation/styles/navigation-styles.js"],"names":["isRTL","COLORS","Button","Text","Heading","reduceMotion","rtl","space","SearchControl","NavigationUI","MenuUI","MenuBackButtonUI","MenuTitleUI","MenuTitleActionsUI","MenuTitleSearchUI","GroupTitleUI","ItemBaseUI","textAlign","ui","theme","white","gray","ItemUI","ItemIconUI","ItemBadgeUI","ItemTitleUI"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * WordPress dependencies\n */\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { COLORS } from '../../utils/colors-values';\nimport Button from '../../button';\nimport { Text } from '../../text';\nimport { Heading } from '../../heading';\nimport { reduceMotion, rtl } from '../../utils';\nimport { space } from '../../ui/utils/space';\nimport SearchControl from '../../search-control';\n\nexport const NavigationUI = styled.div`\n\twidth: 100%;\n\tbox-sizing: border-box;\n\tpadding: 0 ${ space( 4 ) };\n\toverflow: hidden;\n`;\n\nexport const MenuUI = styled.div`\n\tmargin-top: ${ space( 6 ) };\n\tmargin-bottom: ${ space( 6 ) };\n\tdisplay: flex;\n\tflex-direction: column;\n\tul {\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\tlist-style: none;\n\t}\n\t.components-navigation__back-button {\n\t\tmargin-bottom: ${ space( 6 ) };\n\t}\n\n\t.components-navigation__group + .components-navigation__group {\n\t\tmargin-top: ${ space( 6 ) };\n\t}\n`;\n\nexport const MenuBackButtonUI = styled( Button )`\n\t&.is-tertiary {\n\t\tcolor: inherit;\n\t\topacity: 0.7;\n\n\t\t&:hover:not( :disabled ) {\n\t\t\topacity: 1;\n\t\t\tbox-shadow: none;\n\t\t\tcolor: inherit;\n\t\t}\n\n\t\t&:active:not( :disabled ) {\n\t\t\tbackground: transparent;\n\t\t\topacity: 1;\n\t\t\tcolor: inherit;\n\t\t}\n\t}\n`;\n\nexport const MenuTitleUI = styled.div`\n\toverflow: hidden;\n\twidth: 100%;\n`;\n\nexport const MenuTitleActionsUI = styled.span`\n\theight: ${ space( 6 ) }; // 24px, same height as the buttons inside\n\n\t.components-button.is-small {\n\t\tcolor: inherit;\n\t\topacity: 0.7;\n\t\tmargin-right: ${ space( 1 ) }; // Avoid hiding the focus outline\n\t\tpadding: 0;\n\n\t\t&:active:not( :disabled ) {\n\t\t\tbackground: none;\n\t\t\topacity: 1;\n\t\t\tcolor: inherit;\n\t\t}\n\t\t&:hover:not( :disabled ) {\n\t\t\tbox-shadow: none;\n\t\t\topacity: 1;\n\t\t\tcolor: inherit;\n\t\t}\n\t}\n`;\n\nexport const MenuTitleSearchUI = styled( SearchControl )`\n\tinput[type='search'].components-search-control__input {\n\t\tmargin: 0;\n\t\tbackground: #303030;\n\t\tcolor: #fff;\n\n\t\t&:focus {\n\t\t\tbackground: #434343;\n\t\t\tcolor: #fff;\n\t\t}\n\n\t\t&::placeholder {\n\t\t\tcolor: rgba( 255, 255, 255, 0.6 );\n\t\t}\n\t}\n\n\tsvg {\n\t\tfill: white;\n\t}\n\n\t.components-button.has-icon {\n\t\tpadding: 0;\n\t\tmin-width: auto;\n\t}\n`;\n\nexport const GroupTitleUI = styled( Heading )`\n\tmin-height: ${ space( 12 ) };\n\talign-items: center;\n\tcolor: inherit;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tmargin-bottom: ${ space( 2 ) };\n\tpadding: ${ () =>\n\t\tisRTL()\n\t\t\t? `${ space( 1 ) } ${ space( 4 ) } ${ space( 1 ) } ${ space( 2 ) }`\n\t\t\t: `${ space( 1 ) } ${ space( 2 ) } ${ space( 1 ) } ${ space(\n\t\t\t\t\t4\n\t\t\t  ) }` };\n`;\n\nexport const ItemBaseUI = styled.li`\n\tborder-radius: 2px;\n\tcolor: inherit;\n\tmargin-bottom: 0;\n\n\t> button,\n\t> a.components-button,\n\t> a {\n\t\twidth: 100%;\n\t\tcolor: inherit;\n\t\topacity: 0.7;\n\t\tpadding: ${ space( 2 ) } ${ space( 4 ) }; /* 8px 16px */\n\t\t${ rtl( { textAlign: 'left' }, { textAlign: 'right' } ) }\n\n\t\t&:hover,\n\t\t&:focus:not( [aria-disabled='true'] ):active,\n\t\t&:active:not( [aria-disabled='true'] ):active {\n\t\t\tcolor: inherit;\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t&.is-active {\n\t\tbackground-color: ${ COLORS.ui.theme };\n\t\tcolor: ${ COLORS.white };\n\n\t\t> button,\n\t\t> a {\n\t\t\tcolor: ${ COLORS.white };\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t> svg path {\n\t\tcolor: ${ COLORS.gray[ 600 ] };\n\t}\n`;\n\nexport const ItemUI = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\theight: auto;\n\tmin-height: 40px;\n\tmargin: 0;\n\tpadding: ${ space( 1.5 ) } ${ space( 4 ) };\n\tfont-weight: 400;\n\tline-height: 20px;\n\twidth: 100%;\n\tcolor: inherit;\n\topacity: 0.7;\n`;\n\nexport const ItemIconUI = styled.span`\n\tdisplay: flex;\n\tmargin-right: ${ space( 2 ) };\n`;\n\nexport const ItemBadgeUI = styled.span`\n\tmargin-left: ${ () => ( isRTL() ? '0' : space( 2 ) ) };\n\tmargin-right: ${ () => ( isRTL() ? space( 2 ) : '0' ) };\n\tdisplay: inline-flex;\n\tpadding: ${ space( 1 ) } ${ space( 3 ) };\n\tborder-radius: 2px;\n\tanimation: fade-in 250ms ease-out;\n\n\t@keyframes fade-in {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t${ reduceMotion( 'animation' ) };\n`;\n\nexport const ItemTitleUI = styled( Text )`\n\t${ () => ( isRTL() ? 'margin-left: auto;' : 'margin-right: auto;' ) }\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: inherit;\n`;\n"]}

package/build-module/notice/index.native.js

@@ -3,19 +3,20 @@ import { createElement, Fragment } from "@wordpress/element";
 /**
  * External dependencies
  */
-import { Animated, Easing, Text, TouchableWithoutFeedback, View, Dimensions, Platform } from 'react-native';
+import { Animated, Easing, Text, TouchableWithoutFeedback, View, useWindowDimensions } from 'react-native';
 import { BlurView } from '@react-native-community/blur';
 /**
  * WordPress dependencies
  */
 
-import { useEffect, useRef, useState } from '@wordpress/element';
+import { useEffect, useRef, Platform } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 
 import styles from './style.scss';
+const HIDE_TIMER = 3000;
 
 const Notice = _ref => {
   let {
@@ -24,66 +25,69 @@ const Notice = _ref => {
     id,
     status
   } = _ref;
-  const [width, setWidth] = useState(Dimensions.get('window').width);
-  const [visible, setVisible] = useState(true);
+  const {
+    width
+  } = useWindowDimensions();
   const animationValue = useRef(new Animated.Value(0)).current;
   const timer = useRef(null);
-  const isIOS = Platform.OS === 'ios';
-
-  const onDimensionsChange = () => {
-    setWidth(Dimensions.get('window').width);
-  };
-
-  useEffect(() => {
-    const dimensionsChangeSubscription = Dimensions.addEventListener('change', onDimensionsChange);
-    return () => {
-      dimensionsChangeSubscription.remove();
-    };
-  }, []);
   useEffect(() => {
     startAnimation();
     return () => {
       clearTimeout(timer === null || timer === void 0 ? void 0 : timer.current);
     };
-  }, [visible, id]);
+  }, []);
+
+  function onHide() {
+    Animated.timing(animationValue, {
+      toValue: 0,
+      duration: 150,
+      useNativeDriver: true,
+      easing: Easing.out(Easing.quad)
+    }).start(_ref2 => {
+      let {
+        finished
+      } = _ref2;
 
-  const onHide = () => {
-    setVisible(false);
-  };
+      if (finished && onNoticeHidden) {
+        onNoticeHidden(id);
+      }
+    });
+  }
 
-  const startAnimation = () => {
+  function startAnimation() {
     Animated.timing(animationValue, {
-      toValue: visible ? 1 : 0,
-      duration: visible ? 300 : 150,
+      toValue: 1,
+      duration: 300,
       useNativeDriver: true,
       easing: Easing.out(Easing.quad)
-    }).start(() => {
-      if (visible && onNoticeHidden) {
+    }).start(_ref3 => {
+      let {
+        finished
+      } = _ref3;
+
+      if (finished && onNoticeHidden) {
         timer.current = setTimeout(() => {
           onHide();
-        }, 3000);
-      }
-
-      if (!visible && onNoticeHidden) {
-        onNoticeHidden(id);
+        }, HIDE_TIMER);
       }
     });
-  };
+  }
 
   const noticeSolidStyles = usePreferredColorSchemeStyle(styles.noticeSolid, styles.noticeSolidDark);
   const successTextStyles = usePreferredColorSchemeStyle(styles.successText, styles.successTextDark);
   const errorTextStyles = usePreferredColorSchemeStyle(styles.errorText, styles.errorTextDark);
   const textStyles = [status === 'success' && successTextStyles, status === 'error' && errorTextStyles];
-  return createElement(Fragment, null, createElement(Animated.View, {
-    style: [styles.notice, !isIOS && noticeSolidStyles, {
-      width,
-      transform: [{
-        translateY: animationValue.interpolate({
-          inputRange: [0, 1],
-          outputRange: [-24, 0]
-        })
-      }]
+  const containerStyles = [styles.notice, !Platform.isIOS && noticeSolidStyles, {
+    width,
+    transform: [{
+      translateY: animationValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [-24, 0]
+      })
     }]
+  }];
+  return createElement(Fragment, null, createElement(Animated.View, {
+    style: containerStyles
   }, createElement(TouchableWithoutFeedback, {
     onPress: onHide
   }, createElement(View, {
@@ -91,7 +95,7 @@ const Notice = _ref => {
   }, createElement(Text, {
     numberOfLines: 3,
     style: textStyles
-  }, content))), isIOS && createElement(BlurView, {
+  }, content))), Platform.isIOS && createElement(BlurView, {
     style: styles.blurBackground,
     blurType: "prominent",
     blurAmount: 10

package/build-module/notice/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/notice/index.native.js"],"names":["Animated","Easing","Text","TouchableWithoutFeedback","View","Dimensions","Platform","BlurView","useEffect","useRef","useState","usePreferredColorSchemeStyle","styles","Notice","onNoticeHidden","content","id","status","width","setWidth","get","visible","setVisible","animationValue","Value","current","timer","isIOS","OS","onDimensionsChange","dimensionsChangeSubscription","addEventListener","remove","startAnimation","clearTimeout","onHide","timing","toValue","duration","useNativeDriver","easing","out","quad","start","setTimeout","noticeSolidStyles","noticeSolid","noticeSolidDark","successTextStyles","successText","successTextDark","errorTextStyles","errorText","errorTextDark","textStyles","notice","transform","translateY","interpolate","inputRange","outputRange","noticeContent","blurBackground"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tAnimated,\n\tEasing,\n\tText,\n\tTouchableWithoutFeedback,\n\tView,\n\tDimensions,\n\tPlatform,\n} from 'react-native';\nimport { BlurView } from '@react-native-community/blur';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst Notice = ( { onNoticeHidden, content, id, status } ) => {\n\tconst [ width, setWidth ] = useState( Dimensions.get( 'window' ).width );\n\tconst [ visible, setVisible ] = useState( true );\n\n\tconst animationValue = useRef( new Animated.Value( 0 ) ).current;\n\tconst timer = useRef( null );\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst onDimensionsChange = () => {\n\t\tsetWidth( Dimensions.get( 'window' ).width );\n\t};\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonDimensionsChange\n\t\t);\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tstartAnimation();\n\t\treturn () => {\n\t\t\tclearTimeout( timer?.current );\n\t\t};\n\t}, [ visible, id ] );\n\n\tconst onHide = () => {\n\t\tsetVisible( false );\n\t};\n\n\tconst startAnimation = () => {\n\t\tAnimated.timing( animationValue, {\n\t\t\ttoValue: visible ? 1 : 0,\n\t\t\tduration: visible ? 300 : 150,\n\t\t\tuseNativeDriver: true,\n\t\t\teasing: Easing.out( Easing.quad ),\n\t\t} ).start( () => {\n\t\t\tif ( visible && onNoticeHidden ) {\n\t\t\t\ttimer.current = setTimeout( () => {\n\t\t\t\t\tonHide();\n\t\t\t\t}, 3000 );\n\t\t\t}\n\n\t\t\tif ( ! visible && onNoticeHidden ) {\n\t\t\t\tonNoticeHidden( id );\n\t\t\t}\n\t\t} );\n\t};\n\n\tconst noticeSolidStyles = usePreferredColorSchemeStyle(\n\t\tstyles.noticeSolid,\n\t\tstyles.noticeSolidDark\n\t);\n\n\tconst successTextStyles = usePreferredColorSchemeStyle(\n\t\tstyles.successText,\n\t\tstyles.successTextDark\n\t);\n\n\tconst errorTextStyles = usePreferredColorSchemeStyle(\n\t\tstyles.errorText,\n\t\tstyles.errorTextDark\n\t);\n\n\tconst textStyles = [\n\t\tstatus === 'success' && successTextStyles,\n\t\tstatus === 'error' && errorTextStyles,\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t<Animated.View\n\t\t\t\tstyle={ [\n\t\t\t\t\tstyles.notice,\n\t\t\t\t\t! isIOS && noticeSolidStyles,\n\t\t\t\t\t{\n\t\t\t\t\t\twidth,\n\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\ttranslateY: animationValue.interpolate( {\n\t\t\t\t\t\t\t\t\tinputRange: [ 0, 1 ],\n\t\t\t\t\t\t\t\t\toutputRange: [ -24, 0 ],\n\t\t\t\t\t\t\t\t} ),\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t>\n\t\t\t\t<TouchableWithoutFeedback onPress={ onHide }>\n\t\t\t\t\t<View style={ styles.noticeContent }>\n\t\t\t\t\t\t<Text numberOfLines={ 3 } style={ textStyles }>\n\t\t\t\t\t\t\t{ content }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t{ isIOS && (\n\t\t\t\t\t<BlurView\n\t\t\t\t\t\tstyle={ styles.blurBackground }\n\t\t\t\t\t\tblurType=\"prominent\"\n\t\t\t\t\t\tblurAmount={ 10 }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</Animated.View>\n\t\t</>\n\t);\n};\n\nexport default Notice;\n"]}
+{"version":3,"sources":["@wordpress/components/src/notice/index.native.js"],"names":["Animated","Easing","Text","TouchableWithoutFeedback","View","useWindowDimensions","BlurView","useEffect","useRef","Platform","usePreferredColorSchemeStyle","styles","HIDE_TIMER","Notice","onNoticeHidden","content","id","status","width","animationValue","Value","current","timer","startAnimation","clearTimeout","onHide","timing","toValue","duration","useNativeDriver","easing","out","quad","start","finished","setTimeout","noticeSolidStyles","noticeSolid","noticeSolidDark","successTextStyles","successText","successTextDark","errorTextStyles","errorText","errorTextDark","textStyles","containerStyles","notice","isIOS","transform","translateY","interpolate","inputRange","outputRange","noticeContent","blurBackground"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tAnimated,\n\tEasing,\n\tText,\n\tTouchableWithoutFeedback,\n\tView,\n\tuseWindowDimensions,\n} from 'react-native';\nimport { BlurView } from '@react-native-community/blur';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, Platform } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst HIDE_TIMER = 3000;\n\nconst Notice = ( { onNoticeHidden, content, id, status } ) => {\n\tconst { width } = useWindowDimensions();\n\tconst animationValue = useRef( new Animated.Value( 0 ) ).current;\n\tconst timer = useRef( null );\n\n\tuseEffect( () => {\n\t\tstartAnimation();\n\n\t\treturn () => {\n\t\t\tclearTimeout( timer?.current );\n\t\t};\n\t}, [] );\n\n\tfunction onHide() {\n\t\tAnimated.timing( animationValue, {\n\t\t\ttoValue: 0,\n\t\t\tduration: 150,\n\t\t\tuseNativeDriver: true,\n\t\t\teasing: Easing.out( Easing.quad ),\n\t\t} ).start( ( { finished } ) => {\n\t\t\tif ( finished && onNoticeHidden ) {\n\t\t\t\tonNoticeHidden( id );\n\t\t\t}\n\t\t} );\n\t}\n\n\tfunction startAnimation() {\n\t\tAnimated.timing( animationValue, {\n\t\t\ttoValue: 1,\n\t\t\tduration: 300,\n\t\t\tuseNativeDriver: true,\n\t\t\teasing: Easing.out( Easing.quad ),\n\t\t} ).start( ( { finished } ) => {\n\t\t\tif ( finished && onNoticeHidden ) {\n\t\t\t\ttimer.current = setTimeout( () => {\n\t\t\t\t\tonHide();\n\t\t\t\t}, HIDE_TIMER );\n\t\t\t}\n\t\t} );\n\t}\n\n\tconst noticeSolidStyles = usePreferredColorSchemeStyle(\n\t\tstyles.noticeSolid,\n\t\tstyles.noticeSolidDark\n\t);\n\n\tconst successTextStyles = usePreferredColorSchemeStyle(\n\t\tstyles.successText,\n\t\tstyles.successTextDark\n\t);\n\n\tconst errorTextStyles = usePreferredColorSchemeStyle(\n\t\tstyles.errorText,\n\t\tstyles.errorTextDark\n\t);\n\n\tconst textStyles = [\n\t\tstatus === 'success' && successTextStyles,\n\t\tstatus === 'error' && errorTextStyles,\n\t];\n\n\tconst containerStyles = [\n\t\tstyles.notice,\n\t\t! Platform.isIOS && noticeSolidStyles,\n\t\t{\n\t\t\twidth,\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateY: animationValue.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, 1 ],\n\t\t\t\t\t\toutputRange: [ -24, 0 ],\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t<Animated.View style={ containerStyles }>\n\t\t\t\t<TouchableWithoutFeedback onPress={ onHide }>\n\t\t\t\t\t<View style={ styles.noticeContent }>\n\t\t\t\t\t\t<Text numberOfLines={ 3 } style={ textStyles }>\n\t\t\t\t\t\t\t{ content }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t{ Platform.isIOS && (\n\t\t\t\t\t<BlurView\n\t\t\t\t\t\tstyle={ styles.blurBackground }\n\t\t\t\t\t\tblurType=\"prominent\"\n\t\t\t\t\t\tblurAmount={ 10 }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</Animated.View>\n\t\t</>\n\t);\n};\n\nexport default Notice;\n"]}

package/build-module/notice/list.native.js

@@ -9,9 +9,8 @@ import { View } from 'react-native';
  * WordPress dependencies
  */
 
-import { Component } from '@wordpress/element';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
 /**
  * Internal dependencies
  */
@@ -19,55 +18,38 @@ import { compose } from '@wordpress/compose';
 import Notice from './';
 import styles from './style.scss';
 
-class NoticeList extends Component {
-  constructor() {
-    super(...arguments);
-    this.removeNotice = this.removeNotice.bind(this);
-  }
-
-  removeNotice(id) {
+function NoticeList() {
+  const {
+    notices
+  } = useSelect(select => {
     const {
-      removeNotice
-    } = this.props;
+      getNotices
+    } = select(noticesStore);
+    return {
+      notices: getNotices()
+    };
+  }, []);
+  const {
+    removeNotice
+  } = useDispatch(noticesStore);
+
+  function onRemoveNotice(id) {
     removeNotice(id);
   }
 
-  render() {
-    const {
-      notices,
-      shouldStack
-    } = this.props;
-
-    if (!notices.length) {
-      return null;
-    }
-
-    return createElement(View, {
-      style: styles.list,
-      key: notices.length
-    }, shouldStack ? notices.reverse().map(notice => createElement(Notice, _extends({}, notice, {
-      key: notice.id,
-      onNoticeHidden: this.removeNotice
-    }))) : createElement(Notice, _extends({}, notices[notices.length - 1], {
-      onNoticeHidden: this.removeNotice
-    })));
+  if (!notices.length) {
+    return null;
   }
 
+  return createElement(View, {
+    style: styles.list
+  }, notices.map(notice => {
+    return createElement(Notice, _extends({}, notice, {
+      key: notice.id,
+      onNoticeHidden: onRemoveNotice
+    }));
+  }));
 }
 
-export default compose([withSelect(select => {
-  const {
-    getNotices
-  } = select('core/notices');
-  return {
-    notices: getNotices()
-  };
-}), withDispatch(dispatch => {
-  const {
-    removeNotice
-  } = dispatch('core/notices');
-  return {
-    removeNotice
-  };
-})])(NoticeList);
+export default NoticeList;
 //# sourceMappingURL=list.native.js.map

package/build-module/notice/list.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/notice/list.native.js"],"names":["View","Component","withDispatch","withSelect","compose","Notice","styles","NoticeList","constructor","arguments","removeNotice","bind","id","props","render","notices","shouldStack","length","list","reverse","map","notice","select","getNotices","dispatch"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,cAArB;AAEA;AACA;AACA;;AACA,SAASC,SAAT,QAA0B,oBAA1B;AACA,SAASC,YAAT,EAAuBC,UAAvB,QAAyC,iBAAzC;AACA,SAASC,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,IAAnB;AACA,OAAOC,MAAP,MAAmB,cAAnB;;AAEA,MAAMC,UAAN,SAAyBN,SAAzB,CAAmC;AAClCO,EAAAA,WAAW,GAAG;AACb,UAAO,GAAGC,SAAV;AACA,SAAKC,YAAL,GAAoB,KAAKA,YAAL,CAAkBC,IAAlB,CAAwB,IAAxB,CAApB;AACA;;AAEDD,EAAAA,YAAY,CAAEE,EAAF,EAAO;AAClB,UAAM;AAAEF,MAAAA;AAAF,QAAmB,KAAKG,KAA9B;AACAH,IAAAA,YAAY,CAAEE,EAAF,CAAZ;AACA;;AAEDE,EAAAA,MAAM,GAAG;AACR,UAAM;AAAEC,MAAAA,OAAF;AAAWC,MAAAA;AAAX,QAA2B,KAAKH,KAAtC;;AAEA,QAAK,CAAEE,OAAO,CAACE,MAAf,EAAwB;AACvB,aAAO,IAAP;AACA;;AAED,WACC,cAAC,IAAD;AAAM,MAAA,KAAK,EAAGX,MAAM,CAACY,IAArB;AAA4B,MAAA,GAAG,EAAGH,OAAO,CAACE;AAA1C,OACGD,WAAW,GACZD,OAAO,CACLI,OADF,GAEEC,GAFF,CAESC,MAAF,IACL,cAAC,MAAD,eACMA,MADN;AAEC,MAAA,GAAG,EAAGA,MAAM,CAACT,EAFd;AAGC,MAAA,cAAc,EAAG,KAAKF;AAHvB,OAHF,CADY,GAWZ,cAAC,MAAD,eACMK,OAAO,CAAEA,OAAO,CAACE,MAAR,GAAiB,CAAnB,CADb;AAEC,MAAA,cAAc,EAAG,KAAKP;AAFvB,OAZF,CADD;AAoBA;;AAtCiC;;AAyCnC,eAAeN,OAAO,CAAE,CACvBD,UAAU,CAAImB,MAAF,IAAc;AACzB,QAAM;AAAEC,IAAAA;AAAF,MAAiBD,MAAM,CAAE,cAAF,CAA7B;AAEA,SAAO;AACNP,IAAAA,OAAO,EAAEQ,UAAU;AADb,GAAP;AAGA,CANS,CADa,EAQvBrB,YAAY,CAAIsB,QAAF,IAAgB;AAC7B,QAAM;AAAEd,IAAAA;AAAF,MAAmBc,QAAQ,CAAE,cAAF,CAAjC;AAEA,SAAO;AACNd,IAAAA;AADM,GAAP;AAGA,CANW,CARW,CAAF,CAAP,CAeVH,UAfU,CAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { withDispatch, withSelect } from '@wordpress/data';\nimport { compose } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Notice from './';\nimport styles from './style.scss';\n\nclass NoticeList extends Component {\n\tconstructor() {\n\t\tsuper( ...arguments );\n\t\tthis.removeNotice = this.removeNotice.bind( this );\n\t}\n\n\tremoveNotice( id ) {\n\t\tconst { removeNotice } = this.props;\n\t\tremoveNotice( id );\n\t}\n\n\trender() {\n\t\tconst { notices, shouldStack } = this.props;\n\n\t\tif ( ! notices.length ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<View style={ styles.list } key={ notices.length }>\n\t\t\t\t{ shouldStack ? (\n\t\t\t\t\tnotices\n\t\t\t\t\t\t.reverse()\n\t\t\t\t\t\t.map( ( notice ) => (\n\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\t{ ...notice }\n\t\t\t\t\t\t\t\tkey={ notice.id }\n\t\t\t\t\t\t\t\tonNoticeHidden={ this.removeNotice }\n\t\t\t\t\t\t\t></Notice>\n\t\t\t\t\t\t) )\n\t\t\t\t) : (\n\t\t\t\t\t<Notice\n\t\t\t\t\t\t{ ...notices[ notices.length - 1 ] }\n\t\t\t\t\t\tonNoticeHidden={ this.removeNotice }\n\t\t\t\t\t></Notice>\n\t\t\t\t) }\n\t\t\t</View>\n\t\t);\n\t}\n}\n\nexport default compose( [\n\twithSelect( ( select ) => {\n\t\tconst { getNotices } = select( 'core/notices' );\n\n\t\treturn {\n\t\t\tnotices: getNotices(),\n\t\t};\n\t} ),\n\twithDispatch( ( dispatch ) => {\n\t\tconst { removeNotice } = dispatch( 'core/notices' );\n\n\t\treturn {\n\t\t\tremoveNotice,\n\t\t};\n\t} ),\n] )( NoticeList );\n"]}
+{"version":3,"sources":["@wordpress/components/src/notice/list.native.js"],"names":["View","useSelect","useDispatch","store","noticesStore","Notice","styles","NoticeList","notices","select","getNotices","removeNotice","onRemoveNotice","id","length","list","map","notice"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,cAArB;AAEA;AACA;AACA;;AACA,SAASC,SAAT,EAAoBC,WAApB,QAAuC,iBAAvC;AACA,SAASC,KAAK,IAAIC,YAAlB,QAAsC,oBAAtC;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,IAAnB;AACA,OAAOC,MAAP,MAAmB,cAAnB;;AAEA,SAASC,UAAT,GAAsB;AACrB,QAAM;AAAEC,IAAAA;AAAF,MAAcP,SAAS,CAAIQ,MAAF,IAAc;AAC5C,UAAM;AAAEC,MAAAA;AAAF,QAAiBD,MAAM,CAAEL,YAAF,CAA7B;AACA,WAAO;AACNI,MAAAA,OAAO,EAAEE,UAAU;AADb,KAAP;AAGA,GAL4B,EAK1B,EAL0B,CAA7B;AAOA,QAAM;AAAEC,IAAAA;AAAF,MAAmBT,WAAW,CAAEE,YAAF,CAApC;;AAEA,WAASQ,cAAT,CAAyBC,EAAzB,EAA8B;AAC7BF,IAAAA,YAAY,CAAEE,EAAF,CAAZ;AACA;;AAED,MAAK,CAAEL,OAAO,CAACM,MAAf,EAAwB;AACvB,WAAO,IAAP;AACA;;AAED,SACC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGR,MAAM,CAACS;AAArB,KACGP,OAAO,CAACQ,GAAR,CAAeC,MAAF,IAAc;AAC5B,WACC,cAAC,MAAD,eACMA,MADN;AAEC,MAAA,GAAG,EAAGA,MAAM,CAACJ,EAFd;AAGC,MAAA,cAAc,EAAGD;AAHlB,OADD;AAOA,GARC,CADH,CADD;AAaA;;AAED,eAAeL,UAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport Notice from './';\nimport styles from './style.scss';\n\nfunction NoticeList() {\n\tconst { notices } = useSelect( ( select ) => {\n\t\tconst { getNotices } = select( noticesStore );\n\t\treturn {\n\t\t\tnotices: getNotices(),\n\t\t};\n\t}, [] );\n\n\tconst { removeNotice } = useDispatch( noticesStore );\n\n\tfunction onRemoveNotice( id ) {\n\t\tremoveNotice( id );\n\t}\n\n\tif ( ! notices.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<View style={ styles.list }>\n\t\t\t{ notices.map( ( notice ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<Notice\n\t\t\t\t\t\t{ ...notice }\n\t\t\t\t\t\tkey={ notice.id }\n\t\t\t\t\t\tonNoticeHidden={ onRemoveNotice }\n\t\t\t\t\t></Notice>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</View>\n\t);\n}\n\nexport default NoticeList;\n"]}

package/build-module/palette-edit/index.js

@@ -46,11 +46,39 @@ function NameInput(_ref) {
     onChange: onChange
   });
 }
+/**
+ * Returns a temporary name for a palette item in the format "Color + id".
+ * To ensure there are no duplicate ids, this function checks all slugs for temporary names.
+ * It expects slugs to be in the format: slugPrefix + color- + number.
+ * It then sets the id component of the new name based on the incremented id of the highest existing slug id.
+ *
+ * @param {string} elements   An array of color palette items.
+ * @param {string} slugPrefix The slug prefix used to match the element slug.
+ *
+ * @return {string} A unique name for a palette item.
+ */
+
+
+export function getNameForPosition(elements, slugPrefix) {
+  const temporaryNameRegex = new RegExp(`^${slugPrefix}color-([\\d]+)$`);
+  const position = elements.reduce((previousValue, currentValue) => {
+    if (typeof (currentValue === null || currentValue === void 0 ? void 0 : currentValue.slug) === 'string') {
+      const matches = currentValue === null || currentValue === void 0 ? void 0 : currentValue.slug.match(temporaryNameRegex);
+
+      if (matches) {
+        const id = parseInt(matches[1], 10);
+
+        if (id >= previousValue) {
+          return id + 1;
+        }
+      }
+    }
 
-function getNameForPosition(position) {
+    return previousValue;
+  }, 1);
   return sprintf(
   /* translators: %s: is a temporary id for a custom color */
-  __('Color %s '), position + 1);
+  __('Color %s'), position);
 }
 
 function Option(_ref2) {
@@ -96,7 +124,8 @@ function Option(_ref2) {
     label: __('Remove color'),
     onClick: onRemove
   }))), isEditing && createElement(Popover, {
-    position: "bottom left",
+    placement: "left-start",
+    offset: 20,
     className: "components-palette-edit__popover"
   }, !isGradient && createElement(ColorPicker, {
     color: value,
@@ -112,13 +141,14 @@ function Option(_ref2) {
   })));
 }
 
-function isTemporaryElement(slugPrefix, _ref3, index) {
+function isTemporaryElement(slugPrefix, _ref3) {
   let {
     slug,
     color,
     gradient
   } = _ref3;
-  return slug === slugPrefix + kebabCase(getNameForPosition(index)) && (!!color && color === DEFAULT_COLOR || !!gradient && gradient === DEFAULT_GRADIENT);
+  const regex = new RegExp(`^${slugPrefix}color-([\\d]+)$`);
+  return regex.test(slug) && (!!color && color === DEFAULT_COLOR || !!gradient && gradient === DEFAULT_GRADIENT);
 }
 
 function PaletteEditListView(_ref4) {
@@ -139,7 +169,7 @@ function PaletteEditListView(_ref4) {
   useEffect(() => {
     return () => {
       if (elementsReference.current.some((element, index) => isTemporaryElement(slugPrefix, element, index))) {
-        const newElements = elementsReference.current.filter((element, index) => !isTemporaryElement(slugPrefix, element, index));
+        const newElements = elementsReference.current.filter(element => !isTemporaryElement(slugPrefix, element));
         onChange(newElements.length ? newElements : undefined);
       }
     };
@@ -220,7 +250,7 @@ export default function PaletteEdit(_ref5) {
     icon: plus,
     label: isGradient ? __('Add gradient') : __('Add color'),
     onClick: () => {
-      const tempOptionName = getNameForPosition(elementsLength);
+      const tempOptionName = getNameForPosition(elements, slugPrefix);
       onChange([...elements, { ...(isGradient ? {
           gradient: DEFAULT_GRADIENT
         } : {

package/build-module/palette-edit/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/palette-edit/index.js"],"names":["kebabCase","useState","useRef","useEffect","__","sprintf","lineSolid","moreVertical","plus","__experimentalUseFocusOutside","useFocusOutside","useDebounce","Button","ColorPicker","FlexItem","HStack","ItemGroup","VStack","GradientPicker","ColorPalette","DropdownMenu","Popover","PaletteActionsContainer","PaletteEditStyles","PaletteHeading","PaletteHStackHeader","IndicatorStyled","PaletteItem","NameContainer","NameInputControl","DoneButton","RemoveButton","NavigableMenu","DEFAULT_GRADIENT","CustomGradientPicker","DEFAULT_COLOR","NameInput","value","onChange","label","getNameForPosition","position","Option","canOnlyChangeValues","element","isEditing","onStartEditing","onRemove","onStopEditing","slugPrefix","isGradient","focusOutsideProps","gradient","color","undefined","style","cursor","background","name","nextName","slug","newColor","newGradient","isTemporaryElement","index","PaletteEditListView","elements","editingElement","setEditingElement","elementsReference","current","some","newElements","filter","length","debounceOnChange","map","newElement","currentElement","currentIndex","_currentElement","EMPTY_ARRAY","PaletteEdit","gradients","colors","paletteLabel","emptyMessage","canReset","setIsEditing","isAdding","elementsLength","hasElements","tempOptionName","isSmall","onClose"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport {\n\t__experimentalUseFocusOutside as useFocusOutside,\n\tuseDebounce,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport GradientPicker from '../gradient-picker';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tPaletteActionsContainer,\n\tPaletteEditStyles,\n\tPaletteHeading,\n\tPaletteHStackHeader,\n\tIndicatorStyled,\n\tPaletteItem,\n\tNameContainer,\n\tNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\n\nconst DEFAULT_COLOR = '#000';\n\nfunction NameInput( { value, onChange, label } ) {\n\treturn (\n\t\t<NameInputControl\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\nfunction getNameForPosition( position ) {\n\treturn sprintf(\n\t\t/* translators: %s: is a temporary id for a custom color */\n\t\t__( 'Color %s ' ),\n\t\tposition + 1\n\t);\n}\n\nfunction Option( {\n\tcanOnlyChangeValues,\n\telement,\n\tonChange,\n\tisEditing,\n\tonStartEditing,\n\tonRemove,\n\tonStopEditing,\n\tslugPrefix,\n\tisGradient,\n} ) {\n\tconst focusOutsideProps = useFocusOutside( onStopEditing );\n\tconst value = isGradient ? element.gradient : element.color;\n\n\treturn (\n\t\t<PaletteItem\n\t\t\tclassName={ isEditing ? 'is-selected' : undefined }\n\t\t\tas=\"div\"\n\t\t\tonClick={ onStartEditing }\n\t\t\t{ ...( isEditing\n\t\t\t\t? { ...focusOutsideProps }\n\t\t\t\t: {\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t},\n\t\t\t\t  } ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<IndicatorStyled\n\t\t\t\t\t\tstyle={ { background: value, color: 'transparent' } }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ isEditing && ! canOnlyChangeValues ? (\n\t\t\t\t\t\t<NameInput\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Gradient name' )\n\t\t\t\t\t\t\t\t\t: __( 'Color name' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ element.name }\n\t\t\t\t\t\t\tonChange={ ( nextName ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug: slugPrefix + kebabCase( nextName ),\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<NameContainer>{ element.name }</NameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isEditing && ! canOnlyChangeValues && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ __( 'Remove color' ) }\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isEditing && (\n\t\t\t\t<Popover\n\t\t\t\t\tposition=\"bottom left\"\n\t\t\t\t\tclassName=\"components-palette-edit__popover\"\n\t\t\t\t>\n\t\t\t\t\t{ ! isGradient && (\n\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\tcolor={ value }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tcolor: newColor,\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ isGradient && (\n\t\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tonChange={ ( newGradient ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tgradient: newGradient,\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</PaletteItem>\n\t);\n}\n\nfunction isTemporaryElement( slugPrefix, { slug, color, gradient }, index ) {\n\treturn (\n\t\tslug === slugPrefix + kebabCase( getNameForPosition( index ) ) &&\n\t\t( ( !! color && color === DEFAULT_COLOR ) ||\n\t\t\t( !! gradient && gradient === DEFAULT_GRADIENT ) )\n\t);\n}\n\nfunction PaletteEditListView( {\n\telements,\n\tonChange,\n\teditingElement,\n\tsetEditingElement,\n\tcanOnlyChangeValues,\n\tslugPrefix,\n\tisGradient,\n} ) {\n\t// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.\n\tconst elementsReference = useRef();\n\tuseEffect( () => {\n\t\telementsReference.current = elements;\n\t}, [ elements ] );\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif (\n\t\t\t\telementsReference.current.some( ( element, index ) =>\n\t\t\t\t\tisTemporaryElement( slugPrefix, element, index )\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tconst newElements = elementsReference.current.filter(\n\t\t\t\t\t( element, index ) =>\n\t\t\t\t\t\t! isTemporaryElement( slugPrefix, element, index )\n\t\t\t\t);\n\t\t\t\tonChange( newElements.length ? newElements : undefined );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isRounded>\n\t\t\t\t{ elements.map( ( element, index ) => (\n\t\t\t\t\t<Option\n\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\telement={ element }\n\t\t\t\t\t\tonStartEditing={ () => {\n\t\t\t\t\t\t\tif ( editingElement !== index ) {\n\t\t\t\t\t\t\t\tsetEditingElement( index );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( newElement ) => {\n\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t( currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn currentElement;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\tconst newElements = elements.filter(\n\t\t\t\t\t\t\t\t( _currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tnewElements.length ? newElements : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisEditing={ index === editingElement }\n\t\t\t\t\t\tonStopEditing={ () => {\n\t\t\t\t\t\t\tif ( index === editingElement ) {\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY = [];\n\nexport default function PaletteEdit( {\n\tgradients,\n\tcolors = EMPTY_ARRAY,\n\tonChange,\n\tpaletteLabel,\n\temptyMessage,\n\tcanOnlyChangeValues,\n\tcanReset,\n\tslugPrefix = '',\n} ) {\n\tconst isGradient = !! gradients;\n\tconst elements = isGradient ? gradients : colors;\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingElement, setEditingElement ] = useState( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\teditingElement &&\n\t\telements[ editingElement ] &&\n\t\t! elements[ editingElement ].slug;\n\tconst elementsLength = elements.length;\n\tconst hasElements = elementsLength > 0;\n\n\treturn (\n\t\t<PaletteEditStyles>\n\t\t\t<PaletteHStackHeader>\n\t\t\t\t<PaletteHeading>{ paletteLabel }</PaletteHeading>\n\t\t\t\t<PaletteActionsContainer>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Done' ) }\n\t\t\t\t\t\t</DoneButton>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Add gradient' )\n\t\t\t\t\t\t\t\t\t: __( 'Add color' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst tempOptionName = getNameForPosition(\n\t\t\t\t\t\t\t\t\telementsLength\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t...elements,\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t...( isGradient\n\t\t\t\t\t\t\t\t\t\t\t? { gradient: DEFAULT_GRADIENT }\n\t\t\t\t\t\t\t\t\t\t\t: { color: DEFAULT_COLOR } ),\n\t\t\t\t\t\t\t\t\t\tname: tempOptionName,\n\t\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\t\tkebabCase( tempOptionName ),\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\tsetIsEditing( true );\n\t\t\t\t\t\t\t\tsetEditingElement( elements.length );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ hasElements &&\n\t\t\t\t\t\t( ! isEditing ||\n\t\t\t\t\t\t\t! canOnlyChangeValues ||\n\t\t\t\t\t\t\tcanReset ) && (\n\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t\t? __( 'Gradient options' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Color options' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\t\tisSmall: true,\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\t{ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Edit gradients' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Edit colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all gradients'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all colors'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ canReset && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Reset gradient' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Reset colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</NavigableMenu>\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</DropdownMenu>\n\t\t\t\t\t\t) }\n\t\t\t\t</PaletteActionsContainer>\n\t\t\t</PaletteHStackHeader>\n\t\t\t{ hasElements && (\n\t\t\t\t<>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<PaletteEditListView\n\t\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\t\telements={ elements }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\teditingElement={ editingElement }\n\t\t\t\t\t\t\tsetEditingElement={ setEditingElement }\n\t\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing &&\n\t\t\t\t\t\t( isGradient ? (\n\t\t\t\t\t\t\t<GradientPicker\n\t\t\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\t\t\tonChange={ () => {} }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomGradients={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\tonChange={ () => {} }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ ! hasElements && emptyMessage }\n\t\t</PaletteEditStyles>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/palette-edit/index.js"],"names":["kebabCase","useState","useRef","useEffect","__","sprintf","lineSolid","moreVertical","plus","__experimentalUseFocusOutside","useFocusOutside","useDebounce","Button","ColorPicker","FlexItem","HStack","ItemGroup","VStack","GradientPicker","ColorPalette","DropdownMenu","Popover","PaletteActionsContainer","PaletteEditStyles","PaletteHeading","PaletteHStackHeader","IndicatorStyled","PaletteItem","NameContainer","NameInputControl","DoneButton","RemoveButton","NavigableMenu","DEFAULT_GRADIENT","CustomGradientPicker","DEFAULT_COLOR","NameInput","value","onChange","label","getNameForPosition","elements","slugPrefix","temporaryNameRegex","RegExp","position","reduce","previousValue","currentValue","slug","matches","match","id","parseInt","Option","canOnlyChangeValues","element","isEditing","onStartEditing","onRemove","onStopEditing","isGradient","focusOutsideProps","gradient","color","undefined","style","cursor","background","name","nextName","newColor","newGradient","isTemporaryElement","regex","test","PaletteEditListView","editingElement","setEditingElement","elementsReference","current","some","index","newElements","filter","length","debounceOnChange","map","newElement","currentElement","currentIndex","_currentElement","EMPTY_ARRAY","PaletteEdit","gradients","colors","paletteLabel","emptyMessage","canReset","setIsEditing","isAdding","elementsLength","hasElements","tempOptionName","isSmall","onClose"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,QAA1B;AAEA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,MAAnB,EAA2BC,SAA3B,QAA4C,oBAA5C;AACA,SAASC,EAAT,EAAaC,OAAb,QAA4B,iBAA5B;AACA,SAASC,SAAT,EAAoBC,YAApB,EAAkCC,IAAlC,QAA8C,kBAA9C;AACA,SACCC,6BAA6B,IAAIC,eADlC,EAECC,WAFD,QAGO,oBAHP;AAKA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,SAASC,WAAT,QAA4B,iBAA5B;AACA,SAASC,QAAT,QAAyB,SAAzB;AACA,SAASC,MAAT,QAAuB,YAAvB;AACA,SAASC,SAAT,QAA0B,eAA1B;AACA,SAASC,MAAT,QAAuB,YAAvB;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,SACCC,uBADD,EAECC,iBAFD,EAGCC,cAHD,EAICC,mBAJD,EAKCC,eALD,EAMCC,WAND,EAOCC,aAPD,EAQCC,gBARD,EASCC,UATD,EAUCC,YAVD,QAWO,UAXP;AAYA,SAASC,aAAT,QAA8B,wBAA9B;AACA,SAASC,gBAAT,QAAiC,qCAAjC;AACA,OAAOC,oBAAP,MAAiC,2BAAjC;AAEA,MAAMC,aAAa,GAAG,MAAtB;;AAEA,SAASC,SAAT,OAAiD;AAAA,MAA7B;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAA6B;AAChD,SACC,cAAC,gBAAD;AACC,IAAA,KAAK,EAAGA,KADT;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,KAAK,EAAGF,KAHT;AAIC,IAAA,QAAQ,EAAGC;AAJZ,IADD;AAQA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,SAASE,kBAAT,CAA6BC,QAA7B,EAAuCC,UAAvC,EAAoD;AAC1D,QAAMC,kBAAkB,GAAG,IAAIC,MAAJ,CAAa,IAAIF,UAAY,iBAA7B,CAA3B;AACA,QAAMG,QAAQ,GAAGJ,QAAQ,CAACK,MAAT,CAAiB,CAAEC,aAAF,EAAiBC,YAAjB,KAAmC;AACpE,QAAK,QAAOA,YAAP,aAAOA,YAAP,uBAAOA,YAAY,CAAEC,IAArB,MAA8B,QAAnC,EAA8C;AAC7C,YAAMC,OAAO,GAAGF,YAAH,aAAGA,YAAH,uBAAGA,YAAY,CAAEC,IAAd,CAAmBE,KAAnB,CAA0BR,kBAA1B,CAAhB;;AACA,UAAKO,OAAL,EAAe;AACd,cAAME,EAAE,GAAGC,QAAQ,CAAEH,OAAO,CAAE,CAAF,CAAT,EAAgB,EAAhB,CAAnB;;AACA,YAAKE,EAAE,IAAIL,aAAX,EAA2B;AAC1B,iBAAOK,EAAE,GAAG,CAAZ;AACA;AACD;AACD;;AACD,WAAOL,aAAP;AACA,GAXgB,EAWd,CAXc,CAAjB;AAaA,SAAO1C,OAAO;AACb;AACAD,EAAAA,EAAE,CAAE,UAAF,CAFW,EAGbyC,QAHa,CAAd;AAKA;;AAED,SAASS,MAAT,QAUI;AAAA,MAVa;AAChBC,IAAAA,mBADgB;AAEhBC,IAAAA,OAFgB;AAGhBlB,IAAAA,QAHgB;AAIhBmB,IAAAA,SAJgB;AAKhBC,IAAAA,cALgB;AAMhBC,IAAAA,QANgB;AAOhBC,IAAAA,aAPgB;AAQhBlB,IAAAA,UARgB;AAShBmB,IAAAA;AATgB,GAUb;AACH,QAAMC,iBAAiB,GAAGpD,eAAe,CAAEkD,aAAF,CAAzC;AACA,QAAMvB,KAAK,GAAGwB,UAAU,GAAGL,OAAO,CAACO,QAAX,GAAsBP,OAAO,CAACQ,KAAtD;AAEA,SACC,cAAC,WAAD;AACC,IAAA,SAAS,EAAGP,SAAS,GAAG,aAAH,GAAmBQ,SADzC;AAEC,IAAA,EAAE,EAAC,KAFJ;AAGC,IAAA,OAAO,EAAGP;AAHX,KAIQD,SAAS,GACb,EAAE,GAAGK;AAAL,GADa,GAEb;AACAI,IAAAA,KAAK,EAAE;AACNC,MAAAA,MAAM,EAAE;AADF;AADP,GANJ,GAYC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,cAAC,QAAD,QACC,cAAC,eAAD;AACC,IAAA,KAAK,EAAG;AAAEC,MAAAA,UAAU,EAAE/B,KAAd;AAAqB2B,MAAAA,KAAK,EAAE;AAA5B;AADT,IADD,CADD,EAMC,cAAC,QAAD,QACGP,SAAS,IAAI,CAAEF,mBAAf,GACD,cAAC,SAAD;AACC,IAAA,KAAK,EACJM,UAAU,GACPzD,EAAE,CAAE,eAAF,CADK,GAEPA,EAAE,CAAE,YAAF,CAJP;AAMC,IAAA,KAAK,EAAGoD,OAAO,CAACa,IANjB;AAOC,IAAA,QAAQ,EAAKC,QAAF,IACVhC,QAAQ,CAAE,EACT,GAAGkB,OADM;AAETa,MAAAA,IAAI,EAAEC,QAFG;AAGTrB,MAAAA,IAAI,EAAEP,UAAU,GAAG1C,SAAS,CAAEsE,QAAF;AAHnB,KAAF;AARV,IADC,GAiBD,cAAC,aAAD,QAAiBd,OAAO,CAACa,IAAzB,CAlBF,CAND,EA2BGZ,SAAS,IAAI,CAAEF,mBAAf,IACD,cAAC,QAAD,QACC,cAAC,YAAD;AACC,IAAA,OAAO,MADR;AAEC,IAAA,IAAI,EAAGjD,SAFR;AAGC,IAAA,KAAK,EAAGF,EAAE,CAAE,cAAF,CAHX;AAIC,IAAA,OAAO,EAAGuD;AAJX,IADD,CA5BF,CAZD,EAkDGF,SAAS,IACV,cAAC,OAAD;AACC,IAAA,SAAS,EAAC,YADX;AAEC,IAAA,MAAM,EAAG,EAFV;AAGC,IAAA,SAAS,EAAC;AAHX,KAKG,CAAEI,UAAF,IACD,cAAC,WAAD;AACC,IAAA,KAAK,EAAGxB,KADT;AAEC,IAAA,QAAQ,EAAKkC,QAAF,IACVjC,QAAQ,CAAE,EACT,GAAGkB,OADM;AAETQ,MAAAA,KAAK,EAAEO;AAFE,KAAF;AAHV,IANF,EAgBGV,UAAU,IACX,cAAC,oBAAD;AACC,IAAA,iCAAiC,MADlC;AAEC,IAAA,KAAK,EAAGxB,KAFT;AAGC,IAAA,QAAQ,EAAKmC,WAAF,IACVlC,QAAQ,CAAE,EACT,GAAGkB,OADM;AAETO,MAAAA,QAAQ,EAAES;AAFD,KAAF;AAJV,IAjBF,CAnDF,CADD;AAoFA;;AAED,SAASC,kBAAT,CAA6B/B,UAA7B,SAAqE;AAAA,MAA5B;AAAEO,IAAAA,IAAF;AAAQe,IAAAA,KAAR;AAAeD,IAAAA;AAAf,GAA4B;AACpE,QAAMW,KAAK,GAAG,IAAI9B,MAAJ,CAAa,IAAIF,UAAY,iBAA7B,CAAd;AACA,SACCgC,KAAK,CAACC,IAAN,CAAY1B,IAAZ,MACI,CAAC,CAAEe,KAAH,IAAYA,KAAK,KAAK7B,aAAxB,IACC,CAAC,CAAE4B,QAAH,IAAeA,QAAQ,KAAK9B,gBAF/B,CADD;AAKA;;AAED,SAAS2C,mBAAT,QAQI;AAAA,MAR0B;AAC7BnC,IAAAA,QAD6B;AAE7BH,IAAAA,QAF6B;AAG7BuC,IAAAA,cAH6B;AAI7BC,IAAAA,iBAJ6B;AAK7BvB,IAAAA,mBAL6B;AAM7Bb,IAAAA,UAN6B;AAO7BmB,IAAAA;AAP6B,GAQ1B;AACH;AACA,QAAMkB,iBAAiB,GAAG7E,MAAM,EAAhC;AACAC,EAAAA,SAAS,CAAE,MAAM;AAChB4E,IAAAA,iBAAiB,CAACC,OAAlB,GAA4BvC,QAA5B;AACA,GAFQ,EAEN,CAAEA,QAAF,CAFM,CAAT;AAGAtC,EAAAA,SAAS,CAAE,MAAM;AAChB,WAAO,MAAM;AACZ,UACC4E,iBAAiB,CAACC,OAAlB,CAA0BC,IAA1B,CAAgC,CAAEzB,OAAF,EAAW0B,KAAX,KAC/BT,kBAAkB,CAAE/B,UAAF,EAAcc,OAAd,EAAuB0B,KAAvB,CADnB,CADD,EAIE;AACD,cAAMC,WAAW,GAAGJ,iBAAiB,CAACC,OAAlB,CAA0BI,MAA1B,CACjB5B,OAAF,IAAe,CAAEiB,kBAAkB,CAAE/B,UAAF,EAAcc,OAAd,CADhB,CAApB;AAGAlB,QAAAA,QAAQ,CAAE6C,WAAW,CAACE,MAAZ,GAAqBF,WAArB,GAAmClB,SAArC,CAAR;AACA;AACD,KAXD;AAYA,GAbQ,EAaN,EAbM,CAAT;AAeA,QAAMqB,gBAAgB,GAAG3E,WAAW,CAAE2B,QAAF,EAAY,GAAZ,CAApC;AAEA,SACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,cAAC,SAAD;AAAW,IAAA,SAAS;AAApB,KACGG,QAAQ,CAAC8C,GAAT,CAAc,CAAE/B,OAAF,EAAW0B,KAAX,KACf,cAAC,MAAD;AACC,IAAA,UAAU,EAAGrB,UADd;AAEC,IAAA,mBAAmB,EAAGN,mBAFvB;AAGC,IAAA,GAAG,EAAG2B,KAHP;AAIC,IAAA,OAAO,EAAG1B,OAJX;AAKC,IAAA,cAAc,EAAG,MAAM;AACtB,UAAKqB,cAAc,KAAKK,KAAxB,EAAgC;AAC/BJ,QAAAA,iBAAiB,CAAEI,KAAF,CAAjB;AACA;AACD,KATF;AAUC,IAAA,QAAQ,EAAKM,UAAF,IAAkB;AAC5BF,MAAAA,gBAAgB,CACf7C,QAAQ,CAAC8C,GAAT,CACC,CAAEE,cAAF,EAAkBC,YAAlB,KAAoC;AACnC,YAAKA,YAAY,KAAKR,KAAtB,EAA8B;AAC7B,iBAAOM,UAAP;AACA;;AACD,eAAOC,cAAP;AACA,OANF,CADe,CAAhB;AAUA,KArBF;AAsBC,IAAA,QAAQ,EAAG,MAAM;AAChBX,MAAAA,iBAAiB,CAAE,IAAF,CAAjB;AACA,YAAMK,WAAW,GAAG1C,QAAQ,CAAC2C,MAAT,CACnB,CAAEO,eAAF,EAAmBD,YAAnB,KAAqC;AACpC,YAAKA,YAAY,KAAKR,KAAtB,EAA8B;AAC7B,iBAAO,KAAP;AACA;;AACD,eAAO,IAAP;AACA,OANkB,CAApB;AAQA5C,MAAAA,QAAQ,CACP6C,WAAW,CAACE,MAAZ,GAAqBF,WAArB,GAAmClB,SAD5B,CAAR;AAGA,KAnCF;AAoCC,IAAA,SAAS,EAAGiB,KAAK,KAAKL,cApCvB;AAqCC,IAAA,aAAa,EAAG,MAAM;AACrB,UAAKK,KAAK,KAAKL,cAAf,EAAgC;AAC/BC,QAAAA,iBAAiB,CAAE,IAAF,CAAjB;AACA;AACD,KAzCF;AA0CC,IAAA,UAAU,EAAGpC;AA1Cd,IADC,CADH,CADD,CADD;AAoDA;;AAED,MAAMkD,WAAW,GAAG,EAApB;AAEA,eAAe,SAASC,WAAT,QASX;AAAA,MATiC;AACpCC,IAAAA,SADoC;AAEpCC,IAAAA,MAAM,GAAGH,WAF2B;AAGpCtD,IAAAA,QAHoC;AAIpC0D,IAAAA,YAJoC;AAKpCC,IAAAA,YALoC;AAMpC1C,IAAAA,mBANoC;AAOpC2C,IAAAA,QAPoC;AAQpCxD,IAAAA,UAAU,GAAG;AARuB,GASjC;AACH,QAAMmB,UAAU,GAAG,CAAC,CAAEiC,SAAtB;AACA,QAAMrD,QAAQ,GAAGoB,UAAU,GAAGiC,SAAH,GAAeC,MAA1C;AACA,QAAM,CAAEtC,SAAF,EAAa0C,YAAb,IAA8BlG,QAAQ,CAAE,KAAF,CAA5C;AACA,QAAM,CAAE4E,cAAF,EAAkBC,iBAAlB,IAAwC7E,QAAQ,CAAE,IAAF,CAAtD;AACA,QAAMmG,QAAQ,GACb3C,SAAS,IACToB,cADA,IAEApC,QAAQ,CAAEoC,cAAF,CAFR,IAGA,CAAEpC,QAAQ,CAAEoC,cAAF,CAAR,CAA2B5B,IAJ9B;AAKA,QAAMoD,cAAc,GAAG5D,QAAQ,CAAC4C,MAAhC;AACA,QAAMiB,WAAW,GAAGD,cAAc,GAAG,CAArC;AAEA,SACC,cAAC,iBAAD,QACC,cAAC,mBAAD,QACC,cAAC,cAAD,QAAkBL,YAAlB,CADD,EAEC,cAAC,uBAAD,QACGvC,SAAS,IACV,cAAC,UAAD;AACC,IAAA,OAAO,MADR;AAEC,IAAA,OAAO,EAAG,MAAM;AACf0C,MAAAA,YAAY,CAAE,KAAF,CAAZ;AACArB,MAAAA,iBAAiB,CAAE,IAAF,CAAjB;AACA;AALF,KAOG1E,EAAE,CAAE,MAAF,CAPL,CAFF,EAYG,CAAEmD,mBAAF,IACD,cAAC,MAAD;AACC,IAAA,OAAO,MADR;AAEC,IAAA,SAAS,EAAG6C,QAFb;AAGC,IAAA,IAAI,EAAG5F,IAHR;AAIC,IAAA,KAAK,EACJqD,UAAU,GACPzD,EAAE,CAAE,cAAF,CADK,GAEPA,EAAE,CAAE,WAAF,CAPP;AASC,IAAA,OAAO,EAAG,MAAM;AACf,YAAMmG,cAAc,GAAG/D,kBAAkB,CACxCC,QADwC,EAExCC,UAFwC,CAAzC;AAKAJ,MAAAA,QAAQ,CAAE,CACT,GAAGG,QADM,EAET,EACC,IAAKoB,UAAU,GACZ;AAAEE,UAAAA,QAAQ,EAAE9B;AAAZ,SADY,GAEZ;AAAE+B,UAAAA,KAAK,EAAE7B;AAAT,SAFH,CADD;AAICkC,QAAAA,IAAI,EAAEkC,cAJP;AAKCtD,QAAAA,IAAI,EACHP,UAAU,GACV1C,SAAS,CAAEuG,cAAF;AAPX,OAFS,CAAF,CAAR;AAYAJ,MAAAA,YAAY,CAAE,IAAF,CAAZ;AACArB,MAAAA,iBAAiB,CAAErC,QAAQ,CAAC4C,MAAX,CAAjB;AACA;AA7BF,IAbF,EA8CGiB,WAAW,KACV,CAAE7C,SAAF,IACD,CAAEF,mBADD,IAED2C,QAHW,CAAX,IAIA,cAAC,YAAD;AACC,IAAA,IAAI,EAAG3F,YADR;AAEC,IAAA,KAAK,EACJsD,UAAU,GACPzD,EAAE,CAAE,kBAAF,CADK,GAEPA,EAAE,CAAE,eAAF,CALP;AAOC,IAAA,WAAW,EAAG;AACboG,MAAAA,OAAO,EAAE;AADI;AAPf,KAWG;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WACD,8BACC,cAAC,aAAD;AAAe,MAAA,IAAI,EAAC;AAApB,OACG,CAAEhD,SAAF,IACD,cAAC,MAAD;AACC,MAAA,OAAO,EAAC,UADT;AAEC,MAAA,OAAO,EAAG,MAAM;AACf0C,QAAAA,YAAY,CAAE,IAAF,CAAZ;AACAM,QAAAA,OAAO;AACP,OALF;AAMC,MAAA,SAAS,EAAC;AANX,OAQG5C,UAAU,GACTzD,EAAE,CAAE,gBAAF,CADO,GAETA,EAAE,CAAE,aAAF,CAVN,CAFF,EAeG,CAAEmD,mBAAF,IACD,cAAC,MAAD;AACC,MAAA,OAAO,EAAC,UADT;AAEC,MAAA,OAAO,EAAG,MAAM;AACfuB,QAAAA,iBAAiB,CAChB,IADgB,CAAjB;AAGAqB,QAAAA,YAAY,CAAE,KAAF,CAAZ;AACA7D,QAAAA,QAAQ;AACRmE,QAAAA,OAAO;AACP,OATF;AAUC,MAAA,SAAS,EAAC;AAVX,OAYG5C,UAAU,GACTzD,EAAE,CACF,sBADE,CADO,GAITA,EAAE,CACF,mBADE,CAhBN,CAhBF,EAqCG8F,QAAQ,IACT,cAAC,MAAD;AACC,MAAA,OAAO,EAAC,UADT;AAEC,MAAA,OAAO,EAAG,MAAM;AACfpB,QAAAA,iBAAiB,CAChB,IADgB,CAAjB;AAGAxC,QAAAA,QAAQ;AACRmE,QAAAA,OAAO;AACP;AARF,OAUG5C,UAAU,GACTzD,EAAE,CAAE,gBAAF,CADO,GAETA,EAAE,CAAE,cAAF,CAZN,CAtCF,CADD,CADC;AAAA,GAXH,CAlDH,CAFD,CADD,EA8HGkG,WAAW,IACZ,8BACG7C,SAAS,IACV,cAAC,mBAAD;AACC,IAAA,mBAAmB,EAAGF,mBADvB;AAEC,IAAA,QAAQ,EAAGd,QAFZ;AAGC,IAAA,QAAQ,EAAGH,QAHZ;AAIC,IAAA,cAAc,EAAGuC,cAJlB;AAKC,IAAA,iBAAiB,EAAGC,iBALrB;AAMC,IAAA,UAAU,EAAGpC,UANd;AAOC,IAAA,UAAU,EAAGmB;AAPd,IAFF,EAYG,CAAEJ,SAAF,KACCI,UAAU,GACX,cAAC,cAAD;AACC,IAAA,SAAS,EAAGiC,SADb;AAEC,IAAA,QAAQ,EAAG,MAAM,CAAE,CAFpB;AAGC,IAAA,SAAS,EAAG,KAHb;AAIC,IAAA,sBAAsB,EAAG;AAJ1B,IADW,GAQX,cAAC,YAAD;AACC,IAAA,MAAM,EAAGC,MADV;AAEC,IAAA,QAAQ,EAAG,MAAM,CAAE,CAFpB;AAGC,IAAA,SAAS,EAAG,KAHb;AAIC,IAAA,mBAAmB,EAAG;AAJvB,IATA,CAZH,CA/HF,EA6JG,CAAEO,WAAF,IAAiBL,YA7JpB,CADD;AAiKA","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport {\n\t__experimentalUseFocusOutside as useFocusOutside,\n\tuseDebounce,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport GradientPicker from '../gradient-picker';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tPaletteActionsContainer,\n\tPaletteEditStyles,\n\tPaletteHeading,\n\tPaletteHStackHeader,\n\tIndicatorStyled,\n\tPaletteItem,\n\tNameContainer,\n\tNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\n\nconst DEFAULT_COLOR = '#000';\n\nfunction NameInput( { value, onChange, label } ) {\n\treturn (\n\t\t<NameInputControl\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\n/**\n * Returns a temporary name for a palette item in the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs for temporary names.\n * It expects slugs to be in the format: slugPrefix + color- + number.\n * It then sets the id component of the new name based on the incremented id of the highest existing slug id.\n *\n * @param {string} elements   An array of color palette items.\n * @param {string} slugPrefix The slug prefix used to match the element slug.\n *\n * @return {string} A unique name for a palette item.\n */\nexport function getNameForPosition( elements, slugPrefix ) {\n\tconst temporaryNameRegex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\tconst position = elements.reduce( ( previousValue, currentValue ) => {\n\t\tif ( typeof currentValue?.slug === 'string' ) {\n\t\t\tconst matches = currentValue?.slug.match( temporaryNameRegex );\n\t\t\tif ( matches ) {\n\t\t\t\tconst id = parseInt( matches[ 1 ], 10 );\n\t\t\t\tif ( id >= previousValue ) {\n\t\t\t\t\treturn id + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn previousValue;\n\t}, 1 );\n\n\treturn sprintf(\n\t\t/* translators: %s: is a temporary id for a custom color */\n\t\t__( 'Color %s' ),\n\t\tposition\n\t);\n}\n\nfunction Option( {\n\tcanOnlyChangeValues,\n\telement,\n\tonChange,\n\tisEditing,\n\tonStartEditing,\n\tonRemove,\n\tonStopEditing,\n\tslugPrefix,\n\tisGradient,\n} ) {\n\tconst focusOutsideProps = useFocusOutside( onStopEditing );\n\tconst value = isGradient ? element.gradient : element.color;\n\n\treturn (\n\t\t<PaletteItem\n\t\t\tclassName={ isEditing ? 'is-selected' : undefined }\n\t\t\tas=\"div\"\n\t\t\tonClick={ onStartEditing }\n\t\t\t{ ...( isEditing\n\t\t\t\t? { ...focusOutsideProps }\n\t\t\t\t: {\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t},\n\t\t\t\t  } ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<IndicatorStyled\n\t\t\t\t\t\tstyle={ { background: value, color: 'transparent' } }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ isEditing && ! canOnlyChangeValues ? (\n\t\t\t\t\t\t<NameInput\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Gradient name' )\n\t\t\t\t\t\t\t\t\t: __( 'Color name' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ element.name }\n\t\t\t\t\t\t\tonChange={ ( nextName ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug: slugPrefix + kebabCase( nextName ),\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<NameContainer>{ element.name }</NameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isEditing && ! canOnlyChangeValues && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ __( 'Remove color' ) }\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isEditing && (\n\t\t\t\t<Popover\n\t\t\t\t\tplacement=\"left-start\"\n\t\t\t\t\toffset={ 20 }\n\t\t\t\t\tclassName=\"components-palette-edit__popover\"\n\t\t\t\t>\n\t\t\t\t\t{ ! isGradient && (\n\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\tcolor={ value }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tcolor: newColor,\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ isGradient && (\n\t\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tonChange={ ( newGradient ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tgradient: newGradient,\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</PaletteItem>\n\t);\n}\n\nfunction isTemporaryElement( slugPrefix, { slug, color, gradient } ) {\n\tconst regex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\treturn (\n\t\tregex.test( slug ) &&\n\t\t( ( !! color && color === DEFAULT_COLOR ) ||\n\t\t\t( !! gradient && gradient === DEFAULT_GRADIENT ) )\n\t);\n}\n\nfunction PaletteEditListView( {\n\telements,\n\tonChange,\n\teditingElement,\n\tsetEditingElement,\n\tcanOnlyChangeValues,\n\tslugPrefix,\n\tisGradient,\n} ) {\n\t// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.\n\tconst elementsReference = useRef();\n\tuseEffect( () => {\n\t\telementsReference.current = elements;\n\t}, [ elements ] );\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif (\n\t\t\t\telementsReference.current.some( ( element, index ) =>\n\t\t\t\t\tisTemporaryElement( slugPrefix, element, index )\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tconst newElements = elementsReference.current.filter(\n\t\t\t\t\t( element ) => ! isTemporaryElement( slugPrefix, element )\n\t\t\t\t);\n\t\t\t\tonChange( newElements.length ? newElements : undefined );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isRounded>\n\t\t\t\t{ elements.map( ( element, index ) => (\n\t\t\t\t\t<Option\n\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\telement={ element }\n\t\t\t\t\t\tonStartEditing={ () => {\n\t\t\t\t\t\t\tif ( editingElement !== index ) {\n\t\t\t\t\t\t\t\tsetEditingElement( index );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( newElement ) => {\n\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t( currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn currentElement;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\tconst newElements = elements.filter(\n\t\t\t\t\t\t\t\t( _currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tnewElements.length ? newElements : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisEditing={ index === editingElement }\n\t\t\t\t\t\tonStopEditing={ () => {\n\t\t\t\t\t\t\tif ( index === editingElement ) {\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY = [];\n\nexport default function PaletteEdit( {\n\tgradients,\n\tcolors = EMPTY_ARRAY,\n\tonChange,\n\tpaletteLabel,\n\temptyMessage,\n\tcanOnlyChangeValues,\n\tcanReset,\n\tslugPrefix = '',\n} ) {\n\tconst isGradient = !! gradients;\n\tconst elements = isGradient ? gradients : colors;\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingElement, setEditingElement ] = useState( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\teditingElement &&\n\t\telements[ editingElement ] &&\n\t\t! elements[ editingElement ].slug;\n\tconst elementsLength = elements.length;\n\tconst hasElements = elementsLength > 0;\n\n\treturn (\n\t\t<PaletteEditStyles>\n\t\t\t<PaletteHStackHeader>\n\t\t\t\t<PaletteHeading>{ paletteLabel }</PaletteHeading>\n\t\t\t\t<PaletteActionsContainer>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Done' ) }\n\t\t\t\t\t\t</DoneButton>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Add gradient' )\n\t\t\t\t\t\t\t\t\t: __( 'Add color' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst tempOptionName = getNameForPosition(\n\t\t\t\t\t\t\t\t\telements,\n\t\t\t\t\t\t\t\t\tslugPrefix\n\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t...elements,\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t...( isGradient\n\t\t\t\t\t\t\t\t\t\t\t? { gradient: DEFAULT_GRADIENT }\n\t\t\t\t\t\t\t\t\t\t\t: { color: DEFAULT_COLOR } ),\n\t\t\t\t\t\t\t\t\t\tname: tempOptionName,\n\t\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\t\tkebabCase( tempOptionName ),\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\tsetIsEditing( true );\n\t\t\t\t\t\t\t\tsetEditingElement( elements.length );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ hasElements &&\n\t\t\t\t\t\t( ! isEditing ||\n\t\t\t\t\t\t\t! canOnlyChangeValues ||\n\t\t\t\t\t\t\tcanReset ) && (\n\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t\t? __( 'Gradient options' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Color options' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\t\tisSmall: true,\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\t{ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Edit gradients' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Edit colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all gradients'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all colors'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ canReset && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Reset gradient' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Reset colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</NavigableMenu>\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</DropdownMenu>\n\t\t\t\t\t\t) }\n\t\t\t\t</PaletteActionsContainer>\n\t\t\t</PaletteHStackHeader>\n\t\t\t{ hasElements && (\n\t\t\t\t<>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<PaletteEditListView\n\t\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\t\telements={ elements }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\teditingElement={ editingElement }\n\t\t\t\t\t\t\tsetEditingElement={ setEditingElement }\n\t\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing &&\n\t\t\t\t\t\t( isGradient ? (\n\t\t\t\t\t\t\t<GradientPicker\n\t\t\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\t\t\tonChange={ () => {} }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomGradients={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\tonChange={ () => {} }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ ! hasElements && emptyMessage }\n\t\t</PaletteEditStyles>\n\t);\n}\n"]}