npm - @wordpress/components - Versions diffs - 21.2.0 → 22.0.0 - Mend

@wordpress/components 21.2.0 → 22.0.0

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

Files changed (831) hide show

package/build/tooltip/index.native.js CHANGED Viewed

@@ -62,7 +62,9 @@ const useKeyboardVisibility = () => {
     return () => {
       showListener.remove();
       hideListener.remove();
-    };
+    }; // Disable reason: deferring this refactor to the native team.
+    // see https://github.com/WordPress/gutenberg/pull/41166
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return keyboardVisible;
 };
@@ -106,7 +108,9 @@ const Tooltip = _ref => {
       });
     }
-    return () => onHandleScreenTouch(null);
+    return () => onHandleScreenTouch(null); // Disable reason: deferring this refactor to the native team.
+    // see https://github.com/WordPress/gutenberg/pull/41166
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]); // Manage visibility animation.
   (0, _element.useEffect)(() => {
@@ -115,7 +119,10 @@ const Tooltip = _ref => {
     previousVisible && previousVisible !== visible) {
       setAnimating(true);
       startAnimation();
-    }
+    } // Disable reason: deferring this refactor to the native team.
+    // see https://github.com/WordPress/gutenberg/pull/41166
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]); // Manage tooltip visibility and position in relation to keyboard.
   (0, _element.useEffect)(() => {
@@ -132,7 +139,10 @@ const Tooltip = _ref => {
     if (typeof previousVisible !== 'undefined' && !keyboardVisible) {
       setAnimating(true);
       setVisible(false);
-    }
+    } // Disable reason: deferring this refactor to the native team.
+    // see https://github.com/WordPress/gutenberg/pull/41166
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible, keyboardVisible]); // Manage tooltip position during keyboard frame changes.
   (0, _element.useEffect)(() => {
@@ -250,6 +260,9 @@ const TooltipSlot = _ref3 => {
     handleScreenTouch();
     setHandleScreenTouch(null);
   }; // Memoize context value to avoid unnecessary rerenders of the Provider's children
+  // Disable reason: deferring this refactor to the native team.
+  // see https://github.com/WordPress/gutenberg/pull/41166
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const value = (0, _element.useMemo)(() => ({

package/build/tooltip/index.native.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/tooltip/index.native.js"],"names":["RIGHT_ALIGN_ARROW_OFFSET","TOOLTIP_VERTICAL_OFFSET","TooltipContext","onHandleScreenTouch","Fill","Slot","useKeyboardVisibility","keyboardVisible","setKeyboardVisible","previousKeyboardVisible","showListener","Keyboard","addListener","keyboardHideEvent","Platform","select","android","ios","hideListener","remove","Tooltip","children","position","text","visible","initialVisible","referenceElementRef","animationValue","Animated","Value","current","horizontalPosition","split","setVisible","animating","setAnimating","hidden","previousVisible","referenceLayout","setReferenceLayout","height","width","x","y","tooltipLayout","setTooltipLayout","startAnimation","getReferenceElementPosition","frameListener","timing","toValue","duration","useNativeDriver","delay","easing","Easing","out","quad","start","tooltipStyles","styles","tooltip","left","Math","floor","top","tooltipBoxStyles","tooltip__box","elevation","opacity","shadowColor","tooltip__shadow","color","shadowOffset","shadowOpacity","shadowRadius","transform","translateY","interpolate","inputRange","outputRange","arrowStyles","tooltip__arrow","requestAnimationFrame","measure","_x","_y","pageX","pageY","getTooltipLayout","nativeEvent","layout","ref","onLayout","tooltip__text","TooltipSlot","rest","handleScreenTouch","setHandleScreenTouch","callback","handleTouchStart","value","undefined","StyleSheet","absoluteFill"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport {\n\tAnimated,\n\tEasing,\n\tKeyboard,\n\tPlatform,\n\tStyleSheet,\n\tText,\n\tView,\n} from 'react-native';\n\n/\n WordPress dependencies\n /\nimport {\n\tcloneElement,\n\tcreateContext,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { usePrevious } from '@wordpress/compose';\n\n/\n Internal dependencies\n */\nimport { createSlotFill } from '../slot-fill';\nimport styles from './style.scss';\n\nconst RIGHT_ALIGN_ARROW_OFFSET = 16;\nconst TOOLTIP_VERTICAL_OFFSET = 2;\n\nconst TooltipContext = createContext( {\n\tonHandleScreenTouch: () => {},\n} );\nconst { Fill, Slot } = createSlotFill( 'Tooltip' );\n\nconst useKeyboardVisibility = () => {\n\tconst [ keyboardVisible, setKeyboardVisible ] = useState( false );\n\tconst previousKeyboardVisible = usePrevious( keyboardVisible );\n\n\tuseEffect( () => {\n\t\tconst showListener = Keyboard.addListener( 'keyboardDidShow', () => {\n\t\t\tif ( previousKeyboardVisible !== true ) {\n\t\t\t\tsetKeyboardVisible( true );\n\t\t\t}\n\t\t} );\n\t\tconst keyboardHideEvent = Platform.select( {\n\t\t\tandroid: 'keyboardDidHide',\n\t\t\tios: 'keyboardWillHide',\n\t\t} );\n\t\tconst hideListener = Keyboard.addListener( keyboardHideEvent, () => {\n\t\t\tif ( previousKeyboardVisible !== false ) {\n\t\t\t\tsetKeyboardVisible( false );\n\t\t\t}\n\t\t} );\n\t\treturn () => {\n\t\t\tshowListener.remove();\n\t\t\thideListener.remove();\n\t\t};\n\t}, [] );\n\n\treturn keyboardVisible;\n};\n\nconst Tooltip = ( {\n\tchildren,\n\tposition = 'top',\n\ttext,\n\tvisible: initialVisible = false,\n} ) => {\n\tconst referenceElementRef = useRef( null );\n\tconst animationValue = useRef( new Animated.Value( 0 ) ).current;\n\tconst [ , horizontalPosition = 'center' ] = position.split( ' ' );\n\tconst [ visible, setVisible ] = useState( initialVisible );\n\tconst [ animating, setAnimating ] = useState( false );\n\tconst hidden = ! visible && ! animating;\n\tconst previousVisible = usePrevious( visible );\n\tconst [ referenceLayout, setReferenceLayout ] = useState( {\n\t\theight: 0,\n\t\twidth: 0,\n\t\tx: 0,\n\t\ty: 0,\n\t} );\n\tconst [ tooltipLayout, setTooltipLayout ] = useState( {\n\t\theight: 0,\n\t\twidth: 0,\n\t} );\n\tconst { onHandleScreenTouch } = useContext( TooltipContext );\n\tconst keyboardVisible = useKeyboardVisibility();\n\n\t// Register callback to dismiss the tooltip whenever the screen is touched.\n\tuseEffect( () => {\n\t\tif ( visible ) {\n\t\t\tonHandleScreenTouch( () => {\n\t\t\t\tsetAnimating( true );\n\t\t\t\tsetVisible( false );\n\t\t\t} );\n\t\t}\n\t\treturn () => onHandleScreenTouch( null );\n\t}, [ visible ] );\n\n\t// Manage visibility animation.\n\tuseEffect( () => {\n\t\tif (\n\t\t\t// Initial render and visibility enabled, animate show.\n\t\t\t( typeof previousVisible === 'undefined' && visible ) \|\|\n\t\t\t// Previously visible, animate hide\n\t\t\t( previousVisible && previousVisible !== visible )\n\t\t) {\n\t\t\tsetAnimating( true );\n\t\t\tstartAnimation();\n\t\t}\n\t}, [ visible ] );\n\n\t// Manage tooltip visibility and position in relation to keyboard.\n\tuseEffect( () => {\n\t\tif ( ! visible ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Update tooltip position if keyboard is visible.\n\t\tif ( keyboardVisible ) {\n\t\t\tgetReferenceElementPosition();\n\t\t}\n\n\t\t// Hide tooltip if keyboard hides\n\t\tif ( typeof previousVisible !== 'undefined' && ! keyboardVisible ) {\n\t\t\tsetAnimating( true );\n\t\t\tsetVisible( false );\n\t\t}\n\t}, [ visible, keyboardVisible ] );\n\n\t// Manage tooltip position during keyboard frame changes.\n\tuseEffect( () => {\n\t\tconst frameListener = Keyboard.addListener(\n\t\t\t'keyboardWillChangeFrame',\n\t\t\t() => {\n\t\t\t\tif ( visible ) {\n\t\t\t\t\tgetReferenceElementPosition();\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\n\t\treturn () => {\n\t\t\tframeListener.remove();\n\t\t};\n\t}, [ visible ] );\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\tdelay: visible ? 500 : 0,\n\t\t\teasing: Easing.out( Easing.quad ),\n\t\t} ).start( () => {\n\t\t\tsetAnimating( false );\n\t\t} );\n\t};\n\n\tconst tooltipStyles = [\n\t\tstyles.tooltip,\n\t\t{\n\t\t\tleft:\n\t\t\t\treferenceLayout.x +\n\t\t\t\tMath.floor( referenceLayout.width / 2 ) -\n\t\t\t\t( horizontalPosition === 'right'\n\t\t\t\t\t? RIGHT_ALIGN_ARROW_OFFSET\n\t\t\t\t\t: Math.floor( tooltipLayout.width / 2 ) ),\n\t\t\ttop:\n\t\t\t\treferenceLayout.y -\n\t\t\t\ttooltipLayout.height -\n\t\t\t\tTOOLTIP_VERTICAL_OFFSET,\n\t\t},\n\t];\n\tconst tooltipBoxStyles = [\n\t\tstyles.tooltip__box,\n\t\thorizontalPosition === 'right' && styles[ 'tooltip--rightAlign' ],\n\t\t{\n\t\t\televation: 2,\n\t\t\topacity: animationValue,\n\t\t\tshadowColor: styles.tooltip__shadow?.color,\n\t\t\tshadowOffset: { height: 2, width: 0 },\n\t\t\tshadowOpacity: 0.25,\n\t\t\tshadowRadius: 2,\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: [ visible ? 4 : -8, -8 ],\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t];\n\tconst arrowStyles = [\n\t\tstyles.tooltip__arrow,\n\t\thorizontalPosition === 'right' &&\n\t\t\tstyles[ 'tooltip__arrow--rightAlign' ],\n\t];\n\n\tconst getReferenceElementPosition = () => {\n\t\t// rAF allows render to complete before calculating layout\n\t\t// eslint-disable-next-line no-undef\n\t\trequestAnimationFrame( () => {\n\t\t\tif ( ! referenceElementRef.current ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\treferenceElementRef.current.measure(\n\t\t\t\t( _x, _y, width, height, pageX, pageY ) => {\n\t\t\t\t\tsetReferenceLayout( {\n\t\t\t\t\t\theight,\n\t\t\t\t\t\twidth,\n\t\t\t\t\t\tx: pageX,\n\t\t\t\t\t\ty: pageY,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t);\n\t\t} );\n\t};\n\tconst getTooltipLayout = ( { nativeEvent } ) => {\n\t\tconst { height, width } = nativeEvent.layout;\n\t\tsetTooltipLayout( { height, width } );\n\t};\n\n\tif ( hidden ) {\n\t\treturn children;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ cloneElement( children, {\n\t\t\t\tref: referenceElementRef,\n\t\t\t\tonLayout: getReferenceElementPosition,\n\t\t\t} ) }\n\t\t\t<Fill>\n\t\t\t\t<View onLayout={ getTooltipLayout } style={ tooltipStyles }>\n\t\t\t\t\t<Animated.View style={ tooltipBoxStyles }>\n\t\t\t\t\t\t<Text style={ styles.tooltip__text }>{ text }</Text>\n\t\t\t\t\t\t<View style={ arrowStyles } />\n\t\t\t\t\t</Animated.View>\n\t\t\t\t</View>\n\t\t\t</Fill>\n\t\t</>\n\t);\n};\n\nconst TooltipSlot = ( { children, ...rest } ) => {\n\tconst [ handleScreenTouch, setHandleScreenTouch ] = useState( null );\n\tconst onHandleScreenTouch = ( callback ) => {\n\t\t// Must use function to set state below as `callback` is a function itself.\n\t\tsetHandleScreenTouch( () => callback );\n\t};\n\tconst handleTouchStart = () => {\n\t\thandleScreenTouch();\n\t\tsetHandleScreenTouch( null );\n\t};\n\t// Memoize context value to avoid unnecessary rerenders of the Provider's children\n\tconst value = useMemo( () => ( { onHandleScreenTouch } ) );\n\n\treturn (\n\t\t<TooltipContext.Provider value={ value }>\n\t\t\t<View\n\t\t\t\tonTouchStart={\n\t\t\t\t\ttypeof handleScreenTouch === 'function'\n\t\t\t\t\t\t? handleTouchStart\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tpointerEvents=\"box-none\"\n\t\t\t\tstyle={ StyleSheet.absoluteFill }\n\t\t\t\ttestID=\"tooltip-overlay\"\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t\t<Slot { ...rest } />\n\t\t\t</View>\n\t\t</TooltipContext.Provider>\n\t);\n};\n\nTooltip.Slot = TooltipSlot;\n\nexport default Tooltip;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/tooltip/index.native.js"],"names":["RIGHT_ALIGN_ARROW_OFFSET","TOOLTIP_VERTICAL_OFFSET","TooltipContext","onHandleScreenTouch","Fill","Slot","useKeyboardVisibility","keyboardVisible","setKeyboardVisible","previousKeyboardVisible","showListener","Keyboard","addListener","keyboardHideEvent","Platform","select","android","ios","hideListener","remove","Tooltip","children","position","text","visible","initialVisible","referenceElementRef","animationValue","Animated","Value","current","horizontalPosition","split","setVisible","animating","setAnimating","hidden","previousVisible","referenceLayout","setReferenceLayout","height","width","x","y","tooltipLayout","setTooltipLayout","startAnimation","getReferenceElementPosition","frameListener","timing","toValue","duration","useNativeDriver","delay","easing","Easing","out","quad","start","tooltipStyles","styles","tooltip","left","Math","floor","top","tooltipBoxStyles","tooltip__box","elevation","opacity","shadowColor","tooltip__shadow","color","shadowOffset","shadowOpacity","shadowRadius","transform","translateY","interpolate","inputRange","outputRange","arrowStyles","tooltip__arrow","requestAnimationFrame","measure","_x","_y","pageX","pageY","getTooltipLayout","nativeEvent","layout","ref","onLayout","tooltip__text","TooltipSlot","rest","handleScreenTouch","setHandleScreenTouch","callback","handleTouchStart","value","undefined","StyleSheet","absoluteFill"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport {\n\tAnimated,\n\tEasing,\n\tKeyboard,\n\tPlatform,\n\tStyleSheet,\n\tText,\n\tView,\n} from 'react-native';\n\n/\n WordPress dependencies\n /\nimport {\n\tcloneElement,\n\tcreateContext,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { usePrevious } from '@wordpress/compose';\n\n/\n Internal dependencies\n */\nimport { createSlotFill } from '../slot-fill';\nimport styles from './style.scss';\n\nconst RIGHT_ALIGN_ARROW_OFFSET = 16;\nconst TOOLTIP_VERTICAL_OFFSET = 2;\n\nconst TooltipContext = createContext( {\n\tonHandleScreenTouch: () => {},\n} );\nconst { Fill, Slot } = createSlotFill( 'Tooltip' );\n\nconst useKeyboardVisibility = () => {\n\tconst [ keyboardVisible, setKeyboardVisible ] = useState( false );\n\tconst previousKeyboardVisible = usePrevious( keyboardVisible );\n\n\tuseEffect( () => {\n\t\tconst showListener = Keyboard.addListener( 'keyboardDidShow', () => {\n\t\t\tif ( previousKeyboardVisible !== true ) {\n\t\t\t\tsetKeyboardVisible( true );\n\t\t\t}\n\t\t} );\n\t\tconst keyboardHideEvent = Platform.select( {\n\t\t\tandroid: 'keyboardDidHide',\n\t\t\tios: 'keyboardWillHide',\n\t\t} );\n\t\tconst hideListener = Keyboard.addListener( keyboardHideEvent, () => {\n\t\t\tif ( previousKeyboardVisible !== false ) {\n\t\t\t\tsetKeyboardVisible( false );\n\t\t\t}\n\t\t} );\n\t\treturn () => {\n\t\t\tshowListener.remove();\n\t\t\thideListener.remove();\n\t\t};\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\treturn keyboardVisible;\n};\n\nconst Tooltip = ( {\n\tchildren,\n\tposition = 'top',\n\ttext,\n\tvisible: initialVisible = false,\n} ) => {\n\tconst referenceElementRef = useRef( null );\n\tconst animationValue = useRef( new Animated.Value( 0 ) ).current;\n\tconst [ , horizontalPosition = 'center' ] = position.split( ' ' );\n\tconst [ visible, setVisible ] = useState( initialVisible );\n\tconst [ animating, setAnimating ] = useState( false );\n\tconst hidden = ! visible && ! animating;\n\tconst previousVisible = usePrevious( visible );\n\tconst [ referenceLayout, setReferenceLayout ] = useState( {\n\t\theight: 0,\n\t\twidth: 0,\n\t\tx: 0,\n\t\ty: 0,\n\t} );\n\tconst [ tooltipLayout, setTooltipLayout ] = useState( {\n\t\theight: 0,\n\t\twidth: 0,\n\t} );\n\tconst { onHandleScreenTouch } = useContext( TooltipContext );\n\tconst keyboardVisible = useKeyboardVisibility();\n\n\t// Register callback to dismiss the tooltip whenever the screen is touched.\n\tuseEffect( () => {\n\t\tif ( visible ) {\n\t\t\tonHandleScreenTouch( () => {\n\t\t\t\tsetAnimating( true );\n\t\t\t\tsetVisible( false );\n\t\t\t} );\n\t\t}\n\t\treturn () => onHandleScreenTouch( null );\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ visible ] );\n\n\t// Manage visibility animation.\n\tuseEffect( () => {\n\t\tif (\n\t\t\t// Initial render and visibility enabled, animate show.\n\t\t\t( typeof previousVisible === 'undefined' && visible ) \|\|\n\t\t\t// Previously visible, animate hide\n\t\t\t( previousVisible && previousVisible !== visible )\n\t\t) {\n\t\t\tsetAnimating( true );\n\t\t\tstartAnimation();\n\t\t}\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ visible ] );\n\n\t// Manage tooltip visibility and position in relation to keyboard.\n\tuseEffect( () => {\n\t\tif ( ! visible ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Update tooltip position if keyboard is visible.\n\t\tif ( keyboardVisible ) {\n\t\t\tgetReferenceElementPosition();\n\t\t}\n\n\t\t// Hide tooltip if keyboard hides\n\t\tif ( typeof previousVisible !== 'undefined' && ! keyboardVisible ) {\n\t\t\tsetAnimating( true );\n\t\t\tsetVisible( false );\n\t\t}\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ visible, keyboardVisible ] );\n\n\t// Manage tooltip position during keyboard frame changes.\n\tuseEffect( () => {\n\t\tconst frameListener = Keyboard.addListener(\n\t\t\t'keyboardWillChangeFrame',\n\t\t\t() => {\n\t\t\t\tif ( visible ) {\n\t\t\t\t\tgetReferenceElementPosition();\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\n\t\treturn () => {\n\t\t\tframeListener.remove();\n\t\t};\n\t}, [ visible ] );\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\tdelay: visible ? 500 : 0,\n\t\t\teasing: Easing.out( Easing.quad ),\n\t\t} ).start( () => {\n\t\t\tsetAnimating( false );\n\t\t} );\n\t};\n\n\tconst tooltipStyles = [\n\t\tstyles.tooltip,\n\t\t{\n\t\t\tleft:\n\t\t\t\treferenceLayout.x +\n\t\t\t\tMath.floor( referenceLayout.width / 2 ) -\n\t\t\t\t( horizontalPosition === 'right'\n\t\t\t\t\t? RIGHT_ALIGN_ARROW_OFFSET\n\t\t\t\t\t: Math.floor( tooltipLayout.width / 2 ) ),\n\t\t\ttop:\n\t\t\t\treferenceLayout.y -\n\t\t\t\ttooltipLayout.height -\n\t\t\t\tTOOLTIP_VERTICAL_OFFSET,\n\t\t},\n\t];\n\tconst tooltipBoxStyles = [\n\t\tstyles.tooltip__box,\n\t\thorizontalPosition === 'right' && styles[ 'tooltip--rightAlign' ],\n\t\t{\n\t\t\televation: 2,\n\t\t\topacity: animationValue,\n\t\t\tshadowColor: styles.tooltip__shadow?.color,\n\t\t\tshadowOffset: { height: 2, width: 0 },\n\t\t\tshadowOpacity: 0.25,\n\t\t\tshadowRadius: 2,\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: [ visible ? 4 : -8, -8 ],\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t];\n\tconst arrowStyles = [\n\t\tstyles.tooltip__arrow,\n\t\thorizontalPosition === 'right' &&\n\t\t\tstyles[ 'tooltip__arrow--rightAlign' ],\n\t];\n\n\tconst getReferenceElementPosition = () => {\n\t\t// rAF allows render to complete before calculating layout\n\t\t// eslint-disable-next-line no-undef\n\t\trequestAnimationFrame( () => {\n\t\t\tif ( ! referenceElementRef.current ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\treferenceElementRef.current.measure(\n\t\t\t\t( _x, _y, width, height, pageX, pageY ) => {\n\t\t\t\t\tsetReferenceLayout( {\n\t\t\t\t\t\theight,\n\t\t\t\t\t\twidth,\n\t\t\t\t\t\tx: pageX,\n\t\t\t\t\t\ty: pageY,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t);\n\t\t} );\n\t};\n\tconst getTooltipLayout = ( { nativeEvent } ) => {\n\t\tconst { height, width } = nativeEvent.layout;\n\t\tsetTooltipLayout( { height, width } );\n\t};\n\n\tif ( hidden ) {\n\t\treturn children;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ cloneElement( children, {\n\t\t\t\tref: referenceElementRef,\n\t\t\t\tonLayout: getReferenceElementPosition,\n\t\t\t} ) }\n\t\t\t<Fill>\n\t\t\t\t<View onLayout={ getTooltipLayout } style={ tooltipStyles }>\n\t\t\t\t\t<Animated.View style={ tooltipBoxStyles }>\n\t\t\t\t\t\t<Text style={ styles.tooltip__text }>{ text }</Text>\n\t\t\t\t\t\t<View style={ arrowStyles } />\n\t\t\t\t\t</Animated.View>\n\t\t\t\t</View>\n\t\t\t</Fill>\n\t\t</>\n\t);\n};\n\nconst TooltipSlot = ( { children, ...rest } ) => {\n\tconst [ handleScreenTouch, setHandleScreenTouch ] = useState( null );\n\tconst onHandleScreenTouch = ( callback ) => {\n\t\t// Must use function to set state below as `callback` is a function itself.\n\t\tsetHandleScreenTouch( () => callback );\n\t};\n\tconst handleTouchStart = () => {\n\t\thandleScreenTouch();\n\t\tsetHandleScreenTouch( null );\n\t};\n\t// Memoize context value to avoid unnecessary rerenders of the Provider's children\n\t// Disable reason: deferring this refactor to the native team.\n\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\tconst value = useMemo( () => ( { onHandleScreenTouch } ) );\n\n\treturn (\n\t\t<TooltipContext.Provider value={ value }>\n\t\t\t<View\n\t\t\t\tonTouchStart={\n\t\t\t\t\ttypeof handleScreenTouch === 'function'\n\t\t\t\t\t\t? handleTouchStart\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tpointerEvents=\"box-none\"\n\t\t\t\tstyle={ StyleSheet.absoluteFill }\n\t\t\t\ttestID=\"tooltip-overlay\"\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t\t<Slot { ...rest } />\n\t\t\t</View>\n\t\t</TooltipContext.Provider>\n\t);\n};\n\nTooltip.Slot = TooltipSlot;\n\nexport default Tooltip;\n"]}

package/build/ui/context/context-system-provider.js CHANGED Viewed

@@ -13,6 +13,8 @@ var _lodash = require("lodash");
 var _warning = _interopRequireDefault(require("@wordpress/warning"));
+var _utils = require("../../utils");
 /**
  * External dependencies
  */
@@ -20,33 +22,16 @@ var _warning = _interopRequireDefault(require("@wordpress/warning"));
 /**
  * WordPress dependencies
  */
+/**
+ * Internal dependencies
+ */
 const ComponentsContext = (0, _element.createContext)(
 /** @type {Record<string, any>} */
 {});
 exports.ComponentsContext = ComponentsContext;
 const useComponentsContext = () => (0, _element.useContext)(ComponentsContext);
-/**
- * Runs an effect only on update (i.e., ignores the first render)
- *
- * @param {import('react').EffectCallback} effect
- * @param {import('react').DependencyList} deps
- */
-exports.useComponentsContext = useComponentsContext;
-function useUpdateEffect(effect, deps) {
-  const mounted = (0, _element.useRef)(false);
-  (0, _element.useEffect)(() => {
-    if (mounted.current) {
-      return effect();
-    }
-    mounted.current = true;
-    return undefined;
-  }, deps);
-}
 /**
  * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.
  *
@@ -58,13 +43,15 @@ function useUpdateEffect(effect, deps) {
  */
+exports.useComponentsContext = useComponentsContext;
 function useContextSystemBridge(_ref) {
   let {
     value
   } = _ref;
   const parentContext = useComponentsContext();
   const valueRef = (0, _element.useRef)(value);
-  useUpdateEffect(() => {
+  (0, _utils.useUpdateEffect)(() => {
     if ( // Objects are equivalent.
     (0, _lodash.isEqual)(valueRef.current, value) && // But not the same reference.
     valueRef.current !== value) {

package/build/ui/context/context-system-provider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/ui/context/context-system-provider.js"],"names":["ComponentsContext","useComponentsContext","~~useUpdateEffect~~","~~effect~~","~~deps~~","~~mounted~~","current","~~undefined","useContextSystemBridge","value","parentContext","valueRef","~~JSON","stringify","config","parse","BaseContextSystemProvider","children","contextValue","ContextSystemProvider"],"mappings":";;;;;;;;;AAQA;;AALA;;~~AAaA~~;;~~AAhBA~~;AACA;AACA;;AAGA;AACA;AACA;~~AAWO~~,MAAMA,iBAAiB,GAAG;AAChC;AAAqC,EADL,CAA1B;;;AAGA,MAAMC,oBAAoB,GAAG,MAAM,yBAAYD,iBAAZ,CAAnC;AAEP;AACA;AACA;AACA;AACA;AACA~~;;;;;AACA,SAASE,eAAT,CAA0BC,MAA1B,EAAkCC,IAAlC,EAAyC~~;~~AACxC,QAAMC,OAAO,GAAG,qBAAQ,KAAR,CAAhB;~~AACA~~,0BAAW,MAAM~~;~~AAChB,QAAKA,OAAO,CAACC,OAAb,EAAuB;AACtB,aAAOH,MAAM,EAAb;~~AACA~~;;AACDE,IAAAA,OAAO,CAACC,OAAR,GAAkB,IAAlB~~;AACA~~,WAAOC,SAAP;~~AACA,~~GAND~~,~~EAMGH,IANH;AAOA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASI,~~sBAAT,OAA6C;AAAA,MAAZ;AAAEC,IAAAA;AAAF,GAAY;AAC5C,QAAMC,aAAa,~~GAAGT~~,oBAAoB,EAA1C;AAEA,~~QAAMU~~,QAAQ,GAAG,qBAAQF,KAAR,CAAjB;~~AAEAP~~,~~EAAAA~~,~~eAAe,CAAE,~~MAAM;AACtB,SACC;AACA,~~yBAASS~~,QAAQ,~~CAACL~~,OAAlB,~~EAA2BG~~,KAA3B,KACA;AACAE,IAAAA,QAAQ,~~CAACL~~,OAAT,~~KAAqBG~~,KAJtB,EAKE;AACD,qHAAO,~~gCAAgCG~~,IAAI,CAACC,SAAL,~~CAAgBJ~~,KAAhB,CAAyB,EAAhE;AACA;AACD,~~GATc~~,~~EASZ~~,CAAEA,KAAF,~~CATY~~,~~CAAf~~,~~CAL4C,~~CAgB5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,~~QAAMK~~,MAAM,GAAG,sBAAS,MAAM;AAC7B;AACA,WAAO,mBAAOF,IAAI,CAACG,KAAL,CAAYH,IAAI,CAACC,SAAL,~~CAAgBH~~,aAAhB,CAAZ,CAAP,EAAsDD,KAAtD,CAAP;AACA,GAHc,EAGZ,CAAEC,aAAF,EAAiBD,KAAjB,CAHY,CAAf;AAKA,~~SAAOK~~,MAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,yBAAyB,GAAG,SAA2B;AAAA,MAAzB;AAAEC,IAAAA,QAAF;~~AAAYR~~,IAAAA;AAAZ,GAAyB;AAC5D,~~QAAMS~~,YAAY,~~GAAGV~~,sBAAsB,CAAE;AAAEC,IAAAA;AAAF,GAAF,CAA3C;AAEA,SACC,4BAAC,iBAAD,CAAmB,QAAnB;AAA4B,IAAA,KAAK,~~EAAGS~~;AAApC,KACGD,QADH,CADD;AAKA,CARD;;AAUO,MAAME,qBAAqB,GAAG,mBAAMH,yBAAN,CAA9B","sourcesContent":["/*\n External dependencies\n /\nimport { isEqual, merge } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport {\n\tcreateContext,\n\tuseContext,\n\tuseRef,\n\~~tuseEffect,\n\~~tuseMemo,\n\tmemo,\n} from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\nexport const ComponentsContext = createContext(\n\t/* @type {Record<string, any>} / ( {} )\n);\nexport const useComponentsContext = () => useContext( ComponentsContext );\n\n/\n Runs an effect only on update (i.e., ignores the first render)\n \n @param {import('react').EffectCallback} effect\n * @param {import('react').DependencyList} deps\n /\nfunction useUpdateEffect( effect, deps ) {\n\tconst mounted = useRef( false );\n\tuseEffect( () => {\n\t\tif ( mounted.current ) {\n\t\t\treturn effect();\n\t\t}\n\t\tmounted.current = true;\n\t\treturn undefined;\n\t}, deps );\n}\n\n/\n Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.\n \n Note: This function will warn if it detects an un-memoized `value`\n \n @param {Object} props\n * @param {Record<string, any>} props.value\n * @return {Record<string, any>} The consolidated value.\n /\nfunction useContextSystemBridge( { value } ) {\n\tconst parentContext = useComponentsContext();\n\n\tconst valueRef = useRef( value );\n\n\tuseUpdateEffect( () => {\n\t\tif (\n\t\t\t// Objects are equivalent.\n\t\t\tisEqual( valueRef.current, value ) &&\n\t\t\t// But not the same reference.\n\t\t\tvalueRef.current !== value\n\t\t) {\n\t\t\twarn( `Please memoize your context: ${ JSON.stringify( value ) }` );\n\t\t}\n\t}, [ value ] );\n\n\t// `parentContext` will always be memoized (i.e., the result of this hook itself)\n\t// or the default value from when the `ComponentsContext` was originally\n\t// initialized (which will never change, it's a static variable)\n\t// so this memoization will prevent `merge` and `JSON.parse/stringify` from rerunning unless\n\t// the references to `value` change OR the `parentContext` has an actual material change\n\t// (because again, it's guaranteed to be memoized or a static reference to the empty object\n\t// so we know that the only changes for `parentContext` are material ones... i.e., why we\n\t// don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only\n\t// need to bother with the `value`). The `useUpdateEffect` above will ensure that we are\n\t// correctly warning when the `value` isn't being properly memoized. All of that to say\n\t// that this should be super safe to assume that `useMemo` will only run on actual\n\t// changes to the two dependencies, therefore saving us calls to `merge` and `JSON.parse/stringify`!\n\tconst config = useMemo( () => {\n\t\t// Deep clone `parentContext` to avoid mutating it later.\n\t\treturn merge( JSON.parse( JSON.stringify( parentContext ) ), value );\n\t}, [ parentContext, value ] );\n\n\treturn config;\n}\n\n/\n A Provider component that can modify props for connected components within\n * the Context system.\n \n @example\n * ```jsx\n * <ContextSystemProvider value={{ Button: { size: 'small' }}}>\n * <Button>...</Button>\n * </ContextSystemProvider>\n * ```\n \n @template {Record<string, any>} T\n * @param {Object} options\n * @param {import('react').ReactNode} options.children Children to render.\n * @param {T} options.value Props to render into connected components.\n * @return {JSX.Element} A Provider wrapped component.\n */\nconst BaseContextSystemProvider = ( { children, value } ) => {\n\tconst contextValue = useContextSystemBridge( { value } );\n\n\treturn (\n\t\t<ComponentsContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</ComponentsContext.Provider>\n\t);\n};\n\nexport const ContextSystemProvider = memo( BaseContextSystemProvider );\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/ui/context/context-system-provider.js"],"names":["ComponentsContext","useComponentsContext","useContextSystemBridge","value","parentContext","valueRef","current","JSON","stringify","config","parse","BaseContextSystemProvider","children","contextValue","ContextSystemProvider"],"mappings":";;;;;;;;;AAQA;;AALA;;AAYA;;AAKA;;AApBA;AACA;AACA;;AAGA;AACA;AACA;;AAUA;AACA;AACA;AAGO,MAAMA,iBAAiB,GAAG;AAChC;AAAqC,EADL,CAA1B;;;AAGA,MAAMC,oBAAoB,GAAG,MAAM,yBAAYD,iBAAZ,CAAnC;AAEP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AACA,SAASE,sBAAT,OAA6C;AAAA,MAAZ;AAAEC,IAAAA;AAAF,GAAY;AAC5C,QAAMC,aAAa,GAAGH,oBAAoB,EAA1C;AAEA,QAAMI,QAAQ,GAAG,qBAAQF,KAAR,CAAjB;AAEA,8BAAiB,MAAM;AACtB,SACC;AACA,yBAASE,QAAQ,CAACC,OAAlB,EAA2BH,KAA3B,KACA;AACAE,IAAAA,QAAQ,CAACC,OAAT,KAAqBH,KAJtB,EAKE;AACD,qHAAO,gCAAgCI,IAAI,CAACC,SAAL,CAAgBL,KAAhB,CAAyB,EAAhE;AACA;AACD,GATD,EASG,CAAEA,KAAF,CATH,EAL4C,CAgB5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,QAAMM,MAAM,GAAG,sBAAS,MAAM;AAC7B;AACA,WAAO,mBAAOF,IAAI,CAACG,KAAL,CAAYH,IAAI,CAACC,SAAL,CAAgBJ,aAAhB,CAAZ,CAAP,EAAsDD,KAAtD,CAAP;AACA,GAHc,EAGZ,CAAEC,aAAF,EAAiBD,KAAjB,CAHY,CAAf;AAKA,SAAOM,MAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,yBAAyB,GAAG,SAA2B;AAAA,MAAzB;AAAEC,IAAAA,QAAF;AAAYT,IAAAA;AAAZ,GAAyB;AAC5D,QAAMU,YAAY,GAAGX,sBAAsB,CAAE;AAAEC,IAAAA;AAAF,GAAF,CAA3C;AAEA,SACC,4BAAC,iBAAD,CAAmB,QAAnB;AAA4B,IAAA,KAAK,EAAGU;AAApC,KACGD,QADH,CADD;AAKA,CARD;;AAUO,MAAME,qBAAqB,GAAG,mBAAMH,yBAAN,CAA9B","sourcesContent":["/*\n External dependencies\n /\nimport { isEqual, merge } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport {\n\tcreateContext,\n\tuseContext,\n\tuseRef,\n\tuseMemo,\n\tmemo,\n} from '@wordpress/element';\nimport warn from '@wordpress/warning';\n\n/\n Internal dependencies\n /\nimport { useUpdateEffect } from '../../utils';\n\nexport const ComponentsContext = createContext(\n\t/* @type {Record<string, any>} / ( {} )\n);\nexport const useComponentsContext = () => useContext( ComponentsContext );\n\n/\n Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.\n \n Note: This function will warn if it detects an un-memoized `value`\n \n @param {Object} props\n * @param {Record<string, any>} props.value\n * @return {Record<string, any>} The consolidated value.\n /\nfunction useContextSystemBridge( { value } ) {\n\tconst parentContext = useComponentsContext();\n\n\tconst valueRef = useRef( value );\n\n\tuseUpdateEffect( () => {\n\t\tif (\n\t\t\t// Objects are equivalent.\n\t\t\tisEqual( valueRef.current, value ) &&\n\t\t\t// But not the same reference.\n\t\t\tvalueRef.current !== value\n\t\t) {\n\t\t\twarn( `Please memoize your context: ${ JSON.stringify( value ) }` );\n\t\t}\n\t}, [ value ] );\n\n\t// `parentContext` will always be memoized (i.e., the result of this hook itself)\n\t// or the default value from when the `ComponentsContext` was originally\n\t// initialized (which will never change, it's a static variable)\n\t// so this memoization will prevent `merge` and `JSON.parse/stringify` from rerunning unless\n\t// the references to `value` change OR the `parentContext` has an actual material change\n\t// (because again, it's guaranteed to be memoized or a static reference to the empty object\n\t// so we know that the only changes for `parentContext` are material ones... i.e., why we\n\t// don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only\n\t// need to bother with the `value`). The `useUpdateEffect` above will ensure that we are\n\t// correctly warning when the `value` isn't being properly memoized. All of that to say\n\t// that this should be super safe to assume that `useMemo` will only run on actual\n\t// changes to the two dependencies, therefore saving us calls to `merge` and `JSON.parse/stringify`!\n\tconst config = useMemo( () => {\n\t\t// Deep clone `parentContext` to avoid mutating it later.\n\t\treturn merge( JSON.parse( JSON.stringify( parentContext ) ), value );\n\t}, [ parentContext, value ] );\n\n\treturn config;\n}\n\n/\n A Provider component that can modify props for connected components within\n * the Context system.\n \n @example\n * ```jsx\n * <ContextSystemProvider value={{ Button: { size: 'small' }}}>\n * <Button>...</Button>\n * </ContextSystemProvider>\n * ```\n \n @template {Record<string, any>} T\n * @param {Object} options\n * @param {import('react').ReactNode} options.children Children to render.\n * @param {T} options.value Props to render into connected components.\n * @return {JSX.Element} A Provider wrapped component.\n */\nconst BaseContextSystemProvider = ( { children, value } ) => {\n\tconst contextValue = useContextSystemBridge( { value } );\n\n\treturn (\n\t\t<ComponentsContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</ComponentsContext.Provider>\n\t);\n};\n\nexport const ContextSystemProvider = memo( BaseContextSystemProvider );\n"]}

package/build/unit-control/index.js CHANGED Viewed

@@ -66,7 +66,6 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
     onChange: onChangeProp,
     onUnitChange,
     size = 'default',
-    style,
     unit: unitProp,
     units: unitsProp = _utils.CSS_UNITS,
     value: valueProp,
@@ -99,7 +98,9 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
   }, [parsedUnit, setUnit]); // Stores parsed value for hand-off in state reducer.
   const refParsedQuantity = (0, _element.useRef)(undefined);
-  const classes = (0, _classnames.default)('components-unit-control', className);
+  const classes = (0, _classnames.default)('components-unit-control', // This class is added for legacy purposes to maintain it on the outer
+  // wrapper. See: https://github.com/WordPress/gutenberg/pull/45139
+  'components-unit-control-wrapper', className);
   const handleOnQuantityChange = (nextQuantityValue, changeProps) => {
     if (nextQuantityValue === '' || typeof nextQuantityValue === 'undefined' || nextQuantityValue === null) {
@@ -145,7 +146,7 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
       const changeProps = {
         event,
         data
-      }; // The `onChange` callback already gets called, no need to call it explicitely.
+      }; // The `onChange` callback already gets called, no need to call it explicitly.
       onUnitChange === null || onUnitChange === void 0 ? void 0 : onUnitChange(validParsedUnit, changeProps);
       setUnit(validParsedUnit);
@@ -230,16 +231,13 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
     step = (_activeUnit$step = activeUnit === null || activeUnit === void 0 ? void 0 : activeUnit.step) !== null && _activeUnit$step !== void 0 ? _activeUnit$step : 1;
   }
-  return (0, _element.createElement)(_unitControlStyles.Root, {
-    className: "components-unit-control-wrapper",
-    style: style
-  }, (0, _element.createElement)(_unitControlStyles.ValueInput, (0, _extends2.default)({
+  return (0, _element.createElement)(_unitControlStyles.ValueInput, (0, _extends2.default)({
     type: isPressEnterToChange ? 'text' : 'number'
   }, props, {
     autoComplete: autoComplete,
     className: classes,
     disabled: disabled,
-    hideHTMLArrows: true,
+    spinControls: "none",
     isPressEnterToChange: isPressEnterToChange,
     label: label,
     onBlur: handleOnBlur,
@@ -251,7 +249,7 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
     value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : '',
     step: step,
     __unstableStateReducer: stateReducer
-  })));
+  }));
 }
 /**
  * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).

package/build/unit-control/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/unit-control/index.tsx"],"names":["UnforwardedUnitControl","unitControlProps","forwardedRef","__unstableStateReducer","stateReducerProp","autoComplete","children","className","disabled","disableUnits","isPressEnterToChange","isResetValueOnUnitChange","isUnitSelectTabbable","label","onChange","onChangeProp","onUnitChange","size","style","unit","unitProp","units","unitsProp","CSS_UNITS","value","valueProp","onBlur","onBlurProp","props","since","hint","version","nonNullValueProp","undefined","parsedQuantity","parsedUnit","setUnit","length","initial","fallback","refParsedQuantity","classes","handleOnQuantityChange","nextQuantityValue","changeProps","onChangeValue","join","handleOnUnitChange","nextUnitValue","data","nextValue","default","mayUpdateUnit","event","isNaN","Number","currentTarget","current","validParsedQuantity","validParsedUnit","Array","isArray","find","option","handleOnBlur","handleOnKeyDown","key","unitControlStateReducer","state","action","nextState","type","inputControlActionTypes","COMMIT","toString","stateReducer","baseState","inputSuffix","step","activeUnit","UnitControl"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport type {\n\tFocusEventHandler,\n\tKeyboardEvent,\n\tForwardedRef,\n\tSyntheticEvent,\n\tChangeEvent,\n\tPointerEvent,\n} from 'react';\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport type { WordPressComponentProps } from '../ui/context';\nimport as inputControlActionTypes from '../input-control/reducer/actions';\nimport { Root, ValueInput } from './styles/unit-control-styles';\nimport UnitSelectControl from './unit-select-control';\nimport {\n\tCSS_UNITS,\n\tgetParsedQuantityAndUnit,\n\tgetUnitsWithCurrentUnit,\n\tgetValidParsedQuantityAndUnit,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type { UnitControlProps, UnitControlOnChangeCallback } from './types';\nimport type { StateReducer } from '../input-control/reducer/state';\n\nfunction UnforwardedUnitControl(\n\tunitControlProps: WordPressComponentProps<\n\t\tUnitControlProps,\n\t\t'input',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__unstableStateReducer: stateReducerProp,\n\t\tautoComplete = 'off',\n\t\t// @ts-expect-error Ensure that children is omitted from restProps\n\t\tchildren,\n\t\tclassName,\n\t\tdisabled = false,\n\t\tdisableUnits = false,\n\t\tisPressEnterToChange = false,\n\t\tisResetValueOnUnitChange = false,\n\t\tisUnitSelectTabbable = true,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tonUnitChange,\n\t\tsize = 'default',\n\t\tstyle,\n\t\tunit: unitProp,\n\t\tunits: unitsProp = CSS_UNITS,\n\t\tvalue: valueProp,\n\t\tonBlur: onBlurProp,\n\t\t...props\n\t} = unitControlProps;\n\n\tif ( 'unit' in unitControlProps ) {\n\t\tdeprecated( 'UnitControl unit prop', {\n\t\t\tsince: '5.6',\n\t\t\thint: 'The unit should be provided within the `value` prop.',\n\t\t\tversion: '6.2',\n\t\t} );\n\t}\n\n\t// The `value` prop, in theory, should not be `null`, but the following line\n\t// ensures it fallback to `undefined` in case a consumer of `UnitControl`\n\t// still passes `null` as a `value`.\n\tconst nonNullValueProp = valueProp ?? undefined;\n\tconst units = useMemo(\n\t\t() => getUnitsWithCurrentUnit( nonNullValueProp, unitProp, unitsProp ),\n\t\t[ nonNullValueProp, unitProp, unitsProp ]\n\t);\n\tconst [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(\n\t\tnonNullValueProp,\n\t\tunitProp,\n\t\tunits\n\t);\n\n\tconst [ unit, setUnit ] = useControlledState< string \| undefined >(\n\t\tunits.length === 1 ? units[ 0 ].value : unitProp,\n\t\t{\n\t\t\tinitial: parsedUnit,\n\t\t\tfallback: '',\n\t\t}\n\t);\n\n\tuseEffect( () => {\n\t\tif ( parsedUnit !== undefined ) {\n\t\t\tsetUnit( parsedUnit );\n\t\t}\n\t}, [ parsedUnit, setUnit ] );\n\n\t// Stores parsed value for hand-off in state reducer.\n\tconst refParsedQuantity = useRef< number \| undefined >( undefined );\n\n\tconst classes = classnames( 'components-unit-control', className );\n\n\tconst handleOnQuantityChange = (\n\t\tnextQuantityValue: number \| string \| undefined,\n\t\tchangeProps: {\n\t\t\tevent:\n\t\t\t\t\| ChangeEvent< HTMLInputElement >\n\t\t\t\t\| PointerEvent< HTMLInputElement >;\n\t\t}\n\t) => {\n\t\tif (\n\t\t\tnextQuantityValue === '' \|\|\n\t\t\ttypeof nextQuantityValue === 'undefined' \|\|\n\t\t\tnextQuantityValue === null\n\t\t) {\n\t\t\tonChangeProp?.( '', changeProps );\n\t\t\treturn;\n\t\t}\n\n\t\t/\n\t\t Customizing the onChange callback.\n\t\t * This allows as to broadcast a combined value+unit to onChange.\n\t\t /\n\t\tconst onChangeValue = getValidParsedQuantityAndUnit(\n\t\t\tnextQuantityValue,\n\t\t\tunits,\n\t\t\tparsedQuantity,\n\t\t\tunit\n\t\t).join( '' );\n\n\t\tonChangeProp?.( onChangeValue, changeProps );\n\t};\n\n\tconst handleOnUnitChange: UnitControlOnChangeCallback = (\n\t\tnextUnitValue,\n\t\tchangeProps\n\t) => {\n\t\tconst { data } = changeProps;\n\n\t\tlet nextValue = `${ parsedQuantity ?? '' }${ nextUnitValue }`;\n\n\t\tif ( isResetValueOnUnitChange && data?.default !== undefined ) {\n\t\t\tnextValue = `${ data.default }${ nextUnitValue }`;\n\t\t}\n\n\t\tonChangeProp?.( nextValue, changeProps );\n\t\tonUnitChange?.( nextUnitValue, changeProps );\n\n\t\tsetUnit( nextUnitValue );\n\t};\n\n\tconst mayUpdateUnit = ( event: SyntheticEvent< HTMLInputElement > ) => {\n\t\tif ( ! isNaN( Number( event.currentTarget.value ) ) ) {\n\t\t\trefParsedQuantity.current = undefined;\n\t\t\treturn;\n\t\t}\n\t\tconst [ validParsedQuantity, validParsedUnit ] =\n\t\t\tgetValidParsedQuantityAndUnit(\n\t\t\t\tevent.currentTarget.value,\n\t\t\t\tunits,\n\t\t\t\tparsedQuantity,\n\t\t\t\tunit\n\t\t\t);\n\n\t\trefParsedQuantity.current = validParsedQuantity;\n\n\t\tif ( isPressEnterToChange && validParsedUnit !== unit ) {\n\t\t\tconst data = Array.isArray( units )\n\t\t\t\t? units.find( ( option ) => option.value === validParsedUnit )\n\t\t\t\t: undefined;\n\t\t\tconst changeProps = { event, data };\n\n\t\t\t// The `onChange` callback already gets called, no need to call it explicitely.\n\t\t\tonUnitChange?.( validParsedUnit, changeProps );\n\n\t\t\tsetUnit( validParsedUnit );\n\t\t}\n\t};\n\n\tconst handleOnBlur: FocusEventHandler< HTMLInputElement > = ( event ) => {\n\t\tmayUpdateUnit( event );\n\t\tonBlurProp?.( event );\n\t};\n\n\tconst handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\tconst { key } = event;\n\t\tif ( key === 'Enter' ) {\n\t\t\tmayUpdateUnit( event );\n\t\t}\n\t};\n\n\t/\n\t \"Middleware\" function that intercepts updates from InputControl.\n\t * This allows us to tap into actions to transform the (next) state for\n\t * InputControl.\n\t \n\t @param state State from InputControl\n\t * @param action Action triggering state change\n\t * @return The updated state to apply to InputControl\n\t /\n\tconst unitControlStateReducer: StateReducer = ( state, action ) => {\n\t\tconst nextState = { ...state };\n\n\t\t/\n\t\t * On commits (when pressing ENTER and on blur if\n\t\t * isPressEnterToChange is true), if a parse has been performed\n\t\t * then use that result to update the state.\n\t\t /\n\t\tif ( action.type === inputControlActionTypes.COMMIT ) {\n\t\t\tif ( refParsedQuantity.current !== undefined ) {\n\t\t\t\tnextState.value = (\n\t\t\t\t\trefParsedQuantity.current ?? ''\n\t\t\t\t).toString();\n\t\t\t\trefParsedQuantity.current = undefined;\n\t\t\t}\n\t\t}\n\n\t\treturn nextState;\n\t};\n\n\tlet stateReducer: StateReducer = unitControlStateReducer;\n\tif ( stateReducerProp ) {\n\t\tstateReducer = ( state, action ) => {\n\t\t\tconst baseState = unitControlStateReducer( state, action );\n\t\t\treturn stateReducerProp( baseState, action );\n\t\t};\n\t}\n\n\tconst inputSuffix = ! disableUnits ? (\n\t\t<UnitSelectControl\n\t\t\taria-label={ __( 'Select unit' ) }\n\t\t\tdisabled={ disabled }\n\t\t\tisUnitSelectTabbable={ isUnitSelectTabbable }\n\t\t\tonChange={ handleOnUnitChange }\n\t\t\tsize={ size }\n\t\t\tunit={ unit }\n\t\t\tunits={ units }\n\t\t\tonBlur={ onBlurProp }\n\t\t/>\n\t) : null;\n\n\tlet step = props.step;\n\n\t/\n\t * If no step prop has been passed, lookup the active unit and\n\t * try to get step from `units`, or default to a value of `1`\n\t /\n\tif ( ! step && units ) {\n\t\tconst activeUnit = units.find( ( option ) => option.value === unit );\n\t\tstep = activeUnit?.step ?? 1;\n\t}\n\n\treturn (\n\t\t<Root className=\"components-unit-control-wrapper\" style={ style }>\n\t\t\t<ValueInput\n\t\t\t\ttype={ isPressEnterToChange ? 'text' : 'number' }\n\t\t\t\t{ ...props }\n\t\t\t\tautoComplete={ autoComplete }\n\t\t\t\tclassName={ classes }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\thideHTMLArrows\n\t\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\t\tlabel={ label }\n\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\t\tonChange={ handleOnQuantityChange }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ inputSuffix }\n\t\t\t\tvalue={ parsedQuantity ?? '' }\n\t\t\t\tstep={ step }\n\t\t\t\t__unstableStateReducer={ stateReducer }\n\t\t\t/>\n\t\t</Root>\n\t);\n}\n\n/\n `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).\n \n \n * @example\n * ```jsx\n * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const Example = () => {\n * const [ value, setValue ] = useState( '10px' );\n \n return <UnitControl onChange={ setValue } value={ value } />;\n * };\n * ```\n */\nexport const UnitControl = forwardRef( UnforwardedUnitControl );\n\nexport { parseQuantityAndUnitFromRawValue, useCustomUnits } from './utils';\nexport default UnitControl;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/unit-control/index.tsx"],"names":["UnforwardedUnitControl","unitControlProps","forwardedRef","__unstableStateReducer","stateReducerProp","autoComplete","children","className","disabled","disableUnits","isPressEnterToChange","isResetValueOnUnitChange","isUnitSelectTabbable","label","onChange","onChangeProp","onUnitChange","size","unit","unitProp","units","unitsProp","CSS_UNITS","value","valueProp","onBlur","onBlurProp","props","since","hint","version","nonNullValueProp","undefined","parsedQuantity","parsedUnit","setUnit","length","initial","fallback","refParsedQuantity","classes","handleOnQuantityChange","nextQuantityValue","changeProps","onChangeValue","join","handleOnUnitChange","nextUnitValue","data","nextValue","default","mayUpdateUnit","event","isNaN","Number","currentTarget","current","validParsedQuantity","validParsedUnit","Array","isArray","find","option","handleOnBlur","handleOnKeyDown","key","unitControlStateReducer","state","action","nextState","type","inputControlActionTypes","COMMIT","toString","stateReducer","baseState","inputSuffix","step","activeUnit","UnitControl"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport type {\n\tFocusEventHandler,\n\tKeyboardEvent,\n\tForwardedRef,\n\tSyntheticEvent,\n} from 'react';\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport type { WordPressComponentProps } from '../ui/context';\nimport as inputControlActionTypes from '../input-control/reducer/actions';\nimport { ValueInput } from './styles/unit-control-styles';\nimport UnitSelectControl from './unit-select-control';\nimport {\n\tCSS_UNITS,\n\tgetParsedQuantityAndUnit,\n\tgetUnitsWithCurrentUnit,\n\tgetValidParsedQuantityAndUnit,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type { UnitControlProps, UnitControlOnChangeCallback } from './types';\nimport type { StateReducer } from '../input-control/reducer/state';\n\nfunction UnforwardedUnitControl(\n\tunitControlProps: WordPressComponentProps<\n\t\tUnitControlProps,\n\t\t'input',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__unstableStateReducer: stateReducerProp,\n\t\tautoComplete = 'off',\n\t\t// @ts-expect-error Ensure that children is omitted from restProps\n\t\tchildren,\n\t\tclassName,\n\t\tdisabled = false,\n\t\tdisableUnits = false,\n\t\tisPressEnterToChange = false,\n\t\tisResetValueOnUnitChange = false,\n\t\tisUnitSelectTabbable = true,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tonUnitChange,\n\t\tsize = 'default',\n\t\tunit: unitProp,\n\t\tunits: unitsProp = CSS_UNITS,\n\t\tvalue: valueProp,\n\t\tonBlur: onBlurProp,\n\t\t...props\n\t} = unitControlProps;\n\n\tif ( 'unit' in unitControlProps ) {\n\t\tdeprecated( 'UnitControl unit prop', {\n\t\t\tsince: '5.6',\n\t\t\thint: 'The unit should be provided within the `value` prop.',\n\t\t\tversion: '6.2',\n\t\t} );\n\t}\n\n\t// The `value` prop, in theory, should not be `null`, but the following line\n\t// ensures it fallback to `undefined` in case a consumer of `UnitControl`\n\t// still passes `null` as a `value`.\n\tconst nonNullValueProp = valueProp ?? undefined;\n\tconst units = useMemo(\n\t\t() => getUnitsWithCurrentUnit( nonNullValueProp, unitProp, unitsProp ),\n\t\t[ nonNullValueProp, unitProp, unitsProp ]\n\t);\n\tconst [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(\n\t\tnonNullValueProp,\n\t\tunitProp,\n\t\tunits\n\t);\n\n\tconst [ unit, setUnit ] = useControlledState< string \| undefined >(\n\t\tunits.length === 1 ? units[ 0 ].value : unitProp,\n\t\t{\n\t\t\tinitial: parsedUnit,\n\t\t\tfallback: '',\n\t\t}\n\t);\n\n\tuseEffect( () => {\n\t\tif ( parsedUnit !== undefined ) {\n\t\t\tsetUnit( parsedUnit );\n\t\t}\n\t}, [ parsedUnit, setUnit ] );\n\n\t// Stores parsed value for hand-off in state reducer.\n\tconst refParsedQuantity = useRef< number \| undefined >( undefined );\n\n\tconst classes = classnames(\n\t\t'components-unit-control',\n\t\t// This class is added for legacy purposes to maintain it on the outer\n\t\t// wrapper. See: https://github.com/WordPress/gutenberg/pull/45139\n\t\t'components-unit-control-wrapper',\n\t\tclassName\n\t);\n\n\tconst handleOnQuantityChange = (\n\t\tnextQuantityValue: number \| string \| undefined,\n\t\tchangeProps: {\n\t\t\tevent: SyntheticEvent;\n\t\t}\n\t) => {\n\t\tif (\n\t\t\tnextQuantityValue === '' \|\|\n\t\t\ttypeof nextQuantityValue === 'undefined' \|\|\n\t\t\tnextQuantityValue === null\n\t\t) {\n\t\t\tonChangeProp?.( '', changeProps );\n\t\t\treturn;\n\t\t}\n\n\t\t/\n\t\t Customizing the onChange callback.\n\t\t * This allows as to broadcast a combined value+unit to onChange.\n\t\t /\n\t\tconst onChangeValue = getValidParsedQuantityAndUnit(\n\t\t\tnextQuantityValue,\n\t\t\tunits,\n\t\t\tparsedQuantity,\n\t\t\tunit\n\t\t).join( '' );\n\n\t\tonChangeProp?.( onChangeValue, changeProps );\n\t};\n\n\tconst handleOnUnitChange: UnitControlOnChangeCallback = (\n\t\tnextUnitValue,\n\t\tchangeProps\n\t) => {\n\t\tconst { data } = changeProps;\n\n\t\tlet nextValue = `${ parsedQuantity ?? '' }${ nextUnitValue }`;\n\n\t\tif ( isResetValueOnUnitChange && data?.default !== undefined ) {\n\t\t\tnextValue = `${ data.default }${ nextUnitValue }`;\n\t\t}\n\n\t\tonChangeProp?.( nextValue, changeProps );\n\t\tonUnitChange?.( nextUnitValue, changeProps );\n\n\t\tsetUnit( nextUnitValue );\n\t};\n\n\tconst mayUpdateUnit = ( event: SyntheticEvent< HTMLInputElement > ) => {\n\t\tif ( ! isNaN( Number( event.currentTarget.value ) ) ) {\n\t\t\trefParsedQuantity.current = undefined;\n\t\t\treturn;\n\t\t}\n\t\tconst [ validParsedQuantity, validParsedUnit ] =\n\t\t\tgetValidParsedQuantityAndUnit(\n\t\t\t\tevent.currentTarget.value,\n\t\t\t\tunits,\n\t\t\t\tparsedQuantity,\n\t\t\t\tunit\n\t\t\t);\n\n\t\trefParsedQuantity.current = validParsedQuantity;\n\n\t\tif ( isPressEnterToChange && validParsedUnit !== unit ) {\n\t\t\tconst data = Array.isArray( units )\n\t\t\t\t? units.find( ( option ) => option.value === validParsedUnit )\n\t\t\t\t: undefined;\n\t\t\tconst changeProps = { event, data };\n\n\t\t\t// The `onChange` callback already gets called, no need to call it explicitly.\n\t\t\tonUnitChange?.( validParsedUnit, changeProps );\n\n\t\t\tsetUnit( validParsedUnit );\n\t\t}\n\t};\n\n\tconst handleOnBlur: FocusEventHandler< HTMLInputElement > = ( event ) => {\n\t\tmayUpdateUnit( event );\n\t\tonBlurProp?.( event );\n\t};\n\n\tconst handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\tconst { key } = event;\n\t\tif ( key === 'Enter' ) {\n\t\t\tmayUpdateUnit( event );\n\t\t}\n\t};\n\n\t/\n\t \"Middleware\" function that intercepts updates from InputControl.\n\t * This allows us to tap into actions to transform the (next) state for\n\t * InputControl.\n\t \n\t @param state State from InputControl\n\t * @param action Action triggering state change\n\t * @return The updated state to apply to InputControl\n\t /\n\tconst unitControlStateReducer: StateReducer = ( state, action ) => {\n\t\tconst nextState = { ...state };\n\n\t\t/\n\t\t * On commits (when pressing ENTER and on blur if\n\t\t * isPressEnterToChange is true), if a parse has been performed\n\t\t * then use that result to update the state.\n\t\t /\n\t\tif ( action.type === inputControlActionTypes.COMMIT ) {\n\t\t\tif ( refParsedQuantity.current !== undefined ) {\n\t\t\t\tnextState.value = (\n\t\t\t\t\trefParsedQuantity.current ?? ''\n\t\t\t\t).toString();\n\t\t\t\trefParsedQuantity.current = undefined;\n\t\t\t}\n\t\t}\n\n\t\treturn nextState;\n\t};\n\n\tlet stateReducer: StateReducer = unitControlStateReducer;\n\tif ( stateReducerProp ) {\n\t\tstateReducer = ( state, action ) => {\n\t\t\tconst baseState = unitControlStateReducer( state, action );\n\t\t\treturn stateReducerProp( baseState, action );\n\t\t};\n\t}\n\n\tconst inputSuffix = ! disableUnits ? (\n\t\t<UnitSelectControl\n\t\t\taria-label={ __( 'Select unit' ) }\n\t\t\tdisabled={ disabled }\n\t\t\tisUnitSelectTabbable={ isUnitSelectTabbable }\n\t\t\tonChange={ handleOnUnitChange }\n\t\t\tsize={ size }\n\t\t\tunit={ unit }\n\t\t\tunits={ units }\n\t\t\tonBlur={ onBlurProp }\n\t\t/>\n\t) : null;\n\n\tlet step = props.step;\n\n\t/\n\t * If no step prop has been passed, lookup the active unit and\n\t * try to get step from `units`, or default to a value of `1`\n\t /\n\tif ( ! step && units ) {\n\t\tconst activeUnit = units.find( ( option ) => option.value === unit );\n\t\tstep = activeUnit?.step ?? 1;\n\t}\n\n\treturn (\n\t\t<ValueInput\n\t\t\ttype={ isPressEnterToChange ? 'text' : 'number' }\n\t\t\t{ ...props }\n\t\t\tautoComplete={ autoComplete }\n\t\t\tclassName={ classes }\n\t\t\tdisabled={ disabled }\n\t\t\tspinControls=\"none\"\n\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\tlabel={ label }\n\t\t\tonBlur={ handleOnBlur }\n\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\tonChange={ handleOnQuantityChange }\n\t\t\tref={ forwardedRef }\n\t\t\tsize={ size }\n\t\t\tsuffix={ inputSuffix }\n\t\t\tvalue={ parsedQuantity ?? '' }\n\t\t\tstep={ step }\n\t\t\t__unstableStateReducer={ stateReducer }\n\t\t/>\n\t);\n}\n\n/\n `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).\n \n \n * @example\n * ```jsx\n * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n \n const Example = () => {\n * const [ value, setValue ] = useState( '10px' );\n \n return <UnitControl onChange={ setValue } value={ value } />;\n * };\n * ```\n */\nexport const UnitControl = forwardRef( UnforwardedUnitControl );\n\nexport { parseQuantityAndUnitFromRawValue, useCustomUnits } from './utils';\nexport default UnitControl;\n"]}