npm - @alfalab/core-components - Versions diffs - 47.26.7 → 47.26.8-beta.9323 - Mend

@alfalab/core-components 47.26.7 → 47.26.8-beta.9323

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5380) hide show

package/textarea/modern/index.css CHANGED Viewed

@@ -1,4 +1,4 @@
-/* hash: xfnuv */
+/* hash: a3h88 */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
@@ -31,6 +31,7 @@
 } :root {
     --focus-color: var(--color-light-status-info);
     --disabled-cursor: not-allowed;
+    --size-xs-height: 40px;
     --size-s-height: 48px;
     --size-m-height: 56px;
     --size-l-height: 64px;
@@ -46,6 +47,7 @@
     /* error */
     /* height */
+    --form-control-40-min-height: var(--size-xs-height);
     --form-control-s-min-height: var(--size-s-height);
     --form-control-m-min-height: var(--size-m-height);
     --form-control-l-min-height: var(--size-l-height);
@@ -81,6 +83,7 @@
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
 } :root {
     /* min-height */
+    --textarea-40-min-height: var(--form-control-40-min-height);
     --textarea-s-min-height: var(--form-control-s-min-height);
     --textarea-m-min-height: var(--form-control-m-min-height);
     --textarea-l-min-height: var(--form-control-l-min-height);
@@ -88,24 +91,31 @@
     /* spacer */
     --textarea-spacer-style: solid transparent;
+    --textarea-40-spacer: 11px;
     --textarea-s-spacer: 14px;
     --textarea-m-spacer: 18px;
     --textarea-l-spacer: 22px;
     --textarea-xl-spacer: 24px;
     /* filled spacer-top */
+    --textarea-40-filled-spacer-top: 19px;
     --textarea-s-filled-spacer-top: 24px;
     --textarea-m-filled-spacer-top: 24px;
     --textarea-l-filled-spacer-top: 32px;
     --textarea-xl-filled-spacer-top: 34px;
     /* filled spacer-bottom */
+    --textarea-40-filled-spacer-bottom: 3px;
     --textarea-s-filled-spacer-bottom: 4px;
     --textarea-m-filled-spacer-bottom: 8px;
     --textarea-l-filled-spacer-bottom: 12px;
     --textarea-xl-filled-spacer-bottom: 14px;
     /* filled min-height */
+    --textarea-40-filled-min-height: calc(
+        var(--textarea-40-min-height) - var(--textarea-40-filled-spacer-top) -
+            var(--textarea-40-filled-spacer-bottom)
+    );
     --textarea-s-filled-min-height: calc(
         var(--textarea-s-min-height) - var(--textarea-s-filled-spacer-top) -
             var(--textarea-s-filled-spacer-bottom)
@@ -122,7 +132,7 @@
         var(--textarea-xl-min-height) - var(--textarea-xl-filled-spacer-top) -
             var(--textarea-xl-filled-spacer-bottom)
     );
-} .textarea__textarea_txwaz {
+} .textarea__textarea_1vaee {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -138,52 +148,56 @@
     resize: none;
     -webkit-appearance: none;
     height: inherit
-} .textarea__textarea_txwaz.textarea__overflow_txwaz {
+} .textarea__textarea_1vaee.textarea__overflow_1vaee {
         color: transparent;
         caret-color: var(--input-color);
-    } .textarea__overflowHidden_txwaz.textarea__overflowHidden_txwaz {
+    } .textarea__textarea_1vaee.textarea__size-40_1vaee {
+        font-size: 14px;
+        line-height: 18px;
+        font-weight: 400;
+    } .textarea__overflowHidden_1vaee.textarea__overflowHidden_1vaee {
     overflow: hidden;
-} .textarea__customScrollbar_txwaz {
+} .textarea__customScrollbar_1vaee {
     overflow: auto;
     cursor: auto;
-} .textarea__customScrollbar_txwaz::-webkit-scrollbar {
+} .textarea__customScrollbar_1vaee::-webkit-scrollbar {
         width: 12px;
         height: 12px;
-    } .textarea__customScrollbar_txwaz::-webkit-scrollbar-track {
+    } .textarea__customScrollbar_1vaee::-webkit-scrollbar-track {
         background-color: transparent;
-    } .textarea__customScrollbar_txwaz::-webkit-scrollbar-track-piece {
+    } .textarea__customScrollbar_1vaee::-webkit-scrollbar-track-piece {
         background-color: transparent;
-    } .textarea__customScrollbar_txwaz::-webkit-scrollbar-thumb {
+    } .textarea__customScrollbar_1vaee::-webkit-scrollbar-thumb {
         background-color: var(--color-light-neutral-translucent-500);
         border-color: transparent;
         border-style: solid;
         border-width: 4px;
         background-clip: padding-box;
-    } .textarea__customScrollbar_txwaz::-webkit-scrollbar-thumb:vertical {
+    } .textarea__customScrollbar_1vaee::-webkit-scrollbar-thumb:vertical {
         border-radius: var(--border-radius-circle) / var(--border-radius-6);
         min-height: 40px;
-    } .textarea__customScrollbar_txwaz::-webkit-scrollbar-thumb:vertical:hover {
+    } .textarea__customScrollbar_1vaee::-webkit-scrollbar-thumb:vertical:hover {
         border-radius: var(--border-radius-circle) / 7px;
         border-width: 4px 3px;
-    } .textarea__customScrollbar_txwaz::-webkit-scrollbar-thumb:horizontal {
+    } .textarea__customScrollbar_1vaee::-webkit-scrollbar-thumb:horizontal {
         border-radius: var(--border-radius-6) / var(--border-radius-circle);
         min-width: 40px;
-    } .textarea__customScrollbar_txwaz::-webkit-scrollbar-thumb:horizontal:hover {
+    } .textarea__customScrollbar_1vaee::-webkit-scrollbar-thumb:horizontal:hover {
         border-radius: 7px / var(--border-radius-circle);
         border-width: 3px 4px;
-    } .textarea__customScrollbar_txwaz::-webkit-scrollbar-thumb:active {
+    } .textarea__customScrollbar_1vaee::-webkit-scrollbar-thumb:active {
         background-color: var(--color-light-text-secondary);
-    } .textarea__customScrollbar_txwaz::-webkit-resizer {
+    } .textarea__customScrollbar_1vaee::-webkit-resizer {
         background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
             no-repeat right bottom;
-    } .textarea__customScrollbar_txwaz::-webkit-scrollbar-button,
-    .textarea__customScrollbar_txwaz::-webkit-scrollbar-corner {
+    } .textarea__customScrollbar_1vaee::-webkit-scrollbar-button,
+    .textarea__customScrollbar_1vaee::-webkit-scrollbar-corner {
         display: none;
-    } .textarea__textarea_txwaz::placeholder {
+    } .textarea__textarea_1vaee::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
-} .textarea__hasInnerLabel_txwaz::placeholder {
+} .textarea__hasInnerLabel_1vaee::placeholder {
     opacity: 0;
-} .textarea__pseudoTextarea_txwaz {
+} .textarea__pseudoTextarea_1vaee {
     position: absolute;
     top: var(--gap-0);
     left: var(--gap-0);
@@ -194,13 +208,13 @@
     z-index: -1;
     overflow: auto;
     max-height: 100%
-} .textarea__pseudoTextarea_txwaz span {
+} .textarea__pseudoTextarea_1vaee span {
         color: var(--input-color);
-    } .textarea__pseudoTextarea_txwaz .textarea__overflow_txwaz {
+    } .textarea__pseudoTextarea_1vaee .textarea__overflow_1vaee {
         color: var(--color-light-text-tertiary);
-    } .textarea__pseudoTextarea_txwaz::-webkit-scrollbar-thumb {
+    } .textarea__pseudoTextarea_1vaee::-webkit-scrollbar-thumb {
         background-color: transparent;
-    } .textarea__sub_txwaz {
+    } .textarea__sub_1vaee {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -208,62 +222,76 @@
     /* adjusting overall height 👌 */
     margin-top: 6px;
     padding: var(--form-control-sub-paddings);
-} .textarea__textarea_txwaz.textarea__hasInnerLabel_txwaz.textarea__hasInnerLabel_txwaz {
+} .textarea__textarea_1vaee.textarea__textarea_1vaee.textarea__hasInnerLabel_1vaee.textarea__hasInnerLabel_1vaee {
     padding-top: var(--gap-0);
     padding-bottom: var(--gap-0);
-} /* DISABLED STATE */ .textarea__textarea_txwaz:disabled {
+} /* DISABLED STATE */ .textarea__textarea_1vaee:disabled {
     cursor: var(--disabled-cursor);
     opacity: 1;
-} /* READ-ONLY STATE */ .textarea__textarea_txwaz:read-only {
+} /* READ-ONLY STATE */ .textarea__textarea_1vaee:read-only {
     cursor: var(--disabled-cursor);
-} /* FOCUS STATE */ .textarea__textarea_txwaz:focus.textarea__hasInnerLabel_txwaz::placeholder {
+} /* FOCUS STATE */ .textarea__textarea_1vaee:focus.textarea__hasInnerLabel_1vaee::placeholder {
     opacity: 1;
-} .textarea__focusVisible_txwaz {
+} .textarea__focusVisible_1vaee {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} /* FILLED STATE */ .textarea__textarea_txwaz.textarea__filled_txwaz.textarea__hasInnerLabel_txwaz {
+} /* FILLED STATE */ .textarea__textarea_1vaee.textarea__filled_1vaee.textarea__hasInnerLabel_1vaee {
     padding-top: var(--gap-0)
-} .textarea__textarea_txwaz.textarea__filled_txwaz.textarea__hasInnerLabel_txwaz.textarea__size-48_txwaz {
+} .textarea__textarea_1vaee.textarea__filled_1vaee.textarea__hasInnerLabel_1vaee.textarea__size-40_1vaee {
+        min-height: var(--textarea-40-filled-min-height);
+    } .textarea__textarea_1vaee.textarea__filled_1vaee.textarea__hasInnerLabel_1vaee.textarea__size-48_1vaee {
         min-height: var(--textarea-s-filled-min-height);
-    } .textarea__textarea_txwaz.textarea__filled_txwaz.textarea__hasInnerLabel_txwaz.textarea__size-56_txwaz {
+    } .textarea__textarea_1vaee.textarea__filled_1vaee.textarea__hasInnerLabel_1vaee.textarea__size-56_1vaee {
         min-height: var(--textarea-m-filled-min-height);
-    } .textarea__textarea_txwaz.textarea__filled_txwaz.textarea__hasInnerLabel_txwaz.textarea__size-64_txwaz {
+    } .textarea__textarea_1vaee.textarea__filled_1vaee.textarea__hasInnerLabel_1vaee.textarea__size-64_1vaee {
         min-height: var(--textarea-l-filled-min-height);
-    } .textarea__textarea_txwaz.textarea__filled_txwaz.textarea__hasInnerLabel_txwaz.textarea__size-72_txwaz {
+    } .textarea__textarea_1vaee.textarea__filled_1vaee.textarea__hasInnerLabel_1vaee.textarea__size-72_1vaee {
         min-height: var(--textarea-xl-filled-min-height);
-    } /* Correct pseudoTextarea size */ .textarea__pseudoTextarea_txwaz.textarea__filled_txwaz.textarea__hasInnerLabel_txwaz.textarea__size-48_txwaz {
+    } /* Correct pseudoTextarea size */ .textarea__pseudoTextarea_1vaee.textarea__filled_1vaee.textarea__hasInnerLabel_1vaee.textarea__size-40_1vaee {
+        min-height: calc(100% - var(--textarea-40-filled-spacer-top));
+    } .textarea__pseudoTextarea_1vaee.textarea__filled_1vaee.textarea__hasInnerLabel_1vaee.textarea__size-48_1vaee {
         min-height: calc(100% - var(--textarea-s-filled-spacer-top));
-    } .textarea__pseudoTextarea_txwaz.textarea__filled_txwaz.textarea__hasInnerLabel_txwaz.textarea__size-56_txwaz {
+    } .textarea__pseudoTextarea_1vaee.textarea__filled_1vaee.textarea__hasInnerLabel_1vaee.textarea__size-56_1vaee {
         min-height: calc(100% - var(--textarea-m-filled-spacer-top));
-    } .textarea__pseudoTextarea_txwaz.textarea__filled_txwaz.textarea__hasInnerLabel_txwaz.textarea__size-64_txwaz {
+    } .textarea__pseudoTextarea_1vaee.textarea__filled_1vaee.textarea__hasInnerLabel_1vaee.textarea__size-64_1vaee {
         min-height: calc(100% - var(--textarea-l-filled-spacer-top));
-    } .textarea__pseudoTextarea_txwaz.textarea__filled_txwaz.textarea__hasInnerLabel_txwaz.textarea__size-72_txwaz {
+    } .textarea__pseudoTextarea_1vaee.textarea__filled_1vaee.textarea__hasInnerLabel_1vaee.textarea__size-72_1vaee {
         min-height: calc(100% - var(--textarea-xl-filled-spacer-top));
-    } .textarea__wrapper_txwaz.textarea__resizeVertical_txwaz {
+    } .textarea__wrapper_1vaee.textarea__resizeVertical_1vaee {
         resize: vertical;
-        min-height: 48px;
-    } /* Border нужен для того чтобы растянуть textarea на всю высоту FormControl , если заменить на padding, то лейбл не будет кликабельный */ .textarea__textarea_txwaz.textarea__size-48_txwaz {
+        min-height: 48px
+    } .textarea__wrapper_1vaee.textarea__resizeVertical_1vaee.textarea__size-40_1vaee {
+            min-height: 40px;
+        } /* Border нужен для того чтобы растянуть textarea на всю высоту FormControl , если заменить на padding, то лейбл не будет кликабельный */ .textarea__textarea_1vaee.textarea__textarea_1vaee.textarea__size-40_1vaee {
+        border-top: var(--textarea-40-spacer) var(--textarea-spacer-style);
+        border-bottom: var(--textarea-40-spacer) var(--textarea-spacer-style);
+    } .textarea__textarea_1vaee.textarea__textarea_1vaee.textarea__size-48_1vaee {
         border-top: var(--textarea-s-spacer) var(--textarea-spacer-style);
         border-bottom: var(--textarea-s-spacer) var(--textarea-spacer-style);
-    } .textarea__textarea_txwaz.textarea__size-56_txwaz {
+    } .textarea__textarea_1vaee.textarea__textarea_1vaee.textarea__size-56_1vaee {
         border-top: var(--textarea-m-spacer) var(--textarea-spacer-style);
         border-bottom: var(--textarea-m-spacer) var(--textarea-spacer-style);
-    } .textarea__textarea_txwaz.textarea__size-64_txwaz {
+    } .textarea__textarea_1vaee.textarea__textarea_1vaee.textarea__size-64_1vaee {
         border-top: var(--textarea-l-spacer) var(--textarea-spacer-style);
         border-bottom: var(--textarea-l-spacer) var(--textarea-spacer-style);
-    } .textarea__textarea_txwaz.textarea__size-72_txwaz {
+    } .textarea__textarea_1vaee.textarea__textarea_1vaee.textarea__size-72_1vaee {
         border-top: var(--textarea-xl-spacer) var(--textarea-spacer-style);
         border-bottom: var(--textarea-xl-spacer) var(--textarea-spacer-style);
-    } .textarea__textarea_txwaz.textarea__hasInnerLabel_txwaz.textarea__size-48_txwaz {
+    } .textarea__textarea_1vaee.textarea__textarea_1vaee.textarea__hasInnerLabel_1vaee.textarea__size-40_1vaee {
+            border-top: var(--textarea-40-filled-spacer-top) var(--textarea-spacer-style);
+            border-bottom: var(--textarea-40-filled-spacer-bottom) var(--textarea-spacer-style);
+        } .textarea__textarea_1vaee.textarea__textarea_1vaee.textarea__hasInnerLabel_1vaee.textarea__size-48_1vaee {
             border-top: var(--textarea-s-filled-spacer-top) var(--textarea-spacer-style);
             border-bottom: var(--textarea-s-filled-spacer-bottom) var(--textarea-spacer-style);
-        } .textarea__textarea_txwaz.textarea__hasInnerLabel_txwaz.textarea__size-56_txwaz {
+        } .textarea__textarea_1vaee.textarea__textarea_1vaee.textarea__hasInnerLabel_1vaee.textarea__size-56_1vaee {
             border-top: var(--textarea-m-filled-spacer-top) var(--textarea-spacer-style);
             border-bottom: var(--textarea-m-filled-spacer-bottom) var(--textarea-spacer-style);
-        } .textarea__textarea_txwaz.textarea__hasInnerLabel_txwaz.textarea__size-64_txwaz {
+        } .textarea__textarea_1vaee.textarea__textarea_1vaee.textarea__hasInnerLabel_1vaee.textarea__size-64_1vaee {
             border-top: var(--textarea-l-filled-spacer-top) var(--textarea-spacer-style);
             border-bottom: var(--textarea-l-filled-spacer-bottom) var(--textarea-spacer-style);
-        } .textarea__textarea_txwaz.textarea__hasInnerLabel_txwaz.textarea__size-72_txwaz {
+        } .textarea__textarea_1vaee.textarea__textarea_1vaee.textarea__hasInnerLabel_1vaee.textarea__size-72_1vaee {
             border-top: var(--textarea-xl-filled-spacer-top) var(--textarea-spacer-style);
             border-bottom: var(--textarea-xl-filled-spacer-bottom) var(--textarea-spacer-style);
-        }
+        } /** Нужно чтобы нативная икона resize была прижата к краю */ .textarea__resizable-40_1vaee.textarea__resizable-40_1vaee {
+    padding-right: 0;
+}

