@wordpress/components 17.0.0 → 19.0.2

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

@@ -1,2 +1,2 @@
-
+export {};
 //# sourceMappingURL=types.js.map

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

@@ -2,10 +2,12 @@
  * External dependencies
  */
 import memoize from 'memize';
-import tinycolor from 'tinycolor2';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
 /** @type {HTMLDivElement} */
 
 let colorComputationNode;
+extend([namesPlugin]);
 /**
  * @return {HTMLDivElement | undefined} The HTML element for color computation.
  */
@@ -33,7 +35,7 @@ function getColorComputationNode() {
 
 function isColor(value) {
   if (typeof value !== 'string') return false;
-  const test = tinycolor(value);
+  const test = colord(value);
   return test.isValid();
 }
 /**
@@ -75,8 +77,7 @@ const getComputedBackgroundColor = memoize(_getComputedBackgroundColor);
 
 export function getOptimalTextColor(backgroundColor) {
   const background = getComputedBackgroundColor(backgroundColor);
-  const isReadableWithBlackText = tinycolor.isReadable(background, '#000000');
-  return isReadableWithBlackText ? '#000000' : '#ffffff';
+  return colord(background).isLight() ? '#000000' : '#ffffff';
 }
 /**
  * Get the text shade optimized for readability, based on a background color.

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/utils/colors.js"],"names":["memoize","tinycolor","colorComputationNode","getColorComputationNode","document","el","createElement","setAttribute","body","appendChild","isColor","value","test","isValid","_getComputedBackgroundColor","backgroundColor","includes","style","background","computedColor","window","getComputedStyle","getComputedBackgroundColor","getOptimalTextColor","isReadableWithBlackText","isReadable","getOptimalTextShade","result"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,OAAP,MAAoB,QAApB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA;;AACA,IAAIC,oBAAJ;AAEA;AACA;AACA;;AACA,SAASC,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,GAAGX,SAAS,CAAEU,KAAF,CAAtB;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,GAAGtB,OAAO,CAAEc,2BAAF,CAA1C;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASS,mBAAT,CAA8BR,eAA9B,EAAgD;AACtD,QAAMG,UAAU,GAAGI,0BAA0B,CAAEP,eAAF,CAA7C;AACA,QAAMS,uBAAuB,GAAGvB,SAAS,CAACwB,UAAV,CAC/BP,UAD+B,EAE/B,SAF+B,CAAhC;AAKA,SAAOM,uBAAuB,GAAG,SAAH,GAAe,SAA7C;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASE,mBAAT,CAA8BX,eAA9B,EAAgD;AACtD,QAAMY,MAAM,GAAGJ,mBAAmB,CAAER,eAAF,CAAlC;AAEA,SAAOY,MAAM,KAAK,SAAX,GAAuB,MAAvB,GAAgC,OAAvC;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport memoize from 'memize';\nimport tinycolor from 'tinycolor2';\n\n/** @type {HTMLDivElement} */\nlet colorComputationNode;\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 = tinycolor( 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\tconst isReadableWithBlackText = tinycolor.isReadable(\n\t\tbackground,\n\t\t'#000000'\n\t);\n\n\treturn isReadableWithBlackText ? '#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;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"]}

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

@@ -17,7 +17,9 @@ 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(size = BASE_FONT_SIZE) {
+export function getFontSize() {
+  let size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : BASE_FONT_SIZE;
+
   if (size in PRESET_FONT_SIZES) {
     return getFontSize(PRESET_FONT_SIZES[size]);
   }
@@ -31,7 +33,9 @@ export function getFontSize(size = BASE_FONT_SIZE) {
   const ratio = `(${size} / ${BASE_FONT_SIZE})`;
   return `calc(${ratio} * ${CONFIG.fontSize})`;
 }
-export function getHeadingFontSize(size = 3) {
+export function getHeadingFontSize() {
+  let size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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;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 */\n// eslint-disable-next-line no-restricted-imports\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;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 */\n// eslint-disable-next-line no-restricted-imports\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,7 +3,11 @@
  */
 import { css } from '@emotion/react'; // eslint-disable-next-line no-restricted-imports
 
-export function getHighDpi(strings, ...interpolations) {
+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];
+  }
+
   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,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"]}
+{"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"]}

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

@@ -1,3 +1,2 @@
 export { getOptimalTextShade } from './colors';
-export { createComponent } from './create-component';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/utils/index.js"],"names":["getOptimalTextShade","createComponent"],"mappings":"AAAA,SAASA,mBAAT,QAAoC,UAApC;AACA,SAASC,eAAT,QAAgC,oBAAhC","sourcesContent":["export { getOptimalTextShade } from './colors';\nexport { createComponent } from './create-component';\n"]}
+{"version":3,"sources":["@wordpress/components/src/ui/utils/index.js"],"names":["getOptimalTextShade"],"mappings":"AAAA,SAASA,mBAAT,QAAoC,UAApC","sourcesContent":["export { getOptimalTextShade } from './colors';\n"]}

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

@@ -1,2 +1,2 @@
-
+export {};
 //# sourceMappingURL=types.js.map

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

@@ -3,7 +3,8 @@
  */
 import { useEffect, useState } from '@wordpress/element';
 const breakpoints = ['40em', '52em', '64em'];
-export const useBreakpointIndex = (options = {}) => {
+export const useBreakpointIndex = function () {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     defaultIndex = 0
   } = options;
@@ -42,7 +43,8 @@ export const useBreakpointIndex = (options = {}) => {
   }, [value]);
   return value;
 };
-export function useResponsiveValue(values, options = {}) {
+export function useResponsiveValue(values) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   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,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"]}
+{"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"]}

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

@@ -4,13 +4,14 @@ import { createElement } from "@wordpress/element";
 /**
  * External dependencies
  */
+// eslint-disable-next-line no-restricted-imports
 import { noop, omit } from 'lodash';
 import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
 
-import { forwardRef, useRef } from '@wordpress/element';
+import { forwardRef, useMemo, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { ENTER } from '@wordpress/keycodes';
 /**
@@ -21,31 +22,34 @@ import * as inputControlActionTypes from '../input-control/reducer/actions';
 import { composeStateReducers } from '../input-control/reducer/reducer';
 import { Root, ValueInput } from './styles/unit-control-styles';
 import UnitSelectControl from './unit-select-control';
-import { CSS_UNITS, getParsedValue, getValidParsedUnit } from './utils';
+import { CSS_UNITS, getParsedValue, getUnitsWithCurrentUnit, getValidParsedUnit } from './utils';
 import { useControlledState } from '../utils/hooks';
 
-function UnitControl({
-  __unstableStateReducer: stateReducer = state => state,
-  autoComplete = 'off',
-  className,
-  disabled = false,
-  disableUnits = false,
-  isPressEnterToChange = false,
-  isResetValueOnUnitChange = false,
-  isUnitSelectTabbable = true,
-  label,
-  onChange = noop,
-  onUnitChange = noop,
-  size = 'default',
-  style,
-  unit: unitProp,
-  units = CSS_UNITS,
-  value: valueProp,
-  ...props
-}, ref) {
+function UnitControl(_ref, forwardedRef) {
+  let {
+    __unstableStateReducer: stateReducer = state => state,
+    autoComplete = 'off',
+    className,
+    disabled = false,
+    disableUnits = false,
+    isPressEnterToChange = false,
+    isResetValueOnUnitChange = false,
+    isUnitSelectTabbable = true,
+    label,
+    onChange = noop,
+    onUnitChange = noop,
+    size = 'default',
+    style,
+    unit: unitProp,
+    units: unitsProp = CSS_UNITS,
+    value: valueProp,
+    ...props
+  } = _ref;
+  const units = useMemo(() => getUnitsWithCurrentUnit(valueProp, unitProp, unitsProp), [valueProp, unitProp, unitsProp]);
   const [value, initialUnit] = getParsedValue(valueProp, unitProp, units);
   const [unit, setUnit] = useControlledState(unitProp, {
-    initial: initialUnit
+    initial: initialUnit,
+    fallback: ''
   }); // Stores parsed value for hand-off in state reducer
 
   const refParsedValue = useRef(null);
@@ -82,16 +86,16 @@ function UnitControl({
   };
 
   const mayUpdateUnit = event => {
-    if (!isNaN(event.target.value)) {
+    if (!isNaN(Number(event.currentTarget.value))) {
       refParsedValue.current = null;
       return;
     }
 
-    const [parsedValue, parsedUnit] = getValidParsedUnit(event.target.value, units, value, unit);
-    refParsedValue.current = parsedValue;
+    const [parsedValue, parsedUnit] = getValidParsedUnit(event.currentTarget.value, units, value, unit);
+    refParsedValue.current = parsedValue.toString();
 
     if (isPressEnterToChange && parsedUnit !== unit) {
-      const data = units.find(option => option.value === parsedUnit);
+      const data = Array.isArray(units) ? units.find(option => option.value === parsedUnit) : undefined;
       const changeProps = {
         event,
         data
@@ -118,9 +122,9 @@ function UnitControl({
    * This allows us to tap into actions to transform the (next) state for
    * InputControl.
    *
-   * @param {Object} state  State from InputControl
-   * @param {Object} action Action triggering state change
-   * @return {Object} The updated state to apply to InputControl
+   * @param  state  State from InputControl
+   * @param  action Action triggering state change
+   * @return The updated state to apply to InputControl
    */
 
 
@@ -143,11 +147,11 @@ function UnitControl({
   const inputSuffix = !disableUnits ? createElement(UnitSelectControl, {
     "aria-label": __('Select unit'),
     disabled: disabled,
-    isTabbable: isUnitSelectTabbable,
-    options: units,
+    isUnitSelectTabbable: isUnitSelectTabbable,
     onChange: handleOnUnitChange,
     size: size,
-    value: unit
+    unit: unit,
+    units: units
   }) : null;
   let step = props.step;
   /*
@@ -178,7 +182,7 @@ function UnitControl({
     onBlur: handleOnBlur,
     onKeyDown: handleOnKeyDown,
     onChange: handleOnChange,
-    ref: ref,
+    ref: forwardedRef,
     size: size,
     suffix: inputSuffix,
     value: value,
@@ -186,6 +190,23 @@ function UnitControl({
     __unstableStateReducer: composeStateReducers(unitControlStateReducer, stateReducer)
   })));
 }
+/**
+ * `UnitControl` allows the user to set a value as well as a unit (e.g. `px`).
+ *
+ *
+ * @example
+ * ```jsx
+ * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const Example = () => {
+ *   const [ value, setValue ] = useState( '10px' );
+ *
+ *   return <UnitControl onChange={ setValue } value={ value } />;
+ * };
+ * ```
+ */
+
 
 const ForwardedUnitControl = forwardRef(UnitControl);
 export { parseUnit, useCustomUnits } from './utils';

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/unit-control/index.js"],"names":["noop","omit","classnames","forwardRef","useRef","__","ENTER","inputControlActionTypes","composeStateReducers","Root","ValueInput","UnitSelectControl","CSS_UNITS","getParsedValue","getValidParsedUnit","useControlledState","UnitControl","__unstableStateReducer","stateReducer","state","autoComplete","className","disabled","disableUnits","isPressEnterToChange","isResetValueOnUnitChange","isUnitSelectTabbable","label","onChange","onUnitChange","size","style","unit","unitProp","units","value","valueProp","props","ref","initialUnit","setUnit","initial","refParsedValue","classes","handleOnChange","next","changeProps","join","handleOnUnitChange","data","nextValue","default","undefined","mayUpdateUnit","event","isNaN","target","current","parsedValue","parsedUnit","find","option","handleOnBlur","handleOnKeyDown","keyCode","unitControlStateReducer","action","type","COMMIT","inputSuffix","step","activeUnit","ForwardedUnitControl","parseUnit","useCustomUnits"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { noop, omit } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { ENTER } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport * as inputControlActionTypes from '../input-control/reducer/actions';\nimport { composeStateReducers } from '../input-control/reducer/reducer';\nimport { Root, ValueInput } from './styles/unit-control-styles';\nimport UnitSelectControl from './unit-select-control';\nimport { CSS_UNITS, getParsedValue, getValidParsedUnit } from './utils';\nimport { useControlledState } from '../utils/hooks';\n\nfunction UnitControl(\n\t{\n\t\t__unstableStateReducer: stateReducer = ( state ) => state,\n\t\tautoComplete = 'off',\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 = noop,\n\t\tonUnitChange = noop,\n\t\tsize = 'default',\n\t\tstyle,\n\t\tunit: unitProp,\n\t\tunits = CSS_UNITS,\n\t\tvalue: valueProp,\n\t\t...props\n\t},\n\tref\n) {\n\tconst [ value, initialUnit ] = getParsedValue( valueProp, unitProp, units );\n\tconst [ unit, setUnit ] = useControlledState( unitProp, {\n\t\tinitial: initialUnit,\n\t} );\n\n\t// Stores parsed value for hand-off in state reducer\n\tconst refParsedValue = useRef( null );\n\n\tconst classes = classnames( 'components-unit-control', className );\n\n\tconst handleOnChange = ( next, changeProps ) => {\n\t\tif ( next === '' ) {\n\t\t\tonChange( '', 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\tnext = getValidParsedUnit( next, units, value, unit ).join( '' );\n\n\t\tonChange( next, changeProps );\n\t};\n\n\tconst handleOnUnitChange = ( next, changeProps ) => {\n\t\tconst { data } = changeProps;\n\n\t\tlet nextValue = `${ value }${ next }`;\n\n\t\tif ( isResetValueOnUnitChange && data?.default !== undefined ) {\n\t\t\tnextValue = `${ data.default }${ next }`;\n\t\t}\n\n\t\tonChange( nextValue, changeProps );\n\t\tonUnitChange( next, changeProps );\n\n\t\tsetUnit( next );\n\t};\n\n\tconst mayUpdateUnit = ( event ) => {\n\t\tif ( ! isNaN( event.target.value ) ) {\n\t\t\trefParsedValue.current = null;\n\t\t\treturn;\n\t\t}\n\t\tconst [ parsedValue, parsedUnit ] = getValidParsedUnit(\n\t\t\tevent.target.value,\n\t\t\tunits,\n\t\t\tvalue,\n\t\t\tunit\n\t\t);\n\n\t\trefParsedValue.current = parsedValue;\n\n\t\tif ( isPressEnterToChange && parsedUnit !== unit ) {\n\t\t\tconst data = units.find(\n\t\t\t\t( option ) => option.value === parsedUnit\n\t\t\t);\n\t\t\tconst changeProps = { event, data };\n\n\t\t\tonChange( `${ parsedValue }${ parsedUnit }`, changeProps );\n\t\t\tonUnitChange( parsedUnit, changeProps );\n\n\t\t\tsetUnit( parsedUnit );\n\t\t}\n\t};\n\n\tconst handleOnBlur = mayUpdateUnit;\n\n\tconst handleOnKeyDown = ( event ) => {\n\t\tconst { keyCode } = event;\n\t\tif ( keyCode === 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 {Object} state  State from InputControl\n\t * @param {Object} action Action triggering state change\n\t * @return {Object} The updated state to apply to InputControl\n\t */\n\tconst unitControlStateReducer = ( state, action ) => {\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 ( refParsedValue.current !== null ) {\n\t\t\t\tstate.value = refParsedValue.current;\n\t\t\t\trefParsedValue.current = null;\n\t\t\t}\n\t\t}\n\n\t\treturn state;\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\tisTabbable={ isUnitSelectTabbable }\n\t\t\toptions={ units }\n\t\t\tonChange={ handleOnUnitChange }\n\t\t\tsize={ size }\n\t\t\tvalue={ unit }\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<Root className=\"components-unit-control-wrapper\" style={ style }>\n\t\t\t<ValueInput\n\t\t\t\taria-label={ label }\n\t\t\t\ttype={ isPressEnterToChange ? 'text' : 'number' }\n\t\t\t\t{ ...omit( props, [ 'children' ] ) }\n\t\t\t\tautoComplete={ autoComplete }\n\t\t\t\tclassName={ classes }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\t\tlabel={ label }\n\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\t\tonChange={ handleOnChange }\n\t\t\t\tref={ ref }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ inputSuffix }\n\t\t\t\tvalue={ value }\n\t\t\t\tstep={ step }\n\t\t\t\t__unstableStateReducer={ composeStateReducers(\n\t\t\t\t\tunitControlStateReducer,\n\t\t\t\t\tstateReducer\n\t\t\t\t) }\n\t\t\t/>\n\t\t</Root>\n\t);\n}\n\nconst ForwardedUnitControl = forwardRef( UnitControl );\n\nexport { parseUnit, useCustomUnits } from './utils';\nexport default ForwardedUnitControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/unit-control/index.tsx"],"names":["noop","omit","classnames","forwardRef","useMemo","useRef","__","ENTER","inputControlActionTypes","composeStateReducers","Root","ValueInput","UnitSelectControl","CSS_UNITS","getParsedValue","getUnitsWithCurrentUnit","getValidParsedUnit","useControlledState","UnitControl","forwardedRef","__unstableStateReducer","stateReducer","state","autoComplete","className","disabled","disableUnits","isPressEnterToChange","isResetValueOnUnitChange","isUnitSelectTabbable","label","onChange","onUnitChange","size","style","unit","unitProp","units","unitsProp","value","valueProp","props","initialUnit","setUnit","initial","fallback","refParsedValue","classes","handleOnChange","next","changeProps","join","handleOnUnitChange","data","nextValue","default","undefined","mayUpdateUnit","event","isNaN","Number","currentTarget","current","parsedValue","parsedUnit","toString","Array","isArray","find","option","handleOnBlur","handleOnKeyDown","keyCode","unitControlStateReducer","action","type","COMMIT","inputSuffix","step","activeUnit","ForwardedUnitControl","parseUnit","useCustomUnits"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type {\n\tFocusEventHandler,\n\tKeyboardEvent,\n\tRef,\n\tSyntheticEvent,\n} from 'react';\nimport { noop, omit } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useMemo, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { ENTER } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport * as inputControlActionTypes from '../input-control/reducer/actions';\nimport { composeStateReducers } from '../input-control/reducer/reducer';\nimport { Root, ValueInput } from './styles/unit-control-styles';\nimport UnitSelectControl from './unit-select-control';\nimport {\n\tCSS_UNITS,\n\tgetParsedValue,\n\tgetUnitsWithCurrentUnit,\n\tgetValidParsedUnit,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type { UnitControlProps, UnitControlOnChangeCallback } from './types';\nimport type { StateReducer } from '../input-control/reducer/state';\n\nfunction UnitControl(\n\t{\n\t\t__unstableStateReducer: stateReducer = ( state ) => state,\n\t\tautoComplete = 'off',\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 = noop,\n\t\tonUnitChange = noop,\n\t\tsize = 'default',\n\t\tstyle,\n\t\tunit: unitProp,\n\t\tunits: unitsProp = CSS_UNITS,\n\t\tvalue: valueProp,\n\t\t...props\n\t}: WordPressComponentProps< UnitControlProps, 'input', false >,\n\tforwardedRef: Ref< any >\n) {\n\tconst units = useMemo(\n\t\t() => getUnitsWithCurrentUnit( valueProp, unitProp, unitsProp ),\n\t\t[ valueProp, unitProp, unitsProp ]\n\t);\n\tconst [ value, initialUnit ] = getParsedValue( valueProp, unitProp, units );\n\tconst [ unit, setUnit ] = useControlledState< string | undefined >(\n\t\tunitProp,\n\t\t{\n\t\t\tinitial: initialUnit,\n\t\t\tfallback: '',\n\t\t}\n\t);\n\n\t// Stores parsed value for hand-off in state reducer\n\tconst refParsedValue = useRef< string | null >( null );\n\n\tconst classes = classnames( 'components-unit-control', className );\n\n\tconst handleOnChange: UnitControlOnChangeCallback = (\n\t\tnext,\n\t\tchangeProps\n\t) => {\n\t\tif ( next === '' ) {\n\t\t\tonChange( '', 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\tnext = getValidParsedUnit( next, units, value, unit ).join( '' );\n\n\t\tonChange( next, changeProps );\n\t};\n\n\tconst handleOnUnitChange: UnitControlOnChangeCallback = (\n\t\tnext,\n\t\tchangeProps\n\t) => {\n\t\tconst { data } = changeProps;\n\n\t\tlet nextValue = `${ value }${ next }`;\n\n\t\tif ( isResetValueOnUnitChange && data?.default !== undefined ) {\n\t\t\tnextValue = `${ data.default }${ next }`;\n\t\t}\n\n\t\tonChange( nextValue, changeProps );\n\t\tonUnitChange( next, changeProps );\n\n\t\tsetUnit( next );\n\t};\n\n\tconst mayUpdateUnit = ( event: SyntheticEvent< HTMLInputElement > ) => {\n\t\tif ( ! isNaN( Number( event.currentTarget.value ) ) ) {\n\t\t\trefParsedValue.current = null;\n\t\t\treturn;\n\t\t}\n\t\tconst [ parsedValue, parsedUnit ] = getValidParsedUnit(\n\t\t\tevent.currentTarget.value,\n\t\t\tunits,\n\t\t\tvalue,\n\t\t\tunit\n\t\t);\n\n\t\trefParsedValue.current = parsedValue.toString();\n\n\t\tif ( isPressEnterToChange && parsedUnit !== unit ) {\n\t\t\tconst data = Array.isArray( units )\n\t\t\t\t? units.find( ( option ) => option.value === parsedUnit )\n\t\t\t\t: undefined;\n\t\t\tconst changeProps = { event, data };\n\n\t\t\tonChange( `${ parsedValue }${ parsedUnit }`, changeProps );\n\t\t\tonUnitChange( parsedUnit, changeProps );\n\n\t\t\tsetUnit( parsedUnit );\n\t\t}\n\t};\n\n\tconst handleOnBlur: FocusEventHandler< HTMLInputElement > = mayUpdateUnit;\n\n\tconst handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\tconst { keyCode } = event;\n\t\tif ( keyCode === 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\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 ( refParsedValue.current !== null ) {\n\t\t\t\tstate.value = refParsedValue.current;\n\t\t\t\trefParsedValue.current = null;\n\t\t\t}\n\t\t}\n\n\t\treturn state;\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/>\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<Root className=\"components-unit-control-wrapper\" style={ style }>\n\t\t\t<ValueInput\n\t\t\t\taria-label={ label }\n\t\t\t\ttype={ isPressEnterToChange ? 'text' : 'number' }\n\t\t\t\t{ ...omit( props, [ 'children' ] ) }\n\t\t\t\tautoComplete={ autoComplete }\n\t\t\t\tclassName={ classes }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\t\tlabel={ label }\n\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\t\tonChange={ handleOnChange }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ inputSuffix }\n\t\t\t\tvalue={ value }\n\t\t\t\tstep={ step }\n\t\t\t\t__unstableStateReducer={ composeStateReducers(\n\t\t\t\t\tunitControlStateReducer,\n\t\t\t\t\tstateReducer\n\t\t\t\t) }\n\t\t\t/>\n\t\t</Root>\n\t);\n}\n\n/**\n * `UnitControl` allows the user to set a value 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 */\nconst ForwardedUnitControl = forwardRef( UnitControl );\n\nexport { parseUnit, useCustomUnits } from './utils';\nexport default ForwardedUnitControl;\n"]}

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

@@ -22,21 +22,22 @@ import { useRef, useCallback, useMemo, memo } from '@wordpress/element';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 
-function UnitControl({
-  currentInput,
-  label,
-  value,
-  onChange,
-  onUnitChange,
-  initialPosition,
-  min,
-  max,
-  separatorType,
-  units = CSS_UNITS,
-  unit,
-  getStylesFromColorScheme,
-  ...props
-}) {
+function UnitControl(_ref) {
+  let {
+    currentInput,
+    label,
+    value,
+    onChange,
+    onUnitChange,
+    initialPosition,
+    min,
+    max,
+    separatorType,
+    units = CSS_UNITS,
+    unit,
+    getStylesFromColorScheme,
+    ...props
+  } = _ref;
   const pickerRef = useRef();
   const anchorNodeRef = useRef();
   const onPickerPresent = useCallback(() => {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/unit-control/index.native.js"],"names":["Text","View","TouchableWithoutFeedback","Platform","findNodeHandle","RangeCell","StepperCell","Picker","styles","CSS_UNITS","hasUnits","parseA11yLabelForUnit","useRef","useCallback","useMemo","memo","withPreferredColorScheme","__","sprintf","UnitControl","currentInput","label","value","onChange","onUnitChange","initialPosition","min","max","separatorType","units","unit","getStylesFromColorScheme","props","pickerRef","anchorNodeRef","onPickerPresent","current","presentPicker","currentInputValue","initialControlValue","isFinite","unitButtonTextStyle","unitButtonText","unitButtonTextDark","accessibilityLabel","accessibilityHint","OS","renderUnitButton","unitButton","length","getAnchor","undefined","getDecimal","step","stepToString","splitStep","toString","split","renderUnitPicker","unitMenu","activeUnit","find","option","decimalNum","useCustomUnits"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tText,\n\tView,\n\tTouchableWithoutFeedback,\n\tPlatform,\n\tfindNodeHandle,\n} from 'react-native';\n\n/**\n * Internal dependencies\n */\nimport RangeCell from '../mobile/bottom-sheet/range-cell';\nimport StepperCell from '../mobile/bottom-sheet/stepper-cell';\nimport Picker from '../mobile/picker';\nimport styles from './style.scss';\nimport { CSS_UNITS, hasUnits, parseA11yLabelForUnit } from './utils';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useCallback, useMemo, memo } from '@wordpress/element';\nimport { withPreferredColorScheme } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\n\nfunction UnitControl( {\n\tcurrentInput,\n\tlabel,\n\tvalue,\n\tonChange,\n\tonUnitChange,\n\tinitialPosition,\n\tmin,\n\tmax,\n\tseparatorType,\n\tunits = CSS_UNITS,\n\tunit,\n\tgetStylesFromColorScheme,\n\t...props\n} ) {\n\tconst pickerRef = useRef();\n\tconst anchorNodeRef = useRef();\n\n\tconst onPickerPresent = useCallback( () => {\n\t\tif ( pickerRef?.current ) {\n\t\t\tpickerRef.current.presentPicker();\n\t\t}\n\t}, [ pickerRef?.current ] );\n\n\tconst currentInputValue = currentInput === null ? value : currentInput;\n\tconst initialControlValue = isFinite( currentInputValue )\n\t\t? currentInputValue\n\t\t: initialPosition;\n\n\tconst unitButtonTextStyle = getStylesFromColorScheme(\n\t\tstyles.unitButtonText,\n\t\tstyles.unitButtonTextDark\n\t);\n\n\t/* translators: accessibility text. Inform about current unit value. %s: Current unit value. */\n\tconst accessibilityLabel = sprintf( __( 'Current unit is %s' ), unit );\n\n\tconst accessibilityHint =\n\t\tPlatform.OS === 'ios'\n\t\t\t? __( 'Double tap to open Action Sheet with available options' )\n\t\t\t: __( 'Double tap to open Bottom Sheet with available options' );\n\n\tconst renderUnitButton = useMemo( () => {\n\t\tconst unitButton = (\n\t\t\t<View style={ styles.unitButton }>\n\t\t\t\t<Text style={ unitButtonTextStyle }>{ unit }</Text>\n\t\t\t</View>\n\t\t);\n\n\t\tif ( hasUnits( units ) && units?.length > 1 ) {\n\t\t\treturn (\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ onPickerPresent }\n\t\t\t\t\taccessibilityLabel={ accessibilityLabel }\n\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t>\n\t\t\t\t\t{ unitButton }\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t);\n\t\t}\n\n\t\treturn unitButton;\n\t}, [\n\t\tonPickerPresent,\n\t\taccessibilityLabel,\n\t\taccessibilityHint,\n\t\tunitButtonTextStyle,\n\t\tunit,\n\t\tunits,\n\t] );\n\n\tconst getAnchor = useCallback(\n\t\t() =>\n\t\t\tanchorNodeRef?.current\n\t\t\t\t? findNodeHandle( anchorNodeRef?.current )\n\t\t\t\t: undefined,\n\t\t[ anchorNodeRef?.current ]\n\t);\n\n\tconst getDecimal = ( step ) => {\n\t\t// Return the decimal offset based on the step size.\n\t\t// if step size is 0.1 we expect the offset to be 1.\n\t\t// for example 12 + 0.1 we would expect the see 12.1 (not 12.10 or 12 );\n\t\t// steps are defined in the CSS_UNITS and they vary from unit to unit.\n\t\tconst stepToString = step;\n\t\tconst splitStep = stepToString.toString().split( '.' );\n\t\treturn splitStep[ 1 ] ? splitStep[ 1 ].length : 0;\n\t};\n\n\tconst renderUnitPicker = useCallback( () => {\n\t\tif ( units === false ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn (\n\t\t\t<View style={ styles.unitMenu } ref={ anchorNodeRef }>\n\t\t\t\t{ renderUnitButton }\n\t\t\t\t{ hasUnits( units ) && units?.length > 1 ? (\n\t\t\t\t\t<Picker\n\t\t\t\t\t\tref={ pickerRef }\n\t\t\t\t\t\toptions={ units }\n\t\t\t\t\t\tonChange={ onUnitChange }\n\t\t\t\t\t\thideCancelButton\n\t\t\t\t\t\tleftAlign\n\t\t\t\t\t\tgetAnchor={ getAnchor }\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t</View>\n\t\t);\n\t}, [ pickerRef, units, onUnitChange, getAnchor, renderUnitButton ] );\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\tconst decimalNum = getDecimal( step );\n\n\treturn (\n\t\t<>\n\t\t\t{ unit !== '%' ? (\n\t\t\t\t<StepperCell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tmax={ max }\n\t\t\t\t\tmin={ min }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tseparatorType={ separatorType }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tstep={ step }\n\t\t\t\t\tdefaultValue={ initialControlValue }\n\t\t\t\t\tshouldDisplayTextInput\n\t\t\t\t\tdecimalNum={ decimalNum }\n\t\t\t\t\topenUnitPicker={ onPickerPresent }\n\t\t\t\t\tunitLabel={ parseA11yLabelForUnit( unit ) }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ renderUnitPicker() }\n\t\t\t\t</StepperCell>\n\t\t\t) : (\n\t\t\t\t<RangeCell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tminimumValue={ min }\n\t\t\t\t\tmaximumValue={ max }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tstep={ step }\n\t\t\t\t\tunit={ unit }\n\t\t\t\t\tdefaultValue={ initialControlValue }\n\t\t\t\t\tseparatorType={ separatorType }\n\t\t\t\t\tdecimalNum={ decimalNum }\n\t\t\t\t\topenUnitPicker={ onPickerPresent }\n\t\t\t\t\tunitLabel={ parseA11yLabelForUnit( unit ) }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ renderUnitPicker() }\n\t\t\t\t</RangeCell>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport { useCustomUnits } from './utils';\nexport default memo( withPreferredColorScheme( UnitControl ) );\n"]}
+{"version":3,"sources":["@wordpress/components/src/unit-control/index.native.js"],"names":["Text","View","TouchableWithoutFeedback","Platform","findNodeHandle","RangeCell","StepperCell","Picker","styles","CSS_UNITS","hasUnits","parseA11yLabelForUnit","useRef","useCallback","useMemo","memo","withPreferredColorScheme","__","sprintf","UnitControl","currentInput","label","value","onChange","onUnitChange","initialPosition","min","max","separatorType","units","unit","getStylesFromColorScheme","props","pickerRef","anchorNodeRef","onPickerPresent","current","presentPicker","currentInputValue","initialControlValue","isFinite","unitButtonTextStyle","unitButtonText","unitButtonTextDark","accessibilityLabel","accessibilityHint","OS","renderUnitButton","unitButton","length","getAnchor","undefined","getDecimal","step","stepToString","splitStep","toString","split","renderUnitPicker","unitMenu","activeUnit","find","option","decimalNum","useCustomUnits"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tText,\n\tView,\n\tTouchableWithoutFeedback,\n\tPlatform,\n\tfindNodeHandle,\n} from 'react-native';\n\n/**\n * Internal dependencies\n */\nimport RangeCell from '../mobile/bottom-sheet/range-cell';\nimport StepperCell from '../mobile/bottom-sheet/stepper-cell';\nimport Picker from '../mobile/picker';\nimport styles from './style.scss';\nimport { CSS_UNITS, hasUnits, parseA11yLabelForUnit } from './utils';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useCallback, useMemo, memo } from '@wordpress/element';\nimport { withPreferredColorScheme } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\n\nfunction UnitControl( {\n\tcurrentInput,\n\tlabel,\n\tvalue,\n\tonChange,\n\tonUnitChange,\n\tinitialPosition,\n\tmin,\n\tmax,\n\tseparatorType,\n\tunits = CSS_UNITS,\n\tunit,\n\tgetStylesFromColorScheme,\n\t...props\n} ) {\n\tconst pickerRef = useRef();\n\tconst anchorNodeRef = useRef();\n\n\tconst onPickerPresent = useCallback( () => {\n\t\tif ( pickerRef?.current ) {\n\t\t\tpickerRef.current.presentPicker();\n\t\t}\n\t}, [ pickerRef?.current ] );\n\n\tconst currentInputValue = currentInput === null ? value : currentInput;\n\tconst initialControlValue = isFinite( currentInputValue )\n\t\t? currentInputValue\n\t\t: initialPosition;\n\n\tconst unitButtonTextStyle = getStylesFromColorScheme(\n\t\tstyles.unitButtonText,\n\t\tstyles.unitButtonTextDark\n\t);\n\n\t/* translators: accessibility text. Inform about current unit value. %s: Current unit value. */\n\tconst accessibilityLabel = sprintf( __( 'Current unit is %s' ), unit );\n\n\tconst accessibilityHint =\n\t\tPlatform.OS === 'ios'\n\t\t\t? __( 'Double tap to open Action Sheet with available options' )\n\t\t\t: __( 'Double tap to open Bottom Sheet with available options' );\n\n\tconst renderUnitButton = useMemo( () => {\n\t\tconst unitButton = (\n\t\t\t<View style={ styles.unitButton }>\n\t\t\t\t<Text style={ unitButtonTextStyle }>{ unit }</Text>\n\t\t\t</View>\n\t\t);\n\n\t\tif ( hasUnits( units ) && units?.length > 1 ) {\n\t\t\treturn (\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ onPickerPresent }\n\t\t\t\t\taccessibilityLabel={ accessibilityLabel }\n\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t>\n\t\t\t\t\t{ unitButton }\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t);\n\t\t}\n\n\t\treturn unitButton;\n\t}, [\n\t\tonPickerPresent,\n\t\taccessibilityLabel,\n\t\taccessibilityHint,\n\t\tunitButtonTextStyle,\n\t\tunit,\n\t\tunits,\n\t] );\n\n\tconst getAnchor = useCallback(\n\t\t() =>\n\t\t\tanchorNodeRef?.current\n\t\t\t\t? findNodeHandle( anchorNodeRef?.current )\n\t\t\t\t: undefined,\n\t\t[ anchorNodeRef?.current ]\n\t);\n\n\tconst getDecimal = ( step ) => {\n\t\t// Return the decimal offset based on the step size.\n\t\t// if step size is 0.1 we expect the offset to be 1.\n\t\t// for example 12 + 0.1 we would expect the see 12.1 (not 12.10 or 12 );\n\t\t// steps are defined in the CSS_UNITS and they vary from unit to unit.\n\t\tconst stepToString = step;\n\t\tconst splitStep = stepToString.toString().split( '.' );\n\t\treturn splitStep[ 1 ] ? splitStep[ 1 ].length : 0;\n\t};\n\n\tconst renderUnitPicker = useCallback( () => {\n\t\tif ( units === false ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn (\n\t\t\t<View style={ styles.unitMenu } ref={ anchorNodeRef }>\n\t\t\t\t{ renderUnitButton }\n\t\t\t\t{ hasUnits( units ) && units?.length > 1 ? (\n\t\t\t\t\t<Picker\n\t\t\t\t\t\tref={ pickerRef }\n\t\t\t\t\t\toptions={ units }\n\t\t\t\t\t\tonChange={ onUnitChange }\n\t\t\t\t\t\thideCancelButton\n\t\t\t\t\t\tleftAlign\n\t\t\t\t\t\tgetAnchor={ getAnchor }\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t</View>\n\t\t);\n\t}, [ pickerRef, units, onUnitChange, getAnchor, renderUnitButton ] );\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\tconst decimalNum = getDecimal( step );\n\n\treturn (\n\t\t<>\n\t\t\t{ unit !== '%' ? (\n\t\t\t\t<StepperCell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tmax={ max }\n\t\t\t\t\tmin={ min }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tseparatorType={ separatorType }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tstep={ step }\n\t\t\t\t\tdefaultValue={ initialControlValue }\n\t\t\t\t\tshouldDisplayTextInput\n\t\t\t\t\tdecimalNum={ decimalNum }\n\t\t\t\t\topenUnitPicker={ onPickerPresent }\n\t\t\t\t\tunitLabel={ parseA11yLabelForUnit( unit ) }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ renderUnitPicker() }\n\t\t\t\t</StepperCell>\n\t\t\t) : (\n\t\t\t\t<RangeCell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tminimumValue={ min }\n\t\t\t\t\tmaximumValue={ max }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tstep={ step }\n\t\t\t\t\tunit={ unit }\n\t\t\t\t\tdefaultValue={ initialControlValue }\n\t\t\t\t\tseparatorType={ separatorType }\n\t\t\t\t\tdecimalNum={ decimalNum }\n\t\t\t\t\topenUnitPicker={ onPickerPresent }\n\t\t\t\t\tunitLabel={ parseA11yLabelForUnit( unit ) }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ renderUnitPicker() }\n\t\t\t\t</RangeCell>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport { useCustomUnits } from './utils';\nexport default memo( withPreferredColorScheme( UnitControl ) );\n"]}