@draftbit/core 46.11.1-1cafec.2 → 46.11.1-3f956d.2

package/src/components/Picker/Picker.tsx

@@ -101,7 +101,7 @@ const Picker: React.FC<PickerProps> = ({
   defaultValue,
   Icon,
   style,
-  placeholder = "Select an option",
+  placeholder,
   value,
   disabled = false,
   assistiveText,
@@ -130,6 +130,8 @@ const Picker: React.FC<PickerProps> = ({
   React.useEffect(() => {
     if (value != null && value !== "") {
       setInternalValue(value);
+    } else if (value === "") {
+      setInternalValue(undefined);
     }
   }, [value]);
 
@@ -151,13 +153,31 @@ const Picker: React.FC<PickerProps> = ({
     }
   }, [pickerVisible, autoDismissKeyboard]);
 
-  const normalizedOptions = normalizeOptions(options);
+  const normalizedOptions = React.useMemo(
+    () => normalizeOptions(options),
+    [options]
+  );
 
   //Underlying Picker component defaults selection to first element when value is not provided (or undefined)
   //Placholder must be the 1st option in order to allow selection of the 'actual' 1st option
-  const pickerOptions = placeholder
-    ? [{ label: placeholder, value: placeholder }, ...normalizedOptions]
-    : normalizedOptions;
+  const pickerOptions = React.useMemo(
+    () =>
+      placeholder
+        ? [{ label: placeholder, value: placeholder }, ...normalizedOptions]
+        : normalizedOptions,
+    [placeholder, normalizedOptions]
+  );
+
+  //When no placeholder is provided then first item should be marked selected to reflect underlying Picker internal state
+  if (
+    !placeholder &&
+    pickerOptions.length &&
+    !internalValue &&
+    internalValue !== pickerOptions[0].value //Prevent infinite state changes incase first value is falsy
+  ) {
+    onValueChange?.(pickerOptions[0].value, 0);
+    setInternalValue(pickerOptions[0].value);
+  }
 
   const { viewStyles, textStyles } = extractStyles(style);
 

package/src/components/Shadow.js

@@ -1,6 +1,11 @@
 import React from "react";
+import { StyleSheet } from "react-native";
 import { Shadow as ShadowComponent } from "react-native-shadow-2";
-const Shadow = ({ offsetX = 0, offsetY = 0, showShadowSideStart = true, showShadowSideEnd = true, showShadowSideTop = true, showShadowSideBottom = true, showShadowCornerTopStart = true, showShadowCornerTopEnd = true, showShadowCornerBottomStart = true, showShadowCornerBottomEnd = true, paintInside = false, style, ...rest }) => {
+import { extractBorderAndMarginStyles } from "../utilities";
+const Shadow = ({ offsetX = 0, offsetY = 0, showShadowSideStart = true, showShadowSideEnd = true, showShadowSideTop = true, showShadowSideBottom = true, showShadowCornerTopStart = true, showShadowCornerTopEnd = true, showShadowCornerBottomStart = true, showShadowCornerBottomEnd = true, paintInside = true, style, ...rest }) => {
+    const { borderStyles } = extractBorderAndMarginStyles(style);
+    const containerStyle = StyleSheet.flatten(style);
+    Object.keys(borderStyles).forEach((key) => delete containerStyle[key]);
     return (React.createElement(ShadowComponent, { offset: [offsetX, offsetY], sides: {
             start: showShadowSideStart,
             end: showShadowSideEnd,
@@ -11,6 +16,6 @@ const Shadow = ({ offsetX = 0, offsetY = 0, showShadowSideStart = true, showShad
             topEnd: showShadowCornerTopEnd,
             bottomStart: showShadowCornerBottomStart,
             bottomEnd: showShadowCornerBottomEnd,
-        }, containerStyle: style, paintInside: paintInside, ...rest }));
+        }, style: borderStyles, containerStyle: containerStyle, paintInside: paintInside, ...rest }));
 };
 export default Shadow;

package/src/components/Shadow.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { StyleProp, ViewStyle } from "react-native";
+import { StyleProp, ViewStyle, StyleSheet } from "react-native";
 import { Shadow as ShadowComponent } from "react-native-shadow-2";
+import { extractBorderAndMarginStyles } from "../utilities";
 
 interface ShadowProps {
   disabled?: boolean;
@@ -33,10 +34,15 @@ const Shadow: React.FC<React.PropsWithChildren<ShadowProps>> = ({
   showShadowCornerTopEnd = true,
   showShadowCornerBottomStart = true,
   showShadowCornerBottomEnd = true,
-  paintInside = false,
+  paintInside = true,
   style,
   ...rest
 }) => {
+  const { borderStyles } = extractBorderAndMarginStyles(style);
+
+  const containerStyle = StyleSheet.flatten(style) as StyleProp<any>;
+  Object.keys(borderStyles).forEach((key) => delete containerStyle[key]);
+
   return (
     <ShadowComponent
       offset={[offsetX, offsetY]}
@@ -52,7 +58,8 @@ const Shadow: React.FC<React.PropsWithChildren<ShadowProps>> = ({
         bottomStart: showShadowCornerBottomStart,
         bottomEnd: showShadowCornerBottomEnd,
       }}
-      containerStyle={style}
+      style={borderStyles}
+      containerStyle={containerStyle}
       paintInside={paintInside}
       {...rest}
     />

package/src/components/Surface.js

@@ -7,7 +7,7 @@ import { withTheme } from "../theming";
 const Surface = ({ elevation: propElevation, style, theme, children, ...rest }) => {
     const { elevation: styleElevation = 3, backgroundColor, ...restStyle } = (StyleSheet.flatten(style) || {});
     const { dark: isDarkTheme, mode, colors } = theme;
-    const elevation = propElevation || styleElevation;
+    const elevation = propElevation !== null && propElevation !== void 0 ? propElevation : styleElevation;
     const evalationStyles = elevation ? shadow(elevation) : {};
     const getBackgroundColor = () => {
         if (backgroundColor) {

package/src/components/Surface.tsx

@@ -34,7 +34,7 @@ const Surface: React.FC<React.PropsWithChildren<Props>> = ({
 
   const { dark: isDarkTheme, mode, colors } = theme;
 
-  const elevation = propElevation || styleElevation;
+  const elevation = propElevation ?? styleElevation;
 
   const evalationStyles = elevation ? shadow(elevation) : {};
 

package/src/components/TabView/TabView.js

@@ -39,7 +39,7 @@ const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, tabBarPosition,
         }
     };
     const renderTabBar = (props) => {
-        return (React.createElement(TabBar, { ...props, activeColor: activeColor || theme.colors.primary, inactiveColor: inactiveColor || theme.colors.divider, pressColor: pressColor || theme.colors.primary, scrollEnabled: scrollEnabled, indicatorStyle: {
+        return (React.createElement(TabBar, { ...props, activeColor: activeColor || theme.colors.primary, inactiveColor: inactiveColor || "rgb(200,200,200)", pressColor: pressColor || theme.colors.primary, scrollEnabled: scrollEnabled, indicatorStyle: {
                 backgroundColor: indicatorColor || theme.colors.primary,
             }, labelStyle: textStyles, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: 16 })) : null, style: {
                 backgroundColor: tabsBackgroundColor || theme.colors.background,

package/src/components/TabView/TabView.tsx

@@ -106,7 +106,7 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
       <TabBar
         {...props}
         activeColor={activeColor || theme.colors.primary}
-        inactiveColor={inactiveColor || theme.colors.divider}
+        inactiveColor={inactiveColor || "rgb(200,200,200)"}
         pressColor={pressColor || theme.colors.primary}
         scrollEnabled={scrollEnabled}
         indicatorStyle={{

package/src/mappings/DeckSwiper.js

@@ -1,12 +1,16 @@
-import { COMPONENT_TYPES, Triggers, createActionProp, createStaticNumberProp, createStaticBoolProp, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
+import { COMPONENT_TYPES, Triggers, createActionProp, createStaticNumberProp, createStaticBoolProp, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Deck Swiper",
     tag: "DeckSwiper",
     description: "Deck swiper container",
     category: COMPONENT_TYPES.swiper,
-    stylesPanelSections: BLOCK_STYLES_SECTIONS,
+    stylesPanelSections: [
+        StylesPanelSections.Size,
+        StylesPanelSections.Margins,
+        StylesPanelSections.Effects,
+    ],
     layout: {
-        width: "100%",
+        flex: 1,
     },
     triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
     props: {

package/src/mappings/DeckSwiper.ts

@@ -4,7 +4,7 @@ import {
   createActionProp,
   createStaticNumberProp,
   createStaticBoolProp,
-  BLOCK_STYLES_SECTIONS,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -12,9 +12,13 @@ export const SEED_DATA = {
   tag: "DeckSwiper",
   description: "Deck swiper container",
   category: COMPONENT_TYPES.swiper,
-  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  stylesPanelSections: [
+    StylesPanelSections.Size,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Effects,
+  ],
   layout: {
-    width: "100%",
+    flex: 1,
   },
   triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
   props: {

package/src/mappings/NativeBase/Layout.js

@@ -1,6 +1,6 @@
 import { COMPONENT_TYPES, createBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, createStaticNumberProp, StylesPanelSections, } from "@draftbit/types";
 const SHARED_SEED_DATA = {
-    category: COMPONENT_TYPES.layout,
+    category: COMPONENT_TYPES.testing /*.layout*/,
     packageName: "native-base",
     stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
 };

package/src/mappings/NativeBase/Layout.ts

@@ -7,7 +7,7 @@ import {
 } from "@draftbit/types";
 
 const SHARED_SEED_DATA = {
-  category: COMPONENT_TYPES.layout,
+  category: COMPONENT_TYPES.testing /*.layout*/,
   packageName: "native-base",
   stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
 };

package/src/mappings/Shadow.js

@@ -1,10 +1,17 @@
-import { COMPONENT_TYPES, CONTAINER_COMPONENT_STYLES_SECTIONS, createColorProp, createStaticNumberProp, createStaticBoolProp, createDisabledProp, GROUPS, } from "@draftbit/types";
+import { COMPONENT_TYPES, createColorProp, createStaticNumberProp, createStaticBoolProp, createDisabledProp, GROUPS, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Shadow",
     tag: "Shadow",
     description: "A cross-platform, universal shadow.",
     category: COMPONENT_TYPES.view,
-    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    stylesPanelSections: [
+        StylesPanelSections.LayoutSelectedItem,
+        StylesPanelSections.Size,
+        StylesPanelSections.Margins,
+        StylesPanelSections.Position,
+        StylesPanelSections.Borders,
+        StylesPanelSections.Effects,
+    ],
     props: {
         disabled: createDisabledProp({
             description: "Disables the shadow.",
@@ -26,7 +33,7 @@ export const SEED_DATA = {
         paintInside: createStaticBoolProp({
             label: "Paint Inside",
             description: "Apply the shadow below/inside the content.",
-            defaultValue: false,
+            defaultValue: true,
         }),
         stretch: createStaticBoolProp({
             label: "Stretch",

package/src/mappings/Shadow.ts

@@ -1,11 +1,11 @@
 import {
   COMPONENT_TYPES,
-  CONTAINER_COMPONENT_STYLES_SECTIONS,
   createColorProp,
   createStaticNumberProp,
   createStaticBoolProp,
   createDisabledProp,
   GROUPS,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -13,7 +13,14 @@ export const SEED_DATA = {
   tag: "Shadow",
   description: "A cross-platform, universal shadow.",
   category: COMPONENT_TYPES.view,
-  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  stylesPanelSections: [
+    StylesPanelSections.LayoutSelectedItem,
+    StylesPanelSections.Size,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Position,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Effects,
+  ],
   props: {
     disabled: createDisabledProp({
       description: "Disables the shadow.",
@@ -35,7 +42,7 @@ export const SEED_DATA = {
     paintInside: createStaticBoolProp({
       label: "Paint Inside",
       description: "Apply the shadow below/inside the content.",
-      defaultValue: false,
+      defaultValue: true,
     }),
     stretch: createStaticBoolProp({
       label: "Stretch",

package/src/mappings/Table.js

@@ -55,7 +55,7 @@ export const SEED_DATA = [
         name: "Table",
         tag: "Table",
         description: "Top level table container",
-        category: COMPONENT_TYPES.table,
+        category: COMPONENT_TYPES.testing /*.table*/,
         stylesPanelSections: [
             StylesPanelSections.Size,
             StylesPanelSections.Margins,
@@ -101,7 +101,7 @@ export const SEED_DATA = [
         name: "Table Row",
         tag: "TableRow",
         description: "Table Row container",
-        category: COMPONENT_TYPES.table,
+        category: COMPONENT_TYPES.testing /*.table*/,
         stylesPanelSections: [StylesPanelSections.Background],
         props: {
             ...SHARED_SEED_DATA_PROPS,
@@ -124,7 +124,7 @@ export const SEED_DATA = [
         name: "Table Cell",
         tag: "TableCell",
         description: "Table Cell container",
-        category: COMPONENT_TYPES.table,
+        category: COMPONENT_TYPES.testing /*.table*/,
         stylesPanelSections: [
             StylesPanelSections.LayoutFlexItems,
             StylesPanelSections.LayoutSelectedItem,

package/src/mappings/Table.ts

@@ -73,7 +73,7 @@ export const SEED_DATA = [
     name: "Table",
     tag: "Table",
     description: "Top level table container",
-    category: COMPONENT_TYPES.table,
+    category: COMPONENT_TYPES.testing /*.table*/,
     stylesPanelSections: [
       StylesPanelSections.Size,
       StylesPanelSections.Margins,
@@ -120,7 +120,7 @@ export const SEED_DATA = [
     name: "Table Row",
     tag: "TableRow",
     description: "Table Row container",
-    category: COMPONENT_TYPES.table,
+    category: COMPONENT_TYPES.testing /*.table*/,
     stylesPanelSections: [StylesPanelSections.Background],
     props: {
       ...SHARED_SEED_DATA_PROPS,
@@ -144,7 +144,7 @@ export const SEED_DATA = [
     name: "Table Cell",
     tag: "TableCell",
     description: "Table Cell container",
-    category: COMPONENT_TYPES.table,
+    category: COMPONENT_TYPES.testing /*.table*/,
     stylesPanelSections: [
       StylesPanelSections.LayoutFlexItems,
       StylesPanelSections.LayoutSelectedItem,