@automattic/jetpack-components 1.4.8 → 1.4.9

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.4.9] - 2026-02-02
+### Added
+- NavigatorModal: Allow passing all the props supported by underlying components. [#46856]
+
+### Changed
+- NavigatorModal: Allow customizing the modal via stable BEM class names. [#46818]
+- Update package dependencies. [#46854]
+
 ## [1.4.8] - 2026-01-26
 ### Changed
 - Update dependencies.
@@ -1624,6 +1632,7 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.4.9]: https://github.com/Automattic/jetpack-components/compare/1.4.8...1.4.9
 [1.4.8]: https://github.com/Automattic/jetpack-components/compare/1.4.7...1.4.8
 [1.4.7]: https://github.com/Automattic/jetpack-components/compare/1.4.6...1.4.7
 [1.4.6]: https://github.com/Automattic/jetpack-components/compare/1.4.5...1.4.6

package/build/components/button/index.js

@@ -22,7 +22,6 @@ const Button = forwardRef((props, ref) => {
         [styles['full-width']]: fullWidth,
         [styles['is-icon-button']]: Boolean(icon) && !children,
     });
-    componentProps.ref = ref;
     const externalIconSize = size === 'normal' ? 20 : 16;
     const externalIcon = isExternalLink && (_jsxs(_Fragment, { children: [_jsx(Icon, { size: externalIconSize, icon: external, className: styles['external-icon'] }), _jsx(VisuallyHidden, { as: "span", children: 
                 /* translators: accessibility text */
@@ -33,7 +32,21 @@ const Button = forwardRef((props, ref) => {
         children[0] !== null &&
         // Tooltip should not considered as a child
         children?.[0]?.props?.className !== 'components-tooltip';
-    return (_jsxs(WPButton, { target: externalTarget, variant: variant, className: clsx(className, { 'has-text': !!icon && hasChildren }), icon: !isExternalLink ? icon : undefined, iconSize: iconSize, disabled: disabled, "aria-disabled": disabled, isDestructive: isDestructive, text: text, ...componentProps, children: [isLoading && _jsx(Spinner, {}), _jsx("span", { children: children }), externalIcon] }));
+    // Cast to work around WPButton's strict union type that can't be satisfied when spreading props
+    const wpButtonProps = {
+        ref,
+        target: externalTarget,
+        variant,
+        className: clsx(className, { 'has-text': !!icon && hasChildren }),
+        icon: !isExternalLink ? icon : undefined,
+        iconSize,
+        disabled,
+        'aria-disabled': disabled,
+        isDestructive,
+        text,
+        ...componentProps,
+    };
+    return (_jsxs(WPButton, { ...wpButtonProps, children: [isLoading && _jsx(Spinner, {}), _jsx("span", { children: children }), externalIcon] }));
 });
 Button.displayName = 'Button';
 export default Button;

package/build/components/button/types.d.ts

@@ -1,5 +1,5 @@
 import { Button } from '@wordpress/components';
-import type { ComponentProps, ForwardedRef, ReactNode } from 'react';
+import type { ComponentProps, ForwardedRef, MouseEventHandler, ReactNode } from 'react';
 type JetpackButtonBaseProps = {
     className?: string;
     children?: ReactNode;
@@ -13,7 +13,10 @@ type JetpackButtonBaseProps = {
     weight?: 'bold' | 'regular';
     fullWidth?: boolean;
     ref?: ForwardedRef<unknown>;
+    href?: string;
+    target?: string;
+    onClick?: MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>;
 };
-type WPButtonProps = Omit<ComponentProps<typeof Button>, 'size' | 'variant'>;
-export type ButtonProps = JetpackButtonBaseProps & WPButtonProps;
+type WPButtonBaseProps = Omit<ComponentProps<typeof Button>, 'size' | 'variant' | 'disabled' | 'href' | 'target' | 'onClick'>;
+export type ButtonProps = JetpackButtonBaseProps & WPButtonBaseProps;
 export {};

package/build/components/icon-tooltip/index.js

@@ -40,7 +40,7 @@ const IconTooltip = ({ className = '', iconClassName = '', placement = 'bottom-e
         resize: false,
         flip: false,
         offset, // The distance (in px) between the anchor and the popover.
-        focusOnMount: 'container',
+        focusOnMount: 'firstElement',
         onClose: hideTooltip,
         className: 'icon-tooltip-container',
         inline,

package/build/components/navigator-modal/footer.d.ts

@@ -1,6 +1,5 @@
 import { Button } from '@wordpress/components';
-import { SharedProps } from './types.ts';
-export type FooterProps = SharedProps & {
+export type FooterProps = React.HTMLAttributes<HTMLDivElement> & {
     actions?: Array<((props: {
         navigate: VoidFunction;
     }) => React.ReactElement) | React.ComponentProps<typeof Button>>;
@@ -13,4 +12,4 @@ export type FooterProps = SharedProps & {
  *
  * @return The rendered footer.
  */
-export declare function Footer({ children, actions, isScreenLocked }: FooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function Footer({ children, actions, isScreenLocked, className, ...props }: FooterProps): import("react/jsx-runtime").JSX.Element;

package/build/components/navigator-modal/footer.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Flex, FlexBlock, FlexItem, useNavigator } from '@wordpress/components';
+import clsx from 'clsx';
 import { useCallback, useContext } from 'react';
 import { NavigatorModalContext } from "./context.js";
-import styles from './styles.module.scss';
 /**
  * Renders a footer.
  *
@@ -10,7 +10,7 @@ import styles from './styles.module.scss';
  *
  * @return The rendered footer.
  */
-export function Footer({ children, actions, isScreenLocked }) {
+export function Footer({ children, actions, isScreenLocked, className, ...props }) {
     const navigator = useNavigator();
     const context = useContext(NavigatorModalContext);
     const navigate = useCallback(() => {
@@ -21,14 +21,14 @@ export function Footer({ children, actions, isScreenLocked }) {
             context.onClose?.();
         }
     }, [isScreenLocked, navigator, context]);
-    return (_jsxs(Flex, { className: styles.footer, children: [_jsx(FlexBlock, { children: children }), actions ? (_jsx(FlexItem, { children: _jsx(Flex, { children: actions.map((props, index) => {
-                        if (typeof props === 'function') {
-                            return props({ navigate });
+    return (_jsxs(Flex, { className: clsx('jp-navigator-modal__footer', className), ...props, children: [_jsx(FlexBlock, { children: children }), actions ? (_jsx(FlexItem, { children: _jsx(Flex, { children: actions.map((action, index) => {
+                        if (typeof action === 'function') {
+                            return action({ navigate });
                         }
-                        return (_jsx(Button, { ...props, 
+                        return (_jsx(Button, { ...action, 
                             // eslint-disable-next-line react/jsx-no-bind
                             onClick: event => {
-                                props.onClick?.(event);
+                                action.onClick?.(event);
                                 navigate();
                             } }, index));
                     }) }) })) : null] }));

package/build/components/navigator-modal/header.js

@@ -4,7 +4,6 @@ import { __, isRTL } from '@wordpress/i18n';
 import { chevronLeft, chevronRight, close } from '@wordpress/icons';
 import { useCallback, useContext } from 'react';
 import { NavigatorModalContext } from "./context.js";
-import styles from './styles.module.scss';
 /**
  * Renders a header for the NavigatorModal.
  * @param {HeaderProps} props - Props
@@ -17,5 +16,5 @@ export function Header({ icon, title, isScreenLocked }) {
     const onGoBack = useCallback(() => {
         navigator.goBack();
     }, [navigator]);
-    return (_jsxs("div", { className: styles.header, children: [_jsxs("div", { className: styles['title-wrap'], children: [!isScreenLocked ? (_jsx(Button, { label: __('Go back', 'jetpack-components'), icon: isRTL() ? chevronRight : chevronLeft, onClick: onGoBack, variant: "tertiary", size: "compact" })) : null, icon, _jsx("h1", { children: title })] }), context.isDismissible ? (_jsx(Button, { size: "compact", onClick: context.onClose, icon: close, label: __('Close', 'jetpack-components'), variant: "tertiary" })) : null] }));
+    return (_jsxs("div", { className: "jp-navigator-modal__header", children: [_jsxs("div", { className: "jp-navigator-modal__title-wrap", children: [!isScreenLocked ? (_jsx(Button, { label: __('Go back', 'jetpack-components'), icon: isRTL() ? chevronRight : chevronLeft, onClick: onGoBack, variant: "tertiary", size: "compact" })) : null, icon, _jsx("h1", { children: title })] }), context.isDismissible ? (_jsx(Button, { size: "compact", onClick: context.onClose, icon: close, label: __('Close', 'jetpack-components'), variant: "tertiary" })) : null] }));
 }

package/build/components/navigator-modal/index.d.ts

@@ -1,13 +1,17 @@
+import { Modal } from '@wordpress/components';
 import { Screen } from './screen.tsx';
-import { TNavigatorModalContext, SharedProps } from './types.ts';
+import './styles.scss';
+import { TNavigatorModalContext } from './types.ts';
+type ModalProps = React.ComponentProps<typeof Modal>;
+type NavigatorModalProps = Omit<ModalProps, 'onRequestClose'> & TNavigatorModalContext;
 /**
  * Renders a modal with navigator capabilities.
  *
- * @param {SharedProps & TNavigatorModalContext} props - Props
+ * @param {NavigatorModalProps} props - Props
  *
  * @return Component
  */
-declare function NavigatorModalMain({ children, className, initialPath, onClose, isDismissible, }: SharedProps & TNavigatorModalContext): import("react/jsx-runtime").JSX.Element;
+declare function NavigatorModalMain({ children, className, initialPath, onClose, isDismissible, ...props }: NavigatorModalProps): import("react/jsx-runtime").JSX.Element;
 export declare const NavigatorModal: typeof NavigatorModalMain & {
     Screen: typeof Screen & {
         displayName: string;

package/build/components/navigator-modal/index.js

@@ -4,27 +4,27 @@ import clsx from 'clsx';
 import { useContext } from 'react';
 import { NavigatorModalContext } from "./context.js";
 import { Screen } from "./screen.js";
-import styles from './styles.module.scss';
+import './styles.scss';
 /**
  * Renders the internal NavigatorModal component.
  *
- * @param { SharedProps } props - Props
+ * @param { ModalProps } props - Props
  *
  * @return Component
  */
-function InternalNavigatorModal({ children, className }) {
+function InternalNavigatorModal({ children, className, ...props }) {
     const context = useContext(NavigatorModalContext);
-    return (_jsx(Modal, { __experimentalHideHeader: true, onRequestClose: context.onClose, className: clsx(styles.modal, className), children: _jsx(Navigator, { initialPath: context.initialPath, className: styles.navigator, children: children }) }));
+    return (_jsx(Modal, { __experimentalHideHeader: true, onRequestClose: context.onClose, className: clsx('jp-navigator-modal', className), ...props, children: _jsx(Navigator, { initialPath: context.initialPath, className: "jp-navigator-modal__navigator", children: children }) }));
 }
 /**
  * Renders a modal with navigator capabilities.
  *
- * @param {SharedProps & TNavigatorModalContext} props - Props
+ * @param {NavigatorModalProps} props - Props
  *
  * @return Component
  */
-function NavigatorModalMain({ children, className, initialPath = '/', onClose, isDismissible = true, }) {
-    return (_jsx(NavigatorModalContext.Provider, { value: { onClose, initialPath, isDismissible }, children: _jsx(InternalNavigatorModal, { className: className, children: children }) }));
+function NavigatorModalMain({ children, className, initialPath = '/', onClose, isDismissible = true, ...props }) {
+    return (_jsx(NavigatorModalContext.Provider, { value: { onClose, initialPath, isDismissible }, children: _jsx(InternalNavigatorModal, { className: className, ...props, children: children }) }));
 }
 export const NavigatorModal = Object.assign(NavigatorModalMain, {
     Screen: Object.assign(Screen, {

package/build/components/navigator-modal/screen.d.ts

@@ -1,5 +1,6 @@
+import { Navigator } from '@wordpress/components';
 import { FooterProps } from './footer.tsx';
-export type ScreenProps = {
+export type ScreenProps = Omit<React.ComponentProps<typeof Navigator.Screen>, 'content' | 'children'> & {
     /**
      * The title of the screen.
      */
@@ -34,17 +35,15 @@ export type ScreenProps = {
      * className to be applied to the modal.
      */
     className?: string;
-} & ({
     /**
      * The content of the screen.
      */
-    children: React.ReactNode;
-} | {
+    content?: React.ReactNode;
     /**
-     * The content of the screen.
+     * The children of the screen. Alternative to `content`.
      */
-    content: React.ReactNode;
-});
+    children?: React.ReactNode;
+};
 /**
  * Renders a screen.
  *
@@ -52,4 +51,4 @@ export type ScreenProps = {
  *
  * @return The rendered screen.
  */
-export declare function Screen({ path, className, title, sidebar, headerIcon, isScreenLocked, footerContent, footerActions, ...props }: ScreenProps): import("react/jsx-runtime").JSX.Element;
+export declare function Screen({ path, className, title, sidebar, headerIcon, isScreenLocked, footerContent, footerActions, children, content, ...props }: ScreenProps): import("react/jsx-runtime").JSX.Element;

package/build/components/navigator-modal/screen.js

@@ -3,7 +3,6 @@ import { Flex, Navigator } from '@wordpress/components';
 import clsx from 'clsx';
 import { Footer } from "./footer.js";
 import { Header } from "./header.js";
-import styles from './styles.module.scss';
 /**
  * Renders a screen.
  *
@@ -11,7 +10,7 @@ import styles from './styles.module.scss';
  *
  * @return The rendered screen.
  */
-export function Screen({ path, className, title, sidebar, headerIcon, isScreenLocked, footerContent, footerActions, ...props }) {
+export function Screen({ path, className, title, sidebar, headerIcon, isScreenLocked, footerContent, footerActions, children, content, ...props }) {
     const hasFooter = Boolean(footerContent || (footerActions && footerActions.length));
-    return (_jsx(Navigator.Screen, { path: path, className: clsx(styles.screen, className), children: _jsxs(Flex, { direction: "column", gap: 0, children: [_jsx(Header, { title: title, isScreenLocked: isScreenLocked, icon: headerIcon }), _jsxs(Flex, { gap: 0, align: "start", className: styles.body, children: [sidebar ? _jsx("div", { className: styles.sidebar, children: sidebar }) : null, _jsx("div", { className: styles.content, children: ('children' in props && props.children) || ('content' in props && props.content) })] }), hasFooter ? (_jsx(Footer, { actions: footerActions, isScreenLocked: isScreenLocked, children: footerContent })) : null] }) }));
+    return (_jsx(Navigator.Screen, { path: path, className: clsx('jp-navigator-modal__screen', className), ...props, children: _jsxs(Flex, { direction: "column", gap: 0, children: [_jsx(Header, { title: title, isScreenLocked: isScreenLocked, icon: headerIcon }), _jsxs(Flex, { gap: 0, align: "start", className: "jp-navigator-modal__body", children: [sidebar ? _jsx("div", { className: "jp-navigator-modal__sidebar", children: sidebar }) : null, _jsx("div", { className: "jp-navigator-modal__content", children: content ?? children })] }), hasFooter ? (_jsx(Footer, { actions: footerActions, isScreenLocked: isScreenLocked, children: footerContent })) : null] }) }));
 }

package/build/components/navigator-modal/types.d.ts

@@ -12,13 +12,3 @@ export type TNavigatorModalContext = {
      */
     onClose?: VoidFunction;
 };
-export type SharedProps = {
-    /**
-     * The content of the component.
-     */
-    children: React.ReactNode;
-    /**
-     * className to be applied to the modal.
-     */
-    className?: string;
-};

package/build/components/number-control/index.d.ts

@@ -3,8 +3,9 @@ export default NumberControl;
  * This uses the experimental NumberControl from the block
  * editor where available, otherwise it falls back to a
  * standard TextControl, limited to numbers.
+ * @type {import('react').ComponentType<any>}
  *
  * @param {any} props - the NumberControl component props
- * @return {object} - NumberControl component
+ * @return {import('react').ReactNode} - NumberControl component
  */
-declare const NumberControl: any;
+declare const NumberControl: import("react").ComponentType<any>;

package/build/components/number-control/index.js

@@ -5,9 +5,10 @@ TextControl, } from '@wordpress/components';
  * This uses the experimental NumberControl from the block
  * editor where available, otherwise it falls back to a
  * standard TextControl, limited to numbers.
+ * @type {import('react').ComponentType<any>}
  *
  * @param {any} props - the NumberControl component props
- * @return {object} - NumberControl component
+ * @return {import('react').ReactNode} - NumberControl component
  */
 const NumberControl = ExperimentalNumberControl ||
     function CustomNumberControl(props) {

package/build/components/pricing-card/types.d.ts

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import type { Button } from '@wordpress/components';
-import type { ComponentProps, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export type PricingCardProps = {
     /**
      * The Title.
@@ -35,7 +34,7 @@ export type PricingCardProps = {
     /**
      * The CTA callback to be called on click.
      */
-    onCtaClick?: ComponentProps<typeof Button>['onClick'];
+    onCtaClick?: React.MouseEventHandler<HTMLButtonElement>;
     /**
      * Optional informative text.
      */

package/build/components/split-button/index.js

@@ -3,6 +3,12 @@ import { Button, Flex, DropdownMenu } from '@wordpress/components';
 import styles from './style.module.scss';
 const DownIcon = () => (_jsx("svg", { width: "15", height: "9", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "10 9 4 7", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "m18.004 10.555-6.005 5.459-6.004-5.459 1.009-1.11 4.995 4.542 4.996-4.542 1.009 1.11Z" }) }));
 const SplitButton = ({ variant, controls, popoverProps, toggleProps, label, ...buttonProps }) => {
-    return (_jsx(Flex, { className: styles['split-button'], children: _jsxs("div", { role: "group", className: "components-button-group", children: [_jsx(Button, { variant: variant, ...buttonProps, className: styles.button }), _jsx(DropdownMenu, { toggleProps: { variant, className: styles.button, ...toggleProps }, popoverProps: { noArrow: false, ...popoverProps }, icon: _jsx(DownIcon, {}), disableOpenOnArrowDown: true, controls: controls, label: label })] }) }));
+    // Cast to work around WPButton's strict union type
+    const wpButtonProps = {
+        variant,
+        className: styles.button,
+        ...buttonProps,
+    };
+    return (_jsx(Flex, { className: styles['split-button'], children: _jsxs("div", { role: "group", className: "components-button-group", children: [_jsx(Button, { ...wpButtonProps }), _jsx(DropdownMenu, { toggleProps: { variant, className: styles.button, ...toggleProps }, popoverProps: { noArrow: false, ...popoverProps }, icon: _jsx(DownIcon, {}), disableOpenOnArrowDown: true, controls: controls, label: label })] }) }));
 };
 export default SplitButton;

package/components/button/index.tsx

@@ -5,7 +5,6 @@ import clsx from 'clsx';
 import { forwardRef } from 'react';
 import styles from './style.module.scss';
 import type { ButtonProps } from './types.ts';
-import type { ReactNode } from 'react';
 
 /**
  * Button component
@@ -41,8 +40,6 @@ const Button = forwardRef< HTMLInputElement, ButtonProps >( ( props, ref ) => {
 		[ styles[ 'is-icon-button' ] ]: Boolean( icon ) && ! children,
 	} );
 
-	componentProps.ref = ref;
-
 	const externalIconSize = size === 'normal' ? 20 : 16;
 	const externalIcon = isExternalLink && (
 		<>
@@ -64,19 +61,23 @@ const Button = forwardRef< HTMLInputElement, ButtonProps >( ( props, ref ) => {
 		// Tooltip should not considered as a child
 		children?.[ 0 ]?.props?.className !== 'components-tooltip';
 
+	// Cast to work around WPButton's strict union type that can't be satisfied when spreading props
+	const wpButtonProps = {
+		ref,
+		target: externalTarget,
+		variant,
+		className: clsx( className, { 'has-text': !! icon && hasChildren } ),
+		icon: ! isExternalLink ? icon : undefined,
+		iconSize,
+		disabled,
+		'aria-disabled': disabled,
+		isDestructive,
+		text,
+		...componentProps,
+	} as React.ComponentProps< typeof WPButton >;
+
 	return (
-		<WPButton
-			target={ externalTarget }
-			variant={ variant }
-			className={ clsx( className, { 'has-text': !! icon && hasChildren } ) }
-			icon={ ! isExternalLink ? icon : undefined }
-			iconSize={ iconSize }
-			disabled={ disabled }
-			aria-disabled={ disabled }
-			isDestructive={ isDestructive }
-			text={ text }
-			{ ...componentProps }
-		>
+		<WPButton { ...wpButtonProps }>
 			{ isLoading && <Spinner /> }
 			<span>{ children }</span>
 			{ externalIcon }

package/components/button/types.ts

@@ -1,5 +1,5 @@
 import { Button } from '@wordpress/components';
-import type { ComponentProps, ForwardedRef, ReactNode } from 'react';
+import type { ComponentProps, ForwardedRef, MouseEventHandler, ReactNode } from 'react';
 
 type JetpackButtonBaseProps = {
 	className?: string;
@@ -14,8 +14,16 @@ type JetpackButtonBaseProps = {
 	weight?: 'bold' | 'regular';
 	fullWidth?: boolean;
 	ref?: ForwardedRef< unknown >;
+	href?: string;
+	target?: string;
+	onClick?: MouseEventHandler< HTMLButtonElement > | MouseEventHandler< HTMLAnchorElement >;
 };
 
-type WPButtonProps = Omit< ComponentProps< typeof Button >, 'size' | 'variant' >;
+// Extract base props from WordPress Button, omitting the union-discriminated properties
+// that cause type conflicts (size, variant, disabled, href)
+type WPButtonBaseProps = Omit<
+	ComponentProps< typeof Button >,
+	'size' | 'variant' | 'disabled' | 'href' | 'target' | 'onClick'
+>;
 
-export type ButtonProps = JetpackButtonBaseProps & WPButtonProps;
+export type ButtonProps = JetpackButtonBaseProps & WPButtonBaseProps;

package/components/copy-to-clipboard/index.tsx

@@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n';
 import Button from '../button/index.tsx';
 import { ClipboardIcon, CheckmarkIcon } from '../icons/index.tsx';
 import { CopyToClipboardProps } from './types.ts';
-import type { FC, ReactNode } from 'react';
+import type { FC } from 'react';
 
 export const CopyToClipboard: FC< CopyToClipboardProps > = ( {
 	buttonStyle = 'icon',
@@ -40,8 +40,8 @@ export const CopyToClipboard: FC< CopyToClipboardProps > = ( {
 		};
 	}, [] );
 
-	let icon: ReactNode = null;
-	let label: ReactNode = null;
+	let icon: JSX.Element = null;
+	let label: string = null;
 
 	if ( 'text' !== buttonStyle ) {
 		icon = hasCopied ? <CheckmarkIcon /> : <ClipboardIcon />;

package/components/icon-tooltip/index.tsx

@@ -64,12 +64,12 @@ const IconTooltip: FC< IconTooltipProps > = ( {
 		resize: false,
 		flip: false,
 		offset, // The distance (in px) between the anchor and the popover.
-		focusOnMount: 'container' as const,
+		focusOnMount: 'firstElement',
 		onClose: hideTooltip,
 		className: 'icon-tooltip-container',
 		inline,
 		shift,
-	};
+	} satisfies Omit< React.ComponentProps< typeof Popover >, 'children' >;
 
 	const isAnchorWrapper = popoverAnchorStyle === 'wrapper';
 

package/components/navigator-modal/footer.tsx

@@ -1,10 +1,9 @@
 import { Button, Flex, FlexBlock, FlexItem, useNavigator } from '@wordpress/components';
+import clsx from 'clsx';
 import { useCallback, useContext } from 'react';
 import { NavigatorModalContext } from './context.ts';
-import styles from './styles.module.scss';
-import { SharedProps } from './types.ts';
 
-export type FooterProps = SharedProps & {
+export type FooterProps = React.HTMLAttributes< HTMLDivElement > & {
 	actions?: Array<
 		| ( ( props: { navigate: VoidFunction } ) => React.ReactElement )
 		| React.ComponentProps< typeof Button >
@@ -19,7 +18,7 @@ export type FooterProps = SharedProps & {
  *
  * @return The rendered footer.
  */
-export function Footer( { children, actions, isScreenLocked }: FooterProps ) {
+export function Footer( { children, actions, isScreenLocked, className, ...props }: FooterProps ) {
 	const navigator = useNavigator();
 	const context = useContext( NavigatorModalContext );
 
@@ -32,23 +31,23 @@ export function Footer( { children, actions, isScreenLocked }: FooterProps ) {
 	}, [ isScreenLocked, navigator, context ] );
 
 	return (
-		<Flex className={ styles.footer }>
+		<Flex className={ clsx( 'jp-navigator-modal__footer', className ) } { ...props }>
 			<FlexBlock>{ children }</FlexBlock>
 			{ actions ? (
 				<FlexItem>
 					<Flex>
-						{ actions.map( ( props, index ) => {
-							if ( typeof props === 'function' ) {
-								return props( { navigate } );
+						{ actions.map( ( action, index ) => {
+							if ( typeof action === 'function' ) {
+								return action( { navigate } );
 							}
 
 							return (
 								<Button
 									key={ index }
-									{ ...props }
+									{ ...action }
 									// eslint-disable-next-line react/jsx-no-bind
 									onClick={ event => {
-										props.onClick?.( event );
+										action.onClick?.( event );
 										navigate();
 									} }
 								/>

package/components/navigator-modal/header.tsx

@@ -3,7 +3,6 @@ import { __, isRTL } from '@wordpress/i18n';
 import { chevronLeft, chevronRight, close } from '@wordpress/icons';
 import { useCallback, useContext } from 'react';
 import { NavigatorModalContext } from './context.ts';
-import styles from './styles.module.scss';
 
 export type HeaderProps = {
 	/**
@@ -35,8 +34,8 @@ export function Header( { icon, title, isScreenLocked }: HeaderProps ) {
 	}, [ navigator ] );
 
 	return (
-		<div className={ styles.header }>
-			<div className={ styles[ 'title-wrap' ] }>
+		<div className="jp-navigator-modal__header">
+			<div className="jp-navigator-modal__title-wrap">
 				{ ! isScreenLocked ? (
 					<Button
 						label={ __( 'Go back', 'jetpack-components' ) }

package/components/navigator-modal/index.tsx

@@ -3,26 +3,36 @@ import clsx from 'clsx';
 import { useContext } from 'react';
 import { NavigatorModalContext } from './context.ts';
 import { Screen } from './screen.tsx';
-import styles from './styles.module.scss';
-import { TNavigatorModalContext, SharedProps } from './types.ts';
+import './styles.scss';
+import { TNavigatorModalContext } from './types.ts';
+
+type ModalProps = React.ComponentProps< typeof Modal >;
+
+// Omit onRequestClose since NavigatorModal uses onClose from TNavigatorModalContext instead
+type NavigatorModalProps = Omit< ModalProps, 'onRequestClose' > & TNavigatorModalContext;
 
 /**
  * Renders the internal NavigatorModal component.
  *
- * @param { SharedProps } props - Props
+ * @param { ModalProps } props - Props
  *
  * @return Component
  */
-function InternalNavigatorModal( { children, className }: SharedProps ) {
+function InternalNavigatorModal( {
+	children,
+	className,
+	...props
+}: Omit< ModalProps, 'onRequestClose' > ) {
 	const context = useContext( NavigatorModalContext );
 
 	return (
 		<Modal
 			__experimentalHideHeader
 			onRequestClose={ context.onClose }
-			className={ clsx( styles.modal, className ) }
+			className={ clsx( 'jp-navigator-modal', className ) }
+			{ ...props }
 		>
-			<Navigator initialPath={ context.initialPath } className={ styles.navigator }>
+			<Navigator initialPath={ context.initialPath } className="jp-navigator-modal__navigator">
 				{ children }
 			</Navigator>
 		</Modal>
@@ -32,7 +42,7 @@ function InternalNavigatorModal( { children, className }: SharedProps ) {
 /**
  * Renders a modal with navigator capabilities.
  *
- * @param {SharedProps & TNavigatorModalContext} props - Props
+ * @param {NavigatorModalProps} props - Props
  *
  * @return Component
  */
@@ -42,10 +52,13 @@ function NavigatorModalMain( {
 	initialPath = '/',
 	onClose,
 	isDismissible = true,
-}: SharedProps & TNavigatorModalContext ) {
+	...props
+}: NavigatorModalProps ) {
 	return (
 		<NavigatorModalContext.Provider value={ { onClose, initialPath, isDismissible } }>
-			<InternalNavigatorModal className={ className }>{ children }</InternalNavigatorModal>
+			<InternalNavigatorModal className={ className } { ...props }>
+				{ children }
+			</InternalNavigatorModal>
 		</NavigatorModalContext.Provider>
 	);
 }

package/components/navigator-modal/screen.tsx

@@ -2,9 +2,11 @@ import { Flex, Navigator } from '@wordpress/components';
 import clsx from 'clsx';
 import { Footer, FooterProps } from './footer.tsx';
 import { Header } from './header.tsx';
-import styles from './styles.module.scss';
 
-export type ScreenProps = {
+export type ScreenProps = Omit<
+	React.ComponentProps< typeof Navigator.Screen >,
+	'content' | 'children'
+> & {
 	/**
 	 * The title of the screen.
 	 */
@@ -43,20 +45,17 @@ export type ScreenProps = {
 	 * className to be applied to the modal.
 	 */
 	className?: string;
-} & (
-	| {
-			/**
-			 * The content of the screen.
-			 */
-			children: React.ReactNode;
-	  }
-	| {
-			/**
-			 * The content of the screen.
-			 */
-			content: React.ReactNode;
-	  }
-);
+
+	/**
+	 * The content of the screen.
+	 */
+	content?: React.ReactNode;
+
+	/**
+	 * The children of the screen. Alternative to `content`.
+	 */
+	children?: React.ReactNode;
+};
 
 /**
  * Renders a screen.
@@ -74,20 +73,24 @@ export function Screen( {
 	isScreenLocked,
 	footerContent,
 	footerActions,
+	children,
+	content,
 	...props
 }: ScreenProps ) {
 	const hasFooter = Boolean( footerContent || ( footerActions && footerActions.length ) );
 
 	return (
-		<Navigator.Screen path={ path } className={ clsx( styles.screen, className ) }>
+		<Navigator.Screen
+			path={ path }
+			className={ clsx( 'jp-navigator-modal__screen', className ) }
+			{ ...props }
+		>
 			<Flex direction="column" gap={ 0 }>
 				<Header title={ title } isScreenLocked={ isScreenLocked } icon={ headerIcon } />
 
-				<Flex gap={ 0 } align="start" className={ styles.body }>
-					{ sidebar ? <div className={ styles.sidebar }>{ sidebar }</div> : null }
-					<div className={ styles.content }>
-						{ ( 'children' in props && props.children ) || ( 'content' in props && props.content ) }
-					</div>
+				<Flex gap={ 0 } align="start" className="jp-navigator-modal__body">
+					{ sidebar ? <div className="jp-navigator-modal__sidebar">{ sidebar }</div> : null }
+					<div className="jp-navigator-modal__content">{ content ?? children }</div>
 				</Flex>
 				{ hasFooter ? (
 					<Footer actions={ footerActions } isScreenLocked={ isScreenLocked }>

package/components/navigator-modal/{styles.module.scss → styles.scss}

@@ -1,37 +1,36 @@
 @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
 
-.modal {
+.components-modal__screen-overlay:has(.jp-navigator-modal) {
+	z-index: 99999; // Slightly lower than snackbar z-index (100001) so snackbars remain visible above the modal
+}
+
+.jp-navigator-modal {
 	container-type: inline-size;
 	container-name: navigator-modal;
-
-	:global(.components-modal__screen-overlay):has(&) {
-		z-index: 99999; // Slightly lower than snackbar z-index (100001) so snackbars remain visible above the modal
-	}
-
 	width: 100%;
 
 	@include gb.break-medium() {
 		max-height: 90%;
 	}
 
-	:global(.components-modal__content) {
+	.components-modal__content {
 		padding: 0;
 
 		> div {
 			height: 100%;
 		}
 	}
-}
 
-.navigator {
-	height: 100%;
-}
+	&__navigator {
+		height: 100%;
+	}
 
-.screen {
-	height: 100%;
-	padding: 0;
+	&__screen {
+		height: 100%;
+		padding: 0;
+	}
 
-	.header {
+	&__header {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
@@ -40,12 +39,6 @@
 		border-bottom: 1px solid gb.$gray-200;
 		flex-shrink: 0;
 
-		.title-wrap {
-			display: flex;
-			align-items: center;
-			gap: 1rem;
-		}
-
 		h1 {
 			margin: 0;
 			font-size: 15px;
@@ -55,55 +48,51 @@
 		}
 	}
 
-	.body {
+	&__title-wrap {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+	}
+
+	&__body {
 		height: 100%;
 		overflow: auto;
 		flex-direction: column;
 
 		@container navigator-modal (width >= #{gb.$break-small}) {
-
-			& {
-				flex-direction: row;
-			}
+			flex-direction: row;
 		}
 	}
 
-	.sidebar {
+	&__sidebar {
 		width: 100%;
 		display: flex;
 		flex-direction: column;
 		gap: 1.5rem;
 
 		@container navigator-modal (width >= #{gb.$break-small}) {
-
-			& {
-				flex-basis: 30%;
-				height: 100%;
-				flex-shrink: 0;
-				border-inline-end: 1px solid gb.$gray-300;
-				overflow: auto;
-			}
+			flex-basis: 30%;
+			height: 100%;
+			flex-shrink: 0;
+			border-inline-end: 1px solid gb.$gray-300;
+			overflow: auto;
 		}
 	}
 
-	.content {
+	&__content {
 		width: 100%;
 		height: 100%;
 		flex: 1;
 
 		@container navigator-modal (width >= #{gb.$break-small}) {
-
-			& {
-				overflow: auto;
-			}
+			overflow: auto;
 		}
 	}
 
-	.footer {
+	&__footer {
 		padding: 1rem 1.5rem;
 		border-top: 1px solid gb.$gray-300;
 		height: 4.5rem;
 		flex-shrink: 0;
 	}
-
 }

package/components/navigator-modal/types.ts

@@ -13,15 +13,3 @@ export type TNavigatorModalContext = {
 	 */
 	onClose?: VoidFunction;
 };
-
-export type SharedProps = {
-	/**
-	 * The content of the component.
-	 */
-	children: React.ReactNode;
-
-	/**
-	 * className to be applied to the modal.
-	 */
-	className?: string;
-};

package/components/number-control/index.jsx

@@ -7,9 +7,10 @@ import {
  * This uses the experimental NumberControl from the block
  * editor where available, otherwise it falls back to a
  * standard TextControl, limited to numbers.
+ * @type {import('react').ComponentType<any>}
  *
  * @param {any} props - the NumberControl component props
- * @return {object} - NumberControl component
+ * @return {import('react').ReactNode} - NumberControl component
  */
 const NumberControl =
 	ExperimentalNumberControl ||

package/components/pricing-card/types.ts

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import type { Button } from '@wordpress/components';
-import type { ComponentProps, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 export type PricingCardProps = {
 	/**
@@ -36,7 +35,7 @@ export type PricingCardProps = {
 	/**
 	 * The CTA callback to be called on click.
 	 */
-	onCtaClick?: ComponentProps< typeof Button >[ 'onClick' ];
+	onCtaClick?: React.MouseEventHandler< HTMLButtonElement >;
 	/**
 	 * Optional informative text.
 	 */

package/components/split-button/index.tsx

@@ -21,10 +21,17 @@ const SplitButton: FC< SplitButtonProps > = ( {
 	label,
 	...buttonProps
 } ) => {
+	// Cast to work around WPButton's strict union type
+	const wpButtonProps = {
+		variant,
+		className: styles.button,
+		...buttonProps,
+	} as React.ComponentProps< typeof Button >;
+
 	return (
 		<Flex className={ styles[ 'split-button' ] }>
 			<div role="group" className="components-button-group">
-				<Button variant={ variant } { ...buttonProps } className={ styles.button } />
+				<Button { ...wpButtonProps } />
 				<DropdownMenu
 					toggleProps={ { variant, className: styles.button, ...toggleProps } }
 					popoverProps={ { noArrow: false, ...popoverProps } }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.4.8",
+	"version": "1.4.9",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -45,20 +45,20 @@
 	],
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-api": "^1.0.15",
-		"@automattic/jetpack-boost-score-api": "^1.0.26",
+		"@automattic/jetpack-api": "^1.0.16",
+		"@automattic/jetpack-boost-score-api": "^1.0.27",
 		"@automattic/jetpack-script-data": "^0.5.4",
 		"@automattic/number-formatters": "^1.0.16",
 		"@babel/runtime": "^7",
-		"@wordpress/browserslist-config": "6.38.0",
-		"@wordpress/components": "32.0.0",
-		"@wordpress/compose": "7.38.0",
-		"@wordpress/data": "10.38.0",
-		"@wordpress/date": "5.38.0",
-		"@wordpress/element": "6.38.0",
-		"@wordpress/i18n": "6.11.0",
-		"@wordpress/icons": "11.5.0",
-		"@wordpress/notices": "5.38.0",
+		"@wordpress/browserslist-config": "6.39.0",
+		"@wordpress/components": "32.1.0",
+		"@wordpress/compose": "7.39.0",
+		"@wordpress/data": "10.39.0",
+		"@wordpress/date": "5.39.0",
+		"@wordpress/element": "6.39.0",
+		"@wordpress/i18n": "6.12.0",
+		"@wordpress/icons": "11.6.0",
+		"@wordpress/notices": "5.39.0",
 		"clsx": "2.1.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
@@ -68,7 +68,7 @@
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.0.14",
+		"@automattic/jetpack-base-styles": "^1.0.15",
 		"@babel/core": "7.28.4",
 		"@babel/preset-react": "7.27.1",
 		"@jest/globals": "30.2.0",