@skbkontur/react-ui 4.25.2 → 4.26.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.26.0](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@4.25.2...@skbkontur/react-ui@4.26.0) (2024-08-20)
+
+
+### Bug Fixes
+
+* **FileUploader:** correct event type ([aaf3422](https://github.com/skbkontur/retail-ui/commit/aaf3422a849e3b3fef81d8656031bc66412e06ca))
+* **FileUploader:** work with sync mode ([82a7a3c](https://github.com/skbkontur/retail-ui/commit/82a7a3c5d95d3b132d39a333cec515c3b0d28bfb))
+* **ScrollContainer:** new prop 'scrollRef' ([#3476](https://github.com/skbkontur/retail-ui/issues/3476)) ([d066e35](https://github.com/skbkontur/retail-ui/commit/d066e35d7a4d4c8e273e0b382a475a217b7386fc))
+
+
+### Features
+
+* **FileUploader:** initial state for files ([b735a83](https://github.com/skbkontur/retail-ui/commit/b735a834c4d6736f9d05289ac4b3e4c7f132de43))
+* **ZIndex:** partially support several React roots ([#3478](https://github.com/skbkontur/retail-ui/issues/3478)) ([6c87630](https://github.com/skbkontur/retail-ui/commit/6c87630368219fd3b32d5e5dfc67704f3b29ad99))
+
+
+
+
+
 ## [4.25.2](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@4.25.1...@skbkontur/react-ui@4.25.2) (2024-07-16)
 
 

package/README.md

@@ -23,16 +23,17 @@ const MyApp = () => (
 
 ### Хотим другой цвет кнопки!
 
-Нужно использовать [ThemeContext](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeContext). Список переменных можно глянуть в [ThemeShowcase](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeShowcase)
+Нужно использовать [ThemeContext](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeContext). Список переменных
+можно глянуть в [ThemeShowcase](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeShowcase)
 
 ### StrictMode
 
-Начиная с версий `@skbkontur/react-ui@3.10.0` и `@skbkontur/react-ui-validations@1.7.0`, библиотека поддерживает работу в React.StrictMode.
+Начиная с версий `@skbkontur/react-ui@3.10.0` и `@skbkontur/react-ui-validations@1.7.0`, библиотека поддерживает работу
+в React.StrictMode.
 
-Некоторым компонентам библиотеки необходимо иметь доступ до корневой DOM-ноды своих
-children. Ранее для этого использовался метод findDomNode, который в StrictMode запрещён.
-Теперь получение DOM-ноды реализовано в библиотеке через ref, из-за чего появились некоторые
-требования к компонентам, передаваемым в Hint, Tooltip, Popup или Tab:
+Некоторым компонентам библиотеки необходимо иметь доступ до корневой DOM-ноды своих children. Ранее для этого
+использовался метод findDomNode, который в StrictMode запрещён. Теперь получение DOM-ноды реализовано в библиотеке через
+ref, из-за чего появились некоторые требования к компонентам, передаваемым в Hint, Tooltip, Popup или Tab:
 
 - при передаче функциональных компонентов, они должны использовать `React.ForwardRef`:
 
@@ -46,19 +47,20 @@ const CustomFunctionComponent = React.forwardRef(
 export const WithFunctionChildren = () => (
   <React.StrictMode>
     <Hint pos="top" text="Something will never be changed" manual opened>
-      <CustomFunctionComponent />
+      <CustomFunctionComponent/>
     </Hint>
   </React.StrictMode>
 );
 ```
 
-- при использовании хука `useImperativeHandle`, возвращаемый объект должен реализовывать метод `getRootNode`, возвращающий DOM-ноду:
+- при использовании хука `useImperativeHandle`, возвращаемый объект должен реализовывать метод `getRootNode`,
+  возвращающий DOM-ноду:
 
 ```js static
 import { Hint } from '@skbkontur/react-ui';
 
 const ImperativeHandleComponent = React.forwardRef(function FN(_, ref) {
-  const rootNode = React.useRef<HTMLDivElement>(null);
+  const rootNode = React.useRef < HTMLDivElement > (null);
   React.useImperativeHandle(ref, () => ({
     foo: 'bar',
     getRootNode: () => rootNode.current,
@@ -69,7 +71,7 @@ const ImperativeHandleComponent = React.forwardRef(function FN(_, ref) {
 export const WithImperativeHandleChildren = () => (
   <React.StrictMode>
     <Hint pos="top" text="Something will never be changed" manual opened>
-      <ImperativeHandleComponent />
+      <ImperativeHandleComponent/>
     </Hint>
   </React.StrictMode>
 );
@@ -95,7 +97,7 @@ class CustomClassComponent extends React.Component {
 export const WithClassChildren = () => (
   <React.StrictMode>
     <Hint pos="top" text="Something will never be changed" manual opened>
-      <CustomClassComponent />
+      <CustomClassComponent/>
     </Hint>
   </React.StrictMode>
 );
@@ -107,6 +109,29 @@ export const WithClassChildren = () => (
 
 ## FAQ
 
+### Выпадашки и несколько react-рутов
+
+Реакт позволяет создавать рут внутри рута. Но контекст между ними не прокидывается. Это вызывает проблемы в работе
+различных выпадашек, типа `Tooltip`, `Select`, `Modal` и других.
+
+В версии `4.26.0` появился мехнизм, который решает большинство этих проблем. Если вложенный реакт-рут является виджетом,
+то будет достаточно обновить библиотеку только в нём.
+
+Однако, при удалении html-элемента, который был реакт-рутом, его необходимо предварительно явно размонтировать:
+
+```tsx static
+React.useLayoutEffect(
+  () => () => {
+    if (React.version === 17) {
+      rootRef.current && ReactDOM.unmountComponentAtNode(rootRef.current);
+    } else if (React.version === 18) {
+      setTimeout(() => reactRoot.current?.unmount());
+    }
+  },
+  [],
+);
+```
+
 ### Отключение анимаций во время тестирования
 
 Анимации в компонентах отключаются любой из следующих глобальных переменных:
@@ -121,11 +146,14 @@ process.env.STORYBOOK_REACT_UI_TEST
 
 ### Прокидывание className и style компонентам
 
-Начиная с версии 2.14.0, стало возможным передавать в компоненты свои css-классы для дополнительной стилизации. Однако, не стоит пользоваться этой возможностью для вмешательства во внутренние стили компонентов. Верстка компонентов может быть изменена в любой момент без предупреждения, что приведет к поломке ваших переопределенных стилей.
+Начиная с версии 2.14.0, стало возможным передавать в компоненты свои css-классы для дополнительной стилизации. Однако,
+не стоит пользоваться этой возможностью для вмешательства во внутренние стили компонентов. Верстка компонентов может
+быть изменена в любой момент без предупреждения, что приведет к поломке ваших переопределенных стилей.
 
 ### Мобильная верстка
 
-С версии 4.0 многие компоненты умеют адаптироваться под мобильные устройства. Подробнее об управлении этим поведением в [MOBILES.md](https://github.com/skbkontur/retail-ui/blob/master/packages/react-ui/MOBILES.md).
+С версии 4.0 многие компоненты умеют адаптироваться под мобильные устройства. Подробнее об управлении этим поведением
+в [MOBILES.md](https://github.com/skbkontur/retail-ui/blob/master/packages/react-ui/MOBILES.md).
 
 ### Помощь в развитии
 

package/cjs/components/Autocomplete/Autocomplete.md

@@ -1,4 +1,6 @@
 ```jsx harmony
+import { Autocomplete } from '@skbkontur/react-ui';
+
 const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
 
 const [value, setValue] = React.useState('Kappa');
@@ -6,9 +8,9 @@ const [value, setValue] = React.useState('Kappa');
 <Autocomplete source={items} value={value} onValueChange={setValue} />;
 ```
 
-Очистить значение в `Autocomplete` можно только с помощью пустой строки
+Очистить значение в `Autocomplete` можно только с помощью пустой строки.
 ```jsx harmony
-import { Button, Group } from '@skbkontur/react-ui';
+import { Autocomplete, Button, Group } from '@skbkontur/react-ui';
 
 const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
 
@@ -22,7 +24,7 @@ const [value, setValue] = React.useState('Kappa');
 
 У Autocomplete есть 3 стандартных размера.
 ```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
+import { Autocomplete, Gapped } from '@skbkontur/react-ui';
 
 const items = ['Маленький', 'Средний', 'Большой'];
 
@@ -36,3 +38,74 @@ const [valueLarge, setValueLarge] = React.useState('Большой');
   <Autocomplete source={items} value={valueLarge} onValueChange={setValueLarge} size={'large'} />
 </Gapped>
 ```
+
+Можно выделять введеное значение при фокусе.
+```jsx harmony
+import { Autocomplete } from '@skbkontur/react-ui';
+
+const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
+
+const [value, setValue] = React.useState('');
+
+<Autocomplete source={items} value={value} onValueChange={setValue} selectAllOnFocus />
+```
+
+Расположение иконки слева и справа.
+```jsx harmony
+import { Autocomplete, Gapped } from '@skbkontur/react-ui';
+import { SearchLoupeIcon16Regular } from '@skbkontur/icons/SearchLoupeIcon16Regular';
+
+const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
+
+const [valueLeft, setValueLeft] = React.useState('');
+const [valueRight, setValueRight] = React.useState('');
+
+<Gapped>
+  <Autocomplete source={items} value={valueLeft} onValueChange={setValueLeft} leftIcon={<SearchLoupeIcon16Regular />} />
+  <Autocomplete source={items} value={valueRight} onValueChange={setValueRight} rightIcon={<SearchLoupeIcon16Regular />} />
+</Gapped>
+```
+
+Изменение ширины меню.
+```jsx harmony
+import { Autocomplete } from '@skbkontur/react-ui';
+
+const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
+
+const [value, setValue] = React.useState('');
+
+<Autocomplete source={items} value={value} onValueChange={setValue} menuWidth={'80%'} />
+```
+
+Расположение выпадающего окна Autocomplete.
+```jsx harmony
+import { Autocomplete } from '@skbkontur/react-ui';
+
+const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
+
+const [value, setValue] = React.useState('');
+
+<Autocomplete source={items} value={value} onValueChange={setValue} menuPos={'top'} />
+```
+
+Отрисовка тени у выпадающего меню.
+```jsx harmony
+import { Autocomplete } from '@skbkontur/react-ui';
+
+const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
+
+const [value, setValue] = React.useState('');
+
+<Autocomplete source={items} value={value} onValueChange={setValue} hasShadow />
+```
+
+Использование режима прозрачной рамки.
+```jsx harmony
+import { Autocomplete } from '@skbkontur/react-ui';
+
+const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
+
+const [value, setValue] = React.useState('Kappa');
+
+<Autocomplete source={items} value={value} onValueChange={setValue} borderless />
+```

package/cjs/components/Button/Button.md

@@ -60,15 +60,15 @@ import { XIcon16Regular } from '@skbkontur/icons/XIcon16Regular';
 
 ```jsx harmony
 <div
-    style={{
-      display: "flex",
-      alignItems: "end",
-      gap: '10px',
-    }}
-  >
-    <Button size="small">Маленькая</Button>
-    <Button size="medium">Средняя</Button>
-    <Button size="large">Большая</Button>
+  style={{
+    display: "flex",
+    alignItems: "end",
+    gap: '10px',
+  }}
+>
+  <Button size="small">Маленькая</Button>
+  <Button size="medium">Средняя</Button>
+  <Button size="large">Большая</Button>
 </div>
 ```
 
@@ -133,7 +133,7 @@ const handleClick = () => {
 
 ```
 
-Пример кнопки с пропом `theme`
+Пример кнопки с пропом `theme`.
 
 ```jsx harmony
 import { Button, Gapped } from '@skbkontur/react-ui';
@@ -146,7 +146,7 @@ import { Button, Gapped } from '@skbkontur/react-ui';
 ```
 
 
-Пример кастомизации кнопки-ссылки
+Пример кастомизации кнопки-ссылки.
 
 ```jsx harmony
 import { Toast } from "@skbkontur/react-ui";
@@ -212,3 +212,30 @@ const renderExampleRow = (title, styles, index) => {
   {renderExampleRow('Изменение цвета ссылки', differentColorStyles)}
 </table>
 ```
+
+
+Кнопка может быть узкой.
+
+```jsx harmony
+import { Button } from '@skbkontur/react-ui';
+
+<Button narrow>
+  Создать отчет
+</Button>
+```
+
+
+У кнопки есть состояния валидации.
+
+```jsx harmony
+import { Button, Gapped } from '@skbkontur/react-ui';
+
+<Gapped gap={5}>
+  <Button warning>
+    Warning
+  </Button>
+  <Button error>
+    Error
+  </Button>
+</Gapped>
+```

package/cjs/components/Calendar/Calendar.md

@@ -106,6 +106,8 @@ const theme = React.useContext(ThemeContext);
 
 ### Кастомный рендер дня
 
+Для кастомнизации дней в календаре используется метод `renderDay` и компонент [Calendar.Day](#/Components/Calendar/Calendar.Day)
+
 ```jsx harmony
 import { Tooltip, Hint, CalendarDay } from '@skbkontur/react-ui';
 
@@ -144,6 +146,44 @@ const renderDay = (props) => {
 />;
 ```
 
+### Календарь с ценами
+
+Пример с кастомизацией темы и кастомным рендером дня 
+
+```jsx harmony
+import { ThemeContext, ThemeFactory, CalendarDay } from '@skbkontur/react-ui';
+
+const theme = React.useContext(ThemeContext);
+
+function renderDay(props) {
+  const [date, month] = props.date.split('.').map(Number);
+  const randomDay = date % 6 === 0 || date % 7 === 0 || date % 8 === 0;
+  const randomPrice = Math.round((date / month) * 1000);
+
+  return (
+    <CalendarDay {...props}>
+      <div style={{ fontSize: theme.calendarCellFontSize }}>{date}</div>
+      <div style={{ fontSize: '11px', fontFeatureSettings: 'tnum', fontVariantNumeric: 'tabular-nums' }}>
+        {randomDay ? <>{randomPrice}&thinsp;₽</> : <span style={{ color: theme.tokenTextColorDisabled }}>—</span>}
+      </div>
+    </CalendarDay>
+  );
+}
+
+const [value, setValue] = React.useState(null);
+
+<ThemeContext.Provider
+  value={ThemeFactory.create({
+    calendarCellSize: '56px',
+    calendarCellLineHeight: '1.5',
+    calendarWrapperHeight: '600px',
+    calendarCellBorderRadius: '8px'
+  }, theme)}
+>
+  <Calendar value={value} renderDay={renderDay} onValueChange={setValue} />
+</ThemeContext.Provider>
+```
+
 #### Локали по умолчанию
 
 ```typescript static

package/cjs/components/DropdownMenu/DropdownMenu.md

@@ -247,3 +247,42 @@ const hiddenItems = [
   </DropdownMenu>
 </Gapped>
 ```
+
+С использованием фиче-флага menuItemsAtAnyLevel. Mожно использовать различные обертки для пунктов меню.
+
+```jsx harmony
+import {
+    DropdownMenu,
+    Button,
+    MenuHeader,
+    MenuItem,
+    MenuSeparator,
+    ReactUIFeatureFlagsContext,
+    Gapped
+} from '@skbkontur/react-ui';
+
+const groupedMenuItems = (
+  <div>
+    <MenuItem>MenuItem1</MenuItem>
+    <MenuItem>MenuItem2</MenuItem>
+    <MenuItem isNotSelectable>Not Selectable</MenuItem>
+  </div>
+);
+
+<Gapped>
+  <ReactUIFeatureFlagsContext.Provider value={{ menuItemsAtAnyLevel: true }}>
+    <DropdownMenu caption={<Button use="primary">Открыть меню</Button>}>
+      <>
+        <MenuHeader>Заголовок меню</MenuHeader>
+        <MenuSeparator />
+        <div>
+          {groupedMenuItems}
+        </div>
+      </>
+      <MenuItem>MenuItem3</MenuItem>
+    </DropdownMenu>
+  </ReactUIFeatureFlagsContext.Provider>
+</Gapped>;
+```
+
+

package/cjs/components/FileUploader/FileUploader.d.ts

@@ -11,6 +11,8 @@ import { SizeProp } from '../../lib/types/props';
 export declare type FileUploaderSize = SizeProp;
 declare type FileUploaderOverriddenProps = 'size';
 interface _FileUploaderProps extends CommonProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, FileUploaderOverriddenProps> {
+    /** Начальное состояние загруженных файлов */
+    initialFiles?: File[];
     /** Состояние ошибки всего контрола */
     error?: boolean;
     /** Состояние предупреждения всего контрола */

package/cjs/components/FileUploader/FileUploader.js

@@ -26,7 +26,7 @@ var _forwardRefAndName = require("../../lib/forwardRefAndName");
 var _FocusControlWrapper = require("../../internal/FocusControlWrapper");
 
 var _UploadIcon = require("./UploadIcon");
-var _FileUploader2 = require("./FileUploader.styles");var _excluded = ["disabled", "error", "warning", "multiple", "width", "hideFiles", "onBlur", "onFocus", "onChange", "request", "validateBeforeUpload", "onRequestSuccess", "onRequestError", "size", "renderFile"];
+var _FileUploader2 = require("./FileUploader.styles");var _excluded = ["initialFiles", "disabled", "error", "warning", "multiple", "width", "hideFiles", "onBlur", "onFocus", "onChange", "request", "validateBeforeUpload", "onRequestSuccess", "onRequestError", "size", "renderFile"];
 
 var stopPropagation = function stopPropagation(e) {return e.stopPropagation();};
 
@@ -80,6 +80,8 @@ var stopPropagation = function stopPropagation(e) {return e.stopPropagation();};
 
 
 
+
+
 
 
 
@@ -97,7 +99,8 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
   var _isTheme2022 = (0, _ThemeHelpers.isTheme2022)(theme);
 
   var
-  disabled =
+  initialFiles =
+
 
 
 
@@ -113,7 +116,7 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
 
 
 
-  props.disabled,error = props.error,warning = props.warning,_props$multiple = props.multiple,multiple = _props$multiple === void 0 ? false : _props$multiple,_props$width = props.width,width = _props$width === void 0 ? theme.fileUploaderWidth : _props$width,_props$hideFiles = props.hideFiles,hideFiles = _props$hideFiles === void 0 ? false : _props$hideFiles,onBlur = props.onBlur,onFocus = props.onFocus,onChange = props.onChange,request = props.request,validateBeforeUpload = props.validateBeforeUpload,onRequestSuccess = props.onRequestSuccess,onRequestError = props.onRequestError,_props$size = props.size,size = _props$size === void 0 ? 'small' : _props$size,_props$renderFile = props.renderFile,renderFile = _props$renderFile === void 0 ? defaultRenderFile : _props$renderFile,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  props.initialFiles,disabled = props.disabled,error = props.error,warning = props.warning,_props$multiple = props.multiple,multiple = _props$multiple === void 0 ? false : _props$multiple,_props$width = props.width,width = _props$width === void 0 ? theme.fileUploaderWidth : _props$width,_props$hideFiles = props.hideFiles,hideFiles = _props$hideFiles === void 0 ? false : _props$hideFiles,onBlur = props.onBlur,onFocus = props.onFocus,onChange = props.onChange,request = props.request,validateBeforeUpload = props.validateBeforeUpload,onRequestSuccess = props.onRequestSuccess,onRequestError = props.onRequestError,_props$size = props.size,size = _props$size === void 0 ? 'small' : _props$size,_props$renderFile = props.renderFile,renderFile = _props$renderFile === void 0 ? defaultRenderFile : _props$renderFile,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
   var _useContext =
   (0, _react.useContext)(_FileUploaderControlContext.FileUploaderControlContext),files = _useContext.files,setFiles = _useContext.setFiles,removeFile = _useContext.removeFile,reset = _useContext.reset,setFileValidationResult = _useContext.setFileValidationResult,isMinLengthReached = _useContext.isMinLengthReached;
@@ -165,7 +168,7 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
   /** common part **/
   var handleChange = (0, _react.useCallback)(
   function (newFiles) {
-    if (!newFiles) {
+    if (!newFiles || !newFiles.length) {
       return;
     }
 
@@ -255,6 +258,16 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
     }
   };
 
+  var handleRemoveFile = (0, _react.useCallback)(function (fileId) {
+    var dataTransfer = new DataTransfer();
+    files.
+    filter(function (f) {return f.id !== fileId;}).
+    forEach(function (file) {
+      dataTransfer.items.add(file.originalFile);
+    });
+    inputRef.current && (inputRef.current.files = dataTransfer.files);
+  }, []);
+
   var _useState3 = (0, _react.useState)(false),hovered = _useState3[0],setHovered = _useState3[1];
 
   var uploadButtonClassNames = (0, _Emotion.cx)(
@@ -291,6 +304,16 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
     setIsLinkVisible(hasOneFileForSingle ? !isMinLengthReached : true);
   }, [isMinLengthReached, hasOneFileForSingle]);
 
+  (0, _react.useEffect)(function () {
+    if (!files || !files.length || !inputRef.current) {
+      return;
+    }
+
+    var dataTransfer = new DataTransfer();
+    files.forEach(function (file) {return dataTransfer.items.add(file.originalFile);});
+    inputRef.current.files = dataTransfer.files;
+  }, []);
+
   var rootNodeRef = (0, _react.useRef)(null);
 
   var iconSizes = {
@@ -308,7 +331,9 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
       style: (0, _useMemoObject.useMemoObject)({ width: width }),
       ref: rootNodeRef },
 
-    !hideFiles && !isSingleMode && !!files.length && /*#__PURE__*/_react.default.createElement(_FileUploaderFileList.FileUploaderFileList, { renderFile: renderFile, size: size }), /*#__PURE__*/
+    !hideFiles && !isSingleMode && !!files.length && /*#__PURE__*/
+    _react.default.createElement(_FileUploaderFileList.FileUploaderFileList, { renderFile: renderFile, size: size, onRemove: handleRemoveFile }), /*#__PURE__*/
+
     _react.default.createElement("div", { className: uploadButtonWrapperClassNames }, /*#__PURE__*/
     _react.default.createElement("label", {
       onMouseEnter: function onMouseEnter() {return setHovered(true);},
@@ -334,7 +359,7 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
 
     hasOneFileForSingle ? /*#__PURE__*/
     _react.default.createElement("div", { ref: fileDivRef, className: _FileUploader2.jsStyles.singleFile() },
-    renderFile(files[0], /*#__PURE__*/_react.default.createElement(_FileUploaderFile.FileUploaderFile, { file: files[0], size: size }))) : /*#__PURE__*/
+    renderFile(files[0], /*#__PURE__*/_react.default.createElement(_FileUploaderFile.FileUploaderFile, { file: files[0], size: size, onRemove: handleRemoveFile }))) : /*#__PURE__*/
 
 
     _react.default.createElement(_react.default.Fragment, null,
@@ -357,9 +382,7 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
       onClick: stopPropagation,
       onChange: handleInputChange,
       onFocus: handleFocus,
-      onBlur: handleBlur
-      // для того, чтобы срабатывало событие change при выборе одного и того же файла подряд
-      , value: '' }))))))));
+      onBlur: handleBlur }))))))));