@wordpress/components 17.0.0 → 19.0.2

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

@@ -24,20 +24,21 @@ let contentWidth = 0;
 let scrollPosition = 0;
 let customIndicatorWidth = 0;
 
-function ColorPalette({
-  setColor,
-  activeColor,
-  isGradientColor,
-  defaultSettings,
-  currentSegment,
-  onCustomPress,
-  shouldEnableBottomSheetScroll,
-  shouldShowCustomIndicatorOption = true,
-  shouldShowCustomLabel = true,
-  shouldShowCustomVerticalSeparator = true,
-  customColorIndicatorStyles,
-  customIndicatorWrapperStyles
-}) {
+function ColorPalette(_ref) {
+  let {
+    setColor,
+    activeColor,
+    isGradientColor,
+    defaultSettings,
+    currentSegment,
+    onCustomPress,
+    shouldEnableBottomSheetScroll,
+    shouldShowCustomIndicatorOption = true,
+    shouldShowCustomLabel = true,
+    shouldShowCustomVerticalSeparator = true,
+    customColorIndicatorStyles,
+    customIndicatorWrapperStyles
+  } = _ref;
   const customSwatchGradients = ['linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)', 'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)', 'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)'];
   const scrollViewRef = useRef();
   const isIOS = Platform.OS === 'ios';
@@ -153,9 +154,10 @@ function ColorPalette({
     };
   }
 
-  function onCustomIndicatorLayout({
-    nativeEvent
-  }) {
+  function onCustomIndicatorLayout(_ref2) {
+    let {
+      nativeEvent
+    } = _ref2;
     const {
       width
     } = nativeEvent.layout;
@@ -165,9 +167,10 @@ function ColorPalette({
     }
   }
 
-  function onScroll({
-    nativeEvent
-  }) {
+  function onScroll(_ref3) {
+    let {
+      nativeEvent
+    } = _ref3;
     scrollPosition = nativeEvent.contentOffset.x;
   }
 

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

@@ -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","setColor","activeColor","isGradientColor","defaultSettings","currentSegment","onCustomPress","shouldEnableBottomSheetScroll","shouldShowCustomIndicatorOption","shouldShowCustomLabel","shouldShowCustomVerticalSeparator","customColorIndicatorStyles","customIndicatorWrapperStyles","customSwatchGradients","scrollViewRef","isIOS","OS","isGradientSegment","segments","scale","Value","current","opacity","defaultColors","colors","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","contentContainer","container","selected","colorIndicator","toUpperCase","scaleValue","transform"],"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\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} ) {\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 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\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}, [ currentSegment ] );\n\n\tfunction isSelectedCustom() {\n\t\tconst isWithinColors =\n\t\t\tactiveColor && colors && colors.includes( activeColor );\n\t\tif ( 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<ScrollView\n\t\t\tcontentContainerStyle={ styles.contentContainer }\n\t\t\tstyle={ styles.container }\n\t\t\thorizontal\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\tdisableScrollViewPanResponder\n\t\t\tscrollEventThrottle={ 16 }\n\t\t\tonScroll={ onScroll }\n\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\tonScrollBeginDrag={ () => shouldEnableBottomSheetScroll( false ) }\n\t\t\tonScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }\n\t\t\tref={ scrollViewRef }\n\t\t>\n\t\t\t{ shouldShowCustomIndicator && (\n\t\t\t\t<View\n\t\t\t\t\tstyle={ customIndicatorWrapperStyle }\n\t\t\t\t\tonLayout={ onCustomIndicatorLayout }\n\t\t\t\t>\n\t\t\t\t\t{ shouldShowCustomVerticalSeparator && (\n\t\t\t\t\t\t<View style={ verticalSeparatorStyle } />\n\t\t\t\t\t) }\n\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\taccessibilityState={ { selected: isSelectedCustom() } }\n\t\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View style={ customIndicatorWrapperStyle }>\n\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\twithCustomPicker={ ! isGradientSegment }\n\t\t\t\t\t\t\t\tcolor={ customIndicatorColor }\n\t\t\t\t\t\t\t\tisSelected={ isSelectedCustom() }\n\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\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{ shouldShowCustomLabel && (\n\t\t\t\t\t\t\t\t<Text style={ customTextStyle }>\n\t\t\t\t\t\t\t\t\t{ isIOS\n\t\t\t\t\t\t\t\t\t\t? customText\n\t\t\t\t\t\t\t\t\t\t: customText.toUpperCase() }\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t</View>\n\t\t\t) }\n\t\t\t{ colors.map( ( color ) => {\n\t\t\t\tconst scaleValue = isSelected( color ) ? scaleInterpolation : 1;\n\t\t\t\treturn (\n\t\t\t\t\t<View key={ `${ color }-${ isSelected( color ) }` }>\n\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\tonPress={ () => onColorPress( color ) }\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: isSelected( color ),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taccessibilityHint={ color }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tscale: scaleValue,\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>\n\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\tisSelected={ isSelected( color ) }\n\t\t\t\t\t\t\t\t\topacity={ opacity }\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</Animated.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} ) }\n\t\t</ScrollView>\n\t);\n}\n\nexport default ColorPalette;\n"]}
+{"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","setColor","activeColor","isGradientColor","defaultSettings","currentSegment","onCustomPress","shouldEnableBottomSheetScroll","shouldShowCustomIndicatorOption","shouldShowCustomLabel","shouldShowCustomVerticalSeparator","customColorIndicatorStyles","customIndicatorWrapperStyles","customSwatchGradients","scrollViewRef","isIOS","OS","isGradientSegment","segments","scale","Value","current","opacity","defaultColors","colors","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","contentContainer","container","selected","colorIndicator","toUpperCase","scaleValue","transform"],"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\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} ) {\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 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\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}, [ currentSegment ] );\n\n\tfunction isSelectedCustom() {\n\t\tconst isWithinColors =\n\t\t\tactiveColor && colors && colors.includes( activeColor );\n\t\tif ( 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<ScrollView\n\t\t\tcontentContainerStyle={ styles.contentContainer }\n\t\t\tstyle={ styles.container }\n\t\t\thorizontal\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\tdisableScrollViewPanResponder\n\t\t\tscrollEventThrottle={ 16 }\n\t\t\tonScroll={ onScroll }\n\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\tonScrollBeginDrag={ () => shouldEnableBottomSheetScroll( false ) }\n\t\t\tonScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }\n\t\t\tref={ scrollViewRef }\n\t\t>\n\t\t\t{ shouldShowCustomIndicator && (\n\t\t\t\t<View\n\t\t\t\t\tstyle={ customIndicatorWrapperStyle }\n\t\t\t\t\tonLayout={ onCustomIndicatorLayout }\n\t\t\t\t>\n\t\t\t\t\t{ shouldShowCustomVerticalSeparator && (\n\t\t\t\t\t\t<View style={ verticalSeparatorStyle } />\n\t\t\t\t\t) }\n\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\taccessibilityState={ { selected: isSelectedCustom() } }\n\t\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View style={ customIndicatorWrapperStyle }>\n\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\twithCustomPicker={ ! isGradientSegment }\n\t\t\t\t\t\t\t\tcolor={ customIndicatorColor }\n\t\t\t\t\t\t\t\tisSelected={ isSelectedCustom() }\n\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\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{ shouldShowCustomLabel && (\n\t\t\t\t\t\t\t\t<Text style={ customTextStyle }>\n\t\t\t\t\t\t\t\t\t{ isIOS\n\t\t\t\t\t\t\t\t\t\t? customText\n\t\t\t\t\t\t\t\t\t\t: customText.toUpperCase() }\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t</View>\n\t\t\t) }\n\t\t\t{ colors.map( ( color ) => {\n\t\t\t\tconst scaleValue = isSelected( color ) ? scaleInterpolation : 1;\n\t\t\t\treturn (\n\t\t\t\t\t<View key={ `${ color }-${ isSelected( color ) }` }>\n\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\tonPress={ () => onColorPress( color ) }\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: isSelected( color ),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taccessibilityHint={ color }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tscale: scaleValue,\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>\n\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\tisSelected={ isSelected( color ) }\n\t\t\t\t\t\t\t\t\topacity={ opacity }\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</Animated.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} ) }\n\t\t</ScrollView>\n\t);\n}\n\nexport default ColorPalette;\n"]}

package/build-module/color-palette/styles.js

@@ -0,0 +1,27 @@
+import _styled from "@emotion/styled/base";
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import { Heading } from '../heading';
+export const ColorHeading = /*#__PURE__*/_styled(Heading, process.env.NODE_ENV === "production" ? {
+  target: "e1uu5br00"
+} : {
+  target: "e1uu5br00",
+  label: "ColorHeading"
+})(process.env.NODE_ENV === "production" ? {
+  name: "13lxv2o",
+  styles: "text-transform:uppercase;line-height:24px;font-weight:500;&&&{font-size:11px;margin-bottom:0;}"
+} : {
+  name: "13lxv2o",
+  styles: "text-transform:uppercase;line-height:24px;font-weight:500;&&&{font-size:11px;margin-bottom:0;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItcGFsZXR0ZS9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVTZDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItcGFsZXR0ZS9zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEhlYWRpbmcgfSBmcm9tICcuLi9oZWFkaW5nJztcblxuZXhwb3J0IGNvbnN0IENvbG9ySGVhZGluZyA9IHN0eWxlZCggSGVhZGluZyApYFxuXHR0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuXHRsaW5lLWhlaWdodDogMjRweDtcblx0Zm9udC13ZWlnaHQ6IDUwMDtcblx0JiYmIHtcblx0XHRmb250LXNpemU6IDExcHg7XG5cdFx0bWFyZ2luLWJvdHRvbTogMDtcblx0fVxuYDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+//# sourceMappingURL=styles.js.map

package/build-module/color-palette/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/color-palette/styles.js"],"names":["Heading","ColorHeading"],"mappings":";;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,YAAxB;AAEA,OAAO,MAAMC,YAAY,GAAG,qBAAQD,OAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Heading } from '../heading';\n\nexport const ColorHeading = styled( Heading )`\n\ttext-transform: uppercase;\n\tline-height: 24px;\n\tfont-weight: 500;\n\t&&& {\n\t\tfont-size: 11px;\n\t\tmargin-bottom: 0;\n\t}\n`;\n"]}

package/build-module/color-picker/color-display.js

@@ -0,0 +1,169 @@
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { useCopyToClipboard } from '@wordpress/compose';
+import { useState, useEffect, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+
+import { Text } from '../text';
+import { Flex, FlexItem } from '../flex';
+import { Tooltip } from '../ui/tooltip';
+import { space } from '../ui/utils/space';
+
+const ValueDisplay = _ref => {
+  let {
+    values
+  } = _ref;
+  return createElement(Fragment, null, values.map(_ref2 => {
+    let [value, abbreviation] = _ref2;
+    return createElement(FlexItem, {
+      key: abbreviation,
+      isBlock: true,
+      display: "flex"
+    }, createElement(Text, {
+      color: "blue"
+    }, abbreviation), createElement(Text, null, value));
+  }));
+};
+
+const HslDisplay = _ref3 => {
+  let {
+    color,
+    enableAlpha
+  } = _ref3;
+  const {
+    h,
+    s,
+    l,
+    a
+  } = color.toHsl();
+  const values = [[Math.floor(h), 'H'], [Math.round(s * 100), 'S'], [Math.round(l * 100), 'L']];
+
+  if (enableAlpha) {
+    values.push([Math.round(a * 100), 'A']);
+  }
+
+  return createElement(ValueDisplay, {
+    values: values
+  });
+};
+
+const RgbDisplay = _ref4 => {
+  let {
+    color,
+    enableAlpha
+  } = _ref4;
+  const {
+    r,
+    g,
+    b,
+    a
+  } = color.toRgb();
+  const values = [[r, 'R'], [g, 'G'], [b, 'B']];
+
+  if (enableAlpha) {
+    values.push([Math.round(a * 100), 'A']);
+  }
+
+  return createElement(ValueDisplay, {
+    values: values
+  });
+};
+
+const HexDisplay = _ref5 => {
+  let {
+    color
+  } = _ref5;
+  const colorWithoutHash = color.toHex().slice(1).toUpperCase();
+  return createElement(FlexItem, null, createElement(Text, {
+    color: "blue"
+  }, "#"), createElement(Text, null, colorWithoutHash));
+};
+
+const getComponent = colorType => {
+  switch (colorType) {
+    case 'hsl':
+      return HslDisplay;
+
+    case 'rgb':
+      return RgbDisplay;
+
+    default:
+    case 'hex':
+      return HexDisplay;
+  }
+};
+
+export const ColorDisplay = _ref6 => {
+  let {
+    color,
+    colorType,
+    enableAlpha
+  } = _ref6;
+  const [copiedColor, setCopiedColor] = useState(null);
+  const copyTimer = useRef();
+  const props = {
+    color,
+    enableAlpha
+  };
+  const Component = getComponent(colorType);
+  const copyRef = useCopyToClipboard(() => {
+    switch (colorType) {
+      case 'hsl':
+        {
+          return color.toHslString();
+        }
+
+      case 'rgb':
+        {
+          return color.toRgbString();
+        }
+
+      default:
+      case 'hex':
+        {
+          return color.toHex();
+        }
+    }
+  }, () => {
+    if (copyTimer.current) {
+      clearTimeout(copyTimer.current);
+    }
+
+    setCopiedColor(color.toHex());
+    copyTimer.current = setTimeout(() => {
+      setCopiedColor(null);
+      copyTimer.current = undefined;
+    }, 3000);
+  });
+  useEffect(() => {
+    // clear copyTimer on component unmount.
+    return () => {
+      if (copyTimer.current) {
+        clearTimeout(copyTimer.current);
+      }
+    };
+  }, []);
+  return createElement(Tooltip, {
+    content: createElement(Text, {
+      color: "white"
+    }, copiedColor === color.toHex() ? __('Copied!') : __('Copy'))
+  }, createElement(Flex, {
+    justify: "flex-start",
+    gap: space(1),
+    ref: copyRef,
+    style: {
+      height: 30
+    }
+  }, createElement(Component, props)));
+};
+//# sourceMappingURL=color-display.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/color-picker/color-display.tsx"],"names":["useCopyToClipboard","useState","useEffect","useRef","__","Text","Flex","FlexItem","Tooltip","space","ValueDisplay","values","map","value","abbreviation","HslDisplay","color","enableAlpha","h","s","l","a","toHsl","Math","floor","round","push","RgbDisplay","r","g","b","toRgb","HexDisplay","colorWithoutHash","toHex","slice","toUpperCase","getComponent","colorType","ColorDisplay","copiedColor","setCopiedColor","copyTimer","props","Component","copyRef","toHslString","toRgbString","current","clearTimeout","setTimeout","undefined","height"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../text';\nimport { Flex, FlexItem } from '../flex';\nimport { Tooltip } from '../ui/tooltip';\nimport type { ColorType } from './types';\nimport { space } from '../ui/utils/space';\n\ninterface ColorDisplayProps {\n\tcolor: Colord;\n\tcolorType: ColorType;\n\tenableAlpha: boolean;\n}\n\ninterface DisplayProps {\n\tcolor: Colord;\n\tenableAlpha: boolean;\n}\n\ntype Values = [ number, string ][];\n\ninterface ValueDisplayProps {\n\tvalues: Values;\n}\n\nconst ValueDisplay = ( { values }: ValueDisplayProps ) => (\n\t<>\n\t\t{ values.map( ( [ value, abbreviation ] ) => {\n\t\t\treturn (\n\t\t\t\t<FlexItem key={ abbreviation } isBlock display=\"flex\">\n\t\t\t\t\t<Text color=\"blue\">{ abbreviation }</Text>\n\t\t\t\t\t<Text>{ value }</Text>\n\t\t\t\t</FlexItem>\n\t\t\t);\n\t\t} ) }\n\t</>\n);\n\nconst HslDisplay = ( { color, enableAlpha }: DisplayProps ) => {\n\tconst { h, s, l, a } = color.toHsl();\n\n\tconst values: Values = [\n\t\t[ Math.floor( h ), 'H' ],\n\t\t[ Math.round( s * 100 ), 'S' ],\n\t\t[ Math.round( l * 100 ), 'L' ],\n\t];\n\tif ( enableAlpha ) {\n\t\tvalues.push( [ Math.round( a * 100 ), 'A' ] );\n\t}\n\n\treturn <ValueDisplay values={ values } />;\n};\n\nconst RgbDisplay = ( { color, enableAlpha }: DisplayProps ) => {\n\tconst { r, g, b, a } = color.toRgb();\n\n\tconst values: Values = [\n\t\t[ r, 'R' ],\n\t\t[ g, 'G' ],\n\t\t[ b, 'B' ],\n\t];\n\n\tif ( enableAlpha ) {\n\t\tvalues.push( [ Math.round( a * 100 ), 'A' ] );\n\t}\n\n\treturn <ValueDisplay values={ values } />;\n};\n\nconst HexDisplay = ( { color }: DisplayProps ) => {\n\tconst colorWithoutHash = color.toHex().slice( 1 ).toUpperCase();\n\treturn (\n\t\t<FlexItem>\n\t\t\t<Text color=\"blue\">#</Text>\n\t\t\t<Text>{ colorWithoutHash }</Text>\n\t\t</FlexItem>\n\t);\n};\n\nconst getComponent = ( colorType: ColorType ) => {\n\tswitch ( colorType ) {\n\t\tcase 'hsl':\n\t\t\treturn HslDisplay;\n\t\tcase 'rgb':\n\t\t\treturn RgbDisplay;\n\t\tdefault:\n\t\tcase 'hex':\n\t\t\treturn HexDisplay;\n\t}\n};\n\nexport const ColorDisplay = ( {\n\tcolor,\n\tcolorType,\n\tenableAlpha,\n}: ColorDisplayProps ) => {\n\tconst [ copiedColor, setCopiedColor ] = useState< string | null >( null );\n\tconst copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();\n\tconst props = { color, enableAlpha };\n\tconst Component = getComponent( colorType );\n\tconst copyRef = useCopyToClipboard< HTMLDivElement >(\n\t\t() => {\n\t\t\tswitch ( colorType ) {\n\t\t\t\tcase 'hsl': {\n\t\t\t\t\treturn color.toHslString();\n\t\t\t\t}\n\t\t\t\tcase 'rgb': {\n\t\t\t\t\treturn color.toRgbString();\n\t\t\t\t}\n\t\t\t\tdefault:\n\t\t\t\tcase 'hex': {\n\t\t\t\t\treturn color.toHex();\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t() => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t\tsetCopiedColor( color.toHex() );\n\t\t\tcopyTimer.current = setTimeout( () => {\n\t\t\t\tsetCopiedColor( null );\n\t\t\t\tcopyTimer.current = undefined;\n\t\t\t}, 3000 );\n\t\t}\n\t);\n\tuseEffect( () => {\n\t\t// clear copyTimer on component unmount.\n\t\treturn () => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\treturn (\n\t\t<Tooltip\n\t\t\tcontent={\n\t\t\t\t<Text color=\"white\">\n\t\t\t\t\t{ copiedColor === color.toHex()\n\t\t\t\t\t\t? __( 'Copied!' )\n\t\t\t\t\t\t: __( 'Copy' ) }\n\t\t\t\t</Text>\n\t\t\t}\n\t\t>\n\t\t\t<Flex\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\tgap={ space( 1 ) }\n\t\t\t\tref={ copyRef }\n\t\t\t\tstyle={ { height: 30 } }\n\t\t\t>\n\t\t\t\t<Component { ...props } />\n\t\t\t</Flex>\n\t\t</Tooltip>\n\t);\n};\n"]}

package/build-module/{ui/color-picker → color-picker}/color-input.js

@@ -10,12 +10,13 @@ import { createElement } from "@wordpress/element";
 import { RgbInput } from './rgb-input';
 import { HslInput } from './hsl-input';
 import { HexInput } from './hex-input';
-export const ColorInput = ({
-  colorType,
-  color,
-  onChange,
-  enableAlpha
-}) => {
+export const ColorInput = _ref => {
+  let {
+    colorType,
+    color,
+    onChange,
+    enableAlpha
+  } = _ref;
   const props = {
     color,
     onChange,

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/color-picker/color-input.tsx"],"names":["RgbInput","HslInput","HexInput","ColorInput","colorType","color","onChange","enableAlpha","props"],"mappings":";;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,aAAzB;AACA,SAASC,QAAT,QAAyB,aAAzB;AACA,SAASC,QAAT,QAAyB,aAAzB;AASA,OAAO,MAAMC,UAAU,GAAG,QAKF;AAAA,MALI;AAC3BC,IAAAA,SAD2B;AAE3BC,IAAAA,KAF2B;AAG3BC,IAAAA,QAH2B;AAI3BC,IAAAA;AAJ2B,GAKJ;AACvB,QAAMC,KAAK,GAAG;AAAEH,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAd;;AACA,UAASH,SAAT;AACC,SAAK,KAAL;AACC,aAAO,cAAC,QAAD,EAAeI,KAAf,CAAP;;AACD,SAAK,KAAL;AACC,aAAO,cAAC,QAAD,EAAeA,KAAf,CAAP;;AACD;AACA,SAAK,KAAL;AACC,aAAO,cAAC,QAAD,EAAeA,KAAf,CAAP;AAPF;AASA,CAhBM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend, Colord } from 'colord';\n\n/**\n * Internal dependencies\n */\nimport { RgbInput } from './rgb-input';\nimport { HslInput } from './hsl-input';\nimport { HexInput } from './hex-input';\n\ninterface ColorInputProps {\n\tcolorType: 'hsl' | 'hex' | 'rgb';\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport const ColorInput = ( {\n\tcolorType,\n\tcolor,\n\tonChange,\n\tenableAlpha,\n}: ColorInputProps ) => {\n\tconst props = { color, onChange, enableAlpha };\n\tswitch ( colorType ) {\n\t\tcase 'hsl':\n\t\t\treturn <HslInput { ...props } />;\n\t\tcase 'rgb':\n\t\t\treturn <RgbInput { ...props } />;\n\t\tdefault:\n\t\tcase 'hex':\n\t\t\treturn <HexInput { ...props } />;\n\t}\n};\n"]}

package/build-module/{ui/color-picker → color-picker}/component.js

@@ -5,27 +5,28 @@ import { createElement } from "@wordpress/element";
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-
+import { useCallback } from 'react';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
-import { moreVertical } from '@wordpress/icons';
-import { useDebounce } from '@wordpress/compose';
+
+import { useState, useMemo } from '@wordpress/element';
+import { settings } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
 
-import { useContextSystem, contextConnect } from '../context';
-import { HStack } from '../../h-stack';
-import Button from '../../button';
-import { Spacer } from '../../spacer';
-import { ColorfulWrapper, SelectControl } from './styles';
+import { useContextSystem, contextConnect } from '../ui/context';
+import { HStack } from '../h-stack';
+import { Spacer } from '../spacer';
+import { ColorfulWrapper, SelectControl, AuxiliaryColorArtefactWrapper, DetailsControlButton } from './styles';
 import { ColorDisplay } from './color-display';
 import { ColorInput } from './color-input';
 import { Picker } from './picker';
-import { useControlledValue } from '../../utils/hooks';
+extend([namesPlugin]);
 const options = [{
   label: 'RGB',
   value: 'rgb'
@@ -37,50 +38,31 @@ const options = [{
   value: 'hex'
 }];
 
-const getSafeColor = color => {
-  return color ? {
-    a: 1,
-    ...color
-  } : {
-    h: 0,
-    s: 0,
-    l: 100,
-    a: 1
-  };
-};
-
 const ColorPicker = (props, forwardedRef) => {
   const {
     enableAlpha = false,
-    color: colorProp,
+    color,
     onChange,
-    defaultValue,
+    defaultValue = '#fff',
     copyFormat,
     ...divProps
-  } = useContextSystem(props, 'ColorPicker');
-  const [color, setColor] = useControlledValue({
-    onChange,
-    value: colorProp,
-    defaultValue
-  }); // Debounce to prevent rapid changes from conflicting with one another.
-
-  const debouncedSetColor = useDebounce(setColor);
-
-  const handleChange = nextValue => {
-    debouncedSetColor(nextValue);
-  }; // Use a safe default value for the color and remove the possibility of `undefined`.
-
+  } = useContextSystem(props, 'ColorPicker'); // Use a safe default value for the color and remove the possibility of `undefined`.
 
-  const safeColor = getSafeColor(color);
+  const safeColordColor = useMemo(() => {
+    return color ? colord(color) : colord(defaultValue);
+  }, [color, defaultValue]);
+  const handleChange = useCallback(nextValue => {
+    onChange(nextValue.toHex());
+  }, [onChange]);
   const [showInputs, setShowInputs] = useState(false);
   const [colorType, setColorType] = useState(copyFormat || 'hex');
   return createElement(ColorfulWrapper, _extends({
     ref: forwardedRef
   }, divProps), createElement(Picker, {
     onChange: handleChange,
-    color: safeColor,
+    color: safeColordColor,
     enableAlpha: enableAlpha
-  }), createElement(HStack, {
+  }), createElement(AuxiliaryColorArtefactWrapper, null, createElement(HStack, {
     justify: "space-between"
   }, showInputs ? createElement(SelectControl, {
     options: options,
@@ -89,20 +71,23 @@ const ColorPicker = (props, forwardedRef) => {
     label: __('Color format'),
     hideLabelFromVision: true
   }) : createElement(ColorDisplay, {
-    color: safeColor,
+    color: safeColordColor,
     colorType: copyFormat || colorType,
     enableAlpha: enableAlpha
-  }), createElement(Button, {
+  }), createElement(DetailsControlButton, {
+    isSmall: true,
     onClick: () => setShowInputs(!showInputs),
-    icon: moreVertical,
+    icon: settings,
     isPressed: showInputs,
     label: showInputs ? __('Hide detailed inputs') : __('Show detailed inputs')
-  })), createElement(Spacer, null), showInputs && createElement(ColorInput, {
+  })), createElement(Spacer, {
+    margin: 4
+  }), showInputs && createElement(ColorInput, {
     colorType: colorType,
-    color: safeColor,
+    color: safeColordColor,
     onChange: handleChange,
     enableAlpha: enableAlpha
-  }));
+  })));
 };
 
 const ConnectedColorPicker = contextConnect(ColorPicker, 'ColorPicker');

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/color-picker/component.tsx"],"names":["useCallback","colord","extend","namesPlugin","useState","useMemo","settings","__","useContextSystem","contextConnect","HStack","Spacer","ColorfulWrapper","SelectControl","AuxiliaryColorArtefactWrapper","DetailsControlButton","ColorDisplay","ColorInput","Picker","options","label","value","ColorPicker","props","forwardedRef","enableAlpha","color","onChange","defaultValue","copyFormat","divProps","safeColordColor","handleChange","nextValue","toHex","showInputs","setShowInputs","colorType","setColorType","nextColorType","ConnectedColorPicker"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport { Ref, useCallback } from 'react';\nimport { colord, extend, Colord } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useMemo } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { HStack } from '../h-stack';\nimport { Spacer } from '../spacer';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tDetailsControlButton,\n} from './styles';\nimport { ColorDisplay } from './color-display';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\n\nimport type { ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nexport interface ColorPickerProps {\n\tenableAlpha?: boolean;\n\tcolor?: string;\n\tonChange?: ( color: string ) => void;\n\tdefaultValue?: string;\n\tcopyFormat?: ColorType;\n}\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst ColorPicker = (\n\tprops: WordPressComponentProps< ColorPickerProps, 'div', false >,\n\tforwardedRef: Ref< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst safeColordColor = useMemo( () => {\n\t\treturn color ? colord( color ) : colord( defaultValue );\n\t}, [ color, defaultValue ] );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tonChange( nextValue.toHex() );\n\t\t},\n\t\t[ onChange ]\n\t);\n\n\tconst [ showInputs, setShowInputs ] = useState< boolean >( false );\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t{ showInputs ? (\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ColorDisplay\n\t\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<DetailsControlButton\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tonClick={ () => setShowInputs( ! showInputs ) }\n\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\tisPressed={ showInputs }\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tshowInputs\n\t\t\t\t\t\t\t\t? __( 'Hide detailed inputs' )\n\t\t\t\t\t\t\t\t: __( 'Show detailed inputs' )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t{ showInputs && (\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nconst ConnectedColorPicker = contextConnect( ColorPicker, 'ColorPicker' );\n\nexport default ConnectedColorPicker;\n"]}

package/build-module/color-picker/hex-input.js

@@ -0,0 +1,50 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+import { colord } from 'colord';
+/**
+ * WordPress dependencies
+ */
+
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+
+import { Text } from '../text';
+import { Spacer } from '../spacer';
+import { space } from '../ui/utils/space';
+import { ColorHexInputControl } from './styles';
+export const HexInput = _ref => {
+  let {
+    color,
+    onChange,
+    enableAlpha
+  } = _ref;
+
+  const handleValidate = value => {
+    if (!colord('#' + value).isValid()) {
+      throw new Error('Invalid hex color input');
+    }
+  };
+
+  return createElement(ColorHexInputControl, {
+    prefix: createElement(Spacer, {
+      as: Text,
+      marginLeft: space(3.5),
+      color: "blue",
+      lineHeight: 1
+    }, "#"),
+    value: color.toHex().slice(1).toUpperCase(),
+    onChange: nextValue => {
+      onChange(colord('#' + nextValue));
+    },
+    onValidate: handleValidate,
+    maxLength: enableAlpha ? 8 : 6,
+    label: __('Hex color'),
+    hideLabelFromVision: true
+  });
+};
+//# sourceMappingURL=hex-input.js.map

package/build-module/color-picker/hex-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/color-picker/hex-input.tsx"],"names":["colord","__","Text","Spacer","space","ColorHexInputControl","HexInput","color","onChange","enableAlpha","handleValidate","value","isValid","Error","toHex","slice","toUpperCase","nextValue"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAA+B,QAA/B;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AACA,SAASC,oBAAT,QAAqC,UAArC;AAQA,OAAO,MAAMC,QAAQ,GAAG,QAAuD;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAqD;;AAC9E,QAAMC,cAAc,GAAKC,KAAF,IAAqB;AAC3C,QAAK,CAAEX,MAAM,CAAE,MAAMW,KAAR,CAAN,CAAsBC,OAAtB,EAAP,EAAyC;AACxC,YAAM,IAAIC,KAAJ,CAAW,yBAAX,CAAN;AACA;AACD,GAJD;;AAMA,SACC,cAAC,oBAAD;AACC,IAAA,MAAM,EACL,cAAC,MAAD;AACC,MAAA,EAAE,EAAGX,IADN;AAEC,MAAA,UAAU,EAAGE,KAAK,CAAE,GAAF,CAFnB;AAGC,MAAA,KAAK,EAAC,MAHP;AAIC,MAAA,UAAU,EAAG;AAJd,WAFF;AAWC,IAAA,KAAK,EAAGG,KAAK,CAACO,KAAN,GAAcC,KAAd,CAAqB,CAArB,EAAyBC,WAAzB,EAXT;AAYC,IAAA,QAAQ,EAAKC,SAAF,IAAiB;AAC3BT,MAAAA,QAAQ,CAAER,MAAM,CAAE,MAAMiB,SAAR,CAAR,CAAR;AACA,KAdF;AAeC,IAAA,UAAU,EAAGP,cAfd;AAgBC,IAAA,SAAS,EAAGD,WAAW,GAAG,CAAH,GAAO,CAhB/B;AAiBC,IAAA,KAAK,EAAGR,EAAE,CAAE,WAAF,CAjBX;AAkBC,IAAA,mBAAmB;AAlBpB,IADD;AAsBA,CA7BM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { ColorHexInputControl } from './styles';\n\ninterface HexInputProps {\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {\n\tconst handleValidate = ( value: string ) => {\n\t\tif ( ! colord( '#' + value ).isValid() ) {\n\t\t\tthrow new Error( 'Invalid hex color input' );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ColorHexInputControl\n\t\t\tprefix={\n\t\t\t\t<Spacer\n\t\t\t\t\tas={ Text }\n\t\t\t\t\tmarginLeft={ space( 3.5 ) }\n\t\t\t\t\tcolor=\"blue\"\n\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t>\n\t\t\t\t\t#\n\t\t\t\t</Spacer>\n\t\t\t}\n\t\t\tvalue={ color.toHex().slice( 1 ).toUpperCase() }\n\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\tonChange( colord( '#' + nextValue ) );\n\t\t\t} }\n\t\t\tonValidate={ handleValidate }\n\t\t\tmaxLength={ enableAlpha ? 8 : 6 }\n\t\t\tlabel={ __( 'Hex color' ) }\n\t\t\thideLabelFromVision\n\t\t/>\n\t);\n};\n"]}