@pinuts/bsr-uikit-relaunch 0.3.8 → 0.4.2

package/dist/items/FileUploadField/FileUploadField.js

@@ -0,0 +1,271 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _formBuilder = require("@pinuts/form-builder");
+var _FormFieldChildPropTypes = _interopRequireDefault(require("../FormFieldWrapper/FormFieldChildPropTypes.jsx"));
+var _FormFieldWrapper = _interopRequireDefault(require("../FormFieldWrapper/FormFieldWrapper.jsx"));
+var _withFieldGroup = _interopRequireDefault(require("../../hooks/withFieldGroup.jsx"));
+var _Close = _interopRequireDefault(require("../../icons/Close.jsx"));
+var _formatFileSize = require("../../utils/files/formatFileSize.js");
+var _validateFiles = require("../../utils/files/validateFiles.js");
+var _ReviewValueList = _interopRequireDefault(require("../ReviewValue/ReviewValueList.jsx"));
+var _uploadedFileStore = require("./uploadedFileStore.js");
+var _FileUploadFieldModule = _interopRequireDefault(require("./FileUploadField.module.scss"));
+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; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // form-builder
+const {
+  getClassNames
+} = _formBuilder.utils;
+const UNLIMITED_FILES = -1;
+const UPLOAD_ERROR = 'uploadError';
+
+// accept darf in der Config auch als Liste stehen ([".pdf", ".png"])
+const normalizeAccept = accept => Array.isArray(accept) ? accept.join(',') : accept;
+const FileUploadField = _ref => {
+  let {
+    className,
+    inputProps = {},
+    value,
+    onChange = () => {},
+    ariaAttributes,
+    field = {},
+    fieldIds,
+    isInvalid,
+    readOnly,
+    disabled,
+    viewMode,
+    reviewMode,
+    // Ziel-URL des Uploads. Ohne sie kann nicht hochgeladen werden.
+    uploadUrl,
+    // 1 = eine Datei, -1 = beliebig viele, > 1 = höchstens so viele
+    numFiles = 1,
+    accept,
+    // Maximale Dateigröße in Bytes. maxFileSize ist der Name in der FormConfig,
+    // maxSize der aus der Kehrenbürger-App - beide sind erlaubt.
+    maxSize,
+    maxFileSize: maxFileSizeConfig,
+    buttonText = 'bsrItems.fileUploadField.buttonText',
+    uploadBtnText = 'bsrItems.fileUploadField.uploadBtn',
+    placeholder = 'bsrItems.fileUploadField.placeholder'
+  } = _ref;
+  const [t] = (0, _reactI18next.useTranslation)();
+  const fileInputRef = (0, _react.useRef)(null);
+  const readyForUploadRef = (0, _react.useRef)(null);
+
+  // Datei ist ausgewählt, aber noch nicht hochgeladen
+  const [pendingFile, setPendingFile] = (0, _react.useState)(null);
+  const [isUploading, setIsUploading] = (0, _react.useState)(false);
+  const [errorMsg, setErrorMsg] = (0, _react.useState)('');
+  const [feedbackMsg, setFeedbackMsg] = (0, _react.useState)('');
+
+  // field.name (der Config-Key) ist über Remounts stabil und trägt den Store.
+  // Die Basic-Variante ohne FormFieldWrapper hat kein field.name - dann auf die
+  // eindeutige fieldId ausweichen, damit sich mehrere Felder nicht überschreiben.
+  const fieldKey = field.name || fieldIds?.fieldId;
+  const usedViewMode = readOnly || disabled || viewMode;
+  const usedAccept = normalizeAccept(accept);
+  const maxFileSize = Number(maxSize ?? maxFileSizeConfig) || undefined;
+  const maxFiles = numFiles === UNLIMITED_FILES ? Infinity : Math.max(Number(numFiles) || 1, 1);
+
+  // Der Formularwert sind die Ticket-Ids; Name/Größe kommen aus dem Store dazu
+  const tickets = (0, _react.useMemo)(() => Array.isArray(value) ? value : [], [value]);
+  const files = (0, _react.useMemo)(() => tickets.map(ticket => (0, _uploadedFileStore.getUploadedFile)(fieldKey, ticket)), [tickets, fieldKey]);
+  const announce = (0, _react.useCallback)((error, feedback) => {
+    setErrorMsg(error || '');
+    setFeedbackMsg(feedback || '');
+  }, []);
+  const onFileSelect = (0, _react.useCallback)(event => {
+    const selectedFile = event.target.files?.[0];
+
+    // gleiche Datei soll erneut auswählbar sein
+    event.target.value = '';
+    if (!selectedFile) {
+      return;
+    }
+    if (files.length >= maxFiles) {
+      announce(t('bsrItems.fileUploadField.errors.uploadNumFiles', {
+        numFiles: maxFiles
+      }));
+      return;
+    }
+    if (files.some(file => file.name === selectedFile.name)) {
+      announce(t('bsrItems.fileUploadField.errors.uploadDuplicateFilename', {
+        filename: selectedFile.name
+      }));
+      return;
+    }
+    const {
+      rejectedFiles
+    } = (0, _validateFiles.validateFiles)([selectedFile], {
+      accept: usedAccept,
+      maxFileSize
+    });
+    if (rejectedFiles.length) {
+      const isSizeError = rejectedFiles[0].reason === 'size';
+      announce(t(isSizeError ? 'bsrItems.fileUploadField.errors.uploadFileTooLarge' : 'bsrItems.fileUploadField.errors.uploadInvalidType', {
+        filename: selectedFile.name,
+        maxSize: (0, _formatFileSize.formatFileSize)(maxFileSize),
+        accept: usedAccept
+      }));
+      return;
+    }
+    announce();
+    setPendingFile(selectedFile);
+    readyForUploadRef.current?.focus();
+  }, [announce, files, maxFileSize, maxFiles, t, usedAccept]);
+  const uploadPendingFile = (0, _react.useCallback)(async () => {
+    if (!pendingFile || isUploading) {
+      return;
+    }
+    if (!uploadUrl) {
+      announce(t(`bsrItems.fileUploadField.errors.${UPLOAD_ERROR}`));
+      return;
+    }
+    setIsUploading(true);
+    announce('', t('bsrItems.fileUploadField.isUploading', {
+      filename: pendingFile.name
+    }));
+    const formData = new FormData();
+    formData.append('attrName', fieldKey);
+    formData.append('file', pendingFile);
+    try {
+      // Content-Type setzt der Browser selbst, inklusive multipart-boundary
+      const response = await fetch(uploadUrl, {
+        method: 'POST',
+        headers: {
+          'X-CSRF-Safe': 'yes'
+        },
+        body: formData
+      });
+      const json = await response.json().catch(() => undefined);
+      const uploadedFile = json?.data?.file;
+      if (!json?.success || !uploadedFile?.ticket) {
+        const errorCode = json?.data?.error || UPLOAD_ERROR;
+
+        // Server meldet "zu groß", aber ohne konfiguriertes Limit kennen wir
+        // die Grenze nicht - dann die Variante ohne "maximal 0 B" nutzen.
+        const messageKey = errorCode === 'uploadFileTooLarge' && !maxFileSize ? 'uploadFileTooLargeNoLimit' : errorCode;
+        announce(t(`bsrItems.fileUploadField.errors.${messageKey}`, {
+          filename: pendingFile.name,
+          maxSize: maxFileSize ? (0, _formatFileSize.formatFileSize)(maxFileSize) : '',
+          accept: usedAccept
+        }));
+        return;
+      }
+      (0, _uploadedFileStore.rememberUploadedFile)(fieldKey, {
+        ticket: uploadedFile.ticket,
+        name: uploadedFile.name || pendingFile.name,
+        size: uploadedFile.size ?? pendingFile.size
+      });
+      onChange([...tickets, uploadedFile.ticket]);
+      announce('', t('bsrItems.fileUploadField.uploadSuccessful', {
+        filename: pendingFile.name
+      }));
+      setPendingFile(null);
+    } catch {
+      announce(t(`bsrItems.fileUploadField.errors.${UPLOAD_ERROR}`, {
+        filename: pendingFile.name
+      }));
+    } finally {
+      setIsUploading(false);
+    }
+  }, [announce, fieldKey, isUploading, maxFileSize, onChange, pendingFile, t, tickets, uploadUrl, usedAccept]);
+  const removeFile = (0, _react.useCallback)(ticket => {
+    const removed = (0, _uploadedFileStore.getUploadedFile)(fieldKey, ticket);
+    (0, _uploadedFileStore.forgetUploadedFile)(fieldKey, ticket);
+    onChange(tickets.filter(entry => entry !== ticket));
+    announce('', t('bsrItems.fileUploadField.fileRemoved', {
+      filename: removed.name
+    }));
+  }, [announce, fieldKey, onChange, t, tickets]);
+  const fileList = files.length ? /*#__PURE__*/_react.default.createElement("ul", {
+    className: _FileUploadFieldModule.default.fileList,
+    "aria-label": t('bsrItems.fileUploadField.fileListLabel')
+  }, files.map((file, index) => /*#__PURE__*/_react.default.createElement("li", {
+    key: file.ticket,
+    className: _FileUploadFieldModule.default.fileItem,
+    "aria-setsize": files.length,
+    "aria-posinset": index + 1
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _FileUploadFieldModule.default.fileInfo
+  }, `${file.name} (${(0, _formatFileSize.formatFileSize)(file.size)})`), !usedViewMode && /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: _FileUploadFieldModule.default.removeButton,
+    onClick: () => removeFile(file.ticket),
+    title: t('bsrItems.fileUploadField.removeFile'),
+    "aria-label": t('bsrItems.fileUploadField.removeFileAria', {
+      filename: file.name
+    })
+  }, /*#__PURE__*/_react.default.createElement(_Close.default, {
+    width: 20,
+    height: 20,
+    fill: 'currentColor',
+    stroke: 'currentColor',
+    "aria-hidden": "true"
+  }))))) : /*#__PURE__*/_react.default.createElement("span", {
+    className: _FileUploadFieldModule.default.placeholder
+  }, t(placeholder));
+  if (viewMode) {
+    return fileList;
+  }
+  if (reviewMode) {
+    return /*#__PURE__*/_react.default.createElement(_ReviewValueList.default, {
+      items: files.map(file => `${file.name} (${(0, _formatFileSize.formatFileSize)(file.size)})`)
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: getClassNames([_FileUploadFieldModule.default.uploadContainer, isInvalid && _FileUploadFieldModule.default.isInvalid, usedViewMode && _FileUploadFieldModule.default.isDisabled, className]),
+    role: "group",
+    "aria-label": t('bsrItems.fileUploadField.groupLabel')
+  }, fileList, !usedViewMode && files.length < maxFiles && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: getClassNames(['btn', 'btn-white', _FileUploadFieldModule.default.uploadButton]),
+    onClick: () => fileInputRef.current?.click()
+  }, t(buttonText)), /*#__PURE__*/_react.default.createElement("input", _extends({}, ariaAttributes, inputProps, {
+    ref: fileInputRef,
+    id: fieldIds?.fieldId,
+    type: "file",
+    className: _FileUploadFieldModule.default.uploadInput,
+    accept: usedAccept,
+    onChange: onFileSelect,
+    readOnly: false,
+    disabled: false
+  }))), pendingFile && !usedViewMode && /*#__PURE__*/_react.default.createElement("div", {
+    className: _FileUploadFieldModule.default.readyForUpload,
+    ref: readyForUploadRef,
+    tabIndex: -1
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _FileUploadFieldModule.default.fileInfo
+  }, t('bsrItems.fileUploadField.readyForUpload', {
+    filename: pendingFile.name
+  })), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: getClassNames(['btn', 'btn-orange']),
+    onClick: uploadPendingFile,
+    disabled: isUploading
+  }, t(uploadBtnText))), errorMsg && /*#__PURE__*/_react.default.createElement("div", {
+    className: _FileUploadFieldModule.default.rejectionMessage
+  }, errorMsg), !errorMsg && feedbackMsg && /*#__PURE__*/_react.default.createElement("div", {
+    className: _FileUploadFieldModule.default.feedbackMessage
+  }, feedbackMsg), /*#__PURE__*/_react.default.createElement("div", {
+    role: "status",
+    "aria-live": "polite",
+    "aria-atomic": "true",
+    className: _FileUploadFieldModule.default.srOnly
+  }, errorMsg || feedbackMsg));
+};
+FileUploadField.propTypes = {
+  ..._FormFieldChildPropTypes.default
+};
+const HigherOrderFileUploadField = (0, _withFieldGroup.default)(FileUploadField);
+const WrappedFileUploadField = props => /*#__PURE__*/_react.default.createElement(_FormFieldWrapper.default, props, /*#__PURE__*/_react.default.createElement(HigherOrderFileUploadField, props));
+(0, _formBuilder.registerComponent)('FileUploadField', WrappedFileUploadField);
+(0, _formBuilder.registerComponent)('FileUploadFieldBasic', HigherOrderFileUploadField);
+var _default = exports.default = HigherOrderFileUploadField;

