Fix UnitControl crashing on regex control characters.

Units are now escaped using `escapeRegExp` before concatenating them into a regular expression.

Fixes #52211.
---------

Co-authored-by: Mitchell Austin <mr.fye@oneandthesame.net>

packages/components/CHANGELOG.md

@@ -2,9 +2,14 @@
 
 ## Unreleased
 
+### Bug Fix
+
+- `UnitControl`: Fix crash when certain units are used ([#52211](https://github.com/WordPress/gutenberg/pull/52211)).
+
+## 25.2.0 (2023-06-23)
+
 ### Enhancements
 
-- `SelectControl`: Added option to set hidden options. ([#51545](https://github.com/WordPress/gutenberg/pull/51545))
 - `UnitControl`: Revamp support for changing unit by typing ([#39303](https://github.com/WordPress/gutenberg/pull/39303)).
 - `Modal`: Update corner radius to be between buttons and the site view frame, in a 2-4-8 system. ([#51254](https://github.com/WordPress/gutenberg/pull/51254)).
 - `Button`: Introduce `size` prop with `default`, `compact`, and `small` variants ([#51842](https://github.com/WordPress/gutenberg/pull/51842)).

packages/components/src/unit-control/index.tsx

@@ -24,6 +24,7 @@ import {
  getValidParsedQuantityAndUnit,
 } from './utils';
 import { useControlledState } from '../utils/hooks';
+import { escapeRegExp } from '../utils/strings';
 import type { UnitControlProps, UnitControlOnChangeCallback } from './types';
 
 function UnforwardedUnitControl(
@@ -76,9 +77,9 @@ function UnforwardedUnitControl(
  );
  const [ { value: firstUnitValue = '' } = {}, ...rest ] = list;
  const firstCharacters = rest.reduce( ( carry, { value } ) => {
- const first = value?.substring( 0, 1 ) || '';
+ const first = escapeRegExp( value?.substring( 0, 1 ) || '' );
  return carry.includes( first ) ? carry : `${ carry }|${ first }`;
- }, firstUnitValue.substring( 0, 1 ) );
+ }, escapeRegExp( firstUnitValue.substring( 0, 1 ) ) );
  return [ list, new RegExp( `^(?:${ firstCharacters })$`, 'i' ) ];
  }, [ nonNullValueProp, unitProp, unitsProp ] );
  const [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(

packages/components/src/unit-control/test/index.tsx

@@ -373,18 +373,21 @@ describe( 'UnitControl', () => {
  const units = [
  { value: 'pt', label: 'pt', default: 0 },
  { value: 'vmax', label: 'vmax', default: 10 },
+ // Proves that units with regex control characters don't error.
+ { value: '+', label: '+', default: 10 },
  ];
 
  render( <UnitControl units={ units } /> );
 
  const options = getSelectOptions();
 
- expect( options.length ).toBe( 2 );
+ expect( options.length ).toBe( 3 );
 
- const [ pt, vmax ] = options;
+ const [ pt, vmax, plus ] = options;
 
  expect( pt.value ).toBe( 'pt' );
  expect( vmax.value ).toBe( 'vmax' );
+ expect( plus.value ).toBe( '+' );
  } );
 
  it( 'should reset value on unit change, if unit has default value', async () => {