@wordpress/components 28.1.0 → 28.3.0

package/src/unit-control/styles/unit-control-styles.ts

@@ -40,12 +40,15 @@ const baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {
 			box-sizing: border-box;
 			padding: 2px 1px;
 			width: 20px;
-			color: ${ COLORS.gray[ 800 ] };
 			font-size: 8px;
 			line-height: 1;
 			letter-spacing: -0.5px;
 			text-transform: uppercase;
 			text-align-last: center;
+
+			&:not( :disabled ) {
+				color: ${ COLORS.gray[ 800 ] };
+			}
 		`,
 		default: css`
 			box-sizing: border-box;
@@ -54,13 +57,17 @@ const baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {
 			height: 24px;
 			margin-inline-end: ${ space( 2 ) };
 			padding: ${ space( 1 ) };
-			color: ${ COLORS.theme.accent };
+
 			font-size: 13px;
 			line-height: 1;
 			text-align-last: center;
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
+
+			&:not( :disabled ) {
+				color: ${ COLORS.theme.accent };
+			}
 		`,
 	};
 
@@ -106,8 +113,7 @@ const unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {
 			justify-content: center;
 			align-items: center;
 
-			&:hover {
-				color: ${ COLORS.ui.borderFocus };
+			&:where( :not( :disabled ) ):hover {
 				box-shadow: inset 0 0 0
 					${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };
 				outline: ${ CONFIG.borderWidth } solid transparent; // For High Contrast Mode

package/src/utils/hooks/use-update-effect.js

@@ -6,7 +6,7 @@ import { useRef, useEffect } from '@wordpress/element';
 /**
  * A `React.useEffect` that will not run on the first render.
  * Source:
- * https://github.com/ariakit/ariakit/blob/reakit/packages/reakit-utils/src/useUpdateEffect.ts
+ * https://github.com/ariakit/ariakit/blob/main/packages/ariakit-react-core/src/utils/hooks.ts
  *
  * @param {import('react').EffectCallback} effect
  * @param {import('react').DependencyList} deps
@@ -25,6 +25,13 @@ function useUpdateEffect( effect, deps ) {
 		// see https://github.com/WordPress/gutenberg/pull/41166
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, deps );
+
+	useEffect(
+		() => () => {
+			mounted.current = false;
+		},
+		[]
+	);
 }
 
 export default useUpdateEffect;