package/dist/items/FileUploadField/uploadedFileStore.d.ts

@@ -0,0 +1,4 @@
+export function rememberUploadedFile(fieldKey: any, file: any): void;
+export function forgetUploadedFile(fieldKey: any, ticket: any): void;
+export function getUploadedFile(fieldKey: any, ticket: any): any;
+//# sourceMappingURL=uploadedFileStore.d.ts.map

package/dist/items/FileUploadField/uploadedFileStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uploadedFileStore.d.ts","sourceRoot":"","sources":["../../../src/items/FileUploadField/uploadedFileStore.js"],"names":[],"mappings":"AAaO,qEAEN;AAEM,qEAEN;AAEM,iEACiC"}

package/dist/items/FileUploadField/uploadedFileStore.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rememberUploadedFile = exports.getUploadedFile = exports.forgetUploadedFile = void 0;
+/**
+ * Der Formularwert eines FileUploadField ist nur die Liste der Ticket-Ids, die der
+ * Server beim Upload zurückgibt - Name und Größe der Datei stehen nicht darin.
+ * Für die Anzeige (auch auf einer Kontrollseite, die den FormBuilder neu mountet)
+ * werden diese Metadaten hier zum Ticket gemerkt.
+ *
+ * Lebensdauer ist der Seitenaufruf: nach einem Reload sind die Metadaten weg, die
+ * Tickets im Formularwert bleiben gültig.
+ */
+const uploadedFiles = new Map();
+const storeKey = (fieldKey, ticket) => `${fieldKey}:${ticket}`;
+const rememberUploadedFile = (fieldKey, file) => {
+  uploadedFiles.set(storeKey(fieldKey, file.ticket), file);
+};
+exports.rememberUploadedFile = rememberUploadedFile;
+const forgetUploadedFile = (fieldKey, ticket) => {
+  uploadedFiles.delete(storeKey(fieldKey, ticket));
+};
+exports.forgetUploadedFile = forgetUploadedFile;
+const getUploadedFile = (fieldKey, ticket) => uploadedFiles.get(storeKey(fieldKey, ticket)) || {
+  ticket,
+  name: ticket,
+  size: 0
+};
+exports.getUploadedFile = getUploadedFile;

