@draftbit/core 47.0.1-9fd6f2.2 → 47.0.1-df014a.2

package/lib/commonjs/mappings/DatePickerModal.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SHARED_SEED_DATA_PROPS = exports.SHARED_SEED_DATA = exports.SEED_DATA = void 0;
+var _types = require("@draftbit/types");
+const SHARED_SEED_DATA = {
+  triggers: [_types.Triggers.OnDismiss, _types.Triggers.OnConfirm, _types.Triggers.OnChange],
+  category: _types.COMPONENT_TYPES.input,
+  StylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.Background, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position],
+  layout: null
+};
+exports.SHARED_SEED_DATA = SHARED_SEED_DATA;
+const SHARED_SEED_DATA_PROPS = {
+  locale: {},
+  visible: (0, _types.createBoolProp)({
+    label: "Visible",
+    description: "If true, show the modal. If false, hide the modal.",
+    required: true
+  }),
+  label: (0, _types.createTextProp)({
+    label: "Label",
+    description: "Label used as the header in the component, defaults to `Select Date`"
+  }),
+  saveLabel: (0, _types.createTextProp)({
+    label: "Save Label",
+    description: "Label used to confirm a date selection. Defaults to `Save`."
+  }),
+  saveLabelDisabled: (0, _types.createStaticBoolProp)({
+    label: "Disable Save Label",
+    description: "Flag indicating if the save label should be disabled and unable to receive events"
+  }),
+  uppercase: (0, _types.createStaticBoolProp)({
+    label: "Uppercase",
+    description: "Flag indicating if the text in the component should be uppercase. Defaults to true."
+  }),
+  startYear: (0, _types.createStaticNumberProp)({
+    label: "Start Year",
+    description: "The start year when the component is rendered. Defaults to 1800.",
+    required: false
+  }),
+  endYear: (0, _types.createStaticNumberProp)({
+    label: "End Year",
+    description: "The end year when the component is rendered. Defaults to 2200.",
+    required: false
+  })
+};
+exports.SHARED_SEED_DATA_PROPS = SHARED_SEED_DATA_PROPS;
+const SEED_DATA = [{
+  name: "Single Date Picker Modal",
+  tag: "SingleDatePickerModal",
+  description: "A modal allowing date selection.",
+  ...SHARED_SEED_DATA,
+  props: {
+    mode: (0, _types.createTextEnumProp)({
+      label: "Mode",
+      description: "The selection mode of the date picker",
+      required: true,
+      options: ["single", "multiple", "range"],
+      editable: false,
+      defaultValue: "single",
+      formType: _types.FORM_TYPES.flatArray
+    }),
+    fieldName: {
+      ..._types.FIELD_NAME,
+      handlerPropName: "onConfirm",
+      valuePropName: "date",
+      defaultValue: "date"
+    },
+    ...SHARED_SEED_DATA_PROPS
+  }
+}];
+exports.SEED_DATA = SEED_DATA;

package/lib/module/components/AvatarEdit.js

@@ -1,4 +1,3 @@
-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); }
 import * as React from "react";
 import { View } from "react-native";
 import Touchable from "./Touchable";
@@ -23,9 +22,10 @@ const AvatarEdit = _ref => {
     width: size,
     height: size
   };
-  return /*#__PURE__*/React.createElement(View, _extends({
-    style: [style, dimensions]
-  }, rest), /*#__PURE__*/React.createElement(Touchable, {
+  return /*#__PURE__*/React.createElement(View, {
+    style: [style, dimensions],
+    ...rest
+  }, /*#__PURE__*/React.createElement(Touchable, {
     onPress: onPress
   }, /*#__PURE__*/React.createElement(CircleImage, {
     source: image,
@@ -46,4 +46,15 @@ const AvatarEdit = _ref => {
     size: size * (3 / 16)
   }))));
 };
+export default withTheme(AvatarEdit);yles.editBorderColor,
+      backgroundColor: colorStyles.editBackgroundColor,
+      borderRadius: size * (3 / 16),
+      padding: size * (3 / 32)
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "MaterialIcons/edit",
+    color: colorStyles.editIconColor,
+    size: size * (3 / 16)
+  }))));
+};
 export default withTheme(AvatarEdit);

