@wordpress/components 25.0.0 → 25.1.1

package/build-module/ui/spinner/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/spinner/component.js"],"names":["BarsView","BarsWrapperView","ContainerView","BASE_SIZE","WRAPPER_SIZE","contextConnect","useContextSystem","COLORS","Spinner","props","forwardedRef","color","gray","size","otherProps","ratio","scale","transform","styles","height","width"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,QAAT,EAAmBC,eAAnB,EAAoCC,aAApC,QAAyD,UAAzD;AACA,SAASC,SAAT,EAAoBC,YAApB,QAAwC,SAAxC;AACA,SAASC,cAAT,EAAyBC,gBAAzB,QAAiD,YAAjD;AACA,SAASC,MAAT,QAAuB,2BAAvB;AAEA;;AACA;AACA;AACA;AACA;AACA;;AACA;;AAEA;AACA;AACA;AACA;AACA;;AACA,SAASC,OAAT,CAAkBC,KAAlB,EAAyBC,YAAzB,EAAwC;AACvC,QAAM;AACLC,IAAAA,KAAK,GAAGJ,MAAM,CAACK,IAAP,CAAa,GAAb,CADH;AAELC,IAAAA,IAAI,GAAGV,SAFF;AAGL,OAAGW;AAHE,MAIFR,gBAAgB,CAAEG,KAAF,EAAS,SAAT,CAJpB;AAKA,QAAMM,KAAK,GAAGF,IAAI,GAAGV,SAArB;AACA,QAAMa,KAAK,GAAKD,KAAK,GAAGZ,SAAV,GAAwBC,YAAtC;AACA,QAAMa,SAAS,GAAI,SAASD,KAAO,GAAnC;AAEA,QAAME,MAAM,GAAG;AAAED,IAAAA;AAAF,GAAf;AAEA,SACC,cAAC,aAAD,eACMH,UADN;AAEC,iBAAY,IAFb;AAGC,IAAA,GAAG,EAAGJ,YAHP;AAIC,IAAA,KAAK,EAAG;AAAES,MAAAA,MAAM,EAAEN,IAAV;AAAgBO,MAAAA,KAAK,EAAEP;AAAvB;AAJT,MAMC,cAAC,eAAD;AAAiB,mBAAc,IAA/B;AAAsC,IAAA,KAAK,EAAGK;AAA9C,KACC,cAAC,QAAD;AAAU,IAAA,KAAK,EAAG;AAAEP,MAAAA;AAAF;AAAlB,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,IADD,EAEC;AAAK,IAAA,SAAS,EAAC;AAAf,IAFD,EAGC;AAAK,IAAA,SAAS,EAAC;AAAf,IAHD,EAIC;AAAK,IAAA,SAAS,EAAC;AAAf,IAJD,EAKC;AAAK,IAAA,SAAS,EAAC;AAAf,IALD,EAMC;AAAK,IAAA,SAAS,EAAC;AAAf,IAND,EAOC;AAAK,IAAA,SAAS,EAAC;AAAf,IAPD,EAQC;AAAK,IAAA,SAAS,EAAC;AAAf,IARD,EASC;AAAK,IAAA,SAAS,EAAC;AAAf,IATD,EAUC;AAAK,IAAA,SAAS,EAAC;AAAf,IAVD,EAWC;AAAK,IAAA,SAAS,EAAC;AAAf,IAXD,EAYC;AAAK,IAAA,SAAS,EAAC;AAAf,IAZD,CADD,CAND,CADD;AAyBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAeN,cAAc,CAAEG,OAAF,EAAW,SAAX,CAA7B","sourcesContent":["/**\n * Internal dependencies\n */\nimport { BarsView, BarsWrapperView, ContainerView } from './styles';\nimport { BASE_SIZE, WRAPPER_SIZE } from './utils';\nimport { contextConnect, useContextSystem } from '../context';\nimport { COLORS } from '../../utils/colors-values';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @typedef Props\n * @property {import('react').CSSProperties['color']} [color]   Color of `Spinner`.\n * @property {number}                                 [size=16] Size of `Spinner`.\n */\n/* eslint-enable jsdoc/valid-types */\n\n/**\n *\n * @param {import('../context').WordPressComponentProps<Props, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                          forwardedRef\n */\nfunction Spinner( props, forwardedRef ) {\n\tconst {\n\t\tcolor = COLORS.gray[ 900 ],\n\t\tsize = BASE_SIZE,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Spinner' );\n\tconst ratio = size / BASE_SIZE;\n\tconst scale = ( ratio * BASE_SIZE ) / WRAPPER_SIZE;\n\tconst transform = `scale(${ scale })`;\n\n\tconst styles = { transform };\n\n\treturn (\n\t\t<ContainerView\n\t\t\t{ ...otherProps }\n\t\t\taria-busy={ true }\n\t\t\tref={ forwardedRef }\n\t\t\tstyle={ { height: size, width: size } }\n\t\t>\n\t\t\t<BarsWrapperView aria-hidden={ true } style={ styles }>\n\t\t\t\t<BarsView style={ { color } }>\n\t\t\t\t\t<div className=\"InnerBar1\" />\n\t\t\t\t\t<div className=\"InnerBar2\" />\n\t\t\t\t\t<div className=\"InnerBar3\" />\n\t\t\t\t\t<div className=\"InnerBar4\" />\n\t\t\t\t\t<div className=\"InnerBar5\" />\n\t\t\t\t\t<div className=\"InnerBar6\" />\n\t\t\t\t\t<div className=\"InnerBar7\" />\n\t\t\t\t\t<div className=\"InnerBar8\" />\n\t\t\t\t\t<div className=\"InnerBar9\" />\n\t\t\t\t\t<div className=\"InnerBar10\" />\n\t\t\t\t\t<div className=\"InnerBar11\" />\n\t\t\t\t\t<div className=\"InnerBar12\" />\n\t\t\t\t</BarsView>\n\t\t\t</BarsWrapperView>\n\t\t</ContainerView>\n\t);\n}\n\n/**\n * `Spinner` is a component that notify users that their action is being processed.\n *\n * @example\n * ```jsx\n * import { Spinner } from `@wordpress/components/ui`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Spinner />\n * \t);\n * }\n * ```\n */\nexport default contextConnect( Spinner, 'Spinner' );\n"]}
+{"version":3,"sources":["@wordpress/components/src/ui/spinner/component.js"],"names":["BarsView","BarsWrapperView","ContainerView","BASE_SIZE","WRAPPER_SIZE","contextConnect","useContextSystem","COLORS","Spinner","props","forwardedRef","color","gray","size","otherProps","ratio","scale","transform","styles","height","width"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,QAAT,EAAmBC,eAAnB,EAAoCC,aAApC,QAAyD,UAAzD;AACA,SAASC,SAAT,EAAoBC,YAApB,QAAwC,SAAxC;AACA,SAASC,cAAT,EAAyBC,gBAAzB,QAAiD,YAAjD;AACA,SAASC,MAAT,QAAuB,2BAAvB;AAEA;;AACA;AACA;AACA;AACA;AACA;;AACA;;AAEA;AACA;AACA;AACA;AACA;;AACA,SAASC,OAAT,CAAkBC,KAAlB,EAAyBC,YAAzB,EAAwC;AACvC,QAAM;AACLC,IAAAA,KAAK,GAAGJ,MAAM,CAACK,IAAP,CAAa,GAAb,CADH;AAELC,IAAAA,IAAI,GAAGV,SAFF;AAGL,OAAGW;AAHE,MAIFR,gBAAgB,CAAEG,KAAF,EAAS,SAAT,CAJpB;AAKA,QAAMM,KAAK,GAAGF,IAAI,GAAGV,SAArB;AACA,QAAMa,KAAK,GAAKD,KAAK,GAAGZ,SAAV,GAAwBC,YAAtC;AACA,QAAMa,SAAS,GAAI,SAASD,KAAO,GAAnC;AAEA,QAAME,MAAM,GAAG;AAAED,IAAAA;AAAF,GAAf;AAEA,SACC,cAAC,aAAD,OACMH,UADN;AAEC,iBAAY,IAFb;AAGC,IAAA,GAAG,EAAGJ,YAHP;AAIC,IAAA,KAAK,EAAG;AAAES,MAAAA,MAAM,EAAEN,IAAV;AAAgBO,MAAAA,KAAK,EAAEP;AAAvB;AAJT,KAMC,cAAC,eAAD;AAAiB,mBAAc,IAA/B;AAAsC,IAAA,KAAK,EAAGK;AAA9C,KACC,cAAC,QAAD;AAAU,IAAA,KAAK,EAAG;AAAEP,MAAAA;AAAF;AAAlB,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,IADD,EAEC;AAAK,IAAA,SAAS,EAAC;AAAf,IAFD,EAGC;AAAK,IAAA,SAAS,EAAC;AAAf,IAHD,EAIC;AAAK,IAAA,SAAS,EAAC;AAAf,IAJD,EAKC;AAAK,IAAA,SAAS,EAAC;AAAf,IALD,EAMC;AAAK,IAAA,SAAS,EAAC;AAAf,IAND,EAOC;AAAK,IAAA,SAAS,EAAC;AAAf,IAPD,EAQC;AAAK,IAAA,SAAS,EAAC;AAAf,IARD,EASC;AAAK,IAAA,SAAS,EAAC;AAAf,IATD,EAUC;AAAK,IAAA,SAAS,EAAC;AAAf,IAVD,EAWC;AAAK,IAAA,SAAS,EAAC;AAAf,IAXD,EAYC;AAAK,IAAA,SAAS,EAAC;AAAf,IAZD,CADD,CAND,CADD;AAyBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAeN,cAAc,CAAEG,OAAF,EAAW,SAAX,CAA7B","sourcesContent":["/**\n * Internal dependencies\n */\nimport { BarsView, BarsWrapperView, ContainerView } from './styles';\nimport { BASE_SIZE, WRAPPER_SIZE } from './utils';\nimport { contextConnect, useContextSystem } from '../context';\nimport { COLORS } from '../../utils/colors-values';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @typedef Props\n * @property {import('react').CSSProperties['color']} [color]   Color of `Spinner`.\n * @property {number}                                 [size=16] Size of `Spinner`.\n */\n/* eslint-enable jsdoc/valid-types */\n\n/**\n *\n * @param {import('../context').WordPressComponentProps<Props, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                          forwardedRef\n */\nfunction Spinner( props, forwardedRef ) {\n\tconst {\n\t\tcolor = COLORS.gray[ 900 ],\n\t\tsize = BASE_SIZE,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Spinner' );\n\tconst ratio = size / BASE_SIZE;\n\tconst scale = ( ratio * BASE_SIZE ) / WRAPPER_SIZE;\n\tconst transform = `scale(${ scale })`;\n\n\tconst styles = { transform };\n\n\treturn (\n\t\t<ContainerView\n\t\t\t{ ...otherProps }\n\t\t\taria-busy={ true }\n\t\t\tref={ forwardedRef }\n\t\t\tstyle={ { height: size, width: size } }\n\t\t>\n\t\t\t<BarsWrapperView aria-hidden={ true } style={ styles }>\n\t\t\t\t<BarsView style={ { color } }>\n\t\t\t\t\t<div className=\"InnerBar1\" />\n\t\t\t\t\t<div className=\"InnerBar2\" />\n\t\t\t\t\t<div className=\"InnerBar3\" />\n\t\t\t\t\t<div className=\"InnerBar4\" />\n\t\t\t\t\t<div className=\"InnerBar5\" />\n\t\t\t\t\t<div className=\"InnerBar6\" />\n\t\t\t\t\t<div className=\"InnerBar7\" />\n\t\t\t\t\t<div className=\"InnerBar8\" />\n\t\t\t\t\t<div className=\"InnerBar9\" />\n\t\t\t\t\t<div className=\"InnerBar10\" />\n\t\t\t\t\t<div className=\"InnerBar11\" />\n\t\t\t\t\t<div className=\"InnerBar12\" />\n\t\t\t\t</BarsView>\n\t\t\t</BarsWrapperView>\n\t\t</ContainerView>\n\t);\n}\n\n/**\n * `Spinner` is a component that notify users that their action is being processed.\n *\n * @example\n * ```jsx\n * import { Spinner } from `@wordpress/components/ui`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Spinner />\n * \t);\n * }\n * ```\n */\nexport default contextConnect( Spinner, 'Spinner' );\n"]}

package/build-module/ui/tooltip/component.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -58,10 +57,11 @@ function Tooltip(props, forwardedRef) {
     ref: forwardedRef
   }, content, shortcut && createElement(TooltipShortcut, {
     shortcut: shortcut
-  })), children && createElement(TooltipReference, _extends({}, tooltip, children.props, {
+  })), children && createElement(TooltipReference, { ...tooltip,
+    ...children.props,
     // @ts-ignore If ref doesn't exist that's fine with us, it'll just be undefined, but it can exist on ReactElement and there's no reason to try to scope this (it'll just overcomplicate things)
-    ref: children === null || children === void 0 ? void 0 : children.ref
-  }), referenceProps => {
+    ref: children?.ref
+  }, referenceProps => {
     if (!focusable) {
       referenceProps.tabIndex = undefined;
     }

package/build-module/ui/tooltip/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/tooltip/component.js"],"names":["TooltipReference","useTooltipState","useMemo","cloneElement","contextConnect","useContextSystem","TooltipContext","TooltipContent","TooltipShortcut","Tooltip","props","forwardedRef","animated","animationDuration","baseId","children","content","focusable","gutter","id","modal","placement","visible","shortcut","otherProps","tooltip","undefined","contextProps","ref","referenceProps","tabIndex","ConnectedTooltip"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA,SAASA,gBAAT,EAA2BC,eAA3B,QAAkD,QAAlD;AAEA;AACA;AACA;;AACA,SAASC,OAAT,EAAkBC,YAAlB,QAAsC,oBAAtC;AAEA;AACA;AACA;;AACA,SAASC,cAAT,EAAyBC,gBAAzB,QAAiD,YAAjD;AACA,SAASC,cAAT,QAA+B,WAA/B;AACA,OAAOC,cAAP,MAA2B,WAA3B;AACA,SAASC,eAAT,QAAgC,UAAhC;AAEA;AACA;AACA;AACA;;AACA,SAASC,OAAT,CAAkBC,KAAlB,EAAyBC,YAAzB,EAAwC;AACvC,QAAM;AACLC,IAAAA,QAAQ,GAAG,IADN;AAELC,IAAAA,iBAAiB,GAAG,GAFf;AAGLC,IAAAA,MAHK;AAILC,IAAAA,QAJK;AAKLC,IAAAA,OALK;AAMLC,IAAAA,SAAS,GAAG,IANP;AAOLC,IAAAA,MAAM,GAAG,CAPJ;AAQLC,IAAAA,EARK;AASLC,IAAAA,KAAK,GAAG,IATH;AAULC,IAAAA,SAVK;AAWLC,IAAAA,OAAO,GAAG,KAXL;AAYLC,IAAAA,QAZK;AAaL,OAAGC;AAbE,MAcFnB,gBAAgB,CAAEK,KAAF,EAAS,SAAT,CAdpB;AAgBA,QAAMe,OAAO,GAAGxB,eAAe,CAAE;AAChCW,IAAAA,QAAQ,EAAEA,QAAQ,GAAGC,iBAAH,GAAuBa,SADT;AAEhCZ,IAAAA,MAAM,EAAEA,MAAM,IAAIK,EAFc;AAGhCD,IAAAA,MAHgC;AAIhCG,IAAAA,SAJgC;AAKhCC,IAAAA,OALgC;AAMhC,OAAGE;AAN6B,GAAF,CAA/B;AASA,QAAMG,YAAY,GAAGzB,OAAO,CAC3B,OAAQ;AACPuB,IAAAA;AADO,GAAR,CAD2B,EAI3B,CAAEA,OAAF,CAJ2B,CAA5B;AAOA,SACC,cAAC,cAAD,CAAgB,QAAhB;AAAyB,IAAA,KAAK,EAAGE;AAAjC,KACGX,OAAO,IACR,cAAC,cAAD;AAAgB,IAAA,eAAe,EAAGI,KAAlC;AAA0C,IAAA,GAAG,EAAGT;AAAhD,KACGK,OADH,EAEGO,QAAQ,IAAI,cAAC,eAAD;AAAiB,IAAA,QAAQ,EAAGA;AAA5B,IAFf,CAFF,EAOGR,QAAQ,IACT,cAAC,gBAAD,eACMU,OADN,EAEMV,QAAQ,CAACL,KAFf;AAGC;AACA,IAAA,GAAG,EAAGK,QAAH,aAAGA,QAAH,uBAAGA,QAAQ,CAAEa;AAJjB,MAMKC,cAAF,IAAsB;AACvB,QAAK,CAAEZ,SAAP,EAAmB;AAClBY,MAAAA,cAAc,CAACC,QAAf,GAA0BJ,SAA1B;AACA;;AACD,WAAOvB,YAAY,CAAEY,QAAF,EAAYc,cAAZ,CAAnB;AACA,GAXF,CARF,CADD;AAyBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,gBAAgB,GAAG3B,cAAc,CAAEK,OAAF,EAAW,SAAX,CAAvC;AAEA,eAAesB,gBAAf","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport { TooltipReference, useTooltipState } from 'reakit';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, cloneElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, useContextSystem } from '../context';\nimport { TooltipContext } from './context';\nimport TooltipContent from './content';\nimport { TooltipShortcut } from './styles';\n\n/**\n * @param {import('../context').WordPressComponentProps<import('./types').Props, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                                            forwardedRef\n */\nfunction Tooltip( props, forwardedRef ) {\n\tconst {\n\t\tanimated = true,\n\t\tanimationDuration = 160,\n\t\tbaseId,\n\t\tchildren,\n\t\tcontent,\n\t\tfocusable = true,\n\t\tgutter = 4,\n\t\tid,\n\t\tmodal = true,\n\t\tplacement,\n\t\tvisible = false,\n\t\tshortcut,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Tooltip' );\n\n\tconst tooltip = useTooltipState( {\n\t\tanimated: animated ? animationDuration : undefined,\n\t\tbaseId: baseId || id,\n\t\tgutter,\n\t\tplacement,\n\t\tvisible,\n\t\t...otherProps,\n\t} );\n\n\tconst contextProps = useMemo(\n\t\t() => ( {\n\t\t\ttooltip,\n\t\t} ),\n\t\t[ tooltip ]\n\t);\n\n\treturn (\n\t\t<TooltipContext.Provider value={ contextProps }>\n\t\t\t{ content && (\n\t\t\t\t<TooltipContent unstable_portal={ modal } ref={ forwardedRef }>\n\t\t\t\t\t{ content }\n\t\t\t\t\t{ shortcut && <TooltipShortcut shortcut={ shortcut } /> }\n\t\t\t\t</TooltipContent>\n\t\t\t) }\n\t\t\t{ children && (\n\t\t\t\t<TooltipReference\n\t\t\t\t\t{ ...tooltip }\n\t\t\t\t\t{ ...children.props }\n\t\t\t\t\t// @ts-ignore If ref doesn't exist that's fine with us, it'll just be undefined, but it can exist on ReactElement and there's no reason to try to scope this (it'll just overcomplicate things)\n\t\t\t\t\tref={ children?.ref }\n\t\t\t\t>\n\t\t\t\t\t{ ( referenceProps ) => {\n\t\t\t\t\t\tif ( ! focusable ) {\n\t\t\t\t\t\t\treferenceProps.tabIndex = undefined;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn cloneElement( children, referenceProps );\n\t\t\t\t\t} }\n\t\t\t\t</TooltipReference>\n\t\t\t) }\n\t\t</TooltipContext.Provider>\n\t);\n}\n\n/**\n * `Tooltip` is a component that provides context for a user interface element.\n *\n * @example\n * ```jsx\n * import { Tooltip, Text } from `@wordpress/components/ui`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Tooltip content=\"Code is Poetry\">\n * \t\t\t<Text>WordPress.org</Text>\n * \t\t</Tooltip>\n * \t)\n * }\n * ```\n */\nconst ConnectedTooltip = contextConnect( Tooltip, 'Tooltip' );\n\nexport default ConnectedTooltip;\n"]}
+{"version":3,"sources":["@wordpress/components/src/ui/tooltip/component.js"],"names":["TooltipReference","useTooltipState","useMemo","cloneElement","contextConnect","useContextSystem","TooltipContext","TooltipContent","TooltipShortcut","Tooltip","props","forwardedRef","animated","animationDuration","baseId","children","content","focusable","gutter","id","modal","placement","visible","shortcut","otherProps","tooltip","undefined","contextProps","ref","referenceProps","tabIndex","ConnectedTooltip"],"mappings":";;AAAA;AACA;AACA;AACA;AACA,SAASA,gBAAT,EAA2BC,eAA3B,QAAkD,QAAlD;AAEA;AACA;AACA;;AACA,SAASC,OAAT,EAAkBC,YAAlB,QAAsC,oBAAtC;AAEA;AACA;AACA;;AACA,SAASC,cAAT,EAAyBC,gBAAzB,QAAiD,YAAjD;AACA,SAASC,cAAT,QAA+B,WAA/B;AACA,OAAOC,cAAP,MAA2B,WAA3B;AACA,SAASC,eAAT,QAAgC,UAAhC;AAEA;AACA;AACA;AACA;;AACA,SAASC,OAAT,CAAkBC,KAAlB,EAAyBC,YAAzB,EAAwC;AACvC,QAAM;AACLC,IAAAA,QAAQ,GAAG,IADN;AAELC,IAAAA,iBAAiB,GAAG,GAFf;AAGLC,IAAAA,MAHK;AAILC,IAAAA,QAJK;AAKLC,IAAAA,OALK;AAMLC,IAAAA,SAAS,GAAG,IANP;AAOLC,IAAAA,MAAM,GAAG,CAPJ;AAQLC,IAAAA,EARK;AASLC,IAAAA,KAAK,GAAG,IATH;AAULC,IAAAA,SAVK;AAWLC,IAAAA,OAAO,GAAG,KAXL;AAYLC,IAAAA,QAZK;AAaL,OAAGC;AAbE,MAcFnB,gBAAgB,CAAEK,KAAF,EAAS,SAAT,CAdpB;AAgBA,QAAMe,OAAO,GAAGxB,eAAe,CAAE;AAChCW,IAAAA,QAAQ,EAAEA,QAAQ,GAAGC,iBAAH,GAAuBa,SADT;AAEhCZ,IAAAA,MAAM,EAAEA,MAAM,IAAIK,EAFc;AAGhCD,IAAAA,MAHgC;AAIhCG,IAAAA,SAJgC;AAKhCC,IAAAA,OALgC;AAMhC,OAAGE;AAN6B,GAAF,CAA/B;AASA,QAAMG,YAAY,GAAGzB,OAAO,CAC3B,OAAQ;AACPuB,IAAAA;AADO,GAAR,CAD2B,EAI3B,CAAEA,OAAF,CAJ2B,CAA5B;AAOA,SACC,cAAC,cAAD,CAAgB,QAAhB;AAAyB,IAAA,KAAK,EAAGE;AAAjC,KACGX,OAAO,IACR,cAAC,cAAD;AAAgB,IAAA,eAAe,EAAGI,KAAlC;AAA0C,IAAA,GAAG,EAAGT;AAAhD,KACGK,OADH,EAEGO,QAAQ,IAAI,cAAC,eAAD;AAAiB,IAAA,QAAQ,EAAGA;AAA5B,IAFf,CAFF,EAOGR,QAAQ,IACT,cAAC,gBAAD,OACMU,OADN;AAAA,OAEMV,QAAQ,CAACL,KAFf;AAGC;AACA,IAAA,GAAG,EAAGK,QAAQ,EAAEa;AAJjB,KAMKC,cAAF,IAAsB;AACvB,QAAK,CAAEZ,SAAP,EAAmB;AAClBY,MAAAA,cAAc,CAACC,QAAf,GAA0BJ,SAA1B;AACA;;AACD,WAAOvB,YAAY,CAAEY,QAAF,EAAYc,cAAZ,CAAnB;AACA,GAXF,CARF,CADD;AAyBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,gBAAgB,GAAG3B,cAAc,CAAEK,OAAF,EAAW,SAAX,CAAvC;AAEA,eAAesB,gBAAf","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport { TooltipReference, useTooltipState } from 'reakit';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, cloneElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, useContextSystem } from '../context';\nimport { TooltipContext } from './context';\nimport TooltipContent from './content';\nimport { TooltipShortcut } from './styles';\n\n/**\n * @param {import('../context').WordPressComponentProps<import('./types').Props, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                                            forwardedRef\n */\nfunction Tooltip( props, forwardedRef ) {\n\tconst {\n\t\tanimated = true,\n\t\tanimationDuration = 160,\n\t\tbaseId,\n\t\tchildren,\n\t\tcontent,\n\t\tfocusable = true,\n\t\tgutter = 4,\n\t\tid,\n\t\tmodal = true,\n\t\tplacement,\n\t\tvisible = false,\n\t\tshortcut,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Tooltip' );\n\n\tconst tooltip = useTooltipState( {\n\t\tanimated: animated ? animationDuration : undefined,\n\t\tbaseId: baseId || id,\n\t\tgutter,\n\t\tplacement,\n\t\tvisible,\n\t\t...otherProps,\n\t} );\n\n\tconst contextProps = useMemo(\n\t\t() => ( {\n\t\t\ttooltip,\n\t\t} ),\n\t\t[ tooltip ]\n\t);\n\n\treturn (\n\t\t<TooltipContext.Provider value={ contextProps }>\n\t\t\t{ content && (\n\t\t\t\t<TooltipContent unstable_portal={ modal } ref={ forwardedRef }>\n\t\t\t\t\t{ content }\n\t\t\t\t\t{ shortcut && <TooltipShortcut shortcut={ shortcut } /> }\n\t\t\t\t</TooltipContent>\n\t\t\t) }\n\t\t\t{ children && (\n\t\t\t\t<TooltipReference\n\t\t\t\t\t{ ...tooltip }\n\t\t\t\t\t{ ...children.props }\n\t\t\t\t\t// @ts-ignore If ref doesn't exist that's fine with us, it'll just be undefined, but it can exist on ReactElement and there's no reason to try to scope this (it'll just overcomplicate things)\n\t\t\t\t\tref={ children?.ref }\n\t\t\t\t>\n\t\t\t\t\t{ ( referenceProps ) => {\n\t\t\t\t\t\tif ( ! focusable ) {\n\t\t\t\t\t\t\treferenceProps.tabIndex = undefined;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn cloneElement( children, referenceProps );\n\t\t\t\t\t} }\n\t\t\t\t</TooltipReference>\n\t\t\t) }\n\t\t</TooltipContext.Provider>\n\t);\n}\n\n/**\n * `Tooltip` is a component that provides context for a user interface element.\n *\n * @example\n * ```jsx\n * import { Tooltip, Text } from `@wordpress/components/ui`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Tooltip content=\"Code is Poetry\">\n * \t\t\t<Text>WordPress.org</Text>\n * \t\t</Tooltip>\n * \t)\n * }\n * ```\n */\nconst ConnectedTooltip = contextConnect( Tooltip, 'Tooltip' );\n\nexport default ConnectedTooltip;\n"]}

package/build-module/ui/tooltip/content.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -35,12 +34,13 @@ function TooltipContent(props, forwardedRef) {
   } = useTooltipContext();
   const cx = useCx();
   const classes = cx(styles.TooltipContent, className);
-  return createElement(ReakitTooltip, _extends({
-    as: View
-  }, otherProps, tooltip, {
+  return createElement(ReakitTooltip, {
+    as: View,
+    ...otherProps,
+    ...tooltip,
     className: classes,
     ref: forwardedRef
-  }), createElement(TooltipPopoverView, null, children));
+  }, createElement(TooltipPopoverView, null, children));
 }
 
 export default contextConnect(TooltipContent, 'TooltipContent');

