@awell-health/ui-library 0.1.92 → 0.1.93

package/dist/index.css

@@ -5956,10 +5956,34 @@ html {
   display: flex;
   flex-direction: column;
   gap: 12px;
+  /* Higher specificity to override Tailwind */
+}
+.awell__FileInputField_file_input_field_container.awell__FileInputField_file_input_field_container {
+  width: 100%;
+}
+
+.awell__FileInputField_error_message {
+  color: #e53e3e; /* Red for error */
+  font-size: 14px;
+  margin-bottom: 4px;
+}
+
+.awell__FileInputField_file_upload_wrapper {
+  /* Isolate FileUpload component styles */
+}
+.awell__FileInputField_file_upload_wrapper .awell-file-upload {
+  width: 100%;
 }
 
-.awell__FileInputField_file_list {
+.awell__FileInputField_file_list_wrapper {
+  /* Isolate FileList component styles */
+  width: 100%;
+  /* Override Tailwind with higher specificity if needed */
+}
+.awell__FileInputField_file_list_wrapper .awell-file-list {
+  width: 100%;
   display: flex;
+  flex-direction: column;
 }
 @import 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap';
 :root {

package/dist/index.js

@@ -48050,41 +48050,100 @@ var     Kr=[{
 .styles-module_tooltip__mnnfp{padding:8px 16px;border-radius:3px;font-size:90%;width:max-content}.styles-module_arrow__K0L3T{width:8px;height:8px}[class*='react-tooltip__place-top']>.styles-module_arrow__K0L3T{transform:rotate(45deg)}[class*='react-tooltip__place-right']>.styles-module_arrow__K0L3T{transform:rotate(135deg)}[class*='react-tooltip__place-bottom']>.styles-module_arrow__K0L3T{transform:rotate(225deg)}[class*='react-tooltip__place-left']>.styles-module_arrow__K0L3T{transform:rotate(315deg)}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)}`,type:"base"});
     });
 
-    var classes$9 = {"file_input_field_container":"awell__FileInputField_file_input_field_container","file_list":"awell__FileInputField_file_list"};
+    var classes$9 = {"file_input_field_container":"awell__FileInputField_file_input_field_container","error_message":"awell__FileInputField_error_message","file_upload_wrapper":"awell__FileInputField_file_upload_wrapper","file_list_wrapper":"awell__FileInputField_file_list_wrapper"};
 
     var FileInputField = function (_a) {
-      _a.id;var label = _a.label;_a.description;var accept = _a.accept;_a.maxSize;var _b = _a.multiple,multiple = _b === void 0 ? false : _b,error = _a.error;_a.disabled;_a.required;var onChange = _a.onChange,onError = _a.onError,_e = _a.className,className = _e === void 0 ? '' : _e,dataCy = _a.dataCy;_a.value;_a.loading;var fileUploadErrors = _a.fileUploadErrors;
-      var _g = React.useState([]),selectedFiles = _g[0],setSelectedFiles = _g[1];
+      var id = _a.id,label = _a.label,accept = _a.accept,_b = _a.multiple,multiple = _b === void 0 ? true : _b,error = _a.error,onChange = _a.onChange,onError = _a.onError,_c = _a.className,className = _c === void 0 ? '' : _c,dataCy = _a.dataCy,onFileUpload = _a.onFileUpload,configId = _a.configId,value = _a.value;
+      var _d = React.useState(Array.isArray(value) ?
+      value === null || value === void 0 ? void 0 : value.map(function (attachment) {
+        var _a, _b, _c, _d;
+        return {
+          name: (_a = attachment.filename) !== null && _a !== void 0 ? _a : '',
+          size: (_b = attachment.size) !== null && _b !== void 0 ? _b : 0,
+          type: (_c = attachment.contentType) !== null && _c !== void 0 ? _c : '',
+          url: (_d = attachment.url) !== null && _d !== void 0 ? _d : '',
+          progress: 100,
+          error: undefined };
+
+      }) :
+      []),selectedFiles = _d[0],setSelectedFiles = _d[1];
       React.useEffect(function () {
-        if (fileUploadErrors && fileUploadErrors.length > 0) {
-          console.log('fileUploadErrors', fileUploadErrors);
-          setSelectedFiles(function (prev) {
-            return prev.map(function (file) {
-              var fileId = file.name;
-              var error = fileUploadErrors.find(function (f) {return f.id === fileId;});
-              if (error) {
-                return __assign(__assign({}, file), { error: error.error });
-              }
-              return file;
-            });
-          });
-        }
-      }, [fileUploadErrors]);
-      var handleFileChange = function (files) {
-        var updatedFiles = files;
-        var filesAsListItems = updatedFiles.map(function (file) {return {
-            name: file.name,
-            size: file.size,
-            type: file.type };
+        var attachments = selectedFiles.
+        filter(function (file) {return file.url;}).
+        map(function (file) {return {
+            url: file.url,
+            filename: file.name,
+            contentType: file.type,
+            size: file.size };
         });
-        setSelectedFiles(function (prev) {return __spreadArray(__spreadArray([], prev, true), filesAsListItems, true);});
-        onChange(__spreadArray(__spreadArray([], selectedFiles, true), updatedFiles, true));
-      };
+        onChange(attachments);
+      }, [selectedFiles]);
+      var uploadFilesToStorage = function (files) {return __awaiter(void 0, void 0, void 0, function () {
+          var fileListWithUrls;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:return [4, Promise.all(Array.from(files).map(function (file) {return __awaiter(void 0, void 0, void 0, function () {
+                    var fileUrl, error_1;
+                    return __generator(this, function (_a) {
+                      switch (_a.label) {
+                        case 0:
+                          _a.trys.push([0, 2,, 3]);
+                          return [4, onFileUpload === null || onFileUpload === void 0 ? void 0 : onFileUpload(file, configId)];
+                        case 1:
+                          fileUrl = _a.sent();
+                          return [2, {
+                            name: file.name,
+                            size: file.size,
+                            type: file.type,
+                            progress: 100,
+                            error: undefined,
+                            url: fileUrl }];
+
+                        case 2:
+                          error_1 = _a.sent();
+                          return [2, {
+                            name: file.name,
+                            size: file.size,
+                            type: file.type,
+                            progress: 0,
+                            error: error_1 instanceof Error ? error_1.message : 'File upload failed',
+                            url: undefined }];
+
+                        case 3:return [2];}
+
+                    });
+                  });}))];
+              case 1:
+                fileListWithUrls = _a.sent();
+                return [2, fileListWithUrls];}
+
+          });
+        });};
+      var handleFilesChange = function (files) {return __awaiter(void 0, void 0, void 0, function () {
+          var fileList, fileListWithUrls;
+          return __generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                fileList = Array.from(files).map(function (file) {return {
+                    name: "".concat(file.name, " (uploading...)"),
+                    size: file.size,
+                    type: file.type,
+                    progress: 0,
+                    error: undefined };
+                });
+                setSelectedFiles(fileList);
+                return [4, uploadFilesToStorage(files)];
+              case 1:
+                fileListWithUrls = _a.sent();
+                setSelectedFiles(fileListWithUrls);
+                return [2];}
+
+          });
+        });};
       var handleRemoveFile = function (file) {
-        setSelectedFiles(function (prev) {return prev.filter(function (f) {return f.name !== file.name;});});
-        onChange(selectedFiles.filter(function (f) {return f.name !== file.name;}));
+        setSelectedFiles(selectedFiles.filter(function (f) {return f.name !== file.name;}));
       };
-      return jsxRuntime.exports.jsx("div", __assign({ className: className, "data-cy": dataCy }, { children: jsxRuntime.exports.jsxs("div", __assign({ className: classes$9.file_input_field_container }, { children: [error && jsxRuntime.exports.jsx("div", __assign({ className: classes$9.error_message }, { children: error })), jsxRuntime.exports.jsx(ag, { onChange: handleFileChange, onError: onError, isMultiple: multiple, accept: accept, label: label, error: error }), selectedFiles.length > 0 && jsxRuntime.exports.jsx("div", __assign({ className: classes$9.file_list }, { children: jsxRuntime.exports.jsx(og, { files: selectedFiles, onDelete: handleRemoveFile }) }))] })) }));
+      return jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(classes$9.file_input_field_container, " ").concat(className), "data-cy": dataCy }, { children: [error && jsxRuntime.exports.jsx("div", __assign({ className: classes$9.error_message }, { children: error })), jsxRuntime.exports.jsx("div", __assign({ className: classes$9.file_upload_wrapper }, { children: jsxRuntime.exports.jsx(ag, { onChange: handleFilesChange, onError: onError, isMultiple: multiple, accept: accept, label: label, error: error }) })), selectedFiles.length > 0 && jsxRuntime.exports.jsx("div", __assign({ className: classes$9.file_list_wrapper }, { children: jsxRuntime.exports.jsx(og, { files: selectedFiles, onDelete: handleRemoveFile }) }))] }), id);
     };
 
     var custom_json_parser = function (blob) {
@@ -48109,53 +48168,6 @@ var     Kr=[{
       var question = _a.question,control = _a.control,getValues = _a.getValues,labels = _a.labels,_g = _a.inputAutoFocus,inputAutoFocus = _g === void 0 ? false : _g,_h = _a.submitAndMoveToNextQuestion,submitAndMoveToNextQuestion = _h === void 0 ? lodash.exports.noop : _h,_j = _a.onAnswerChange,onAnswerChange = _j === void 0 ? lodash.exports.noop : _j,_k = _a.shouldAutoProgress,shouldAutoProgress = _k === void 0 ? function () {return false;} : _k,onFileUpload = _a.onFileUpload;
       var config = question === null || question === void 0 ? void 0 : question.questionConfig;
       var _l = useICDClassificationList(question.id),icdClassificationOptions = _l.options,optionsLoading = _l.loading,onIcdClassificationSearchChange = _l.onIcdClassificationSearchChange;
-      var _m = React.useState([]),fileUploadErrors = _m[0],setFileUploadErrors = _m[1];
-      var handleFilesUpload = function (files, onControllerChange) {return __awaiter(void 0, void 0, void 0, function () {
-          var attachments;
-          return __generator(this, function (_a) {
-            switch (_a.label) {
-              case 0:
-                if (!onFileUpload) return [3, 2];
-                setFileUploadErrors([]);
-                return [4, Promise.all(files.map(function (file) {return __awaiter(void 0, void 0, void 0, function () {
-                    var configId, fileUrl, attachment, error_1, errorMessage_1;
-                    var _a;
-                    return __generator(this, function (_b) {
-                      switch (_b.label) {
-                        case 0:
-                          _b.trys.push([0, 2,, 3]);
-                          configId = (_a = config === null || config === void 0 ? void 0 : config.file_storage) === null || _a === void 0 ? void 0 : _a.file_storage_destination_id;
-                          return [4, onFileUpload(file, configId)];
-                        case 1:
-                          fileUrl = _b.sent();
-                          attachment = {
-                            url: fileUrl,
-                            filename: file.name,
-                            contentType: file.type,
-                            size: file.size };
-
-                          return [2, attachment];
-                        case 2:
-                          error_1 = _b.sent();
-                          errorMessage_1 = error_1 instanceof Error ?
-                          error_1.message :
-                          'This file could not be uploaded';
-                          setFileUploadErrors(function (prev) {return __spreadArray(__spreadArray([], prev, true), [
-                            { id: file.name, error: errorMessage_1 }],
-                            false);});
-                          return [3, 3];
-                        case 3:return [2];}
-
-                    });
-                  });}))];
-              case 1:
-                attachments = _a.sent();
-                onControllerChange(JSON.stringify(attachments.filter(function (attachment) {return !lodash.exports.isNil(attachment);})));
-                _a.label = 2;
-              case 2:return [2];}
-
-          });
-        });};
       switch (question.userQuestionType) {
         case exports.UserQuestionType.YesNo:
           return jsxRuntime.exports.jsx(Controller, { name: question.id, control: control, defaultValue: "", rules: { required: config === null || config === void 0 ? void 0 : config.mandatory }, render: function (_a) {
@@ -48328,29 +48340,21 @@ var     Kr=[{
             } });
         case exports.UserQuestionType.File:
           return jsxRuntime.exports.jsx(Controller, { name: question.id, control: control, defaultValue: [], rules: { required: config === null || config === void 0 ? void 0 : config.mandatory }, render: function (_a) {
-              var _b, _c;
-              var _d = _a.field,onControllerChange = _d.onChange,onBlur = _d.onBlur,value = _d.value;
-              return jsxRuntime.exports.jsx(FileInputField, { onChange: function (files) {
-                  void handleFilesUpload(files, onControllerChange);
-                }, value: custom_json_parser(value), onBlur: onBlur, accept: (_c = (_b = config === null || config === void 0 ? void 0 : config.file_storage) === null || _b === void 0 ? void 0 : _b.accepted_file_types) !== null && _c !== void 0 ? _c : [
+              var _b, _c, _d;
+              var _e = _a.field,onControllerChange = _e.onChange,onBlur = _e.onBlur,value = _e.value;
+              return jsxRuntime.exports.jsx(FileInputField, { id: question.id, value: custom_json_parser(value), onChange: function (attachments) {
+                  onControllerChange(JSON.stringify(attachments));
+                }, onBlur: onBlur, accept: (_c = (_b = config === null || config === void 0 ? void 0 : config.file_storage) === null || _b === void 0 ? void 0 : _b.accepted_file_types) !== null && _c !== void 0 ? _c : [
                 'application/pdf'],
-                fileUploadErrors: fileUploadErrors, onError: function (error) {
-                  setFileUploadErrors(function (prev) {return __spreadArray(__spreadArray([], prev, true), [
-                    { id: error, error: error }],
-                    false);});
-                } });
+                configId: (_d = config === null || config === void 0 ? void 0 : config.file_storage) === null || _d === void 0 ? void 0 : _d.file_storage_destination_id, onFileUpload: onFileUpload });
             } });
         case exports.UserQuestionType.Image:
           return jsxRuntime.exports.jsx(Controller, { name: question.id, control: control, defaultValue: [], rules: { required: config === null || config === void 0 ? void 0 : config.mandatory }, render: function (_a) {
-              var _b, _c;
-              var _d = _a.field,onControllerChange = _d.onChange,onBlur = _d.onBlur,value = _d.value;
-              return jsxRuntime.exports.jsx(FileInputField, { value: custom_json_parser(value), onChange: function (files) {
-                  void handleFilesUpload(files, onControllerChange);
-                }, onBlur: onBlur, accept: (_c = (_b = config === null || config === void 0 ? void 0 : config.file_storage) === null || _b === void 0 ? void 0 : _b.accepted_file_types) !== null && _c !== void 0 ? _c : ['image/*'], fileUploadErrors: fileUploadErrors, onError: function (error) {
-                  setFileUploadErrors(function (prev) {return __spreadArray(__spreadArray([], prev, true), [
-                    { id: error, error: error }],
-                    false);});
-                } });
+              var _b, _c, _d;
+              var _e = _a.field,onControllerChange = _e.onChange,onBlur = _e.onBlur,value = _e.value;
+              return jsxRuntime.exports.jsx(FileInputField, { id: question.id, value: custom_json_parser(value), onChange: function (attachments) {
+                  onControllerChange(JSON.stringify(attachments));
+                }, onBlur: onBlur, accept: (_c = (_b = config === null || config === void 0 ? void 0 : config.file_storage) === null || _b === void 0 ? void 0 : _b.accepted_file_types) !== null && _c !== void 0 ? _c : ['image/*'], configId: (_d = config === null || config === void 0 ? void 0 : config.file_storage) === null || _d === void 0 ? void 0 : _d.file_storage_destination_id, onFileUpload: onFileUpload });
             } });
         case exports.UserQuestionType.Description:
           return jsxRuntime.exports.jsx(Description, { content: question.title });

package/dist/types/atoms/fileInputField/FileInputField.d.ts

@@ -1,25 +1,19 @@
 import React from 'react';
+import { Attachment } from '../../molecules/question/types';
 interface Props {
     id?: string;
     label?: string;
-    description?: string;
     accept?: Array<string>;
-    maxSize?: number;
     multiple?: boolean;
     error?: string;
-    disabled?: boolean;
-    required?: boolean;
-    onChange: (files: Array<File>) => void;
+    onChange: (attachments: Array<Attachment>) => void;
     onError?: (error: string) => void;
     className?: string;
     onBlur?: () => void;
     dataCy?: string;
-    value?: Array<string>;
-    loading?: boolean;
-    fileUploadErrors?: Array<{
-        id: string;
-        error: string;
-    }>;
+    onFileUpload?: (file: File, configId?: string) => Promise<string | undefined>;
+    configId?: string;
+    value?: Array<Attachment>;
 }
 export declare const FileInputField: React.FC<Props>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@awell-health/ui-library",
-  "version": "0.1.92",
+  "version": "0.1.93",
   "description": "UI components to integrate with Awell Health",
   "repository": {
     "type": "git",