@draftbit/core 46.10.2-b59d51.2 → 46.10.2-e28eea.2

package/lib/commonjs/components/BottomSheet/BottomSheetComponent.js

@@ -10,10 +10,19 @@ var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reani
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
 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; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+/**
+ * Slightly modfied version as taken from https://github.com/rgommezz/react-native-scroll-bottom-sheet
+ * Main previously breaking change:
+ * const node = this.props.innerRef.current?.getNode() ==> const node = this.props.innerRef.current as any
+ */
+/**
+ * Copyright (c) 2020 Raul Gomez Acuna
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
 const {
   //@ts-ignore
   interpolate: interpolateDeprecated,
@@ -73,85 +82,42 @@ const imperativeScrollOptions = {
   }
 };
 class ScrollBottomSheet extends _react.Component {
-  /**
-   * Gesture Handler references
-   */
-
-  /**
-   * ScrollView prop
-   */
-
-  /**
-   * Pan gesture handler events for drawer handle and content
-   */
-
-  /**
-   * Main Animated Value that drives the top position of the UI drawer at any point in time
-   */
-
-  /**
-   * Animated value that keeps track of the position: 0 => closed, 1 => opened
-   */
-
-  /**
-   * Flag to indicate imperative snapping
-   */
-
-  /**
-   * Manual snapping amount
-   */
-
-  /**
-   * Keeps track of the current index
-   */
-
-  /**
-   * Deceleration rate of the scroll component. This is used only on Android to
-   * compensate the unexpected glide it gets sometimes.
-   */
-
   constructor(props) {
-    var _props$animationConfi, _this;
+    var _this;
+    var _a;
     super(props);
     _this = this;
-    _defineProperty(this, "masterDrawer", /*#__PURE__*/_react.default.createRef());
-    _defineProperty(this, "drawerHandleRef", /*#__PURE__*/_react.default.createRef());
-    _defineProperty(this, "drawerContentRef", /*#__PURE__*/_react.default.createRef());
-    _defineProperty(this, "scrollComponentRef", /*#__PURE__*/_react.default.createRef());
-    _defineProperty(this, "onScrollBeginDrag", void 0);
-    _defineProperty(this, "onHandleGestureEvent", void 0);
-    _defineProperty(this, "onDrawerGestureEvent", void 0);
-    _defineProperty(this, "translateY", void 0);
-    _defineProperty(this, "position", void 0);
-    _defineProperty(this, "isManuallySetValue", new _reactNativeReanimated.Value(0));
-    _defineProperty(this, "manualYOffset", new _reactNativeReanimated.Value(0));
-    _defineProperty(this, "nextSnapIndex", void 0);
-    _defineProperty(this, "decelerationRate", void 0);
-    _defineProperty(this, "prevSnapIndex", -1);
-    _defineProperty(this, "dragY", new _reactNativeReanimated.Value(0));
-    _defineProperty(this, "prevDragY", new _reactNativeReanimated.Value(0));
-    _defineProperty(this, "tempDestSnapPoint", new _reactNativeReanimated.Value(0));
-    _defineProperty(this, "isAndroid", new _reactNativeReanimated.Value(Number(_reactNative.Platform.OS === "android")));
-    _defineProperty(this, "animationClock", new _reactNativeReanimated.Clock());
-    _defineProperty(this, "animationPosition", new _reactNativeReanimated.Value(0));
-    _defineProperty(this, "animationFinished", new _reactNativeReanimated.Value(0));
-    _defineProperty(this, "animationFrameTime", new _reactNativeReanimated.Value(0));
-    _defineProperty(this, "velocityY", new _reactNativeReanimated.Value(0));
-    _defineProperty(this, "lastStartScrollY", new _reactNativeReanimated.Value(0));
-    _defineProperty(this, "prevTranslateYOffset", void 0);
-    _defineProperty(this, "translationY", void 0);
-    _defineProperty(this, "destSnapPoint", new _reactNativeReanimated.Value(0));
-    _defineProperty(this, "lastSnap", void 0);
-    _defineProperty(this, "dragWithHandle", new _reactNativeReanimated.Value(0));
-    _defineProperty(this, "scrollUpAndPullDown", new _reactNativeReanimated.Value(0));
-    _defineProperty(this, "didGestureFinish", void 0);
-    _defineProperty(this, "didScrollUpAndPullDown", void 0);
-    _defineProperty(this, "setTranslationY", void 0);
-    _defineProperty(this, "extraOffset", void 0);
-    _defineProperty(this, "calculateNextSnapPoint", void 0);
-    _defineProperty(this, "scrollComponent", void 0);
-    _defineProperty(this, "convertPercentageToDp", str => Number(str.split("%")[0]) * (windowHeight - this.props.topInset) / 100);
-    _defineProperty(this, "getNormalisedSnapPoints", () => {
+    /**
+     * Gesture Handler references
+     */
+    this.masterDrawer = /*#__PURE__*/_react.default.createRef();
+    this.drawerHandleRef = /*#__PURE__*/_react.default.createRef();
+    this.drawerContentRef = /*#__PURE__*/_react.default.createRef();
+    this.scrollComponentRef = /*#__PURE__*/_react.default.createRef();
+    /**
+     * Flag to indicate imperative snapping
+     */
+    this.isManuallySetValue = new _reactNativeReanimated.Value(0);
+    /**
+     * Manual snapping amount
+     */
+    this.manualYOffset = new _reactNativeReanimated.Value(0);
+    this.prevSnapIndex = -1;
+    this.dragY = new _reactNativeReanimated.Value(0);
+    this.prevDragY = new _reactNativeReanimated.Value(0);
+    this.tempDestSnapPoint = new _reactNativeReanimated.Value(0);
+    this.isAndroid = new _reactNativeReanimated.Value(Number(_reactNative.Platform.OS === "android"));
+    this.animationClock = new _reactNativeReanimated.Clock();
+    this.animationPosition = new _reactNativeReanimated.Value(0);
+    this.animationFinished = new _reactNativeReanimated.Value(0);
+    this.animationFrameTime = new _reactNativeReanimated.Value(0);
+    this.velocityY = new _reactNativeReanimated.Value(0);
+    this.lastStartScrollY = new _reactNativeReanimated.Value(0);
+    this.destSnapPoint = new _reactNativeReanimated.Value(0);
+    this.dragWithHandle = new _reactNativeReanimated.Value(0);
+    this.scrollUpAndPullDown = new _reactNativeReanimated.Value(0);
+    this.convertPercentageToDp = str => Number(str.split("%")[0]) * (windowHeight - this.props.topInset) / 100;
+    this.getNormalisedSnapPoints = () => {
       return this.props.snapPoints.map(p => {
         if (typeof p === "string") {
           return this.convertPercentageToDp(p);
@@ -160,8 +126,8 @@ class ScrollBottomSheet extends _react.Component {
         }
         throw new Error("Invalid type for value ".concat(p, ": ").concat(typeof p, ". It should be either a percentage string or a number"));
       });
-    });
-    _defineProperty(this, "getScrollComponent", () => {
+    };
+    this.getScrollComponent = () => {
       switch (this.props.componentType) {
         case "FlatList":
           return _reactNative.FlatList;
@@ -172,33 +138,32 @@ class ScrollBottomSheet extends _react.Component {
         default:
           throw new Error("Component type not supported: it should be one of `FlatList`, `ScrollView` or `SectionList`");
       }
-    });
-    _defineProperty(this, "snapTo", index => {
+    };
+    this.snapTo = index => {
       const snapPoints = this.getNormalisedSnapPoints();
       this.isManuallySetValue.setValue(1);
       this.manualYOffset.setValue(snapPoints[index]);
       this.nextSnapIndex.setValue(index);
-    });
+    };
     const {
       initialSnapIndex,
       animationType
     } = props;
     const animationDriver = animationType === "timing" ? 0 : 1;
-    const animationDuration = props.animationType === "timing" && ((_props$animationConfi = props.animationConfig) === null || _props$animationConfi === void 0 ? void 0 : _props$animationConfi.duration) || DEFAULT_ANIMATION_DURATION;
+    const animationDuration = props.animationType === "timing" && ((_a = props.animationConfig) === null || _a === void 0 ? void 0 : _a.duration) || DEFAULT_ANIMATION_DURATION;
     const ScrollComponent = this.getScrollComponent();
     // @ts-ignore
     this.scrollComponent = _reactNativeReanimated.default.createAnimatedComponent(ScrollComponent);
-    const _snapPoints = this.getNormalisedSnapPoints();
-    const openPosition = _snapPoints[0];
-    const closedPosition = this.props.enableOverScroll ? windowHeight : _snapPoints[_snapPoints.length - 1];
-    const initialSnap = _snapPoints[initialSnapIndex];
+    const snapPoints = this.getNormalisedSnapPoints();
+    const openPosition = snapPoints[0];
+    const closedPosition = this.props.enableOverScroll ? windowHeight : snapPoints[snapPoints.length - 1];
+    const initialSnap = snapPoints[initialSnapIndex];
     this.nextSnapIndex = new _reactNativeReanimated.Value(initialSnapIndex);
     const initialDecelerationRate = _reactNative.Platform.select({
       android: props.initialSnapIndex === 0 ? ANDROID_NORMAL_DECELERATION_RATE : 0,
       ios: IOS_NORMAL_DECELERATION_RATE
     });
     this.decelerationRate = new _reactNativeReanimated.Value(initialDecelerationRate);
-
     //@ts-ignore
     const handleGestureState = new _reactNativeReanimated.Value(-1);
     //@ts-ignore
@@ -237,29 +202,27 @@ class ScrollBottomSheet extends _react.Component {
     const didHandleGestureBegin = (0, _reactNativeReanimated.eq)(handleGestureState, _reactNativeGestureHandler.State.ACTIVE);
     const isAnimationInterrupted = (0, _reactNativeReanimated.and)((0, _reactNativeReanimated.or)((0, _reactNativeReanimated.eq)(handleGestureState, _reactNativeGestureHandler.State.BEGAN), (0, _reactNativeReanimated.eq)(drawerGestureState, _reactNativeGestureHandler.State.BEGAN), (0, _reactNativeReanimated.and)((0, _reactNativeReanimated.eq)(this.isAndroid, 0), (0, _reactNativeReanimated.eq)(animationDriver, 1), (0, _reactNativeReanimated.or)((0, _reactNativeReanimated.eq)(drawerGestureState, _reactNativeGestureHandler.State.ACTIVE), (0, _reactNativeReanimated.eq)(handleGestureState, _reactNativeGestureHandler.State.ACTIVE)))), (0, _reactNativeReanimated.clockRunning)(this.animationClock));
     this.didGestureFinish = (0, _reactNativeReanimated.or)((0, _reactNativeReanimated.and)((0, _reactNativeReanimated.eq)(handleOldGestureState, _reactNativeGestureHandler.State.ACTIVE), (0, _reactNativeReanimated.eq)(handleGestureState, _reactNativeGestureHandler.State.END)), (0, _reactNativeReanimated.and)((0, _reactNativeReanimated.eq)(drawerOldGestureState, _reactNativeGestureHandler.State.ACTIVE), (0, _reactNativeReanimated.eq)(drawerGestureState, _reactNativeGestureHandler.State.END)));
-
     // Function that determines if the last snap point is in the range {snapPoints}
     // In the case of interruptions in the middle of an animation, we'll get
     // lastSnap values outside the range
     const isLastSnapPointInRange = function () {
       let i = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-      return i === _snapPoints.length ? lastSnapInRange : (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(_this.lastSnap, _snapPoints[i]), [(0, _reactNativeReanimated.set)(lastSnapInRange, 1)], isLastSnapPointInRange(i + 1));
+      return i === snapPoints.length ? lastSnapInRange : (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(_this.lastSnap, snapPoints[i]), [(0, _reactNativeReanimated.set)(lastSnapInRange, 1)], isLastSnapPointInRange(i + 1));
     };
-    const scrollY = [(0, _reactNativeReanimated.set)(lastSnapInRange, 0), isLastSnapPointInRange(), (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.or)(didHandleGestureBegin, (0, _reactNativeReanimated.and)(this.isManuallySetValue, (0, _reactNativeReanimated.not)((0, _reactNativeReanimated.eq)(this.manualYOffset, _snapPoints[0])))), [(0, _reactNativeReanimated.set)(this.dragWithHandle, 1), 0]), (0, _reactNativeReanimated.cond)(
+    const scrollY = [(0, _reactNativeReanimated.set)(lastSnapInRange, 0), isLastSnapPointInRange(), (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.or)(didHandleGestureBegin, (0, _reactNativeReanimated.and)(this.isManuallySetValue, (0, _reactNativeReanimated.not)((0, _reactNativeReanimated.eq)(this.manualYOffset, snapPoints[0])))), [(0, _reactNativeReanimated.set)(this.dragWithHandle, 1), 0]), (0, _reactNativeReanimated.cond)(
     // This is to account for a continuous scroll on the drawer from a snap point
     // Different than top, bringing the drawer to the top position, so that if we
     // change scroll direction without releasing the gesture, it doesn't pull down the drawer again
-    (0, _reactNativeReanimated.and)((0, _reactNativeReanimated.eq)(this.dragWithHandle, 1), (0, _reactNativeReanimated.greaterThan)(_snapPoints[0], (0, _reactNativeReanimated.add)(this.lastSnap, this.dragY)), (0, _reactNativeReanimated.and)((0, _reactNativeReanimated.not)((0, _reactNativeReanimated.eq)(this.lastSnap, _snapPoints[0])), lastSnapInRange)), [(0, _reactNativeReanimated.set)(this.lastSnap, _snapPoints[0]), (0, _reactNativeReanimated.set)(this.dragWithHandle, 0), this.lastStartScrollY], (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(this.dragWithHandle, 1), 0, this.lastStartScrollY))];
+    (0, _reactNativeReanimated.and)((0, _reactNativeReanimated.eq)(this.dragWithHandle, 1), (0, _reactNativeReanimated.greaterThan)(snapPoints[0], (0, _reactNativeReanimated.add)(this.lastSnap, this.dragY)), (0, _reactNativeReanimated.and)((0, _reactNativeReanimated.not)((0, _reactNativeReanimated.eq)(this.lastSnap, snapPoints[0])), lastSnapInRange)), [(0, _reactNativeReanimated.set)(this.lastSnap, snapPoints[0]), (0, _reactNativeReanimated.set)(this.dragWithHandle, 0), this.lastStartScrollY], (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(this.dragWithHandle, 1), 0, this.lastStartScrollY))];
     this.didScrollUpAndPullDown = (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.and)((0, _reactNativeReanimated.greaterOrEq)(this.dragY, this.lastStartScrollY), (0, _reactNativeReanimated.greaterThan)(this.lastStartScrollY, 0)), (0, _reactNativeReanimated.set)(this.scrollUpAndPullDown, 1));
     this.setTranslationY = (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.and)((0, _reactNativeReanimated.not)(this.dragWithHandle), (0, _reactNativeReanimated.not)((0, _reactNativeReanimated.greaterOrEq)(this.dragY, this.lastStartScrollY))), (0, _reactNativeReanimated.set)(this.translationY, (0, _reactNativeReanimated.sub)(this.dragY, this.lastStartScrollY)), (0, _reactNativeReanimated.set)(this.translationY, this.dragY));
     this.extraOffset = (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(this.scrollUpAndPullDown, 1), this.lastStartScrollY, 0);
     const endOffsetY = (0, _reactNativeReanimated.add)(this.lastSnap, this.translationY, (0, _reactNativeReanimated.multiply)(1 - props.friction, this.velocityY));
     this.calculateNextSnapPoint = function () {
       let i = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-      return i === _snapPoints.length ? _this.tempDestSnapPoint : (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.greaterThan)((0, _reactNativeReanimated.abs)((0, _reactNativeReanimated.sub)(_this.tempDestSnapPoint, endOffsetY)), (0, _reactNativeReanimated.abs)((0, _reactNativeReanimated.sub)((0, _reactNativeReanimated.add)(_snapPoints[i], _this.extraOffset), endOffsetY))), [(0, _reactNativeReanimated.set)(_this.tempDestSnapPoint, (0, _reactNativeReanimated.add)(_snapPoints[i], _this.extraOffset)), (0, _reactNativeReanimated.set)(_this.nextSnapIndex, i), _this.calculateNextSnapPoint(i + 1)], _this.calculateNextSnapPoint(i + 1));
