@alfalab/core-components 19.11.1 → 20.0.0

package/picker-button/esm/Component-9625a611.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import cn from 'classnames';
+import { Button } from '../../button/esm';
+import { ArrowDownMIcon } from '@alfalab/icons-classic/ArrowDownMIcon';
+import { ArrowDownSIcon } from '@alfalab/icons-classic/ArrowDownSIcon';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+function __rest(s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+var styles = {"iconContainer":"picker-button__iconContainer_1qqb4","open":"picker-button__open_1qqb4"};
+require('./field/index.css');
+
+var Field = function (_a) {
+    var _b = _a.buttonSize, buttonSize = _b === void 0 ? 'm' : _b, view = _a.view, label = _a.label, open = _a.open, multiple = _a.multiple, rightAddons = _a.rightAddons, Arrow = _a.Arrow, innerProps = _a.innerProps, className = _a.className, selected = _a.selected, selectedMultiple = _a.selectedMultiple, valueRenderer = _a.valueRenderer, restProps = __rest(_a, ["buttonSize", "view", "label", "open", "multiple", "rightAddons", "Arrow", "innerProps", "className", "selected", "selectedMultiple", "valueRenderer"]);
+    var Icon = buttonSize === 'xs' ? ArrowDownSIcon : ArrowDownMIcon;
+    var buttonProps = __assign(__assign({}, restProps), innerProps);
+    return (React.createElement(Button, __assign({}, buttonProps, { rightAddons: React.createElement("span", { className: cn(styles.iconContainer, open && styles.open) },
+            React.createElement(Icon, { "data-test-id": 'picker-button-icon' })), block: true, view: view, size: buttonSize, className: cn(styles.component, view === 'primary' && styles.primary, className) }), label));
+};
+
+export { Field as F, __rest as _, __assign as a };

package/picker-button/esm/Component.js

@@ -3,10 +3,10 @@ import cn from 'classnames';
 import '../../button/esm';
 import '@alfalab/icons-classic/ArrowDownMIcon';
 import '@alfalab/icons-classic/ArrowDownSIcon';
-import { _ as __rest, a as __assign, F as Field } from './Component-174802a0.js';
+import { _ as __rest, a as __assign, F as Field } from './Component-9625a611.js';
 import { BaseSelect, OptionsList, Optgroup, Option } from '../../select/esm';
 
-var styles = {"container":"picker-button__container_fett2"};
+var styles = {"container":"picker-button__container_1lnwh"};
 require('./index.css');
 
 var PickerButton = forwardRef(function (_a, ref) {

package/picker-button/esm/field/Component.js

@@ -3,4 +3,4 @@ import 'classnames';
 import '../../../button/esm';
 import '@alfalab/icons-classic/ArrowDownMIcon';
 import '@alfalab/icons-classic/ArrowDownSIcon';
-export { F as Field } from '../Component-174802a0.js';
+export { F as Field } from '../Component-9625a611.js';

package/picker-button/esm/field/index.css

@@ -1,9 +1,4 @@
-/* hash: 19z2g */
-:root {
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
+/* hash: 1qqb4 */
 :root {
 
     /* Hard */
@@ -15,10 +10,10 @@
 :root {
     --arrow-transform: rotate(180deg);
 }
-.picker-button__iconContainer_19z2g {
+.picker-button__iconContainer_1qqb4 {
     display: flex;
     transition: transform 0.15s ease-in-out;
 }
-.picker-button__open_19z2g {
+.picker-button__open_1qqb4 {
     transform: var(--arrow-transform);
 }

package/picker-button/esm/field/index.d.ts

@@ -1 +1 @@
-export * from "../Component-174802a0";
+export * from "../Component-9625a611";

package/picker-button/esm/field/index.js

@@ -3,4 +3,4 @@ import 'classnames';
 import '../../../button/esm';
 import '@alfalab/icons-classic/ArrowDownMIcon';
 import '@alfalab/icons-classic/ArrowDownSIcon';
-export { F as Field } from '../Component-174802a0.js';
+export { F as Field } from '../Component-9625a611.js';

package/picker-button/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: fett2 */
-.picker-button__container_fett2 {
+/* hash: 1lnwh */
+.picker-button__container_1lnwh {
     min-width: auto;
 }

package/picker-button/esm/index.js

@@ -3,6 +3,6 @@ import 'classnames';
 import '../../button/esm';
 import '@alfalab/icons-classic/ArrowDownMIcon';
 import '@alfalab/icons-classic/ArrowDownSIcon';
-import './Component-174802a0.js';
+import './Component-9625a611.js';
 import '../../select/esm';
 export { PickerButton } from './Component.js';

package/picker-button/field/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var field_Component = require('../Component-a07d50b1.js');
+var field_Component = require('../Component-952ada36.js');
 require('react');
 require('classnames');
 require('../../button');

package/picker-button/field/index.css

@@ -1,9 +1,4 @@
-/* hash: 19z2g */
-:root {
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
+/* hash: 1qqb4 */
 :root {
 
     /* Hard */
@@ -15,10 +10,10 @@
 :root {
     --arrow-transform: rotate(180deg);
 }
-.picker-button__iconContainer_19z2g {
+.picker-button__iconContainer_1qqb4 {
     display: flex;
     transition: transform 0.15s ease-in-out;
 }
-.picker-button__open_19z2g {
+.picker-button__open_1qqb4 {
     transform: var(--arrow-transform);
 }

package/picker-button/field/index.d.ts

@@ -1 +1 @@
-export * from "../Component-a07d50b1";
+export * from "../Component-952ada36";

package/picker-button/field/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var field_Component = require('../Component-a07d50b1.js');
+var field_Component = require('../Component-952ada36.js');
 require('react');
 require('classnames');
 require('../../button');

package/picker-button/index.css

@@ -1,4 +1,4 @@
-/* hash: fett2 */
-.picker-button__container_fett2 {
+/* hash: 1lnwh */
+.picker-button__container_1lnwh {
     min-width: auto;
 }

package/picker-button/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./Component-a07d50b1.js');
+require('./Component-952ada36.js');
 require('react');
 require('classnames');
 require('../select');

package/picker-button/modern/Component.js

@@ -6,7 +6,7 @@ import { OptionsList, Optgroup, Option, BaseSelect } from '../../select/modern';
 import '../../button/modern';
 import { Field } from './field/Component.js';
 
-var styles = {"container":"picker-button__container_fett2"};
+var styles = {"container":"picker-button__container_1lnwh"};
 require('./index.css');
 
 const PickerButton = forwardRef(({ OptionsList: OptionsList$1 = OptionsList, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, view, loading, size = 'm', className, leftAddons, ...restProps }, ref) => (React.createElement(BaseSelect, Object.assign({}, restProps, { ref: ref, Option: Option$1, Field: Field, size: size === 'm' ? 'm' : 's', fieldProps: {

package/picker-button/modern/field/Component.d.ts

@@ -17,6 +17,10 @@ type PopoverProps = {
      * Элемент, относительного которого появляется поповер
      */
     anchorElement: RefElement;
+    /**
+     * Использовать ширину родительского элемента
+     */
+    useAnchorWidth?: boolean;
     /**
      * Позиционирование поповера
      */
@@ -119,7 +123,7 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type" |
     /**
      * Отображение ошибки
      */
-    error?: string | boolean;
+    error?: ReactNode | boolean;
     /**
      * Отображение иконки успеха
      */
@@ -309,7 +313,7 @@ type BaseSelectProps = {
     /**
      * Отображение ошибки
      */
-    error?: string | boolean;
+    error?: ReactNode | boolean;
     /**
      * Подсказка под полем
      */
@@ -467,7 +471,7 @@ type FieldProps = {
     /**
      * Отображение ошибки
      */
-    error?: string | boolean;
+    error?: ReactNode | boolean;
     /**
      * Отображение иконки успеха
      */

package/picker-button/modern/field/Component.js

@@ -4,7 +4,7 @@ import { ArrowDownMIcon } from '@alfalab/icons-classic/ArrowDownMIcon';
 import { ArrowDownSIcon } from '@alfalab/icons-classic/ArrowDownSIcon';
 import { Button } from '../../../button/modern';
 
-var styles = {"iconContainer":"picker-button__iconContainer_19z2g","open":"picker-button__open_19z2g"};
+var styles = {"iconContainer":"picker-button__iconContainer_1qqb4","open":"picker-button__open_1qqb4"};
 require('./index.css');
 
 const Field = ({ buttonSize = 'm', view, label, open, multiple, rightAddons, Arrow, innerProps, className, selected, selectedMultiple, valueRenderer, ...restProps }) => {

package/picker-button/modern/field/index.css

@@ -1,9 +1,4 @@
-/* hash: 19z2g */
-:root {
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
+/* hash: 1qqb4 */
 :root {
 
     /* Hard */
@@ -15,10 +10,10 @@
 :root {
     --arrow-transform: rotate(180deg);
 }
-.picker-button__iconContainer_19z2g {
+.picker-button__iconContainer_1qqb4 {
     display: flex;
     transition: transform 0.15s ease-in-out;
 }
-.picker-button__open_19z2g {
+.picker-button__open_1qqb4 {
     transform: var(--arrow-transform);
 }

package/picker-button/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: fett2 */
-.picker-button__container_fett2 {
+/* hash: 1lnwh */
+.picker-button__container_1lnwh {
     min-width: auto;
 }

package/plate/esm/index.css

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

package/plate/index.css

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

package/plate/modern/index.css

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

package/popover/Component.d.ts

@@ -15,6 +15,10 @@ type PopoverProps = {
      * Элемент, относительного которого появляется поповер
      */
     anchorElement: RefElement;
+    /**
+     * Использовать ширину родительского элемента
+     */
+    useAnchorWidth?: boolean;
     /**
      * Позиционирование поповера
      */

package/popover/Component.js

@@ -5,6 +5,7 @@ var cn = require('classnames');
 var reactTransitionGroup = require('react-transition-group');
 var reactPopper = require('react-popper');
 var mergeRefs = require('react-merge-refs');
+var resizeObserver = require('resize-observer');
 var coreComponentsStack = require('../stack');
 var coreComponentsPortal = require('../portal');
 
@@ -54,10 +55,11 @@ var CSS_TRANSITION_CLASS_NAMES = {
     exitActive: styles.exitActive,
 };
 var Popover = React.forwardRef(function (_a, ref) {
-    var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, _c = _a.offset, offset = _c === void 0 ? [0, 0] : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? transition.timeout + "ms" : _g, _h = _a.zIndex, zIndex = _h === void 0 ? coreComponentsStack.stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j;
+    var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, useAnchorWidth = _a.useAnchorWidth, _c = _a.offset, offset = _c === void 0 ? [0, 0] : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? transition.timeout + "ms" : _g, _h = _a.zIndex, zIndex = _h === void 0 ? coreComponentsStack.stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j;
     var _k = React.useState(anchorElement), referenceElement = _k[0], setReferenceElement = _k[1];
     var _l = React.useState(null), popperElement = _l[0], setPopperElement = _l[1];
     var _m = React.useState(null), arrowElement = _m[0], setArrowElement = _m[1];
+    var updatePopperRef = React.useRef();
     var getModifiers = React.useCallback(function () {
         var modifiers = [{ name: 'offset', options: { offset: offset } }];
         if (withArrow) {
@@ -78,6 +80,14 @@ var Popover = React.forwardRef(function (_a, ref) {
         placement: position,
         modifiers: getModifiers(),
     }), popperStyles = _o.styles, attributes = _o.attributes, updatePopper = _o.update;
+    if (updatePopper) {
+        updatePopperRef.current = updatePopper;
+    }
+    var updatePopoverWidth = React.useCallback(function () {
+        if (useAnchorWidth && updatePopperRef.current) {
+            updatePopperRef.current();
+        }
+    }, [useAnchorWidth]);
     React.useEffect(function () {
         setReferenceElement(anchorElement);
     }, [anchorElement]);
@@ -92,10 +102,22 @@ var Popover = React.forwardRef(function (_a, ref) {
             update.current = updatePopper;
         }
     });
+    React.useEffect(function () {
+        if (useAnchorWidth) {
+            var observer_1 = new resizeObserver.ResizeObserver(updatePopoverWidth);
+            if (anchorElement) {
+                observer_1.observe(anchorElement);
+            }
+            return function () {
+                observer_1.disconnect();
+            };
+        }
+        return function () { return ({}); };
+    }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
     var renderContent = function (computedZIndex, style) {
         return (React__default['default'].createElement("div", __assign({ ref: mergeRefs__default['default']([ref, setPopperElement]), 
             // ref={setPopperElement}
-            style: __assign({ zIndex: computedZIndex }, popperStyles.popper), "data-test-id": dataTestId, className: cn__default['default'](styles.component, className) }, attributes.popper),
+            style: __assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), "data-test-id": dataTestId, className: cn__default['default'](styles.component, className) }, attributes.popper),
             React__default['default'].createElement("div", { className: cn__default['default'](styles.inner, popperClassName), style: style },
                 children,
                 withArrow && (React__default['default'].createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default['default'](styles.arrow, arrowClassName) })))));

package/popover/esm/Component.d.ts

@@ -15,6 +15,10 @@ type PopoverProps = {
      * Элемент, относительного которого появляется поповер
      */
     anchorElement: RefElement;
+    /**
+     * Использовать ширину родительского элемента
+     */
+    useAnchorWidth?: boolean;
     /**
      * Позиционирование поповера
      */

package/popover/esm/Component.js

@@ -1,8 +1,9 @@
-import React, { forwardRef, useState, useCallback, useEffect } from 'react';
+import React, { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
 import cn from 'classnames';
 import { CSSTransition } from 'react-transition-group';
 import { usePopper } from 'react-popper';
 import mergeRefs from 'react-merge-refs';
+import { ResizeObserver } from 'resize-observer';
 import { stackingOrder, Stack } from '../../stack/esm';
 import { Portal } from '../../portal/esm';
 
@@ -46,10 +47,11 @@ var CSS_TRANSITION_CLASS_NAMES = {
     exitActive: styles.exitActive,
 };
 var Popover = forwardRef(function (_a, ref) {
-    var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, _c = _a.offset, offset = _c === void 0 ? [0, 0] : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? transition.timeout + "ms" : _g, _h = _a.zIndex, zIndex = _h === void 0 ? stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j;
+    var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, useAnchorWidth = _a.useAnchorWidth, _c = _a.offset, offset = _c === void 0 ? [0, 0] : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? transition.timeout + "ms" : _g, _h = _a.zIndex, zIndex = _h === void 0 ? stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j;
     var _k = useState(anchorElement), referenceElement = _k[0], setReferenceElement = _k[1];
     var _l = useState(null), popperElement = _l[0], setPopperElement = _l[1];
     var _m = useState(null), arrowElement = _m[0], setArrowElement = _m[1];
+    var updatePopperRef = useRef();
     var getModifiers = useCallback(function () {
         var modifiers = [{ name: 'offset', options: { offset: offset } }];
         if (withArrow) {
@@ -70,6 +72,14 @@ var Popover = forwardRef(function (_a, ref) {
         placement: position,
         modifiers: getModifiers(),
     }), popperStyles = _o.styles, attributes = _o.attributes, updatePopper = _o.update;
+    if (updatePopper) {
+        updatePopperRef.current = updatePopper;
+    }
+    var updatePopoverWidth = useCallback(function () {
+        if (useAnchorWidth && updatePopperRef.current) {
+            updatePopperRef.current();
+        }
+    }, [useAnchorWidth]);
     useEffect(function () {
         setReferenceElement(anchorElement);
     }, [anchorElement]);
@@ -84,10 +94,22 @@ var Popover = forwardRef(function (_a, ref) {
             update.current = updatePopper;
         }
     });
+    useEffect(function () {
+        if (useAnchorWidth) {
+            var observer_1 = new ResizeObserver(updatePopoverWidth);
+            if (anchorElement) {
+                observer_1.observe(anchorElement);
+            }
+            return function () {
+                observer_1.disconnect();
+            };
+        }
+        return function () { return ({}); };
+    }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
     var renderContent = function (computedZIndex, style) {
         return (React.createElement("div", __assign({ ref: mergeRefs([ref, setPopperElement]), 
             // ref={setPopperElement}
-            style: __assign({ zIndex: computedZIndex }, popperStyles.popper), "data-test-id": dataTestId, className: cn(styles.component, className) }, attributes.popper),
+            style: __assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), "data-test-id": dataTestId, className: cn(styles.component, className) }, attributes.popper),
             React.createElement("div", { className: cn(styles.inner, popperClassName), style: style },
                 children,
                 withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));