package/lib/module/components/CardBlock.js

@@ -1,4 +1,3 @@
-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); }
 import React from "react";
 import { View, Text } from "react-native";
 import Image from "./Image";
@@ -42,11 +41,12 @@ const CardBlock = _ref => {
   const rightDescriptionStyles = [typography.subtitle2, {
     color: colors.light
   }];
-  return /*#__PURE__*/React.createElement(Card, _extends({
+  return /*#__PURE__*/React.createElement(Card, {
     style: style,
     onPress: onPress,
-    numColumns: numColumns
-  }, rest), /*#__PURE__*/React.createElement(View, {
+    numColumns: numColumns,
+    ...rest
+  }, /*#__PURE__*/React.createElement(View, {
     style: {
       backgroundColor: colors.background
     }
@@ -95,4 +95,14 @@ const CardBlock = _ref => {
     style: rightDescriptionStyles
   }, rightDescription) : null) : null));
 };
+export default withTheme(CardBlock);PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: [typography.body2, {
+      color: colors.medium
+    }]
+  }, leftDescription), rightDescription ? /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: rightDescriptionStyles
+  }, rightDescription) : null) : null));
+};
 export default withTheme(CardBlock);

package/lib/module/components/CircleImage.js

@@ -1,4 +1,3 @@
-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); }
 import * as React from "react";
 import { Image } from "react-native";
 import Config from "./Config";
@@ -10,6 +9,22 @@ const CircleImage = _ref => {
     ...props
   } = _ref;
   const borderRadius = size / 2;
+  return /*#__PURE__*/React.createElement(Image, {
+    style: [{
+      width: size,
+      height: size,
+      borderRadius
+    }, style],
+    source: typeof source === "string" ? {
+      uri: source
+    } : source,
+    resizeMode: "cover",
+    ...props
+  });
+};
+export default CircleImage;props
+  } = _ref;
+  const borderRadius = size / 2;
   return /*#__PURE__*/React.createElement(Image, _extends({
     style: [{
       width: size,

package/lib/module/components/DeprecatedCardWrapper.js

@@ -1,4 +1,3 @@
-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); }
 import React from "react";
 import { withTheme } from "../theming";
 import Touchable from "./Touchable";
@@ -13,6 +12,24 @@ const getWidth = numColumns => {
   }
 };
 const Card = _ref => {
+  let {
+    numColumns = 3,
+    children,
+    onPress,
+    style,
+    ...rest
+  } = _ref;
+  const width = getWidth(numColumns);
+  return /*#__PURE__*/React.createElement(Touchable, {
+    disabled: !onPress,
+    onPress: onPress,
+    style: [style, {
+      width
+    }],
+    ...rest
+  }, children);
+};
+export default withTheme(Card);ef => {
   let {
     numColumns = 3,
     children,

package/lib/module/components/FAB.js

@@ -1,4 +1,3 @@
-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); }
 import * as React from "react";
 import { View, StyleSheet, Pressable, ActivityIndicator, Platform } from "react-native";
 import { withTheme } from "../theming";
@@ -25,7 +24,7 @@ const FAB = _ref => {
       borderRadius: size / 2,
       overflow: "hidden"
     }, style]
-  }, /*#__PURE__*/React.createElement(Pressable, _extends({
+  }, /*#__PURE__*/React.createElement(Pressable, {
     onPress: onPress,
     disabled: loading || disabled,
     android_ripple: {
@@ -43,8 +42,9 @@ const FAB = _ref => {
         borderRadius: size / 2,
         backgroundColor
       }];
-    }
-  }, props), /*#__PURE__*/React.createElement(View, null, loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
+    },
+    ...props
+  }, /*#__PURE__*/React.createElement(View, null, loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
     style: size > 50 ? {
       marginTop: 2,
       marginLeft: 2
@@ -70,4 +70,22 @@ const styles = StyleSheet.create({
     })
   }
 });
+export default withTheme(FAB);  name: iconName,
+    size: size,
+    color: color
+  }))));
+};
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "#5a45ff",
+    justifyContent: "center",
+    alignItems: "center",
+    ...Platform.select({
+      web: {
+        cursor: "pointer",
+        userSelect: "none"
+      }
+    })
+  }
+});
 export default withTheme(FAB);

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