+      return i === snapPoints.length ? _this.tempDestSnapPoint : (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.greaterThan)((0, _reactNativeReanimated.abs)((0, _reactNativeReanimated.sub)(_this.tempDestSnapPoint, endOffsetY)), (0, _reactNativeReanimated.abs)((0, _reactNativeReanimated.sub)((0, _reactNativeReanimated.add)(snapPoints[i], _this.extraOffset), endOffsetY))), [(0, _reactNativeReanimated.set)(_this.tempDestSnapPoint, (0, _reactNativeReanimated.add)(snapPoints[i], _this.extraOffset)), (0, _reactNativeReanimated.set)(_this.nextSnapIndex, i), _this.calculateNextSnapPoint(i + 1)], _this.calculateNextSnapPoint(i + 1));
     };
     const runAnimation = _ref => {
-      var _props$animationConfi2;
       let {
         clock,
         from,
@@ -269,6 +232,7 @@ class ScrollBottomSheet extends _react.Component {
         velocity,
         frameTime
       } = _ref;
+      var _a;
       const state = {
         finished,
         velocity: new _reactNativeReanimated.Value(0),
@@ -278,7 +242,7 @@ class ScrollBottomSheet extends _react.Component {
       };
       const timingConfig = {
         duration: animationDuration,
-        easing: props.animationType === "timing" && ((_props$animationConfi2 = props.animationConfig) === null || _props$animationConfi2 === void 0 ? void 0 : _props$animationConfi2.easing) || DEFAULT_EASING,
+        easing: props.animationType === "timing" && ((_a = props.animationConfig) === null || _a === void 0 ? void 0 : _a.easing) || DEFAULT_EASING,
         toValue: new _reactNativeReanimated.Value(0)
       };
       const springConfig = {
@@ -294,14 +258,14 @@ class ScrollBottomSheet extends _react.Component {
       //@ts-ignore
       (0, _reactNativeReanimated.timing)(clock, state, timingConfig), (0, _reactNativeReanimated.spring)(clock, state, springConfig)), (0, _reactNativeReanimated.cond)(state.finished, [(0, _reactNativeReanimated.call)([this.nextSnapIndex], _ref2 => {
         let [value] = _ref2;
+        var _a, _b;
         if (value !== this.prevSnapIndex) {
-          var _this$props$onSettle, _this$props;
-          (_this$props$onSettle = (_this$props = this.props).onSettle) === null || _this$props$onSettle === void 0 ? void 0 : _this$props$onSettle.call(_this$props, value);
+          (_b = (_a = this.props).onSettle) === null || _b === void 0 ? void 0 : _b.call(_a, value);
         }
         this.prevSnapIndex = value;
       }),
       // Resetting appropriate values
-      (0, _reactNativeReanimated.set)(drawerOldGestureState, _reactNativeGestureHandler.State.END), (0, _reactNativeReanimated.set)(handleOldGestureState, _reactNativeGestureHandler.State.END), (0, _reactNativeReanimated.set)(this.prevTranslateYOffset, state.position), (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(this.scrollUpAndPullDown, 1), [(0, _reactNativeReanimated.set)(this.prevTranslateYOffset, (0, _reactNativeReanimated.sub)(this.prevTranslateYOffset, this.lastStartScrollY)), (0, _reactNativeReanimated.set)(this.lastStartScrollY, 0), (0, _reactNativeReanimated.set)(this.scrollUpAndPullDown, 0)]), (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(this.destSnapPoint, _snapPoints[0]), [(0, _reactNativeReanimated.set)(this.dragWithHandle, 0)]), (0, _reactNativeReanimated.set)(this.isManuallySetValue, 0), (0, _reactNativeReanimated.set)(this.manualYOffset, 0), (0, _reactNativeReanimated.stopClock)(clock), this.prevTranslateYOffset],
+      (0, _reactNativeReanimated.set)(drawerOldGestureState, _reactNativeGestureHandler.State.END), (0, _reactNativeReanimated.set)(handleOldGestureState, _reactNativeGestureHandler.State.END), (0, _reactNativeReanimated.set)(this.prevTranslateYOffset, state.position), (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(this.scrollUpAndPullDown, 1), [(0, _reactNativeReanimated.set)(this.prevTranslateYOffset, (0, _reactNativeReanimated.sub)(this.prevTranslateYOffset, this.lastStartScrollY)), (0, _reactNativeReanimated.set)(this.lastStartScrollY, 0), (0, _reactNativeReanimated.set)(this.scrollUpAndPullDown, 0)]), (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(this.destSnapPoint, snapPoints[0]), [(0, _reactNativeReanimated.set)(this.dragWithHandle, 0)]), (0, _reactNativeReanimated.set)(this.isManuallySetValue, 0), (0, _reactNativeReanimated.set)(this.manualYOffset, 0), (0, _reactNativeReanimated.stopClock)(clock), this.prevTranslateYOffset],
       // We made the block return the updated position,
       state.position)];
     };
@@ -330,7 +294,7 @@ class ScrollBottomSheet extends _react.Component {
       extrapolate: _reactNativeReanimated.Extrapolate.CLAMP
     });
     this.position = interpolate(this.translateY, {
-      inputRange: [openPosition, _snapPoints[_snapPoints.length - 1]],
+      inputRange: [openPosition, snapPoints[snapPoints.length - 1]],
       outputRange: [1, 0],
       extrapolate: _reactNativeReanimated.Extrapolate.CLAMP
     });
