@draftbit/core 43.4.16-cbc807.1 → 43.4.17-ab8b1a.0

package/lib/module/components/Stepper.js

@@ -1,77 +1,59 @@
-import * as React from "react";
+import React, { useEffect, useState } from "react";
 import { View, Text } from "react-native";
+import { isNumber } from "lodash";
 import { withTheme } from "../theming";
 import IconButton from "./IconButton";
-import isNumber from "lodash.isnumber";
 
 const Stepper = _ref => {
   let {
-    Icon,
-    value,
-    min,
-    max,
+    min = -Infinity,
+    max = Infinity,
+    value: valueProp,
+    defaultValue,
     style,
+    typeStyle,
+    iconSize = 24,
+    iconColor,
     onChange,
-    defaultValue,
     theme: {
       colors,
-      typography,
-      roundness
+      typography
     },
-    iconSize = 24,
-    iconColor = colors.strong,
-    borderRadius = roundness,
-    typeStyle
+    Icon
   } = _ref;
-  const [stateValue, setStateValue] = React.useState(value || defaultValue || 0);
-  React.useEffect(() => {
-    if (value || value === 0) {
-      onChange && onChange(stateValue);
-    }
-  }, [onChange, stateValue, value]);
-  React.useEffect(() => {
-    let newValue = value || defaultValue || 0;
+  const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0);
 
-    if (isNumber(max) && newValue > max) {
-      newValue = max;
-    }
+  const isValidValue = valueArg => valueArg >= min && valueArg <= max;
 
-    if (isNumber(min) && newValue < min) {
-      newValue = min;
-    }
+  const handlePlusOrMinus = type => {
+    const newValue = type === "plus" ? value + 1 : value - 1;
 
-    setStateValue(newValue);
-  }, [defaultValue, value, min, max]);
-  const handleMinus = React.useCallback(() => {
-    if (isNumber(min) && value === min) {
-      return;
+    if (isValidValue(newValue)) {
+      setValue(newValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
     }
+  };
 
-    setStateValue(stateValue - 1);
-  }, [min, stateValue, value]);
-  const handlePlus = React.useCallback(() => {
-    if (isNumber(max) && value === max) {
-      return;
-    }
+  useEffect(() => {
+    if (valueProp != null && isNumber(valueProp) && valueProp !== value && isValidValue(valueProp)) {
+      setValue(valueProp);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-    setStateValue(stateValue + 1);
-  }, [max, stateValue, value]);
+  }, [valueProp]);
   return /*#__PURE__*/React.createElement(View, {
     style: [{
       flexDirection: "row"
-    }, style, borderRadius ? {
-      borderRadius
-    } : {}]
+    }, style]
   }, /*#__PURE__*/React.createElement(IconButton, {
     Icon: Icon,
     icon: "MaterialIcons/remove",
-    onPress: handleMinus,
+    onPress: () => handlePlusOrMinus("minus"),
     size: iconSize,
     color: iconColor,
-    disabled: stateValue === min,
-    style: stateValue === min ? {
-      opacity: 0.5
-    } : {}
+    disabled: value === min,
+    style: {
+      opacity: value === min ? 0.5 : 1
+    }
   }), /*#__PURE__*/React.createElement(Text, {
     style: [typography.body1, {
       textAlign: "center",
@@ -79,16 +61,16 @@ const Stepper = _ref => {
       color: colors.medium,
       marginHorizontal: 8
     }, typeStyle]
-  }, value || stateValue), /*#__PURE__*/React.createElement(IconButton, {
+  }, value), /*#__PURE__*/React.createElement(IconButton, {
     Icon: Icon,
     icon: "MaterialIcons/add",
-    onPress: handlePlus,
+    onPress: () => handlePlusOrMinus("plus"),
     size: iconSize,
     color: iconColor,
-    disabled: stateValue === max,
-    style: stateValue === max ? {
-      opacity: 0.5
-    } : {}
+    disabled: value === max,
+    style: {
+      opacity: value === max ? 0.5 : 1
+    }
   }));
 };
 

package/lib/module/components/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Stepper.tsx"],"names":["React","View","Text","withTheme","IconButton","isNumber","Stepper","Icon","value","min","max","style","onChange","defaultValue","theme","colors","typography","roundness","iconSize","iconColor","strong","borderRadius","typeStyle","stateValue","setStateValue","useState","useEffect","newValue","handleMinus","useCallback","handlePlus","flexDirection","opacity","body1","textAlign","alignSelf","color","medium","marginHorizontal"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA4D,cAA5D;AACA,SAASC,SAAT,QAA0B,YAA1B;AAIA,OAAOC,UAAP,MAAuB,cAAvB;AACA,OAAOC,QAAP,MAAqB,iBAArB;;AAgBA,MAAMC,OAAwB,GAAG,QAa3B;AAAA,MAb4B;AAChCC,IAAAA,IADgC;AAEhCC,IAAAA,KAFgC;AAGhCC,IAAAA,GAHgC;AAIhCC,IAAAA,GAJgC;AAKhCC,IAAAA,KALgC;AAMhCC,IAAAA,QANgC;AAOhCC,IAAAA,YAPgC;AAQhCC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,MAAF;AAAUC,MAAAA,UAAV;AAAsBC,MAAAA;AAAtB,KARyB;AAShCC,IAAAA,QAAQ,GAAG,EATqB;AAUhCC,IAAAA,SAAS,GAAGJ,MAAM,CAACK,MAVa;AAWhCC,IAAAA,YAAY,GAAGJ,SAXiB;AAYhCK,IAAAA;AAZgC,GAa5B;AACJ,QAAM,CAACC,UAAD,EAAaC,aAAb,IAA8BxB,KAAK,CAACyB,QAAN,CAClCjB,KAAK,IAAIK,YAAT,IAAyB,CADS,CAApC;AAIAb,EAAAA,KAAK,CAAC0B,SAAN,CAAgB,MAAM;AACpB,QAAIlB,KAAK,IAAIA,KAAK,KAAK,CAAvB,EAA0B;AACxBI,MAAAA,QAAQ,IAAIA,QAAQ,CAACW,UAAD,CAApB;AACD;AACF,GAJD,EAIG,CAACX,QAAD,EAAWW,UAAX,EAAuBf,KAAvB,CAJH;AAMAR,EAAAA,KAAK,CAAC0B,SAAN,CAAgB,MAAM;AACpB,QAAIC,QAAQ,GAAGnB,KAAK,IAAIK,YAAT,IAAyB,CAAxC;;AACA,QAAIR,QAAQ,CAACK,GAAD,CAAR,IAAiBiB,QAAQ,GAAGjB,GAAhC,EAAqC;AACnCiB,MAAAA,QAAQ,GAAGjB,GAAX;AACD;;AACD,QAAIL,QAAQ,CAACI,GAAD,CAAR,IAAiBkB,QAAQ,GAAGlB,GAAhC,EAAqC;AACnCkB,MAAAA,QAAQ,GAAGlB,GAAX;AACD;;AACDe,IAAAA,aAAa,CAACG,QAAD,CAAb;AACD,GATD,EASG,CAACd,YAAD,EAAeL,KAAf,EAAsBC,GAAtB,EAA2BC,GAA3B,CATH;AAWA,QAAMkB,WAAW,GAAG5B,KAAK,CAAC6B,WAAN,CAAkB,MAAM;AAC1C,QAAIxB,QAAQ,CAACI,GAAD,CAAR,IAAiBD,KAAK,KAAKC,GAA/B,EAAoC;AAClC;AACD;;AACDe,IAAAA,aAAa,CAACD,UAAU,GAAG,CAAd,CAAb;AACD,GALmB,EAKjB,CAACd,GAAD,EAAMc,UAAN,EAAkBf,KAAlB,CALiB,CAApB;AAOA,QAAMsB,UAAU,GAAG9B,KAAK,CAAC6B,WAAN,CAAkB,MAAM;AACzC,QAAIxB,QAAQ,CAACK,GAAD,CAAR,IAAiBF,KAAK,KAAKE,GAA/B,EAAoC;AAClC;AACD;;AACDc,IAAAA,aAAa,CAACD,UAAU,GAAG,CAAd,CAAb;AACD,GALkB,EAKhB,CAACb,GAAD,EAAMa,UAAN,EAAkBf,KAAlB,CALgB,CAAnB;AAOA,sBACE,oBAAC,IAAD;AACE,IAAA,KAAK,EAAE,CACL;AAAEuB,MAAAA,aAAa,EAAE;AAAjB,KADK,EAELpB,KAFK,EAGLU,YAAY,GAAG;AAAEA,MAAAA;AAAF,KAAH,GAAsB,EAH7B;AADT,kBAOE,oBAAC,UAAD;AACE,IAAA,IAAI,EAAEd,IADR;AAEE,IAAA,IAAI,EAAC,sBAFP;AAGE,IAAA,OAAO,EAAEqB,WAHX;AAIE,IAAA,IAAI,EAAEV,QAJR;AAKE,IAAA,KAAK,EAAEC,SALT;AAME,IAAA,QAAQ,EAAEI,UAAU,KAAKd,GAN3B;AAOE,IAAA,KAAK,EAAEc,UAAU,KAAKd,GAAf,GAAqB;AAAEuB,MAAAA,OAAO,EAAE;AAAX,KAArB,GAAwC;AAPjD,IAPF,eAgBE,oBAAC,IAAD;AACE,IAAA,KAAK,EAAE,CACLhB,UAAU,CAACiB,KADN,EAEL;AACEC,MAAAA,SAAS,EAAE,QADb;AAEEC,MAAAA,SAAS,EAAE,QAFb;AAGEC,MAAAA,KAAK,EAAErB,MAAM,CAACsB,MAHhB;AAIEC,MAAAA,gBAAgB,EAAE;AAJpB,KAFK,EAQLhB,SARK;AADT,KAYGd,KAAK,IAAIe,UAZZ,CAhBF,eA8BE,oBAAC,UAAD;AACE,IAAA,IAAI,EAAEhB,IADR;AAEE,IAAA,IAAI,EAAC,mBAFP;AAGE,IAAA,OAAO,EAAEuB,UAHX;AAIE,IAAA,IAAI,EAAEZ,QAJR;AAKE,IAAA,KAAK,EAAEC,SALT;AAME,IAAA,QAAQ,EAAEI,UAAU,KAAKb,GAN3B;AAOE,IAAA,KAAK,EAAEa,UAAU,KAAKb,GAAf,GAAqB;AAAEsB,MAAAA,OAAO,EAAE;AAAX,KAArB,GAAwC;AAPjD,IA9BF,CADF;AA0CD,CA3FD;;AA6FA,eAAe7B,SAAS,CAACG,OAAD,CAAxB","sourcesContent":["import * as React from \"react\";\nimport { View, Text, StyleProp, ViewStyle, TextStyle } from \"react-native\";\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\n\nimport IconButton from \"./IconButton\";\nimport isNumber from \"lodash.isnumber\";\n\ntype Props = {\n  value?: number;\n  min?: number;\n  max?: number;\n  theme: Theme;\n  style?: StyleProp<ViewStyle>;\n  onChange?: (value: number) => void;\n  defaultValue?: number;\n  iconSize?: number;\n  iconColor?: string;\n  borderRadius?: number;\n  typeStyle?: StyleProp<TextStyle>;\n} & IconSlot;\n\nconst Stepper: React.FC<Props> = ({\n  Icon,\n  value,\n  min,\n  max,\n  style,\n  onChange,\n  defaultValue,\n  theme: { colors, typography, roundness },\n  iconSize = 24,\n  iconColor = colors.strong,\n  borderRadius = roundness,\n  typeStyle,\n}) => {\n  const [stateValue, setStateValue] = React.useState(\n    value || defaultValue || 0\n  );\n\n  React.useEffect(() => {\n    if (value || value === 0) {\n      onChange && onChange(stateValue);\n    }\n  }, [onChange, stateValue, value]);\n\n  React.useEffect(() => {\n    let newValue = value || defaultValue || 0;\n    if (isNumber(max) && newValue > max) {\n      newValue = max;\n    }\n    if (isNumber(min) && newValue < min) {\n      newValue = min;\n    }\n    setStateValue(newValue);\n  }, [defaultValue, value, min, max]);\n\n  const handleMinus = React.useCallback(() => {\n    if (isNumber(min) && value === min) {\n      return;\n    }\n    setStateValue(stateValue - 1);\n  }, [min, stateValue, value]);\n\n  const handlePlus = React.useCallback(() => {\n    if (isNumber(max) && value === max) {\n      return;\n    }\n    setStateValue(stateValue + 1);\n  }, [max, stateValue, value]);\n\n  return (\n    <View\n      style={[\n        { flexDirection: \"row\" },\n        style,\n        borderRadius ? { borderRadius } : {},\n      ]}\n    >\n      <IconButton\n        Icon={Icon}\n        icon=\"MaterialIcons/remove\"\n        onPress={handleMinus}\n        size={iconSize}\n        color={iconColor}\n        disabled={stateValue === min}\n        style={stateValue === min ? { opacity: 0.5 } : {}}\n      />\n      <Text\n        style={[\n          typography.body1,\n          {\n            textAlign: \"center\",\n            alignSelf: \"center\",\n            color: colors.medium,\n            marginHorizontal: 8,\n          },\n          typeStyle,\n        ]}\n      >\n        {value || stateValue}\n      </Text>\n      <IconButton\n        Icon={Icon}\n        icon=\"MaterialIcons/add\"\n        onPress={handlePlus}\n        size={iconSize}\n        color={iconColor}\n        disabled={stateValue === max}\n        style={stateValue === max ? { opacity: 0.5 } : {}}\n      />\n    </View>\n  );\n};\n\nexport default withTheme(Stepper);\n"]}
+{"version":3,"sources":["Stepper.tsx"],"names":["React","useEffect","useState","View","Text","isNumber","withTheme","IconButton","Stepper","min","Infinity","max","value","valueProp","defaultValue","style","typeStyle","iconSize","iconColor","onChange","theme","colors","typography","Icon","setValue","isValidValue","valueArg","handlePlusOrMinus","type","newValue","flexDirection","opacity","body1","textAlign","alignSelf","color","medium","marginHorizontal"],"mappings":"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","sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { View, Text, StyleProp, ViewStyle, TextStyle } from \"react-native\";\nimport { isNumber } from \"lodash\";\n\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\nimport IconButton from \"./IconButton\";\n\ntype Props = {\n  min: number;\n  max: number;\n  value?: number;\n  defaultValue?: number;\n  style?: StyleProp<ViewStyle>;\n  typeStyle?: StyleProp<TextStyle>;\n  iconSize: number;\n  iconColor?: string;\n  onChange?: (value: number) => void;\n  theme: Theme;\n} & IconSlot;\n\nconst Stepper: FC<Props> = ({\n  min = -Infinity,\n  max = Infinity,\n  value: valueProp,\n  defaultValue,\n  style,\n  typeStyle,\n  iconSize = 24,\n  iconColor,\n  onChange,\n  theme: { colors, typography },\n  Icon,\n}) => {\n  const [value, setValue] = useState(defaultValue ?? 0);\n\n  const isValidValue = (valueArg: number) => valueArg >= min && valueArg <= max;\n\n  const handlePlusOrMinus = (type: \"plus\" | \"minus\") => {\n    const newValue = type === \"plus\" ? value + 1 : value - 1;\n\n    if (isValidValue(newValue)) {\n      setValue(newValue);\n      onChange?.(newValue);\n    }\n  };\n\n  useEffect(() => {\n    if (\n      valueProp != null &&\n      isNumber(valueProp) &&\n      valueProp !== value &&\n      isValidValue(valueProp)\n    ) {\n      setValue(valueProp);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [valueProp]);\n\n  return (\n    <View style={[{ flexDirection: \"row\" }, style]}>\n      <IconButton\n        Icon={Icon}\n        icon=\"MaterialIcons/remove\"\n        onPress={() => handlePlusOrMinus(\"minus\")}\n        size={iconSize}\n        color={iconColor}\n        disabled={value === min}\n        style={{ opacity: value === min ? 0.5 : 1 }}\n      />\n\n      <Text\n        style={[\n          typography.body1,\n          {\n            textAlign: \"center\",\n            alignSelf: \"center\",\n            color: colors.medium,\n            marginHorizontal: 8,\n          },\n          typeStyle,\n        ]}\n      >\n        {value}\n      </Text>\n\n      <IconButton\n        Icon={Icon}\n        icon=\"MaterialIcons/add\"\n        onPress={() => handlePlusOrMinus(\"plus\")}\n        size={iconSize}\n        color={iconColor}\n        disabled={value === max}\n        style={{ opacity: value === max ? 0.5 : 1 }}\n      />\n    </View>\n  );\n};\n\nexport default withTheme(Stepper);\n"]}