@@ -1,4 +1,3 @@
-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); }
 import * as React from "react";
 import { View, StyleSheet } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -11,7 +10,6 @@ import TextField from "../TextField";
 import Touchable from "../Touchable";
 import { extractStyles } from "../../utilities";
 const Picker = _ref => {
-  var _options$find$label, _options$find;
   let {
     Icon,
     style,
@@ -25,6 +23,7 @@ const Picker = _ref => {
     },
     ...props
   } = _ref;
+  var _a, _b;
   const {
     viewStyles: {
       borderRadius,
@@ -65,26 +64,24 @@ const Picker = _ref => {
   };
 
   const stylesWithoutMargin = style && omit(StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
-  const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
+  const selectedLabel = selectedValue && ((_b = (_a = options.find(o => o.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : selectedValue);
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.container, viewStyles]
   }, /*#__PURE__*/React.createElement(Touchable, {
     disabled: disabled,
     onPress: toggleVisibility
-  }, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
+  }, /*#__PURE__*/React.createElement(TextField, {
+    ...props,
     value: String(selectedLabel),
-    placeholder: placeholder
+    placeholder: placeholder,
     // @ts-ignore
-    ,
-    ref: textField // cannot determine if ref is of correct type due to component being wrapped in a withTheme()
-    ,
+    ref: textField,
     disabled: disabled,
-    pointerEvents: "none"
+    pointerEvents: "none",
     // @ts-expect-error
-    ,
     style: stylesWithoutMargin,
     Icon: Icon
-  }))), pickerVisible && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
+  })), pickerVisible && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
     style: [styles.picker, {
       backgroundColor: colors.divider
     }]
@@ -128,4 +125,32 @@ const styles = StyleSheet.create({
     alignSelf: "flex-end"
   }
 });
+export default withTheme(Picker);nValueChange
+  }, options.map(o => /*#__PURE__*/React.createElement(NativePicker.Item, {
+    label: o.label,
+    value: o.value,
+    key: o.value
+  })))))));
+};
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: "stretch"
+  },
+  picker: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flexDirection: "row",
+    justifyContent: "center"
+  },
+  pickerContainer: {
+    backgroundColor: "white",
+    flexDirection: "column",
+    width: "100%"
+  },
+  closeButton: {
+    alignSelf: "flex-end"
+  }
+});
 export default withTheme(Picker);

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

@@ -1,4 +1,3 @@
-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); }
 import * as React from "react";
 import { View, StyleSheet } from "react-native";
 import { Picker as NativePicker } from "@react-native-picker/picker";
@@ -8,7 +7,6 @@ import { extractStyles } from "../../utilities";
 import TextField from "../TextField";
 import Touchable from "../Touchable";
 const Picker = _ref => {
-  var _options$find$label, _options$find;
   let {
     style,
     options,
@@ -18,6 +16,7 @@ const Picker = _ref => {
     onValueChange: onValueChangeOverride = () => {},
     ...props
   } = _ref;
+  var _a, _b;
   const {
     viewStyles: {
       borderRadius,
@@ -62,7 +61,7 @@ const Picker = _ref => {
   };
 
   const stylesWithoutMargin = style && omit(StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
-  const selectedLabel = selectedValue && ((_options$find$label = (_options$find = options.find(o => o.value === selectedValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : selectedValue);
+  const selectedLabel = selectedValue && ((_b = (_a = options.find(o => o.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : selectedValue);
   return /*#__PURE__*/React.createElement(Touchable, {
     disabled: disabled,
     onPress: toggleFocus,
@@ -85,6 +84,25 @@ const Picker = _ref => {
     label: o.label,
     value: o.value,
     key: o.value
+  }))), /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "none"
+  }, /*#__PURE__*/React.createElement(TextField, {
+    ...props,
+    value: selectedLabel,
+    placeholder: placeholder,
+    // @ts-ignore
+    ref: textField,
+    disabled: disabled,
+    // @ts-expect-error
+    style: stylesWithoutMargin
+  }))));
+};
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: "stretch"
+  }
+});
+export default withTheme(Picker);y: o.value
   }))), /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none"
   }, /*#__PURE__*/React.createElement(TextField, _extends({}, props, {

package/lib/module/components/Switch.js

@@ -1,4 +1,3 @@
-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); }
 import * as React from "react";
 import { Switch as NativeSwitch } from "react-native";
 import { withTheme } from "../theming";
@@ -29,7 +28,6 @@ function Switch(_ref) {
       setChecked(value);
     }
   }, [value, checked]);
