@entryscape/rdforms 10.6.2 → 10.7.2

package/src/view/bootstrap/style.css

@@ -108,13 +108,14 @@
     font-size: small;
 }
 
-.rdformsFieldControl>.fa.action {
+.rdformsFieldControl>.fas.action {
     float: right;
     position: initial;
     margin-top: 8px;
 }
 
-.fa.action.disabled {
+.fas.action:disabled,
+.fas.action.disabled {
     cursor: default;
 }
 
@@ -185,7 +186,6 @@
 /* Autoexpand style */
 .rdforms .rdformsFields textarea.form-control {
     display: block;
-    box-sizing: padding-box;
     overflow-x: hidden;
     overflow-y: auto;
 }
@@ -248,4 +248,10 @@
 
 .rdformsValidator .rdformsValidationMessageWrapper {
     margin-left: -22px;
+}
+
+.rdformsActionButton {
+    border: none;
+    background: transparent;
+    padding: 0;
 }

package/src/view/bootstrap/text.js

@@ -2,6 +2,8 @@ import moment from 'moment';
 import durationEditor from './durationEditor';
 import renderingContext from '../renderingContext';
 import utils from '../../utils';
+import { getNamedGraphId } from '../viewUtils';
+
 
 /**
  * Try to guess the number of rows needed for a textarea element by looking at the value of the element
@@ -107,9 +109,10 @@ registerPattern('^(\\d+(\\.\\d+)?)$', 'xsd:decimal');
 editors.itemtype('text').register((fieldDiv, binding, context) => {
   const item = binding.getItem();
   let $input;
+  const disabledAttr = getNamedGraphId(binding, context) ? 'disabled' : '';
   if (item.hasStyle('multiline')) {
     const originalNrOfLines = countLines(binding.getGist());
-    $input = jquery(`<textarea class="form-control rdformsFieldInput autoExpand" placeholder="${item.getPlaceholder() || ''}" rows="${originalNrOfLines}">`);
+    $input = jquery(`<textarea ${disabledAttr} class="form-control rdformsFieldInput autoExpand" placeholder="${item.getPlaceholder() || ''}" rows="${originalNrOfLines}">`);
     $input.on('input focus', function () {
       if (this.baseScrollHeight === undefined) {
         const originalHeight = $input.height();
@@ -121,9 +124,9 @@ editors.itemtype('text').register((fieldDiv, binding, context) => {
       this.rows = rows;
     });
   } else if (item.hasStyle('email')) {
-    $input = jquery(`<input type="email" class="form-control rdformsFieldInput" placeholder="${item.getPlaceholder() || ''}">`);
+    $input = jquery(`<input ${disabledAttr} type="email" class="form-control rdformsFieldInput" placeholder="${item.getPlaceholder() || ''}">`);
   } else {
-    $input = jquery(`<input type="text" class="form-control rdformsFieldInput" placeholder="${item.getPlaceholder() || ''}">`);
+    $input = jquery(`<input ${disabledAttr} type="text" class="form-control rdformsFieldInput" placeholder="${item.getPlaceholder() || ''}">`);
   }
   $input.val(binding.getGist())
     .appendTo(fieldDiv);
@@ -156,7 +159,7 @@ editors.itemtype('text').register((fieldDiv, binding, context) => {
   if (nodeType === 'LANGUAGE_LITERAL' || nodeType === 'PLAIN_LITERAL') {
     jquery(fieldDiv).addClass('rdformsLangcontrolledfield');
     jquery(context.controlDiv).addClass('rdformsLangFieldControl');
-    const $lselect = jquery('<select class="form-control rdformsLanguage">')
+    const $lselect = jquery(`<select ${disabledAttr} class="form-control rdformsLanguage">`)
       .appendTo(context.controlDiv);
     let primaryLangs = renderingContext.getPrimaryLanguageList();
     let langList = renderingContext.getNonPrimaryLanguageList();

package/src/view/jquery/labels.js

@@ -10,7 +10,9 @@ renderingContext.renderPresenterLabel = (rowNode, binding, item, context, labelR
     label = '';
   }
 
-  const $labelDiv = jquery('<div class="rdformsLabel" tabindex="0">').text(label).appendTo(rowNode);
+  const $labelDiv = item.hasStyle('heading') ?
+    jquery('<h2 class="rdformsLabel" tabindex="0">').text(label).appendTo(rowNode) :
+    jquery('<div class="rdformsLabel" tabindex="0">').text(label).appendTo(rowNode);
   if (binding) {
     $labelDiv.attr('id', context.view.createLabelIndex(binding));
   }
@@ -20,6 +22,21 @@ renderingContext.renderPresenterLabel = (rowNode, binding, item, context, labelR
   if (context) {
     context.labelNode = $labelDiv[0];
   }
+  const view = context.view;
+  if (item.hasStyle('showDescriptionInPresent') || view.showDescription) {
+    // An item is compact if it is exclicitly set as compact or
+    // the view is set as compact and the item is not explicitly set as not compact AND
+    // we are at the top
+    const compactField = item.hasStyle('compact') ||
+      (view.compact && !item.hasStyle('nonCompact') && (
+        (view.topLevel && item.getType() !== 'group') ||
+        (view.parentView && view.parentView.topLevel && view.binding.getItem().hasStyle('heading'))));
+    const desc = item.getDescription();
+    if (!compactField && desc) {
+      jquery('<div class="rdformsDescription" tabindex="0">').text(desc).appendTo(rowNode);
+    }
+  }
+
   renderingContext.attachItemInfo(item, $labelDiv[0], context);
 };
 

package/src/view/jquery/text.js

@@ -1,6 +1,6 @@
 import moment from 'moment';
 import { escape } from 'lodash-es';
-import { getDatePresentation, fromDuration } from './util';
+import { getDatePresentation, fromDuration } from '../viewUtils';
 import renderingContext from '../renderingContext';
 import utils from '../../utils';
 import system from '../../model/system';
@@ -122,7 +122,7 @@ presenters.itemtype('text').datatype('xsd:duration').register((fieldDiv, binding
   const node = jquery('<div>').appendTo(fieldDiv)[0];
   ['years', 'months', 'days', 'hours', 'minutes'].forEach((key) => {
     if (data.hasOwnProperty(key)) {
-      jquery(`<span class="durationlabel">${bundle[`duration_${key}`]}:</span><span class="durationValue">${data[key]}</span>`)
+      jquery(`<span class="durationLabel">${bundle[`duration_${key}`]}:</span><span class="durationValue">${data[key]}</span>`)
         .appendTo(node);
     }
   });
@@ -143,4 +143,4 @@ presenters.itemtype('text').datatype('xsd:time').register(datePresenter);
 presenters.itemtype('text').datatype('xsd:gYear').register(datePresenter);
 presenters.itemtype('text').datatype('xsd:gYearMonth').register(datePresenter);
 presenters.itemtype('text').datatype('xsd:gMonthDay').register(datePresenter);
-presenters.itemtype('text').datatype('dcterms:W3CDTF').register(datePresenter);
+presenters.itemtype('text').datatype('dcterms:W3CDTF').register(datePresenter);

package/src/view/react/buttons.js

@@ -7,6 +7,7 @@ import AddIcon from '@mui/icons-material/Add';
 import IconButton from '@mui/material/IconButton';
 import renderingContext from '../renderingContext';
 import * as engine from '../../model/engine';
+import { useNamedGraphId } from './hooks';
 
 renderingContext.addExpandButton = (rowDiv, labelDiv, item, context) => {
   console.log('Expand button not yet supported');
@@ -78,10 +79,12 @@ renderingContext.addRemoveButton = (rowDiv, binding, context) => () => {
     }
   });
 
+  const ngId = useNamedGraphId(binding, context);
   const title = clear ? context.view.messages.edit_clear : context.view.messages.edit_remove;
   return <IconButton
     size="small"
     aria-label={title}
+    disabled={!!ngId}
     title={title}
     onClick={onClick}
   >{clear ? (<CancelIcon fontSize="small"/>) : (<RemoveCircleIcon fontSize="small"/>)}</IconButton>;

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

@@ -3,9 +3,11 @@ import React, { useState, useEffect, useMemo } from 'react';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
 import { FormGroup } from '@mui/material';
-import { useLocalizedSortedChoices, useName } from '../hooks';
+import { useLocalizedSortedChoices, useNamedGraphId } from '../hooks';
+import { getNamedGraphId } from '../../viewUtils';
 import * as engine from '../../../model/engine';
 
+
 const CheckOption = (props) => {
   const { choice, binding, onChoiceChange } = props;
   const [checked, setChecked] = React.useState(choice.value === binding.getValue());
@@ -16,6 +18,7 @@ const CheckOption = (props) => {
     onChoiceChange();
   };
   return <FormControlLabel
+    disabled={props.disabled}
     label={choice.label} control={<Checkbox checked={checked} onChange={handleChange}/>}
     {...(choice.mismatch ? { className: 'mismatch' } : {})}
     title={choice.description || choice.seeAlso || choice.value}/>;
@@ -35,9 +38,9 @@ export default function CheckBoxesEditor(props) {
       const existingbinding = val2binding[c.value];
       if (existingbinding) {
         delete val2binding[c.value];
-        return [c, existingbinding];
+        return [c, existingbinding, getNamedGraphId(existingbinding, props.context)];
       }
-      return [c, engine.create(parentBinding, item)];
+      return [c, engine.create(parentBinding, item), undefined];
     });
     // Add checks for values that are non-conforming (should have mismatch on their choices).
     Object.values(val2binding).forEach((b) => {
@@ -70,12 +73,14 @@ export default function CheckBoxesEditor(props) {
     setResetCount(resetCount + 1);
   };
 
+  const ngId = useNamedGraphId(binding, props.context);
   return (
     <><FormGroup {...row}>
       {choiceBindingPairs.map(pair => (
         <CheckOption key={`${resetCount}-${pair[1].getHash()}`}
                      choice={pair[0]}
                      binding={pair[1]}
+                     disabled={!!pair[2] || !!ngId}
                      onChoiceChange={onChoiceChange} />
       ))}
     </FormGroup>{error && (

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

@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from 'react';
 import TextField from '@mui/material/TextField';
 import renderingContext from '../../renderingContext';
-import { loadLocalizedChoice } from '../hooks';
+import { loadLocalizedChoice, useNamedGraphId } from '../hooks';
 import utils from '../../../utils';
 import ShowButton from './ShowButton';
 
@@ -38,10 +38,11 @@ export default (props) => {
     }, props.field);
   };
 
+  const ngId = useNamedGraphId(binding, props.context);
   return <><TextField
     inputProps={{ 'aria-labelledby': labelledBy }}
     className="rdformsSearch"
-    disabled {...(choice && choice.mismatch ? { mismatch: true } : {})}
+    disabled {...(!!ngId || (choice && choice.mismatch) ? { mismatch: true } : {})}
     title={title}
     value={label}
     placeholder={binding.getItem().getPlaceholder()}
@@ -49,6 +50,7 @@ export default (props) => {
     variant={renderingContext.materialVariant}
   /><ShowButton
     {... props}
+    disabled={!!ngId}
     onClick={choiceSelectorHandler}/>{ error && (<div key="warning" className="rdformsWarning">{
     props.context.view.messages.wrongValueField}</div>)}</>;
 };

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

@@ -1,11 +1,11 @@
-/* eslint-disable no-unused-vars */
+/* eslint-disable no-unused-vars,quotes */
 import React, { useState, useEffect } from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
 import BuildIcon from '@mui/icons-material/Build';
 import IconButton from '@mui/material/IconButton';
 import renderingContext from '../../renderingContext';
-import { editLocalizedChoice, loadLocalizedChoice } from '../hooks';
+import { editLocalizedChoice, loadLocalizedChoice, useNamedGraphId } from '../hooks';
 import ShowButton from './ShowButton';
 
 let globalChoiceQueryThrottle;
@@ -78,7 +78,8 @@ export default (props) => {
             setOpen(true);
           }
         }}