package/build-module/ui/tooltip/content.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/tooltip/content.js"],"names":["Tooltip","ReakitTooltip","contextConnect","useContextSystem","View","useTooltipContext","styles","useCx","TooltipPopoverView","TooltipContent","props","forwardedRef","children","className","otherProps","tooltip","cx","classes"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA,SAASA,OAAO,IAAIC,aAApB,QAAyC,QAAzC;AAEA;AACA;AACA;;AACA,SAASC,cAAT,EAAyBC,gBAAzB,QAAiD,YAAjD;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,iBAAT,QAAkC,WAAlC;AACA,OAAO,KAAKC,MAAZ,MAAwB,UAAxB;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAEA,MAAM;AAAEC,EAAAA;AAAF,IAAyBF,MAA/B;AAEA;AACA;AACA;AACA;AACA;;AACA,SAASG,cAAT,CAAyBC,KAAzB,EAAgCC,YAAhC,EAA+C;AAC9C,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,SAAZ;AAAuB,OAAGC;AAA1B,MAAyCX,gBAAgB,CAC9DO,KAD8D,EAE9D,gBAF8D,CAA/D;AAIA,QAAM;AAAEK,IAAAA;AAAF,MAAcV,iBAAiB,EAArC;AACA,QAAMW,EAAE,GAAGT,KAAK,EAAhB;AACA,QAAMU,OAAO,GAAGD,EAAE,CAAEV,MAAM,CAACG,cAAT,EAAyBI,SAAzB,CAAlB;AAEA,SACC,cAAC,aAAD;AACC,IAAA,EAAE,EAAGT;AADN,KAEMU,UAFN,EAGMC,OAHN;AAIC,IAAA,SAAS,EAAGE,OAJb;AAKC,IAAA,GAAG,EAAGN;AALP,MAOC,cAAC,kBAAD,QAAsBC,QAAtB,CAPD,CADD;AAWA;;AAED,eAAeV,cAAc,CAAEO,cAAF,EAAkB,gBAAlB,CAA7B","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport { Tooltip as ReakitTooltip } from 'reakit';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, useContextSystem } from '../context';\nimport { View } from '../../view';\nimport { useTooltipContext } from './context';\nimport * as styles from './styles';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nconst { TooltipPopoverView } = styles;\n\n/**\n *\n * @param {import('../context').WordPressComponentProps<import('./types').ContentProps, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                                                   forwardedRef\n */\nfunction TooltipContent( props, forwardedRef ) {\n\tconst { children, className, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'TooltipContent'\n\t);\n\tconst { tooltip } = useTooltipContext();\n\tconst cx = useCx();\n\tconst classes = cx( styles.TooltipContent, className );\n\n\treturn (\n\t\t<ReakitTooltip\n\t\t\tas={ View }\n\t\t\t{ ...otherProps }\n\t\t\t{ ...tooltip }\n\t\t\tclassName={ classes }\n\t\t\tref={ forwardedRef }\n\t\t>\n\t\t\t<TooltipPopoverView>{ children }</TooltipPopoverView>\n\t\t</ReakitTooltip>\n\t);\n}\n\nexport default contextConnect( TooltipContent, 'TooltipContent' );\n"]}
+{"version":3,"sources":["@wordpress/components/src/ui/tooltip/content.js"],"names":["Tooltip","ReakitTooltip","contextConnect","useContextSystem","View","useTooltipContext","styles","useCx","TooltipPopoverView","TooltipContent","props","forwardedRef","children","className","otherProps","tooltip","cx","classes"],"mappings":";;AAAA;AACA;AACA;AACA;AACA,SAASA,OAAO,IAAIC,aAApB,QAAyC,QAAzC;AAEA;AACA;AACA;;AACA,SAASC,cAAT,EAAyBC,gBAAzB,QAAiD,YAAjD;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,iBAAT,QAAkC,WAAlC;AACA,OAAO,KAAKC,MAAZ,MAAwB,UAAxB;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAEA,MAAM;AAAEC,EAAAA;AAAF,IAAyBF,MAA/B;AAEA;AACA;AACA;AACA;AACA;;AACA,SAASG,cAAT,CAAyBC,KAAzB,EAAgCC,YAAhC,EAA+C;AAC9C,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,SAAZ;AAAuB,OAAGC;AAA1B,MAAyCX,gBAAgB,CAC9DO,KAD8D,EAE9D,gBAF8D,CAA/D;AAIA,QAAM;AAAEK,IAAAA;AAAF,MAAcV,iBAAiB,EAArC;AACA,QAAMW,EAAE,GAAGT,KAAK,EAAhB;AACA,QAAMU,OAAO,GAAGD,EAAE,CAAEV,MAAM,CAACG,cAAT,EAAyBI,SAAzB,CAAlB;AAEA,SACC,cAAC,aAAD;AACC,IAAA,EAAE,EAAGT,IADN;AAAA,OAEMU,UAFN;AAAA,OAGMC,OAHN;AAIC,IAAA,SAAS,EAAGE,OAJb;AAKC,IAAA,GAAG,EAAGN;AALP,KAOC,cAAC,kBAAD,QAAsBC,QAAtB,CAPD,CADD;AAWA;;AAED,eAAeV,cAAc,CAAEO,cAAF,EAAkB,gBAAlB,CAA7B","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport { Tooltip as ReakitTooltip } from 'reakit';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, useContextSystem } from '../context';\nimport { View } from '../../view';\nimport { useTooltipContext } from './context';\nimport * as styles from './styles';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nconst { TooltipPopoverView } = styles;\n\n/**\n *\n * @param {import('../context').WordPressComponentProps<import('./types').ContentProps, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                                                   forwardedRef\n */\nfunction TooltipContent( props, forwardedRef ) {\n\tconst { children, className, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'TooltipContent'\n\t);\n\tconst { tooltip } = useTooltipContext();\n\tconst cx = useCx();\n\tconst classes = cx( styles.TooltipContent, className );\n\n\treturn (\n\t\t<ReakitTooltip\n\t\t\tas={ View }\n\t\t\t{ ...otherProps }\n\t\t\t{ ...tooltip }\n\t\t\tclassName={ classes }\n\t\t\tref={ forwardedRef }\n\t\t>\n\t\t\t<TooltipPopoverView>{ children }</TooltipPopoverView>\n\t\t</ReakitTooltip>\n\t);\n}\n\nexport default contextConnect( TooltipContent, 'TooltipContent' );\n"]}

