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

package/src/font-size-picker/utils.ts

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import type { FontSizePickerProps, FontSize } from './types';
+import type { FontSizePickerProps } from './types';
 
 /**
  * Some themes use css vars for their font sizes, so until we
@@ -17,25 +17,3 @@ export function isSimpleCssValue(
 		/^[\d\.]+(px|em|rem|vw|vh|%|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)?$/i;
 	return sizeRegex.test( String( value ) );
 }
-
-/**
- * Generates hint text for a font size.
- * This function returns the hint provided by the consumer, if any.
- * If no hint is provided, it falls back to showing the size value for simple CSS values.
- *
- * @param fontSize The font size object to generate hint text for.
- * @return The hint text provided by the consumer, or the size value for simple CSS values, or undefined.
- */
-export function generateFontSizeHint( fontSize: FontSize ): string | undefined {
-	// If the font size already has a hint, use it
-	if ( fontSize.hint ) {
-		return fontSize.hint;
-	}
-
-	// Fallback to showing the size value if it's a simple CSS value
-	if ( isSimpleCssValue( fontSize.size ) ) {
-		return String( fontSize.size );
-	}
-
-	return undefined;
-}

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 ) }`,