package/lib/module/components/Surface.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 /* Copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx */
 import * as React from "react";
-import { Animated, StyleSheet, View, Platform } from "react-native";
+import { Animated, StyleSheet } from "react-native";
 import shadow from "../styles/shadow";
 import overlay from "../styles/overlay";
 import { withTheme } from "../theming";
@@ -18,10 +18,7 @@ const Surface = _ref => {
   const {
     elevation: styleElevation = 3,
     backgroundColor,
-    borderRadius,
-    overflow,
-    height,
-    width
+    ...restStyle
   } = StyleSheet.flatten(style) || {};
   const {
     dark: isDarkTheme,
@@ -42,20 +39,13 @@ const Surface = _ref => {
   };
 
   return /*#__PURE__*/React.createElement(Animated.View, _extends({}, rest, {
-    style: [style, {
+    style: [{
       backgroundColor: getBackgroundColor(),
-      overflow: Platform.OS === "web" && overflow === "hidden" ? "hidden" : "visible",
       elevation,
-      ...evalationStyles
-    }]
-  }), /*#__PURE__*/React.createElement(View, {
-    style: [{
-      overflow,
-      borderRadius,
-      height,
-      width
+      ...evalationStyles,
+      ...restStyle
     }]
-  }, children));
+  }), children);
 };
 
 export default withTheme(Surface);

