Revert "SlotFill: Migrate to Typescript. (#51350)"

This reverts commit 3cca31c.

packages/components/CHANGELOG.md

@@ -18,8 +18,6 @@
 -   `Tooltip`, `Shortcut`: Remove unused `ui/` components from the codebase ([#54573](https://github.com/WordPress/gutenberg/pull/54573))
 -   Update `uuid` package to 9.0.1 ([#54725](https://github.com/WordPress/gutenberg/pull/54725)).
 -   `ContextSystemProvider`: Move out of `ui/` ([#54847](https://github.com/WordPress/gutenberg/pull/54847)).
--   `SlotFill`: Migrate to TypeScript and Convert to Functional Component `<Slot bubblesVirtually />`. ([#51350](https://github.com/WordPress/gutenberg/pull/51350)).
-
 
 ## 25.8.0 (2023-09-20)
 
@@ -132,7 +130,6 @@
 
 -   `ColorPalette`, `BorderControl`: Don't hyphenate hex value in `aria-label` ([#52932](https://github.com/WordPress/gutenberg/pull/52932)).
 -   `MenuItemsChoice`, `MenuItem`: Support a `disabled` prop on a menu item ([#52737](https://github.com/WordPress/gutenberg/pull/52737)).
--   `TabPanel`: Introduce a new version of `TabPanel` with updated internals and improved adherence to ARIA guidance on `tabpanel` focus behavior while maintaining the same functionality and API surface.([#52133](https://github.com/WordPress/gutenberg/pull/52133)).
 
 ### Bug Fix
 

packages/components/src/dropdown-menu-v2/types.ts

@@ -261,5 +261,5 @@ export type DropdownMenuPrivateContext = Pick<
 	DropdownMenuInternalContext,
 	'variant'
 > & {
-	portalContainer?: HTMLElement | null;
+	portalContainer: HTMLElement | null;
 };

packages/components/src/popover/index.tsx

@@ -497,6 +497,7 @@ function PopoverSlot(
 ) {
 	return (
 		<Slot
+			// @ts-expect-error Need to type `SlotFill`
 			bubblesVirtually
 			name={ name }
 			className="popover-slot"

packages/components/src/slot-fill/bubbles-virtually/fill.tsx → packages/components/src/slot-fill/bubbles-virtually/fill.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * WordPress dependencies
  */
@@ -8,7 +9,6 @@ import { useRef, useState, useEffect, createPortal } from '@wordpress/element';
  */
 import useSlot from './use-slot';
 import StyleProvider from '../../style-provider';
-import type { FillComponentProps } from '../types';
 
 function useForceUpdate() {
 	const [ , setState ] = useState( {} );
@@ -28,8 +28,7 @@ function useForceUpdate() {
 	};
 }
 
-export default function Fill( props: FillComponentProps ) {
-	const { name, children } = props;
+export default function Fill( { name, children } ) {
 	const { registerFill, unregisterFill, ...slot } = useSlot( name );
 	const rerender = useForceUpdate();
 	const ref = useRef( { rerender } );
@@ -48,15 +47,17 @@ export default function Fill( props: FillComponentProps ) {
 		return null;
 	}
 
+	if ( typeof children === 'function' ) {
+		children = children( slot.fillProps );
+	}
+
 	// When using a `Fill`, the `children` will be rendered in the document of the
 	// `Slot`. This means that we need to wrap the `children` in a `StyleProvider`
 	// to make sure we're referencing the right document/iframe (instead of the
 	// context of the `Fill`'s parent).
 	const wrappedChildren = (
 		<StyleProvider document={ slot.ref.current.ownerDocument }>
-			{ typeof children === 'function'
-				? children( slot.fillProps ?? {} )
-				: children }
+			{ children }
 		</StyleProvider>
 	);
 

packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.ts → packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */
@@ -7,12 +8,8 @@ import { proxyMap } from 'valtio/utils';
  */
 import { createContext } from '@wordpress/element';
 import warning from '@wordpress/warning';
-/**
- * Internal dependencies
- */
-import type { SlotFillBubblesVirtuallyContext } from '../types';
 
-const initialContextValue: SlotFillBubblesVirtuallyContext = {
+const SlotFillContext = createContext( {
 	slots: proxyMap(),
 	fills: proxyMap(),
 	registerSlot: () => {
@@ -28,8 +25,6 @@ const initialContextValue: SlotFillBubblesVirtuallyContext = {
 
 	// This helps the provider know if it's using the default context value or not.
 	isDefault: true,
-};
-
-const SlotFillContext = createContext( initialContextValue );
+} );
 
 export default SlotFillContext;

packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.js

@@ -0,0 +1,95 @@
+// @ts-nocheck
+/**
+ * External dependencies
+ */
+import { ref as valRef } from 'valtio';
+import { proxyMap } from 'valtio/utils';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import isShallowEqual from '@wordpress/is-shallow-equal';
+
+/**
+ * Internal dependencies
+ */
+import SlotFillContext from './slot-fill-context';
+
+function createSlotRegistry() {
+	const slots = proxyMap();
+	const fills = proxyMap();
+
+	function registerSlot( name, ref, fillProps ) {
+		const slot = slots.get( name ) || {};
+		slots.set(
+			name,
+			valRef( {
+				...slot,
+				ref: ref || slot.ref,
+				fillProps: fillProps || slot.fillProps || {},
+			} )
+		);
+	}
+
+	function unregisterSlot( name, ref ) {
+		// Make sure we're not unregistering a slot registered by another element
+		// See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412
+		if ( slots.get( name )?.ref === ref ) {
+			slots.delete( name );
+		}
+	}
+
+	function updateSlot( name, fillProps ) {
+		const slot = slots.get( name );
+		if ( ! slot ) {
+			return;
+		}
+
+		if ( isShallowEqual( slot.fillProps, fillProps ) ) {
+			return;
+		}
+
+		slot.fillProps = fillProps;
+		const slotFills = fills.get( name );
+		if ( slotFills ) {
+			// Force update fills.
+			slotFills.map( ( fill ) => fill.current.rerender() );
+		}
+	}
+
+	function registerFill( name, ref ) {
+		fills.set( name, valRef( [ ...( fills.get( name ) || [] ), ref ] ) );
+	}
+
+	function unregisterFill( name, ref ) {
+		const fillsForName = fills.get( name );
+		if ( ! fillsForName ) {
+			return;
+		}
+
+		fills.set(
+			name,
+			valRef( fillsForName.filter( ( fillRef ) => fillRef !== ref ) )
+		);
+	}
+
+	return {
+		slots,
+		fills,
+		registerSlot,
+		updateSlot,
+		unregisterSlot,
+		registerFill,
+		unregisterFill,
+	};
+}
+
+export default function SlotFillProvider( { children } ) {
+	const [ registry ] = useState( createSlotRegistry );
+	return (
+		<SlotFillContext.Provider value={ registry }>
+			{ children }
+		</SlotFillContext.Provider>
+	);
+}

packages/components/src/slot-fill/bubbles-virtually/slot.tsx → packages/components/src/slot-fill/bubbles-virtually/slot.js

@@ -1,8 +1,4 @@
-/**
- * External dependencies
- */
-import type { ForwardedRef } from 'react';
-
+// @ts-nocheck
 /**
  * WordPress dependencies
  */
@@ -19,30 +15,21 @@ import { useMergeRefs } from '@wordpress/compose';
  */
 import { View } from '../../view';
 import SlotFillContext from './slot-fill-context';
-import type { WordPressComponentProps } from '../../context';
-import type { SlotComponentProps } from '../types';
 
-function Slot(
-	props: WordPressComponentProps<
-		Omit< SlotComponentProps, 'bubblesVirtually' >,
-		'div'
-	>,
-	forwardedRef: ForwardedRef< any >
-) {
+function Slot( props, forwardedRef ) {
 	const {
 		name,
 		fillProps = {},
 		as,
 		// `children` is not allowed. However, if it is passed,
 		// it will be displayed as is, so remove `children`.
-		// @ts-ignore
 		children,
 		...restProps
 	} = props;
 
 	const { registerSlot, unregisterSlot, ...registry } =
 		useContext( SlotFillContext );
-	const ref = useRef< HTMLElement >( null );
+	const ref = useRef();
 
 	useLayoutEffect( () => {
 		registerSlot( name, ref, fillProps );

packages/components/src/slot-fill/bubbles-virtually/use-slot-fills.ts → packages/components/src/slot-fill/bubbles-virtually/use-slot-fills.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */
@@ -12,9 +13,8 @@ import { useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import SlotFillContext from './slot-fill-context';
-import type { SlotKey } from '../types';
 
-export default function useSlotFills( name: SlotKey ) {
+export default function useSlotFills( name ) {
 	const registry = useContext( SlotFillContext );
 	const fills = useSnapshot( registry.fills, { sync: true } );
 	// The important bit here is that this call ensures that the hook