@skbkontur/react-ui 3.9.2 → 3.10.0-fileuploader.1

package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.styles.js

@@ -0,0 +1,66 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+
+var styles = {
+  root: function root() {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 100%;\n    "])));
+
+
+  },
+
+  content: function content() {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n      width: 100%;\n      position: relative;\n    "])));
+
+
+
+
+  },
+
+  error: function error(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.fileUploaderBorderColorError);
+
+  },
+
+  name: function name() {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex: 1 1 100%;\n      overflow: hidden;\n    "])));
+
+
+
+  },
+
+  size: function size() {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-left: 28px;\n      flex: 1 0 auto;\n    "])));
+
+
+
+  },
+
+  icon: function icon(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-left: 23px;\n      flex: 1 0 auto;\n      cursor: pointer;\n      font-size: ", ";\n      text-align: right;\n      outline: none;\n    "])),
+
+
+
+    t.fileUploaderIconSize);
+
+
+
+  },
+
+  deleteIcon: function deleteIcon(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      &:hover {\n        color: ", ";\n      }\n    "])),
+    t.fileUploaderIconColor,
+
+    t.fileUploaderIconHoverColor);
+
+
+  },
+
+  focusedIcon: function focusedIcon(t) {
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      outline: 1px solid ", ";\n    "])),
+    t.borderColorFocus);
+
+  } };
+
+
+var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;

package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FileUploaderFile.styles.ts"],"names":["styles","root","css","content","error","t","fileUploaderBorderColorError","name","size","icon","fileUploaderIconSize","deleteIcon","fileUploaderIconColor","fileUploaderIconHoverColor","focusedIcon","borderColorFocus","jsStyles"],"mappings":"8QAAA,uD;;;AAGA,IAAMA,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,eAAOC,YAAP;;;AAGD,GALY;;AAObC,EAAAA,OAPa,qBAOH;AACR,eAAOD,YAAP;;;;;AAKD,GAbY;;AAebE,EAAAA,KAfa,iBAePC,CAfO,EAeG;AACd,eAAOH,YAAP;AACWG,IAAAA,CAAC,CAACC,4BADb;;AAGD,GAnBY;;AAqBbC,EAAAA,IArBa,kBAqBN;AACL,eAAOL,YAAP;;;;AAID,GA1BY;;AA4BbM,EAAAA,IA5Ba,kBA4BN;AACL,eAAON,YAAP;;;;AAID,GAjCY;;AAmCbO,EAAAA,IAnCa,gBAmCRJ,CAnCQ,EAmCE;AACb,eAAOH,YAAP;;;;AAIeG,IAAAA,CAAC,CAACK,oBAJjB;;;;AAQD,GA5CY;;AA8CbC,EAAAA,UA9Ca,sBA8CFN,CA9CE,EA8CQ;AACnB,eAAOH,YAAP;AACWG,IAAAA,CAAC,CAACO,qBADb;;AAGaP,IAAAA,CAAC,CAACQ,0BAHf;;;AAMD,GArDY;;AAuDbC,EAAAA,WAvDa,uBAuDDT,CAvDC,EAuDS;AACpB,eAAOH,YAAP;AACuBG,IAAAA,CAAC,CAACU,gBADzB;;AAGD,GA3DY,EAAf;;;AA8DO,IAAMC,QAAQ,GAAG,2BAAahB,MAAb,CAAjB,C","sourcesContent":["import { css, memoizeStyle } from '../../../lib/theming/Emotion';\nimport { Theme } from '../../../lib/theming/Theme';\n\nconst styles = {\n  root() {\n    return css`\n      width: 100%;\n    `;\n  },\n\n  content() {\n    return css`\n      display: flex;\n      width: 100%;\n      position: relative;\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      color: ${t.fileUploaderBorderColorError};\n    `;\n  },\n\n  name() {\n    return css`\n      flex: 1 1 100%;\n      overflow: hidden;\n    `;\n  },\n\n  size() {\n    return css`\n      margin-left: 28px;\n      flex: 1 0 auto;\n    `;\n  },\n\n  icon(t: Theme) {\n    return css`\n      margin-left: 23px;\n      flex: 1 0 auto;\n      cursor: pointer;\n      font-size: ${t.fileUploaderIconSize};\n      text-align: right;\n      outline: none;\n    `;\n  },\n\n  deleteIcon(t: Theme) {\n    return css`\n      color: ${t.fileUploaderIconColor};\n      &:hover {\n        color: ${t.fileUploaderIconHoverColor};\n      }\n    `;\n  },\n\n  focusedIcon(t: Theme) {\n    return css`\n      outline: 1px solid ${t.borderColorFocus};\n    `;\n  },\n};\n\nexport const jsStyles = memoizeStyle(styles);\n"]}

package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.d.ts

@@ -0,0 +1,4 @@
+export declare const FileUploaderFileList: {
+    (): JSX.Element;
+    displayName: string;
+};

package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.js

@@ -0,0 +1,24 @@
+"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");exports.__esModule = true;exports.FileUploaderFileList = void 0;var _react = _interopRequireWildcard(require("react"));
+
+var _FileUploaderControlContext = require("../FileUploaderControlContext");
+var _ThemeContext = require("../../../lib/theming/ThemeContext");
+var _FileUploaderFile = require("../FileUploaderFile/FileUploaderFile");
+
+var _FileUploaderFileList = require("./FileUploaderFileList.styles");
+
+var FileUploaderFileList = function FileUploaderFileList() {var _useContext =
+  (0, _react.useContext)(_FileUploaderControlContext.FileUploaderControlContext),files = _useContext.files;
+  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+
+  return /*#__PURE__*/(
+    _react.default.createElement("div", { "data-tid": "FileUploader__fileList" },
+    files.map(function (file) {return /*#__PURE__*/(
+        _react.default.createElement("div", { key: file.id, className: _FileUploaderFileList.jsStyles.fileWrapper(theme) }, /*#__PURE__*/
+        _react.default.createElement(_FileUploaderFile.FileUploaderFile, { file: file, showSize: true })));})));
+
+
+
+
+};exports.FileUploaderFileList = FileUploaderFileList;
+
+FileUploaderFileList.displayName = 'FileUploaderFileList';

