@draftbit/core 46.7.9-fa5e7c.2 → 46.8.0

package/lib/commonjs/components/DatePicker/DatePicker.js

@@ -48,6 +48,7 @@ const DatePicker = _ref => {
     placeholder,
     borderColor: inputBorderColor,
     borderColorActive: inputBorderColorActive,
+    autoDismissKeyboard = true,
     ...props
   } = _ref;
   const [value, setValue] = React.useState(date || defaultValue);
@@ -143,6 +144,11 @@ const DatePicker = _ref => {
       clearTimeout(_showPlaceholder());
     };
   }, [focused, label, placeholder]);
+  React.useEffect(() => {
+    if (pickerVisible && autoDismissKeyboard) {
+      _reactNative.Keyboard.dismiss();
+    }
+  }, [pickerVisible, autoDismissKeyboard]);
   const _handleFocus = () => {
     if (disabled) {
       return;
@@ -160,7 +166,14 @@ const DatePicker = _ref => {
   const MAXIMIZED_LABEL_FONT_SIZE = textStyles.fontSize || typography.subtitle1.fontSize;
   const MINIMIZED_LABEL_FONT_SIZE = labelSize ? labelSize : typography.caption.fontSize;
   const hasActiveOutline = focused;
-  let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
+  let inputTextColor,
+    activeColor,
+    underlineColor,
+    borderColor = inputBorderColor,
+    placeholderColor,
+    containerStyle,
+    backgroundColor,
+    inputStyle;
   inputTextColor = colors.strong;
   if (disabled) {
     activeColor = colors.light;

package/lib/commonjs/components/NumberInput.js

@@ -32,17 +32,8 @@ const NumberInput = _ref => {
         return valueToFormat.toString();
       }
     }
-    return "0";
+    return "";
   };
-
-  // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
-  (0, _react.useEffect)(() => {
-    const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
-    if (currentStringNumberValue !== defaultStringNumberValue) {
-      setCurrentStringNumberValue(defaultStringNumberValue);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   const handleChangeText = newValue => {
     const newStringNumberValue = formatValueToStringNumber(newValue);
     const number = parseFloat(newStringNumberValue);
@@ -58,6 +49,15 @@ const NumberInput = _ref => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
+
+  // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
+  (0, _react.useEffect)(() => {
+    const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
+    if (currentStringNumberValue !== defaultStringNumberValue) {
+      setCurrentStringNumberValue(defaultStringNumberValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, _extends({
     keyboardType: "numeric",
     value: currentStringNumberValue,

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

@@ -42,6 +42,7 @@ const {
   height: deviceHeight
 } = _reactNative.Dimensions.get("screen");
 const isIos = _reactNative.Platform.OS === "ios";
+const isWeb = _reactNative.Platform.OS === "web";
 const unstyledColor = "rgba(165, 173, 183, 1)";
 const disabledColor = "rgb(240, 240, 240)";
 const errorColor = "rgba(255, 69, 100, 1)";
@@ -65,7 +66,8 @@ const Picker = _ref => {
     leftIconName,
     placeholderTextColor = unstyledColor,
     rightIconName,
-    type = "solid"
+    type = "solid",
+    autoDismissKeyboard = true
   } = _ref;
   const androidPickerRef = React.useRef(undefined);
   const [internalValue, setInternalValue] = React.useState(value || defaultValue);
@@ -89,6 +91,11 @@ const Picker = _ref => {
       androidPickerRef === null || androidPickerRef === void 0 ? void 0 : (_androidPickerRef$cur = androidPickerRef.current) === null || _androidPickerRef$cur === void 0 ? void 0 : _androidPickerRef$cur.focus();
     }
   }, [pickerVisible, androidPickerRef]);
+  React.useEffect(() => {
+    if (pickerVisible && autoDismissKeyboard) {
+      _reactNative.Keyboard.dismiss();
+    }
+  }, [pickerVisible, autoDismissKeyboard]);
   const normalizedOptions = normalizeOptions(options);
   const pickerOptions = placeholder ? [{
     value: placeholder,
@@ -233,8 +240,8 @@ const Picker = _ref => {
       label: option.label,
       value: option.value,
       key: option.value
-    })))))) : null, !isIos && pickerVisible ? /*#__PURE__*/React.createElement(_picker.Picker, {
-      enabled: pickerVisible,
+    })))))) : null, !isIos && (pickerVisible || isWeb) ? /*#__PURE__*/React.createElement(_picker.Picker, {
+      enabled: !disabled,
       selectedValue: internalValue,
       onValueChange: handleValueChange,
       style: styles.nonIosPicker,

package/lib/commonjs/mappings/DatePicker.js

@@ -37,7 +37,8 @@ const SEED_DATA_PROPS = {
     label: "Border Color"
   }),
   borderColorActive: (0, _types.createColorProp)({
-    label: "Border Color"
+    label: "Active Border Color",
+    description: "Color of border when date picker is active"
   }),
   format: {
     label: "Format",
@@ -169,7 +170,12 @@ const SEED_DATA = [{
       editable: true,
       required: true,
       group: _types.GROUPS.basic
-    }
+    },
+    autoDismissKeyboard: (0, _types.createStaticBoolProp)({
+      label: "Auto dismiss keyboard",
+      description: "Automatically dismiss keyboard when DatePicker is opened",
+      defaultValue: true
+    })
   }
 }];
 exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/DeckSwiper.js