-        variant={renderingContext.materialVariant} />
+        variant={renderingContext.materialVariant}
+      />
     );
   };
 
@@ -97,6 +98,8 @@ export default (props) => {
     });
   };
 
+  const ngId = useNamedGraphId(binding, props.context);
+  const UpgradeComponent = value && value.original.upgradeComponent;
   return (
     <>
       <Autocomplete
@@ -105,29 +108,35 @@ export default (props) => {
         fullWidth={false}
         value={value}
         options={options}
-        filterOptions={(fopts) => fopts}
+        filterOptions={fopts => fopts}
         open={open}
         onOpen={() => setOpen(true)}
         onClose={() => setOpen(false)}
         onInputChange={(event, newInputValue) => setInputValue(newInputValue)}
         onChange={onChange}
+        disabled={!!ngId}
         isOptionEqualToValue={(option, choice) => option.value === choice.value}
-        getOptionLabel={(choice) =>
+        getOptionLabel={choice =>
           choice === null ? '' : choice.label || choice.value
         }
-        getOptionDisabled={(option) => option.mismatch === true}
+        getOptionDisabled={option => option.mismatch === true}
         renderInput={renderInput}
+        disablePortal
       />
-      <ShowButton {...props} onClick={showHandler} />
+      <ShowButton {...props} onClick={showHandler} disabled={!!ngId}/>
       {value && value.original.upgrade && (
-        <IconButton
-          aria-label={props.context.view.messages.edit_upgrade}
-          title={props.context.view.messages.edit_upgrade}
-          onClick={upgradeHandler}
-        >
-          <BuildIcon />
-        </IconButton>
-      )}
+        <>
+          <IconButton
+            aria-label={props.context.view.messages.edit_upgrade}
+            title={props.context.view.messages.edit_upgrade}
+            disabled={!!ngId}
+            onClick={upgradeHandler}
+          >
+            <BuildIcon />
+          </IconButton>
+          {UpgradeComponent}
+        </>
+        )}
       {error && (
         <div key="warning" className="rdformsWarning">
           {props.context.view.messages.wrongValueField}

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

@@ -1,9 +1,9 @@
-/* eslint-disable no-unused-vars */
+/* eslint-disable no-unused-vars,quotes */
 import React, { useState, useEffect } from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
 import renderingContext from '../../renderingContext';
-import { useLocalizedSortedChoices, useLocalizedChoice } from '../hooks';
+import { useLocalizedSortedChoices, useLocalizedChoice, useNamedGraphId } from '../hooks';
 
 /**
  * Autocomplete with fixed choices.
@@ -50,6 +50,7 @@ export default (props) => {
     setError(newChoice.original.mismatch === true);
   };
 
+  const ngId = useNamedGraphId(binding, props.context);
   return (
     <>
       <Autocomplete
@@ -58,11 +59,13 @@ export default (props) => {
         value={value}
         options={choices}
         onChange={handleChange}
+        disabled={!!ngId}
         isOptionEqualToValue={(option, choice) => option.value === choice.value}
-        getOptionLabel={(choice) => (choice === null ? '' : choice.label)}
-        getOptionDisabled={(option) => option.mismatch === true}
+        getOptionLabel={choice => (choice === null ? '' : choice.label)}
+        getOptionDisabled={option => option.mismatch === true}
         filterSelectedOptions
         renderInput={renderInput}
+        disablePortal
       />
       {error && (
         <div key="warning" className="rdformsWarning">

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

@@ -1,12 +1,13 @@
-/* eslint-disable no-unused-vars */
+/* eslint-disable no-unused-vars,quotes */
 import React, { useState, useEffect } from 'react';
 import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormControl from '@mui/material/FormControl';
-import { useLocalizedSortedChoices, useName } from '../hooks';
+import { useLocalizedSortedChoices, useName, useNamedGraphId } from '../hooks';
 
 const ChoiceOption = props => <FormControlLabel
+  disabled={props.disabled}
   label={props.choice.label} value={props.choice.value} control={<Radio/>}
   {...(props.choice.mismatch ? { className: 'mismatch' } : {})}
   title={props.choice.description || props.choice.seeAlso || props.choice.value}/>;
@@ -46,6 +47,7 @@ export default function RadioButtonsEditor(props) {
     };
   }, []);
 
+  const ngId = useNamedGraphId(binding, props.context);
   return (
     <>
       <FormControl component="fieldset">
@@ -57,8 +59,10 @@ export default function RadioButtonsEditor(props) {
           value={value}
           onChange={handleChange}
         >
-          {choices.map((choice) => (
-            <ChoiceOption key={choice.value} choice={choice} />
+          {choices.map(choice => (
+            <ChoiceOption key={choice.value}
+                          disabled={!!ngId}
+                          choice={choice} />
           ))}
         </RadioGroup>
       </FormControl>

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

@@ -24,6 +24,7 @@ export default (props) => {
     props.context.view.messages.edit_browse;
   if (props.context.chooser.show) {
     return <IconButton
+      disabled={props.disabled}
       aria-label={title}
       title={title}
       onClick={props.onClick}

package/src/view/react/date.js

@@ -7,6 +7,7 @@ import FormControl from '@mui/material/FormControl';
 import { TextField } from '@mui/material';
 import Select from '@mui/material/Select';
 import moment from 'moment';
+import CODES from '../../model/CODES';
 import renderingContext from '../renderingContext';
 import {
   getDate,
@@ -16,10 +17,16 @@ import {
   getDateValue,
   getAllowedDateAlternatives,
   getDatePresentation,
-} from '../jquery/util';
+} from '../viewUtils';
+import { useNamedGraphId } from './hooks';
 
-
-const getDatatypeFromBinding = binding => getDatatype(binding.getDatatype()) || getDatatypeFromItem(binding.getItem());
+const getDatatypeFromBinding = (binding, alternatives) => {
+  const currentDatatype = getDatatype(binding.getDatatype());
+  if (!alternatives[currentDatatype]) {
+    alternatives[currentDatatype] = 'error';
+  }
+  return currentDatatype || getDatatypeFromItem(binding.getItem());
+};
 
 const datePresenter = (fieldDiv, binding, context) => {
   try {
@@ -89,13 +96,20 @@ const dateEditor = (fieldDiv, binding, context) => {
   const DateComp = () => {
     const value = binding.getGist();
     const alternatives = useMemo(() => getAllowedDateAlternatives(binding.getItem()), []);
-    const onlyOneAlternative = Object.keys(alternatives).length === 1;
     const [selectedDate, setSelectedDate] = useState(value === '' ? null : getDate(value));
-    const [selectedDatatype, setDatatype] = useState(getDatatypeFromBinding(binding));
+    const [selectedDatatype, setDatatype] = useState(getDatatypeFromBinding(binding, alternatives));
+    const onlyOneAlternative = Object.keys(alternatives).length === 1;
+    const [error, setError] = useState(binding.getMatchingCode() === CODES.WRONG_DATATYPE);
+
+    useEffect(() => {
+      fieldDiv.toggleClass('mismatchReport', error);
+    }, [error]);
+
     useEffect(() => {
       context.clear = () => {
         setSelectedDate(null);
-        setDatatype(getDatatypeFromBinding(binding));
+        setDatatype(getDatatypeFromItem(binding.getItem()));
+        setError(false);
       };
     }, []);
 
@@ -113,16 +127,19 @@ const dateEditor = (fieldDiv, binding, context) => {
       binding.setDatatype(getDatatypeURI(event.target.value));
       binding.setValue(getDateValue(selectedDate, event.target.value));
       setDatatype(event.target.value);
+      setError(alternatives[event.target.value] === 'error');
     };
     const inputProps = {
       'aria-labelledby': context.view.getLabelIndex(binding),
       variant: renderingContext.materialVariant,
     };
+    const ngId = useNamedGraphId(binding, context);
     const visibleDatePicker = alternatives.Date || alternatives.DateTime || alternatives.Year
       || alternatives.YearMonth || alternatives.MonthDay;
-    const enabledDatePicker = selectedDatatype === 'DateTime' || selectedDatatype === 'Date'
-      || selectedDatatype === 'Year' || selectedDatatype === 'YearMonth' || selectedDatatype === 'MonthDay';
+    const enabledDatePicker = !ngId && (selectedDatatype === 'DateTime' || selectedDatatype === 'Date'
+      || selectedDatatype === 'Year' || selectedDatatype === 'YearMonth' || selectedDatatype === 'MonthDay');
     return (
+      <>
       <LocalizationProvider dateAdapter={DateAdapter}>
         <span className="rdformsDatePicker">
           {visibleDatePicker && (
@@ -146,7 +163,7 @@ const dateEditor = (fieldDiv, binding, context) => {
             <TimePicker
               renderInput={props => <TextField {...props} {...inputProps} />}
               label={bundle.date_time}
-              {...(selectedDatatype === 'DateTime' || selectedDatatype === 'Time' ? {} : { disabled: true })}
+              {...(!ngId && (selectedDatatype === 'DateTime' || selectedDatatype === 'Time') ? {} : { disabled: true })}
               KeyboardButtonProps={{
                 'aria-label': bundle.date_openTimePicker,
               }}
@@ -161,33 +178,47 @@ const dateEditor = (fieldDiv, binding, context) => {
               <Select
                 value={selectedDatatype}
                 inputProps={inputProps}
+                error={alternatives[selectedDatatype] === 'error'}
                 onChange={onDatatypeChange}
+                disabled={!!ngId}
               >
                 {alternatives.Year && (
-                  <MenuItem value="Year">{bundle.date_year}</MenuItem>
+                  <MenuItem disabled={alternatives.Year === 'error'} className="rdformsDatatypeOption"
+                            value="Year">{bundle.date_year}</MenuItem>
                 )}
                 {alternatives.Date && (
-                  <MenuItem value="Date">{bundle.date_date}</MenuItem>
+                  <MenuItem disabled={alternatives.Date === 'error'} className="rdformsDatatypeOption"
+                            value="Date">{bundle.date_date}</MenuItem>
                 )}
                 {alternatives.DateTime && (
-                  <MenuItem value="DateTime">
+                  <MenuItem disabled={alternatives.DateTime === 'error'} className="rdformsDatatypeOption"
+                            value="DateTime">
                     {bundle.date_date_and_time}
                   </MenuItem>
                 )}
                 {alternatives.YearMonth && (
-                  <MenuItem value="YearMonth">{bundle.date_year_and_month}</MenuItem>
+                  <MenuItem disabled={alternatives.YearMonth === 'error'} className="rdformsDatatypeOption"
+                            value="YearMonth">{bundle.date_year_and_month}</MenuItem>
                 )}
                 {alternatives.MonthDay && (
-                  <MenuItem value="MonthDay">{bundle.date_month_and_day}</MenuItem>
+                  <MenuItem disabled={alternatives.MonthDay === 'error'} className="rdformsDatatypeOption"
+                            value="MonthDay">{bundle.date_month_and_day}</MenuItem>
                 )}
                 {alternatives.Time && (
-                  <MenuItem value="Time">{bundle.date_time}</MenuItem>
+                  <MenuItem disabled={alternatives.Time === 'error'} className="rdformsDatatypeOption"
+                            value="Time">{bundle.date_time}</MenuItem>
                 )}
               </Select>
             </FormControl>
           )}
         </span>
       </LocalizationProvider>
+        {error && (
+          <div key="warning" className="rdformsWarning">
+            {context.view.messages.wrongDatatypeField}
+          </div>
+        )}
+        </>
     );
   };
   fieldDiv.appendChild(<DateComp key={binding.getHash()}></DateComp>);

package/src/view/react/duration.js

@@ -2,7 +2,8 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import TextField from '@mui/material/TextField';
 import renderingContext from '../renderingContext';
-import { toDuration, fromDuration } from './util';
+import { toDuration, fromDuration } from '../viewUtils';
+import { useNamedGraphId } from './hooks';
 
 const keys = ['years', 'months', 'days', 'hours', 'minutes'];
 const editors = renderingContext.editorRegistry;
@@ -44,11 +45,12 @@ editors.itemtype('text').datatype('xsd:duration').register((fieldDiv, binding, c
     }, {}));
 
     const descBy = context.view.getLabelIndex(binding);
-
+    const ngId = useNamedGraphId(binding, context);
     return <>{keys.map(key => (<TextField
       key={key}
       className="rdformsDurationInput"
       value={`${duration[key] || ''}`}
+      disabled={!!ngId}
       label={bundle[`duration_${key}`]}
       type="number"
       onChange={onChange[key]}

package/src/view/react/hooks.js

@@ -1,5 +1,6 @@
 import { useState, useEffect, useMemo } from 'react';
 import utils from '../../utils';
+import { getNamedGraphId } from '../viewUtils';
 
 /**
  * Wraps a choice in an object where the current label, and description is localized.
@@ -91,3 +92,5 @@ export const useName = () => useMemo(() => {
   nameCounter += 1;
   return `_rdforms_${nameCounter}`;
 }, []);
+
+export const useNamedGraphId = (binding, context) => useMemo(() => getNamedGraphId(binding, context));

package/src/view/react/labels.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-import React, { useState, useEffect, forwardRef } from 'react';
+import React, { Fragment, useState, useEffect, forwardRef } from 'react';
 import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 import { styled } from '@mui/material/styles';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
@@ -74,12 +74,30 @@ renderingContext.renderPresenterLabel = (rowNode, binding, item, context) => {
   } else {
     label = '';
   }
+
+  const view = context.view;
+  let description;
+  if (item.hasStyle('showDescriptionInPresent') || view.showDescription) {
+    // An item is compact if it is exclicitly set as compact or
+    // the view is set as compact and the item is not explicitly set as not compact AND
+    // we are at the top
+    const compactField = item.hasStyle('compact') ||
+      (view.compact && !item.hasStyle('nonCompact') && (
+        (view.topLevel && item.getType() !== 'group') ||
+        (view.parentView && view.parentView.topLevel && view.binding.getItem().hasStyle('heading'))));
+    const desc = view instanceof Editor ? item.getEditDescription() || item.getDescription() :
+      item.getDescription();
+    if (!compactField && desc) {
+      description = <div className="rdformsDescription" tabIndex="0">{desc}</div>;
+    }
+  }
+
   const labelId = binding ? context.view.createLabelIndex(binding) : undefined;
   label = item.hasStyle('heading') ?
     <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>);
+  rowNode.appendChild(<Fragment key={`${binding ? binding.getHash() : item._internalId}_label` }><ItemTooltip
+                                   context={context} item={item}>{label}</ItemTooltip>{description}</Fragment>);
 };
 
 renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
@@ -113,9 +131,27 @@ renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
     } else if (item.getType() === 'group' && !context.view.showAsTable(item)) {
       Button = renderingContext.addRemoveButton(rowNode, binding, context);
     }
+
+    const view = context.view;
+    let description;
+    if (item.hasStyle('showDescriptionInEdit') || view.showDescription) {
+      // An item is compact if it is exclicitly set as compact or
+      // the view is set as compact and the item is not explicitly set as not compact AND
+      // we are at the top
+      const compactField = item.hasStyle('compact') ||
+        (view.compact && !item.hasStyle('nonCompact') && (
+          (view.topLevel && item.getType() !== 'group') ||
+          (view.parentView && view.parentView.topLevel && view.binding.getItem().hasStyle('heading'))));
+      const desc = view instanceof Editor ? item.getEditDescription() || item.getDescription() :
+        item.getDescription();
+      if (!compactField && desc) {
+        description = <div className="rdformsDescription" tabIndex="0">{desc}</div>;
+      }
+    }
+
     const labelId = context.view.createLabelIndex(binding);
-    rowNode.appendChild(<div key={`${binding.getHash()}_label`} id={labelId} className="rdformsLabelRow">{
-      label}{mark}{Button && <Button></Button>}</div>);
+    rowNode.appendChild(<Fragment key={`${binding.getHash()}_label`}><div id={labelId} className="rdformsLabelRow">{
+      label}{mark}{Button && <Button></Button>}</div>{description}</Fragment>);
   }
 };