@draftbit/core 54.0.4-c430ff.2 → 54.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "54.0.4-c430ff.2+c430fff",
+  "version": "54.0.5",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -42,7 +42,7 @@
   "homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
   "dependencies": {
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/theme": "^54.0.4-c430ff.2+c430fff",
+    "@draftbit/theme": "54.0.5",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
     "@expo/vector-icons": "^15.0.3",
@@ -123,5 +123,5 @@
     ],
     "testEnvironment": "node"
   },
-  "gitHead": "c430fffec4ae2e6942f2234b6e9b33d9cb9a3309"
+  "gitHead": "51ca63d0f063dee46a9bf62c910368c165979d34"
 }

package/src/components/DatePicker/DatePicker.tsx

@@ -444,7 +444,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   return (
     <>
       <Touchable disabled={disabled} onPress={toggleVisibility}>
-        <View pointerEvents="none">
+        <View style={{ pointerEvents: "none" }}>
           <View
             style={StyleSheet.flatten([
               styles.container,
@@ -491,10 +491,10 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                 // Position colored placeholder and gray placeholder on top of each other and crossfade them
                 // This gives the effect of animating the color, but allows us to use native driver
                 <View
-                  pointerEvents="none"
                   style={[
                     StyleSheet.absoluteFill,
                     {
+                      pointerEvents: "none",
                       opacity:
                         // Hide the label in minimized state until we measure its width
                         date || focused ? (labelLayout.measured ? 1 : 0) : 1,

package/src/components/DeckSwiper/DeckSwiper.tsx

@@ -25,6 +25,7 @@ export interface DeckSwiperProps<T> {
   keyExtractor?: (item: T) => string;
   renderItem?: ({ item, index }: { item: T; index: number }) => JSX.Element;
   style?: StyleProp<ViewStyle>;
+  className?: string;
 }
 
 const DeckSwiper = React.forwardRef<DeckSwiperRef, DeckSwiperProps<any>>(
@@ -48,6 +49,7 @@ const DeckSwiper = React.forwardRef<DeckSwiperRef, DeckSwiperProps<any>>(
       keyExtractor,
       renderItem,
       style,
+      className,
       children,
     }: React.PropsWithChildren<DeckSwiperProps<T>>,
     ref: React.Ref<DeckSwiperRef>
@@ -146,7 +148,9 @@ const DeckSwiper = React.forwardRef<DeckSwiperRef, DeckSwiperProps<any>>(
      */
 
     return (
-      <View>
+      <View // @ts-ignore
+        className={className}
+      >
         <View style={styles.containerHeightFiller}>{renderFirstCard()}</View>
         <DeckSwiperComponent
           ref={deckSwiperRef}

package/src/components/DeckSwiper/DeckSwiperCard.tsx

@@ -1,16 +1,23 @@
 import React from "react";
-import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
+import {
+  View,
+  ViewProps,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
 import type { ReadTheme } from "@draftbit/theme";
 import { withTheme } from "@draftbit/theme";
 
-export interface DeckSwiperCardProps {
+export interface DeckSwiperCardProps
+  extends Omit<ViewProps, "style" | "children"> {
   style?: StyleProp<ViewStyle>;
   theme: ReadTheme;
 }
 
 const DeckSwiperCard: React.FC<
   React.PropsWithChildren<DeckSwiperCardProps>
-> = ({ style, children, theme }) => (
+> = ({ style, children, theme, ...rest }) => (
   <View
     style={[
       styles.card,
@@ -20,6 +27,7 @@ const DeckSwiperCard: React.FC<
       },
       style,
     ]}
+    {...rest}
   >
     {children}
   </View>

package/src/components/Layout/Spacer.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { View, StyleProp, ViewStyle } from "react-native";
+import { View, ViewProps, StyleProp, ViewStyle } from "react-native";
 
-interface SpacerProps {
+interface SpacerProps extends Omit<ViewProps, "style"> {
   top?: number;
   right?: number;
   left?: number;
@@ -15,6 +15,7 @@ const Spacer: React.FC<SpacerProps> = ({
   bottom = 8,
   left = 8,
   style,
+  ...rest
 }) => {
   return (
     <View
@@ -27,6 +28,7 @@ const Spacer: React.FC<SpacerProps> = ({
           paddingBottom: bottom,
         },
       ]}
+      {...rest}
     />
   );
 };

package/src/components/LottieAnimation.tsx

@@ -25,7 +25,7 @@ const LottieAnimation = forwardRef<LottieView, Props>(
     ref
   ) => {
     return (
-      <View style={style}>
+      <View style={style} {...rest}>
         <LottieView
           ref={ref}
           source={source}
@@ -36,7 +36,6 @@ const LottieAnimation = forwardRef<LottieView, Props>(
           // A specific size is required on mobile, but not on web.
           // This ensures consistent behavior across platforms during preview.
           style={{ width: "100%", height: "100%" }}
-          {...rest}
         />
       </View>
     );

package/src/components/MediaPlayer/AudioPlayer/AudioPlayerCommon.ts

@@ -13,6 +13,7 @@ export interface HeadlessAudioPlayerProps extends MediaPlayerProps {
 }
 
 export interface AudioPlayerInterfaceProps {
+  className?: string;
   style?: StyleProp<ViewStyle & TextStyle>;
   thumbColor?: string;
   completedTrackColor?: string;

package/src/components/MediaPlayer/AudioPlayer/AudioPlayerWithInterface.tsx

@@ -21,6 +21,7 @@ const AudioPlayerWithInterface = React.forwardRef<
   (
     {
       style,
+      className,
       thumbColor,
       completedTrackColor,
       remainingTrackColor,
@@ -127,6 +128,8 @@ const AudioPlayerWithInterface = React.forwardRef<
         />
         <View
           testID="audio-player-interface"
+          // @ts-ignore
+          className={className}
           style={[
             {
               backgroundColor: theme.colors.background.base,

package/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx

@@ -75,6 +75,9 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
     },
     ref
   ) => {
+    // @ts-ignore
+    const { className, ...videoPlayerProps } = rest;
+
     const stableSource = useSourceDeepCompareMemoize(
       normalizeBase64Source(source, "video")
     );
@@ -248,7 +251,11 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
         ref={mediaPlaybackWrapperRef}
         onTogglePlayback={updateAudioMode}
       >
-        <View style={[style, styles.container]}>
+        <View
+          style={[style, styles.container]}
+          // @ts-ignore
+          className={className}
+        >
           <VideoPlayerComponent
             ref={videoPlayerRef}
             player={player}
@@ -258,10 +265,10 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
             onFullscreenEnter={() => onFullscreenUpdate("entered")}
             onFullscreenExit={() => onFullscreenUpdate("exited")}
             allowsFullscreen={allowsFullscreen}
-            {...rest}
+            {...videoPlayerProps}
           />
           {showPoster && posterSource && (
-            <View style={StyleSheet.absoluteFill} pointerEvents="none">
+            <View style={[StyleSheet.absoluteFill, { pointerEvents: "none" }]}>
               <Image
                 source={posterSource}
                 resizeMode={posterResizeMode}

package/src/components/Picker/PickerCommon.ts

@@ -12,6 +12,7 @@ export interface PickerOption {
 }
 
 export interface PickerInputContainerProps extends IconSlot {
+  className?: string;
   error?: boolean;
   placeholder?: string;
   disabled?: boolean;

package/src/components/Picker/PickerInputContainer.tsx

@@ -33,6 +33,7 @@ const PickerInputContainer: React.FC<
   options = [],
   onPress,
   Icon,
+  className,
   style,
   selectedValue,
   disabled = false,
@@ -70,7 +71,12 @@ const PickerInputContainer: React.FC<
   }
 
   return (
-    <View testID={testID} style={[containerStyle, { zIndex }]}>
+    <View
+      testID={testID}
+      style={[containerStyle, { zIndex }]}
+      // @ts-ignore
+      className={className}
+    >
       <TextField
         Icon={Icon}
         numberOfLines={1}

package/src/components/Portal/PortalHost.tsx

@@ -124,11 +124,7 @@ export default class PortalHost extends React.Component<Props> {
         }}
       >
         {/* Need collapsable=false here to clip the elevations, otherwise they appear above Portal components */}
-        <View
-          style={styles.container}
-          collapsable={false}
-          pointerEvents="box-none"
-        >
+        <View style={styles.container} collapsable={false}>
           {this.props.children}
         </View>
         <PortalManager ref={this.setManager} />
@@ -140,5 +136,6 @@ export default class PortalHost extends React.Component<Props> {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    pointerEvents: "none",
   },
 });

package/src/components/Portal/PortalManager.tsx

@@ -44,8 +44,7 @@ export default class PortalManager extends React.PureComponent<object, State> {
         collapsable={
           false /* Need collapsable=false here to clip the elevations, otherwise they appear above sibling components */
         }
-        pointerEvents="box-none"
-        style={StyleSheet.absoluteFill}
+        style={[StyleSheet.absoluteFill, { pointerEvents: "none" }]}
       >
         {children}
       </View>

package/src/components/Progress/CircularProgress/CircularProgress.tsx

@@ -41,6 +41,7 @@ export const CircularProgress: React.FC<
   trackCustomDashArray,
   onFullPathWidth,
   startPosition = "top",
+  className,
   style,
   testID,
 }) => {
@@ -128,6 +129,8 @@ export const CircularProgress: React.FC<
         },
         style,
       ]}
+      // @ts-ignore
+      className={className}
     >
       <Svg testID={testID ?? "circular-progress-component"} style={{ flex: 1 }}>
         {showTrack && (

package/src/components/Progress/LinearProgress/LinearProgress.tsx

@@ -37,6 +37,7 @@ export const LinearProgress: React.FC<ValueProgressProps> = ({
   customDashArray,
   trackCustomDashArray,
   onFullPathWidth,
+  className,
   style,
   testID,
 }) => {
@@ -101,6 +102,8 @@ export const LinearProgress: React.FC<ValueProgressProps> = ({
         },
         style,
       ]}
+      // @ts-ignore
+      className={className}
     >
       <Svg testID={testID ?? "linear-progress-component"} style={{ flex: 1 }}>
         {showTrack && (

package/src/components/Progress/ProgressCommon.ts

@@ -25,6 +25,7 @@ export interface BaseProgressProps {
   customDashArray?: string;
   trackCustomDashArray?: string;
   onFullPathWidth?: (width: number) => void;
+  className?: string;
   style?: StyleProp<ViewStyle>;
   theme: ReadTheme;
   testID?: string;

package/src/components/SVG.native.tsx

@@ -7,14 +7,20 @@ import Config from "./Config";
 type SVGComponentProps = {
   source: string;
   style?: StyleProp<ImageStyle>;
+  className?: string;
 };
 
 const SVG: React.FC<React.PropsWithChildren<SVGComponentProps>> = ({
   source = Config.placeholderSvgURL,
   style,
+  className,
 }) => {
   return (
-    <View style={style as StyleProp<ViewStyle>}>
+    <View
+      style={style as StyleProp<ViewStyle>}
+      // @ts-ignore
+      className={className}
+    >
       <SvgUri width="100%" height="100%" uri={source} />
     </View>
   );

package/src/components/SVG.tsx

@@ -6,13 +6,22 @@ import Config from "./Config";
 type SVGComponentProps = {
   source: string;
   style?: StyleProp<ImageStyle>;
+  className?: string;
 };
 
 const SVG: React.FC<React.PropsWithChildren<SVGComponentProps>> = ({
   source = Config.placeholderSvgURL,
   style,
+  className,
 }) => {
-  return <Image style={style} source={{ uri: source }} />;
+  return (
+    <Image
+      style={style}
+      source={{ uri: source }}
+      // @ts-ignore
+      className={className}
+    />
+  );
 };
 
 export default SVG;

package/src/components/SectionList/SectionHeader.tsx

@@ -1,16 +1,21 @@
 import React from "react";
-import { View, StyleProp, ViewStyle, Text } from "react-native";
+import { View, ViewProps, StyleProp, ViewStyle, Text } from "react-native";
 import { withTheme } from "@draftbit/theme";
 import type { ReadTheme } from "@draftbit/theme";
 
-interface SectionHeaderProps {
+interface SectionHeaderProps extends Omit<ViewProps, "style" | "children"> {
   style?: StyleProp<ViewStyle>;
 }
 
 const SectionHeader: React.FC<React.PropsWithChildren<SectionHeaderProps>> = ({
   style,
   children,
-}) => <View style={style}>{children}</View>;
+  ...rest
+}) => (
+  <View style={style} {...rest}>
+    {children}
+  </View>
+);
 
 interface DefaultSectionHeaderProps {
   title: string;

package/src/components/Surface.tsx

@@ -56,10 +56,11 @@ const Surface: React.FC<React.PropsWithChildren<Props>> = ({
   );
 };
 
-const SHADOW_COLOR = "#000";
 const SHADOW_OPACITY = 0.24;
 
-function shadow(elevation: number) {
+function shadow(
+  elevation: number
+): { boxShadow: string } | Record<string, never> {
   if (elevation === 0) {
     return {};
   }
@@ -80,14 +81,7 @@ function shadow(elevation: number) {
   }
 
   return {
-    shadowColor: SHADOW_COLOR,
-    shadowOffset: {
-      width: 0,
-      height,
-    },
-    shadowOpacity: SHADOW_OPACITY,
-    shadowRadius: radius,
-    elevation,
+    boxShadow: `0px ${height}px ${radius}px rgba(0, 0, 0, ${SHADOW_OPACITY})`,
   };
 }
 

package/src/components/SwipeableItem/SwipeableItem.tsx

@@ -50,6 +50,7 @@ import {
  */
 
 export interface SwipeableItemProps extends IconSlot {
+  className?: string;
   closeOnPress?: boolean;
   leftOpenValue?: number;
   rightOpenValue?: number;
@@ -74,6 +75,7 @@ type Props = SwipeableItemProps & RightSwipeProps & LeftSwipeProps;
 
 const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
   theme,
+  className,
   style,
   children: childrenProp,
   Icon,
@@ -232,6 +234,8 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
         setComponentWidth(event.nativeEvent.layout.width);
       }}
       style={[styles.parentContainer, parentContainerStyles]}
+      // @ts-ignore
+      className={className}
     >
       {/*@ts-ignore*/}
       <SwipeRow

package/src/components/Swiper/Swiper.tsx

@@ -1,6 +1,6 @@
 import { ReadTheme, withTheme } from "@draftbit/theme";
 import React, { forwardRef, useImperativeHandle } from "react";
-import { View, StyleProp, ViewStyle } from "react-native";
+import { View, StyleProp, ViewStyle, ViewProps } from "react-native";
 import SwiperComponent from "react-native-web-swiper";
 
 export interface SwiperRef {
@@ -9,7 +9,7 @@ export interface SwiperRef {
   swipePrev: () => void;
 }
 
-export interface SwiperProps<T> {
+export interface SwiperProps<T> extends Omit<ViewProps, "style" | "children"> {
   onSwipe?: (index: number) => void;
   onSwipedNext?: (index: number) => void;
   onSwipedPrevious?: (index: number) => void;
@@ -63,6 +63,7 @@ const Swiper = forwardRef<SwiperRef, SwiperProps<any>>(
       minDistanceToCapture,
       style,
       hideDots = false,
+      ...rest
     }: SwiperProps<any>,
     ref
   ) => {
@@ -141,7 +142,7 @@ const Swiper = forwardRef<SwiperRef, SwiperProps<any>>(
     }));
 
     return (
-      <View style={style}>
+      <View style={style} {...rest}>
         {/* @ts-ignore */}
         <SwiperComponent
           ref={swiperRef}

package/src/components/Swiper/SwiperItem.tsx

@@ -1,5 +1,11 @@
 import React from "react";
-import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
+import {
+  View,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  ViewProps,
+} from "react-native";
 
 const styles = StyleSheet.create({
   wrapper: {
@@ -7,13 +13,15 @@ const styles = StyleSheet.create({
   },
 });
 
-export interface SwiperProps {
+export interface SwiperProps extends Omit<ViewProps, "style" | "children"> {
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
 }
 
-const SwiperItem = ({ children, style }: SwiperProps) => (
-  <View style={[styles.wrapper, style]}>{children}</View>
+const SwiperItem = ({ children, style, ...rest }: SwiperProps) => (
+  <View style={[styles.wrapper, style]} {...rest}>
+    {children}
+  </View>
 );
 
 export default SwiperItem;

package/src/components/Table/TableCell.tsx

@@ -10,6 +10,7 @@ import Pressable from "../Pressable";
 export interface Props extends TableProps {
   onPress?: () => void;
   style?: StyleProp<ViewStyle>;
+  className?: string;
 }
 
 const TableCell: React.FC<React.PropsWithChildren<Props>> = ({
@@ -24,6 +25,7 @@ const TableCell: React.FC<React.PropsWithChildren<Props>> = ({
   cellHorizontalPadding,
   children,
   onPress,
+  className,
   style,
 }) => {
   const parentContextValue = React.useContext(TableStyleContext);
@@ -42,6 +44,8 @@ const TableCell: React.FC<React.PropsWithChildren<Props>> = ({
   return (
     <ContainerComponent
       onPress={onPress}
+      // @ts-ignore
+      className={className}
       style={[
         styles.cellContainer,
         borderViewStyle,

package/src/components/Table/TableRow.tsx

@@ -14,6 +14,7 @@ export interface Props extends TableProps {
   onPress?: () => void;
   isTableHeader?: boolean;
   style?: StyleProp<ViewStyle>;
+  className?: string;
   theme: ReadTheme;
 }
 
@@ -30,6 +31,7 @@ const TableRow: React.FC<React.PropsWithChildren<Props>> = ({
   isTableHeader = false,
   children,
   onPress,
+  className,
   style,
   theme,
 }) => {
@@ -61,6 +63,8 @@ const TableRow: React.FC<React.PropsWithChildren<Props>> = ({
     <TableStyleContext.Provider value={contextValue}>
       <ContainerComponent
         onPress={onPress}
+        // @ts-ignore
+        className={className}
         style={[
           borderViewStyle,
           isTableHeader

package/src/components/TextField.tsx

@@ -472,10 +472,10 @@ class TextField extends React.Component<Props, State> {
             // Position colored placeholder and gray placeholder on top of each other and crossfade them
             // This gives the effect of animating the color, but allows us to use native driver
             <View
-              pointerEvents="none"
               style={[
                 StyleSheet.absoluteFill,
                 {
+                  pointerEvents: "none",
                   opacity:
                     // Hide the label in minimized state until we measure its width
                     this.state.value || this.state.focused

package/src/components/YoutubePlayer/YoutubePlayer.tsx

@@ -9,6 +9,7 @@ const YoutubePlayer: React.FC<YoutubePlayerProps> = ({
   playlist,
   autoplay = false,
   style,
+  className,
 }) => {
   const { viewStyles } = extractStyles(style);
   const defaultVideoId = "nwMUpDESXrI";
@@ -24,7 +25,10 @@ const YoutubePlayer: React.FC<YoutubePlayerProps> = ({
   };
 
   return (
-    <View style={viewStyles}>
+    <View
+      style={viewStyles} // @ts-ignore
+      className={className}
+    >
       <YouTube
         style={{ flex: 1 }}
         videoId={!videoId && !playlist ? defaultVideoId : videoId}

package/src/components/YoutubePlayer/YoutubePlayerProps.ts

@@ -5,4 +5,5 @@ export interface YoutubePlayerProps {
   playlist?: string;
   autoplay?: boolean;
   style?: StyleProp<ViewStyle>;
+  className?: string;
 }

package/src/deprecated-components/AvoidKeyboardView.tsx

@@ -14,11 +14,7 @@ try {
   const avoidSoftInputPackage = require("react-native-avoid-softinput");
   AvoidSoftInput = avoidSoftInputPackage.AvoidSoftInput;
   AvoidSoftInputView = avoidSoftInputPackage.AvoidSoftInputView;
-} catch (_) {
-  console.warn(
-    "AvoidKeyboardView: `react-native-avoid-softinput` is not installed, falling back to `View`. No keyboard avoiding capabilties will be used."
-  );
-}
+} catch (_) {}
 
 /**
  * Requires additional setup: https://mateusz1913.github.io/react-native-avoid-softinput/docs/guides