@wordpress/components 25.6.0 → 25.7.0

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 ## Unreleased
 
+## 25.7.0 (2023-08-31)
+
+### Enhancements
+
+-   Make the `Popover.Slot` optional and render popovers at the bottom of the document's body by default. ([#53889](https://github.com/WordPress/gutenberg/pull/53889)).
+-   `ProgressBar`: Add transition to determinate indicator ([#53877](https://github.com/WordPress/gutenberg/pull/53877)).
+-   Prevent nested `SlotFillProvider` from rendering ([#53940](https://github.com/WordPress/gutenberg/pull/53940)).
+
+### Bug Fix
+
+-   `SandBox`: Fix the cleanup method in useEffect ([#53796](https://github.com/WordPress/gutenberg/pull/53796)).
+-   `PaletteEdit`: Fix the height of the `PaletteItems`. Don't rely on styles only present in the block editor ([#54000](https://github.com/WordPress/gutenberg/pull/54000)).
+
+### Internal
+
+-   `Shortcut`: Add Storybook stories ([#53627](https://github.com/WordPress/gutenberg/pull/53627)).
+-   `SlotFill`: Do not render children when using `<Slot bubblesVirtually />`. ([#53272](https://github.com/WordPress/gutenberg/pull/53272))
+-   Update `@floating-ui/react-dom` to the latest version ([#46845](https://github.com/WordPress/gutenberg/pull/46845)).
+
 ## 25.6.0 (2023-08-16)
 
 ### Enhancements
@@ -25,7 +44,9 @@
 
 -   `ControlGroup`, `FormGroup`, `ControlLabel`, `Spinner`: Remove unused `ui/` components from the codebase ([#52953](https://github.com/WordPress/gutenberg/pull/52953)).
 -   `MenuItem`: Convert to TypeScript ([#53132](https://github.com/WordPress/gutenberg/pull/53132)).
+-   `MenuItem`: Add Storybook stories ([#53613](https://github.com/WordPress/gutenberg/pull/53613)).
 -   `MenuGroup`: Add Storybook stories ([#53090](https://github.com/WordPress/gutenberg/pull/53090)).
+-   Components: Remove unnecessary utils ([#53679](https://github.com/WordPress/gutenberg/pull/53679)).
 
 ## 25.5.0 (2023-08-10)
 
@@ -37,7 +58,6 @@
 
 -   `ColorPalette`, `BorderControl`: Don't hyphenate hex value in `aria-label` ([#52932](https://github.com/WordPress/gutenberg/pull/52932)).
 -   `MenuItemsChoice`, `MenuItem`: Support a `disabled` prop on a menu item ([#52737](https://github.com/WordPress/gutenberg/pull/52737)).
--   `TabPanel`: Introduce a new version of `TabPanel` with updated internals and improved adherence to ARIA guidance on `tabpanel` focus behavior while maintaining the same functionality and API surface.([#52133](https://github.com/WordPress/gutenberg/pull/52133)).
 
 ### Bug Fix
 

package/CONTRIBUTING.md

@@ -619,10 +619,10 @@ Given a component folder (e.g. `packages/components/src/unit-control`):
 	3. Rewrite the `meta` story object, and export it as default. In particular, make sure you add the following settings under the `parameters` key:
 
 		```tsx
-		const meta: ComponentMeta< typeof MyComponent > = {
+		const meta: Meta< typeof MyComponent > = {
 			parameters: {
 				controls: { expanded: true },
-				docs: { source: { state: 'open' } },
+				docs: { canvas: { sourceState: 'shown' } },
 			},
 		};
 		```

package/README.md

@@ -33,14 +33,9 @@ In non-WordPress projects, link to the `build-style/style.css` file directly, it
 
 _If you're using [`Popover`](/packages/components/src/popover/README.md) or [`Tooltip`](/packages/components/src/tooltip/README.md) components outside of the editor, make sure they are rendered within a `SlotFillProvider` and with a `Popover.Slot` somewhere up the element tree._
 
-By default, the `Popover` component will render inline i.e. within its
-parent to which it should anchor. Depending upon the context in which the
-`Popover` is being consumed, this might lead to incorrect positioning. For
-example, when being nested within another popover.
-
-This issue can be solved by rendering popovers to a specific location in the DOM via the
-`Popover.Slot`. For this to work, you will need your use of the `Popover`
-component and its `Slot` to be wrapped in a [`SlotFill`](/packages/components/src/slot-fill/README.md) provider.
+By default, the `Popover` component will render within an extra element appended to the body of the document.
+
+If you want to precisely contol where the popovers render, you will need to use the `Popover.Slot` component.
 
 A `Popover` is also used as the underlying mechanism to display `Tooltip` components.
 So the same considerations should be applied to them.

package/build/color-palette/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.showTransparentBackground = exports.normalizeColorValue = exports.isMultiplePaletteObject = exports.isMultiplePaletteArray = exports.extractColorNameFromCurrentValue = void 0;
+exports.normalizeColorValue = exports.isMultiplePaletteObject = exports.isMultiplePaletteArray = exports.extractColorNameFromCurrentValue = void 0;
 var _colord = require("colord");
 var _names = _interopRequireDefault(require("colord/plugins/names"));
 var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
@@ -47,17 +47,10 @@ const extractColorNameFromCurrentValue = (currentValue, colors = [], showMultipl
   // translators: shown when the user has picked a custom color (i.e not in the palette of colors).
   return (0, _i18n.__)('Custom');
 };
-exports.extractColorNameFromCurrentValue = extractColorNameFromCurrentValue;
-const showTransparentBackground = currentValue => {
-  if (typeof currentValue === 'undefined') {
-    return true;
-  }
-  return (0, _colord.colord)(currentValue).alpha() === 0;
-};
 
 // The PaletteObject type has a `colors` property (an array of ColorObject),
 // while the ColorObject type has a `color` property (the CSS color value).
-exports.showTransparentBackground = showTransparentBackground;
+exports.extractColorNameFromCurrentValue = extractColorNameFromCurrentValue;
 const isMultiplePaletteObject = obj => Array.isArray(obj.colors) && !('color' in obj);
 exports.isMultiplePaletteObject = isMultiplePaletteObject;
 const isMultiplePaletteArray = arr => {

package/build/color-palette/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["_colord","require","_names","_interopRequireDefault","_a11y","_i18n","extend","namesPlugin","a11yPlugin","extractColorNameFromCurrentValue","currentValue","colors","showMultiplePalettes","currentValueIsCssVariable","test","normalizedCurrentValue","colord","toHex","colorPalettes","paletteColors","name","colorName","color","colorValue","normalizedColorValue","__","exports","showTransparentBackground","alpha","isMultiplePaletteObject","obj","Array","isArray","isMultiplePaletteArray","arr","length","every","colorObj","normalizeColorValue","value","element","ownerDocument","defaultView","computedBackgroundColor","getComputedStyle","backgroundColor"],"sources":["@wordpress/components/src/color-palette/utils.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { ColorObject, ColorPaletteProps, PaletteObject } from './types';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nexport const extractColorNameFromCurrentValue = (\n\tcurrentValue?: ColorPaletteProps[ 'value' ],\n\tcolors: ColorPaletteProps[ 'colors' ] = [],\n\tshowMultiplePalettes: boolean = false\n) => {\n\tif ( ! currentValue ) {\n\t\treturn '';\n\t}\n\n\tconst currentValueIsCssVariable = /^var\\(/.test( currentValue );\n\tconst normalizedCurrentValue = currentValueIsCssVariable\n\t\t? currentValue\n\t\t: colord( currentValue ).toHex();\n\n\t// Normalize format of `colors` to simplify the following loop\n\ttype normalizedPaletteObject = { colors: ColorObject[] };\n\tconst colorPalettes: normalizedPaletteObject[] = showMultiplePalettes\n\t\t? ( colors as PaletteObject[] )\n\t\t: [ { colors: colors as ColorObject[] } ];\n\tfor ( const { colors: paletteColors } of colorPalettes ) {\n\t\tfor ( const { name: colorName, color: colorValue } of paletteColors ) {\n\t\t\tconst normalizedColorValue = currentValueIsCssVariable\n\t\t\t\t? colorValue\n\t\t\t\t: colord( colorValue ).toHex();\n\n\t\t\tif ( normalizedCurrentValue === normalizedColorValue ) {\n\t\t\t\treturn colorName;\n\t\t\t}\n\t\t}\n\t}\n\n\t// translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n\treturn __( 'Custom' );\n};\n\nexport const showTransparentBackground = ( currentValue?: string ) => {\n\tif ( typeof currentValue === 'undefined' ) {\n\t\treturn true;\n\t}\n\treturn colord( currentValue ).alpha() === 0;\n};\n\n// The PaletteObject type has a `colors` property (an array of ColorObject),\n// while the ColorObject type has a `color` property (the CSS color value).\nexport const isMultiplePaletteObject = (\n\tobj: PaletteObject | ColorObject\n): obj is PaletteObject =>\n\tArray.isArray( ( obj as PaletteObject ).colors ) && ! ( 'color' in obj );\n\nexport const isMultiplePaletteArray = (\n\tarr: ( PaletteObject | ColorObject )[]\n): arr is PaletteObject[] => {\n\treturn (\n\t\tarr.length > 0 &&\n\t\tarr.every( ( colorObj ) => isMultiplePaletteObject( colorObj ) )\n\t);\n};\n\n/**\n * Transform a CSS variable used as background color into the color value itself.\n *\n * @param value   The color value that may be a CSS variable.\n * @param element The element for which to get the computed style.\n * @return The background color value computed from a element.\n */\nexport const normalizeColorValue = (\n\tvalue: string | undefined,\n\telement: HTMLElement | null\n) => {\n\tconst currentValueIsCssVariable = /^var\\(/.test( value ?? '' );\n\n\tif ( ! currentValueIsCssVariable || element === null ) {\n\t\treturn value;\n\t}\n\n\tconst { ownerDocument } = element;\n\tconst { defaultView } = ownerDocument;\n\tconst computedBackgroundColor =\n\t\tdefaultView?.getComputedStyle( element ).backgroundColor;\n\n\treturn computedBackgroundColor\n\t\t? colord( computedBackgroundColor ).toHex()\n\t\t: value;\n};\n"],"mappings":"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"}
+{"version":3,"names":["_colord","require","_names","_interopRequireDefault","_a11y","_i18n","extend","namesPlugin","a11yPlugin","extractColorNameFromCurrentValue","currentValue","colors","showMultiplePalettes","currentValueIsCssVariable","test","normalizedCurrentValue","colord","toHex","colorPalettes","paletteColors","name","colorName","color","colorValue","normalizedColorValue","__","exports","isMultiplePaletteObject","obj","Array","isArray","isMultiplePaletteArray","arr","length","every","colorObj","normalizeColorValue","value","element","ownerDocument","defaultView","computedBackgroundColor","getComputedStyle","backgroundColor"],"sources":["@wordpress/components/src/color-palette/utils.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { ColorObject, ColorPaletteProps, PaletteObject } from './types';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nexport const extractColorNameFromCurrentValue = (\n\tcurrentValue?: ColorPaletteProps[ 'value' ],\n\tcolors: ColorPaletteProps[ 'colors' ] = [],\n\tshowMultiplePalettes: boolean = false\n) => {\n\tif ( ! currentValue ) {\n\t\treturn '';\n\t}\n\n\tconst currentValueIsCssVariable = /^var\\(/.test( currentValue );\n\tconst normalizedCurrentValue = currentValueIsCssVariable\n\t\t? currentValue\n\t\t: colord( currentValue ).toHex();\n\n\t// Normalize format of `colors` to simplify the following loop\n\ttype normalizedPaletteObject = { colors: ColorObject[] };\n\tconst colorPalettes: normalizedPaletteObject[] = showMultiplePalettes\n\t\t? ( colors as PaletteObject[] )\n\t\t: [ { colors: colors as ColorObject[] } ];\n\tfor ( const { colors: paletteColors } of colorPalettes ) {\n\t\tfor ( const { name: colorName, color: colorValue } of paletteColors ) {\n\t\t\tconst normalizedColorValue = currentValueIsCssVariable\n\t\t\t\t? colorValue\n\t\t\t\t: colord( colorValue ).toHex();\n\n\t\t\tif ( normalizedCurrentValue === normalizedColorValue ) {\n\t\t\t\treturn colorName;\n\t\t\t}\n\t\t}\n\t}\n\n\t// translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n\treturn __( 'Custom' );\n};\n\n// The PaletteObject type has a `colors` property (an array of ColorObject),\n// while the ColorObject type has a `color` property (the CSS color value).\nexport const isMultiplePaletteObject = (\n\tobj: PaletteObject | ColorObject\n): obj is PaletteObject =>\n\tArray.isArray( ( obj as PaletteObject ).colors ) && ! ( 'color' in obj );\n\nexport const isMultiplePaletteArray = (\n\tarr: ( PaletteObject | ColorObject )[]\n): arr is PaletteObject[] => {\n\treturn (\n\t\tarr.length > 0 &&\n\t\tarr.every( ( colorObj ) => isMultiplePaletteObject( colorObj ) )\n\t);\n};\n\n/**\n * Transform a CSS variable used as background color into the color value itself.\n *\n * @param value   The color value that may be a CSS variable.\n * @param element The element for which to get the computed style.\n * @return The background color value computed from a element.\n */\nexport const normalizeColorValue = (\n\tvalue: string | undefined,\n\telement: HTMLElement | null\n) => {\n\tconst currentValueIsCssVariable = /^var\\(/.test( value ?? '' );\n\n\tif ( ! currentValueIsCssVariable || element === null ) {\n\t\treturn value;\n\t}\n\n\tconst { ownerDocument } = element;\n\tconst { defaultView } = ownerDocument;\n\tconst computedBackgroundColor =\n\t\tdefaultView?.getComputedStyle( element ).backgroundColor;\n\n\treturn computedBackgroundColor\n\t\t? colord( computedBackgroundColor ).toHex()\n\t\t: value;\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAD,sBAAA,CAAAF,OAAA;AAKA,IAAAI,KAAA,GAAAJ,OAAA;AAVA;AACA;AACA;;AAKA;AACA;AACA;;AAQA,IAAAK,cAAM,EAAE,CAAEC,cAAW,EAAEC,aAAU,CAAG,CAAC;AAE9B,MAAMC,gCAAgC,GAAGA,CAC/CC,YAA2C,EAC3CC,MAAqC,GAAG,EAAE,EAC1CC,oBAA6B,GAAG,KAAK,KACjC;EACJ,IAAK,CAAEF,YAAY,EAAG;IACrB,OAAO,EAAE;EACV;EAEA,MAAMG,yBAAyB,GAAG,QAAQ,CAACC,IAAI,CAAEJ,YAAa,CAAC;EAC/D,MAAMK,sBAAsB,GAAGF,yBAAyB,GACrDH,YAAY,GACZ,IAAAM,cAAM,EAAEN,YAAa,CAAC,CAACO,KAAK,CAAC,CAAC;;EAEjC;;EAEA,MAAMC,aAAwC,GAAGN,oBAAoB,GAChED,MAAM,GACR,CAAE;IAAEA,MAAM,EAAEA;EAAwB,CAAC,CAAE;EAC1C,KAAM,MAAM;IAAEA,MAAM,EAAEQ;EAAc,CAAC,IAAID,aAAa,EAAG;IACxD,KAAM,MAAM;MAAEE,IAAI,EAAEC,SAAS;MAAEC,KAAK,EAAEC;IAAW,CAAC,IAAIJ,aAAa,EAAG;MACrE,MAAMK,oBAAoB,GAAGX,yBAAyB,GACnDU,UAAU,GACV,IAAAP,cAAM,EAAEO,UAAW,CAAC,CAACN,KAAK,CAAC,CAAC;MAE/B,IAAKF,sBAAsB,KAAKS,oBAAoB,EAAG;QACtD,OAAOH,SAAS;MACjB;IACD;EACD;;EAEA;EACA,OAAO,IAAAI,QAAE,EAAE,QAAS,CAAC;AACtB,CAAC;;AAED;AACA;AAAAC,OAAA,CAAAjB,gCAAA,GAAAA,gCAAA;AACO,MAAMkB,uBAAuB,GACnCC,GAAgC,IAEhCC,KAAK,CAACC,OAAO,CAAIF,GAAG,CAAoBjB,MAAO,CAAC,IAAI,EAAI,OAAO,IAAIiB,GAAG,CAAE;AAACF,OAAA,CAAAC,uBAAA,GAAAA,uBAAA;AAEnE,MAAMI,sBAAsB,GAClCC,GAAsC,IACV;EAC5B,OACCA,GAAG,CAACC,MAAM,GAAG,CAAC,IACdD,GAAG,CAACE,KAAK,CAAIC,QAAQ,IAAMR,uBAAuB,CAAEQ,QAAS,CAAE,CAAC;AAElE,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AANAT,OAAA,CAAAK,sBAAA,GAAAA,sBAAA;AAOO,MAAMK,mBAAmB,GAAGA,CAClCC,KAAyB,EACzBC,OAA2B,KACvB;EACJ,MAAMzB,yBAAyB,GAAG,QAAQ,CAACC,IAAI,CAAEuB,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAG,CAAC;EAE9D,IAAK,CAAExB,yBAAyB,IAAIyB,OAAO,KAAK,IAAI,EAAG;IACtD,OAAOD,KAAK;EACb;EAEA,MAAM;IAAEE;EAAc,CAAC,GAAGD,OAAO;EACjC,MAAM;IAAEE;EAAY,CAAC,GAAGD,aAAa;EACrC,MAAME,uBAAuB,GAC5BD,WAAW,EAAEE,gBAAgB,CAAEJ,OAAQ,CAAC,CAACK,eAAe;EAEzD,OAAOF,uBAAuB,GAC3B,IAAAzB,cAAM,EAAEyB,uBAAwB,CAAC,CAACxB,KAAK,CAAC,CAAC,GACzCoB,KAAK;AACT,CAAC;AAACX,OAAA,CAAAU,mBAAA,GAAAA,mBAAA"}

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

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _reactNative = require("react-native");
+var _huePicker = _interopRequireDefault(require("./hue-picker"));
+var _saturationPicker = _interopRequireDefault(require("./saturation-picker"));
+var _styleNative = _interopRequireDefault(require("./style.native.scss"));
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const HsvColorPicker = props => {
+  const maxWidth = _reactNative.Dimensions.get('window').width - 32;
+  const satValPickerRef = (0, _element.useRef)(null);
+  const {
+    containerStyle = {},
+    currentColor,
+    huePickerContainerStyle = {},
+    huePickerBorderRadius = 0,
+    huePickerHue = 0,
+    huePickerBarWidth = maxWidth,
+    huePickerBarHeight = 12,
+    huePickerSliderSize = 24,
+    onHuePickerDragStart,
+    onHuePickerDragMove,
+    onHuePickerDragEnd,
+    onHuePickerDragTerminate,
+    onHuePickerPress,
+    satValPickerContainerStyle = {},
+    satValPickerBorderRadius = 0,
+    satValPickerSize = {
+      width: maxWidth,
+      height: 200
+    },
+    satValPickerSliderSize = 24,
+    satValPickerHue = 0,
+    satValPickerSaturation = 1,
+    satValPickerValue = 1,
+    onSatValPickerDragStart,
+    onSatValPickerDragMove,
+    onSatValPickerDragEnd,
+    onSatValPickerDragTerminate,
+    onSatValPickerPress
+  } = props;
+  return (0, _element.createElement)(_reactNative.View, {
+    style: [_styleNative.default['hsv-container'], containerStyle],
+    testID: "hsv-color-picker"
+  }, (0, _element.createElement)(_saturationPicker.default, {
+    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
+  }), (0, _element.createElement)(_huePicker.default, {
+    containerStyle: huePickerContainerStyle,
+    borderRadius: huePickerBorderRadius,
+    hue: huePickerHue,
+    barWidth: huePickerBarWidth,
+    barHeight: huePickerBarHeight,
+    sliderSize: huePickerSliderSize,
+    onDragStart: onHuePickerDragStart,
+    onDragMove: onHuePickerDragMove,
+    onDragEnd: onHuePickerDragEnd,
+    onDragTerminate: onHuePickerDragTerminate,
+    onPress: onHuePickerPress
+  }));
+};
+var _default = HsvColorPicker;
+exports.default = _default;
+//# sourceMappingURL=hsv-color-picker.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_reactNative","_huePicker","_interopRequireDefault","_saturationPicker","_styleNative","HsvColorPicker","props","maxWidth","Dimensions","get","width","satValPickerRef","useRef","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","View","style","styles","testID","default","borderRadius","size","sliderSize","hue","saturation","value","onDragStart","onDragMove","onDragEnd","onDragTerminate","onPress","ref","barWidth","barHeight","_default","exports"],"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":";;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AALA,IAAAC,YAAA,GAAAD,OAAA;AAUA,IAAAE,UAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,YAAA,GAAAF,sBAAA,CAAAH,OAAA;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAKA,MAAMM,cAAc,GAAKC,KAAK,IAAM;EACnC,MAAMC,QAAQ,GAAGC,uBAAU,CAACC,GAAG,CAAE,QAAS,CAAC,CAACC,KAAK,GAAG,EAAE;EACtD,MAAMC,eAAe,GAAG,IAAAC,eAAM,EAAE,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,GAAGX,QAAQ;IAC5BY,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;MAAElB,KAAK,EAAEH,QAAQ;MAAEsB,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,GAAGhC,KAAK;EAET,OACC,IAAAR,QAAA,CAAAyC,aAAA,EAACvC,YAAA,CAAAwC,IAAI;IACJC,KAAK,EAAG,CAAEC,oBAAM,CAAE,eAAe,CAAE,EAAE7B,cAAc,CAAI;IACvD8B,MAAM,EAAC;EAAkB,GAEzB,IAAA7C,QAAA,CAAAyC,aAAA,EAACpC,iBAAA,CAAAyC,OAAqB;IACrB/B,cAAc,EAAGa,0BAA4B;IAC7CZ,YAAY,EAAGA,YAAc;IAC7B+B,YAAY,EAAGlB,wBAA0B;IACzCmB,IAAI,EAAGlB,gBAAkB;IACzBmB,UAAU,EAAGjB,sBAAwB;IACrCkB,GAAG,EAAGjB,eAAiB;IACvBkB,UAAU,EAAGjB,sBAAwB;IACrCkB,KAAK,EAAGjB,iBAAmB;IAC3BkB,WAAW,EAAGjB,uBAAyB;IACvCkB,UAAU,EAAGjB,sBAAwB;IACrCkB,SAAS,EAAGjB,qBAAuB;IACnCkB,eAAe,EAAGjB,2BAA6B;IAC/CkB,OAAO,EAAGjB,mBAAqB;IAC/BkB,GAAG,EAAG7C;EAAiB,CACvB,CAAC,EACF,IAAAb,QAAA,CAAAyC,aAAA,EAACtC,UAAA,CAAA2C,OAAS;IACT/B,cAAc,EAAGE,uBAAyB;IAC1C8B,YAAY,EAAG7B,qBAAuB;IACtCgC,GAAG,EAAG/B,YAAc;IACpBwC,QAAQ,EAAGvC,iBAAmB;IAC9BwC,SAAS,EAAGvC,kBAAoB;IAChC4B,UAAU,EAAG3B,mBAAqB;IAClC+B,WAAW,EAAG9B,oBAAsB;IACpC+B,UAAU,EAAG9B,mBAAqB;IAClC+B,SAAS,EAAG9B,kBAAoB;IAChC+B,eAAe,EAAG9B,wBAA0B;IAC5C+B,OAAO,EAAG9B;EAAkB,CAC5B,CACI,CAAC;AAET,CAAC;AAAC,IAAAkC,QAAA,GAEatD,cAAc;AAAAuD,OAAA,CAAAhB,OAAA,GAAAe,QAAA"}

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

@@ -0,0 +1,195 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = _interopRequireWildcard(require("@wordpress/element"));
+var _reactNative = require("react-native");
+var _reactNativeLinearGradient = _interopRequireDefault(require("react-native-linear-gradient"));
+var _style = _interopRequireDefault(require("./style.scss"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+class HuePicker extends _element.Component {
+  constructor(props) {
+    super(props);
+    this.hueColors = ['#ff0000', '#ffff00', '#00ff00', '#00ffff', '#0000ff', '#ff00ff', '#ff0000'];
+    this.sliderX = new _reactNative.Animated.Value(props.barHeight * props.hue / 360);
+    this.panResponder = _reactNative.PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onStartShouldSetPanResponderCapture: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponderCapture: () => true,
+      onPanResponderGrant: (evt, gestureState) => {
+        const {
+          onPress
+        } = this.props;
+        this.dragStartValue = this.computeHueValuePress(evt);
+        if (onPress) {
+          onPress({
+            hue: this.computeHueValuePress(evt),
+            nativeEvent: evt.nativeEvent
+          });
+        }
+        this.fireDragEvent('onDragStart', gestureState);
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        this.fireDragEvent('onDragMove', gestureState);
+      },
+      onPanResponderTerminationRequest: () => true,
+      onPanResponderRelease: (evt, gestureState) => {
+        this.fireDragEvent('onDragEnd', gestureState);
+      },
+      onPanResponderTerminate: (evt, gestureState) => {
+        this.fireDragEvent('onDragTerminate', gestureState);
+      },
+      onShouldBlockNativeResponder: () => true
+    });
+  }
+  componentDidUpdate(prevProps) {
+    const {
+      hue = 0,
+      barWidth = 200,
+      sliderSize = 24
+    } = this.props;
+    const borderWidth = sliderSize / 10;
+    if (prevProps.hue !== hue || prevProps.barWidth !== barWidth) {
+      this.sliderX.setValue((barWidth - sliderSize + borderWidth) * hue / 360);
+    }
+  }
+  normalizeValue(value) {
+    if (value < 0) return 0;
+    if (value > 1) return 1;
+    return value;
+  }
+  getContainerStyle() {
+    const {
+      sliderSize = 24,
+      barHeight = 12,
+      containerStyle = {}
+    } = this.props;
+    const paddingLeft = sliderSize / 2;
+    const paddingTop = sliderSize - barHeight > 0 ? (sliderSize - barHeight) / 2 : 0;
+    return [_style.default['hsv-container'], containerStyle, {
+      paddingTop,
+      paddingBottom: paddingTop,
+      paddingLeft,
+      paddingRight: paddingLeft
+    }];
+  }
+  computeHueValueDrag(gestureState) {
+    const {
+      dx
+    } = gestureState;
+    const {
+      barWidth = 200
+    } = this.props;
+    const {
+      dragStartValue
+    } = this;
+    const diff = dx / barWidth;
+    const updatedHue = this.normalizeValue(dragStartValue / 360 + diff) * 360;
+    return updatedHue;
+  }
+  computeHueValuePress(event) {
+    const {
+      nativeEvent
+    } = event;
+    const {
+      locationX
+    } = nativeEvent;
+    const {
+      barWidth = 200
+    } = this.props;
+    const updatedHue = this.normalizeValue(locationX / barWidth) * 360;
+    return updatedHue;
+  }
+  fireDragEvent(eventName, gestureState) {
+    const {
+      [eventName]: event
+    } = this.props;
+    if (event) {
+      event({
+        hue: this.computeHueValueDrag(gestureState),
+        gestureState
+      });
+    }
+  }
+  firePressEvent(event) {
+    const {
+      onPress
+    } = this.props;
+    if (onPress) {
+      onPress({
+        hue: this.computeHueValuePress(event),
+        nativeEvent: event.nativeEvent
+      });
+    }
+  }
+  render() {
+    const {
+      hueColors
+    } = this;
+    const {
+      sliderSize = 24,
+      barWidth = 200,
+      barHeight = 12,
+      borderRadius = 0
+    } = this.props;
+    const borderWidth = sliderSize / 10;
+    return (0, _element.createElement)(_reactNative.View, {
+      style: this.getContainerStyle(),
+      ...this.panResponder.panHandlers,
+      hitSlop: {
+        top: 10,
+        bottom: 10,
+        left: 0,
+        right: 0
+      }
+    }, (0, _element.createElement)(_reactNativeLinearGradient.default, {
+      colors: hueColors,
+      style: {
+        borderRadius
+      },
+      start: {
+        x: 0,
+        y: 0
+      },
+      end: {
+        x: 1,
+        y: 0
+      }
+    }, (0, _element.createElement)(_reactNative.View, {
+      style: {
+        width: barWidth,
+        height: barHeight
+      }
+    })), (0, _element.createElement)(_reactNative.Animated.View, {
+      pointerEvents: "none",
+      style: [_style.default['hue-slider'], {
+        width: sliderSize,
+        height: sliderSize,
+        left: (sliderSize - borderWidth) / 2,
+        borderRadius: sliderSize / 2,
+        transform: [{
+          translateX: this.sliderX
+        }]
+      }]
+    }));
+  }
+}
+exports.default = HuePicker;
+//# sourceMappingURL=hue-picker.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_element","_interopRequireWildcard","require","_reactNative","_reactNativeLinearGradient","_interopRequireDefault","_style","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","HuePicker","Component","constructor","props","hueColors","sliderX","Animated","Value","barHeight","hue","panResponder","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","styles","paddingBottom","paddingRight","computeHueValueDrag","dx","diff","updatedHue","event","locationX","eventName","firePressEvent","render","borderRadius","createElement","View","style","panHandlers","hitSlop","top","bottom","left","right","colors","start","x","y","end","width","height","pointerEvents","transform","translateX","exports"],"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 ) return 0;\n\t\tif ( value > 1 ) return 1;\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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"}

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.ColorPicker = ColorPicker;
 var _element = require("@wordpress/element");
 var _reactNative = require("react-native");
-var _reactNativeHsvColorPicker = _interopRequireDefault(require("react-native-hsv-color-picker"));
 var _colord = require("colord");
 var _names = _interopRequireDefault(require("colord/plugins/names"));
 var _i18n = require("@wordpress/i18n");
@@ -15,6 +14,7 @@ var _components = require("@wordpress/components");
 var _compose = require("@wordpress/compose");
 var _icons = require("@wordpress/icons");
 var _style = _interopRequireDefault(require("./style.scss"));
+var _hsvColorPickerNative = _interopRequireDefault(require("./hsv-color-picker.native.js"));
 /**
  * External dependencies
  */
@@ -119,8 +119,9 @@ function ColorPicker({
       onBottomSheetClosed();
     }
   }
-  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_reactNativeHsvColorPicker.default, {
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_hsvColorPickerNative.default, {
     huePickerHue: hue,
+    currentColor: currentColor,
     onHuePickerDragMove: updateColor,
     onHuePickerPress: !isBottomSheetContentScrolling && updateColor,
     satValPickerHue: hue,

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_reactNative","_reactNativeHsvColorPicker","_interopRequireDefault","_colord","_names","_i18n","_components","_compose","_icons","_style","extend","namesPlugin","ColorPicker","shouldEnableBottomSheetScroll","shouldEnableBottomSheetMaxHeight","isBottomSheetContentScrolling","setColor","activeColor","isGradientColor","onNavigationBack","onHandleClosingBottomSheet","onBottomSheetClosed","onHandleHardwareButtonPress","bottomLabelText","isIOS","Platform","OS","hitSlop","top","bottom","left","right","h","initH","s","initS","v","initV","colord","toHsv","hue","setHue","useState","sat","setSaturation","val","setValue","savedColor","paddingLeft","spacing","height","pickerHeight","borderRadius","styles","picker","pickerPointerSize","pickerPointer","pickerWidth","BottomSheet","getWidth","applyButtonStyle","usePreferredColorSchemeStyle","applyButton","applyButtonDark","cancelButtonStyle","cancelButton","cancelButtonDark","colorTextStyle","colorText","colorTextDark","selectColorTextStyle","selectColorText","selectColorTextDark","footerStyle","footer","footerDark","combineToHex","toHex","currentColor","updateColor","saturation","value","undefined","useEffect","onButtonPress","action","createElement","Fragment","default","huePickerHue","onHuePickerDragMove","onHuePickerPress","satValPickerHue","satValPickerSaturation","satValPickerValue","onSatValPickerDragMove","onSatValPickerPress","onSatValPickerDragStart","onSatValPickerDragEnd","onHuePickerDragStart","onHuePickerDragEnd","huePickerBarWidth","huePickerBarHeight","satValPickerSize","width","satValPickerSliderSize","satValPickerBorderRadius","huePickerBorderRadius","View","style","TouchableWithoutFeedback","onPress","Text","__","Icon","icon","close","size","selectable","toUpperCase","check"],"sources":["@wordpress/components/src/color-picker/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, Text, TouchableWithoutFeedback, Platform } from 'react-native';\nimport HsvColorPicker from 'react-native-hsv-color-picker';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { BottomSheet } from '@wordpress/components';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { Icon, check, close } from '@wordpress/icons';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nextend( [ namesPlugin ] );\n\nfunction ColorPicker( {\n\tshouldEnableBottomSheetScroll,\n\tshouldEnableBottomSheetMaxHeight,\n\tisBottomSheetContentScrolling,\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tonNavigationBack,\n\tonHandleClosingBottomSheet,\n\tonBottomSheetClosed,\n\tonHandleHardwareButtonPress,\n\tbottomLabelText,\n} ) {\n\tconst isIOS = Platform.OS === 'ios';\n\tconst hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };\n\tconst {\n\t\th: initH,\n\t\ts: initS,\n\t\tv: initV,\n\t} = ! isGradientColor && activeColor\n\t\t? colord( activeColor ).toHsv()\n\t\t: { h: 0, s: 50, v: 50 };\n\tconst [ hue, setHue ] = useState( initH );\n\tconst [ sat, setSaturation ] = useState( initS / 100 );\n\tconst [ val, setValue ] = useState( initV / 100 );\n\tconst [ savedColor ] = useState( activeColor );\n\n\tconst {\n\t\tpaddingLeft: spacing,\n\t\theight: pickerHeight,\n\t\tborderRadius,\n\t} = styles.picker;\n\tconst { height: pickerPointerSize } = styles.pickerPointer;\n\tconst pickerWidth = BottomSheet.getWidth() - 2 * spacing;\n\n\tconst applyButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.applyButton,\n\t\tstyles.applyButtonDark\n\t);\n\tconst cancelButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.cancelButton,\n\t\tstyles.cancelButtonDark\n\t);\n\tconst colorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.colorText,\n\t\tstyles.colorTextDark\n\t);\n\tconst selectColorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.selectColorText,\n\t\tstyles.selectColorTextDark\n\t);\n\tconst footerStyle = usePreferredColorSchemeStyle(\n\t\tstyles.footer,\n\t\tstyles.footerDark\n\t);\n\n\tconst combineToHex = ( h = hue, s = sat, v = val ) =>\n\t\tcolord( { h, s: s * 100, v: v * 100 } ).toHex();\n\n\tconst currentColor = combineToHex();\n\n\tconst updateColor = ( { hue: h, saturation: s, value: v } ) => {\n\t\tif ( h !== undefined ) setHue( h );\n\t\tif ( s !== undefined ) setSaturation( s );\n\t\tif ( v !== undefined ) setValue( v );\n\t\tsetColor( combineToHex( h, s, v ) );\n\t};\n\n\tuseEffect( () => {\n\t\tshouldEnableBottomSheetMaxHeight( false );\n\t\tonHandleClosingBottomSheet( () => {\n\t\t\tif ( savedColor ) {\n\t\t\t\tsetColor( savedColor );\n\t\t\t}\n\t\t\tif ( onBottomSheetClosed ) {\n\t\t\t\tonBottomSheetClosed();\n\t\t\t}\n\t\t} );\n\t\tif ( onHandleHardwareButtonPress ) {\n\t\t\tonHandleHardwareButtonPress( onButtonPress );\n\t\t}\n\t\t// TODO: Revisit this to discover if there's a good reason for omitting\n\t\t// the hook’s dependencies and running it a single time. Ideally there\n\t\t// may be a way to refactor and obviate the disabled lint rule. If not,\n\t\t// this comment should be replaced by one that explains the reasoning.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tfunction onButtonPress( action ) {\n\t\tonNavigationBack();\n\t\tonHandleClosingBottomSheet( null );\n\t\tshouldEnableBottomSheetMaxHeight( true );\n\t\tsetColor( action === 'apply' ? currentColor : savedColor );\n\t\tif ( onBottomSheetClosed ) {\n\t\t\tonBottomSheetClosed();\n\t\t}\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<HsvColorPicker\n\t\t\t\thuePickerHue={ hue }\n\t\t\t\tonHuePickerDragMove={ updateColor }\n\t\t\t\tonHuePickerPress={\n\t\t\t\t\t! isBottomSheetContentScrolling && updateColor\n\t\t\t\t}\n\t\t\t\tsatValPickerHue={ hue }\n\t\t\t\tsatValPickerSaturation={ sat }\n\t\t\t\tsatValPickerValue={ val }\n\t\t\t\tonSatValPickerDragMove={ updateColor }\n\t\t\t\tonSatValPickerPress={\n\t\t\t\t\t! isBottomSheetContentScrolling && updateColor\n\t\t\t\t}\n\t\t\t\tonSatValPickerDragStart={ () => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t} }\n\t\t\t\tonSatValPickerDragEnd={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( true )\n\t\t\t\t}\n\t\t\t\tonHuePickerDragStart={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( false )\n\t\t\t\t}\n\t\t\t\tonHuePickerDragEnd={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( true )\n\t\t\t\t}\n\t\t\t\thuePickerBarWidth={ pickerWidth }\n\t\t\t\thuePickerBarHeight={ pickerPointerSize / 2 }\n\t\t\t\tsatValPickerSize={ {\n\t\t\t\t\twidth: pickerWidth,\n\t\t\t\t\theight: pickerHeight,\n\t\t\t\t} }\n\t\t\t\tsatValPickerSliderSize={ pickerPointerSize * 2 }\n\t\t\t\tsatValPickerBorderRadius={ borderRadius }\n\t\t\t\thuePickerBorderRadius={ borderRadius }\n\t\t\t/>\n\t\t\t<View style={ footerStyle }>\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ () => onButtonPress( 'cancel' ) }\n\t\t\t\t\thitSlop={ hitSlop }\n\t\t\t\t>\n\t\t\t\t\t<View>\n\t\t\t\t\t\t{ isIOS ? (\n\t\t\t\t\t\t\t<Text style={ cancelButtonStyle }>\n\t\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ cancelButtonStyle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t{ bottomLabelText ? (\n\t\t\t\t\t<Text style={ selectColorTextStyle }>\n\t\t\t\t\t\t{ bottomLabelText }\n\t\t\t\t\t</Text>\n\t\t\t\t) : (\n\t\t\t\t\t<Text style={ colorTextStyle } selectable>\n\t\t\t\t\t\t{ currentColor.toUpperCase() }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ () => onButtonPress( 'apply' ) }\n\t\t\t\t\thitSlop={ hitSlop }\n\t\t\t\t>\n\t\t\t\t\t<View>\n\t\t\t\t\t\t{ isIOS ? (\n\t\t\t\t\t\t\t<Text style={ applyButtonStyle }>\n\t\t\t\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ applyButtonStyle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t</View>\n\t\t</>\n\t);\n}\n\nexport { ColorPicker };\n"],"mappings":"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"}
+{"version":3,"names":["_element","require","_reactNative","_colord","_names","_interopRequireDefault","_i18n","_components","_compose","_icons","_style","_hsvColorPickerNative","extend","namesPlugin","ColorPicker","shouldEnableBottomSheetScroll","shouldEnableBottomSheetMaxHeight","isBottomSheetContentScrolling","setColor","activeColor","isGradientColor","onNavigationBack","onHandleClosingBottomSheet","onBottomSheetClosed","onHandleHardwareButtonPress","bottomLabelText","isIOS","Platform","OS","hitSlop","top","bottom","left","right","h","initH","s","initS","v","initV","colord","toHsv","hue","setHue","useState","sat","setSaturation","val","setValue","savedColor","paddingLeft","spacing","height","pickerHeight","borderRadius","styles","picker","pickerPointerSize","pickerPointer","pickerWidth","BottomSheet","getWidth","applyButtonStyle","usePreferredColorSchemeStyle","applyButton","applyButtonDark","cancelButtonStyle","cancelButton","cancelButtonDark","colorTextStyle","colorText","colorTextDark","selectColorTextStyle","selectColorText","selectColorTextDark","footerStyle","footer","footerDark","combineToHex","toHex","currentColor","updateColor","saturation","value","undefined","useEffect","onButtonPress","action","createElement","Fragment","default","huePickerHue","onHuePickerDragMove","onHuePickerPress","satValPickerHue","satValPickerSaturation","satValPickerValue","onSatValPickerDragMove","onSatValPickerPress","onSatValPickerDragStart","onSatValPickerDragEnd","onHuePickerDragStart","onHuePickerDragEnd","huePickerBarWidth","huePickerBarHeight","satValPickerSize","width","satValPickerSliderSize","satValPickerBorderRadius","huePickerBorderRadius","View","style","TouchableWithoutFeedback","onPress","Text","__","Icon","icon","close","size","selectable","toUpperCase","check"],"sources":["@wordpress/components/src/color-picker/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, Text, TouchableWithoutFeedback, Platform } from 'react-native';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { BottomSheet } from '@wordpress/components';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { Icon, check, close } from '@wordpress/icons';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport HsvColorPicker from './hsv-color-picker.native.js';\n\nextend( [ namesPlugin ] );\n\nfunction ColorPicker( {\n\tshouldEnableBottomSheetScroll,\n\tshouldEnableBottomSheetMaxHeight,\n\tisBottomSheetContentScrolling,\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tonNavigationBack,\n\tonHandleClosingBottomSheet,\n\tonBottomSheetClosed,\n\tonHandleHardwareButtonPress,\n\tbottomLabelText,\n} ) {\n\tconst isIOS = Platform.OS === 'ios';\n\tconst hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };\n\tconst {\n\t\th: initH,\n\t\ts: initS,\n\t\tv: initV,\n\t} = ! isGradientColor && activeColor\n\t\t? colord( activeColor ).toHsv()\n\t\t: { h: 0, s: 50, v: 50 };\n\tconst [ hue, setHue ] = useState( initH );\n\tconst [ sat, setSaturation ] = useState( initS / 100 );\n\tconst [ val, setValue ] = useState( initV / 100 );\n\tconst [ savedColor ] = useState( activeColor );\n\n\tconst {\n\t\tpaddingLeft: spacing,\n\t\theight: pickerHeight,\n\t\tborderRadius,\n\t} = styles.picker;\n\tconst { height: pickerPointerSize } = styles.pickerPointer;\n\tconst pickerWidth = BottomSheet.getWidth() - 2 * spacing;\n\n\tconst applyButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.applyButton,\n\t\tstyles.applyButtonDark\n\t);\n\tconst cancelButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.cancelButton,\n\t\tstyles.cancelButtonDark\n\t);\n\tconst colorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.colorText,\n\t\tstyles.colorTextDark\n\t);\n\tconst selectColorTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.selectColorText,\n\t\tstyles.selectColorTextDark\n\t);\n\tconst footerStyle = usePreferredColorSchemeStyle(\n\t\tstyles.footer,\n\t\tstyles.footerDark\n\t);\n\n\tconst combineToHex = ( h = hue, s = sat, v = val ) =>\n\t\tcolord( { h, s: s * 100, v: v * 100 } ).toHex();\n\n\tconst currentColor = combineToHex();\n\n\tconst updateColor = ( { hue: h, saturation: s, value: v } ) => {\n\t\tif ( h !== undefined ) setHue( h );\n\t\tif ( s !== undefined ) setSaturation( s );\n\t\tif ( v !== undefined ) setValue( v );\n\t\tsetColor( combineToHex( h, s, v ) );\n\t};\n\n\tuseEffect( () => {\n\t\tshouldEnableBottomSheetMaxHeight( false );\n\t\tonHandleClosingBottomSheet( () => {\n\t\t\tif ( savedColor ) {\n\t\t\t\tsetColor( savedColor );\n\t\t\t}\n\t\t\tif ( onBottomSheetClosed ) {\n\t\t\t\tonBottomSheetClosed();\n\t\t\t}\n\t\t} );\n\t\tif ( onHandleHardwareButtonPress ) {\n\t\t\tonHandleHardwareButtonPress( onButtonPress );\n\t\t}\n\t\t// TODO: Revisit this to discover if there's a good reason for omitting\n\t\t// the hook’s dependencies and running it a single time. Ideally there\n\t\t// may be a way to refactor and obviate the disabled lint rule. If not,\n\t\t// this comment should be replaced by one that explains the reasoning.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tfunction onButtonPress( action ) {\n\t\tonNavigationBack();\n\t\tonHandleClosingBottomSheet( null );\n\t\tshouldEnableBottomSheetMaxHeight( true );\n\t\tsetColor( action === 'apply' ? currentColor : savedColor );\n\t\tif ( onBottomSheetClosed ) {\n\t\t\tonBottomSheetClosed();\n\t\t}\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<HsvColorPicker\n\t\t\t\thuePickerHue={ hue }\n\t\t\t\tcurrentColor={ currentColor }\n\t\t\t\tonHuePickerDragMove={ updateColor }\n\t\t\t\tonHuePickerPress={\n\t\t\t\t\t! isBottomSheetContentScrolling && updateColor\n\t\t\t\t}\n\t\t\t\tsatValPickerHue={ hue }\n\t\t\t\tsatValPickerSaturation={ sat }\n\t\t\t\tsatValPickerValue={ val }\n\t\t\t\tonSatValPickerDragMove={ updateColor }\n\t\t\t\tonSatValPickerPress={\n\t\t\t\t\t! isBottomSheetContentScrolling && updateColor\n\t\t\t\t}\n\t\t\t\tonSatValPickerDragStart={ () => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t} }\n\t\t\t\tonSatValPickerDragEnd={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( true )\n\t\t\t\t}\n\t\t\t\tonHuePickerDragStart={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( false )\n\t\t\t\t}\n\t\t\t\tonHuePickerDragEnd={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( true )\n\t\t\t\t}\n\t\t\t\thuePickerBarWidth={ pickerWidth }\n\t\t\t\thuePickerBarHeight={ pickerPointerSize / 2 }\n\t\t\t\tsatValPickerSize={ {\n\t\t\t\t\twidth: pickerWidth,\n\t\t\t\t\theight: pickerHeight,\n\t\t\t\t} }\n\t\t\t\tsatValPickerSliderSize={ pickerPointerSize * 2 }\n\t\t\t\tsatValPickerBorderRadius={ borderRadius }\n\t\t\t\thuePickerBorderRadius={ borderRadius }\n\t\t\t/>\n\t\t\t<View style={ footerStyle }>\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ () => onButtonPress( 'cancel' ) }\n\t\t\t\t\thitSlop={ hitSlop }\n\t\t\t\t>\n\t\t\t\t\t<View>\n\t\t\t\t\t\t{ isIOS ? (\n\t\t\t\t\t\t\t<Text style={ cancelButtonStyle }>\n\t\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ cancelButtonStyle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t{ bottomLabelText ? (\n\t\t\t\t\t<Text style={ selectColorTextStyle }>\n\t\t\t\t\t\t{ bottomLabelText }\n\t\t\t\t\t</Text>\n\t\t\t\t) : (\n\t\t\t\t\t<Text style={ colorTextStyle } selectable>\n\t\t\t\t\t\t{ currentColor.toUpperCase() }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ () => onButtonPress( 'apply' ) }\n\t\t\t\t\thitSlop={ hitSlop }\n\t\t\t\t>\n\t\t\t\t\t<View>\n\t\t\t\t\t\t{ isIOS ? (\n\t\t\t\t\t\t\t<Text style={ applyButtonStyle }>\n\t\t\t\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ applyButtonStyle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t</View>\n\t\t</>\n\t);\n}\n\nexport { ColorPicker };\n"],"mappings":"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"}