@automattic/jetpack-components 1.4.14 → 1.4.16

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.4.16] - 2026-02-26
+### Changed
+- Container: Adjust maximum width to 1040px. [#47308]
+- Update package dependencies. [#47285] [#47300] [#47309]
+
+### Fixed
+- Button: Loosen `ref` type from `HTMLInputElement` to `HTMLElement`. [#47300]
+- NavigatorModal: Guard against WordPress Modal dismisser mechanism to prevent the modal from being closed when an external modal (e.g. Image Studio) opens. [#47180]
+
+## [1.4.15] - 2026-02-23
+### Changed
+- Update dependencies.
+
 ## [1.4.14] - 2026-02-18
 ### Changed
 - Set `.repository.url` in `package.json` to the mirror repo rather than the monorepo. [#47149]
@@ -1659,6 +1672,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.4.16]: https://github.com/Automattic/jetpack-components/compare/1.4.15...1.4.16
+[1.4.15]: https://github.com/Automattic/jetpack-components/compare/1.4.14...1.4.15
 [1.4.14]: https://github.com/Automattic/jetpack-components/compare/1.4.13...1.4.14
 [1.4.13]: https://github.com/Automattic/jetpack-components/compare/1.4.12...1.4.13
 [1.4.12]: https://github.com/Automattic/jetpack-components/compare/1.4.11...1.4.12

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

@@ -5,5 +5,5 @@ import type { ButtonProps } from './types.ts';
  * @param {ButtonProps} props - Component Props
  * @return {ReactNode} Rendered button
  */
-declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
 export default Button;

package/build/components/layout/container/style.module.scss

@@ -8,11 +8,12 @@
 	@include breakpoints.media(#{$size}) using ($columns) {
 		padding: 0 #{$padding};
 		grid-template-columns: repeat(#{$columns}, minmax(0, 1fr));
+		max-width: calc(var(--max-container-width) + 2 * #{$padding});
 	}
 }
 
 .container {
-	--max-container-width: 1128px;
+	--max-container-width: 1040px;
 	// vertical spacing
 	--vertical-gutter: 24px;
 	// horizontal spacing
@@ -20,7 +21,6 @@
 
 	display: grid;
 	column-gap: var(--vertical-gutter);
-	max-width: var(--max-container-width);
 	margin: 0 auto;
 	width: 100%;
 

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Modal, Navigator } from '@wordpress/components';
 import clsx from 'clsx';
-import { useContext } from 'react';
+import { useCallback, useContext } from 'react';
 import { NavigatorModalContext } from "./context.js";
 import { Screen } from "./screen.js";
 import './styles.scss';
@@ -13,8 +13,19 @@ import './styles.scss';
  * @return Component
  */
 function InternalNavigatorModal({ children, className, ...props }) {
-    const context = useContext(NavigatorModalContext);
-    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 }) }));
+    const { onClose, initialPath } = useContext(NavigatorModalContext);
+    // WordPress Modal's dismisser mechanism (ModalContext) calls onRequestClose()
+    // without arguments when another non-nested Modal mounts. We guard against
+    // this so that external modals (e.g. Image Studio) don't destroy this one.
+    // User-initiated closes (Escape, close button) always pass an event.
+    // The NavigatorModal's own Header/Footer close buttons call context.onClose
+    // directly and are unaffected by this guard.
+    const onRequestClose = useCallback((event) => {
+        if (event) {
+            onClose?.();
+        }
+    }, [onClose]);
+    return (_jsx(Modal, { __experimentalHideHeader: true, onRequestClose: onRequestClose, className: clsx('jp-navigator-modal', className), ...props, children: _jsx(Navigator, { initialPath: initialPath, className: "jp-navigator-modal__navigator", children: children }) }));
 }
 /**
  * Renders a modal with navigator capabilities.

package/components/button/index.tsx

@@ -12,7 +12,7 @@ import type { ButtonProps } from './types.ts';
  * @param {ButtonProps} props - Component Props
  * @return {ReactNode} Rendered button
  */
