Components: Refactor existing Slot-Fill to first-party implementation

blocks/block-controls/index.js

@@ -1,12 +1,7 @@
-/**
- * External dependencies
- */
-import { Fill } from 'react-slot-fill';
-
 /**
  * WordPress dependencies
  */
-import { Toolbar } from '@wordpress/components';
+import { Fill, Toolbar } from '@wordpress/components';
 
 export default function BlockControls( { controls, children } ) {
 	return (

blocks/editable/index.js

@@ -15,14 +15,14 @@ import {
 	noop,
 } from 'lodash';
 import { nodeListToReact } from 'dom-react';
-import { Fill } from 'react-slot-fill';
 import 'element-closest';
 
 /**
  * WordPress dependencies
  */
 import { createElement, Component, renderToString } from '@wordpress/element';
 import { keycodes } from '@wordpress/utils';
+import { Fill } from '@wordpress/components';
 
 /**
  * Internal dependencies

blocks/inspector-controls/index.js

@@ -1,7 +1,7 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { Fill } from 'react-slot-fill';
+import { Fill } from '@wordpress/components';
 
 /**
  * Internal dependencies

editor/block-toolbar/index.js

@@ -1,14 +1,13 @@
 /**
  * External dependencies
  */
-import { Slot } from 'react-slot-fill';
 import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 import classnames from 'classnames';
 
 /**
  * WordPress Dependencies
  */
-import { IconButton, Toolbar, NavigableMenu } from '@wordpress/components';
+import { IconButton, Toolbar, NavigableMenu, Slot } from '@wordpress/components';
 import { Component, Children, findDOMNode } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { focus, keycodes } from '@wordpress/utils';

editor/provider/index.js

@@ -3,7 +3,6 @@
  */
 import { bindActionCreators } from 'redux';
 import { Provider as ReduxProvider } from 'react-redux';
-import { Provider as SlotFillProvider } from 'react-slot-fill';
 import { flow, pick, noop } from 'lodash';
 
 /**
@@ -14,7 +13,7 @@ import { EditableProvider } from '@wordpress/blocks';
 import {
 	APIProvider,
 	DropZoneProvider,
-	SlotFillProvider as WPSlotFillProvider,
+	SlotFillProvider,
 } from '@wordpress/components';
 
 /**
@@ -80,14 +79,6 @@ class EditorProvider extends Component {
 				{ store: this.store },
 			],
 
-			// Slot / Fill provider:
-			//
-			//  - context.slots
-			//  - context.fills
-			[
-				SlotFillProvider,
-			],
-
 			// Editable provider:
 			//
 			//  - context.onUndo
@@ -104,7 +95,7 @@ class EditorProvider extends Component {
 			//  - context.registerSlot
 			//  - context.unregisterSlot
 			[
-				WPSlotFillProvider,
+				SlotFillProvider,
 			],
 
 			// APIProvider

editor/sidebar/block-inspector/index.js

@@ -2,13 +2,12 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { Slot } from 'react-slot-fill';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Panel, PanelBody } from '@wordpress/components';
+import { Panel, PanelBody, Slot } from '@wordpress/components';
 
 /**
  * Internal Dependencies

package.json

@@ -36,7 +36,6 @@
     "react-dom": "15.6.1",
     "react-redux": "5.0.6",
     "react-resizable-box": "2.0.6",
-    "react-slot-fill": "1.0.1",
     "react-transition-group": "1.2.0",
     "redux": "3.7.2",
     "redux-multi": "0.1.12",

webpack.config.js

@@ -84,11 +84,6 @@ const config = {
 			__dirname,
 			'node_modules',
 		],
-		alias: {
-			// There are currently resolution errors on RSF's "mitt" dependency
-			// when imported as native ES module
-			'react-slot-fill': 'react-slot-fill/lib/rsf.js',
-		},
 	},
 	module: {
 		rules: [