@entryscape/rdforms 10.12.3 → 10.13.1

package/package.json

@@ -8,7 +8,7 @@
     "application profile",
     "linked data"
   ],
-  "version": "10.12.3",
+  "version": "10.13.1",
   "main": "dist/rdforms.node.js",
   "browser": "dist/rdforms.react.js",
   "module": "main.js",
@@ -16,10 +16,10 @@
   "license": "LGPL-3.0-only",
   "homepage": "https://rdforms.org",
   "peerDependencies": {
-    "@entryscape/rdfjson": "2.7.6"
+    "@entryscape/rdfjson": "2.7.7"
   },
   "dependencies": {
-    "@entryscape/rdfjson": "2.7.6",
+    "@entryscape/rdfjson": "2.7.7",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@fortawesome/fontawesome-free": "^5.8.1",

package/src/template/ItemStore.js

@@ -265,6 +265,11 @@ export default class ItemStore {
           }
         }
         if (id != null) {
+          if (this._registry[id]) {
+            console.log(`RDForms conflict with item id ${id}, overwriting item from bundle "${
+              this._registry[id].getBundle()?.getPath() || ''}" with item from bundle "${
+              item.getBundle()?.getPath() || ''}".`);
+          }
           this._registry[id] = item;
           if (bundle != null) {
             bundle.addItem(item);

package/src/template/bundleLoader.js

@@ -18,7 +18,7 @@ const stopFetchingOrJustLog = (iteration, length, templateId) => {
 };
 
 /**
- * Return the first sucessfully fetched bundle from a list of urls or throw en error if none could be fetched
+ * Return the first successfully fetched bundle from a list of urls or throw en error if none could be fetched
  *
  * @param {Array<String>} urls
  * @returns {Promise<Response | never | void>}
@@ -27,14 +27,16 @@ const fetchBundle = async (urls) => {
   const totalUrls = urls.length;
   let response;
   let bundle;
+  let path;
 
 
   for (let i = 0; i < totalUrls; i++) {
     // try to fetch the bundle, fails only if there's some network error. A 404 is not an error
+    path = urls[i];
     try {
-      response = await fetch(urls[i]);
+      response = await fetch(path);
     } catch (e) {
-      throw Error(`A network error ocurred while trying to fetch bundle ${urls[i]}`);
+      throw Error(`A network error ocurred while trying to fetch bundle ${path}`);
     }
 
     // check if we got a 2xx
@@ -48,18 +50,18 @@ const fetchBundle = async (urls) => {
           bundle = await response.json();
           break;
         } else {
-          throw new Error(`Failed fetching template ${urls[i]}. Expected a JSON file and got ${contentType}`);
+          throw new Error(`Failed fetching template ${path}. Expected a JSON file and got ${contentType}`);
         }
       } catch (e) {
-        stopFetchingOrJustLog(i, totalUrls, urls[i]);
+        stopFetchingOrJustLog(i, totalUrls, path);
       }
       // got back something that's not a 2xx
     } else {
-      stopFetchingOrJustLog(i, totalUrls, urls[i]);
+      stopFetchingOrJustLog(i, totalUrls, path);
     }
   }
 
-  return bundle;
+  return {path, source: bundle};
 };
 
 /**
@@ -76,7 +78,7 @@ const promisifyBundles = bundles => bundles.map(bundle =>
  * @param {ItemStore} itemStore
  * @param {array} bundles
  */
-const registerBundles = (itemStore, bundles = []) => bundles.map(source => itemStore.registerBundle({ source }));
+const registerBundles = (itemStore, bundles = []) => bundles.map(bundle => itemStore.registerBundle(bundle));
 
 /**
  *

package/src/view/View.js

@@ -11,6 +11,7 @@ export default class View {
   constructor(params, srcNodeRef) {
     this._viewId = viewCounter;
     viewCounter += 1;
+    this.renderingParams = params.renderingParams || {};
     this.locale = params.locale;
     this.defaultTextLanguage = params.defaultTextLanguage;
     this.messages = params.messages;
@@ -23,6 +24,7 @@ export default class View {
     this.topLevel = params.topLevel !== false;
     this.compact = params.compact !== false;
     this.showDescription = params.showDescription === true;
+    this.popupOnLabel = params.popupOnLabel !== false;
     this.styleCls = params.styleCls || '';
     this.truncateLimit = params.truncateLimit !== undefined ? params.truncateLimit : 10;
     this.truncate = params.truncate !== undefined ? params.truncate : false;

package/src/view/bootstrap/labels.js

@@ -67,7 +67,7 @@ renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
     let desc = utils.getLocalizedValue(descMap, context.view.getLocale()).value
 
     if (!compactField && desc) {
-      jquery('<div class="rdformsDescription" tabindex="0">').text(desc).appendTo(rowNode);
+      jquery('<div class="rdformsDescription">').text(desc).appendTo(rowNode);
     }
   }
   renderingContext.attachItemInfo(item, $label[0], context);
@@ -76,6 +76,11 @@ renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
 };
 
 renderingContext.attachItemInfo = function (item, aroundNode, context) {
+  if (context.view.popupOnLabel === false) {
+    renderingContext.domClassToggle(aroundNode, 'rdformsNoPopup', true);
+    return;
+  }
+  renderingContext.domSetAttr(aroundNode, 'role', 'button');
   if (item == null || (item.getProperty() == null && item.getDescriptionMap() == null
     && item.getEditDescriptionMap() == null)) {
     jquery(aroundNode).addClass('noPointer');
@@ -102,7 +107,7 @@ renderingContext.attachItemInfo = function (item, aroundNode, context) {
   }
   const popoverOptions = {
     html: true,
-    container: renderingContext.getPopoverContainer(),
+    container: aroundNode, // renderingContext.getPopoverContainer(),
     placement: 'auto',
     trigger: 'focus',
     title: label,

package/src/view/jquery/labels.js

@@ -36,7 +36,7 @@ renderingContext.renderPresenterLabel = (rowNode, binding, item, context, labelR
     const desc = utils.getLocalizedValue(item.getDescriptionMap(), context.view.getLocale()).value
 
     if (!compactField && desc) {
-      jquery('<div class="rdformsDescription" tabindex="0">').text(desc).appendTo(rowNode);
+      jquery('<div class="rdformsDescription">').text(desc).appendTo(rowNode);
     }
   }
 

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

@@ -122,6 +122,7 @@ export default (props) => {
         getOptionDisabled={option => option.mismatch === true}
         renderInput={renderInput}
         disablePortal
+        {...props.context.view.renderingParams.ChoiceLookupAndInlineSearch}
       />
       <ShowButton {...props} onClick={showHandler} disabled={!!ngId}/>
       {value && value.original.upgrade && (

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

@@ -66,6 +66,7 @@ export default (props) => {
         filterSelectedOptions
         renderInput={renderInput}
         disablePortal
+        {...props.context.view.renderingParams.ChoiceSelector}
       />
       {error && (
         <div key="warning" className="rdformsWarning">

package/src/view/react/labels.js

@@ -2,7 +2,7 @@
 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';
+import { ClickAwayListener } from '@mui/base/ClickAwayListener';
 import renderingContext from '../renderingContext';
 import utils from '../../utils';
 import { Editor } from './Wrappers';
@@ -26,6 +26,39 @@ const StyledTooltip = styled(
   },
 }));
 
+const ItemTooltipTitle = ({description, propinfo, setOpen, tooltipId}) => {
+  useEffect(() => {
+    console.log("Inited useEffect");
+    const focusListener = (event) => {
+      console.log("Focuslistener called");
+      let el = event.target;
+      let external = true;
+      while (el) {
+        if (el.id === tooltipId) {
+          external = false;
+          break;
+        }
+        el = el.parentElement;
+      }
+      if (external) {
+        setOpen(false);
+      }
+    };
+    window.addEventListener('focusin', focusListener);
+    return () => {
+      console.log("Focuslistener removed");
+      window.removeEventListener('focusin', focusListener);
+    };
+  }, []);
+
+  return (<>
+    <p className="rdformsLinebreaks rdformsDescription">
+      {description}
+    </p>
+    {propinfo}
+  </>);
+};
+
 const ItemTooltip = (props) => {
   const [open, setOpen] = useState(false);
   const handleTooltipClose = () => {
@@ -42,28 +75,31 @@ const ItemTooltip = (props) => {
   const descriptionMap = props.context.view instanceof Editor ?
     props.item.getEditDescriptionMap() || props.item.getDescriptionMap() : props.item.getDescriptionMap()
     || (property ? '' : props.context.view.messages.info_missing || '');
-  const description = utils.getLocalizedValue(descriptionMap, props.context.view.getLocale()).value
+  const description = utils.getLocalizedValue(descriptionMap, props.context.view.getLocale()).value;
+  const tooltipId = `tt_${props.binding.getHash()}`;
 
   return (
     <ClickAwayListener onClickAway={handleTooltipClose}>
-      <StyledTooltip
-        title={
-          <>
-            <p className="rdformsLinebreaks rdformsDescription">
-              {description}
-            </p>
-            {propinfo}
-          </>
-        }
-        placement="bottom-start"
-        disableHoverListener
-        disableTouchListener
-        onClose={handleTooltipClose}
-        onOpen={handleTooltipOpen}
-        open={open}
-      >
-        <span onClick={handleTooltipOpen}>{props.children}</span>
-      </StyledTooltip>
+      <div id={tooltipId}>
+        <StyledTooltip
+          title={<ItemTooltipTitle description={description} propinfo={propinfo} setOpen={setOpen} tooltipId={tooltipId}></ItemTooltipTitle>}
+          placement="bottom-start"
+          disableHoverListener
+          disableTouchListener
+          disableFocusListener
+          onFocus={handleTooltipOpen}
+          onOpen={handleTooltipOpen}
+          onClose={handleTooltipClose}
+          open={open}
+          slotProps={{
+            popper: {
+              disablePortal: true
+            },
+          }}
+        >
+          <span onClick={handleTooltipOpen}>{props.children}</span>
+        </StyledTooltip>
+      </div>
     </ClickAwayListener>
   );
 };
@@ -92,16 +128,22 @@ renderingContext.renderPresenterLabel = (rowNode, binding, item, context) => {
       item.getDescriptionMap();
     const desc = utils.getLocalizedValue(descMap, context.view.getLocale()).value;
     if (!compactField && desc) {
-      description = <div className="rdformsDescription" tabIndex="0">{desc}</div>;
+      description = <div className="rdformsDescription">{desc}</div>;
     }
   }
 
   const labelId = binding ? context.view.createLabelIndex(binding) : undefined;
+  const rdformsLabel = context.view.popupOnLabel ? 'rdformsLabel' : 'rdformsLabel rdformsNoPopup';
+  const role = context.view.popupOnLabel ? 'button' : null;
   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(<Fragment key={`${binding ? binding.getHash() : item._internalId}_label` }><ItemTooltip
-                                   context={context} item={item}>{label}</ItemTooltip>{description}</Fragment>);
+    <h2 tabIndex="0" id={labelId} className="rdformsLabelRow"><span className={rdformsLabel} role={role}>{label}</span></h2> :
+    <span tabIndex="0" id={labelId} className="rdformsLabelRow"><span className={rdformsLabel} role={role}>{label}</span></span>;
+  if (context.view.popupOnLabel) {
+    rowNode.appendChild(<Fragment key={`${binding ? binding.getHash() : item._internalId}_label` }><ItemTooltip
+      context={context} item={item} binding={binding}>{label}</ItemTooltip>{description}</Fragment>);
+  } else {
+    rowNode.appendChild(<Fragment key={`${binding ? binding.getHash() : item._internalId}_label` }>{label}{description}</Fragment>);
+  }
 };
 
 renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
@@ -115,9 +157,13 @@ renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
     } else {
       label = '';
     }
-    label = item.hasStyle('heading') ? <h2 tabIndex="0" className="rdformsLabel">{label}</h2> :
-      <span tabIndex="0" className="rdformsLabel">{label}</span>;
-    label = <ItemTooltip item={item} context={context}>{label}</ItemTooltip>;
+    const rdformsLabel = context.view.popupOnLabel ? 'rdformsLabel' : 'rdformsLabel rdformsNoPopup';
+    const role = context.view.popupOnLabel ? 'button' : null;
+    label = item.hasStyle('heading') ? <h2 tabIndex="0" className={rdformsLabel} role={role}>{label}</h2> :
+      <span tabIndex="0" className={rdformsLabel} role={role}>{label}</span>;
+    if (context.view.popupOnLabel) {
+      label = <ItemTooltip item={item} context={context} binding={binding}>{label}</ItemTooltip>;
+    }
 
     const card = item.getCardinality();
     const b = context.view.messages;

package/src/view/renderingContext.js

@@ -328,6 +328,7 @@ const groupPresenter = (fieldDiv, binding, context) => {
   // eslint-disable-next-line no-new
   new Cls({
     parentView: context.view,
+    renderingParams: context.view.renderingParams,
     messages: context.view.messages,
     binding,
     topLevel: false,
@@ -336,6 +337,7 @@ const groupPresenter = (fieldDiv, binding, context) => {
     showDescription: context.view.showDescription,
     defaultLanguage: context.view.defaultLanguage,
     filterTranslations: context.view.filterTranslations,
+    popupOnLabel: context.view.popupOnLabel,
     truncate: context.view.truncate,
     truncateLimit: context.view.truncateLimit,
     includeLevel: context.view.includeLevel, // Copied from groupEditor, was this.includeLevel but that 'this' does not make sense here
@@ -349,11 +351,13 @@ const groupEditor = (fieldDiv, binding, context) => {
   const Cls = context.view.constructor;
   const subView = new Cls({
     parentView: context.view,
+    renderingParams: context.view.renderingParams,
     messages: context.view.messages,
     languages: context.view.languages,
     binding,
     topLevel: false,
     compact: context.view.compact,
+    popupOnLabel: context.view.popupOnLabel,
     showDescription: context.view.showDescription,
     truncate: context.view.truncate,
     truncateLimit: context.view.truncateLimit,

package/src/view/resources/rdforms.css

@@ -204,6 +204,15 @@ a.rdformsUrl:hover {
 	cursor: pointer;
 }
 
+.rdformsLabel.rdformsNoPopup:hover {
+    text-decoration: initial;
+    cursor: initial;
+}
+
+.rdformsLabel .popover:hover {
+    cursor: initial;
+}
+
 .rdformsLabel.noPointer:hover {
     text-decoration: none;
     cursor: default;