@@ -11,6 +11,9 @@ const SEED_DATA = {
   description: "Deck swiper container",
   category: _types.COMPONENT_TYPES.swiper,
   stylesPanelSections: _types.BLOCK_STYLES_SECTIONS,
+  layout: {
+    width: "100%"
+  },
   triggers: [_types.Triggers.OnIndexChanged, _types.Triggers.OnEndReached],
   props: {
     onIndexChanged: (0, _types.createActionProp)({

package/lib/commonjs/mappings/DeckSwiperCard.js

@@ -11,6 +11,13 @@ const SEED_DATA = {
   description: "Single Deck Swiper Card item to be used in DeckSwiper",
   category: _types.COMPONENT_TYPES.swiper,
   stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 20,
+    borderWidth: 2
+  },
   props: {}
 };
 exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/Picker.js

@@ -142,6 +142,11 @@ const SEED_DATA = [{
     }),
     iconColor: (0, _types.createColorProp)({
       label: "Icon Color"
+    }),
+    autoDismissKeyboard: (0, _types.createStaticBoolProp)({
+      label: "Auto dismiss keyboard",
+      description: "Automatically dismiss keyboard when Picker is opened",
+      defaultValue: true
     })
   },
   layout: {}

package/lib/module/components/DatePicker/DatePicker.js

@@ -1,6 +1,6 @@
 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, Animated, Text, StyleSheet, I18nManager, TextInput as NativeTextInput } from "react-native";
+import { View, Animated, Text, StyleSheet, I18nManager, TextInput as NativeTextInput, Keyboard } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import dateFormat from "dateformat";
 import { withTheme } from "../../theming";
@@ -39,6 +39,7 @@ const DatePicker = _ref => {
     placeholder,
     borderColor: inputBorderColor,
     borderColorActive: inputBorderColorActive,
+    autoDismissKeyboard = true,
     ...props
   } = _ref;
   const [value, setValue] = React.useState(date || defaultValue);
@@ -134,6 +135,11 @@ const DatePicker = _ref => {
       clearTimeout(_showPlaceholder());
     };
   }, [focused, label, placeholder]);