package/lib/module/components/Surface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Surface.tsx"],"names":["React","Animated","StyleSheet","View","Platform","shadow","overlay","withTheme","Surface","elevation","propElevation","style","theme","children","rest","styleElevation","backgroundColor","borderRadius","overflow","height","width","flatten","dark","isDarkTheme","mode","colors","evalationStyles","getBackgroundColor","surface","OS"],"mappings":";;AAAA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SACEC,QADF,EAEEC,UAFF,EAMEC,IANF,EAOEC,QAPF,QAQO,cARP;AASA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,OAAOC,OAAP,MAAoB,mBAApB;AACA,SAASC,SAAT,QAA0B,YAA1B;;AASA,MAAMC,OAAwB,GAAG,QAM3B;AAAA,MAN4B;AAChCC,IAAAA,SAAS,EAAEC,aADqB;AAEhCC,IAAAA,KAFgC;AAGhCC,IAAAA,KAHgC;AAIhCC,IAAAA,QAJgC;AAKhC,OAAGC;AAL6B,GAM5B;AACJ,QAAM;AACJL,IAAAA,SAAS,EAAEM,cAAc,GAAG,CADxB;AAEJC,IAAAA,eAFI;AAGJC,IAAAA,YAHI;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,MALI;AAMJC,IAAAA;AANI,MAODlB,UAAU,CAACmB,OAAX,CAAmBV,KAAnB,KAA6B,EAPlC;AASA,QAAM;AAAEW,IAAAA,IAAI,EAAEC,WAAR;AAAqBC,IAAAA,IAArB;AAA2BC,IAAAA;AAA3B,MAAsCb,KAA5C;AAEA,QAAMH,SAAS,GAAGC,aAAa,IAAIK,cAAnC;AAEA,QAAMW,eAAe,GAAGjB,SAAS,GAAGJ,MAAM,CAACI,SAAD,CAAT,GAAuB,EAAxD;;AAEA,QAAMkB,kBAAkB,GAAG,MAAM;AAC/B,QAAIX,eAAJ,EAAqB;AACnB,aAAOA,eAAP;AACD,KAFD,MAEO,IAAIO,WAAW,IAAIC,IAAI,KAAK,UAA5B,EAAwC;AAC7C,aAAOlB,OAAO,CAACG,SAAD,EAAYgB,MAAM,CAACG,OAAnB,CAAd;AACD,KAFM,MAEA;AACL,aAAOH,MAAM,CAACG,OAAd;AACD;AACF,GARD;;AAUA,sBACE,oBAAC,QAAD,CAAU,IAAV,eACMd,IADN;AAEE,IAAA,KAAK,EAAE,CACLH,KADK,EAEL;AACEK,MAAAA,eAAe,EAAEW,kBAAkB,EADrC;AAEET,MAAAA,QAAQ,EACNd,QAAQ,CAACyB,EAAT,KAAgB,KAAhB,IAAyBX,QAAQ,KAAK,QAAtC,GACI,QADJ,GAEI,SALR;AAMET,MAAAA,SANF;AAOE,SAAGiB;AAPL,KAFK;AAFT,mBAeE,oBAAC,IAAD;AACE,IAAA,KAAK,EAAE,CACL;AACER,MAAAA,QADF;AAEED,MAAAA,YAFF;AAGEE,MAAAA,MAHF;AAIEC,MAAAA;AAJF,KADK;AADT,KAUGP,QAVH,CAfF,CADF;AA8BD,CA9DD;;AAgEA,eAAeN,SAAS,CAACC,OAAD,CAAxB","sourcesContent":["/* Copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx */\nimport * as React from \"react\";\nimport {\n  Animated,\n  StyleSheet,\n  ViewProps,\n  StyleProp,\n  ViewStyle,\n  View,\n  Platform,\n} from \"react-native\";\nimport shadow from \"../styles/shadow\";\nimport overlay from \"../styles/overlay\";\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\n\ntype Props = {\n  elevation?: number;\n  style?: StyleProp<ViewStyle>;\n  theme: Theme;\n} & ViewProps;\n\nconst Surface: React.FC<Props> = ({\n  elevation: propElevation,\n  style,\n  theme,\n  children,\n  ...rest\n}) => {\n  const {\n    elevation: styleElevation = 3,\n    backgroundColor,\n    borderRadius,\n    overflow,\n    height,\n    width,\n  } = (StyleSheet.flatten(style) || {}) as ViewStyle;\n\n  const { dark: isDarkTheme, mode, colors } = theme;\n\n  const elevation = propElevation || styleElevation;\n\n  const evalationStyles = elevation ? shadow(elevation) : {};\n\n  const getBackgroundColor = () => {\n    if (backgroundColor) {\n      return backgroundColor;\n    } else if (isDarkTheme && mode === \"adaptive\") {\n      return overlay(elevation, colors.surface);\n    } else {\n      return colors.surface;\n    }\n  };\n\n  return (\n    <Animated.View\n      {...rest}\n      style={[\n        style,\n        {\n          backgroundColor: getBackgroundColor(),\n          overflow:\n            Platform.OS === \"web\" && overflow === \"hidden\"\n              ? \"hidden\"\n              : \"visible\",\n          elevation,\n          ...evalationStyles,\n        },\n      ]}\n    >\n      <View\n        style={[\n          {\n            overflow,\n            borderRadius,\n            height,\n            width,\n          },\n        ]}\n      >\n        {children}\n      </View>\n    </Animated.View>\n  );\n};\n\nexport default withTheme(Surface);\n"]}
+{"version":3,"sources":["Surface.tsx"],"names":["React","Animated","StyleSheet","shadow","overlay","withTheme","Surface","elevation","propElevation","style","theme","children","rest","styleElevation","backgroundColor","restStyle","flatten","dark","isDarkTheme","mode","colors","evalationStyles","getBackgroundColor","surface"],"mappings":";;AAAA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SACEC,QADF,EAEEC,UAFF,QAMO,cANP;AAQA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,OAAOC,OAAP,MAAoB,mBAApB;AACA,SAASC,SAAT,QAA0B,YAA1B;;AASA,MAAMC,OAAwB,GAAG,QAM3B;AAAA,MAN4B;AAChCC,IAAAA,SAAS,EAAEC,aADqB;AAEhCC,IAAAA,KAFgC;AAGhCC,IAAAA,KAHgC;AAIhCC,IAAAA,QAJgC;AAKhC,OAAGC;AAL6B,GAM5B;AACJ,QAAM;AACJL,IAAAA,SAAS,EAAEM,cAAc,GAAG,CADxB;AAEJC,IAAAA,eAFI;AAGJ,OAAGC;AAHC,MAIDb,UAAU,CAACc,OAAX,CAAmBP,KAAnB,KAA6B,EAJlC;AAMA,QAAM;AAAEQ,IAAAA,IAAI,EAAEC,WAAR;AAAqBC,IAAAA,IAArB;AAA2BC,IAAAA;AAA3B,MAAsCV,KAA5C;AAEA,QAAMH,SAAS,GAAGC,aAAa,IAAIK,cAAnC;AAEA,QAAMQ,eAAe,GAAGd,SAAS,GAAGJ,MAAM,CAACI,SAAD,CAAT,GAAuB,EAAxD;;AAEA,QAAMe,kBAAkB,GAAG,MAAM;AAC/B,QAAIR,eAAJ,EAAqB;AACnB,aAAOA,eAAP;AACD,KAFD,MAEO,IAAII,WAAW,IAAIC,IAAI,KAAK,UAA5B,EAAwC;AAC7C,aAAOf,OAAO,CAACG,SAAD,EAAYa,MAAM,CAACG,OAAnB,CAAd;AACD,KAFM,MAEA;AACL,aAAOH,MAAM,CAACG,OAAd;AACD;AACF,GARD;;AAUA,sBACE,oBAAC,QAAD,CAAU,IAAV,eACMX,IADN;AAEE,IAAA,KAAK,EAAE,CACL;AACEE,MAAAA,eAAe,EAAEQ,kBAAkB,EADrC;AAEEf,MAAAA,SAFF;AAGE,SAAGc,eAHL;AAIE,SAAGN;AAJL,KADK;AAFT,MAWGJ,QAXH,CADF;AAeD,CA5CD;;AA8CA,eAAeN,SAAS,CAACC,OAAD,CAAxB","sourcesContent":["/* Copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx */\nimport * as React from \"react\";\nimport {\n  Animated,\n  StyleSheet,\n  ViewProps,\n  StyleProp,\n  ViewStyle,\n} from \"react-native\";\n\nimport shadow from \"../styles/shadow\";\nimport overlay from \"../styles/overlay\";\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\n\ntype Props = {\n  elevation?: number;\n  style?: StyleProp<ViewStyle>;\n  theme: Theme;\n} & ViewProps;\n\nconst Surface: React.FC<Props> = ({\n  elevation: propElevation,\n  style,\n  theme,\n  children,\n  ...rest\n}) => {\n  const {\n    elevation: styleElevation = 3,\n    backgroundColor,\n    ...restStyle\n  } = (StyleSheet.flatten(style) || {}) as ViewStyle;\n\n  const { dark: isDarkTheme, mode, colors } = theme;\n\n  const elevation = propElevation || styleElevation;\n\n  const evalationStyles = elevation ? shadow(elevation) : {};\n\n  const getBackgroundColor = () => {\n    if (backgroundColor) {\n      return backgroundColor;\n    } else if (isDarkTheme && mode === \"adaptive\") {\n      return overlay(elevation, colors.surface);\n    } else {\n      return colors.surface;\n    }\n  };\n\n  return (\n    <Animated.View\n      {...rest}\n      style={[\n        {\n          backgroundColor: getBackgroundColor(),\n          elevation,\n          ...evalationStyles,\n          ...restStyle,\n        },\n      ]}\n    >\n      {children}\n    </Animated.View>\n  );\n};\n\nexport default withTheme(Surface);\n"]}

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

