@wordpress/components 27.6.0 → 28.0.0

package/build-module/color-picker/hsl-input.js

@@ -1,4 +1,3 @@
-import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */
@@ -13,6 +12,9 @@ import { useState, useEffect, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { InputWithSlider } from './input-with-slider';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export const HslInput = ({
   color,
   onChange,
@@ -53,50 +55,52 @@ export const HslInput = ({
       }));
     }
   };
-  return createElement(Fragment, null, createElement(InputWithSlider, {
-    min: 0,
-    max: 359,
-    label: "Hue",
-    abbreviation: "H",
-    value: colorValue.h,
-    onChange: nextH => {
-      updateHSLAValue({
-        h: nextH
-      });
-    }
-  }), createElement(InputWithSlider, {
-    min: 0,
-    max: 100,
-    label: "Saturation",
-    abbreviation: "S",
-    value: colorValue.s,
-    onChange: nextS => {
-      updateHSLAValue({
-        s: nextS
-      });
-    }
-  }), createElement(InputWithSlider, {
-    min: 0,
-    max: 100,
-    label: "Lightness",
-    abbreviation: "L",
-    value: colorValue.l,
-    onChange: nextL => {
-      updateHSLAValue({
-        l: nextL
-      });
-    }
-  }), enableAlpha && createElement(InputWithSlider, {
-    min: 0,
-    max: 100,
-    label: "Alpha",
-    abbreviation: "A",
-    value: Math.trunc(100 * colorValue.a),
-    onChange: nextA => {
-      updateHSLAValue({
-        a: nextA / 100
-      });
-    }
-  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(InputWithSlider, {
+      min: 0,
+      max: 359,
+      label: "Hue",
+      abbreviation: "H",
+      value: colorValue.h,
+      onChange: nextH => {
+        updateHSLAValue({
+          h: nextH
+        });
+      }
+    }), /*#__PURE__*/_jsx(InputWithSlider, {
+      min: 0,
+      max: 100,
+      label: "Saturation",
+      abbreviation: "S",
+      value: colorValue.s,
+      onChange: nextS => {
+        updateHSLAValue({
+          s: nextS
+        });
+      }
+    }), /*#__PURE__*/_jsx(InputWithSlider, {
+      min: 0,
+      max: 100,
+      label: "Lightness",
+      abbreviation: "L",
+      value: colorValue.l,
+      onChange: nextL => {
+        updateHSLAValue({
+          l: nextL
+        });
+      }
+    }), enableAlpha && /*#__PURE__*/_jsx(InputWithSlider, {
+      min: 0,
+      max: 100,
+      label: "Alpha",
+      abbreviation: "A",
+      value: Math.trunc(100 * colorValue.a),
+      onChange: nextA => {
+        updateHSLAValue({
+          a: nextA / 100
+        });
+      }
+    })]
+  });
 };
 //# sourceMappingURL=hsl-input.js.map

package/build-module/color-picker/hsl-input.js.map