-
   // This special logic is to handle weird APIs like Airtable that return
   // true or undefined for a boolean
   const previousDefaultValue = usePrevious(defaultValue);
@@ -38,24 +36,24 @@ function Switch(_ref) {
       setChecked(Boolean(defaultValue));
     }
   }, [defaultValue, previousDefaultValue]);
-  return /*#__PURE__*/React.createElement(NativeSwitch, _extends({
+  return /*#__PURE__*/React.createElement(NativeSwitch, {
     value: checked,
     disabled: disabled,
     trackColor: {
       false: inactiveTrackThemeColor,
       true: activeTrackThemeColor
     },
-    thumbColor: value ? activeThumbThemeColor : inactiveThumbThemeColor
+    thumbColor: value ? activeThumbThemeColor : inactiveThumbThemeColor,
     // @ts-ignore react-native-web only
-    ,
     activeThumbColor: activeThumbThemeColor,
     ios_backgroundColor: inactiveTrackThemeColor,
     style: style,
     onValueChange: bool => {
       setChecked(bool);
       onValueChange && onValueChange(bool);
-    }
-  }, rest));
+    },
+    ...rest
+  });
 }
 function Row(_ref2) {
   let {
@@ -84,7 +82,7 @@ function Row(_ref2) {
       setChecked(defaultValue);
     }
   }, [defaultValue]);
