@entryscape/rdforms 10.16.0 → 10.17.0

package/dist/rdforms.react.js.LICENSE.txt

@@ -5,19 +5,8 @@
  * @license  MIT
  */
 
-/*!
- * The buffer module from node.js, for the browser.
- *
- * @author   Feross Aboukhadijeh <https://feross.org>
- * @license  MIT
- */
-
-/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
-
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
 
-/*! safe-buffer. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
-
 /**
  * @license React
  * react-dom.production.min.js
@@ -68,30 +57,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/**
- * Character class utilities for XML NS 1.0 edition 3.
- *
- * @author Louis-Dominique Dubeau
- * @license MIT
- * @copyright Louis-Dominique Dubeau
- */
-
-/**
- * Character classes and associated utilities for the 2nd edition of XML 1.1.
- *
- * @author Louis-Dominique Dubeau
- * @license MIT
- * @copyright Louis-Dominique Dubeau
- */
-
-/**
- * Character classes and associated utilities for the 5th edition of XML 1.0.
- *
- * @author Louis-Dominique Dubeau
- * @license MIT
- * @copyright Louis-Dominique Dubeau
- */
-
 /** @license React v16.13.1
  * react-is.production.min.js
  *

package/package.json

@@ -8,7 +8,7 @@
     "application profile",
     "linked data"
   ],
-  "version": "10.16.0",
+  "version": "10.17.0",
   "main": "dist/rdforms.node.js",
   "browser": "dist/rdforms.react.js",
   "module": "main.js",
@@ -23,20 +23,20 @@
     "@emotion/styled": "^11.14.1",
     "@entryscape/rdfjson": "2.7.7",
     "@fortawesome/fontawesome-free": "^5.15.4",
-    "@mui/icons-material": "^7.3.4",
-    "@mui/material": "^7.3.4",
+    "@mui/icons-material": "^7.3.11",
+    "@mui/material": "^7.3.11",
     "@mui/x-date-pickers": "^5.0.20",
-    "arrive": "^2.5.2",
+    "arrive": "^2.5.3",
     "bootstrap": "^4.6.2",
     "bootstrap-datepicker": "^1.10.1",
     "bootstrap-material-datetimepicker": "bitbucket:metasolutions/bootstrap-material-datetimepicker#webpack",
     "bootstrap-material-design": "^4.1.3",
     "circular-dependency-plugin": "^5.2.2",
-    "core-js": "^3.46.0",
+    "core-js": "^3.49.0",
     "ifdef-loader": "^2.3.2",
     "jquery": "^3.7.1",
     "jquery-mousewheel": "^3.2.2",
-    "lodash-es": "^4.17.21",
+    "lodash-es": "^4.18.1",
     "moment": "^2.30.1",
     "nls-loader": "bitbucket:metasolutions/nls-loader#master",
     "node-fetch": "^2.7.0",
@@ -47,19 +47,19 @@
     "regenerator-runtime": "^0.13.11",
     "select2": "4.0.8",
     "sizzle": "^2.3.10",
-    "terser-webpack-plugin": "^5.3.14",
+    "terser-webpack-plugin": "^5.6.0",
     "whatwg-fetch": "^3.6.20"
   },
   "devDependencies": {
-    "@babel/cli": "^7.28.3",
-    "@babel/core": "^7.28.4",
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.29.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-class-properties": "^7.27.1",
-    "@babel/plugin-transform-modules-commonjs": "^7.27.1",
-    "@babel/plugin-transform-react-jsx": "^7.27.1",
-    "@babel/preset-env": "^7.28.3",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/plugin-transform-class-properties": "^7.28.6",
+    "@babel/plugin-transform-modules-commonjs": "^7.28.6",
+    "@babel/plugin-transform-react-jsx": "^7.28.6",
+    "@babel/preset-env": "^7.29.5",
+    "@babel/preset-react": "^7.28.5",
     "babel-loader": "^8.4.1",
     "babel-plugin-transform-react-jsx": "^6.24.1",
     "copy-webpack-plugin": "^9.1.0",
@@ -69,7 +69,7 @@
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-requirejs": "^3.2.0",
     "html-loader": "^3.1.2",
-    "html-webpack-plugin": "^5.6.4",
+    "html-webpack-plugin": "^5.6.7",
     "html-webpack-tags-plugin": "^3.0.2",
     "imports-loader": "^0.8.0",
     "mini-css-extract-plugin": "^0.4.5",
@@ -79,9 +79,9 @@
     "style-loader": "^3.3.4",
     "svg-inline-loader": "^0.8.2",
     "ttf-loader": "^1.0.2",
-    "webpack": "^5.102.1",
+    "webpack": "^5.107.1",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.2.2",
+    "webpack-dev-server": "^5.2.4",
     "webpack-merge": "^5.10.0",
     "webpack-node-externals": "^3.0.0"
   },

package/src/template/Item.js

@@ -24,6 +24,8 @@ export default class Item {
     this._styles = [
       'heading',
       'invisible',
+      'invisibleInPresent',
+      'invisibleInEdit',
       'invisibleGroup',
       'stars',
       'commentOn',

package/src/view/Editor.js

@@ -7,7 +7,7 @@ import { bindingReport } from '../model/validate';
 const showNow = (editor, item, bindings, includeLevel) => {
   // Invisible should be created as components and hidden using display: none
   // Otherwise certain extentions such as autoUUID does not work.
-  /* if (item.hasStyle('invisible')) {
+  /* if (item.hasStyle('invisible') || item.hasStyle('invisibleInEdit')) {
     return false;
   } */
   if (item.hasStyle('presenterOnly')) {

package/src/view/Presenter.js

@@ -6,7 +6,8 @@ import View from './View';
 const showNow = (editor, item, bindings) => {
   if (bindings.length === 0 ||
 //    item.hasStyle('deprecated') ||
-    item.hasStyle('invisible')) {
+    item.hasStyle('invisible') ||
+    item.hasStyle('invisibleInPresent')) {
     return false;
   }
   const prop = item.getProperty();

package/src/view/ValidationPresenter.js

@@ -25,7 +25,7 @@ export default class ValidationPresenter extends Presenter {
   }
 
   showNow(item, bindings) {
-    if (item.hasStyle('invisible')) {
+    if (item.hasStyle('invisible') || item.hasStyle('invisibleInPresent')) {
       return false;
     }
     if (bindings.length > 0) {

package/src/view/View.js

@@ -330,7 +330,10 @@ export default class View {
 
     this._binding2node[binding.getHash()] = fieldDiv;
     this.addComponent(fieldDiv, binding);
-    if (item.hasStyle('invisible')) {
+    const isEditor = this._subEditors !== undefined;
+    if (item.hasStyle('invisible') ||
+      (item.hasStyle('invisibleInEdit') && isEditor)
+    ) {
       renderingContext.domClassToggle(newRow || lastRow, 'rdformsInvisible', true);
     }
     return newRow || lastRow;

package/src/view/bootstrap/labels.js

@@ -116,4 +116,10 @@ renderingContext.attachItemInfo = function (item, aroundNode, context) {
       }</div>${propinfo}`,
   };
   jquery(aroundNode).popover(popoverOptions).attr('data-toggle', 'popover');
+  jquery(aroundNode).on('keydown', (e) => {
+    if (e.key === 'Escape' && aroundNode.getAttribute('aria-describedby')) {
+      jquery(aroundNode).popover('hide');
+      e.stopPropagation();
+    }
+  });
 };

package/src/view/react/labels.js

@@ -1,8 +1,10 @@
 /* eslint-disable no-unused-vars */
 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 IconButton from '@mui/material/IconButton';
+import { styled } from '@mui/material/styles';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import renderingContext from '../renderingContext';
 import utils from '../../utils';
 import { Editor } from './Wrappers';
@@ -26,77 +28,67 @@ const StyledTooltip = styled(
   },
 }));
 
-const ItemTooltipTitle = ({description, propinfo, setOpen, tooltipId}) => {
-  useEffect(() => {
-    const focusListener = (event) => {
-      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 () => {
-      window.removeEventListener('focusin', focusListener);
-    };
-  }, []);
-
-  return (<>
-    <p className="rdformsLinebreaks rdformsDescription">
-      {description}
-    </p>
-    {propinfo}
-  </>);
+const getDescription = (item, view) => {
+  const descMap = view instanceof Editor
+    ? item.getEditDescriptionMap() || item.getDescriptionMap()
+    : item.getDescriptionMap();
+  return utils.getLocalizedValue(descMap, view.getLocale()).value;
 };
 
-const ItemTooltip = (props) => {
-  const [open, setOpen] = useState(false);
-  const handleTooltipClose = () => {
-    setOpen(false);
-  };
-  const handleTooltipOpen = () => {
-    setOpen(true);
+const DescriptionIcon = ({ item, context }) => {
+  const { view } = context;
+  const description = getDescription(item, view);
+  const [pinned, setPinned] = useState(false);
+  const [hovered, setHovered] = useState(false);
+
+  const property = item.getProperty();
+  const fallbackDescription = !description && !property
+    ? view.messages.info_missing || ''
+    : '';
+  const shownDescription = description || fallbackDescription;
+  if (!shownDescription && !property) return null;
+
+  const propinfo = property
+    ? <div className="rdformsProperty"><a target="_blank" href={property}>{property}</a></div>
+    : null;
+
+  const tooltipContent = (
+    <>
+      {shownDescription ? <p className="rdformsLinebreaks rdformsDescription">{shownDescription}</p> : null}
+      {propinfo}
+    </>
+  );
+
+  
+  const handleClick = () => setPinned(!pinned);
+  const handleKeyDown = (e) => {
+    if (e.key !== 'Escape' || !pinned) return;
+    setPinned(false);
+    e.stopPropagation();
   };
-  let propinfo = '';
-  const property = props.item.getProperty();
-  if (property) {
-    propinfo = <div className="rdformsProperty"><a target="_blank" href={property}>{property}</a></div>;
-  }
-  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 tooltipId = `tt_${props.binding ? props.binding.getHash() : props.item.getHash()}`;
 
   return (
-    <ClickAwayListener onClickAway={handleTooltipClose}>
-      <div id={tooltipId}>
+    <ClickAwayListener onClickAway={() => setPinned(false)}>
+      <span>
         <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
-            },
-          }}
+          title={tooltipContent}
+          placement="top-start"
+          open={pinned || hovered}
+          onOpen={() => setHovered(true)}
+          onClose={() => setHovered(false)}
         >
-          <span onClick={handleTooltipOpen}>{props.children}</span>
+          <IconButton
+            className="rdformsDescriptionIcon"
+            size="small"
+            aria-label={view.messages.info_description}
+            onClick={handleClick}
+            onKeyDown={handleKeyDown}
+            sx={{ marginLeft: '0px !important' }}
+          >
+            <HelpOutlineIcon fontSize="inherit" />
+          </IconButton>
         </StyledTooltip>
-      </div>
+      </span>
     </ClickAwayListener>
   );
 };
@@ -130,18 +122,12 @@ renderingContext.renderPresenterLabel = (rowNode, binding, item, context) => {
   }
 
   const labelId = binding ? context.view.createLabelIndex(binding) : undefined;
-  const rdformsLabel = context.view.popupOnLabel ? 'rdformsLabel' : 'rdformsLabel rdformsNoPopup';
-  const role = context.view.popupOnLabel ? 'button' : null;
   const HeadingElement = `h${context.view.headingLevel}`;
+  const descriptionIcon = context.view.popupOnLabel ? <DescriptionIcon item={item} context={context} /> : null;
   label = item.hasStyle('heading') ?
-    <HeadingElement tabIndex="0" id={labelId} className="rdformsLabelRow"><span className={rdformsLabel} role={role}>{label}</span></HeadingElement> :
-    <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.getHash()}_label` }><ItemTooltip
-      context={context} item={item} binding={binding}>{label}</ItemTooltip>{description}</Fragment>);
-  } else {
-    rowNode.appendChild(<Fragment key={`${binding ? binding.getHash() : item.getHash()}_label` }>{label}{description}</Fragment>);
-  }
+    <HeadingElement tabIndex="0" id={labelId} className="rdformsLabelRow"><span className="rdformsLabel">{label}</span>{descriptionIcon}</HeadingElement> :
+    <span tabIndex="0" id={labelId} className="rdformsLabelRow"><span className="rdformsLabel">{label}</span>{descriptionIcon}</span>;
+  rowNode.appendChild(<Fragment key={`${binding ? binding.getHash() : item.getHash()}_label` }>{label}{description}</Fragment>);
 };
 
 renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
@@ -155,14 +141,9 @@ renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
     } else {
       label = '';
     }
-    const rdformsLabel = context.view.popupOnLabel ? 'rdformsLabel' : 'rdformsLabel rdformsNoPopup';
-    const role = context.view.popupOnLabel ? 'button' : null;
     const HeadingElement = `h${context.view.headingLevel}`;
-    label = item.hasStyle('heading') ? <HeadingElement tabIndex="0" className={rdformsLabel} role={role}>{label}</HeadingElement> :
-      <span tabIndex="0" className={rdformsLabel} role={role}>{label}</span>;
-    if (context.view.popupOnLabel) {
-      label = <ItemTooltip item={item} context={context} binding={binding}>{label}</ItemTooltip>;
-    }
+    label = item.hasStyle('heading') ? <HeadingElement tabIndex="0" className="rdformsLabel">{label}</HeadingElement> :
+      <span tabIndex="0" className="rdformsLabel">{label}</span>;
 
     const card = item.getCardinality();
     const b = context.view.messages;
@@ -207,8 +188,9 @@ renderingContext.renderEditorLabel = (rowNode, binding, item, context) => {
     }
 
     const labelId = context.view.createLabelIndex(binding);
+    const descriptionIcon = context.view.popupOnLabel ? <DescriptionIcon item={item} context={context} /> : null;
     rowNode.appendChild(<Fragment key={`${binding.getHash()}_label`}><div id={labelId} className="rdformsLabelRow">{
-      label}{mark}{Button && <Button></Button>}</div>{description}</Fragment>);
+      label}{mark}{descriptionIcon}{Button && <Button></Button>}</div>{description}</Fragment>);
   }
 };
 

package/src/view/react/style.css

@@ -14,6 +14,16 @@
     display: flex;
 }
 
+.rdformsLabel:hover {
+    text-decoration: none;
+    cursor: default;
+}
+
+.rdformsDescriptionIcon {
+    color: grey !important;
+    font-size: 16px !important;
+}
+
 .rdformsLabelRow .MuiButtonBase-root {
     margin-top: -4px;
     margin-left: 7px;
@@ -244,4 +254,4 @@ div.MuiTooltip-tooltip {
 
 .rdformsPresenter .rdformsInline {
     padding-left: 0em;
-}
+}

package/src/view/resources/rdforms.css

@@ -74,7 +74,6 @@
     display: none;
 }
 
-
 /* === End colors === */
 
 .rdformsInvisible {
@@ -793,4 +792,4 @@ a.rdformsUrl:hover {
 
 .rdformsPresenter .rdformsInline {
     padding-left: 1em;
-}
+}