@react-typed-forms/schemas 1.0.0-dev.2 → 1.0.0-dev.4

package/.rush/temp/package-deps_build.json

@@ -1,12 +1,12 @@
 {
   "files": {
     "packages/schemas/.rush/temp/shrinkwrap-deps.json": "5ce6417fae765db5c61e400f851ecafe0ce756f0",
-    "packages/schemas/package.json": "31ae328607ccdfaa29ac8502c8e8e3495ad9c424",
-    "packages/schemas/src/controlRender.tsx": "a9d28c66e85ff45e941ecd11e8c8032c6629b4b1",
-    "packages/schemas/src/hooks.ts": "2356b9d918b879adb3490ad5c2b1155dec59a9e5",
-    "packages/schemas/src/index.ts": "b15fbb6de132cd912cf8141d5c4d2329e947546e",
+    "packages/schemas/package.json": "3fc4e26d218ceacae3452eccb3749fa9fc874c38",
+    "packages/schemas/src/controlRender.tsx": "5ce85ef4ee97307d9131d066655c133eb1b9bf48",
+    "packages/schemas/src/hooks.ts": "4eb4946f7b1c685e0b51cd011b4d39a1fdd6aa2e",
+    "packages/schemas/src/index.ts": "67f656f1d7f717bce7e933b9f4d7dc5dc50274dc",
     "packages/schemas/src/schemaBuilder.ts": "bfe74d3fb1cc2a4d5226051a58e025e107c32b11",
-    "packages/schemas/src/types.ts": "2ff2a346d753da0eca2fe4acbe1b709f72034e5c",
+    "packages/schemas/src/types.ts": "01bba36475e368ee273871358458caf60b36dad5",
     "packages/schemas/tsconfig.json": "52e4f044fa580f4e0ad5830f3cfca574e2788372"
   },
   "arguments": "rimraf ./lib/ && tsc "

package/lib/controlRender.d.ts

@@ -8,12 +8,13 @@ export interface FormEditHooks {
     useActionProperties(formState: FormEditState, definition: ActionControlDefinition): ActionControlProperties;
 }
 export interface DataControlProperties {
-    readonly: boolean;
+    control: Control<any>;
     visible: boolean;
-    options: FieldOption[] | undefined;
+    readonly: boolean;
     defaultValue: any;
     required: boolean;
-    customRender?: (props: DataRendererProps, control: Control<any>) => ReactElement;
+    options: FieldOption[] | undefined | null;
+    customRender?: (props: DataRendererProps) => ReactElement;
 }
 export interface GroupControlProperties {
     visible: boolean;
@@ -86,10 +87,9 @@ export declare function elementValueForField(sf: SchemaField): any;
 export declare function findScalarField(fields: SchemaField[], field: string): SchemaField | undefined;
 export declare function findCompoundField(fields: SchemaField[], field: string): CompoundField | undefined;
 export declare function findField(fields: SchemaField[], field: string): SchemaField | undefined;
-export declare function fieldDisplayName(sf: SchemaField): string;
-export declare function controlTitle(title: string | undefined, field: SchemaField): string;
+export declare function controlTitle(title: string | undefined | null, field: SchemaField): string;
 export declare function renderControl(definition: AnyControlDefinition, formState: FormEditState, hooks: FormEditHooks, key: Key, wrapChild?: (key: Key, db: ReactElement) => ReactElement): ReactElement;
 export declare function controlForField(field: string, formState: FormEditState): Control<any>;
-export declare function fieldForControl(c: ControlDefinition): string | undefined;
+export declare function fieldForControl(c: ControlDefinition): string | null | undefined;
 export declare function isDataControl(c: ControlDefinition): c is DataControlDefinition;
 export declare function isGroupControl(c: ControlDefinition): c is GroupedControlsDefinition;

package/lib/controlRender.js

@@ -23,10 +23,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isGroupControl = exports.isDataControl = exports.fieldForControl = exports.controlForField = exports.renderControl = exports.controlTitle = exports.fieldDisplayName = exports.findField = exports.findCompoundField = exports.findScalarField = exports.elementValueForField = exports.defaultValueForField = exports.defaultValueForFields = exports.applyDefaultForField = exports.applyDefaultValues = exports.isCompoundField = exports.isScalarField = exports.useFormRendererComponents = exports.FormRendererComponentsContext = void 0;
+exports.isGroupControl = exports.isDataControl = exports.fieldForControl = exports.controlForField = exports.renderControl = exports.controlTitle = exports.findField = exports.findCompoundField = exports.findScalarField = exports.elementValueForField = exports.defaultValueForField = exports.defaultValueForFields = exports.applyDefaultForField = exports.applyDefaultValues = exports.isCompoundField = exports.isScalarField = exports.useFormRendererComponents = exports.FormRendererComponentsContext = void 0;
 const types_1 = require("./types");
 const react_1 = __importStar(require("react"));
 const core_1 = require("@react-typed-forms/core");
+const index_1 = require("./index");
 exports.FormRendererComponentsContext = (0, react_1.createContext)(undefined);
 function useFormRendererComponents() {
     const c = (0, react_1.useContext)(exports.FormRendererComponentsContext);
@@ -109,12 +110,8 @@ function findField(fields, field) {
     return fields.find((x) => x.field === field);
 }
 exports.findField = findField;
-function fieldDisplayName(sf) {
-    return sf.displayName ? sf.displayName : sf.field;
-}
-exports.fieldDisplayName = fieldDisplayName;
 function controlTitle(title, field) {
-    return title ? title : fieldDisplayName(field);
+    return title ? title : (0, index_1.fieldDisplayName)(field);
 }
 exports.controlTitle = controlTitle;
 function renderControl(definition, formState, hooks, key, wrapChild) {
@@ -146,40 +143,25 @@ function renderControl(definition, formState, hooks, key, wrapChild) {
 }
 exports.renderControl = renderControl;
 function DataRenderer({ hooks, formState, controlDef, wrapElem, fieldData, }) {
-    var _a, _b;
+    var _a;
     const renderer = useFormRendererComponents();
     const props = hooks.useDataProperties(formState, controlDef, fieldData);
-    const scalarControl = (_a = formState.data.fields[fieldData.field]) !== null && _a !== void 0 ? _a : (0, core_1.newControl)(undefined);
-    (0, core_1.useControlEffect)(() => scalarControl.value, (v) => {
-        if (props.defaultValue && !v) {
-            scalarControl.value = props.defaultValue;
-        }
-    }, true);
-    if (!props.visible) {
-        return react_1.default.createElement(react_1.default.Fragment, null);
-    }
     const scalarProps = {
         formEditState: formState,
         field: fieldData,
         definition: controlDef,
         properties: props,
     };
-    return wrapElem(((_b = props.customRender) !== null && _b !== void 0 ? _b : renderer.renderData)(scalarProps, scalarControl, false, renderer));
+    return wrapElem(((_a = props.customRender) !== null && _a !== void 0 ? _a : renderer.renderData)(scalarProps, props.control, false, renderer));
 }
 function ActionRenderer({ hooks, formState, wrapElem, actionDef, }) {
     const { renderAction } = useFormRendererComponents();
     const actionControlProperties = hooks.useActionProperties(formState, actionDef);
-    if (!actionControlProperties.visible) {
-        return react_1.default.createElement(react_1.default.Fragment, null);
-    }
     return wrapElem(renderAction({ definition: actionDef, properties: actionControlProperties }));
 }
 function GroupRenderer({ hooks, formState, groupDef, wrapElem, }) {
     const renderers = useFormRendererComponents();
     const groupProps = hooks.useGroupProperties(formState, groupDef, hooks);
-    if (!groupProps.visible) {
-        return react_1.default.createElement(react_1.default.Fragment, null);
-    }
     const compoundField = groupDef.compoundField
         ? findCompoundField(formState.fields, groupDef.compoundField)
         : undefined;
@@ -201,9 +183,6 @@ function GroupRenderer({ hooks, formState, groupDef, wrapElem, }) {
 function DisplayRenderer({ hooks, wrapElem, formState, displayDef, }) {
     const { renderDisplay } = useFormRendererComponents();
     const displayProps = hooks.useDisplayProperties(formState, displayDef);
-    if (!displayProps.visible) {
-        return react_1.default.createElement(react_1.default.Fragment, null);
-    }
     return wrapElem(renderDisplay({ definition: displayDef, properties: displayProps }));
 }
 function controlForField(field, formState) {

package/lib/hooks.d.ts

@@ -1,9 +1,10 @@
-import { DataControlDefinition, EntityExpression, FieldOption, ControlDefinition, SchemaField } from "./types";
+import { ControlDefinition, DataControlDefinition, EntityExpression, FieldOption, SchemaField } from "./types";
 import { DataControlProperties, FormEditHooks, FormEditState } from "./controlRender";
+import { Control } from "@react-typed-forms/core";
 export type ExpressionHook = (expr: EntityExpression, formState: FormEditState) => any;
 export declare function useDefaultValue(definition: DataControlDefinition, field: SchemaField, formState: FormEditState, useExpression: ExpressionHook): any;
 export declare function useIsControlVisible(definition: ControlDefinition, formState: FormEditState, useExpression: ExpressionHook): boolean;
-export declare function getDefaultScalarControlProperties(control: DataControlDefinition, field: SchemaField, visible: boolean, defaultValue: any, readonly?: boolean): DataControlProperties;
-export declare function getOptionsForScalarField(field: SchemaField): FieldOption[] | undefined;
+export declare function getDefaultScalarControlProperties(definition: DataControlDefinition, field: SchemaField, visible: boolean, defaultValue: any, control: Control<any>, readonly?: boolean): DataControlProperties;
+export declare function getOptionsForScalarField(field: SchemaField): FieldOption[] | undefined | null;
 export declare const defaultExpressionHook: ExpressionHook;
 export declare function createFormEditHooks(useExpression: ExpressionHook): FormEditHooks;

package/lib/hooks.js

@@ -39,14 +39,15 @@ function useIsControlVisible(definition, formState, useExpression) {
             Boolean(typeControl.value && onlyForTypes.includes(typeControl.value))));
 }
 exports.useIsControlVisible = useIsControlVisible;
-function getDefaultScalarControlProperties(control, field, visible, defaultValue, readonly) {
+function getDefaultScalarControlProperties(definition, field, visible, defaultValue, control, readonly) {
     var _a, _b;
     return {
         defaultValue,
         options: getOptionsForScalarField(field),
-        required: (_a = control.required) !== null && _a !== void 0 ? _a : false,
+        required: (_a = definition.required) !== null && _a !== void 0 ? _a : false,
         visible,
-        readonly: (_b = readonly !== null && readonly !== void 0 ? readonly : control.readonly) !== null && _b !== void 0 ? _b : false,
+        readonly: (_b = readonly !== null && readonly !== void 0 ? readonly : definition.readonly) !== null && _b !== void 0 ? _b : false,
+        control,
     };
 }
 exports.getDefaultScalarControlProperties = getDefaultScalarControlProperties;
@@ -74,7 +75,15 @@ function createFormEditHooks(useExpression) {
         useDataProperties(formState, definition, field) {
             const visible = useIsControlVisible(definition, formState, useExpression);
             const defaultValue = useDefaultValue(definition, field, formState, useExpression);
-            return getDefaultScalarControlProperties(definition, field, visible, defaultValue, formState.readonly);
+            const scalarControl = formState.data.fields[field.field];
+            (0, react_1.useEffect)(() => {
+                if (!visible)
+                    scalarControl.value = null;
+                else if (scalarControl.current.value == null) {
+                    scalarControl.value = defaultValue;
+                }
+            }, [visible, defaultValue]);
+            return getDefaultScalarControlProperties(definition, field, visible, defaultValue, scalarControl, formState.readonly);
         },
         useDisplayProperties: (fs, definition) => {
             const visible = useIsControlVisible(definition, fs, useExpression);

package/lib/index.d.ts

@@ -1,4 +1,7 @@
+import { SchemaField } from "./types";
 export * from "./types";
 export * from "./schemaBuilder";
 export * from "./controlRender";
 export * from "./hooks";
+export declare function fieldHasTag(field: SchemaField, tag: string): boolean;
+export declare function fieldDisplayName(field: SchemaField): string;

package/lib/index.js

@@ -14,7 +14,18 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.fieldDisplayName = exports.fieldHasTag = void 0;
 __exportStar(require("./types"), exports);
 __exportStar(require("./schemaBuilder"), exports);
 __exportStar(require("./controlRender"), exports);
 __exportStar(require("./hooks"), exports);
+function fieldHasTag(field, tag) {
+    var _a;
+    return Boolean((_a = field.tags) === null || _a === void 0 ? void 0 : _a.includes(tag));
+}
+exports.fieldHasTag = fieldHasTag;
+function fieldDisplayName(field) {
+    var _a;
+    return (_a = field.displayName) !== null && _a !== void 0 ? _a : field.field;
+}
+exports.fieldDisplayName = fieldDisplayName;

package/lib/schemaBuilder.d.ts

@@ -18,17 +18,17 @@ export declare function buildSchema<T>(def: {
 }): SchemaField[];
 export declare function stringField(displayName: string, options?: Partial<Omit<SchemaField, "type">>): (name: string) => SchemaField & {
     field?: string | undefined;
-    displayName: string;
-    tags?: string[] | undefined;
-    system?: boolean | undefined;
-    collection?: boolean | undefined;
-    onlyForTypes?: string[] | undefined;
-    required?: boolean | undefined;
+    displayName: string | null;
+    tags?: string[] | null | undefined;
+    system?: boolean | null | undefined;
+    collection?: boolean | null | undefined;
+    onlyForTypes?: string[] | null | undefined;
+    required?: boolean | null | undefined;
     defaultValue?: any;
-    isTypeField?: boolean | undefined;
-    searchable?: boolean | undefined;
-    options?: FieldOption[] | undefined;
-    restrictions?: import("./types").SchemaRestrictions | undefined;
+    isTypeField?: boolean | null | undefined;
+    searchable?: boolean | null | undefined;
+    options?: FieldOption[] | null | undefined;
+    restrictions?: import("./types").SchemaRestrictions | null | undefined;
     type: FieldType.String;
 };
 export declare function stringOptionsField(displayName: string, ...options: FieldOption[]): (name: string) => SchemaField & {
@@ -43,32 +43,32 @@ export declare function makeCompoundField<S extends Partial<CompoundField>>(opti
 } & S;
 export declare function intField(displayName: string, options?: Partial<Omit<SchemaField, "type">>): (name: string) => SchemaField & {
     field?: string | undefined;
-    displayName: string;
-    tags?: string[] | undefined;
-    system?: boolean | undefined;
-    collection?: boolean | undefined;
-    onlyForTypes?: string[] | undefined;
-    required?: boolean | undefined;
+    displayName: string | null;
+    tags?: string[] | null | undefined;
+    system?: boolean | null | undefined;
+    collection?: boolean | null | undefined;
+    onlyForTypes?: string[] | null | undefined;
+    required?: boolean | null | undefined;
     defaultValue?: any;
-    isTypeField?: boolean | undefined;
-    searchable?: boolean | undefined;
-    options?: FieldOption[] | undefined;
-    restrictions?: import("./types").SchemaRestrictions | undefined;
+    isTypeField?: boolean | null | undefined;
+    searchable?: boolean | null | undefined;
+    options?: FieldOption[] | null | undefined;
+    restrictions?: import("./types").SchemaRestrictions | null | undefined;
     type: FieldType.Int;
 };
 export declare function boolField(displayName: string, options?: Partial<Omit<SchemaField, "type">>): (name: string) => SchemaField & {
     field?: string | undefined;
-    displayName: string;
-    tags?: string[] | undefined;
-    system?: boolean | undefined;
-    collection?: boolean | undefined;
-    onlyForTypes?: string[] | undefined;
-    required?: boolean | undefined;
+    displayName: string | null;
+    tags?: string[] | null | undefined;
+    system?: boolean | null | undefined;
+    collection?: boolean | null | undefined;
+    onlyForTypes?: string[] | null | undefined;
+    required?: boolean | null | undefined;
     defaultValue?: any;
-    isTypeField?: boolean | undefined;
-    searchable?: boolean | undefined;
-    options?: FieldOption[] | undefined;
-    restrictions?: import("./types").SchemaRestrictions | undefined;
+    isTypeField?: boolean | null | undefined;
+    searchable?: boolean | null | undefined;
+    options?: FieldOption[] | null | undefined;
+    restrictions?: import("./types").SchemaRestrictions | null | undefined;
     type: FieldType.Bool;
 };
 export declare function compoundField<Other extends Partial<Omit<CompoundField, "type" | "schemaType">>>(displayName: string, fields: SchemaField[], other: Other): (name: string) => CompoundField & {

package/lib/types.d.ts

@@ -1,20 +1,20 @@
 export interface SchemaField {
     type: string;
     field: string;
-    displayName?: string;
-    tags?: string[];
-    system?: boolean;
-    collection?: boolean;
-    onlyForTypes?: string[];
-    required?: boolean;
+    displayName?: string | null;
+    tags?: string[] | null;
+    system?: boolean | null;
+    collection?: boolean | null;
+    onlyForTypes?: string[] | null;
+    required?: boolean | null;
     defaultValue?: any;
-    isTypeField?: boolean;
-    searchable?: boolean;
-    options?: FieldOption[];
+    isTypeField?: boolean | null;
+    searchable?: boolean | null;
+    options?: FieldOption[] | null;
     /**
      * @deprecated Use options directly
      */
-    restrictions?: SchemaRestrictions | undefined;
+    restrictions?: SchemaRestrictions | undefined | null;
 }
 export declare enum FieldType {
     String = "String",
@@ -34,7 +34,7 @@ export interface EntityRefField extends SchemaField {
     parentField: string;
 }
 export interface SchemaRestrictions {
-    options: FieldOption[] | undefined;
+    options?: FieldOption[] | null;
 }
 export interface FieldOption {
     name: string;
@@ -48,9 +48,9 @@ export interface CompoundField extends SchemaField {
 export type AnyControlDefinition = DataControlDefinition | GroupedControlsDefinition | ActionControlDefinition | DisplayControlDefinition;
 export interface ControlDefinition {
     type: string;
-    title?: string;
-    dynamic?: DynamicProperty[];
-    adornments?: ControlAdornment[];
+    title?: string | null;
+    dynamic?: DynamicProperty[] | null;
+    adornments?: ControlAdornment[] | null;
 }
 export declare enum ControlDefinitionType {
     Data = "Data",
@@ -101,10 +101,10 @@ export interface AccordionAdornment extends ControlAdornment {
 export interface DataControlDefinition extends ControlDefinition {
     type: ControlDefinitionType.Data;
     field: string;
-    required?: boolean;
-    renderOptions?: RenderOptions;
+    required?: boolean | null;
+    renderOptions?: RenderOptions | null;
     defaultValue?: any;
-    readonly?: boolean;
+    readonly?: boolean | null;
 }
 export interface RenderOptions {
     type: string;
@@ -128,14 +128,14 @@ export interface HtmlEditorRenderOptions extends RenderOptions {
     allowImages: boolean;
 }
 export interface DateTimeRenderOptions extends RenderOptions {
-    format?: string;
+    format?: string | null;
 }
 export interface IconListRenderOptions extends RenderOptions {
     iconMappings: IconMapping[];
 }
 export interface IconMapping {
     value: string;
-    materialIcon: string | undefined;
+    materialIcon?: string | null;
 }
 export interface CheckListRenderOptions extends RenderOptions {
 }
@@ -157,12 +157,12 @@ export interface IconSelectionRenderOptions extends RenderOptions {
 export interface GroupedControlsDefinition extends ControlDefinition {
     type: ControlDefinitionType.Group;
     children: AnyControlDefinition[];
-    compoundField?: string;
+    compoundField?: string | null;
     groupOptions: GroupRenderOptions;
 }
 export interface GroupRenderOptions {
     type: GroupRenderType;
-    hideTitle?: boolean;
+    hideTitle?: boolean | null;
 }
 export declare enum GroupRenderType {
     Standard = "Standard",
@@ -175,7 +175,7 @@ export interface GroupElementRenderer extends GroupRenderOptions {
     value: any;
 }
 export interface GridRenderer extends GroupRenderOptions {
-    columns: number | undefined;
+    columns?: number | null;
 }
 export interface DisplayControlDefinition extends ControlDefinition {
     type: ControlDefinitionType.Display;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@react-typed-forms/schemas",
-	"version": "1.0.0-dev.2",
+	"version": "1.0.0-dev.4",
 	"description": "",
 	"main": "lib/index.js",
 	"types": "lib/index.d.ts",

package/schemas.build.log

@@ -1,2 +0,0 @@
-Invoking: rimraf ./lib/ && tsc 
-

package/src/controlRender.tsx

@@ -12,7 +12,8 @@ import {
   SchemaField,
 } from "./types";
 import React, { createContext, Key, ReactElement, useContext } from "react";
-import { Control, newControl, useControlEffect } from "@react-typed-forms/core";
+import { Control, newControl } from "@react-typed-forms/core";
+import { fieldDisplayName } from "./index";
 
 export interface FormEditHooks {
   useDataProperties(
@@ -36,15 +37,13 @@ export interface FormEditHooks {
 }
 
 export interface DataControlProperties {
-  readonly: boolean;
+  control: Control<any>;
   visible: boolean;
-  options: FieldOption[] | undefined;
+  readonly: boolean;
   defaultValue: any;
   required: boolean;
-  customRender?: (
-    props: DataRendererProps,
-    control: Control<any>
-  ) => ReactElement;
+  options: FieldOption[] | undefined | null;
+  customRender?: (props: DataRendererProps) => ReactElement;
 }
 
 export interface GroupControlProperties {
@@ -235,12 +234,10 @@ export function findField(
 ): SchemaField | undefined {
   return fields.find((x) => x.field === field);
 }
-
-export function fieldDisplayName(sf: SchemaField): string {
-  return sf.displayName ? sf.displayName : sf.field;
-}
-
-export function controlTitle(title: string | undefined, field: SchemaField) {
+export function controlTitle(
+  title: string | undefined | null,
+  field: SchemaField
+) {
   return title ? title : fieldDisplayName(field);
 }
 
@@ -321,20 +318,6 @@ function DataRenderer({
 }) {
   const renderer = useFormRendererComponents();
   const props = hooks.useDataProperties(formState, controlDef, fieldData);
-  const scalarControl =
-    formState.data.fields[fieldData.field] ?? newControl(undefined);
-  useControlEffect(
-    () => scalarControl.value,
-    (v) => {
-      if (props.defaultValue && !v) {
-        scalarControl.value = props.defaultValue;
-      }
-    },
-    true
-  );
-  if (!props.visible) {
-    return <></>;
-  }
   const scalarProps: DataRendererProps = {
     formEditState: formState,
     field: fieldData,
@@ -344,7 +327,7 @@ function DataRenderer({
   return wrapElem(
     (props.customRender ?? renderer.renderData)(
       scalarProps,
-      scalarControl,
+      props.control,
       false,
       renderer
     )
@@ -367,10 +350,6 @@ function ActionRenderer({
     formState,
     actionDef
   );
-  if (!actionControlProperties.visible) {
-    return <></>;
-  }
-
   return wrapElem(
     renderAction({ definition: actionDef, properties: actionControlProperties })
   );
@@ -390,9 +369,6 @@ function GroupRenderer({
   const renderers = useFormRendererComponents();
 
   const groupProps = hooks.useGroupProperties(formState, groupDef, hooks);
-  if (!groupProps.visible) {
-    return <></>;
-  }
   const compoundField = groupDef.compoundField
     ? findCompoundField(formState.fields, groupDef.compoundField)
     : undefined;
@@ -452,9 +428,6 @@ function DisplayRenderer({
   const { renderDisplay } = useFormRendererComponents();
 
   const displayProps = hooks.useDisplayProperties(formState, displayDef);
-  if (!displayProps.visible) {
-    return <></>;
-  }
   return wrapElem(
     renderDisplay({ definition: displayDef, properties: displayProps })
   );

package/src/hooks.ts

@@ -1,12 +1,12 @@
 import {
   ActionControlDefinition,
+  ControlDefinition,
   DataControlDefinition,
   DynamicPropertyType,
   EntityExpression,
   ExpressionType,
   FieldOption,
   FieldValueExpression,
-  ControlDefinition,
   SchemaField,
 } from "./types";
 import {
@@ -20,7 +20,7 @@ import {
   isGroupControl,
   isScalarField,
 } from "./controlRender";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { Control, newControl } from "@react-typed-forms/core";
 
 export type ExpressionHook = (
@@ -83,24 +83,26 @@ export function useIsControlVisible(
   );
 }
 export function getDefaultScalarControlProperties(
-  control: DataControlDefinition,
+  definition: DataControlDefinition,
   field: SchemaField,
   visible: boolean,
   defaultValue: any,
+  control: Control<any>,
   readonly?: boolean
 ): DataControlProperties {
   return {
     defaultValue,
     options: getOptionsForScalarField(field),
-    required: control.required ?? false,
+    required: definition.required ?? false,
     visible,
-    readonly: readonly ?? control.readonly ?? false,
+    readonly: readonly ?? definition.readonly ?? false,
+    control,
   };
 }
 
 export function getOptionsForScalarField(
   field: SchemaField
-): FieldOption[] | undefined {
+): FieldOption[] | undefined | null {
   const opts = field.options ?? field.restrictions?.options;
   if (opts?.length ?? 0 > 0) {
     return opts;
@@ -137,11 +139,20 @@ export function createFormEditHooks(
         formState,
         useExpression
       );
+      const scalarControl = formState.data.fields[field.field];
+
+      useEffect(() => {
+        if (!visible) scalarControl.value = null;
+        else if (scalarControl.current.value == null) {
+          scalarControl.value = defaultValue;
+        }
+      }, [visible, defaultValue]);
       return getDefaultScalarControlProperties(
         definition,
         field,
         visible,
         defaultValue,
+        scalarControl,
         formState.readonly
       );
     },

package/src/index.ts

@@ -1,4 +1,14 @@
+import { SchemaField } from "./types";
+
 export * from "./types";
 export * from "./schemaBuilder";
 export * from "./controlRender";
 export * from "./hooks";
+
+export function fieldHasTag(field: SchemaField, tag: string) {
+  return Boolean(field.tags?.includes(tag));
+}
+
+export function fieldDisplayName(field: SchemaField) {
+  return field.displayName ?? field.field;
+}

package/src/types.ts

@@ -1,20 +1,20 @@
 export interface SchemaField {
   type: string;
   field: string;
-  displayName?: string;
-  tags?: string[];
-  system?: boolean;
-  collection?: boolean;
-  onlyForTypes?: string[];
-  required?: boolean;
+  displayName?: string | null;
+  tags?: string[] | null;
+  system?: boolean | null;
+  collection?: boolean | null;
+  onlyForTypes?: string[] | null;
+  required?: boolean | null;
   defaultValue?: any;
-  isTypeField?: boolean;
-  searchable?: boolean;
-  options?: FieldOption[];
+  isTypeField?: boolean | null;
+  searchable?: boolean | null;
+  options?: FieldOption[] | null;
   /**
    * @deprecated Use options directly
    */
-  restrictions?: SchemaRestrictions | undefined;
+  restrictions?: SchemaRestrictions | undefined | null;
 }
 
 export enum FieldType {
@@ -37,7 +37,7 @@ export interface EntityRefField extends SchemaField {
 }
 
 export interface SchemaRestrictions {
-  options: FieldOption[] | undefined;
+  options?: FieldOption[] | null;
 }
 
 export interface FieldOption {
@@ -59,9 +59,9 @@ export type AnyControlDefinition =
 
 export interface ControlDefinition {
   type: string;
-  title?: string;
-  dynamic?: DynamicProperty[];
-  adornments?: ControlAdornment[];
+  title?: string | null;
+  dynamic?: DynamicProperty[] | null;
+  adornments?: ControlAdornment[] | null;
 }
 
 export enum ControlDefinitionType {
@@ -125,10 +125,10 @@ export interface AccordionAdornment extends ControlAdornment {
 export interface DataControlDefinition extends ControlDefinition {
   type: ControlDefinitionType.Data;
   field: string;
-  required?: boolean;
-  renderOptions?: RenderOptions;
+  required?: boolean | null;
+  renderOptions?: RenderOptions | null;
   defaultValue?: any;
-  readonly?: boolean;
+  readonly?: boolean | null;
 }
 
 export interface RenderOptions {
@@ -156,7 +156,7 @@ export interface HtmlEditorRenderOptions extends RenderOptions {
 }
 
 export interface DateTimeRenderOptions extends RenderOptions {
-  format?: string;
+  format?: string | null;
 }
 
 export interface IconListRenderOptions extends RenderOptions {
@@ -165,7 +165,7 @@ export interface IconListRenderOptions extends RenderOptions {
 
 export interface IconMapping {
   value: string;
-  materialIcon: string | undefined;
+  materialIcon?: string | null;
 }
 
 export interface CheckListRenderOptions extends RenderOptions {}
@@ -191,13 +191,13 @@ export interface IconSelectionRenderOptions extends RenderOptions {}
 export interface GroupedControlsDefinition extends ControlDefinition {
   type: ControlDefinitionType.Group;
   children: AnyControlDefinition[];
-  compoundField?: string;
+  compoundField?: string | null;
   groupOptions: GroupRenderOptions;
 }
 
 export interface GroupRenderOptions {
   type: GroupRenderType;
-  hideTitle?: boolean;
+  hideTitle?: boolean | null;
 }
 
 export enum GroupRenderType {
@@ -213,7 +213,7 @@ export interface GroupElementRenderer extends GroupRenderOptions {
 }
 
 export interface GridRenderer extends GroupRenderOptions {
-  columns: number | undefined;
+  columns?: number | null;
 }
 
 export interface DisplayControlDefinition extends ControlDefinition {