@draftbit/core 54.0.4 → 54.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "54.0.4",
+  "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",
+    "@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": "b8b9b009585851930ef7179cd33e848a5db32656"
+  "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/MediaPlayer/VideoPlayer/VideoPlayer.tsx

@@ -268,7 +268,7 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
             {...videoPlayerProps}
           />
           {showPoster && posterSource && (
-            <View style={StyleSheet.absoluteFill} pointerEvents="none">
+            <View style={[StyleSheet.absoluteFill, { pointerEvents: "none" }]}>
               <Image
                 source={posterSource}
                 resizeMode={posterResizeMode}

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