@automattic/jetpack-shared-extension-utils 2.0.5 → 2.0.8

package/CHANGELOG.md

@@ -5,6 +5,19 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.8] - 2026-07-13
+### Changed
+- Internal updates.
+
+## [2.0.7] - 2026-07-09
+### Changed
+- Update package dependencies. [#49272]
+
+## [2.0.6] - 2026-07-06
+### Changed
+- Use store objects instead of string IDs. [#49810]
+- Update package dependencies. [#50097] [#50183]
+
 ## [2.0.5] - 2026-06-26
 ### Changed
 - Internal updates.
@@ -995,6 +1008,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Core: prepare utility for release
 
+[2.0.8]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/2.0.7...2.0.8
+[2.0.7]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/2.0.6...2.0.7
+[2.0.6]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/2.0.5...2.0.6
 [2.0.5]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/2.0.4...2.0.5
 [2.0.4]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/2.0.3...2.0.4
 [2.0.3]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/2.0.2...2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-shared-extension-utils",
-	"version": "2.0.5",
+	"version": "2.0.8",
 	"description": "Utility functions used by the block editor extensions",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/shared-extension-utils/#readme",
 	"bugs": {
@@ -16,7 +16,7 @@
 		".": "./index.js",
 		"./components": "./src/components/index.js",
 		"./components/wpcom-support-link": "./src/components/wpcom-support-link.jsx",
-		"./icons": "./src/icons.js",
+		"./icons": "./src/icons.jsx",
 		"./site-type-utils": "./src/site-type-utils.js",
 		"./store/wordpress-com": "./src/store/wordpress-com/index.ts",
 		"./store/wordpress-com/types": "./src/store/wordpress-com/types.ts"
@@ -29,27 +29,28 @@
 	"dependencies": {
 		"@automattic/color-studio": "4.1.0",
 		"@automattic/jetpack-analytics": "^1.0.15",
-		"@automattic/jetpack-base-styles": "^1.2.7",
-		"@automattic/jetpack-components": "^1.12.13",
-		"@automattic/jetpack-connection": "^1.4.66",
-		"@automattic/jetpack-script-data": "^0.6.4",
-		"@automattic/jetpack-shared-stores": "^0.1.2",
+		"@automattic/jetpack-base-styles": "^1.2.9",
+		"@automattic/jetpack-components": "^1.12.16",
+		"@automattic/jetpack-connection": "^2.0.1",
+		"@automattic/jetpack-script-data": "^0.6.5",
+		"@automattic/jetpack-shared-stores": "^0.1.5",
 		"@types/jest": "30.0.0",
-		"@wordpress/api-fetch": "7.48.1",
-		"@wordpress/block-editor": "15.21.1",
-		"@wordpress/components": "35.0.1",
-		"@wordpress/compose": "8.1.1",
-		"@wordpress/data": "10.48.1",
-		"@wordpress/dom-ready": "4.48.1",
-		"@wordpress/element": "8.0.1",
-		"@wordpress/hooks": "4.48.1",
-		"@wordpress/i18n": "6.21.1",
-		"@wordpress/plugins": "7.48.1",
-		"@wordpress/primitives": "4.48.1",
-		"@wordpress/ui": "0.13.0",
-		"@wordpress/url": "4.48.1",
+		"@wordpress/api-fetch": "7.50.0",
+		"@wordpress/block-editor": "15.23.0",
+		"@wordpress/components": "36.1.0",
+		"@wordpress/compose": "8.3.0",
+		"@wordpress/data": "10.50.0",
+		"@wordpress/dom-ready": "4.50.0",
+		"@wordpress/element": "8.2.0",
+		"@wordpress/hooks": "4.50.0",
+		"@wordpress/i18n": "6.23.0",
+		"@wordpress/plugins": "7.50.0",
+		"@wordpress/primitives": "4.50.0",
+		"@wordpress/ui": "0.17.0",
+		"@wordpress/url": "4.50.0",
 		"clsx": "2.1.1",
-		"debug": "4.4.3"
+		"debug": "4.4.3",
+		"social-logos": "^3.3.17"
 	},
 	"devDependencies": {
 		"@automattic/jetpack-webpack-config": "workspace:*",
@@ -58,6 +59,7 @@
 		"@testing-library/dom": "10.4.1",
 		"@testing-library/react": "16.3.2",
 		"@testing-library/user-event": "14.6.1",
+		"@types/react": "18.3.28",
 		"@typescript/native-preview": "7.0.0-dev.20260225.1",
 		"babel-jest": "30.4.1",
 		"jest": "30.4.2",

package/src/components/jetpack-editor-panel-logo/index.jsx

@@ -10,7 +10,7 @@ import './style.scss';
  * Returns null when panel branding is disabled via the
  * `jetpack_show_editor_panel_branding` PHP filter.
  *
- * @return {import('react').Component|null} Jetpack logo component or null
+ * @return {import('react').JSX.Element|null} Jetpack logo component or null
  */
 const JetpackEditorPanelLogo = () => {
 	const branding = getScriptData()?.jetpack?.flags?.showJetpackBranding;

package/src/components/wpcom-support-link.jsx

@@ -3,17 +3,22 @@ import { Link } from '@wordpress/ui';
 import { forwardRef } from 'react';
 
 /**
- * Renders a link that opens a WP.com support article in the Help Center.
- *
- * @param {object}                    props               - The component props.
- * @param {string}                    props.supportLink   - Support link URL.
- * @param {number}                    props.supportPostId - Support post ID.
- * @param {import('react').Component} props.children      - Support link content.
- * @param {Function}                  [props.onClick]     - Callback function to be called when the link is clicked.
- * @param {object}                    [props.style]       - CSS properties to be applied to the link.
- * @return {import('react').JSX.Element} The component to render.
+ * @typedef {object} WpcomSupportLinkProps
+ * @property {string}                    supportLink   - Support link URL.
+ * @property {number}                    supportPostId - Support post ID.
+ * @property {import('react').ReactNode} [children]    - Support link content.
+ * @property {Function}                  [onClick]     - Callback function to be called when the link is clicked.
+ * @property {object}                    [style]       - CSS properties to be applied to the link.
  */
+
 export const WpcomSupportLink = forwardRef(
+	/**
+	 * Renders a link that opens a WP.com support article in the Help Center.
+	 *
+	 * @param {WpcomSupportLinkProps}                  props - The component props.
+	 * @param {import('react').Ref<HTMLAnchorElement>} ref   - Forwarded ref.
+	 * @return {import('react').JSX.Element} The component to render.
+	 */
 	( { supportLink, supportPostId, children, onClick, style }, ref ) => {
 		const helpCenterDispatch = useDispatch( 'automattic/help-center' );
 		const setShowSupportDoc = helpCenterDispatch?.setShowSupportDoc;

package/src/hooks/use-module-status/index.js

@@ -1,4 +1,4 @@
-import { JETPACK_MODULES_STORE_ID } from '@automattic/jetpack-shared-stores';
+import { store as jetpackModulesStore } from '@automattic/jetpack-shared-stores';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useMemo, useCallback } from '@wordpress/element';
 
@@ -19,7 +19,7 @@ import { useMemo, useCallback } from '@wordpress/element';
 const useModuleStatus = name => {
 	const { isModuleActive, isChangingStatus, isLoadingModules } = useSelect(
 		selectData => {
-			const data = selectData( JETPACK_MODULES_STORE_ID );
+			const data = selectData( jetpackModulesStore );
 			return {
 				isModuleActive: data.isModuleActive( name ),
 				isChangingStatus: data.isModuleUpdating( name ),
@@ -29,7 +29,7 @@ const useModuleStatus = name => {
 		[ name ]
 	);
 
-	const { updateJetpackModuleStatus } = useDispatch( JETPACK_MODULES_STORE_ID );
+	const { updateJetpackModuleStatus } = useDispatch( jetpackModulesStore );
 
 	const changeStatus = useCallback(
 		value =>

package/src/{icons.js → icons.jsx}

@@ -1,6 +1,7 @@
 import colorStudio from '@automattic/color-studio';
 import { G, Path, Polygon, Rect, SVG, Circle } from '@wordpress/components';
 import clsx from 'clsx';
+import 'social-logos/colors.css';
 
 import './icons.scss';
 

package/src/icons.scss

@@ -4,22 +4,22 @@
 	fill: gb.$gray-700;
 
 	&.is-facebook {
-		fill: var(--color-facebook);
+		fill: var(--jetpack-social-logo-color-facebook);
 	}
 
 	&.is-twitter {
-		fill: var(--color-twitter);
+		fill: var(--jetpack-social-logo-color-twitter);
 	}
 
 	&.is-linkedin {
-		fill: var(--color-linkedin);
+		fill: var(--jetpack-social-logo-color-linkedin);
 	}
 
 	&.is-tumblr {
-		fill: var(--color-tumblr);
+		fill: var(--jetpack-social-logo-color-tumblr);
 	}
 
 	&.is-google {
-		fill: var(--color-gplus);
+		fill: var(--jetpack-social-logo-color-google-plus);
 	}
 }