package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FileUploaderFileList.tsx"],"names":["FileUploaderFileList","FileUploaderControlContext","files","theme","ThemeContext","map","file","id","jsStyles","fileWrapper","displayName"],"mappings":"oKAAA;;AAEA;AACA;AACA;;AAEA;;AAEO,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB,GAAM;AACtB,yBAAWC,sDAAX,CADsB,CAChCC,KADgC,eAChCA,KADgC;AAExC,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA;AACE,0CAAK,YAAS,wBAAd;AACGF,IAAAA,KAAK,CAACG,GAAN,CAAU,UAACC,IAAD;AACT,8CAAK,GAAG,EAAEA,IAAI,CAACC,EAAf,EAAmB,SAAS,EAAEC,+BAASC,WAAT,CAAqBN,KAArB,CAA9B;AACE,qCAAC,kCAAD,IAAkB,IAAI,EAAEG,IAAxB,EAA8B,QAAQ,MAAtC,GADF,CADS,GAAV,CADH,CADF;;;;;AASD,CAbM,C;;AAePN,oBAAoB,CAACU,WAArB,GAAmC,sBAAnC","sourcesContent":["import React, { useContext } from 'react';\n\nimport { FileUploaderControlContext } from '../FileUploaderControlContext';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\nimport { FileUploaderFile } from '../FileUploaderFile/FileUploaderFile';\n\nimport { jsStyles } from './FileUploaderFileList.styles';\n\nexport const FileUploaderFileList = () => {\n  const { files } = useContext(FileUploaderControlContext);\n  const theme = useContext(ThemeContext);\n\n  return (\n    <div data-tid=\"FileUploader__fileList\">\n      {files.map((file) => (\n        <div key={file.id} className={jsStyles.fileWrapper(theme)}>\n          <FileUploaderFile file={file} showSize />\n        </div>\n      ))}\n    </div>\n  );\n};\n\nFileUploaderFileList.displayName = 'FileUploaderFileList';\n"]}

package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.styles.d.ts

@@ -0,0 +1,4 @@
+import { Theme } from '../../../lib/theming/Theme';
+export declare const jsStyles: {
+    fileWrapper(t: Theme): string;
+};

package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.styles.js

@@ -0,0 +1,17 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../../lib/theming/Emotion");var _templateObject;
+
+
+var styles = {
+  fileWrapper: function fileWrapper(t) {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 100%;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      box-sizing: border-box;\n      padding: ", " ", ";\n    "])),
+
+
+
+
+
+    t.fileUploaderPaddingY, t.fileUploaderPaddingX);
+
+  } };
+
+
+var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;

package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FileUploaderFileList.styles.ts"],"names":["styles","fileWrapper","t","css","fileUploaderPaddingY","fileUploaderPaddingX","jsStyles"],"mappings":"8QAAA,uD;;;AAGA,IAAMA,MAAM,GAAG;AACbC,EAAAA,WADa,uBACDC,CADC,EACS;AACpB,eAAOC,YAAP;;;;;;AAMaD,IAAAA,CAAC,CAACE,oBANf,EAMuCF,CAAC,CAACG,oBANzC;;AAQD,GAVY,EAAf;;;AAaO,IAAMC,QAAQ,GAAG,2BAAaN,MAAb,CAAjB,C","sourcesContent":["import { css, memoizeStyle } from '../../../lib/theming/Emotion';\nimport { Theme } from '../../../lib/theming/Theme';\n\nconst styles = {\n  fileWrapper(t: Theme) {\n    return css`\n      width: 100%;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      box-sizing: border-box;\n      padding: ${t.fileUploaderPaddingY} ${t.fileUploaderPaddingX};\n    `;\n  },\n};\n\nexport const jsStyles = memoizeStyle(styles);\n"]}

package/cjs/internal/FileUploaderControl/FileUploaderFileValidationResult.d.ts

@@ -0,0 +1,7 @@
+export declare class FileUploaderFileValidationResult {
+    readonly isValid: boolean;
+    readonly message?: string;
+    constructor(isValid: boolean, message?: string);
+    static error(message: string): FileUploaderFileValidationResult;
+    static ok(): FileUploaderFileValidationResult;
+}

package/cjs/internal/FileUploaderControl/FileUploaderFileValidationResult.js

@@ -0,0 +1,16 @@
+"use strict";exports.__esModule = true;exports.FileUploaderFileValidationResult = void 0;var FileUploaderFileValidationResult = /*#__PURE__*/function () {
+
+
+
+  function FileUploaderFileValidationResult(isValid, message) {this.isValid = void 0;this.message = void 0;
+    this.isValid = isValid;
+    this.message = message;
+  }FileUploaderFileValidationResult.
+
+  error = function error(message) {
+    return new FileUploaderFileValidationResult(false, message);
+  };FileUploaderFileValidationResult.
+
+  ok = function ok() {
+    return new FileUploaderFileValidationResult(true);
+  };return FileUploaderFileValidationResult;}();exports.FileUploaderFileValidationResult = FileUploaderFileValidationResult;