@@ -371,26 +335,25 @@ class ScrollBottomSheet extends _react.Component {
       ref: this.scrollComponentRef,
       waitFor: this.masterDrawer,
       simultaneousHandlers: this.drawerContentRef
-    }, /*#__PURE__*/_react.default.createElement(AnimatedScrollableComponent, _extends({
+    }, /*#__PURE__*/_react.default.createElement(AnimatedScrollableComponent, {
       overScrollMode: "never",
-      bounces: false
-    }, rest, {
-      ref: this.props.innerRef
+      bounces: false,
+      ...rest,
+      ref: this.props.innerRef,
       // @ts-ignore
-      ,
       decelerationRate: this.decelerationRate,
       onScrollBeginDrag: this.onScrollBeginDrag,
       scrollEventThrottle: 1,
       contentContainerStyle: [rest.contentContainerStyle, {
         paddingBottom: this.getNormalisedSnapPoints()[0]
       }]
-    }))))), this.props.animatedPosition && /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.Code, {
+    })))), this.props.animatedPosition && /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.Code, {
       exec: (0, _reactNativeReanimated.onChange)(this.position, (0, _reactNativeReanimated.set)(this.props.animatedPosition, this.position))
     }), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.Code, {
       exec: (0, _reactNativeReanimated.onChange)(this.dragY, (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.not)((0, _reactNativeReanimated.eq)(this.dragY, 0)), (0, _reactNativeReanimated.set)(this.prevDragY, this.dragY)))
     }), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.Code, {
       exec: (0, _reactNativeReanimated.onChange)(this.didGestureFinish, (0, _reactNativeReanimated.cond)(this.didGestureFinish, [this.didScrollUpAndPullDown, this.setTranslationY, (0, _reactNativeReanimated.set)(this.tempDestSnapPoint, (0, _reactNativeReanimated.add)(normalisedSnapPoints[0], this.extraOffset)), (0, _reactNativeReanimated.set)(this.nextSnapIndex, 0), (0, _reactNativeReanimated.set)(this.destSnapPoint, this.calculateNextSnapPoint()), (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.and)((0, _reactNativeReanimated.greaterThan)(this.dragY, this.lastStartScrollY), this.isAndroid, (0, _reactNativeReanimated.not)(this.dragWithHandle)), (0, _reactNativeReanimated.call)([], () => {
-        var _this$props2, _this$props2$data;
+        var _a, _b;
         // This prevents the scroll glide from happening on Android when pulling down with inertia.
         // It's not perfect, but does the job for now
         const {
@@ -399,14 +362,67 @@ class ScrollBottomSheet extends _react.Component {
         } = imperativeScrollOptions[this.props.componentType];
         // @ts-ignore
         const node = this.props.innerRef.current;
-        if (node && node[method] && (this.props.componentType === "FlatList" && (((_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : (_this$props2$data = _this$props2.data) === null || _this$props2$data === void 0 ? void 0 : _this$props2$data.length) || 0) > 0 || this.props.componentType === "SectionList" && this.props.sections.length > 0 || this.props.componentType === "ScrollView")) {
+        if (node && node[method] && (this.props.componentType === "FlatList" && (((_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0 || this.props.componentType === "SectionList" && this.props.sections.length > 0 || this.props.componentType === "ScrollView")) {
           node[method](args);
         }
       })), (0, _reactNativeReanimated.set)(this.dragY, 0), (0, _reactNativeReanimated.set)(this.velocityY, 0), (0, _reactNativeReanimated.set)(this.lastSnap, (0, _reactNativeReanimated.sub)(this.destSnapPoint, (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(this.scrollUpAndPullDown, 1), this.lastStartScrollY, 0))), (0, _reactNativeReanimated.call)([this.lastSnap], _ref3 => {
-        var _this$masterDrawer, _this$masterDrawer$cu;
         let [value] = _ref3;
+        var _a, _b;
+        // This is the TapGHandler trick
+        // @ts-ignore
+        (_b = (_a = this.masterDrawer) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.setNativeProps({
+          maxDeltaY: value - this.getNormalisedSnapPoints()[0]
+        });
+      }), (0, _reactNativeReanimated.set)(this.decelerationRate, (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(this.isAndroid, 1), (0, _reactNativeReanimated.cond)((0, _reactNativeReanimated.eq)(this.lastSnap, normalisedSnapPoints[0]), ANDROID_NORMAL_DECELERATION_RATE, 0), IOS_NORMAL_DECELERATION_RATE))]))
+    }), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.Code, {
+      exec: (0, _reactNativeReanimated.onChange)(this.isManuallySetValue, [(0, _reactNativeReanimated.cond)(this.isManuallySetValue, [(0, _reactNativeReanimated.set)(this.destSnapPoint, this.manualYOffset), (0, _reactNativeReanimated.set)(this.animationFinished, 0), (0, _reactNativeReanimated.set)(this.lastSnap, this.manualYOffset), (0, _reactNativeReanimated.call)([this.lastSnap], _ref4 => {
+        let [value] = _ref4;
+        var _a, _b;
         // This is the TapGHandler trick
         // @ts-ignore
+        (_b = (_a = this.masterDrawer) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.setNativeProps({
+          maxDeltaY: value - this.getNormalisedSnapPoints()[0]
+        });
+      })], [(0, _reactNativeReanimated.set)(this.nextSnapIndex, 0)])])
+    }));
+    // On Android, having an intermediary view with pointerEvents="box-none", breaks the
+    // waitFor logic
+    if (_reactNative.Platform.OS === "android") {
+      return /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.TapGestureHandler, {
+        maxDurationMs: 100000,
+        ref: this.masterDrawer,
+        maxDeltaY: initialSnap - this.getNormalisedSnapPoints()[0],
+        shouldCancelWhenOutside: false
+      }, Content);
+    }
+    // On iOS, We need to wrap the content on a view with PointerEvents box-none
+    // So that we can start scrolling automatically when reaching the top without
+    // Stopping the gesture
+    return /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.TapGestureHandler, {
+      maxDurationMs: 100000,
+      ref: this.masterDrawer,
+      maxDeltaY: initialSnap - this.getNormalisedSnapPoints()[0]
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: _reactNative.StyleSheet.absoluteFillObject,
+      pointerEvents: "box-none"
+    }, Content));
+  }
+}
+exports.ScrollBottomSheet = ScrollBottomSheet;
+ScrollBottomSheet.defaultProps = {
+  topInset: 0,
+  friction: 0.95,
+  animationType: "timing",
+  innerRef: /*#__PURE__*/_react.default.createRef(),
+  enableOverScroll: false
+};
+var _default = ScrollBottomSheet;
+exports.default = _default;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+}); @ts-ignore
         (_this$masterDrawer = this.masterDrawer) === null || _this$masterDrawer === void 0 ? void 0 : (_this$masterDrawer$cu = _this$masterDrawer.current) === null || _this$masterDrawer$cu === void 0 ? void 0 : _this$masterDrawer$cu.setNativeProps({
           maxDeltaY: value - this.getNormalisedSnapPoints()[0]
         });