package/textarea/modern/index.js CHANGED Viewed

@@ -4,7 +4,8 @@ import 'react-merge-refs';
 import 'react-textarea-autosize';
 import 'classnames';
 import '../../form-control/modern';
+import '../../mq/modern';
 import '../../shared/modern';
 import '@alfalab/hooks';
-import './PseudoTextArea-16fae69f.js';
+import './PseudoTextArea-c6610603.js';
 import './consts.js';

package/textarea/modern/inverted.css CHANGED Viewed

@@ -1,4 +1,4 @@
-/* hash: 1uaik */
+/* hash: idqmt */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
@@ -46,26 +46,26 @@
     /* display */
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-} .textarea__input_1yi1o {
+} .textarea__input_1sd5o {
     color: var(--input-inverted-color);
     caret-color: var(--input-inverted-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__input_1yi1o:-webkit-autofill {
+} .textarea__input_1sd5o:-webkit-autofill {
     -webkit-text-fill-color: var(--input-inverted-color);
-} .textarea__input_1yi1o::placeholder {
+} .textarea__input_1sd5o::placeholder {
     color: var(--input-inverted-placeholder-color);
-} .textarea__hasInnerLabel_1yi1o::placeholder {
+} .textarea__hasInnerLabel_1sd5o::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
-} /* READ-ONLY STATE */ .textarea__input_1yi1o:read-only:not(.textarea__disableUserInput_1yi1o) {
+} /* READ-ONLY STATE */ .textarea__input_1sd5o:read-only:not(.textarea__disableUserInput_1sd5o) {
     color: var(--input-inverted-read-only-color)
-} .textarea__input_1yi1o:read-only:not(.textarea__disableUserInput_1yi1o):focus::placeholder {
+} .textarea__input_1sd5o:read-only:not(.textarea__disableUserInput_1sd5o):focus::placeholder {
         color: var(--input-inverted-placeholder-color);
-    } /* DISABLED STATE */ .textarea__input_1yi1o:disabled {
+    } /* DISABLED STATE */ .textarea__input_1sd5o:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
-} /* FOCUS STATE */ .textarea__input_1yi1o:focus::placeholder {
+} /* FOCUS STATE */ .textarea__input_1sd5o:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
-} /* ERROR STATE */ .textarea__error_1yi1o {
+} /* ERROR STATE */ .textarea__error_1sd5o {
     color: var(--input-inverted-error-color);
     caret-color: var(--input-inverted-error-color);
 } :root {
@@ -97,22 +97,22 @@
     /* color mobile */
     /* error mobile */
-} .textarea__textarea_1yi1o {
+} .textarea__textarea_1sd5o {
     color: var(--input-inverted-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__textarea_1yi1o::placeholder {
+} .textarea__textarea_1sd5o::placeholder {
     color: var(--input-inverted-placeholder-color);
-} .textarea__hasInnerLabel_1yi1o::placeholder {
+} .textarea__hasInnerLabel_1sd5o::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
-} /* DISABLED STATE */ .textarea__textarea_1yi1o:disabled {
+} /* DISABLED STATE */ .textarea__textarea_1sd5o:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
-} /* READ-ONLY STATE */ .textarea__textarea_1yi1o:read-only {
+} /* READ-ONLY STATE */ .textarea__textarea_1sd5o:read-only {
     color: var(--input-inverted-read-only-color);
-} /* FOCUS STATE */ .textarea__textarea_1yi1o:focus::placeholder {
+} /* FOCUS STATE */ .textarea__textarea_1sd5o:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
-} .textarea__hint_1yi1o {
+} .textarea__hint_1sd5o {
     color: var(--form-control-hint-color);
-} .textarea__error_1yi1o {
+} .textarea__error_1sd5o {
     color: var(--form-control-error-color);
 }

