@draftbit/core 44.2.3-c421ea.2 → 46.0.1-eb73d2.0

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-eb73d2.0+eb73d2cb",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,11 +41,11 @@
   "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",
-    "@react-native-picker/picker": "2.4.2",
+    "@react-native-community/slider": "4.1.12",
+    "@react-native-picker/picker": "2.4.1",
     "color": "^3.1.2",
     "date-fns": "^2.16.1",
     "dateformat": "^3.0.3",
@@ -78,5 +78,5 @@
       ]
     ]
   },
-  "gitHead": "c421ea59335fbf8024b7a8f199f2a9c61af5ef55"
+  "gitHead": "eb73d2cb55b92c502321cec730818f7b45884645"
 }

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/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,

package/src/components/RowHeadlineImageIcon.tsx

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

package/src/components/StarRating.tsx

@@ -23,7 +23,7 @@ type Props = {
   onPress?: (newValue: number) => void;
 } & IconSlot;
 
-const StarRating: React.FC<Props> = ({
+const StarRating: React.FC<React.PropsWithChildren<Props>> = ({
   Icon,
   starSize = 16,
   maxStars = 5,
@@ -53,7 +53,7 @@ const StarRating: React.FC<Props> = ({
   }, [defaultValue]);
 
   const ratingHandler = React.useCallback(
-    (r) => {
+    (r: number) => {
       setLocalRating(r);
       !!onPress && onPress(r);
     },

package/src/components/Surface.tsx

@@ -19,7 +19,7 @@ type Props = {
   theme: Theme;
 } & ViewProps;
 
-const Surface: React.FC<Props> = ({
+const Surface: React.FC<React.PropsWithChildren<Props>> = ({
   elevation: propElevation,
   style,
   theme,

package/src/components/Swiper/Swiper.tsx

@@ -40,6 +40,7 @@ const Swiper = ({
   style,
 }: SwiperProps<any>) => (
   <View style={style}>
+    {/* @ts-ignore */}
     <SwiperComponent
       from={from}
       loop={loop}

package/src/components/ToggleButton.tsx

@@ -22,7 +22,7 @@ type Props = {
   theme: Theme;
 } & IconSlot;
 
-const ToggleButton: React.FC<Props> = ({
+const ToggleButton: React.FC<React.PropsWithChildren<Props>> = ({
   Icon,
   icon,
   toggled = false,

package/src/interfaces/Icon.ts

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