package/cjs/internal/FileUploaderControl/FileUploaderFileValidationResult.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FileUploaderFileValidationResult.ts"],"names":["FileUploaderFileValidationResult","isValid","message","error","ok"],"mappings":"6FAAaA,gC;;;;AAIX,4CAAYC,OAAZ,EAA8BC,OAA9B,EAAgD,MAHvCD,OAGuC,eAFvCC,OAEuC;AAC9C,SAAKD,OAAL,GAAeA,OAAf;AACA,SAAKC,OAAL,GAAeA,OAAf;AACD,G;;AAEMC,EAAAA,K,GAAP,eAAaD,OAAb,EAAgE;AAC9D,WAAO,IAAIF,gCAAJ,CAAqC,KAArC,EAA4CE,OAA5C,CAAP;AACD,G;;AAEME,EAAAA,E,GAAP,cAA8C;AAC5C,WAAO,IAAIJ,gCAAJ,CAAqC,IAArC,CAAP;AACD,G","sourcesContent":["export class FileUploaderFileValidationResult {\n  readonly isValid: boolean;\n  readonly message?: string;\n\n  constructor(isValid: boolean, message?: string) {\n    this.isValid = isValid;\n    this.message = message;\n  }\n\n  static error(message: string): FileUploaderFileValidationResult {\n    return new FileUploaderFileValidationResult(false, message);\n  }\n\n  static ok(): FileUploaderFileValidationResult {\n    return new FileUploaderFileValidationResult(true);\n  }\n}\n"]}

package/cjs/internal/FileUploaderControl/fileUtils.d.ts

@@ -0,0 +1,18 @@
+import { FileUploaderFileValidationResult } from './FileUploaderFileValidationResult';
+export declare type FileUploaderFileInBase64 = string | ArrayBuffer | null;
+export declare enum FileUploaderFileStatus {
+    Attached = "Attached",
+    Loading = "Loading",
+    Uploaded = "Uploaded",
+    Error = "Error"
+}
+export interface FileUploaderAttachedFile {
+    id: string;
+    originalFile: File;
+    status: FileUploaderFileStatus;
+    validationResult: FileUploaderFileValidationResult;
+    fileInBase64: FileUploaderFileInBase64;
+}
+export declare const readFile: (file: File) => Promise<FileUploaderFileInBase64>;
+export declare const readFiles: (files: File[]) => Promise<Array<FileUploaderAttachedFile>>;
+export declare const getUploadFile: (file: File, fileInBase64: FileUploaderFileInBase64) => FileUploaderAttachedFile;

package/cjs/internal/FileUploaderControl/fileUtils.js

@@ -0,0 +1,55 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.getUploadFile = exports.readFiles = exports.readFile = exports.FileUploaderFileStatus = void 0;var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _guidUtils = require("../../lib/guidUtils");
+
+var _FileUploaderFileValidationResult = require("./FileUploaderFileValidationResult");var
+
+
+
+FileUploaderFileStatus;exports.FileUploaderFileStatus = FileUploaderFileStatus;(function (FileUploaderFileStatus) {FileUploaderFileStatus["Attached"] = "Attached";FileUploaderFileStatus["Loading"] = "Loading";FileUploaderFileStatus["Uploaded"] = "Uploaded";FileUploaderFileStatus["Error"] = "Error";})(FileUploaderFileStatus || (exports.FileUploaderFileStatus = FileUploaderFileStatus = {}));
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var readFile = function readFile(file) {return (
+    new Promise(function (resolve, reject) {
+      var fileReader = new FileReader();
+      fileReader.onload = function () {return resolve(fileReader.result);};
+      fileReader.onerror = reject;
+      fileReader.readAsDataURL(file);
+    }));};exports.readFile = readFile;
+
+var readFiles = function readFiles(files) {
+  var filesPromises = files.map( /*#__PURE__*/function () {var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(file) {var fileInBase64;return _regenerator.default.wrap(function _callee$(_context) {while (1) {switch (_context.prev = _context.next) {case 0:_context.next = 2;return (
+                readFile(file).catch(console.error));case 2:_context.t0 = _context.sent;if (_context.t0) {_context.next = 5;break;}_context.t0 = null;case 5:fileInBase64 = _context.t0;return _context.abrupt("return",
+              getUploadFile(file, fileInBase64));case 7:case "end":return _context.stop();}}}, _callee);}));return function (_x) {return _ref.apply(this, arguments);};}());
+
+
+  return Promise.all(filesPromises);
+};exports.readFiles = readFiles;
+
+var getUploadFile = function getUploadFile(file, fileInBase64) {
+  return {
+    id: (0, _guidUtils.getGuid)(),
+    originalFile: getFileWithEscapedName(file),
+    status: FileUploaderFileStatus.Attached,
+    validationResult: _FileUploaderFileValidationResult.FileUploaderFileValidationResult.ok(),
+    fileInBase64: fileInBase64 };
+
+};exports.getUploadFile = getUploadFile;
+
+var escapeRegExpFileNameSpecChars = function escapeRegExpFileNameSpecChars(s) {return s.replace(/[\\^$*+?()|[\]{}<>:]/g, '\\$&');};
+
+var getFileWithEscapedName = function getFileWithEscapedName(file) {var
+  name = file.name;
+  return (0, _extends2.default)({}, file, { name: escapeRegExpFileNameSpecChars(name || '') });
+};