@@ -1,17 +1,17 @@
 import * as React from "react";
 import { StyleProp, ViewStyle } from "react-native";
 import type { Theme } from "../styles/DefaultTheme";
-declare type Props = {
-    hasSafeArea: boolean;
+declare type ScreenContainerProps = {
     scrollable: boolean;
-    hasBottomSafeArea: boolean;
+    hasSafeArea: boolean;
     hasTopSafeArea: boolean;
+    hasBottomSafeArea: boolean;
     theme: Theme;
     style?: StyleProp<ViewStyle>;
     children?: React.ReactNode;
 };
-declare function ScreenContainer({ hasSafeArea, scrollable, hasBottomSafeArea, hasTopSafeArea, theme, style, children, ...rest }: Props): JSX.Element;
-declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<Props, "theme"> & {
+declare function ScreenContainer({ scrollable, hasSafeArea, hasBottomSafeArea, hasTopSafeArea, theme, style, children, ...rest }: ScreenContainerProps): JSX.Element;
+declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<ScreenContainerProps, "theme"> & {
     theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
-}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<Props> & typeof ScreenContainer, {}>;
+}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<ScreenContainerProps> & typeof ScreenContainer, {}>;
 export default _default;

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

@@ -1,19 +1,18 @@
-import * as React from "react";
+import React from "react";
 import { StyleProp, ViewStyle, TextStyle } from "react-native";
 import type { Theme } from "../styles/DefaultTheme";
 import type { IconSlot } from "../interfaces/Icon";
 declare type Props = {
+    min: number;
+    max: number;
     value?: number;
-    min?: number;
-    max?: number;
-    theme: Theme;
-    style?: StyleProp<ViewStyle>;
-    onChange?: (value: number) => void;
     defaultValue?: number;
-    iconSize?: number;
-    iconColor?: string;
-    borderRadius?: number;
+    style?: StyleProp<ViewStyle>;
     typeStyle?: StyleProp<TextStyle>;
+    iconSize: number;
+    iconColor?: string;
+    onChange?: (value: number) => void;
+    theme: Theme;
 } & IconSlot;
 declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<Props, "theme"> & {
     theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "43.4.16-cbc807.1+cbc8074b",
+  "version": "43.4.17-ab8b1a.0+ab8b1acf",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -80,5 +80,5 @@
       ]
     ]
   },
