@entryscape/rdforms 10.15.1 → 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.15.1",
+  "version": "10.17.0",
   "main": "dist/rdforms.node.js",
   "browser": "dist/rdforms.react.js",
   "module": "main.js",
@@ -23,21 +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",
-    "@selectize/selectize": "^0.13.6",
-    "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": "^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,23 +46,21 @@
     "react-hooks-lib": "^0.1.5",
     "regenerator-runtime": "^0.13.11",
     "select2": "4.0.8",
-    "selectize-bootstrap4-theme": "^2.0.2",
     "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-lodash": "^3.3.4",
     "babel-plugin-transform-react-jsx": "^6.24.1",
     "copy-webpack-plugin": "^9.1.0",
     "css-loader": "^6.11.0",
@@ -72,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",
@@ -82,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"
   },
@@ -94,17 +91,11 @@
     "main*",
     "renderers"
   ],
-  "pnpm": {
-    "overrides": {
-      "minimist": "0.2.4"
-    }
-  },
   "scripts": {
     "build:all": "webpack --mode=production --config webpack.all.js",
     "build:node": "webpack --config webpack.node.js",
     "build:node:dev": "webpack --mode=development --config webpack.node.js",
     "build:samples": "webpack --config webpack.samples.js",
-    "dev:bmd": "webpack serve --config webpack.dev.js",
     "dev:bootstrap": "webpack serve --config webpack.dev.js --env type=bootstrap",
     "dev:jquery": "webpack serve --config webpack.dev.js --env type=jquery",
     "dev:react": "webpack serve --config webpack.dev.js --env type=react",
@@ -122,5 +113,5 @@
       "url": "http://valentinohudhra.com/"
     }
   ],
-  "packageManager": "pnpm@10.15.0+sha512.486ebc259d3e999a4e8691ce03b5cac4a71cbeca39372a9b762cb500cfdf0873e2cb16abe3d951b1ee2cf012503f027b98b6584e4df22524e0c7450d9ec7aa7b"
+  "packageManager": "pnpm@10.21.0+sha512.da3337267e400fdd3d479a6c68079ac6db01d8ca4f67572083e722775a796788a7a9956613749e000fac20d424b594f7a791a5f4e2e13581c5ef947f26968a40"
 }

package/src/template/Item.js

@@ -24,6 +24,8 @@ export default class Item {
     this._styles = [
       'heading',
       'invisible',
+      'invisibleInPresent',
+      'invisibleInEdit',
       'invisibleGroup',
       'stars',
       'commentOn',
@@ -284,7 +286,7 @@ export default class Item {
 
   /**
    * @return {Object} never available for Text item type.
-   * The property value pairs corresponds to predicate and objects in required tripples.
+   * The property value pairs corresponds to predicate and objects in required triples.
    */
   getConstraints(original) {
     const constr = this.getSource(original).constraints;

package/src/template/ItemStore.js

@@ -13,7 +13,7 @@ const deepMerge = (source1, source2) => {
   }
 
   if (Array.isArray(source1) && Array.isArray(source2)) {
-    return [].concat(origSource[key], extSource[key]);
+    return [].concat(source1, source2);
   }
 
   if (typeof source1 === 'object' && typeof source2 === 'object') {
@@ -111,7 +111,7 @@ export default class ItemStore {
           const child = children[j];
           if (child.id === from || child['@id'] === from) {
             child.id = to;
-            delete child['@id']; // Clean up backward compatability.
+            delete child['@id']; // Clean up backward compatibility.
           }
           if (child.content) {
             renameInGroup(child);

package/src/template/OntologyStore.js

@@ -1,4 +1,4 @@
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 
 export default class OntologyStore {
   /**

package/src/utils.js

@@ -1,5 +1,5 @@
 import moment from 'moment';
-import { cloneDeep } from 'lodash';
+import { cloneDeep } from 'lodash-es';
 import system from './model/system';
 
 const getLocalizedValue = (hash, locale) => {

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

@@ -28,6 +28,7 @@ export default class View {
     this.styleCls = params.styleCls || '';
     this.truncateLimit = params.truncateLimit !== undefined ? params.truncateLimit : 10;
     this.truncate = params.truncate !== undefined ? params.truncate : false;
+    this.headingLevel = params.headingLevel || 2;
     if (Array.isArray(params.filterPredicates)) {
       this.filterPredicates =
         params.filterPredicates.reduce((prev, current) => { prev[current] = true; return prev; }, {});
@@ -329,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/choice.js

@@ -60,7 +60,7 @@ editors.itemtype('choice').choices('none').register((fieldDiv, binding, context)
     // reference to the wrong setValue function later on.
     const setValue = context.setValue;
 
-    const $search = jquery(`<button ${disabledAttr} class="btn btn-primary bmd-btn-fab bmd-btn-fab-sm browseChoices" type="button">`)
+    const $search = jquery(`<button ${disabledAttr} class="btn btn-primary browseChoices" type="button">`)
       .attr('title', context.view.messages.edit_browse)
       .appendTo(fieldDiv);
     if (context.chooser && context.chooser.supportsInlineCreate &&
@@ -111,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 ${disabledAttr} class="btn btn-default bmd-btn-fab bmd-btn-fab-sm` +
+          const $button = jquery(`<button ${disabledAttr} class="btn btn-default` +
             ' browseChoices" type="button">')
             .attr('title', context.view.messages.edit_upgrade)
             .click(() => {

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/jquery/labels.js

@@ -12,8 +12,9 @@ renderingContext.renderPresenterLabel = (rowNode, binding, item, context, labelR
     label = '';
   }
 
+  const headingElement = `h${context.view.headingLevel}`;
   const $labelDiv = item.hasStyle('heading') ?
-    jquery('<h2 class="rdformsLabel" tabindex="0">').text(label).appendTo(rowNode) :
+    jquery(`<${headingElement} 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));

package/src/view/jquery/text.js

@@ -1,4 +1,4 @@
-import { escape } from 'lodash';
+import { escape } from 'lodash-es';
 import { getDatePresentation, fromDuration } from '../viewUtils';
 import renderingContext from '../renderingContext';
 import utils from '../../utils';

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,17 +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') ?
-    <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.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) => {
@@ -154,13 +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;
-    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 HeadingElement = `h${context.view.headingLevel}`;
+    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;
@@ -205,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/renderingContext.js

@@ -234,7 +234,7 @@ const renderingContext = {
     const alts = {};
 
     // Detect the various available languages
-    // noLanguage - a binding exists with no lanugage set
+    // noLanguage - a binding exists with no language set
     // best - a binding exists with the current locale
     // close - a binding exists with a language close to the current locale,
     //        e.g. en_US when the locale is en or the opposite
@@ -340,6 +340,7 @@ const groupPresenter = (fieldDiv, binding, context) => {
     popupOnLabel: context.view.popupOnLabel,
     truncate: context.view.truncate,
     truncateLimit: context.view.truncateLimit,
+    headingLevel: context.view.headingLevel,
     includeLevel: context.view.includeLevel, // Copied from groupEditor, was this.includeLevel but that 'this' does not make sense here
   }, fieldDiv);
 };
@@ -361,6 +362,7 @@ const groupEditor = (fieldDiv, binding, context) => {
     showDescription: context.view.showDescription,
     truncate: context.view.truncate,
     truncateLimit: context.view.truncateLimit,
+    headingLevel: context.view.headingLevel,
     includeLevel: context.view.includeLevel,
   }, fieldDiv);
   context.view._subEditors.push(subView);

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;
-}
+}