@wordpress/components 16.0.1-next.5df0cd52b7.0 → 19.0.1

package/build/mobile/bottom-sheet/nav-bar/apply-button.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/mobile/bottom-sheet/nav-bar/apply-button.native.js"],"names":["ApplyButton","onPress","buttonTextStyle","styles","applyButtonStyle","Platform","OS","check"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAKA;;AACA;;AAhBA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAIA,SAASA,WAAT,CAAsB;AAAEC,EAAAA;AAAF,CAAtB,EAAoC;AACnC,QAAMC,eAAe,GAAG,2CACvBC,gBAAQ,aAAR,CADuB,EAEvBA,gBAAQ,kBAAR,CAFuB,CAAxB;AAKA,QAAMC,gBAAgB,GAAG,2CACxBD,gBAAQ,mBAAR,CADwB,EAExBA,gBAAQ,wBAAR,CAFwB,CAAzB;AAKA,SACC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGA,gBAAQ,cAAR;AAAd,KACC,4BAAC,qBAAD;AACC,IAAA,OAAO,EAAGF,OADX;AAEC,IAAA,kBAAkB,EAAG,cAAI,OAAJ,CAFtB;AAGC,IAAA,iBAAiB,EAAG,cAAI,qBAAJ;AAHrB,KAKGI,sBAASC,EAAT,KAAgB,KAAhB,GACD,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGJ,eAAd;AAAgC,IAAA,qBAAqB,EAAG;AAAxD,KACG,cAAI,OAAJ,CADH,CADC,GAKD,4BAAC,WAAD;AACC,IAAA,IAAI,EAAGK,YADR;AAEC,IAAA,IAAI,EAAG,EAFR;AAGC,IAAA,KAAK,EAAGH;AAHT,IAVF,CADD,CADD;AAqBA;;eAEcJ,W","sourcesContent":["/**\n * External dependencies\n */\nimport { View, Text, Platform } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Icon, check } from '@wordpress/icons';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './styles.scss';\nimport ActionButton from './action-button';\n\nfunction ApplyButton( { onPress } ) {\n\tconst buttonTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'button-text' ],\n\t\tstyles[ 'button-text-dark' ]\n\t);\n\n\tconst applyButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'apply-button-icon' ],\n\t\tstyles[ 'apply-button-icon-dark' ]\n\t);\n\n\treturn (\n\t\t<View style={ styles[ 'apply-button' ] }>\n\t\t\t<ActionButton\n\t\t\t\tonPress={ onPress }\n\t\t\t\taccessibilityLabel={ __( 'Apply' ) }\n\t\t\t\taccessibilityHint={ __( 'Applies the setting' ) }\n\t\t\t>\n\t\t\t\t{ Platform.OS === 'ios' ? (\n\t\t\t\t\t<Text style={ buttonTextStyle } maxFontSizeMultiplier={ 2 }>\n\t\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t\t</Text>\n\t\t\t\t) : (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\tstyle={ applyButtonStyle }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</ActionButton>\n\t\t</View>\n\t);\n}\n\nexport default ApplyButton;\n"]}

package/build/mobile/bottom-sheet/nav-bar/back-button.native.js

@@ -0,0 +1,115 @@
+"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 _i18n = require("@wordpress/i18n");
+
+var _icons = require("@wordpress/icons");
+
+var _compose = require("@wordpress/compose");
+
+var _styles = _interopRequireDefault(require("./styles.scss"));
+
+var _actionButton = _interopRequireDefault(require("./action-button"));
+
+var _chevronBack = _interopRequireDefault(require("./../chevron-back"));
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function Button({
+  onPress,
+  icon,
+  text
+}) {
+  const buttonTextStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default['button-text'], _styles.default['button-text-dark']);
+  return (0, _element.createElement)(_reactNative.View, {
+    style: _styles.default['back-button']
+  }, (0, _element.createElement)(_actionButton.default, {
+    onPress: onPress,
+    accessibilityLabel: (0, _i18n.__)('Go back'),
+    accessibilityHint: (0, _i18n.__)('Navigates to the previous content sheet')
+  }, icon, text && (0, _element.createElement)(_reactNative.Text, {
+    style: buttonTextStyle,
+    maxFontSizeMultiplier: 2
+  }, text)));
+}
+
+function BackButton({
+  onPress
+}) {
+  const chevronLeftStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default['chevron-left-icon'], _styles.default['chevron-left-icon-dark']);
+  const arrowLeftStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default['arrow-left-icon'], _styles.default['arrow-left-icon-dark']);
+  let backIcon;
+  let backText;
+
+  if (_reactNative.Platform.OS === 'ios') {
+    backIcon = (0, _element.createElement)(_icons.Icon, {
+      icon: _chevronBack.default,
+      size: 21,
+      style: chevronLeftStyle
+    });
+    backText = (0, _i18n.__)('Back');
+  } else {
+    backIcon = (0, _element.createElement)(_icons.Icon, {
+      icon: _icons.arrowLeft,
+      size: 24,
+      style: arrowLeftStyle
+    });
+  }
+
+  return (0, _element.createElement)(Button, {
+    onPress: onPress,
+    icon: backIcon,
+    text: backText
+  });
+}
+
+function DismissButton({
+  onPress,
+  iosText
+}) {
+  const arrowLeftStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default['arrow-left-icon'], _styles.default['arrow-left-icon-dark']);
+  let backIcon;
+  let backText;
+
+  if (_reactNative.Platform.OS === 'ios') {
+    backText = iosText ? iosText : (0, _i18n.__)('Cancel');
+  } else {
+    backIcon = (0, _element.createElement)(_icons.Icon, {
+      icon: _icons.close,
+      size: 24,
+      style: arrowLeftStyle
+    });
+  }
+
+  return (0, _element.createElement)(Button, {
+    onPress: onPress,
+    icon: backIcon,
+    text: backText
+  });
+}
+
+Button.Back = BackButton;
+Button.Dismiss = DismissButton; // Cancel or Close Button
+
+var _default = Button;
+exports.default = _default;
+//# sourceMappingURL=back-button.native.js.map

package/build/mobile/bottom-sheet/nav-bar/back-button.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/mobile/bottom-sheet/nav-bar/back-button.native.js"],"names":["Button","onPress","icon","text","buttonTextStyle","styles","BackButton","chevronLeftStyle","arrowLeftStyle","backIcon","backText","Platform","OS","chevronBack","arrowLeft","DismissButton","iosText","close","Back","Dismiss"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAjBA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAKA,SAASA,MAAT,CAAiB;AAAEC,EAAAA,OAAF;AAAWC,EAAAA,IAAX;AAAiBC,EAAAA;AAAjB,CAAjB,EAA2C;AAC1C,QAAMC,eAAe,GAAG,2CACvBC,gBAAQ,aAAR,CADuB,EAEvBA,gBAAQ,kBAAR,CAFuB,CAAxB;AAKA,SACC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGA,gBAAQ,aAAR;AAAd,KACC,4BAAC,qBAAD;AACC,IAAA,OAAO,EAAGJ,OADX;AAEC,IAAA,kBAAkB,EAAG,cAAI,SAAJ,CAFtB;AAGC,IAAA,iBAAiB,EAAG,cACnB,yCADmB;AAHrB,KAOGC,IAPH,EAQGC,IAAI,IACL,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGC,eAAd;AAAgC,IAAA,qBAAqB,EAAG;AAAxD,KACGD,IADH,CATF,CADD,CADD;AAkBA;;AAED,SAASG,UAAT,CAAqB;AAAEL,EAAAA;AAAF,CAArB,EAAmC;AAClC,QAAMM,gBAAgB,GAAG,2CACxBF,gBAAQ,mBAAR,CADwB,EAExBA,gBAAQ,wBAAR,CAFwB,CAAzB;AAIA,QAAMG,cAAc,GAAG,2CACtBH,gBAAQ,iBAAR,CADsB,EAEtBA,gBAAQ,sBAAR,CAFsB,CAAvB;AAKA,MAAII,QAAJ;AACA,MAAIC,QAAJ;;AAEA,MAAKC,sBAASC,EAAT,KAAgB,KAArB,EAA6B;AAC5BH,IAAAA,QAAQ,GACP,4BAAC,WAAD;AAAM,MAAA,IAAI,EAAGI,oBAAb;AAA2B,MAAA,IAAI,EAAG,EAAlC;AAAuC,MAAA,KAAK,EAAGN;AAA/C,MADD;AAGAG,IAAAA,QAAQ,GAAG,cAAI,MAAJ,CAAX;AACA,GALD,MAKO;AACND,IAAAA,QAAQ,GACP,4BAAC,WAAD;AAAM,MAAA,IAAI,EAAGK,gBAAb;AAAyB,MAAA,IAAI,EAAG,EAAhC;AAAqC,MAAA,KAAK,EAAGN;AAA7C,MADD;AAGA;;AAED,SAAO,4BAAC,MAAD;AAAQ,IAAA,OAAO,EAAGP,OAAlB;AAA4B,IAAA,IAAI,EAAGQ,QAAnC;AAA8C,IAAA,IAAI,EAAGC;AAArD,IAAP;AACA;;AAED,SAASK,aAAT,CAAwB;AAAEd,EAAAA,OAAF;AAAWe,EAAAA;AAAX,CAAxB,EAA+C;AAC9C,QAAMR,cAAc,GAAG,2CACtBH,gBAAQ,iBAAR,CADsB,EAEtBA,gBAAQ,sBAAR,CAFsB,CAAvB;AAKA,MAAII,QAAJ;AACA,MAAIC,QAAJ;;AAEA,MAAKC,sBAASC,EAAT,KAAgB,KAArB,EAA6B;AAC5BF,IAAAA,QAAQ,GAAGM,OAAO,GAAGA,OAAH,GAAa,cAAI,QAAJ,CAA/B;AACA,GAFD,MAEO;AACNP,IAAAA,QAAQ,GAAG,4BAAC,WAAD;AAAM,MAAA,IAAI,EAAGQ,YAAb;AAAqB,MAAA,IAAI,EAAG,EAA5B;AAAiC,MAAA,KAAK,EAAGT;AAAzC,MAAX;AACA;;AAED,SAAO,4BAAC,MAAD;AAAQ,IAAA,OAAO,EAAGP,OAAlB;AAA4B,IAAA,IAAI,EAAGQ,QAAnC;AAA8C,IAAA,IAAI,EAAGC;AAArD,IAAP;AACA;;AAEDV,MAAM,CAACkB,IAAP,GAAcZ,UAAd;AACAN,MAAM,CAACmB,OAAP,GAAiBJ,aAAjB,C,CAAgC;;eAEjBf,M","sourcesContent":["/**\n * External dependencies\n */\nimport { View, Platform, Text } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Icon, arrowLeft, close } from '@wordpress/icons';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './styles.scss';\nimport ActionButton from './action-button';\nimport chevronBack from './../chevron-back';\n\nfunction Button( { onPress, icon, text } ) {\n\tconst buttonTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'button-text' ],\n\t\tstyles[ 'button-text-dark' ]\n\t);\n\n\treturn (\n\t\t<View style={ styles[ 'back-button' ] }>\n\t\t\t<ActionButton\n\t\t\t\tonPress={ onPress }\n\t\t\t\taccessibilityLabel={ __( 'Go back' ) }\n\t\t\t\taccessibilityHint={ __(\n\t\t\t\t\t'Navigates to the previous content sheet'\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t{ icon }\n\t\t\t\t{ text && (\n\t\t\t\t\t<Text style={ buttonTextStyle } maxFontSizeMultiplier={ 2 }>\n\t\t\t\t\t\t{ text }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t</ActionButton>\n\t\t</View>\n\t);\n}\n\nfunction BackButton( { onPress } ) {\n\tconst chevronLeftStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'chevron-left-icon' ],\n\t\tstyles[ 'chevron-left-icon-dark' ]\n\t);\n\tconst arrowLeftStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'arrow-left-icon' ],\n\t\tstyles[ 'arrow-left-icon-dark' ]\n\t);\n\n\tlet backIcon;\n\tlet backText;\n\n\tif ( Platform.OS === 'ios' ) {\n\t\tbackIcon = (\n\t\t\t<Icon icon={ chevronBack } size={ 21 } style={ chevronLeftStyle } />\n\t\t);\n\t\tbackText = __( 'Back' );\n\t} else {\n\t\tbackIcon = (\n\t\t\t<Icon icon={ arrowLeft } size={ 24 } style={ arrowLeftStyle } />\n\t\t);\n\t}\n\n\treturn <Button onPress={ onPress } icon={ backIcon } text={ backText } />;\n}\n\nfunction DismissButton( { onPress, iosText } ) {\n\tconst arrowLeftStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'arrow-left-icon' ],\n\t\tstyles[ 'arrow-left-icon-dark' ]\n\t);\n\n\tlet backIcon;\n\tlet backText;\n\n\tif ( Platform.OS === 'ios' ) {\n\t\tbackText = iosText ? iosText : __( 'Cancel' );\n\t} else {\n\t\tbackIcon = <Icon icon={ close } size={ 24 } style={ arrowLeftStyle } />;\n\t}\n\n\treturn <Button onPress={ onPress } icon={ backIcon } text={ backText } />;\n}\n\nButton.Back = BackButton;\nButton.Dismiss = DismissButton; // Cancel or Close Button\n\nexport default Button;\n"]}

package/build/mobile/bottom-sheet/nav-bar/heading.native.js