@@ -1 +1 @@
-{"version":3,"names":["colord","useState","useEffect","useMemo","InputWithSlider","HslInput","color","onChange","enableAlpha","colorPropHSLA","toHsl","internalHSLA","setInternalHSLA","isInternalColorSameAsReceivedColor","isEqual","colorValue","updateHSLAValue","partialNewValue","nextOnChangeValue","prevHSLA","createElement","Fragment","min","max","label","abbreviation","value","h","nextH","s","nextS","l","nextL","Math","trunc","a","nextA"],"sources":["@wordpress/components/src/color-picker/hsl-input.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { InputWithSlider } from './input-with-slider';\nimport type { HslInputProps } from './types';\n\nexport const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {\n\tconst colorPropHSLA = useMemo( () => color.toHsl(), [ color ] );\n\n\tconst [ internalHSLA, setInternalHSLA ] = useState( { ...colorPropHSLA } );\n\n\tconst isInternalColorSameAsReceivedColor = color.isEqual(\n\t\tcolord( internalHSLA )\n\t);\n\n\tuseEffect( () => {\n\t\tif ( ! isInternalColorSameAsReceivedColor ) {\n\t\t\t// Keep internal HSLA color up to date with the received color prop\n\t\t\tsetInternalHSLA( colorPropHSLA );\n\t\t}\n\t}, [ colorPropHSLA, isInternalColorSameAsReceivedColor ] );\n\n\t// If the internal color is equal to the received color prop, we can use the\n\t// HSLA values from the local state which, compared to the received color prop,\n\t// retain more details about the actual H and S values that the user selected,\n\t// and thus allow for better UX when interacting with the H and S sliders.\n\tconst colorValue = isInternalColorSameAsReceivedColor\n\t\t? internalHSLA\n\t\t: colorPropHSLA;\n\n\tconst updateHSLAValue = (\n\t\tpartialNewValue: Partial< typeof colorPropHSLA >\n\t) => {\n\t\tconst nextOnChangeValue = colord( {\n\t\t\t...colorValue,\n\t\t\t...partialNewValue,\n\t\t} );\n\n\t\t// Fire `onChange` only if the resulting color is different from the\n\t\t// current one.\n\t\t// Otherwise, update the internal HSLA color to cause a re-render.\n\t\tif ( ! color.isEqual( nextOnChangeValue ) ) {\n\t\t\tonChange( nextOnChangeValue );\n\t\t} else {\n\t\t\tsetInternalHSLA( ( prevHSLA ) => ( {\n\t\t\t\t...prevHSLA,\n\t\t\t\t...partialNewValue,\n\t\t\t} ) );\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 359 }\n\t\t\t\tlabel=\"Hue\"\n\t\t\t\tabbreviation=\"H\"\n\t\t\t\tvalue={ colorValue.h }\n\t\t\t\tonChange={ ( nextH: number ) => {\n\t\t\t\t\tupdateHSLAValue( { h: nextH } );\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={ 100 }\n\t\t\t\tlabel=\"Saturation\"\n\t\t\t\tabbreviation=\"S\"\n\t\t\t\tvalue={ colorValue.s }\n\t\t\t\tonChange={ ( nextS: number ) => {\n\t\t\t\t\tupdateHSLAValue( { s: nextS } );\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={ 100 }\n\t\t\t\tlabel=\"Lightness\"\n\t\t\t\tabbreviation=\"L\"\n\t\t\t\tvalue={ colorValue.l }\n\t\t\t\tonChange={ ( nextL: number ) => {\n\t\t\t\t\tupdateHSLAValue( { l: nextL } );\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( 100 * colorValue.a ) }\n\t\t\t\t\tonChange={ ( nextA: number ) => {\n\t\t\t\t\t\tupdateHSLAValue( { a: nextA / 100 } );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["colord","useState","useEffect","useMemo","InputWithSlider","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","HslInput","color","onChange","enableAlpha","colorPropHSLA","toHsl","internalHSLA","setInternalHSLA","isInternalColorSameAsReceivedColor","isEqual","colorValue","updateHSLAValue","partialNewValue","nextOnChangeValue","prevHSLA","children","min","max","label","abbreviation","value","h","nextH","s","nextS","l","nextL","Math","trunc","a","nextA"],"sources":["@wordpress/components/src/color-picker/hsl-input.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { InputWithSlider } from './input-with-slider';\nimport type { HslInputProps } from './types';\n\nexport const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {\n\tconst colorPropHSLA = useMemo( () => color.toHsl(), [ color ] );\n\n\tconst [ internalHSLA, setInternalHSLA ] = useState( { ...colorPropHSLA } );\n\n\tconst isInternalColorSameAsReceivedColor = color.isEqual(\n\t\tcolord( internalHSLA )\n\t);\n\n\tuseEffect( () => {\n\t\tif ( ! isInternalColorSameAsReceivedColor ) {\n\t\t\t// Keep internal HSLA color up to date with the received color prop\n\t\t\tsetInternalHSLA( colorPropHSLA );\n\t\t}\n\t}, [ colorPropHSLA, isInternalColorSameAsReceivedColor ] );\n\n\t// If the internal color is equal to the received color prop, we can use the\n\t// HSLA values from the local state which, compared to the received color prop,\n\t// retain more details about the actual H and S values that the user selected,\n\t// and thus allow for better UX when interacting with the H and S sliders.\n\tconst colorValue = isInternalColorSameAsReceivedColor\n\t\t? internalHSLA\n\t\t: colorPropHSLA;\n\n\tconst updateHSLAValue = (\n\t\tpartialNewValue: Partial< typeof colorPropHSLA >\n\t) => {\n\t\tconst nextOnChangeValue = colord( {\n\t\t\t...colorValue,\n\t\t\t...partialNewValue,\n\t\t} );\n\n\t\t// Fire `onChange` only if the resulting color is different from the\n\t\t// current one.\n\t\t// Otherwise, update the internal HSLA color to cause a re-render.\n\t\tif ( ! color.isEqual( nextOnChangeValue ) ) {\n\t\t\tonChange( nextOnChangeValue );\n\t\t} else {\n\t\t\tsetInternalHSLA( ( prevHSLA ) => ( {\n\t\t\t\t...prevHSLA,\n\t\t\t\t...partialNewValue,\n\t\t\t} ) );\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 359 }\n\t\t\t\tlabel=\"Hue\"\n\t\t\t\tabbreviation=\"H\"\n\t\t\t\tvalue={ colorValue.h }\n\t\t\t\tonChange={ ( nextH: number ) => {\n\t\t\t\t\tupdateHSLAValue( { h: nextH } );\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={ 100 }\n\t\t\t\tlabel=\"Saturation\"\n\t\t\t\tabbreviation=\"S\"\n\t\t\t\tvalue={ colorValue.s }\n\t\t\t\tonChange={ ( nextS: number ) => {\n\t\t\t\t\tupdateHSLAValue( { s: nextS } );\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={ 100 }\n\t\t\t\tlabel=\"Lightness\"\n\t\t\t\tabbreviation=\"L\"\n\t\t\t\tvalue={ colorValue.l }\n\t\t\t\tonChange={ ( nextL: number ) => {\n\t\t\t\t\tupdateHSLAValue( { l: nextL } );\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( 100 * colorValue.a ) }\n\t\t\t\t\tonChange={ ( nextA: number ) => {\n\t\t\t\t\t\tupdateHSLAValue( { a: nextA / 100 } );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n};\n"],"mappings":"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","ignoreList":[]}

package/build-module/color-picker/hsv-color-picker.native.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -15,6 +14,8 @@ import { useRef } from '@wordpress/element';
 import HuePicker from './hue-picker';
 import SaturationValuePicker from './saturation-picker';
 import styles from './style.native.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const HsvColorPicker = props => {
   const maxWidth = Dimensions.get('window').width - 32;
   const satValPickerRef = useRef(null);
@@ -48,37 +49,38 @@ const HsvColorPicker = props => {
     onSatValPickerDragTerminate,
     onSatValPickerPress
   } = props;
-  return createElement(View, {
+  return /*#__PURE__*/_jsxs(View, {
     style: [styles['hsv-container'], containerStyle],
-    testID: "hsv-color-picker"
-  }, createElement(SaturationValuePicker, {
-    containerStyle: satValPickerContainerStyle,
-    currentColor: currentColor,
-    borderRadius: satValPickerBorderRadius,
-    size: satValPickerSize,
-    sliderSize: satValPickerSliderSize,
-    hue: satValPickerHue,
-    saturation: satValPickerSaturation,
-    value: satValPickerValue,
-    onDragStart: onSatValPickerDragStart,
-    onDragMove: onSatValPickerDragMove,
-    onDragEnd: onSatValPickerDragEnd,
-    onDragTerminate: onSatValPickerDragTerminate,
-    onPress: onSatValPickerPress,
-    ref: satValPickerRef
-  }), createElement(HuePicker, {
-    containerStyle: huePickerContainerStyle,
-    borderRadius: huePickerBorderRadius,
-    hue: huePickerHue,
-    barWidth: huePickerBarWidth,
-    barHeight: huePickerBarHeight,
-    sliderSize: huePickerSliderSize,
-    onDragStart: onHuePickerDragStart,
-    onDragMove: onHuePickerDragMove,
-    onDragEnd: onHuePickerDragEnd,
-    onDragTerminate: onHuePickerDragTerminate,
-    onPress: onHuePickerPress
-  }));
+    testID: "hsv-color-picker",
+    children: [/*#__PURE__*/_jsx(SaturationValuePicker, {
+      containerStyle: satValPickerContainerStyle,
+      currentColor: currentColor,
+      borderRadius: satValPickerBorderRadius,
+      size: satValPickerSize,
+      sliderSize: satValPickerSliderSize,
+      hue: satValPickerHue,
+      saturation: satValPickerSaturation,
+      value: satValPickerValue,
+      onDragStart: onSatValPickerDragStart,
+      onDragMove: onSatValPickerDragMove,
+      onDragEnd: onSatValPickerDragEnd,
+      onDragTerminate: onSatValPickerDragTerminate,
+      onPress: onSatValPickerPress,
+      ref: satValPickerRef
+    }), /*#__PURE__*/_jsx(HuePicker, {
+      containerStyle: huePickerContainerStyle,
+      borderRadius: huePickerBorderRadius,
+      hue: huePickerHue,
+      barWidth: huePickerBarWidth,
+      barHeight: huePickerBarHeight,
+      sliderSize: huePickerSliderSize,
+      onDragStart: onHuePickerDragStart,
+      onDragMove: onHuePickerDragMove,
+      onDragEnd: onHuePickerDragEnd,
+      onDragTerminate: onHuePickerDragTerminate,
+      onPress: onHuePickerPress
+    })]
+  });
 };
 export default HsvColorPicker;
 //# sourceMappingURL=hsv-color-picker.native.js.map

package/build-module/color-picker/hsv-color-picker.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["View","Dimensions","useRef","HuePicker","SaturationValuePicker","styles","HsvColorPicker","props","maxWidth","get","width","satValPickerRef","containerStyle","currentColor","huePickerContainerStyle","huePickerBorderRadius","huePickerHue","huePickerBarWidth","huePickerBarHeight","huePickerSliderSize","onHuePickerDragStart","onHuePickerDragMove","onHuePickerDragEnd","onHuePickerDragTerminate","onHuePickerPress","satValPickerContainerStyle","satValPickerBorderRadius","satValPickerSize","height","satValPickerSliderSize","satValPickerHue","satValPickerSaturation","satValPickerValue","onSatValPickerDragStart","onSatValPickerDragMove","onSatValPickerDragEnd","onSatValPickerDragTerminate","onSatValPickerPress","createElement","style","testID","borderRadius","size","sliderSize","hue","saturation","value","onDragStart","onDragMove","onDragEnd","onDragTerminate","onPress","ref","barWidth","barHeight"],"sources":["@wordpress/components/src/color-picker/hsv-color-picker.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, Dimensions } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport HuePicker from './hue-picker';\nimport SaturationValuePicker from './saturation-picker';\nimport styles from './style.native.scss';\n\nconst HsvColorPicker = ( props ) => {\n\tconst maxWidth = Dimensions.get( 'window' ).width - 32;\n\tconst satValPickerRef = useRef( null );\n\n\tconst {\n\t\tcontainerStyle = {},\n\t\tcurrentColor,\n\t\thuePickerContainerStyle = {},\n\t\thuePickerBorderRadius = 0,\n\t\thuePickerHue = 0,\n\t\thuePickerBarWidth = maxWidth,\n\t\thuePickerBarHeight = 12,\n\t\thuePickerSliderSize = 24,\n\t\tonHuePickerDragStart,\n\t\tonHuePickerDragMove,\n\t\tonHuePickerDragEnd,\n\t\tonHuePickerDragTerminate,\n\t\tonHuePickerPress,\n\t\tsatValPickerContainerStyle = {},\n\t\tsatValPickerBorderRadius = 0,\n\t\tsatValPickerSize = { width: maxWidth, height: 200 },\n\t\tsatValPickerSliderSize = 24,\n\t\tsatValPickerHue = 0,\n\t\tsatValPickerSaturation = 1,\n\t\tsatValPickerValue = 1,\n\t\tonSatValPickerDragStart,\n\t\tonSatValPickerDragMove,\n\t\tonSatValPickerDragEnd,\n\t\tonSatValPickerDragTerminate,\n\t\tonSatValPickerPress,\n\t} = props;\n\n\treturn (\n\t\t<View\n\t\t\tstyle={ [ styles[ 'hsv-container' ], containerStyle ] }\n\t\t\ttestID=\"hsv-color-picker\"\n\t\t>\n\t\t\t<SaturationValuePicker\n\t\t\t\tcontainerStyle={ satValPickerContainerStyle }\n\t\t\t\tcurrentColor={ currentColor }\n\t\t\t\tborderRadius={ satValPickerBorderRadius }\n\t\t\t\tsize={ satValPickerSize }\n\t\t\t\tsliderSize={ satValPickerSliderSize }\n\t\t\t\thue={ satValPickerHue }\n\t\t\t\tsaturation={ satValPickerSaturation }\n\t\t\t\tvalue={ satValPickerValue }\n\t\t\t\tonDragStart={ onSatValPickerDragStart }\n\t\t\t\tonDragMove={ onSatValPickerDragMove }\n\t\t\t\tonDragEnd={ onSatValPickerDragEnd }\n\t\t\t\tonDragTerminate={ onSatValPickerDragTerminate }\n\t\t\t\tonPress={ onSatValPickerPress }\n\t\t\t\tref={ satValPickerRef }\n\t\t\t/>\n\t\t\t<HuePicker\n\t\t\t\tcontainerStyle={ huePickerContainerStyle }\n\t\t\t\tborderRadius={ huePickerBorderRadius }\n\t\t\t\thue={ huePickerHue }\n\t\t\t\tbarWidth={ huePickerBarWidth }\n\t\t\t\tbarHeight={ huePickerBarHeight }\n\t\t\t\tsliderSize={ huePickerSliderSize }\n\t\t\t\tonDragStart={ onHuePickerDragStart }\n\t\t\t\tonDragMove={ onHuePickerDragMove }\n\t\t\t\tonDragEnd={ onHuePickerDragEnd }\n\t\t\t\tonDragTerminate={ onHuePickerDragTerminate }\n\t\t\t\tonPress={ onHuePickerPress }\n\t\t\t/>\n\t\t</View>\n\t);\n};\n\nexport default HsvColorPicker;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,UAAU,QAAQ,cAAc;;AAE/C;AACA;AACA;AACA,SAASC,MAAM,QAAQ,oBAAoB;;AAE3C;AACA;AACA;AACA,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,qBAAqB,MAAM,qBAAqB;AACvD,OAAOC,MAAM,MAAM,qBAAqB;AAExC,MAAMC,cAAc,GAAKC,KAAK,IAAM;EACnC,MAAMC,QAAQ,GAAGP,UAAU,CAACQ,GAAG,CAAE,QAAS,CAAC,CAACC,KAAK,GAAG,EAAE;EACtD,MAAMC,eAAe,GAAGT,MAAM,CAAE,IAAK,CAAC;EAEtC,MAAM;IACLU,cAAc,GAAG,CAAC,CAAC;IACnBC,YAAY;IACZC,uBAAuB,GAAG,CAAC,CAAC;IAC5BC,qBAAqB,GAAG,CAAC;IACzBC,YAAY,GAAG,CAAC;IAChBC,iBAAiB,GAAGT,QAAQ;IAC5BU,kBAAkB,GAAG,EAAE;IACvBC,mBAAmB,GAAG,EAAE;IACxBC,oBAAoB;IACpBC,mBAAmB;IACnBC,kBAAkB;IAClBC,wBAAwB;IACxBC,gBAAgB;IAChBC,0BAA0B,GAAG,CAAC,CAAC;IAC/BC,wBAAwB,GAAG,CAAC;IAC5BC,gBAAgB,GAAG;MAAEjB,KAAK,EAAEF,QAAQ;MAAEoB,MAAM,EAAE;IAAI,CAAC;IACnDC,sBAAsB,GAAG,EAAE;IAC3BC,eAAe,GAAG,CAAC;IACnBC,sBAAsB,GAAG,CAAC;IAC1BC,iBAAiB,GAAG,CAAC;IACrBC,uBAAuB;IACvBC,sBAAsB;IACtBC,qBAAqB;IACrBC,2BAA2B;IAC3BC;EACD,CAAC,GAAG9B,KAAK;EAET,OACC+B,aAAA,CAACtC,IAAI;IACJuC,KAAK,EAAG,CAAElC,MAAM,CAAE,eAAe,CAAE,EAAEO,cAAc,CAAI;IACvD4B,MAAM,EAAC;EAAkB,GAEzBF,aAAA,CAAClC,qBAAqB;IACrBQ,cAAc,EAAGa,0BAA4B;IAC7CZ,YAAY,EAAGA,YAAc;IAC7B4B,YAAY,EAAGf,wBAA0B;IACzCgB,IAAI,EAAGf,gBAAkB;IACzBgB,UAAU,EAAGd,sBAAwB;IACrCe,GAAG,EAAGd,eAAiB;IACvBe,UAAU,EAAGd,sBAAwB;IACrCe,KAAK,EAAGd,iBAAmB;IAC3Be,WAAW,EAAGd,uBAAyB;IACvCe,UAAU,EAAGd,sBAAwB;IACrCe,SAAS,EAAGd,qBAAuB;IACnCe,eAAe,EAAGd,2BAA6B;IAC/Ce,OAAO,EAAGd,mBAAqB;IAC/Be,GAAG,EAAGzC;EAAiB,CACvB,CAAC,EACF2B,aAAA,CAACnC,SAAS;IACTS,cAAc,EAAGE,uBAAyB;IAC1C2B,YAAY,EAAG1B,qBAAuB;IACtC6B,GAAG,EAAG5B,YAAc;IACpBqC,QAAQ,EAAGpC,iBAAmB;IAC9BqC,SAAS,EAAGpC,kBAAoB;IAChCyB,UAAU,EAAGxB,mBAAqB;IAClC4B,WAAW,EAAG3B,oBAAsB;IACpC4B,UAAU,EAAG3B,mBAAqB;IAClC4B,SAAS,EAAG3B,kBAAoB;IAChC4B,eAAe,EAAG3B,wBAA0B;IAC5C4B,OAAO,EAAG3B;EAAkB,CAC5B,CACI,CAAC;AAET,CAAC;AAED,eAAelB,cAAc","ignoreList":[]}
+{"version":3,"names":["View","Dimensions","useRef","HuePicker","SaturationValuePicker","styles","jsx","_jsx","jsxs","_jsxs","HsvColorPicker","props","maxWidth","get","width","satValPickerRef","containerStyle","currentColor","huePickerContainerStyle","huePickerBorderRadius","huePickerHue","huePickerBarWidth","huePickerBarHeight","huePickerSliderSize","onHuePickerDragStart","onHuePickerDragMove","onHuePickerDragEnd","onHuePickerDragTerminate","onHuePickerPress","satValPickerContainerStyle","satValPickerBorderRadius","satValPickerSize","height","satValPickerSliderSize","satValPickerHue","satValPickerSaturation","satValPickerValue","onSatValPickerDragStart","onSatValPickerDragMove","onSatValPickerDragEnd","onSatValPickerDragTerminate","onSatValPickerPress","style","testID","children","borderRadius","size","sliderSize","hue","saturation","value","onDragStart","onDragMove","onDragEnd","onDragTerminate","onPress","ref","barWidth","barHeight"],"sources":["@wordpress/components/src/color-picker/hsv-color-picker.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, Dimensions } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport HuePicker from './hue-picker';\nimport SaturationValuePicker from './saturation-picker';\nimport styles from './style.native.scss';\n\nconst HsvColorPicker = ( props ) => {\n\tconst maxWidth = Dimensions.get( 'window' ).width - 32;\n\tconst satValPickerRef = useRef( null );\n\n\tconst {\n\t\tcontainerStyle = {},\n\t\tcurrentColor,\n\t\thuePickerContainerStyle = {},\n\t\thuePickerBorderRadius = 0,\n\t\thuePickerHue = 0,\n\t\thuePickerBarWidth = maxWidth,\n\t\thuePickerBarHeight = 12,\n\t\thuePickerSliderSize = 24,\n\t\tonHuePickerDragStart,\n\t\tonHuePickerDragMove,\n\t\tonHuePickerDragEnd,\n\t\tonHuePickerDragTerminate,\n\t\tonHuePickerPress,\n\t\tsatValPickerContainerStyle = {},\n\t\tsatValPickerBorderRadius = 0,\n\t\tsatValPickerSize = { width: maxWidth, height: 200 },\n\t\tsatValPickerSliderSize = 24,\n\t\tsatValPickerHue = 0,\n\t\tsatValPickerSaturation = 1,\n\t\tsatValPickerValue = 1,\n\t\tonSatValPickerDragStart,\n\t\tonSatValPickerDragMove,\n\t\tonSatValPickerDragEnd,\n\t\tonSatValPickerDragTerminate,\n\t\tonSatValPickerPress,\n\t} = props;\n\n\treturn (\n\t\t<View\n\t\t\tstyle={ [ styles[ 'hsv-container' ], containerStyle ] }\n\t\t\ttestID=\"hsv-color-picker\"\n\t\t>\n\t\t\t<SaturationValuePicker\n\t\t\t\tcontainerStyle={ satValPickerContainerStyle }\n\t\t\t\tcurrentColor={ currentColor }\n\t\t\t\tborderRadius={ satValPickerBorderRadius }\n\t\t\t\tsize={ satValPickerSize }\n\t\t\t\tsliderSize={ satValPickerSliderSize }\n\t\t\t\thue={ satValPickerHue }\n\t\t\t\tsaturation={ satValPickerSaturation }\n\t\t\t\tvalue={ satValPickerValue }\n\t\t\t\tonDragStart={ onSatValPickerDragStart }\n\t\t\t\tonDragMove={ onSatValPickerDragMove }\n\t\t\t\tonDragEnd={ onSatValPickerDragEnd }\n\t\t\t\tonDragTerminate={ onSatValPickerDragTerminate }\n\t\t\t\tonPress={ onSatValPickerPress }\n\t\t\t\tref={ satValPickerRef }\n\t\t\t/>\n\t\t\t<HuePicker\n\t\t\t\tcontainerStyle={ huePickerContainerStyle }\n\t\t\t\tborderRadius={ huePickerBorderRadius }\n\t\t\t\thue={ huePickerHue }\n\t\t\t\tbarWidth={ huePickerBarWidth }\n\t\t\t\tbarHeight={ huePickerBarHeight }\n\t\t\t\tsliderSize={ huePickerSliderSize }\n\t\t\t\tonDragStart={ onHuePickerDragStart }\n\t\t\t\tonDragMove={ onHuePickerDragMove }\n\t\t\t\tonDragEnd={ onHuePickerDragEnd }\n\t\t\t\tonDragTerminate={ onHuePickerDragTerminate }\n\t\t\t\tonPress={ onHuePickerPress }\n\t\t\t/>\n\t\t</View>\n\t);\n};\n\nexport default HsvColorPicker;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,UAAU,QAAQ,cAAc;;AAE/C;AACA;AACA;AACA,SAASC,MAAM,QAAQ,oBAAoB;;AAE3C;AACA;AACA;AACA,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,qBAAqB,MAAM,qBAAqB;AACvD,OAAOC,MAAM,MAAM,qBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEzC,MAAMC,cAAc,GAAKC,KAAK,IAAM;EACnC,MAAMC,QAAQ,GAAGX,UAAU,CAACY,GAAG,CAAE,QAAS,CAAC,CAACC,KAAK,GAAG,EAAE;EACtD,MAAMC,eAAe,GAAGb,MAAM,CAAE,IAAK,CAAC;EAEtC,MAAM;IACLc,cAAc,GAAG,CAAC,CAAC;IACnBC,YAAY;IACZC,uBAAuB,GAAG,CAAC,CAAC;IAC5BC,qBAAqB,GAAG,CAAC;IACzBC,YAAY,GAAG,CAAC;IAChBC,iBAAiB,GAAGT,QAAQ;IAC5BU,kBAAkB,GAAG,EAAE;IACvBC,mBAAmB,GAAG,EAAE;IACxBC,oBAAoB;IACpBC,mBAAmB;IACnBC,kBAAkB;IAClBC,wBAAwB;IACxBC,gBAAgB;IAChBC,0BAA0B,GAAG,CAAC,CAAC;IAC/BC,wBAAwB,GAAG,CAAC;IAC5BC,gBAAgB,GAAG;MAAEjB,KAAK,EAAEF,QAAQ;MAAEoB,MAAM,EAAE;IAAI,CAAC;IACnDC,sBAAsB,GAAG,EAAE;IAC3BC,eAAe,GAAG,CAAC;IACnBC,sBAAsB,GAAG,CAAC;IAC1BC,iBAAiB,GAAG,CAAC;IACrBC,uBAAuB;IACvBC,sBAAsB;IACtBC,qBAAqB;IACrBC,2BAA2B;IAC3BC;EACD,CAAC,GAAG9B,KAAK;EAET,oBACCF,KAAA,CAACT,IAAI;IACJ0C,KAAK,EAAG,CAAErC,MAAM,CAAE,eAAe,CAAE,EAAEW,cAAc,CAAI;IACvD2B,MAAM,EAAC,kBAAkB;IAAAC,QAAA,gBAEzBrC,IAAA,CAACH,qBAAqB;MACrBY,cAAc,EAAGa,0BAA4B;MAC7CZ,YAAY,EAAGA,YAAc;MAC7B4B,YAAY,EAAGf,wBAA0B;MACzCgB,IAAI,EAAGf,gBAAkB;MACzBgB,UAAU,EAAGd,sBAAwB;MACrCe,GAAG,EAAGd,eAAiB;MACvBe,UAAU,EAAGd,sBAAwB;MACrCe,KAAK,EAAGd,iBAAmB;MAC3Be,WAAW,EAAGd,uBAAyB;MACvCe,UAAU,EAAGd,sBAAwB;MACrCe,SAAS,EAAGd,qBAAuB;MACnCe,eAAe,EAAGd,2BAA6B;MAC/Ce,OAAO,EAAGd,mBAAqB;MAC/Be,GAAG,EAAGzC;IAAiB,CACvB,CAAC,eACFR,IAAA,CAACJ,SAAS;MACTa,cAAc,EAAGE,uBAAyB;MAC1C2B,YAAY,EAAG1B,qBAAuB;MACtC6B,GAAG,EAAG5B,YAAc;MACpBqC,QAAQ,EAAGpC,iBAAmB;MAC9BqC,SAAS,EAAGpC,kBAAoB;MAChCyB,UAAU,EAAGxB,mBAAqB;MAClC4B,WAAW,EAAG3B,oBAAsB;MACpC4B,UAAU,EAAG3B,mBAAqB;MAClC4B,SAAS,EAAG3B,kBAAoB;MAChC4B,eAAe,EAAG3B,wBAA0B;MAC5C4B,OAAO,EAAG3B;IAAkB,CAC5B,CAAC;EAAA,CACG,CAAC;AAET,CAAC;AAED,eAAelB,cAAc","ignoreList":[]}

package/build-module/color-picker/hue-picker.native.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -14,6 +13,8 @@ import React, { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import styles from './style.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export default class HuePicker extends Component {
   constructor(props) {
     super(props);
@@ -145,7 +146,7 @@ export default class HuePicker extends Component {
       borderRadius = 0
     } = this.props;
     const borderWidth = sliderSize / 10;
-    return createElement(View, {
+    return /*#__PURE__*/_jsxs(View, {
       style: this.getContainerStyle(),
       ...this.panResponder.panHandlers,
       hitSlop: {
@@ -153,37 +154,39 @@ export default class HuePicker extends Component {
         bottom: 10,
         left: 0,
         right: 0
-      }
-    }, createElement(LinearGradient, {
-      colors: hueColors,
-      style: {
-        borderRadius
       },
-      start: {
-        x: 0,
-        y: 0
-      },
-      end: {
-        x: 1,
-        y: 0
-      }
-    }, createElement(View, {
-      style: {
-        width: barWidth,
-        height: barHeight
-      }
-    })), createElement(Animated.View, {
-      pointerEvents: "none",
-      style: [styles['hue-slider'], {
-        width: sliderSize,
-        height: sliderSize,
-        left: (sliderSize - borderWidth) / 2,
-        borderRadius: sliderSize / 2,
-        transform: [{
-          translateX: this.sliderX
+      children: [/*#__PURE__*/_jsx(LinearGradient, {
+        colors: hueColors,
+        style: {
+          borderRadius
+        },
+        start: {
+          x: 0,
+          y: 0
+        },
+        end: {
+          x: 1,
+          y: 0
+        },
+        children: /*#__PURE__*/_jsx(View, {
+          style: {
+            width: barWidth,
+            height: barHeight
+          }
+        })
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "none",
+        style: [styles['hue-slider'], {
+          width: sliderSize,
+          height: sliderSize,
+          left: (sliderSize - borderWidth) / 2,
+          borderRadius: sliderSize / 2,
+          transform: [{
+            translateX: this.sliderX
+          }]
         }]
-      }]
-    }));
+      })]
+    });
   }
 }
 //# sourceMappingURL=hue-picker.native.js.map

package/build-module/color-picker/hue-picker.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["Animated","View","PanResponder","LinearGradient","React","Component","styles","HuePicker","constructor","props","hueColors","sliderX","Value","barHeight","hue","panResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","evt","gestureState","onPress","dragStartValue","computeHueValuePress","nativeEvent","fireDragEvent","onPanResponderMove","onPanResponderTerminationRequest","onPanResponderRelease","onPanResponderTerminate","onShouldBlockNativeResponder","componentDidUpdate","prevProps","barWidth","sliderSize","borderWidth","setValue","normalizeValue","value","getContainerStyle","containerStyle","paddingLeft","paddingTop","paddingBottom","paddingRight","computeHueValueDrag","dx","diff","updatedHue","event","locationX","eventName","firePressEvent","render","borderRadius","createElement","style","panHandlers","hitSlop","top","bottom","left","right","colors","start","x","y","end","width","height","pointerEvents","transform","translateX"],"sources":["@wordpress/components/src/color-picker/hue-picker.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, View, PanResponder } from 'react-native';\nimport LinearGradient from 'react-native-linear-gradient';\n\n/**\n * WordPress dependencies\n */\nimport React, { Component } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nexport default class HuePicker extends Component {\n\tconstructor( props ) {\n\t\tsuper( props );\n\t\tthis.hueColors = [\n\t\t\t'#ff0000',\n\t\t\t'#ffff00',\n\t\t\t'#00ff00',\n\t\t\t'#00ffff',\n\t\t\t'#0000ff',\n\t\t\t'#ff00ff',\n\t\t\t'#ff0000',\n\t\t];\n\t\tthis.sliderX = new Animated.Value(\n\t\t\t( props.barHeight * props.hue ) / 360\n\t\t);\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\tthis.dragStartValue = this.computeHueValuePress( evt );\n\n\t\t\t\tif ( onPress ) {\n\t\t\t\t\tonPress( {\n\t\t\t\t\t\thue: this.computeHueValuePress( 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\tcomponentDidUpdate( prevProps ) {\n\t\tconst { hue = 0, barWidth = 200, sliderSize = 24 } = this.props;\n\t\tconst borderWidth = sliderSize / 10;\n\t\tif ( prevProps.hue !== hue || prevProps.barWidth !== barWidth ) {\n\t\t\tthis.sliderX.setValue(\n\t\t\t\t( ( barWidth - sliderSize + borderWidth ) * hue ) / 360\n\t\t\t);\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\tgetContainerStyle() {\n\t\tconst {\n\t\t\tsliderSize = 24,\n\t\t\tbarHeight = 12,\n\t\t\tcontainerStyle = {},\n\t\t} = this.props;\n\t\tconst paddingLeft = sliderSize / 2;\n\t\tconst paddingTop =\n\t\t\tsliderSize - barHeight > 0 ? ( sliderSize - barHeight ) / 2 : 0;\n\t\treturn [\n\t\t\tstyles[ 'hsv-container' ],\n\t\t\tcontainerStyle,\n\t\t\t{\n\t\t\t\tpaddingTop,\n\t\t\t\tpaddingBottom: paddingTop,\n\t\t\t\tpaddingLeft,\n\t\t\t\tpaddingRight: paddingLeft,\n\t\t\t},\n\t\t];\n\t}\n\n\tcomputeHueValueDrag( gestureState ) {\n\t\tconst { dx } = gestureState;\n\t\tconst { barWidth = 200 } = this.props;\n\t\tconst { dragStartValue } = this;\n\t\tconst diff = dx / barWidth;\n\t\tconst updatedHue =\n\t\t\tthis.normalizeValue( dragStartValue / 360 + diff ) * 360;\n\t\treturn updatedHue;\n\t}\n\n\tcomputeHueValuePress( event ) {\n\t\tconst { nativeEvent } = event;\n\t\tconst { locationX } = nativeEvent;\n\t\tconst { barWidth = 200 } = this.props;\n\t\tconst updatedHue = this.normalizeValue( locationX / barWidth ) * 360;\n\t\treturn updatedHue;\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\thue: this.computeHueValueDrag( gestureState ),\n\t\t\t\tgestureState,\n\t\t\t} );\n\t\t}\n\t}\n\n\tfirePressEvent( event ) {\n\t\tconst { onPress } = this.props;\n\t\tif ( onPress ) {\n\t\t\tonPress( {\n\t\t\t\thue: this.computeHueValuePress( event ),\n\t\t\t\tnativeEvent: event.nativeEvent,\n\t\t\t} );\n\t\t}\n\t}\n\n\trender() {\n\t\tconst { hueColors } = this;\n\t\tconst {\n\t\t\tsliderSize = 24,\n\t\t\tbarWidth = 200,\n\t\t\tbarHeight = 12,\n\t\t\tborderRadius = 0,\n\t\t} = this.props;\n\t\tconst borderWidth = sliderSize / 10;\n\t\treturn (\n\t\t\t<View\n\t\t\t\tstyle={ this.getContainerStyle() }\n\t\t\t\t{ ...this.panResponder.panHandlers }\n\t\t\t\thitSlop={ {\n\t\t\t\t\ttop: 10,\n\t\t\t\t\tbottom: 10,\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tright: 0,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<LinearGradient\n\t\t\t\t\tcolors={ hueColors }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tborderRadius,\n\t\t\t\t\t} }\n\t\t\t\t\tstart={ { x: 0, y: 0 } }\n\t\t\t\t\tend={ { x: 1, y: 0 } }\n\t\t\t\t>\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\twidth: barWidth,\n\t\t\t\t\t\t\theight: barHeight,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</LinearGradient>\n\t\t\t\t<Animated.View\n\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\tstyle={ [\n\t\t\t\t\t\tstyles[ 'hue-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\tleft: ( sliderSize - borderWidth ) / 2,\n\t\t\t\t\t\t\tborderRadius: sliderSize / 2,\n\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttranslateX: this.sliderX,\n\t\t\t\t\t\t\t\t},\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":["Animated","View","PanResponder","LinearGradient","React","Component","styles","jsx","_jsx","jsxs","_jsxs","HuePicker","constructor","props","hueColors","sliderX","Value","barHeight","hue","panResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","evt","gestureState","onPress","dragStartValue","computeHueValuePress","nativeEvent","fireDragEvent","onPanResponderMove","onPanResponderTerminationRequest","onPanResponderRelease","onPanResponderTerminate","onShouldBlockNativeResponder","componentDidUpdate","prevProps","barWidth","sliderSize","borderWidth","setValue","normalizeValue","value","getContainerStyle","containerStyle","paddingLeft","paddingTop","paddingBottom","paddingRight","computeHueValueDrag","dx","diff","updatedHue","event","locationX","eventName","firePressEvent","render","borderRadius","style","panHandlers","hitSlop","top","bottom","left","right","children","colors","start","x","y","end","width","height","pointerEvents","transform","translateX"],"sources":["@wordpress/components/src/color-picker/hue-picker.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, View, PanResponder } from 'react-native';\nimport LinearGradient from 'react-native-linear-gradient';\n\n/**\n * WordPress dependencies\n */\nimport React, { Component } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nexport default class HuePicker extends Component {\n\tconstructor( props ) {\n\t\tsuper( props );\n\t\tthis.hueColors = [\n\t\t\t'#ff0000',\n\t\t\t'#ffff00',\n\t\t\t'#00ff00',\n\t\t\t'#00ffff',\n\t\t\t'#0000ff',\n\t\t\t'#ff00ff',\n\t\t\t'#ff0000',\n\t\t];\n\t\tthis.sliderX = new Animated.Value(\n\t\t\t( props.barHeight * props.hue ) / 360\n\t\t);\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\tthis.dragStartValue = this.computeHueValuePress( evt );\n\n\t\t\t\tif ( onPress ) {\n\t\t\t\t\tonPress( {\n\t\t\t\t\t\thue: this.computeHueValuePress( 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\tcomponentDidUpdate( prevProps ) {\n\t\tconst { hue = 0, barWidth = 200, sliderSize = 24 } = this.props;\n\t\tconst borderWidth = sliderSize / 10;\n\t\tif ( prevProps.hue !== hue || prevProps.barWidth !== barWidth ) {\n\t\t\tthis.sliderX.setValue(\n\t\t\t\t( ( barWidth - sliderSize + borderWidth ) * hue ) / 360\n\t\t\t);\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\tgetContainerStyle() {\n\t\tconst {\n\t\t\tsliderSize = 24,\n\t\t\tbarHeight = 12,\n\t\t\tcontainerStyle = {},\n\t\t} = this.props;\n\t\tconst paddingLeft = sliderSize / 2;\n\t\tconst paddingTop =\n\t\t\tsliderSize - barHeight > 0 ? ( sliderSize - barHeight ) / 2 : 0;\n\t\treturn [\n\t\t\tstyles[ 'hsv-container' ],\n\t\t\tcontainerStyle,\n\t\t\t{\n\t\t\t\tpaddingTop,\n\t\t\t\tpaddingBottom: paddingTop,\n\t\t\t\tpaddingLeft,\n\t\t\t\tpaddingRight: paddingLeft,\n\t\t\t},\n\t\t];\n\t}\n\n\tcomputeHueValueDrag( gestureState ) {\n\t\tconst { dx } = gestureState;\n\t\tconst { barWidth = 200 } = this.props;\n\t\tconst { dragStartValue } = this;\n\t\tconst diff = dx / barWidth;\n\t\tconst updatedHue =\n\t\t\tthis.normalizeValue( dragStartValue / 360 + diff ) * 360;\n\t\treturn updatedHue;\n\t}\n\n\tcomputeHueValuePress( event ) {\n\t\tconst { nativeEvent } = event;\n\t\tconst { locationX } = nativeEvent;\n\t\tconst { barWidth = 200 } = this.props;\n\t\tconst updatedHue = this.normalizeValue( locationX / barWidth ) * 360;\n\t\treturn updatedHue;\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\thue: this.computeHueValueDrag( gestureState ),\n\t\t\t\tgestureState,\n\t\t\t} );\n\t\t}\n\t}\n\n\tfirePressEvent( event ) {\n\t\tconst { onPress } = this.props;\n\t\tif ( onPress ) {\n\t\t\tonPress( {\n\t\t\t\thue: this.computeHueValuePress( event ),\n\t\t\t\tnativeEvent: event.nativeEvent,\n\t\t\t} );\n\t\t}\n\t}\n\n\trender() {\n\t\tconst { hueColors } = this;\n\t\tconst {\n\t\t\tsliderSize = 24,\n\t\t\tbarWidth = 200,\n\t\t\tbarHeight = 12,\n\t\t\tborderRadius = 0,\n\t\t} = this.props;\n\t\tconst borderWidth = sliderSize / 10;\n\t\treturn (\n\t\t\t<View\n\t\t\t\tstyle={ this.getContainerStyle() }\n\t\t\t\t{ ...this.panResponder.panHandlers }\n\t\t\t\thitSlop={ {\n\t\t\t\t\ttop: 10,\n\t\t\t\t\tbottom: 10,\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tright: 0,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<LinearGradient\n\t\t\t\t\tcolors={ hueColors }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tborderRadius,\n\t\t\t\t\t} }\n\t\t\t\t\tstart={ { x: 0, y: 0 } }\n\t\t\t\t\tend={ { x: 1, y: 0 } }\n\t\t\t\t>\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\twidth: barWidth,\n\t\t\t\t\t\t\theight: barHeight,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</LinearGradient>\n\t\t\t\t<Animated.View\n\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\tstyle={ [\n\t\t\t\t\t\tstyles[ 'hue-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\tleft: ( sliderSize - borderWidth ) / 2,\n\t\t\t\t\t\t\tborderRadius: sliderSize / 2,\n\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttranslateX: this.sliderX,\n\t\t\t\t\t\t\t\t},\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":"AAAA;AACA;AACA;AACA,SAASA,QAAQ,EAAEC,IAAI,EAAEC,YAAY,QAAQ,cAAc;AAC3D,OAAOC,cAAc,MAAM,8BAA8B;;AAEzD;AACA;AACA;AACA,OAAOC,KAAK,IAAIC,SAAS,QAAQ,oBAAoB;;AAErD;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAElC,eAAe,MAAMC,SAAS,SAASN,SAAS,CAAC;EAChDO,WAAWA,CAAEC,KAAK,EAAG;IACpB,KAAK,CAAEA,KAAM,CAAC;IACd,IAAI,CAACC,SAAS,GAAG,CAChB,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACT;IACD,IAAI,CAACC,OAAO,GAAG,IAAIf,QAAQ,CAACgB,KAAK,CAC9BH,KAAK,CAACI,SAAS,GAAGJ,KAAK,CAACK,GAAG,GAAK,GACnC,CAAC;IACD,IAAI,CAACC,YAAY,GAAGjB,YAAY,CAACkB,MAAM,CAAE;MACxCC,4BAA4B,EAAEA,CAAA,KAAM,IAAI;MACxCC,mCAAmC,EAAEA,CAAA,KAAM,IAAI;MAC/CC,2BAA2B,EAAEA,CAAA,KAAM,IAAI;MACvCC,kCAAkC,EAAEA,CAAA,KAAM,IAAI;MAC9CC,mBAAmB,EAAEA,CAAEC,GAAG,EAAEC,YAAY,KAAM;QAC7C,MAAM;UAAEC;QAAQ,CAAC,GAAG,IAAI,CAACf,KAAK;QAC9B,IAAI,CAACgB,cAAc,GAAG,IAAI,CAACC,oBAAoB,CAAEJ,GAAI,CAAC;QAEtD,IAAKE,OAAO,EAAG;UACdA,OAAO,CAAE;YACRV,GAAG,EAAE,IAAI,CAACY,oBAAoB,CAAEJ,GAAI,CAAC;YACrCK,WAAW,EAAEL,GAAG,CAACK;UAClB,CAAE,CAAC;QACJ;QAEA,IAAI,CAACC,aAAa,CAAE,aAAa,EAAEL,YAAa,CAAC;MAClD,CAAC;MACDM,kBAAkB,EAAEA,CAAEP,GAAG,EAAEC,YAAY,KAAM;QAC5C,IAAI,CAACK,aAAa,CAAE,YAAY,EAAEL,YAAa,CAAC;MACjD,CAAC;MACDO,gCAAgC,EAAEA,CAAA,KAAM,IAAI;MAC5CC,qBAAqB,EAAEA,CAAET,GAAG,EAAEC,YAAY,KAAM;QAC/C,IAAI,CAACK,aAAa,CAAE,WAAW,EAAEL,YAAa,CAAC;MAChD,CAAC;MACDS,uBAAuB,EAAEA,CAAEV,GAAG,EAAEC,YAAY,KAAM;QACjD,IAAI,CAACK,aAAa,CAAE,iBAAiB,EAAEL,YAAa,CAAC;MACtD,CAAC;MACDU,4BAA4B,EAAEA,CAAA,KAAM;IACrC,CAAE,CAAC;EACJ;EAEAC,kBAAkBA,CAAEC,SAAS,EAAG;IAC/B,MAAM;MAAErB,GAAG,GAAG,CAAC;MAAEsB,QAAQ,GAAG,GAAG;MAAEC,UAAU,GAAG;IAAG,CAAC,GAAG,IAAI,CAAC5B,KAAK;IAC/D,MAAM6B,WAAW,GAAGD,UAAU,GAAG,EAAE;IACnC,IAAKF,SAAS,CAACrB,GAAG,KAAKA,GAAG,IAAIqB,SAAS,CAACC,QAAQ,KAAKA,QAAQ,EAAG;MAC/D,IAAI,CAACzB,OAAO,CAAC4B,QAAQ,CAClB,CAAEH,QAAQ,GAAGC,UAAU,GAAGC,WAAW,IAAKxB,GAAG,GAAK,GACrD,CAAC;IACF;EACD;EAEA0B,cAAcA,CAAEC,KAAK,EAAG;IACvB,IAAKA,KAAK,GAAG,CAAC,EAAG;MAChB,OAAO,CAAC;IACT;IACA,IAAKA,KAAK,GAAG,CAAC,EAAG;MAChB,OAAO,CAAC;IACT;IACA,OAAOA,KAAK;EACb;EAEAC,iBAAiBA,CAAA,EAAG;IACnB,MAAM;MACLL,UAAU,GAAG,EAAE;MACfxB,SAAS,GAAG,EAAE;MACd8B,cAAc,GAAG,CAAC;IACnB,CAAC,GAAG,IAAI,CAAClC,KAAK;IACd,MAAMmC,WAAW,GAAGP,UAAU,GAAG,CAAC;IAClC,MAAMQ,UAAU,GACfR,UAAU,GAAGxB,SAAS,GAAG,CAAC,GAAG,CAAEwB,UAAU,GAAGxB,SAAS,IAAK,CAAC,GAAG,CAAC;IAChE,OAAO,CACNX,MAAM,CAAE,eAAe,CAAE,EACzByC,cAAc,EACd;MACCE,UAAU;MACVC,aAAa,EAAED,UAAU;MACzBD,WAAW;MACXG,YAAY,EAAEH;IACf,CAAC,CACD;EACF;EAEAI,mBAAmBA,CAAEzB,YAAY,EAAG;IACnC,MAAM;MAAE0B;IAAG,CAAC,GAAG1B,YAAY;IAC3B,MAAM;MAAEa,QAAQ,GAAG;IAAI,CAAC,GAAG,IAAI,CAAC3B,KAAK;IACrC,MAAM;MAAEgB;IAAe,CAAC,GAAG,IAAI;IAC/B,MAAMyB,IAAI,GAAGD,EAAE,GAAGb,QAAQ;IAC1B,MAAMe,UAAU,GACf,IAAI,CAACX,cAAc,CAAEf,cAAc,GAAG,GAAG,GAAGyB,IAAK,CAAC,GAAG,GAAG;IACzD,OAAOC,UAAU;EAClB;EAEAzB,oBAAoBA,CAAE0B,KAAK,EAAG;IAC7B,MAAM;MAAEzB;IAAY,CAAC,GAAGyB,KAAK;IAC7B,MAAM;MAAEC;IAAU,CAAC,GAAG1B,WAAW;IACjC,MAAM;MAAES,QAAQ,GAAG;IAAI,CAAC,GAAG,IAAI,CAAC3B,KAAK;IACrC,MAAM0C,UAAU,GAAG,IAAI,CAACX,cAAc,CAAEa,SAAS,GAAGjB,QAAS,CAAC,GAAG,GAAG;IACpE,OAAOe,UAAU;EAClB;EAEAvB,aAAaA,CAAE0B,SAAS,EAAE/B,YAAY,EAAG;IACxC,MAAM;MAAE,CAAE+B,SAAS,GAAIF;IAAM,CAAC,GAAG,IAAI,CAAC3C,KAAK;IAC3C,IAAK2C,KAAK,EAAG;MACZA,KAAK,CAAE;QACNtC,GAAG,EAAE,IAAI,CAACkC,mBAAmB,CAAEzB,YAAa,CAAC;QAC7CA;MACD,CAAE,CAAC;IACJ;EACD;EAEAgC,cAAcA,CAAEH,KAAK,EAAG;IACvB,MAAM;MAAE5B;IAAQ,CAAC,GAAG,IAAI,CAACf,KAAK;IAC9B,IAAKe,OAAO,EAAG;MACdA,OAAO,CAAE;QACRV,GAAG,EAAE,IAAI,CAACY,oBAAoB,CAAE0B,KAAM,CAAC;QACvCzB,WAAW,EAAEyB,KAAK,CAACzB;MACpB,CAAE,CAAC;IACJ;EACD;EAEA6B,MAAMA,CAAA,EAAG;IACR,MAAM;MAAE9C;IAAU,CAAC,GAAG,IAAI;IAC1B,MAAM;MACL2B,UAAU,GAAG,EAAE;MACfD,QAAQ,GAAG,GAAG;MACdvB,SAAS,GAAG,EAAE;MACd4C,YAAY,GAAG;IAChB,CAAC,GAAG,IAAI,CAAChD,KAAK;IACd,MAAM6B,WAAW,GAAGD,UAAU,GAAG,EAAE;IACnC,oBACC/B,KAAA,CAACT,IAAI;MACJ6D,KAAK,EAAG,IAAI,CAAChB,iBAAiB,CAAC,CAAG;MAAA,GAC7B,IAAI,CAAC3B,YAAY,CAAC4C,WAAW;MAClCC,OAAO,EAAG;QACTC,GAAG,EAAE,EAAE;QACPC,MAAM,EAAE,EAAE;QACVC,IAAI,EAAE,CAAC;QACPC,KAAK,EAAE;MACR,CAAG;MAAAC,QAAA,gBAEH7D,IAAA,CAACL,cAAc;QACdmE,MAAM,EAAGxD,SAAW;QACpBgD,KAAK,EAAG;UACPD;QACD,CAAG;QACHU,KAAK,EAAG;UAAEC,CAAC,EAAE,CAAC;UAAEC,CAAC,EAAE;QAAE,CAAG;QACxBC,GAAG,EAAG;UAAEF,CAAC,EAAE,CAAC;UAAEC,CAAC,EAAE;QAAE,CAAG;QAAAJ,QAAA,eAEtB7D,IAAA,CAACP,IAAI;UACJ6D,KAAK,EAAG;YACPa,KAAK,EAAEnC,QAAQ;YACfoC,MAAM,EAAE3D;UACT;QAAG,CACH;MAAC,CACa,CAAC,eACjBT,IAAA,CAACR,QAAQ,CAACC,IAAI;QACb4E,aAAa,EAAC,MAAM;QACpBf,KAAK,EAAG,CACPxD,MAAM,CAAE,YAAY,CAAE,EACtB;UACCqE,KAAK,EAAElC,UAAU;UACjBmC,MAAM,EAAEnC,UAAU;UAClB0B,IAAI,EAAE,CAAE1B,UAAU,GAAGC,WAAW,IAAK,CAAC;UACtCmB,YAAY,EAAEpB,UAAU,GAAG,CAAC;UAC5BqC,SAAS,EAAE,CACV;YACCC,UAAU,EAAE,IAAI,CAAChE;UAClB,CAAC;QAEH,CAAC;MACC,CACH,CAAC;IAAA,CACG,CAAC;EAET;AACD","ignoreList":[]}

package/build-module/color-picker/index.native.js

@@ -1,4 +1,3 @@
-import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */
@@ -10,7 +9,6 @@ import namesPlugin from 'colord/plugins/names';
  */
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { BottomSheet } from '@wordpress/components';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { Icon, check, close } from '@wordpress/icons';
 /**
@@ -18,6 +16,10 @@ import { Icon, check, close } from '@wordpress/icons';
  */
 import styles from './style.scss';
 import HsvColorPicker from './hsv-color-picker.native.js';
+import BottomSheet from '../mobile/bottom-sheet';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 extend([namesPlugin]);
 function ColorPicker({
   shouldEnableBottomSheetScroll,
@@ -116,57 +118,70 @@ function ColorPicker({
       onBottomSheetClosed();
     }
   }
-  return createElement(Fragment, null, createElement(HsvColorPicker, {
-    huePickerHue: hue,
-    currentColor: currentColor,
-    onHuePickerDragMove: updateColor,
-    onHuePickerPress: !isBottomSheetContentScrolling && updateColor,
-    satValPickerHue: hue,
-    satValPickerSaturation: sat,
-    satValPickerValue: val,
-    onSatValPickerDragMove: updateColor,
-    onSatValPickerPress: !isBottomSheetContentScrolling && updateColor,
-    onSatValPickerDragStart: () => {
-      shouldEnableBottomSheetScroll(false);
-    },
-    onSatValPickerDragEnd: () => shouldEnableBottomSheetScroll(true),
-    onHuePickerDragStart: () => shouldEnableBottomSheetScroll(false),
-    onHuePickerDragEnd: () => shouldEnableBottomSheetScroll(true),
-    huePickerBarWidth: pickerWidth,
-    huePickerBarHeight: pickerPointerSize / 2,
-    satValPickerSize: {
-      width: pickerWidth,
-      height: pickerHeight
-    },
-    satValPickerSliderSize: pickerPointerSize * 2,
-    satValPickerBorderRadius: borderRadius,
-    huePickerBorderRadius: borderRadius
-  }), createElement(View, {
-    style: footerStyle
-  }, createElement(TouchableWithoutFeedback, {
-    onPress: () => onButtonPress('cancel'),
-    hitSlop: hitSlop
-  }, createElement(View, null, isIOS ? createElement(Text, {
-    style: cancelButtonStyle
-  }, __('Cancel')) : createElement(Icon, {
-    icon: close,
-    size: 24,
-    style: cancelButtonStyle
-  }))), bottomLabelText ? createElement(Text, {
-    style: selectColorTextStyle
-  }, bottomLabelText) : createElement(Text, {
-    style: colorTextStyle,
-    selectable: true
-  }, currentColor.toUpperCase()), createElement(TouchableWithoutFeedback, {
-    onPress: () => onButtonPress('apply'),
-    hitSlop: hitSlop
-  }, createElement(View, null, isIOS ? createElement(Text, {
-    style: applyButtonStyle
-  }, __('Apply')) : createElement(Icon, {
-    icon: check,
-    size: 24,
-    style: applyButtonStyle
-  })))));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(HsvColorPicker, {
+      huePickerHue: hue,
+      currentColor: currentColor,
+      onHuePickerDragMove: updateColor,
+      onHuePickerPress: !isBottomSheetContentScrolling && updateColor,
+      satValPickerHue: hue,
+      satValPickerSaturation: sat,
+      satValPickerValue: val,
+      onSatValPickerDragMove: updateColor,
+      onSatValPickerPress: !isBottomSheetContentScrolling && updateColor,
+      onSatValPickerDragStart: () => {
+        shouldEnableBottomSheetScroll(false);
+      },
+      onSatValPickerDragEnd: () => shouldEnableBottomSheetScroll(true),
+      onHuePickerDragStart: () => shouldEnableBottomSheetScroll(false),
+      onHuePickerDragEnd: () => shouldEnableBottomSheetScroll(true),
+      huePickerBarWidth: pickerWidth,
+      huePickerBarHeight: pickerPointerSize / 2,
+      satValPickerSize: {
+        width: pickerWidth,
+        height: pickerHeight
+      },
+      satValPickerSliderSize: pickerPointerSize * 2,
+      satValPickerBorderRadius: borderRadius,
+      huePickerBorderRadius: borderRadius
+    }), /*#__PURE__*/_jsxs(View, {
+      style: footerStyle,
+      children: [/*#__PURE__*/_jsx(TouchableWithoutFeedback, {
+        onPress: () => onButtonPress('cancel'),
+        hitSlop: hitSlop,
+        children: /*#__PURE__*/_jsx(View, {
+          children: isIOS ? /*#__PURE__*/_jsx(Text, {
+            style: cancelButtonStyle,
+            children: __('Cancel')
+          }) : /*#__PURE__*/_jsx(Icon, {
+            icon: close,
+            size: 24,
+            style: cancelButtonStyle
+          })
+        })
+      }), bottomLabelText ? /*#__PURE__*/_jsx(Text, {
+        style: selectColorTextStyle,
+        children: bottomLabelText
+      }) : /*#__PURE__*/_jsx(Text, {
+        style: colorTextStyle,
+        selectable: true,
+        children: currentColor.toUpperCase()
+      }), /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
+        onPress: () => onButtonPress('apply'),
+        hitSlop: hitSlop,
+        children: /*#__PURE__*/_jsx(View, {
+          children: isIOS ? /*#__PURE__*/_jsx(Text, {
+            style: applyButtonStyle,
+            children: __('Apply')
+          }) : /*#__PURE__*/_jsx(Icon, {
+            icon: check,
+            size: 24,
+            style: applyButtonStyle
+          })
+        })
+      })]
+    })]
+  });
 }
 export { ColorPicker };
 //# sourceMappingURL=index.native.js.map