@pinuts/bsr-uikit-relaunch 0.4.2 → 0.4.4

package/dist/hooks/withFieldGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withFieldGroup.d.ts","sourceRoot":"","sources":["../../src/hooks/withFieldGroup.jsx"],"names":[],"mappings":";AAkDA,uDAAyC,UAAK,uBAqR7C;kBAtUwE,OAAO"}
+{"version":3,"file":"withFieldGroup.d.ts","sourceRoot":"","sources":["../../src/hooks/withFieldGroup.jsx"],"names":[],"mappings":";AAmDA,uDAAyC,UAAK,uBAwT7C;kBA1WoF,OAAO"}

package/dist/hooks/withFieldGroup.js

@@ -14,6 +14,7 @@ var _Verify = _interopRequireDefault(require("../icons/Verify.jsx"));
 var _InfoOutline = _interopRequireDefault(require("../icons/InfoOutline.jsx"));
 var _isWindowAvailable = require("../utils/isWindowAvailable.js");
 var _reviewValue = require("../utils/reviewValue.js");
+var _ReviewLayoutContext = _interopRequireDefault(require("../shared/FormWidget/ReviewLayoutContext.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -76,8 +77,12 @@ const withFieldGroup = FieldComponent => props => {
     values,
     errors,
     meta,
-    showToprow = true
+    showToprow = true,
+    reviewAppendix
   } = props;
+  const {
+    inList: isInReviewList
+  } = (0, _react.useContext)(_ReviewLayoutContext.default);
   const hookedFieldIds = useUniqueIds(prefix);
   const [textLength, setTextLength] = (0, _react.useState)(value?.length || 0);
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
@@ -95,12 +100,17 @@ const withFieldGroup = FieldComponent => props => {
   const showIsInvalid = isInvalid && !viewMode && validationMessage;
   const showIsSuccess = meta?.touched && !isInvalid && (!isRequired || isRequired && value && value.length > 0);
   const tooltipRef = (0, _react.useRef)(null);
+  // Info-Icon direkt hinter dem Label statt rechts neben dem Success-Icon (z.B. FileUploadField)
+  const infoNextToLabel = Boolean(FieldComponent.formFieldConfig?.infoNextToLabel);
   (0, _react.useEffect)(() => {
     const adjustTooltipPosition = () => {
       if (tooltipRef.current) {
         const tooltipElement = tooltipRef.current;
         const rect = tooltipElement.getBoundingClientRect();
-        tooltipElement.classList.add('adjustRight' || '');
+        // Neben dem Label nach rechts aufklappen, sonst ragt der Tooltip links aus dem Formular
+        if (!infoNextToLabel) {
+          tooltipElement.classList.add('adjustRight');
+        }
         // Adjust vertical position
         if (rect.bottom > 200) {
           tooltipElement.classList.remove('bottom' || '');
@@ -118,15 +128,10 @@ const withFieldGroup = FieldComponent => props => {
         window.removeEventListener('resize', adjustTooltipPosition);
       };
     }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const infoRow = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement("div", {
-    className: 'infoRow'
-  }, showIsSuccess && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'success'
-  }, /*#__PURE__*/_react.default.createElement(_Verify.default, {
-    width: 18,
-    height: 18
-  })), infoText && /*#__PURE__*/_react.default.createElement("div", {
+  const infoIcon = (0, _react.useMemo)(() => infoText && /*#__PURE__*/_react.default.createElement("div", {
     className: 'info'
   }, /*#__PURE__*/_react.default.createElement(_InfoOutline.default, {
     width: 18,
@@ -135,7 +140,15 @@ const withFieldGroup = FieldComponent => props => {
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: 'tooltip opacity-100',
     ref: tooltipRef
-  }, /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, translateMessage(infoText))))), [showIsSuccess, infoText, tooltipRef, translateMessage]);
+  }, /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, translateMessage(infoText)))), [infoText, tooltipRef, translateMessage]);
+  const infoRow = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement("div", {
+    className: 'infoRow'
+  }, showIsSuccess && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'success'
+  }, /*#__PURE__*/_react.default.createElement(_Verify.default, {
+    width: 18,
+    height: 18
+  })), !infoNextToLabel && infoIcon), [showIsSuccess, infoNextToLabel, infoIcon]);
   const helpTextDiv = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement("div", {
     id: fieldIds.helpText,
     className: getClassNames(['helperText', classNameHelperText])
@@ -154,8 +167,12 @@ const withFieldGroup = FieldComponent => props => {
     }) : null;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: 'topRow'
-    }, labelComponent, infoRow);
-  }, [infoRow, fieldIds.label, fieldIds.fieldId, isInvalid, isRequired, isFocused, label, viewMode, stepId]);
+    }, infoNextToLabel && infoIcon ? /*#__PURE__*/_react.default.createElement("div", {
+      className: 'labelWithInfo'
+    }, labelComponent, /*#__PURE__*/_react.default.createElement("div", {
+      className: 'infoRow'
+    }, infoIcon)) : labelComponent, infoRow);
+  }, [infoRow, infoNextToLabel, infoIcon, fieldIds.label, fieldIds.fieldId, isInvalid, isRequired, isFocused, label, viewMode, stepId]);
   if (viewMode && hideEmptyValues && isHiddenByEmptyValues(value, isInvalid, components, values, errors)) {
     return null;
   }
@@ -169,23 +186,34 @@ const withFieldGroup = FieldComponent => props => {
       ariaAttributes: ariaAttributes
     }));
 
+    // Im Abschnitts-<dl> sind nur dt/dd-Paare erlaubt; ohne Label gibt es kein Paar
+    if (!label && isInReviewList) {
+      return null;
+    }
+
     // Komponenten ohne Label (z.B. TextBox) bleiben so, wie sie im Formular stehen
     if (!label) {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: getClassNames(['formInput', formGroupClassName])
       }, reviewValue);
     }
-    return /*#__PURE__*/_react.default.createElement("dl", {
-      className: getClassNames(['pi-review-item', formGroupClassName])
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: 'pi-review-pair'
+    const reviewPair = /*#__PURE__*/_react.default.createElement("div", {
+      className: getClassNames(['pi-review-pair', isInReviewList && formGroupClassName])
     }, /*#__PURE__*/_react.default.createElement("dt", {
       id: fieldIds.label
     }, /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, translateMessage(label))), /*#__PURE__*/_react.default.createElement("dd", null, isEmptyForReview(FieldComponent, value, props) ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
       "aria-hidden": "true"
     }, '—'), /*#__PURE__*/_react.default.createElement("span", {
       className: "sr-only"
-    }, t('bsrItems.review.empty'))) : reviewValue)));
+    }, t('bsrItems.review.empty'))) : reviewValue, reviewAppendix && /*#__PURE__*/_react.default.createElement("div", {
+      className: "pi-review-appendix"
+    }, /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, reviewAppendix))));
+    if (isInReviewList) {
+      return reviewPair;
+    }
+    return /*#__PURE__*/_react.default.createElement("dl", {
+      className: getClassNames(['pi-review-item', formGroupClassName])
+    }, reviewPair);
   }
   return /*#__PURE__*/_react.default.createElement(OuterComponent, {
     className: getClassNames([withRowCols && 'row', 'formInput', isInvalid && 'error', formGroupClassName])