package/cjs/internal/FileUploaderControl/fileUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["fileUtils.ts"],"names":["FileUploaderFileStatus","readFile","file","Promise","resolve","reject","fileReader","FileReader","onload","result","onerror","readAsDataURL","readFiles","files","filesPromises","map","catch","console","error","fileInBase64","getUploadFile","all","id","originalFile","getFileWithEscapedName","status","Attached","validationResult","FileUploaderFileValidationResult","ok","escapeRegExpFileNameSpecChars","s","replace","name"],"mappings":"0eAAA;;AAEA,sF;;;;AAIYA,sB,oEAAAA,sB,GAAAA,sB,0BAAAA,sB,wBAAAA,sB,0BAAAA,sB,uBAAAA,sB,sCAAAA,sB;;;;;;;;;;;;;;;;AAgBL,IAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,IAAD;AACtB,QAAIC,OAAJ,CAAY,UAACC,OAAD,EAAUC,MAAV,EAA2B;AACrC,UAAMC,UAAU,GAAG,IAAIC,UAAJ,EAAnB;AACAD,MAAAA,UAAU,CAACE,MAAX,GAAoB,oBAAMJ,OAAO,CAACE,UAAU,CAACG,MAAZ,CAAb,EAApB;AACAH,MAAAA,UAAU,CAACI,OAAX,GAAqBL,MAArB;AACAC,MAAAA,UAAU,CAACK,aAAX,CAAyBT,IAAzB;AACD,KALD,CADsB,GAAjB,C;;AAQA,IAAMU,SAAS,GAAG,SAAZA,SAAY,CAACC,KAAD,EAA6D;AACpF,MAAMC,aAAa,GAAGD,KAAK,CAACE,GAAN,+GAAU,iBAAOb,IAAP;AACFD,gBAAAA,QAAQ,CAACC,IAAD,CAAR,CAAec,KAAf,CAAqBC,OAAO,CAACC,KAA7B,CADE,8FACsC,IADtC,QACxBC,YADwB;AAEvBC,cAAAA,aAAa,CAAClB,IAAD,EAAOiB,YAAP,CAFU,0DAAV,kEAAtB;;;AAKA,SAAOhB,OAAO,CAACkB,GAAR,CAAYP,aAAZ,CAAP;AACD,CAPM,C;;AASA,IAAMM,aAAa,GAAG,SAAhBA,aAAgB,CAAClB,IAAD,EAAaiB,YAAb,EAAkF;AAC7G,SAAO;AACLG,IAAAA,EAAE,EAAE,yBADC;AAELC,IAAAA,YAAY,EAAEC,sBAAsB,CAACtB,IAAD,CAF/B;AAGLuB,IAAAA,MAAM,EAAEzB,sBAAsB,CAAC0B,QAH1B;AAILC,IAAAA,gBAAgB,EAAEC,mEAAiCC,EAAjC,EAJb;AAKLV,IAAAA,YAAY,EAAEA,YALT,EAAP;;AAOD,CARM,C;;AAUP,IAAMW,6BAA6B,GAAG,SAAhCA,6BAAgC,CAACC,CAAD,UAAuBA,CAAC,CAACC,OAAF,CAAU,uBAAV,EAAmC,MAAnC,CAAvB,EAAtC;;AAEA,IAAMR,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACtB,IAAD,EAAsB;AAC3C+B,EAAAA,IAD2C,GAClC/B,IADkC,CAC3C+B,IAD2C;AAEnD,oCAAY/B,IAAZ,IAAkB+B,IAAI,EAAEH,6BAA6B,CAACG,IAAI,IAAI,EAAT,CAArD;AACD,CAHD","sourcesContent":["import { getGuid } from '../../lib/guidUtils';\n\nimport { FileUploaderFileValidationResult } from './FileUploaderFileValidationResult';\n\nexport type FileUploaderFileInBase64 = string | ArrayBuffer | null;\n\nexport enum FileUploaderFileStatus {\n  Attached = 'Attached',\n  Loading = 'Loading',\n  Uploaded = 'Uploaded',\n  Error = 'Error',\n}\n\nexport interface FileUploaderAttachedFile {\n  id: string;\n  originalFile: File;\n  status: FileUploaderFileStatus;\n  validationResult: FileUploaderFileValidationResult;\n\n  fileInBase64: FileUploaderFileInBase64;\n}\n\nexport const readFile = (file: File): Promise<FileUploaderFileInBase64> =>\n  new Promise((resolve, reject): void => {\n    const fileReader = new FileReader();\n    fileReader.onload = () => resolve(fileReader.result);\n    fileReader.onerror = reject;\n    fileReader.readAsDataURL(file);\n  });\n\nexport const readFiles = (files: File[]): Promise<Array<FileUploaderAttachedFile>> => {\n  const filesPromises = files.map(async (file) => {\n    const fileInBase64 = (await readFile(file).catch(console.error)) || null;\n    return getUploadFile(file, fileInBase64);\n  });\n\n  return Promise.all(filesPromises);\n};\n\nexport const getUploadFile = (file: File, fileInBase64: FileUploaderFileInBase64): FileUploaderAttachedFile => {\n  return {\n    id: getGuid(),\n    originalFile: getFileWithEscapedName(file),\n    status: FileUploaderFileStatus.Attached,\n    validationResult: FileUploaderFileValidationResult.ok(),\n    fileInBase64: fileInBase64,\n  };\n};\n\nconst escapeRegExpFileNameSpecChars = (s: string): string => s.replace(/[\\\\^$*+?()|[\\]{}<>:]/g, '\\\\$&');\n\nconst getFileWithEscapedName = (file: File): File => {\n  const { name } = file;\n  return { ...file, name: escapeRegExpFileNameSpecChars(name || '') };\n};\n"]}

package/cjs/internal/FileUploaderControl/hooks/useControlLocale.d.ts

@@ -0,0 +1 @@
+export declare const useControlLocale: () => import("../../../components/FileUploader/locale").FileUploaderLocale;

package/cjs/internal/FileUploaderControl/hooks/useControlLocale.js

@@ -0,0 +1,4 @@
+"use strict";exports.__esModule = true;exports.useControlLocale = void 0;var _useLocaleForControl = require("../../../lib/locale/useLocaleForControl");
+var _locale = require("../../../components/FileUploader/locale");
+
+var useControlLocale = function useControlLocale() {return (0, _useLocaleForControl.useLocaleForControl)('FileUploader', _locale.FileUploaderLocaleHelper);};exports.useControlLocale = useControlLocale;

package/cjs/internal/FileUploaderControl/hooks/useControlLocale.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useControlLocale.ts"],"names":["useControlLocale","FileUploaderLocaleHelper"],"mappings":"yEAAA;AACA;;AAEO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,WAAM,8CAAoB,cAApB,EAAoCC,gCAApC,CAAN,EAAzB,C","sourcesContent":["import { useLocaleForControl } from '../../../lib/locale/useLocaleForControl';\nimport { FileUploaderLocaleHelper } from '../../../components/FileUploader/locale';\n\nexport const useControlLocale = () => useLocaleForControl('FileUploader', FileUploaderLocaleHelper);\n"]}

