@draftbit/core 47.0.1-c14479.2 → 47.0.1-c25493.2

package/lib/commonjs/components/AnimatedCircularProgress.js

@@ -10,7 +10,6 @@ var _CircularProgress = _interopRequireDefault(require("./CircularProgress"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const AnimatedProgress = _reactNative.Animated.createAnimatedComponent(_CircularProgress.default);
 const AnimatedCircularProgress = _ref => {
   let {
@@ -55,6 +54,18 @@ const AnimatedCircularProgress = _ref => {
   React.useEffect(() => {
     animate();
   }, [fill, animate]);
+  return /*#__PURE__*/React.createElement(AnimatedProgress, {
+    ...other,
+    style: other.style,
+    childrenContainerStyle: other.childrenContainerStyle,
+    fill: fillAnimation,
+    tintColor: animateColor()
+  });
+};
+var _default = AnimatedCircularProgress;
+exports.default = _default;ect(() => {
+    animate();
+  }, [fill, animate]);
   return /*#__PURE__*/React.createElement(AnimatedProgress, _extends({}, other, {
     style: other.style,
     childrenContainerStyle: other.childrenContainerStyle,

package/lib/commonjs/components/Checkbox/CheckboxGroup.js

@@ -9,7 +9,6 @@ var _reactNative = require("react-native");
 var _context = require("./context");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const {
   Provider
 } = _context.checkboxGroupContext;
@@ -31,7 +30,23 @@ const CheckboxGroup = _ref => {
       alignItems: "center"
     });
   }
-  return /*#__PURE__*/React.createElement(_reactNative.View, _extends({
+  return /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: [{
+      minHeight: 40
+    }, style],
+    ...rest
+  }, /*#__PURE__*/React.createElement(Provider, {
+    value: {
+      values,
+      onValueChange,
+      direction
+    }
+  }, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: _containerStyle
+  }, children)));
+};
+var _default = CheckboxGroup;
+exports.default = _default;s({
     style: [{
       minHeight: 40
     }, style]

package/lib/commonjs/components/Checkbox/context.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.checkboxGroupContext = exports.Direction = void 0;
 exports.useCheckboxGroupContext = useCheckboxGroupContext;
 var _react = require("react");
-let Direction;
+var Direction;
 exports.Direction = Direction;
 (function (Direction) {
   Direction["Horizontal"] = "horizontal";

package/lib/commonjs/components/CircularProgress.js

@@ -8,27 +8,24 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeSvg = require("react-native-svg");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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); }
 class CircularProgress extends _react.default.Component {
   constructor() {
     super(...arguments);
-    _defineProperty(this, "polarToCartesian", (centerX, centerY, radius, angleInDegrees) => {
+    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)
       };
-    });
-    _defineProperty(this, "circlePath", (x, y, radius, startAngle, endAngle) => {
+    };
+    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(" ");
-    });
-    _defineProperty(this, "clampFill", fill => Math.min(100, Math.max(0, fill)));
+    };
+    this.clampFill = fill => Math.min(100, Math.max(0, fill));
   }
   render() {
     const {
@@ -109,4 +106,25 @@ class CircularProgress extends _react.default.Component {
   }
 }
 var _default = CircularProgress;
+exports.default = _default;padding) / 2
+    }, backgroundColor && /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Path, {
+      d: backgroundPath,
+      stroke: backgroundColor,
+      strokeWidth: backgroundWidth || width,
+      strokeLinecap: lineCap,
+      strokeDasharray: strokeDasharrayBackground,
+      fill: "transparent"
+    }), fill > 0 && /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Path, {
+      d: circlePathItem,
+      stroke: tintColor,
+      strokeWidth: width,
+      strokeLinecap: lineCap,
+      strokeDasharray: strokeDasharrayTint,
+      fill: "transparent"
+    }), cap)), children && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: localChildrenContainerStyle
+    }, children(fill)));
+  }
+}
+var _default = CircularProgress;
 exports.default = _default;

