@draftbit/core 54.0.6 → 54.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "54.0.6",
+  "version": "54.0.7",
   "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.6",
+    "@draftbit/theme": "54.0.7",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
     "@expo/vector-icons": "^15.0.3",
@@ -123,5 +123,5 @@
     ],
     "testEnvironment": "node"
   },
-  "gitHead": "fcbba18cc0dc8f351f84e33c2d96b789378ed6aa"
+  "gitHead": "9d2231245f05d8b42699f98248f2dead6b1188ee"
 }

package/src/components/DeckSwiper/DeckSwiperCard.tsx

@@ -12,21 +12,24 @@ import { withTheme } from "@draftbit/theme";
 export interface DeckSwiperCardProps
   extends Omit<ViewProps, "style" | "children"> {
   style?: StyleProp<ViewStyle>;
+  className?: string;
   theme: ReadTheme;
 }
 
 const DeckSwiperCard: React.FC<
   React.PropsWithChildren<DeckSwiperCardProps>
-> = ({ style, children, theme, ...rest }) => (
+> = ({ style, className, children, theme, ...rest }) => (
   <View
     style={[
       styles.card,
-      {
+      !className && {
         backgroundColor: theme.colors.background.base,
         borderColor: theme.colors.border.base,
       },
       style,
     ]}
+    // @ts-ignore
+    className={className}
     {...rest}
   >
     {children}

package/src/components/KeyboardAvoidingView.tsx

@@ -18,6 +18,7 @@ interface KeyboardAvoidingViewProps extends ViewProps {
   androidKeyboardVerticalOffset?: number;
   iosBehavior?: KeyboardAvoidingViewBehavior;
   iosKeyboardVerticalOffset?: number;
+  className?: string;
 }
 
 const KeyboardAvoidingView: React.FC<KeyboardAvoidingViewProps> = ({
@@ -27,6 +28,7 @@ const KeyboardAvoidingView: React.FC<KeyboardAvoidingViewProps> = ({
   androidKeyboardVerticalOffset,
   iosBehavior,
   iosKeyboardVerticalOffset,
+  className,
   ...rest
 }) => {
   let behaviorResult: KeyboardAvoidingViewBehavior;
@@ -53,6 +55,8 @@ const KeyboardAvoidingView: React.FC<KeyboardAvoidingViewProps> = ({
     <KeyboardAvoidingViewComponent
       behavior={behaviorResult ?? undefined}
       keyboardVerticalOffset={keyboardVerticalOffsetResult}
+      // @ts-ignore
+      className={className}
       {...rest}
     />
   );

package/src/components/LoadingIndicator.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StyleProp, ViewStyle } from "react-native";
+import { View, StyleProp, ViewStyle } from "react-native";
 import { withTheme } from "@draftbit/theme";
 import type { ReadTheme } from "@draftbit/theme";
 import {
@@ -34,6 +34,7 @@ export enum LoadingIndicatorType {
 
 type Props = {
   style?: StyleProp<ViewStyle>;
+  className?: string;
   color?: string;
   theme: ReadTheme;
   type?: LoadingIndicatorType;
@@ -61,10 +62,19 @@ const LoadingIndicator: React.FC<React.PropsWithChildren<Props>> = ({
   type = LoadingIndicatorType.plane,
   size,
   style,
+  className,
   ...rest
 }) => {
   const SpinnerComponent = SPINNER_COMPONENTS[type];
-  return <SpinnerComponent size={size} color={color} style={style} {...rest} />;
+  return (
+    <View
+      style={style}
+      // @ts-ignore
+      className={className}
+    >
+      <SpinnerComponent size={size} color={color} {...rest} />
+    </View>
+  );
 };
 
 export default withTheme(LoadingIndicator);

package/src/components/LottieAnimation.tsx

@@ -4,6 +4,7 @@ import LottieView, { AnimationObject } from "lottie-react-native";
 
 type Props = {
   style?: StyleProp<ViewStyle>;
+  className?: string;
   resizeMode?: "cover" | "contain" | "center";
   source: string | AnimationObject | { uri: string };
   autoPlay?: boolean;
@@ -15,6 +16,7 @@ const LottieAnimation = forwardRef<LottieView, Props>(
   (
     {
       style,
+      className,
       source,
       autoPlay = true,
       loop = true,
@@ -25,7 +27,12 @@ const LottieAnimation = forwardRef<LottieView, Props>(
     ref
   ) => {
     return (
-      <View style={style} {...rest}>
+      <View
+        style={style}
+        // @ts-ignore
+        className={className}
+        {...rest}
+      >
         <LottieView
           ref={ref}
           source={source}

package/src/components/Markdown.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import {
   Text,
+  View,
   StyleProp,
   ViewStyle,
   TextStyle,
@@ -11,6 +12,7 @@ import { extractStyles } from "../utilities";
 
 type MarkdownProps = {
   style?: StyleProp<ViewStyle & TextStyle>;
+  className?: string;
 };
 
 const childToString = (child?: React.ReactNode): string => {
@@ -32,35 +34,42 @@ const childToString = (child?: React.ReactNode): string => {
 const Markdown: React.FC<React.PropsWithChildren<MarkdownProps>> = ({
   children: childrenProp,
   style,
+  className,
 }) => {
   const children = React.Children.toArray(childrenProp);
   const text = children.map(childToString).join("");
 
   const bodyStyle = StyleSheet.flatten(style);
-  const { textStyles } = extractStyles(bodyStyle);
+  const { viewStyles, textStyles } = extractStyles(bodyStyle);
 
   return (
-    //'body' style applies to all markdown components
-    //@ts-ignore TS does not like the type of this named style for some reason
-    <MarkdownComponent
-      style={{ body: bodyStyle }}
-      rules={{
-        // By default, strong does not work with custom fonts on iOS. This addresses the issue
-        strong: (node) => (
-          <Text
-            key={node.key}
-            style={{
-              ...textStyles,
-              fontWeight: "bold",
-            }}
-          >
-            {node.children[0].content}
-          </Text>
-        ),
-      }}
+    <View
+      style={viewStyles}
+      // @ts-ignore
+      className={className}
     >
-      {text}
-    </MarkdownComponent>
+      {/*//'body' style applies to all markdown components*/}
+      {/*@ts-ignore TS does not like the type of this named style for some reason*/}
+      <MarkdownComponent
+        style={{ body: bodyStyle }}
+        rules={{
+          // By default, strong does not work with custom fonts on iOS. This addresses the issue
+          strong: (node) => (
+            <Text
+              key={node.key}
+              style={{
+                ...textStyles,
+                fontWeight: "bold",
+              }}
+            >
+              {node.children[0].content}
+            </Text>
+          ),
+        }}
+      >
+        {text}
+      </MarkdownComponent>
+    </View>
   );
 };
 

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

@@ -52,7 +52,7 @@ const AudioPlayerWithInterface = React.forwardRef<
       : newHeadlessAudioPlayerRef;
 
     const {
-      color = theme.colors.text.strong,
+      color,
       fontFamily,
       fontWeight,
       fontSize,
@@ -67,7 +67,7 @@ const AudioPlayerWithInterface = React.forwardRef<
     } = StyleSheet.flatten(style || {});
 
     const textStyles = {
-      color,
+      color: color ?? (className ? undefined : theme.colors.text.strong),
       fontFamily,
       fontWeight,
       fontSize,
@@ -131,7 +131,7 @@ const AudioPlayerWithInterface = React.forwardRef<
           // @ts-ignore
           className={className}
           style={[
-            {
+            !className && {
               backgroundColor: theme.colors.background.base,
               borderColor: theme.colors.border.base,
             },

package/src/components/PinInput/CustomPinInputCell.tsx

@@ -3,7 +3,8 @@ import { StyleProp, ViewStyle, View, LayoutChangeEvent } from "react-native";
 
 interface CustomPinInputCellProps {
   style?: StyleProp<ViewStyle>;
-  onLayout: (event: LayoutChangeEvent) => void;
+  className?: string;
+  onLayout?: (event: LayoutChangeEvent) => void;
 }
 
 /**

package/src/components/PinInput/PinInput.tsx

@@ -35,6 +35,7 @@ interface PinInputProps extends Omit<TextInputProps, "style"> {
   focusedBorderWidth?: number;
   focusedTextColor?: string;
   style?: StyleProp<ViewStyle | TextStyle>;
+  className?: string;
   theme: ReadTheme;
 }
 
@@ -55,6 +56,7 @@ const PinInput = React.forwardRef<NativeTextInput, PinInputProps>(
       focusedTextColor,
       secureTextEntry,
       style,
+      className,
       ...rest
     },
     ref
@@ -132,28 +134,31 @@ const PinInput = React.forwardRef<NativeTextInput, PinInputProps>(
     };
 
     return (
-      <CodeField
-        ref={pinInputRef}
-        {...(clearOnCellFocus ? codeFieldProps : {})}
-        value={value}
-        onChangeText={onChangeText}
-        rootStyle={styles.rootContainer}
-        textInputStyle={[
-          // addresses issue on firefox where the hidden input did not fill the height
-          { height: "100%" },
-          //@ts-ignore Web specific prop. Removes default blue outline that appears on the hidden TextInput
-          Platform.OS === "web" ? { outlineWidth: 0 } : {},
-        ]}
-        InputComponent={TextInput}
-        cellCount={cellCount}
-        renderCell={({ symbol: cellValue, index, isFocused }) => (
-          <React.Fragment key={index}>
-            {renderCell(cellValue, index, isFocused)}
-          </React.Fragment>
-        )}
-        secureTextEntry={secureTextEntry}
-        {...rest}
-      />
+      // @ts-ignore
+      <View className={className}>
+        <CodeField
+          ref={pinInputRef}
+          {...(clearOnCellFocus ? codeFieldProps : {})}
+          value={value}
+          onChangeText={onChangeText}
+          rootStyle={styles.rootContainer}
+          textInputStyle={[
+            // addresses issue on firefox where the hidden input did not fill the height
+            { height: "100%" },
+            //@ts-ignore Web specific prop. Removes default blue outline that appears on the hidden TextInput
+            Platform.OS === "web" ? { outlineWidth: 0 } : {},
+          ]}
+          InputComponent={TextInput}
+          cellCount={cellCount}
+          renderCell={({ symbol: cellValue, index, isFocused }) => (
+            <React.Fragment key={index}>
+              {renderCell(cellValue, index, isFocused)}
+            </React.Fragment>
+          )}
+          secureTextEntry={secureTextEntry}
+          {...rest}
+        />
+      </View>
     );
   }
 );

package/src/components/PinInput/PinInputText.tsx

@@ -8,6 +8,7 @@ interface CustomPinInputTextProps extends TextProps {
   cursorBlinkDuration?: number;
   cursorText?: string;
   isFocused?: boolean;
+  className?: string;
   theme: ReadTheme;
 }
 

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

@@ -98,7 +98,7 @@ export const LinearProgress: React.FC<ValueProgressProps> = ({
       style={[
         {
           height: maxThickness,
-          width: "100%",
+          ...(className ? {} : { width: "100%" }),
         },
         style,
       ]}

package/src/components/Swiper/Swiper.tsx

@@ -9,7 +9,9 @@ export interface SwiperRef {
   swipePrev: () => void;
 }
 
-export interface SwiperProps<T> extends Omit<ViewProps, "style" | "children"> {
+export interface SwiperProps<T>
+  extends Omit<ViewProps, "style" | "children" | "className"> {
+  className?: string;
   onSwipe?: (index: number) => void;
   onSwipedNext?: (index: number) => void;
   onSwipedPrevious?: (index: number) => void;
@@ -62,6 +64,7 @@ const Swiper = forwardRef<SwiperRef, SwiperProps<any>>(
       minDistanceForAction,
       minDistanceToCapture,
       style,
+      className,
       hideDots = false,
       ...rest
     }: SwiperProps<any>,
@@ -142,7 +145,12 @@ const Swiper = forwardRef<SwiperRef, SwiperProps<any>>(
     }));
 
     return (
-      <View style={style} {...rest}>
+      <View
+        style={style}
+        // @ts-ignore
+        className={className}
+        {...rest}
+      >
         {/* @ts-ignore */}
         <SwiperComponent
           ref={swiperRef}

package/src/components/Swiper/SwiperItem.tsx

@@ -13,13 +13,20 @@ const styles = StyleSheet.create({
   },
 });
 
-export interface SwiperProps extends Omit<ViewProps, "style" | "children"> {
+export interface SwiperProps
+  extends Omit<ViewProps, "style" | "children" | "className"> {
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
+  className?: string;
 }
 
-const SwiperItem = ({ children, style, ...rest }: SwiperProps) => (
-  <View style={[styles.wrapper, style]} {...rest}>
+const SwiperItem = ({ children, style, className, ...rest }: SwiperProps) => (
+  <View
+    style={[styles.wrapper, style]}
+    // @ts-ignore
+    className={className}
+    {...rest}
+  >
     {children}
   </View>
 );

package/src/components/Table/TableRow.tsx

@@ -67,7 +67,7 @@ const TableRow: React.FC<React.PropsWithChildren<Props>> = ({
         className={className}
         style={[
           borderViewStyle,
-          isTableHeader
+          isTableHeader && !className
             ? { backgroundColor: theme.colors.branding.primary }
             : {},
           style,

package/src/components/Timer.tsx

@@ -15,6 +15,7 @@ import {
 
 interface TimerProps extends TextProps {
   style?: StyleProp<TextStyle>;
+  className?: string;
   initialTime?: number;
   updateInterval?: number;
   format?: "ss" | "mm:ss" | "hh:mm:ss" | "ss:ms" | "mm:ss:ms" | "hh:mm:ss:ms";
@@ -34,6 +35,7 @@ const Timer = forwardRef<TimerHandle, TimerProps>(
   (
     {
       style,
+      className,
       initialTime,
       updateInterval = 1000,
       format = "mm:ss",
@@ -136,7 +138,12 @@ const Timer = forwardRef<TimerHandle, TimerProps>(
     };
 
     return (
-      <Text {...rest} style={[styles.defaultTimerStyle, style]}>
+      <Text
+        {...rest}
+        style={[!className && styles.defaultTimerStyle, style]}
+        // @ts-ignore
+        className={className}
+      >
         {formatTime(time)}
       </Text>
     );