-  return /*#__PURE__*/React.createElement(FormRow, _extends({
+  return /*#__PURE__*/React.createElement(FormRow, {
     disabled: disabled,
     onPress: () => {
       setChecked(!checked);
@@ -92,8 +90,9 @@ function Row(_ref2) {
     },
     label: label,
     direction: direction,
-    style: style
-  }, rest), /*#__PURE__*/React.createElement(Switch, {
+    style: style,
+    ...rest
+  }, /*#__PURE__*/React.createElement(Switch, {
     theme: theme,
     value: checked,
     disabled: disabled,
@@ -106,4 +105,16 @@ function Row(_ref2) {
 }
 const SwitchRow = withTheme(Row);
 export { SwitchRow };
+export default withTheme(Switch);: theme,
+    value: checked,
+    disabled: disabled,
+    onValueChange: onValueChange,
+    activeTrackColor: activeTrackColor,
+    inactiveTrackColor: inactiveTrackColor,
+    activeThumbColor: activeThumbColor,
+    inactiveThumbColor: inactiveThumbColor
+  }));
+}
+const SwitchRow = withTheme(Row);
+export { SwitchRow };
 export default withTheme(Switch);

package/lib/module/components/TextField.js

@@ -1,7 +1,3 @@
-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); }
 import * as React from "react";
 import { View, Animated, TextInput as NativeTextInput, StyleSheet, Text, I18nManager } from "react-native";
 import { withTheme } from "../theming";
@@ -13,7 +9,7 @@ const ICON_SIZE = 24;
 class TextField extends React.Component {
   constructor() {
     super(...arguments);
-    _defineProperty(this, "state", {
+    this.state = {
       nativeProps: {},
       labeled: new Animated.Value(this.props.value || this.props.error ? 0 : 1),
       focused: false,
@@ -22,47 +18,46 @@ class TextField extends React.Component {
         measured: false,
         width: 0
       }
-    });
-    _defineProperty(this, "_timer", setTimeout(() => {}, 0));
-    _defineProperty(this, "_showPlaceholder", () => {
+    };
+    this._timer = setTimeout(() => {}, 0);
+    this._showPlaceholder = () => {
       clearTimeout(this._timer);
-
       // Set the placeholder in a delay to offset the label animation
       // If we show it immediately, they'll overlap and look ugly
       this._timer = setTimeout(() => this.setState({
         placeholder: this.props.placeholder
       }), 50);
-    });
-    _defineProperty(this, "_hidePlaceholder", () => this.setState({
+    };
+    this._hidePlaceholder = () => this.setState({
       placeholder: ""
-    }));
-    _defineProperty(this, "_restoreLabel", () => Animated.timing(this.state.labeled, {
+    });
+    this._restoreLabel = () => Animated.timing(this.state.labeled, {
       toValue: 1,
       duration: FOCUS_ANIMATION_DURATION,
       useNativeDriver: true
-    }).start());
-    _defineProperty(this, "_minmizeLabel", () => Animated.timing(this.state.labeled, {
+    }).start();
+    this._minmizeLabel = () => Animated.timing(this.state.labeled, {
       toValue: 0,
       duration: BLUR_ANIMATION_DURATION,
       useNativeDriver: true
-    }).start());
-    _defineProperty(this, "_handleFocus", () => {
+    }).start();
+    this._handleFocus = () => {
       if (this.props.disabled) {
         return;
       }
       this.setState({
         focused: true
       });
-    });
-    _defineProperty(this, "_handleBlur", () => {
+    };
+    this._handleBlur = () => {
       if (this.props.disabled) {
         return;
       }
       this.setState({
         focused: false
       });
-    });
-    _defineProperty(this, "_handleChangeText", value => {
+    };
+    this._handleChangeText = value => {
       if (this.props.disabled) {
         return;
       }
@@ -77,8 +72,8 @@ class TextField extends React.Component {
         });
         this.props.onChangeText && this.props.onChangeText(value.nativeEvent.text);
       }
-    });
-    _defineProperty(this, "_root", undefined);
+    };
+    this._root = undefined;
   }
   static getDerivedStateFromProps(nextProps, prevState) {
     return {
@@ -165,7 +160,9 @@ class TextField extends React.Component {
         roundness,
         disabledOpacity
       },
-      render = props => /*#__PURE__*/React.createElement(NativeTextInput, props),
+      render = props => /*#__PURE__*/React.createElement(NativeTextInput, {
+        ...props
+      }),
       ...rest
     } = this.props;
     const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
@@ -305,9 +302,10 @@ class TextField extends React.Component {
     } = StyleSheet.flatten(style || {});
     return /*#__PURE__*/React.createElement(View, {
       style: [styles.container, styleProp]
-    }, leftIconName && leftIconMode === "outset" ? /*#__PURE__*/React.createElement(Icon, _extends({}, leftIconProps, {
+    }, leftIconName && leftIconMode === "outset" ? /*#__PURE__*/React.createElement(Icon, {
+      ...leftIconProps,
       style: leftIconStyle
-    })) : null, /*#__PURE__*/React.createElement(View, {
+    }) : null, /*#__PURE__*/React.createElement(View, {
       style: applyStyles([containerStyle], {
         height: style === null || style === void 0 ? void 0 : style.height,
         backgroundColor: bgColor,
@@ -375,9 +373,10 @@ class TextField extends React.Component {
       style: {
         justifyContent: type === "solid" ? "center" : undefined
       }
-    }, /*#__PURE__*/React.createElement(Icon, _extends({}, leftIconProps, {
+    }, /*#__PURE__*/React.createElement(Icon, {
+      ...leftIconProps,
       style: leftIconStyle
-    }))) : null, render({
+    })) : null, render({
       ref: c => {
         this._root = c;
       },
@@ -414,6 +413,57 @@ class TextField extends React.Component {
   }
 }
 export default withTheme(TextField);
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: "stretch"
+  },
+  placeholder: {
+    position: "absolute",
+    left: 0
+  },
+  underline: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 2
+  },
+  input: {
+    flexGrow: 1,
+    justifyContent: "center",
+    textAlignVertical: "center",
+    margin: 0,
+    textAlign: I18nManager.isRTL ? "right" : "left"
+  }
+});ionColor: activeColor,
+      multiline,
+      numberOfLines,
+      onFocus: this._handleFocus,
+      onBlur: this._handleBlur,
+      underlineColorAndroid: "transparent",
+      style: inputStyles,
+      ...rest,
+      ...this.state.nativeProps,
+      value: this.state.value
+    })), rightIconName ? /*#__PURE__*/React.createElement(Icon, {
+      name: rightIconName,
+      size: ICON_SIZE,
+      color: colors.light,
+      style: {
+        position: "absolute",
+        right: 16,
+        marginTop: type === "solid" ? MINIMIZED_LABEL_FONT_SIZE + 4 : 16
+      }
+    }) : null, assistiveText ? /*#__PURE__*/React.createElement(Text, {
+      style: [{
+        color: error ? colors.error : colors.light,
+        marginTop: 8,
+        marginLeft: assistiveTextLeftMargin
+      }]
+    }, assistiveText) : null);
+  }
+}
+export default withTheme(TextField);
 const styles = StyleSheet.create({
   container: {
     alignSelf: "stretch"

package/lib/module/components/Touchable.js

@@ -1,4 +1,3 @@
-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); }
 import React from "react";
 import { Pressable } from "react-native";
 export default function Touchable(_ref) {
@@ -9,6 +8,24 @@ export default function Touchable(_ref) {
     style,
     ...props
   } = _ref;
+  return /*#__PURE__*/React.createElement(Pressable, {
+    onPress: onPress,
+    disabled: disabled,
+    hitSlop: 8,
+    style: _ref2 => {
+      let {
+        pressed
+      } = _ref2;
+      return [{
+        opacity: pressed || disabled ? 0.75 : 1
+      }, style];
+    },
+    ...props
+  }, children);
+},
+    style,
+    ...props
+  } = _ref;
   return /*#__PURE__*/React.createElement(Pressable, _extends({
     onPress: onPress,
     disabled: disabled,

package/lib/module/mappings/DatePickerModal.js

@@ -0,0 +1,65 @@
+import { COMPONENT_TYPES, FORM_TYPES, FIELD_NAME, Triggers, StylesPanelSections, createBoolProp, createTextProp, createTextEnumProp, createStaticBoolProp, createStaticNumberProp } from "@draftbit/types";
+export const SHARED_SEED_DATA = {
+  triggers: [Triggers.OnDismiss, Triggers.OnConfirm, Triggers.OnChange],
+  category: COMPONENT_TYPES.input,
+  StylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Background, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position],
+  layout: null
+};
+export const SHARED_SEED_DATA_PROPS = {
+  locale: {},
+  visible: createBoolProp({
+    label: "Visible",
+    description: "If true, show the modal. If false, hide the modal.",
+    required: true
+  }),
+  label: createTextProp({
+    label: "Label",
+    description: "Label used as the header in the component, defaults to `Select Date`"
+  }),
+  saveLabel: createTextProp({
+    label: "Save Label",
+    description: "Label used to confirm a date selection. Defaults to `Save`."
+  }),
+  saveLabelDisabled: createStaticBoolProp({
+    label: "Disable Save Label",
+    description: "Flag indicating if the save label should be disabled and unable to receive events"
+  }),
+  uppercase: createStaticBoolProp({
+    label: "Uppercase",
+    description: "Flag indicating if the text in the component should be uppercase. Defaults to true."
+  }),
+  startYear: createStaticNumberProp({
+    label: "Start Year",
+    description: "The start year when the component is rendered. Defaults to 1800.",
+    required: false
+  }),
+  endYear: createStaticNumberProp({
+    label: "End Year",
+    description: "The end year when the component is rendered. Defaults to 2200.",
+    required: false
+  })
+};
+export const SEED_DATA = [{
+  name: "Single Date Picker Modal",
+  tag: "SingleDatePickerModal",
+  description: "A modal allowing date selection.",
+  ...SHARED_SEED_DATA,
+  props: {
+    mode: createTextEnumProp({
+      label: "Mode",
+      description: "The selection mode of the date picker",
+      required: true,
+      options: ["single", "multiple", "range"],
+      editable: false,
+      defaultValue: "single",
+      formType: FORM_TYPES.flatArray
+    }),
+    fieldName: {
+      ...FIELD_NAME,
+      handlerPropName: "onConfirm",
+      valuePropName: "date",
+      defaultValue: "date"
+    },
+    ...SHARED_SEED_DATA_PROPS
+  }
+}];

package/lib/typescript/src/mappings/DatePickerModal.d.ts

@@ -0,0 +1,153 @@
+export declare const SHARED_SEED_DATA: {
+    triggers: string[];
+    category: string;
+    StylesPanelSections: string[];
+    layout: null;
+};
+export declare const SHARED_SEED_DATA_PROPS: {
+    locale: {};
+    visible: {
+        label: string;
+        description: string;
+        formType: string;
+        propType: string;
+        defaultValue: boolean;
+        editable: boolean;
+        required: boolean;
+        group: string;
+    };
+    label: any;
+    saveLabel: any;
+    saveLabelDisabled: {
+        label: string;
+        description: string;
+        formType: string;
+        propType: string;
+        defaultValue: boolean;
+        editable: boolean;
+        required: boolean;
+        group: string;
+    };
+    uppercase: {
+        label: string;
+        description: string;
+        formType: string;
+        propType: string;
+        defaultValue: boolean;
+        editable: boolean;
+        required: boolean;
+        group: string;
+    };
+    startYear: {
+        label: string;
+        description: string;
+        formType: string;
+        propType: string;
+        group: string;
+        defaultValue: null;
+        editable: boolean;
+        required: boolean;
+        step: number;
+    };
+    endYear: {
+        label: string;
+        description: string;
+        formType: string;
+        propType: string;
+        group: string;
+        defaultValue: null;
+        editable: boolean;
+        required: boolean;
+        step: number;
+    };
+};
+export declare const SEED_DATA: {
+    props: {
+        locale: {};
+        visible: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        label: any;
+        saveLabel: any;
+        saveLabelDisabled: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        uppercase: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        startYear: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        endYear: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        mode: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            options: never[];
+        };
+        fieldName: {
+            handlerPropName: string;
+            valuePropName: string;
+            defaultValue: string;
+            group: string;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            editable: boolean;
+            required: boolean;
+        };
+    };
+    triggers: string[];
+    category: string;
+    StylesPanelSections: string[];
+    layout: null;
+    name: string;
+    tag: string;
+    description: string;
+}[];
+//# sourceMappingURL=DatePickerModal.d.ts.map

package/lib/typescript/src/mappings/DatePickerModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerModal.d.ts","sourceRoot":"","sources":["../../../../src/mappings/DatePickerModal.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,gBAAgB;;;;;CAW5B,CAAC;AACF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsClC,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyBrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "47.0.1-9fd6f2.2+9fd6f28",
+  "version": "47.0.1-df014a.2+df014a6",
   "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": "^47.0.1-9fd6f2.2+9fd6f28",
+    "@draftbit/types": "^47.0.1-df014a.2+df014a6",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.4",
@@ -91,5 +91,5 @@
       ]
     ]
   },
