@react-typed-forms/schemas-rn 2.0.0 → 2.1.0

package/lib/index.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { useMemo, isValidElement, useEffect, Fragment as Fragment$1, useId } from 'react';
 import { fontAwesomeIcon, deepMerge, IconLibrary, createDataRenderer, DataRenderType, rendererClass, FieldType, getLoadingControl, getHasMoreControl, getRefreshingControl, NoOpControlActionContext, DisplayDataType, coerceToString, getOverrideClass, createLayoutRenderer, renderLayoutParts, createVisibilityRenderer, mergeObjects, isArrayRenderer, createArrayActions, getLengthRestrictions, applyArrayLengthRestrictions, fieldOptionAdornment, setIncluded, useElementSelectedRenderer, createGroupRenderer, GroupRenderType, schemaDataForFieldRef, getLastDefinedValue, getNullToggler, createAction, IconPlacement, isTabsRenderer, isGridRenderer, isWizardRenderer, isDialogRenderer, isAccordionRenderer, isSelectChildRenderer, isFlexRenderer, isInlineRenderer, useExpression, createActionRenderer, ActionStyle, isDataGroupRenderer, isDisplayOnlyRenderer, hasOptions, isTextfieldRenderer, isOptionalAdornment, isSetFieldAdornment, wrapLayout, isIconAdornment, appendMarkupAt, AdornmentPlacement, isAccordionAdornment, LabelType } from '@react-typed-forms/schemas';
-import { View, Text, Pressable, TextInput, Dimensions, Platform, StyleSheet, useWindowDimensions, TouchableOpacity, FlatList, RefreshControl, ActivityIndicator } from 'react-native';
+import { View, Text, Pressable, TextInput, Dimensions, Platform, StyleSheet, useWindowDimensions, TouchableOpacity, FlatList, RefreshControl, ActivityIndicator, ScrollView as ScrollView$1 } from 'react-native';
 import { jsx, jsxs, Fragment } from 'nativewind/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import clsx$1, { clsx } from 'clsx';