package/lib/commonjs/components/FAB.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _theming = require("../theming");
 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; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const FAB = _ref => {
   let {
     onPress,
@@ -32,7 +33,7 @@ const FAB = _ref => {
       borderRadius: size / 2,
       overflow: "hidden"
     }, style]
-  }, /*#__PURE__*/React.createElement(_reactNative.Pressable, {
+  }, /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({
     onPress: onPress,
     disabled: loading || disabled,
     android_ripple: {
@@ -50,9 +51,8 @@ const FAB = _ref => {
         borderRadius: size / 2,
         backgroundColor
       }];
-    },
-    ...props
-  }, /*#__PURE__*/React.createElement(_reactNative.View, null, loading ? /*#__PURE__*/React.createElement(_reactNative.ActivityIndicator, {
+    }
+  }, props), /*#__PURE__*/React.createElement(_reactNative.View, null, loading ? /*#__PURE__*/React.createElement(_reactNative.ActivityIndicator, {
     style: size > 50 ? {
       marginTop: 2,
       marginLeft: 2
@@ -79,18 +79,4 @@ const styles = _reactNative.StyleSheet.create({
   }
 });
 var _default = (0, _theming.withTheme)(FAB);
-exports.default = _default; styles = _reactNative.StyleSheet.create({
-  button: {
-    backgroundColor: "#5a45ff",
-    justifyContent: "center",
-    alignItems: "center",
-    ..._reactNative.Platform.select({
-      web: {
-        cursor: "pointer",
-        userSelect: "none"
-      }
-    })
-  }
-});
-var _default = (0, _theming.withTheme)(FAB);
 exports.default = _default;

package/lib/commonjs/components/Picker/Picker.js

@@ -58,7 +58,7 @@ const Picker = _ref => {
     defaultValue,
     Icon,
     style,
-    placeholder,
+    placeholder = "Select an option",
     value,
     disabled = false,
     assistiveText,
@@ -99,7 +99,14 @@ const Picker = _ref => {
       _reactNative.Keyboard.dismiss();
     }
   }, [pickerVisible, autoDismissKeyboard]);
-  const pickerOptions = normalizeOptions(options);
+  const normalizedOptions = normalizeOptions(options);
+
+  //Underlying Picker component defaults selection to first element when value is not provided (or undefined)
+  //Placholder must be the 1st option in order to allow selection of the 'actual' 1st option
+  const pickerOptions = placeholder ? [{
+    label: placeholder,
+    value: placeholder
+  }, ...normalizedOptions] : normalizedOptions;
   const {
     viewStyles,
     textStyles
@@ -199,9 +206,12 @@ const Picker = _ref => {
     } : {})
   };
   const handleValueChange = (newValue, itemIndex) => {
-    if (newValue !== "") {
+    if (newValue !== "" && newValue !== placeholder) {
       onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue, itemIndex);
       setInternalValue(newValue);
+    } else if (newValue === placeholder) {
+      onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("", 0);
+      setInternalValue(undefined);
     }
   };
   return (

package/lib/commonjs/constants.js

@@ -12,4 +12,4 @@ const APPROX_STATUSBAR_HEIGHT = _reactNative.Platform.select({
   android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
   ios: _reactNative.Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0
 });
-exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;
+exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;AR_HEIGHT;

package/lib/commonjs/mappings/FieldSearchBarFull.js

@@ -14,7 +14,6 @@ const SEED_DATA = [{
   preview_image_url: "{CLOUDINARY_URL}/Field_SearchBar_Full.png",
   supports_list_render: false,
   triggers: [_types.Triggers.OnChange],
-  // TODO Triggers.OnSubmit for multiple triggers
   props: {
     icon: {
       group: _types.GROUPS.basic,
@@ -53,4 +52,7 @@ const SEED_DATA = [{
   },
   layout: {}
 }];
+exports.SEED_DATA = SEED_DATA;},
+  layout: {}
+}];
 exports.SEED_DATA = SEED_DATA;

package/lib/module/components/Picker/Picker.js

@@ -49,7 +49,7 @@ const Picker = _ref => {
     defaultValue,
     Icon,
     style,
-    placeholder,
+    placeholder = "Select an option",
     value,
     disabled = false,
     assistiveText,
@@ -90,7 +90,14 @@ const Picker = _ref => {
       Keyboard.dismiss();
     }
   }, [pickerVisible, autoDismissKeyboard]);
-  const pickerOptions = normalizeOptions(options);
+  const normalizedOptions = normalizeOptions(options);
+
+  //Underlying Picker component defaults selection to first element when value is not provided (or undefined)
+  //Placholder must be the 1st option in order to allow selection of the 'actual' 1st option
+  const pickerOptions = placeholder ? [{
+    label: placeholder,
+    value: placeholder
+  }, ...normalizedOptions] : normalizedOptions;
   const {
     viewStyles,
     textStyles
@@ -190,9 +197,12 @@ const Picker = _ref => {
     } : {})
   };
   const handleValueChange = (newValue, itemIndex) => {
-    if (newValue !== "") {
+    if (newValue !== "" && newValue !== placeholder) {
       onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue, itemIndex);
       setInternalValue(newValue);
+    } else if (newValue === placeholder) {
+      onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("", 0);
+      setInternalValue(undefined);
     }
   };
   return (

package/lib/typescript/src/components/Picker/Picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Picker/Picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAKL,SAAS,EACT,SAAS,EAGV,MAAM,cAAc,CAAC;AAStB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAQtD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,oBAAY,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,GAAG,MAAM,EAAE,CAAC;IACnC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CACxB,CAAC;;;;AAyaF,wBAAiC"}
+{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../../../src/components/Picker/Picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAKL,SAAS,EACT,SAAS,EAGV,MAAM,cAAc,CAAC;AAStB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAQtD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,oBAAY,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,GAAG,MAAM,EAAE,CAAC;IACnC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CACxB,CAAC;;;;AAkbF,wBAAiC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.10.2-b59d51.2+b59d512",
+  "version": "46.10.2-e28eea.2+e28eea8",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^46.10.2-b59d51.2+b59d512",
+    "@draftbit/types": "^46.10.2-e28eea.2+e28eea8",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -64,7 +64,6 @@
     "react-native-tab-view": "^3.4.0",
     "react-native-typography": "^1.4.1",
     "react-native-web-swiper": "^2.2.3",
-    "react-native-web-webview": "^1.0.2",
     "react-native-youtube-iframe": "^2.2.2"
   },
   "devDependencies": {
@@ -100,5 +99,5 @@
       ]
     ]
   },