package/dist/items/FormFieldWrapper/FormFieldChildPropTypes.d.ts

@@ -37,6 +37,7 @@ declare namespace FormFieldChildPropTypes {
     let readOnly: PropTypes.Requireable<boolean>;
     let disabled: PropTypes.Requireable<boolean>;
     let viewMode: PropTypes.Requireable<boolean>;
+    let reviewMode: PropTypes.Requireable<boolean>;
     let stepId: PropTypes.Requireable<string>;
     let hideEmptyValues: PropTypes.Requireable<boolean>;
     let key: PropTypes.Requireable<string>;

package/dist/items/FormFieldWrapper/FormFieldChildPropTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldChildPropTypes.d.ts","sourceRoot":"","sources":["../../../src/items/FormFieldWrapper/FormFieldChildPropTypes.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAAsB,YAAY"}
+{"version":3,"file":"FormFieldChildPropTypes.d.ts","sourceRoot":"","sources":["../../../src/items/FormFieldWrapper/FormFieldChildPropTypes.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAAsB,YAAY"}

package/dist/items/FormFieldWrapper/FormFieldChildPropTypes.js

@@ -52,6 +52,7 @@ const FormFieldChildPropTypes = {
   readOnly: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
   viewMode: _propTypes.default.bool,
+  reviewMode: _propTypes.default.bool,
   stepId: _propTypes.default.string,
   hideEmptyValues: _propTypes.default.bool,
   // DAS KOMMT AUS DEN PROPS DER KOMPONENTE

package/dist/items/GroupInputField/GroupInputField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupInputField.d.ts","sourceRoot":"","sources":["../../../src/items/GroupInputField/GroupInputField.jsx"],"names":[],"mappings":";AAqKA,uEAMC;kBA3KiB,OAAO"}
+{"version":3,"file":"GroupInputField.d.ts","sourceRoot":"","sources":["../../../src/items/GroupInputField/GroupInputField.jsx"],"names":[],"mappings":";AAsMA,uEAMC;kBA5MiB,OAAO"}

package/dist/items/GroupInputField/GroupInputField.js

@@ -14,6 +14,8 @@ var _FormFieldWrapper = _interopRequireDefault(require("../FormFieldWrapper/Form
 var _withFieldGroup = _interopRequireDefault(require("../../hooks/withFieldGroup.jsx"));
 var _getUikitClassNames = require("../../utils/getUikitClassNames.js");
 var _HTMLParserSanitized = require("../HTMLParserSanitized/HTMLParserSanitized.jsx");
+var _ReviewValueList = _interopRequireDefault(require("../ReviewValue/ReviewValueList.jsx"));
+var _reviewValue = require("../../utils/reviewValue.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /* eslint-disable jsx-a11y/role-supports-aria-props */ // form-builder
 // components
@@ -21,12 +23,23 @@ const {
   getClassNames
 } = _formBuilder.utils;
 const getIsSelected = (value, opt) => Array.isArray(value) ? value.includes(opt.value) : value === opt.value;
-const GroupInputField = _ref => {
+
+// Eine Gruppe mit genau einer Checkbox ist ein Ja/Nein-Feld
+const isSingleCheckbox = _ref => {
+  let {
+    multipleChoice = true,
+    options
+  } = _ref;
+  return multipleChoice && options?.length === 1;
+};
+const GroupInputField = _ref2 => {
   let {
     viewMode,
+    reviewMode,
     readOnly,
     inputProps = {},
     field = {},
+    label,
     options,
     skipOptions,
     inline,
@@ -38,7 +51,7 @@ const GroupInputField = _ref => {
     isInvalid,
     disabled,
     helpText
-  } = _ref;
+  } = _ref2;
   const [t] = (0, _reactI18next.useTranslation)();
   const inputOptions = (0, _useGetOptionList.default)(options, emptyOptionLabel, skipOptions);
   const inputClassNames = (0, _getUikitClassNames.getInputClassNames)(isInvalid, readOnly, disabled, inputProps.className, [['input']]);
@@ -59,8 +72,30 @@ const GroupInputField = _ref => {
     let label = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     return !label.includes(':') && !label.includes('<') ? t(label) : label;
   };
+  const selectedLabels = inputOptions.filter(opt => getIsSelected(value, opt)).map(opt => translateLabel(opt.label));
   if (viewMode) {
-    return /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, inputOptions.filter(opt => getIsSelected(value, opt)).map(opt => translateLabel(opt.label)).join(', '));
+    return /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, selectedLabels.join(', '));
+  }
+  if (reviewMode) {
+    // Einzelne Checkbox: Ja/Nein statt der Options-Beschriftung
+    if (isSingleCheckbox({
+      multipleChoice,
+      options
+    })) {
+      if (!selectedLabels.length) {
+        return t('bsrItems.review.no');
+      }
+      const optionLabel = selectedLabels[0];
+      const yes = t('bsrItems.review.yes');
+
+      // Den Options-Text nur ergänzen, wenn er nicht ohnehin das Feld-Label wiederholt
+      return optionLabel && optionLabel !== translateLabel(label || '') ? /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, `${yes} – ${optionLabel}`) : yes;
+    }
+
+    // Mehrfachauswahl als Liste, Einzelauswahl als einfacher Text
+    return multipleChoice ? /*#__PURE__*/_react.default.createElement(_ReviewValueList.default, {
+      items: selectedLabels
+    }) : /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, selectedLabels.join(''));
   }
   const ariaDescribedBy = [helpText && fieldIds.helpText, isInvalid && fieldIds.errorMessage].filter(Boolean).join(' ');
   return /*#__PURE__*/_react.default.createElement("div", null, inputOptions.length ? /*#__PURE__*/_react.default.createElement("ul", {
@@ -111,7 +146,9 @@ GroupInputField.propTypes = {
 };
 GroupInputField.formFieldConfig = {
   labelIsLegend: true,
-  isFieldset: true
+  isFieldset: true,
+  // Eine nicht angehakte Checkbox ist kein leerer Wert, sondern ein "Nein"
+  isEmptyReviewValue: (value, props) => isSingleCheckbox(props) ? false : (0, _reviewValue.isEmptyReviewValue)(value)
 };
 const HigherOrderGroupInputField = (0, _withFieldGroup.default)(GroupInputField);
 

package/dist/items/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/items/Modal/Modal.jsx"],"names":[],"mappings":";AAcA;;;;;;;;;;;kCAsGC;;;;;;;;;;;;;;;;;;;;;;;;;kBApHiB,OAAO;sBACH,YAAY"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/items/Modal/Modal.jsx"],"names":[],"mappings":";AAcA;;;;;;;;;;;kCA0GC;;;;;;;;;;;;;;;;;;;;;;;;;kBAxHiB,OAAO;sBACH,YAAY"}

package/dist/items/Modal/Modal.js

@@ -44,7 +44,12 @@ const Modal = (_ref, props) => {
     'aria-labelledby': uniqueId.fieldId
   }, {
     centered: true,
-    onEscapeKeyDown: noClose ? undefined : onHide,
+    onEscapeKeyDown: noClose ? undefined : onHide
+    // react-bootstrap renders the Modal in a portal on document.body,
+    // which escapes the consumer's `.bsr-uikit` wrapper. Adding the
+    // class here ensures the portaled dialog is still scoped/styled.
+    ,
+    dialogClassName: "bsr-uikit",
     className: _ModalModule.default.modalOuter,
     backdrop: "static",
     role: isAlert ? '   ' : 'dialog'

package/dist/items/MultiSelectField/MultiSelectField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectField.d.ts","sourceRoot":"","sources":["../../../src/items/MultiSelectField/MultiSelectField.jsx"],"names":[],"mappings":";AAuOA,wEAMC;kBA7OqD,OAAO"}
+{"version":3,"file":"MultiSelectField.d.ts","sourceRoot":"","sources":["../../../src/items/MultiSelectField/MultiSelectField.jsx"],"names":[],"mappings":";AAiPA,wEAMC;kBAvPqD,OAAO"}

package/dist/items/MultiSelectField/MultiSelectField.js

@@ -14,6 +14,7 @@ var _index = require("../../utils/index.js");
 var _FormFieldChildPropTypes = _interopRequireDefault(require("../FormFieldWrapper/FormFieldChildPropTypes.jsx"));
 var _FormFieldWrapper = _interopRequireDefault(require("../FormFieldWrapper/FormFieldWrapper.jsx"));
 var _withFieldGroup = _interopRequireDefault(require("../../hooks/withFieldGroup.jsx"));
+var _ReviewValueList = _interopRequireDefault(require("../ReviewValue/ReviewValueList.jsx"));
 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; }
@@ -40,6 +41,7 @@ const MultiSelectField = _ref => {
     readOnly,
     disabled,
     viewMode,
+    reviewMode,
     ariaAttributes = {},
     allowCustom,
     dark,
@@ -99,6 +101,13 @@ const MultiSelectField = _ref => {
   if (viewMode) {
     return selectedOptions.map(opt => translateLabel(opt.label)).join(', ');
   }
+
+  // Mehrfachauswahl: in der Review als Liste, damit Screenreader die Einträge einzeln ansagen
+  if (reviewMode) {
+    return /*#__PURE__*/_react.default.createElement(_ReviewValueList.default, {
+      items: selectedOptions.map(opt => translateLabel(opt.label))
+    });
+  }
   const wrapperClassNames = (0, _index.getFormControlClassNames)(isInvalid, readOnly, disabled, className, ['multiSelectField', dark && 'dark', field.className].filter(Boolean));
   return /*#__PURE__*/_react.default.createElement(_react2.ComboboxProvider, {
     value: searchInput,
@@ -134,8 +143,12 @@ const MultiSelectField = _ref => {
   })), !disableDropdown && filteredOptions.length > 0 && /*#__PURE__*/_react.default.createElement(_react2.ComboboxPopover, {
     portal: true,
     sameWidth: true,
-    gutter: 4,
-    className: "multiSelectFieldPopover"
+    gutter: 4
+    // ariakit renders the popover in a portal on document.body,
+    // which escapes the consumer's `.bsr-uikit` wrapper. Adding
+    // the class here keeps the portaled dropdown scoped/styled.
+    ,
+    className: "bsr-uikit multiSelectFieldPopover"
   }, filteredOptions.map(opt => /*#__PURE__*/_react.default.createElement(_react2.ComboboxItem, {
     key: opt.value,
     value: opt.value,

package/dist/items/NumberInputField/NumberInputField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInputField.d.ts","sourceRoot":"","sources":["../../../src/items/NumberInputField/NumberInputField.jsx"],"names":[],"mappings":";AAkLA,6EAAqE;kBAjLJ,OAAO"}
+{"version":3,"file":"NumberInputField.d.ts","sourceRoot":"","sources":["../../../src/items/NumberInputField/NumberInputField.jsx"],"names":[],"mappings":";AAmLA,6EAAqE;kBAlLJ,OAAO"}

package/dist/items/NumberInputField/NumberInputField.js

@@ -46,6 +46,7 @@ const NumberInputField = _ref => {
     readOnly,
     disabled,
     viewMode,
+    reviewMode,
     step = 1,
     min = 0,
     max = 1000,
@@ -74,7 +75,7 @@ const NumberInputField = _ref => {
     usedChangeHandler(parseFloat(numberValue, 10) - parseFloat(step, 10));
   }, [numberValue, usedChangeHandler, step]);
   const handleInputChange = event => usedChangeHandler(event.target.value);
-  if (viewMode) {
+  if (viewMode || reviewMode) {
     return numberValue;
   }
   const formControlClassNames = (0, _getUikitClassNames.getFormControlClassNames)(isInvalid, readOnly, disabled, className);

package/dist/items/ReviewValue/ReviewValueList.d.ts

@@ -0,0 +1,17 @@
+export default ReviewValueList;
+/**
+ * Mehrfachwerte in der Review (Checkbox-Gruppen, MultiSelect, hochgeladene Dateien).
+ * Als Liste ausgezeichnet, damit Screenreader die Anzahl der Einträge ansagen und
+ * jeder Wert einzeln angesteuert werden kann.
+ */
+declare function ReviewValueList({ items }: {
+    items: any;
+}): React.JSX.Element;
+declare namespace ReviewValueList {
+    namespace propTypes {
+        let items: PropTypes.Requireable<NonNullable<string | number>[]>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';
+//# sourceMappingURL=ReviewValueList.d.ts.map

package/dist/items/ReviewValue/ReviewValueList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReviewValueList.d.ts","sourceRoot":"","sources":["../../../src/items/ReviewValue/ReviewValueList.jsx"],"names":[],"mappings":";AAIA;;;;GAIG;AACH;;sBAgBC;;;;;;kBAzBiB,OAAO;sBACH,YAAY"}

package/dist/items/ReviewValue/ReviewValueList.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _HTMLParserSanitized = require("../HTMLParserSanitized/HTMLParserSanitized.jsx");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Mehrfachwerte in der Review (Checkbox-Gruppen, MultiSelect, hochgeladene Dateien).
+ * Als Liste ausgezeichnet, damit Screenreader die Anzahl der Einträge ansagen und
+ * jeder Wert einzeln angesteuert werden kann.
+ */
+const ReviewValueList = _ref => {
+  let {
+    items
+  } = _ref;
+  if (!items?.length) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement("ul", {
+    className: "pi-review-values"
+  }, items.map((item, index) =>
+  /*#__PURE__*/
+  // Werte können sich wiederholen (gleiche Label-Texte), daher Index im Key
+  // eslint-disable-next-line react/no-array-index-key
+  _react.default.createElement("li", {
+    key: `${index}-${item}`
+  }, /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, String(item)))));
+};
+ReviewValueList.propTypes = {
+  items: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))
+};
+var _default = exports.default = ReviewValueList;

package/dist/items/SectionSpinner/SectionSpinner.d.ts

@@ -49,6 +49,7 @@ declare namespace SectionSpinner {
         readOnly: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         viewMode: PropTypes.Requireable<boolean>;
+        reviewMode: PropTypes.Requireable<boolean>;
         stepId: PropTypes.Requireable<string>;
         hideEmptyValues: PropTypes.Requireable<boolean>;
         key: PropTypes.Requireable<string>;

package/dist/items/SectionSpinner/SectionSpinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionSpinner.d.ts","sourceRoot":"","sources":["../../../src/items/SectionSpinner/SectionSpinner.jsx"],"names":[],"mappings":";AAQA;;;;;;;sBAiCC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAzCiB,OAAO;sBACH,YAAY"}
+{"version":3,"file":"SectionSpinner.d.ts","sourceRoot":"","sources":["../../../src/items/SectionSpinner/SectionSpinner.jsx"],"names":[],"mappings":";AAQA;;;;;;;sBAiCC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAzCiB,OAAO;sBACH,YAAY"}

package/dist/items/SelectField/SelectField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../src/items/SelectField/SelectField.jsx"],"names":[],"mappings":";AAmHA,mEAMC;kBAzHiD,OAAO"}
+{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../src/items/SelectField/SelectField.jsx"],"names":[],"mappings":";AAoHA,mEAMC;kBA1HiD,OAAO"}

package/dist/items/SelectField/SelectField.js

@@ -31,7 +31,8 @@ const SelectField = _ref => {
     isInvalid,
     ariaAttributes = {},
     disabled,
-    viewMode
+    viewMode,
+    reviewMode
   } = _ref;
   const [t] = (0, _reactI18next.useTranslation)();
   const formControlClassNames = (0, _index.getFormControlClassNames)(isInvalid, readOnly, disabled, className, ['select', field.className].filter(Boolean));
@@ -51,7 +52,7 @@ const SelectField = _ref => {
       doItJustOnce.current = true; // doItJustOnce.current = true; // I'm not sure why this is needed here. But without it, it goes into an infinite loop!?
     }
   }, [field, emptyOption, selectOptions, helpers, doItJustOnce]);
-  if (viewMode) {
+  if (viewMode || reviewMode) {
     return selectOptions.filter(opt => opt.value === field?.value || opt.value !== '' && Array.isArray(field?.value) && field?.value?.includes(opt.value)).map(opt => translateLabel(opt.label)).join(', ');
   }
   return /*#__PURE__*/_react.default.createElement("select", _extends({}, field, ariaAttributes, inputProps, {

package/dist/items/StaticAlert/StaticAlert.d.ts

@@ -46,6 +46,7 @@ declare namespace StaticAlert {
         readOnly: import("prop-types").Requireable<boolean>;
         disabled: import("prop-types").Requireable<boolean>;
         viewMode: import("prop-types").Requireable<boolean>;
+        reviewMode: import("prop-types").Requireable<boolean>;
         stepId: import("prop-types").Requireable<string>;
         hideEmptyValues: import("prop-types").Requireable<boolean>;
         key: import("prop-types").Requireable<string>;

package/dist/items/StaticAlert/StaticAlert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StaticAlert.d.ts","sourceRoot":"","sources":["../../../src/items/StaticAlert/StaticAlert.jsx"],"names":[],"mappings":";AAKA;;;;;;;sBA4BC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAhCiB,OAAO"}
+{"version":3,"file":"StaticAlert.d.ts","sourceRoot":"","sources":["../../../src/items/StaticAlert/StaticAlert.jsx"],"names":[],"mappings":";AAKA;;;;;;;sBA4BC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAhCiB,OAAO"}

package/dist/items/TextAreaField/TextAreaField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../src/items/TextAreaField/TextAreaField.jsx"],"names":[],"mappings":";AAmFA,0EAA+D;kBAlF7C,OAAO"}
+{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../src/items/TextAreaField/TextAreaField.jsx"],"names":[],"mappings":";AAyFA,0EAA+D;kBAxF7C,OAAO"}