package/cjs/internal/FileUploaderControl/hooks/useUpload.d.ts

@@ -0,0 +1,3 @@
+import { Nullable } from '../../../typings/utility-types';
+import { FileUploaderAttachedFile } from '../fileUtils';
+export declare const useUpload: (request: Nullable<(file: FileUploaderAttachedFile) => Promise<void>>, onRequestSuccess?: Nullable<(fileId: string) => void>, onRequestError?: Nullable<(fileId: string) => void>) => (file: FileUploaderAttachedFile) => Promise<void>;

package/cjs/internal/FileUploaderControl/hooks/useUpload.js

@@ -0,0 +1,51 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.useUpload = void 0;var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _react = require("react");
+
+
+var _fileUtils = require("../fileUtils");
+var _FileUploaderControlContext = require("../FileUploaderControlContext");
+
+var useUpload = function useUpload(
+request,
+onRequestSuccess,
+onRequestError)
+{var _useContext =
+  (0, _react.useContext)(_FileUploaderControlContext.FileUploaderControlContext),setFileStatus = _useContext.setFileStatus;
+
+  var switchToLoading = (0, _react.useCallback)(
+  function (fileId) {
+    setFileStatus(fileId, _fileUtils.FileUploaderFileStatus.Loading);
+  },
+  [setFileStatus]);
+
+
+  var switchToSuccess = (0, _react.useCallback)(
+  function (fileId) {
+    setFileStatus(fileId, _fileUtils.FileUploaderFileStatus.Uploaded);
+    onRequestSuccess == null ? void 0 : onRequestSuccess(fileId);
+  },
+  [setFileStatus, onRequestSuccess]);
+
+
+  var switchToError = (0, _react.useCallback)(
+  function (fileId) {
+    setFileStatus(fileId, _fileUtils.FileUploaderFileStatus.Error);
+    onRequestError == null ? void 0 : onRequestError(fileId);
+  },
+  [setFileStatus, onRequestError]);
+
+
+  return (0, _react.useCallback)( /*#__PURE__*/function () {var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(
+    function _callee(file) {var id;return _regenerator.default.wrap(function _callee$(_context) {while (1) {switch (_context.prev = _context.next) {case 0:
+              id = file.id;
+              switchToLoading(id);_context.prev = 2;_context.next = 5;return (
+
+
+                request == null ? void 0 : request(file));case 5:
+              switchToSuccess(id);_context.next = 11;break;case 8:_context.prev = 8;_context.t0 = _context["catch"](2);
+
+              switchToError(id);case 11:case "end":return _context.stop();}}}, _callee, null, [[2, 8]]);}));return function (_x) {return _ref.apply(this, arguments);};}(),
+
+
+  [request, switchToSuccess, switchToLoading, switchToError]);
+
+};exports.useUpload = useUpload;

package/cjs/internal/FileUploaderControl/hooks/useUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useUpload.ts"],"names":["useUpload","request","onRequestSuccess","onRequestError","FileUploaderControlContext","setFileStatus","switchToLoading","fileId","FileUploaderFileStatus","Loading","switchToSuccess","Uploaded","switchToError","Error","file","id"],"mappings":"4UAAA;;;AAGA;AACA;;AAEO,IAAMA,SAAS,GAAG,SAAZA,SAAY;AACvBC,OADuB;AAEvBC,gBAFuB;AAGvBC,cAHuB;AAIpB;AACuB,yBAAWC,sDAAX,CADvB,CACKC,aADL,eACKA,aADL;;AAGH,MAAMC,eAAe,GAAG;AACtB,YAACC,MAAD,EAAoB;AAClBF,IAAAA,aAAa,CAACE,MAAD,EAASC,kCAAuBC,OAAhC,CAAb;AACD,GAHqB;AAItB,GAACJ,aAAD,CAJsB,CAAxB;;;AAOA,MAAMK,eAAe,GAAG;AACtB,YAACH,MAAD,EAAoB;AAClBF,IAAAA,aAAa,CAACE,MAAD,EAASC,kCAAuBG,QAAhC,CAAb;AACAT,IAAAA,gBAAgB,QAAhB,YAAAA,gBAAgB,CAAGK,MAAH,CAAhB;AACD,GAJqB;AAKtB,GAACF,aAAD,EAAgBH,gBAAhB,CALsB,CAAxB;;;AAQA,MAAMU,aAAa,GAAG;AACpB,YAACL,MAAD,EAAoB;AAClBF,IAAAA,aAAa,CAACE,MAAD,EAASC,kCAAuBK,KAAhC,CAAb;AACAV,IAAAA,cAAc,QAAd,YAAAA,cAAc,CAAGI,MAAH,CAAd;AACD,GAJmB;AAKpB,GAACF,aAAD,EAAgBF,cAAhB,CALoB,CAAtB;;;AAQA,SAAO;AACL,qBAAOW,IAAP;AACUC,cAAAA,EADV,GACiBD,IADjB,CACUC,EADV;AAEET,cAAAA,eAAe,CAACS,EAAD,CAAf,CAFF;;;AAKUd,gBAAAA,OALV,oBAKUA,OAAO,CAAGa,IAAH,CALjB;AAMIJ,cAAAA,eAAe,CAACK,EAAD,CAAf,CANJ;;AAQIH,cAAAA,aAAa,CAACG,EAAD,CAAb,CARJ,yEADK;;;AAYL,GAACd,OAAD,EAAUS,eAAV,EAA2BJ,eAA3B,EAA4CM,aAA5C,CAZK,CAAP;;AAcD,CA5CM,C","sourcesContent":["import { useCallback, useContext } from 'react';\n\nimport { Nullable } from '../../../typings/utility-types';\nimport { FileUploaderAttachedFile, FileUploaderFileStatus } from '../fileUtils';\nimport { FileUploaderControlContext } from '../FileUploaderControlContext';\n\nexport const useUpload = (\n  request: Nullable<(file: FileUploaderAttachedFile) => Promise<void>>,\n  onRequestSuccess?: Nullable<(fileId: string) => void>,\n  onRequestError?: Nullable<(fileId: string) => void>,\n) => {\n  const { setFileStatus } = useContext(FileUploaderControlContext);\n\n  const switchToLoading = useCallback(\n    (fileId: string) => {\n      setFileStatus(fileId, FileUploaderFileStatus.Loading);\n    },\n    [setFileStatus],\n  );\n\n  const switchToSuccess = useCallback(\n    (fileId: string) => {\n      setFileStatus(fileId, FileUploaderFileStatus.Uploaded);\n      onRequestSuccess?.(fileId);\n    },\n    [setFileStatus, onRequestSuccess],\n  );\n\n  const switchToError = useCallback(\n    (fileId: string) => {\n      setFileStatus(fileId, FileUploaderFileStatus.Error);\n      onRequestError?.(fileId);\n    },\n    [setFileStatus, onRequestError],\n  );\n\n  return useCallback(\n    async (file: FileUploaderAttachedFile) => {\n      const { id } = file;\n      switchToLoading(id);\n\n      try {\n        await request?.(file);\n        switchToSuccess(id);\n      } catch {\n        switchToError(id);\n      }\n    },\n    [request, switchToSuccess, switchToLoading, switchToError],\n  );\n};\n"]}