-  "gitHead": "b59d512ac6d80b7afb4a89df601d77b5887b5218"
+  "gitHead": "e28eea886cd9b8dcc27491b215f957b930428968"
 }

package/src/components/Picker/Picker.js

@@ -38,7 +38,7 @@ const disabledColor = "rgb(240, 240, 240)";
 const errorColor = "rgba(255, 69, 100, 1)";
 //Empty string for 'value' is treated as a non-value
 //reason: Draftbit uses empty string as initial value for string state*/
-const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style, placeholder, value, disabled = false, assistiveText, label, iconColor = unstyledColor, iconSize = 24, leftIconMode = "inset", leftIconName, placeholderTextColor = unstyledColor, rightIconName, type = "solid", autoDismissKeyboard = true, }) => {
+const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style, placeholder = "Select an option", value, disabled = false, assistiveText, label, iconColor = unstyledColor, iconSize = 24, leftIconMode = "inset", leftIconName, placeholderTextColor = unstyledColor, rightIconName, type = "solid", autoDismissKeyboard = true, }) => {
     var _a, _b;
     const androidPickerRef = React.useRef(undefined);
     const [internalValue, setInternalValue] = React.useState(value || defaultValue);
@@ -67,7 +67,12 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
             Keyboard.dismiss();
         }
     }, [pickerVisible, autoDismissKeyboard]);
