@entryscape/rdforms 10.6.2 → 10.7.0

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

@@ -20,6 +20,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

@@ -16,8 +16,8 @@ import {
   getDateValue,
   getAllowedDateAlternatives,
   getDatePresentation,
-} from '../jquery/util';
-
+} from '../viewUtils';
+import { useNamedGraphId } from './hooks';
 
 const getDatatypeFromBinding = binding => getDatatype(binding.getDatatype()) || getDatatypeFromItem(binding.getItem());
 
@@ -118,10 +118,11 @@ const dateEditor = (fieldDiv, binding, context) => {
       '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">
@@ -146,7 +147,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,
               }}
@@ -162,6 +163,7 @@ const dateEditor = (fieldDiv, binding, context) => {
                 value={selectedDatatype}
                 inputProps={inputProps}
                 onChange={onDatatypeChange}
+                disabled={!!ngId}
               >
                 {alternatives.Year && (
                   <MenuItem value="Year">{bundle.date_year}</MenuItem>

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

@@ -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(<><ItemTooltip key={`${binding ? binding.getHash() : item._internalId}_label` }
+                                   context={context} item={item}>{label}</ItemTooltip>{description}</>);
 };
 
 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(<><div key={`${binding.getHash()}_label`} id={labelId} className="rdformsLabelRow">{
+      label}{mark}{Button && <Button></Button>}</div>{description}</>);
   }
 };
 

package/src/view/react/style.css

@@ -133,7 +133,7 @@
 }
 
 .rdformsEditor .rdformsLangControl {
-    width: calc(33.33% - 8px);
+    width: calc(33.33% - 4px);
 }
 
 /* Duration */
@@ -205,10 +205,6 @@ div.MuiTooltip-tooltip {
     margin-right: 11px;
 }
 
-.rdformsEditor .rdformsLangControl {
-    width: calc(33.33% - 8px);
-}
-
 .rdformsDependency {
     display: none;
 }
@@ -227,4 +223,8 @@ div.MuiTooltip-tooltip {
     font-size: 10px;
     font-weight: bolder;
     font-family: sans-serif;
-}
+}
+
+.rdformsHeading>.rdformsDescription {
+    margin: -20px 0 20px;
+}

package/src/view/react/text.js

@@ -3,7 +3,7 @@ import React, { useState, useEffect, useMemo } from 'react';
 import moment from 'moment';
 import system from '../../model/system';
 import renderingContext from '../renderingContext';
-import { fromDuration } from './util';
+import { fromDuration } from '../viewUtils';
 import utils from '../../utils';
 
 
@@ -13,7 +13,7 @@ presenters.itemtype('text').datatype('xsd:duration').register((fieldDiv, binding
   const data = fromDuration(binding.getValue());
   const keys = ['years', 'months', 'days', 'hours', 'minutes'];
   fieldDiv.appendChild(<div key={binding.getHash()}>{keys.map(key => (
-    data[key] && <React.Fragment key={key}><span className="durationlabel">{
+    data[key] && <React.Fragment key={key}><span className="durationLabel">{
       context.view.messages[`duration_${key}`]}:</span><span className="durationValue">{data[key]}</span></React.Fragment>
   ))}</div>);
 });

package/src/view/react/textEditors.js

@@ -10,6 +10,7 @@ import Select from '@mui/material/Select';
 import moment from 'moment';
 import renderingContext from '../renderingContext';
 import utils from '../../utils';
+import { useNamedGraphId } from './hooks';
 
 const LanguageControl = (props) => {
   const [lang, setLang] = useState(props.binding.getLanguage() || '');
@@ -38,10 +39,12 @@ const LanguageControl = (props) => {
     };
   }, []);
 
+  const ngId = useNamedGraphId(props.binding, props.context);
   return <FormControl className="rdformsLangControl" variant={renderingContext.materialVariant}>
     <Select
       inputProps={{ 'aria-labelledby': props.labelledby }}
       value={lang}
+      disabled={!!ngId}
       onChange={onLangChange}>
       {langs.map(langOption => (langOption === null ?
         (<MenuItem key="_none" value="_none" disabled>─────</MenuItem>) :
@@ -90,11 +93,13 @@ editors.itemtype('text').register((fieldDiv, binding, context) => {
       },
     };
     const bundle = context.view.messages;
+    const ngId = useNamedGraphId(binding, context);
     return <><TextField
       className={extLink || langlit ? 'rdformsTwoThirds' : ''}
       multiline={multiline}
       placeholder={item.getPlaceholder()}
       error={!valid}
+      disabled={!!ngId}
       helperText={!valid ? item.getHelp() || '' : ''}
       variant={renderingContext.materialVariant} inputProps={iprops}
     />{extLink && (value != null || value === '') &&

package/src/view/renderingContext.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import Registry from './Registry';
 import system from '../model/system';
 import nls from './resources/nls';
@@ -328,7 +329,9 @@ const groupPresenter = (fieldDiv, binding, context) => {
     messages: context.view.messages,
     binding,
     topLevel: false,
+    compact: context.view.compact,
     showLanguage: context.view.showLanguage,
+    showDescription: context.view.showDescription,
     defaultLanguage: context.view.defaultLanguage,
     filterTranslations: context.view.filterTranslations,
     includeLevel: context.view.includeLevel, // Copied from groupEditor, was this.includeLevel but that 'this' does not make sense here
@@ -346,6 +349,8 @@ const groupEditor = (fieldDiv, binding, context) => {
     languages: context.view.languages,
     binding,
     topLevel: false,
+    compact: context.view.compact,
+    showDescription: context.view.showDescription,
     includeLevel: context.view.includeLevel,
   }, fieldDiv);
   context.view._subEditors.push(subView);