package/build-module/ui/utils/colors.js

@@ -49,8 +49,6 @@ function isColor(value) {
 
 
 function _getComputedBackgroundColor(backgroundColor) {
-  var _window;
-
   if (typeof backgroundColor !== 'string') return '';
   if (isColor(backgroundColor)) return backgroundColor;
   if (!backgroundColor.includes('var(')) return '';
@@ -60,7 +58,7 @@ function _getComputedBackgroundColor(backgroundColor) {
   if (!el) return '';
   el.style.background = backgroundColor; // Grab the style.
 
-  const computedColor = (_window = window) === null || _window === void 0 ? void 0 : _window.getComputedStyle(el).background; // Reset.
+  const computedColor = window?.getComputedStyle(el).background; // Reset.
 
   el.style.background = '';
   return computedColor || '';

package/build-module/ui/utils/colors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/utils/colors.js"],"names":["memoize","colord","extend","namesPlugin","colorComputationNode","getColorComputationNode","document","el","createElement","setAttribute","body","appendChild","isColor","value","test","isValid","_getComputedBackgroundColor","backgroundColor","includes","style","background","computedColor","window","getComputedStyle","getComputedBackgroundColor","getOptimalTextColor","isLight","getOptimalTextShade","result"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,OAAP,MAAoB,QAApB;AACA,SAASC,MAAT,EAAiBC,MAAjB,QAA+B,QAA/B;AACA,OAAOC,WAAP,MAAwB,sBAAxB;AAEA;;AACA,IAAIC,oBAAJ;AAEAF,MAAM,CAAE,CAAEC,WAAF,CAAF,CAAN;AAEA;AACA;AACA;;AACA,SAASE,uBAAT,GAAmC;AAClC,MAAK,OAAOC,QAAP,KAAoB,WAAzB,EAAuC;;AAEvC,MAAK,CAAEF,oBAAP,EAA8B;AAC7B;AACA,UAAMG,EAAE,GAAGD,QAAQ,CAACE,aAAT,CAAwB,KAAxB,CAAX;AACAD,IAAAA,EAAE,CAACE,YAAH,CAAiB,gCAAjB,EAAmD,EAAnD,EAH6B,CAI7B;;AACAH,IAAAA,QAAQ,CAACI,IAAT,CAAcC,WAAd,CAA2BJ,EAA3B;AACAH,IAAAA,oBAAoB,GAAGG,EAAvB;AACA;;AAED,SAAOH,oBAAP;AACA;AAED;AACA;AACA;AACA;AACA;;;AACA,SAASQ,OAAT,CAAkBC,KAAlB,EAA0B;AACzB,MAAK,OAAOA,KAAP,KAAiB,QAAtB,EAAiC,OAAO,KAAP;AACjC,QAAMC,IAAI,GAAGb,MAAM,CAAEY,KAAF,CAAnB;AAEA,SAAOC,IAAI,CAACC,OAAL,EAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASC,2BAAT,CAAsCC,eAAtC,EAAwD;AAAA;;AACvD,MAAK,OAAOA,eAAP,KAA2B,QAAhC,EAA2C,OAAO,EAAP;AAE3C,MAAKL,OAAO,CAAEK,eAAF,CAAZ,EAAkC,OAAOA,eAAP;AAElC,MAAK,CAAEA,eAAe,CAACC,QAAhB,CAA0B,MAA1B,CAAP,EAA4C,OAAO,EAAP;AAC5C,MAAK,OAAOZ,QAAP,KAAoB,WAAzB,EAAuC,OAAO,EAAP,CANgB,CAQvD;;AACA,QAAMC,EAAE,GAAGF,uBAAuB,EAAlC;AACA,MAAK,CAAEE,EAAP,EAAY,OAAO,EAAP;AAEZA,EAAAA,EAAE,CAACY,KAAH,CAASC,UAAT,GAAsBH,eAAtB,CAZuD,CAavD;;AACA,QAAMI,aAAa,cAAGC,MAAH,4CAAG,QAAQC,gBAAR,CAA0BhB,EAA1B,EAA+Ba,UAArD,CAduD,CAevD;;AACAb,EAAAA,EAAE,CAACY,KAAH,CAASC,UAAT,GAAsB,EAAtB;AAEA,SAAOC,aAAa,IAAI,EAAxB;AACA;;AAED,MAAMG,0BAA0B,GAAGxB,OAAO,CAAEgB,2BAAF,CAA1C;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASS,mBAAT,CAA8BR,eAA9B,EAAgD;AACtD,QAAMG,UAAU,GAAGI,0BAA0B,CAAEP,eAAF,CAA7C;AAEA,SAAOhB,MAAM,CAAEmB,UAAF,CAAN,CAAqBM,OAArB,KAAiC,SAAjC,GAA6C,SAApD;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,mBAAT,CAA8BV,eAA9B,EAAgD;AACtD,QAAMW,MAAM,GAAGH,mBAAmB,CAAER,eAAF,CAAlC;AAEA,SAAOW,MAAM,KAAK,SAAX,GAAuB,MAAvB,GAAgC,OAAvC;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport memoize from 'memize';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/** @type {HTMLDivElement} */\nlet colorComputationNode;\n\nextend( [ namesPlugin ] );\n\n/**\n * @return {HTMLDivElement | undefined} The HTML element for color computation.\n */\nfunction getColorComputationNode() {\n\tif ( typeof document === 'undefined' ) return;\n\n\tif ( ! colorComputationNode ) {\n\t\t// Create a temporary element for style computation.\n\t\tconst el = document.createElement( 'div' );\n\t\tel.setAttribute( 'data-g2-color-computation-node', '' );\n\t\t// Inject for window computed style.\n\t\tdocument.body.appendChild( el );\n\t\tcolorComputationNode = el;\n\t}\n\n\treturn colorComputationNode;\n}\n\n/**\n * @param {string | unknown} value\n *\n * @return {boolean} Whether the value is a valid color.\n */\nfunction isColor( value ) {\n\tif ( typeof value !== 'string' ) return false;\n\tconst test = colord( value );\n\n\treturn test.isValid();\n}\n\n/**\n * Retrieves the computed background color. This is useful for getting the\n * value of a CSS variable color.\n *\n * @param {string | unknown} backgroundColor The background color to compute.\n *\n * @return {string} The computed background color.\n */\nfunction _getComputedBackgroundColor( backgroundColor ) {\n\tif ( typeof backgroundColor !== 'string' ) return '';\n\n\tif ( isColor( backgroundColor ) ) return backgroundColor;\n\n\tif ( ! backgroundColor.includes( 'var(' ) ) return '';\n\tif ( typeof document === 'undefined' ) return '';\n\n\t// Attempts to gracefully handle CSS variables color values.\n\tconst el = getColorComputationNode();\n\tif ( ! el ) return '';\n\n\tel.style.background = backgroundColor;\n\t// Grab the style.\n\tconst computedColor = window?.getComputedStyle( el ).background;\n\t// Reset.\n\tel.style.background = '';\n\n\treturn computedColor || '';\n}\n\nconst getComputedBackgroundColor = memoize( _getComputedBackgroundColor );\n\n/**\n * Get the text shade optimized for readability, based on a background color.\n *\n * @param {string | unknown} backgroundColor The background color.\n *\n * @return {string} The optimized text color (black or white).\n */\nexport function getOptimalTextColor( backgroundColor ) {\n\tconst background = getComputedBackgroundColor( backgroundColor );\n\n\treturn colord( background ).isLight() ? '#000000' : '#ffffff';\n}\n\n/**\n * Get the text shade optimized for readability, based on a background color.\n *\n * @param {string | unknown} backgroundColor The background color.\n *\n * @return {string} The optimized text shade (dark or light).\n */\nexport function getOptimalTextShade( backgroundColor ) {\n\tconst result = getOptimalTextColor( backgroundColor );\n\n\treturn result === '#000000' ? 'dark' : 'light';\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/ui/utils/colors.js"],"names":["memoize","colord","extend","namesPlugin","colorComputationNode","getColorComputationNode","document","el","createElement","setAttribute","body","appendChild","isColor","value","test","isValid","_getComputedBackgroundColor","backgroundColor","includes","style","background","computedColor","window","getComputedStyle","getComputedBackgroundColor","getOptimalTextColor","isLight","getOptimalTextShade","result"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,OAAP,MAAoB,QAApB;AACA,SAASC,MAAT,EAAiBC,MAAjB,QAA+B,QAA/B;AACA,OAAOC,WAAP,MAAwB,sBAAxB;AAEA;;AACA,IAAIC,oBAAJ;AAEAF,MAAM,CAAE,CAAEC,WAAF,CAAF,CAAN;AAEA;AACA;AACA;;AACA,SAASE,uBAAT,GAAmC;AAClC,MAAK,OAAOC,QAAP,KAAoB,WAAzB,EAAuC;;AAEvC,MAAK,CAAEF,oBAAP,EAA8B;AAC7B;AACA,UAAMG,EAAE,GAAGD,QAAQ,CAACE,aAAT,CAAwB,KAAxB,CAAX;AACAD,IAAAA,EAAE,CAACE,YAAH,CAAiB,gCAAjB,EAAmD,EAAnD,EAH6B,CAI7B;;AACAH,IAAAA,QAAQ,CAACI,IAAT,CAAcC,WAAd,CAA2BJ,EAA3B;AACAH,IAAAA,oBAAoB,GAAGG,EAAvB;AACA;;AAED,SAAOH,oBAAP;AACA;AAED;AACA;AACA;AACA;AACA;;;AACA,SAASQ,OAAT,CAAkBC,KAAlB,EAA0B;AACzB,MAAK,OAAOA,KAAP,KAAiB,QAAtB,EAAiC,OAAO,KAAP;AACjC,QAAMC,IAAI,GAAGb,MAAM,CAAEY,KAAF,CAAnB;AAEA,SAAOC,IAAI,CAACC,OAAL,EAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASC,2BAAT,CAAsCC,eAAtC,EAAwD;AACvD,MAAK,OAAOA,eAAP,KAA2B,QAAhC,EAA2C,OAAO,EAAP;AAE3C,MAAKL,OAAO,CAAEK,eAAF,CAAZ,EAAkC,OAAOA,eAAP;AAElC,MAAK,CAAEA,eAAe,CAACC,QAAhB,CAA0B,MAA1B,CAAP,EAA4C,OAAO,EAAP;AAC5C,MAAK,OAAOZ,QAAP,KAAoB,WAAzB,EAAuC,OAAO,EAAP,CANgB,CAQvD;;AACA,QAAMC,EAAE,GAAGF,uBAAuB,EAAlC;AACA,MAAK,CAAEE,EAAP,EAAY,OAAO,EAAP;AAEZA,EAAAA,EAAE,CAACY,KAAH,CAASC,UAAT,GAAsBH,eAAtB,CAZuD,CAavD;;AACA,QAAMI,aAAa,GAAGC,MAAM,EAAEC,gBAAR,CAA0BhB,EAA1B,EAA+Ba,UAArD,CAduD,CAevD;;AACAb,EAAAA,EAAE,CAACY,KAAH,CAASC,UAAT,GAAsB,EAAtB;AAEA,SAAOC,aAAa,IAAI,EAAxB;AACA;;AAED,MAAMG,0BAA0B,GAAGxB,OAAO,CAAEgB,2BAAF,CAA1C;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASS,mBAAT,CAA8BR,eAA9B,EAAgD;AACtD,QAAMG,UAAU,GAAGI,0BAA0B,CAAEP,eAAF,CAA7C;AAEA,SAAOhB,MAAM,CAAEmB,UAAF,CAAN,CAAqBM,OAArB,KAAiC,SAAjC,GAA6C,SAApD;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,mBAAT,CAA8BV,eAA9B,EAAgD;AACtD,QAAMW,MAAM,GAAGH,mBAAmB,CAAER,eAAF,CAAlC;AAEA,SAAOW,MAAM,KAAK,SAAX,GAAuB,MAAvB,GAAgC,OAAvC;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport memoize from 'memize';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/** @type {HTMLDivElement} */\nlet colorComputationNode;\n\nextend( [ namesPlugin ] );\n\n/**\n * @return {HTMLDivElement | undefined} The HTML element for color computation.\n */\nfunction getColorComputationNode() {\n\tif ( typeof document === 'undefined' ) return;\n\n\tif ( ! colorComputationNode ) {\n\t\t// Create a temporary element for style computation.\n\t\tconst el = document.createElement( 'div' );\n\t\tel.setAttribute( 'data-g2-color-computation-node', '' );\n\t\t// Inject for window computed style.\n\t\tdocument.body.appendChild( el );\n\t\tcolorComputationNode = el;\n\t}\n\n\treturn colorComputationNode;\n}\n\n/**\n * @param {string | unknown} value\n *\n * @return {boolean} Whether the value is a valid color.\n */\nfunction isColor( value ) {\n\tif ( typeof value !== 'string' ) return false;\n\tconst test = colord( value );\n\n\treturn test.isValid();\n}\n\n/**\n * Retrieves the computed background color. This is useful for getting the\n * value of a CSS variable color.\n *\n * @param {string | unknown} backgroundColor The background color to compute.\n *\n * @return {string} The computed background color.\n */\nfunction _getComputedBackgroundColor( backgroundColor ) {\n\tif ( typeof backgroundColor !== 'string' ) return '';\n\n\tif ( isColor( backgroundColor ) ) return backgroundColor;\n\n\tif ( ! backgroundColor.includes( 'var(' ) ) return '';\n\tif ( typeof document === 'undefined' ) return '';\n\n\t// Attempts to gracefully handle CSS variables color values.\n\tconst el = getColorComputationNode();\n\tif ( ! el ) return '';\n\n\tel.style.background = backgroundColor;\n\t// Grab the style.\n\tconst computedColor = window?.getComputedStyle( el ).background;\n\t// Reset.\n\tel.style.background = '';\n\n\treturn computedColor || '';\n}\n\nconst getComputedBackgroundColor = memoize( _getComputedBackgroundColor );\n\n/**\n * Get the text shade optimized for readability, based on a background color.\n *\n * @param {string | unknown} backgroundColor The background color.\n *\n * @return {string} The optimized text color (black or white).\n */\nexport function getOptimalTextColor( backgroundColor ) {\n\tconst background = getComputedBackgroundColor( backgroundColor );\n\n\treturn colord( background ).isLight() ? '#000000' : '#ffffff';\n}\n\n/**\n * Get the text shade optimized for readability, based on a background color.\n *\n * @param {string | unknown} backgroundColor The background color.\n *\n * @return {string} The optimized text shade (dark or light).\n */\nexport function getOptimalTextShade( backgroundColor ) {\n\tconst result = getOptimalTextColor( backgroundColor );\n\n\treturn result === '#000000' ? 'dark' : 'light';\n}\n"]}

package/build-module/ui/utils/font-size.js

@@ -16,9 +16,7 @@ export const PRESET_FONT_SIZES = {
   title: 20
 };
 export const HEADING_FONT_SIZES = [1, 2, 3, 4, 5, 6].flatMap(n => [n, n.toString()]);
-export function getFontSize() {
-  let size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : BASE_FONT_SIZE;
-
+export function getFontSize(size = BASE_FONT_SIZE) {
   if (size in PRESET_FONT_SIZES) {
     return getFontSize(PRESET_FONT_SIZES[size]);
   }
@@ -32,9 +30,7 @@ export function getFontSize() {
   const ratio = `(${size} / ${BASE_FONT_SIZE})`;
   return `calc(${ratio} * ${CONFIG.fontSize})`;
 }
-export function getHeadingFontSize() {
-  let size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 3;
-
+export function getHeadingFontSize(size = 3) {
   if (!HEADING_FONT_SIZES.includes(size)) {
     return getFontSize(size);
   }

package/build-module/ui/utils/font-size.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/utils/font-size.ts"],"names":["CONFIG","BASE_FONT_SIZE","PRESET_FONT_SIZES","body","caption","footnote","largeTitle","subheadline","title","HEADING_FONT_SIZES","flatMap","n","toString","getFontSize","size","parsed","parseFloat","Number","isNaN","ratio","fontSize","getHeadingFontSize","includes","headingSize"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,MAAP,MAAmB,2BAAnB;AAgBA,OAAO,MAAMC,cAAc,GAAG,EAAvB;AAEP,OAAO,MAAMC,iBAAiB,GAAG;AAChCC,EAAAA,IAAI,EAAEF,cAD0B;AAEhCG,EAAAA,OAAO,EAAE,EAFuB;AAGhCC,EAAAA,QAAQ,EAAE,EAHsB;AAIhCC,EAAAA,UAAU,EAAE,EAJoB;AAKhCC,EAAAA,WAAW,EAAE,EALmB;AAMhCC,EAAAA,KAAK,EAAE;AANyB,CAA1B;AASP,OAAO,MAAMC,kBAAkB,GAAG,CAAE,CAAF,EAAK,CAAL,EAAQ,CAAR,EAAW,CAAX,EAAc,CAAd,EAAiB,CAAjB,EAAqBC,OAArB,CAAgCC,CAAF,IAAS,CACxEA,CADwE,EAExEA,CAAC,CAACC,QAAF,EAFwE,CAAvC,CAA3B;AAKP,OAAO,SAASC,WAAT,GAIG;AAAA,MAHTC,IAGS,uEAD2Bb,cAC3B;;AACT,MAAKa,IAAI,IAAIZ,iBAAb,EAAiC;AAChC,WAAOW,WAAW,CACjBX,iBAAiB,CAAEY,IAAF,CADA,CAAlB;AAGA;;AAED,MAAK,OAAOA,IAAP,KAAgB,QAArB,EAAgC;AAC/B,UAAMC,MAAM,GAAGC,UAAU,CAAEF,IAAF,CAAzB;AACA,QAAKG,MAAM,CAACC,KAAP,CAAcH,MAAd,CAAL,EAA8B,OAAOD,IAAP;AAC9BA,IAAAA,IAAI,GAAGC,MAAP;AACA;;AAED,QAAMI,KAAK,GAAI,IAAIL,IAAM,MAAMb,cAAgB,GAA/C;AACA,SAAQ,QAAQkB,KAAO,MAAMnB,MAAM,CAACoB,QAAU,GAA9C;AACA;AAED,OAAO,SAASC,kBAAT,GAA2D;AAAA,MAA9BP,IAA8B,uEAAZ,CAAY;;AACjE,MAAK,CAAEL,kBAAkB,CAACa,QAAnB,CAA6BR,IAA7B,CAAP,EAA4D;AAC3D,WAAOD,WAAW,CAAEC,IAAF,CAAlB;AACA;;AAED,QAAMS,WAAW,GAAI,YAAYT,IAAM,EAAvC;AACA,SAAOd,MAAM,CAAEuB,WAAF,CAAb;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties, ReactText } from 'react';\n\n/**\n * Internal dependencies\n */\nimport CONFIG from '../../utils/config-values';\n\nexport type HeadingSize =\n\t| 1\n\t| 2\n\t| 3\n\t| 4\n\t| 5\n\t| 6\n\t| '1'\n\t| '2'\n\t| '3'\n\t| '4'\n\t| '5'\n\t| '6';\n\nexport const BASE_FONT_SIZE = 13;\n\nexport const PRESET_FONT_SIZES = {\n\tbody: BASE_FONT_SIZE,\n\tcaption: 10,\n\tfootnote: 11,\n\tlargeTitle: 28,\n\tsubheadline: 12,\n\ttitle: 20,\n};\n\nexport const HEADING_FONT_SIZES = [ 1, 2, 3, 4, 5, 6 ].flatMap( ( n ) => [\n\tn as HeadingSize,\n\tn.toString() as HeadingSize,\n] );\n\nexport function getFontSize(\n\tsize:\n\t\t| CSSProperties[ 'fontSize' ]\n\t\t| keyof typeof PRESET_FONT_SIZES = BASE_FONT_SIZE\n): string {\n\tif ( size in PRESET_FONT_SIZES ) {\n\t\treturn getFontSize(\n\t\t\tPRESET_FONT_SIZES[ size as keyof typeof PRESET_FONT_SIZES ]\n\t\t);\n\t}\n\n\tif ( typeof size !== 'number' ) {\n\t\tconst parsed = parseFloat( size );\n\t\tif ( Number.isNaN( parsed ) ) return size;\n\t\tsize = parsed;\n\t}\n\n\tconst ratio = `(${ size } / ${ BASE_FONT_SIZE })`;\n\treturn `calc(${ ratio } * ${ CONFIG.fontSize })`;\n}\n\nexport function getHeadingFontSize( size: ReactText = 3 ): string {\n\tif ( ! HEADING_FONT_SIZES.includes( size as HeadingSize ) ) {\n\t\treturn getFontSize( size );\n\t}\n\n\tconst headingSize = `fontSizeH${ size }` as `fontSizeH${ HeadingSize }`;\n\treturn CONFIG[ headingSize ];\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/ui/utils/font-size.ts"],"names":["CONFIG","BASE_FONT_SIZE","PRESET_FONT_SIZES","body","caption","footnote","largeTitle","subheadline","title","HEADING_FONT_SIZES","flatMap","n","toString","getFontSize","size","parsed","parseFloat","Number","isNaN","ratio","fontSize","getHeadingFontSize","includes","headingSize"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,MAAP,MAAmB,2BAAnB;AAgBA,OAAO,MAAMC,cAAc,GAAG,EAAvB;AAEP,OAAO,MAAMC,iBAAiB,GAAG;AAChCC,EAAAA,IAAI,EAAEF,cAD0B;AAEhCG,EAAAA,OAAO,EAAE,EAFuB;AAGhCC,EAAAA,QAAQ,EAAE,EAHsB;AAIhCC,EAAAA,UAAU,EAAE,EAJoB;AAKhCC,EAAAA,WAAW,EAAE,EALmB;AAMhCC,EAAAA,KAAK,EAAE;AANyB,CAA1B;AASP,OAAO,MAAMC,kBAAkB,GAAG,CAAE,CAAF,EAAK,CAAL,EAAQ,CAAR,EAAW,CAAX,EAAc,CAAd,EAAiB,CAAjB,EAAqBC,OAArB,CAAgCC,CAAF,IAAS,CACxEA,CADwE,EAExEA,CAAC,CAACC,QAAF,EAFwE,CAAvC,CAA3B;AAKP,OAAO,SAASC,WAAT,CACNC,IAEiC,GAAGb,cAH9B,EAIG;AACT,MAAKa,IAAI,IAAIZ,iBAAb,EAAiC;AAChC,WAAOW,WAAW,CACjBX,iBAAiB,CAAEY,IAAF,CADA,CAAlB;AAGA;;AAED,MAAK,OAAOA,IAAP,KAAgB,QAArB,EAAgC;AAC/B,UAAMC,MAAM,GAAGC,UAAU,CAAEF,IAAF,CAAzB;AACA,QAAKG,MAAM,CAACC,KAAP,CAAcH,MAAd,CAAL,EAA8B,OAAOD,IAAP;AAC9BA,IAAAA,IAAI,GAAGC,MAAP;AACA;;AAED,QAAMI,KAAK,GAAI,IAAIL,IAAM,MAAMb,cAAgB,GAA/C;AACA,SAAQ,QAAQkB,KAAO,MAAMnB,MAAM,CAACoB,QAAU,GAA9C;AACA;AAED,OAAO,SAASC,kBAAT,CAA6BP,IAAe,GAAG,CAA/C,EAA2D;AACjE,MAAK,CAAEL,kBAAkB,CAACa,QAAnB,CAA6BR,IAA7B,CAAP,EAA4D;AAC3D,WAAOD,WAAW,CAAEC,IAAF,CAAlB;AACA;;AAED,QAAMS,WAAW,GAAI,YAAYT,IAAM,EAAvC;AACA,SAAOd,MAAM,CAAEuB,WAAF,CAAb;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties, ReactText } from 'react';\n\n/**\n * Internal dependencies\n */\nimport CONFIG from '../../utils/config-values';\n\nexport type HeadingSize =\n\t| 1\n\t| 2\n\t| 3\n\t| 4\n\t| 5\n\t| 6\n\t| '1'\n\t| '2'\n\t| '3'\n\t| '4'\n\t| '5'\n\t| '6';\n\nexport const BASE_FONT_SIZE = 13;\n\nexport const PRESET_FONT_SIZES = {\n\tbody: BASE_FONT_SIZE,\n\tcaption: 10,\n\tfootnote: 11,\n\tlargeTitle: 28,\n\tsubheadline: 12,\n\ttitle: 20,\n};\n\nexport const HEADING_FONT_SIZES = [ 1, 2, 3, 4, 5, 6 ].flatMap( ( n ) => [\n\tn as HeadingSize,\n\tn.toString() as HeadingSize,\n] );\n\nexport function getFontSize(\n\tsize:\n\t\t| CSSProperties[ 'fontSize' ]\n\t\t| keyof typeof PRESET_FONT_SIZES = BASE_FONT_SIZE\n): string {\n\tif ( size in PRESET_FONT_SIZES ) {\n\t\treturn getFontSize(\n\t\t\tPRESET_FONT_SIZES[ size as keyof typeof PRESET_FONT_SIZES ]\n\t\t);\n\t}\n\n\tif ( typeof size !== 'number' ) {\n\t\tconst parsed = parseFloat( size );\n\t\tif ( Number.isNaN( parsed ) ) return size;\n\t\tsize = parsed;\n\t}\n\n\tconst ratio = `(${ size } / ${ BASE_FONT_SIZE })`;\n\treturn `calc(${ ratio } * ${ CONFIG.fontSize })`;\n}\n\nexport function getHeadingFontSize( size: ReactText = 3 ): string {\n\tif ( ! HEADING_FONT_SIZES.includes( size as HeadingSize ) ) {\n\t\treturn getFontSize( size );\n\t}\n\n\tconst headingSize = `fontSizeH${ size }` as `fontSizeH${ HeadingSize }`;\n\treturn CONFIG[ headingSize ];\n}\n"]}

package/build-module/ui/utils/get-high-dpi.js

@@ -3,11 +3,7 @@
  */
 import { css } from '@emotion/react'; // eslint-disable-next-line no-restricted-imports
 
-export function getHighDpi(strings) {
-  for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    interpolations[_key - 1] = arguments[_key];
-  }
-
+export function getHighDpi(strings, ...interpolations) {
   const interpolatedStyles = /*#__PURE__*/css(strings, ...interpolations);
   return /*#__PURE__*/css("@media ( -webkit-min-device-pixel-ratio: 1.25 ),( min-resolution: 120dpi ){", interpolatedStyles, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getHighDpi;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdWkvdXRpbHMvZ2V0LWhpZ2gtZHBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWFXIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdWkvdXRpbHMvZ2V0LWhpZ2gtZHBpLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLXJlc3RyaWN0ZWQtaW1wb3J0c1xuaW1wb3J0IHR5cGUgeyBDU1NJbnRlcnBvbGF0aW9uIH0gZnJvbSAnQGVtb3Rpb24vY3NzJztcblxuZXhwb3J0IGZ1bmN0aW9uIGdldEhpZ2hEcGkoXG5cdHN0cmluZ3M6IFRlbXBsYXRlU3RyaW5nc0FycmF5LFxuXHQuLi5pbnRlcnBvbGF0aW9uczogQ1NTSW50ZXJwb2xhdGlvbltdXG4pIHtcblx0Y29uc3QgaW50ZXJwb2xhdGVkU3R5bGVzID0gY3NzKCBzdHJpbmdzLCAuLi5pbnRlcnBvbGF0aW9ucyApO1xuXG5cdHJldHVybiBjc3NgXG5cdFx0QG1lZGlhICggLXdlYmtpdC1taW4tZGV2aWNlLXBpeGVsLXJhdGlvOiAxLjI1ICksXG5cdFx0XHQoIG1pbi1yZXNvbHV0aW9uOiAxMjBkcGkgKSB7XG5cdFx0XHQkeyBpbnRlcnBvbGF0ZWRTdHlsZXMgfVxuXHRcdH1cblx0YDtcbn1cbiJdfQ== */");
 }

package/build-module/ui/utils/get-high-dpi.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/utils/get-high-dpi.ts"],"names":["css","getHighDpi","strings","interpolations","interpolatedStyles"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB,C,CACA;;AAGA,OAAO,SAASC,UAAT,CACNC,OADM,EAGL;AAAA,oCADEC,cACF;AADEA,IAAAA,cACF;AAAA;;AACD,QAAMC,kBAAkB,gBAAGJ,GAAG,CAAEE,OAAF,EAAW,GAAGC,cAAd,CAA9B;AAEA,sBAAOH,GAAP,gFAGKI,kBAHL;AAMA","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n// eslint-disable-next-line no-restricted-imports\nimport type { CSSInterpolation } from '@emotion/css';\n\nexport function getHighDpi(\n\tstrings: TemplateStringsArray,\n\t...interpolations: CSSInterpolation[]\n) {\n\tconst interpolatedStyles = css( strings, ...interpolations );\n\n\treturn css`\n\t\t@media ( -webkit-min-device-pixel-ratio: 1.25 ),\n\t\t\t( min-resolution: 120dpi ) {\n\t\t\t${ interpolatedStyles }\n\t\t}\n\t`;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/ui/utils/get-high-dpi.ts"],"names":["css","getHighDpi","strings","interpolations","interpolatedStyles"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB,C,CACA;;AAGA,OAAO,SAASC,UAAT,CACNC,OADM,EAEN,GAAGC,cAFG,EAGL;AACD,QAAMC,kBAAkB,gBAAGJ,GAAG,CAAEE,OAAF,EAAW,GAAGC,cAAd,CAA9B;AAEA,sBAAOH,GAAP,gFAGKI,kBAHL;AAMA","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n// eslint-disable-next-line no-restricted-imports\nimport type { CSSInterpolation } from '@emotion/css';\n\nexport function getHighDpi(\n\tstrings: TemplateStringsArray,\n\t...interpolations: CSSInterpolation[]\n) {\n\tconst interpolatedStyles = css( strings, ...interpolations );\n\n\treturn css`\n\t\t@media ( -webkit-min-device-pixel-ratio: 1.25 ),\n\t\t\t( min-resolution: 120dpi ) {\n\t\t\t${ interpolatedStyles }\n\t\t}\n\t`;\n}\n"]}

package/build-module/ui/utils/space.js

@@ -21,8 +21,6 @@ const GRID_BASE = '4px';
  */
 
 export function space(value) {
-  var _window$CSS, _window$CSS$supports;
-
   if (typeof value === 'undefined') {
     return undefined;
   } // Handle empty strings, if it's the number 0 this still works.
@@ -34,7 +32,7 @@ export function space(value) {
 
   const asInt = typeof value === 'number' ? value : Number(value); // Test if the input has a unit, was NaN, or was one of the named CSS values (like `auto`), in which case just use that value.
 
-  if (typeof window !== 'undefined' && (_window$CSS = window.CSS) !== null && _window$CSS !== void 0 && (_window$CSS$supports = _window$CSS.supports) !== null && _window$CSS$supports !== void 0 && _window$CSS$supports.call(_window$CSS, 'margin', value.toString()) || Number.isNaN(asInt)) {
+  if (typeof window !== 'undefined' && window.CSS?.supports?.('margin', value.toString()) || Number.isNaN(asInt)) {
     return value.toString();
   }
 

package/build-module/ui/utils/space.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/utils/space.ts"],"names":["GRID_BASE","space","value","undefined","asInt","Number","window","CSS","supports","toString","isNaN"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAMA,SAAS,GAAG,KAAlB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,KAAT,CAAgBC,KAAhB,EAAyD;AAAA;;AAC/D,MAAK,OAAOA,KAAP,KAAiB,WAAtB,EAAoC;AACnC,WAAOC,SAAP;AACA,GAH8D,CAK/D;;;AACA,MAAK,CAAED,KAAP,EAAe;AACd,WAAO,GAAP;AACA;;AAED,QAAME,KAAK,GAAG,OAAOF,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCG,MAAM,CAAEH,KAAF,CAAxD,CAV+D,CAY/D;;AACA,MACG,OAAOI,MAAP,KAAkB,WAAlB,mBACDA,MAAM,CAACC,GADN,gEACD,YAAYC,QADX,iDACD,uCAAwB,QAAxB,EAAkCN,KAAK,CAACO,QAAN,EAAlC,CADD,IAEAJ,MAAM,CAACK,KAAP,CAAcN,KAAd,CAHD,EAIE;AACD,WAAOF,KAAK,CAACO,QAAN,EAAP;AACA;;AAED,SAAQ,QAAQT,SAAW,MAAME,KAAO,GAAxC;AACA","sourcesContent":["/**\n * The argument value for the `space()` utility function.\n *\n * When this is a number or a numeric string, it will be interpreted as a\n * multiplier for the grid base value (4px). For example, `space( 2 )` will be 8px.\n *\n * Otherwise, it will be interpreted as a literal CSS length value. For example,\n * `space( 'auto' )` will be 'auto', and `space( '2px' )` will be 2px.\n */\nexport type SpaceInput = number | string;\n\nconst GRID_BASE = '4px';\n\n/**\n * A function that handles numbers, numeric strings, and unit values.\n *\n * When given a number or a numeric string, it will return the grid-based\n * value as a factor of GRID_BASE, defined above.\n *\n * When given a unit value or one of the named CSS values like `auto`,\n * it will simply return the value back.\n *\n * @param value A number, numeric string, or a unit value.\n */\nexport function space( value?: SpaceInput ): string | undefined {\n\tif ( typeof value === 'undefined' ) {\n\t\treturn undefined;\n\t}\n\n\t// Handle empty strings, if it's the number 0 this still works.\n\tif ( ! value ) {\n\t\treturn '0';\n\t}\n\n\tconst asInt = typeof value === 'number' ? value : Number( value );\n\n\t// Test if the input has a unit, was NaN, or was one of the named CSS values (like `auto`), in which case just use that value.\n\tif (\n\t\t( typeof window !== 'undefined' &&\n\t\t\twindow.CSS?.supports?.( 'margin', value.toString() ) ) ||\n\t\tNumber.isNaN( asInt )\n\t) {\n\t\treturn value.toString();\n\t}\n\n\treturn `calc(${ GRID_BASE } * ${ value })`;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/ui/utils/space.ts"],"names":["GRID_BASE","space","value","undefined","asInt","Number","window","CSS","supports","toString","isNaN"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAMA,SAAS,GAAG,KAAlB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,KAAT,CAAgBC,KAAhB,EAAyD;AAC/D,MAAK,OAAOA,KAAP,KAAiB,WAAtB,EAAoC;AACnC,WAAOC,SAAP;AACA,GAH8D,CAK/D;;;AACA,MAAK,CAAED,KAAP,EAAe;AACd,WAAO,GAAP;AACA;;AAED,QAAME,KAAK,GAAG,OAAOF,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCG,MAAM,CAAEH,KAAF,CAAxD,CAV+D,CAY/D;;AACA,MACG,OAAOI,MAAP,KAAkB,WAAlB,IACDA,MAAM,CAACC,GAAP,EAAYC,QAAZ,GAAwB,QAAxB,EAAkCN,KAAK,CAACO,QAAN,EAAlC,CADD,IAEAJ,MAAM,CAACK,KAAP,CAAcN,KAAd,CAHD,EAIE;AACD,WAAOF,KAAK,CAACO,QAAN,EAAP;AACA;;AAED,SAAQ,QAAQT,SAAW,MAAME,KAAO,GAAxC;AACA","sourcesContent":["/**\n * The argument value for the `space()` utility function.\n *\n * When this is a number or a numeric string, it will be interpreted as a\n * multiplier for the grid base value (4px). For example, `space( 2 )` will be 8px.\n *\n * Otherwise, it will be interpreted as a literal CSS length value. For example,\n * `space( 'auto' )` will be 'auto', and `space( '2px' )` will be 2px.\n */\nexport type SpaceInput = number | string;\n\nconst GRID_BASE = '4px';\n\n/**\n * A function that handles numbers, numeric strings, and unit values.\n *\n * When given a number or a numeric string, it will return the grid-based\n * value as a factor of GRID_BASE, defined above.\n *\n * When given a unit value or one of the named CSS values like `auto`,\n * it will simply return the value back.\n *\n * @param value A number, numeric string, or a unit value.\n */\nexport function space( value?: SpaceInput ): string | undefined {\n\tif ( typeof value === 'undefined' ) {\n\t\treturn undefined;\n\t}\n\n\t// Handle empty strings, if it's the number 0 this still works.\n\tif ( ! value ) {\n\t\treturn '0';\n\t}\n\n\tconst asInt = typeof value === 'number' ? value : Number( value );\n\n\t// Test if the input has a unit, was NaN, or was one of the named CSS values (like `auto`), in which case just use that value.\n\tif (\n\t\t( typeof window !== 'undefined' &&\n\t\t\twindow.CSS?.supports?.( 'margin', value.toString() ) ) ||\n\t\tNumber.isNaN( asInt )\n\t) {\n\t\treturn value.toString();\n\t}\n\n\treturn `calc(${ GRID_BASE } * ${ value })`;\n}\n"]}

package/build-module/ui/utils/use-responsive-value.js

@@ -3,8 +3,7 @@
  */
 import { useEffect, useState } from '@wordpress/element';
 const breakpoints = ['40em', '52em', '64em'];
-export const useBreakpointIndex = function () {
-  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+export const useBreakpointIndex = (options = {}) => {
   const {
     defaultIndex = 0
   } = options;
@@ -43,8 +42,7 @@ export const useBreakpointIndex = function () {
   }, [value]);
   return value;
 };
-export function useResponsiveValue(values) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+export function useResponsiveValue(values, options = {}) {
   const index = useBreakpointIndex(options); // Allow calling the function with a "normal" value without having to check on the outside.
 
   if (!Array.isArray(values) && typeof values !== 'function') return values;

package/build-module/ui/utils/use-responsive-value.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/utils/use-responsive-value.ts"],"names":["useEffect","useState","breakpoints","useBreakpointIndex","options","defaultIndex","TypeError","length","RangeError","value","setValue","getIndex","filter","bp","window","matchMedia","matches","onResize","newValue","addEventListener","removeEventListener","useResponsiveValue","values","index","Array","isArray","array"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,QAApB,QAAoC,oBAApC;AAEA,MAAMC,WAAW,GAAG,CAAE,MAAF,EAAU,MAAV,EAAkB,MAAlB,CAApB;AAEA,OAAO,MAAMC,kBAAkB,GAAG,YAE7B;AAAA,MADJC,OACI,uEADiC,EACjC;AACJ,QAAM;AAAEC,IAAAA,YAAY,GAAG;AAAjB,MAAuBD,OAA7B;;AAEA,MAAK,OAAOC,YAAP,KAAwB,QAA7B,EAAwC;AACvC,UAAM,IAAIC,SAAJ,CACJ,qDAAqDD,YAAc,KAAK,OAAOA,YAAc,EADzF,CAAN;AAGA,GAJD,MAIO,IAAKA,YAAY,GAAG,CAAf,IAAoBA,YAAY,GAAGH,WAAW,CAACK,MAAZ,GAAqB,CAA7D,EAAiE;AACvE,UAAM,IAAIC,UAAJ,CACJ,oDAAoDN,WAAW,CAACK,MAAQ,2BAA2BF,YAAc,EAD7G,CAAN;AAGA;;AAED,QAAM,CAAEI,KAAF,EAASC,QAAT,IAAsBT,QAAQ,CAAEI,YAAF,CAApC;AAEAL,EAAAA,SAAS,CAAE,MAAM;AAChB,UAAMW,QAAQ,GAAG,MAChBT,WAAW,CAACU,MAAZ,CAAsBC,EAAF,IAAU;AAC7B,aAAO,OAAOC,MAAP,KAAkB,WAAlB,GACJA,MAAM,CAACC,UAAP,CAAoB,0BAA0BF,EAAI,GAAlD,EACCG,OAFG,GAGJ,KAHH;AAIA,KALD,EAKIT,MANL;;AAQA,UAAMU,QAAQ,GAAG,MAAM;AACtB,YAAMC,QAAQ,GAAGP,QAAQ,EAAzB;;AACA,UAAKF,KAAK,KAAKS,QAAf,EAA0B;AACzBR,QAAAA,QAAQ,CAAEQ,QAAF,CAAR;AACA;AACD,KALD;;AAOAD,IAAAA,QAAQ;;AAER,QAAK,OAAOH,MAAP,KAAkB,WAAvB,EAAqC;AACpCA,MAAAA,MAAM,CAACK,gBAAP,CAAyB,QAAzB,EAAmCF,QAAnC;AACA;;AACD,WAAO,MAAM;AACZ,UAAK,OAAOH,MAAP,KAAkB,WAAvB,EAAqC;AACpCA,QAAAA,MAAM,CAACM,mBAAP,CAA4B,QAA5B,EAAsCH,QAAtC;AACA;AACD,KAJD;AAKA,GA1BQ,EA0BN,CAAER,KAAF,CA1BM,CAAT;AA4BA,SAAOA,KAAP;AACA,CA9CM;AAgDP,OAAO,SAASY,kBAAT,CACNC,MADM,EAGU;AAAA,MADhBlB,OACgB,uEADwC,EACxC;AAChB,QAAMmB,KAAK,GAAGpB,kBAAkB,CAAEC,OAAF,CAAhC,CADgB,CAGhB;;AACA,MAAK,CAAEoB,KAAK,CAACC,OAAN,CAAeH,MAAf,CAAF,IAA6B,OAAOA,MAAP,KAAkB,UAApD,EACC,OAAOA,MAAP;AAED,QAAMI,KAAK,GAAGJ,MAAM,IAAI,EAAxB;AAEA;;AACA;AAAO;AAAmBI,IAAAA,KAAK;AAC9B;AACAH,IAAAA,KAAK,IAAIG,KAAK,CAACnB,MAAf,GAAwBmB,KAAK,CAACnB,MAAN,GAAe,CAAvC,GAA2CgB,KAFb;AAA/B;AAIA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\n\nconst breakpoints = [ '40em', '52em', '64em' ];\n\nexport const useBreakpointIndex = (\n\toptions: { defaultIndex?: number } = {}\n) => {\n\tconst { defaultIndex = 0 } = options;\n\n\tif ( typeof defaultIndex !== 'number' ) {\n\t\tthrow new TypeError(\n\t\t\t`Default breakpoint index should be a number. Got: ${ defaultIndex }, ${ typeof defaultIndex }`\n\t\t);\n\t} else if ( defaultIndex < 0 || defaultIndex > breakpoints.length - 1 ) {\n\t\tthrow new RangeError(\n\t\t\t`Default breakpoint index out of range. Theme has ${ breakpoints.length } breakpoints, got index ${ defaultIndex }`\n\t\t);\n\t}\n\n\tconst [ value, setValue ] = useState( defaultIndex );\n\n\tuseEffect( () => {\n\t\tconst getIndex = () =>\n\t\t\tbreakpoints.filter( ( bp ) => {\n\t\t\t\treturn typeof window !== 'undefined'\n\t\t\t\t\t? window.matchMedia( `screen and (min-width: ${ bp })` )\n\t\t\t\t\t\t\t.matches\n\t\t\t\t\t: false;\n\t\t\t} ).length;\n\n\t\tconst onResize = () => {\n\t\t\tconst newValue = getIndex();\n\t\t\tif ( value !== newValue ) {\n\t\t\t\tsetValue( newValue );\n\t\t\t}\n\t\t};\n\n\t\tonResize();\n\n\t\tif ( typeof window !== 'undefined' ) {\n\t\t\twindow.addEventListener( 'resize', onResize );\n\t\t}\n\t\treturn () => {\n\t\t\tif ( typeof window !== 'undefined' ) {\n\t\t\t\twindow.removeEventListener( 'resize', onResize );\n\t\t\t}\n\t\t};\n\t}, [ value ] );\n\n\treturn value;\n};\n\nexport function useResponsiveValue< T >(\n\tvalues: ( T | undefined )[],\n\toptions: Parameters< typeof useBreakpointIndex >[ 0 ] = {}\n): T | undefined {\n\tconst index = useBreakpointIndex( options );\n\n\t// Allow calling the function with a \"normal\" value without having to check on the outside.\n\tif ( ! Array.isArray( values ) && typeof values !== 'function' )\n\t\treturn values;\n\n\tconst array = values || [];\n\n\t/* eslint-disable jsdoc/no-undefined-types */\n\treturn /** @type {T[]} */ array[\n\t\t/* eslint-enable jsdoc/no-undefined-types */\n\t\tindex >= array.length ? array.length - 1 : index\n\t];\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/ui/utils/use-responsive-value.ts"],"names":["useEffect","useState","breakpoints","useBreakpointIndex","options","defaultIndex","TypeError","length","RangeError","value","setValue","getIndex","filter","bp","window","matchMedia","matches","onResize","newValue","addEventListener","removeEventListener","useResponsiveValue","values","index","Array","isArray","array"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,QAApB,QAAoC,oBAApC;AAEA,MAAMC,WAAW,GAAG,CAAE,MAAF,EAAU,MAAV,EAAkB,MAAlB,CAApB;AAEA,OAAO,MAAMC,kBAAkB,GAAG,CACjCC,OAAkC,GAAG,EADJ,KAE7B;AACJ,QAAM;AAAEC,IAAAA,YAAY,GAAG;AAAjB,MAAuBD,OAA7B;;AAEA,MAAK,OAAOC,YAAP,KAAwB,QAA7B,EAAwC;AACvC,UAAM,IAAIC,SAAJ,CACJ,qDAAqDD,YAAc,KAAK,OAAOA,YAAc,EADzF,CAAN;AAGA,GAJD,MAIO,IAAKA,YAAY,GAAG,CAAf,IAAoBA,YAAY,GAAGH,WAAW,CAACK,MAAZ,GAAqB,CAA7D,EAAiE;AACvE,UAAM,IAAIC,UAAJ,CACJ,oDAAoDN,WAAW,CAACK,MAAQ,2BAA2BF,YAAc,EAD7G,CAAN;AAGA;;AAED,QAAM,CAAEI,KAAF,EAASC,QAAT,IAAsBT,QAAQ,CAAEI,YAAF,CAApC;AAEAL,EAAAA,SAAS,CAAE,MAAM;AAChB,UAAMW,QAAQ,GAAG,MAChBT,WAAW,CAACU,MAAZ,CAAsBC,EAAF,IAAU;AAC7B,aAAO,OAAOC,MAAP,KAAkB,WAAlB,GACJA,MAAM,CAACC,UAAP,CAAoB,0BAA0BF,EAAI,GAAlD,EACCG,OAFG,GAGJ,KAHH;AAIA,KALD,EAKIT,MANL;;AAQA,UAAMU,QAAQ,GAAG,MAAM;AACtB,YAAMC,QAAQ,GAAGP,QAAQ,EAAzB;;AACA,UAAKF,KAAK,KAAKS,QAAf,EAA0B;AACzBR,QAAAA,QAAQ,CAAEQ,QAAF,CAAR;AACA;AACD,KALD;;AAOAD,IAAAA,QAAQ;;AAER,QAAK,OAAOH,MAAP,KAAkB,WAAvB,EAAqC;AACpCA,MAAAA,MAAM,CAACK,gBAAP,CAAyB,QAAzB,EAAmCF,QAAnC;AACA;;AACD,WAAO,MAAM;AACZ,UAAK,OAAOH,MAAP,KAAkB,WAAvB,EAAqC;AACpCA,QAAAA,MAAM,CAACM,mBAAP,CAA4B,QAA5B,EAAsCH,QAAtC;AACA;AACD,KAJD;AAKA,GA1BQ,EA0BN,CAAER,KAAF,CA1BM,CAAT;AA4BA,SAAOA,KAAP;AACA,CA9CM;AAgDP,OAAO,SAASY,kBAAT,CACNC,MADM,EAENlB,OAAqD,GAAG,EAFlD,EAGU;AAChB,QAAMmB,KAAK,GAAGpB,kBAAkB,CAAEC,OAAF,CAAhC,CADgB,CAGhB;;AACA,MAAK,CAAEoB,KAAK,CAACC,OAAN,CAAeH,MAAf,CAAF,IAA6B,OAAOA,MAAP,KAAkB,UAApD,EACC,OAAOA,MAAP;AAED,QAAMI,KAAK,GAAGJ,MAAM,IAAI,EAAxB;AAEA;;AACA;AAAO;AAAmBI,IAAAA,KAAK;AAC9B;AACAH,IAAAA,KAAK,IAAIG,KAAK,CAACnB,MAAf,GAAwBmB,KAAK,CAACnB,MAAN,GAAe,CAAvC,GAA2CgB,KAFb;AAA/B;AAIA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\n\nconst breakpoints = [ '40em', '52em', '64em' ];\n\nexport const useBreakpointIndex = (\n\toptions: { defaultIndex?: number } = {}\n) => {\n\tconst { defaultIndex = 0 } = options;\n\n\tif ( typeof defaultIndex !== 'number' ) {\n\t\tthrow new TypeError(\n\t\t\t`Default breakpoint index should be a number. Got: ${ defaultIndex }, ${ typeof defaultIndex }`\n\t\t);\n\t} else if ( defaultIndex < 0 || defaultIndex > breakpoints.length - 1 ) {\n\t\tthrow new RangeError(\n\t\t\t`Default breakpoint index out of range. Theme has ${ breakpoints.length } breakpoints, got index ${ defaultIndex }`\n\t\t);\n\t}\n\n\tconst [ value, setValue ] = useState( defaultIndex );\n\n\tuseEffect( () => {\n\t\tconst getIndex = () =>\n\t\t\tbreakpoints.filter( ( bp ) => {\n\t\t\t\treturn typeof window !== 'undefined'\n\t\t\t\t\t? window.matchMedia( `screen and (min-width: ${ bp })` )\n\t\t\t\t\t\t\t.matches\n\t\t\t\t\t: false;\n\t\t\t} ).length;\n\n\t\tconst onResize = () => {\n\t\t\tconst newValue = getIndex();\n\t\t\tif ( value !== newValue ) {\n\t\t\t\tsetValue( newValue );\n\t\t\t}\n\t\t};\n\n\t\tonResize();\n\n\t\tif ( typeof window !== 'undefined' ) {\n\t\t\twindow.addEventListener( 'resize', onResize );\n\t\t}\n\t\treturn () => {\n\t\t\tif ( typeof window !== 'undefined' ) {\n\t\t\t\twindow.removeEventListener( 'resize', onResize );\n\t\t\t}\n\t\t};\n\t}, [ value ] );\n\n\treturn value;\n};\n\nexport function useResponsiveValue< T >(\n\tvalues: ( T | undefined )[],\n\toptions: Parameters< typeof useBreakpointIndex >[ 0 ] = {}\n): T | undefined {\n\tconst index = useBreakpointIndex( options );\n\n\t// Allow calling the function with a \"normal\" value without having to check on the outside.\n\tif ( ! Array.isArray( values ) && typeof values !== 'function' )\n\t\treturn values;\n\n\tconst array = values || [];\n\n\t/* eslint-disable jsdoc/no-undefined-types */\n\treturn /** @type {T[]} */ array[\n\t\t/* eslint-enable jsdoc/no-undefined-types */\n\t\tindex >= array.length ? array.length - 1 : index\n\t];\n}\n"]}

package/build-module/unit-control/index.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -16,7 +15,6 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 
-import * as inputControlActionTypes from '../input-control/reducer/actions';
 import { ValueInput } from './styles/unit-control-styles';
 import UnitSelectControl from './unit-select-control';
 import { CSS_UNITS, getParsedQuantityAndUnit, getUnitsWithCurrentUnit, getValidParsedQuantityAndUnit } from './utils';
@@ -24,7 +22,7 @@ import { useControlledState } from '../utils/hooks';
 
 function UnforwardedUnitControl(unitControlProps, forwardedRef) {
   const {
-    __unstableStateReducer: stateReducerProp,
+    __unstableStateReducer,
     autoComplete = 'off',
     // @ts-expect-error Ensure that children is omitted from restProps
     children,
@@ -41,7 +39,6 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
     unit: unitProp,
     units: unitsProp = CSS_UNITS,
     value: valueProp,
-    onBlur: onBlurProp,
     onFocus: onFocusProp,
     ...props
   } = unitControlProps;
@@ -58,7 +55,19 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
 
 
   const nonNullValueProp = valueProp !== null && valueProp !== void 0 ? valueProp : undefined;
-  const units = useMemo(() => getUnitsWithCurrentUnit(nonNullValueProp, unitProp, unitsProp), [nonNullValueProp, unitProp, unitsProp]);
+  const [units, reFirstCharacterOfUnits] = useMemo(() => {
+    const list = getUnitsWithCurrentUnit(nonNullValueProp, unitProp, unitsProp);
+    const [{
+      value: firstUnitValue = ''
+    } = {}, ...rest] = list;
+    const firstCharacters = rest.reduce((carry, {
+      value
+    }) => {
+      const first = value?.substring(0, 1) || '';
+      return carry.includes(first) ? carry : `${carry}|${first}`;
+    }, firstUnitValue.substring(0, 1));
+    return [list, new RegExp(`^(?:${firstCharacters})$`, 'i')];
+  }, [nonNullValueProp, unitProp, unitsProp]);
   const [parsedQuantity, parsedUnit] = getParsedQuantityAndUnit(nonNullValueProp, unitProp, units);
   const [unit, setUnit] = useControlledState(units.length === 1 ? units[0].value : unitProp, {
     initial: parsedUnit,
@@ -68,16 +77,14 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
     if (parsedUnit !== undefined) {
       setUnit(parsedUnit);
     }
-  }, [parsedUnit, setUnit]); // Stores parsed value for hand-off in state reducer.
-
-  const refParsedQuantity = useRef(undefined);
+  }, [parsedUnit, setUnit]);
   const classes = classnames('components-unit-control', // This class is added for legacy purposes to maintain it on the outer
   // wrapper. See: https://github.com/WordPress/gutenberg/pull/45139
   'components-unit-control-wrapper', className);
 
   const handleOnQuantityChange = (nextQuantityValue, changeProps) => {
     if (nextQuantityValue === '' || typeof nextQuantityValue === 'undefined' || nextQuantityValue === null) {
-      onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp('', changeProps);
+      onChangeProp?.('', changeProps);
       return;
     }
     /*
@@ -87,7 +94,7 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
 
 
     const onChangeValue = getValidParsedQuantityAndUnit(nextQuantityValue, units, parsedQuantity, unit).join('');
-    onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(onChangeValue, changeProps);
+    onChangeProp?.(onChangeValue, changeProps);
   };
 
   const handleOnUnitChange = (nextUnitValue, changeProps) => {
@@ -96,92 +103,30 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
     } = changeProps;
     let nextValue = `${parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : ''}${nextUnitValue}`;
 
-    if (isResetValueOnUnitChange && (data === null || data === void 0 ? void 0 : data.default) !== undefined) {
+    if (isResetValueOnUnitChange && data?.default !== undefined) {
       nextValue = `${data.default}${nextUnitValue}`;
     }
 
-    onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(nextValue, changeProps);
-    onUnitChange === null || onUnitChange === void 0 ? void 0 : onUnitChange(nextUnitValue, changeProps);
+    onChangeProp?.(nextValue, changeProps);
+    onUnitChange?.(nextUnitValue, changeProps);
     setUnit(nextUnitValue);
   };
 
-  const mayUpdateUnit = event => {
-    if (!isNaN(Number(event.currentTarget.value))) {
-      refParsedQuantity.current = undefined;
-      return;
-    }
-
-    const [validParsedQuantity, validParsedUnit] = getValidParsedQuantityAndUnit(event.currentTarget.value, units, parsedQuantity, unit);
-    refParsedQuantity.current = validParsedQuantity;
-
-    if (isPressEnterToChange && validParsedUnit !== unit) {
-      const data = Array.isArray(units) ? units.find(option => option.value === validParsedUnit) : undefined;
-      const changeProps = {
-        event,
-        data
-      }; // The `onChange` callback already gets called, no need to call it explicitly.
-
-      onUnitChange === null || onUnitChange === void 0 ? void 0 : onUnitChange(validParsedUnit, changeProps);
-      setUnit(validParsedUnit);
-    }
-  };
+  let handleOnKeyDown;
 
-  const handleOnBlur = event => {
-    mayUpdateUnit(event);
-    onBlurProp === null || onBlurProp === void 0 ? void 0 : onBlurProp(event);
-  };
-
-  const handleOnKeyDown = event => {
-    const {
-      key
-    } = event;
-
-    if (key === 'Enter') {
-      mayUpdateUnit(event);
-    }
-  };
-  /**
-   * "Middleware" function that intercepts updates from InputControl.
-   * This allows us to tap into actions to transform the (next) state for
-   * InputControl.
-   *
-   * @param state  State from InputControl
-   * @param action Action triggering state change
-   * @return The updated state to apply to InputControl
-   */
+  if (!disableUnits && isUnitSelectTabbable && units.length) {
+    handleOnKeyDown = event => {
+      props.onKeyDown?.(event); // Unless the meta key was pressed (to avoid interfering with
+      // shortcuts, e.g. pastes), moves focus to the unit select if a key
+      // matches the first character of a unit.
 
-
-  const unitControlStateReducer = (state, action) => {
-    const nextState = { ...state
-    };
-    /*
-     * On commits (when pressing ENTER and on blur if
-     * isPressEnterToChange is true), if a parse has been performed
-     * then use that result to update the state.
-     */
-
-    if (action.type === inputControlActionTypes.COMMIT) {
-      if (refParsedQuantity.current !== undefined) {
-        var _refParsedQuantity$cu;
-
-        nextState.value = ((_refParsedQuantity$cu = refParsedQuantity.current) !== null && _refParsedQuantity$cu !== void 0 ? _refParsedQuantity$cu : '').toString();
-        refParsedQuantity.current = undefined;
-      }
-    }
-
-    return nextState;
-  };
-
-  let stateReducer = unitControlStateReducer;
-
-  if (stateReducerProp) {
-    stateReducer = (state, action) => {
-      const baseState = unitControlStateReducer(state, action);
-      return stateReducerProp(baseState, action);
+      if (!event.metaKey && reFirstCharacterOfUnits.test(event.key)) refInputSuffix.current?.focus();
     };
   }
 
+  const refInputSuffix = useRef(null);
   const inputSuffix = !disableUnits ? createElement(UnitSelectControl, {
+    ref: refInputSuffix,
     "aria-label": __('Select unit'),
     disabled: disabled,
     isUnitSelectTabbable: isUnitSelectTabbable,
@@ -189,8 +134,8 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
     size: size,
     unit: unit,
     units: units,
-    onBlur: onBlurProp,
-    onFocus: onFocusProp
+    onFocus: onFocusProp,
+    onBlur: unitControlProps.onBlur
   }) : null;
   let step = props.step;
   /*
@@ -202,29 +147,27 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
     var _activeUnit$step;
 
     const activeUnit = units.find(option => option.value === unit);
-    step = (_activeUnit$step = activeUnit === null || activeUnit === void 0 ? void 0 : activeUnit.step) !== null && _activeUnit$step !== void 0 ? _activeUnit$step : 1;
+    step = (_activeUnit$step = activeUnit?.step) !== null && _activeUnit$step !== void 0 ? _activeUnit$step : 1;
   }
 
-  return createElement(ValueInput, _extends({
-    type: isPressEnterToChange ? 'text' : 'number'
-  }, props, {
+  return createElement(ValueInput, { ...props,
     autoComplete: autoComplete,
     className: classes,
     disabled: disabled,
     spinControls: "none",
     isPressEnterToChange: isPressEnterToChange,
     label: label,
-    onBlur: handleOnBlur,
     onKeyDown: handleOnKeyDown,
     onChange: handleOnQuantityChange,
     ref: forwardedRef,
     size: size,
     suffix: inputSuffix,
+    type: isPressEnterToChange ? 'text' : 'number',
     value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : '',
     step: step,
-    __unstableStateReducer: stateReducer,
-    onFocus: onFocusProp
-  }));
+    onFocus: onFocusProp,
+    __unstableStateReducer: __unstableStateReducer
+  });
 }
 /**
  * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).

package/build-module/unit-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/unit-control/index.tsx"],"names":["classnames","deprecated","forwardRef","useMemo","useRef","useEffect","__","inputControlActionTypes","ValueInput","UnitSelectControl","CSS_UNITS","getParsedQuantityAndUnit","getUnitsWithCurrentUnit","getValidParsedQuantityAndUnit","useControlledState","UnforwardedUnitControl","unitControlProps","forwardedRef","__unstableStateReducer","stateReducerProp","autoComplete","children","className","disabled","disableUnits","isPressEnterToChange","isResetValueOnUnitChange","isUnitSelectTabbable","label","onChange","onChangeProp","onUnitChange","size","unit","unitProp","units","unitsProp","value","valueProp","onBlur","onBlurProp","onFocus","onFocusProp","props","since","hint","version","nonNullValueProp","undefined","parsedQuantity","parsedUnit","setUnit","length","initial","fallback","refParsedQuantity","classes","handleOnQuantityChange","nextQuantityValue","changeProps","onChangeValue","join","handleOnUnitChange","nextUnitValue","data","nextValue","default","mayUpdateUnit","event","isNaN","Number","currentTarget","current","validParsedQuantity","validParsedUnit","Array","isArray","find","option","handleOnBlur","handleOnKeyDown","key","unitControlStateReducer","state","action","nextState","type","COMMIT","toString","stateReducer","baseState","inputSuffix","step","activeUnit","UnitControl","parseQuantityAndUnitFromRawValue","useCustomUnits"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tFocusEventHandler,\n\tKeyboardEvent,\n\tForwardedRef,\n\tSyntheticEvent,\n} from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport * as inputControlActionTypes from '../input-control/reducer/actions';\nimport { ValueInput } from './styles/unit-control-styles';\nimport UnitSelectControl from './unit-select-control';\nimport {\n\tCSS_UNITS,\n\tgetParsedQuantityAndUnit,\n\tgetUnitsWithCurrentUnit,\n\tgetValidParsedQuantityAndUnit,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type { UnitControlProps, UnitControlOnChangeCallback } from './types';\nimport type { StateReducer } from '../input-control/reducer/state';\n\nfunction UnforwardedUnitControl(\n\tunitControlProps: WordPressComponentProps<\n\t\tUnitControlProps,\n\t\t'input',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__unstableStateReducer: stateReducerProp,\n\t\tautoComplete = 'off',\n\t\t// @ts-expect-error Ensure that children is omitted from restProps\n\t\tchildren,\n\t\tclassName,\n\t\tdisabled = false,\n\t\tdisableUnits = false,\n\t\tisPressEnterToChange = false,\n\t\tisResetValueOnUnitChange = false,\n\t\tisUnitSelectTabbable = true,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tonUnitChange,\n\t\tsize = 'default',\n\t\tunit: unitProp,\n\t\tunits: unitsProp = CSS_UNITS,\n\t\tvalue: valueProp,\n\t\tonBlur: onBlurProp,\n\t\tonFocus: onFocusProp,\n\t\t...props\n\t} = unitControlProps;\n\n\tif ( 'unit' in unitControlProps ) {\n\t\tdeprecated( 'UnitControl unit prop', {\n\t\t\tsince: '5.6',\n\t\t\thint: 'The unit should be provided within the `value` prop.',\n\t\t\tversion: '6.2',\n\t\t} );\n\t}\n\n\t// The `value` prop, in theory, should not be `null`, but the following line\n\t// ensures it fallback to `undefined` in case a consumer of `UnitControl`\n\t// still passes `null` as a `value`.\n\tconst nonNullValueProp = valueProp ?? undefined;\n\tconst units = useMemo(\n\t\t() => getUnitsWithCurrentUnit( nonNullValueProp, unitProp, unitsProp ),\n\t\t[ nonNullValueProp, unitProp, unitsProp ]\n\t);\n\tconst [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(\n\t\tnonNullValueProp,\n\t\tunitProp,\n\t\tunits\n\t);\n\n\tconst [ unit, setUnit ] = useControlledState< string | undefined >(\n\t\tunits.length === 1 ? units[ 0 ].value : unitProp,\n\t\t{\n\t\t\tinitial: parsedUnit,\n\t\t\tfallback: '',\n\t\t}\n\t);\n\n\tuseEffect( () => {\n\t\tif ( parsedUnit !== undefined ) {\n\t\t\tsetUnit( parsedUnit );\n\t\t}\n\t}, [ parsedUnit, setUnit ] );\n\n\t// Stores parsed value for hand-off in state reducer.\n\tconst refParsedQuantity = useRef< number | undefined >( undefined );\n\n\tconst classes = classnames(\n\t\t'components-unit-control',\n\t\t// This class is added for legacy purposes to maintain it on the outer\n\t\t// wrapper. See: https://github.com/WordPress/gutenberg/pull/45139\n\t\t'components-unit-control-wrapper',\n\t\tclassName\n\t);\n\n\tconst handleOnQuantityChange = (\n\t\tnextQuantityValue: number | string | undefined,\n\t\tchangeProps: {\n\t\t\tevent: SyntheticEvent;\n\t\t}\n\t) => {\n\t\tif (\n\t\t\tnextQuantityValue === '' ||\n\t\t\ttypeof nextQuantityValue === 'undefined' ||\n\t\t\tnextQuantityValue === null\n\t\t) {\n\t\t\tonChangeProp?.( '', changeProps );\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * Customizing the onChange callback.\n\t\t * This allows as to broadcast a combined value+unit to onChange.\n\t\t */\n\t\tconst onChangeValue = getValidParsedQuantityAndUnit(\n\t\t\tnextQuantityValue,\n\t\t\tunits,\n\t\t\tparsedQuantity,\n\t\t\tunit\n\t\t).join( '' );\n\n\t\tonChangeProp?.( onChangeValue, changeProps );\n\t};\n\n\tconst handleOnUnitChange: UnitControlOnChangeCallback = (\n\t\tnextUnitValue,\n\t\tchangeProps\n\t) => {\n\t\tconst { data } = changeProps;\n\n\t\tlet nextValue = `${ parsedQuantity ?? '' }${ nextUnitValue }`;\n\n\t\tif ( isResetValueOnUnitChange && data?.default !== undefined ) {\n\t\t\tnextValue = `${ data.default }${ nextUnitValue }`;\n\t\t}\n\n\t\tonChangeProp?.( nextValue, changeProps );\n\t\tonUnitChange?.( nextUnitValue, changeProps );\n\n\t\tsetUnit( nextUnitValue );\n\t};\n\n\tconst mayUpdateUnit = ( event: SyntheticEvent< HTMLInputElement > ) => {\n\t\tif ( ! isNaN( Number( event.currentTarget.value ) ) ) {\n\t\t\trefParsedQuantity.current = undefined;\n\t\t\treturn;\n\t\t}\n\t\tconst [ validParsedQuantity, validParsedUnit ] =\n\t\t\tgetValidParsedQuantityAndUnit(\n\t\t\t\tevent.currentTarget.value,\n\t\t\t\tunits,\n\t\t\t\tparsedQuantity,\n\t\t\t\tunit\n\t\t\t);\n\n\t\trefParsedQuantity.current = validParsedQuantity;\n\n\t\tif ( isPressEnterToChange && validParsedUnit !== unit ) {\n\t\t\tconst data = Array.isArray( units )\n\t\t\t\t? units.find( ( option ) => option.value === validParsedUnit )\n\t\t\t\t: undefined;\n\t\t\tconst changeProps = { event, data };\n\n\t\t\t// The `onChange` callback already gets called, no need to call it explicitly.\n\t\t\tonUnitChange?.( validParsedUnit, changeProps );\n\n\t\t\tsetUnit( validParsedUnit );\n\t\t}\n\t};\n\n\tconst handleOnBlur: FocusEventHandler< HTMLInputElement > = ( event ) => {\n\t\tmayUpdateUnit( event );\n\t\tonBlurProp?.( event );\n\t};\n\n\tconst handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\tconst { key } = event;\n\t\tif ( key === 'Enter' ) {\n\t\t\tmayUpdateUnit( event );\n\t\t}\n\t};\n\n\t/**\n\t * \"Middleware\" function that intercepts updates from InputControl.\n\t * This allows us to tap into actions to transform the (next) state for\n\t * InputControl.\n\t *\n\t * @param state  State from InputControl\n\t * @param action Action triggering state change\n\t * @return The updated state to apply to InputControl\n\t */\n\tconst unitControlStateReducer: StateReducer = ( state, action ) => {\n\t\tconst nextState = { ...state };\n\n\t\t/*\n\t\t * On commits (when pressing ENTER and on blur if\n\t\t * isPressEnterToChange is true), if a parse has been performed\n\t\t * then use that result to update the state.\n\t\t */\n\t\tif ( action.type === inputControlActionTypes.COMMIT ) {\n\t\t\tif ( refParsedQuantity.current !== undefined ) {\n\t\t\t\tnextState.value = (\n\t\t\t\t\trefParsedQuantity.current ?? ''\n\t\t\t\t).toString();\n\t\t\t\trefParsedQuantity.current = undefined;\n\t\t\t}\n\t\t}\n\n\t\treturn nextState;\n\t};\n\n\tlet stateReducer: StateReducer = unitControlStateReducer;\n\tif ( stateReducerProp ) {\n\t\tstateReducer = ( state, action ) => {\n\t\t\tconst baseState = unitControlStateReducer( state, action );\n\t\t\treturn stateReducerProp( baseState, action );\n\t\t};\n\t}\n\n\tconst inputSuffix = ! disableUnits ? (\n\t\t<UnitSelectControl\n\t\t\taria-label={ __( 'Select unit' ) }\n\t\t\tdisabled={ disabled }\n\t\t\tisUnitSelectTabbable={ isUnitSelectTabbable }\n\t\t\tonChange={ handleOnUnitChange }\n\t\t\tsize={ size }\n\t\t\tunit={ unit }\n\t\t\tunits={ units }\n\t\t\tonBlur={ onBlurProp }\n\t\t\tonFocus={ onFocusProp }\n\t\t/>\n\t) : null;\n\n\tlet step = props.step;\n\n\t/*\n\t * If no step prop has been passed, lookup the active unit and\n\t * try to get step from `units`, or default to a value of `1`\n\t */\n\tif ( ! step && units ) {\n\t\tconst activeUnit = units.find( ( option ) => option.value === unit );\n\t\tstep = activeUnit?.step ?? 1;\n\t}\n\n\treturn (\n\t\t<ValueInput\n\t\t\ttype={ isPressEnterToChange ? 'text' : 'number' }\n\t\t\t{ ...props }\n\t\t\tautoComplete={ autoComplete }\n\t\t\tclassName={ classes }\n\t\t\tdisabled={ disabled }\n\t\t\tspinControls=\"none\"\n\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\tlabel={ label }\n\t\t\tonBlur={ handleOnBlur }\n\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\tonChange={ handleOnQuantityChange }\n\t\t\tref={ forwardedRef }\n\t\t\tsize={ size }\n\t\t\tsuffix={ inputSuffix }\n\t\t\tvalue={ parsedQuantity ?? '' }\n\t\t\tstep={ step }\n\t\t\t__unstableStateReducer={ stateReducer }\n\t\t\tonFocus={ onFocusProp }\n\t\t/>\n\t);\n}\n\n/**\n * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).\n *\n *\n * @example\n * ```jsx\n * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n *   const [ value, setValue ] = useState( '10px' );\n *\n *   return <UnitControl onChange={ setValue } value={ value } />;\n * };\n * ```\n */\nexport const UnitControl = forwardRef( UnforwardedUnitControl );\n\nexport { parseQuantityAndUnitFromRawValue, useCustomUnits } from './utils';\nexport default UnitControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/unit-control/index.tsx"],"names":["classnames","deprecated","forwardRef","useMemo","useRef","useEffect","__","ValueInput","UnitSelectControl","CSS_UNITS","getParsedQuantityAndUnit","getUnitsWithCurrentUnit","getValidParsedQuantityAndUnit","useControlledState","UnforwardedUnitControl","unitControlProps","forwardedRef","__unstableStateReducer","autoComplete","children","className","disabled","disableUnits","isPressEnterToChange","isResetValueOnUnitChange","isUnitSelectTabbable","label","onChange","onChangeProp","onUnitChange","size","unit","unitProp","units","unitsProp","value","valueProp","onFocus","onFocusProp","props","since","hint","version","nonNullValueProp","undefined","reFirstCharacterOfUnits","list","firstUnitValue","rest","firstCharacters","reduce","carry","first","substring","includes","RegExp","parsedQuantity","parsedUnit","setUnit","length","initial","fallback","classes","handleOnQuantityChange","nextQuantityValue","changeProps","onChangeValue","join","handleOnUnitChange","nextUnitValue","data","nextValue","default","handleOnKeyDown","event","onKeyDown","metaKey","test","key","refInputSuffix","current","focus","inputSuffix","onBlur","step","activeUnit","find","option","UnitControl","parseQuantityAndUnitFromRawValue","useCustomUnits"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { KeyboardEvent, ForwardedRef, SyntheticEvent } from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport { ValueInput } from './styles/unit-control-styles';\nimport UnitSelectControl from './unit-select-control';\nimport {\n\tCSS_UNITS,\n\tgetParsedQuantityAndUnit,\n\tgetUnitsWithCurrentUnit,\n\tgetValidParsedQuantityAndUnit,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type { UnitControlProps, UnitControlOnChangeCallback } from './types';\n\nfunction UnforwardedUnitControl(\n\tunitControlProps: WordPressComponentProps<\n\t\tUnitControlProps,\n\t\t'input',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__unstableStateReducer,\n\t\tautoComplete = 'off',\n\t\t// @ts-expect-error Ensure that children is omitted from restProps\n\t\tchildren,\n\t\tclassName,\n\t\tdisabled = false,\n\t\tdisableUnits = false,\n\t\tisPressEnterToChange = false,\n\t\tisResetValueOnUnitChange = false,\n\t\tisUnitSelectTabbable = true,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tonUnitChange,\n\t\tsize = 'default',\n\t\tunit: unitProp,\n\t\tunits: unitsProp = CSS_UNITS,\n\t\tvalue: valueProp,\n\t\tonFocus: onFocusProp,\n\t\t...props\n\t} = unitControlProps;\n\n\tif ( 'unit' in unitControlProps ) {\n\t\tdeprecated( 'UnitControl unit prop', {\n\t\t\tsince: '5.6',\n\t\t\thint: 'The unit should be provided within the `value` prop.',\n\t\t\tversion: '6.2',\n\t\t} );\n\t}\n\n\t// The `value` prop, in theory, should not be `null`, but the following line\n\t// ensures it fallback to `undefined` in case a consumer of `UnitControl`\n\t// still passes `null` as a `value`.\n\tconst nonNullValueProp = valueProp ?? undefined;\n\tconst [ units, reFirstCharacterOfUnits ] = useMemo( () => {\n\t\tconst list = getUnitsWithCurrentUnit(\n\t\t\tnonNullValueProp,\n\t\t\tunitProp,\n\t\t\tunitsProp\n\t\t);\n\t\tconst [ { value: firstUnitValue = '' } = {}, ...rest ] = list;\n\t\tconst firstCharacters = rest.reduce( ( carry, { value } ) => {\n\t\t\tconst first = value?.substring( 0, 1 ) || '';\n\t\t\treturn carry.includes( first ) ? carry : `${ carry }|${ first }`;\n\t\t}, firstUnitValue.substring( 0, 1 ) );\n\t\treturn [ list, new RegExp( `^(?:${ firstCharacters })$`, 'i' ) ];\n\t}, [ nonNullValueProp, unitProp, unitsProp ] );\n\tconst [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(\n\t\tnonNullValueProp,\n\t\tunitProp,\n\t\tunits\n\t);\n\n\tconst [ unit, setUnit ] = useControlledState< string | undefined >(\n\t\tunits.length === 1 ? units[ 0 ].value : unitProp,\n\t\t{\n\t\t\tinitial: parsedUnit,\n\t\t\tfallback: '',\n\t\t}\n\t);\n\n\tuseEffect( () => {\n\t\tif ( parsedUnit !== undefined ) {\n\t\t\tsetUnit( parsedUnit );\n\t\t}\n\t}, [ parsedUnit, setUnit ] );\n\n\tconst classes = classnames(\n\t\t'components-unit-control',\n\t\t// This class is added for legacy purposes to maintain it on the outer\n\t\t// wrapper. See: https://github.com/WordPress/gutenberg/pull/45139\n\t\t'components-unit-control-wrapper',\n\t\tclassName\n\t);\n\n\tconst handleOnQuantityChange = (\n\t\tnextQuantityValue: number | string | undefined,\n\t\tchangeProps: {\n\t\t\tevent: SyntheticEvent;\n\t\t}\n\t) => {\n\t\tif (\n\t\t\tnextQuantityValue === '' ||\n\t\t\ttypeof nextQuantityValue === 'undefined' ||\n\t\t\tnextQuantityValue === null\n\t\t) {\n\t\t\tonChangeProp?.( '', changeProps );\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * Customizing the onChange callback.\n\t\t * This allows as to broadcast a combined value+unit to onChange.\n\t\t */\n\t\tconst onChangeValue = getValidParsedQuantityAndUnit(\n\t\t\tnextQuantityValue,\n\t\t\tunits,\n\t\t\tparsedQuantity,\n\t\t\tunit\n\t\t).join( '' );\n\n\t\tonChangeProp?.( onChangeValue, changeProps );\n\t};\n\n\tconst handleOnUnitChange: UnitControlOnChangeCallback = (\n\t\tnextUnitValue,\n\t\tchangeProps\n\t) => {\n\t\tconst { data } = changeProps;\n\n\t\tlet nextValue = `${ parsedQuantity ?? '' }${ nextUnitValue }`;\n\n\t\tif ( isResetValueOnUnitChange && data?.default !== undefined ) {\n\t\t\tnextValue = `${ data.default }${ nextUnitValue }`;\n\t\t}\n\n\t\tonChangeProp?.( nextValue, changeProps );\n\t\tonUnitChange?.( nextUnitValue, changeProps );\n\n\t\tsetUnit( nextUnitValue );\n\t};\n\n\tlet handleOnKeyDown;\n\tif ( ! disableUnits && isUnitSelectTabbable && units.length ) {\n\t\thandleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\t\tprops.onKeyDown?.( event );\n\t\t\t// Unless the meta key was pressed (to avoid interfering with\n\t\t\t// shortcuts, e.g. pastes), moves focus to the unit select if a key\n\t\t\t// matches the first character of a unit.\n\t\t\tif ( ! event.metaKey && reFirstCharacterOfUnits.test( event.key ) )\n\t\t\t\trefInputSuffix.current?.focus();\n\t\t};\n\t}\n\n\tconst refInputSuffix = useRef< HTMLSelectElement >( null );\n\tconst inputSuffix = ! disableUnits ? (\n\t\t<UnitSelectControl\n\t\t\tref={ refInputSuffix }\n\t\t\taria-label={ __( 'Select unit' ) }\n\t\t\tdisabled={ disabled }\n\t\t\tisUnitSelectTabbable={ isUnitSelectTabbable }\n\t\t\tonChange={ handleOnUnitChange }\n\t\t\tsize={ size }\n\t\t\tunit={ unit }\n\t\t\tunits={ units }\n\t\t\tonFocus={ onFocusProp }\n\t\t\tonBlur={ unitControlProps.onBlur }\n\t\t/>\n\t) : null;\n\n\tlet step = props.step;\n\n\t/*\n\t * If no step prop has been passed, lookup the active unit and\n\t * try to get step from `units`, or default to a value of `1`\n\t */\n\tif ( ! step && units ) {\n\t\tconst activeUnit = units.find( ( option ) => option.value === unit );\n\t\tstep = activeUnit?.step ?? 1;\n\t}\n\n\treturn (\n\t\t<ValueInput\n\t\t\t{ ...props }\n\t\t\tautoComplete={ autoComplete }\n\t\t\tclassName={ classes }\n\t\t\tdisabled={ disabled }\n\t\t\tspinControls=\"none\"\n\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\tlabel={ label }\n\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\tonChange={ handleOnQuantityChange }\n\t\t\tref={ forwardedRef }\n\t\t\tsize={ size }\n\t\t\tsuffix={ inputSuffix }\n\t\t\ttype={ isPressEnterToChange ? 'text' : 'number' }\n\t\t\tvalue={ parsedQuantity ?? '' }\n\t\t\tstep={ step }\n\t\t\tonFocus={ onFocusProp }\n\t\t\t__unstableStateReducer={ __unstableStateReducer }\n\t\t/>\n\t);\n}\n\n/**\n * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).\n *\n *\n * @example\n * ```jsx\n * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n *   const [ value, setValue ] = useState( '10px' );\n *\n *   return <UnitControl onChange={ setValue } value={ value } />;\n * };\n * ```\n */\nexport const UnitControl = forwardRef( UnforwardedUnitControl );\n\nexport { parseQuantityAndUnitFromRawValue, useCustomUnits } from './utils';\nexport default UnitControl;\n"]}