@@ -0,0 +1,42 @@
+"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 _compose = require("@wordpress/compose");
+
+var _styles = _interopRequireDefault(require("./styles.scss"));
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function Heading({
+  children
+}) {
+  const headingStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.heading, _styles.default['heading-dark']);
+  return (0, _element.createElement)(_reactNative.Text, {
+    accessibilityRole: "header",
+    style: headingStyle,
+    maxFontSizeMultiplier: 3
+  }, children);
+}
+
+var _default = Heading;
+exports.default = _default;
+//# sourceMappingURL=heading.native.js.map

package/build/mobile/bottom-sheet/nav-bar/heading.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/mobile/bottom-sheet/nav-bar/heading.native.js"],"names":["Heading","children","headingStyle","styles","heading"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AAKA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAGA,SAASA,OAAT,CAAkB;AAAEC,EAAAA;AAAF,CAAlB,EAAiC;AAChC,QAAMC,YAAY,GAAG,2CACpBC,gBAAOC,OADa,EAEpBD,gBAAQ,cAAR,CAFoB,CAArB;AAKA,SACC,4BAAC,iBAAD;AACC,IAAA,iBAAiB,EAAC,QADnB;AAEC,IAAA,KAAK,EAAGD,YAFT;AAGC,IAAA,qBAAqB,EAAG;AAHzB,KAKGD,QALH,CADD;AASA;;eAEcD,O","sourcesContent":["/**\n * External dependencies\n */\nimport { Text } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './styles.scss';\n\nfunction Heading( { children } ) {\n\tconst headingStyle = usePreferredColorSchemeStyle(\n\t\tstyles.heading,\n\t\tstyles[ 'heading-dark' ]\n\t);\n\n\treturn (\n\t\t<Text\n\t\t\taccessibilityRole=\"header\"\n\t\t\tstyle={ headingStyle }\n\t\t\tmaxFontSizeMultiplier={ 3 }\n\t\t>\n\t\t\t{ children }\n\t\t</Text>\n\t);\n}\n\nexport default Heading;\n"]}

package/build/mobile/bottom-sheet/nav-bar/index.native.js

@@ -0,0 +1,43 @@
+"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 _applyButton = _interopRequireDefault(require("./apply-button"));
+
+var _backButton = _interopRequireDefault(require("./back-button"));
+
+var _heading = _interopRequireDefault(require("./heading"));
+
+var _styles = _interopRequireDefault(require("./styles.scss"));
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function NavBar({
+  children
+}) {
+  return (0, _element.createElement)(_reactNative.View, {
+    style: _styles.default['nav-bar']
+  }, children);
+}
+
+NavBar.ApplyButton = _applyButton.default;
+NavBar.BackButton = _backButton.default.Back;
+NavBar.DismissButton = _backButton.default.Dismiss;
+NavBar.Heading = _heading.default;
+var _default = NavBar;
+exports.default = _default;
+//# sourceMappingURL=index.native.js.map

package/build/mobile/bottom-sheet/nav-bar/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/mobile/bottom-sheet/nav-bar/index.native.js"],"names":["NavBar","children","styles","ApplyButton","BackButton","Button","Back","DismissButton","Dismiss","Heading"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AAXA;AACA;AACA;;AAGA;AACA;AACA;AAKA,SAASA,MAAT,CAAiB;AAAEC,EAAAA;AAAF,CAAjB,EAAgC;AAC/B,SAAO,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGC,gBAAQ,SAAR;AAAd,KAAsCD,QAAtC,CAAP;AACA;;AAEDD,MAAM,CAACG,WAAP,GAAqBA,oBAArB;AACAH,MAAM,CAACI,UAAP,GAAoBC,oBAAOC,IAA3B;AACAN,MAAM,CAACO,aAAP,GAAuBF,oBAAOG,OAA9B;AAEAR,MAAM,CAACS,OAAP,GAAiBA,gBAAjB;eAEeT,M","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * Internal dependencies\n */\nimport ApplyButton from './apply-button';\nimport Button from './back-button';\nimport Heading from './heading';\nimport styles from './styles.scss';\nfunction NavBar( { children } ) {\n\treturn <View style={ styles[ 'nav-bar' ] }>{ children }</View>;\n}\n\nNavBar.ApplyButton = ApplyButton;\nNavBar.BackButton = Button.Back;\nNavBar.DismissButton = Button.Dismiss;\n\nNavBar.Heading = Heading;\n\nexport default NavBar;\n"]}

package/build/mobile/bottom-sheet/range-cell.native.js

