@wordpress/components 32.2.1-next.v.202602111440.0 → 32.2.1

package/src/palette-edit/types.ts

@@ -127,7 +127,7 @@ export type PaletteEditListViewProps< T extends Color | Gradient > = {
 	onChange: ( newElements?: T[] ) => void;
 	isGradient: T extends Gradient ? true : false;
 	canOnlyChangeValues: PaletteEditProps[ 'canOnlyChangeValues' ];
-	addColorRef: React.RefObject< HTMLButtonElement >;
+	addColorRef: React.RefObject< HTMLButtonElement | null >;
 	editingElement?: EditingElement;
 	popoverProps?: PaletteEditProps[ 'popoverProps' ];
 	setEditingElement: ( newEditingElement?: EditingElement ) => void;

package/src/panel/README.md

@@ -117,7 +117,7 @@ The CSS class to apply to the wrapper element.
 
 -   Required: No
 
-###### `icon`: `JSX.Element`
+###### `icon`: `React.JSX.Element`
 
 An icon to be shown next to the title.
 

package/src/panel/body.tsx

@@ -57,7 +57,7 @@ export function UnforwardedPanelBody(
 	};
 
 	// Ref is used so that the effect does not re-run upon scrollAfterOpen changing value.
-	const scrollAfterOpenRef = useRef< boolean | undefined >();
+	const scrollAfterOpenRef = useRef< boolean >( undefined );
 	scrollAfterOpenRef.current = scrollAfterOpen;
 	// Runs after initial render.
 	useUpdateEffect( () => {

package/src/panel/types.ts

@@ -70,7 +70,7 @@ export type PanelBodyProps = {
 	/**
 	 * An icon to be shown next to the title.
 	 */
-	icon?: JSX.Element;
+	icon?: React.JSX.Element;
 	/**
 	 * Whether or not the panel will start open.
 	 */
@@ -104,7 +104,7 @@ export type PanelBodyTitleProps = Omit< ButtonAsButtonProps, 'icon' > & {
 	/**
 	 * An icon to be shown next to the title.
 	 */
-	icon?: JSX.Element;
+	icon?: React.JSX.Element;
 	/**
 	 * Whether or not the `PanelBody` is currently opened or not.
 	 */

package/src/popover/stories/index.story.tsx

@@ -93,7 +93,7 @@ export const Default: StoryObj< typeof Popover > = {
 	decorators: [
 		( Story ) => {
 			const [ isVisible, setIsVisible ] = useState( false );
-			const buttonRef = useRef< HTMLButtonElement | undefined >();
+			const buttonRef = useRef< HTMLButtonElement >( undefined );
 			const toggleVisible = ( event: React.MouseEvent ) => {
 				if ( buttonRef.current && event.target !== buttonRef.current ) {
 					return;

package/src/private-apis.ts

@@ -30,7 +30,6 @@ import {
 	ValidatedToggleGroupControl,
 } from './validated-form-controls';
 import { ValidatedFormTokenField } from './validated-form-controls/components/form-token-field';
-import { Picker } from './color-picker/picker';
 
 export const privateApis = {};
 lock( privateApis, {
@@ -46,7 +45,6 @@ lock( privateApis, {
 	DateCalendar,
 	DateRangeCalendar,
 	TZDate,
-	Picker,
 	useDrag,
 	ValidatedInputControl,
 	ValidatedCheckboxControl,

package/src/radio-control/test/index.tsx

@@ -238,7 +238,8 @@ describe.each( [
 					name: defaultProps.options[ 1 ].label,
 				} )
 			).toHaveFocus();
-			expect( onChangeSpy ).toHaveBeenCalledTimes( 2 );
+
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
 			expect( onChangeSpy ).toHaveBeenLastCalledWith(
 				defaultProps.options[ 1 ].value
 			);
@@ -253,8 +254,8 @@ describe.each( [
 					name: defaultProps.options[ 0 ].label,
 				} )
 			).toHaveFocus();
-			// TODO: why called twice for every interaction?
-			expect( onChangeSpy ).toHaveBeenCalledTimes( 6 );
+
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 3 );
 			expect( onChangeSpy ).toHaveBeenLastCalledWith(
 				defaultProps.options[ 0 ].value
 			);
@@ -268,7 +269,7 @@ describe.each( [
 				} )
 			).toHaveFocus();
 
-			expect( onChangeSpy ).toHaveBeenCalledTimes( 8 );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 4 );
 			expect( onChangeSpy ).toHaveBeenLastCalledWith(
 				defaultProps.options[ 2 ].value
 			);

package/src/range-control/index.tsx

@@ -122,7 +122,7 @@ function UnforwardedRangeControl(
 	const [ showTooltip, setShowTooltip ] = useState( hasTooltip );
 	const [ isFocused, setIsFocused ] = useState( false );
 
-	const inputRef = useRef< HTMLInputElement >();
+	const inputRef = useRef< HTMLInputElement >( null );
 	const isCurrentlyFocused = inputRef.current?.matches( ':focus' );
 	const isThumbFocused = ! disabled && isFocused;
 

package/src/range-control/types.ts

@@ -5,7 +5,7 @@ import type {
 	CSSProperties,
 	FocusEventHandler,
 	MouseEventHandler,
-	MutableRefObject,
+	RefObject,
 } from 'react';
 
 /**
@@ -267,7 +267,7 @@ export type ThumbProps = {
 export type TooltipProps = {
 	show?: boolean;
 	placement?: string;
-	inputRef?: MutableRefObject< HTMLElement | undefined >;
+	inputRef?: RefObject< HTMLElement | null >;
 	tooltipPlacement?: string;
 	value?: ControlledRangeValue;
 	renderTooltipContent?: (

package/src/resizable-box/index.tsx

@@ -104,7 +104,7 @@ function UnforwardedResizableBox(
 		...props
 	}: ResizableBoxProps,
 	ref: ForwardedRef< Resizable >
-): JSX.Element {
+) {
 	return (
 		<Resizable
 			className={ clsx(

package/src/resizable-box/resize-tooltip/index.tsx

@@ -46,7 +46,7 @@ function ResizeTooltip(
 		...props
 	}: ResizeTooltipProps,
 	ref: ForwardedRef< HTMLDivElement >
-): JSX.Element | null {
+) {
 	const { label, resizeListener } = useResizeLabel( {
 		axis,
 		fadeTimeout,

package/src/resizable-box/resize-tooltip/label.tsx

@@ -35,7 +35,7 @@ type LabelProps = React.DetailedHTMLProps<
 function Label(
 	{ label, position = POSITIONS.corner, zIndex = 1000, ...props }: LabelProps,
 	ref: ForwardedRef< HTMLDivElement >
-): JSX.Element | null {
+) {
 	const showLabel = !! label;
 
 	const isBottom = position === POSITIONS.bottom;

package/src/resizable-box/resize-tooltip/utils.ts

@@ -19,7 +19,7 @@ interface UseResizeLabelProps {
 	/** The label value. */
 	label?: string;
 	/** Element to be rendered for resize listening events. */
-	resizeListener: JSX.Element;
+	resizeListener: React.JSX.Element;
 }
 
 interface UseResizeLabelArgs {
@@ -82,7 +82,7 @@ export function useResizeLabel( {
 	 * This timeout is used with setMoveX and setMoveY to determine of
 	 * both width and height values have changed at (roughly) the same time.
 	 */
-	const moveTimeoutRef = useRef< number >();
+	const moveTimeoutRef = useRef< number >( undefined );
 
 	const debounceUnsetMoveXY = useCallback( () => {
 		const unsetMoveXY = () => {

package/src/sandbox/index.tsx

@@ -6,6 +6,7 @@ import {
 	useRef,
 	useState,
 	useEffect,
+	useMemo,
 } from '@wordpress/element';
 import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
 
@@ -14,6 +15,8 @@ import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
  */
 import type { SandBoxProps } from './types';
 
+type SandBoxContentProps = Omit< SandBoxProps, 'allowSameOrigin' >;
+
 const observeAndResizeJS = function () {
 	const { MutationObserver } = window;
 
@@ -115,17 +118,176 @@ const style = `
 `;
 
 /**
- * This component provides an isolated environment for arbitrary HTML via iframes.
+ * Builds the full HTML document string for the sandbox iframe content.
+ */
+function buildSandBoxDocument( {
+	html,
+	title,
+	type,
+	styles,
+	scripts,
+}: {
+	html: string;
+	title: string;
+	type?: string;
+	styles: string[];
+	scripts: string[];
+} ): string {
+	const htmlDoc = (
+		<html lang={ document.documentElement.lang } className={ type }>
+			<head>
+				<title>{ title }</title>
+				<style dangerouslySetInnerHTML={ { __html: style } } />
+				{ styles.map( ( rules, i ) => (
+					<style
+						key={ i }
+						dangerouslySetInnerHTML={ { __html: rules } }
+					/>
+				) ) }
+			</head>
+			<body
+				data-resizable-iframe-connected="data-resizable-iframe-connected"
+				className={ type }
+			>
+				<div dangerouslySetInnerHTML={ { __html: html } } />
+				<script
+					type="text/javascript"
+					dangerouslySetInnerHTML={ {
+						__html: `(${ observeAndResizeJS.toString() })();`,
+					} }
+				/>
+				{ scripts.map( ( src ) => (
+					<script key={ src } src={ src } />
+				) ) }
+			</body>
+		</html>
+	);
+
+	return '<!DOCTYPE html>' + renderToString( htmlDoc );
+}
+
+/**
+ * Isolated sandbox that uses the `srcdoc` attribute to render content
+ * without `allow-same-origin`. This is the default for user-controlled
+ * content (e.g., the HTML block) where same-origin access would be a
+ * security risk.
  *
- * ```jsx
- * import { SandBox } from '@wordpress/components';
+ * Because `srcdoc` is a declarative attribute, the browser automatically
+ * re-renders the content when the iframe is moved in the DOM (e.g.,
+ * block reordering), so no `load` event listener is needed.
+ * The `message` listener is re-synced on every `load` so
+ * it follows the iframe if it's reparented into a different document.
+ */
+function IsolatedSandBox( {
+	html = '',
+	title = '',
+	type,
+	styles = [],
+	scripts = [],
+	onFocus,
+	tabIndex,
+}: SandBoxContentProps ) {
+	const ref = useRef< HTMLIFrameElement >( null );
+	const [ width, setWidth ] = useState( 0 );
+	const [ height, setHeight ] = useState( 0 );
+
+	const srcDoc = useMemo(
+		() => buildSandBoxDocument( { html, title, type, styles, scripts } ),
+		[ html, title, type, styles, scripts ]
+	);
+
+	useEffect( () => {
+		const iframe = ref.current;
+		if ( ! iframe ) {
+			return;
+		}
+
+		function checkMessageForResize( event: MessageEvent ) {
+			// Verify that the mounted element is the source of the message.
+			// iframe.contentWindow is accessible cross-origin as a
+			// WindowProxy reference, so this check still works without
+			// allow-same-origin.
+			if ( ! iframe || iframe.contentWindow !== event.source ) {
+				return;
+			}
+
+			// Attempt to parse the message data as JSON if passed as string.
+			let data = event.data || {};
+
+			if ( 'string' === typeof data ) {
+				try {
+					data = JSON.parse( data );
+				} catch {}
+			}
+
+			// Update the state only if the message is formatted as we expect,
+			// i.e. as an object with a 'resize' action.
+			if ( 'resize' !== data.action ) {
+				return;
+			}
+
+			setWidth( data.width );
+			setHeight( data.height );
+		}
+
+		let currentView: Window | null = null;
+		function syncListener() {
+			const view = iframe?.ownerDocument?.defaultView ?? null;
+			if ( view === currentView ) {
+				return;
+			}
+
+			currentView?.removeEventListener(
+				'message',
+				checkMessageForResize
+			);
+
+			currentView = view;
+			currentView?.addEventListener( 'message', checkMessageForResize );
+		}
+
+		syncListener();
+		iframe.addEventListener( 'load', syncListener );
+
+		return () => {
+			iframe.removeEventListener( 'load', syncListener );
+			currentView?.removeEventListener(
+				'message',
+				checkMessageForResize
+			);
+		};
+	}, [] );
+
+	return (
+		<iframe
+			ref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }
+			title={ title }
+			tabIndex={ tabIndex }
+			className="components-sandbox"
+			sandbox="allow-scripts allow-presentation"
+			srcDoc={ srcDoc }
+			onFocus={ onFocus }
+			width={ Math.ceil( width ) }
+			height={ Math.ceil( height ) }
+		/>
+	);
+}
+
+/**
+ * Same-origin sandbox that writes to `contentDocument` directly. This
+ * preserves the parent page's URL as the iframe's document URL, which
+ * provides a valid Referer header for nested iframes (required by
+ * providers like YouTube).
  *
- * const MySandBox = () => (
- * 	<SandBox html="<p>Content</p>" title="SandBox" type="embed" />
- * );
- * ```
+ * Only used when `allowSameOrigin` is true — i.e., for server-fetched
+ * oEmbed previews that are not directly user-controlled.
+ *
+ * This implementation is intentionally kept close to the original
+ * pre-refactor code to preserve past bugfixes:
+ * - load listener for iframe re-initialization after DOM moves (#21916)
+ * - forceRerender guard to avoid unnecessary full rewrites (#20176)
  */
-function SandBox( {
+function SameOriginSandBox( {
 	html = '',
 	title = '',
 	type,
@@ -133,8 +295,8 @@ function SandBox( {
 	scripts = [],
 	onFocus,
 	tabIndex,
-}: SandBoxProps ) {
-	const ref = useRef< HTMLIFrameElement >();
+}: SandBoxContentProps ) {
+	const ref = useRef< HTMLIFrameElement >( null );
 	const [ width, setWidth ] = useState( 0 );
 	const [ height, setHeight ] = useState( 0 );
 
@@ -292,4 +454,22 @@ function SandBox( {
 	);
 }
 
+/**
+ * This component provides an isolated environment for arbitrary HTML via iframes.
+ *
+ * ```jsx
+ * import { SandBox } from '@wordpress/components';
+ *
+ * const MySandBox = () => (
+ * 	<SandBox html="<p>Content</p>" title="SandBox" type="embed" />
+ * );
+ * ```
+ */
+function SandBox( { allowSameOrigin = false, ...contentProps }: SandBoxProps ) {
+	if ( allowSameOrigin ) {
+		return <SameOriginSandBox { ...contentProps } />;
+	}
+	return <IsolatedSandBox { ...contentProps } />;
+}
+
 export default SandBox;

package/src/sandbox/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { fireEvent, render, screen, within } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -16,10 +16,7 @@ import SandBox from '..';
 describe( 'SandBox', () => {
 	const TestWrapper = () => {
 		const [ html, setHtml ] = useState(
-			// MutationObserver implementation from JSDom does not work as intended
-			// with iframes so we need to ignore it for the time being.
-			'<script type="text/javascript">window.MutationObserver = null;</script>' +
-				'<iframe title="Mock Iframe" src="https://super.embed"></iframe>'
+			'<iframe title="Mock Iframe" src="https://super.embed"></iframe>'
 		);
 
 		const updateHtml = () => {
@@ -38,34 +35,78 @@ describe( 'SandBox', () => {
 		);
 	};
 
-	it( 'should rerender with new emdeded content if html prop changes', () => {
+	it( 'should not include allow-same-origin by default', () => {
+		render( <SandBox html="<p>Hello</p>" title="Test" /> );
+
+		const iframe = screen.getByTitle< HTMLIFrameElement >( 'Test' );
+
+		expect( iframe ).toHaveAttribute(
+			'sandbox',
+			'allow-scripts allow-presentation'
+		);
+		expect( iframe.getAttribute( 'sandbox' ) ).not.toContain(
+			'allow-same-origin'
+		);
+	} );
+
+	it( 'should set srcdoc with the provided html content', () => {
+		render( <SandBox html="<p>Hello</p>" title="Test Title" /> );
+
+		const iframe = screen.getByTitle< HTMLIFrameElement >( 'Test Title' );
+		const srcDoc = iframe.getAttribute( 'srcdoc' ) ?? '';
+
+		expect( srcDoc ).toContain( '<p>Hello</p>' );
+		expect( srcDoc ).toContain( '<title>Test Title</title>' );
+	} );
+
+	it( 'should include custom styles in srcdoc', () => {
+		render(
+			<SandBox
+				html="<p>Styled</p>"
+				title="Styled Test"
+				styles={ [ '.custom { color: red; }' ] }
+			/>
+		);
+
+		const iframe = screen.getByTitle< HTMLIFrameElement >( 'Styled Test' );
+		const srcDoc = iframe.getAttribute( 'srcdoc' ) ?? '';
+
+		expect( srcDoc ).toContain( '.custom { color: red; }' );
+	} );
+
+	it( 'should include script tags in srcdoc', () => {
+		render(
+			<SandBox
+				html="<p>Script</p>"
+				title="Script Test"
+				scripts={ [ 'https://example.com/embed.js' ] }
+			/>
+		);
+
+		const iframe = screen.getByTitle< HTMLIFrameElement >( 'Script Test' );
+		const srcDoc = iframe.getAttribute( 'srcdoc' ) ?? '';
+
+		expect( srcDoc ).toContain(
+			'<script src="https://example.com/embed.js">'
+		);
+	} );
+
+	it( 'should update srcdoc when html prop changes', () => {
 		render( <TestWrapper /> );
 
 		const iframe =
 			screen.getByTitle< HTMLIFrameElement >( 'SandBox Title' );
 
-		if ( ! iframe.contentWindow ) {
-			throw new Error();
-		}
-
-		let sandboxedIframe = within(
-			iframe.contentWindow.document.body
-		).getByTitle( 'Mock Iframe' );
-
-		expect( sandboxedIframe ).toHaveAttribute(
-			'src',
-			'https://super.embed'
+		expect( iframe ).toHaveAttribute(
+			'srcdoc',
+			expect.stringContaining( 'https://super.embed' )
 		);
 
 		fireEvent.click( screen.getByRole( 'button' ) );
 
-		sandboxedIframe = within(
-			iframe.contentWindow.document.body
-		).getByTitle( 'Mock Iframe' );
-
-		expect( sandboxedIframe ).toHaveAttribute(
-			'src',
-			'https://another.super.embed'
+		expect( iframe ).toHaveAttribute(
+			'srcdoc',
+			expect.stringContaining( 'https://another.super.embed' )
 		);
 	} );
 } );

package/src/sandbox/types.ts

@@ -1,4 +1,15 @@
 export type SandBoxProps = {
+	/**
+	 * Whether to include `allow-same-origin` in the iframe's sandbox
+	 * attribute. When true, nested iframes (such as third-party embeds)
+	 * can access their own origin's cookies and storage.
+	 *
+	 * Only enable this for content that is NOT directly user-controlled,
+	 * such as server-fetched oEmbed previews.
+	 *
+	 * @default false
+	 */
+	allowSameOrigin?: boolean;
 	/**
 	 * The HTML to render in the body of the iframe document.
 	 *

package/src/search-control/types.ts

@@ -72,5 +72,5 @@ export type SuffixItemProps = Pick<
 	SearchControlProps,
 	'value' | 'onChange' | 'onClose'
 > & {
-	searchRef: React.RefObject< HTMLInputElement >;
+	searchRef: React.RefObject< HTMLInputElement | null >;
 };

package/src/select-control/styles/select-control-styles.ts

@@ -162,6 +162,7 @@ export const Select = styled.select< SelectProps >`
 		cursor: inherit;
 		display: block;
 		font-family: inherit;
+		line-height: 1.3; // Override forms.css styles, large enough value to prevent descender clipping without affecting height
 		margin: 0;
 		width: 100%;
 		max-width: none;

package/src/slot-fill/types.ts

@@ -113,7 +113,7 @@ export type SlotFillProviderProps = {
 };
 
 export type SlotFillInstance = {};
-export type SlotRef = RefObject< HTMLElement >;
+export type SlotRef = RefObject< HTMLElement | null >;
 export type SlotRecord = { instance: SlotFillInstance } & (
 	| { type: 'children' }
 	| { type: 'portal'; ref: SlotRef; fillProps: FillProps }

package/src/snackbar/list.tsx

@@ -66,7 +66,7 @@ export function SnackbarList( {
 	children,
 	onRemove,
 }: WordPressComponentProps< SnackbarListProps, 'div' > ) {
-	const listRef = useRef< HTMLDivElement | null >( null );
+	const listRef = useRef< HTMLDivElement >( null );
 	const isReducedMotion = useReducedMotion();
 	className = clsx( 'components-snackbar-list', className );
 	const removeNotice =
@@ -86,7 +86,12 @@ export function SnackbarList( {
 
 					return (
 						<motion.div
-							layout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations
+							layout={ isReducedMotion ? false : 'position' } // See https://www.framer.com/docs/animation/#layout-animations
+							// Ensures a stable full-width bounding box so that
+							// `layout="position"` only ever detects vertical
+							// shifts, preventing horizontal animation when
+							// notice text changes in place.
+							style={ { width: '100%' } }
 							initial="init"
 							animate="open"
 							exit="exit"

package/src/tabs/styles.ts

@@ -162,6 +162,7 @@ export const Tab = styled( Ariakit.Tab )`
 		align-items: center;
 		cursor: pointer;
 		line-height: 1.2; // Characters in some languages (e.g. Japanese) may have a native higher line-height.
+		font-family: ${ font( 'default.fontFamily' ) };
 		font-weight: 400;
 		font-size: ${ font( 'default.fontSize' ) };
 		color: ${ COLORS.theme.foreground };

package/src/text/utils.ts

@@ -17,37 +17,37 @@ import { createElement } from '@wordpress/element';
 
 /**
  * @typedef Options
- * @property {string}                                                     [activeClassName='']      Classname for active highlighted areas.
- * @property {number}                                                     [activeIndex=-1]          The index of the active highlighted area.
- * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [activeStyle]             Styles to apply to the active highlighted area.
- * @property {boolean}                                                    [autoEscape]              Whether to automatically escape text.
- * @property {boolean}                                                    [caseSensitive=false]     Whether to highlight in a case-sensitive manner.
- * @property {string}                                                     children                  Children to highlight.
- * @property {import('highlight-words-core').FindAllArgs['findChunks']}   [findChunks]              Custom `findChunks` function to pass to `highlight-words-core`.
- * @property {string | Record<string, unknown>}                           [highlightClassName='']   Classname to apply to highlighted text or a Record of classnames to apply to given text (which should be the key).
- * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [highlightStyle={}]       Styles to apply to highlighted text.
- * @property {keyof JSX.IntrinsicElements}                                [highlightTag='mark']     Tag to use for the highlighted text.
- * @property {import('highlight-words-core').FindAllArgs['sanitize']}     [sanitize]                Custom `sanitize` function to pass to `highlight-words-core`.
- * @property {string[]}                                                   [searchWords=[]]          Words to search for and highlight.
- * @property {string}                                                     [unhighlightClassName=''] Classname to apply to unhighlighted text.
- * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [unhighlightStyle]        Style to apply to unhighlighted text.
+ * @property {string}                            [activeClassName='']      Classname for active highlighted areas.
+ * @property {number}                            [activeIndex=-1]          The index of the active highlighted area.
+ * @property {React.CSSProperties}               [activeStyle]             Styles to apply to the active highlighted area.
+ * @property {boolean}                           [autoEscape]              Whether to automatically escape text.
+ * @property {boolean}                           [caseSensitive=false]     Whether to highlight in a case-sensitive manner.
+ * @property {string}                            children                  Children to highlight.
+ * @property {FindAllArgs['findChunks']}         [findChunks]              Custom `findChunks` function to pass to `highlight-words-core`.
+ * @property {string | Record<string, unknown>}  [highlightClassName='']   Classname to apply to highlighted text or a Record of classnames to apply to given text (which should be the key).
+ * @property {React.CSSProperties}               [highlightStyle={}]       Styles to apply to highlighted text.
+ * @property {keyof React.JSX.IntrinsicElements} [highlightTag='mark']     Tag to use for the highlighted text.
+ * @property {FindAllArgs['sanitize']}           [sanitize]                Custom `sanitize` function to pass to `highlight-words-core`.
+ * @property {string[]}                          [searchWords=[]]          Words to search for and highlight.
+ * @property {string}                            [unhighlightClassName=''] Classname to apply to unhighlighted text.
+ * @property {React.CSSProperties}               [unhighlightStyle]        Style to apply to unhighlighted text.
  */
 
 interface Options {
 	activeClassName?: string;
 	activeIndex?: number;
-	activeStyle?: React.AllHTMLAttributes< HTMLDivElement >[ 'style' ];
+	activeStyle?: React.CSSProperties;
 	autoEscape?: boolean;
 	caseSensitive?: boolean;
 	children: string;
 	findChunks?: FindAllArgs[ 'findChunks' ];
 	highlightClassName?: string | Record< string, unknown >;
-	highlightStyle?: React.AllHTMLAttributes< HTMLDivElement >[ 'style' ];
-	highlightTag?: keyof JSX.IntrinsicElements;
+	highlightStyle?: React.CSSProperties;
+	highlightTag?: keyof React.JSX.IntrinsicElements;
 	sanitize?: FindAllArgs[ 'sanitize' ];
 	searchWords?: string[];
 	unhighlightClassName?: string;
-	unhighlightStyle?: React.AllHTMLAttributes< HTMLDivElement >[ 'style' ];
+	unhighlightStyle?: React.CSSProperties;
 }
 
 /**