@digigov/form 0.4.6 → 0.4.10

package/esm/inputs/FileInput/index.js

@@ -1,35 +1,13 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import TextField from '@material-ui/core/TextField';
-import NormalText from '@digigov/ui/typography/NormalText';
-import Button from '@digigov/ui/core/Button';
-var useStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      '& > *': {
-        margin: theme.spacing(1)
-      }
-    },
-    input: {
-      display: 'none'
-    },
-    button: {
-      margin: 0
-    },
-    text: {
-      marginLeft: theme.spacing(2),
-      position: 'relative',
-      top: theme.spacing(0.5)
-    }
-  };
-});
+import NormalText from '@digigov/react-core/NormalText';
+import FileUpload from '@digigov/react-core/FileUpload';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var FileInput = /*#__PURE__*/React.forwardRef(function FileInput(_ref, ref) {
   var name = _ref.name,
       _ref$extra = _ref.extra,
       extra = _ref$extra === void 0 ? {} : _ref$extra,
       disabled = _ref.disabled;
-  var classes = useStyles();
 
   var _useState = useState([]),
       _useState2 = _slicedToArray(_useState, 2),
@@ -38,16 +16,13 @@ var FileInput = /*#__PURE__*/React.forwardRef(function FileInput(_ref, ref) {
 
   var filesLabel = extra.multiple ? 'αρχεία' : 'αρχείο';
   return /*#__PURE__*/React.createElement("div", {
-    className: (classes.root, extra.className)
-  }, /*#__PURE__*/React.createElement(TextField, {
+    className: extra.className
+  }, /*#__PURE__*/React.createElement(FileUpload, {
+    ref: ref,
     name: name,
     id: name,
     disabled: disabled,
     type: 'file',
-    inputProps: {
-      multiple: extra.multiple,
-      accept: extra.accept
-    },
     onChange: function onChange(e) {
       var target = e.target;
       var selectedFiles = Array.from(target.files).map(function (_ref2) {
@@ -55,16 +30,7 @@ var FileInput = /*#__PURE__*/React.forwardRef(function FileInput(_ref, ref) {
         return name;
       });
       setFiles(selectedFiles);
-    },
-    className: classes.input,
-    inputRef: ref
-  }), /*#__PURE__*/React.createElement("label", {
-    htmlFor: name
-  }, /*#__PURE__*/React.createElement(Button, {
-    color: "secondary",
-    className: classes.button
-  }, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 ", filesLabel)), /*#__PURE__*/React.createElement(NormalText, {
-    className: classes.text
-  }, files.length ? files.join(', ') : "\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03B5\u03B9 ".concat(filesLabel)));
+    }
+  }), /*#__PURE__*/React.createElement(NormalText, null, files.length ? files.join(', ') : "\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03B5\u03B9 ".concat(filesLabel)));
 });
 export default FileInput;

package/esm/inputs/Input/index.js

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["name", "type", "extra"];
 import React from 'react';
-import TextField from '@material-ui/core/TextField';
+import TextInput from '@digigov/react-core/TextInput';
+import TextArea from '@digigov/react-core/TextArea';
 var TYPES_MAP = {
   string: 'text',
   "int": 'number',
@@ -16,11 +17,12 @@ var Input = /*#__PURE__*/React.forwardRef(function WrappedInput(_ref, ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   var _ref2 = extra || {},
-      multiline = _ref2.multiline,
-      rows = _ref2.rows,
-      _ref2$fullWidth = _ref2.fullWidth,
-      fullWidth = _ref2$fullWidth === void 0 ? true : _ref2$fullWidth,
-      className = _ref2.className; // if enforced to multiline use true. Derive from type otherwise.
+      _ref2$multiline = _ref2.multiline,
+      multiline = _ref2$multiline === void 0 ? false : _ref2$multiline,
+      rows = _ref2.rows;
+
+  var _ref3 = extra || {},
+      className = _ref3.className; // if enforced to multiline use true. Derive from type otherwise.
 
 
   multiline = multiline === true || type === 'text'; // use explicit rows value if set. Derive from multiline otherwise.
@@ -28,17 +30,21 @@ var Input = /*#__PURE__*/React.forwardRef(function WrappedInput(_ref, ref) {
   rows = rows || (multiline ? 4 : 1); // translate dilosi type to HTML Input type
 
   var fieldType = TYPES_MAP[type || 'text'] || 'text';
-  return /*#__PURE__*/React.createElement(TextField, _extends({
-    id: name,
-    name: name,
-    type: fieldType,
-    className: className,
-    fullWidth: fullWidth,
-    multiline: multiline,
-    rows: rows,
-    margin: "normal",
-    variant: "outlined",
-    inputRef: ref
-  }, props));
+
+  if (multiline === true) {
+    return /*#__PURE__*/React.createElement(TextArea, _extends({
+      name: name,
+      className: className,
+      rows: rows,
+      ref: ref
+    }, props));
+  } else {
+    return /*#__PURE__*/React.createElement(TextInput, _extends({
+      name: name,
+      type: fieldType,
+      className: className,
+      ref: ref
+    }, props));
+  }
 });
 export default Input;

package/esm/inputs/Label/index.js

@@ -1,29 +1,11 @@
 import React from 'react';
-import clsx from 'clsx';
-import Grid from '@material-ui/core/Grid';
-import { makeStyles } from '@material-ui/core/styles';
-import NormalText from '@digigov/ui/typography/NormalText';
+import LabelTitle from '@digigov/react-core/LabelTitle';
+import Hint from '@digigov/react-core/Hint';
 import { useTranslation } from '@digigov/ui/app/i18n';
-var useLabelStyles = makeStyles(function (theme) {
-  return {
-    labels: {
-      padding: theme.spacing(1, 0)
-    },
-    primaryLabel: {
-      fontWeight: 500,
-      lineHeight: '1.5em'
-    },
-    secondaryLabel: {
-      fontWeight: 'normal',
-      color: theme.palette.grey['700']
-    }
-  };
-});
 export var Label = function Label(_ref) {
   var className = _ref.className,
       label = _ref.label,
       value = _ref.value;
-  var classes = useLabelStyles();
 
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
@@ -32,20 +14,10 @@ export var Label = function Label(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    className: clsx(classes.labels, className)
-  }, /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 12
-  }, /*#__PURE__*/React.createElement(NormalText, {
-    className: classes.primaryLabel
-  }, label && label.primary && t(label.primary) || value)), label && label.secondary && /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 12
-  }, /*#__PURE__*/React.createElement(NormalText, {
-    className: classes.secondaryLabel
-  }, t(label.secondary))));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelTitle, {
+    className: className,
+    size: "s"
+  }, label && label.primary && t(label.primary) || value), label && label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(label.secondary)));
 };
 Label.defaultProps = {
   label: {}

package/esm/inputs/Radio/index.js

@@ -1,79 +1,18 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-import Radio from '@material-ui/core/Radio';
-import RadioGroup from '@material-ui/core/RadioGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormControl from '@material-ui/core/FormControl';
-import Label from '@digigov/form/inputs/Label';
+import Radio from '@digigov/react-core/Radio';
+import RadioItem from '@digigov/react-core/RadioItem';
+import { useTranslation } from '@digigov/ui/app/i18n';
 import { useWatch } from 'react-hook-form';
-var useRadioButtonStyles = makeStyles(function (theme) {
-  return {
-    dense: {
-      margin: theme.spacing(1, 0)
-    },
-    formControlLabelActive: {
-      backgroundColor: theme.palette.grey['200'],
-      border: "2px solid ".concat(theme.palette.primary.main)
-    },
-    formControlLabel: {
-      width: '100%',
-      alignItems: 'flex-start',
-      fontWeight: 'bolder',
-      padding: theme.spacing(0.5),
-      margin: theme.spacing(0.5, 0)
-    }
-  };
-});
-
-var _ref2 = /*#__PURE__*/React.createElement(Radio, {
-  color: "primary"
-});
-
-export var RadioButton = function RadioButton(_ref) {
-  var dense = _ref.dense,
-      value = _ref.value,
-      label = _ref.label,
-      register = _ref.register,
-      active = _ref.active,
+import Hint from '@digigov/react-core/Hint';
+export var RadioButtonsGroup = function RadioButtonsGroup(_ref) {
+  var register = _ref.register,
       name = _ref.name,
+      control = _ref.control,
+      _ref$extra = _ref.extra,
+      options = _ref$extra.options,
+      className = _ref$extra.className,
       disabled = _ref.disabled;
-  var classes = useRadioButtonStyles();
-  return /*#__PURE__*/React.createElement(FormControlLabel, {
-    className: clsx(classes.formControlLabel, active && classes.formControlLabelActive, dense && classes.dense),
-    value: value,
-    name: name,
-    disabled: disabled,
-    inputRef: register,
-    control: _ref2,
-    label: /*#__PURE__*/React.createElement(Label, {
-      label: label,
-      value: value
-    })
-  });
-};
-var useRadioButtonsGroupStyles = makeStyles(function (theme) {
-  return {
-    formControl: {
-      margin: theme.spacing(0, 0, 2, 0),
-      width: '100%'
-    },
-    dense: {
-      margin: theme.spacing(1, 0)
-    }
-  };
-});
-export var RadioButtonsGroup = function RadioButtonsGroup(_ref3) {
-  var name = _ref3.name,
-      register = _ref3.register,
-      control = _ref3.control,
-      _ref3$extra = _ref3.extra,
-      options = _ref3$extra.options,
-      dense = _ref3$extra.dense,
-      className = _ref3$extra.className,
-      disabled = _ref3.disabled;
-  var classes = useRadioButtonsGroupStyles();
   var currentValue = useWatch({
     control: control,
     name: name
@@ -83,26 +22,24 @@ export var RadioButtonsGroup = function RadioButtonsGroup(_ref3) {
       _useState2 = _slicedToArray(_useState, 1),
       defaultValue = _useState2[0];
 
-  return /*#__PURE__*/React.createElement(FormControl, {
-    component: "fieldset",
-    className: clsx(className, classes.formControl, dense && classes.dense)
-  }, /*#__PURE__*/React.createElement(RadioGroup, {
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  return /*#__PURE__*/React.createElement(Radio, {
+    className: className,
     defaultValue: defaultValue,
-    id: name,
-    name: name
-  }, options.map(function (_ref4) {
-    var label = _ref4.label,
-        v = _ref4.value,
-        optionDisabled = _ref4.disabled;
-    return /*#__PURE__*/React.createElement(RadioButton, {
+    id: name
+  }, options.map(function (_ref2) {
+    var label = _ref2.label,
+        v = _ref2.value,
+        optionDisabled = _ref2.disabled;
+    return /*#__PURE__*/React.createElement(RadioItem, {
+      ref: register,
       key: v,
-      label: label,
       name: name,
-      active: v === currentValue,
       value: v,
-      register: register,
       disabled: disabled || optionDisabled
-    });
-  })));
+    }, label && label.primary && t(label.primary) || v, label && label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(label.secondary)));
+  }));
 };
 export default RadioButtonsGroup;

package/esm/inputs/Select/index.js

@@ -1,20 +1,8 @@
 import React from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-import FormControl from '@material-ui/core/FormControl';
-import MuiSelect from '@material-ui/core/Select';
-var useSelectStyles = makeStyles(function (theme) {
-  return {
-    formControl: {
-      minWidth: 120
-    },
-    selectEmpty: {
-      marginTop: theme.spacing(2)
-    }
-  };
-});
+import CoreSelect from '@digigov/react-core/Select';
+import SelectOption from '@digigov/react-core/SelectOption';
 
-var _ref2 = /*#__PURE__*/React.createElement("option", {
+var _ref2 = /*#__PURE__*/React.createElement(SelectOption, {
   value: ""
 });
 
@@ -24,27 +12,18 @@ export var Select = /*#__PURE__*/React.forwardRef(function WrappedSelect(_ref, r
       options = _ref$extra.options,
       className = _ref$extra.className,
       disabled = _ref.disabled;
-  var classes = useSelectStyles();
-  return /*#__PURE__*/React.createElement(FormControl, {
-    variant: "outlined",
-    className: clsx(className, classes.formControl)
-  }, /*#__PURE__*/React.createElement(MuiSelect, {
-    "native": true,
-    autoWidth: true,
-    inputRef: ref,
-    inputProps: {
-      name: name,
-      id: name
-    },
+  return /*#__PURE__*/React.createElement(CoreSelect, {
+    className: className,
+    ref: ref,
+    name: name,
     disabled: disabled
   }, _ref2, options.map(function (_ref3) {
     var value = _ref3.value,
         label = _ref3.label;
-    return /*#__PURE__*/React.createElement("option", {
+    return /*#__PURE__*/React.createElement(SelectOption, {
       key: value,
-      value: value,
-      title: label && label.secondary
+      value: value
     }, label && label.primary ? label.primary : value);
-  })));
+  }));
 });
 export default Select;

package/esm/utils.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 var parseErrorSchema = function parseErrorSchema(error, validateAllFieldCriteria) {
   return Array.isArray(error.inner) && error.inner.length ? error.inner.reduce(function (previous, _ref) {
     var path = _ref.path,

package/esm/validators.js

@@ -366,7 +366,8 @@ function computeShape(fields, yupTypeMap, validatorRegistry) {
   return fieldSchemas;
 }
 
-function getYupObjectShape(fields, yupTypeMap, validatorRegistry) {
+function getYupObjectShape( // eslint-disable-next-line @typescript-eslint/no-explicit-any
+fields, yupTypeMap, validatorRegistry) {
   if (!fields.current) {
     var fieldSchemas = computeShape(fields, yupTypeMap, validatorRegistry);
     return yup.object().shape(fieldSchemas);
@@ -407,7 +408,6 @@ var getYUPTypeMap = function getYUPTypeMap() {
     iban: function iban(field) {
       return yup.string().test(IBAN_VALIDATOR(field));
     },
-    // eslint-disable-next-line @typescript-eslint/camelcase
     mobile_phone: function mobile_phone() {
       return yup.string().test(MOBILE_PHONE_VALIDATOR);
     },
@@ -419,9 +419,9 @@ var getYUPTypeMap = function getYUPTypeMap() {
     }
   };
   return yupTypeMap;
-}; // Create a yup validation schema from given fields input
-
+};
 
+// Create a yup validation schema from given fields input
 export function useValidationSchema(fields, validatorRegistry) {
   return useMemo(function () {
     var yupTypeMap = getYUPTypeMap();

package/index.js

@@ -64,6 +64,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 var FormContext = /*#__PURE__*/(0, _react.createContext)({
   fieldsMap: {},
   fieldsetsMap: {}

package/index.mdx

@@ -3,10 +3,7 @@ title: Form
 parent: docs/ui/components
 ---
 
-import { useState, useEffect } from 'react';
 import FormBuilder from '@digigov/form/';
-import PropsDoc from '@docs-components/propsDoc';
-import StylesDoc from '@docs-components/stylesDoc';
 
 export const fields = [
   {

package/inputs/Checkboxes/index.js

@@ -11,17 +11,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireDefault(require("react"));
 
-var _clsx = _interopRequireDefault(require("clsx"));
+var _i18n = require("@digigov/ui/app/i18n");
 
-var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
+var _Checkbox = _interopRequireDefault(require("@digigov/react-core/Checkbox"));
 
-var _styles = require("@material-ui/core/styles");
+var _CheckboxItem = _interopRequireDefault(require("@digigov/react-core/CheckboxItem"));
 
-var _FormGroup = _interopRequireDefault(require("@material-ui/core/FormGroup"));
-
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
-
-var _Label = _interopRequireDefault(require("@digigov/form/inputs/Label"));
+var _Hint = _interopRequireDefault(require("@digigov/react-core/Hint"));
 
 var Checkboxes = function Checkboxes(_ref) {
   var name = _ref.name,
@@ -38,8 +34,12 @@ var Checkboxes = function Checkboxes(_ref) {
       var newValue;
 
       if (evt.currentTarget.checked) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         newValue = value.concat([optionValue]);
       } else {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         newValue = value.filter(function (val) {
           return val !== optionValue;
         });
@@ -49,57 +49,23 @@ var Checkboxes = function Checkboxes(_ref) {
     };
   };
 
-  return /*#__PURE__*/_react["default"].createElement(_FormGroup["default"], {
-    id: name,
+  var _useTranslation = (0, _i18n.useTranslation)(),
+      t = _useTranslation.t;
+
+  return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
     className: className
   }, options.map(function (option, key) {
-    return /*#__PURE__*/_react["default"].createElement(Checkbox, (0, _extends2["default"])({
+    return /*#__PURE__*/_react["default"].createElement(_CheckboxItem["default"], (0, _extends2["default"])({
+      name: name,
       disabled: disabled,
-      key: key,
+      key: key // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      ,
       checked: value.includes(option.value),
-      onChange: handleChange
-    }, option));
+      onChange: handleChange(option.value)
+    }, option), option.label && option.label.primary && t(option.label.primary) || value, option.label && option.label.secondary && /*#__PURE__*/_react["default"].createElement(_Hint["default"], null, t(option.label.secondary)));
   }));
 };
 
-var useCheckboxStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    formControlLabelActive: {
-      backgroundColor: theme.palette.grey['200'],
-      border: "2px solid ".concat(theme.palette.primary.main)
-    },
-    formControlLabel: {
-      fontWeight: 'bolder',
-      padding: theme.spacing(0.5),
-      margin: theme.spacing(0.5, 0)
-    }
-  };
-});
-
-var Checkbox = function Checkbox(_ref2) {
-  var className = _ref2.className,
-      checked = _ref2.checked,
-      value = _ref2.value,
-      label = _ref2.label,
-      onChange = _ref2.onChange,
-      disabled = _ref2.disabled;
-  var classes = useCheckboxStyles();
-  return /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
-    key: value,
-    className: (0, _clsx["default"])(classes.formControlLabel, checked && classes.formControlLabelActive, className),
-    control: /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
-      checked: checked,
-      disabled: disabled,
-      color: "primary",
-      onChange: onChange(value),
-      name: value
-    }),
-    label: /*#__PURE__*/_react["default"].createElement(_Label["default"], {
-      label: label,
-      value: value
-    })
-  });
-};
-
 var _default = Checkboxes;
 exports["default"] = _default;

package/inputs/FileInput/index.js

@@ -13,45 +13,20 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styles = require("@material-ui/core/styles");
+var _NormalText = _interopRequireDefault(require("@digigov/react-core/NormalText"));
 
-var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
-
-var _NormalText = _interopRequireDefault(require("@digigov/ui/typography/NormalText"));
-
-var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
+var _FileUpload = _interopRequireDefault(require("@digigov/react-core/FileUpload"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var useStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    root: {
-      '& > *': {
-        margin: theme.spacing(1)
-      }
-    },
-    input: {
-      display: 'none'
-    },
-    button: {
-      margin: 0
-    },
-    text: {
-      marginLeft: theme.spacing(2),
-      position: 'relative',
-      top: theme.spacing(0.5)
-    }
-  };
-});
-
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var FileInput = /*#__PURE__*/_react["default"].forwardRef(function FileInput(_ref, ref) {
   var name = _ref.name,
       _ref$extra = _ref.extra,
       extra = _ref$extra === void 0 ? {} : _ref$extra,
       disabled = _ref.disabled;
-  var classes = useStyles();
 
   var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -60,16 +35,13 @@ var FileInput = /*#__PURE__*/_react["default"].forwardRef(function FileInput(_re
 
   var filesLabel = extra.multiple ? 'αρχεία' : 'αρχείο';
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (classes.root, extra.className)
-  }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+    className: extra.className
+  }, /*#__PURE__*/_react["default"].createElement(_FileUpload["default"], {
+    ref: ref,
     name: name,
     id: name,
     disabled: disabled,
     type: 'file',
-    inputProps: {
-      multiple: extra.multiple,
-      accept: extra.accept
-    },
     onChange: function onChange(e) {
       var target = e.target;
       var selectedFiles = Array.from(target.files).map(function (_ref2) {
@@ -77,17 +49,8 @@ var FileInput = /*#__PURE__*/_react["default"].forwardRef(function FileInput(_re
         return name;
       });
       setFiles(selectedFiles);
-    },
-    className: classes.input,
-    inputRef: ref
-  }), /*#__PURE__*/_react["default"].createElement("label", {
-    htmlFor: name
-  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    color: "secondary",
-    className: classes.button
-  }, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 ", filesLabel)), /*#__PURE__*/_react["default"].createElement(_NormalText["default"], {
-    className: classes.text
-  }, files.length ? files.join(', ') : "\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03B5\u03B9 ".concat(filesLabel)));
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_NormalText["default"], null, files.length ? files.join(', ') : "\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03B5\u03B9 ".concat(filesLabel)));
 });
 
 var _default = FileInput;