@react-typed-forms/schemas 8.0.0 → 8.1.0

package/lib/controlRender.d.ts

@@ -31,7 +31,7 @@ export interface ArrayRendererProps {
     elementCount: number;
     renderElement: (elemIndex: number) => ReactNode;
     elementKey: (elemIndex: number) => Key;
-    arrayControl?: Control<any[] | undefined | null>;
+    arrayControl: Control<any[] | undefined | null>;
     className?: string;
     style?: React.CSSProperties;
 }
@@ -78,6 +78,7 @@ export interface LabelRendererProps {
     label: ReactNode;
     required?: boolean | null;
     forId?: string;
+    className?: string;
 }
 export interface DisplayRendererProps {
     data: DisplayData;
@@ -169,12 +170,13 @@ export interface RenderControlProps {
     formOptions: FormContextOptions;
     dataContext: ControlDataContext;
     control?: Control<any>;
+    labelText?: Control<string | null | undefined>;
     schemaField?: SchemaField;
     displayControl?: Control<string | undefined>;
     style?: React.CSSProperties;
     allowedOptions?: Control<any[] | undefined>;
 }
-export declare function renderControlLayout({ definition: c, renderer, renderChild: childRenderer, control: childControl, schemaField, dataContext, formOptions: dataOptions, createDataProps: dataProps, displayControl, style, allowedOptions, }: RenderControlProps): ControlLayoutProps;
+export declare function renderControlLayout({ definition: c, renderer, renderChild: childRenderer, control: childControl, schemaField, dataContext, formOptions: dataOptions, createDataProps: dataProps, displayControl, style, labelText, allowedOptions, }: RenderControlProps): ControlLayoutProps;
 export declare function appendMarkup(k: keyof Omit<RenderedLayout, "errorControl" | "style" | "className">, markup: ReactNode): (layout: RenderedLayout) => void;
 export declare function wrapMarkup(k: keyof Omit<RenderedLayout, "errorControl" | "style" | "className">, wrap: (ex: ReactNode) => ReactNode): (layout: RenderedLayout) => void;
 export declare function layoutKeyForPlacement(pos: AdornmentPlacement): keyof Omit<RenderedLayout, "errorControl" | "style" | "className">;

package/lib/hooks.d.ts

@@ -19,3 +19,4 @@ export declare function useEvalDynamicHook(definition: ControlDefinition, type:
 export declare function matchesType(context: ControlDataContext, types?: string[] | null): boolean | undefined;
 export declare function hideDisplayOnly(context: ControlDataContext, field: SchemaField, definition: ControlDefinition, schemaInterface: SchemaInterface): boolean | undefined;
 export declare function useJsonataExpression(jExpr: string, dataContext: DataContext, bindings?: () => Record<string, any>): Control<any>;
+export declare function useEvalLabelText(useExpr: UseEvalExpressionHook, definition: ControlDefinition): EvalExpressionHook<string | null>;

package/lib/index.js

@@ -40,6 +40,7 @@ exports.DynamicPropertyType = void 0;
   DynamicPropertyType["Style"] = "Style";
   DynamicPropertyType["LayoutStyle"] = "LayoutStyle";
   DynamicPropertyType["AllowedOptions"] = "AllowedOptions";
+  DynamicPropertyType["Label"] = "Label";
 })(exports.DynamicPropertyType || (exports.DynamicPropertyType = {}));
 exports.ExpressionType = void 0;
 (function (ExpressionType) {
@@ -560,17 +561,18 @@ function cleanDataForSchema(v, fields) {
 function getAllReferencedClasses(c) {
   var _c$children;
   var childClasses = (_c$children = c.children) == null ? void 0 : _c$children.flatMap(getAllReferencedClasses);
-  var tc = clsx__default["default"](c.styleClass, c.layoutClass);
+  var tc = clsx__default["default"](getOverrideClass(c.styleClass), getOverrideClass(c.layoutClass), getOverrideClass(c.labelClass));
   if (childClasses && !tc) return childClasses;
   if (!tc) return [];
   if (childClasses) return [tc].concat(childClasses);
   return [tc];
 }
-function jsonPathString(jsonPath) {
+function jsonPathString(jsonPath, customIndex) {
   var out = "";
   jsonPath.forEach(function (v, i) {
     if (typeof v === "number") {
-      out += "[" + v + "]";
+      var _customIndex;
+      out += (_customIndex = customIndex == null ? void 0 : customIndex(v)) != null ? _customIndex : "[" + v + "]";
     } else {
       if (i > 0) out += ".";
       out += v;
@@ -588,6 +590,17 @@ function findChildDefinition(parent, childPath) {
   }
   return parent.children[childPath];
 }
+function getOverrideClass(className) {
+  if (className && className.startsWith("@ ")) {
+    return className.substring(2);
+  }
+  return className;
+}
+function rendererClass(controlClass, globalClass) {
+  var oc = getOverrideClass(controlClass);
+  if (oc === controlClass) return clsx__default["default"](controlClass, globalClass);
+  return oc ? oc : undefined;
+}
 
 function dataControl(field, title, options) {
   return _extends({
@@ -913,7 +926,9 @@ function hideDisplayOnly(context, field, definition, schemaInterface) {
   return displayOptions && !displayOptions.emptyText && schemaInterface.isEmptyValue(field, (_lookupChildControl = lookupChildControl(context, field.field)) == null ? void 0 : _lookupChildControl.value);
 }
 function useJsonataExpression(jExpr, dataContext, bindings) {
-  var pathString = jsonPathString(dataContext.path);
+  var pathString = jsonPathString(dataContext.path, function (x) {
+    return "#$i[" + x + "]";
+  });
   var fullExpr = pathString ? pathString + ".(" + jExpr + ")" : jExpr;
   var compiledExpr = React.useMemo(function () {
     try {
@@ -967,6 +982,15 @@ function useJsonataExpression(jExpr, dataContext, bindings) {
   }, [compiledExpr]);
   return control;
 }
+function useEvalLabelText(useExpr, definition) {
+  var dynamicValue = useEvalDynamicHook(definition, exports.DynamicPropertyType.Label, useExpr);
+  return React.useCallback(function (ctx) {
+    if (dynamicValue) {
+      return dynamicValue(ctx);
+    }
+    return core.useControl(null);
+  }, [dynamicValue]);
+}
 
 function useValidationHook(definition) {
   var _definition$validator, _definition$validator2;
@@ -1073,6 +1097,7 @@ function useControlRenderer(definition, fields, renderer, options) {
   var useIsReadonly = useEvalReadonlyHook(useExpr, definition);
   var useIsDisabled = useEvalDisabledHook(useExpr, definition);
   var useAllowedOptions = useEvalAllowedOptionsHook(useExpr, definition);
+  var useLabelText = useEvalLabelText(useExpr, definition);
   var useCustomStyle = useEvalStyleHook(useExpr, exports.DynamicPropertyType.Style, definition);
   var useLayoutStyle = useEvalStyleHook(useExpr, exports.DynamicPropertyType.LayoutStyle, definition);
   var useDynamicDisplay = useEvalDisplayHook(useExpr, definition);
@@ -1107,6 +1132,7 @@ function useControlRenderer(definition, fields, renderer, options) {
       var displayControl = useDynamicDisplay(parentDataContext);
       var customStyle = useCustomStyle(parentDataContext).value;
       var layoutStyle = useLayoutStyle(parentDataContext).value;
+      var labelText = useLabelText(parentDataContext);
       var visible = visibleControl.current.value;
       var visibility = core.useControl(function () {
         return visible != null ? {
@@ -1188,6 +1214,7 @@ function useControlRenderer(definition, fields, renderer, options) {
         formOptions: myOptions,
         dataContext: controlDataContext,
         control: displayControl != null ? displayControl : control,
+        labelText: labelText,
         schemaField: _schemaField,
         displayControl: displayControl,
         style: customStyle,
@@ -1204,7 +1231,7 @@ function useControlRenderer(definition, fields, renderer, options) {
     } finally {
       stopTracking();
     }
-  }, [r, dataProps, useIsVisible, useDefaultValue, useIsReadonly, useIsDisabled, useCustomStyle, useLayoutStyle, useAllowedOptions, useDynamicDisplay, useValidation, renderer, schemaInterface]);
+  }, [r, dataProps, useIsVisible, useDefaultValue, useIsReadonly, useIsDisabled, useCustomStyle, useLayoutStyle, useAllowedOptions, useLabelText, useDynamicDisplay, useValidation, renderer, schemaInterface]);
   Component.displayName = "RenderControl";
   return Component;
 }
@@ -1335,12 +1362,13 @@ function renderControlLayout(_ref5) {
     dataProps = _ref5.createDataProps,
     displayControl = _ref5.displayControl,
     style = _ref5.style,
+    labelText = _ref5.labelText,
     allowedOptions = _ref5.allowedOptions;
   if (isDataControlDefinition(c)) {
     return renderData(c);
   }
   if (isGroupControlsDefinition(c)) {
-    var _c$groupOptions2;
+    var _labelText$value, _c$groupOptions2;
     if (c.compoundField) {
       var _c$groupOptions;
       return renderData(dataControl(c.compoundField, c.title, {
@@ -1351,17 +1379,18 @@ function renderControlLayout(_ref5) {
     return {
       processLayout: renderer.renderGroup(groupProps(c, childRenderer, dataContext, c.styleClass, style)),
       label: {
-        label: c.title,
+        label: (_labelText$value = labelText == null ? void 0 : labelText.value) != null ? _labelText$value : c.title,
+        className: cc(c.labelClass),
         type: exports.LabelType.Group,
         hide: (_c$groupOptions2 = c.groupOptions) == null ? void 0 : _c$groupOptions2.hideTitle
       }
     };
   }
   if (isActionControlsDefinition(c)) {
-    var _c$title;
+    var _ref6, _labelText$value2;
     return {
       children: renderer.renderAction({
-        actionText: (_c$title = c.title) != null ? _c$title : c.actionId,
+        actionText: (_ref6 = (_labelText$value2 = labelText == null ? void 0 : labelText.value) != null ? _labelText$value2 : c.title) != null ? _ref6 : c.actionId,
         actionId: c.actionId,
         onClick: function onClick() {},
         className: cc(c.styleClass),
@@ -1382,6 +1411,7 @@ function renderControlLayout(_ref5) {
   }
   return {};
   function renderData(c, elemIndex) {
+    var _labelText$value3;
     if (!schemaField) return {
       children: "No schema field for: " + c.field
     };
@@ -1405,15 +1435,16 @@ function renderControlLayout(_ref5) {
         return renderLayoutParts(renderData(c, ei), renderer).children;
       } : undefined
     });
-    var labelText = !c.hideTitle ? controlTitle(c.title, schemaField) : undefined;
+    var label = !c.hideTitle ? controlTitle((_labelText$value3 = labelText == null ? void 0 : labelText.value) != null ? _labelText$value3 : c.title, schemaField) : undefined;
     return {
       processLayout: renderer.renderData(props),
       label: {
         type: exports.LabelType.Control,
-        label: labelText,
+        label: label,
         forId: props.id,
         required: c.required,
-        hide: c.hideTitle
+        hide: c.hideTitle,
+        className: cc(c.labelClass)
       },
       errorControl: childControl
     };
@@ -1449,13 +1480,13 @@ function wrapMarkupAt(pos, wrap) {
 }
 function renderLayoutParts(props, renderer) {
   var _props$processLayout;
-  var _ref6 = (_props$processLayout = props.processLayout == null ? void 0 : props.processLayout(props)) != null ? _props$processLayout : props,
-    className = _ref6.className,
-    children = _ref6.children,
-    style = _ref6.style,
-    errorControl = _ref6.errorControl,
-    label = _ref6.label,
-    adornments = _ref6.adornments;
+  var _ref7 = (_props$processLayout = props.processLayout == null ? void 0 : props.processLayout(props)) != null ? _props$processLayout : props,
+    className = _ref7.className,
+    children = _ref7.children,
+    style = _ref7.style,
+    errorControl = _ref7.errorControl,
+    label = _ref7.label,
+    adornments = _ref7.adornments;
   var layout = {
     children: children,
     errorControl: errorControl,
@@ -1605,12 +1636,13 @@ function createDefaultLabelRenderer(options) {
   var _options = options,
     className = _options.className,
     groupLabelClass = _options.groupLabelClass,
+    controlLabelClass = _options.controlLabelClass,
     requiredElement = _options.requiredElement;
   return {
     render: function render(props, labelStart, labelEnd) {
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, labelStart, /*#__PURE__*/React__default["default"].createElement("label", {
         htmlFor: props.forId,
-        className: clsx__default["default"](className, props.type === exports.LabelType.Group && groupLabelClass)
+        className: rendererClass(props.className, clsx__default["default"](className, props.type === exports.LabelType.Group && groupLabelClass, props.type === exports.LabelType.Control && controlLabelClass))
       }, props.label, props.required && requiredElement), labelEnd);
     },
     type: "label"
@@ -1701,7 +1733,7 @@ function createDefaultGroupRenderer(options) {
     return function (cp) {
       return _extends({}, cp, {
         children: /*#__PURE__*/React__default["default"].createElement("div", {
-          className: clsx__default["default"](props.className, className, gcn),
+          className: rendererClass(props.className, clsx__default["default"](className, gcn)),
           style: style
         }, children == null ? void 0 : children.map(function (c, i) {
           return renderChild(i, i);
@@ -1738,17 +1770,17 @@ function DefaultDisplay(_ref8) {
       case exports.DisplayDataType.Icon:
         return /*#__PURE__*/React__default["default"].createElement("i", {
           style: style,
-          className: clsx__default["default"](className, display ? display.value : data.iconClass)
+          className: clsx__default["default"](getOverrideClass(className), display ? display.value : data.iconClass)
         });
       case exports.DisplayDataType.Text:
         return /*#__PURE__*/React__default["default"].createElement("div", {
           style: style,
-          className: clsx__default["default"](className, options.textClassName)
+          className: rendererClass(className, options.textClassName)
         }, display ? display.value : data.text);
       case exports.DisplayDataType.Html:
         return /*#__PURE__*/React__default["default"].createElement("div", {
           style: style,
-          className: clsx__default["default"](className, options.htmlClassName),
+          className: rendererClass(className, options.htmlClassName),
           dangerouslySetInnerHTML: {
             __html: display ? (_display$value = display.value) != null ? _display$value : "" : data.html
           }
@@ -1836,7 +1868,7 @@ function createDefaultDataRenderer(options) {
       className: props.className,
       control: props.control
     }) : /*#__PURE__*/React__default["default"].createElement(ControlInput, {
-      className: clsx__default["default"](props.className, inputClass),
+      className: rendererClass(props.className, inputClass),
       style: props.style,
       id: props.id,
       readOnly: props.readonly,
@@ -1859,7 +1891,7 @@ function DefaultDisplayOnly(_ref9) {
     var text = (_ref10 = schemaInterface.isEmptyValue(field, v) ? emptyText : schemaInterface.textValue(field, v)) != null ? _ref10 : "";
     return /*#__PURE__*/React__default["default"].createElement("div", {
       style: style,
-      className: className
+      className: rendererClass(className)
     }, text);
   } finally {
     _effect2();
@@ -1929,7 +1961,7 @@ function createDefaultLayoutRenderer(options) {
   }
   return createLayoutRenderer(function (props, renderers) {
     var layout = renderLayoutParts(_extends({}, props, {
-      className: clsx__default["default"](props.className, options.className)
+      className: rendererClass(props.className, options.className)
     }), renderers);
     return {
       children: /*#__PURE__*/React__default["default"].createElement(DefaultLayout, _extends({
@@ -2042,7 +2074,7 @@ function createSelectRenderer(options) {
   }
   return createDataRenderer(function (props, asArray) {
     return /*#__PURE__*/React__default["default"].createElement(SelectDataRenderer, {
-      className: clsx__default["default"](props.className, options.className),
+      className: rendererClass(props.className, options.className),
       state: props.control,
       id: props.id,
       options: props.options,
@@ -2190,7 +2222,6 @@ function DefaultLayout(_ref15) {
   var _effect6 = core.useComponentTracking();
   try {
     var errorClass = _ref15.errorClass,
-      className = _ref15.className,
       _ref15$layout = _ref15.layout,
       controlEnd = _ref15$layout.controlEnd,
       controlStart = _ref15$layout.controlStart,
@@ -2308,6 +2339,7 @@ exports.findScalarField = findScalarField;
 exports.getAllReferencedClasses = getAllReferencedClasses;
 exports.getControlData = getControlData;
 exports.getDisplayOnlyOptions = getDisplayOnlyOptions;
+exports.getOverrideClass = getOverrideClass;
 exports.getTypeField = getTypeField;
 exports.groupedControl = groupedControl;
 exports.hasOptions = hasOptions;
@@ -2339,6 +2371,7 @@ exports.matchesType = matchesType;
 exports.mergeField = mergeField;
 exports.renderControlLayout = renderControlLayout;
 exports.renderLayoutParts = renderLayoutParts;
+exports.rendererClass = rendererClass;
 exports.stringField = stringField;
 exports.stringOptionsField = stringOptionsField;
 exports.textDisplayControl = textDisplayControl;
@@ -2349,6 +2382,7 @@ exports.useEvalDefaultValueHook = useEvalDefaultValueHook;
 exports.useEvalDisabledHook = useEvalDisabledHook;
 exports.useEvalDisplayHook = useEvalDisplayHook;
 exports.useEvalDynamicHook = useEvalDynamicHook;
+exports.useEvalLabelText = useEvalLabelText;
 exports.useEvalReadonlyHook = useEvalReadonlyHook;
 exports.useEvalStyleHook = useEvalStyleHook;
 exports.useEvalVisibilityHook = useEvalVisibilityHook;