@abgov/jsonforms-components 2.79.3 → 2.79.4

package/index.esm.js

@@ -9321,7 +9321,9 @@ class ContextProviderClass {
       this.enumValues.set(key, () => data);
     };
     this.setup = props => {
-      var _props$isFormSubmitte, _props$showChangeButt, _props$autoPopulatedD, _this$selfProps;
+      var _this$selfProps, _this$selfProps2, _props$isFormSubmitte, _props$showChangeButt, _props$autoPopulatedD, _this$selfProps3;
+      const previousFileManagement = (_this$selfProps = this.selfProps) == null ? void 0 : _this$selfProps.fileManagement;
+      const previousData = (_this$selfProps2 = this.selfProps) == null ? void 0 : _this$selfProps2.data;
       this.selfProps = props;
       if (props.fileManagement) {
         const {
@@ -9370,24 +9372,27 @@ class ContextProviderClass {
         navigationTarget: props.navigationTarget,
         onNavigationChange: props.onNavigationChange
       });
-      if (HOST_CONTROLLED_KEYS.some(key => next[key] !== this.baseEnumerator[key])) {
+      const hostControlledChanged = HOST_CONTROLLED_KEYS.some(key => next[key] !== this.baseEnumerator[key]);
+      const fileManagementChanged = props.fileManagement !== previousFileManagement;
+      const dataChanged = props.data !== previousData;
+      if (hostControlledChanged || fileManagementChanged || dataChanged) {
         this.baseEnumerator = next;
       }
       return jsx(JsonFormContext.Provider, {
         value: this.baseEnumerator,
-        children: (_this$selfProps = this.selfProps) == null ? void 0 : _this$selfProps.children
+        children: (_this$selfProps3 = this.selfProps) == null ? void 0 : _this$selfProps3.children
       });
     };
     this.getContextProvider = () => {
-      var _this$selfProps2;
+      var _this$selfProps4;
       return jsx(JsonFormContext.Provider, {
         value: this.baseEnumerator,
-        children: (_this$selfProps2 = this.selfProps) == null ? void 0 : _this$selfProps2.children
+        children: (_this$selfProps4 = this.selfProps) == null ? void 0 : _this$selfProps4.children
       });
     };
     this.getFormUrl = () => {
-      var _this$selfProps3;
-      return (_this$selfProps3 = this.selfProps) == null ? void 0 : _this$selfProps3.formUrl;
+      var _this$selfProps5;
+      return (_this$selfProps5 = this.selfProps) == null ? void 0 : _this$selfProps5.formUrl;
     };
     this.getAxiosInterceptorConfig = axios => {
       const requestId = axios.interceptors.request.use(req => {
@@ -16172,6 +16177,366 @@ const ObjectArrayControl = props => {
   return content;
 };
 
+let _$1 = t => t,
+  _t$2;
+const GoAContextMenuIcon = props => {
+  return jsx(GoabIconButton, {
+    icon: props.type,
+    onClick: props.onClick,
+    title: props.title,
+    testId: props.testId,
+    size: "small",
+    disabled: props.disabled
+  });
+};
+const GoAContextMenu = styled.div(_t$2 || (_t$2 = _$1`
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  gap: var(--goa-space-2xs);
+
+  > .goa-icon-button {
+    cursor: pointer;
+    border-radius: var(--goa-border-radius-m);
+    padding: var(--goa-space-2xs);
+  }
+  > .goa-icon-button + .goa-icon-button {
+    margin-left: var(--goa-space-none);
+  }
+`));
+
+const DeleteFileModal = ({
+  isOpen,
+  title,
+  content,
+  onDelete,
+  onCancel
+}) => {
+  return jsx(GoabModal, {
+    testId: "delete-confirmation",
+    open: isOpen,
+    heading: title,
+    maxWidth: "640px",
+    actions: jsxs(GoabButtonGroup, {
+      alignment: "end",
+      children: [jsx(GoabButton, {
+        type: "secondary",
+        testId: "delete-cancel",
+        onClick: onCancel,
+        children: "Cancel"
+      }), jsx(GoabButton, {
+        type: "primary",
+        variant: "destructive",
+        testId: "delete-confirm",
+        onClick: onDelete,
+        children: "Delete"
+      })]
+    }),
+    children: content
+  });
+};
+
+let _2 = t => t,
+  _t$1,
+  _t2$1,
+  _t3,
+  _t4;
+const _excluded$3 = ["data", "path", "handleChange", "uischema"];
+const FileUploaderReview = props => {
+  return FileUploader(Object.assign({}, props, {
+    isStepperReview: true
+  }));
+};
+const FileUploader = _ref => {
+  var _enumerators$function, _enumerators$function2, _enumerators$function3, _uischema$options, _uischema$options2, _uischema$options3, _uischema$options4, _props$schema, _uischema$options$com, _uischema$options5, _uischema$options6, _uischema$options$com2, _uischema$options7, _uischema$options$com3, _uischema$options8, _uischema$options9;
+  let {
+      data,
+      path,
+      handleChange,
+      uischema
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  const enumerators = useContext(JsonFormContext);
+  const uploadTriggerFunction = enumerators == null || (_enumerators$function = enumerators.functions) == null ? void 0 : _enumerators$function.get('upload-file');
+  const uploadTrigger = uploadTriggerFunction && uploadTriggerFunction();
+  const downloadTriggerFunction = enumerators == null || (_enumerators$function2 = enumerators.functions) == null ? void 0 : _enumerators$function2.get('download-file');
+  const downloadTrigger = downloadTriggerFunction && downloadTriggerFunction();
+  const deleteTriggerFunction = enumerators == null || (_enumerators$function3 = enumerators.functions) == null ? void 0 : _enumerators$function3.get('delete-file');
+  const deleteTrigger = deleteTriggerFunction && deleteTriggerFunction();
+  const fileListValue = enumerators == null ? void 0 : enumerators.data.get('file-list');
+  const [loadingFileName, setLoadingFileName] = useState(undefined);
+  const [uploadError, setUploadError] = useState(undefined);
+  const countries = ['Argentina', 'Brazil', 'Canada', 'Denmark', 'Egypt', 'France', 'Greece', 'India', 'Japan', 'Kenya'];
+  enumerators == null || enumerators.addFormContextData('countries', countries);
+  const user = enumerators == null ? void 0 : enumerators.getFormContextData('user');
+  // eslint-disable-next-line
+  const fileList = fileListValue && fileListValue();
+  const {
+    required,
+    label,
+    i18nKeyPrefix,
+    visible
+  } = props;
+  const propertyId = i18nKeyPrefix;
+  const rootPath = typeof path === 'string' ? path.replace(/(\.\d+|\[\d+\])$/, '') : path;
+  const variant = (uischema == null || (_uischema$options = uischema.options) == null ? void 0 : _uischema$options.variant) || 'button';
+  const noDownloadButton = uischema == null || (_uischema$options2 = uischema.options) == null || (_uischema$options2 = _uischema$options2.format) == null ? void 0 : _uischema$options2.noDownloadButton;
+  const noDownloadButtonInReview = uischema == null || (_uischema$options3 = uischema.options) == null || (_uischema$options3 = _uischema$options3.format) == null || (_uischema$options3 = _uischema$options3.review) == null ? void 0 : _uischema$options3.noDownloadButton;
+  const noDeleteButton = uischema == null || (_uischema$options4 = uischema.options) == null || (_uischema$options4 = _uischema$options4.format) == null || (_uischema$options4 = _uischema$options4.review) == null ? void 0 : _uischema$options4.noDeleteButton;
+  const isArraySchema = (props == null || (_props$schema = props.schema) == null ? void 0 : _props$schema.type) === 'array' || Array.isArray(data);
+  const maxFiles = (_uischema$options$com = uischema == null || (_uischema$options5 = uischema.options) == null || (_uischema$options5 = _uischema$options5.componentProps) == null ? void 0 : _uischema$options5.maximum) != null ? _uischema$options$com : isArraySchema ? Number.MAX_SAFE_INTEGER : 1;
+  const isMultiFile = maxFiles > 1 || isArraySchema;
+  const metadataKey = path;
+  const [deleteHide, setDeleteHide] = useState(false);
+  const [deleteConfirmIndex, setDeleteConfirmIndex] = useState(null);
+  const pendingUploadIndexRef = useRef(null);
+  const uploadQueueRef = useRef(Promise.resolve());
+  const filesForDisplay = useMemo(() => {
+    if (!fileList) return [];
+    if (isMultiFile) {
+      const files = fileList[metadataKey] || fileList[rootPath] || fileList[propertyId] || [];
+      const dataUrns = Array.isArray(data) ? data : data ? [data] : [];
+      if (dataUrns.length > 0) {
+        const urnSet = new Set(dataUrns);
+        const scopedFiles = files.filter(f => urnSet.has(f.urn));
+        if (scopedFiles.length > 0) {
+          return scopedFiles.filter((file, index, all) => all.findIndex(f => f.urn === file.urn) === index);
+        }
+        const allFiles = Object.values(fileList).flat();
+        const filesByUrn = dataUrns.map(urn => allFiles.find(f => (f == null ? void 0 : f.urn) === urn)).filter(f => !!f);
+        if (filesByUrn.length > 0) {
+          return filesByUrn.filter((file, index, all) => all.findIndex(f => f.urn === file.urn) === index);
+        }
+      }
+      // Keep a stable list even if upstream metadata briefly duplicates entries.
+      return files.filter((file, index, all) => all.findIndex(f => f.urn === file.urn) === index);
+    }
+    return fileList[metadataKey] || fileList[propertyId] || [];
+  }, [fileList, isMultiFile, metadataKey, rootPath, propertyId, data]);
+  const fileListLength = filesForDisplay.length;
+  useEffect(() => {
+    // Clear pending upload index when rendered file list catches up.
+    pendingUploadIndexRef.current = null;
+  }, [fileListLength, metadataKey, rootPath]);
+  const getNextUploadIndex = () => {
+    const baseIndex = filesForDisplay.length;
+    if (pendingUploadIndexRef.current === null || pendingUploadIndexRef.current < baseIndex) {
+      pendingUploadIndexRef.current = baseIndex;
+    }
+    const nextIndex = pendingUploadIndexRef.current;
+    pendingUploadIndexRef.current += 1;
+    return nextIndex;
+  };
+  async function uploadFile(file, requestedIndex) {
+    if (!uploadTrigger) return;
+    const fileListLength = requestedIndex != null ? requestedIndex : isMultiFile ? getNextUploadIndex() : filesForDisplay.length;
+    // Single-file controls should allow selecting a new file to replace the current one.
+    if (isMultiFile && fileListLength >= maxFiles) {
+      setUploadError(`You can only upload up to ${maxFiles} file${maxFiles > 1 ? 's' : ''}.`);
+      return;
+    }
+    setUploadError(undefined);
+    setLoadingFileName(file == null ? void 0 : file.name);
+    await Promise.resolve(uploadTrigger(file, isMultiFile ? `${rootPath}.${fileListLength}` : path));
+    setDeleteHide(false);
+  }
+  function queueUpload(file, requestedIndex) {
+    uploadQueueRef.current = uploadQueueRef.current.then(() => uploadFile(file, requestedIndex)).catch(() => {
+      // Keep queue alive after an individual upload failure.
+    });
+  }
+  function downloadFile(file) {
+    if (downloadTrigger && file) {
+      downloadTrigger(file, propertyId);
+    }
+  }
+  function deleteFile(file) {
+    if (deleteTrigger && file) {
+      deleteTrigger(file, propertyId);
+    }
+  }
+  function getFileName(index) {
+    var _getFile;
+    return (_getFile = getFile(index)) == null ? void 0 : _getFile.filename;
+  }
+  function getFile(index) {
+    return filesForDisplay == null ? void 0 : filesForDisplay[index];
+  }
+  useEffect(() => {
+    if (loadingFileName !== undefined) {
+      setLoadingFileName(undefined);
+    }
+    const delayedFunction = () => {
+      if (!fileList) return;
+      const filesForControl = filesForDisplay || [];
+      const hasFileListEntryForPath = Object.prototype.hasOwnProperty.call(fileList, metadataKey) || Object.prototype.hasOwnProperty.call(fileList, rootPath) || !isMultiFile && Object.prototype.hasOwnProperty.call(fileList, propertyId);
+      const urns = filesForControl.map(f => f.urn);
+      if (urns.length === 0) {
+        if (hasFileListEntryForPath && data !== undefined && data !== null && data !== '') {
+          handleChange(isMultiFile ? rootPath : path, undefined);
+        }
+      } else if (isMultiFile) {
+        handleChange(rootPath, urns);
+      } else {
+        // Single-file replacement appends metadata; keep the latest selection as the current value.
+        handleChange(path, urns[urns.length - 1]);
+      }
+    };
+    const timeoutId = setTimeout(delayedFunction, 1);
+    return () => clearTimeout(timeoutId);
+  }, [data, fileList, filesForDisplay, rootPath, path, propertyId, metadataKey, isMultiFile, handleChange, loadingFileName]);
+  const readOnly = (uischema == null || (_uischema$options6 = uischema.options) == null || (_uischema$options6 = _uischema$options6.componentProps) == null ? void 0 : _uischema$options6.readOnly) === true || (props == null ? void 0 : props.isStepperReview) === true || user === null;
+  const maxFileSize = (_uischema$options$com2 = uischema == null || (_uischema$options7 = uischema.options) == null || (_uischema$options7 = _uischema$options7.componentProps) == null ? void 0 : _uischema$options7.maxFileSize) != null ? _uischema$options$com2 : '';
+  const accept = (_uischema$options$com3 = uischema == null || (_uischema$options8 = uischema.options) == null || (_uischema$options8 = _uischema$options8.componentProps) == null ? void 0 : _uischema$options8.accept) != null ? _uischema$options$com3 : '';
+  if (!enumerators) {
+    //eslint-disable-next-line
+    return jsx(Fragment, {});
+  }
+  const helpText = uischema == null || (_uischema$options9 = uischema.options) == null ? void 0 : _uischema$options9.help;
+  const sentenceCaseLabel = label;
+  const renderFileItem = index => {
+    var _getFile2;
+    const showFileDeleteConfirmation = deleteConfirmIndex === index;
+    return jsx("div", {
+      children: readOnly ? jsxs(AttachmentBorderDisabled, {
+        children: [getFileName(index), noDownloadButtonInReview !== true && jsx(GoAContextMenuIcon, {
+          testId: "download-icon",
+          title: "Download",
+          type: "download",
+          onClick: () => downloadFile(getFile(index))
+        })]
+      }) : jsxs(AttachmentBorder, {
+        children: [jsx("div", {
+          children: getFileName(index)
+        }), jsxs(GoAContextMenu, {
+          children: [noDownloadButton !== true && jsx(GoAContextMenuIcon, {
+            testId: "download-icon",
+            title: "Download",
+            type: "download",
+            onClick: () => downloadFile(getFile(index))
+          }), noDeleteButton !== true && jsx(GoAContextMenuIcon, {
+            "data-testid": "delete-icon",
+            title: "Delete",
+            type: "trash",
+            onClick: () => {
+              setDeleteConfirmIndex(index);
+            }
+          })]
+        }), jsx(DeleteFileModal, {
+          isOpen: showFileDeleteConfirmation,
+          title: "Delete file",
+          content: `Delete file ${(_getFile2 = getFile(index)) == null ? void 0 : _getFile2.filename} ?`,
+          onCancel: () => setDeleteConfirmIndex(null),
+          onDelete: () => {
+            setDeleteConfirmIndex(null);
+            deleteFile(getFile(index));
+            if (!isMultiFile) {
+              setDeleteHide(true);
+            }
+            setUploadError(undefined);
+          }
+        })]
+      })
+    });
+  };
+  return jsx(Visible, {
+    "$visible": visible,
+    children: jsxs(FileUploaderStyle, {
+      className: "FileUploader",
+      children: [jsx(GoabFormItem, {
+        label: sentenceCaseLabel,
+        requirement: required ? 'required' : undefined,
+        error: uploadError
+      }), !readOnly && jsx("div", {
+        className: "file-upload",
+        children: jsx(GoabFileUploadInput, {
+          variant: variant,
+          onSelectFile: detail => {
+            var _detail$files;
+            const selectedFiles = detail != null && (_detail$files = detail.files) != null && _detail$files.length ? detail.files : detail != null && detail.file ? [detail.file] : [];
+            if (selectedFiles.length === 0) {
+              return;
+            }
+            if (isMultiFile) {
+              for (const selectedFile of selectedFiles) {
+                const nextIndex = getNextUploadIndex();
+                if (nextIndex >= maxFiles) {
+                  setUploadError(`You can only upload up to ${maxFiles} file${maxFiles > 1 ? 's' : ''}.`);
+                  break;
+                }
+                queueUpload(selectedFile, nextIndex);
+              }
+            } else {
+              queueUpload(selectedFiles[0]);
+            }
+          },
+          maxFileSize: maxFileSize,
+          accept: accept
+        })
+      }), helpText && jsx(HelpText, {
+        children: helpText
+      }), jsx("div", {
+        children: loadingFileName !== undefined ? jsx(GoabModal, {
+          open: loadingFileName !== undefined,
+          children: jsx("div", {
+            className: "align-center",
+            children: jsx(GoabCircularProgress, {
+              visible: true,
+              message: `Uploading ${loadingFileName}`,
+              size: "large"
+            })
+          })
+        }) : jsx("div", {
+          children: (fileList && isMultiFile ? filesForDisplay.map((_, i) => i) : !deleteHide && getFile(fileListLength - 1) && fileListLength >= 0 ? [fileListLength - 1] : []).map(index => jsx(React.Fragment, {
+            children: renderFileItem(index)
+          }, index))
+        })
+      })]
+    })
+  });
+};
+const HelpText = styled.div(_t$1 || (_t$1 = _2`
+  margin-top: var(--goa-space-xs);
+  font-size: var(--goa-font-size-3);
+  color: var(--goa-color-text-secondary);
+`));
+const AttachmentBorderDisabled = styled.div(_t2$1 || (_t2$1 = _2`
+  display: flex;
+  flex-direction: row;
+  border: var(--goa-border-width-s) solid #dcdcdc;
+  border-radius: var(--goa-border-radius-m);
+  padding: var(--goa-space-xs);
+  width: fit-content;
+  background-color: #f1f1f1;
+`));
+const AttachmentBorder = styled.div(_t3 || (_t3 = _2`
+  display: flex;
+  flex-direction: row;
+  border: var(--goa-border-width-s) solid #dcdcdc;
+  border-radius: var(--goa-border-radius-m);
+  padding: var(--goa-space-xs);
+  width: fit-content;
+  margin-top: var(--goa-space-2xs);
+`));
+const FileUploaderStyle = styled.div(_t4 || (_t4 = _2`
+  margin-bottom: var(--goa-space-l);
+  .label {
+    display: block;
+    font-weight: var(--goa-font-weight-bold);
+    color: var(--goa-color-text-default);
+    font-size: var(--goa-font-size-4);
+    padding: 0 0 var(--goa-space-xs) 0;
+  }
+
+  .align-center {
+    text-align-last: center;
+  }
+
+  .file-upload {
+    margin-bottom: var(--goa-space-xs);
+  }
+`));
+
 const ArrayControl = props => {
   const {
     visible,
@@ -16228,6 +16593,8 @@ const PrimitiveArrayControl = props => {
     cells
   } = props;
   const enumerators = useContext(JsonFormContext);
+  const itemSchema = schema == null ? void 0 : schema.items;
+  const isFileUrnArray = (itemSchema == null ? void 0 : itemSchema.format) === 'file-urn';
   const rawItems = Array.isArray(data) ? data : [];
   const items = rawItems.filter(item => item !== undefined && item !== null);
   const deleteTriggerFunction = enumerators == null || (_enumerators$function = enumerators.functions) == null ? void 0 : _enumerators$function.get('delete-file');
@@ -16239,6 +16606,14 @@ const PrimitiveArrayControl = props => {
       handleChange(path, items.length > 0 ? items : undefined);
     }
   }, [rawItems, items, handleChange, path]);
+  if (isFileUrnArray) {
+    return jsx(Visible, {
+      "$visible": visible,
+      children: jsx(FileUploader, Object.assign({}, props, {
+        data: items
+      }))
+    });
+  }
   const addItem = () => {
     handleChange(path, [...items, '']);
   };
@@ -16246,7 +16621,6 @@ const PrimitiveArrayControl = props => {
   const getOptionLabel = option => typeof option === 'string' ? option : option.title || option.const;
   const getOptionDescription = option => typeof option === 'string' ? undefined : option.description;
   const removeItem = index => {
-    const itemSchema = schema == null ? void 0 : schema.items;
     const removedItem = items[index];
     const itemPath = composePaths(path, `${index}`);
     if ((itemSchema == null ? void 0 : itemSchema.format) === 'file-urn' && deleteTrigger && removedItem) {
@@ -16922,10 +17296,10 @@ const GoAGroupReviewControlComponent = props => {
 const GoAGroupReviewLayoutTester = rankWith(1, uiTypeIs('Group'));
 const GoAGroupReviewControl = withJsonFormsLayoutProps(GoAGroupReviewControlComponent, true);
 
-let _$1 = t => t,
-  _t$2,
-  _t2$1;
-const HelpContentDiv = styled.div(_t$2 || (_t$2 = _$1`
+let _ = t => t,
+  _t,
+  _t2;
+const HelpContentDiv = styled.div(_t || (_t = _`
   .parent-label {
     font-size: 24px;
     margin-bottom: var(--goa-space-m);
@@ -17005,45 +17379,17 @@ const HelpContentDiv = styled.div(_t$2 || (_t$2 = _$1`
     top: 2.2rem;
     bottom: 0.5rem;
     width: 2px;
-    background-color: #ccc;
-    pointer-events: none;
-  }
-
-  .help-content-markdown summary {
-    text-decoration: underline;
-  }
-`));
-const InvalidMarkdown = styled.div(_t2$1 || (_t2$1 = _$1`
-  color: var(--goa-color-interactive-error);
-`));
-
-let _ = t => t,
-  _t$1;
-const GoAContextMenuIcon = props => {
-  return jsx(GoabIconButton, {
-    icon: props.type,
-    onClick: props.onClick,
-    title: props.title,
-    testId: props.testId,
-    size: "small",
-    disabled: props.disabled
-  });
-};
-const GoAContextMenu = styled.div(_t$1 || (_t$1 = _`
-  display: flex;
-  align-items: center;
-  background-color: #fff;
-  gap: var(--goa-space-2xs);
-
-  > .goa-icon-button {
-    cursor: pointer;
-    border-radius: var(--goa-border-radius-m);
-    padding: var(--goa-space-2xs);
+    background-color: #ccc;
+    pointer-events: none;
   }
-  > .goa-icon-button + .goa-icon-button {
-    margin-left: var(--goa-space-none);
+
+  .help-content-markdown summary {
+    text-decoration: underline;
   }
 `));
+const InvalidMarkdown = styled.div(_t2 || (_t2 = _`
+  color: var(--goa-color-interactive-error);
+`));
 
 const linkLength = 40;
 const invalidExtensions = ['exe'];
@@ -17105,12 +17451,12 @@ const RenderLink = props => {
   });
 };
 
-const _excluded$3 = ["node"],
+const _excluded$2 = ["node"],
   _excluded2 = ["isParent", "showLabel"];
 const markdownComponents = {
   // Destructure node out (react-markdown internal prop) so it is not forwarded to the DOM element.
   a: _ref => {
-    let props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    let props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
     return jsx("a", Object.assign({}, props, {
       target: "_blank",
       rel: "noopener noreferrer"
@@ -17952,7 +18298,7 @@ const SummaryRow = ({
   });
 };
 
-const _excluded$2 = ["type"];
+const _excluded$1 = ["type"];
 const AdditionalInstructionsRow = ({
   additionalInstructions,
   componentProps
@@ -17961,7 +18307,7 @@ const AdditionalInstructionsRow = ({
   const calloutType = (componentProps == null ? void 0 : componentProps.type) || 'information';
   const type = validTypes.includes(calloutType) ? calloutType : 'information';
   const _ref = componentProps || {},
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   const sanitizedHtml = sanitizeHtml(additionalInstructions);
   return jsx("tr", {
     children: jsx("td", {
@@ -18452,280 +18798,14 @@ const CategorizationPagesRendererTester = rankWith(2, and(uiTypeIs('Categorizati
   return ((_uischema$options3 = uischema.options) == null ? void 0 : _uischema$options3.variant) === 'pages';
 }));
 
-const DeleteFileModal = ({
-  isOpen,
-  title,
-  content,
-  onDelete,
-  onCancel
-}) => {
-  return jsx(GoabModal, {
-    testId: "delete-confirmation",
-    open: isOpen,
-    heading: title,
-    maxWidth: "640px",
-    actions: jsxs(GoabButtonGroup, {
-      alignment: "end",
-      children: [jsx(GoabButton, {
-        type: "secondary",
-        testId: "delete-cancel",
-        onClick: onCancel,
-        children: "Cancel"
-      }), jsx(GoabButton, {
-        type: "primary",
-        variant: "destructive",
-        testId: "delete-confirm",
-        onClick: onDelete,
-        children: "Delete"
-      })]
-    }),
-    children: content
-  });
-};
-
-let _2 = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4;
-const _excluded$1 = ["data", "path", "handleChange", "uischema"];
-const FileUploaderReview = props => {
-  return FileUploader(Object.assign({}, props, {
-    isStepperReview: true
-  }));
-};
-const FileUploader = _ref => {
-  var _enumerators$function, _enumerators$function2, _enumerators$function3, _uischema$options, _uischema$options2, _uischema$options3, _uischema$options4, _fileList$path, _uischema$options$com, _uischema$options5, _uischema$options6, _uischema$options$com2, _uischema$options7, _uischema$options$com3, _uischema$options8, _uischema$options9;
-  let {
-      data,
-      path,
-      handleChange,
-      uischema
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  const enumerators = useContext(JsonFormContext);
-  const uploadTriggerFunction = enumerators == null || (_enumerators$function = enumerators.functions) == null ? void 0 : _enumerators$function.get('upload-file');
-  const uploadTrigger = uploadTriggerFunction && uploadTriggerFunction();
-  const downloadTriggerFunction = enumerators == null || (_enumerators$function2 = enumerators.functions) == null ? void 0 : _enumerators$function2.get('download-file');
-  const downloadTrigger = downloadTriggerFunction && downloadTriggerFunction();
-  const deleteTriggerFunction = enumerators == null || (_enumerators$function3 = enumerators.functions) == null ? void 0 : _enumerators$function3.get('delete-file');
-  const deleteTrigger = deleteTriggerFunction && deleteTriggerFunction();
-  const fileListValue = enumerators == null ? void 0 : enumerators.data.get('file-list');
-  const [loadingFileName, setLoadingFileName] = useState(undefined);
-  const [uploadError, setUploadError] = useState(undefined);
-  const countries = ['Argentina', 'Brazil', 'Canada', 'Denmark', 'Egypt', 'France', 'Greece', 'India', 'Japan', 'Kenya'];
-  enumerators == null || enumerators.addFormContextData('countries', countries);
-  const user = enumerators == null ? void 0 : enumerators.getFormContextData('user');
-  // eslint-disable-next-line
-  const fileList = fileListValue && fileListValue();
-  const {
-    required,
-    label,
-    i18nKeyPrefix,
-    visible
-  } = props;
-  const propertyId = i18nKeyPrefix;
-  const variant = (uischema == null || (_uischema$options = uischema.options) == null ? void 0 : _uischema$options.variant) || 'button';
-  const noDownloadButton = uischema == null || (_uischema$options2 = uischema.options) == null || (_uischema$options2 = _uischema$options2.format) == null ? void 0 : _uischema$options2.noDownloadButton;
-  const noDownloadButtonInReview = uischema == null || (_uischema$options3 = uischema.options) == null || (_uischema$options3 = _uischema$options3.format) == null || (_uischema$options3 = _uischema$options3.review) == null ? void 0 : _uischema$options3.noDownloadButton;
-  const noDeleteButton = uischema == null || (_uischema$options4 = uischema.options) == null || (_uischema$options4 = _uischema$options4.format) == null || (_uischema$options4 = _uischema$options4.review) == null ? void 0 : _uischema$options4.noDeleteButton;
-  const [deleteHide, setDeleteHide] = useState(false);
-  const [deleteConfirmIndex, setDeleteConfirmIndex] = useState(null);
-  const fileListLength = fileList && ((_fileList$path = fileList[path]) == null ? void 0 : _fileList$path.length) || 0;
-  const maxFiles = (_uischema$options$com = uischema == null || (_uischema$options5 = uischema.options) == null || (_uischema$options5 = _uischema$options5.componentProps) == null ? void 0 : _uischema$options5.maximum) != null ? _uischema$options$com : 1;
-  const isMultiFile = maxFiles > 1;
-  function uploadFile(file) {
-    var _fileList$propertyId;
-    if (!uploadTrigger) return;
-    const fileListLength = fileList && ((_fileList$propertyId = fileList[propertyId]) == null ? void 0 : _fileList$propertyId.length) || 0;
-    if (fileListLength >= maxFiles) {
-      setUploadError(`You can only upload up to ${maxFiles} file${maxFiles > 1 ? 's' : ''}.`);
-      return;
-    }
-    setUploadError(undefined);
-    setLoadingFileName(file == null ? void 0 : file.name);
-    uploadTrigger(file, path);
-    setDeleteHide(false);
-  }
-  function downloadFile(file) {
-    if (downloadTrigger) {
-      downloadTrigger(file, propertyId);
-    }
-  }
-  function deleteFile(file) {
-    if (deleteTrigger) {
-      deleteTrigger(file, propertyId);
-    }
-  }
-  function getFileName(index) {
-    var _getFile;
-    return (_getFile = getFile(index)) == null ? void 0 : _getFile.filename;
-  }
-  function getFile(index) {
-    var _fileList$path2;
-    return fileList == null || (_fileList$path2 = fileList[path]) == null ? void 0 : _fileList$path2[index];
-  }
-  useEffect(() => {
-    if (loadingFileName !== undefined) {
-      setLoadingFileName(undefined);
-    }
-    const delayedFunction = () => {
-      if (!fileList) return;
-      const filesForControl = (fileList == null ? void 0 : fileList[path]) || [];
-      const hasFileListEntryForPath = Object.prototype.hasOwnProperty.call(fileList, path);
-      const urns = filesForControl.map(f => f.urn);
-      if (urns.length === 0) {
-        if (hasFileListEntryForPath && data !== undefined && data !== null && data !== '') {
-          handleChange(path, undefined);
-        }
-      } else if (isMultiFile) {
-        handleChange(path, urns);
-      } else {
-        handleChange(path, urns[0]);
-      }
-    };
-    const timeoutId = setTimeout(delayedFunction, 1);
-    return () => clearTimeout(timeoutId);
-    //eslint-disable-next-line
-  }, [data, fileList, path, propertyId, isMultiFile, handleChange, loadingFileName]);
-  const readOnly = (uischema == null || (_uischema$options6 = uischema.options) == null || (_uischema$options6 = _uischema$options6.componentProps) == null ? void 0 : _uischema$options6.readOnly) === true || (props == null ? void 0 : props.isStepperReview) === true || user === null;
-  const maxFileSize = (_uischema$options$com2 = uischema == null || (_uischema$options7 = uischema.options) == null || (_uischema$options7 = _uischema$options7.componentProps) == null ? void 0 : _uischema$options7.maxFileSize) != null ? _uischema$options$com2 : '';
-  const accept = (_uischema$options$com3 = uischema == null || (_uischema$options8 = uischema.options) == null || (_uischema$options8 = _uischema$options8.componentProps) == null ? void 0 : _uischema$options8.accept) != null ? _uischema$options$com3 : '';
-  if (!enumerators) {
-    //eslint-disable-next-line
-    return jsx(Fragment, {});
-  }
-  const helpText = uischema == null || (_uischema$options9 = uischema.options) == null ? void 0 : _uischema$options9.help;
-  const sentenceCaseLabel = label;
-  const renderFileItem = index => {
-    var _getFile2;
-    const showFileDeleteConfirmation = deleteConfirmIndex === index;
-    return jsx("div", {
-      children: readOnly ? jsxs(AttachmentBorderDisabled, {
-        children: [getFileName(index), noDownloadButtonInReview !== true && jsx(GoAContextMenuIcon, {
-          testId: "download-icon",
-          title: "Download",
-          type: "download",
-          onClick: () => downloadFile(getFile(index))
-        })]
-      }) : jsxs(AttachmentBorder, {
-        children: [jsx("div", {
-          children: getFileName(index)
-        }), jsxs(GoAContextMenu, {
-          children: [noDownloadButton !== true && jsx(GoAContextMenuIcon, {
-            testId: "download-icon",
-            title: "Download",
-            type: "download",
-            onClick: () => downloadFile(getFile(index))
-          }), noDeleteButton !== true && jsx(GoAContextMenuIcon, {
-            "data-testid": "delete-icon",
-            title: "Delete",
-            type: "trash",
-            onClick: () => {
-              setDeleteConfirmIndex(index);
-            }
-          })]
-        }), jsx(DeleteFileModal, {
-          isOpen: showFileDeleteConfirmation,
-          title: "Delete file",
-          content: `Delete file ${(_getFile2 = getFile(index)) == null ? void 0 : _getFile2.filename} ?`,
-          onCancel: () => setDeleteConfirmIndex(null),
-          onDelete: () => {
-            setDeleteConfirmIndex(null);
-            deleteFile(getFile(index));
-            if (!isMultiFile) {
-              setDeleteHide(true);
-            }
-            setUploadError(undefined);
-          }
-        })]
-      })
-    });
-  };
-  return jsx(Visible, {
-    "$visible": visible,
-    children: jsxs(FileUploaderStyle, {
-      className: "FileUploader",
-      children: [jsx(GoabFormItem, {
-        label: sentenceCaseLabel,
-        requirement: required ? 'required' : undefined,
-        error: uploadError
-      }), !readOnly && jsx("div", {
-        className: "file-upload",
-        children: jsx(GoabFileUploadInput, {
-          variant: variant,
-          onSelectFile: detail => {
-            // adjust based on the actual shape of "detail"
-            uploadFile(detail.file); // or detail.files[0], etc.
-          },
-          maxFileSize: maxFileSize,
-          accept: accept
-        })
-      }), helpText && jsx(HelpText, {
-        children: helpText
-      }), jsx("div", {
-        children: loadingFileName !== undefined ? jsx(GoabModal, {
-          open: loadingFileName !== undefined,
-          children: jsx("div", {
-            className: "align-center",
-            children: jsx(GoabCircularProgress, {
-              visible: true,
-              message: `Uploading ${loadingFileName}`,
-              size: "large"
-            })
-          })
-        }) : jsx("div", {
-          children: (fileList && isMultiFile ? (fileList[path] || []).map((_, i) => i) : !deleteHide && getFile(fileListLength - 1) && fileListLength >= 0 ? [fileListLength - 1] : []).map(index => jsx(React.Fragment, {
-            children: renderFileItem(index)
-          }, index))
-        })
-      })]
-    })
-  });
-};
-const HelpText = styled.div(_t || (_t = _2`
-  margin-top: var(--goa-space-xs);
-  font-size: var(--goa-font-size-3);
-  color: var(--goa-color-text-secondary);
-`));
-const AttachmentBorderDisabled = styled.div(_t2 || (_t2 = _2`
-  display: flex;
-  flex-direction: row;
-  border: var(--goa-border-width-s) solid #dcdcdc;
-  border-radius: var(--goa-border-radius-m);
-  padding: var(--goa-space-xs);
-  width: fit-content;
-  background-color: #f1f1f1;
-`));
-const AttachmentBorder = styled.div(_t3 || (_t3 = _2`
-  display: flex;
-  flex-direction: row;
-  border: var(--goa-border-width-s) solid #dcdcdc;
-  border-radius: var(--goa-border-radius-m);
-  padding: var(--goa-space-xs);
-  width: fit-content;
-  margin-top: var(--goa-space-2xs);
-`));
-const FileUploaderStyle = styled.div(_t4 || (_t4 = _2`
-  margin-bottom: var(--goa-space-l);
-  .label {
-    display: block;
-    font-weight: var(--goa-font-weight-bold);
-    color: var(--goa-color-text-default);
-    font-size: var(--goa-font-size-4);
-    padding: 0 0 var(--goa-space-xs) 0;
-  }
-
-  .align-center {
-    text-align-last: center;
-  }
-
-  .file-upload {
-    margin-bottom: var(--goa-space-xs);
+const isSingleFileUrn = and(schemaTypeIs('string'), formatIs('file-urn'));
+const isFileUrnArray = and(schemaTypeIs('array'), schemaMatches(schema => {
+  if (!(schema != null && schema.items) || Array.isArray(schema.items)) {
+    return false;
   }
-`));
-
-const FileUploaderTester = rankWith(3, and(schemaTypeIs('string'), formatIs('file-urn')));
+  return schema.items.type === 'string' && schema.items.format === 'file-urn';
+}));
+const FileUploaderTester = rankWith(3, or(isSingleFileUrn, isFileUrnArray));
 
 const AddressInputs = ({
   address,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.79.3",
+  "version": "2.79.4",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/renderer-catalog.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-10-26T17:03:28.720Z",
-  "sourceCommit": "7ae3adca736763caffcfe99762c69224c7c0032a",
+  "generatedAt": "2026-10-28T20:42:38.992Z",
+  "sourceCommit": "dc35c087a12660681557962655deb565941cc540",
   "sourcePath": "libs/jsonforms-components/src/index.ts",
   "rendererCount": 23,
   "renderers": [