@draftbit/core 44.2.3-c421ea.2 → 46.0.1-125de2.1

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

@@ -18,7 +18,7 @@ declare type Props = {
     style?: StyleProp<ViewStyle>;
     theme: Theme;
 } & IconSlot;
-declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<Props, "theme"> & {
+declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<Props>, "theme"> & {
     theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
-}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<Props> & React.FC<Props>, {}>;
+}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<React.PropsWithChildren<Props>> & React.FC<React.PropsWithChildren<Props>>, {}>;
 export default _default;

package/lib/typescript/src/interfaces/Icon.d.ts

@@ -8,9 +8,7 @@ import React from "react";
 import { ViewProps, StyleProp, ImageStyle } from "react-native";
 import { Subtract } from "utility-types";
 declare type Props = {
-    name: string | number | {
-        uri: string;
-    };
+    name: string;
     color?: string;
     size: number;
     style?: StyleProp<ImageStyle>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "44.2.3-c421ea.2+c421ea59",
+  "version": "46.0.1-125de2.1+125de214",
   "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": "^44.1.12",
+    "@draftbit/types": "^46.0.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -52,7 +52,7 @@
     "lodash.isnumber": "^3.0.3",
     "lodash.omit": "^4.5.0",
     "lodash.tonumber": "^4.0.3",
-    "react-native-modal-datetime-picker": "^13.0.0",
+    "react-native-modal-datetime-picker": "^13.1.2",
     "react-native-typography": "^1.4.1",
     "react-native-web-swiper": "^2.2.3"
   },
@@ -78,5 +78,5 @@
       ]
     ]
   },
-  "gitHead": "c421ea59335fbf8024b7a8f199f2a9c61af5ef55"
+  "gitHead": "125de214a9b4bfa36ceb9f4903fcb2b6403bccfe"
 }

package/src/Provider.tsx

