@entryscape/rdforms 10.5.2 → 10.6.2

package/src/view/bootstrap/text.js

@@ -32,18 +32,21 @@ editors.itemtype('text').datatype('xsd:duration').register(durationEditor);
     tb.set('value', '');
   }; */
 
-const addChangeListener = (inp, binding, regex, extLink) => {
+const addChangeListener = (inp, binding, regex, extLink, help) => {
   let to = null;
   const s = () => {
     to = null;
-    const val = inp.val();
+    const val = inp.val().trim();
     let disableExtLink = true;
-    if (!regex || regex.test(val)) {
+    if (val === '' || !regex || regex.test(val)) {
       binding.setGist(val);
       if (extLink && val) {
         extLink.prop('href', binding.getValue());
         disableExtLink = false;
       }
+      help.toggleClass('rdformsHelpActive', false);
+    } else {
+      help.toggleClass('rdformsHelpActive', true);
     }
     if (extLink) {
       extLink.toggleClass('rdformsExtLinkDisabled', disableExtLink);
@@ -63,19 +66,27 @@ const registerPattern = (pattern, datatype) => {
   const regex = new RegExp(pattern);
   editors.itemtype('text').datatype(datatype)
     .register((fieldDiv, binding, context) => {
-      const $input = jquery('<input type="text" class="form-control rdformsFieldInput">');
+      const $input = jquery(`<input type="text" class="form-control rdformsFieldInput"
+         placeholder="${binding.getItem().getPlaceholder() || ''}">`);
       $input.val(binding.getGist())
         .attr('pattern', pattern)
         .appendTo(fieldDiv);
 
+      const help = binding.getItem().getHelp();
+      let $help;
+      if (help) {
+        $help = jquery(`<span class="rdformsHelp">${help}</span>`);
+        $help.appendTo(fieldDiv);
+      }
+
       if (binding.getItem().hasStyle('externalLink')) {
         const $extLink = jquery(`<a class="fas fa-external-link-alt rdformsExtLink ${renderingContext.getExtLinkClass()}" target="_blank">`);
         $extLink.appendTo(context.controlDiv);
         jquery(fieldDiv).addClass('rdformsExtLinkControl');
-        addChangeListener($input, binding, regex, $extLink);
+        addChangeListener($input, binding, regex, $extLink, $help);
         $input.keyup();
       } else {
-        addChangeListener($input, binding, regex);
+        addChangeListener($input, binding, regex, undefined, $help);
       }
 
 
@@ -98,7 +109,7 @@ editors.itemtype('text').register((fieldDiv, binding, context) => {
   let $input;
   if (item.hasStyle('multiline')) {
     const originalNrOfLines = countLines(binding.getGist());
-    $input = jquery(`<textarea class="form-control rdformsFieldInput autoExpand" rows="${originalNrOfLines}">`);
+    $input = jquery(`<textarea class="form-control rdformsFieldInput autoExpand" placeholder="${item.getPlaceholder() || ''}" rows="${originalNrOfLines}">`);
     $input.on('input focus', function () {
       if (this.baseScrollHeight === undefined) {
         const originalHeight = $input.height();
@@ -110,13 +121,20 @@ editors.itemtype('text').register((fieldDiv, binding, context) => {
       this.rows = rows;
     });
   } else if (item.hasStyle('email')) {
-    $input = jquery('<input type="email" class="form-control rdformsFieldInput">');
+    $input = jquery(`<input type="email" class="form-control rdformsFieldInput" placeholder="${item.getPlaceholder() || ''}">`);
   } else {
-    $input = jquery('<input type="text" class="form-control rdformsFieldInput">');
+    $input = jquery(`<input type="text" class="form-control rdformsFieldInput" placeholder="${item.getPlaceholder() || ''}">`);
   }
   $input.val(binding.getGist())
     .appendTo(fieldDiv);
 
+  const help = item.getHelp();
+  let $help;
+  if (help) {
+    $help = jquery(`<span class="rdformsHelp">${help}</span>`);
+    $help.appendTo(fieldDiv);
+  }
+
   const pattern = item.getPattern();
   let regex = null;
   if (pattern != null) {
@@ -127,10 +145,10 @@ editors.itemtype('text').register((fieldDiv, binding, context) => {
     const $extLink = jquery(`<a class="fas fa-external-link-alt rdformsExtLink ${renderingContext.getExtLinkClass()}" target="_blank">`);
     $extLink.appendTo(context.controlDiv);
     jquery(fieldDiv).addClass('rdformsExtLinkControl');
-    addChangeListener($input, binding, regex, $extLink);
+    addChangeListener($input, binding, regex, $extLink, $help);
     $input.keyup();
   } else {
-    addChangeListener($input, binding, regex);
+    addChangeListener($input, binding, regex, undefined, $help);
   }
 
   // If language control should be present

package/src/view/jquery/components.js

@@ -4,12 +4,20 @@ import './text';
 import './choice';
 import './table';
 
+const createElement = (nodeStr, id) => {
+  const el = document.createElement(nodeStr);
+  if (id) {
+    el.id = id;
+  }
+  return el;
+};
+
 renderingContext.domQuery = (selector, node) => node.querySelector(selector);
 
-renderingContext.domCreate = (nodeStr, parent) => parent.appendChild(document.createElement(nodeStr));
+renderingContext.domCreate = (nodeStr, parent, id) => parent.appendChild(createElement(nodeStr, id));
 
-renderingContext.domCreateAfter = (nodeStr, sibling) =>
-  sibling.parentNode.insertBefore(document.createElement(nodeStr), sibling.nextSibling);
+renderingContext.domCreateAfter = (nodeStr, sibling, id) =>
+  sibling.parentNode.insertBefore(createElement(nodeStr, id), sibling.nextSibling);
 
 renderingContext.domSetAttr = (node, attr, value) => {
   if (value === '' || value === null) {
@@ -33,4 +41,4 @@ renderingContext.domClassToggle = (node, classStr, addOrRemove) => {
   });
 };
 
-renderingContext.prePresenterViewRenderer = renderingContext.preEditorViewRenderer;
+renderingContext.prePresenterViewRenderer = renderingContext.preEditorViewRenderer;

package/src/view/jquery/labels.js

@@ -1,8 +1,9 @@
 import jquery from 'jquery';
 import renderingContext from '../renderingContext';
+import Editor from '../Editor';
 
 renderingContext.renderPresenterLabel = (rowNode, binding, item, context, labelRow) => {
-  let label = item.getLabel();
+  let label = context.view instanceof Editor ? item.getEditLabel() || item.getLabel() : item.getLabel();
   if (label != null && label !== '') {
     label = label.charAt(0).toUpperCase() + label.slice(1);
   } else {
@@ -10,6 +11,9 @@ renderingContext.renderPresenterLabel = (rowNode, binding, item, context, labelR
   }
 
   const $labelDiv = jquery('<div class="rdformsLabel" tabindex="0">').text(label).appendTo(rowNode);
+  if (binding) {
+    $labelDiv.attr('id', context.view.createLabelIndex(binding));
+  }
   if (labelRow) {
     $labelDiv.addClass('rdformsLabelRow');
   }

package/src/view/react/buttons.js

@@ -104,7 +104,7 @@ renderingContext.addCreateChildButton = (rowDiv, labelDiv, binding, context) =>
       context.view.addRow(rowDiv, nBinding); // not the first binding...
     }
   };
-  let label = item.getLabel();
+  let label = item.getEditLabel() || item.getLabel();
   if (label != null && label !== '') {
     label = label.charAt(0).toUpperCase() + label.slice(1);
   } else {

package/src/view/react/choice.js

@@ -3,20 +3,26 @@ import React, { useState, useEffect } from 'react';
 import renderingContext from '../renderingContext';
 import system from '../../model/system';
 import utils from '../../utils';
+import { Editor } from './Wrappers';
 
 // -------------- Presenters ----------------
 const presenters = renderingContext.presenterRegistry;
 
-const choicify = func => (fieldDiv, binding) => {
+const choicify = func => (fieldDiv, binding, context) => {
   const choice = binding.getChoice();
+  const isEditor = context.view instanceof Editor;
   let desc;
   if (!choice) {
     return;
   }
-  if (choice.description) {
+
+  if (isEditor && choice.editdescription) {
+    desc = utils.getLocalizedValue(choice.editdescription).value;
+  } else if (choice.description) {
     desc = utils.getLocalizedValue(choice.description).value;
   }
-  func(fieldDiv, binding, choice, desc);
+
+  func(fieldDiv, binding, choice, desc, isEditor);
 };
 
 // Presenter for image.
@@ -34,13 +40,16 @@ presenters.itemtype('choice').style('stars').register(choicify(
     }
   }));
 
+const getLocalizedLabel = (choice, isEditor) =>
+  utils.getLocalizedValue(isEditor ? choice.editlabel || choice.label : choice.label);
+
 // Presenter for choices.
 presenters.itemtype('choice').register(choicify(
-  (fieldDiv, binding, choice, desc) => {
+  (fieldDiv, binding, choice, desc, isEditor) => {
     const item = binding.getItem();
     const title = desc || choice.seeAlso || choice.value;
     if ((item.hasStaticChoices() && !item.hasStyle('externalLink')) || item.hasStyle('noLink')) {
-      const locValue = utils.getLocalizedValue(choice.label);
+      const locValue = getLocalizedLabel(choice, isEditor);
       const langAttr = locValue.lang ? { lang: locValue.lang } : {};
       fieldDiv.appendChild(<div key={binding.getHash()} {...langAttr} title={title} src={choice.value
       }>{locValue.value}</div>);
@@ -55,11 +64,11 @@ presenters.itemtype('choice').register(choicify(
       delete attrs.component;
 
       fieldDiv.appendChild(React.createElement(() => {
-        const [locValue, setLocValue] = useState(utils.getLocalizedValue(choice.label));
+        const [locValue, setLocValue] = useState(getLocalizedLabel(choice, isEditor));
         useEffect(() => {
           if (choice.load != null) {
             choice.load(() => {
-              setLocValue(utils.getLocalizedValue(choice.label));
+              setLocValue(getLocalizedLabel(choice, isEditor));
             });
           }
         }, []);

package/src/view/react/choiceEditors/CheckBoxesEditor.js

@@ -25,7 +25,7 @@ export default function CheckBoxesEditor(props) {
   const [resetCount, setResetCount] = React.useState(0);
   const binding = props.binding;
   const item = binding.getItem();
-  const choices = useLocalizedSortedChoices(binding);
+  const choices = useLocalizedSortedChoices(binding, true);
   const choiceBindingPairs = useMemo(() => {
     const parentBinding = binding.getParent();
     const val2binding = {};

package/src/view/react/choiceEditors/ChoiceLookup.js

@@ -8,7 +8,7 @@ import ShowButton from './ShowButton';
 
 export default (props) => {
   const binding = props.binding;
-  const [choice, setChoice] = loadLocalizedChoice(binding);
+  const [choice, setChoice] = loadLocalizedChoice(binding, true);
   const [error, setError] = useState(binding.getChoice()?.mismatch === true);
 
   useEffect(() => {
@@ -44,6 +44,7 @@ export default (props) => {
     disabled {...(choice && choice.mismatch ? { mismatch: true } : {})}
     title={title}
     value={label}
+    placeholder={binding.getItem().getPlaceholder()}
     error={error}
     variant={renderingContext.materialVariant}
   /><ShowButton

package/src/view/react/choiceEditors/ChoiceLookupAndInlineSearch.js

@@ -5,7 +5,7 @@ import Autocomplete from '@mui/material/Autocomplete';
 import BuildIcon from '@mui/icons-material/Build';
 import IconButton from '@mui/material/IconButton';
 import renderingContext from '../../renderingContext';
-import { loadLocalizedChoice, localizedChoice } from '../hooks';
+import { editLocalizedChoice, loadLocalizedChoice } from '../hooks';
 import ShowButton from './ShowButton';
 
 let globalChoiceQueryThrottle;
@@ -13,7 +13,7 @@ let globalChoiceQueryThrottle;
 export default (props) => {
   const binding = props.binding;
   const [options, setOptions] = useState([]);
-  const [value, setValue] = loadLocalizedChoice(binding, options);
+  const [value, setValue] = loadLocalizedChoice(binding, true);
   const [inputValue, setInputValue] = useState('');
   const [open, setOpen] = useState(false);
   const [error, setError] = useState(binding.getChoice()?.mismatch === true);
@@ -51,7 +51,7 @@ export default (props) => {
         globalChoiceQueryThrottle = undefined;
         props.context.chooser.search(binding.getItem(), inputValue.trimStart()).then((results) => {
           if (active) {
-            setOptions(results.map(localizedChoice));
+            setOptions(results.map(editLocalizedChoice));
           }
         });
       }, 200);
@@ -71,6 +71,7 @@ export default (props) => {
         aria-labelledby={labelledBy}
         {...params}
         {...(value && value.mismatch ? { error: true } : {})}
+        placeholder={binding.getItem().getPlaceholder()}
         onKeyDown={({ key, keyCode }) => {
           const isEnterKey = key === 'Enter' || keyCode === 13;
           if (isEnterKey && !open) {
@@ -84,14 +85,14 @@ export default (props) => {
   const showHandler = () => {
     renderingContext.openChoiceSelector(props.binding, (selectedChoice) => {
       binding.setChoice(selectedChoice);
-      setValue(localizedChoice(selectedChoice));
+      setValue(editLocalizedChoice(selectedChoice));
       setError(selectedChoice.mismatch === true);
     }, props.field);
   };
 
   const upgradeHandler = () => {
     value.original.upgrade(props.binding, (upgradedChoice) => {
-      setValue(localizedChoice(upgradedChoice));
+      setValue(editLocalizedChoice(upgradedChoice));
       setError(upgradedChoice.mismatch === true);
     });
   };

package/src/view/react/choiceEditors/ChoiceSelector.js

@@ -15,7 +15,7 @@ import { useLocalizedSortedChoices, useLocalizedChoice } from '../hooks';
  */
 export default (props) => {
   const binding = props.binding;
-  const choices = useLocalizedSortedChoices(binding);
+  const choices = useLocalizedSortedChoices(binding, true);
   const [value, setValue] = useLocalizedChoice(binding, choices);
   const [error, setError] = useState(binding.getChoice()?.mismatch === true);
 
@@ -37,6 +37,7 @@ export default (props) => {
     params.inputProps['aria-labelledby'] = labelledBy;
     return (
       <TextField
+        placeholder={binding.getItem().getPlaceholder()}
         {...params}
         {...(value && value.mismatch ? { error: true } : {})}
         variant={renderingContext.materialVariant}

package/src/view/react/choiceEditors/RadioButtonsEditor.js

@@ -15,7 +15,7 @@ export default function RadioButtonsEditor(props) {
   const binding = props.binding;
   const item = binding.getItem();
   const name = useName();
-  const choices = useLocalizedSortedChoices(binding);
+  const choices = useLocalizedSortedChoices(binding, true);
   const [error, setError] = useState(binding.getChoice()?.mismatch === true);
   const [value, setValue] = useState(() => {
     const choice = binding.getChoice();
@@ -52,7 +52,7 @@ export default function RadioButtonsEditor(props) {
         <RadioGroup
           {...row}
           key="radio"
-          aria-label={item.getLabel()}
+          aria-label={item.getEditLabel() || item.getLabel()}
           name={name}
           value={value}
           onChange={handleChange}

package/src/view/react/components.js

@@ -83,7 +83,7 @@ let structId = 0;
  * Note that all update of state variables are done by replacing the value (even for arrays and sets) to allow
  * correct diffing of react.
  */
-const newStruct = (Tag, parent) => {
+const newStruct = (Tag, parent, nodeId) => {
   const firstClsSet = new Set();
   let firstChildArr = [];
   let firstTextStr;
@@ -153,7 +153,7 @@ const newStruct = (Tag, parent) => {
       };
       // -- END
       return (
-        <Tag className={clsSet.join(' ')}>
+        <Tag id={nodeId} className={clsSet.join(' ')}>
           {childArr.map((child, index) => getReactComponent(child, index))}
           {text}
         </Tag>
@@ -166,15 +166,15 @@ const newStruct = (Tag, parent) => {
 
 renderingContext.domQuery = (selector, struct) => struct.domQuery(selector);
 
-renderingContext.domCreate = (nodeStr, parentStruct) => {
-  const struct = newStruct(nodeStr, parentStruct);
+renderingContext.domCreate = (nodeStr, parentStruct, nodeId) => {
+  const struct = newStruct(nodeStr, parentStruct, nodeId);
   parentStruct.appendChild(struct);
   return struct;
 };
 
-renderingContext.domCreateAfter = (nodeStr, siblingStruct) => {
+renderingContext.domCreateAfter = (nodeStr, siblingStruct, nodeId) => {
   if (siblingStruct.parent) {
-    const struct = newStruct(nodeStr, siblingStruct.parent);
+    const struct = newStruct(nodeStr, siblingStruct.parent, nodeId);
     siblingStruct.parent.appendAfter(struct, siblingStruct);
     return struct;
   }

package/src/view/react/date.js

@@ -140,14 +140,6 @@ const dateEditor = (fieldDiv, binding, context) => {
               onChange={onDateChange}
               autoOk={true}
               mask={datePickerConfig.mask[selectedDatatype]}
-              PopperProps={{
-                modifiers: [
-                  {
-                    name: 'flip',
-                    enabled: false,
-                  },
-                ],
-              }}
             />
           )}
           {(alternatives.DateTime || alternatives.Time) && (
@@ -162,14 +154,6 @@ const dateEditor = (fieldDiv, binding, context) => {
               onChange={onDateChange}
               ampm={false}
               autoOk={true}
-              PopperProps={{
-                modifiers: [
-                  {
-                    name: 'flip',
-                    enabled: false,
-                  },
-                ],
-              }}
             />
           )}
           {!onlyOneAlternative && (

package/src/view/react/hooks.js

@@ -3,18 +3,24 @@ import utils from '../../utils';
 
 /**
  * Wraps a choice in an object where the current label, and description is localized.
+ *
  * @param {Object} choice an original choice object with label and descriptions being maps with language strings
+ * @param {isEditor} true means we are in edit mode and editLabel or editDescription have preference if they exist.
  * @return {Object}
  */
-export const localizedChoice = choice => ({
+export const localizedChoice = (choice, isEditor) => ({
   value: choice.value,
-  label: utils.getLocalizedValue(choice.label).value,
-  description: choice.description ? utils.getLocalizedValue(choice.description).value : undefined,
+  label: utils.getLocalizedValue(isEditor ? choice.editlabel || choice.label : choice.label).value,
+  description: choice.description || choice.editdescription ?
+    (utils.getLocalizedValue(isEditor ? choice.editdescription || choice.description : choice.description).value)
+    : undefined,
   seeAlso: choice.seeAlso,
   mismatch: choice.mismatch,
   original: choice,
 });
 
+export const editLocalizedChoice = choice => localizedChoice(choice, true);
+
 /**
  * Use choices from a binding with localized labels and sorted.
  * A copy is returned with precalculated labels to allow sorting, use the original property on each choice
@@ -24,9 +30,9 @@ export const localizedChoice = choice => ({
  * @param {Binding} binding
  * @return {Array}
  */
-export const useLocalizedSortedChoices = binding => useMemo(() => {
+export const useLocalizedSortedChoices = (binding, isEditor) => useMemo(() => {
   const item = binding.getItem();
-  const choices = item.getChoices().map(localizedChoice);
+  const choices = item.getChoices().map(isEditor ? editLocalizedChoice : localizedChoice);
   if (!item.hasStyle('preserveOrderOfChoices')) {
     choices.sort((c1, c2) => (c1.label < c2.label ? -1 : 1));
   }
@@ -56,18 +62,20 @@ export const useLocalizedChoice = (binding, choices) => useState(() => {
  * Returns a localized choice, may trigger a load step to get a more fleshed out version of the choice,
  * i.e. with label, description and seeAlso.
  * @param {Binding} binding
+ * @param {boolean} isEditor if true any editlabel or editdescription takes precedence
  */
-export const loadLocalizedChoice = (binding) => {
+export const loadLocalizedChoice = (binding, isEditor) => {
+  const localize = isEditor ? editLocalizedChoice : localizedChoice;
   const [choice, setChoice] = useState(() => {
     const originalChoice = binding.getChoice() || null;
-    return originalChoice ? localizedChoice(originalChoice) : null;
+    return originalChoice ? localize(originalChoice) : null;
   });
   useEffect(() => {
     if (choice && choice.original.load) {
       choice.original.load(() => {
-        setChoice(localizedChoice(choice.original));
+        setChoice(localize(choice.original));
       }, () => {
-        setChoice(localizedChoice(choice.original));
+        setChoice(localize(choice.original));
       });
     }
   }, []);

package/src/view/react/labels.js

@@ -4,7 +4,8 @@ import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 import { styled } from '@mui/material/styles';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import renderingContext from '../renderingContext';
-import { CODES } from '../../model/engine';
+import { Editor } from './Wrappers';
+import CODES from '../../model/CODES';
 
 const StyledTooltip = styled(
   forwardRef(({ className, ...props }, ref) => (
@@ -37,7 +38,9 @@ const ItemTooltip = (props) => {
   if (property) {
     propinfo = <div className="rdformsProperty"><a target="_blank" href={property}>{property}</a></div>;
   }
-  const description = props.item.getDescription() || (property ? '' : props.context.view.messages.info_missing || '');
+  const description = props.context.view instanceof Editor ?
+    props.item.getEditDescription() || props.item.getDescription() : props.item.getDescription()
+    || (property ? '' : props.context.view.messages.info_missing || '');
 
   return (
     <ClickAwayListener onClickAway={handleTooltipClose}>
@@ -64,24 +67,26 @@ const ItemTooltip = (props) => {
 };
 
 renderingContext.renderPresenterLabel = (rowNode, binding, item, context) => {
-  let label = item.getLabel();
+  let label = context.view instanceof Editor ?
+    item.getEditLabel() || item.getLabel() : item.getLabel();
   if (label != null && label !== '') {
     label = label.charAt(0).toUpperCase() + label.slice(1);
   } else {
     label = '';
   }
+  const labelId = binding ? context.view.createLabelIndex(binding) : undefined;
   label = item.hasStyle('heading') ?
-    <h2 tabIndex="0" className="rdformsLabelRow"><span className="rdformsLabel">{label}</span></h2> :
-    <span tabIndex="0" className="rdformsLabelRow"><span className="rdformsLabel">{label}</span></span>;
-  rowNode.appendChild(<ItemTooltip key={`${binding ? binding.getHash() : item._internalId}_label` } context={context} item={item
-  }>{label}</ItemTooltip>);
+    <h2 tabIndex="0" id={labelId} className="rdformsLabelRow"><span className="rdformsLabel">{label}</span></h2> :
+    <span tabIndex="0" id={labelId} className="rdformsLabelRow"><span className="rdformsLabel">{label}</span></span>;
+  rowNode.appendChild(<ItemTooltip key={`${binding ? binding.getHash() : item._internalId}_label` }
+                                   context={context} item={item}>{label}</ItemTooltip>);
 };
 
 renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
   if (item.hasStyle('nonEditable') || item.hasStyle('heading')) {
     renderingContext.renderPresenterLabel(rowNode, binding, item, context, true);
   } else {
-    let label = item.getLabel();
+    let label = item.getEditLabel() || item.getLabel();
     if (label != null && label !== '') {
       label = label.charAt(0).toUpperCase() + label.slice(1);
     } else {

package/src/view/react/textEditors.js

@@ -93,7 +93,9 @@ editors.itemtype('text').register((fieldDiv, binding, context) => {
     return <><TextField
       className={extLink || langlit ? 'rdformsTwoThirds' : ''}
       multiline={multiline}
+      placeholder={item.getPlaceholder()}
       error={!valid}
+      helperText={!valid ? item.getHelp() || '' : ''}
       variant={renderingContext.materialVariant} inputProps={iprops}
     />{extLink && (value != null || value === '') &&
     (<IconButton aria-label={bundle.openLinkExternally} disabled={!valid} target='_blank' href={value}
@@ -107,6 +109,7 @@ editors.itemtype('text').register((fieldDiv, binding, context) => {
 
 const bindToPattern = pattern => (fieldDiv, binding, context) => {
   const regex = pattern ? new RegExp(pattern) : null;
+  const item = binding.getItem();
 
   const TextComp = () => {
     const [gist, setGist] = useState(binding.getGist());
@@ -131,6 +134,8 @@ const bindToPattern = pattern => (fieldDiv, binding, context) => {
     };
     return <TextField
       error={!valid}
+      placeholder={item.getPlaceholder()}
+      helperText={!valid ? item.getHelp() || '' : ''}
       variant={renderingContext.materialVariant} inputProps={iprops}
     />;
   };

package/src/view/renderingContext.js

@@ -58,9 +58,9 @@ const defaultLanguages = [
 const renderingContext = {
   domQuery(/* selector, node */) {
   },
-  domCreate(/* domStr, node */) {
+  domCreate(/* domStr, node, id */) {
   },
-  domCreateAfter(/* domStr, node */) {
+  domCreateAfter(/* domStr, node, id */) {
   },
   domClassToggle(/* node, classStr, addOrRemove */) {
   },

package/src/view/resources/rdforms.css

@@ -314,7 +314,7 @@ a.rdformsUrl:hover {
  	padding-right: 55px;
 	position: relative;
  }
- 
+
  .rdformsEditor .rdformsField .rdformsChoiceLabel {
  	margin-left: 0.2em;
  	margin-right: 1em;
@@ -475,7 +475,6 @@ a.rdformsUrl:hover {
 
 .compact .rdformsRow.rdformsTopLevel {
 	display: table;
-	width: 98%;
 }
 .compact .rdformsRow.rdformsTopLevel>div {
 	display: table-cell;