Merge remote-tracking branch 'origin/8.4' into 9.0

# Conflicts:
#	Build/Jenkins/update-neos-ui-compiled.sh
#	Classes/Controller/BackendController.php
#	README.md
#	Tests/IntegrationTests/TestDistribution/composer.json
#	composer.json
#	packages/neos-ui-views/src/NodeInfoView/index.js

Author: markusguenther

Build/Jenkins/update-neos-ui-compiled.sh

@@ -52,7 +52,7 @@ cd tmp_compiled_pkg
 git add Resources/Public/
 git commit -m "Compile Neos UI - $GIT_SHA1" || true
 
-if [[ "$GIT_BRANCH" == "origin/7.3" || "$GIT_BRANCH" == "origin/8.0" || "$GIT_BRANCH" == "origin/8.1"  || "$GIT_BRANCH" == "origin/8.2"  || "$GIT_BRANCH" == "origin/8.3" || "$GIT_BRANCH" == "origin/9.0" ]]; then
+if [[ "$GIT_BRANCH" == "origin/7.3" || "$GIT_BRANCH" == "origin/8.0" || "$GIT_BRANCH" == "origin/8.1" || "$GIT_BRANCH" == "origin/8.2" || "$GIT_BRANCH" == "origin/8.3" || "$GIT_BRANCH" == "origin/8.4" || "$GIT_BRANCH" == "origin/9.0" ]]; then
     echo "Git branch $GIT_BRANCH found, pushing to this branch."
     git push origin HEAD:${GIT_BRANCH#*/}
 fi

README.md

@@ -11,18 +11,21 @@ Release roadmap is [available here](https://www.neos.io/features/release-process
 
 That means:
 * All bugfixes go to the lowest maintained branch
-* All new features go only to the 8.3 and 9.0 branch
+* All new features go only to the 8.4 and 9.0 branch
 * New minor and major releases are made in sync with Neos/Flow. Bugfix releases may be available independently
 
+
 ### Currently maintained versions
 
 * NeosCMS version 7.3: branch 7.3
 * NeosCMS version 8.0: branch 8.0
 * NeosCMS version 8.1: branch 8.1
 * NeosCMS version 8.2: branch 8.2
 * NeosCMS version 8.3: branch 8.3
+* NeosCMS version 8.3: branch 8.4
 * NeosCMS version 9.0: branch 9.0
-* latest development happens currently in the 8.3 and 9.0 branch
+* latest development happens currently in the 8.4 and 9.0 branch
+
 
 #### Releases with just security updates
 
@@ -141,7 +144,9 @@ git checkout 8.2 && git fetch && git reset --hard origin/8.2 && git merge --no-f
 # review and `git commit`
 git checkout 8.3 && git fetch && git reset --hard origin/8.3 && git merge --no-ff --no-commit origin/8.2
 # review and `git commit`
-git checkout 9.0 && git fetch && git reset --hard origin/9.0 && git merge --no-ff --no-commit origin/8.3
+git checkout 8.4 && git fetch && git reset --hard origin/8.4 && git merge --no-ff --no-commit origin/8.3
+# review and `git commit`
+git checkout 9.0 && git fetch && git reset --hard origin/9.0 && git merge --no-ff --no-commit origin/8.4
 # review and `git commit`
 ```
 

packages/neos-ui-editors/src/Editors/Range/index.js

@@ -41,8 +41,9 @@ class RangeEditor extends PureComponent {
     handleChange = event => {
         const {options} = this.props;
         const {target} = event;
+        const useParseInt = (options.step || 1) % 1 === 0;
 
-        let value = parseInt(target.value, 10);
+        let value = useParseInt ? parseInt(target.value, 10) : parseFloat(target.value, 10);
         if (isNaN(value)) {
             return;
         }
@@ -64,6 +65,10 @@ class RangeEditor extends PureComponent {
         const options = {...this.constructor.defaultProps.options, ...this.props.options};
         const {value, highlight} = this.props;
         const valueAsString = value === 0 ? '0' : (value || '');
+        // Calculate the width of the input field based on the length of the min, max and step values
+        const numLength = value => value.toString().length;
+        const additionalStepLength = numLength(options.step) - 1;
+        const styleWidth = Math.max(numLength(options.min), numLength(options.max)) + additionalStepLength + 'ch';
 
         return (
             <div
@@ -94,7 +99,7 @@ class RangeEditor extends PureComponent {
                             onKeyPress={this.onKeyPress}
                             onChange={this.handleChange}
                             value={valueAsString}
-                            style={ {width: `${options.max.toString().length}ch`} }
+                            style={ {width: styleWidth} }
                             disabled={options.disabled}
                         />
                         {options.unit}

packages/neos-ui-views/src/NodeInfoView/index.js

@@ -36,6 +36,8 @@ export default class NodeInfoView extends PureComponent {
         };
 
         const nodeType = node?.nodeType;
+        // Insert soft hyphens after dots and colon to make the node type more readable
+        const hyphenatedNodeTypeName = nodeType.replace(/([.:])/g, '$1\u00AD');
 
         return (
             <ul className={style.nodeInfoView}>
@@ -65,7 +67,7 @@ export default class NodeInfoView extends PureComponent {
                 </li>
                 <li className={style.nodeInfoView__item} title={nodeType}>
                     <div className={style.nodeInfoView__title}>{i18nRegistry.translate('type', 'Type', {}, 'Neos.Neos')}</div>
-                    <NodeInfoViewContent>{nodeType}</NodeInfoViewContent>
+                    <NodeInfoViewContent>{hyphenatedNodeTypeName}</NodeInfoViewContent>
                 </li>
             </ul>
         );

packages/neos-ui-views/src/NodeInfoView/style.module.css

@@ -30,4 +30,6 @@
 .nodeInfoView__content {
     font-size: 13px;
     color: var(--colors-ContrastBright);
+    hyphenate-character: '';
+    word-wrap: break-word;
 }

packages/neos-ui/src/Containers/RightSideBar/Inspector/index.js

@@ -37,7 +37,7 @@ import style from './style.module.css';
         const shouldShowUnappliedChangesOverlay = isDirty && !shouldPromptToHandleUnappliedChanges;
         const shouldShowSecondaryInspector = selectors.UI.Inspector.shouldShowSecondaryInspector(state);
         const focusedNode = selectors.CR.Nodes.focusedSelector(state);
-        const parentNode = selectors.CR.Nodes.nodeByContextPath(state)(focusedNode.parent);
+        const parentNode = focusedNode ? selectors.CR.Nodes.nodeByContextPath(state)(focusedNode.parent) : null;
 
         return {
             focusedNode,

packages/neos-ui/src/Containers/style.module.css

@@ -57,22 +57,26 @@
 /* Scrollbar styles for appContainer, its siblings (needed for React portals) and also for contentcanvas' body */
 :global(#appContainer ::-webkit-scrollbar),
 :global(#appContainer ~ * ::-webkit-scrollbar),
+:global(#appContainer ~ *::-webkit-scrollbar),
 :global(body::-webkit-scrollbar) {
     width: 4px;
     height: 4px;
 }
 :global(#appContainer ::-webkit-scrollbar-track),
 :global(#appContainer ~ * ::-webkit-scrollbar-track),
+:global(#appContainer ~ *::-webkit-scrollbar-track),
 :global(body::-webkit-scrollbar-track) {
     background-color: transparent;
 }
 :global(#appContainer ::-webkit-scrollbar-thumb),
 :global(#appContainer ~ * ::-webkit-scrollbar-thumb),
+:global(#appContainer ~ *::-webkit-scrollbar-thumb),
 :global(body::-webkit-scrollbar-thumb) {
     background-color: var(--colors-ContrastBright);
 }
 :global(#appContainer ::-webkit-scrollbar-corner),
 :global(#appContainer ~ * ::-webkit-scrollbar-corner),
+:global(#appContainer ~ *::-webkit-scrollbar-corner),
 :global(body::-webkit-scrollbar-corner) {
     background-color: var(--colors-ContrastDark);
 }

packages/react-ui-components/src/Tooltip/style.module.css

@@ -33,6 +33,7 @@
     background: var(--colors-ContrastDarkest);
     color: white;
     box-shadow: 0px 0px 10px rgba(125, 125, 125, .2);
+    overflow-wrap: break-word;
 }
 
 .tooltip--asError .tooltip--inner {