package/lib/commonjs/components/DeprecatedCardWrapper.js

@@ -8,7 +8,6 @@ var _react = _interopRequireDefault(require("react"));
 var _theming = require("../theming");
 var _Touchable = _interopRequireDefault(require("./Touchable"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const getWidth = numColumns => {
   switch (numColumns) {
     case 1:
@@ -28,6 +27,21 @@ const Card = _ref => {
     ...rest
   } = _ref;
   const width = getWidth(numColumns);
+  return /*#__PURE__*/_react.default.createElement(_Touchable.default, {
+    disabled: !onPress,
+    onPress: onPress,
+    style: [style, {
+      width
+    }],
+    ...rest
+  }, children);
+};
+var _default = (0, _theming.withTheme)(Card);
+exports.default = _default;s,
+    style,
+    ...rest
+  } = _ref;
+  const width = getWidth(numColumns);
   return /*#__PURE__*/_react.default.createElement(_Touchable.default, _extends({
     disabled: !onPress,
     onPress: onPress,

package/lib/commonjs/components/Image.js

@@ -9,7 +9,8 @@ var _reactNative = require("react-native");
 var _Config = _interopRequireDefault(require("./Config"));
 var _AspectRatio = _interopRequireDefault(require("./AspectRatio"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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! */
+
 const generateDimensions = _ref => {
   let {
     aspectRatio,
@@ -62,13 +63,27 @@ const Image = _ref2 => {
         height,
         aspectRatio
       }]
-    }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, _extends({}, props, {
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
+      ...props,
       source: imageSource,
       resizeMode: resizeMode,
       style: [style, {
         height: "100%",
         width: "100%"
       }]
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
+    ...props,
+    source: source,
+    resizeMode: resizeMode,
+    style: style
+  });
+};
+var _default = Image;
+exports.default = _default; "100%",
+        width: "100%"
+      }]
     })));
   }
   return /*#__PURE__*/_react.default.createElement(_reactNative.Image, _extends({}, props, {

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

@@ -15,9 +15,7 @@ var _Touchable = _interopRequireDefault(require("../Touchable"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const Picker = _ref => {
-  var _options$find$label, _options$find;
   let {
     style,
     options,
@@ -27,6 +25,7 @@ const Picker = _ref => {
     onValueChange: onValueChangeOverride = () => {},
     ...props
   } = _ref;
+  var _a, _b;
   const {
     viewStyles: {
       borderRadius,
@@ -71,7 +70,7 @@ const Picker = _ref => {
   };
 
   const stylesWithoutMargin = style && (0, _lodash.default)(_reactNative.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.default, {
     disabled: disabled,
     onPress: toggleFocus,
@@ -96,6 +95,24 @@ const Picker = _ref => {
     key: o.value
   }))), /*#__PURE__*/React.createElement(_reactNative.View, {
     pointerEvents: "none"
+  }, /*#__PURE__*/React.createElement(_TextField.default, {
+    ...props,
+    value: selectedLabel,
+    placeholder: placeholder,
+    // @ts-ignore
+    ref: textField,
+    disabled: disabled,
+    // @ts-expect-error
+    style: stylesWithoutMargin
+  }))));
+};
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    alignSelf: "stretch"
+  }
+});
+var _default = (0, _theming.withTheme)(Picker);
+exports.default = _default;pointerEvents: "none"
   }, /*#__PURE__*/React.createElement(_TextField.default, _extends({}, props, {
     value: selectedLabel,
     placeholder: placeholder

package/lib/commonjs/components/Pressable.js

@@ -7,7 +7,6 @@ exports.default = Pressable;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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 Pressable(_ref) {
   let {
     children,
@@ -20,8 +19,22 @@ function Pressable(_ref) {
     style,
     ...props
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, _extends({
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
     onPress: onPress,
+    disabled: disabled,
+    delayLongPress: delayLongPress ? delayLongPress : 500,
+    hitSlop: hitSlop ? hitSlop : 8,
+    style: _ref2 => {
+      let {
+        pressed
+      } = _ref2;
+      return [{
+        opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1
+      }, style];
+    },
+    ...props
+  }, children);
+} onPress: onPress,
     disabled: disabled,
     delayLongPress: delayLongPress ? delayLongPress : 500,
     hitSlop: hitSlop ? hitSlop : 8,

package/lib/commonjs/components/Slider.js

@@ -13,7 +13,6 @@ var _theming = require("../theming");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function maybeParseValue(value) {
   if (value === undefined) {
     return undefined;
@@ -73,9 +72,10 @@ function Slider(_ref) {
     setInternalValue(newValue);
     onValueChange(newValue);
   };
-  return /*#__PURE__*/React.createElement(_reactNative.View, _extends({
-    style: [styles.container, style]
-  }, rest), leftIcon ? /*#__PURE__*/React.createElement(Icon, {
+  return /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: [styles.container, style],
+    ...rest
+  }, leftIcon ? /*#__PURE__*/React.createElement(Icon, {
     color: leftIconThemeColor,
     name: leftIcon,
     size: 24
@@ -108,4 +108,21 @@ const styles = _reactNative.StyleSheet.create({
   }
 });
 var _default = (0, _theming.withTheme)(Slider);
+exports.default = _default;or: rightIconThemeColor,
+    name: rightIcon,
+    size: 24
+  }) : null);
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    height: 40,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  slider: {
+    flex: 1,
+    marginHorizontal: 12
+  }
+});
+var _default = (0, _theming.withTheme)(Slider);
 exports.default = _default;

package/lib/commonjs/components/Switch.js

@@ -13,7 +13,6 @@ var _hooks = require("../hooks");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function Switch(_ref) {
   let {
     value,
@@ -38,7 +37,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 = (0, _hooks.usePrevious)(defaultValue);
@@ -47,24 +45,24 @@ function Switch(_ref) {
       setChecked(Boolean(defaultValue));
     }
   }, [defaultValue, previousDefaultValue]);
-  return /*#__PURE__*/React.createElement(_reactNative.Switch, _extends({
+  return /*#__PURE__*/React.createElement(_reactNative.Switch, {
     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 {
@@ -93,7 +91,7 @@ function Row(_ref2) {
       setChecked(defaultValue);
     }
   }, [defaultValue]);
-  return /*#__PURE__*/React.createElement(_FormRow.default, _extends({
+  return /*#__PURE__*/React.createElement(_FormRow.default, {
     disabled: disabled,
     onPress: () => {
       setChecked(!checked);
@@ -101,8 +99,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,
@@ -116,4 +115,14 @@ function Row(_ref2) {
 const SwitchRow = (0, _theming.withTheme)(Row);
 exports.SwitchRow = SwitchRow;
 var _default = (0, _theming.withTheme)(Switch);
+exports.default = _default;hange: onValueChange,
+    activeTrackColor: activeTrackColor,
+    inactiveTrackColor: inactiveTrackColor,
+    activeThumbColor: activeThumbColor,
+    inactiveThumbColor: inactiveThumbColor
+  }));
+}
+const SwitchRow = (0, _theming.withTheme)(Row);
+exports.SwitchRow = SwitchRow;
+var _default = (0, _theming.withTheme)(Switch);
 exports.default = _default;

package/lib/commonjs/components/Touchable.js

@@ -7,7 +7,6 @@ exports.default = Touchable;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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 Touchable(_ref) {
   let {
     children,
@@ -20,8 +19,22 @@ function Touchable(_ref) {
     style,
     ...props
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, _extends({
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
     disabled: disabled,
+    onPress: onPress,
+    delayLongPress: delayLongPress ? delayLongPress : 500,
+    hitSlop: hitSlop ? hitSlop : 8,
+    style: _ref2 => {
+      let {
+        pressed
+      } = _ref2;
+      return [{
+        opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1
+      }, style];
+    },
+    ...props
+  }, children);
+} disabled: disabled,
     onPress: onPress,
     delayLongPress: delayLongPress ? delayLongPress : 500,
     hitSlop: hitSlop ? hitSlop : 8,

package/lib/commonjs/constants.js

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

package/lib/commonjs/mappings/FlashList.js

@@ -5,7 +5,42 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SEED_DATA = void 0;
 var _types = require("@draftbit/types");
-const SEED_DATA = {
+const SEED_DATA = [{
+  name: "Masonry List",
+  tag: "MasonryFlashList",
+  description: "Masonry Flashlist by Shopify",
+  packageName: "@shopify/flash-list",
+  category: _types.COMPONENT_TYPES.data,
+  stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: {
+    flex: 1
+  },
+  triggers: [_types.Triggers.OnRefresh, _types.Triggers.OnEndReached],
+  props: {
+    onRefresh: (0, _types.createActionProp)(),
+    onEndReached: (0, _types.createActionProp)(),
+    numColumns: (0, _types.createNumColumnsType)({
+      editable: true
+    }),
+    estimatedItemSize: (0, _types.createNumberProp)({
+      group: _types.GROUPS.basic,
+      label: "Est. Item Size",
+      description: "Approximate size of the items before rendering.",
+      defaultValue: 50,
+      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."
+    }),
+    onEndReachedThreshold: (0, _types.createStaticNumberProp)({
+      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
+    })
+  }
+}, {
   name: "FlashList",
   tag: "FlashList",
   description: "Flashlist by Shopify",
@@ -15,7 +50,10 @@ const SEED_DATA = {
   layout: {
     flex: 1
   },
+  triggers: [_types.Triggers.OnRefresh, _types.Triggers.OnEndReached],
   props: {
+    onRefresh: (0, _types.createActionProp)(),
+    onEndReached: (0, _types.createActionProp)(),
     estimatedItemSize: (0, _types.createNumberProp)({
       group: _types.GROUPS.basic,
       label: "Est. Item Size",
@@ -34,7 +72,12 @@ const SEED_DATA = {
     }),
     numColumns: (0, _types.createNumColumnsType)({
       editable: true
+    }),
+    onEndReachedThreshold: (0, _types.createStaticNumberProp)({
+      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
     })
   }
-};
+}];
 exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/FlatList.js

@@ -14,7 +14,10 @@ const SEED_DATA = {
   layout: {
     flex: 1
   },
+  triggers: [_types.Triggers.OnRefresh, _types.Triggers.OnEndReached],
   props: {
+    onRefresh: (0, _types.createActionProp)(),
+    onEndReached: (0, _types.createActionProp)(),
     horizontal: (0, _types.createStaticBoolProp)({
       label: "Horizontal",
       description: "Render list horizontally"
@@ -25,6 +28,15 @@ const SEED_DATA = {
     }),
     numColumns: (0, _types.createNumColumnsType)({
       editable: true
+    }),
+    initialNumToRender: (0, _types.createStaticBoolProp)({
+      label: "Initial Num To Render",
+      descriprion: "How many items to render in the initial batch"
+    }),
+    onEndReachedThreshold: (0, _types.createStaticNumberProp)({
+      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
     })
   }
 };

package/lib/commonjs/mappings/Touchable.js

@@ -48,7 +48,7 @@ const SEED_DATA = [{
   name: "Touchable",
   tag: "Touchable",
   description: "An interactive view with no styles",
-  category: _types.COMPONENT_TYPES.deprecated,
+  category: _types.COMPONENT_TYPES.button,
   ...SEED_DATA_PROPS
 }, {
   name: "Pressable",

package/lib/commonjs/styles/overlay.js

@@ -15,7 +15,6 @@ function overlay(elevation) {
   let surfaceColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _DarkTheme.default.colors.surface;
   if (isAnimatedValue(elevation)) {
     const inputRange = [0, 1, 2, 3, 8, 24];
-
     // @ts-expect-error: TS doesn't seem to refine the type correctly
     return elevation.interpolate({
       inputRange,
@@ -24,7 +23,6 @@ function overlay(elevation) {
       })
     });
   }
-
   // @ts-expect-error: TS doesn't seem to refine the type correctly
   return calculateColor(surfaceColor, elevation);
 }
@@ -65,4 +63,4 @@ const elevationOverlayTransparency = {
   22: 15.72,
   23: 15.84,
   24: 16
-};
+};};

package/lib/commonjs/utilities.js

@@ -57,7 +57,6 @@ function extractBorderAndMarginStyles(style, additionalBorderStyles, additionalM
     marginStyles
   };
 }
-
 /**
  * Merges a style object on top of another style object. In React Native,
  * keys with undefined values in a style object will still override styles
@@ -90,4 +89,4 @@ function getValueForRadioButton(value) {
   } else {
     throw new Error("Invalid value: ".concat(value));
   }
-}
+}}

package/lib/module/mappings/FlashList.js

@@ -1,5 +1,40 @@
-import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS } from "@draftbit/types";
-export const SEED_DATA = {
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS, Triggers, createActionProp, createStaticNumberProp } from "@draftbit/types";
+export const SEED_DATA = [{
+  name: "Masonry List",
+  tag: "MasonryFlashList",
+  description: "Masonry Flashlist by Shopify",
+  packageName: "@shopify/flash-list",
+  category: COMPONENT_TYPES.data,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: {
+    flex: 1
+  },
+  triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
+  props: {
+    onRefresh: createActionProp(),
+    onEndReached: createActionProp(),
+    numColumns: createNumColumnsType({
+      editable: true
+    }),
+    estimatedItemSize: createNumberProp({
+      group: GROUPS.basic,
+      label: "Est. Item Size",
+      description: "Approximate size of the items before rendering.",
+      defaultValue: 50,
+      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."
+    }),
+    onEndReachedThreshold: createStaticNumberProp({
+      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
+    })
+  }
+}, {
   name: "FlashList",
   tag: "FlashList",
   description: "Flashlist by Shopify",
@@ -9,7 +44,10 @@ export const SEED_DATA = {
   layout: {
     flex: 1
   },
+  triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
   props: {
+    onRefresh: createActionProp(),
+    onEndReached: createActionProp(),
     estimatedItemSize: createNumberProp({
       group: GROUPS.basic,
       label: "Est. Item Size",
@@ -28,6 +66,11 @@ export const SEED_DATA = {
     }),
     numColumns: createNumColumnsType({
       editable: true
+    }),
+    onEndReachedThreshold: createStaticNumberProp({
+      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
     })
   }
-};
+}];

package/lib/module/mappings/FlatList.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS } from "@draftbit/types";
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, Triggers, createActionProp, createStaticNumberProp } from "@draftbit/types";
 export const SEED_DATA = {
   name: "List",
   tag: "FlatList",
@@ -8,7 +8,10 @@ export const SEED_DATA = {
   layout: {
     flex: 1
   },
+  triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
   props: {
+    onRefresh: createActionProp(),
+    onEndReached: createActionProp(),
     horizontal: createStaticBoolProp({
       label: "Horizontal",
       description: "Render list horizontally"
@@ -19,6 +22,15 @@ export const SEED_DATA = {
     }),
     numColumns: createNumColumnsType({
       editable: true
+    }),
+    initialNumToRender: createStaticBoolProp({
+      label: "Initial Num To Render",
+      descriprion: "How many items to render in the initial batch"
+    }),
+    onEndReachedThreshold: createStaticNumberProp({
+      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
     })
   }
 };

package/lib/module/mappings/Touchable.js

@@ -42,7 +42,7 @@ export const SEED_DATA = [{
   name: "Touchable",
   tag: "Touchable",
   description: "An interactive view with no styles",
-  category: COMPONENT_TYPES.deprecated,
+  category: COMPONENT_TYPES.button,
   ...SEED_DATA_PROPS
 }, {
   name: "Pressable",

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

@@ -1,4 +1,4 @@
-export declare const SEED_DATA: {
+export declare const SEED_DATA: ({
     name: string;
     tag: string;
     description: string;
@@ -8,7 +8,105 @@ export declare const SEED_DATA: {
     layout: {
         flex: number;
     };
+    triggers: string[];
     props: {
+        onRefresh: {
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            group: string;
+        };
+        onEndReached: {
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            group: string;
+        };
+        numColumns: {
+            label: string;
+            description: string;
+            group: string;
+            formType: string;
+            propType: string;
+            defaultValue: number;
+            editable: boolean;
+            required: boolean;
+        };
+        estimatedItemSize: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        optimizeItemArrangement: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        onEndReachedThreshold: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        horizontal?: undefined;
+        inverted?: undefined;
+    };
+} | {
+    name: string;
+    tag: string;
+    description: string;
+    packageName: string;
+    category: string;
+    stylesPanelSections: string[];
+    layout: {
+        flex: number;
+    };
+    triggers: string[];
+    props: {
+        onRefresh: {
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            group: string;
+        };
+        onEndReached: {
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            group: string;
+        };
         estimatedItemSize: {
             label: string;
             description: string;
@@ -50,6 +148,18 @@ export declare const SEED_DATA: {
             editable: boolean;
             required: boolean;
         };
+        onEndReachedThreshold: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        optimizeItemArrangement?: undefined;
     };
-};
+})[];
 //# 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":"AASA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BrB,CAAC"}
+{"version":3,"file":"FlashList.d.ts","sourceRoot":"","sources":["../../../../src/mappings/FlashList.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgFrB,CAAC"}

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

@@ -7,7 +7,28 @@ export declare const SEED_DATA: {
     layout: {
         flex: number;
     };
+    triggers: string[];
     props: {
+        onRefresh: {
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            group: string;
+        };
+        onEndReached: {
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            group: string;
+        };
         horizontal: {
             label: string;
             description: string;
@@ -38,6 +59,27 @@ export declare const SEED_DATA: {
             editable: boolean;
             required: boolean;
         };
+        initialNumToRender: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        onEndReachedThreshold: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
     };
 };
 //# 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":"AAOA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBrB,CAAC"}
+{"version":3,"file":"FlatList.d.ts","sourceRoot":"","sources":["../../../../src/mappings/FlatList.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "47.0.1-c14479.2+c14479d",
+  "version": "47.0.1-c25493.2+c254933",
   "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-c14479.2+c14479d",
+    "@draftbit/types": "^47.0.1-c25493.2+c254933",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.4",
@@ -91,5 +91,5 @@
       ]
     ]
   },
-  "gitHead": "c14479de6895023d05be3695cd227333d13a3491"
+  "gitHead": "c254933fb39b42a02182270c6e2e86160a09c52f"
 }

package/src/mappings/FlashList.js

@@ -1,33 +1,79 @@
-import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS, } from "@draftbit/types";
-export const SEED_DATA = {
-    name: "FlashList",
-    tag: "FlashList",
-    description: "Flashlist by Shopify",
-    packageName: "@shopify/flash-list",
-    category: COMPONENT_TYPES.data,
-    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-    layout: {
-        flex: 1,
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS, Triggers, createActionProp, createStaticNumberProp, } from "@draftbit/types";
+export const SEED_DATA = [
+    {
+        name: "Masonry List",
+        tag: "MasonryFlashList",
+        description: "Masonry Flashlist by Shopify",
+        packageName: "@shopify/flash-list",
+        category: COMPONENT_TYPES.data,
+        stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+        layout: {
+            flex: 1,
+        },
+        triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
+        props: {
+            onRefresh: createActionProp(),
+            onEndReached: createActionProp(),
+            numColumns: createNumColumnsType({
+                editable: true,
+            }),
+            estimatedItemSize: createNumberProp({
+                group: GROUPS.basic,
+                label: "Est. Item Size",
+                description: "Approximate size of the items before rendering.",
+                defaultValue: 50,
+                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.",
+            }),
+            onEndReachedThreshold: createStaticNumberProp({
+                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,
+            }),
+        },
     },
-    props: {
-        estimatedItemSize: createNumberProp({
-            group: GROUPS.basic,
-            label: "Est. Item Size",
-            description: "Approximate size of the items before rendering.",
-            defaultValue: 50,
-            step: 1,
-            precision: 0,
-        }),
-        horizontal: createStaticBoolProp({
-            label: "Horizontal",
-            description: "Render list horizontally",
-        }),
-        inverted: createStaticBoolProp({
-            label: "Inverted",
-            description: "If true, reverses the direction.",
-        }),
-        numColumns: createNumColumnsType({
-            editable: true,
-        }),
+    {
+        name: "FlashList",
+        tag: "FlashList",
+        description: "Flashlist by Shopify",
+        packageName: "@shopify/flash-list",
+        category: COMPONENT_TYPES.data,
+        stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+        layout: {
+            flex: 1,
+        },
+        triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
+        props: {
+            onRefresh: createActionProp(),
+            onEndReached: createActionProp(),
+            estimatedItemSize: createNumberProp({
+                group: GROUPS.basic,
+                label: "Est. Item Size",
+                description: "Approximate size of the items before rendering.",
+                defaultValue: 50,
+                step: 1,
+                precision: 0,
+            }),
+            horizontal: createStaticBoolProp({
+                label: "Horizontal",
+                description: "Render list horizontally",
+            }),
+            inverted: createStaticBoolProp({
+                label: "Inverted",
+                description: "If true, reverses the direction.",
+            }),
+            numColumns: createNumColumnsType({
+                editable: true,
+            }),
+            onEndReachedThreshold: createStaticNumberProp({
+                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,
+            }),
+        },
     },
-};
+];

package/src/mappings/FlashList.ts

@@ -5,37 +5,89 @@ import {
   createNumberProp,
   CONTAINER_COMPONENT_STYLES_SECTIONS,
   GROUPS,
+  Triggers,
+  createActionProp,
+  createStaticNumberProp,
 } from "@draftbit/types";
 
-export const SEED_DATA = {
-  name: "FlashList",
-  tag: "FlashList",
-  description: "Flashlist by Shopify",
-  packageName: "@shopify/flash-list",
-  category: COMPONENT_TYPES.data,
-  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-  layout: {
-    flex: 1,
+export const SEED_DATA = [
+  {
+    name: "Masonry List",
+    tag: "MasonryFlashList",
+    description: "Masonry Flashlist by Shopify",
+    packageName: "@shopify/flash-list",
+    category: COMPONENT_TYPES.data,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    layout: {
+      flex: 1,
+    },
+    triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
+    props: {
+      onRefresh: createActionProp(),
+      onEndReached: createActionProp(),
+      numColumns: createNumColumnsType({
+        editable: true,
+      }),
+      estimatedItemSize: createNumberProp({
+        group: GROUPS.basic,
+        label: "Est. Item Size",
+        description: "Approximate size of the items before rendering.",
+        defaultValue: 50,
+        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.",
+      }),
+      onEndReachedThreshold: createStaticNumberProp({
+        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,
+      }),
+    },
   },
-  props: {
-    estimatedItemSize: createNumberProp({
-      group: GROUPS.basic,
-      label: "Est. Item Size",
-      description: "Approximate size of the items before rendering.",
-      defaultValue: 50,
-      step: 1,
-      precision: 0,
-    }),
-    horizontal: createStaticBoolProp({
-      label: "Horizontal",
-      description: "Render list horizontally",
-    }),
-    inverted: createStaticBoolProp({
-      label: "Inverted",
-      description: "If true, reverses the direction.",
-    }),
-    numColumns: createNumColumnsType({
-      editable: true,
-    }),
+  {
+    name: "FlashList",
+    tag: "FlashList",
+    description: "Flashlist by Shopify",
+    packageName: "@shopify/flash-list",
+    category: COMPONENT_TYPES.data,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    layout: {
+      flex: 1,
+    },
+    triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
+    props: {
+      onRefresh: createActionProp(),
+      onEndReached: createActionProp(),
+      estimatedItemSize: createNumberProp({
+        group: GROUPS.basic,
+        label: "Est. Item Size",
+        description: "Approximate size of the items before rendering.",
+        defaultValue: 50,
+        step: 1,
+        precision: 0,
+      }),
+      horizontal: createStaticBoolProp({
+        label: "Horizontal",
+        description: "Render list horizontally",
+      }),
+      inverted: createStaticBoolProp({
+        label: "Inverted",
+        description: "If true, reverses the direction.",
+      }),
+      numColumns: createNumColumnsType({
+        editable: true,
+      }),
+      onEndReachedThreshold: createStaticNumberProp({
+        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,
+      }),
+    },
   },
-};
+];

package/src/mappings/FlatList.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, Triggers, createActionProp, createStaticNumberProp, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "List",
     tag: "FlatList",
@@ -8,7 +8,10 @@ export const SEED_DATA = {
     layout: {
         flex: 1,
     },
+    triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
     props: {
+        onRefresh: createActionProp(),
+        onEndReached: createActionProp(),
         horizontal: createStaticBoolProp({
             label: "Horizontal",
             description: "Render list horizontally",
@@ -20,5 +23,14 @@ export const SEED_DATA = {
         numColumns: createNumColumnsType({
             editable: true,
         }),
+        initialNumToRender: createStaticBoolProp({
+            label: "Initial Num To Render",
+            descriprion: "How many items to render in the initial batch",
+        }),
+        onEndReachedThreshold: createStaticNumberProp({
+            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,
+        }),
     },
 };

package/src/mappings/FlatList.ts

@@ -3,6 +3,9 @@ import {
   createNumColumnsType,
   createStaticBoolProp,
   CONTAINER_COMPONENT_STYLES_SECTIONS,
+  Triggers,
+  createActionProp,
+  createStaticNumberProp,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -14,7 +17,10 @@ export const SEED_DATA = {
   layout: {
     flex: 1,
   },
+  triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
   props: {
+    onRefresh: createActionProp(),
+    onEndReached: createActionProp(),
     horizontal: createStaticBoolProp({
       label: "Horizontal",
       description: "Render list horizontally",
@@ -26,5 +32,15 @@ export const SEED_DATA = {
     numColumns: createNumColumnsType({
       editable: true,
     }),
+    initialNumToRender: createStaticBoolProp({
+      label: "Initial Num To Render",
+      descriprion: "How many items to render in the initial batch",
+    }),
+    onEndReachedThreshold: createStaticNumberProp({
+      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,
+    }),
   },
 };

package/src/mappings/Touchable.js

@@ -47,7 +47,7 @@ export const SEED_DATA = [
         name: "Touchable",
         tag: "Touchable",
         description: "An interactive view with no styles",
-        category: COMPONENT_TYPES.deprecated,
+        category: COMPONENT_TYPES.button,
         ...SEED_DATA_PROPS,
     },
     {

package/src/mappings/Touchable.ts

@@ -57,7 +57,7 @@ export const SEED_DATA = [
     name: "Touchable",
     tag: "Touchable",
     description: "An interactive view with no styles",
-    category: COMPONENT_TYPES.deprecated,
+    category: COMPONENT_TYPES.button,
     ...SEED_DATA_PROPS,
   },
   {