@entryscape/rdforms 10.6.0 → 10.7.0

package/src/view/bootstrap/Select2.js

@@ -1,13 +1,16 @@
+import ArrayAdapter from 'select2/src/js/select2/data/array';
+import 'select2';
 import renderingContext from '../renderingContext';
 import utils from '../../utils';
-import ArrayAdapter from 'select2/src/js/select2/data/array';
 import Select2QueryAdapter from './Select2QueryAdapter';
-import 'select2';
-//import 'select2/src/js/jquery.select2';
+import { getNamedGraphId } from '../viewUtils';
+// import 'select2/src/js/jquery.select2';
+
 
 renderingContext.renderSelect = (fieldDiv, binding, context) => {
   const choices = context.choices;
-  const $select = jquery('<select>').appendTo(fieldDiv).append('<option></option>');
+  const disabledAttr = getNamedGraphId(binding, context) ? 'disabled' : '';
+  const $select = jquery(`<select ${disabledAttr}>`).appendTo(fieldDiv).append('<option></option>');
 
   const options = {
     placeholder: binding.getItem().getPlaceholder() || '',
@@ -34,7 +37,7 @@ renderingContext.renderSelect = (fieldDiv, binding, context) => {
       $select.trigger({
         type: 'select2:select',
         params: {
-          data: {id: choice.val, text: label, choice},
+          data: { id: choice.val, text: label, choice },
         },
       });
     } else {

package/src/view/bootstrap/buttons.js

@@ -1,8 +1,11 @@
 import renderingContext from '../renderingContext';
 import * as engine from '../../model/engine';
+import { getNamedGraphId } from '../viewUtils';
+
 
 renderingContext.addRemoveButton = (fieldDiv, binding, context) => {
-  const $remove = jquery('<span class="fas fa-times action">')
+  const disabledAttr = getNamedGraphId(binding, context) ? 'disabled' : '';
+  const $remove = jquery(`<button ${disabledAttr} class="fas fa-times action rdformsActionButton">`)
     .attr('title', context.view.messages.edit_remove)
     .appendTo(context.controlDiv);
   const cardTr = binding.getCardinalityTracker();
@@ -39,7 +42,7 @@ renderingContext.addRemoveButton = (fieldDiv, binding, context) => {
 };
 
 renderingContext.addExpandButton = (rowDiv, labelDiv, item, context) => {
-  const $expand = jquery('<span class="fas fa-plus action">')
+  const $expand = jquery('<button class="fas fa-plus action rdformsActionButton">')
     .attr('title', context.view.messages.edit_expand)
     .appendTo(labelDiv)
     .click(() => {
@@ -62,7 +65,7 @@ renderingContext.addGroupButtons = (rowDiv, labelDiv, binding, context) => {
   const card = item.getCardinality();
   let $add;
   if (card.max !== 1) {
-    $add = jquery('<span class="action fas fa-plus ">')
+    $add = jquery('<button class="action fas fa-plus rdformsActionButton">')
       .attr('title', context.view.messages.edit_add)
       .appendTo(labelDiv);
     $add.click(() => {
@@ -72,7 +75,8 @@ renderingContext.addGroupButtons = (rowDiv, labelDiv, binding, context) => {
       }
     });
   }
-  const $remove = jquery('<span class="action fas fa-times">')
+  const disabledAttr = getNamedGraphId(binding, context) ? 'disabled' : '';
+  const $remove = jquery(`<button ${disabledAttr} class="action fas fa-times rdformsActionButton">`)
     .attr('title', context.view.messages.edit_remove)
     .appendTo(labelDiv);
 
@@ -127,7 +131,7 @@ renderingContext.addCreateChildButton = (rowDiv, labelDiv, binding, context) =>
   const parentBinding = binding.getParent();
   const item = binding.getItem();
   const cardTr = binding.getCardinalityTracker();
-  const $add = jquery('<span class="action fas fa-plus">')
+  const $add = jquery('<button class="action fas fa-plus rdformsActionButton">')
     .attr('title', context.view.messages.edit_add)
     .appendTo(labelDiv)
     .click(() => {

package/src/view/bootstrap/choice.js

@@ -1,6 +1,7 @@
 import renderingContext from '../renderingContext';
 import system from '../../model/system';
-import {default as RadioButtonsEditor} from './RadioButtonsEditor';
+import RadioButtonsEditor from './RadioButtonsEditor';
+import { getNamedGraphId } from '../viewUtils';
 
 const editors = renderingContext.editorRegistry;
 
@@ -14,7 +15,7 @@ const radioCheck = (item) => {
 };
 editors.itemtype('choice').choices().check(radioCheck).register((fieldDiv, binding, context) => {
   // eslint-disable-next-line no-new
-  new RadioButtonsEditor({binding, context}, fieldDiv);
+  new RadioButtonsEditor({ binding, context }, fieldDiv);
 });
 
 editors.itemtype('choice').choices().register((fieldDiv, binding, context) => {
@@ -52,13 +53,14 @@ editors.itemtype('choice').choices('none').register((fieldDiv, binding, context)
   context.chooser = renderingContext.chooserRegistry.getComponent(binding.getItem());
   context.choices = undefined; // Reset choices so no bleeding over when reusing context between fields.
 
+  const disabledAttr = getNamedGraphId(binding, context) ? 'disabled' : '';
   const renderSelect = () => {
     renderingContext.renderSelect(fieldDiv, binding, context);
     // remember the function since the context object is reused and may
     // reference to the wrong setValue function later on.
     const setValue = context.setValue;
 
-    const $search = jquery('<button class="btn btn-primary bmd-btn-fab bmd-btn-fab-sm browseChoices" type="button">')
+    const $search = jquery(`<button ${disabledAttr} class="btn btn-primary bmd-btn-fab bmd-btn-fab-sm browseChoices" type="button">`)
       .attr('title', context.view.messages.edit_browse)
       .appendTo(fieldDiv);
     if (context.chooser && context.chooser.supportsInlineCreate &&
@@ -109,7 +111,7 @@ editors.itemtype('choice').choices('none').register((fieldDiv, binding, context)
       c.load(() => {
         // If the value can be upgraded into its own entity.
         if (c.upgrade) {
-          const $button = jquery('<button class="btn btn-default bmd-btn-fab bmd-btn-fab-sm' +
+          const $button = jquery(`<button ${disabledAttr} class="btn btn-default bmd-btn-fab bmd-btn-fab-sm` +
             ' browseChoices" type="button">')
             .attr('title', context.view.messages.edit_upgrade)
             .click(() => {

package/src/view/bootstrap/durationEditor.js

@@ -1,4 +1,4 @@
-import { fromDuration, toDuration } from '../jquery/util';
+import { fromDuration, toDuration, getNamedGraphId } from '../viewUtils';
 
 let counter = 0;
 export default (fieldDiv, binding, context) => {
@@ -6,6 +6,7 @@ export default (fieldDiv, binding, context) => {
   let data = fromDuration(binding.getValue());
 
   const wrapper = jquery('<div>').addClass('rdformsDuration rdformsFieldInput').appendTo(fieldDiv);
+  const disabledAttr = getNamedGraphId(binding, context) ? 'disabled' : '';
   const render = () => {
     wrapper.empty();
     ['years', 'months', 'days', 'hours', 'minutes'].forEach((key) => {
@@ -17,7 +18,7 @@ export default (fieldDiv, binding, context) => {
         .attr('id', id)
         .text(bundle[`duration_${key}`])
         .appendTo(group);
-      const inp = jquery('<input>').addClass('form-control')
+      const inp = jquery(`<input ${disabledAttr}>`).addClass('form-control')
         .attr('type', 'number')
         .attr('aria-describedby', id)
         .appendTo(group);

package/src/view/bootstrap/labels.js

@@ -18,7 +18,7 @@ renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
     $labelDiv.attr('id', context.view.createLabelIndex(binding));
   }
   context.labelNode = $labelDiv[0];
-  const $label = jquery('<span class="rdformsLabel">').text(label).appendTo($labelDiv);
+  const $label = jquery('<span class="rdformsLabel" tabindex="0">').text(label).appendTo($labelDiv);
   const card = item.getCardinality();
   const b = context.view.messages;
   if (card.min > 0) {
@@ -32,25 +32,36 @@ renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
       .appendTo($labelDiv);
   }
 
-  renderingContext.attachItemInfo(item, $label[0], context);
-
+  // Buttons of various sorts
   if (binding == null) {
     renderingContext.addExpandButton(rowNode, $labelDiv[0], item, context);
-    return undefined;
-  }
-  // If table, no add or remove buttons.
-  if (context.view.showAsTable(item)) {
-    return undefined;
-  }
-  if (card.max != null && (card.max === card.min)) {
-    return undefined;
+  } else if (!context.view.showAsTable(item) &&
+    (card.max === null || card.max !== card.min)) {
+    // If not table or min and max are not the same, then add buttons.
+    if (item.getType() === 'group') {
+      renderingContext.addGroupButtons(rowNode, $labelDiv[0], binding, context);
+    } else {
+      renderingContext.addCreateChildButton(rowNode, $labelDiv[0], binding, context);
+    }
   }
 
-  if (item.getType() === 'group') {
-    renderingContext.addGroupButtons(rowNode, $labelDiv[0], binding, context);
-  } else {
-    renderingContext.addCreateChildButton(rowNode, $labelDiv[0], binding, context);
+  const view = context.view;
+  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 = context.view instanceof Editor ? item.getEditDescription() || item.getDescription() :
+      item.getDescription();
+    if (!compactField && desc) {
+      jquery('<div class="rdformsDescription" tabindex="0">').text(desc).appendTo(rowNode);
+    }
   }
+  renderingContext.attachItemInfo(item, $label[0], context);
+
   return undefined;
 };
 

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 { useLocalizedChoice, editLocalizedChoice } from '../hooks';
+import { editLocalizedChoice, loadLocalizedChoice, useNamedGraphId } 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] = useLocalizedChoice(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);
@@ -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>