-    const pickerOptions = normalizeOptions(options);
+    const normalizedOptions = normalizeOptions(options);
+    //Underlying Picker component defaults selection to first element when value is not provided (or undefined)
+    //Placholder must be the 1st option in order to allow selection of the 'actual' 1st option
+    const pickerOptions = placeholder
+        ? [{ label: placeholder, value: placeholder }, ...normalizedOptions]
+        : normalizedOptions;
     const { viewStyles, textStyles } = extractStyles(style);
     const additionalBorderStyles = ["backgroundColor"];
     const additionalMarginStyles = [
@@ -162,10 +167,14 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
         ...(disabled ? { color: unstyledColor } : {}),
     };
     const handleValueChange = (newValue, itemIndex) => {
-        if (newValue !== "") {
+        if (newValue !== "" && newValue !== placeholder) {
             onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue, itemIndex);
             setInternalValue(newValue);
         }
+        else if (newValue === placeholder) {
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("", 0);
+            setInternalValue(undefined);
+        }
     };
     return (
     /* marginsContainer */

package/src/components/Picker/Picker.tsx

@@ -101,7 +101,7 @@ const Picker: React.FC<PickerProps> = ({
   defaultValue,
   Icon,
   style,
-  placeholder,
+  placeholder = "Select an option",
   value,
   disabled = false,
   assistiveText,
@@ -151,7 +151,13 @@ const Picker: React.FC<PickerProps> = ({
     }
   }, [pickerVisible, autoDismissKeyboard]);
 
-  const pickerOptions = normalizeOptions(options);
+  const normalizedOptions = normalizeOptions(options);
+
+  //Underlying Picker component defaults selection to first element when value is not provided (or undefined)
+  //Placholder must be the 1st option in order to allow selection of the 'actual' 1st option
+  const pickerOptions = placeholder
+    ? [{ label: placeholder, value: placeholder }, ...normalizedOptions]
+    : normalizedOptions;
 
   const { viewStyles, textStyles } = extractStyles(style);
 
@@ -302,9 +308,12 @@ const Picker: React.FC<PickerProps> = ({
   };
 
   const handleValueChange = (newValue: string, itemIndex: number) => {
-    if (newValue !== "") {
+    if (newValue !== "" && newValue !== placeholder) {
       onValueChange?.(newValue, itemIndex);
       setInternalValue(newValue);
+    } else if (newValue === placeholder) {
+      onValueChange?.("", 0);
+      setInternalValue(undefined);
     }
   };