package/cjs/internal/FileUploaderControl/withFileUploaderControlProvider.d.ts

@@ -0,0 +1,3 @@
+import React, { ComponentType } from 'react';
+import { FileUploaderControlProviderProps } from './FileUploaderControlProvider';
+export declare const withFileUploaderControlProvider: <TProps extends object, TRef extends object>(Component: React.ComponentType<Pick<TProps & FileUploaderControlProviderProps, Exclude<keyof TProps, keyof FileUploaderControlProviderProps>>>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<TProps & FileUploaderControlProviderProps> & React.RefAttributes<TRef>>;

package/cjs/internal/FileUploaderControl/withFileUploaderControlProvider.js

@@ -0,0 +1,18 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.withFileUploaderControlProvider = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireDefault(require("react"));
+
+var _FileUploaderControlProvider = require("./FileUploaderControlProvider");
+
+var withFileUploaderControlProvider = function withFileUploaderControlProvider(
+Component) {return /*#__PURE__*/(
+
+
+
+    _react.default.forwardRef(
+    function (props, ref) {var
+      onRemove = props.onRemove,onValueChange = props.onValueChange,onReadSuccess = props.onReadSuccess,rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["onRemove", "onValueChange", "onReadSuccess"]);
+      return /*#__PURE__*/(
+        _react.default.createElement(_FileUploaderControlProvider.FileUploaderControlProvider, props, /*#__PURE__*/
+        _react.default.createElement(Component, (0, _extends2.default)({ ref: ref }, rest))));
+
+
+    }));};exports.withFileUploaderControlProvider = withFileUploaderControlProvider;

package/cjs/internal/FileUploaderControl/withFileUploaderControlProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["withFileUploaderControlProvider.tsx"],"names":["withFileUploaderControlProvider","Component","React","forwardRef","props","ref","onRemove","onValueChange","onReadSuccess","rest"],"mappings":"2XAAA;;AAEA;;AAEO,IAAMA,+BAA+B,GAAG,SAAlCA,+BAAkC;AAC7CC,SAD6C;;;;AAK7CC,mBAAMC,UAAN;AACE,cAACC,KAAD,EAAmDC,GAAnD,EAA2D;AACjDC,MAAAA,QADiD,GACGF,KADH,CACjDE,QADiD,CACvCC,aADuC,GACGH,KADH,CACvCG,aADuC,CACxBC,aADwB,GACGJ,KADH,CACxBI,aADwB,CACNC,IADM,+CACGL,KADH;AAEzD;AACE,qCAAC,wDAAD,EAAiCA,KAAjC;AACE,qCAAC,SAAD,2BAAW,GAAG,EAAEC,GAAhB,IAAyBI,IAAzB,EADF,CADF;;;AAKD,KARH,CAL6C,GAAxC,C","sourcesContent":["import React, { ComponentType } from 'react';\n\nimport { FileUploaderControlProvider, FileUploaderControlProviderProps } from './FileUploaderControlProvider';\n\nexport const withFileUploaderControlProvider = <TProps extends object, TRef extends object>(\n  Component: ComponentType<\n    Pick<TProps & FileUploaderControlProviderProps, Exclude<keyof TProps, keyof FileUploaderControlProviderProps>>\n  >,\n) =>\n  React.forwardRef<TRef, TProps & FileUploaderControlProviderProps>(\n    (props: TProps & FileUploaderControlProviderProps, ref) => {\n      const { onRemove, onValueChange, onReadSuccess, ...rest } = props;\n      return (\n        <FileUploaderControlProvider {...props}>\n          <Component ref={ref} {...rest} />\n        </FileUploaderControlProvider>\n      );\n    },\n  );\n"]}

package/cjs/internal/TextWidthHelper/TextWidthHelper.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface TextWidthHelperProps {
+    text?: string;
+}
+/**
+ * Херпер позволяет вычислить размеры блока с текстом
+ */
+export declare class TextWidthHelper extends React.Component<TextWidthHelperProps> {
+    private element;
+    render(): JSX.Element;
+    getTextWidth(): number;
+    getTextHeight(): number;
+    private elementRef;
+}
+export {};

package/cjs/internal/TextWidthHelper/TextWidthHelper.js

