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

package/lib/components/DefaultDisplayOnly.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { FormRenderer, FormStateNode, SchemaDataNode, SchemaInterface } from "@react-typed-forms/schemas";
-export declare function DefaultDisplayOnly({ dataNode, className, emptyText, schemaInterface, style, renderer, textClass, inline, state, }: {
+export declare function DefaultDisplayOnly({ dataNode, className, emptyText, noSelection, schemaInterface, style, renderer, textClass, inline, state, }: {
     dataNode: SchemaDataNode;
     schemaInterface: SchemaInterface;
     className?: string;
@@ -9,5 +9,6 @@ export declare function DefaultDisplayOnly({ dataNode, className, emptyText, sch
     inline: boolean;
     renderer: FormRenderer;
     emptyText?: string | null;
+    noSelection?: boolean | null;
     state: FormStateNode;
 }): import("react/jsx-runtime").JSX.Element;

package/lib/components/RNHtmlRenderer.d.ts

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

package/lib/createDefaultRNRenderers.d.ts

@@ -1,8 +1,11 @@
-import { HtmlComponents } from "@react-typed-forms/schemas";
+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";
 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/index.cjs

@@ -205,13 +205,13 @@ function cn() {
   return tailwindMerge.twMerge(clsx.clsx([].slice.call(arguments)));
 }
 
-var _excluded$b = ["className", "asChild"];
+var _excluded$d = ["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$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   var textClass = React__namespace.useContext(TextClassContext);
   var Component = asChild ? Slot__namespace.Text : reactNative.Text;
   return jsxRuntime.jsx(Component, _extends({
@@ -221,7 +221,7 @@ var RNText = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
 });
 RNText.displayName = "RNText";
 
-var _excluded$a = ["className", "variant", "size"];
+var _excluded$c = ["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 +270,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$a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   return jsxRuntime.jsx(TextClassContext.Provider, {
     value: buttonTextVariants({
       variant: variant,
@@ -326,7 +326,7 @@ function Icon(_ref) {
   }
 }
 
-var _excluded$9 = ["className"];
+var _excluded$b = ["className"];
 function createRNCheckboxRenderer(options) {
   if (options === void 0) {
     options = {};
@@ -382,7 +382,7 @@ function CheckBoxRenderer(_ref) {
 }
 var RNCheckbox = /*#__PURE__*/React__namespace.forwardRef(function (_ref2, ref) {
   var className = _ref2.className,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$9);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$b);
   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 +401,14 @@ var RNCheckbox = /*#__PURE__*/React__namespace.forwardRef(function (_ref2, ref)
 });
 RNCheckbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
 
-var _excluded$8 = ["renderOptions", "control", "readonly"],
+var _excluded$a = ["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$8);
+      rest = _objectWithoutPropertiesLoose(p, _excluded$a);
     var _formControlProps = core.formControlProps(control),
       disabled = _formControlProps.disabled;
     var placeholder = renderOptions.placeholder,
@@ -452,7 +452,7 @@ function RNTextInput(_ref) {
 }
 RNTextInput.displayName = "RNInput";
 
-var _excluded$7 = ["control", "mode", "locale", "is24Hour", "className"];
+var _excluded$9 = ["control", "mode", "locale", "is24Hour", "className"];
 function createRNDateTimePickerRenderer(options) {
   if (options === void 0) {
     options = {};
@@ -538,7 +538,7 @@ function RNDateTimePicker(_ref) {
       _ref$is24Hour = _ref.is24Hour,
       is24Hour = _ref$is24Hour === void 0 ? true : _ref$is24Hour,
       className = _ref.className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
     var disabled = control.disabled;
     var maximumDate = props.maximumDate,
       minimumDate = props.minimumDate;
@@ -601,33 +601,41 @@ function RNDateTimePicker(_ref) {
   }
 }
 
+var _excluded$8 = ["className", "html", "style", "contentWidth"];
 function RNHtmlRenderer(_ref) {
   var _effect = core.useComponentTracking();
   try {
     var className = _ref.className,
-      html = _ref.html;
+      html = _ref.html,
+      style = _ref.style,
+      contentWidth = _ref.contentWidth,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
     if (!html) return;
     var source = {
       html: html
     };
     return jsxRuntime.jsx(reactNative.View, {
+      style: style,
       className: className,
-      children: jsxRuntime.jsx(RenderHtml__default["default"], {
-        contentWidth: reactNative.Dimensions.get("window").width,
+      children: jsxRuntime.jsx(RenderHtml__default["default"], _extends({
+        defaultTextProps: {
+          selectable: true
+        },
+        contentWidth: contentWidth != null ? contentWidth : reactNative.Dimensions.get("window").width,
         source: source
-      })
+      }, props))
     });
   } finally {
     _effect();
   }
 }
 
-var _excluded$6 = ["className", "checked", "onChange"];
+var _excluded$7 = ["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$6);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   return jsxRuntime.jsx(reactNative.Pressable, _extends({
     ref: ref,
     onPress: onChange,
@@ -660,7 +668,7 @@ function createSelectConversion(ft) {
   }
 }
 
-var _excluded$5 = ["state", "options", "className", "convert", "required", "emptyText", "requiredText", "portalHost", "readonly"],
+var _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"],
@@ -711,7 +719,7 @@ function RNSelectRenderer(_ref) {
       requiredText = _ref$requiredText === void 0 ? "Please select" : _ref$requiredText,
       portalHost = _ref.portalHost,
       readonly = _ref.readonly,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
     var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
     var contentInsets = {
       top: insets.top,
@@ -891,7 +899,7 @@ var SelectItem = /*#__PURE__*/React__namespace.forwardRef(function (_ref5, ref)
 });
 SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
 
-var _excluded$4 = ["className"],
+var _excluded$5 = ["className"],
   _excluded2$3 = ["className", "children"],
   _excluded3$1 = ["className", "children", "portalHost", "closeOnOutsidePress"],
   _excluded4$1 = ["className"];
@@ -903,7 +911,7 @@ function DialogOverlayWeb(_ref) {
   var _effect = core.useComponentTracking();
   try {
     var className = _ref.className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
     var _DialogPrimitive$useR = DialogPrimitive__namespace.useRootContext(),
       open = _DialogPrimitive$useR.open;
     return jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, _extends({
@@ -1139,6 +1147,7 @@ function RNScrollListRenderer(_ref) {
   }
 }
 
+var _excluded$4 = ["htmlClassName"];
 function createDefaultDisplayRenderer(options) {
   if (options === void 0) {
     options = {};
@@ -1191,12 +1200,13 @@ function DefaultDisplay(_ref) {
           inline: displayProps.inline
         });
       case schemas.DisplayDataType.Html:
-        return jsxRuntime.jsx(Div, {
+        var htmlClassName = options.htmlClassName,
+          props = _objectWithoutPropertiesLoose(options, _excluded$4);
+        return jsxRuntime.jsx(RNHtmlRenderer, _extends({
           style: style,
-          className: schemas.rendererClass(className, options.htmlClassName),
-          inline: displayProps.inline,
+          className: schemas.rendererClass(className, htmlClassName),
           html: display ? schemas.coerceToString(display.value) : data.html
-        });
+        }, props));
       case schemas.DisplayDataType.Custom:
         return jsxRuntime.jsx(Div, {
           children: jsxRuntime.jsxs(B, {
@@ -1386,6 +1396,7 @@ function DefaultDisplayOnly(_ref) {
     var dataNode = _ref.dataNode,
       className = _ref.className,
       emptyText = _ref.emptyText,
+      noSelection = _ref.noSelection,
       schemaInterface = _ref.schemaInterface,
       style = _ref.style,
       renderer = _ref.renderer,
@@ -1394,13 +1405,13 @@ function DefaultDisplayOnly(_ref) {
       state = _ref.state;
     var display = state.resolved.display;
     var text = display != null ? display : (_ref2 = schemaInterface.isEmptyValue(dataNode.schema.field, dataNode.control.value) ? emptyText : schemaInterface.textValueForData(dataNode)) != null ? _ref2 : "";
-    var Div = renderer.html.Div;
-    return jsxRuntime.jsx(Div, {
+    return jsxRuntime.jsx(RNDiv, {
       style: style,
       className: className,
       textClass: textClass,
       text: text,
-      inline: inline
+      inline: inline,
+      noSelection: noSelection
     });
   } finally {
     _effect();
@@ -2447,7 +2458,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"],
+  _excluded3 = ["className", "html", "children", "textClass", "text", "style", "inline", "role", "noSelection"],
   _excluded4 = ["id", "type", "onChangeValue", "onChangeChecked", "checked", "value"];
 function createDefaultDataRenderer(options) {
   var _options$checkboxOpti, _options$checkboxOpti2, _options$radioOptions, _options$checkListOpt;
@@ -2506,7 +2517,8 @@ function createDefaultDataRenderer(options) {
           style: props.style,
           inline: props.inline,
           renderer: renderers,
-          emptyText: schemas.isDisplayOnlyRenderer(renderOptions) && renderOptions.emptyText ? renderOptions.emptyText : defaultEmptyText
+          emptyText: schemas.isDisplayOnlyRenderer(renderOptions) && renderOptions.emptyText ? renderOptions.emptyText : defaultEmptyText,
+          noSelection: schemas.isDisplayOnlyRenderer(renderOptions) ? renderOptions.noSelection : undefined
         })
       });
     };
@@ -2795,6 +2807,7 @@ function RNDiv(_ref8) {
       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, {
@@ -2805,6 +2818,7 @@ function RNDiv(_ref8) {
       return jsxRuntime.jsx(reactNative.Text, {
         style: style,
         className: textClass,
+        selectable: !noSelection,
         children: text != null ? text : children
       });
     }
@@ -2816,6 +2830,7 @@ function RNDiv(_ref8) {
       }, props, {
         children: jsxRuntime.jsx(reactNative.Text, {
           className: textClass,
+          selectable: !noSelection,
           children: text
         })
       }));
@@ -2928,6 +2943,7 @@ 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;