@pareto-engineering/design-system 4.2.1-alpha.0 → 4.2.3

package/dist/cjs/f/fields/FileUpload/styles.scss

@@ -0,0 +1,73 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+@use "@pareto-engineering/bem";
+
+$default-padding: 1rem;
+$default-margin: 1rem;
+
+.#{bem.$base}.file-upload {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+
+
+  > p {
+    color: var(--y);
+    margin: 0;
+  }
+
+  > .#{bem.$base}.description {
+    height: auto;
+  }
+
+  > .#{bem.$base}.form-label {
+    align-items: center;
+    border: var(--theme-default-border-style) var(--ui-lines);
+    border-radius: calc(var(--theme-default-border-radius) / 2);
+    color: var(--heading);
+    cursor: pointer;
+    display: flex;
+    gap: calc(var(--gap) / 2);
+    padding: $default-padding;
+    width: fit-content;
+
+    &:has(>input:disabled) {
+      --icon-color: var(--hard-disabled);
+      color: var(--hard-disabled);
+      cursor: not-allowed;
+    }
+
+    &:has(>input:not(:disabled)) {
+      &:hover,
+      &:active {
+        border: var(--theme-hover-input-border);
+      }
+    }
+
+    > .ai-icon {
+      color: var(--icon-color, var(--interactive));
+      font-size: calc(var(--s2) * 1rem);
+    }
+
+    > input[type="file"] {
+      display: none;
+    }
+  }
+
+  > .attached-files {
+    display: flex;
+    gap: var(--gap);
+
+    > p {
+      margin: 0;
+    }
+
+    > .files {
+      align-items: center;
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--gap);
+      width: 100%;
+    }
+  }
+}

package/dist/cjs/f/fields/SelectInput/common/Menu/Menu.js