-  "gitHead": "cbc8074b66f9168d8c24d7b1c6e4b298ad545336"
+  "gitHead": "ab8b1acf6dbba1f8e7224cc87ac7c3c7e8a74a4d"
 }

package/src/components/ScreenContainer.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { StyleSheet, ScrollView, View, } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { withTheme } from "../theming";
-function ScreenContainer({ hasSafeArea, scrollable = false, hasBottomSafeArea = false, hasTopSafeArea = false, theme, style, children, ...rest }) {
+function ScreenContainer({ scrollable = false, hasSafeArea = false, hasBottomSafeArea = false, hasTopSafeArea = false, theme, style, children, ...rest }) {
     const backgroundColor = theme.colors.background;
     const edges = ["left", "right"];
     if (hasSafeArea || hasTopSafeArea) {

package/src/components/ScreenContainer.tsx

@@ -11,26 +11,26 @@ import type { Edge } from "react-native-safe-area-context";
 import { withTheme } from "../theming";
 import type { Theme } from "../styles/DefaultTheme";
 
-type Props = {
-  hasSafeArea: boolean;
+type ScreenContainerProps = {
   scrollable: boolean;
-  hasBottomSafeArea: boolean;
+  hasSafeArea: boolean;
   hasTopSafeArea: boolean;
+  hasBottomSafeArea: boolean;
   theme: Theme;
   style?: StyleProp<ViewStyle>;
   children?: React.ReactNode;
 };
 
 function ScreenContainer({
-  hasSafeArea,
   scrollable = false,
+  hasSafeArea = false,
   hasBottomSafeArea = false,
   hasTopSafeArea = false,
   theme,
   style,
   children,
   ...rest
-}: Props) {
+}: ScreenContainerProps) {
   const backgroundColor = theme.colors.background;
 
   const edges: Edge[] = ["left", "right"];

package/src/components/Stepper.js

@@ -1,43 +1,29 @@
-import * as React from "react";
+import React, { useEffect, useState } from "react";
 import { View, Text } from "react-native";
+import { isNumber } from "lodash";
 import { withTheme } from "../theming";
 import IconButton from "./IconButton";
-import isNumber from "lodash.isnumber";
-const Stepper = ({ Icon, value, min, max, style, onChange, defaultValue, theme: { colors, typography, roundness }, iconSize = 24, iconColor = colors.strong, borderRadius = roundness, typeStyle, }) => {
-    const [stateValue, setStateValue] = React.useState(value || defaultValue || 0);
-    React.useEffect(() => {
-        if (value || value === 0) {
-            onChange && onChange(stateValue);
+const Stepper = ({ min = -Infinity, max = Infinity, value: valueProp, defaultValue, style, typeStyle, iconSize = 24, iconColor, onChange, theme: { colors, typography }, Icon, }) => {
+    const [value, setValue] = useState(defaultValue ?? 0);
+    const isValidValue = (valueArg) => valueArg >= min && valueArg <= max;
+    const handlePlusOrMinus = (type) => {
+        const newValue = type === "plus" ? value + 1 : value - 1;
+        if (isValidValue(newValue)) {
+            setValue(newValue);
+            onChange?.(newValue);
         }
-    }, [onChange, stateValue, value]);
-    React.useEffect(() => {
-        let newValue = value || defaultValue || 0;
-        if (isNumber(max) && newValue > max) {
-            newValue = max;
+    };
+    useEffect(() => {
+        if (valueProp != null &&
+            isNumber(valueProp) &&
+            valueProp !== value &&
+            isValidValue(valueProp)) {
+            setValue(valueProp);
         }
-        if (isNumber(min) && newValue < min) {
-            newValue = min;
-        }
-        setStateValue(newValue);
-    }, [defaultValue, value, min, max]);
-    const handleMinus = React.useCallback(() => {
-        if (isNumber(min) && value === min) {
-            return;
-        }
-        setStateValue(stateValue - 1);
-    }, [min, stateValue, value]);
-    const handlePlus = React.useCallback(() => {
-        if (isNumber(max) && value === max) {
-            return;
-        }
-        setStateValue(stateValue + 1);
-    }, [max, stateValue, value]);
-    return (React.createElement(View, { style: [
-            { flexDirection: "row" },
-            style,
-            borderRadius ? { borderRadius } : {},
-        ] },
-        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: handleMinus, size: iconSize, color: iconColor, disabled: stateValue === min, style: stateValue === min ? { opacity: 0.5 } : {} }),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [valueProp]);
+    return (React.createElement(View, { style: [{ flexDirection: "row" }, style] },
+        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: () => handlePlusOrMinus("minus"), size: iconSize, color: iconColor, disabled: value === min, style: { opacity: value === min ? 0.5 : 1 } }),
         React.createElement(Text, { style: [
                 typography.body1,
                 {
@@ -47,7 +33,7 @@ const Stepper = ({ Icon, value, min, max, style, onChange, defaultValue, theme:
                     marginHorizontal: 8,
                 },
                 typeStyle,
-            ] }, value || stateValue),
-        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/add", onPress: handlePlus, size: iconSize, color: iconColor, disabled: stateValue === max, style: stateValue === max ? { opacity: 0.5 } : {} })));
+            ] }, value),
+        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/add", onPress: () => handlePlusOrMinus("plus"), size: iconSize, color: iconColor, disabled: value === max, style: { opacity: value === max ? 0.5 : 1 } })));
 };
 export default withTheme(Stepper);

package/src/components/Stepper.tsx

@@ -1,92 +1,75 @@
-import * as React from "react";
+import React, { FC, useEffect, useState } from "react";
 import { View, Text, StyleProp, ViewStyle, TextStyle } from "react-native";
+import { isNumber } from "lodash";
+
 import { withTheme } from "../theming";
 import type { Theme } from "../styles/DefaultTheme";
 import type { IconSlot } from "../interfaces/Icon";
-
 import IconButton from "./IconButton";
-import isNumber from "lodash.isnumber";
 
 type Props = {
+  min: number;
+  max: number;
   value?: number;
-  min?: number;
-  max?: number;
-  theme: Theme;
-  style?: StyleProp<ViewStyle>;
-  onChange?: (value: number) => void;
   defaultValue?: number;
-  iconSize?: number;
-  iconColor?: string;
-  borderRadius?: number;
+  style?: StyleProp<ViewStyle>;
   typeStyle?: StyleProp<TextStyle>;
+  iconSize: number;
+  iconColor?: string;
+  onChange?: (value: number) => void;
+  theme: Theme;
 } & IconSlot;
 
-const Stepper: React.FC<Props> = ({
-  Icon,
-  value,
-  min,
-  max,
-  style,
-  onChange,
+const Stepper: FC<Props> = ({
+  min = -Infinity,
+  max = Infinity,
+  value: valueProp,
   defaultValue,
-  theme: { colors, typography, roundness },
-  iconSize = 24,
-  iconColor = colors.strong,
-  borderRadius = roundness,
+  style,
   typeStyle,
+  iconSize = 24,
+  iconColor,
+  onChange,
+  theme: { colors, typography },
+  Icon,
 }) => {
-  const [stateValue, setStateValue] = React.useState(
-    value || defaultValue || 0
-  );
+  const [value, setValue] = useState(defaultValue ?? 0);
 
-  React.useEffect(() => {
-    if (value || value === 0) {
-      onChange && onChange(stateValue);
-    }
-  }, [onChange, stateValue, value]);
+  const isValidValue = (valueArg: number) => valueArg >= min && valueArg <= max;
 
-  React.useEffect(() => {
-    let newValue = value || defaultValue || 0;
-    if (isNumber(max) && newValue > max) {
-      newValue = max;
-    }
-    if (isNumber(min) && newValue < min) {
-      newValue = min;
-    }
-    setStateValue(newValue);
-  }, [defaultValue, value, min, max]);
+  const handlePlusOrMinus = (type: "plus" | "minus") => {
+    const newValue = type === "plus" ? value + 1 : value - 1;
 
-  const handleMinus = React.useCallback(() => {
-    if (isNumber(min) && value === min) {
-      return;
+    if (isValidValue(newValue)) {
+      setValue(newValue);
+      onChange?.(newValue);
     }
-    setStateValue(stateValue - 1);
-  }, [min, stateValue, value]);
+  };
 
-  const handlePlus = React.useCallback(() => {
-    if (isNumber(max) && value === max) {
-      return;
+  useEffect(() => {
+    if (
+      valueProp != null &&
+      isNumber(valueProp) &&
+      valueProp !== value &&
+      isValidValue(valueProp)
+    ) {
+      setValue(valueProp);
     }
-    setStateValue(stateValue + 1);
-  }, [max, stateValue, value]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [valueProp]);
 
   return (
-    <View
-      style={[
-        { flexDirection: "row" },
-        style,
-        borderRadius ? { borderRadius } : {},
-      ]}
-    >
+    <View style={[{ flexDirection: "row" }, style]}>
       <IconButton
         Icon={Icon}
         icon="MaterialIcons/remove"
-        onPress={handleMinus}
+        onPress={() => handlePlusOrMinus("minus")}
         size={iconSize}
         color={iconColor}
-        disabled={stateValue === min}
-        style={stateValue === min ? { opacity: 0.5 } : {}}
+        disabled={value === min}
+        style={{ opacity: value === min ? 0.5 : 1 }}
       />
+
       <Text
         style={[
           typography.body1,
@@ -99,16 +82,17 @@ const Stepper: React.FC<Props> = ({
           typeStyle,
         ]}
       >
-        {value || stateValue}
+        {value}
       </Text>
+
       <IconButton
         Icon={Icon}
         icon="MaterialIcons/add"
-        onPress={handlePlus}
+        onPress={() => handlePlusOrMinus("plus")}
         size={iconSize}
         color={iconColor}
-        disabled={stateValue === max}
-        style={stateValue === max ? { opacity: 0.5 } : {}}
+        disabled={value === max}
+        style={{ opacity: value === max ? 0.5 : 1 }}
       />
     </View>
   );

package/src/components/Surface.js

@@ -1,11 +1,11 @@
 /* Copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx */
 import * as React from "react";
-import { Animated, StyleSheet, View, Platform, } from "react-native";
+import { Animated, StyleSheet, } from "react-native";
 import shadow from "../styles/shadow";
 import overlay from "../styles/overlay";
 import { withTheme } from "../theming";
 const Surface = ({ elevation: propElevation, style, theme, children, ...rest }) => {
-    const { elevation: styleElevation = 3, backgroundColor, borderRadius, overflow, height, width, } = (StyleSheet.flatten(style) || {});
+    const { elevation: styleElevation = 3, backgroundColor, ...restStyle } = (StyleSheet.flatten(style) || {});
     const { dark: isDarkTheme, mode, colors } = theme;
     const elevation = propElevation || styleElevation;
     const evalationStyles = elevation ? shadow(elevation) : {};
@@ -21,23 +21,12 @@ const Surface = ({ elevation: propElevation, style, theme, children, ...rest })
         }
     };
     return (React.createElement(Animated.View, { ...rest, style: [
-            style,
             {
                 backgroundColor: getBackgroundColor(),
-                overflow: Platform.OS === "web" && overflow === "hidden"
-                    ? "hidden"
-                    : "visible",
                 elevation,
                 ...evalationStyles,
+                ...restStyle,
             },
-        ] },
-        React.createElement(View, { style: [
-                {
-                    overflow,
-                    borderRadius,
-                    height,
-                    width,
-                },
-            ] }, children)));
+        ] }, children));
 };
 export default withTheme(Surface);