-  "gitHead": "9fd6f289b4dc38787b6d90b479ef5977e85ba64e"
+  "gitHead": "df014a665028fd9c7f159e2c7f4fd5bdb4de22e0"
 }

package/src/mappings/DatePickerModal.js

@@ -0,0 +1,73 @@
+import { COMPONENT_TYPES, FORM_TYPES, FIELD_NAME, Triggers, StylesPanelSections, createBoolProp, createTextProp, createTextEnumProp, createStaticBoolProp, createStaticNumberProp, } from "@draftbit/types";
+export const SHARED_SEED_DATA = {
+    triggers: [Triggers.OnDismiss, Triggers.OnConfirm, Triggers.OnChange],
+    category: COMPONENT_TYPES.input,
+    StylesPanelSections: [
+        StylesPanelSections.Typography,
+        StylesPanelSections.Background,
+        StylesPanelSections.Size,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Position,
+    ],
+    layout: null,
+};
+export const SHARED_SEED_DATA_PROPS = {
+    locale: {},
+    visible: createBoolProp({
+        label: "Visible",
+        description: "If true, show the modal. If false, hide the modal.",
+        required: true,
+    }),
+    label: createTextProp({
+        label: "Label",
+        description: "Label used as the header in the component, defaults to `Select Date`",
+    }),
+    saveLabel: createTextProp({
+        label: "Save Label",
+        description: "Label used to confirm a date selection. Defaults to `Save`.",
+    }),
+    saveLabelDisabled: createStaticBoolProp({
+        label: "Disable Save Label",
+        description: "Flag indicating if the save label should be disabled and unable to receive events",
+    }),
+    uppercase: createStaticBoolProp({
+        label: "Uppercase",
+        description: "Flag indicating if the text in the component should be uppercase. Defaults to true.",
+    }),
+    startYear: createStaticNumberProp({
+        label: "Start Year",
+        description: "The start year when the component is rendered. Defaults to 1800.",
+        required: false,
+    }),
+    endYear: createStaticNumberProp({
+        label: "End Year",
+        description: "The end year when the component is rendered. Defaults to 2200.",
+        required: false,
+    }),
+};
+export const SEED_DATA = [
+    {
+        name: "Single Date Picker Modal",
+        tag: "SingleDatePickerModal",
+        description: "A modal allowing date selection.",
+        ...SHARED_SEED_DATA,
+        props: {
+            mode: createTextEnumProp({
+                label: "Mode",
+                description: "The selection mode of the date picker",
+                required: true,
+                options: ["single", "multiple", "range"],
+                editable: false,
+                defaultValue: "single",
+                formType: FORM_TYPES.flatArray,
+            }),
+            fieldName: {
+                ...FIELD_NAME,
+                handlerPropName: "onConfirm",
+                valuePropName: "date",
+                defaultValue: "date",
+            },
+            ...SHARED_SEED_DATA_PROPS,
+        },
+    },
+];

