@react-typed-forms/schemas-rn 2.2.0 → 2.2.2

package/lib/StdComponents.d.ts

@@ -0,0 +1,4 @@
+import { HtmlDivProperties } from "@react-typed-forms/schemas";
+export declare function RNDiv({ className, html, children, textClass, text, style, inline, role, selectable, ...props }: HtmlDivProperties & {
+    selectable?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/components/RNHtmlRenderer.d.ts

@@ -4,5 +4,6 @@ export type RNHtmlRendererProps = {
     className?: string;
     html?: string;
     style?: React.CSSProperties | undefined;
+    noSelection?: boolean | null;
 } & Pick<RenderHTMLProps, "baseStyle" | "tagsStyles" | "systemFonts" | "contentWidth">;
-export declare function RNHtmlRenderer({ className, html, style, contentWidth, ...props }: RNHtmlRendererProps): import("react/jsx-runtime").JSX.Element | undefined;
+export declare function RNHtmlRenderer({ className, html, style, contentWidth, noSelection, ...props }: RNHtmlRendererProps): import("react/jsx-runtime").JSX.Element | undefined;

package/lib/createDefaultRNRenderers.d.ts

@@ -1,11 +1,7 @@
-import { HtmlDivProperties, HtmlComponents } from "@react-typed-forms/schemas";
-import { AdornmentRendererRegistration, DataRendererRegistration, DefaultRenderers, LabelRendererRegistration } from "@react-typed-forms/schemas";
-import { DefaultRendererOptions, DefaultDataRendererOptions, DefaultLabelRendererOptions, DefaultAdornmentRendererOptions } from "./rendererOptions";
+import { AdornmentRendererRegistration, DataRendererRegistration, DefaultRenderers, HtmlComponents, LabelRendererRegistration } from "@react-typed-forms/schemas";
+import { DefaultAdornmentRendererOptions, DefaultDataRendererOptions, DefaultLabelRendererOptions, DefaultRendererOptions } from "./rendererOptions";
 export declare function createDefaultDataRenderer(options?: DefaultDataRendererOptions): DataRendererRegistration;
 export declare function createDefaultAdornmentRenderer(options?: DefaultAdornmentRendererOptions): AdornmentRendererRegistration;
 export declare function createDefaultLabelRenderer(options?: DefaultLabelRendererOptions): LabelRendererRegistration;
-export declare function RNDiv({ className, html, children, textClass, text, style, inline, role, noSelection, ...props }: HtmlDivProperties & {
-    noSelection?: boolean | null;
-}): import("react/jsx-runtime").JSX.Element;
 export declare const ReactNativeHtmlComponents: HtmlComponents;
 export declare function createDefaultRenderers(options?: DefaultRendererOptions): DefaultRenderers;

package/lib/defaultTailwindTheme.d.ts

@@ -33,6 +33,7 @@ export declare const defaultTailwindTheme: {
         buttonClass: string;
         primaryClass: string;
         secondaryClass: string;
+        linkTextClass: string;
         iconBeforeClass: string;
         iconAfterClass: string;
         busyIcon: {

package/lib/index.cjs

@@ -94,6 +94,7 @@ var defaultTailwindTheme = {
     buttonClass: "rounded-lg p-3 text-white disabled:opacity-75",
     primaryClass: "bg-primary-500",
     secondaryClass: "bg-secondary-500",
+    linkTextClass: "text-primary-500 underline",
     iconBeforeClass: "px-2",
     iconAfterClass: "px-2",
     busyIcon: schemas.fontAwesomeIcon("spinner fa-spin")
@@ -106,7 +107,7 @@ var defaultTailwindTheme = {
     inputClass: "border rounded p-2",
     displayOnlyClass: "flex flex-row items-center gap-2",
     checkOptions: {
-      className: "flex items-center gap-4",
+      className: "flex gap-4",
       entryClass: "flex items-center gap-1"
     },
     selectOptions: {
@@ -147,7 +148,7 @@ var defaultRnTailwindTheme = schemas.deepMerge({
   data: {
     checkOptions: {
       entryClass: "flex flex-row items-center gap-[8px]",
-      labelClass: "flex-1"
+      labelClass: "body shrink"
     },
     selectOptions: {
       emptyText: "select"
@@ -205,13 +206,13 @@ function cn() {
   return tailwindMerge.twMerge(clsx.clsx([].slice.call(arguments)));
 }
 
-var _excluded$d = ["className", "asChild"];
+var _excluded$e = ["className", "asChild"];
 var TextClassContext = /*#__PURE__*/React__namespace.createContext(undefined);
 var RNText = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$asChild = _ref.asChild,
     asChild = _ref$asChild === void 0 ? false : _ref$asChild,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   var textClass = React__namespace.useContext(TextClassContext);
   var Component = asChild ? Slot__namespace.Text : reactNative.Text;
   return jsxRuntime.jsx(Component, _extends({
@@ -221,7 +222,7 @@ var RNText = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
 });
 RNText.displayName = "RNText";
 
-var _excluded$c = ["className", "variant", "size"];
+var _excluded$d = ["className", "variant", "size"];
 var buttonVariants = classVarianceAuthority.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: {
@@ -270,7 +271,7 @@ var RNButton$1 = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     variant = _ref.variant,
     size = _ref.size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   return jsxRuntime.jsx(TextClassContext.Provider, {
     value: buttonTextVariants({
       variant: variant,
@@ -326,7 +327,7 @@ function Icon(_ref) {
   }
 }
 
-var _excluded$b = ["className"];
+var _excluded$c = ["className"];
 function createRNCheckboxRenderer(options) {
   if (options === void 0) {
     options = {};
@@ -382,7 +383,7 @@ function CheckBoxRenderer(_ref) {
 }
 var RNCheckbox = /*#__PURE__*/React__namespace.forwardRef(function (_ref2, ref) {
   var className = _ref2.className,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
   return jsxRuntime.jsx(CheckboxPrimitive__namespace.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)
@@ -401,14 +402,14 @@ var RNCheckbox = /*#__PURE__*/React__namespace.forwardRef(function (_ref2, ref)
 });
 RNCheckbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
 
-var _excluded$a = ["renderOptions", "control", "readonly"],
+var _excluded$b = ["renderOptions", "control", "readonly"],
   _excluded2$5 = ["className", "placeholderClassName"];
 function createRNTextInputRenderer(inputClass, inputTextClass) {
   return schemas.createDataRenderer(function (p) {
     var renderOptions = p.renderOptions,
       control = p.control,
       readonly = p.readonly,
-      rest = _objectWithoutPropertiesLoose(p, _excluded$a);
+      rest = _objectWithoutPropertiesLoose(p, _excluded$b);
     var _formControlProps = core.formControlProps(control),
       disabled = _formControlProps.disabled;
     var placeholder = renderOptions.placeholder,
@@ -452,7 +453,7 @@ function RNTextInput(_ref) {
 }
 RNTextInput.displayName = "RNInput";
 
-var _excluded$9 = ["control", "mode", "locale", "is24Hour", "className"];
+var _excluded$a = ["control", "mode", "locale", "is24Hour", "className"];
 function createRNDateTimePickerRenderer(options) {
   if (options === void 0) {
     options = {};
@@ -538,7 +539,7 @@ function RNDateTimePicker(_ref) {
       _ref$is24Hour = _ref.is24Hour,
       is24Hour = _ref$is24Hour === void 0 ? true : _ref$is24Hour,
       className = _ref.className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
     var disabled = control.disabled;
     var maximumDate = props.maximumDate,
       minimumDate = props.minimumDate;
@@ -601,7 +602,7 @@ function RNDateTimePicker(_ref) {
   }
 }
 
-var _excluded$8 = ["className", "html", "style", "contentWidth"];
+var _excluded$9 = ["className", "html", "style", "contentWidth", "noSelection"];
 function RNHtmlRenderer(_ref) {
   var _effect = core.useComponentTracking();
   try {
@@ -609,7 +610,8 @@ function RNHtmlRenderer(_ref) {
       html = _ref.html,
       style = _ref.style,
       contentWidth = _ref.contentWidth,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+      noSelection = _ref.noSelection,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
     if (!html) return;
     var source = {
       html: html
@@ -619,7 +621,7 @@ function RNHtmlRenderer(_ref) {
       className: className,
       children: jsxRuntime.jsx(RenderHtml__default["default"], _extends({
         defaultTextProps: {
-          selectable: true
+          selectable: !noSelection
         },
         contentWidth: contentWidth != null ? contentWidth : reactNative.Dimensions.get("window").width,
         source: source
@@ -630,12 +632,12 @@ function RNHtmlRenderer(_ref) {
   }
 }
 
-var _excluded$7 = ["className", "checked", "onChange"];
+var _excluded$8 = ["className", "checked", "onChange"];
 var RNRadioItem = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     checked = _ref.checked,
     onChange = _ref.onChange,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   return jsxRuntime.jsx(reactNative.Pressable, _extends({
     ref: ref,
     onPress: onChange,
@@ -668,10 +670,10 @@ function createSelectConversion(ft) {
   }
 }
 
-var _excluded$6 = ["state", "options", "className", "convert", "required", "emptyText", "requiredText", "portalHost", "readonly"],
+var _excluded$7 = ["state", "options", "className", "convert", "required", "emptyText", "requiredText", "portalHost", "readonly"],
   _excluded2$4 = ["ref", "className", "children"],
   _excluded3$2 = ["className", "children", "position", "portalHost"],
-  _excluded4$2 = ["className"],
+  _excluded4$1 = ["className"],
   _excluded5 = ["className", "children"];
 function createRNSelectRenderer(options) {
   if (options === void 0) {
@@ -719,7 +721,7 @@ function RNSelectRenderer(_ref) {
       requiredText = _ref$requiredText === void 0 ? "Please select" : _ref$requiredText,
       portalHost = _ref.portalHost,
       readonly = _ref.readonly,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
     var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
     var contentInsets = {
       top: insets.top,
@@ -870,7 +872,7 @@ var SelectContent = /*#__PURE__*/React__namespace.forwardRef(function (_ref3, re
 SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
 var SelectLabel = /*#__PURE__*/React__namespace.forwardRef(function (_ref4, ref) {
   var className = _ref4.className,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$2);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$1);
   return jsxRuntime.jsx(SelectPrimitive__namespace.Label, _extends({
     ref: ref,
     className: cn("py-1.5 native:pb-2 pl-2 native:pl-2 pr-2 text-popover-foreground text-sm native:text-base font-semibold", className)
@@ -899,10 +901,10 @@ var SelectItem = /*#__PURE__*/React__namespace.forwardRef(function (_ref5, ref)
 });
 SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
 
-var _excluded$5 = ["className"],
+var _excluded$6 = ["className"],
   _excluded2$3 = ["className", "children"],
   _excluded3$1 = ["className", "children", "portalHost", "closeOnOutsidePress"],
-  _excluded4$1 = ["className"];
+  _excluded4 = ["className"];
 var Dialog = DialogPrimitive__namespace.Root;
 var DialogTrigger = DialogPrimitive__namespace.Trigger;
 var DialogPortal = DialogPrimitive__namespace.Portal;
@@ -911,7 +913,7 @@ function DialogOverlayWeb(_ref) {
   var _effect = core.useComponentTracking();
   try {
     var className = _ref.className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
     var _DialogPrimitive$useR = DialogPrimitive__namespace.useRootContext(),
       open = _DialogPrimitive$useR.open;
     return jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, _extends({
@@ -969,7 +971,7 @@ var DialogContent = /*#__PURE__*/React__namespace.forwardRef(function (_ref3, re
 DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
 var DialogTitle = /*#__PURE__*/React__namespace.forwardRef(function (_ref4, ref) {
   var className = _ref4.className,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$1);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
   return jsxRuntime.jsx(DialogPrimitive__namespace.Title, _extends({
     ref: ref,
     className: cn(className)
@@ -1147,6 +1149,58 @@ function RNScrollListRenderer(_ref) {
   }
 }
 
+var _excluded$5 = ["className", "html", "children", "textClass", "text", "style", "inline", "role", "selectable"];
+function RNDiv(_ref) {
+  var _effect = core.useComponentTracking();
+  try {
+    var className = _ref.className,
+      html = _ref.html,
+      children = _ref.children,
+      textClass = _ref.textClass,
+      text = _ref.text,
+      style = _ref.style,
+      inline = _ref.inline,
+      role = _ref.role,
+      selectable = _ref.selectable,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    if (html != null) {
+      return jsxRuntime.jsx(RNHtmlRenderer, _extends({}, props, {
+        html: html,
+        noSelection: !selectable
+      }));
+    }
+    if (inline) {
+      return jsxRuntime.jsx(reactNative.Text, {
+        style: style,
+        className: textClass,
+        selectable: selectable,
+        children: text != null ? text : children
+      });
+    }
+    if (text != null) {
+      return jsxRuntime.jsx(reactNative.View, _extends({
+        className: className,
+        style: style,
+        role: role
+      }, props, {
+        children: jsxRuntime.jsx(reactNative.Text, {
+          className: textClass,
+          selectable: selectable,
+          children: text
+        })
+      }));
+    }
+    return jsxRuntime.jsx(reactNative.View, _extends({
+      className: className,
+      style: style,
+      children: children,
+      role: role
+    }, props));
+  } finally {
+    _effect();
+  }
+}
+
 var _excluded$4 = ["htmlClassName"];
 function createDefaultDisplayRenderer(options) {
   if (options === void 0) {
@@ -1179,8 +1233,7 @@ function DefaultDisplay(_ref) {
       I = _renderer$html.I,
       Div = _renderer$html.Div,
       B = _renderer$html.B,
-      H1 = _renderer$html.H1,
-      Span = _renderer$html.Span;
+      H1 = _renderer$html.H1;
     switch (data.type) {
       case schemas.DisplayDataType.Icon:
         var iconDisplay = data;
@@ -1192,12 +1245,13 @@ function DefaultDisplay(_ref) {
         });
       case schemas.DisplayDataType.Text:
         var text = display ? schemas.coerceToString(display.value) : data.text;
-        return jsxRuntime.jsx(Div, {
+        return jsxRuntime.jsx(RNDiv, {
           style: style,
           className: schemas.rendererClass(className, options.textClassName),
           textClass: schemas.rendererClass(textClass, options.textTextClass),
           text: text,
-          inline: displayProps.inline
+          inline: displayProps.inline,
+          selectable: !displayProps.noSelection
         });
       case schemas.DisplayDataType.Html:
         var htmlClassName = options.htmlClassName,
@@ -1205,6 +1259,7 @@ function DefaultDisplay(_ref) {
         return jsxRuntime.jsx(RNHtmlRenderer, _extends({
           style: style,
           className: schemas.rendererClass(className, htmlClassName),
+          noSelection: displayProps.noSelection,
           html: display ? schemas.coerceToString(display.value) : data.html
         }, props));
       case schemas.DisplayDataType.Custom:
@@ -1375,7 +1430,7 @@ function RNCheckButtons(props) {
                 }
               }), jsxRuntime.jsx(Label, {
                 className: classes.labelClass,
-                textClass: classes.labelClass,
+                textClass: classes.labelTextClass,
                 htmlFor: name + "_" + i,
                 children: o.name
               })]
@@ -1411,7 +1466,7 @@ function DefaultDisplayOnly(_ref) {
       textClass: textClass,
       text: text,
       inline: inline,
-      noSelection: noSelection
+      selectable: !noSelection
     });
   } finally {
     _effect();
@@ -2423,8 +2478,7 @@ function createButtonActionRenderer(actionId, options) {
     var iconPlacement = busyIcon ? busyPlacement : stdIconPlacement;
     var _renderer$html = renderer.html,
       Button = _renderer$html.Button,
-      I = _renderer$html.I,
-      Span = _renderer$html.Span;
+      I = _renderer$html.I;
     var isLink = actionStyle == schemas.ActionStyle.Link;
     var isGroup = actionStyle == schemas.ActionStyle.Group;
     var classNames = schemas.rendererClass(className, isLink ? options.linkClass : isGroup ? options.groupClass : schemas.rendererClass(options.buttonClass, actionStyle == schemas.ActionStyle.Secondary ? options.secondaryClass : options.primaryClass));
@@ -2434,7 +2488,7 @@ function createButtonActionRenderer(actionId, options) {
       iconLibrary: icon.library,
       className: schemas.rendererClass(textClassNames, iconPlacement == schemas.IconPlacement.BeforeText ? options.iconBeforeClass : options.iconAfterClass)
     });
-    var textElement = actionContent != null ? actionContent : actionText && jsxRuntime.jsx(Span, {
+    var textElement = actionContent != null ? actionContent : actionText && jsxRuntime.jsx(reactNative.Text, {
       className: textClassNames,
       children: actionText
     });
@@ -2458,8 +2512,7 @@ function createButtonActionRenderer(actionId, options) {
 
 var _excluded = ["inline", "textClass", "children", "notWrapInText", "androidRippleColor", "nonTextContent", "onClick"],
   _excluded2 = ["className", "html", "children", "textClass", "text", "style", "inline", "role"],
-  _excluded3 = ["className", "html", "children", "textClass", "text", "style", "inline", "role", "noSelection"],
-  _excluded4 = ["id", "type", "onChangeValue", "onChangeChecked", "checked", "value"];
+  _excluded3 = ["id", "type", "onChangeValue", "onChangeChecked", "checked", "value"];
 function createDefaultDataRenderer(options) {
   var _options$checkboxOpti, _options$checkboxOpti2, _options$radioOptions, _options$checkListOpt;
   if (options === void 0) {
@@ -2518,7 +2571,7 @@ function createDefaultDataRenderer(options) {
           inline: props.inline,
           renderer: renderers,
           emptyText: schemas.isDisplayOnlyRenderer(renderOptions) && renderOptions.emptyText ? renderOptions.emptyText : defaultEmptyText,
-          noSelection: schemas.isDisplayOnlyRenderer(renderOptions) ? renderOptions.noSelection : undefined
+          noSelection: props.definition.noSelection
         })
       });
     };
@@ -2796,57 +2849,8 @@ function RNLabel(_ref7) {
     _effect4();
   }
 }
-function RNDiv(_ref8) {
-  var _effect5 = core.useComponentTracking();
-  try {
-    var className = _ref8.className,
-      html = _ref8.html,
-      children = _ref8.children,
-      textClass = _ref8.textClass,
-      text = _ref8.text,
-      style = _ref8.style,
-      inline = _ref8.inline,
-      role = _ref8.role,
-      noSelection = _ref8.noSelection,
-      props = _objectWithoutPropertiesLoose(_ref8, _excluded3);
-    if (html != null) {
-      return jsxRuntime.jsx(RNHtmlRenderer, _extends({}, props, {
-        html: html
-      }));
-    }
-    if (inline) {
-      return jsxRuntime.jsx(reactNative.Text, {
-        style: style,
-        className: textClass,
-        selectable: !noSelection,
-        children: text != null ? text : children
-      });
-    }
-    if (text != null) {
-      return jsxRuntime.jsx(reactNative.View, _extends({
-        className: className,
-        style: style,
-        role: role
-      }, props, {
-        children: jsxRuntime.jsx(reactNative.Text, {
-          className: textClass,
-          selectable: !noSelection,
-          children: text
-        })
-      }));
-    }
-    return jsxRuntime.jsx(reactNative.View, _extends({
-      className: className,
-      style: style,
-      children: children,
-      role: role
-    }, props));
-  } finally {
-    _effect5();
-  }
-}
 function RNInput(props) {
-  var _effect6 = core.useComponentTracking();
+  var _effect5 = core.useComponentTracking();
   try {
     var id = props.id,
       type = props.type,
@@ -2854,7 +2858,7 @@ function RNInput(props) {
       onChangeChecked = props.onChangeChecked,
       checked = props.checked,
       value = props.value,
-      rest = _objectWithoutPropertiesLoose(props, _excluded4);
+      rest = _objectWithoutPropertiesLoose(props, _excluded3);
     switch (type) {
       case "radio":
         return jsxRuntime.jsx(RNRadioItem, _extends({}, rest, {
@@ -2879,7 +2883,7 @@ function RNInput(props) {
         }));
     }
   } finally {
-    _effect6();
+    _effect5();
   }
 }
 // React Native HTML Components
@@ -2943,7 +2947,6 @@ exports.Icon = Icon;
 exports.RNButton = RNButton$1;
 exports.RNCheckbox = RNCheckbox;
 exports.RNDialog = RNDialog;
-exports.RNDiv = RNDiv;
 exports.RNHtmlRenderer = RNHtmlRenderer;
 exports.RNRadioItem = RNRadioItem;
 exports.RNSelectRenderer = RNSelectRenderer;