@react-typed-forms/schemas 4.1.1 → 5.0.1

package/.rush/temp/operation/build/state.json

@@ -1,3 +1,3 @@
 {
-  "nonCachedDurationMs": 3968.0399519987404
+  "nonCachedDurationMs": 3307.499355999753
 }

package/lib/controlBuilder.d.ts

@@ -4,7 +4,9 @@ export declare function dataControl(field: string, title?: string | null, option
 export declare function textDisplayControl(text: string, options?: Partial<DisplayControlDefinition>): DisplayControlDefinition;
 export declare function htmlDisplayControl(html: string, options?: Partial<DisplayControlDefinition>): DisplayControlDefinition;
 export declare function dynamicDefaultValue(expr: EntityExpression): DynamicProperty;
-export declare function visibility(expr: EntityExpression): DynamicProperty;
+export declare function dynamicReadonly(expr: EntityExpression): DynamicProperty;
+export declare function dynamicVisibility(expr: EntityExpression): DynamicProperty;
+export declare function dynamicDisabled(expr: EntityExpression): DynamicProperty;
 export declare function fieldEqExpr(field: string, value: any): FieldValueExpression;
 export declare function jsonataExpr(expression: string): JsonataExpression;
 export declare function groupedControl(children: ControlDefinition[], title?: string, options?: Partial<GroupedControlsDefinition>): GroupedControlsDefinition;

package/lib/controlRender.d.ts

@@ -2,6 +2,7 @@ import { FC, Key, ReactNode } from "react";
 import { Control } from "@react-typed-forms/core";
 import { AdornmentPlacement, ControlAdornment, ControlDefinition, DataControlDefinition, DisplayData, FieldOption, GroupRenderOptions, RenderOptions, SchemaField } from "./types";
 import { ControlGroupContext } from "./util";
+import { UseEvalExpressionHook } from "./hooks";
 export interface FormRenderer {
     renderData: (props: DataRendererProps, asArray: (() => ReactNode) | undefined) => (layout: ControlLayoutProps) => ControlLayoutProps;
     renderGroup: (props: GroupRendererProps) => ReactNode;
@@ -46,6 +47,7 @@ export interface RenderedLayout {
     controlEnd?: ReactNode;
     label?: ReactNode;
     children?: ReactNode;
+    errorControl?: Control<any>;
 }
 export interface ControlLayoutProps {
     label?: LabelRendererProps;
@@ -90,11 +92,13 @@ export interface ControlRenderProps {
 }
 export interface FormContextOptions {
     readonly?: boolean | null;
-    hidden?: boolean;
+    hidden?: boolean | null;
+    disabled?: boolean | null;
 }
 export type CreateDataProps = (definition: DataControlDefinition, field: SchemaField, groupContext: ControlGroupContext, control: Control<any>, options: FormContextOptions) => DataRendererProps;
 export interface ControlRenderOptions extends FormContextOptions {
     useDataHook?: (c: ControlDefinition) => CreateDataProps;
+    useEvalExpressionHook?: UseEvalExpressionHook;
     clearHidden?: boolean;
 }
 export declare function useControlRenderer(definition: ControlDefinition, fields: SchemaField[], renderer: FormRenderer, options?: ControlRenderOptions): FC<ControlRenderProps>;
@@ -103,9 +107,9 @@ export declare function getControlData(schemaField: SchemaField | undefined, par
 export declare const defaultDataProps: CreateDataProps;
 export type ChildRenderer = (k: Key, childIndex: number, props: ControlRenderProps) => ReactNode;
 export declare function renderControlLayout(c: ControlDefinition, renderer: FormRenderer, childCount: number, childRenderer: ChildRenderer, dataProps: CreateDataProps, dataOptions: FormContextOptions, groupContext: ControlGroupContext, childControl?: Control<any>, schemaField?: SchemaField): ControlLayoutProps;
-export declare function appendMarkup(k: keyof RenderedLayout, markup: ReactNode): (layout: RenderedLayout) => void;
-export declare function wrapMarkup(k: keyof RenderedLayout, wrap: (ex: ReactNode) => ReactNode): (layout: RenderedLayout) => void;
-export declare function layoutKeyForPlacement(pos: AdornmentPlacement): keyof RenderedLayout;
+export declare function appendMarkup(k: keyof Omit<RenderedLayout, "errorControl">, markup: ReactNode): (layout: RenderedLayout) => void;
+export declare function wrapMarkup(k: keyof Omit<RenderedLayout, "errorControl">, wrap: (ex: ReactNode) => ReactNode): (layout: RenderedLayout) => void;
+export declare function layoutKeyForPlacement(pos: AdornmentPlacement): keyof Omit<RenderedLayout, "errorControl">;
 export declare function appendMarkupAt(pos: AdornmentPlacement, markup: ReactNode): (layout: RenderedLayout) => void;
 export declare function wrapMarkupAt(pos: AdornmentPlacement, wrap: (ex: ReactNode) => ReactNode): (layout: RenderedLayout) => void;
 export declare function renderLayoutParts(props: ControlLayoutProps, renderer: FormRenderer): RenderedLayout;

package/lib/hooks.d.ts

@@ -1,9 +1,14 @@
-import { ControlDefinition, DynamicPropertyType, SchemaField } from "./types";
+import { ControlDefinition, DynamicPropertyType, EntityExpression, SchemaField } from "./types";
 import { Control } from "@react-typed-forms/core";
 import { ControlGroupContext } from "./util";
-export declare function useEvalVisibilityHook(definition: ControlDefinition, schemaField?: SchemaField): EvalExpressionHook<boolean>;
-export declare function useEvalDefaultValueHook(definition: ControlDefinition, schemaField?: SchemaField): EvalExpressionHook;
+export type UseEvalExpressionHook = (expr: EntityExpression | undefined) => EvalExpressionHook | undefined;
+export declare function useEvalVisibilityHook(useEvalExpressionHook: UseEvalExpressionHook, definition: ControlDefinition, schemaField?: SchemaField): EvalExpressionHook<boolean>;
+export declare function useEvalReadonlyHook(useEvalExpressionHook: UseEvalExpressionHook, definition: ControlDefinition): EvalExpressionHook<boolean>;
+export declare function useEvalDisabledHook(useEvalExpressionHook: UseEvalExpressionHook, definition: ControlDefinition): EvalExpressionHook<boolean>;
+export declare function useEvalDefaultValueHook(useEvalExpressionHook: UseEvalExpressionHook, definition: ControlDefinition, schemaField?: SchemaField): EvalExpressionHook;
 export type EvalExpressionHook<A = any> = (groupContext: ControlGroupContext) => Control<A | undefined>;
-export declare function useEvalDynamicHook(definition: ControlDefinition, type: DynamicPropertyType): EvalExpressionHook | undefined;
+export declare const defaultUseEvalExpressionHook: (expr: EntityExpression | undefined) => EvalExpressionHook | undefined;
+export declare function makeEvalExpressionHook(f: (expr: EntityExpression, context: ControlGroupContext) => Control<any>): (expr: EntityExpression | undefined) => EvalExpressionHook | undefined;
+export declare function useEvalDynamicHook(definition: ControlDefinition, type: DynamicPropertyType, useEvalExpressionHook: (expr: EntityExpression | undefined) => EvalExpressionHook | undefined): EvalExpressionHook | undefined;
 export declare function matchesType(context: ControlGroupContext, types?: string[] | null): boolean | undefined;
 export declare function useJsonataExpression(jExpr: string, data: Control<any>): Control<any>;

package/lib/index.js

@@ -34,6 +34,8 @@ exports.DynamicPropertyType = void 0;
 (function (DynamicPropertyType) {
   DynamicPropertyType["Visible"] = "Visible";
   DynamicPropertyType["DefaultValue"] = "DefaultValue";
+  DynamicPropertyType["Readonly"] = "Readonly";
+  DynamicPropertyType["Disabled"] = "Disabled";
 })(exports.DynamicPropertyType || (exports.DynamicPropertyType = {}));
 exports.ExpressionType = void 0;
 (function (ExpressionType) {
@@ -413,6 +415,9 @@ function useUpdatedRef(a) {
   r.current = a;
   return r;
 }
+function isControlReadonly(c) {
+  return isDataControl(c) && !!c.readonly;
+}
 function getTypeField(context) {
   var _context$groupControl;
   var typeSchemaField = context.fields.find(function (x) {
@@ -542,12 +547,24 @@ function dynamicDefaultValue(expr) {
     expr: expr
   };
 }
-function visibility(expr) {
+function dynamicReadonly(expr) {
+  return {
+    type: exports.DynamicPropertyType.Readonly,
+    expr: expr
+  };
+}
+function dynamicVisibility(expr) {
   return {
     type: exports.DynamicPropertyType.Visible,
     expr: expr
   };
 }
+function dynamicDisabled(expr) {
+  return {
+    type: exports.DynamicPropertyType.Disabled,
+    expr: expr
+  };
+}
 function fieldEqExpr(field, value) {
   return {
     type: exports.ExpressionType.FieldValue,
@@ -610,8 +627,16 @@ function useControlDefinitionForSchema(sf, definition) {
   }, [sf, definition]);
 }
 
-function useEvalVisibilityHook(definition, schemaField) {
-  var dynamicVisibility = useEvalDynamicHook(definition, exports.DynamicPropertyType.Visible);
+function useCalculatedControl(calculate) {
+  var c = core.useControl(calculate);
+  core.useControlEffect(calculate, function (v) {
+    return c.value = v;
+  });
+  return c;
+}
+
+function useEvalVisibilityHook(useEvalExpressionHook, definition, schemaField) {
+  var dynamicVisibility = useEvalDynamicHook(definition, exports.DynamicPropertyType.Visible, useEvalExpressionHook);
   var r = useUpdatedRef(schemaField);
   return React.useCallback(function (ctx) {
     var _dynamicVisibility;
@@ -621,8 +646,25 @@ function useEvalVisibilityHook(definition, schemaField) {
     });
   }, [dynamicVisibility, r]);
 }
-function useEvalDefaultValueHook(definition, schemaField) {
-  var dynamicValue = useEvalDynamicHook(definition, exports.DynamicPropertyType.DefaultValue);
+function useEvalReadonlyHook(useEvalExpressionHook, definition) {
+  var dynamicReadonly = useEvalDynamicHook(definition, exports.DynamicPropertyType.Readonly, useEvalExpressionHook);
+  var r = useUpdatedRef(definition);
+  return React.useCallback(function (ctx) {
+    if (dynamicReadonly) return dynamicReadonly(ctx);
+    return useCalculatedControl(function () {
+      return isControlReadonly(r.current);
+    });
+  }, [dynamicReadonly, r]);
+}
+function useEvalDisabledHook(useEvalExpressionHook, definition) {
+  var dynamicDisabled = useEvalDynamicHook(definition, exports.DynamicPropertyType.Disabled, useEvalExpressionHook);
+  return React.useCallback(function (ctx) {
+    if (dynamicDisabled) return dynamicDisabled(ctx);
+    return core.useControl(false);
+  }, [dynamicDisabled]);
+}
+function useEvalDefaultValueHook(useEvalExpressionHook, definition, schemaField) {
+  var dynamicValue = useEvalDynamicHook(definition, exports.DynamicPropertyType.DefaultValue, useEvalExpressionHook);
   var r = useUpdatedRef({
     definition: definition,
     schemaField: schemaField
@@ -649,24 +691,28 @@ function useFieldValueExpression(fvExpr, fields, data) {
     return Array.isArray(fv) ? fv.includes(fvExpr.value) : fv === fvExpr.value;
   });
 }
-function useEvalExpressionHook(expr) {
-  var r = useUpdatedRef(expr);
-  var cb = React.useCallback(function (_ref2) {
-    var groupControl = _ref2.groupControl,
-      fields = _ref2.fields;
-    var expr = r.current;
-    switch (expr.type) {
-      case exports.ExpressionType.Jsonata:
-        return useJsonataExpression(expr.expression, groupControl);
-      case exports.ExpressionType.FieldValue:
-        return useFieldValueExpression(expr, fields, groupControl);
-      default:
-        return core.useControl(undefined);
-    }
-  }, [expr == null ? void 0 : expr.type, r]);
-  return expr ? cb : undefined;
+function defaultEvalHooks(expr, context) {
+  switch (expr.type) {
+    case exports.ExpressionType.Jsonata:
+      return useJsonataExpression(expr.expression, context.groupControl);
+    case exports.ExpressionType.FieldValue:
+      return useFieldValueExpression(expr, context.fields, context.groupControl);
+    default:
+      return core.useControl(undefined);
+  }
+}
+var defaultUseEvalExpressionHook = makeEvalExpressionHook(defaultEvalHooks);
+function makeEvalExpressionHook(f) {
+  return function (expr) {
+    var r = useUpdatedRef(expr);
+    var cb = React.useCallback(function (ctx) {
+      var expr = r.current;
+      return f(expr, ctx);
+    }, [expr == null ? void 0 : expr.type, r]);
+    return expr ? cb : undefined;
+  };
 }
-function useEvalDynamicHook(definition, type) {
+function useEvalDynamicHook(definition, type, useEvalExpressionHook) {
   var _definition$dynamic;
   var expression = (_definition$dynamic = definition.dynamic) == null ? void 0 : _definition$dynamic.find(function (x) {
     return x.type === type;
@@ -764,14 +810,17 @@ exports.LabelType = void 0;
   LabelType[LabelType["Group"] = 1] = "Group";
 })(exports.LabelType || (exports.LabelType = {}));
 function useControlRenderer(definition, fields, renderer, options) {
-  var _options$useDataHook;
+  var _options$useDataHook, _options$useEvalExpre;
   if (options === void 0) {
     options = {};
   }
   var dataProps = (_options$useDataHook = options.useDataHook == null ? void 0 : options.useDataHook(definition)) != null ? _options$useDataHook : defaultDataProps;
+  var useExpr = (_options$useEvalExpre = options.useEvalExpressionHook) != null ? _options$useEvalExpre : defaultUseEvalExpressionHook;
   var schemaField = lookupSchemaField(definition, fields);
-  var useDefaultValue = useEvalDefaultValueHook(definition, schemaField);
-  var useIsVisible = useEvalVisibilityHook(definition, schemaField);
+  var useDefaultValue = useEvalDefaultValueHook(useExpr, definition, schemaField);
+  var useIsVisible = useEvalVisibilityHook(useExpr, definition, schemaField);
+  var useIsReadonly = useEvalReadonlyHook(useExpr, definition);
+  var useIsDisabled = useEvalDisabledHook(useExpr, definition);
   var useValidation = useValidationHook(definition);
   var r = useUpdatedRef({
     options: options,
@@ -793,6 +842,8 @@ function useControlRenderer(definition, fields, renderer, options) {
         groupControl: parentControl,
         fields: _fields
       };
+      var readonlyControl = useIsReadonly(groupContext);
+      var disabledControl = useIsDisabled(groupContext);
       var visibleControl = useIsVisible(groupContext);
       var visible = visibleControl.current.value;
       var visibility = core.useControl(function () {
@@ -833,17 +884,21 @@ function useControlRenderer(definition, fields, renderer, options) {
           }
         }
       }, true);
-      var hidden = core.useComputed(function () {
+      var myOptions = useCalculatedControl(function () {
         var _visibility$fields;
-        return _options.hidden || !((_visibility$fields = visibility.fields) != null && _visibility$fields.showing.value);
+        return {
+          hidden: _options.hidden || !((_visibility$fields = visibility.fields) != null && _visibility$fields.showing.value),
+          readonly: _options.readonly || readonlyControl.value,
+          disabled: _options.disabled || disabledControl.value
+        };
       }).value;
-      useValidation(control, hidden, groupContext);
-      var myOptions = _options.hidden !== hidden ? _extends({}, _options, {
-        hidden: hidden
-      }) : _options;
+      useValidation(control, !!myOptions.hidden, groupContext);
       var childRenderers = (_c$children$map = (_c$children = c.children) == null ? void 0 : _c$children.map(function (cd) {
-        return useControlRenderer(cd, childContext.fields, renderer, myOptions);
+        return useControlRenderer(cd, childContext.fields, renderer, _extends({}, _options, myOptions));
       })) != null ? _c$children$map : [];
+      React.useEffect(function () {
+        if (control && typeof myOptions.disabled === "boolean") control.disabled = myOptions.disabled;
+      }, [control, myOptions.disabled]);
       if (parentControl.isNull) return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
       var adornments = (_definition$adornment = (_definition$adornment2 = definition.adornments) == null ? void 0 : _definition$adornment2.map(function (x) {
         return renderer.renderAdornment({
@@ -864,7 +919,7 @@ function useControlRenderer(definition, fields, renderer, options) {
     } finally {
       stopTracking();
     }
-  }, [r, dataProps, useIsVisible, useDefaultValue, useValidation, renderer]);
+  }, [r, dataProps, useIsVisible, useDefaultValue, useIsReadonly, useIsDisabled, useValidation, renderer]);
   Component.displayName = "RenderControl";
   return Component;
 }
@@ -934,7 +989,7 @@ var defaultDataProps = function defaultDataProps(definition, field, groupContext
     field: field,
     id: "c" + control.uniqueId,
     options: ((_field$options$length = (_field$options = field.options) == null ? void 0 : _field$options.length) != null ? _field$options$length : 0) === 0 ? null : field.options,
-    readonly: options.readonly || !!definition.readonly,
+    readonly: !!options.readonly,
     renderOptions: (_definition$renderOpt = definition.renderOptions) != null ? _definition$renderOpt : {
       type: "Standard"
     },
@@ -1082,7 +1137,8 @@ function renderLayoutParts(props, renderer) {
   var _props$processLayout, _processed$adornments;
   var processed = (_props$processLayout = props.processLayout == null ? void 0 : props.processLayout(props)) != null ? _props$processLayout : props;
   var layout = {
-    children: processed.children
+    children: processed.children,
+    errorControl: processed.errorControl
   };
   ((_processed$adornments = processed.adornments) != null ? _processed$adornments : []).sort(function (a, b) {
     return a.priority - b.priority;
@@ -1450,7 +1506,6 @@ function createDefaultLayoutRenderer(options) {
   }
   return createLayoutRenderer(function (props, renderers) {
     return /*#__PURE__*/React__default["default"].createElement(DefaultLayout, _extends({
-      errorControl: props.errorControl,
       layout: renderLayoutParts(props, renderers)
     }, options));
   });
@@ -1696,12 +1751,12 @@ function DefaultLayout(_ref13) {
   try {
     var className = _ref13.className,
       errorClass = _ref13.errorClass,
-      errorControl = _ref13.errorControl,
       _ref13$layout = _ref13.layout,
       controlEnd = _ref13$layout.controlEnd,
       controlStart = _ref13$layout.controlStart,
       label = _ref13$layout.label,
-      children = _ref13$layout.children;
+      children = _ref13$layout.children,
+      errorControl = _ref13$layout.errorControl;
     var ec = errorControl;
     var errorText = ec && ec.touched ? ec.error : undefined;
     var refCb = React.useCallback(function (e) {
@@ -1790,6 +1845,9 @@ exports.defaultTailwindTheme = defaultTailwindTheme;
 exports.defaultValueForField = defaultValueForField;
 exports.defaultValueForFields = defaultValueForFields;
 exports.dynamicDefaultValue = dynamicDefaultValue;
+exports.dynamicDisabled = dynamicDisabled;
+exports.dynamicReadonly = dynamicReadonly;
+exports.dynamicVisibility = dynamicVisibility;
 exports.elementValueForField = elementValueForField;
 exports.emptyGroupDefinition = emptyGroupDefinition;
 exports.fieldDisplayName = fieldDisplayName;
@@ -1806,6 +1864,7 @@ exports.htmlDisplayControl = htmlDisplayControl;
 exports.intField = intField;
 exports.isActionControlsDefinition = isActionControlsDefinition;
 exports.isCompoundField = isCompoundField;
+exports.isControlReadonly = isControlReadonly;
 exports.isDataControl = isDataControl;
 exports.isDataControlDefinition = isDataControlDefinition;
 exports.isDisplayControlsDefinition = isDisplayControlsDefinition;
@@ -1827,7 +1886,6 @@ exports.useControlDefinitionForSchema = useControlDefinitionForSchema;
 exports.useControlRenderer = useControlRenderer;
 exports.useUpdatedRef = useUpdatedRef;
 exports.useValidationHook = useValidationHook;
-exports.visibility = visibility;
 exports.visitControlData = visitControlData;
 exports.visitControlDataArray = visitControlDataArray;
 exports.visitControlDefinition = visitControlDefinition;