@synerise/ds-file-uploader 1.0.22 → 1.1.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.1.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-file-uploader@1.0.22...@synerise/ds-file-uploader@1.1.0) (2025-09-05)
+
+
+### Bug Fixes
+
+* **file-uploader:** removeable prop during uploading ([0500b62](https://github.com/Synerise/synerise-design/commit/0500b628b4a07453f585338dece23995a1f5ebd7))
+* **progress-bar:** refactor progress bar and remove ant ([3324544](https://github.com/Synerise/synerise-design/commit/33245443d076da967561558ca8506d6ab0d904e5))
+
+
+### Features
+
+* **file-uploader:** accept ref to allow programmatic open ([dac9f01](https://github.com/Synerise/synerise-design/commit/dac9f01cf35f8bf3630e89bef93e9668e41bec95))
+
+
+
+
+
 ## [1.0.22](https://github.com/Synerise/synerise-design/compare/@synerise/ds-file-uploader@1.0.21...@synerise/ds-file-uploader@1.0.22) (2025-08-28)
 
 

package/dist/AvatarUploader/AvatarUploader.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type FileUploaderProps } from '../FileUploader.types';
-declare const AvatarUploader: ({ className, onUpload, disabled, accept, error, label, onRemove, description, tooltip, filesAmount, mode, removable, files, texts, }: FileUploaderProps) => React.JSX.Element;
+import { type FileUploaderProps, type FileUploaderRef } from '../FileUploader.types';
+declare const AvatarUploader: React.ForwardRefExoticComponent<FileUploaderProps & React.RefAttributes<FileUploaderRef>>;
 export default AvatarUploader;
 //# sourceMappingURL=AvatarUploader.d.ts.map

package/dist/AvatarUploader/AvatarUploader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarUploader.d.ts","sourceRoot":"","sources":["../../src/AvatarUploader/AvatarUploader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,uBAAuB,CAAC;AAgB/B,QAAA,MAAM,cAAc,GAAI,sIAerB,iBAAiB,sBAoInB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"AvatarUploader.d.ts","sourceRoot":"","sources":["../../src/AvatarUploader/AvatarUploader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAQf,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACrB,MAAM,uBAAuB,CAAC;AAgB/B,QAAA,MAAM,cAAc,2FAqKnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/AvatarUploader/AvatarUploader.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from 'react';
+import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import Button from '@synerise/ds-button';
 import { useTheme } from '@synerise/ds-core';
@@ -20,7 +20,7 @@ function readAsText(file) {
     reader.readAsText(file);
   });
 }
-var AvatarUploader = function AvatarUploader(_ref) {
+var AvatarUploader = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onUpload = _ref.onUpload,
     disabled = _ref.disabled,
@@ -38,11 +38,11 @@ var AvatarUploader = function AvatarUploader(_ref) {
     _ref$files = _ref.files,
     files = _ref$files === void 0 ? [] : _ref$files,
     texts = _ref.texts;
-  var _React$useState = React.useState(true),
-    uploadSuccess = _React$useState[0],
-    setUploadSuccess = _React$useState[1];
+  var _useState = useState(true),
+    uploadSuccess = _useState[0],
+    setUploadSuccess = _useState[1];
   var theme = useTheme();
-  var readFilesContent = React.useCallback(function (addedFiles) {
+  var readFilesContent = useCallback(function (addedFiles) {
     var readerPromises = addedFiles.map(function (file) {
       return readAsText(file);
     });
@@ -55,7 +55,7 @@ var AvatarUploader = function AvatarUploader(_ref) {
       onUpload && onUpload(filesWithContent);
     });
   }, [onUpload]);
-  var onDrop = React.useCallback(function (acceptedFiles) {
+  var onDrop = useCallback(function (acceptedFiles) {
     var possibleUpload = 0;
     if (filesAmount) {
       possibleUpload = filesAmount - files.length;
@@ -75,15 +75,25 @@ var AvatarUploader = function AvatarUploader(_ref) {
     }),
     getRootProps = _useDropzone.getRootProps,
     getInputProps = _useDropzone.getInputProps,
-    isDragActive = _useDropzone.isDragActive;
+    isDragActive = _useDropzone.isDragActive,
+    open = _useDropzone.open,
+    inputRef = _useDropzone.inputRef,
+    rootRef = _useDropzone.rootRef;
+  useImperativeHandle(ref, function () {
+    return {
+      open: open,
+      inputRef: inputRef,
+      rootRef: rootRef
+    };
+  });
   if (filesAmount && filesAmount < 1) {
     filesAmount = 1;
     throw new Error('Invalid value of property "filesAmount" ');
   }
   var hasError = Boolean(error) || !uploadSuccess;
-  var _React$useState2 = React.useState(false),
-    pressed = _React$useState2[0],
-    setPressed = _React$useState2[1];
+  var _useState2 = useState(false),
+    pressed = _useState2[0],
+    setPressed = _useState2[1];
   return /*#__PURE__*/React.createElement(S.Container, {
     className: "ds-file-avatar-uploader " + (className || '')
   }, label && /*#__PURE__*/React.createElement(S.Label, null, /*#__PURE__*/React.createElement("span", null, label), tooltip && /*#__PURE__*/React.createElement(Tooltip, {
@@ -139,5 +149,5 @@ var AvatarUploader = function AvatarUploader(_ref) {
   }), "Add file"), description && /*#__PURE__*/React.createElement(S.Description, {
     hasError: hasError
   }, description))));
-};
+});
 export default AvatarUploader;

package/dist/FileUploader.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type FileUploaderProps } from './FileUploader.types';
-declare const FileUploader: ({ className, onUpload, disabled, accept, error, label, onRemove, description, tooltip, filesAmount, mode, removable, files, retry, texts, }: FileUploaderProps) => React.JSX.Element;
+import { type FileUploaderProps, type FileUploaderRef } from './FileUploader.types';
+declare const FileUploader: React.ForwardRefExoticComponent<FileUploaderProps & React.RefAttributes<FileUploaderRef>>;
 export default FileUploader;
 //# sourceMappingURL=FileUploader.d.ts.map

package/dist/FileUploader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploader.d.ts","sourceRoot":"","sources":["../src/FileUploader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AASrD,OAAO,EAAoB,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAehF,QAAA,MAAM,YAAY,GAAI,6IAgBnB,iBAAiB,sBAqKnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"FileUploader.d.ts","sourceRoot":"","sources":["../src/FileUploader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AASf,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACrB,MAAM,sBAAsB,CAAC;AAe9B,QAAA,MAAM,YAAY,2FAuMjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/FileUploader.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useState } from 'react';
+import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { FormattedMessage } from 'react-intl';
 import { useTheme } from '@synerise/ds-core';
@@ -20,7 +20,7 @@ function readAsText(file) {
     reader.readAsText(file);
   });
 }
-var FileUploader = function FileUploader(_ref) {
+var FileUploader = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onUpload = _ref.onUpload,
     disabled = _ref.disabled,
@@ -90,7 +90,17 @@ var FileUploader = function FileUploader(_ref) {
     }),
     getRootProps = _useDropzone.getRootProps,
     getInputProps = _useDropzone.getInputProps,
-    isDragActive = _useDropzone.isDragActive;
+    isDragActive = _useDropzone.isDragActive,
+    open = _useDropzone.open,
+    inputRef = _useDropzone.inputRef,
+    rootRef = _useDropzone.rootRef;
+  useImperativeHandle(ref, function () {
+    return {
+      open: open,
+      inputRef: inputRef,
+      rootRef: rootRef
+    };
+  });
   if (filesAmount && filesAmount < 1) {
     filesAmount = 1;
     throw new Error('Invalid value of property "filesAmount" ');
@@ -158,5 +168,5 @@ var FileUploader = function FileUploader(_ref) {
   }), description && /*#__PURE__*/React.createElement(S.Description, {
     hasError: hasError
   }, description));
-};
+});
 export default FileUploader;

package/dist/FileUploader.types.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ReactNode, type RefObject } from 'react';
 import { type FileViewTexts } from './FileView/FileView.types';
 export interface ExtendedFile {
     file: FileWithContent;
@@ -37,5 +37,10 @@ export interface FileUploaderProps {
 export type ItemUploaderProps = Omit<FileUploaderProps, 'mode'> & {
     mode: 'single' | 'multi';
 };
+export type FileUploaderRef = {
+    open: () => void;
+    inputRef: RefObject<HTMLInputElement>;
+    rootRef: RefObject<HTMLElement>;
+};
 export {};
 //# sourceMappingURL=FileUploader.types.d.ts.map

package/dist/FileUploader.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploader.types.d.ts","sourceRoot":"","sources":["../src/FileUploader.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI;IAC3C,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;AAEtD,KAAK,iBAAiB,GAAG,aAAa,GAAG;IACvC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,iBAAiB,CAAC,EAAE,SAAS,CAAC;CAC/B,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,QAAQ,GAAG,cAAc,GAAG,aAAa,CAAC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC,GAAG;IAChE,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC1B,CAAC"}
+{"version":3,"file":"FileUploader.types.d.ts","sourceRoot":"","sources":["../src/FileUploader.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI;IAC3C,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;AAEtD,KAAK,iBAAiB,GAAG,aAAa,GAAG;IACvC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,iBAAiB,CAAC,EAAE,SAAS,CAAC;CAC/B,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,QAAQ,GAAG,cAAc,GAAG,aAAa,CAAC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC,GAAG;IAChE,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACtC,OAAO,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACjC,CAAC"}

package/dist/FileView/FileView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileView.d.ts","sourceRoot":"","sources":["../../src/FileView/FileView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAiBxC,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,QAAA,MAAM,QAAQ,GAAI,gEAOf,aAAa,sBA6Kf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"FileView.d.ts","sourceRoot":"","sources":["../../src/FileView/FileView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAiBxC,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,QAAA,MAAM,QAAQ,GAAI,gEAOf,aAAa,sBAkLf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/FileView/FileView.js

@@ -88,14 +88,10 @@ var FileView = function FileView(_ref) {
     size: 24
   })), /*#__PURE__*/React.createElement(S.Info, {
     progress: hasProgress
-  }, hasProgress ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.Name, null, /*#__PURE__*/React.createElement(S.FileName, null, file.name), ' ', /*#__PURE__*/React.createElement(S.FileWeight, null, filesize(progress / 100 * file.size))), /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex'
-    }
-  }, /*#__PURE__*/React.createElement(ProgressBar, {
-    amount: 100,
-    percent: progress
-  }), /*#__PURE__*/React.createElement(S.RemoveWrapper, {
+  }, hasProgress ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.Name, null, /*#__PURE__*/React.createElement(S.FileName, null, file.name), ' ', /*#__PURE__*/React.createElement(S.FileWeight, null, filesize(progress / 100 * file.size))), /*#__PURE__*/React.createElement(S.FlexRow, null, /*#__PURE__*/React.createElement(ProgressBar, {
+    width: "300px",
+    percent: finalTexts.percent
+  }), removable && /*#__PURE__*/React.createElement(S.RemoveWrapper, {
     onClick: onRemove,
     "data-testid": "fileview-remove"
   }, /*#__PURE__*/React.createElement(Tooltip, {

package/dist/FileView/FileView.styles.d.ts

@@ -7,6 +7,7 @@ export declare const PopconfirmOnRemove: import("styled-components").StyledCompo
 export declare const FileWeight: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FileName: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Name: import("styled-components").StyledComponent<"label", any, {}, never>;
+export declare const FlexRow: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SizeOrError: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/lib/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
 export declare const RemoveWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CheckButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/FileView/FileView.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileView.styles.d.ts","sourceRoot":"","sources":["../../src/FileView/FileView.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,oEAKxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAU5B,CAAC;AAEF,eAAO,MAAM,IAAI;cAA0B,OAAO;SAIjD,CAAC;AAEF,eAAO,MAAM,kBAAkB,qIAQ9B,CAAC;AACF,eAAO,MAAM,UAAU,oEAKtB,CAAC;AACF,eAAO,MAAM,QAAQ,oEAKpB,CAAC;AACF,eAAO,MAAM,IAAI,sEAShB,CAAC;AAEF,eAAO,MAAM,WAAW,uMAIvB,CAAC;AACF,eAAO,MAAM,aAAa,oEAyBzB,CAAC;AACF,eAAO,MAAM,kBAAkB,oEAsB9B,CAAC;AACF,eAAO,MAAM,mBAAmB;cAA0B,OAAO;SA0BhE,CAAC;AAEF,eAAO,MAAM,iBAAiB;eACjB,OAAO;YACV,OAAO;gBACH,OAAO;cACT,OAAO;eACN,OAAO;cACR,OAAO;SAqFlB,CAAC"}
+{"version":3,"file":"FileView.styles.d.ts","sourceRoot":"","sources":["../../src/FileView/FileView.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,oEAKxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAU5B,CAAC;AAEF,eAAO,MAAM,IAAI;cAA0B,OAAO;SAIjD,CAAC;AAEF,eAAO,MAAM,kBAAkB,qIAQ9B,CAAC;AACF,eAAO,MAAM,UAAU,oEAKtB,CAAC;AACF,eAAO,MAAM,QAAQ,oEAKpB,CAAC;AACF,eAAO,MAAM,IAAI,sEAShB,CAAC;AAEF,eAAO,MAAM,OAAO,oEAEnB,CAAC;AAEF,eAAO,MAAM,WAAW,uMAIvB,CAAC;AACF,eAAO,MAAM,aAAa,oEAyBzB,CAAC;AACF,eAAO,MAAM,kBAAkB,oEAsB9B,CAAC;AACF,eAAO,MAAM,mBAAmB;cAA0B,OAAO;SA0BhE,CAAC;AAEF,eAAO,MAAM,iBAAiB;eACjB,OAAO;YACV,OAAO;gBACH,OAAO;cACT,OAAO;eACN,OAAO;cACR,OAAO;SAqFlB,CAAC"}

package/dist/FileView/FileView.styles.js

@@ -42,15 +42,19 @@ export var Name = styled(Label).withConfig({
 })(["&&{color:", ";max-width:100%;cursor:initial;white-space:nowrap;display:flex;justify-content:space-between;}"], function (props) {
   return props.theme.palette['grey-600'];
 });
+export var FlexRow = styled.div.withConfig({
+  displayName: "FileViewstyles__FlexRow",
+  componentId: "sc-wpdc66-7"
+})(["display:flex;"]);
 export var SizeOrError = styled(Typography.Text).withConfig({
   displayName: "FileViewstyles__SizeOrError",
-  componentId: "sc-wpdc66-7"
+  componentId: "sc-wpdc66-8"
 })(["&&{color:", ";}"], function (props) {
   return props.theme.palette['grey-600'];
 });
 export var RemoveWrapper = styled.div.withConfig({
   displayName: "FileViewstyles__RemoveWrapper",
-  componentId: "sc-wpdc66-8"
+  componentId: "sc-wpdc66-9"
 })(["display:flex;background-color:transparent;z-index:10;border:0;padding:0;margin:0;height:16px;width:16px;position:absolute;top:14px;right:10px;cursor:pointer;", "{position:absolute;right:-2px;top:-2px;transition:color 0.3s;color:", ";&:hover{color:", ";}}"], IconContainer, function (props) {
   return props.theme.palette['grey-300'];
 }, function (props) {
@@ -58,7 +62,7 @@ export var RemoveWrapper = styled.div.withConfig({
 });
 export var CheckButtonWrapper = styled.div.withConfig({
   displayName: "FileViewstyles__CheckButtonWrapper",
-  componentId: "sc-wpdc66-9"
+  componentId: "sc-wpdc66-10"
 })(["display:flex;background-color:transparent;z-index:10;margin:0;height:16px;width:16px;position:absolute;top:14px;right:10px;cursor:pointer;", "{position:absolute;right:-2px;top:-2px;transition:color 0.3s;color:", ";&:hover{color:", ";}}"], IconContainer, function (props) {
   return props.theme.palette['green-600'];
 }, function (props) {
@@ -66,7 +70,7 @@ export var CheckButtonWrapper = styled.div.withConfig({
 });
 export var RemoveButtonWrapper = styled.div.withConfig({
   displayName: "FileViewstyles__RemoveButtonWrapper",
-  componentId: "sc-wpdc66-10"
+  componentId: "sc-wpdc66-11"
 })(["display:", ";background-color:transparent;z-index:10;border:0;padding:0;margin:0;height:16px;width:16px;position:absolute;top:14px;right:10px;cursor:pointer;overflow:", ";", "{position:absolute;right:-2px;top:-2px;transition:color 0.3s;color:", ";&:hover{color:", ";}}"], function (props) {
   return props.pressed ? 'flex' : 'none';
 }, function (props) {
@@ -78,7 +82,7 @@ export var RemoveButtonWrapper = styled.div.withConfig({
 });
 export var FileViewContainer = styled.button.withConfig({
   displayName: "FileViewstyles__FileViewContainer",
-  componentId: "sc-wpdc66-11"
+  componentId: "sc-wpdc66-12"
 })(["background-color:", ";border-radius:3px;border:1px solid ", ";display:flex;align-items:center;padding:12px 6px;height:48px;width:100%;text-align:left;line-height:initial;position:relative;margin:0 0 12px;&:last-of-type{margin:0;}&:hover{border-color:", ";", "}&:hover{", "}&:focus{border-color:", ";background-color:", ";", "}&:hover{background-color:", ";}&:active{border-color:", ";background-color:", ";}", ";", ";.ant-progress-line{margin:8px 0 0 !important;width:93%;}"], function (props) {
   return props.theme.palette.white;
 }, function (props) {

package/dist/ItemUploader/ItemUploader.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
-import { type ItemUploaderProps } from '../FileUploader.types';
-declare const ItemUploader: React.FC<ItemUploaderProps>;
+import { type FileUploaderRef } from '../FileUploader.types';
+declare const ItemUploader: React.ForwardRefExoticComponent<Omit<import("../FileUploader.types").FileUploaderProps, "mode"> & {
+    mode: "single" | "multi";
+} & React.RefAttributes<FileUploaderRef>>;
 export default ItemUploader;
 //# sourceMappingURL=ItemUploader.d.ts.map

package/dist/ItemUploader/ItemUploader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemUploader.d.ts","sourceRoot":"","sources":["../../src/ItemUploader/ItemUploader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,uBAAuB,CAAC;AAe/B,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6H7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ItemUploader.d.ts","sourceRoot":"","sources":["../../src/ItemUploader/ItemUploader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAQ/D,OAAO,EAEL,KAAK,eAAe,EAErB,MAAM,uBAAuB,CAAC;AAe/B,QAAA,MAAM,YAAY;;yCA2IjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/ItemUploader/ItemUploader.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import { useDropzone } from 'react-dropzone';
 import Button from '@synerise/ds-button';
 import Icon, { Add3M, InfoFillS } from '@synerise/ds-icon';
@@ -19,7 +19,7 @@ function readAsText(file) {
     reader.readAsText(file);
   });
 }
-var ItemUploader = function ItemUploader(_ref) {
+var ItemUploader = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onUpload = _ref.onUpload,
     disabled = _ref.disabled,
@@ -72,7 +72,17 @@ var ItemUploader = function ItemUploader(_ref) {
       disabled: disabled
     }),
     getRootProps = _useDropzone.getRootProps,
-    getInputProps = _useDropzone.getInputProps;
+    getInputProps = _useDropzone.getInputProps,
+    open = _useDropzone.open,
+    inputRef = _useDropzone.inputRef,
+    rootRef = _useDropzone.rootRef;
+  useImperativeHandle(ref, function () {
+    return {
+      open: open,
+      inputRef: inputRef,
+      rootRef: rootRef
+    };
+  });
   if (filesAmount && filesAmount < 1) {
     filesAmount = 1;
     throw new Error('Invalid value of property "filesAmount" ');
@@ -119,5 +129,5 @@ var ItemUploader = function ItemUploader(_ref) {
   }), description && /*#__PURE__*/React.createElement(S.Description, {
     hasError: hasError
   }, description));
-};
+});
 export default ItemUploader;

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { default } from './FileUploader';
 export { default as AvatarUploader } from './AvatarUploader/AvatarUploader';
 export { default as ItemUploader } from './ItemUploader/ItemUploader';
 export type { ItemUploaderProps } from './ItemUploader/ItemUploader.types';
-export type { FileUploaderProps, ExtendedFile, FileWithContent, } from './FileUploader.types';
+export type { FileUploaderProps, ExtendedFile, FileWithContent, FileUploaderRef, FileContent, } from './FileUploader.types';
 export declare const FileUploaderStyles: {
     FileUploader: typeof Styles;
     FileView: typeof FileViewStyles;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,oBAAoB,MAAM,wCAAwC,CAAC;AAC/E,OAAO,KAAK,MAAM,MAAM,uBAAuB,CAAC;AAChD,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC;AAC7D,OAAO,KAAK,kBAAkB,MAAM,oCAAoC,CAAC;AAEzE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAEtE,YAAY,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAC3E,YAAY,EACV,iBAAiB,EACjB,YAAY,EACZ,eAAe,GAChB,MAAM,sBAAsB,CAAC;AAE9B,eAAO,MAAM,kBAAkB;;;;;CAK9B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,oBAAoB,MAAM,wCAAwC,CAAC;AAC/E,OAAO,KAAK,MAAM,MAAM,uBAAuB,CAAC;AAChD,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC;AAC7D,OAAO,KAAK,kBAAkB,MAAM,oCAAoC,CAAC;AAEzE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAEtE,YAAY,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAC3E,YAAY,EACV,iBAAiB,EACjB,YAAY,EACZ,eAAe,EACf,eAAe,EACf,WAAW,GACZ,MAAM,sBAAsB,CAAC;AAE9B,eAAO,MAAM,kBAAkB;;;;;CAK9B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-file-uploader",
-  "version": "1.0.22",
+  "version": "1.1.0",
   "description": "FileUploader UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -38,7 +38,7 @@
     "@synerise/ds-icon": "^1.7.1",
     "@synerise/ds-loader": "^1.0.8",
     "@synerise/ds-popconfirm": "^1.0.21",
-    "@synerise/ds-progress-bar": "^1.1.14",
+    "@synerise/ds-progress-bar": "^1.1.15",
     "@synerise/ds-tooltip": "^1.1.17",
     "@synerise/ds-typography": "^1.0.19",
     "@synerise/ds-utils": "^1.4.1",
@@ -51,5 +51,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "5f5d424cf8c7fa89e231c36a45f5ab3e4cfac8e7"
+  "gitHead": "7f119fa17e645f1d800aea95c313fe22f348439c"
 }