@wordpress/components 30.6.1-next.ff1cebbba.0 → 30.7.1-next.36001005c.0

package/build-style/style.css

@@ -257,6 +257,7 @@
   text-decoration: none;
   font-family: inherit;
   font-size: 13px;
+  font-weight: 499;
   margin: 0;
   border: 0;
   cursor: pointer;
@@ -436,6 +437,7 @@ p + .components-button.is-tertiary {
   background: none;
   outline: none;
   text-align: left;
+  font-weight: 400;
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   text-decoration: underline;
 }
@@ -535,6 +537,7 @@ p + .components-button.is-tertiary {
 .components-button svg {
   fill: currentColor;
   outline: none;
+  flex-shrink: 0;
 }
 @media (forced-colors: active) {
   .components-button svg {
@@ -1596,6 +1599,7 @@ body.is-dragging-components-draggable {
   outline: none;
   cursor: pointer;
   white-space: nowrap;
+  font-weight: 400;
 }
 .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator,
 .components-dropdown-menu__menu .components-menu-item.has-separator {
@@ -2142,13 +2146,14 @@ body.is-dragging-components-draggable {
   color: #757575;
   text-transform: uppercase;
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   white-space: nowrap;
 }
 
 .components-menu-item__button,
 .components-menu-item__button.components-button {
   width: 100%;
+  font-weight: 400;
 }
 .components-menu-item__button[role=menuitemradio] .components-menu-item__item:only-child, .components-menu-item__button[role=menuitemcheckbox] .components-menu-item__item:only-child,
 .components-menu-item__button.components-button[role=menuitemradio] .components-menu-item__item:only-child,
@@ -2594,7 +2599,7 @@ body.is-dragging-components-draggable {
   padding: 16px 48px 16px 16px;
   outline: none;
   width: 100%;
-  font-weight: 500;
+  font-weight: 499;
   text-align: left;
   color: #1e1e1e;
   border: none;
@@ -3421,7 +3426,7 @@ body.lockscroll {
   cursor: pointer;
   padding: 3px 16px;
   margin-left: 0;
-  font-weight: 500;
+  font-weight: 400;
 }
 .components-tab-panel__tabs-item:focus:not(:disabled) {
   position: relative;

package/build-types/color-palette/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/color-palette/styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,YAAY;;;;;;;;;UAQxB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/color-palette/styles.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,YAAY;;;;;;;;;UAQxB,CAAC"}

package/build-types/date-time/date/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/date-time/date/styles.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,OAAO;;SAO8B,MAC/C,WAAW;yGANb,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;UAMrB,CAAC;AAEF,eAAO,MAAM,uBAAuB;;UAEnC,CAAC;AAEF,eAAO,MAAM,mBAAmB;;UAE/B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;UAQ5B,CAAC;AAEF,eAAO,MAAM,QAAQ;;SAvB6B,MAC/C,WAAW;yGA4Bb,CAAC;AAEF,eAAO,MAAM,SAAS;;SA/B4B,MAC/C,WAAW;yGAkCb,CAAC;AAEF,eAAO,MAAM,SAAS;;;YAIb,MAAM;gBACF,OAAO;aACV,OAAO;eACL,OAAO;UAmElB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/date-time/date/styles.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,OAAO;;SAO8B,MAC/C,WAAW;yGANb,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;UAMrB,CAAC;AAEF,eAAO,MAAM,uBAAuB;;UAEnC,CAAC;AAEF,eAAO,MAAM,mBAAmB;;UAE/B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;UAQ5B,CAAC;AAEF,eAAO,MAAM,QAAQ;;SAvB6B,MAC/C,WAAW;yGA4Bb,CAAC;AAEF,eAAO,MAAM,SAAS;;SA/B4B,MAC/C,WAAW;yGAkCb,CAAC;AAEF,eAAO,MAAM,SAAS;;;YAIb,MAAM;gBACF,OAAO;aACV,OAAO;eACL,OAAO;UAoElB,CAAC"}

package/build-types/popover/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/popover/index.tsx"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,KAAK,EACX,YAAY,EAGZ,gBAAgB,EAChB,MAAM,SAAS,CAAC;AAIjB;;;;GAIG;AACH,eAAO,MAAM,SAAS,YAAY,CAAC;AAuanC,eAAO,MAAM,WAAW,6GAWvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,OAAO;IAGlB;;OAEG;;;;IAIH;;;;OAIG;;;;CAKJ,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/popover/index.tsx"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,KAAK,EACX,YAAY,EAGZ,gBAAgB,EAChB,MAAM,SAAS,CAAC;AAIjB;;;;GAIG;AACH,eAAO,MAAM,SAAS,YAAY,CAAC;AA4bnC,eAAO,MAAM,WAAW,6GAWvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,OAAO;IAGlB;;OAEG;;;;IAIH;;;;OAIG;;;;CAKJ,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/build-types/utils/base-label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-label.d.ts","sourceRoot":"","sources":["../../src/utils/base-label.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,mBAAmB,2CAK/B,CAAC"}
+{"version":3,"file":"base-label.d.ts","sourceRoot":"","sources":["../../src/utils/base-label.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,mBAAmB,2CAK/B,CAAC"}

package/build-types/utils/config-values.d.ts

@@ -37,6 +37,7 @@ declare const _default: {
     fontSizeXSmall: string;
     fontLineHeightBase: string;
     fontWeight: string;
+    fontWeightMedium: string;
     fontWeightHeading: string;
     gridBase: string;
     cardPaddingXSmall: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "30.6.1-next.ff1cebbba.0",
+	"version": "30.7.1-next.36001005c.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -54,24 +54,24 @@
 		"@types/gradient-parser": "1.1.0",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.32.1-next.ff1cebbba.0",
-		"@wordpress/base-styles": "^6.8.1-next.ff1cebbba.0",
-		"@wordpress/compose": "^7.32.1-next.ff1cebbba.0",
-		"@wordpress/date": "^5.32.1-next.ff1cebbba.0",
-		"@wordpress/deprecated": "^4.32.1-next.ff1cebbba.0",
-		"@wordpress/dom": "^4.32.1-next.ff1cebbba.0",
-		"@wordpress/element": "^6.32.1-next.ff1cebbba.0",
-		"@wordpress/escape-html": "^3.32.1-next.ff1cebbba.0",
-		"@wordpress/hooks": "^4.32.1-next.ff1cebbba.0",
-		"@wordpress/html-entities": "^4.32.1-next.ff1cebbba.0",
-		"@wordpress/i18n": "^6.5.1-next.ff1cebbba.0",
-		"@wordpress/icons": "^11.0.1-next.ff1cebbba.0",
-		"@wordpress/is-shallow-equal": "^5.32.1-next.ff1cebbba.0",
-		"@wordpress/keycodes": "^4.32.1-next.ff1cebbba.0",
-		"@wordpress/primitives": "^4.32.1-next.ff1cebbba.0",
-		"@wordpress/private-apis": "^1.32.1-next.ff1cebbba.0",
-		"@wordpress/rich-text": "^7.32.1-next.ff1cebbba.0",
-		"@wordpress/warning": "^3.32.1-next.ff1cebbba.0",
+		"@wordpress/a11y": "^4.33.1-next.36001005c.0",
+		"@wordpress/base-styles": "^6.10.1-next.36001005c.0",
+		"@wordpress/compose": "^7.33.1-next.36001005c.0",
+		"@wordpress/date": "^5.33.1-next.36001005c.0",
+		"@wordpress/deprecated": "^4.33.1-next.36001005c.0",
+		"@wordpress/dom": "^4.33.1-next.36001005c.0",
+		"@wordpress/element": "^6.33.1-next.36001005c.0",
+		"@wordpress/escape-html": "^3.33.1-next.36001005c.0",
+		"@wordpress/hooks": "^4.33.1-next.36001005c.0",
+		"@wordpress/html-entities": "^4.33.1-next.36001005c.0",
+		"@wordpress/i18n": "^6.6.1-next.36001005c.0",
+		"@wordpress/icons": "^11.0.1-next.36001005c.0",
+		"@wordpress/is-shallow-equal": "^5.33.1-next.36001005c.0",
+		"@wordpress/keycodes": "^4.33.1-next.36001005c.0",
+		"@wordpress/primitives": "^4.33.1-next.36001005c.0",
+		"@wordpress/private-apis": "^1.33.1-next.36001005c.0",
+		"@wordpress/rich-text": "^7.33.1-next.36001005c.0",
+		"@wordpress/warning": "^3.33.1-next.36001005c.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -97,5 +97,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c5b659710aff01d40d2eb97b211eb2cec9c07d3b"
+	"gitHead": "b73a8a22e779c59efb8f911e32b681652f237d60"
 }

package/src/button/style.scss

@@ -15,13 +15,14 @@
 	text-decoration: none;
 	font-family: inherit;
 	font-size: $default-font-size;
+	font-weight: $font-weight-medium;
 	margin: 0;
 	border: 0;
 	cursor: pointer;
 	-webkit-appearance: none;
 	background: none;
 
-	@media not (prefers-reduced-motion) {
+	@media not ( prefers-reduced-motion ) {
 		transition: box-shadow 0.1s linear;
 	}
 
@@ -251,6 +252,7 @@
 		background: none;
 		outline: none;
 		text-align: left;
+		font-weight: $font-weight-regular;
 		color: $components-color-accent;
 		text-decoration: underline;
 
@@ -385,6 +387,7 @@
 	svg {
 		fill: currentColor;
 		outline: none;
+		flex-shrink: 0;
 
 		// Optimize for high contrast modes.
 		// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.

package/src/color-palette/styles.ts

@@ -7,11 +7,12 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { Heading } from '../heading';
+import { CONFIG } from '../utils';
 
 export const ColorHeading = styled( Heading )`
 	text-transform: uppercase;
 	line-height: 24px;
-	font-weight: 500;
+	font-weight: ${ CONFIG.fontWeightMedium };
 	&&& {
 		font-size: 11px;
 		margin-bottom: 0;

package/src/date-time/date/styles.ts

@@ -79,6 +79,7 @@ export const DayButton = styled( Button, {
 		border-radius: ${ CONFIG.radiusRound };
 		height: ${ space( 7 ) };
 		width: ${ space( 7 ) };
+		font-weight: 400;
 
 		${ ( props ) =>
 			props.isSelected &&

package/src/dimension-control/test/__snapshots__/index.test.js.snap

@@ -74,7 +74,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
 
 .emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   box-sizing: border-box;
@@ -356,7 +356,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
 
 .emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   box-sizing: border-box;
@@ -648,7 +648,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
 
 .emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   box-sizing: border-box;
@@ -952,7 +952,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
 
 .emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   box-sizing: border-box;

package/src/dropdown-menu/style.scss

@@ -18,6 +18,7 @@
 		outline: none;
 		cursor: pointer;
 		white-space: nowrap;
+		font-weight: $font-weight-regular;
 
 		&.has-separator {
 			margin-top: 6px;

package/src/menu-group/style.scss

@@ -23,6 +23,6 @@
 	color: $gray-700;
 	text-transform: uppercase;
 	font-size: 11px;
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 	white-space: nowrap;
 }

package/src/menu-item/style.scss

@@ -6,6 +6,7 @@
 .components-menu-item__button,
 .components-menu-item__button.components-button {
 	width: 100%;
+	font-weight: $font-weight-regular;
 
 	&[role="menuitemradio"],
 	&[role="menuitemcheckbox"] {

package/src/palette-edit/styles.ts

@@ -52,7 +52,7 @@ export const NameContainer = styled.div`
 export const PaletteHeading = styled( Heading )`
 	text-transform: uppercase;
 	line-height: ${ space( 6 ) };
-	font-weight: 500;
+	font-weight: ${ CONFIG.fontWeightMedium };
 	&&& {
 		font-size: 11px;
 		margin-bottom: 0;

package/src/panel/style.scss

@@ -89,7 +89,7 @@
 	padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20;
 	outline: none;
 	width: 100%;
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 	text-align: left;
 	color: $gray-900;
 	border: none;

package/src/popover/index.tsx

@@ -268,9 +268,30 @@ const UnforwardedPopover = (
 		onDialogClose = ( type: string | undefined, event: SyntheticEvent ) => {
 			// Ideally the popover should have just a single onClose prop and
 			// not three props that potentially do the same thing.
-			if ( type === 'focus-outside' && onFocusOutside ) {
-				onFocusOutside( event );
+			if ( type === 'focus-outside' ) {
+				// Check if this blur event is actually relevant to this popover
+				const blurTarget = event?.target as Element;
+				const referenceElement = refs.reference.current;
+				const floatingElement = refs.floating.current;
+
+				// Check if blur is from this popover's reference element or its floating content
+				const isBlurFromThisPopover =
+					( referenceElement &&
+						'contains' in referenceElement &&
+						referenceElement.contains( blurTarget ) ) ||
+					floatingElement?.contains( blurTarget );
+				// Only proceed if the blur is actually from this popover
+				if ( ! isBlurFromThisPopover ) {
+					return;
+				}
+				// Call onFocusOutside if defined or call onClose.
+				if ( onFocusOutside ) {
+					onFocusOutside( event );
+				} else if ( onClose ) {
+					onClose();
+				}
 			} else if ( onClose ) {
+				// onClose should be called for other event types if it exists.
 				onClose();
 			}
 		};

package/src/tab-panel/style.scss

@@ -21,7 +21,7 @@
 	cursor: pointer;
 	padding: 3px $grid-unit-20; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
-	font-weight: 500;
+	font-weight: $font-weight-regular;
 
 	&:focus:not(:disabled) {
 		position: relative;

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -26,7 +26,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 
 .emotion-6 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   display: block;
@@ -391,7 +391,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
 
 .emotion-6 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   display: block;
@@ -660,7 +660,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 
 .emotion-6 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   display: block;
@@ -1019,7 +1019,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
 
 .emotion-6 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   display: block;

package/src/tools-panel/styles.ts

@@ -86,7 +86,7 @@ export const ToolsPanelHeader = css`
 
 export const ToolsPanelHeading = css`
 	font-size: inherit;
-	font-weight: 500;
+	font-weight: ${ CONFIG.fontWeightMedium };
 	line-height: normal;
 
 	/* Required to meet specificity requirements to ensure zero margin */
@@ -150,7 +150,7 @@ export const DropdownMenu = css`
 export const ResetLabel = styled.span`
 	color: ${ COLORS.theme.accentDarker10 };
 	font-size: 11px;
-	font-weight: 500;
+	font-weight: ${ CONFIG.fontWeightMedium };
 	line-height: 1.4;
 	${ rtl( { marginLeft: space( 3 ) } ) }
 	text-transform: uppercase;

package/src/utils/base-label.ts

@@ -3,11 +3,16 @@
  */
 import { css } from '@emotion/react';
 
+/**
+ * Internal dependencies
+ */
+import CONFIG from './config-values.js';
+
 // This is a very low-level mixin which you shouldn't have to use directly.
 // Try to use BaseControl's StyledLabel or BaseControl.VisualLabel if you can.
 export const baseLabelTypography = css`
 	font-size: 11px;
-	font-weight: 500;
+	font-weight: ${ CONFIG.fontWeightMedium };
 	line-height: 1.4;
 	text-transform: uppercase;
 `;

package/src/utils/config-values.js

@@ -51,6 +51,7 @@ export default Object.assign( {}, CONTROL_PROPS, {
 	fontSizeXSmall: 'calc(0.75 * 13px)',
 	fontLineHeightBase: '1.4',
 	fontWeight: 'normal',
+	fontWeightMedium: '499', // ensures fallback to 400 (instead of 600)
 	fontWeightHeading: '600',
 	gridBase: '4px',
 	cardPaddingXSmall: `${ space( 2 ) }`,