@wordpress/components 27.5.0 → 28.0.0

package/build/color-picker/legacy-adapter.js

@@ -5,15 +5,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LegacyAdapter = void 0;
-var _react = require("react");
 var _component = _interopRequireDefault(require("./component"));
 var _useDeprecatedProps = require("./use-deprecated-props");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Internal dependencies
  */
 
 const LegacyAdapter = props => {
-  return (0, _react.createElement)(_component.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_component.default, {
     ...(0, _useDeprecatedProps.useDeprecatedProps)(props)
   });
 };

package/build/color-picker/legacy-adapter.js.map

@@ -1 +1 @@
-{"version":3,"names":["_component","_interopRequireDefault","require","_useDeprecatedProps","LegacyAdapter","props","_react","createElement","default","useDeprecatedProps","exports"],"sources":["@wordpress/components/src/color-picker/legacy-adapter.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport ColorPicker from './component';\nimport type { LegacyAdapterProps } from './types';\nimport { useDeprecatedProps } from './use-deprecated-props';\n\nexport const LegacyAdapter = ( props: LegacyAdapterProps ) => {\n\treturn <ColorPicker { ...useDeprecatedProps( props ) } />;\n};\n"],"mappings":";;;;;;;;AAGA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,mBAAA,GAAAD,OAAA;AALA;AACA;AACA;;AAKO,MAAME,aAAa,GAAKC,KAAyB,IAAM;EAC7D,OAAO,IAAAC,MAAA,CAAAC,aAAA,EAACP,UAAA,CAAAQ,OAAW;IAAA,GAAM,IAAAC,sCAAkB,EAAEJ,KAAM;EAAC,CAAI,CAAC;AAC1D,CAAC;AAACK,OAAA,CAAAN,aAAA,GAAAA,aAAA","ignoreList":[]}
+{"version":3,"names":["_component","_interopRequireDefault","require","_useDeprecatedProps","_jsxRuntime","LegacyAdapter","props","jsx","default","useDeprecatedProps","exports"],"sources":["@wordpress/components/src/color-picker/legacy-adapter.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport ColorPicker from './component';\nimport type { LegacyAdapterProps } from './types';\nimport { useDeprecatedProps } from './use-deprecated-props';\n\nexport const LegacyAdapter = ( props: LegacyAdapterProps ) => {\n\treturn <ColorPicker { ...useDeprecatedProps( props ) } />;\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,mBAAA,GAAAD,OAAA;AAA4D,IAAAE,WAAA,GAAAF,OAAA;AAL5D;AACA;AACA;;AAKO,MAAMG,aAAa,GAAKC,KAAyB,IAAM;EAC7D,oBAAO,IAAAF,WAAA,CAAAG,GAAA,EAACP,UAAA,CAAAQ,OAAW;IAAA,GAAM,IAAAC,sCAAkB,EAAEH,KAAM;EAAC,CAAI,CAAC;AAC1D,CAAC;AAACI,OAAA,CAAAL,aAAA,GAAAA,aAAA","ignoreList":[]}

package/build/color-picker/picker.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Picker = void 0;
-var _react = require("react");
 var _reactColorful = require("react-colorful");
 var _colord = require("colord");
 var _element = require("@wordpress/element");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -27,7 +27,7 @@ const Picker = ({
 }) => {
   const Component = enableAlpha ? _reactColorful.RgbaStringColorPicker : _reactColorful.RgbStringColorPicker;
   const rgbColor = (0, _element.useMemo)(() => color.toRgbString(), [color]);
-  return (0, _react.createElement)(Component, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
     color: rgbColor,
     onChange: nextColor => {
       onChange((0, _colord.colord)(nextColor));

package/build/color-picker/picker.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactColorful","require","_colord","_element","Picker","color","enableAlpha","onChange","Component","RgbaStringColorPicker","RgbStringColorPicker","rgbColor","useMemo","toRgbString","_react","createElement","nextColor","colord","onPointerDown","currentTarget","pointerId","setPointerCapture","onPointerUp","releasePointerCapture","exports"],"sources":["@wordpress/components/src/color-picker/picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport type { PickerProps } from './types';\n\nexport const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {\n\tconst Component = enableAlpha\n\t\t? RgbaStringColorPicker\n\t\t: RgbStringColorPicker;\n\tconst rgbColor = useMemo( () => color.toRgbString(), [ color ] );\n\n\treturn (\n\t\t<Component\n\t\t\tcolor={ rgbColor }\n\t\t\tonChange={ ( nextColor ) => {\n\t\t\t\tonChange( colord( nextColor ) );\n\t\t\t} }\n\t\t\t// Pointer capture fortifies drag gestures so that they continue to\n\t\t\t// work while dragging outside the component over objects like\n\t\t\t// iframes. If a newer version of react-colorful begins to employ\n\t\t\t// pointer capture this will be redundant and should be removed.\n\t\t\tonPointerDown={ ( { currentTarget, pointerId } ) => {\n\t\t\t\tcurrentTarget.setPointerCapture( pointerId );\n\t\t\t} }\n\t\t\tonPointerUp={ ( { currentTarget, pointerId } ) => {\n\t\t\t\tcurrentTarget.releasePointerCapture( pointerId );\n\t\t\t} }\n\t\t/>\n\t);\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,cAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAEA;AACA;AACA;;AAGO,MAAMG,MAAM,GAAGA,CAAE;EAAEC,KAAK;EAAEC,WAAW;EAAEC;AAAsB,CAAC,KAAM;EAC1E,MAAMC,SAAS,GAAGF,WAAW,GAC1BG,oCAAqB,GACrBC,mCAAoB;EACvB,MAAMC,QAAQ,GAAG,IAAAC,gBAAO,EAAE,MAAMP,KAAK,CAACQ,WAAW,CAAC,CAAC,EAAE,CAAER,KAAK,CAAG,CAAC;EAEhE,OACC,IAAAS,MAAA,CAAAC,aAAA,EAACP,SAAS;IACTH,KAAK,EAAGM,QAAU;IAClBJ,QAAQ,EAAKS,SAAS,IAAM;MAC3BT,QAAQ,CAAE,IAAAU,cAAM,EAAED,SAAU,CAAE,CAAC;IAChC;IACA;IACA;IACA;IACA;IAAA;IACAE,aAAa,EAAGA,CAAE;MAAEC,aAAa;MAAEC;IAAU,CAAC,KAAM;MACnDD,aAAa,CAACE,iBAAiB,CAAED,SAAU,CAAC;IAC7C,CAAG;IACHE,WAAW,EAAGA,CAAE;MAAEH,aAAa;MAAEC;IAAU,CAAC,KAAM;MACjDD,aAAa,CAACI,qBAAqB,CAAEH,SAAU,CAAC;IACjD;EAAG,CACH,CAAC;AAEJ,CAAC;AAACI,OAAA,CAAApB,MAAA,GAAAA,MAAA","ignoreList":[]}
+{"version":3,"names":["_reactColorful","require","_colord","_element","_jsxRuntime","Picker","color","enableAlpha","onChange","Component","RgbaStringColorPicker","RgbStringColorPicker","rgbColor","useMemo","toRgbString","jsx","nextColor","colord","onPointerDown","currentTarget","pointerId","setPointerCapture","onPointerUp","releasePointerCapture","exports"],"sources":["@wordpress/components/src/color-picker/picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport type { PickerProps } from './types';\n\nexport const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {\n\tconst Component = enableAlpha\n\t\t? RgbaStringColorPicker\n\t\t: RgbStringColorPicker;\n\tconst rgbColor = useMemo( () => color.toRgbString(), [ color ] );\n\n\treturn (\n\t\t<Component\n\t\t\tcolor={ rgbColor }\n\t\t\tonChange={ ( nextColor ) => {\n\t\t\t\tonChange( colord( nextColor ) );\n\t\t\t} }\n\t\t\t// Pointer capture fortifies drag gestures so that they continue to\n\t\t\t// work while dragging outside the component over objects like\n\t\t\t// iframes. If a newer version of react-colorful begins to employ\n\t\t\t// pointer capture this will be redundant and should be removed.\n\t\t\tonPointerDown={ ( { currentTarget, pointerId } ) => {\n\t\t\t\tcurrentTarget.setPointerCapture( pointerId );\n\t\t\t} }\n\t\t\tonPointerUp={ ( { currentTarget, pointerId } ) => {\n\t\t\t\tcurrentTarget.releasePointerCapture( pointerId );\n\t\t\t} }\n\t\t/>\n\t);\n};\n"],"mappings":";;;;;;AAGA,IAAAA,cAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AAA6C,IAAAG,WAAA,GAAAH,OAAA;AAT7C;AACA;AACA;;AAIA;AACA;AACA;;AAEA;AACA;AACA;;AAGO,MAAMI,MAAM,GAAGA,CAAE;EAAEC,KAAK;EAAEC,WAAW;EAAEC;AAAsB,CAAC,KAAM;EAC1E,MAAMC,SAAS,GAAGF,WAAW,GAC1BG,oCAAqB,GACrBC,mCAAoB;EACvB,MAAMC,QAAQ,GAAG,IAAAC,gBAAO,EAAE,MAAMP,KAAK,CAACQ,WAAW,CAAC,CAAC,EAAE,CAAER,KAAK,CAAG,CAAC;EAEhE,oBACC,IAAAF,WAAA,CAAAW,GAAA,EAACN,SAAS;IACTH,KAAK,EAAGM,QAAU;IAClBJ,QAAQ,EAAKQ,SAAS,IAAM;MAC3BR,QAAQ,CAAE,IAAAS,cAAM,EAAED,SAAU,CAAE,CAAC;IAChC;IACA;IACA;IACA;IACA;IAAA;IACAE,aAAa,EAAGA,CAAE;MAAEC,aAAa;MAAEC;IAAU,CAAC,KAAM;MACnDD,aAAa,CAACE,iBAAiB,CAAED,SAAU,CAAC;IAC7C,CAAG;IACHE,WAAW,EAAGA,CAAE;MAAEH,aAAa;MAAEC;IAAU,CAAC,KAAM;MACjDD,aAAa,CAACI,qBAAqB,CAAEH,SAAU,CAAC;IACjD;EAAG,CACH,CAAC;AAEJ,CAAC;AAACI,OAAA,CAAAnB,MAAA,GAAAA,MAAA","ignoreList":[]}

package/build/color-picker/rgb-input.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RgbInput = void 0;
-var _react = require("react");
 var _colord = require("colord");
 var _inputWithSlider = require("./input-with-slider");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -26,55 +26,57 @@ const RgbInput = ({
     b,
     a
   } = color.toRgb();
-  return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_inputWithSlider.InputWithSlider, {
-    min: 0,
-    max: 255,
-    label: "Red",
-    abbreviation: "R",
-    value: r,
-    onChange: nextR => onChange((0, _colord.colord)({
-      r: nextR,
-      g,
-      b,
-      a
-    }))
-  }), (0, _react.createElement)(_inputWithSlider.InputWithSlider, {
-    min: 0,
-    max: 255,
-    label: "Green",
-    abbreviation: "G",
-    value: g,
-    onChange: nextG => onChange((0, _colord.colord)({
-      r,
-      g: nextG,
-      b,
-      a
-    }))
-  }), (0, _react.createElement)(_inputWithSlider.InputWithSlider, {
-    min: 0,
-    max: 255,
-    label: "Blue",
-    abbreviation: "B",
-    value: b,
-    onChange: nextB => onChange((0, _colord.colord)({
-      r,
-      g,
-      b: nextB,
-      a
-    }))
-  }), enableAlpha && (0, _react.createElement)(_inputWithSlider.InputWithSlider, {
-    min: 0,
-    max: 100,
-    label: "Alpha",
-    abbreviation: "A",
-    value: Math.trunc(a * 100),
-    onChange: nextA => onChange((0, _colord.colord)({
-      r,
-      g,
-      b,
-      a: nextA / 100
-    }))
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_inputWithSlider.InputWithSlider, {
+      min: 0,
+      max: 255,
+      label: "Red",
+      abbreviation: "R",
+      value: r,
+      onChange: nextR => onChange((0, _colord.colord)({
+        r: nextR,
+        g,
+        b,
+        a
+      }))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputWithSlider.InputWithSlider, {
+      min: 0,
+      max: 255,
+      label: "Green",
+      abbreviation: "G",
+      value: g,
+      onChange: nextG => onChange((0, _colord.colord)({
+        r,
+        g: nextG,
+        b,
+        a
+      }))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputWithSlider.InputWithSlider, {
+      min: 0,
+      max: 255,
+      label: "Blue",
+      abbreviation: "B",
+      value: b,
+      onChange: nextB => onChange((0, _colord.colord)({
+        r,
+        g,
+        b: nextB,
+        a
+      }))
+    }), enableAlpha && /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputWithSlider.InputWithSlider, {
+      min: 0,
+      max: 100,
+      label: "Alpha",
+      abbreviation: "A",
+      value: Math.trunc(a * 100),
+      onChange: nextA => onChange((0, _colord.colord)({
+        r,
+        g,
+        b,
+        a: nextA / 100
+      }))
+    })]
+  });
 };
 exports.RgbInput = RgbInput;
 //# sourceMappingURL=rgb-input.js.map

package/build/color-picker/rgb-input.js.map

@@ -1 +1 @@
-{"version":3,"names":["_colord","require","_inputWithSlider","RgbInput","color","onChange","enableAlpha","r","g","b","a","toRgb","_react","createElement","Fragment","InputWithSlider","min","max","label","abbreviation","value","nextR","colord","nextG","nextB","Math","trunc","nextA","exports"],"sources":["@wordpress/components/src/color-picker/rgb-input.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * Internal dependencies\n */\nimport { InputWithSlider } from './input-with-slider';\nimport type { RgbInputProps } from './types';\n\nexport const RgbInput = ( { color, onChange, enableAlpha }: RgbInputProps ) => {\n\tconst { r, g, b, a } = color.toRgb();\n\n\treturn (\n\t\t<>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 255 }\n\t\t\t\tlabel=\"Red\"\n\t\t\t\tabbreviation=\"R\"\n\t\t\t\tvalue={ r }\n\t\t\t\tonChange={ ( nextR: number ) =>\n\t\t\t\t\tonChange( colord( { r: nextR, g, b, a } ) )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 255 }\n\t\t\t\tlabel=\"Green\"\n\t\t\t\tabbreviation=\"G\"\n\t\t\t\tvalue={ g }\n\t\t\t\tonChange={ ( nextG: number ) =>\n\t\t\t\t\tonChange( colord( { r, g: nextG, b, a } ) )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 255 }\n\t\t\t\tlabel=\"Blue\"\n\t\t\t\tabbreviation=\"B\"\n\t\t\t\tvalue={ b }\n\t\t\t\tonChange={ ( nextB: number ) =>\n\t\t\t\t\tonChange( colord( { r, g, b: nextB, a } ) )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ enableAlpha && (\n\t\t\t\t<InputWithSlider\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tmax={ 100 }\n\t\t\t\t\tlabel=\"Alpha\"\n\t\t\t\t\tabbreviation=\"A\"\n\t\t\t\t\tvalue={ Math.trunc( a * 100 ) }\n\t\t\t\t\tonChange={ ( nextA: number ) =>\n\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\tcolord( {\n\t\t\t\t\t\t\t\tr,\n\t\t\t\t\t\t\t\tg,\n\t\t\t\t\t\t\t\tb,\n\t\t\t\t\t\t\t\ta: nextA / 100,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AAKA,IAAAC,gBAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAIO,MAAME,QAAQ,GAAGA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAA2B,CAAC,KAAM;EAC9E,MAAM;IAAEC,CAAC;IAAEC,CAAC;IAAEC,CAAC;IAAEC;EAAE,CAAC,GAAGN,KAAK,CAACO,KAAK,CAAC,CAAC;EAEpC,OACC,IAAAC,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QACC,IAAAF,MAAA,CAAAC,aAAA,EAACX,gBAAA,CAAAa,eAAe;IACfC,GAAG,EAAG,CAAG;IACTC,GAAG,EAAG,GAAK;IACXC,KAAK,EAAC,KAAK;IACXC,YAAY,EAAC,GAAG;IAChBC,KAAK,EAAGb,CAAG;IACXF,QAAQ,EAAKgB,KAAa,IACzBhB,QAAQ,CAAE,IAAAiB,cAAM,EAAE;MAAEf,CAAC,EAAEc,KAAK;MAAEb,CAAC;MAAEC,CAAC;MAAEC;IAAE,CAAE,CAAE;EAC1C,CACD,CAAC,EACF,IAAAE,MAAA,CAAAC,aAAA,EAACX,gBAAA,CAAAa,eAAe;IACfC,GAAG,EAAG,CAAG;IACTC,GAAG,EAAG,GAAK;IACXC,KAAK,EAAC,OAAO;IACbC,YAAY,EAAC,GAAG;IAChBC,KAAK,EAAGZ,CAAG;IACXH,QAAQ,EAAKkB,KAAa,IACzBlB,QAAQ,CAAE,IAAAiB,cAAM,EAAE;MAAEf,CAAC;MAAEC,CAAC,EAAEe,KAAK;MAAEd,CAAC;MAAEC;IAAE,CAAE,CAAE;EAC1C,CACD,CAAC,EACF,IAAAE,MAAA,CAAAC,aAAA,EAACX,gBAAA,CAAAa,eAAe;IACfC,GAAG,EAAG,CAAG;IACTC,GAAG,EAAG,GAAK;IACXC,KAAK,EAAC,MAAM;IACZC,YAAY,EAAC,GAAG;IAChBC,KAAK,EAAGX,CAAG;IACXJ,QAAQ,EAAKmB,KAAa,IACzBnB,QAAQ,CAAE,IAAAiB,cAAM,EAAE;MAAEf,CAAC;MAAEC,CAAC;MAAEC,CAAC,EAAEe,KAAK;MAAEd;IAAE,CAAE,CAAE;EAC1C,CACD,CAAC,EACAJ,WAAW,IACZ,IAAAM,MAAA,CAAAC,aAAA,EAACX,gBAAA,CAAAa,eAAe;IACfC,GAAG,EAAG,CAAG;IACTC,GAAG,EAAG,GAAK;IACXC,KAAK,EAAC,OAAO;IACbC,YAAY,EAAC,GAAG;IAChBC,KAAK,EAAGK,IAAI,CAACC,KAAK,CAAEhB,CAAC,GAAG,GAAI,CAAG;IAC/BL,QAAQ,EAAKsB,KAAa,IACzBtB,QAAQ,CACP,IAAAiB,cAAM,EAAE;MACPf,CAAC;MACDC,CAAC;MACDC,CAAC;MACDC,CAAC,EAAEiB,KAAK,GAAG;IACZ,CAAE,CACH;EACA,CACD,CAED,CAAC;AAEL,CAAC;AAACC,OAAA,CAAAzB,QAAA,GAAAA,QAAA","ignoreList":[]}
+{"version":3,"names":["_colord","require","_inputWithSlider","_jsxRuntime","RgbInput","color","onChange","enableAlpha","r","g","b","a","toRgb","jsxs","Fragment","children","jsx","InputWithSlider","min","max","label","abbreviation","value","nextR","colord","nextG","nextB","Math","trunc","nextA","exports"],"sources":["@wordpress/components/src/color-picker/rgb-input.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * Internal dependencies\n */\nimport { InputWithSlider } from './input-with-slider';\nimport type { RgbInputProps } from './types';\n\nexport const RgbInput = ( { color, onChange, enableAlpha }: RgbInputProps ) => {\n\tconst { r, g, b, a } = color.toRgb();\n\n\treturn (\n\t\t<>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 255 }\n\t\t\t\tlabel=\"Red\"\n\t\t\t\tabbreviation=\"R\"\n\t\t\t\tvalue={ r }\n\t\t\t\tonChange={ ( nextR: number ) =>\n\t\t\t\t\tonChange( colord( { r: nextR, g, b, a } ) )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 255 }\n\t\t\t\tlabel=\"Green\"\n\t\t\t\tabbreviation=\"G\"\n\t\t\t\tvalue={ g }\n\t\t\t\tonChange={ ( nextG: number ) =>\n\t\t\t\t\tonChange( colord( { r, g: nextG, b, a } ) )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 255 }\n\t\t\t\tlabel=\"Blue\"\n\t\t\t\tabbreviation=\"B\"\n\t\t\t\tvalue={ b }\n\t\t\t\tonChange={ ( nextB: number ) =>\n\t\t\t\t\tonChange( colord( { r, g, b: nextB, a } ) )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ enableAlpha && (\n\t\t\t\t<InputWithSlider\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tmax={ 100 }\n\t\t\t\t\tlabel=\"Alpha\"\n\t\t\t\t\tabbreviation=\"A\"\n\t\t\t\t\tvalue={ Math.trunc( a * 100 ) }\n\t\t\t\t\tonChange={ ( nextA: number ) =>\n\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\tcolord( {\n\t\t\t\t\t\t\t\tr,\n\t\t\t\t\t\t\t\tg,\n\t\t\t\t\t\t\t\tb,\n\t\t\t\t\t\t\t\ta: nextA / 100,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n};\n"],"mappings":";;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AAKA,IAAAC,gBAAA,GAAAD,OAAA;AAAsD,IAAAE,WAAA,GAAAF,OAAA;AARtD;AACA;AACA;;AAGA;AACA;AACA;;AAIO,MAAMG,QAAQ,GAAGA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAA2B,CAAC,KAAM;EAC9E,MAAM;IAAEC,CAAC;IAAEC,CAAC;IAAEC,CAAC;IAAEC;EAAE,CAAC,GAAGN,KAAK,CAACO,KAAK,CAAC,CAAC;EAEpC,oBACC,IAAAT,WAAA,CAAAU,IAAA,EAAAV,WAAA,CAAAW,QAAA;IAAAC,QAAA,gBACC,IAAAZ,WAAA,CAAAa,GAAA,EAACd,gBAAA,CAAAe,eAAe;MACfC,GAAG,EAAG,CAAG;MACTC,GAAG,EAAG,GAAK;MACXC,KAAK,EAAC,KAAK;MACXC,YAAY,EAAC,GAAG;MAChBC,KAAK,EAAGd,CAAG;MACXF,QAAQ,EAAKiB,KAAa,IACzBjB,QAAQ,CAAE,IAAAkB,cAAM,EAAE;QAAEhB,CAAC,EAAEe,KAAK;QAAEd,CAAC;QAAEC,CAAC;QAAEC;MAAE,CAAE,CAAE;IAC1C,CACD,CAAC,eACF,IAAAR,WAAA,CAAAa,GAAA,EAACd,gBAAA,CAAAe,eAAe;MACfC,GAAG,EAAG,CAAG;MACTC,GAAG,EAAG,GAAK;MACXC,KAAK,EAAC,OAAO;MACbC,YAAY,EAAC,GAAG;MAChBC,KAAK,EAAGb,CAAG;MACXH,QAAQ,EAAKmB,KAAa,IACzBnB,QAAQ,CAAE,IAAAkB,cAAM,EAAE;QAAEhB,CAAC;QAAEC,CAAC,EAAEgB,KAAK;QAAEf,CAAC;QAAEC;MAAE,CAAE,CAAE;IAC1C,CACD,CAAC,eACF,IAAAR,WAAA,CAAAa,GAAA,EAACd,gBAAA,CAAAe,eAAe;MACfC,GAAG,EAAG,CAAG;MACTC,GAAG,EAAG,GAAK;MACXC,KAAK,EAAC,MAAM;MACZC,YAAY,EAAC,GAAG;MAChBC,KAAK,EAAGZ,CAAG;MACXJ,QAAQ,EAAKoB,KAAa,IACzBpB,QAAQ,CAAE,IAAAkB,cAAM,EAAE;QAAEhB,CAAC;QAAEC,CAAC;QAAEC,CAAC,EAAEgB,KAAK;QAAEf;MAAE,CAAE,CAAE;IAC1C,CACD,CAAC,EACAJ,WAAW,iBACZ,IAAAJ,WAAA,CAAAa,GAAA,EAACd,gBAAA,CAAAe,eAAe;MACfC,GAAG,EAAG,CAAG;MACTC,GAAG,EAAG,GAAK;MACXC,KAAK,EAAC,OAAO;MACbC,YAAY,EAAC,GAAG;MAChBC,KAAK,EAAGK,IAAI,CAACC,KAAK,CAAEjB,CAAC,GAAG,GAAI,CAAG;MAC/BL,QAAQ,EAAKuB,KAAa,IACzBvB,QAAQ,CACP,IAAAkB,cAAM,EAAE;QACPhB,CAAC;QACDC,CAAC;QACDC,CAAC;QACDC,CAAC,EAAEkB,KAAK,GAAG;MACZ,CAAE,CACH;IACA,CACD,CACD;EAAA,CACA,CAAC;AAEL,CAAC;AAACC,OAAA,CAAA1B,QAAA,GAAAA,QAAA","ignoreList":[]}

package/build/color-picker/saturation-picker.native.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _reactNative = require("react-native");
 var _reactNativeLinearGradient = _interopRequireDefault(require("react-native-linear-gradient"));
 var _colord = require("colord");
 var _element = _interopRequireWildcard(require("@wordpress/element"));
 var _styleNative = _interopRequireDefault(require("./style.native.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -132,51 +132,54 @@ class SaturationValuePicker extends _element.Component {
       borderRadius = 0,
       currentColor
     } = this.props;
-    return (0, _react.createElement)(_reactNative.View, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [_styleNative.default['hsv-container'], containerStyle, {
         height: size.height + sliderSize,
         width: size.width + sliderSize
       }],
-      ...this.panResponder.panHandlers
-    }, (0, _react.createElement)(_reactNativeLinearGradient.default, {
-      style: [_styleNative.default['gradient-container'], {
-        borderRadius
-      }],
-      colors: ['#fff', (0, _colord.colord)({
-        h: hue,
-        s: 100,
-        l: 50
-      }).toHex()],
-      start: {
-        x: 0,
-        y: 0.5
-      },
-      end: {
-        x: 1,
-        y: 0.5
-      }
-    }, (0, _react.createElement)(_reactNativeLinearGradient.default, {
-      colors: ['rgba(0, 0, 0, 0)', '#000']
-    }, (0, _react.createElement)(_reactNative.View, {
-      style: {
-        height: size.height,
-        width: size.width
-      }
-    }))), (0, _react.createElement)(_reactNative.View, {
-      pointerEvents: "none",
-      style: [_styleNative.default['saturation-slider'], {
-        width: sliderSize,
-        height: sliderSize,
-        borderRadius: sliderSize / 2,
-        borderWidth: sliderSize / 10,
-        backgroundColor: currentColor,
-        transform: [{
-          translateX: size.width * saturation
-        }, {
-          translateY: size.height * (1 - value)
+      ...this.panResponder.panHandlers,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeLinearGradient.default, {
+        style: [_styleNative.default['gradient-container'], {
+          borderRadius
+        }],
+        colors: ['#fff', (0, _colord.colord)({
+          h: hue,
+          s: 100,
+          l: 50
+        }).toHex()],
+        start: {
+          x: 0,
+          y: 0.5
+        },
+        end: {
+          x: 1,
+          y: 0.5
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeLinearGradient.default, {
+          colors: ['rgba(0, 0, 0, 0)', '#000'],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: {
+              height: size.height,
+              width: size.width
+            }
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        pointerEvents: "none",
+        style: [_styleNative.default['saturation-slider'], {
+          width: sliderSize,
+          height: sliderSize,
+          borderRadius: sliderSize / 2,
+          borderWidth: sliderSize / 10,
+          backgroundColor: currentColor,
+          transform: [{
+            translateX: size.width * saturation
+          }, {
+            translateY: size.height * (1 - value)
+          }]
         }]
-      }]
-    }));
+      })]
+    });
   }
 }
 exports.default = SaturationValuePicker;

package/build/color-picker/saturation-picker.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_reactNativeLinearGradient","_interopRequireDefault","_colord","_element","_interopRequireWildcard","_styleNative","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SaturationValuePicker","Component","constructor","props","panResponder","PanResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","evt","gestureState","onPress","saturation","value","computeSatValPress","dragStartValue","nativeEvent","fireDragEvent","onPanResponderMove","onPanResponderTerminationRequest","onPanResponderRelease","onPanResponderTerminate","onShouldBlockNativeResponder","normalizeValue","computeSatValDrag","dx","dy","size","diffx","width","diffy","height","event","locationX","locationY","eventName","render","sliderSize","hue","containerStyle","borderRadius","currentColor","_react","createElement","View","style","styles","panHandlers","colors","colord","h","s","l","toHex","start","x","y","end","pointerEvents","borderWidth","backgroundColor","transform","translateX","translateY","exports"],"sources":["@wordpress/components/src/color-picker/saturation-picker.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, PanResponder } from 'react-native';\nimport LinearGradient from 'react-native-linear-gradient';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport React, { Component } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.native.scss';\n\nexport default class SaturationValuePicker extends Component {\n\tconstructor( props ) {\n\t\tsuper( props );\n\n\t\tthis.panResponder = PanResponder.create( {\n\t\t\tonStartShouldSetPanResponder: () => true,\n\t\t\tonStartShouldSetPanResponderCapture: () => true,\n\t\t\tonMoveShouldSetPanResponder: () => true,\n\t\t\tonMoveShouldSetPanResponderCapture: () => true,\n\t\t\tonPanResponderGrant: ( evt, gestureState ) => {\n\t\t\t\tconst { onPress } = this.props;\n\t\t\t\tconst { saturation, value } = this.computeSatValPress( evt );\n\t\t\t\tthis.dragStartValue = {\n\t\t\t\t\tsaturation,\n\t\t\t\t\tvalue,\n\t\t\t\t};\n\n\t\t\t\tif ( onPress ) {\n\t\t\t\t\tonPress( {\n\t\t\t\t\t\t...this.computeSatValPress( evt ),\n\t\t\t\t\t\tnativeEvent: evt.nativeEvent,\n\t\t\t\t\t} );\n\t\t\t\t}\n\n\t\t\t\tthis.fireDragEvent( 'onDragStart', gestureState );\n\t\t\t},\n\t\t\tonPanResponderMove: ( evt, gestureState ) => {\n\t\t\t\tthis.fireDragEvent( 'onDragMove', gestureState );\n\t\t\t},\n\t\t\tonPanResponderTerminationRequest: () => true,\n\t\t\tonPanResponderRelease: ( evt, gestureState ) => {\n\t\t\t\tthis.fireDragEvent( 'onDragEnd', gestureState );\n\t\t\t},\n\t\t\tonPanResponderTerminate: ( evt, gestureState ) => {\n\t\t\t\tthis.fireDragEvent( 'onDragTerminate', gestureState );\n\t\t\t},\n\t\t\tonShouldBlockNativeResponder: () => true,\n\t\t} );\n\t}\n\n\tnormalizeValue( value ) {\n\t\tif ( value < 0 ) {\n\t\t\treturn 0;\n\t\t}\n\t\tif ( value > 1 ) {\n\t\t\treturn 1;\n\t\t}\n\t\treturn value;\n\t}\n\n\tcomputeSatValDrag( gestureState ) {\n\t\tconst { dx, dy } = gestureState;\n\t\tconst { size } = this.props;\n\t\tconst { saturation, value } = this.dragStartValue;\n\t\tconst diffx = dx / size.width;\n\t\tconst diffy = dy / size.height;\n\t\treturn {\n\t\t\tsaturation: this.normalizeValue( saturation + diffx ),\n\t\t\tvalue: this.normalizeValue( value - diffy ),\n\t\t};\n\t}\n\n\tcomputeSatValPress( event ) {\n\t\tconst { nativeEvent } = event;\n\t\tconst { locationX, locationY } = nativeEvent;\n\t\tconst { size } = this.props;\n\t\treturn {\n\t\t\tsaturation: this.normalizeValue( locationX / size.width ),\n\t\t\tvalue: 1 - this.normalizeValue( locationY / size.height ),\n\t\t};\n\t}\n\n\tfireDragEvent( eventName, gestureState ) {\n\t\tconst { [ eventName ]: event } = this.props;\n\t\tif ( event ) {\n\t\t\tevent( {\n\t\t\t\t...this.computeSatValDrag( gestureState ),\n\t\t\t\tgestureState,\n\t\t\t} );\n\t\t}\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\tsize,\n\t\t\tsliderSize = 24,\n\t\t\thue = 0,\n\t\t\tvalue = 1,\n\t\t\tsaturation = 1,\n\t\t\tcontainerStyle = {},\n\t\t\tborderRadius = 0,\n\t\t\tcurrentColor,\n\t\t} = this.props;\n\n\t\treturn (\n\t\t\t<View\n\t\t\t\tstyle={ [\n\t\t\t\t\tstyles[ 'hsv-container' ],\n\t\t\t\t\tcontainerStyle,\n\t\t\t\t\t{\n\t\t\t\t\t\theight: size.height + sliderSize,\n\t\t\t\t\t\twidth: size.width + sliderSize,\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t\t{ ...this.panResponder.panHandlers }\n\t\t\t>\n\t\t\t\t<LinearGradient\n\t\t\t\t\tstyle={ [\n\t\t\t\t\t\tstyles[ 'gradient-container' ],\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tborderRadius,\n\t\t\t\t\t\t},\n\t\t\t\t\t] }\n\t\t\t\t\tcolors={ [\n\t\t\t\t\t\t'#fff',\n\t\t\t\t\t\tcolord( { h: hue, s: 100, l: 50 } ).toHex(),\n\t\t\t\t\t] }\n\t\t\t\t\tstart={ { x: 0, y: 0.5 } }\n\t\t\t\t\tend={ { x: 1, y: 0.5 } }\n\t\t\t\t>\n\t\t\t\t\t<LinearGradient colors={ [ 'rgba(0, 0, 0, 0)', '#000' ] }>\n\t\t\t\t\t\t<View\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: size.height,\n\t\t\t\t\t\t\t\twidth: size.width,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</LinearGradient>\n\t\t\t\t</LinearGradient>\n\t\t\t\t<View\n\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\tstyle={ [\n\t\t\t\t\t\tstyles[ 'saturation-slider' ],\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\twidth: sliderSize,\n\t\t\t\t\t\t\theight: sliderSize,\n\t\t\t\t\t\t\tborderRadius: sliderSize / 2,\n\t\t\t\t\t\t\tborderWidth: sliderSize / 10,\n\t\t\t\t\t\t\tbackgroundColor: currentColor,\n\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t{ translateX: size.width * saturation },\n\t\t\t\t\t\t\t\t{ translateY: size.height * ( 1 - value ) },\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t] }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t);\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_reactNativeLinearGradient","_interopRequireDefault","_colord","_element","_interopRequireWildcard","_styleNative","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SaturationValuePicker","Component","constructor","props","panResponder","PanResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","evt","gestureState","onPress","saturation","value","computeSatValPress","dragStartValue","nativeEvent","fireDragEvent","onPanResponderMove","onPanResponderTerminationRequest","onPanResponderRelease","onPanResponderTerminate","onShouldBlockNativeResponder","normalizeValue","computeSatValDrag","dx","dy","size","diffx","width","diffy","height","event","locationX","locationY","eventName","render","sliderSize","hue","containerStyle","borderRadius","currentColor","jsxs","View","style","styles","panHandlers","children","jsx","colors","colord","h","s","l","toHex","start","x","y","end","pointerEvents","borderWidth","backgroundColor","transform","translateX","translateY","exports"],"sources":["@wordpress/components/src/color-picker/saturation-picker.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, PanResponder } from 'react-native';\nimport LinearGradient from 'react-native-linear-gradient';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport React, { Component } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.native.scss';\n\nexport default class SaturationValuePicker extends Component {\n\tconstructor( props ) {\n\t\tsuper( props );\n\n\t\tthis.panResponder = PanResponder.create( {\n\t\t\tonStartShouldSetPanResponder: () => true,\n\t\t\tonStartShouldSetPanResponderCapture: () => true,\n\t\t\tonMoveShouldSetPanResponder: () => true,\n\t\t\tonMoveShouldSetPanResponderCapture: () => true,\n\t\t\tonPanResponderGrant: ( evt, gestureState ) => {\n\t\t\t\tconst { onPress } = this.props;\n\t\t\t\tconst { saturation, value } = this.computeSatValPress( evt );\n\t\t\t\tthis.dragStartValue = {\n\t\t\t\t\tsaturation,\n\t\t\t\t\tvalue,\n\t\t\t\t};\n\n\t\t\t\tif ( onPress ) {\n\t\t\t\t\tonPress( {\n\t\t\t\t\t\t...this.computeSatValPress( evt ),\n\t\t\t\t\t\tnativeEvent: evt.nativeEvent,\n\t\t\t\t\t} );\n\t\t\t\t}\n\n\t\t\t\tthis.fireDragEvent( 'onDragStart', gestureState );\n\t\t\t},\n\t\t\tonPanResponderMove: ( evt, gestureState ) => {\n\t\t\t\tthis.fireDragEvent( 'onDragMove', gestureState );\n\t\t\t},\n\t\t\tonPanResponderTerminationRequest: () => true,\n\t\t\tonPanResponderRelease: ( evt, gestureState ) => {\n\t\t\t\tthis.fireDragEvent( 'onDragEnd', gestureState );\n\t\t\t},\n\t\t\tonPanResponderTerminate: ( evt, gestureState ) => {\n\t\t\t\tthis.fireDragEvent( 'onDragTerminate', gestureState );\n\t\t\t},\n\t\t\tonShouldBlockNativeResponder: () => true,\n\t\t} );\n\t}\n\n\tnormalizeValue( value ) {\n\t\tif ( value < 0 ) {\n\t\t\treturn 0;\n\t\t}\n\t\tif ( value > 1 ) {\n\t\t\treturn 1;\n\t\t}\n\t\treturn value;\n\t}\n\n\tcomputeSatValDrag( gestureState ) {\n\t\tconst { dx, dy } = gestureState;\n\t\tconst { size } = this.props;\n\t\tconst { saturation, value } = this.dragStartValue;\n\t\tconst diffx = dx / size.width;\n\t\tconst diffy = dy / size.height;\n\t\treturn {\n\t\t\tsaturation: this.normalizeValue( saturation + diffx ),\n\t\t\tvalue: this.normalizeValue( value - diffy ),\n\t\t};\n\t}\n\n\tcomputeSatValPress( event ) {\n\t\tconst { nativeEvent } = event;\n\t\tconst { locationX, locationY } = nativeEvent;\n\t\tconst { size } = this.props;\n\t\treturn {\n\t\t\tsaturation: this.normalizeValue( locationX / size.width ),\n\t\t\tvalue: 1 - this.normalizeValue( locationY / size.height ),\n\t\t};\n\t}\n\n\tfireDragEvent( eventName, gestureState ) {\n\t\tconst { [ eventName ]: event } = this.props;\n\t\tif ( event ) {\n\t\t\tevent( {\n\t\t\t\t...this.computeSatValDrag( gestureState ),\n\t\t\t\tgestureState,\n\t\t\t} );\n\t\t}\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\tsize,\n\t\t\tsliderSize = 24,\n\t\t\thue = 0,\n\t\t\tvalue = 1,\n\t\t\tsaturation = 1,\n\t\t\tcontainerStyle = {},\n\t\t\tborderRadius = 0,\n\t\t\tcurrentColor,\n\t\t} = this.props;\n\n\t\treturn (\n\t\t\t<View\n\t\t\t\tstyle={ [\n\t\t\t\t\tstyles[ 'hsv-container' ],\n\t\t\t\t\tcontainerStyle,\n\t\t\t\t\t{\n\t\t\t\t\t\theight: size.height + sliderSize,\n\t\t\t\t\t\twidth: size.width + sliderSize,\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t\t{ ...this.panResponder.panHandlers }\n\t\t\t>\n\t\t\t\t<LinearGradient\n\t\t\t\t\tstyle={ [\n\t\t\t\t\t\tstyles[ 'gradient-container' ],\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tborderRadius,\n\t\t\t\t\t\t},\n\t\t\t\t\t] }\n\t\t\t\t\tcolors={ [\n\t\t\t\t\t\t'#fff',\n\t\t\t\t\t\tcolord( { h: hue, s: 100, l: 50 } ).toHex(),\n\t\t\t\t\t] }\n\t\t\t\t\tstart={ { x: 0, y: 0.5 } }\n\t\t\t\t\tend={ { x: 1, y: 0.5 } }\n\t\t\t\t>\n\t\t\t\t\t<LinearGradient colors={ [ 'rgba(0, 0, 0, 0)', '#000' ] }>\n\t\t\t\t\t\t<View\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: size.height,\n\t\t\t\t\t\t\t\twidth: size.width,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</LinearGradient>\n\t\t\t\t</LinearGradient>\n\t\t\t\t<View\n\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\tstyle={ [\n\t\t\t\t\t\tstyles[ 'saturation-slider' ],\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\twidth: sliderSize,\n\t\t\t\t\t\t\theight: sliderSize,\n\t\t\t\t\t\t\tborderRadius: sliderSize / 2,\n\t\t\t\t\t\t\tborderWidth: sliderSize / 10,\n\t\t\t\t\t\t\tbackgroundColor: currentColor,\n\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t{ translateX: size.width * saturation },\n\t\t\t\t\t\t\t\t{ translateY: size.height * ( 1 - value ) },\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t] }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t);\n\t}\n}\n"],"mappings":"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","ignoreList":[]}

package/build/combobox-control/index.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _i18n = require("@wordpress/i18n");
 var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
@@ -23,6 +22,7 @@ var _hooks = require("../utils/hooks");
 var _strings = require("../utils/strings");
 var _useDeprecatedProps = require("../utils/use-deprecated-props");
 var _withIgnoreImeEvents = require("../utils/with-ignore-ime-events");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -62,10 +62,12 @@ const getIndexOfMatchingSuggestion = (selectedSuggestion, matchingSuggestions) =
  * 	{
  * 		value: 'normal',
  * 		label: 'Normal',
+ * 		disabled: true,
  * 	},
  * 	{
  * 		value: 'large',
  * 		label: 'Large',
+ * 		disabled: false,
  * 	},
  * ];
  *
@@ -109,7 +111,8 @@ function ComboboxControl(props) {
     messages = {
       selected: (0, _i18n.__)('Item selected.')
     },
-    __experimentalRenderItem
+    __experimentalRenderItem,
+    expandOnFocus = true
   } = (0, _useDeprecatedProps.useDeprecated36pxDefaultSizeProp)(props);
   const [value, setValue] = (0, _hooks.useControlledValue)({
     value: valueProp,
@@ -141,6 +144,9 @@ function ComboboxControl(props) {
     return startsWithMatch.concat(containsMatch);
   }, [inputValue, options]);
   const onSuggestionSelected = newSelectedSuggestion => {
+    if (newSelectedSuggestion.disabled) {
+      return;
+    }
     setValue(newSelectedSuggestion.value);
     (0, _a11y.speak)(messages.selected, 'assertive');
     setSelectedSuggestion(newSelectedSuggestion);
@@ -195,10 +201,15 @@ function ComboboxControl(props) {
   };
   const onFocus = () => {
     setInputHasFocus(true);
-    setIsExpanded(true);
+    if (expandOnFocus) {
+      setIsExpanded(true);
+    }
     onFilterValueChange('');
     setInputValue('');
   };
+  const onClick = () => {
+    setIsExpanded(true);
+  };
   const onFocusOutside = () => {
     setIsExpanded(false);
   };
@@ -239,55 +250,64 @@ function ComboboxControl(props) {
   // input container intended accessible usability.
   // TODO: Refactor click detection to use blur to stop propagation.
   /* eslint-disable jsx-a11y/no-static-element-interactions */
-  return (0, _react.createElement)(DetectOutside, {
-    onFocusOutside: onFocusOutside
-  }, (0, _react.createElement)(_baseControl.default, {
-    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
-    className: (0, _classnames.default)(className, 'components-combobox-control'),
-    label: label,
-    id: `components-form-token-input-${instanceId}`,
-    hideLabelFromVision: hideLabelFromVision,
-    help: help
-  }, (0, _react.createElement)("div", {
-    className: "components-combobox-control__suggestions-container",
-    tabIndex: -1,
-    onKeyDown: onKeyDown
-  }, (0, _react.createElement)(_styles.InputWrapperFlex, {
-    __next40pxDefaultSize: __next40pxDefaultSize
-  }, (0, _react.createElement)(_flex.FlexBlock, null, (0, _react.createElement)(_tokenInput.default, {
-    className: "components-combobox-control__input",
-    instanceId: instanceId,
-    ref: inputContainer,
-    value: isExpanded ? inputValue : currentLabel,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    isExpanded: isExpanded,
-    selectedSuggestionIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),
-    onChange: onInputChange
-  })), allowReset && (0, _react.createElement)(_flex.FlexItem, null, (0, _react.createElement)(_button.default, {
-    className: "components-combobox-control__reset",
-    icon: _icons.closeSmall,
-    disabled: !value,
-    onClick: handleOnReset,
-    label: (0, _i18n.__)('Reset')
-  }))), isExpanded && (0, _react.createElement)(_suggestionsList.default, {
-    instanceId: instanceId
-    // The empty string for `value` here is not actually used, but is
-    // just a quick way to satisfy the TypeScript requirements of SuggestionsList.
-    // See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330
-    ,
-    match: {
-      label: inputValue,
-      value: ''
-    },
-    displayTransform: suggestion => suggestion.label,
-    suggestions: matchingSuggestions,
-    selectedIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),
-    onHover: setSelectedSuggestion,
-    onSelect: onSuggestionSelected,
-    scrollIntoView: true,
-    __experimentalRenderItem: __experimentalRenderItem
-  }))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DetectOutside, {
+    onFocusOutside: onFocusOutside,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControl.default, {
+      __nextHasNoMarginBottom: __nextHasNoMarginBottom,
+      className: (0, _clsx.default)(className, 'components-combobox-control'),
+      label: label,
+      id: `components-form-token-input-${instanceId}`,
+      hideLabelFromVision: hideLabelFromVision,
+      help: help,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "components-combobox-control__suggestions-container",
+        tabIndex: -1,
+        onKeyDown: onKeyDown,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputWrapperFlex, {
+          __next40pxDefaultSize: __next40pxDefaultSize,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_flex.FlexBlock, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tokenInput.default, {
+              className: "components-combobox-control__input",
+              instanceId: instanceId,
+              ref: inputContainer,
+              value: isExpanded ? inputValue : currentLabel,
+              onFocus: onFocus,
+              onBlur: onBlur,
+              onClick: onClick,
+              isExpanded: isExpanded,
+              selectedSuggestionIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),
+              onChange: onInputChange
+            })
+          }), allowReset && /*#__PURE__*/(0, _jsxRuntime.jsx)(_flex.FlexItem, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+              className: "components-combobox-control__reset",
+              icon: _icons.closeSmall,
+              disabled: !value,
+              onClick: handleOnReset,
+              label: (0, _i18n.__)('Reset')
+            })
+          })]
+        }), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_suggestionsList.default, {
+          instanceId: instanceId
+          // The empty string for `value` here is not actually used, but is
+          // just a quick way to satisfy the TypeScript requirements of SuggestionsList.
+          // See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330
+          ,
+          match: {
+            label: inputValue,
+            value: ''
+          },
+          displayTransform: suggestion => suggestion.label,
+          suggestions: matchingSuggestions,
+          selectedIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),
+          onHover: setSelectedSuggestion,
+          onSelect: onSuggestionSelected,
+          scrollIntoView: true,
+          __experimentalRenderItem: __experimentalRenderItem
+        })]
+      })
+    })
+  });
   /* eslint-enable jsx-a11y/no-static-element-interactions */
 }
 var _default = exports.default = ComboboxControl;