@@ -41,7 +41,7 @@ const Menu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     item,
     index
   }), {
-    className: ['item', highlightedIndex === index && _exports.default.modifierActive].filter(Boolean).join(' ')
+    className: ['item', item.disabled && _exports.default.modifierDisabled, highlightedIndex === index && _exports.default.modifierActive].filter(Boolean).join(' ')
   }), /*#__PURE__*/React.createElement("p", null, item.label))));
 });
 Menu.propTypes = {

package/dist/cjs/f/fields/SelectInput/common/Multiple/Multiple.js

@@ -136,7 +136,7 @@ const Multiple = _ref => {
         case _downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
         case _downshift.useCombobox.stateChangeTypes.ItemClick:
         case _downshift.useCombobox.stateChangeTypes.InputBlur:
-          if (selectedItem) {
+          if (selectedItem && !selectedItem?.disabled) {
             setSearchInputValue('');
             addSelectedItem(selectedItem);
           }

package/dist/cjs/f/fields/SelectInput/styles.scss

@@ -122,7 +122,7 @@ $default-gap: var(--gap);
             margin: 0;
           }
 
-          &.#{bem.$modifier-active} {
+          &.#{bem.$modifier-active}:not(.disabled) {
             background-color: var(--y);
 
             > p {

package/dist/cjs/f/fields/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "EditorInput", {
     return _EditorInput.EditorInput;
   }
 });
+Object.defineProperty(exports, "FileUpload", {
+  enumerable: true,
+  get: function () {
+    return _FileUpload.FileUpload;
+  }
+});
 Object.defineProperty(exports, "LinkInput", {
   enumerable: true,
   get: function () {
@@ -69,6 +75,12 @@ Object.defineProperty(exports, "TextareaInput", {
     return _TextareaInput.TextareaInput;
   }
 });
+Object.defineProperty(exports, "fileUploadOptions", {
+  enumerable: true,
+  get: function () {
+    return _FileUpload.fileUploadOptions;
+  }
+});
 var _TextInput = require("./TextInput");
 var _SelectInput = require("./SelectInput");
 var _ChoicesInput = require("./ChoicesInput");
@@ -79,4 +91,5 @@ var _QuerySelect = require("./QuerySelect");
 var _Checkbox = require("./Checkbox");
 var _QueryChoices = require("./QueryChoices");
 var _LinkInput = require("./LinkInput");
-var _EditorInput = require("./EditorInput");
+var _EditorInput = require("./EditorInput");
+var _FileUpload = require("./FileUpload");

package/dist/cjs/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.js

@@ -22,6 +22,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 const baseClassName = _exports.default.base;
 const componentClassName = 'input-builder';
+const getToggleSwitchStyles = condition => condition ? {
+  '--slider-background-color': 'var(--disabled)'
+} : {};
 
 /**
  * This is the component description.
@@ -45,11 +48,6 @@ const InputBuilder = _ref => {
   const handleToggleRequired = () => {
     setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.required`, !input?.required);
   };
-  const toggleSwitchStyles = {
-    ...(!input?.required ? {
-      '--slider-background-color': 'var(--disabled)'
-    } : {})
-  };
   const [hasDescription, setHasDescription] = (0, _react.useState)(false);
 
   // TODO: handle nav logic
@@ -69,6 +67,10 @@ const InputBuilder = _ref => {
     } = e.target;
     setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.options.${optionIndex}.label`, value);
   };
+  const isFile = input?.type === 'file';
+  const handleToggleShowSpecificFileTypes = () => {
+    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.showSpecificFileTypes`, !input.showSpecificFileTypes);
+  };
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -102,6 +104,9 @@ const InputBuilder = _ref => {
     }, {
       value: 'choices',
       label: 'Radio buttons'
+    }, {
+      value: 'file',
+      label: 'File upload'
     }]
   }), /*#__PURE__*/React.createElement("div", {
     className: "controls"
@@ -117,7 +122,7 @@ const InputBuilder = _ref => {
   }, "Required"), /*#__PURE__*/React.createElement(_a.ToggleSwitch, {
     handleOnChange: handleToggleRequired,
     checked: input?.required,
-    style: toggleSwitchStyles,
+    style: getToggleSwitchStyles(!input?.required),
     inputId: `sections_${sectionIndex}_inputs.${inputIndex}_toggle`
   })), /*#__PURE__*/React.createElement(_ActionsContainer.ActionsContainer, null, /*#__PURE__*/React.createElement("p", null, "Show"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
     className: `option ${hasDescription ? 'with-check-mark' : ''}`
@@ -181,7 +186,29 @@ const InputBuilder = _ref => {
     }, "+")), /*#__PURE__*/React.createElement("span", {
       className: "text x-paragraph c-x"
     }, "Add Option")));
-  })));
+  }), isFile && /*#__PURE__*/React.createElement("div", {
+    className: "input-file-options"
+  }, /*#__PURE__*/React.createElement(_f.TextInput, {
+    label: "Maximum number of files",
+    name: `sections.${sectionIndex}.inputs.${inputIndex}.maxCount`,
+    placeholder: "1",
+    type: "number",
+    min: "0",
+    validate: _f.integerAndGreaterThanZero
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "specific-file-types"
+  }, /*#__PURE__*/React.createElement(_a.ToggleSwitch, {
+    handleOnChange: handleToggleShowSpecificFileTypes,
+    checked: input?.showSpecificFileTypes,
+    style: getToggleSwitchStyles(!input?.showSpecificFileTypes),
+    inputId: `sections_${sectionIndex}_inputs.${inputIndex}_show_specific_file_types`
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "s0"
+  }, "Allow only specific file types")), input?.showSpecificFileTypes && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_f.ChoicesInput, {
+    name: `sections.${sectionIndex}.inputs.${inputIndex}.accept`,
+    options: _f.fileUploadOptions,
+    multiple: true
+  })))));
 };
 InputBuilder.propTypes = {
   /**

package/dist/cjs/g/FormBuilder/common/Builder/common/InputBuilder/styles.scss

@@ -137,6 +137,17 @@ $default-list-width: var(--action-button-width, 18rem);
         }
       }
     }
+
+    > .input-file-options {
+      display: flex;
+      flex-direction: column;
+      gap: var(--gap);
+      margin-bottom: $default-margin;
+
+      > .specific-file-types {
+        display: flex;
+      }
+    }
   }
 }
 

package/dist/cjs/g/FormBuilder/common/Renderer/Renderer.js

@@ -22,9 +22,14 @@ const reconstructFormDataWithValues = (formData, values) => {
   const newData = {
     ...formData
   };
-  Object.keys(values).forEach(key => {
+  Object.keys(values).forEach(async key => {
     const [sectionIdx, inputIdx] = key.match(/\d+/g).map(Number);
-    newData.sections[sectionIdx].inputs[inputIdx].value = values[key];
+    if (key.includes('files')) {
+      const files = values[key].map(file => URL.createObjectURL(file));
+      newData.sections[sectionIdx].inputs[inputIdx].files = files;
+    } else {
+      newData.sections[sectionIdx].inputs[inputIdx].value = values[key];
+    }
   });
   return newData;
 };
@@ -125,7 +130,8 @@ const Renderer = _ref => {
     return /*#__PURE__*/React.createElement(_formik.Form, null, updatedFormData.sections.map((section, sectionIndex) => sectionIndex === currentSectionIndex && /*#__PURE__*/React.createElement(_common.Section, _extends({
       key: `${section.title}`
     }, section, {
-      readOnly: readOnly
+      readOnly: readOnly,
+      setUpdatedFormData: setUpdatedFormData
     }))), /*#__PURE__*/React.createElement("div", {
       className: "navigator-container"
     }, /*#__PURE__*/React.createElement(_b.Button, {

package/dist/cjs/g/FormBuilder/common/Renderer/common/Section/Section.js

@@ -12,7 +12,7 @@ var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports")
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* @pareto-engineering/generator-front 1.1.1-alpha.2 */ // Local Definitions
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* eslint-disable no-alert */ /* @pareto-engineering/generator-front 1.1.1-alpha.2 */ // Local Definitions
 const baseClassName = _exports.default.base;
 const componentClassName = 'section';
 
@@ -39,7 +39,7 @@ const Section = _ref => {
   }, title), /*#__PURE__*/React.createElement(_.ExpandableLexicalPreview, {
     nodes: description,
     name: "instructions"
-  }), inputs.map(input => /*#__PURE__*/React.createElement(_f.FormInput, _extends({
+  }), inputs?.map(input => /*#__PURE__*/React.createElement(_f.FormInput, _extends({
     key: input.name
   }, input, {
     disabled: readOnly

package/dist/es/a/XMLEditor/XMLEditor.js

@@ -27,9 +27,7 @@ const XMLEditor = ({
   gutterWidth,
   config,
   onChange,
-  onBlur,
-  stopAllPropagation,
-  stopPropagationKeys
+  onBlur
 }) => {
   const editorRef = useRef();
   useEffect(() => {
@@ -44,9 +42,7 @@ const XMLEditor = ({
         }
       }), EditorView.domEventHandlers({
         keydown(e) {
-          if (stopPropagationKeys?.includes(e.key) || stopAllPropagation) {
-            e.stopPropagation();
-          }
+          e.stopPropagation();
         }
       })]
     });
@@ -102,18 +98,10 @@ XMLEditor.propTypes = {
    * The width of the gutter.
    */
   gutterWidth: PropTypes.string,
-  /**
-   * The keys to stop propagation on.
-   */
-  stopPropagationKeys: PropTypes.arrayOf(PropTypes.string),
   /**
    * The callback for when the editor loses focus.
    */
-  onBlur: PropTypes.func,
-  /**
-   * Whether to stop all propagation of keys to keep focus on the editor.
-   */
-  stopAllPropagation: PropTypes.bool
+  onBlur: PropTypes.func
 };
 XMLEditor.defaultProps = {
   config: `<View>

package/dist/es/f/FormInput/FormInput.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import * as React from 'react';
 import { memo } from 'react';
 import PropTypes from 'prop-types';
-import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices, LinkInput, EditorInput } from "../fields";
+import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices, LinkInput, EditorInput, FileUpload } from "../fields";
 import "./styles.scss";
 
 // Local Definitions
@@ -89,6 +89,12 @@ const FormInput = ({
       disabled: disabled
     }, otherProps));
   }
+  if (type === 'file') {
+    return /*#__PURE__*/React.createElement(FileUpload, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
   if (extraTypes?.[type]) {
     const Component = extraTypes[type];
     return /*#__PURE__*/React.createElement(Component, _extends({

package/dist/es/f/common/utils/index.js

@@ -1 +1,2 @@
-export { lookUpInputValueFromFetchedOptions } from "./lookUpInputValueFromFetchedOptions";
+export { lookUpInputValueFromFetchedOptions } from "./lookUpInputValueFromFetchedOptions";
+export { integerAndGreaterThanZero } from "./validators";

package/dist/es/f/common/utils/validators.js

@@ -0,0 +1,10 @@
+export const integerAndGreaterThanZero = value => {
+  let error = '';
+  if (value && value <= 0 || value === 0) {
+    error = 'Value must be greator than zero.';
+  }
+  if (value && value % 1 !== 0) {
+    error = 'You must enter a whole number.';
+  }
+  return error;
+};

package/dist/es/f/fields/ChoicesInput/common/Choice/Choice.js

@@ -23,7 +23,8 @@ const Choice = ({
   value,
   multiple,
   validate,
-  disabled
+  disabled,
+  ...otherProps
 }) => {
   const type = multiple ? 'checkbox' : 'radio';
   const [field] = useField({
@@ -39,7 +40,7 @@ const Choice = ({
     type: type,
     id: id,
     name: name
-  }, field, {
+  }, field, otherProps, {
     value: value,
     disabled: disabled
   })), /*#__PURE__*/React.createElement("label", {

package/dist/es/f/fields/EditorInput/EditorInput.js

@@ -48,7 +48,6 @@ const EditorInput = ({
   style,
   name,
   label,
-  // validate,
   resize,
   color,
   rows,
@@ -57,7 +56,6 @@ const EditorInput = ({
   description,
   disabled,
   showDebugger,
-  stopPropagationKeys,
   setEditorState
   // ...otherProps
 }) => {
@@ -145,9 +143,7 @@ const EditorInput = ({
     onChange: onChange
   }), /*#__PURE__*/React.createElement(LinkPlugin, null), /*#__PURE__*/React.createElement(LexicalClickableLinkPlugin, null), /*#__PURE__*/React.createElement(TabIndentationPlugin, null), setEditorState && /*#__PURE__*/React.createElement(ExposeEditorStatePlugin, {
     setEditorState: setEditorState
-  }), /*#__PURE__*/React.createElement(HistoryPlugin, null), stopPropagationKeys && /*#__PURE__*/React.createElement(StopPropagationPlugin, {
-    stopPropagationKeys: stopPropagationKeys
-  }), /*#__PURE__*/React.createElement(FormDescription, {
+  }), /*#__PURE__*/React.createElement(HistoryPlugin, null), /*#__PURE__*/React.createElement(StopPropagationPlugin, null), /*#__PURE__*/React.createElement(FormDescription, {
     className: "s-1",
     description: description,
     name: name
@@ -174,11 +170,6 @@ EditorInput.propTypes = {
    * The input label
    */
   label: PropTypes.string.isRequired,
-  /**
-   * The input value validator function
-   */
-  // validate:PropTypes.func,
-
   /**
    * The number of rows int the text area
    */
@@ -210,11 +201,7 @@ EditorInput.propTypes = {
   /**
    * Whether to show the debugger or not
    */
-  showDebugger: PropTypes.bool,
-  /**
-   * Map to stop propagation of the given keys
-   */
-  stopPropagationKeys: PropTypes.arrayOf(PropTypes.string)
+  showDebugger: PropTypes.bool
 };
 EditorInput.defaultProps = {
   rows: 10,

package/dist/es/f/fields/EditorInput/common/StopPropagationPlugin.js

@@ -1,14 +1,10 @@
 import { useInsertionEffect } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-const StopPropagationPlugin = ({
-  stopPropagationKeys
-}) => {
+const StopPropagationPlugin = () => {
   const [editor] = useLexicalComposerContext();
   useInsertionEffect(() => {
     const onKeyDown = e => {
-      if (stopPropagationKeys?.includes(e.key)) {
-        e.stopPropagation();
-      }
+      e.stopPropagation();
     };
     return editor.registerRootListener((rootElement, prevRootElement) => {
       if (prevRootElement !== null) {

package/dist/es/f/fields/FileUpload/FileUpload.js

@@ -0,0 +1,218 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useField } from 'formik';
+import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
+import { FilePreview } from "./common";
+import { FormLabel, FormDescription } from "../../common";
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'file-upload';
+
+/**
+ * This is the component description.
+ */
+const FileUpload = ({
+  id,
+  className: userClassName,
+  style,
+  label,
+  description,
+  accept,
+  multiple,
+  name,
+  disabled,
+  maxCount,
+  maxCountError,
+  maxSize,
+  maxSizeError,
+  onChange,
+  onDelete,
+  // TODO: TBD when connecting with BE
+  // onPreview,
+  // progress,
+  // percent,
+  // uploadStatus,
+  filePreviewAlignment,
+  optional,
+  labelColor,
+  color
+  // ...otherProps
+}) => {
+  const [field,, helpers] = useField({
+    name
+  });
+  const {
+    value
+  } = field;
+  const {
+    setError,
+    setValue,
+    setTouched
+  } = helpers;
+  const handleChange = event => {
+    setTouched(true, false);
+    const newFiles = Array.from(event.currentTarget.files);
+    const currentFiles = value || [];
+    const currentCount = currentFiles.length + newFiles.length;
+    if (maxCount && currentCount > maxCount) {
+      setError(maxCountError || `Maximum of ${maxCount} files allowed`);
+      return;
+    }
+    const duplicateFiles = newFiles.filter(newFile => currentFiles.some(currentFile => currentFile.name === newFile.name));
+    if (duplicateFiles.length > 0) {
+      setError('You cannot upload the same file twice.');
+      return;
+    }
+    if (maxSize) {
+      const oversizedFiles = newFiles.filter(file => file.size > maxSize);
+      if (oversizedFiles.length > 0) {
+        setError(maxSizeError || `File size exceeds the limit of ${maxSize} bytes`);
+        return;
+      }
+    }
+    const updatedFiles = [...currentFiles, ...newFiles];
+    setValue(updatedFiles);
+    onChange?.(updatedFiles);
+
+    // eslint-disable-next-line no-param-reassign
+    event.target.value = null;
+  };
+  const handleDelete = fileIndex => {
+    const updatedFiles = value.filter((_, i) => i !== fileIndex);
+    setValue(updatedFiles);
+    onDelete?.(fileIndex);
+  };
+  const acceptOptions = Array.isArray(accept) ? accept?.join(',') : accept;
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `preview-${filePreviewAlignment}`, `y-${color}`].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("p", null, label), /*#__PURE__*/React.createElement(FormDescription, {
+    className: "s-1",
+    description: description,
+    name: name
+  }), !disabled && /*#__PURE__*/React.createElement(FormLabel, {
+    name: name,
+    color: labelColor,
+    optional: optional
+  }, /*#__PURE__*/React.createElement("input", {
+    id: name,
+    className: "file",
+    type: "file",
+    accept: acceptOptions,
+    multiple: multiple || maxCount && maxCount > 0,
+    disabled: disabled,
+    onChange: handleChange
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ai-icon"
+  }, "U"), /*#__PURE__*/React.createElement("span", null, "Attach file")), value?.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "attached-files"
+  }, /*#__PURE__*/React.createElement("p", null, "Attached files:"), /*#__PURE__*/React.createElement("div", {
+    className: "files"
+  }, value.map((file, indx) => /*#__PURE__*/React.createElement(FilePreview, {
+    file: file,
+    key: file.name,
+    disabled: disabled,
+    handleDelete: () => handleDelete(indx)
+  })))));
+};
+FileUpload.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: PropTypes.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string),
+  /**
+   * The label text for the file input
+   */
+  label: PropTypes.string,
+  /**
+   * The description text below the label
+   */
+  description: PropTypes.string,
+  /**
+   * The color of the text
+   */
+  color: PropTypes.string,
+  /**
+   * The accepted file types (e.g., 'image/*')
+   */
+  accept: PropTypes.string,
+  /**
+   *  Whether to allow multiple file uploads
+   */
+  multiple: PropTypes.bool,
+  /**
+   * The name attribute for the input
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * Whether the the input should be disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * The maximum number of files allowed
+   */
+  maxCount: PropTypes.number,
+  /**
+   * The error message when max count is exceeded
+   */
+  maxCountError: PropTypes.string,
+  /**
+   * The maximum size of files allowed (in bytes)
+   */
+  maxSize: PropTypes.number,
+  /**
+   * The error message when file size exceeds max size
+   */
+  maxSizeError: PropTypes.string,
+  /**
+   * The upload progress value (0-100)
+   */
+  // progress:PropTypes.number,
+
+  /**
+   * The function to handle file change events
+   */
+  onChange: PropTypes.func,
+  /**
+   * The function to handle file delete events
+   */
+  onDelete: PropTypes.func,
+  /**
+   * The function to handle file download events
+   */
+  // onDownload:PropTypes.func,
+
+  /**
+   * The function to handle file preview events
+   */
+  // onPreview:PropTypes.func,
+
+  /**
+   * The upload status of the file if being sent to an external service (e.g., 'uploading', 'done')
+   */
+  // uploadStatus:PropTypes.oneOf(['uploading', 'done', 'failed']),
+
+  /**
+   * The alignment for file previews WRT the upload input
+   */
+  filePreviewAlignment: PropTypes.oneOf(['left', 'right', 'top', 'bottom'])
+};
+FileUpload.defaultProps = {
+  disabled: false,
+  color: 'paragraph',
+  filePreviewAlignment: 'bottom'
+};
+export default FileUpload;