@@ -12,6 +12,7 @@ export default class Provider extends React.Component<Props> {
   render() {
     return (
       <PortalHost>
+        {/* @ts-ignore */}
         <ThemeProvider theme={this.props.theme}>
           {this.props.children}
         </ThemeProvider>

package/src/components/ActionSheet/ActionSheetCancel.tsx

@@ -9,7 +9,7 @@ type Props = {
   onPress?: () => void;
 };
 
-const ActionSheetCancel: React.FC<Props> = ({
+const ActionSheetCancel: React.FC<React.PropsWithChildren<Props>> = ({
   label = "Cancel",
   color,
   style,

package/src/components/ActionSheet/ActionSheetItem.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Text, StyleSheet, TouchableOpacity, } from "react-native";
 import { extractStyles } from "../../utilities";
-const ActionSheetItem = ({ label, style, color, onPress }) => {
+const ActionSheetItem = ({ label, style, color, onPress, }) => {
     const { textStyles, viewStyles } = extractStyles(style);
     return (React.createElement(TouchableOpacity, { activeOpacity: 0.7, style: [styles.wrapper, viewStyles], onPress: onPress },
         React.createElement(Text, { style: [styles.label, textStyles, { color }] }, label)));

package/src/components/ActionSheet/ActionSheetItem.tsx

@@ -16,7 +16,12 @@ type Props = {
   onPress?: () => void;
 };
 
-const ActionSheetItem: React.FC<Props> = ({ label, style, color, onPress }) => {
+const ActionSheetItem: React.FC<React.PropsWithChildren<Props>> = ({
+  label,
+  style,
+  color,
+  onPress,
+}) => {
   const { textStyles, viewStyles } = extractStyles(style);
   return (
     <TouchableOpacity

package/src/components/AnimatedCircularProgress.tsx

@@ -20,7 +20,7 @@ type Props = {
   onAnimationComplete?: Animated.EndCallback | undefined;
 } & CircularProgressProps;
 
-const AnimatedCircularProgress: React.FC<Props> = ({
+const AnimatedCircularProgress: React.FC<React.PropsWithChildren<Props>> = ({
   duration = 500,
   easing = Easing.out(Easing.ease),
   fill,

package/src/components/AspectRatio.tsx

@@ -12,7 +12,7 @@ type Props = {
   style?: StyleProp<ViewStyle>;
 };
 
-const AspectRatio: React.FC<Props> = (props) => {
+const AspectRatio: React.FC<React.PropsWithChildren<Props>> = (props) => {
   const [layout, setLayout] = React.useState<LayoutRectangle | null>(null);
   const { aspectRatio = 1, ...inputStyle } =
     StyleSheet.flatten(props.style) || {};

package/src/components/AvatarEdit.tsx

@@ -15,7 +15,7 @@ type Props = {
   theme: Theme;
 } & IconSlot;
 
-const AvatarEdit: React.FC<Props> = ({
+const AvatarEdit: React.FC<React.PropsWithChildren<Props>> = ({
   Icon,
   image,
   size = 80,

package/src/components/Banner.tsx

@@ -43,7 +43,7 @@ type NativeEvent = {
   };
 };
 
-const Banner: React.FC<Props> = ({
+const Banner: React.FC<React.PropsWithChildren<Props>> = ({
   initiallyVisible = true,
   dismissable = true,
   icon,

package/src/components/Card.tsx

@@ -88,7 +88,7 @@ type Props = {
   children?: React.ReactNode;
 } & IconSlot;
 
-const Card: React.FC<Props> = ({
+const Card: React.FC<React.PropsWithChildren<Props>> = ({
   Icon,
   image = Config.cardImageUrl,
   title,

package/src/components/CardBlock.tsx

@@ -28,7 +28,7 @@ type Props = {
   onPress: () => void;
 };
 
-const CardBlock: React.FC<Props> = ({
+const CardBlock: React.FC<React.PropsWithChildren<Props>> = ({
   image = Config.cardImageUrl,
   title,
   leftDescription,

package/src/components/CardContainer.tsx

@@ -35,7 +35,7 @@ type Props = {
   onPress: () => void;
 } & IconSlot;
 
-const CardContainer: React.FC<Props> = ({
+const CardContainer: React.FC<React.PropsWithChildren<Props>> = ({
   Icon,
   icon,
   image = Config.cardImageUrl,

package/src/components/CardContainerRating.tsx

@@ -36,7 +36,7 @@ type Props = {
   onPress: () => void;
 } & IconSlot;
 
-const CardContainerRating: React.FC<Props> = ({
+const CardContainerRating: React.FC<React.PropsWithChildren<Props>> = ({
   Icon,
   icon,
   image = Config.cardImageUrl,

package/src/components/CardContainerShortImage.tsx

@@ -25,7 +25,7 @@ type Props = {
   onPress: () => void;
 };
 
-const CardContainerShortImage: React.FC<Props> = ({
+const CardContainerShortImage: React.FC<React.PropsWithChildren<Props>> = ({
   image = Config.squareImageUrl,
   title,
   subtitle,

package/src/components/CardInline.tsx

@@ -29,7 +29,7 @@ type Props = {
   onPress: () => void;
 };
 
-const CardInline: React.FC<Props> = ({
+const CardInline: React.FC<React.PropsWithChildren<Props>> = ({
   image = Config.cardImageUrl,
   title,
   subtitle,

package/src/components/Carousel.tsx

@@ -17,6 +17,7 @@ type Props = {
   children?: React.ReactNode;
   style?: StyleProp<ViewStyle>;
   dotColor?: string;
+  theme: any;
 };
 
 function Pager({
@@ -54,7 +55,7 @@ function Carousel({
   dotColor = "strong",
   style,
   ...rest
-}: Props) {
+}: React.PropsWithChildren<Props>) {
   const [index, setIndex] = React.useState(0);
 
   const length = React.Children.count(children);

package/src/components/Checkbox/Checkbox.tsx

@@ -27,94 +27,93 @@ export interface CheckboxProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const Checkbox: React.FC<CheckboxProps & TouchableHighlightProps & IconSlot> =
-  ({
-    Icon,
-    status,
-    disabled = false,
-    onPress,
-    onCheck,
-    onUncheck,
-    color,
-    uncheckedColor,
-    defaultValue,
-    checkedIcon = "MaterialCommunityIcons/checkbox-marked",
-    uncheckedIcon = "MaterialCommunityIcons/checkbox-blank-outline",
-    size = 24,
-    style,
-    ...rest
-  }) => {
-    const [internalValue, setInternalValue] = React.useState<boolean>(
-      status || defaultValue || false
-    );
+const Checkbox: React.FC<
+  CheckboxProps & TouchableHighlightProps & IconSlot
+> = ({
+  Icon,
+  status,
+  disabled = false,
+  onPress,
+  onCheck,
+  onUncheck,
+  color,
+  uncheckedColor,
+  defaultValue,
+  checkedIcon = "MaterialCommunityIcons/checkbox-marked",
+  uncheckedIcon = "MaterialCommunityIcons/checkbox-blank-outline",
+  size = 24,
+  style,
+  ...rest
+}) => {
+  const [internalValue, setInternalValue] = React.useState<boolean>(
+    status || defaultValue || false
+  );
 
-    React.useEffect(() => {
-      if (status != null) {
-        setInternalValue(status);
-      }
-    }, [status]);
+  React.useEffect(() => {
+    if (status != null) {
+      setInternalValue(status);
+    }
+  }, [status]);
 
-    // This special logic is to handle weird APIs like Airtable that return
-    // true or undefined for a boolean
-    const previousDefaultValue = usePrevious(defaultValue) as
-      | boolean
-      | undefined;
+  // This special logic is to handle weird APIs like Airtable that return
+  // true or undefined for a boolean
+  const previousDefaultValue = usePrevious(defaultValue) as boolean | undefined;
 
-    React.useEffect(() => {
-      if (defaultValue !== previousDefaultValue) {
-        setInternalValue(Boolean(defaultValue));
-      }
-    }, [defaultValue, previousDefaultValue]);
+  React.useEffect(() => {
+    if (defaultValue !== previousDefaultValue) {
+      setInternalValue(Boolean(defaultValue));
+    }
+  }, [defaultValue, previousDefaultValue]);
 
-    const { colors } = useTheme();
+  const { colors } = useTheme();
 
-    const checkboxColor = internalValue
-      ? color || colors.primary
-      : uncheckedColor || colors.primary;
+  const checkboxColor = internalValue
+    ? color || colors.primary
+    : uncheckedColor || colors.primary;
 
-    const handlePress = () => {
-      const newValue = !internalValue;
+  const handlePress = () => {
+    const newValue = !internalValue;
 
-      setInternalValue(newValue);
-      onPress?.(newValue);
+    setInternalValue(newValue);
+    onPress?.(newValue);
 
-      if (newValue) {
-        onCheck?.();
-      }
+    if (newValue) {
+      onCheck?.();
+    }
 
-      if (!newValue) {
-        onUncheck?.();
-      }
-    };
+    if (!newValue) {
+      onUncheck?.();
+    }
+  };
 
-    return (
-      <Touchable
-        {...rest}
-        onPress={handlePress}
-        disabled={disabled}
-        accessibilityState={{ disabled }}
-        accessibilityRole="button"
-        accessibilityLiveRegion="polite"
-        style={[styles.container, style, { width: size, height: size }]}
-      >
-        <Icon
-          style={styles.icon}
-          name={internalValue ? checkedIcon : uncheckedIcon}
-          size={size}
-          color={checkboxColor}
+  return (
+    <Touchable
+      {...rest}
+      onPress={handlePress}
+      disabled={disabled}
+      accessibilityState={{ disabled }}
+      accessibilityRole="button"
+      accessibilityLiveRegion="polite"
+      style={[styles.container, style, { width: size, height: size }]}
+    >
+      <Icon
+        style={styles.icon}
+        name={internalValue ? checkedIcon : uncheckedIcon}
+        size={size}
+        color={checkboxColor}
+      />
+      <View style={[StyleSheet.absoluteFill, styles.fillContainer]}>
+        <View
+          style={[
+            styles.fill,
+            { opacity: disabled ? 0.5 : 1 },
+            { borderColor: checkboxColor },
+          ]}
         />
-        <View style={[StyleSheet.absoluteFill, styles.fillContainer]}>
-          <View
-            style={[
-              styles.fill,
-              { opacity: disabled ? 0.5 : 1 },
-              { borderColor: checkboxColor },
-            ]}
-          />
-        </View>
-      </Touchable>
-    );
-  };
+      </View>
+    </Touchable>
+  );
+};
 
 const styles = StyleSheet.create({
   container: {

package/src/components/CircleImage.tsx

@@ -12,7 +12,7 @@ interface Props {
   style?: StyleProp<ImageStyle>;
 }
 
-const CircleImage: React.FC<Props> = ({
+const CircleImage: React.FC<React.PropsWithChildren<Props>> = ({
   source = Config.placeholderImageURL,
   size = 60,
   style,

package/src/components/CircularProgress.tsx

@@ -148,6 +148,7 @@ class CircularProgress extends React.Component<Props> {
     return (
       <View style={style}>
         <Svg width={size + padding} height={size + padding}>
+          {/* @ts-ignore */}
           <G
             rotation={rotation}
             originX={(size + padding) / 2}

package/src/components/Container.tsx

@@ -26,7 +26,7 @@ type Props = {
   children?: React.ReactNode;
 };
 
-const Container: React.FC<Props> = ({
+const Container: React.FC<React.PropsWithChildren<Props>> = ({
   useThemeGutterPadding,
   borderColor,
   borderWidth,

package/src/components/DatePicker/DatePicker.tsx

@@ -69,7 +69,7 @@ const MONTHS = [
   "December",
 ];
 
-const DatePicker: React.FC<Props> = ({
+const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   Icon,
   style,
   theme: { colors, typography, roundness, disabledOpacity },

package/src/components/DatePicker/DatePickerComponent.tsx

@@ -4,7 +4,7 @@ import DateTimePicker from "@react-native-community/datetimepicker";
 import DateTimePickerModal from "react-native-modal-datetime-picker";
 import { DatePickerComponentProps as Props } from "./DatePickerComponentType";
 
-const DatePickerComponent: React.FC<Props> = ({
+const DatePickerComponent: React.FC<React.PropsWithChildren<Props>> = ({
   value,
   onChange,
   mode,

package/src/components/DeprecatedButton.tsx

@@ -66,7 +66,7 @@ type Props = {
 } & TouchableHighlightProps &
   IconSlot;
 
-const Button: React.FC<Props> = ({
+const Button: React.FC<React.PropsWithChildren<Props>> = ({
   Icon,
   icon,
   disabled = false,

package/src/components/DeprecatedCardWrapper.tsx

@@ -23,7 +23,7 @@ const getWidth = (numColumns: number) => {
   }
 };
 
-const Card: React.FC<Props> = ({
+const Card: React.FC<React.PropsWithChildren<Props>> = ({
   numColumns = 3,
   children,
   onPress,

package/src/components/DeprecatedFAB.tsx

@@ -68,7 +68,7 @@ type Props = {
 } & TouchableHighlightProps &
   IconSlot;
 
-const FAB: React.FC<Props> = ({
+const FAB: React.FC<React.PropsWithChildren<Props>> = ({
   Icon,
   icon,
   disabled = false,

package/src/components/Divider.tsx

@@ -9,7 +9,7 @@ type Props = {
   theme: typeof theme;
 };
 
-const Divider: React.FC<Props> = ({
+const Divider: React.FC<React.PropsWithChildren<Props>> = ({
   style,
   color,
   theme: { colors },

package/src/components/Elevation.tsx

@@ -17,7 +17,12 @@ type Props = {
 } & ViewProps;
 
 /* directly copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx#L62 */
-const Elevation: React.FC<Props> = ({ style, theme, children, ...rest }) => {
+const Elevation: React.FC<React.PropsWithChildren<Props>> = ({
+  style,
+  theme,
+  children,
+  ...rest
+}) => {
   const { elevation = 4, borderRadius: radius } =
     StyleSheet.flatten(style) || {};
   const { colors } = theme;

package/src/components/FAB.tsx

@@ -26,7 +26,7 @@ type Props = {
 } & PressableProps &
   IconSlot;
 
-const FAB: React.FC<Props> = ({
+const FAB: React.FC<React.PropsWithChildren<Props>> = ({
   onPress,
   disabled,
   loading,

package/src/components/FieldSearchBarFull.tsx

@@ -25,7 +25,7 @@ type Props = {
   defaultValue?: string;
 } & IconSlot;
 
-const FieldSearchBarFull: React.FC<Props> = ({
+const FieldSearchBarFull: React.FC<React.PropsWithChildren<Props>> = ({
   showIcon,
   Icon,
   icon = "search",

package/src/components/Header.tsx

@@ -27,7 +27,7 @@ type Props = {
   theme: Theme;
 } & IconSlot;
 
-const Header: React.FC<Props> = ({
+const Header: React.FC<React.PropsWithChildren<Props>> = ({
   Icon,
   titleTypeStyle,
   titleColor,

package/src/components/HeaderLarge.tsx

@@ -14,7 +14,7 @@ type Props = {
   theme: Theme;
 } & IconSlot;
 
-const HeaderLarge: React.FC<Props> = ({
+const HeaderLarge: React.FC<React.PropsWithChildren<Props>> = ({
   Icon,
   title,
   buttonText,

package/src/components/HeaderMedium.tsx

@@ -15,7 +15,7 @@ type Props = {
   theme: Theme;
 } & IconSlot;
 
-const HeaderMedium: React.FC<Props> = ({
+const HeaderMedium: React.FC<React.PropsWithChildren<Props>> = ({
   Icon,
   title,
   buttonText,

package/src/components/HeaderOverline.tsx

@@ -15,7 +15,7 @@ type Props = {
   theme: Theme;
 } & IconSlot;
 
-const HeaderOverline: React.FC<Props> = ({
+const HeaderOverline: React.FC<React.PropsWithChildren<Props>> = ({
   Icon,
   title,
   buttonText,

package/src/components/IconButton.tsx

@@ -25,7 +25,7 @@ type Props = {
 } & PressableProps &
   IconSlot;
 
-const IconButton: React.FC<Props> = ({
+const IconButton: React.FC<React.PropsWithChildren<Props>> = ({
   Icon,
   icon,
   color: customColor,

package/src/components/Portal/Portal.tsx

@@ -47,6 +47,7 @@ class Portal extends React.Component<Props> {
       <PortalContext.Consumer>
         {(manager) => (
           <PortalConsumer manager={manager as PortalMethods}>
+            {/* @ts-ignore */}
             <ThemeProvider theme={theme}>{children}</ThemeProvider>
           </PortalConsumer>
         )}

package/src/components/ProgressCircle.tsx

@@ -18,7 +18,7 @@ type Props = {
   theme: typeof themeT;
 };
 
-const ProgressCircle: React.FC<Props> = ({
+const ProgressCircle: React.FC<React.PropsWithChildren<Props>> = ({
   progress = 0.5,
   style,
   color = "primary",
@@ -47,6 +47,7 @@ const ProgressCircle: React.FC<Props> = ({
       lineCap={strokeCap}
       style={style}
     >
+      {/* @ts-ignore */}
       {(fill) =>
         showsText ? (
           <Text

package/src/components/ProgressIndicator.tsx

@@ -21,7 +21,7 @@ type Props = {
   theme: typeof themeT;
 };
 
-const ProgressIndicator: React.FC<Props> = ({
+const ProgressIndicator: React.FC<React.PropsWithChildren<Props>> = ({
   numberOfSteps,
   currentStep,
   currentStepStrokeWidth = 3,

package/src/components/RadioButton/RadioButtonFieldGroup.tsx

@@ -10,7 +10,7 @@ interface Props extends RadioButtonGroupProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const RadioButtonFieldGroup: React.FC<Props> = ({
+const RadioButtonFieldGroup: React.FC<React.PropsWithChildren<Props>> = ({
   label,
   children,
   theme,

package/src/components/Row.tsx

@@ -27,7 +27,7 @@ type Props = {
   theme: typeof theme;
 };
 
-const Row: React.FC<Props> = ({
+const Row: React.FC<React.PropsWithChildren<Props>> = ({
   titleTypeStyle,
   titleColor,
   subtitleTypeStyle,

package/src/components/RowBodyIcon.tsx

@@ -15,7 +15,7 @@ type Props = {
   theme: Theme;
 } & IconSlot;
 
-const RowBodyIcon: React.FC<Props> = ({
+const RowBodyIcon: React.FC<React.PropsWithChildren<Props>> = ({
   Icon,
   title,
   subtitle,

package/src/components/RowHeadlineImageCaption.tsx

@@ -13,7 +13,7 @@ type Props = {
   theme: typeof theme;
 };
 
-const RowHeadlineImageCaption: React.FC<Props> = ({
+const RowHeadlineImageCaption: React.FC<React.PropsWithChildren<Props>> = ({
   title,
   subtitle,
   caption,