@@ -0,0 +1,34 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TextWidthHelper = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+
+var _TextWidthHelper = require("./TextWidthHelper.styles");
+
+var THIN_SPACE = "\u2009";
+
+
+
+
+/**
+ * Херпер позволяет вычислить размеры блока с текстом
+ */var
+TextWidthHelper = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(TextWidthHelper, _React$Component);function TextWidthHelper() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+    element = null;_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    elementRef = function (node) {return _this.element = node;};return _this;}var _proto = TextWidthHelper.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement("div", { className: _TextWidthHelper.jsStyles.root() }, /*#__PURE__*/_react.default.createElement("div", { className: _TextWidthHelper.jsStyles.textContainer(), ref: this.elementRef }, this.props.text || THIN_SPACE));};_proto.getTextWidth = function getTextWidth() {return this.element ? this.element.getBoundingClientRect().width : 0;};_proto.getTextHeight = function getTextHeight() {return this.element.getBoundingClientRect().height;};return TextWidthHelper;}(_react.default.Component);exports.TextWidthHelper = TextWidthHelper;

package/cjs/internal/TextWidthHelper/TextWidthHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TextWidthHelper.tsx"],"names":["THIN_SPACE","TextWidthHelper","element","elementRef","node","render","jsStyles","root","textContainer","props","text","getTextWidth","getBoundingClientRect","width","getTextHeight","height","React","Component"],"mappings":"2PAAA;;AAEA;;AAEA,IAAMA,UAAU,GAAG,QAAnB;;;;;AAKA;AACA;AACA,G;AACaC,e;AACHC,IAAAA,O,GAAiC,I;;;;;;;;;;;;;;;;;;;;AAoBjCC,IAAAA,U,GAAa,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,E,6DAlBdC,M,GAAP,kBAAgB,CACd,oBACE,sCAAK,SAAS,EAAEC,0BAASC,IAAT,EAAhB,iBACE,sCAAK,SAAS,EAAED,0BAASE,aAAT,EAAhB,EAA0C,GAAG,EAAE,KAAKL,UAApD,IACG,KAAKM,KAAL,CAAWC,IAAX,IAAmBV,UADtB,CADF,CADF,CAOD,C,QAEMW,Y,GAAP,wBAA8B,CAC5B,OAAO,KAAKT,OAAL,GAAe,KAAKA,OAAL,CAAaU,qBAAb,GAAqCC,KAApD,GAA4D,CAAnE,CACD,C,QAEMC,a,GAAP,yBAA+B,CAC7B,OAAO,KAAKZ,OAAL,CAAcU,qBAAd,GAAsCG,MAA7C,CACD,C,0BAnBkCC,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { jsStyles } from './TextWidthHelper.styles';\n\nconst THIN_SPACE = '\\u2009';\n\ninterface TextWidthHelperProps {\n  text?: string;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n */\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n\n  public render() {\n    return (\n      <div className={jsStyles.root()}>\n        <div className={jsStyles.textContainer()} ref={this.elementRef}>\n          {this.props.text || THIN_SPACE}\n        </div>\n      </div>\n    );\n  }\n\n  public getTextWidth(): number {\n    return this.element ? this.element.getBoundingClientRect().width : 0;\n  }\n\n  public getTextHeight(): number {\n    return this.element!.getBoundingClientRect().height;\n  }\n\n  private elementRef = (node: HTMLDivElement) => (this.element = node);\n}\n"]}

package/cjs/internal/TextWidthHelper/TextWidthHelper.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const jsStyles: {
+    root(): string;
+    textContainer(): string;
+};

package/cjs/internal/TextWidthHelper/TextWidthHelper.styles.js

@@ -0,0 +1,23 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2;
+
+var styles = {
+  root: function root() {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      visibility: hidden;\n      overflow: hidden;\n    "])));
+
+
+
+
+
+
+
+
+  },
+  textContainer: function textContainer() {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      word-break: break-all;\n      white-space: nowrap;\n    "])));
+
+
+
+  } };
+
+
+var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;

package/cjs/internal/TextWidthHelper/TextWidthHelper.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TextWidthHelper.styles.ts"],"names":["styles","root","css","textContainer","jsStyles"],"mappings":"8QAAA,oD;;AAEA,IAAMA,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,eAAOC,YAAP;;;;;;;;;AASD,GAXY;AAYbC,EAAAA,aAZa,2BAYG;AACd,eAAOD,YAAP;;;;AAID,GAjBY,EAAf;;;AAoBO,IAAME,QAAQ,GAAG,2BAAaJ,MAAb,CAAjB,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nconst styles = {\n  root() {\n    return css`\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      visibility: hidden;\n      overflow: hidden;\n    `;\n  },\n  textContainer() {\n    return css`\n      word-break: break-all;\n      white-space: nowrap;\n    `;\n  },\n};\n\nexport const jsStyles = memoizeStyle(styles);\n"]}

package/cjs/internal/ThemePlayground/Playground.d.ts

@@ -26,6 +26,7 @@ export declare class Playground extends React.Component<PlaygroundProps, {}> {
     private renderHintsGroup;
     private renderTooltip;
     private renderPaging;
+    private renderFileUploader;
     private renderStickyStopElement;
     private getStickyStop;
 }

package/cjs/internal/ThemePlayground/Playground.js

@@ -19,6 +19,7 @@ var _Sticky = require("../../components/Sticky");
 
 var _currentEnvironment = require("../../lib/currentEnvironment");
 var _Emotion = require("../../lib/theming/Emotion");
+var _FileUploader = require("../../components/FileUploader");
 
 var _constants = require("./constants");
 var _TokenInputPlayground = require("./TokenInputPlayground");
@@ -81,6 +82,7 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
 
 
 
+
 
 
     renderTabsGroup = function () {
@@ -312,10 +314,18 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
         _react.default.createElement(_PagingPlayground.PagingPlayground, null)));
 
 
+    };_this.
+
+    renderFileUploader = function () {
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'FileUploader', theme: _this.theme }, /*#__PURE__*/
+        _react.default.createElement(_FileUploader.FileUploader, { multiple: true })));
+
+
     };_this.
 
     renderStickyStopElement = function () {
       return /*#__PURE__*/_react.default.createElement("div", { ref: _this.stopEl, style: { height: 50 } });
     };_this.
 