package/textarea/modern/typings.d.ts CHANGED Viewed

@@ -20,7 +20,7 @@ type TextareaIncomeProps = {
      * Размер компонента
      * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
+    size?: 's' | 'm' | 'l' | 'xl' | 40 | 48 | 56 | 64 | 72;
     /**
      * Набор цветов для компонента
      */
@@ -125,6 +125,10 @@ type TextareaIncomeProps = {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
     /**
      * Ref для обертки textarea
      */

package/textarea/moderncssm/Component.js CHANGED Viewed

@@ -1,10 +1,11 @@
-import React, { forwardRef, useRef, useState, useMemo, useEffect } from 'react';
+import React, { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import TextareaAutosize from 'react-textarea-autosize';
 import cn from 'classnames';
 import { FormControl } from '../../form-control/moderncssm';
+import { useIsDesktop } from '../../mq/moderncssm';
 import { getDataTestId } from '../../shared/moderncssm';
-import { useMedia, useFocus } from '@alfalab/hooks';
+import { useFocus } from '@alfalab/hooks';
 import { PseudoTextArea } from './components/PseudoTextArea.js';
 import { SIZE_TO_CLASSNAME_MAP } from './consts.js';
 import defaultColors from './default.module.css';
@@ -16,22 +17,17 @@ const colorStyles = {
     inverted: invertedColors,
 };
 const getDefaultCounterText = (textLength, maxLength = 0) => `${textLength}/${maxLength} символов`;
-const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 48, colors = 'default', block = false, bottomAddons, fieldClassName, className, dataTestId, disabled, error, hint, textareaClassName, label, labelView = 'inner', leftAddons, onFocus, onBlur, onChange, onHeightChange, rightAddons, maxRows, minRows, maxHeight, resize = 'none', value, defaultValue, rows = autosize ? 1 : 3, showCounter = false, getCounterText = getDefaultCounterText, maxLength, allowOverflow = true, nativeScrollbar: nativeScrollbarProp, wrapperRef, breakpoint, ...restProps }, ref) => {
+const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 48, colors = 'default', block = false, bottomAddons, fieldClassName, className, dataTestId, disabled, error, hint, textareaClassName, label, labelView = 'inner', leftAddons, onFocus, onBlur, onChange, onHeightChange, rightAddons, maxRows, minRows, maxHeight, resize = 'none', value, defaultValue, rows = autosize ? 1 : 3, showCounter = false, getCounterText = getDefaultCounterText, maxLength, allowOverflow = true, nativeScrollbar: nativeScrollbarProp, wrapperRef, breakpoint, client, ...restProps }, ref) => {
     const uncontrolled = value === undefined;
-    let [nativeScrollbar] = useMedia([[true, '(max-width: 1023px)']], false);
+    const isDesktop = useIsDesktop(breakpoint, client === 'desktop');
+    let nativeScrollbar = !isDesktop;
     nativeScrollbar = Boolean(nativeScrollbarProp ?? nativeScrollbar);
-    const textareaRef = useRef(null);
+    const [textareaNode, setTextareaNode] = useState(null);
     const pseudoTextareaRef = useRef(null);
     const [focused, setFocused] = useState(false);
     const [stateValue, setStateValue] = useState(defaultValue || '');
     const [scrollPosition, setScrollPosition] = useState(0);
-    const [focusVisible] = useFocus(
-    /*
-     * При первом рендере textareaRef.current === null, то нужно пересоздать реф для корректной работы хука
-     * TODO: исправить хук useFocus, чтобы он поддерживал изменение ноды
-     */
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useMemo(() => ({ current: textareaRef.current }), [textareaRef.current]), 'keyboard');
+    const [focusVisible] = useFocus(useMemo(() => ({ current: textareaNode }), [textareaNode]), 'keyboard');
     const filled = Boolean(uncontrolled ? stateValue : value);
     const hasInnerLabel = label && labelView === 'inner';
     const hasOverflow = Boolean(maxLength && allowOverflow && (value?.slice(maxLength) || stateValue.slice(maxLength)));
@@ -43,10 +39,10 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 48,
     }, [scrollPosition, stateValue, hasOverflow]);
     // Хак, так как react-textarea-autosize перестал поддерживать maxHeight
     useEffect(() => {
-        if (autosize && maxHeight && textareaRef.current && textareaRef.current.style) {
-            textareaRef.current.style.maxHeight = `${maxHeight}px`;
+        if (autosize && maxHeight && textareaNode && textareaNode.style) {
+            textareaNode.style.maxHeight = `${maxHeight}px`;
         }
-    }, [autosize, maxHeight]);
+    }, [autosize, maxHeight, textareaNode]);
     const handleTextareaFocus = (event) => {
         setFocused(true);
         if (onFocus) {
@@ -99,7 +95,7 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 48,
         onChange: handleTextareaChange,
         value: uncontrolled ? stateValue : value,
         rows,
-        ref: mergeRefs([ref, textareaRef]),
+        ref: mergeRefs([ref, setTextareaNode]),
         'data-test-id': dataTestId,
         onScroll: handleTeaxtareaScroll,
     };
@@ -114,6 +110,7 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 48,
     };
     return (React.createElement(FormControl, { ref: wrapperRef, className: cn(className), fieldClassName: cn(fieldClassName, {
             [styles.focusVisible]: focusVisible,
+            [styles['resizable-40']]: resize === 'vertical' && size === 40,
         }), inputWrapperClassName: cn(styles.wrapper, styles[SIZE_TO_CLASSNAME_MAP[size]], {
             [styles.hasInnerLabel]: hasInnerLabel,
             [styles.resizeVertical]: resize === 'vertical',

package/textarea/moderncssm/consts.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ declare const SIZE_TO_CLASSNAME_MAP: {
     m: string;
     l: string;
     xl: string;
+    40: string;
     48: string;
     56: string;
     64: string;

package/textarea/moderncssm/consts.js CHANGED Viewed

@@ -3,6 +3,7 @@ const SIZE_TO_CLASSNAME_MAP = {
     m: 'size-56',
     l: 'size-64',
     xl: 'size-72',
+    40: 'size-40',
     48: 'size-48',
     56: 'size-56',
     64: 'size-64',

package/textarea/moderncssm/index.js CHANGED Viewed

@@ -4,6 +4,7 @@ import 'react-merge-refs';
 import 'react-textarea-autosize';
 import 'classnames';
 import '../../form-control/moderncssm';
+import '../../mq/moderncssm';
 import '../../shared/moderncssm';
 import '@alfalab/hooks';
 import './components/PseudoTextArea.js';

package/textarea/moderncssm/index.module.css CHANGED Viewed

@@ -10,6 +10,7 @@
     /* error */
     /* height */
+    --form-control-40-min-height: var(--size-xs-height);
     --form-control-s-min-height: var(--size-s-height);
     --form-control-m-min-height: var(--size-m-height);
     --form-control-l-min-height: var(--size-l-height);
@@ -47,6 +48,7 @@
 }
 :root {
     /* min-height */
+    --textarea-40-min-height: var(--form-control-40-min-height);
     --textarea-s-min-height: var(--form-control-s-min-height);
     --textarea-m-min-height: var(--form-control-m-min-height);
     --textarea-l-min-height: var(--form-control-l-min-height);
@@ -54,24 +56,31 @@
     /* spacer */
     --textarea-spacer-style: solid transparent;
+    --textarea-40-spacer: 11px;
     --textarea-s-spacer: 14px;
     --textarea-m-spacer: 18px;
     --textarea-l-spacer: 22px;
     --textarea-xl-spacer: 24px;
     /* filled spacer-top */
+    --textarea-40-filled-spacer-top: 19px;
     --textarea-s-filled-spacer-top: 24px;
     --textarea-m-filled-spacer-top: 24px;
     --textarea-l-filled-spacer-top: 32px;
     --textarea-xl-filled-spacer-top: 34px;
     /* filled spacer-bottom */
+    --textarea-40-filled-spacer-bottom: 3px;
     --textarea-s-filled-spacer-bottom: 4px;
     --textarea-m-filled-spacer-bottom: 8px;
     --textarea-l-filled-spacer-bottom: 12px;
     --textarea-xl-filled-spacer-bottom: 14px;
     /* filled min-height */
+    --textarea-40-filled-min-height: calc(
+        var(--textarea-40-min-height) - var(--textarea-40-filled-spacer-top) -
+            var(--textarea-40-filled-spacer-bottom)
+    );
     --textarea-s-filled-min-height: calc(
         var(--textarea-s-min-height) - var(--textarea-s-filled-spacer-top) -
             var(--textarea-s-filled-spacer-bottom)
@@ -110,6 +119,11 @@
         color: transparent;
         caret-color: var(--input-color);
     }
+.textarea.size-40 {
+        font-size: 14px;
+        line-height: 18px;
+        font-weight: 400;
+    }
 .overflowHidden.overflowHidden {
     overflow: hidden;
 }
@@ -197,7 +211,7 @@
     margin-top: 6px;
     padding: var(--form-control-sub-paddings);
 }
-.textarea.hasInnerLabel.hasInnerLabel {
+.textarea.textarea.hasInnerLabel.hasInnerLabel {
     padding-top: var(--gap-0);
     padding-bottom: var(--gap-0);
 }
@@ -222,6 +236,9 @@
 .textarea.filled.hasInnerLabel {
     padding-top: var(--gap-0)
 }
+.textarea.filled.hasInnerLabel.size-40 {
+        min-height: var(--textarea-40-filled-min-height);
+    }
 .textarea.filled.hasInnerLabel.size-48 {
         min-height: var(--textarea-s-filled-min-height);
     }
@@ -235,6 +252,9 @@
         min-height: var(--textarea-xl-filled-min-height);
     }
 /* Correct pseudoTextarea size */
+.pseudoTextarea.filled.hasInnerLabel.size-40 {
+        min-height: calc(100% - var(--textarea-40-filled-spacer-top));
+    }
 .pseudoTextarea.filled.hasInnerLabel.size-48 {
         min-height: calc(100% - var(--textarea-s-filled-spacer-top));
     }
@@ -249,38 +269,53 @@
     }
 .wrapper.resizeVertical {
         resize: vertical;
-        min-height: 48px;
+        min-height: 48px
     }
+.wrapper.resizeVertical.size-40 {
+            min-height: 40px;
+        }
 /* Border нужен для того чтобы растянуть textarea на всю высоту FormControl , если заменить на padding, то лейбл не будет кликабельный */
-.textarea.size-48 {
+.textarea.textarea.size-40 {
+        border-top: var(--textarea-40-spacer) var(--textarea-spacer-style);
+        border-bottom: var(--textarea-40-spacer) var(--textarea-spacer-style);
+    }
+.textarea.textarea.size-48 {
         border-top: var(--textarea-s-spacer) var(--textarea-spacer-style);
         border-bottom: var(--textarea-s-spacer) var(--textarea-spacer-style);
     }
-.textarea.size-56 {
+.textarea.textarea.size-56 {
         border-top: var(--textarea-m-spacer) var(--textarea-spacer-style);
         border-bottom: var(--textarea-m-spacer) var(--textarea-spacer-style);
     }
-.textarea.size-64 {
+.textarea.textarea.size-64 {
         border-top: var(--textarea-l-spacer) var(--textarea-spacer-style);
         border-bottom: var(--textarea-l-spacer) var(--textarea-spacer-style);
     }
-.textarea.size-72 {
+.textarea.textarea.size-72 {
         border-top: var(--textarea-xl-spacer) var(--textarea-spacer-style);
         border-bottom: var(--textarea-xl-spacer) var(--textarea-spacer-style);
     }
-.textarea.hasInnerLabel.size-48 {
+.textarea.textarea.hasInnerLabel.size-40 {
+            border-top: var(--textarea-40-filled-spacer-top) var(--textarea-spacer-style);
+            border-bottom: var(--textarea-40-filled-spacer-bottom) var(--textarea-spacer-style);
+        }
+.textarea.textarea.hasInnerLabel.size-48 {
             border-top: var(--textarea-s-filled-spacer-top) var(--textarea-spacer-style);
             border-bottom: var(--textarea-s-filled-spacer-bottom) var(--textarea-spacer-style);
         }
-.textarea.hasInnerLabel.size-56 {
+.textarea.textarea.hasInnerLabel.size-56 {
             border-top: var(--textarea-m-filled-spacer-top) var(--textarea-spacer-style);
             border-bottom: var(--textarea-m-filled-spacer-bottom) var(--textarea-spacer-style);
         }
-.textarea.hasInnerLabel.size-64 {
+.textarea.textarea.hasInnerLabel.size-64 {
             border-top: var(--textarea-l-filled-spacer-top) var(--textarea-spacer-style);
             border-bottom: var(--textarea-l-filled-spacer-bottom) var(--textarea-spacer-style);
         }
-.textarea.hasInnerLabel.size-72 {
+.textarea.textarea.hasInnerLabel.size-72 {
             border-top: var(--textarea-xl-filled-spacer-top) var(--textarea-spacer-style);
             border-bottom: var(--textarea-xl-filled-spacer-bottom) var(--textarea-spacer-style);
         }
+/** Нужно чтобы нативная икона resize была прижата к краю */
+.resizable-40.resizable-40 {
+    padding-right: 0;
+}

package/textarea/moderncssm/typings.d.ts CHANGED Viewed

@@ -20,7 +20,7 @@ type TextareaIncomeProps = {
      * Размер компонента
      * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
+    size?: 's' | 'm' | 'l' | 'xl' | 40 | 48 | 56 | 64 | 72;
     /**
      * Набор цветов для компонента
      */
@@ -125,6 +125,10 @@ type TextareaIncomeProps = {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
     /**
      * Ref для обертки textarea
      */