@alfalab/core-components 19.11.1 → 20.0.0

package/confirmation/modern/index.css

@@ -2,9 +2,6 @@
 :root {
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: #546272;
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
 }
 :root {
 

package/date-input/esm/index.css

@@ -1,9 +1,4 @@
 /* hash: o4fuu */
-:root {
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
 :root {
 
     /* Hard */

package/date-input/index.css

@@ -1,9 +1,4 @@
 /* hash: o4fuu */
-:root {
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
 :root {
 
     /* Hard */

package/date-input/modern/index.css

@@ -1,9 +1,4 @@
 /* hash: o4fuu */
-:root {
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
 :root {
 
     /* Hard */

package/divider/esm/index.css

@@ -1,9 +1,6 @@
 /* hash: 8f74w */
 :root {
     --color-light-border-primary: #dbdee1;
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
 }
 :root {
 

package/divider/index.css

@@ -1,9 +1,6 @@
 /* hash: 8f74w */
 :root {
     --color-light-border-primary: #dbdee1;
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
 }
 :root {
 

package/divider/modern/index.css

@@ -1,9 +1,6 @@
 /* hash: 8f74w */
 :root {
     --color-light-border-primary: #dbdee1;
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
 }
 :root {
 

package/drawer/esm/index.css

@@ -1,9 +1,6 @@
 /* hash: 13m1l */
 :root {
     --color-light-bg-overlay: rgba(0, 0, 0, 0.6);
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
 }
 :root {
 

package/drawer/index.css

@@ -1,9 +1,6 @@
 /* hash: 13m1l */
 :root {
     --color-light-bg-overlay: rgba(0, 0, 0, 0.6);
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
 }
 :root {
 

package/drawer/modern/index.css

@@ -1,9 +1,6 @@
 /* hash: 13m1l */
 :root {
     --color-light-bg-overlay: rgba(0, 0, 0, 0.6);
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
 }
 :root {
 

package/dropzone/Component.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
-import { FC } from "react";
+import { ComponentType, FC } from "react";
+import { OverlayProps } from "./components/index";
 type DropzoneProps = {
     /**
      * Дополнительный класс
@@ -10,18 +11,27 @@ type DropzoneProps = {
      * Подпись для заглушки
      */
     text?: string;
+    /**
+     * Заблокированное состояние
+     */
+    disabled?: boolean;
     /**
      * Состояние ошибки
      */
     error?: boolean;
     /**
+     * Растягивать ли компонент на всю ширину
+     */
+    block?: boolean;
+    /**
+     * @deprecated(используйте Overlay)
      * Позволяет вручную управлять видимостью заглушки
      */
     overlayVisible?: boolean;
     /**
-     * Растягивать ли компонент на всю ширину
+     * Компонент оверлея
      */
-    block?: boolean;
+    Overlay?: ComponentType<OverlayProps>;
     /**
      * Обработчик события 'drop'
      */

package/dropzone/Component.js

@@ -2,20 +2,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var cn = require('classnames');
-var iconsGlyph = require('@alfalab/icons-glyph');
 var utils = require('./utils.js');
+require('@alfalab/icons-glyph');
+var components_overlay_Component = require('./components/overlay/Component.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"component":"dropzone__component_16e72","block":"dropzone__block_16e72","overlay":"dropzone__overlay_16e72","dragOver":"dropzone__dragOver_16e72","error":"dropzone__error_16e72","text":"dropzone__text_16e72"};
+var styles = {"component":"dropzone__component_16e72","disabled":"dropzone__disabled_16e72","block":"dropzone__block_16e72","dragOver":"dropzone__dragOver_16e72","error":"dropzone__error_16e72"};
 require('./index.css');
 
 var Dropzone = function (_a) {
     var _b;
-    var className = _a.className, children = _a.children, _c = _a.text, text = _c === void 0 ? 'Перетащите файлы' : _c, _d = _a.error, error = _d === void 0 ? false : _d, _e = _a.overlayVisible, overlayVisible = _e === void 0 ? false : _e, onDragEnter = _a.onDragEnter, onDragLeave = _a.onDragLeave, onDragOver = _a.onDragOver, onDrop = _a.onDrop, _f = _a.block, block = _f === void 0 ? false : _f, dataTestId = _a.dataTestId;
+    var className = _a.className, children = _a.children, _c = _a.text, text = _c === void 0 ? 'Перетащите файлы' : _c, _d = _a.error, error = _d === void 0 ? false : _d, overlayVisible = _a.overlayVisible, _e = _a.Overlay, Overlay = _e === void 0 ? components_overlay_Component.Overlay : _e, onDragEnter = _a.onDragEnter, onDragLeave = _a.onDragLeave, onDragOver = _a.onDragOver, onDrop = _a.onDrop, _f = _a.block, block = _f === void 0 ? false : _f, disabled = _a.disabled, dataTestId = _a.dataTestId;
     var _g = React.useState(false), dragOver = _g[0], setDragOver = _g[1];
     /**
      * При ховере дочерних элементов срабатывает dragLeave, из-за чего пропадает оверлей
@@ -24,20 +25,26 @@ var Dropzone = function (_a) {
     var dragCounter = React.useRef(0);
     var handleDragOver = React.useCallback(function (event) {
         utils.preventAndStopEvent(event);
+        if (disabled)
+            return;
         if (onDragOver) {
             onDragOver(event);
         }
-    }, [onDragOver]);
+    }, [onDragOver, disabled]);
     var handleDragEnter = React.useCallback(function (event) {
         utils.preventAndStopEvent(event);
+        if (disabled)
+            return;
         dragCounter.current += 1;
         setDragOver(true);
         if (onDragEnter) {
             onDragEnter(event);
         }
-    }, [onDragEnter]);
+    }, [disabled, onDragEnter]);
     var handleDragLeave = React.useCallback(function (event) {
         utils.preventAndStopEvent(event);
+        if (disabled)
+            return;
         dragCounter.current -= 1;
         if (dragCounter.current > 0)
             return;
@@ -45,9 +52,11 @@ var Dropzone = function (_a) {
         if (onDragLeave) {
             onDragLeave(event);
         }
-    }, [onDragLeave]);
+    }, [disabled, onDragLeave]);
     var handleDrop = React.useCallback(function (event) {
         utils.preventAndStopEvent(event);
+        if (disabled)
+            return;
         setDragOver(false);
         if (event.dataTransfer.files && event.dataTransfer.files.length > 0) {
             if (onDrop) {
@@ -56,16 +65,15 @@ var Dropzone = function (_a) {
             event.dataTransfer.clearData();
             dragCounter.current = 0;
         }
-    }, [onDrop]);
+    }, [disabled, onDrop]);
     return (React__default['default'].createElement("div", { className: cn__default['default'](styles.component, className, (_b = {},
-            _b[styles.dragOver] = dragOver || overlayVisible,
+            _b[styles.dragOver] = dragOver,
             _b[styles.error] = error,
             _b[styles.block] = block,
-            _b)), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, "data-test-id": dataTestId },
+            _b[styles.disabled] = disabled,
+            _b)), "data-test-id": dataTestId, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop },
         children,
-        React__default['default'].createElement("div", { className: styles.overlay },
-            React__default['default'].createElement(iconsGlyph.ContainerMIcon, null),
-            React__default['default'].createElement("span", { className: styles.text }, text))));
+        Overlay && React__default['default'].createElement(Overlay, { text: text, visible: Boolean(dragOver || overlayVisible) })));
 };
 
 exports.Dropzone = Dropzone;

package/dropzone/components/index.d.ts

@@ -0,0 +1 @@
+export * from "./overlay/index";

package/dropzone/components/index.js

@@ -0,0 +1,10 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('@alfalab/icons-glyph');
+var components_overlay_Component = require('./overlay/Component.js');
+
+
+
+exports.Overlay = components_overlay_Component.Overlay;

package/dropzone/components/overlay/Component.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+type OverlayProps = {
+    /**
+     * Подпись для заглушки
+     */
+    text?: string;
+    /**
+     * Управление видимостью
+     */
+    visible?: boolean;
+};
+declare const Overlay: FC<OverlayProps>;
+export { OverlayProps, Overlay };

package/dropzone/components/overlay/Component.js

@@ -0,0 +1,25 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var iconsGlyph = require('@alfalab/icons-glyph');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+var styles = {"overlay":"dropzone__overlay_1qa09","visible":"dropzone__visible_1qa09","text":"dropzone__text_1qa09"};
+require('./index.css');
+
+var Overlay = function (_a) {
+    var _b;
+    var _c = _a.text, text = _c === void 0 ? 'Перетащите файлы' : _c, _d = _a.visible, visible = _d === void 0 ? false : _d;
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.overlay, (_b = {},
+            _b[styles.visible] = visible,
+            _b)) },
+        React__default['default'].createElement(iconsGlyph.ContainerMIcon, null),
+        React__default['default'].createElement("span", { className: styles.text }, text)));
+};
+
+exports.Overlay = Overlay;

package/dropzone/components/overlay/index.css

@@ -0,0 +1,50 @@
+/* hash: 1qa09 */
+:root {
+    --color-light-bg-secondary: #f3f4f5;
+    --color-light-text-primary: #0b1f35;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+}
+:root {
+    --border-radius-s: 4px;
+}
+.dropzone__overlay_1qa09 {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: var(--border-radius-s);
+    background: var(--color-light-bg-secondary);
+
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    pointer-events: none;
+}
+.dropzone__visible_1qa09 {
+    opacity: 1;
+}
+.dropzone__text_1qa09 {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+
+    color: var(--color-light-text-primary);
+    text-align: center;
+    margin-top: var(--gap-xs);
+}

package/dropzone/components/overlay/index.js

@@ -0,0 +1,10 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('@alfalab/icons-glyph');
+var components_overlay_Component = require('./Component.js');
+
+
+
+exports.Overlay = components_overlay_Component.Overlay;

package/dropzone/esm/Component.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
-import { FC } from "react";
+import { ComponentType, FC } from "react";
+import { OverlayProps } from "./components/index";
 type DropzoneProps = {
     /**
      * Дополнительный класс
@@ -10,18 +11,27 @@ type DropzoneProps = {
      * Подпись для заглушки
      */
     text?: string;
+    /**
+     * Заблокированное состояние
+     */
+    disabled?: boolean;
     /**
      * Состояние ошибки
      */
     error?: boolean;
     /**
+     * Растягивать ли компонент на всю ширину
+     */
+    block?: boolean;
+    /**
+     * @deprecated(используйте Overlay)
      * Позволяет вручную управлять видимостью заглушки
      */
     overlayVisible?: boolean;
     /**
-     * Растягивать ли компонент на всю ширину
+     * Компонент оверлея
      */
-    block?: boolean;
+    Overlay?: ComponentType<OverlayProps>;
     /**
      * Обработчик события 'drop'
      */

package/dropzone/esm/Component.js

@@ -1,14 +1,15 @@
 import React, { useState, useRef, useCallback } from 'react';
 import cn from 'classnames';
-import { ContainerMIcon } from '@alfalab/icons-glyph';
 import { preventAndStopEvent } from './utils.js';
+import '@alfalab/icons-glyph';
+import { Overlay } from './components/overlay/Component.js';
 
-var styles = {"component":"dropzone__component_16e72","block":"dropzone__block_16e72","overlay":"dropzone__overlay_16e72","dragOver":"dropzone__dragOver_16e72","error":"dropzone__error_16e72","text":"dropzone__text_16e72"};
+var styles = {"component":"dropzone__component_16e72","disabled":"dropzone__disabled_16e72","block":"dropzone__block_16e72","dragOver":"dropzone__dragOver_16e72","error":"dropzone__error_16e72"};
 require('./index.css');
 
 var Dropzone = function (_a) {
     var _b;
-    var className = _a.className, children = _a.children, _c = _a.text, text = _c === void 0 ? 'Перетащите файлы' : _c, _d = _a.error, error = _d === void 0 ? false : _d, _e = _a.overlayVisible, overlayVisible = _e === void 0 ? false : _e, onDragEnter = _a.onDragEnter, onDragLeave = _a.onDragLeave, onDragOver = _a.onDragOver, onDrop = _a.onDrop, _f = _a.block, block = _f === void 0 ? false : _f, dataTestId = _a.dataTestId;
+    var className = _a.className, children = _a.children, _c = _a.text, text = _c === void 0 ? 'Перетащите файлы' : _c, _d = _a.error, error = _d === void 0 ? false : _d, overlayVisible = _a.overlayVisible, _e = _a.Overlay, Overlay$1 = _e === void 0 ? Overlay : _e, onDragEnter = _a.onDragEnter, onDragLeave = _a.onDragLeave, onDragOver = _a.onDragOver, onDrop = _a.onDrop, _f = _a.block, block = _f === void 0 ? false : _f, disabled = _a.disabled, dataTestId = _a.dataTestId;
     var _g = useState(false), dragOver = _g[0], setDragOver = _g[1];
     /**
      * При ховере дочерних элементов срабатывает dragLeave, из-за чего пропадает оверлей
@@ -17,20 +18,26 @@ var Dropzone = function (_a) {
     var dragCounter = useRef(0);
     var handleDragOver = useCallback(function (event) {
         preventAndStopEvent(event);
+        if (disabled)
+            return;
         if (onDragOver) {
             onDragOver(event);
         }
-    }, [onDragOver]);
+    }, [onDragOver, disabled]);
     var handleDragEnter = useCallback(function (event) {
         preventAndStopEvent(event);
+        if (disabled)
+            return;
         dragCounter.current += 1;
         setDragOver(true);
         if (onDragEnter) {
             onDragEnter(event);
         }
-    }, [onDragEnter]);
+    }, [disabled, onDragEnter]);
     var handleDragLeave = useCallback(function (event) {
         preventAndStopEvent(event);
+        if (disabled)
+            return;
         dragCounter.current -= 1;
         if (dragCounter.current > 0)
             return;
@@ -38,9 +45,11 @@ var Dropzone = function (_a) {
         if (onDragLeave) {
             onDragLeave(event);
         }
-    }, [onDragLeave]);
+    }, [disabled, onDragLeave]);
     var handleDrop = useCallback(function (event) {
         preventAndStopEvent(event);
+        if (disabled)
+            return;
         setDragOver(false);
         if (event.dataTransfer.files && event.dataTransfer.files.length > 0) {
             if (onDrop) {
@@ -49,16 +58,15 @@ var Dropzone = function (_a) {
             event.dataTransfer.clearData();
             dragCounter.current = 0;
         }
-    }, [onDrop]);
+    }, [disabled, onDrop]);
     return (React.createElement("div", { className: cn(styles.component, className, (_b = {},
-            _b[styles.dragOver] = dragOver || overlayVisible,
+            _b[styles.dragOver] = dragOver,
             _b[styles.error] = error,
             _b[styles.block] = block,
-            _b)), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, "data-test-id": dataTestId },
+            _b[styles.disabled] = disabled,
+            _b)), "data-test-id": dataTestId, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop },
         children,
-        React.createElement("div", { className: styles.overlay },
-            React.createElement(ContainerMIcon, null),
-            React.createElement("span", { className: styles.text }, text))));
+        Overlay$1 && React.createElement(Overlay$1, { text: text, visible: Boolean(dragOver || overlayVisible) })));
 };
 
 export { Dropzone };