@@ -170,14 +170,14 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-const _excluded$b = ["className", "asChild"];
+const _excluded$d = ["className", "asChild"];
 const TextClassContext = /*#__PURE__*/React.createContext(undefined);
 const RNText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       className,
       asChild = false
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   const textClass = React.useContext(TextClassContext);
   const Component = asChild ? Slot.Text : Text;
   return jsx(Component, _extends({
@@ -187,7 +187,7 @@ const RNText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 RNText.displayName = "RNText";
 
-const _excluded$a = ["className", "variant", "size"];
+const _excluded$c = ["className", "variant", "size"];
 const buttonVariants = cva("group flex items-center justify-center rounded-md web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2", {
   variants: {
     variant: {
@@ -238,7 +238,7 @@ const RNButton$1 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       variant,
       size
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   return jsx(TextClassContext.Provider, {
     value: buttonTextVariants({
       variant,
@@ -294,7 +294,7 @@ function Icon({
   }
 }
 
-const _excluded$9 = ["className"];
+const _excluded$b = ["className"];
 function createRNCheckboxRenderer(options = {}) {
   return createDataRenderer((props, renderer) => p => _extends({}, p, {
     label: undefined,
@@ -348,7 +348,7 @@ const RNCheckbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       className
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   return jsx(CheckboxPrimitive.Root, _extends({
     ref: ref,
     className: cn("web:peer h-4 w-4 native:h-[24px] native:w-[24px] shrink-0 rounded-sm native:rounded border border-accent web:ring-offset-background web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className)
@@ -367,7 +367,7 @@ const RNCheckbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 RNCheckbox.displayName = CheckboxPrimitive.Root.displayName;
 
-const _excluded$8 = ["renderOptions", "control", "readonly"],
+const _excluded$a = ["renderOptions", "control", "readonly"],
   _excluded2$5 = ["className", "placeholderClassName"];
 function createRNTextInputRenderer(inputClass, inputTextClass) {
   return createDataRenderer(p => {
@@ -376,7 +376,7 @@ function createRNTextInputRenderer(inputClass, inputTextClass) {
         control,
         readonly
       } = p,
-      rest = _objectWithoutPropertiesLoose(p, _excluded$8);
+      rest = _objectWithoutPropertiesLoose(p, _excluded$a);
     const {
       disabled
     } = formControlProps(control);
@@ -423,7 +423,7 @@ function RNTextInput(_ref) {
 }
 RNTextInput.displayName = "RNInput";
 
-const _excluded$7 = ["control", "mode", "locale", "is24Hour", "className"];
+const _excluded$9 = ["control", "mode", "locale", "is24Hour", "className"];
 function createRNDateTimePickerRenderer(options = {}) {
   return createDataRenderer(p => {
     const mode = p.field.type == FieldType.DateTime ? "datetime" : p.field.type == FieldType.Time ? "time" : "date";
@@ -447,7 +447,7 @@ function RNDateTimePicker(_ref) {
         is24Hour = true,
         className
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
     const disabled = control.disabled;
     const {
       maximumDate,
@@ -517,7 +517,7 @@ function RNDateTimePicker(_ref) {
       try {
         switch (mode) {
           case "date":
-            return parseDate(dateString).toDate(getLocalTimeZone());
+            return parseDate(dateString).toDate("UTC");
           case "datetime":
             return parseAbsolute(dateString, getLocalTimeZone()).toDate();
           case "time":
@@ -537,7 +537,7 @@ function RNDateTimePicker(_ref) {
               day: "2-digit",
               month: "2-digit",
               year: "numeric",
-              timeZone: getLocalTimeZone()
+              timeZone: "UTC"
             };
             break;
           case "datetime":
@@ -571,36 +571,42 @@ function RNDateTimePicker(_ref) {
   }
 }
 
-function RNHtmlRenderer({
-  className,
-  html
-}) {
+const _excluded$8 = ["className", "html", "style", "contentWidth"];
+function RNHtmlRenderer(_ref) {
   var _effect = useComponentTracking();
   try {
+    let {
+        className,
+        html,
+        style,
+        contentWidth
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
     if (!html) return;
     const source = {
       html: html
     };
     return jsx(View, {
+      style: style,
       className: className,
-      children: jsx(RenderHtml, {
-        contentWidth: Dimensions.get("window").width,
+      children: jsx(RenderHtml, _extends({
+        contentWidth: contentWidth != null ? contentWidth : Dimensions.get("window").width,
         source: source
-      })
+      }, props))
     });
   } finally {
     _effect();
   }
 }
 
-const _excluded$6 = ["className", "checked", "onChange"];
+const _excluded$7 = ["className", "checked", "onChange"];
 const RNRadioItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       className,
       checked,
       onChange
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   return jsx(Pressable, _extends({
     ref: ref,
     onPress: onChange,
@@ -631,7 +637,7 @@ function createSelectConversion(ft) {
   }
 }
 
-const _excluded$5 = ["state", "options", "className", "convert", "required", "emptyText", "requiredText", "portalHost", "readonly"],
+const _excluded$6 = ["state", "options", "className", "convert", "required", "emptyText", "requiredText", "portalHost", "readonly"],
   _excluded2$4 = ["ref", "className", "children"],
   _excluded3$2 = ["className", "children", "position", "portalHost"],
   _excluded4$2 = ["className"],
@@ -671,7 +677,7 @@ function RNSelectRenderer(_ref) {
         portalHost,
         readonly
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
     const insets = useSafeAreaInsets();
     const contentInsets = {
       top: insets.top,
@@ -764,10 +770,11 @@ function SelectTrigger(_ref2) {
       props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
     return jsxs(SelectPrimitive.Trigger, _extends({
       ref: ref,
-      className: cn("flex flex-row h-10 native:h-12 items-center text-sm justify-between border border-[#E7E7E8] bg-background px-3 py-2 [&>span]:line-clamp-1 min-w-[128px]", props.disabled && "opacity-50", className)
+      className: cn("flex flex-row min-h-10 native:min-h-12 items-center text-sm justify-between border border-[#E7E7E8] bg-background px-3 py-2 [&>span]:line-clamp-1 min-w-[128px]", props.disabled && "opacity-50", className)
     }, props, {
       children: [jsx(Pressable, {
         pointerEvents: "none",
+        className: "flex-1",
         children: children
       }), jsx(Icon, {
         name: "chevron-down",
@@ -847,7 +854,7 @@ const SelectItem = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
 });
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
-const _excluded$4 = ["className"],
+const _excluded$5 = ["className"],
   _excluded2$3 = ["className", "children"],
   _excluded3$1 = ["className", "children", "portalHost", "closeOnOutsidePress"],
   _excluded4$1 = ["className"];
@@ -861,7 +868,7 @@ function DialogOverlayWeb(_ref) {
     let {
         className
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
     const {
       open
     } = DialogPrimitive.useRootContext();
@@ -1100,6 +1107,7 @@ function RNScrollListRenderer({
   }
 }
 
+const _excluded$4 = ["htmlClassName"];
 function createDefaultDisplayRenderer(options = {}) {
   return {
     render: (props, renderer) => jsx(DefaultDisplay, {
@@ -1151,12 +1159,15 @@ function DefaultDisplay({
           inline: displayProps.inline
         });
       case DisplayDataType.Html:
-        return jsx(Div, {
+        const {
+            htmlClassName
+          } = options,
+          props = _objectWithoutPropertiesLoose(options, _excluded$4);
+        return jsx(RNHtmlRenderer, _extends({
           style: style,
-          className: rendererClass(className, options.htmlClassName),
-          inline: displayProps.inline,
+          className: rendererClass(className, htmlClassName),
           html: display ? coerceToString(display.value) : data.html
-        });
+        }, props));
       case DisplayDataType.Custom:
         return jsx(Div, {
           children: jsxs(B, {
@@ -1302,7 +1313,7 @@ function RNCheckButtons(props) {
           const selOrUnsel = checked ? rendererClass(controlClasses == null ? void 0 : controlClasses.selectedClass, classes.selectedClass) : rendererClass(controlClasses == null ? void 0 : controlClasses.notSelectedClass, classes.notSelectedClass);
           return jsxs(Button, {
             className: clsx(rendererClass(controlClasses == null ? void 0 : controlClasses.entryWrapperClass, classes.entryWrapperClass), selOrUnsel),
-            onClick: () => !readonly && setChecked(control, o, !checked),
+            onClick: () => !(readonly || disabled) && setChecked(control, o, !checked),
             notWrapInText: true,
             children: [jsxs(Div, {
               className: classes.entryClass,
@@ -2143,9 +2154,16 @@ function DefaultDialogRenderer({
               })
             })
           })]
-        }), allChildren.filter(x => !x.definition.placement || x.definition.placement === "dialog").map((x, i) => props.renderChild(x, {
-          actionOnClick
-        }))]
+        }), jsx(ScrollView$1, {
+          persistentScrollbar: true,
+          children: jsx(View, {
+            className: "flex flex-col gap-[12px]",
+            onStartShouldSetResponder: () => true,
+            children: allChildren.filter(x => !x.definition.placement || x.definition.placement === "dialog").map((x, i) => props.renderChild(x, {
+              actionOnClick
+            }))
+          })
+        })]
       })]
     });
   } finally {