@@ -44,6 +44,7 @@ class BottomSheetRangeCell extends _element.Component {
   constructor(props) {
     super(props);
     this.onSliderChange = this.onSliderChange.bind(this);
+    this.onCompleteSliderChange = this.onCompleteSliderChange.bind(this);
     this.onTextInputChange = this.onTextInputChange.bind(this);
     this.a11yIncrementValue = this.a11yIncrementValue.bind(this);
     this.a11yDecrementValue = this.a11yDecrementValue.bind(this);
@@ -90,6 +91,18 @@ class BottomSheetRangeCell extends _element.Component {
       onComplete(nextValue);
     }
   }
+
+  onCompleteSliderChange(nextValue) {
+    const {
+      decimalNum,
+      onComplete
+    } = this.props;
+    nextValue = (0, _utils.toFixed)(nextValue, decimalNum);
+
+    if (onComplete) {
+      onComplete(nextValue);
+    }
+  }
   /*
    * Only used with screenreaders like VoiceOver and TalkBack. Increments the
    * value of this setting programmatically.
@@ -185,7 +198,6 @@ class BottomSheetRangeCell extends _element.Component {
       thumbTintColor = !isIOS && '#00669b',
       preview,
       cellContainerStyle,
-      onComplete,
       shouldDisplayTextInput = true,
       unitLabel = '',
       settingLabel = 'Value',
@@ -264,7 +276,7 @@ class BottomSheetRangeCell extends _element.Component {
       maximumTrackTintColor: maximumTrackTintColor,
       thumbTintColor: thumbTintColor,
       onValueChange: this.onSliderChange,
-      onSlidingComplete: onComplete,
+      onSlidingComplete: this.onCompleteSliderChange,
       ref: slider => {
         this.sliderRef = slider;
       },

package/build/mobile/bottom-sheet/range-cell.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/mobile/bottom-sheet/range-cell.native.js"],"names":["isIOS","Platform","OS","BottomSheetRangeCell","Component","constructor","props","onSliderChange","bind","onTextInputChange","a11yIncrementValue","a11yDecrementValue","a11yUpdateValue","value","defaultValue","minimumValue","initialValue","Number","state","inputValue","sliderValue","componentWillUnmount","clearTimeout","timeoutAnnounceValue","decimalNum","onChange","setState","nextValue","onComplete","step","maximumValue","newValue","undefined","announceValue","label","unitLabel","setTimeout","AccessibilityInfo","announceForAccessibility","render","disabled","preferredColorScheme","minimumTrackTintColor","maximumTrackTintColor","thumbTintColor","preview","cellContainerStyle","shouldDisplayTextInput","settingLabel","openUnitPicker","children","cellProps","getAccessibilityHint","getAccessibilityLabel","containerStyle","styles","container","containerIOS","containerAndroid","name","event","nativeEvent","actionName","cellContainerStyles","valueStyle","slider","sliderRef","sliderIOS","sliderAndroid"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { Platform, AccessibilityInfo, View } from 'react-native';\nimport Slider from '@react-native-community/slider';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Component } from '@wordpress/element';\nimport { withPreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport styles from './range-cell.scss';\nimport RangeTextInput from './range-text-input';\nimport { toFixed } from '../utils';\n\nconst isIOS = Platform.OS === 'ios';\n\nclass BottomSheetRangeCell extends Component {\n\tconstructor( props ) {\n\t\tsuper( props );\n\t\tthis.onSliderChange = this.onSliderChange.bind( this );\n\t\tthis.onTextInputChange = this.onTextInputChange.bind( this );\n\t\tthis.a11yIncrementValue = this.a11yIncrementValue.bind( this );\n\t\tthis.a11yDecrementValue = this.a11yDecrementValue.bind( this );\n\t\tthis.a11yUpdateValue = this.a11yUpdateValue.bind( this );\n\n\t\tconst { value, defaultValue, minimumValue } = props;\n\t\tconst initialValue = Number( value || defaultValue || minimumValue );\n\n\t\tthis.state = {\n\t\t\tinputValue: initialValue,\n\t\t\tsliderValue: initialValue,\n\t\t};\n\t}\n\n\tcomponentWillUnmount() {\n\t\tclearTimeout( this.timeoutAnnounceValue );\n\t}\n\n\tonSliderChange( initialValue ) {\n\t\tconst { decimalNum, onChange } = this.props;\n\t\tinitialValue = toFixed( initialValue, decimalNum );\n\t\tthis.setState( { inputValue: initialValue } );\n\t\tonChange( initialValue );\n\t}\n\n\tonTextInputChange( nextValue ) {\n\t\tconst { onChange, onComplete } = this.props;\n\t\tthis.setState( {\n\t\t\tsliderValue: nextValue,\n\t\t} );\n\t\tonChange( nextValue );\n\t\tif ( onComplete ) {\n\t\t\tonComplete( nextValue );\n\t\t}\n\t}\n\n\t/*\n\t * Only used with screenreaders like VoiceOver and TalkBack. Increments the\n\t * value of this setting programmatically.\n\t */\n\ta11yIncrementValue() {\n\t\tconst { step = 5, maximumValue, decimalNum } = this.props;\n\t\tconst { inputValue } = this.state;\n\n\t\tconst newValue = toFixed( inputValue + step, decimalNum );\n\n\t\tif ( newValue <= maximumValue || maximumValue === undefined ) {\n\t\t\tthis.a11yUpdateValue( newValue );\n\t\t}\n\t}\n\n\t/*\n\t * Only used with screenreaders like VoiceOver and TalkBack. Decrements the\n\t * value of this setting programmatically.\n\t */\n\ta11yDecrementValue() {\n\t\tconst { step = 5, minimumValue, decimalNum } = this.props;\n\t\tconst { sliderValue } = this.state;\n\n\t\tconst newValue = toFixed( sliderValue - step, decimalNum );\n\n\t\tif ( newValue >= minimumValue ) {\n\t\t\tthis.a11yUpdateValue( newValue );\n\t\t}\n\t}\n\n\ta11yUpdateValue( newValue ) {\n\t\tconst { onChange, onComplete } = this.props;\n\t\tthis.setState( {\n\t\t\tsliderValue: newValue,\n\t\t\tinputValue: newValue,\n\t\t} );\n\t\tonChange( newValue );\n\t\tif ( onComplete ) {\n\t\t\tonComplete( newValue );\n\t\t}\n\t\tthis.announceValue( newValue );\n\t}\n\n\t/*\n\t * Only used with screenreaders like VoiceOver and TalkBack.\n\t */\n\tannounceValue( value ) {\n\t\tconst { label, unitLabel = '' } = this.props;\n\n\t\tif ( isIOS ) {\n\t\t\t// On Android it triggers the accessibilityLabel with the value change, but\n\t\t\t// on iOS we need to do this manually.\n\t\t\tclearTimeout( this.timeoutAnnounceValue );\n\t\t\tthis.timeoutAnnounceValue = setTimeout( () => {\n\t\t\t\tAccessibilityInfo.announceForAccessibility(\n\t\t\t\t\t`${ value } ${ unitLabel },  ${ label }`\n\t\t\t\t);\n\t\t\t}, 300 );\n\t\t}\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\tvalue,\n\t\t\tdefaultValue,\n\t\t\tminimumValue = 0,\n\t\t\tmaximumValue = 10,\n\t\t\tdisabled,\n\t\t\tstep = 1,\n\t\t\tpreferredColorScheme,\n\t\t\tminimumTrackTintColor = preferredColorScheme === 'light'\n\t\t\t\t? '#00669b'\n\t\t\t\t: '#5198d9',\n\t\t\tmaximumTrackTintColor = isIOS ? '#e9eff3' : '#909090',\n\t\t\tthumbTintColor = ! isIOS && '#00669b',\n\t\t\tpreview,\n\t\t\tcellContainerStyle,\n\t\t\tonComplete,\n\t\t\tshouldDisplayTextInput = true,\n\t\t\tunitLabel = '',\n\t\t\tsettingLabel = 'Value',\n\t\t\topenUnitPicker,\n\t\t\tchildren,\n\t\t\tdecimalNum,\n\t\t\t...cellProps\n\t\t} = this.props;\n\n\t\tconst { inputValue, sliderValue } = this.state;\n\n\t\tconst getAccessibilityHint = () => {\n\t\t\treturn openUnitPicker ? __( 'double-tap to change unit' ) : '';\n\t\t};\n\n\t\tconst getAccessibilityLabel = () => {\n\t\t\treturn sprintf(\n\t\t\t\t/* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: setting label (example: width), %3$s: Current value. %4$s: value measurement unit (example: pixels) */\n\t\t\t\t__( '%1$s. %2$s is %3$s %4$s.' ),\n\t\t\t\tcellProps.label,\n\t\t\t\tsettingLabel,\n\t\t\t\ttoFixed( value, decimalNum ),\n\t\t\t\tunitLabel\n\t\t\t);\n\t\t};\n\n\t\tconst containerStyle = [\n\t\t\tstyles.container,\n\t\t\tisIOS ? styles.containerIOS : styles.containerAndroid,\n\t\t];\n\n\t\treturn (\n\t\t\t<View\n\t\t\t\taccessible={ true }\n\t\t\t\taccessibilityRole=\"adjustable\"\n\t\t\t\taccessibilityActions={ [\n\t\t\t\t\t{ name: 'increment' },\n\t\t\t\t\t{ name: 'decrement' },\n\t\t\t\t\t{ name: 'activate' },\n\t\t\t\t] }\n\t\t\t\tonAccessibilityAction={ ( event ) => {\n\t\t\t\t\tswitch ( event.nativeEvent.actionName ) {\n\t\t\t\t\t\tcase 'increment':\n\t\t\t\t\t\t\tthis.a11yIncrementValue();\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\tcase 'decrement':\n\t\t\t\t\t\t\tthis.a11yDecrementValue();\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\tcase 'activate':\n\t\t\t\t\t\t\tif ( openUnitPicker ) {\n\t\t\t\t\t\t\t\topenUnitPicker();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t\taccessibilityLabel={ getAccessibilityLabel() }\n\t\t\t\taccessibilityHint={ getAccessibilityHint() }\n\t\t\t>\n\t\t\t\t<View importantForAccessibility=\"no-hide-descendants\">\n\t\t\t\t\t<Cell\n\t\t\t\t\t\t{ ...cellProps }\n\t\t\t\t\t\tcellContainerStyle={ [\n\t\t\t\t\t\t\tstyles.cellContainerStyles,\n\t\t\t\t\t\t\tcellContainerStyle,\n\t\t\t\t\t\t] }\n\t\t\t\t\t\tcellRowContainerStyle={ containerStyle }\n\t\t\t\t\t\tleftAlign\n\t\t\t\t\t\teditable={ false }\n\t\t\t\t\t\tactiveOpacity={ 1 }\n\t\t\t\t\t\taccessible={ false }\n\t\t\t\t\t\tvalueStyle={ styles.valueStyle }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View style={ containerStyle }>\n\t\t\t\t\t\t\t{ preview }\n\t\t\t\t\t\t\t<Slider\n\t\t\t\t\t\t\t\ttestID={ `Slider ${ cellProps.label }` }\n\t\t\t\t\t\t\t\tvalue={ sliderValue }\n\t\t\t\t\t\t\t\tdefaultValue={ defaultValue }\n\t\t\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\t\t\tstep={ step }\n\t\t\t\t\t\t\t\tminimumValue={ minimumValue }\n\t\t\t\t\t\t\t\tmaximumValue={ maximumValue }\n\t\t\t\t\t\t\t\tminimumTrackTintColor={ minimumTrackTintColor }\n\t\t\t\t\t\t\t\tmaximumTrackTintColor={ maximumTrackTintColor }\n\t\t\t\t\t\t\t\tthumbTintColor={ thumbTintColor }\n\t\t\t\t\t\t\t\tonValueChange={ this.onSliderChange }\n\t\t\t\t\t\t\t\tonSlidingComplete={ onComplete }\n\t\t\t\t\t\t\t\tref={ ( slider ) => {\n\t\t\t\t\t\t\t\t\tthis.sliderRef = slider;\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\tisIOS\n\t\t\t\t\t\t\t\t\t\t? styles.sliderIOS\n\t\t\t\t\t\t\t\t\t\t: styles.sliderAndroid\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{ shouldDisplayTextInput && (\n\t\t\t\t\t\t\t\t<RangeTextInput\n\t\t\t\t\t\t\t\t\tlabel={ cellProps.label }\n\t\t\t\t\t\t\t\t\tonChange={ this.onTextInputChange }\n\t\t\t\t\t\t\t\t\tdefaultValue={ `${ inputValue }` }\n\t\t\t\t\t\t\t\t\tvalue={ inputValue }\n\t\t\t\t\t\t\t\t\tmin={ minimumValue }\n\t\t\t\t\t\t\t\t\tmax={ maximumValue }\n\t\t\t\t\t\t\t\t\tstep={ step }\n\t\t\t\t\t\t\t\t\tdecimalNum={ decimalNum }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t\t\t</RangeTextInput>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</Cell>\n\t\t\t\t</View>\n\t\t\t</View>\n\t\t);\n\t}\n}\n\nexport default withPreferredColorScheme( BottomSheetRangeCell );\n"]}
+{"version":3,"sources":["@wordpress/components/src/mobile/bottom-sheet/range-cell.native.js"],"names":["isIOS","Platform","OS","BottomSheetRangeCell","Component","constructor","props","onSliderChange","bind","onCompleteSliderChange","onTextInputChange","a11yIncrementValue","a11yDecrementValue","a11yUpdateValue","value","defaultValue","minimumValue","initialValue","Number","state","inputValue","sliderValue","componentWillUnmount","clearTimeout","timeoutAnnounceValue","decimalNum","onChange","setState","nextValue","onComplete","step","maximumValue","newValue","undefined","announceValue","label","unitLabel","setTimeout","AccessibilityInfo","announceForAccessibility","render","disabled","preferredColorScheme","minimumTrackTintColor","maximumTrackTintColor","thumbTintColor","preview","cellContainerStyle","shouldDisplayTextInput","settingLabel","openUnitPicker","children","cellProps","getAccessibilityHint","getAccessibilityLabel","containerStyle","styles","container","containerIOS","containerAndroid","name","event","nativeEvent","actionName","cellContainerStyles","valueStyle","slider","sliderRef","sliderIOS","sliderAndroid"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { Platform, AccessibilityInfo, View } from 'react-native';\nimport Slider from '@react-native-community/slider';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Component } from '@wordpress/element';\nimport { withPreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport styles from './range-cell.scss';\nimport RangeTextInput from './range-text-input';\nimport { toFixed } from '../utils';\n\nconst isIOS = Platform.OS === 'ios';\n\nclass BottomSheetRangeCell extends Component {\n\tconstructor( props ) {\n\t\tsuper( props );\n\t\tthis.onSliderChange = this.onSliderChange.bind( this );\n\t\tthis.onCompleteSliderChange = this.onCompleteSliderChange.bind( this );\n\t\tthis.onTextInputChange = this.onTextInputChange.bind( this );\n\t\tthis.a11yIncrementValue = this.a11yIncrementValue.bind( this );\n\t\tthis.a11yDecrementValue = this.a11yDecrementValue.bind( this );\n\t\tthis.a11yUpdateValue = this.a11yUpdateValue.bind( this );\n\n\t\tconst { value, defaultValue, minimumValue } = props;\n\t\tconst initialValue = Number( value || defaultValue || minimumValue );\n\n\t\tthis.state = {\n\t\t\tinputValue: initialValue,\n\t\t\tsliderValue: initialValue,\n\t\t};\n\t}\n\n\tcomponentWillUnmount() {\n\t\tclearTimeout( this.timeoutAnnounceValue );\n\t}\n\n\tonSliderChange( initialValue ) {\n\t\tconst { decimalNum, onChange } = this.props;\n\t\tinitialValue = toFixed( initialValue, decimalNum );\n\t\tthis.setState( { inputValue: initialValue } );\n\t\tonChange( initialValue );\n\t}\n\n\tonTextInputChange( nextValue ) {\n\t\tconst { onChange, onComplete } = this.props;\n\t\tthis.setState( {\n\t\t\tsliderValue: nextValue,\n\t\t} );\n\t\tonChange( nextValue );\n\t\tif ( onComplete ) {\n\t\t\tonComplete( nextValue );\n\t\t}\n\t}\n\n\tonCompleteSliderChange( nextValue ) {\n\t\tconst { decimalNum, onComplete } = this.props;\n\t\tnextValue = toFixed( nextValue, decimalNum );\n\t\tif ( onComplete ) {\n\t\t\tonComplete( nextValue );\n\t\t}\n\t}\n\n\t/*\n\t * Only used with screenreaders like VoiceOver and TalkBack. Increments the\n\t * value of this setting programmatically.\n\t */\n\ta11yIncrementValue() {\n\t\tconst { step = 5, maximumValue, decimalNum } = this.props;\n\t\tconst { inputValue } = this.state;\n\n\t\tconst newValue = toFixed( inputValue + step, decimalNum );\n\n\t\tif ( newValue <= maximumValue || maximumValue === undefined ) {\n\t\t\tthis.a11yUpdateValue( newValue );\n\t\t}\n\t}\n\n\t/*\n\t * Only used with screenreaders like VoiceOver and TalkBack. Decrements the\n\t * value of this setting programmatically.\n\t */\n\ta11yDecrementValue() {\n\t\tconst { step = 5, minimumValue, decimalNum } = this.props;\n\t\tconst { sliderValue } = this.state;\n\n\t\tconst newValue = toFixed( sliderValue - step, decimalNum );\n\n\t\tif ( newValue >= minimumValue ) {\n\t\t\tthis.a11yUpdateValue( newValue );\n\t\t}\n\t}\n\n\ta11yUpdateValue( newValue ) {\n\t\tconst { onChange, onComplete } = this.props;\n\t\tthis.setState( {\n\t\t\tsliderValue: newValue,\n\t\t\tinputValue: newValue,\n\t\t} );\n\t\tonChange( newValue );\n\t\tif ( onComplete ) {\n\t\t\tonComplete( newValue );\n\t\t}\n\t\tthis.announceValue( newValue );\n\t}\n\n\t/*\n\t * Only used with screenreaders like VoiceOver and TalkBack.\n\t */\n\tannounceValue( value ) {\n\t\tconst { label, unitLabel = '' } = this.props;\n\n\t\tif ( isIOS ) {\n\t\t\t// On Android it triggers the accessibilityLabel with the value change, but\n\t\t\t// on iOS we need to do this manually.\n\t\t\tclearTimeout( this.timeoutAnnounceValue );\n\t\t\tthis.timeoutAnnounceValue = setTimeout( () => {\n\t\t\t\tAccessibilityInfo.announceForAccessibility(\n\t\t\t\t\t`${ value } ${ unitLabel },  ${ label }`\n\t\t\t\t);\n\t\t\t}, 300 );\n\t\t}\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\tvalue,\n\t\t\tdefaultValue,\n\t\t\tminimumValue = 0,\n\t\t\tmaximumValue = 10,\n\t\t\tdisabled,\n\t\t\tstep = 1,\n\t\t\tpreferredColorScheme,\n\t\t\tminimumTrackTintColor = preferredColorScheme === 'light'\n\t\t\t\t? '#00669b'\n\t\t\t\t: '#5198d9',\n\t\t\tmaximumTrackTintColor = isIOS ? '#e9eff3' : '#909090',\n\t\t\tthumbTintColor = ! isIOS && '#00669b',\n\t\t\tpreview,\n\t\t\tcellContainerStyle,\n\t\t\tshouldDisplayTextInput = true,\n\t\t\tunitLabel = '',\n\t\t\tsettingLabel = 'Value',\n\t\t\topenUnitPicker,\n\t\t\tchildren,\n\t\t\tdecimalNum,\n\t\t\t...cellProps\n\t\t} = this.props;\n\n\t\tconst { inputValue, sliderValue } = this.state;\n\n\t\tconst getAccessibilityHint = () => {\n\t\t\treturn openUnitPicker ? __( 'double-tap to change unit' ) : '';\n\t\t};\n\n\t\tconst getAccessibilityLabel = () => {\n\t\t\treturn sprintf(\n\t\t\t\t/* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: setting label (example: width), %3$s: Current value. %4$s: value measurement unit (example: pixels) */\n\t\t\t\t__( '%1$s. %2$s is %3$s %4$s.' ),\n\t\t\t\tcellProps.label,\n\t\t\t\tsettingLabel,\n\t\t\t\ttoFixed( value, decimalNum ),\n\t\t\t\tunitLabel\n\t\t\t);\n\t\t};\n\n\t\tconst containerStyle = [\n\t\t\tstyles.container,\n\t\t\tisIOS ? styles.containerIOS : styles.containerAndroid,\n\t\t];\n\n\t\treturn (\n\t\t\t<View\n\t\t\t\taccessible={ true }\n\t\t\t\taccessibilityRole=\"adjustable\"\n\t\t\t\taccessibilityActions={ [\n\t\t\t\t\t{ name: 'increment' },\n\t\t\t\t\t{ name: 'decrement' },\n\t\t\t\t\t{ name: 'activate' },\n\t\t\t\t] }\n\t\t\t\tonAccessibilityAction={ ( event ) => {\n\t\t\t\t\tswitch ( event.nativeEvent.actionName ) {\n\t\t\t\t\t\tcase 'increment':\n\t\t\t\t\t\t\tthis.a11yIncrementValue();\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\tcase 'decrement':\n\t\t\t\t\t\t\tthis.a11yDecrementValue();\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\tcase 'activate':\n\t\t\t\t\t\t\tif ( openUnitPicker ) {\n\t\t\t\t\t\t\t\topenUnitPicker();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t\taccessibilityLabel={ getAccessibilityLabel() }\n\t\t\t\taccessibilityHint={ getAccessibilityHint() }\n\t\t\t>\n\t\t\t\t<View importantForAccessibility=\"no-hide-descendants\">\n\t\t\t\t\t<Cell\n\t\t\t\t\t\t{ ...cellProps }\n\t\t\t\t\t\tcellContainerStyle={ [\n\t\t\t\t\t\t\tstyles.cellContainerStyles,\n\t\t\t\t\t\t\tcellContainerStyle,\n\t\t\t\t\t\t] }\n\t\t\t\t\t\tcellRowContainerStyle={ containerStyle }\n\t\t\t\t\t\tleftAlign\n\t\t\t\t\t\teditable={ false }\n\t\t\t\t\t\tactiveOpacity={ 1 }\n\t\t\t\t\t\taccessible={ false }\n\t\t\t\t\t\tvalueStyle={ styles.valueStyle }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View style={ containerStyle }>\n\t\t\t\t\t\t\t{ preview }\n\t\t\t\t\t\t\t<Slider\n\t\t\t\t\t\t\t\ttestID={ `Slider ${ cellProps.label }` }\n\t\t\t\t\t\t\t\tvalue={ sliderValue }\n\t\t\t\t\t\t\t\tdefaultValue={ defaultValue }\n\t\t\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\t\t\tstep={ step }\n\t\t\t\t\t\t\t\tminimumValue={ minimumValue }\n\t\t\t\t\t\t\t\tmaximumValue={ maximumValue }\n\t\t\t\t\t\t\t\tminimumTrackTintColor={ minimumTrackTintColor }\n\t\t\t\t\t\t\t\tmaximumTrackTintColor={ maximumTrackTintColor }\n\t\t\t\t\t\t\t\tthumbTintColor={ thumbTintColor }\n\t\t\t\t\t\t\t\tonValueChange={ this.onSliderChange }\n\t\t\t\t\t\t\t\tonSlidingComplete={\n\t\t\t\t\t\t\t\t\tthis.onCompleteSliderChange\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tref={ ( slider ) => {\n\t\t\t\t\t\t\t\t\tthis.sliderRef = slider;\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\tisIOS\n\t\t\t\t\t\t\t\t\t\t? styles.sliderIOS\n\t\t\t\t\t\t\t\t\t\t: styles.sliderAndroid\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{ shouldDisplayTextInput && (\n\t\t\t\t\t\t\t\t<RangeTextInput\n\t\t\t\t\t\t\t\t\tlabel={ cellProps.label }\n\t\t\t\t\t\t\t\t\tonChange={ this.onTextInputChange }\n\t\t\t\t\t\t\t\t\tdefaultValue={ `${ inputValue }` }\n\t\t\t\t\t\t\t\t\tvalue={ inputValue }\n\t\t\t\t\t\t\t\t\tmin={ minimumValue }\n\t\t\t\t\t\t\t\t\tmax={ maximumValue }\n\t\t\t\t\t\t\t\t\tstep={ step }\n\t\t\t\t\t\t\t\t\tdecimalNum={ decimalNum }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t\t\t</RangeTextInput>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</Cell>\n\t\t\t\t</View>\n\t\t\t</View>\n\t\t);\n\t}\n}\n\nexport default withPreferredColorScheme( BottomSheetRangeCell );\n"]}

package/build/mobile/bottom-sheet/range-text-input.native.js

@@ -220,7 +220,8 @@ class RangeTextInput extends _element.Component {
       android: inputBorderStyles,
       ios: textInputIOSStyle
     }), {
-      width: 50 * fontScale
+      width: 50 * fontScale,
+      borderRightWidth: children ? 1 : 0
     }];
     return (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
       onPress: this.onInputFocus,

package/build/mobile/bottom-sheet/range-text-input.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/mobile/bottom-sheet/range-text-input.native.js"],"names":["isIOS","Platform","OS","RangeTextInput","Component","constructor","props","announceCurrentValue","bind","onInputFocus","onInputBlur","handleChangePixelRatio","onSubmitEditing","onChangeText","value","defaultValue","min","decimalNum","initialValue","fontScale","getFontScale","state","inputValue","controlValue","hasFocus","componentDidMount","AppState","addEventListener","componentWillUnmount","removeEventListener","clearTimeout","timeoutAnnounceValue","componentDidUpdate","prevProps","prevState","setState","validValue","validateInput","_valueTextInput","focus","PixelRatio","nextAppState","text","max","result","Math","updateValue","onChange","textValue","replace","nativeEvent","isNaN","Number","announcement","AccessibilityInfo","announceForAccessibility","render","getStylesFromColorScheme","children","label","textInputStyle","styles","textInput","textInputDark","textInputIOSStyle","textInputIOS","textInputIOSDark","inputBorderStyles","borderStyles","borderStyle","isSelected","valueFinalStyle","select","android","ios","width","textInputContainer","c","toString"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tAccessibilityInfo,\n\tView,\n\tTextInput,\n\tPixelRatio,\n\tAppState,\n\tPlatform,\n\tText,\n\tTouchableWithoutFeedback,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { withPreferredColorScheme } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { toFixed, removeNonDigit } from '../utils';\nimport styles from './styles.scss';\nimport borderStyles from './borderStyles.scss';\n\nconst isIOS = Platform.OS === 'ios';\n\nclass RangeTextInput extends Component {\n\tconstructor( props ) {\n\t\tsuper( props );\n\n\t\tthis.announceCurrentValue = this.announceCurrentValue.bind( this );\n\t\tthis.onInputFocus = this.onInputFocus.bind( this );\n\t\tthis.onInputBlur = this.onInputBlur.bind( this );\n\t\tthis.handleChangePixelRatio = this.handleChangePixelRatio.bind( this );\n\t\tthis.onSubmitEditing = this.onSubmitEditing.bind( this );\n\t\tthis.onChangeText = this.onChangeText.bind( this );\n\n\t\tconst { value, defaultValue, min, decimalNum } = props;\n\t\tconst initialValue = toFixed(\n\t\t\tvalue || defaultValue || min,\n\t\t\tdecimalNum\n\t\t);\n\n\t\tconst fontScale = this.getFontScale();\n\n\t\tthis.state = {\n\t\t\tfontScale,\n\t\t\tinputValue: initialValue,\n\t\t\tcontrolValue: initialValue,\n\t\t\thasFocus: false,\n\t\t};\n\t}\n\n\tcomponentDidMount() {\n\t\tAppState.addEventListener( 'change', this.handleChangePixelRatio );\n\t}\n\n\tcomponentWillUnmount() {\n\t\tAppState.removeEventListener( 'change', this.handleChangePixelRatio );\n\t\tclearTimeout( this.timeoutAnnounceValue );\n\t}\n\n\tcomponentDidUpdate( prevProps, prevState ) {\n\t\tconst { value } = this.props;\n\t\tconst { hasFocus, inputValue } = this.state;\n\n\t\tif ( prevProps.value !== value ) {\n\t\t\tthis.setState( { inputValue: value } );\n\t\t}\n\n\t\tif ( prevState.hasFocus !== hasFocus ) {\n\t\t\tconst validValue = this.validateInput( inputValue );\n\t\t\tthis.setState( { inputValue: validValue } );\n\t\t}\n\n\t\tif ( ! prevState.hasFocus && hasFocus ) {\n\t\t\tthis._valueTextInput.focus();\n\t\t}\n\t}\n\n\tgetFontScale() {\n\t\treturn PixelRatio.getFontScale() < 1 ? 1 : PixelRatio.getFontScale();\n\t}\n\n\thandleChangePixelRatio( nextAppState ) {\n\t\tif ( nextAppState === 'active' ) {\n\t\t\tthis.setState( { fontScale: this.getFontScale() } );\n\t\t}\n\t}\n\n\tonInputFocus() {\n\t\tthis.setState( {\n\t\t\thasFocus: true,\n\t\t} );\n\t}\n\n\tonInputBlur() {\n\t\tconst { inputValue } = this.state;\n\t\tthis.onChangeText( `${ inputValue }` );\n\t\tthis.setState( {\n\t\t\thasFocus: false,\n\t\t} );\n\t}\n\n\tvalidateInput( text ) {\n\t\tconst { min, max, decimalNum } = this.props;\n\t\tlet result = min;\n\t\tif ( ! text ) {\n\t\t\treturn min;\n\t\t}\n\n\t\tif ( typeof text === 'number' ) {\n\t\t\tresult = Math.max( text, min );\n\t\t\treturn max ? Math.min( result, max ) : result;\n\t\t}\n\n\t\tresult = Math.max( removeNonDigit( text, decimalNum ), min );\n\t\treturn max ? Math.min( result, max ) : result;\n\t}\n\n\tupdateValue( value ) {\n\t\tconst { onChange } = this.props;\n\t\tconst validValue = this.validateInput( value );\n\n\t\tthis.announceCurrentValue( `${ validValue }` );\n\n\t\tonChange( validValue );\n\t}\n\n\tonChangeText( textValue ) {\n\t\tconst { decimalNum } = this.props;\n\t\tconst inputValue = removeNonDigit( textValue, decimalNum );\n\n\t\ttextValue = inputValue.replace( ',', '.' );\n\t\ttextValue = toFixed( textValue, decimalNum );\n\t\tconst value = this.validateInput( textValue );\n\t\tthis.setState( {\n\t\t\tinputValue,\n\t\t\tcontrolValue: value,\n\t\t} );\n\t\tthis.updateValue( value );\n\t}\n\n\tonSubmitEditing( { nativeEvent: { text } } ) {\n\t\tconst { decimalNum } = this.props;\n\t\tconst { inputValue } = this.state;\n\n\t\tif ( ! isNaN( Number( text ) ) ) {\n\t\t\ttext = toFixed( text.replace( ',', '.' ), decimalNum );\n\t\t\tconst validValue = this.validateInput( text );\n\n\t\t\tif ( inputValue !== validValue ) {\n\t\t\t\tthis.setState( { inputValue: validValue } );\n\t\t\t\tthis.announceCurrentValue( `${ validValue }` );\n\t\t\t\tthis.props.onChange( validValue );\n\t\t\t}\n\t\t}\n\t}\n\n\tannounceCurrentValue( value ) {\n\t\t/* translators: %s: current cell value. */\n\t\tconst announcement = sprintf( __( 'Current value is %s' ), value );\n\t\tAccessibilityInfo.announceForAccessibility( announcement );\n\t}\n\n\trender() {\n\t\tconst { getStylesFromColorScheme, children, label } = this.props;\n\t\tconst { fontScale, inputValue, hasFocus } = this.state;\n\n\t\tconst textInputStyle = getStylesFromColorScheme(\n\t\t\tstyles.textInput,\n\t\t\tstyles.textInputDark\n\t\t);\n\n\t\tconst textInputIOSStyle = getStylesFromColorScheme(\n\t\t\tstyles.textInputIOS,\n\t\t\tstyles.textInputIOSDark\n\t\t);\n\n\t\tconst inputBorderStyles = [\n\t\t\ttextInputStyle,\n\t\t\tborderStyles.borderStyle,\n\t\t\thasFocus && borderStyles.isSelected,\n\t\t];\n\n\t\tconst valueFinalStyle = [\n\t\t\tPlatform.select( {\n\t\t\t\tandroid: inputBorderStyles,\n\t\t\t\tios: textInputIOSStyle,\n\t\t\t} ),\n\t\t\t{\n\t\t\t\twidth: 50 * fontScale,\n\t\t\t},\n\t\t];\n\n\t\treturn (\n\t\t\t<TouchableWithoutFeedback\n\t\t\t\tonPress={ this.onInputFocus }\n\t\t\t\taccessible={ false }\n\t\t\t>\n\t\t\t\t<View\n\t\t\t\t\tstyle={ [\n\t\t\t\t\t\tstyles.textInputContainer,\n\t\t\t\t\t\tisIOS && inputBorderStyles,\n\t\t\t\t\t] }\n\t\t\t\t\taccessible={ false }\n\t\t\t\t>\n\t\t\t\t\t{ isIOS || hasFocus ? (\n\t\t\t\t\t\t<TextInput\n\t\t\t\t\t\t\taccessibilityLabel={ label }\n\t\t\t\t\t\t\tref={ ( c ) => ( this._valueTextInput = c ) }\n\t\t\t\t\t\t\tstyle={ valueFinalStyle }\n\t\t\t\t\t\t\tonChangeText={ this.onChangeText }\n\t\t\t\t\t\t\tonSubmitEditing={ this.onSubmitEditing }\n\t\t\t\t\t\t\tonFocus={ this.onInputFocus }\n\t\t\t\t\t\t\tonBlur={ this.onInputBlur }\n\t\t\t\t\t\t\tkeyboardType=\"numeric\"\n\t\t\t\t\t\t\treturnKeyType=\"done\"\n\t\t\t\t\t\t\tnumberOfLines={ 1 }\n\t\t\t\t\t\t\tdefaultValue={ `${ inputValue }` }\n\t\t\t\t\t\t\tvalue={ inputValue.toString() }\n\t\t\t\t\t\t\tpointerEvents={ hasFocus ? 'auto' : 'none' }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\tstyle={ valueFinalStyle }\n\t\t\t\t\t\t\tnumberOfLines={ 1 }\n\t\t\t\t\t\t\tellipsizeMode=\"clip\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ inputValue }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t) }\n\t\t\t\t\t{ children }\n\t\t\t\t</View>\n\t\t\t</TouchableWithoutFeedback>\n\t\t);\n\t}\n}\n\nexport default withPreferredColorScheme( RangeTextInput );\n"]}
+{"version":3,"sources":["@wordpress/components/src/mobile/bottom-sheet/range-text-input.native.js"],"names":["isIOS","Platform","OS","RangeTextInput","Component","constructor","props","announceCurrentValue","bind","onInputFocus","onInputBlur","handleChangePixelRatio","onSubmitEditing","onChangeText","value","defaultValue","min","decimalNum","initialValue","fontScale","getFontScale","state","inputValue","controlValue","hasFocus","componentDidMount","AppState","addEventListener","componentWillUnmount","removeEventListener","clearTimeout","timeoutAnnounceValue","componentDidUpdate","prevProps","prevState","setState","validValue","validateInput","_valueTextInput","focus","PixelRatio","nextAppState","text","max","result","Math","updateValue","onChange","textValue","replace","nativeEvent","isNaN","Number","announcement","AccessibilityInfo","announceForAccessibility","render","getStylesFromColorScheme","children","label","textInputStyle","styles","textInput","textInputDark","textInputIOSStyle","textInputIOS","textInputIOSDark","inputBorderStyles","borderStyles","borderStyle","isSelected","valueFinalStyle","select","android","ios","width","borderRightWidth","textInputContainer","c","toString"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tAccessibilityInfo,\n\tView,\n\tTextInput,\n\tPixelRatio,\n\tAppState,\n\tPlatform,\n\tText,\n\tTouchableWithoutFeedback,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { withPreferredColorScheme } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { toFixed, removeNonDigit } from '../utils';\nimport styles from './styles.scss';\nimport borderStyles from './borderStyles.scss';\n\nconst isIOS = Platform.OS === 'ios';\n\nclass RangeTextInput extends Component {\n\tconstructor( props ) {\n\t\tsuper( props );\n\n\t\tthis.announceCurrentValue = this.announceCurrentValue.bind( this );\n\t\tthis.onInputFocus = this.onInputFocus.bind( this );\n\t\tthis.onInputBlur = this.onInputBlur.bind( this );\n\t\tthis.handleChangePixelRatio = this.handleChangePixelRatio.bind( this );\n\t\tthis.onSubmitEditing = this.onSubmitEditing.bind( this );\n\t\tthis.onChangeText = this.onChangeText.bind( this );\n\n\t\tconst { value, defaultValue, min, decimalNum } = props;\n\t\tconst initialValue = toFixed(\n\t\t\tvalue || defaultValue || min,\n\t\t\tdecimalNum\n\t\t);\n\n\t\tconst fontScale = this.getFontScale();\n\n\t\tthis.state = {\n\t\t\tfontScale,\n\t\t\tinputValue: initialValue,\n\t\t\tcontrolValue: initialValue,\n\t\t\thasFocus: false,\n\t\t};\n\t}\n\n\tcomponentDidMount() {\n\t\tAppState.addEventListener( 'change', this.handleChangePixelRatio );\n\t}\n\n\tcomponentWillUnmount() {\n\t\tAppState.removeEventListener( 'change', this.handleChangePixelRatio );\n\t\tclearTimeout( this.timeoutAnnounceValue );\n\t}\n\n\tcomponentDidUpdate( prevProps, prevState ) {\n\t\tconst { value } = this.props;\n\t\tconst { hasFocus, inputValue } = this.state;\n\n\t\tif ( prevProps.value !== value ) {\n\t\t\tthis.setState( { inputValue: value } );\n\t\t}\n\n\t\tif ( prevState.hasFocus !== hasFocus ) {\n\t\t\tconst validValue = this.validateInput( inputValue );\n\t\t\tthis.setState( { inputValue: validValue } );\n\t\t}\n\n\t\tif ( ! prevState.hasFocus && hasFocus ) {\n\t\t\tthis._valueTextInput.focus();\n\t\t}\n\t}\n\n\tgetFontScale() {\n\t\treturn PixelRatio.getFontScale() < 1 ? 1 : PixelRatio.getFontScale();\n\t}\n\n\thandleChangePixelRatio( nextAppState ) {\n\t\tif ( nextAppState === 'active' ) {\n\t\t\tthis.setState( { fontScale: this.getFontScale() } );\n\t\t}\n\t}\n\n\tonInputFocus() {\n\t\tthis.setState( {\n\t\t\thasFocus: true,\n\t\t} );\n\t}\n\n\tonInputBlur() {\n\t\tconst { inputValue } = this.state;\n\t\tthis.onChangeText( `${ inputValue }` );\n\t\tthis.setState( {\n\t\t\thasFocus: false,\n\t\t} );\n\t}\n\n\tvalidateInput( text ) {\n\t\tconst { min, max, decimalNum } = this.props;\n\t\tlet result = min;\n\t\tif ( ! text ) {\n\t\t\treturn min;\n\t\t}\n\n\t\tif ( typeof text === 'number' ) {\n\t\t\tresult = Math.max( text, min );\n\t\t\treturn max ? Math.min( result, max ) : result;\n\t\t}\n\n\t\tresult = Math.max( removeNonDigit( text, decimalNum ), min );\n\t\treturn max ? Math.min( result, max ) : result;\n\t}\n\n\tupdateValue( value ) {\n\t\tconst { onChange } = this.props;\n\t\tconst validValue = this.validateInput( value );\n\n\t\tthis.announceCurrentValue( `${ validValue }` );\n\n\t\tonChange( validValue );\n\t}\n\n\tonChangeText( textValue ) {\n\t\tconst { decimalNum } = this.props;\n\t\tconst inputValue = removeNonDigit( textValue, decimalNum );\n\n\t\ttextValue = inputValue.replace( ',', '.' );\n\t\ttextValue = toFixed( textValue, decimalNum );\n\t\tconst value = this.validateInput( textValue );\n\t\tthis.setState( {\n\t\t\tinputValue,\n\t\t\tcontrolValue: value,\n\t\t} );\n\t\tthis.updateValue( value );\n\t}\n\n\tonSubmitEditing( { nativeEvent: { text } } ) {\n\t\tconst { decimalNum } = this.props;\n\t\tconst { inputValue } = this.state;\n\n\t\tif ( ! isNaN( Number( text ) ) ) {\n\t\t\ttext = toFixed( text.replace( ',', '.' ), decimalNum );\n\t\t\tconst validValue = this.validateInput( text );\n\n\t\t\tif ( inputValue !== validValue ) {\n\t\t\t\tthis.setState( { inputValue: validValue } );\n\t\t\t\tthis.announceCurrentValue( `${ validValue }` );\n\t\t\t\tthis.props.onChange( validValue );\n\t\t\t}\n\t\t}\n\t}\n\n\tannounceCurrentValue( value ) {\n\t\t/* translators: %s: current cell value. */\n\t\tconst announcement = sprintf( __( 'Current value is %s' ), value );\n\t\tAccessibilityInfo.announceForAccessibility( announcement );\n\t}\n\n\trender() {\n\t\tconst { getStylesFromColorScheme, children, label } = this.props;\n\t\tconst { fontScale, inputValue, hasFocus } = this.state;\n\n\t\tconst textInputStyle = getStylesFromColorScheme(\n\t\t\tstyles.textInput,\n\t\t\tstyles.textInputDark\n\t\t);\n\n\t\tconst textInputIOSStyle = getStylesFromColorScheme(\n\t\t\tstyles.textInputIOS,\n\t\t\tstyles.textInputIOSDark\n\t\t);\n\n\t\tconst inputBorderStyles = [\n\t\t\ttextInputStyle,\n\t\t\tborderStyles.borderStyle,\n\t\t\thasFocus && borderStyles.isSelected,\n\t\t];\n\n\t\tconst valueFinalStyle = [\n\t\t\tPlatform.select( {\n\t\t\t\tandroid: inputBorderStyles,\n\t\t\t\tios: textInputIOSStyle,\n\t\t\t} ),\n\t\t\t{\n\t\t\t\twidth: 50 * fontScale,\n\t\t\t\tborderRightWidth: children ? 1 : 0,\n\t\t\t},\n\t\t];\n\n\t\treturn (\n\t\t\t<TouchableWithoutFeedback\n\t\t\t\tonPress={ this.onInputFocus }\n\t\t\t\taccessible={ false }\n\t\t\t>\n\t\t\t\t<View\n\t\t\t\t\tstyle={ [\n\t\t\t\t\t\tstyles.textInputContainer,\n\t\t\t\t\t\tisIOS && inputBorderStyles,\n\t\t\t\t\t] }\n\t\t\t\t\taccessible={ false }\n\t\t\t\t>\n\t\t\t\t\t{ isIOS || hasFocus ? (\n\t\t\t\t\t\t<TextInput\n\t\t\t\t\t\t\taccessibilityLabel={ label }\n\t\t\t\t\t\t\tref={ ( c ) => ( this._valueTextInput = c ) }\n\t\t\t\t\t\t\tstyle={ valueFinalStyle }\n\t\t\t\t\t\t\tonChangeText={ this.onChangeText }\n\t\t\t\t\t\t\tonSubmitEditing={ this.onSubmitEditing }\n\t\t\t\t\t\t\tonFocus={ this.onInputFocus }\n\t\t\t\t\t\t\tonBlur={ this.onInputBlur }\n\t\t\t\t\t\t\tkeyboardType=\"numeric\"\n\t\t\t\t\t\t\treturnKeyType=\"done\"\n\t\t\t\t\t\t\tnumberOfLines={ 1 }\n\t\t\t\t\t\t\tdefaultValue={ `${ inputValue }` }\n\t\t\t\t\t\t\tvalue={ inputValue.toString() }\n\t\t\t\t\t\t\tpointerEvents={ hasFocus ? 'auto' : 'none' }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\tstyle={ valueFinalStyle }\n\t\t\t\t\t\t\tnumberOfLines={ 1 }\n\t\t\t\t\t\t\tellipsizeMode=\"clip\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ inputValue }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t) }\n\t\t\t\t\t{ children }\n\t\t\t\t</View>\n\t\t\t</TouchableWithoutFeedback>\n\t\t);\n\t}\n}\n\nexport default withPreferredColorScheme( RangeTextInput );\n"]}

package/build/mobile/bottom-sheet/stepper-cell/stepper.ios.js

@@ -53,7 +53,7 @@ function Stepper({
       opacity: 0.4
     } : null]
   }, (0, _element.createElement)(_icons.Icon, {
-    icon: _icons.minus,
+    icon: _icons.reset,
     size: 24,
     color: buttonStyle.color
   })), (0, _element.createElement)(_reactNative.TouchableOpacity, {

package/build/mobile/bottom-sheet/stepper-cell/stepper.ios.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/mobile/bottom-sheet/stepper-cell/stepper.ios.js"],"names":["Stepper","getStylesFromColorScheme","isMaxValue","isMinValue","onPressInDecrement","onPressInIncrement","onPressOut","value","children","shouldDisplayTextInput","valueStyle","styles","valueTextDark","buttonStyle","button","buttonDark","container","opacity","minus","color","plus"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAGA,SAASA,OAAT,CAAkB;AACjBC,EAAAA,wBADiB;AAEjBC,EAAAA,UAFiB;AAGjBC,EAAAA,UAHiB;AAIjBC,EAAAA,kBAJiB;AAKjBC,EAAAA,kBALiB;AAMjBC,EAAAA,UANiB;AAOjBC,EAAAA,KAPiB;AAQjBC,EAAAA,QARiB;AASjBC,EAAAA;AATiB,CAAlB,EAUI;AACH,QAAMC,UAAU,GAAGT,wBAAwB,CAC1CU,eAAOJ,KADmC,EAE1CI,eAAOC,aAFmC,CAA3C;AAIA,QAAMC,WAAW,GAAGZ,wBAAwB,CAC3CU,eAAOG,MADoC,EAE3CH,eAAOI,UAFoC,CAA5C;AAKA,SACC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGJ,eAAOK;AAArB,KACG,CAAEP,sBAAF,IACD,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGC;AAAd,KAA6BH,KAA7B,CAFF,EAIGC,QAJH,EAKC,4BAAC,6BAAD;AACC,IAAA,QAAQ,EAAGL,UADZ;AAEC,IAAA,SAAS,EAAGC,kBAFb;AAGC,IAAA,UAAU,EAAGE,UAHd;AAIC,IAAA,KAAK,EAAG,CAAEO,WAAF,EAAeV,UAAU,GAAG;AAAEc,MAAAA,OAAO,EAAE;AAAX,KAAH,GAAsB,IAA/C;AAJT,KAMC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGC,YAAb;AAAqB,IAAA,IAAI,EAAG,EAA5B;AAAiC,IAAA,KAAK,EAAGL,WAAW,CAACM;AAArD,IAND,CALD,EAaC,4BAAC,6BAAD;AACC,IAAA,MAAM,EAAG,WADV;AAEC,IAAA,QAAQ,EAAGjB,UAFZ;AAGC,IAAA,SAAS,EAAGG,kBAHb;AAIC,IAAA,UAAU,EAAGC,UAJd;AAKC,IAAA,KAAK,EAAG,CAAEO,WAAF,EAAeX,UAAU,GAAG;AAAEe,MAAAA,OAAO,EAAE;AAAX,KAAH,GAAsB,IAA/C;AALT,KAOC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGG,WAAb;AAAoB,IAAA,IAAI,EAAG,EAA3B;AAAgC,IAAA,KAAK,EAAGP,WAAW,CAACM;AAApD,IAPD,CAbD,CADD;AAyBA;;eAEc,uCAA0BnB,OAA1B,C","sourcesContent":["/**\n * External dependencies\n */\nimport { Text, TouchableOpacity, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { withPreferredColorScheme } from '@wordpress/compose';\nimport { Icon, minus, plus } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nfunction Stepper( {\n\tgetStylesFromColorScheme,\n\tisMaxValue,\n\tisMinValue,\n\tonPressInDecrement,\n\tonPressInIncrement,\n\tonPressOut,\n\tvalue,\n\tchildren,\n\tshouldDisplayTextInput,\n} ) {\n\tconst valueStyle = getStylesFromColorScheme(\n\t\tstyles.value,\n\t\tstyles.valueTextDark\n\t);\n\tconst buttonStyle = getStylesFromColorScheme(\n\t\tstyles.button,\n\t\tstyles.buttonDark\n\t);\n\n\treturn (\n\t\t<View style={ styles.container }>\n\t\t\t{ ! shouldDisplayTextInput && (\n\t\t\t\t<Text style={ valueStyle }>{ value }</Text>\n\t\t\t) }\n\t\t\t{ children }\n\t\t\t<TouchableOpacity\n\t\t\t\tdisabled={ isMinValue }\n\t\t\t\tonPressIn={ onPressInDecrement }\n\t\t\t\tonPressOut={ onPressOut }\n\t\t\t\tstyle={ [ buttonStyle, isMinValue ? { opacity: 0.4 } : null ] }\n\t\t\t>\n\t\t\t\t<Icon icon={ minus } size={ 24 } color={ buttonStyle.color } />\n\t\t\t</TouchableOpacity>\n\t\t\t<TouchableOpacity\n\t\t\t\ttestID={ 'Increment' }\n\t\t\t\tdisabled={ isMaxValue }\n\t\t\t\tonPressIn={ onPressInIncrement }\n\t\t\t\tonPressOut={ onPressOut }\n\t\t\t\tstyle={ [ buttonStyle, isMaxValue ? { opacity: 0.4 } : null ] }\n\t\t\t>\n\t\t\t\t<Icon icon={ plus } size={ 24 } color={ buttonStyle.color } />\n\t\t\t</TouchableOpacity>\n\t\t</View>\n\t);\n}\n\nexport default withPreferredColorScheme( Stepper );\n"]}
+{"version":3,"sources":["@wordpress/components/src/mobile/bottom-sheet/stepper-cell/stepper.ios.js"],"names":["Stepper","getStylesFromColorScheme","isMaxValue","isMinValue","onPressInDecrement","onPressInIncrement","onPressOut","value","children","shouldDisplayTextInput","valueStyle","styles","valueTextDark","buttonStyle","button","buttonDark","container","opacity","reset","color","plus"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAGA,SAASA,OAAT,CAAkB;AACjBC,EAAAA,wBADiB;AAEjBC,EAAAA,UAFiB;AAGjBC,EAAAA,UAHiB;AAIjBC,EAAAA,kBAJiB;AAKjBC,EAAAA,kBALiB;AAMjBC,EAAAA,UANiB;AAOjBC,EAAAA,KAPiB;AAQjBC,EAAAA,QARiB;AASjBC,EAAAA;AATiB,CAAlB,EAUI;AACH,QAAMC,UAAU,GAAGT,wBAAwB,CAC1CU,eAAOJ,KADmC,EAE1CI,eAAOC,aAFmC,CAA3C;AAIA,QAAMC,WAAW,GAAGZ,wBAAwB,CAC3CU,eAAOG,MADoC,EAE3CH,eAAOI,UAFoC,CAA5C;AAKA,SACC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGJ,eAAOK;AAArB,KACG,CAAEP,sBAAF,IACD,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGC;AAAd,KAA6BH,KAA7B,CAFF,EAIGC,QAJH,EAKC,4BAAC,6BAAD;AACC,IAAA,QAAQ,EAAGL,UADZ;AAEC,IAAA,SAAS,EAAGC,kBAFb;AAGC,IAAA,UAAU,EAAGE,UAHd;AAIC,IAAA,KAAK,EAAG,CAAEO,WAAF,EAAeV,UAAU,GAAG;AAAEc,MAAAA,OAAO,EAAE;AAAX,KAAH,GAAsB,IAA/C;AAJT,KAMC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGC,YAAb;AAAqB,IAAA,IAAI,EAAG,EAA5B;AAAiC,IAAA,KAAK,EAAGL,WAAW,CAACM;AAArD,IAND,CALD,EAaC,4BAAC,6BAAD;AACC,IAAA,MAAM,EAAG,WADV;AAEC,IAAA,QAAQ,EAAGjB,UAFZ;AAGC,IAAA,SAAS,EAAGG,kBAHb;AAIC,IAAA,UAAU,EAAGC,UAJd;AAKC,IAAA,KAAK,EAAG,CAAEO,WAAF,EAAeX,UAAU,GAAG;AAAEe,MAAAA,OAAO,EAAE;AAAX,KAAH,GAAsB,IAA/C;AALT,KAOC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGG,WAAb;AAAoB,IAAA,IAAI,EAAG,EAA3B;AAAgC,IAAA,KAAK,EAAGP,WAAW,CAACM;AAApD,IAPD,CAbD,CADD;AAyBA;;eAEc,uCAA0BnB,OAA1B,C","sourcesContent":["/**\n * External dependencies\n */\nimport { Text, TouchableOpacity, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { withPreferredColorScheme } from '@wordpress/compose';\nimport { Icon, plus, reset } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nfunction Stepper( {\n\tgetStylesFromColorScheme,\n\tisMaxValue,\n\tisMinValue,\n\tonPressInDecrement,\n\tonPressInIncrement,\n\tonPressOut,\n\tvalue,\n\tchildren,\n\tshouldDisplayTextInput,\n} ) {\n\tconst valueStyle = getStylesFromColorScheme(\n\t\tstyles.value,\n\t\tstyles.valueTextDark\n\t);\n\tconst buttonStyle = getStylesFromColorScheme(\n\t\tstyles.button,\n\t\tstyles.buttonDark\n\t);\n\n\treturn (\n\t\t<View style={ styles.container }>\n\t\t\t{ ! shouldDisplayTextInput && (\n\t\t\t\t<Text style={ valueStyle }>{ value }</Text>\n\t\t\t) }\n\t\t\t{ children }\n\t\t\t<TouchableOpacity\n\t\t\t\tdisabled={ isMinValue }\n\t\t\t\tonPressIn={ onPressInDecrement }\n\t\t\t\tonPressOut={ onPressOut }\n\t\t\t\tstyle={ [ buttonStyle, isMinValue ? { opacity: 0.4 } : null ] }\n\t\t\t>\n\t\t\t\t<Icon icon={ reset } size={ 24 } color={ buttonStyle.color } />\n\t\t\t</TouchableOpacity>\n\t\t\t<TouchableOpacity\n\t\t\t\ttestID={ 'Increment' }\n\t\t\t\tdisabled={ isMaxValue }\n\t\t\t\tonPressIn={ onPressInIncrement }\n\t\t\t\tonPressOut={ onPressOut }\n\t\t\t\tstyle={ [ buttonStyle, isMaxValue ? { opacity: 0.4 } : null ] }\n\t\t\t>\n\t\t\t\t<Icon icon={ plus } size={ 24 } color={ buttonStyle.color } />\n\t\t\t</TouchableOpacity>\n\t\t</View>\n\t);\n}\n\nexport default withPreferredColorScheme( Stepper );\n"]}

package/build/mobile/bottom-sheet-select-control/index.native.js

@@ -76,10 +76,9 @@ const BottomSheetSelectControl = ({
       icon: _icons.chevronRight
     })),
     showSheet: showSubSheet
-  }, (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.BottomSheet.NavigationHeader, {
-    screen: label,
-    leftButtonOnPress: goBack
-  }), (0, _element.createElement)(_reactNative.View, {
+  }, (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.BottomSheet.NavBar, null, (0, _element.createElement)(_components.BottomSheet.NavBar.BackButton, {
+    onPress: goBack
+  }), (0, _element.createElement)(_components.BottomSheet.NavBar.Heading, null, label)), (0, _element.createElement)(_reactNative.View, {
     style: _style.default.selectControl
   }, items.map((item, index) => (0, _element.createElement)(_components.BottomSheet.Cell, {
     customActionButton: true,

package/build/mobile/bottom-sheet-select-control/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/mobile/bottom-sheet-select-control/index.native.js"],"names":["BottomSheetSelectControl","label","icon","options","items","onChange","value","selectedValue","showSubSheet","setShowSubSheet","navigation","onChangeValue","goBack","selectedOption","find","option","openSubSheet","navigate","BottomSheet","SubSheet","screenName","chevronRight","styles","selectControl","map","item","index","check"],"mappings":";;;;;;;;;AASA;;AANA;;AAKA;;AAEA;;AACA;;AACA;;AAIA;;AAhBA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;AAGA,MAAMA,wBAAwB,GAAG,CAAE;AAClCC,EAAAA,KADkC;AAElCC,EAAAA,IAFkC;AAGlCC,EAAAA,OAAO,EAAEC,KAHyB;AAIlCC,EAAAA,QAJkC;AAKlCC,EAAAA,KAAK,EAAEC;AAL2B,CAAF,KAM1B;AACN,QAAM,CAAEC,YAAF,EAAgBC,eAAhB,IAAoC,uBAAU,KAAV,CAA1C;AACA,QAAMC,UAAU,GAAG,4BAAnB;;AAEA,QAAMC,aAAa,GAAKL,KAAF,IAAa;AAClC,WAAO,MAAM;AACZM,MAAAA,MAAM;AACNP,MAAAA,QAAQ,CAAEC,KAAF,CAAR;AACA,KAHD;AAIA,GALD;;AAOA,QAAMO,cAAc,GAAGT,KAAK,CAACU,IAAN,CACpBC,MAAF,IAAcA,MAAM,CAACT,KAAP,KAAiBC,aADT,CAAvB;;AAIA,QAAMK,MAAM,GAAG,MAAM;AACpBH,IAAAA,eAAe,CAAE,KAAF,CAAf;AACAC,IAAAA,UAAU,CAACE,MAAX;AACA,GAHD;;AAKA,QAAMI,YAAY,GAAG,MAAM;AAC1BN,IAAAA,UAAU,CAACO,QAAX,CAAqBC,wBAAYC,QAAZ,CAAqBC,UAA1C;AACAX,IAAAA,eAAe,CAAE,IAAF,CAAf;AACA,GAHD;;AAKA,SACC,4BAAC,uBAAD,CAAa,QAAb;AACC,IAAA,gBAAgB,EACf,4BAAC,uBAAD,CAAa,IAAb;AACC,MAAA,KAAK,EAAGR,KADT;AAEC,MAAA,aAAa,EAAC,MAFf;AAGC,MAAA,IAAI,EAAGC,IAHR;AAIC,MAAA,KAAK,EAAGW,cAAc,CAACZ,KAJxB;AAKC,MAAA,OAAO,EAAGe,YALX;AAMC,MAAA,iBAAiB,EAAG,QANrB;AAOC,MAAA,kBAAkB,EAAGH,cAAc,CAACZ,KAPrC;AAQC,MAAA,iBAAiB,EAAG,oBACnB;AACA,oBAAI,wBAAJ,CAFmB,EAGnBY,cAAc,CAACZ,KAHI;AARrB,OAcC,4BAAC,WAAD;AAAM,MAAA,IAAI,EAAGoB;AAAb,MAdD,CAFF;AAmBC,IAAA,SAAS,EAAGb;AAnBb,KAqBC,qDACC,4BAAC,uBAAD,CAAa,gBAAb;AACC,IAAA,MAAM,EAAGP,KADV;AAEC,IAAA,iBAAiB,EAAGW;AAFrB,IADD,EAKC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGU,eAAOC;AAArB,KACGnB,KAAK,CAACoB,GAAN,CAAW,CAAEC,IAAF,EAAQC,KAAR,KACZ,4BAAC,uBAAD,CAAa,IAAb;AACC,IAAA,kBAAkB,MADnB;AAEC,IAAA,aAAa,EAAC,MAFf;AAGC,IAAA,KAAK,EAAGD,IAAI,CAACxB,KAHd;AAIC,IAAA,OAAO,EAAGU,aAAa,CAAEc,IAAI,CAACnB,KAAP,CAJxB;AAKC,IAAA,SAAS,EAAG,IALb;AAMC,IAAA,GAAG,EAAGoB,KANP;AAOC,IAAA,iBAAiB,EAAG,QAPrB;AAQC,IAAA,kBAAkB,EACjBD,IAAI,CAACnB,KAAL,KAAeC,aAAf,GACG,oBACA;AACA,kBAAI,cAAJ,CAFA,EAGAkB,IAAI,CAACxB,KAHL,CADH,GAMGwB,IAAI,CAACxB,KAfV;AAiBC,IAAA,iBAAiB,EAAG,cAAI,sBAAJ;AAjBrB,KAmBGwB,IAAI,CAACnB,KAAL,KAAeC,aAAf,IACD,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGoB;AAAb,IApBF,CADC,CADH,CALD,CArBD,CADD;AAyDA,CAxFD;;eA0Fe3B,wB","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useNavigation } from '@react-navigation/native';\nimport { useState } from '@wordpress/element';\nimport { Icon, chevronRight, check } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { BottomSheet } from '@wordpress/components';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst BottomSheetSelectControl = ( {\n\tlabel,\n\ticon,\n\toptions: items,\n\tonChange,\n\tvalue: selectedValue,\n} ) => {\n\tconst [ showSubSheet, setShowSubSheet ] = useState( false );\n\tconst navigation = useNavigation();\n\n\tconst onChangeValue = ( value ) => {\n\t\treturn () => {\n\t\t\tgoBack();\n\t\t\tonChange( value );\n\t\t};\n\t};\n\n\tconst selectedOption = items.find(\n\t\t( option ) => option.value === selectedValue\n\t);\n\n\tconst goBack = () => {\n\t\tsetShowSubSheet( false );\n\t\tnavigation.goBack();\n\t};\n\n\tconst openSubSheet = () => {\n\t\tnavigation.navigate( BottomSheet.SubSheet.screenName );\n\t\tsetShowSubSheet( true );\n\t};\n\n\treturn (\n\t\t<BottomSheet.SubSheet\n\t\t\tnavigationButton={\n\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\ticon={ icon }\n\t\t\t\t\tvalue={ selectedOption.label }\n\t\t\t\t\tonPress={ openSubSheet }\n\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\taccessibilityLabel={ selectedOption.label }\n\t\t\t\t\taccessibilityHint={ sprintf(\n\t\t\t\t\t\t// translators: %s: Select control button label e.g. \"Button width\"\n\t\t\t\t\t\t__( 'Navigates to select %s' ),\n\t\t\t\t\t\tselectedOption.label\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={ chevronRight }></Icon>\n\t\t\t\t</BottomSheet.Cell>\n\t\t\t}\n\t\t\tshowSheet={ showSubSheet }\n\t\t>\n\t\t\t<>\n\t\t\t\t<BottomSheet.NavigationHeader\n\t\t\t\t\tscreen={ label }\n\t\t\t\t\tleftButtonOnPress={ goBack }\n\t\t\t\t/>\n\t\t\t\t<View style={ styles.selectControl }>\n\t\t\t\t\t{ items.map( ( item, index ) => (\n\t\t\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\t\t\tcustomActionButton\n\t\t\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\t\t\tlabel={ item.label }\n\t\t\t\t\t\t\tonPress={ onChangeValue( item.value ) }\n\t\t\t\t\t\t\tleftAlign={ true }\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\taccessibilityLabel={\n\t\t\t\t\t\t\t\titem.value === selectedValue\n\t\t\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t\t\t// translators: %s: Select control option value e.g: \"Auto, 25%\".\n\t\t\t\t\t\t\t\t\t\t\t__( 'Selected: %s' ),\n\t\t\t\t\t\t\t\t\t\t\titem.label\n\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t: item.label\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\taccessibilityHint={ __( 'Double tap to select' ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ item.value === selectedValue && (\n\t\t\t\t\t\t\t\t<Icon icon={ check }></Icon>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</BottomSheet.Cell>\n\t\t\t\t\t) ) }\n\t\t\t\t</View>\n\t\t\t</>\n\t\t</BottomSheet.SubSheet>\n\t);\n};\n\nexport default BottomSheetSelectControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/mobile/bottom-sheet-select-control/index.native.js"],"names":["BottomSheetSelectControl","label","icon","options","items","onChange","value","selectedValue","showSubSheet","setShowSubSheet","navigation","onChangeValue","goBack","selectedOption","find","option","openSubSheet","navigate","BottomSheet","SubSheet","screenName","chevronRight","styles","selectControl","map","item","index","check"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useNavigation } from '@react-navigation/native';\nimport { useState } from '@wordpress/element';\nimport { Icon, chevronRight, check } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { BottomSheet } from '@wordpress/components';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst BottomSheetSelectControl = ( {\n\tlabel,\n\ticon,\n\toptions: items,\n\tonChange,\n\tvalue: selectedValue,\n} ) => {\n\tconst [ showSubSheet, setShowSubSheet ] = useState( false );\n\tconst navigation = useNavigation();\n\n\tconst onChangeValue = ( value ) => {\n\t\treturn () => {\n\t\t\tgoBack();\n\t\t\tonChange( value );\n\t\t};\n\t};\n\n\tconst selectedOption = items.find(\n\t\t( option ) => option.value === selectedValue\n\t);\n\n\tconst goBack = () => {\n\t\tsetShowSubSheet( false );\n\t\tnavigation.goBack();\n\t};\n\n\tconst openSubSheet = () => {\n\t\tnavigation.navigate( BottomSheet.SubSheet.screenName );\n\t\tsetShowSubSheet( true );\n\t};\n\n\treturn (\n\t\t<BottomSheet.SubSheet\n\t\t\tnavigationButton={\n\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\ticon={ icon }\n\t\t\t\t\tvalue={ selectedOption.label }\n\t\t\t\t\tonPress={ openSubSheet }\n\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\taccessibilityLabel={ selectedOption.label }\n\t\t\t\t\taccessibilityHint={ sprintf(\n\t\t\t\t\t\t// translators: %s: Select control button label e.g. \"Button width\"\n\t\t\t\t\t\t__( 'Navigates to select %s' ),\n\t\t\t\t\t\tselectedOption.label\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={ chevronRight }></Icon>\n\t\t\t\t</BottomSheet.Cell>\n\t\t\t}\n\t\t\tshowSheet={ showSubSheet }\n\t\t>\n\t\t\t<>\n\t\t\t\t<BottomSheet.NavBar>\n\t\t\t\t\t<BottomSheet.NavBar.BackButton onPress={ goBack } />\n\t\t\t\t\t<BottomSheet.NavBar.Heading>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</BottomSheet.NavBar.Heading>\n\t\t\t\t</BottomSheet.NavBar>\n\t\t\t\t<View style={ styles.selectControl }>\n\t\t\t\t\t{ items.map( ( item, index ) => (\n\t\t\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\t\t\tcustomActionButton\n\t\t\t\t\t\t\tseparatorType=\"none\"\n\t\t\t\t\t\t\tlabel={ item.label }\n\t\t\t\t\t\t\tonPress={ onChangeValue( item.value ) }\n\t\t\t\t\t\t\tleftAlign={ true }\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\taccessibilityLabel={\n\t\t\t\t\t\t\t\titem.value === selectedValue\n\t\t\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t\t\t// translators: %s: Select control option value e.g: \"Auto, 25%\".\n\t\t\t\t\t\t\t\t\t\t\t__( 'Selected: %s' ),\n\t\t\t\t\t\t\t\t\t\t\titem.label\n\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t: item.label\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\taccessibilityHint={ __( 'Double tap to select' ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ item.value === selectedValue && (\n\t\t\t\t\t\t\t\t<Icon icon={ check }></Icon>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</BottomSheet.Cell>\n\t\t\t\t\t) ) }\n\t\t\t\t</View>\n\t\t\t</>\n\t\t</BottomSheet.SubSheet>\n\t);\n};\n\nexport default BottomSheetSelectControl;\n"]}

package/build/mobile/bottom-sheet-text-control/index.native.js

@@ -53,7 +53,6 @@ const BottomSheetTextControl = ({
     setShowSubSheet(true);
   };
 
-  const [value, onChangeText] = (0, _element.useState)(initialValue);
   const horizontalBorderStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.horizontalBorder, _styles.default.horizontalBorderDark);
   const textEditorStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.textEditor, _styles.default.textEditorDark);
   return (0, _element.createElement)(_components.BottomSheet.SubSheet, {
@@ -67,16 +66,14 @@ const BottomSheetTextControl = ({
       icon: _icons.chevronRight
     })),
     showSheet: showSubSheet
-  }, (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.BottomSheet.NavigationHeader, {
-    screen: label,
-    leftButtonOnPress: goBack
-  }), (0, _element.createElement)(_components.PanelBody, {
+  }, (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.BottomSheet.NavBar, null, (0, _element.createElement)(_components.BottomSheet.NavBar.BackButton, {
+    onPress: goBack
+  }), (0, _element.createElement)(_components.BottomSheet.NavBar.Heading, null, label)), (0, _element.createElement)(_components.PanelBody, {
     style: horizontalBorderStyle
   }, (0, _element.createElement)(_reactNative.TextInput, {
     label: label,
-    onChangeText: text => onChangeText(text),
-    onChange: onChange(value),
-    value: value,
+    onChangeText: text => onChange(text),
+    defaultValue: initialValue,
     multiline: true,
     placeholder: placeholder,
     placeholderTextColor: '#87a6bc',

package/build/mobile/bottom-sheet-text-control/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/mobile/bottom-sheet-text-control/index.native.js"],"names":["BottomSheetTextControl","initialValue","onChange","placeholder","label","icon","footerNote","showSubSheet","setShowSubSheet","navigation","goBack","openSubSheet","navigate","BottomSheet","SubSheet","screenName","value","onChangeText","horizontalBorderStyle","styles","horizontalBorder","horizontalBorderDark","textEditorStyle","textEditor","textEditorDark","chevronRight","text","textFooternote"],"mappings":";;;;;;;;;AASA;;AANA;;AACA;;AAMA;;AACA;;AACA;;AASA;;AArBA;AACA;AACA;;AAIA;AACA;AACA;;AAUA;AACA;AACA;AAGA,MAAMA,sBAAsB,GAAG,CAAE;AAChCC,EAAAA,YADgC;AAEhCC,EAAAA,QAFgC;AAGhCC,EAAAA,WAHgC;AAIhCC,EAAAA,KAJgC;AAKhCC,EAAAA,IALgC;AAMhCC,EAAAA;AANgC,CAAF,KAOxB;AACN,QAAM,CAAEC,YAAF,EAAgBC,eAAhB,IAAoC,uBAAU,KAAV,CAA1C;AACA,QAAMC,UAAU,GAAG,4BAAnB;;AAEA,QAAMC,MAAM,GAAG,MAAM;AACpBF,IAAAA,eAAe,CAAE,KAAF,CAAf;AACAC,IAAAA,UAAU,CAACC,MAAX;AACA,GAHD;;AAKA,QAAMC,YAAY,GAAG,MAAM;AAC1BF,IAAAA,UAAU,CAACG,QAAX,CAAqBC,wBAAYC,QAAZ,CAAqBC,UAA1C;AACAP,IAAAA,eAAe,CAAE,IAAF,CAAf;AACA,GAHD;;AAKA,QAAM,CAAEQ,KAAF,EAASC,YAAT,IAA0B,uBAAUhB,YAAV,CAAhC;AAEA,QAAMiB,qBAAqB,GAAG,2CAC7BC,gBAAOC,gBADsB,EAE7BD,gBAAOE,oBAFsB,CAA9B;AAKA,QAAMC,eAAe,GAAG,2CACvBH,gBAAOI,UADgB,EAEvBJ,gBAAOK,cAFgB,CAAxB;AAKA,SACC,4BAAC,uBAAD,CAAa,QAAb;AACC,IAAA,gBAAgB,EACf,4BAAC,uBAAD,CAAa,IAAb;AACC,MAAA,IAAI,EAAGnB,IADR;AAEC,MAAA,WAAW,EAAGF,WAFf;AAGC,MAAA,KAAK,EAAGC,KAHT;AAIC,MAAA,OAAO,EAAGO,YAJX;AAKC,MAAA,KAAK,EAAGV,YAAY,IAAI;AALzB,OAOC,4BAAC,WAAD;AAAM,MAAA,IAAI,EAAGwB;AAAb,MAPD,CAFF;AAYC,IAAA,SAAS,EAAGlB;AAZb,KAcC,qDACC,4BAAC,uBAAD,CAAa,gBAAb;AACC,IAAA,MAAM,EAAGH,KADV;AAEC,IAAA,iBAAiB,EAAGM;AAFrB,IADD,EAKC,4BAAC,qBAAD;AAAW,IAAA,KAAK,EAAGQ;AAAnB,KACC,4BAAC,sBAAD;AACC,IAAA,KAAK,EAAGd,KADT;AAEC,IAAA,YAAY,EAAKsB,IAAF,IAAYT,YAAY,CAAES,IAAF,CAFxC;AAGC,IAAA,QAAQ,EAAGxB,QAAQ,CAAEc,KAAF,CAHpB;AAIC,IAAA,KAAK,EAAGA,KAJT;AAKC,IAAA,SAAS,EAAG,IALb;AAMC,IAAA,WAAW,EAAGb,WANf;AAOC,IAAA,oBAAoB,EAAG,SAPxB;AAQC,IAAA,KAAK,EAAGmB,eART;AASC,IAAA,iBAAiB,EAAG;AATrB,IADD,CALD,CAdD,EAkCGhB,UAAU,IACX,4BAAC,qBAAD;AAAW,IAAA,KAAK,EAAGa,gBAAOQ;AAA1B,KACC,4BAAC,gCAAD;AACC,IAAA,KAAK,EAAGrB,UADT;AAEC,IAAA,SAAS,EAAC;AAFX,IADD,CAnCF,CADD;AA6CA,CA9ED;;eAgFeN,sB","sourcesContent":["/**\n * External dependencies\n */\nimport { TextInput } from 'react-native';\nimport { useNavigation } from '@react-navigation/native';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { Icon, chevronRight } from '@wordpress/icons';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport {\n\tBottomSheet,\n\tPanelBody,\n\tFooterMessageControl,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport styles from './styles.scss';\n\nconst BottomSheetTextControl = ( {\n\tinitialValue,\n\tonChange,\n\tplaceholder,\n\tlabel,\n\ticon,\n\tfooterNote,\n} ) => {\n\tconst [ showSubSheet, setShowSubSheet ] = useState( false );\n\tconst navigation = useNavigation();\n\n\tconst goBack = () => {\n\t\tsetShowSubSheet( false );\n\t\tnavigation.goBack();\n\t};\n\n\tconst openSubSheet = () => {\n\t\tnavigation.navigate( BottomSheet.SubSheet.screenName );\n\t\tsetShowSubSheet( true );\n\t};\n\n\tconst [ value, onChangeText ] = useState( initialValue );\n\n\tconst horizontalBorderStyle = usePreferredColorSchemeStyle(\n\t\tstyles.horizontalBorder,\n\t\tstyles.horizontalBorderDark\n\t);\n\n\tconst textEditorStyle = usePreferredColorSchemeStyle(\n\t\tstyles.textEditor,\n\t\tstyles.textEditorDark\n\t);\n\n\treturn (\n\t\t<BottomSheet.SubSheet\n\t\t\tnavigationButton={\n\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\ticon={ icon }\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tonPress={ openSubSheet }\n\t\t\t\t\tvalue={ initialValue || '' }\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={ chevronRight }></Icon>\n\t\t\t\t</BottomSheet.Cell>\n\t\t\t}\n\t\t\tshowSheet={ showSubSheet }\n\t\t>\n\t\t\t<>\n\t\t\t\t<BottomSheet.NavigationHeader\n\t\t\t\t\tscreen={ label }\n\t\t\t\t\tleftButtonOnPress={ goBack }\n\t\t\t\t/>\n\t\t\t\t<PanelBody style={ horizontalBorderStyle }>\n\t\t\t\t\t<TextInput\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\tonChangeText={ ( text ) => onChangeText( text ) }\n\t\t\t\t\t\tonChange={ onChange( value ) }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tmultiline={ true }\n\t\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\t\tplaceholderTextColor={ '#87a6bc' }\n\t\t\t\t\t\tstyle={ textEditorStyle }\n\t\t\t\t\t\ttextAlignVertical={ 'top' }\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t</>\n\n\t\t\t{ footerNote && (\n\t\t\t\t<PanelBody style={ styles.textFooternote }>\n\t\t\t\t\t<FooterMessageControl\n\t\t\t\t\t\tlabel={ footerNote }\n\t\t\t\t\t\ttextAlign=\"left\"\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t) }\n\t\t</BottomSheet.SubSheet>\n\t);\n};\n\nexport default BottomSheetTextControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/mobile/bottom-sheet-text-control/index.native.js"],"names":["BottomSheetTextControl","initialValue","onChange","placeholder","label","icon","footerNote","showSubSheet","setShowSubSheet","navigation","goBack","openSubSheet","navigate","BottomSheet","SubSheet","screenName","horizontalBorderStyle","styles","horizontalBorder","horizontalBorderDark","textEditorStyle","textEditor","textEditorDark","chevronRight","text","textFooternote"],"mappings":";;;;;;;;;AASA;;AANA;;AACA;;AAMA;;AACA;;AACA;;AASA;;AArBA;AACA;AACA;;AAIA;AACA;AACA;;AAUA;AACA;AACA;AAGA,MAAMA,sBAAsB,GAAG,CAAE;AAChCC,EAAAA,YADgC;AAEhCC,EAAAA,QAFgC;AAGhCC,EAAAA,WAHgC;AAIhCC,EAAAA,KAJgC;AAKhCC,EAAAA,IALgC;AAMhCC,EAAAA;AANgC,CAAF,KAOxB;AACN,QAAM,CAAEC,YAAF,EAAgBC,eAAhB,IAAoC,uBAAU,KAAV,CAA1C;AACA,QAAMC,UAAU,GAAG,4BAAnB;;AAEA,QAAMC,MAAM,GAAG,MAAM;AACpBF,IAAAA,eAAe,CAAE,KAAF,CAAf;AACAC,IAAAA,UAAU,CAACC,MAAX;AACA,GAHD;;AAKA,QAAMC,YAAY,GAAG,MAAM;AAC1BF,IAAAA,UAAU,CAACG,QAAX,CAAqBC,wBAAYC,QAAZ,CAAqBC,UAA1C;AACAP,IAAAA,eAAe,CAAE,IAAF,CAAf;AACA,GAHD;;AAKA,QAAMQ,qBAAqB,GAAG,2CAC7BC,gBAAOC,gBADsB,EAE7BD,gBAAOE,oBAFsB,CAA9B;AAKA,QAAMC,eAAe,GAAG,2CACvBH,gBAAOI,UADgB,EAEvBJ,gBAAOK,cAFgB,CAAxB;AAKA,SACC,4BAAC,uBAAD,CAAa,QAAb;AACC,IAAA,gBAAgB,EACf,4BAAC,uBAAD,CAAa,IAAb;AACC,MAAA,IAAI,EAAGjB,IADR;AAEC,MAAA,WAAW,EAAGF,WAFf;AAGC,MAAA,KAAK,EAAGC,KAHT;AAIC,MAAA,OAAO,EAAGO,YAJX;AAKC,MAAA,KAAK,EAAGV,YAAY,IAAI;AALzB,OAOC,4BAAC,WAAD;AAAM,MAAA,IAAI,EAAGsB;AAAb,MAPD,CAFF;AAYC,IAAA,SAAS,EAAGhB;AAZb,KAcC,qDACC,4BAAC,uBAAD,CAAa,MAAb,QACC,4BAAC,uBAAD,CAAa,MAAb,CAAoB,UAApB;AAA+B,IAAA,OAAO,EAAGG;AAAzC,IADD,EAEC,4BAAC,uBAAD,CAAa,MAAb,CAAoB,OAApB,QACGN,KADH,CAFD,CADD,EAOC,4BAAC,qBAAD;AAAW,IAAA,KAAK,EAAGY;AAAnB,KACC,4BAAC,sBAAD;AACC,IAAA,KAAK,EAAGZ,KADT;AAEC,IAAA,YAAY,EAAKoB,IAAF,IAAYtB,QAAQ,CAAEsB,IAAF,CAFpC;AAGC,IAAA,YAAY,EAAGvB,YAHhB;AAIC,IAAA,SAAS,EAAG,IAJb;AAKC,IAAA,WAAW,EAAGE,WALf;AAMC,IAAA,oBAAoB,EAAG,SANxB;AAOC,IAAA,KAAK,EAAGiB,eAPT;AAQC,IAAA,iBAAiB,EAAG;AARrB,IADD,CAPD,CAdD,EAmCGd,UAAU,IACX,4BAAC,qBAAD;AAAW,IAAA,KAAK,EAAGW,gBAAOQ;AAA1B,KACC,4BAAC,gCAAD;AACC,IAAA,KAAK,EAAGnB,UADT;AAEC,IAAA,SAAS,EAAC;AAFX,IADD,CApCF,CADD;AA8CA,CA7ED;;eA+EeN,sB","sourcesContent":["/**\n * External dependencies\n */\nimport { TextInput } from 'react-native';\nimport { useNavigation } from '@react-navigation/native';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { Icon, chevronRight } from '@wordpress/icons';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport {\n\tBottomSheet,\n\tPanelBody,\n\tFooterMessageControl,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport styles from './styles.scss';\n\nconst BottomSheetTextControl = ( {\n\tinitialValue,\n\tonChange,\n\tplaceholder,\n\tlabel,\n\ticon,\n\tfooterNote,\n} ) => {\n\tconst [ showSubSheet, setShowSubSheet ] = useState( false );\n\tconst navigation = useNavigation();\n\n\tconst goBack = () => {\n\t\tsetShowSubSheet( false );\n\t\tnavigation.goBack();\n\t};\n\n\tconst openSubSheet = () => {\n\t\tnavigation.navigate( BottomSheet.SubSheet.screenName );\n\t\tsetShowSubSheet( true );\n\t};\n\n\tconst horizontalBorderStyle = usePreferredColorSchemeStyle(\n\t\tstyles.horizontalBorder,\n\t\tstyles.horizontalBorderDark\n\t);\n\n\tconst textEditorStyle = usePreferredColorSchemeStyle(\n\t\tstyles.textEditor,\n\t\tstyles.textEditorDark\n\t);\n\n\treturn (\n\t\t<BottomSheet.SubSheet\n\t\t\tnavigationButton={\n\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\ticon={ icon }\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tonPress={ openSubSheet }\n\t\t\t\t\tvalue={ initialValue || '' }\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={ chevronRight }></Icon>\n\t\t\t\t</BottomSheet.Cell>\n\t\t\t}\n\t\t\tshowSheet={ showSubSheet }\n\t\t>\n\t\t\t<>\n\t\t\t\t<BottomSheet.NavBar>\n\t\t\t\t\t<BottomSheet.NavBar.BackButton onPress={ goBack } />\n\t\t\t\t\t<BottomSheet.NavBar.Heading>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</BottomSheet.NavBar.Heading>\n\t\t\t\t</BottomSheet.NavBar>\n\t\t\t\t<PanelBody style={ horizontalBorderStyle }>\n\t\t\t\t\t<TextInput\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\tonChangeText={ ( text ) => onChange( text ) }\n\t\t\t\t\t\tdefaultValue={ initialValue }\n\t\t\t\t\t\tmultiline={ true }\n\t\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\t\tplaceholderTextColor={ '#87a6bc' }\n\t\t\t\t\t\tstyle={ textEditorStyle }\n\t\t\t\t\t\ttextAlignVertical={ 'top' }\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t</>\n\n\t\t\t{ footerNote && (\n\t\t\t\t<PanelBody style={ styles.textFooternote }>\n\t\t\t\t\t<FooterMessageControl\n\t\t\t\t\t\tlabel={ footerNote }\n\t\t\t\t\t\ttextAlign=\"left\"\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t) }\n\t\t</BottomSheet.SubSheet>\n\t);\n};\n\nexport default BottomSheetTextControl;\n"]}

package/build/mobile/color-settings/gradient-picker-screen.native.js

@@ -17,7 +17,7 @@ var _i18n = require("@wordpress/i18n");
 
 var _customGradientPicker = _interopRequireDefault(require("../../custom-gradient-picker"));
 
-var _navigationHeader = _interopRequireDefault(require("../bottom-sheet/navigation-header"));
+var _navBar = _interopRequireDefault(require("../bottom-sheet/nav-bar"));
 
 /**
  * External dependencies
@@ -38,10 +38,9 @@ const GradientPickerScreen = () => {
     currentValue,
     isGradientColor
   } = route.params;
-  return (0, _element.createElement)(_reactNative.View, null, (0, _element.createElement)(_navigationHeader.default, {
-    screen: (0, _i18n.__)('Customize Gradient'),
-    leftButtonOnPress: navigation.goBack
-  }), (0, _element.createElement)(_customGradientPicker.default, {
+  return (0, _element.createElement)(_reactNative.View, null, (0, _element.createElement)(_navBar.default, null, (0, _element.createElement)(_navBar.default.BackButton, {
+    onPress: navigation.goBack
+  }), (0, _element.createElement)(_navBar.default.Heading, null, (0, _i18n.__)('Customize Gradient'))), (0, _element.createElement)(_customGradientPicker.default, {
     setColor: setColor,
     currentValue: currentValue,
     isGradientColor: isGradientColor

package/build/mobile/color-settings/gradient-picker-screen.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/mobile/color-settings/gradient-picker-screen.native.js"],"names":["GradientPickerScreen","navigation","route","setColor","currentValue","isGradientColor","params","goBack"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AAKA;;AACA;;AAfA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAMA,oBAAoB,GAAG,MAAM;AAClC,QAAMC,UAAU,GAAG,4BAAnB;AACA,QAAMC,KAAK,GAAG,uBAAd;AACA,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,YAAZ;AAA0BC,IAAAA;AAA1B,MAA8CH,KAAK,CAACI,MAA1D;AACA,SACC,4BAAC,iBAAD,QACC,4BAAC,yBAAD;AACC,IAAA,MAAM,EAAG,cAAI,oBAAJ,CADV;AAEC,IAAA,iBAAiB,EAAGL,UAAU,CAACM;AAFhC,IADD,EAKC,4BAAC,6BAAD;AACC,IAAA,QAAQ,EAAGJ,QADZ;AAEC,IAAA,YAAY,EAAGC,YAFhB;AAGC,IAAA,eAAe,EAAGC;AAHnB,IALD,CADD;AAaA,CAjBD;;eAmBeL,oB","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\nimport { useNavigation, useRoute } from '@react-navigation/native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport CustomGradientPicker from '../../custom-gradient-picker';\nimport NavigationHeader from '../bottom-sheet/navigation-header';\n\nconst GradientPickerScreen = () => {\n\tconst navigation = useNavigation();\n\tconst route = useRoute();\n\tconst { setColor, currentValue, isGradientColor } = route.params;\n\treturn (\n\t\t<View>\n\t\t\t<NavigationHeader\n\t\t\t\tscreen={ __( 'Customize Gradient' ) }\n\t\t\t\tleftButtonOnPress={ navigation.goBack }\n\t\t\t/>\n\t\t\t<CustomGradientPicker\n\t\t\t\tsetColor={ setColor }\n\t\t\t\tcurrentValue={ currentValue }\n\t\t\t\tisGradientColor={ isGradientColor }\n\t\t\t/>\n\t\t</View>\n\t);\n};\n\nexport default GradientPickerScreen;\n"]}
+{"version":3,"sources":["@wordpress/components/src/mobile/color-settings/gradient-picker-screen.native.js"],"names":["GradientPickerScreen","navigation","route","setColor","currentValue","isGradientColor","params","goBack"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AAKA;;AACA;;AAfA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAMA,oBAAoB,GAAG,MAAM;AAClC,QAAMC,UAAU,GAAG,4BAAnB;AACA,QAAMC,KAAK,GAAG,uBAAd;AACA,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,YAAZ;AAA0BC,IAAAA;AAA1B,MAA8CH,KAAK,CAACI,MAA1D;AACA,SACC,4BAAC,iBAAD,QACC,4BAAC,eAAD,QACC,4BAAC,eAAD,CAAQ,UAAR;AAAmB,IAAA,OAAO,EAAGL,UAAU,CAACM;AAAxC,IADD,EAEC,4BAAC,eAAD,CAAQ,OAAR,QAAkB,cAAI,oBAAJ,CAAlB,CAFD,CADD,EAKC,4BAAC,6BAAD;AACC,IAAA,QAAQ,EAAGJ,QADZ;AAEC,IAAA,YAAY,EAAGC,YAFhB;AAGC,IAAA,eAAe,EAAGC;AAHnB,IALD,CADD;AAaA,CAjBD;;eAmBeL,oB","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\nimport { useNavigation, useRoute } from '@react-navigation/native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport CustomGradientPicker from '../../custom-gradient-picker';\nimport NavBar from '../bottom-sheet/nav-bar';\n\nconst GradientPickerScreen = () => {\n\tconst navigation = useNavigation();\n\tconst route = useRoute();\n\tconst { setColor, currentValue, isGradientColor } = route.params;\n\treturn (\n\t\t<View>\n\t\t\t<NavBar>\n\t\t\t\t<NavBar.BackButton onPress={ navigation.goBack } />\n\t\t\t\t<NavBar.Heading>{ __( 'Customize Gradient' ) }</NavBar.Heading>\n\t\t\t</NavBar>\n\t\t\t<CustomGradientPicker\n\t\t\t\tsetColor={ setColor }\n\t\t\t\tcurrentValue={ currentValue }\n\t\t\t\tisGradientColor={ isGradientColor }\n\t\t\t/>\n\t\t</View>\n\t);\n};\n\nexport default GradientPickerScreen;\n"]}