+  React.useEffect(() => {
+    if (pickerVisible && autoDismissKeyboard) {
+      Keyboard.dismiss();
+    }
+  }, [pickerVisible, autoDismissKeyboard]);
   const _handleFocus = () => {
     if (disabled) {
       return;
@@ -151,7 +157,14 @@ const DatePicker = _ref => {
   const MAXIMIZED_LABEL_FONT_SIZE = textStyles.fontSize || typography.subtitle1.fontSize;
   const MINIMIZED_LABEL_FONT_SIZE = labelSize ? labelSize : typography.caption.fontSize;
   const hasActiveOutline = focused;
-  let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
+  let inputTextColor,
+    activeColor,
+    underlineColor,
+    borderColor = inputBorderColor,
+    placeholderColor,
+    containerStyle,
+    backgroundColor,
+    inputStyle;
   inputTextColor = colors.strong;
   if (disabled) {
     activeColor = colors.light;

package/lib/module/components/NumberInput.js

@@ -24,17 +24,8 @@ const NumberInput = _ref => {
         return valueToFormat.toString();
       }
     }
-    return "0";
+    return "";
   };
-
-  // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
-  useEffect(() => {
-    const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
-    if (currentStringNumberValue !== defaultStringNumberValue) {
-      setCurrentStringNumberValue(defaultStringNumberValue);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   const handleChangeText = newValue => {
     const newStringNumberValue = formatValueToStringNumber(newValue);
     const number = parseFloat(newStringNumberValue);
@@ -50,6 +41,15 @@ const NumberInput = _ref => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
+
+  // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
+  useEffect(() => {
+    const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
+    if (currentStringNumberValue !== defaultStringNumberValue) {
+      setCurrentStringNumberValue(defaultStringNumberValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/React.createElement(TextInput, _extends({
     keyboardType: "numeric",
     value: currentStringNumberValue,

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { View, StyleSheet, Text, Platform, Dimensions } from "react-native";
+import { View, StyleSheet, Text, Platform, Dimensions, Keyboard } from "react-native";
 import { omit, pickBy, identity, isObject } from "lodash";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Picker as NativePicker } from "@react-native-picker/picker";
@@ -33,6 +33,7 @@ const {
   height: deviceHeight
 } = Dimensions.get("screen");
 const isIos = Platform.OS === "ios";
+const isWeb = Platform.OS === "web";
 const unstyledColor = "rgba(165, 173, 183, 1)";
 const disabledColor = "rgb(240, 240, 240)";
 const errorColor = "rgba(255, 69, 100, 1)";
@@ -56,7 +57,8 @@ const Picker = _ref => {
     leftIconName,
     placeholderTextColor = unstyledColor,
     rightIconName,
-    type = "solid"
+    type = "solid",
+    autoDismissKeyboard = true
   } = _ref;
   const androidPickerRef = React.useRef(undefined);
   const [internalValue, setInternalValue] = React.useState(value || defaultValue);
@@ -80,6 +82,11 @@ const Picker = _ref => {
       androidPickerRef === null || androidPickerRef === void 0 ? void 0 : (_androidPickerRef$cur = androidPickerRef.current) === null || _androidPickerRef$cur === void 0 ? void 0 : _androidPickerRef$cur.focus();
     }
   }, [pickerVisible, androidPickerRef]);
+  React.useEffect(() => {
+    if (pickerVisible && autoDismissKeyboard) {
+      Keyboard.dismiss();
+    }
+  }, [pickerVisible, autoDismissKeyboard]);
   const normalizedOptions = normalizeOptions(options);
   const pickerOptions = placeholder ? [{
     value: placeholder,
@@ -224,8 +231,8 @@ const Picker = _ref => {
       label: option.label,
       value: option.value,
       key: option.value
-    })))))) : null, !isIos && pickerVisible ? /*#__PURE__*/React.createElement(NativePicker, {
-      enabled: pickerVisible,
+    })))))) : null, !isIos && (pickerVisible || isWeb) ? /*#__PURE__*/React.createElement(NativePicker, {
+      enabled: !disabled,
       selectedValue: internalValue,
       onValueChange: handleValueChange,
       style: styles.nonIosPicker,

package/lib/module/mappings/DatePicker.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp } from "@draftbit/types";
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp, createStaticBoolProp } from "@draftbit/types";
 const SEED_DATA_PROPS = {
   mode: {
     label: "Mode",
@@ -31,7 +31,8 @@ const SEED_DATA_PROPS = {
     label: "Border Color"
   }),
   borderColorActive: createColorProp({
-    label: "Border Color"
+    label: "Active Border Color",
+    description: "Color of border when date picker is active"
   }),
   format: {
     label: "Format",
@@ -163,6 +164,11 @@ export const SEED_DATA = [{
       editable: true,
       required: true,
       group: GROUPS.basic
-    }
+    },
+    autoDismissKeyboard: createStaticBoolProp({
+      label: "Auto dismiss keyboard",
+      description: "Automatically dismiss keyboard when DatePicker is opened",
+      defaultValue: true
+    })
   }
 }];