package/src/mappings/DatePickerModal.ts

@@ -0,0 +1,91 @@
+import {
+  COMPONENT_TYPES,
+  FORM_TYPES,
+  FIELD_NAME,
+  Triggers,
+  StylesPanelSections,
+  createBoolProp,
+  createTextProp,
+  createTextEnumProp,
+  createStaticBoolProp,
+  createStaticNumberProp,
+} from "@draftbit/types";
+
+export const SHARED_SEED_DATA = {
+  triggers: [Triggers.OnDismiss, Triggers.OnConfirm, Triggers.OnChange],
+  category: COMPONENT_TYPES.input,
+  StylesPanelSections: [
+    StylesPanelSections.Typography,
+    StylesPanelSections.Background,
+    StylesPanelSections.Size,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Position,
+  ],
+  layout: null,
+};
+export const SHARED_SEED_DATA_PROPS = {
+  locale: {},
+  visible: createBoolProp({
+    label: "Visible",
+    description: "If true, show the modal. If false, hide the modal.",
+    required: true,
+  }),
+  label: createTextProp({
+    label: "Label",
+    description:
+      "Label used as the header in the component, defaults to `Select Date`",
+  }),
+  saveLabel: createTextProp({
+    label: "Save Label",
+    description: "Label used to confirm a date selection. Defaults to `Save`.",
+  }),
+  saveLabelDisabled: createStaticBoolProp({
+    label: "Disable Save Label",
+    description:
+      "Flag indicating if the save label should be disabled and unable to receive events",
+  }),
+  uppercase: createStaticBoolProp({
+    label: "Uppercase",
+    description:
+      "Flag indicating if the text in the component should be uppercase. Defaults to true.",
+  }),
+  startYear: createStaticNumberProp({
+    label: "Start Year",
+    description:
+      "The start year when the component is rendered. Defaults to 1800.",
+    required: false,
+  }),
+  endYear: createStaticNumberProp({
+    label: "End Year",
+    description:
+      "The end year when the component is rendered. Defaults to 2200.",
+    required: false,
+  }),
+};
+
+export const SEED_DATA = [
+  {
+    name: "Single Date Picker Modal",
+    tag: "SingleDatePickerModal",
+    description: "A modal allowing date selection.",
+    ...SHARED_SEED_DATA,
+    props: {
+      mode: createTextEnumProp({
+        label: "Mode",
+        description: "The selection mode of the date picker",
+        required: true,
+        options: ["single", "multiple", "range"],
+        editable: false,
+        defaultValue: "single",
+        formType: FORM_TYPES.flatArray,
+      }),
+      fieldName: {
+        ...FIELD_NAME,
+        handlerPropName: "onConfirm",
+        valuePropName: "date",
+        defaultValue: "date",
+      },
+      ...SHARED_SEED_DATA_PROPS,
+    },
+  },
+];