@draftbit/core 47.1.1-8b0b37.2 → 47.1.1-b098d3.2

package/lib/commonjs/mappings/DatePicker.js

@@ -156,7 +156,7 @@ const SEED_DATA = [{
   category: _types.COMPONENT_TYPES.input,
   layout: null,
   triggers: [_types.Triggers.OnDateChange],
-  StylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.Background, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position],
+  stylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.Background, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position],
   props: {
     ...SEED_DATA_PROPS,
     type: {

package/lib/commonjs/mappings/FlashList.js

@@ -30,10 +30,6 @@ const SEED_DATA = [{
       step: 1,
       precision: 0
     }),
-    optimizeItemArrangement: (0, _types.createStaticBoolProp)({
-      label: "Optimize Item Arrangement",
-      description: "If enabled, MasonryFlashList will try to reduce difference in column height by modifying item order. If true, specifying overrideItemLayout is required. Default value is false."
-    }),
     initialNumToRender: (0, _types.createStaticNumberProp)({
       label: "Initial Num To Render",
       description: "How many items to render in the initial batch",
@@ -43,6 +39,20 @@ const SEED_DATA = [{
       label: "End Reached Threshold",
       description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
       defaultValue: 0.5
+    }),
+    refreshColor: (0, _types.createColorProp)({
+      label: "Refreshing Color",
+      description: "Color of the refresh indicator"
+    }),
+    showsHorizontalScrollIndicator: (0, _types.createStaticBoolProp)({
+      label: "Show Horizontal Scroll Indicator",
+      description: "When true, shows a horizontal scroll indicator. The default value is false.",
+      defaultValue: false
+    }),
+    showsVerticalScrollIndicator: (0, _types.createStaticBoolProp)({
+      label: "Show Vertical Scroll Indicator",
+      description: "When true, shows a vertical scroll indicator. The default value is true.",
+      defaultValue: true
     })
   }
 }, {
@@ -87,6 +97,20 @@ const SEED_DATA = [{
       label: "End Reached Threshold",
       description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
       defaultValue: 0.5
+    }),
+    refreshColor: (0, _types.createColorProp)({
+      label: "Refreshing Color",
+      description: "Color of the refresh indicator"
+    }),
+    showsHorizontalScrollIndicator: (0, _types.createStaticBoolProp)({
+      label: "Show Horizontal Scroll Indicator",
+      description: "When true, shows a horizontal scroll indicator. The default value is true.",
+      defaultValue: false
+    }),
+    showsVerticalScrollIndicator: (0, _types.createStaticBoolProp)({
+      label: "Show Vertical Scroll Indicator",
+      description: "When true, shows a vertical scroll indicator. The default value is true.",
+      defaultValue: true
     })
   }
 }];

package/lib/commonjs/mappings/FlatList.js

@@ -38,6 +38,20 @@ const SEED_DATA = {
       label: "End Reached Threshold",
       description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
       defaultValue: 0.5
+    }),
+    refreshColor: (0, _types.createColorProp)({
+      label: "Refreshing Color",
+      description: "Color of the refresh indicator"
+    }),
+    showsHorizontalScrollIndicator: (0, _types.createStaticBoolProp)({
+      label: "Show Horizontal Scroll Indicator",
+      description: "When true, shows a horizontal scroll indicator. The default value is true.",
+      defaultValue: false
+    }),
+    showsVerticalScrollIndicator: (0, _types.createStaticBoolProp)({
+      label: "Show Vertical Scroll Indicator",
+      description: "When true, shows a vertical scroll indicator. The default value is true.",
+      defaultValue: true
     })
   }
 };

package/lib/commonjs/mappings/ScrollView.js

