@draftbit/core 43.4.15-641e7e.0 → 43.4.15-7fb85c.1

package/lib/typescript/src/components/Accordion/AccordionGroup.d.ts

@@ -2,28 +2,30 @@ import * as React from "react";
 import { StyleProp, TextStyle } from "react-native";
 import type { IconSlot } from "../../interfaces/Icon";
 import type { Theme } from "../../styles/DefaultTheme";
-declare type Props = {
-    openColor: string;
-    closedColor: string;
-    caretColor: string;
+declare type AccordionGroupProps = {
+    label?: string;
+    expanded?: boolean;
+    openColor?: string;
+    closedColor?: string;
+    caretColor?: string;
+    caretSize?: number;
     icon?: string;
-    iconSize: number;
+    iconSize?: number;
     style?: StyleProp<TextStyle>;
-    children: React.ReactNode;
-    label: string;
-    expanded?: boolean;
+    children?: React.ReactNode;
     theme: Theme;
 } & IconSlot;
 declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<{
-    openColor: string;
-    closedColor: string;
-    caretColor: string;
+    label?: string | undefined;
+    expanded?: boolean | undefined;
+    openColor?: string | undefined;
+    closedColor?: string | undefined;
+    caretColor?: string | undefined;
+    caretSize?: number | undefined;
     icon?: string | undefined;
-    iconSize: number;
+    iconSize?: number | undefined;
     style?: StyleProp<TextStyle>;
-    children: React.ReactNode;
-    label: string;
-    expanded?: boolean | undefined;
+    children?: React.ReactNode;
     theme: {
         disabledOpacity: number;
         roundness: number;
@@ -1526,15 +1528,16 @@ declare const _default: React.ComponentType<import("@draftbit/react-theme-provid
 } & IconSlot, "theme"> & {
     theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
 }> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<{
-    openColor: string;
-    closedColor: string;
-    caretColor: string;
+    label?: string | undefined;
+    expanded?: boolean | undefined;
+    openColor?: string | undefined;
+    closedColor?: string | undefined;
+    caretColor?: string | undefined;
+    caretSize?: number | undefined;
     icon?: string | undefined;
-    iconSize: number;
+    iconSize?: number | undefined;
     style?: StyleProp<TextStyle>;
-    children: React.ReactNode;
-    label: string;
-    expanded?: boolean | undefined;
+    children?: React.ReactNode;
     theme: {
         disabledOpacity: number;
         roundness: number;
@@ -3034,5 +3037,5 @@ declare const _default: React.ComponentType<import("@draftbit/react-theme-provid
             };
         };
     };
-} & IconSlot> & (({ Icon, openColor, closedColor, caretColor, icon, iconSize, style, label, children, expanded: expandedProp, theme, }: Props) => JSX.Element), {}>;
+} & IconSlot> & (({ label, expanded: expandedProp, openColor, closedColor, caretColor: caretColorProp, caretSize, icon, iconSize, style, children, theme, Icon, }: AccordionGroupProps) => JSX.Element), {}>;
 export default _default;

package/lib/typescript/src/components/RadioButton/RadioButtonGroup.d.ts

@@ -5,7 +5,7 @@ import { Direction } from "./context";
 export interface RadioButtonGroupProps {
     direction?: Direction;
     style?: StyleProp<ViewStyle>;
-    value: string | number;
+    value: string;
     onValueChange?: (value: string) => void;
     defaultValue?: string | number;
     theme: Theme;

package/lib/typescript/src/mappings/Accordion.d.ts

@@ -11,6 +11,17 @@ export declare const SEED_DATA: {
         fontSize: number;
     };
     props: {
+        label: any;
+        expanded: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
         openColor: {
             group: string;
             label: string;
@@ -41,7 +52,7 @@ export declare const SEED_DATA: {
             formType: string;
             propType: string;
         };
-        iconSize: {
+        caretSize: {
             label: string;
             description: string;
             formType: string;
@@ -52,26 +63,26 @@ export declare const SEED_DATA: {
             required: boolean;
             step: number;
         };
-        label: any;
-        expanded: {
+        icon: {
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: boolean;
-            editable: boolean;
+            defaultValue: string;
             required: boolean;
+            editable: boolean;
             group: string;
         };
-        icon: {
+        iconSize: {
             label: string;
             description: string;
             formType: string;
             propType: string;
-            defaultValue: string;
-            required: boolean;
-            editable: boolean;
             group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
         };
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "43.4.15-641e7e.0+641e7e58",
+  "version": "43.4.15-7fb85c.1+7fb85c2d",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -80,5 +80,5 @@
       ]
     ]
   },
-  "gitHead": "641e7e58aa06994d0836b6b5df5c687b444fc7aa"
+  "gitHead": "7fb85c2dab4429b2ce879f759c01c27a869fc99f"
 }

package/src/components/Accordion/AccordionGroup.js

@@ -3,16 +3,16 @@ import { View, StyleSheet, Pressable, } from "react-native";
 import Text from "../Text";
 import { withTheme } from "../../theming";
 import { extractStyles } from "../../utilities";
-const AccordionGroup = ({ Icon, openColor, closedColor, caretColor, icon, iconSize = 24, style, label, children, expanded: expandedProp, theme, }) => {
-    const [expanded, setExpanded] = React.useState(expandedProp || false);
-    const handlePressAction = () => {
-        setExpanded(!expanded);
-    };
-    const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;
+const AccordionGroup = ({ label, expanded: expandedProp = false, openColor, closedColor, caretColor: caretColorProp, caretSize = 24, icon, iconSize = 24, style, children, theme, Icon, }) => {
+    const [expanded, setExpanded] = React.useState(expandedProp);
+    const { textStyles, viewStyles } = extractStyles(style);
     const expandedColor = openColor || theme.colors.primary;
     const collapsedColor = closedColor || theme.colors.primary;
     const labelColor = expanded ? expandedColor : collapsedColor;
-    const { textStyles, viewStyles } = extractStyles(style);
+    const caretColor = caretColorProp || labelColor;
+    const handlePressAction = () => {
+        setExpanded(!expanded);
+    };
     return (React.createElement(React.Fragment, null,
         React.createElement(Pressable, { style: [styles.row, viewStyles], onPress: handlePressAction, accessibilityRole: "button" },
             icon ? (React.createElement(Icon, { name: icon, size: iconSize, color: labelColor, style: styles.icon })) : null,
@@ -25,8 +25,8 @@ const AccordionGroup = ({ Icon, openColor, closedColor, caretColor, icon, iconSi
                     ] }, label)),
             React.createElement(Icon, { name: expanded
                     ? "MaterialIcons/keyboard-arrow-up"
-                    : "MaterialIcons/keyboard-arrow-down", color: caretColor, size: 24 })),
-        expandedInternal ? children : null));
+                    : "MaterialIcons/keyboard-arrow-down", color: caretColor, size: caretSize })),
+        expanded ? children : null));
 };
 const styles = StyleSheet.create({
     row: {

package/src/components/Accordion/AccordionGroup.tsx

@@ -12,48 +12,44 @@ import type { IconSlot } from "../../interfaces/Icon";
 import type { Theme } from "../../styles/DefaultTheme";
 import { extractStyles } from "../../utilities";
 
-type Props = {
-  openColor: string;
-  closedColor: string;
-  caretColor: string;
+type AccordionGroupProps = {
+  label?: string;
+  expanded?: boolean;
+  openColor?: string;
+  closedColor?: string;
+  caretColor?: string;
+  caretSize?: number;
   icon?: string;
-  iconSize: number;
+  iconSize?: number;
   style?: StyleProp<TextStyle>;
-  children: React.ReactNode;
-  label: string;
-  expanded?: boolean;
+  children?: React.ReactNode;
   theme: Theme;
 } & IconSlot;
 
 const AccordionGroup = ({
-  Icon,
+  label,
+  expanded: expandedProp = false,
   openColor,
   closedColor,
-  caretColor,
+  caretColor: caretColorProp,
+  caretSize = 24,
   icon,
   iconSize = 24,
   style,
-  label,
   children,
-  expanded: expandedProp,
   theme,
-}: Props) => {
-  const [expanded, setExpanded] = React.useState<boolean>(
-    expandedProp || false
-  );
-
-  const handlePressAction = () => {
-    setExpanded(!expanded);
-  };
-
-  const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;
-
+  Icon,
+}: AccordionGroupProps) => {
+  const [expanded, setExpanded] = React.useState<boolean>(expandedProp);
+  const { textStyles, viewStyles } = extractStyles(style);
   const expandedColor = openColor || theme.colors.primary;
   const collapsedColor = closedColor || theme.colors.primary;
-
   const labelColor = expanded ? expandedColor : collapsedColor;
+  const caretColor = caretColorProp || labelColor;
 
-  const { textStyles, viewStyles } = extractStyles(style);
+  const handlePressAction = () => {
+    setExpanded(!expanded);
+  };
 
   return (
     <>
@@ -90,10 +86,10 @@ const AccordionGroup = ({
               : "MaterialIcons/keyboard-arrow-down"
           }
           color={caretColor}
-          size={24}
+          size={caretSize}
         />
       </Pressable>
-      {expandedInternal ? children : null}
+      {expanded ? children : null}
     </>
   );
 };

package/src/components/DatePicker/DatePicker.js

@@ -360,7 +360,7 @@ const styles = StyleSheet.create({
         position: "absolute",
         left: 0,
     },
-    pickerContainer: { flexDirection: "column", width: "100%" },
+    pickerContainer: { flexDirection: "column", width: "100%", zIndex: 100 },
     closeButton: {
         alignSelf: "flex-end",
     },

package/src/components/DatePicker/DatePicker.tsx

@@ -543,7 +543,7 @@ const styles = StyleSheet.create({
     position: "absolute",
     left: 0,
   },
-  pickerContainer: { flexDirection: "column", width: "100%" },
+  pickerContainer: { flexDirection: "column", width: "100%", zIndex: 100 },
   closeButton: {
     alignSelf: "flex-end",
   },

package/src/components/RadioButton/RadioButtonGroup.js

@@ -3,19 +3,15 @@ import { View } from "react-native";
 import { getValueForRadioButton } from "../../utilities";
 import { radioButtonGroupContext, Direction } from "./context";
 const { Provider } = radioButtonGroupContext;
-const RadioButtonGroup = ({ direction = Direction.Vertical, value = "", onValueChange, defaultValue, style, children, ...rest }) => {
+const RadioButtonGroup = ({ direction = Direction.Vertical, value = "", onValueChange, defaultValue = "", style, children, ...rest }) => {
     const [internalValue, setInternalValue] = React.useState("");
     React.useEffect(() => {
-        if (value != null) {
-            const realValue = getValueForRadioButton(value);
-            setInternalValue(realValue);
-        }
+        const realValue = getValueForRadioButton(value);
+        setInternalValue(realValue);
     }, [value]);
     React.useEffect(() => {
-        if (defaultValue != null) {
-            const realDefaultValue = getValueForRadioButton(defaultValue);
-            setInternalValue(realDefaultValue);
-        }
+        const realDefaultValue = getValueForRadioButton(defaultValue);
+        setInternalValue(realDefaultValue);
     }, [defaultValue]);
     const handleValueChange = (newValue) => {
         const realNewValue = getValueForRadioButton(newValue);
@@ -34,7 +30,7 @@ const RadioButtonGroup = ({ direction = Direction.Vertical, value = "", onValueC
     }
     return (React.createElement(View, { style: [{ minHeight: 40 }, style], ...rest },
         React.createElement(Provider, { value: {
-                value: internalValue,
+                value: internalValue || "",
                 onValueChange: handleValueChange,
                 direction,
             } },

package/src/components/RadioButton/RadioButtonGroup.tsx

@@ -6,7 +6,7 @@ import { radioButtonGroupContext, Direction } from "./context";
 export interface RadioButtonGroupProps {
   direction?: Direction;
   style?: StyleProp<ViewStyle>;
-  value: string | number;
+  value: string;
   onValueChange?: (value: string) => void;
   defaultValue?: string | number;
   theme: Theme;
@@ -19,27 +19,23 @@ const RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({
   direction = Direction.Vertical,
   value = "",
   onValueChange,
-  defaultValue,
+  defaultValue = "",
   style,
   children,
   ...rest
 }) => {
-  const [internalValue, setInternalValue] = React.useState("");
+  const [internalValue, setInternalValue] = React.useState<string>("");
 
   React.useEffect(() => {
-    if (value != null) {
-      const realValue = getValueForRadioButton(value);
+    const realValue = getValueForRadioButton(value);
 
-      setInternalValue(realValue);
-    }
+    setInternalValue(realValue);
   }, [value]);
 
   React.useEffect(() => {
-    if (defaultValue != null) {
-      const realDefaultValue = getValueForRadioButton(defaultValue);
+    const realDefaultValue = getValueForRadioButton(defaultValue);
 
-      setInternalValue(realDefaultValue);
-    }
+    setInternalValue(realDefaultValue);
   }, [defaultValue]);
 
   const handleValueChange = (newValue: string | number) => {
@@ -65,7 +61,7 @@ const RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({
     <View style={[{ minHeight: 40 }, style]} {...rest}>
       <Provider
         value={{
-          value: internalValue,
+          value: internalValue || "",
           onValueChange: handleValueChange,
           direction,
         }}

package/src/mappings/Accordion.js

@@ -12,26 +12,30 @@ export const SEED_DATA = {
         fontSize: 16,
     },
     props: {
+        label: createTextProp({
+            label: "Label",
+        }),
+        expanded: createStaticBoolProp({
+            label: "Expanded",
+            description: "Whether the AccordionGroup should be initaially expanded or not",
+        }),
         openColor: createColorProp({
             label: "Open text color",
         }),
         closedColor: createColorProp({
-            label: "Closed text Color",
+            label: "Closed text color",
         }),
         caretColor: createColorProp({
             label: "Caret color",
         }),
+        caretSize: createNumberProp({
+            label: "Caret size",
+            defaultValue: 24,
+        }),
+        icon: createIconProp(),
         iconSize: createNumberProp({
             label: "Icon size",
             defaultValue: 24,
         }),
-        label: createTextProp({
-            label: "Label",
-        }),
-        expanded: createStaticBoolProp({
-            label: "Expanded",
-            description: "Whether the AccordionGroup should be expanded or not",
-        }),
-        icon: createIconProp(),
     },
 };

package/src/mappings/Accordion.ts

@@ -20,26 +20,31 @@ export const SEED_DATA = {
     fontSize: 16,
   },
   props: {
+    label: createTextProp({
+      label: "Label",
+    }),
+    expanded: createStaticBoolProp({
+      label: "Expanded",
+      description:
+        "Whether the AccordionGroup should be initaially expanded or not",
+    }),
     openColor: createColorProp({
       label: "Open text color",
     }),
     closedColor: createColorProp({
-      label: "Closed text Color",
+      label: "Closed text color",
     }),
     caretColor: createColorProp({
       label: "Caret color",
     }),
+    caretSize: createNumberProp({
+      label: "Caret size",
+      defaultValue: 24,
+    }),
+    icon: createIconProp(),
     iconSize: createNumberProp({
       label: "Icon size",
       defaultValue: 24,
     }),
-    label: createTextProp({
-      label: "Label",
-    }),
-    expanded: createStaticBoolProp({
-      label: "Expanded",
-      description: "Whether the AccordionGroup should be expanded or not",
-    }),
-    icon: createIconProp(),
   },
 };