-    getStickyStop = function () {return _this.stopEl.current;};return _this;}var _proto = Playground.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var wrapperClassName = (0, _Emotion.cx)(_Playground.styles.playground(), _Playground.styles.playgroundWrapper(this.theme));return /*#__PURE__*/_react.default.createElement("div", { className: wrapperClassName }, /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { vertical: true, gap: 50 }, this.renderTabsGroup(), this.renderSizesGroup(), this.renderLinksGroup(), this.renderButtonsGroup(), this.renderInputsGroup(), this.renderOtherInputsGroup(), this.renderTokenInputsGroup(), this.renderSwitchersGroup(), this.renderControlsGroup()), this.renderStickyStopElement(), /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { vertical: true, gap: 50 }, this.renderHintsGroup(), this.renderTooltip(), this.renderPaging()));};_proto.renderTabs = function renderTabs() {var _cx;var _this$props2 = this.props,currentThemeType = _this$props2.currentThemeType,onThemeChange = _this$props2.onThemeChange,onEditLinkClick = _this$props2.onEditLinkClick;var tabsOuterWrapperStyle = { background: this.theme.bgDefault };var tabsOuterWrapperClass = (0, _Emotion.cx)((_cx = {}, _cx[_Playground.styles.tabsWrapper(this.theme)] = true, _cx[_Playground.styles.stickyTabsWrapper(this.theme)] = useSticky, _cx));return /*#__PURE__*/_react.default.createElement("div", { style: tabsOuterWrapperStyle, className: tabsOuterWrapperClass }, /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { gap: 40 }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, { value: this.getCurrentTab(), onValueChange: onThemeChange, vertical: false }, /*#__PURE__*/_react.default.createElement("div", { className: _Playground.styles.tabsInnerWrapper(this.theme) }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Default }, "\u0414\u0435\u0444\u043E\u043B\u0442\u043D\u0430\u044F"), /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Flat }, "\u041F\u043B\u043E\u0441\u043A\u0430\u044F"), /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Dark }, "\u0422\u0435\u043C\u043D\u0430\u044F"))), /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, null, /*#__PURE__*/_react.default.createElement(_Toggle.Toggle, { checked: this.is8pxTheme, onValueChange: this.toggle8pxTheme, disabled: currentThemeType === _constants.ThemeType.Dark }), /*#__PURE__*/_react.default.createElement("span", null, "8px")), /*#__PURE__*/_react.default.createElement(_Link2.Link, { onClick: onEditLinkClick }, "\u041D\u0430\u0441\u0442\u0440\u043E\u0438\u0442\u044C \u0442\u0435\u043C\u0443")));};(0, _createClass2.default)(Playground, [{ key: "is8pxTheme", get: function get() {switch (this.props.currentThemeType) {case _constants.ThemeType.Default:case _constants.ThemeType.Flat:return true;default:return false;}} }]);return Playground;}(_react.default.Component);exports.Playground = Playground;
+    getStickyStop = function () {return _this.stopEl.current;};return _this;}var _proto = Playground.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var wrapperClassName = (0, _Emotion.cx)(_Playground.styles.playground(), _Playground.styles.playgroundWrapper(this.theme));return /*#__PURE__*/_react.default.createElement("div", { className: wrapperClassName }, /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { vertical: true, gap: 50 }, this.renderTabsGroup(), this.renderSizesGroup(), this.renderLinksGroup(), this.renderButtonsGroup(), this.renderInputsGroup(), this.renderOtherInputsGroup(), this.renderTokenInputsGroup(), this.renderSwitchersGroup(), this.renderControlsGroup()), this.renderStickyStopElement(), /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { vertical: true, gap: 50 }, this.renderHintsGroup(), this.renderTooltip(), this.renderPaging(), this.renderFileUploader()));};_proto.renderTabs = function renderTabs() {var _cx;var _this$props2 = this.props,currentThemeType = _this$props2.currentThemeType,onThemeChange = _this$props2.onThemeChange,onEditLinkClick = _this$props2.onEditLinkClick;var tabsOuterWrapperStyle = { background: this.theme.bgDefault };var tabsOuterWrapperClass = (0, _Emotion.cx)((_cx = {}, _cx[_Playground.styles.tabsWrapper(this.theme)] = true, _cx[_Playground.styles.stickyTabsWrapper(this.theme)] = useSticky, _cx));return /*#__PURE__*/_react.default.createElement("div", { style: tabsOuterWrapperStyle, className: tabsOuterWrapperClass }, /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { gap: 40 }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, { value: this.getCurrentTab(), onValueChange: onThemeChange, vertical: false }, /*#__PURE__*/_react.default.createElement("div", { className: _Playground.styles.tabsInnerWrapper(this.theme) }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Default }, "\u0414\u0435\u0444\u043E\u043B\u0442\u043D\u0430\u044F"), /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Flat }, "\u041F\u043B\u043E\u0441\u043A\u0430\u044F"), /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Dark }, "\u0422\u0435\u043C\u043D\u0430\u044F"))), /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, null, /*#__PURE__*/_react.default.createElement(_Toggle.Toggle, { checked: this.is8pxTheme, onValueChange: this.toggle8pxTheme, disabled: currentThemeType === _constants.ThemeType.Dark }), /*#__PURE__*/_react.default.createElement("span", null, "8px")), /*#__PURE__*/_react.default.createElement(_Link2.Link, { onClick: onEditLinkClick }, "\u041D\u0430\u0441\u0442\u0440\u043E\u0438\u0442\u044C \u0442\u0435\u043C\u0443")));};(0, _createClass2.default)(Playground, [{ key: "is8pxTheme", get: function get() {switch (this.props.currentThemeType) {case _constants.ThemeType.Default:case _constants.ThemeType.Flat:return true;default:return false;}} }]);return Playground;}(_react.default.Component);exports.Playground = Playground;