@@ -12,7 +12,9 @@ const SEED_DATA = {
   category: _types.COMPONENT_TYPES.view,
   stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS,
   layout: {},
+  triggers: [_types.Triggers.OnRefresh],
   props: {
+    onRefresh: (0, _types.createActionProp)(),
     horizontal: (0, _types.createStaticBoolProp)({
       label: "Horizontal",
       description: "Render your list horizontally",
@@ -32,6 +34,10 @@ const SEED_DATA = {
       label: "Bounce",
       description: "When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction.",
       defaultValue: true
+    }),
+    refreshColor: (0, _types.createColorProp)({
+      label: "Refreshing Color",
+      description: "Color of the refresh indicator"
     })
   }
 };

package/lib/commonjs/mappings/TextField.js

@@ -283,7 +283,7 @@ const SEED_DATA = [{
     ...SEED_DATA_PROPS,
     type: {
       label: "Appearance",
-      description: "Type of Datepicker",
+      description: "Type of Field",
       formType: _types.FORM_TYPES.flatArray,
       propType: _types.PROP_TYPES.STRING,
       defaultValue: "solid",
@@ -325,7 +325,7 @@ const SEED_DATA = [{
     ...SEED_DATA_PROPS,
     type: {
       label: "Appearance",
-      description: "Type of Datepicker",
+      description: "Type of Field",
       formType: _types.FORM_TYPES.flatArray,
       propType: _types.PROP_TYPES.STRING,
       defaultValue: "solid",

package/lib/module/components/CardBlock.js

@@ -1,3 +1,4 @@
+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";
@@ -41,12 +42,11 @@ const CardBlock = _ref => {
   const rightDescriptionStyles = [typography.subtitle2, {
     color: colors.light
   }];
-  return /*#__PURE__*/React.createElement(Card, {
+  return /*#__PURE__*/React.createElement(Card, _extends({
     style: style,
     onPress: onPress,
-    numColumns: numColumns,
-    ...rest
-  }, /*#__PURE__*/React.createElement(View, {
+    numColumns: numColumns
+  }, rest), /*#__PURE__*/React.createElement(View, {
     style: {
       backgroundColor: colors.background
     }
@@ -95,14 +95,4 @@ 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/CircularProgress.js

@@ -1,24 +1,27 @@
+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 React from "react";
 import { View } from "react-native";
 import { Svg, Path, G } from "react-native-svg";
 class CircularProgress extends React.Component {
   constructor() {
     super(...arguments);
-    this.polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
+    _defineProperty(this, "polarToCartesian", (centerX, centerY, radius, angleInDegrees) => {
       var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
       return {
         x: centerX + radius * Math.cos(angleInRadians),
         y: centerY + radius * Math.sin(angleInRadians)
       };
-    };
-    this.circlePath = (x, y, radius, startAngle, endAngle) => {
+    });
+    _defineProperty(this, "circlePath", (x, y, radius, startAngle, endAngle) => {
       var start = this.polarToCartesian(x, y, radius, endAngle * 0.9999);
       var end = this.polarToCartesian(x, y, radius, startAngle);
       var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
       var d = ["M", start.x, start.y, "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y];
       return d.join(" ");
-    };
-    this.clampFill = fill => Math.min(100, Math.max(0, fill));
+    });
+    _defineProperty(this, "clampFill", fill => Math.min(100, Math.max(0, fill)));
   }
   render() {
     const {
@@ -98,27 +101,4 @@ class CircularProgress extends React.Component {
     }, children(fill)));
   }
 }
-export default CircularProgress;eElement(G, {
-      rotation: rotation,
-      originX: (size + padding) / 2,
-      originY: (size + padding) / 2
-    }, backgroundColor && /*#__PURE__*/React.createElement(Path, {
-      d: backgroundPath,
-      stroke: backgroundColor,
-      strokeWidth: backgroundWidth || width,
-      strokeLinecap: lineCap,
-      strokeDasharray: strokeDasharrayBackground,
-      fill: "transparent"
-    }), fill > 0 && /*#__PURE__*/React.createElement(Path, {
-      d: circlePathItem,
-      stroke: tintColor,
-      strokeWidth: width,
-      strokeLinecap: lineCap,
-      strokeDasharray: strokeDasharrayTint,
-      fill: "transparent"
-    }), cap)), children && /*#__PURE__*/React.createElement(View, {
-      style: localChildrenContainerStyle
-    }, children(fill)));
-  }
-}
 export default CircularProgress;

package/lib/module/components/Image.js

@@ -1,3 +1,4 @@
+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); }
 /* README: Internal Image component used for stuff like Card. DO NOT EXPORT! */
 import React from "react";
 import { Image as NativeImage, StyleSheet } from "react-native";
@@ -55,24 +56,7 @@ const Image = _ref2 => {
         height,
         aspectRatio
       }]
-    }, /*#__PURE__*/React.createElement(NativeImage, {
-      ...props,
-      source: imageSource,
-      resizeMode: resizeMode,
-      style: [style, {
-        height: "100%",
-        width: "100%"
-      }]
-    }));
-  }
-  return /*#__PURE__*/React.createElement(NativeImage, {
-    ...props,
-    source: source,
-    resizeMode: resizeMode,
-    style: style
-  });
-};
-export default Image;eImage, _extends({}, props, {
+    }, /*#__PURE__*/React.createElement(NativeImage, _extends({}, props, {
       source: imageSource,
       resizeMode: resizeMode,
       style: [style, {

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

@@ -1,3 +1,4 @@
+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 omit from "lodash.omit";
@@ -7,6 +8,7 @@ import { extractStyles } from "../../utilities";
 import TextField from "../TextField";
 import Touchable from "../Touchable";
 const Picker = _ref => {
+  var _options$find$label, _options$find;
   let {
     style,
     options,
@@ -16,7 +18,6 @@ const Picker = _ref => {
     onValueChange: onValueChangeOverride = () => {},
     ...props
   } = _ref;
-  var _a, _b;
   const {
     viewStyles: {
       borderRadius,
@@ -61,7 +62,7 @@ const Picker = _ref => {
   };
 
   const stylesWithoutMargin = style && omit(StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
-  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);
+  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);
   return /*#__PURE__*/React.createElement(Touchable, {
     disabled: disabled,
     onPress: toggleFocus,
@@ -83,25 +84,6 @@ 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/RadioButton/context.js

@@ -1,5 +1,5 @@
 import { createContext, useContext } from "react";
-export var Direction;
+export let Direction;
 (function (Direction) {
   Direction["Horizontal"] = "horizontal";
   Direction["Vertical"] = "vertical";

package/lib/module/hooks.js

@@ -3,11 +3,12 @@ export function usePrevious(value) {
   // The ref object is a generic container whose current property is mutable
   // and can hold any value, similar to an instance property on a class
   const ref = React.useRef();
+
   // Store current value in ref
   React.useEffect(() => {
     ref.current = value;
   }, [value]);
+
   // Return previous value (happens before update in useEffect above)
   return ref.current;
-}
 }

package/lib/module/mappings/DatePicker.js

@@ -150,7 +150,7 @@ export const SEED_DATA = [{
   category: COMPONENT_TYPES.input,
   layout: null,
   triggers: [Triggers.OnDateChange],
-  StylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Background, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position],
+  stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Background, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position],
   props: {
     ...SEED_DATA_PROPS,
     type: {

package/lib/module/mappings/FlashList.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS, Triggers, createActionProp, createStaticNumberProp } from "@draftbit/types";
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS, Triggers, createActionProp, createStaticNumberProp, createColorProp } from "@draftbit/types";
 export const SEED_DATA = [{
   name: "Masonry List",
   tag: "MasonryFlashList",
@@ -24,10 +24,6 @@ export const SEED_DATA = [{
       step: 1,
       precision: 0
     }),
-    optimizeItemArrangement: createStaticBoolProp({
-      label: "Optimize Item Arrangement",
-      description: "If enabled, MasonryFlashList will try to reduce difference in column height by modifying item order. If true, specifying overrideItemLayout is required. Default value is false."
-    }),
     initialNumToRender: createStaticNumberProp({
       label: "Initial Num To Render",
       description: "How many items to render in the initial batch",
@@ -37,6 +33,20 @@ export const SEED_DATA = [{
       label: "End Reached Threshold",
       description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
       defaultValue: 0.5
+    }),
+    refreshColor: createColorProp({
+      label: "Refreshing Color",
+      description: "Color of the refresh indicator"
+    }),
+    showsHorizontalScrollIndicator: createStaticBoolProp({
+      label: "Show Horizontal Scroll Indicator",
+      description: "When true, shows a horizontal scroll indicator. The default value is false.",
+      defaultValue: false
+    }),
+    showsVerticalScrollIndicator: createStaticBoolProp({
+      label: "Show Vertical Scroll Indicator",
+      description: "When true, shows a vertical scroll indicator. The default value is true.",
+      defaultValue: true
     })
   }
 }, {
@@ -81,6 +91,20 @@ export const SEED_DATA = [{
       label: "End Reached Threshold",
       description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
       defaultValue: 0.5
+    }),
+    refreshColor: createColorProp({
+      label: "Refreshing Color",
+      description: "Color of the refresh indicator"
+    }),
+    showsHorizontalScrollIndicator: createStaticBoolProp({
+      label: "Show Horizontal Scroll Indicator",
+      description: "When true, shows a horizontal scroll indicator. The default value is true.",
+      defaultValue: false
+    }),
+    showsVerticalScrollIndicator: createStaticBoolProp({
+      label: "Show Vertical Scroll Indicator",
+      description: "When true, shows a vertical scroll indicator. The default value is true.",
+      defaultValue: true
     })
   }
 }];

package/lib/module/mappings/FlatList.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, Triggers, createActionProp, createStaticNumberProp } from "@draftbit/types";
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, Triggers, createActionProp, createStaticNumberProp, createColorProp } from "@draftbit/types";
 export const SEED_DATA = {
   name: "List",
   tag: "FlatList",
@@ -32,6 +32,20 @@ export const SEED_DATA = {
       label: "End Reached Threshold",
       description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
       defaultValue: 0.5
+    }),
+    refreshColor: createColorProp({
+      label: "Refreshing Color",
+      description: "Color of the refresh indicator"
+    }),
+    showsHorizontalScrollIndicator: createStaticBoolProp({
+      label: "Show Horizontal Scroll Indicator",
+      description: "When true, shows a horizontal scroll indicator. The default value is true.",
+      defaultValue: false
+    }),
+    showsVerticalScrollIndicator: createStaticBoolProp({
+      label: "Show Vertical Scroll Indicator",
+      description: "When true, shows a vertical scroll indicator. The default value is true.",
+      defaultValue: true
     })
   }
 };

package/lib/module/mappings/ScrollView.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS } from "@draftbit/types";
+import { COMPONENT_TYPES, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, Triggers, createActionProp, createColorProp } from "@draftbit/types";
 export const SEED_DATA = {
   name: "Scroll View",
   tag: "ScrollView",
@@ -6,7 +6,9 @@ export const SEED_DATA = {
   category: COMPONENT_TYPES.view,
   stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   layout: {},
+  triggers: [Triggers.OnRefresh],
   props: {
+    onRefresh: createActionProp(),
     horizontal: createStaticBoolProp({
       label: "Horizontal",
       description: "Render your list horizontally",
@@ -26,6 +28,10 @@ export const SEED_DATA = {
       label: "Bounce",
       description: "When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction.",
       defaultValue: true
+    }),
+    refreshColor: createColorProp({
+      label: "Refreshing Color",
+      description: "Color of the refresh indicator"
     })
   }
 };

package/lib/module/mappings/TextField.js

@@ -277,7 +277,7 @@ export const SEED_DATA = [{
     ...SEED_DATA_PROPS,
     type: {
       label: "Appearance",
-      description: "Type of Datepicker",
+      description: "Type of Field",
       formType: FORM_TYPES.flatArray,
       propType: PROP_TYPES.STRING,
       defaultValue: "solid",
@@ -319,7 +319,7 @@ export const SEED_DATA = [{
     ...SEED_DATA_PROPS,
     type: {
       label: "Appearance",
-      description: "Type of Datepicker",
+      description: "Type of Field",
       formType: FORM_TYPES.flatArray,
       propType: PROP_TYPES.STRING,
       defaultValue: "solid",

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

@@ -5,7 +5,7 @@ export declare const SEED_DATA: {
     category: string;
     layout: null;
     triggers: string[];
-    StylesPanelSections: string[];
+    stylesPanelSections: string[];
     props: {
         type: {
             label: string;

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

@@ -51,17 +51,18 @@ export declare const SEED_DATA: ({
             required: boolean;
             step: number;
         };
-        optimizeItemArrangement: {
+        initialNumToRender: {
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: boolean;
+            group: string;
+            defaultValue: null;
             editable: boolean;
             required: boolean;
-            group: string;
+            step: number;
         };
-        initialNumToRender: {
+        onEndReachedThreshold: {
             label: string;
             description: string;
             formType: string;
@@ -72,16 +73,35 @@ export declare const SEED_DATA: ({
             required: boolean;
             step: number;
         };
-        onEndReachedThreshold: {
+        refreshColor: {
+            group: string;
             label: string;
             description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
             formType: string;
             propType: string;
+        };
+        showsHorizontalScrollIndicator: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
             group: string;
-            defaultValue: null;
+        };
+        showsVerticalScrollIndicator: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
             editable: boolean;
             required: boolean;
-            step: number;
+            group: string;
         };
         horizontal?: undefined;
         inverted?: undefined;
@@ -181,7 +201,36 @@ export declare const SEED_DATA: ({
             required: boolean;
             step: number;
         };
-        optimizeItemArrangement?: undefined;
+        refreshColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        showsHorizontalScrollIndicator: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        showsVerticalScrollIndicator: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
     };
 })[];
 //# sourceMappingURL=FlashList.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FlashList.d.ts","sourceRoot":"","sources":["../../../../src/mappings/FlashList.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA0FrB,CAAC"}
+{"version":3,"file":"FlashList.d.ts","sourceRoot":"","sources":["../../../../src/mappings/FlashList.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqHrB,CAAC"}

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

@@ -81,6 +81,36 @@ export declare const SEED_DATA: {
             required: boolean;
             step: number;
         };
+        refreshColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        showsHorizontalScrollIndicator: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        showsVerticalScrollIndicator: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
     };
 };
 //# sourceMappingURL=FlatList.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FlatList.d.ts","sourceRoot":"","sources":["../../../../src/mappings/FlatList.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCrB,CAAC"}
+{"version":3,"file":"FlatList.d.ts","sourceRoot":"","sources":["../../../../src/mappings/FlatList.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDrB,CAAC"}

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

@@ -5,7 +5,18 @@ export declare const SEED_DATA: {
     category: string;
     stylesPanelSections: string[];
     layout: {};
+    triggers: string[];
     props: {
+        onRefresh: {
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            group: string;
+        };
         horizontal: {
             label: string;
             description: string;
@@ -46,6 +57,16 @@ export declare const SEED_DATA: {
             required: boolean;
             group: string;
         };
+        refreshColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
     };
 };
 //# sourceMappingURL=ScrollView.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../../../src/mappings/ScrollView.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCrB,CAAC"}
+{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../../../src/mappings/ScrollView.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "47.1.1-8b0b37.2+8b0b37c",
+  "version": "47.1.1-b098d3.2+b098d38",
   "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.1.1-8b0b37.2+8b0b37c",
+    "@draftbit/types": "^47.1.1-b098d3.2+b098d38",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.4",
@@ -91,5 +91,5 @@
       ]
     ]
   },
-  "gitHead": "8b0b37c98ab2f221cb58abe7f1af4db21f506711"
+  "gitHead": "b098d382bff80e485e1e9abd09990aae21718bd1"
 }

package/src/mappings/DatePicker.js

@@ -151,7 +151,7 @@ export const SEED_DATA = [
         category: COMPONENT_TYPES.input,
         layout: null,
         triggers: [Triggers.OnDateChange],
-        StylesPanelSections: [
+        stylesPanelSections: [
             StylesPanelSections.Typography,
             StylesPanelSections.Background,
             StylesPanelSections.Size,

package/src/mappings/DatePicker.ts

@@ -165,7 +165,7 @@ export const SEED_DATA = [
     category: COMPONENT_TYPES.input,
     layout: null,
     triggers: [Triggers.OnDateChange],
-    StylesPanelSections: [
+    stylesPanelSections: [
       StylesPanelSections.Typography,
       StylesPanelSections.Background,
       StylesPanelSections.Size,

package/src/mappings/FlashList.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS, Triggers, createActionProp, createStaticNumberProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS, Triggers, createActionProp, createStaticNumberProp, createColorProp, } from "@draftbit/types";
 export const SEED_DATA = [
     {
         name: "Masonry List",
@@ -25,10 +25,6 @@ export const SEED_DATA = [
                 step: 1,
                 precision: 0,
             }),
-            optimizeItemArrangement: createStaticBoolProp({
-                label: "Optimize Item Arrangement",
-                description: "If enabled, MasonryFlashList will try to reduce difference in column height by modifying item order. If true, specifying overrideItemLayout is required. Default value is false.",
-            }),
             initialNumToRender: createStaticNumberProp({
                 label: "Initial Num To Render",
                 description: "How many items to render in the initial batch",
@@ -39,6 +35,20 @@ export const SEED_DATA = [
                 description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
                 defaultValue: 0.5,
             }),
+            refreshColor: createColorProp({
+                label: "Refreshing Color",
+                description: "Color of the refresh indicator",
+            }),
+            showsHorizontalScrollIndicator: createStaticBoolProp({
+                label: "Show Horizontal Scroll Indicator",
+                description: "When true, shows a horizontal scroll indicator. The default value is false.",
+                defaultValue: false,
+            }),
+            showsVerticalScrollIndicator: createStaticBoolProp({
+                label: "Show Vertical Scroll Indicator",
+                description: "When true, shows a vertical scroll indicator. The default value is true.",
+                defaultValue: true,
+            }),
         },
     },
     {
@@ -84,6 +94,20 @@ export const SEED_DATA = [
                 description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
                 defaultValue: 0.5,
             }),
+            refreshColor: createColorProp({
+                label: "Refreshing Color",
+                description: "Color of the refresh indicator",
+            }),
+            showsHorizontalScrollIndicator: createStaticBoolProp({
+                label: "Show Horizontal Scroll Indicator",
+                description: "When true, shows a horizontal scroll indicator. The default value is true.",
+                defaultValue: false,
+            }),
+            showsVerticalScrollIndicator: createStaticBoolProp({
+                label: "Show Vertical Scroll Indicator",
+                description: "When true, shows a vertical scroll indicator. The default value is true.",
+                defaultValue: true,
+            }),
         },
     },
 ];

package/src/mappings/FlashList.ts

@@ -8,6 +8,7 @@ import {
   Triggers,
   createActionProp,
   createStaticNumberProp,
+  createColorProp,
 } from "@draftbit/types";
 
 export const SEED_DATA = [
@@ -36,11 +37,6 @@ export const SEED_DATA = [
         step: 1,
         precision: 0,
       }),
-      optimizeItemArrangement: createStaticBoolProp({
-        label: "Optimize Item Arrangement",
-        description:
-          "If enabled, MasonryFlashList will try to reduce difference in column height by modifying item order. If true, specifying overrideItemLayout is required. Default value is false.",
-      }),
       initialNumToRender: createStaticNumberProp({
         label: "Initial Num To Render",
         description: "How many items to render in the initial batch",
@@ -52,6 +48,22 @@ export const SEED_DATA = [
           "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
         defaultValue: 0.5,
       }),
+      refreshColor: createColorProp({
+        label: "Refreshing Color",
+        description: "Color of the refresh indicator",
+      }),
+      showsHorizontalScrollIndicator: createStaticBoolProp({
+        label: "Show Horizontal Scroll Indicator",
+        description:
+          "When true, shows a horizontal scroll indicator. The default value is false.",
+        defaultValue: false,
+      }),
+      showsVerticalScrollIndicator: createStaticBoolProp({
+        label: "Show Vertical Scroll Indicator",
+        description:
+          "When true, shows a vertical scroll indicator. The default value is true.",
+        defaultValue: true,
+      }),
     },
   },
   {
@@ -98,6 +110,22 @@ export const SEED_DATA = [
           "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
         defaultValue: 0.5,
       }),
+      refreshColor: createColorProp({
+        label: "Refreshing Color",
+        description: "Color of the refresh indicator",
+      }),
+      showsHorizontalScrollIndicator: createStaticBoolProp({
+        label: "Show Horizontal Scroll Indicator",
+        description:
+          "When true, shows a horizontal scroll indicator. The default value is true.",
+        defaultValue: false,
+      }),
+      showsVerticalScrollIndicator: createStaticBoolProp({
+        label: "Show Vertical Scroll Indicator",
+        description:
+          "When true, shows a vertical scroll indicator. The default value is true.",
+        defaultValue: true,
+      }),
     },
   },
 ];

package/src/mappings/FlatList.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, Triggers, createActionProp, createStaticNumberProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, Triggers, createActionProp, createStaticNumberProp, createColorProp, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "List",
     tag: "FlatList",
@@ -33,5 +33,19 @@ export const SEED_DATA = {
             description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
             defaultValue: 0.5,
         }),
+        refreshColor: createColorProp({
+            label: "Refreshing Color",
+            description: "Color of the refresh indicator",
+        }),
+        showsHorizontalScrollIndicator: createStaticBoolProp({
+            label: "Show Horizontal Scroll Indicator",
+            description: "When true, shows a horizontal scroll indicator. The default value is true.",
+            defaultValue: false,
+        }),
+        showsVerticalScrollIndicator: createStaticBoolProp({
+            label: "Show Vertical Scroll Indicator",
+            description: "When true, shows a vertical scroll indicator. The default value is true.",
+            defaultValue: true,
+        }),
     },
 };

package/src/mappings/FlatList.ts

@@ -6,6 +6,7 @@ import {
   Triggers,
   createActionProp,
   createStaticNumberProp,
+  createColorProp,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -43,5 +44,21 @@ export const SEED_DATA = {
         "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
       defaultValue: 0.5,
     }),
+    refreshColor: createColorProp({
+      label: "Refreshing Color",
+      description: "Color of the refresh indicator",
+    }),
+    showsHorizontalScrollIndicator: createStaticBoolProp({
+      label: "Show Horizontal Scroll Indicator",
+      description:
+        "When true, shows a horizontal scroll indicator. The default value is true.",
+      defaultValue: false,
+    }),
+    showsVerticalScrollIndicator: createStaticBoolProp({
+      label: "Show Vertical Scroll Indicator",
+      description:
+        "When true, shows a vertical scroll indicator. The default value is true.",
+      defaultValue: true,
+    }),
   },
 };

package/src/mappings/ScrollView.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
+import { COMPONENT_TYPES, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, Triggers, createActionProp, createColorProp, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Scroll View",
     tag: "ScrollView",
@@ -6,7 +6,9 @@ export const SEED_DATA = {
     category: COMPONENT_TYPES.view,
     stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
     layout: {},
+    triggers: [Triggers.OnRefresh],
     props: {
+        onRefresh: createActionProp(),
         horizontal: createStaticBoolProp({
             label: "Horizontal",
             description: "Render your list horizontally",
@@ -27,5 +29,9 @@ export const SEED_DATA = {
             description: "When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction.",
             defaultValue: true,
         }),
+        refreshColor: createColorProp({
+            label: "Refreshing Color",
+            description: "Color of the refresh indicator",
+        }),
     },
 };

package/src/mappings/ScrollView.ts

@@ -2,6 +2,9 @@ import {
   COMPONENT_TYPES,
   createStaticBoolProp,
   CONTAINER_COMPONENT_STYLES_SECTIONS,
+  Triggers,
+  createActionProp,
+  createColorProp,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -11,7 +14,9 @@ export const SEED_DATA = {
   category: COMPONENT_TYPES.view,
   stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   layout: {},
+  triggers: [Triggers.OnRefresh],
   props: {
+    onRefresh: createActionProp(),
     horizontal: createStaticBoolProp({
       label: "Horizontal",
       description: "Render your list horizontally",
@@ -35,5 +40,9 @@ export const SEED_DATA = {
         "When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction.",
       defaultValue: true,
     }),
+    refreshColor: createColorProp({
+      label: "Refreshing Color",
+      description: "Color of the refresh indicator",
+    }),
   },
 };

package/src/mappings/TextField.js

@@ -306,7 +306,7 @@ export const SEED_DATA = [
             ...SEED_DATA_PROPS,
             type: {
                 label: "Appearance",
-                description: "Type of Datepicker",
+                description: "Type of Field",
                 formType: FORM_TYPES.flatArray,
                 propType: PROP_TYPES.STRING,
                 defaultValue: "solid",
@@ -357,7 +357,7 @@ export const SEED_DATA = [
             ...SEED_DATA_PROPS,
             type: {
                 label: "Appearance",
-                description: "Type of Datepicker",
+                description: "Type of Field",
                 formType: FORM_TYPES.flatArray,
                 propType: PROP_TYPES.STRING,
                 defaultValue: "solid",

package/src/mappings/TextField.ts

@@ -328,7 +328,7 @@ export const SEED_DATA = [
       ...SEED_DATA_PROPS,
       type: {
         label: "Appearance",
-        description: "Type of Datepicker",
+        description: "Type of Field",
         formType: FORM_TYPES.flatArray,
         propType: PROP_TYPES.STRING,
         defaultValue: "solid",
@@ -380,7 +380,7 @@ export const SEED_DATA = [
       ...SEED_DATA_PROPS,
       type: {
         label: "Appearance",
-        description: "Type of Datepicker",
+        description: "Type of Field",
         formType: FORM_TYPES.flatArray,
         propType: PROP_TYPES.STRING,
         defaultValue: "solid",