-const Button = forwardRef< HTMLInputElement, ButtonProps >( ( props, ref ) => {
+const Button = forwardRef< HTMLElement, ButtonProps >( ( props, ref ) => {
 	const {
 		children,
 		variant = 'primary',

package/components/layout/container/style.module.scss

@@ -8,11 +8,12 @@
 	@include breakpoints.media(#{$size}) using ($columns) {
 		padding: 0 #{$padding};
 		grid-template-columns: repeat(#{$columns}, minmax(0, 1fr));
+		max-width: calc(var(--max-container-width) + 2 * #{$padding});
 	}
 }
 
 .container {
-	--max-container-width: 1128px;
+	--max-container-width: 1040px;
 	// vertical spacing
 	--vertical-gutter: 24px;
 	// horizontal spacing
@@ -20,7 +21,6 @@
 
 	display: grid;
 	column-gap: var(--vertical-gutter);
-	max-width: var(--max-container-width);
 	margin: 0 auto;
 	width: 100%;
 

package/components/navigator-modal/index.tsx

@@ -1,6 +1,6 @@
 import { Modal, Navigator } from '@wordpress/components';
 import clsx from 'clsx';
-import { useContext } from 'react';
+import { useCallback, useContext } from 'react';
 import { NavigatorModalContext } from './context.ts';
 import { Screen } from './screen.tsx';
 import './styles.scss';
@@ -23,16 +23,31 @@ function InternalNavigatorModal( {
 	className,
 	...props
 }: Omit< ModalProps, 'onRequestClose' > ) {
-	const context = useContext( NavigatorModalContext );
+	const { onClose, initialPath } = useContext( NavigatorModalContext );
+
+	// WordPress Modal's dismisser mechanism (ModalContext) calls onRequestClose()
+	// without arguments when another non-nested Modal mounts. We guard against
+	// this so that external modals (e.g. Image Studio) don't destroy this one.
+	// User-initiated closes (Escape, close button) always pass an event.
+	// The NavigatorModal's own Header/Footer close buttons call context.onClose
+	// directly and are unaffected by this guard.
+	const onRequestClose = useCallback(
+		( event?: React.SyntheticEvent ) => {
+			if ( event ) {
+				onClose?.();
+			}
+		},
+		[ onClose ]
+	);
 
 	return (
 		<Modal
 			__experimentalHideHeader
-			onRequestClose={ context.onClose }
+			onRequestClose={ onRequestClose }
 			className={ clsx( 'jp-navigator-modal', className ) }
 			{ ...props }
 		>
-			<Navigator initialPath={ context.initialPath } className="jp-navigator-modal__navigator">
+			<Navigator initialPath={ initialPath } className="jp-navigator-modal__navigator">
 				{ children }
 			</Navigator>
 		</Modal>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.4.14",
+	"version": "1.4.16",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -45,47 +45,47 @@
 	],
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-api": "^1.0.17",
-		"@automattic/jetpack-boost-score-api": "^1.0.30",
-		"@automattic/jetpack-script-data": "^0.5.5",
-		"@automattic/number-formatters": "^1.0.18",
+		"@automattic/jetpack-api": "^1.0.18",
+		"@automattic/jetpack-boost-score-api": "^1.0.31",
+		"@automattic/jetpack-script-data": "^0.6.0",
+		"@automattic/number-formatters": "^1.1.0",
 		"@babel/runtime": "^7",
-		"@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",
+		"@wordpress/browserslist-config": "6.40.0",
+		"@wordpress/components": "32.2.0",
+		"@wordpress/compose": "7.40.0",
+		"@wordpress/data": "10.40.0",
+		"@wordpress/date": "5.40.0",
+		"@wordpress/element": "6.40.0",
+		"@wordpress/i18n": "6.13.0",
+		"@wordpress/icons": "11.7.0",
+		"@wordpress/notices": "5.40.0",
 		"clsx": "2.1.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.3.8",
+		"social-logos": "^3.3.10",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.0.17",
+		"@automattic/jetpack-base-styles": "^1.0.18",
 		"@babel/core": "7.29.0",
 		"@babel/preset-react": "7.28.5",
 		"@jest/globals": "30.2.0",
-		"@storybook/addon-docs": "10.2.3",
-		"@storybook/react": "10.2.3",
+		"@storybook/addon-docs": "10.2.11",
+		"@storybook/react": "10.2.11",
 		"@testing-library/dom": "10.4.1",
 		"@testing-library/react": "16.3.0",
 		"@testing-library/user-event": "14.6.1",
 		"@types/jest": "30.0.0",
-		"@types/react": "18.3.27",
+		"@types/react": "18.3.28",
 		"@types/react-dom": "18.3.7",
 		"@types/react-slider": "1.3.6",
 		"jest": "30.2.0",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"require-from-string": "2.0.2",
-		"storybook": "10.2.3",
+		"storybook": "10.2.11",
 		"ts-dedent": "2.2.0",
 		"typescript": "5.9.3",
 		"webpack": "5.105.2",