package/lib/module/mappings/DeckSwiper.js

@@ -5,6 +5,9 @@ export const SEED_DATA = {
   description: "Deck swiper container",
   category: COMPONENT_TYPES.swiper,
   stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  layout: {
+    width: "100%"
+  },
   triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
   props: {
     onIndexChanged: createActionProp({

package/lib/module/mappings/DeckSwiperCard.js

@@ -5,5 +5,12 @@ export const SEED_DATA = {
   description: "Single Deck Swiper Card item to be used in DeckSwiper",
   category: COMPONENT_TYPES.swiper,
   stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 20,
+    borderWidth: 2
+  },
   props: {}
 };

package/lib/module/mappings/Picker.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, Triggers, GROUPS, FORM_TYPES, PROP_TYPES, FIELD_NAME, createIconSizeProp, createColorProp, StylesPanelSections } from "@draftbit/types";
+import { COMPONENT_TYPES, Triggers, GROUPS, FORM_TYPES, PROP_TYPES, FIELD_NAME, createIconSizeProp, createColorProp, StylesPanelSections, createStaticBoolProp } from "@draftbit/types";
 const SEED_DATA_PROPS = {
   label: {
     group: GROUPS.data,
@@ -136,6 +136,11 @@ export const SEED_DATA = [{
     }),
     iconColor: createColorProp({
       label: "Icon Color"
+    }),
+    autoDismissKeyboard: createStaticBoolProp({
+      label: "Auto dismiss keyboard",
+      description: "Automatically dismiss keyboard when Picker is opened",
+      defaultValue: true
     })
   },
   layout: {}

package/lib/typescript/src/components/DatePicker/DatePicker.d.ts

@@ -23,6 +23,7 @@ declare type Props = {
     rightIconName?: string;
     borderColor?: string;
     borderColorActive?: string;
+    autoDismissKeyboard?: boolean;
 } & IconSlot & TextInputProps;
 declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<Props>, "theme"> & {
     theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAKL,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EAKf,MAAM,cAAc,CAAC;AAStB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAStD,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,GAAG;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,KAAK,EAAE,KAAK,CAAC;IAMb,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,GAAG,QAAQ,GACV,cAAc,CAAC;;;;AA+fjB,wBAAqC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAKL,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EAMf,MAAM,cAAc,CAAC;AAStB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAStD,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,GAAG;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,KAAK,EAAE,KAAK,CAAC;IAMb,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,GAAG,QAAQ,GACV,cAAc,CAAC;;;;AAsgBjB,wBAAqC"}

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

@@ -26,6 +26,7 @@ export declare type PickerProps = {
     placeholderTextColor?: string;
     rightIconName?: string;
     type?: "solid" | "underline";
+    autoDismissKeyboard?: boolean;
     theme: Theme;
     Icon: IconSlot["Icon"];
 };

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,EAEV,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,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CACxB,CAAC;;;;AAiaF,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;;;;AA2aF,wBAAiC"}

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

@@ -18,6 +18,16 @@ export declare const SEED_DATA: {
             required: boolean;
             group: string;
         };
+        autoDismissKeyboard: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
         mode: {
             label: string;
             description: string;

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/mappings/DatePicker.ts"],"names":[],"mappings":"AA+JA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BrB,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/mappings/DatePicker.ts"],"names":[],"mappings":"AAiKA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCrB,CAAC"}

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

@@ -4,6 +4,9 @@ export declare const SEED_DATA: {
     description: string;
     category: string;
     stylesPanelSections: string[];
+    layout: {
+        width: string;
+    };
     triggers: string[];
     props: {
         onIndexChanged: {

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

@@ -1 +1 @@
-{"version":3,"file":"DeckSwiper.d.ts","sourceRoot":"","sources":["../../../../src/mappings/DeckSwiper.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CrB,CAAC"}
+{"version":3,"file":"DeckSwiper.d.ts","sourceRoot":"","sources":["../../../../src/mappings/DeckSwiper.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CrB,CAAC"}

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

@@ -4,6 +4,13 @@ export declare const SEED_DATA: {
     description: string;
     category: string;
     stylesPanelSections: string[];
+    layout: {
+        flex: number;
+        alignItems: string;
+        justifyContent: string;
+        padding: number;
+        borderWidth: number;
+    };
     props: {};
 };
 //# sourceMappingURL=DeckSwiperCard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DeckSwiperCard.d.ts","sourceRoot":"","sources":["../../../../src/mappings/DeckSwiperCard.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS;;;;;;;CAOrB,CAAC"}
+{"version":3,"file":"DeckSwiperCard.d.ts","sourceRoot":"","sources":["../../../../src/mappings/DeckSwiperCard.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;CAcrB,CAAC"}

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

@@ -40,6 +40,16 @@ export declare const SEED_DATA: {
             formType: string;
             propType: string;
         };
+        autoDismissKeyboard: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
         label: {
             group: string;
             label: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../../src/mappings/Picker.ts"],"names":[],"mappings":"AA8HA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCrB,CAAC"}
+{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../../src/mappings/Picker.ts"],"names":[],"mappings":"AA+HA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.7.9-fa5e7c.2+fa5e7c6",
+  "version": "46.8.0",
   "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.7.9-fa5e7c.2+fa5e7c6",
+    "@draftbit/types": "^46.8.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -92,5 +92,5 @@
       ]
     ]
   },
-  "gitHead": "fa5e7c6d081c4ed9d54b91c6f832feeb2b46cb78"
+  "gitHead": "c39b951332cf49ab0c1a244b1939f60f241f3ffa"
 }

package/src/components/DatePicker/DatePicker.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { View, Animated, Text, StyleSheet, I18nManager, TextInput as NativeTextInput, } from "react-native";
+import { View, Animated, Text, StyleSheet, I18nManager, TextInput as NativeTextInput, Keyboard, } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import dateFormat from "dateformat";
 import { withTheme } from "../../theming";
@@ -25,7 +25,7 @@ const MONTHS = [
     "November",
     "December",
 ];
-const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disabledOpacity }, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, type = "underline", leftIconName, rightIconName, leftIconMode = "inset", label, labelSize, labelColor, placeholder, borderColor: inputBorderColor, borderColorActive: inputBorderColorActive, ...props }) => {
+const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disabledOpacity }, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, type = "underline", leftIconName, rightIconName, leftIconMode = "inset", label, labelSize, labelColor, placeholder, borderColor: inputBorderColor, borderColorActive: inputBorderColorActive, autoDismissKeyboard = true, ...props }) => {
     const [value, setValue] = React.useState(date || defaultValue);
     React.useEffect(() => {
         if (defaultValue != null) {
@@ -113,6 +113,11 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
             clearTimeout(_showPlaceholder());
         };
     }, [focused, label, placeholder]);
+    React.useEffect(() => {
+        if (pickerVisible && autoDismissKeyboard) {
+            Keyboard.dismiss();
+        }
+    }, [pickerVisible, autoDismissKeyboard]);
     const _handleFocus = () => {
         if (disabled) {
             return;
@@ -132,7 +137,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
         ? labelSize
         : typography.caption.fontSize;
     const hasActiveOutline = focused;
-    let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
+    let inputTextColor, activeColor, underlineColor, borderColor = inputBorderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
     inputTextColor = colors.strong;
     if (disabled) {
         activeColor = colors.light;

package/src/components/DatePicker/DatePicker.tsx

@@ -12,6 +12,7 @@ import {
   I18nManager,
   LayoutChangeEvent,
   TextInput as NativeTextInput,
+  Keyboard,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
@@ -55,6 +56,7 @@ type Props = {
   rightIconName?: string;
   borderColor?: string;
   borderColorActive?: string;
+  autoDismissKeyboard?: boolean;
 } & IconSlot &
   TextInputProps;
 
@@ -93,6 +95,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   placeholder,
   borderColor: inputBorderColor,
   borderColorActive: inputBorderColorActive,
+  autoDismissKeyboard = true,
   ...props
 }) => {
   const [value, setValue] = React.useState<any>(date || defaultValue);
@@ -204,6 +207,12 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     };
   }, [focused, label, placeholder]);
 
+  React.useEffect(() => {
+    if (pickerVisible && autoDismissKeyboard) {
+      Keyboard.dismiss();
+    }
+  }, [pickerVisible, autoDismissKeyboard]);
+
   const _handleFocus = () => {
     if (disabled) {
       return;
@@ -232,7 +241,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   let inputTextColor,
     activeColor,
     underlineColor,
-    borderColor,
+    borderColor = inputBorderColor,
     placeholderColor,
     containerStyle: StyleProp<ViewStyle>,
     backgroundColor,

package/src/components/NumberInput.js

@@ -20,16 +20,8 @@ const NumberInput = ({ onChangeText, value, defaultValue, ...props }) => {
                 return valueToFormat.toString();
             }
         }
-        return "0";
+        return "";
     };
-    // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
-    useEffect(() => {
-        const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
-        if (currentStringNumberValue !== defaultStringNumberValue) {
-            setCurrentStringNumberValue(defaultStringNumberValue);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
     const handleChangeText = (newValue) => {
         const newStringNumberValue = formatValueToStringNumber(newValue);
         const number = parseFloat(newStringNumberValue);
@@ -44,6 +36,14 @@ const NumberInput = ({ onChangeText, value, defaultValue, ...props }) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
+    // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
+    useEffect(() => {
+        const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
+        if (currentStringNumberValue !== defaultStringNumberValue) {
+            setCurrentStringNumberValue(defaultStringNumberValue);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     return (React.createElement(TextInput, { keyboardType: "numeric", value: currentStringNumberValue, onChangeText: handleChangeText, ...props }));
 };
 export default NumberInput;

package/src/components/NumberInput.tsx

@@ -31,19 +31,9 @@ const NumberInput: FC<Props> = ({
       }
     }
 
-    return "0";
+    return "";
   };
 
-  // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
-  useEffect(() => {
-    const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
-
-    if (currentStringNumberValue !== defaultStringNumberValue) {
-      setCurrentStringNumberValue(defaultStringNumberValue);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const handleChangeText = (newValue: string) => {
     const newStringNumberValue = formatValueToStringNumber(newValue);
     const number = parseFloat(newStringNumberValue);
@@ -62,6 +52,16 @@ const NumberInput: FC<Props> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
+  // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
+  useEffect(() => {
+    const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
+
+    if (currentStringNumberValue !== defaultStringNumberValue) {
+      setCurrentStringNumberValue(defaultStringNumberValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <TextInput
       keyboardType="numeric"

package/src/components/Picker/Picker.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { View, StyleSheet, Text, Platform, Dimensions, } from "react-native";
+import { View, StyleSheet, Text, Platform, Dimensions, Keyboard, } from "react-native";
 import { omit, pickBy, identity, isObject } from "lodash";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Picker as NativePicker } from "@react-native-picker/picker";
@@ -32,10 +32,11 @@ function normalizeOptions(options) {
 }
 const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
 const isIos = Platform.OS === "ios";
+const isWeb = Platform.OS === "web";
 const unstyledColor = "rgba(165, 173, 183, 1)";
 const disabledColor = "rgb(240, 240, 240)";
 const errorColor = "rgba(255, 69, 100, 1)";
-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", }) => {
+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, }) => {
     var _a, _b;
     const androidPickerRef = React.useRef(undefined);
     const [internalValue, setInternalValue] = React.useState(value || defaultValue);
@@ -59,6 +60,11 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
             (_a = androidPickerRef === null || androidPickerRef === void 0 ? void 0 : androidPickerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [pickerVisible, androidPickerRef]);
+    React.useEffect(() => {
+        if (pickerVisible && autoDismissKeyboard) {
+            Keyboard.dismiss();
+        }
+    }, [pickerVisible, autoDismissKeyboard]);
     const normalizedOptions = normalizeOptions(options);
     const pickerOptions = placeholder
         ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
@@ -186,7 +192,7 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
                 React.createElement(View, { style: styles.iosPickerContent },
                     React.createElement(Button, { Icon: Icon, type: "text", onPress: togglePickerVisible, style: styles.iosButton }, "Close"),
                     React.createElement(NativePicker, { style: styles.iosNativePicker, selectedValue: internalValue, onValueChange: handleValueChange }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value })))))))) : null,
-        !isIos && pickerVisible ? (React.createElement(NativePicker, { enabled: pickerVisible, selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker, ref: androidPickerRef, onBlur: () => setPickerVisible(false) }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value }))))) : null));
+        !isIos && (pickerVisible || isWeb) ? (React.createElement(NativePicker, { enabled: !disabled, selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker, ref: androidPickerRef, onBlur: () => setPickerVisible(false) }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value }))))) : null));
 };
 const styles = StyleSheet.create({
     marginsContainer: {

package/src/components/Picker/Picker.tsx

@@ -7,6 +7,7 @@ import {
   ViewStyle,
   StyleProp,
   Dimensions,
+  Keyboard,
 } from "react-native";
 import { omit, pickBy, identity, isObject } from "lodash";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -48,6 +49,7 @@ export type PickerProps = {
   placeholderTextColor?: string;
   rightIconName?: string;
   type?: "solid" | "underline";
+  autoDismissKeyboard?: boolean;
   theme: Theme;
   Icon: IconSlot["Icon"];
 };
@@ -84,6 +86,8 @@ function normalizeOptions(options: PickerProps["options"]): PickerOption[] {
 
 const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
 const isIos = Platform.OS === "ios";
+const isWeb = Platform.OS === "web";
+
 const unstyledColor = "rgba(165, 173, 183, 1)";
 const disabledColor = "rgb(240, 240, 240)";
 const errorColor = "rgba(255, 69, 100, 1)";
@@ -107,6 +111,7 @@ const Picker: React.FC<PickerProps> = ({
   placeholderTextColor = unstyledColor,
   rightIconName,
   type = "solid",
+  autoDismissKeyboard = true,
 }) => {
   const androidPickerRef = React.useRef<any | undefined>(undefined);
 
@@ -138,6 +143,12 @@ const Picker: React.FC<PickerProps> = ({
     }
   }, [pickerVisible, androidPickerRef]);
 
+  React.useEffect(() => {
+    if (pickerVisible && autoDismissKeyboard) {
+      Keyboard.dismiss();
+    }
+  }, [pickerVisible, autoDismissKeyboard]);
+
   const normalizedOptions = normalizeOptions(options);
 
   const pickerOptions = placeholder
@@ -374,9 +385,10 @@ const Picker: React.FC<PickerProps> = ({
       ) : null}
 
       {/* nonIosPicker */}
-      {!isIos && pickerVisible ? (
+      {/* Web version is collapsed by default, always show to allow direct expand */}
+      {!isIos && (pickerVisible || isWeb) ? (
         <NativePicker
-          enabled={pickerVisible}
+          enabled={!disabled}
           selectedValue={internalValue}
           onValueChange={handleValueChange}
           style={styles.nonIosPicker}

package/src/mappings/DatePicker.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp, createStaticBoolProp, } from "@draftbit/types";
 const SEED_DATA_PROPS = {
     mode: {
         label: "Mode",
@@ -31,7 +31,8 @@ const SEED_DATA_PROPS = {
         label: "Border Color",
     }),
     borderColorActive: createColorProp({
-        label: "Border Color",
+        label: "Active Border Color",
+        description: "Color of border when date picker is active",
     }),
     format: {
         label: "Format",
@@ -171,6 +172,11 @@ export const SEED_DATA = [
                 required: true,
                 group: GROUPS.basic,
             },
+            autoDismissKeyboard: createStaticBoolProp({
+                label: "Auto dismiss keyboard",
+                description: "Automatically dismiss keyboard when DatePicker is opened",
+                defaultValue: true,
+            }),
         },
     },
 ];

package/src/mappings/DatePicker.ts

@@ -8,6 +8,7 @@ import {
   StylesPanelSections,
   createNumberProp,
   createColorProp,
+  createStaticBoolProp,
 } from "@draftbit/types";
 
 const SEED_DATA_PROPS = {
@@ -42,7 +43,8 @@ const SEED_DATA_PROPS = {
     label: "Border Color",
   }),
   borderColorActive: createColorProp({
-    label: "Border Color",
+    label: "Active Border Color",
+    description: "Color of border when date picker is active",
   }),
   format: {
     label: "Format",
@@ -185,6 +187,11 @@ export const SEED_DATA = [
         required: true,
         group: GROUPS.basic,
       },
+      autoDismissKeyboard: createStaticBoolProp({
+        label: "Auto dismiss keyboard",
+        description: "Automatically dismiss keyboard when DatePicker is opened",
+        defaultValue: true,
+      }),
     },
   },
 ];

package/src/mappings/DeckSwiper.js

@@ -5,6 +5,9 @@ export const SEED_DATA = {
     description: "Deck swiper container",
     category: COMPONENT_TYPES.swiper,
     stylesPanelSections: BLOCK_STYLES_SECTIONS,
+    layout: {
+        width: "100%",
+    },
     triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
     props: {
         onIndexChanged: createActionProp({

package/src/mappings/DeckSwiper.ts

@@ -13,6 +13,9 @@ export const SEED_DATA = {
   description: "Deck swiper container",
   category: COMPONENT_TYPES.swiper,
   stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  layout: {
+    width: "100%",
+  },
   triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
   props: {
     onIndexChanged: createActionProp({

package/src/mappings/DeckSwiperCard.js

@@ -5,5 +5,12 @@ export const SEED_DATA = {
     description: "Single Deck Swiper Card item to be used in DeckSwiper",
     category: COMPONENT_TYPES.swiper,
     stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    layout: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 20,
+        borderWidth: 2,
+    },
     props: {},
 };

package/src/mappings/DeckSwiperCard.ts

@@ -9,5 +9,12 @@ export const SEED_DATA = {
   description: "Single Deck Swiper Card item to be used in DeckSwiper",
   category: COMPONENT_TYPES.swiper,
   stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 20,
+    borderWidth: 2,
+  },
   props: {},
 };

package/src/mappings/Picker.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, Triggers, GROUPS, FORM_TYPES, PROP_TYPES, FIELD_NAME, createIconSizeProp, createColorProp, StylesPanelSections, } from "@draftbit/types";
+import { COMPONENT_TYPES, Triggers, GROUPS, FORM_TYPES, PROP_TYPES, FIELD_NAME, createIconSizeProp, createColorProp, StylesPanelSections, createStaticBoolProp, } from "@draftbit/types";
 const SEED_DATA_PROPS = {
     label: {
         group: GROUPS.data,
@@ -142,6 +142,11 @@ export const SEED_DATA = [
             },
             iconSize: createIconSizeProp({ defaultValue: 24 }),
             iconColor: createColorProp({ label: "Icon Color" }),
+            autoDismissKeyboard: createStaticBoolProp({
+                label: "Auto dismiss keyboard",
+                description: "Automatically dismiss keyboard when Picker is opened",
+                defaultValue: true,
+            }),
         },
         layout: {},
     },

package/src/mappings/Picker.ts

@@ -8,6 +8,7 @@ import {
   createIconSizeProp,
   createColorProp,
   StylesPanelSections,
+  createStaticBoolProp,
 } from "@draftbit/types";
 
 const SEED_DATA_PROPS = {
@@ -157,6 +158,11 @@ export const SEED_DATA = [
       },
       iconSize: createIconSizeProp({ defaultValue: 24 }),
       iconColor: createColorProp({ label: "Icon Color" }),
+      autoDismissKeyboard: createStaticBoolProp({
+        label: "Auto dismiss keyboard",
+        description: "Automatically dismiss keyboard when Picker is opened",
+        defaultValue: true,
+      }),
     },
     layout: {},
   },