@snack-uikit/fields 0.43.0 → 0.43.1-preview-ff425617.0

package/README.md

@@ -509,6 +509,7 @@ FieldStepper в основном предназначен для работы с
 | onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
 | showClearButton | `boolean` | true | Отображение кнопки очистки поля |
 | allowMoreThanMaxLength | `boolean` | true | Можно ли вводить больше разрешённого кол-ва символов |
+| footer | `ReactNode` | - | Нода под футер |
 | value | `string` | - | HTML-аттрибут value |
 | id | `string` | - | HTML-аттрибут id |
 | name | `string` | - | HTML-аттрибут name |

package/dist/cjs/components/FieldTextArea/FieldTextArea.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, ReactNode } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { TextAreaProps } from '../../helperComponents';
 import { FieldDecoratorProps } from '../FieldDecorator';
@@ -24,6 +24,8 @@ type FieldTextAreaOwnProps = {
     showClearButton?: boolean;
     /** Можно ли вводить больше разрешённого кол-ва символов */
     allowMoreThanMaxLength?: boolean;
+    /** Нода под футер */
+    footer?: ReactNode;
 };
 export type FieldTextAreaProps = WithSupportProps<FieldTextAreaOwnProps & InputProps & WrapperProps>;
 export declare const FieldTextArea: import("react").ForwardRefExoticComponent<{

package/dist/cjs/components/FieldTextArea/FieldTextArea.js

@@ -58,9 +58,10 @@ exports.FieldTextArea = (0, react_1.forwardRef)((_a, ref) => {
       error,
       size = input_private_1.SIZE.S,
       validationState = constants_1.VALIDATION_STATE.Default,
-      onCopyButtonClick
+      onCopyButtonClick,
+      footer
     } = _a,
-    rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "minRows", "maxRows", "disabled", "resizable", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "error", "size", "validationState", "onCopyButtonClick"]);
+    rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "minRows", "maxRows", "disabled", "resizable", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "error", "size", "validationState", "onCopyButtonClick", "footer"]);
   const localRef = (0, react_1.useRef)(null);
   const clearButtonRef = (0, react_1.useRef)(null);
   const copyButtonRef = (0, react_1.useRef)(null);
@@ -126,13 +127,14 @@ exports.FieldTextArea = (0, react_1.forwardRef)((_a, ref) => {
     error: error,
     validationState: fieldValidationState
   }, (0, utils_1.extractSupportProps)(rest), {
-    children: (0, jsx_runtime_1.jsx)(helperComponents_1.FieldContainerPrivate, {
+    children: (0, jsx_runtime_1.jsxs)(helperComponents_1.FieldContainerPrivate, {
       className: styles_module_scss_1.default.container,
       size: size,
       validationState: fieldValidationState,
       disabled: disabled,
       readonly: readonly,
       "data-resizable": isResizable || undefined,
+      "data-actions": Boolean(footer) || undefined,
       variant: constants_1.CONTAINER_VARIANT.MultiLine,
       style: {
         '--max-rows': maxRows,
@@ -143,7 +145,7 @@ exports.FieldTextArea = (0, react_1.forwardRef)((_a, ref) => {
         className: styles_module_scss_1.default.postfix,
         children: postfixButtons
       }),
-      children: (0, jsx_runtime_1.jsx)(scroll_1.Scroll, {
+      children: [(0, jsx_runtime_1.jsx)(scroll_1.Scroll, {
         className: styles_module_scss_1.default.scrollContainer,
         size: 's',
         barHideStrategy: 'never',
@@ -168,7 +170,7 @@ exports.FieldTextArea = (0, react_1.forwardRef)((_a, ref) => {
           maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined,
           "data-test-id": 'field-textarea__input'
         })
-      })
+      }), footer]
     })
   }));
 });

package/dist/cjs/components/FieldTextArea/styles.module.css

@@ -2,6 +2,10 @@
   --max-rows:1000;
   --min-rows:3;
 }
+.container[data-actions]{
+  display:flex;
+  flex-direction:column;
+}
 .container .scrollContainer{
   min-height:calc(var(--min-rows) * var(--row-height) + var(--horizontal-scroll-bar-height));
   max-height:calc(var(--max-rows) * var(--row-height) + var(--horizontal-scroll-bar-height));

package/dist/esm/components/FieldTextArea/FieldTextArea.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, ReactNode } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { TextAreaProps } from '../../helperComponents';
 import { FieldDecoratorProps } from '../FieldDecorator';
@@ -24,6 +24,8 @@ type FieldTextAreaOwnProps = {
     showClearButton?: boolean;
     /** Можно ли вводить больше разрешённого кол-ва символов */
     allowMoreThanMaxLength?: boolean;
+    /** Нода под футер */
+    footer?: ReactNode;
 };
 export type FieldTextAreaProps = WithSupportProps<FieldTextAreaOwnProps & InputProps & WrapperProps>;
 export declare const FieldTextArea: import("react").ForwardRefExoticComponent<{

package/dist/esm/components/FieldTextArea/FieldTextArea.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import mergeRefs from 'merge-refs';
 import { forwardRef, useMemo, useRef } from 'react';
 import { SIZE, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
@@ -22,7 +22,7 @@ import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import styles from './styles.module.css';
 export const FieldTextArea = forwardRef((_a, ref) => {
-    var { id, name, value: valueProp, placeholder, maxLength, minRows = 3, maxRows = 1000, disabled = false, resizable = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, allowMoreThanMaxLength = true, showHintIcon, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, error, size = SIZE.S, validationState = VALIDATION_STATE.Default, onCopyButtonClick } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "minRows", "maxRows", "disabled", "resizable", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "error", "size", "validationState", "onCopyButtonClick"]);
+    var { id, name, value: valueProp, placeholder, maxLength, minRows = 3, maxRows = 1000, disabled = false, resizable = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, allowMoreThanMaxLength = true, showHintIcon, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, error, size = SIZE.S, validationState = VALIDATION_STATE.Default, onCopyButtonClick, footer } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "minRows", "maxRows", "disabled", "resizable", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "error", "size", "validationState", "onCopyButtonClick", "footer"]);
     const localRef = useRef(null);
     const clearButtonRef = useRef(null);
     const copyButtonRef = useRef(null);
@@ -56,5 +56,5 @@ export const FieldTextArea = forwardRef((_a, ref) => {
         readonly,
         submitKeys: ['Enter', 'Space', 'Tab'],
     });
-    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, "data-resizable": isResizable || undefined, variant: CONTAINER_VARIANT.MultiLine, style: { '--max-rows': maxRows, '--min-rows': minRows }, inputRef: localRef, postfix: _jsx("span", { className: styles.postfix, children: postfixButtons }), children: _jsx(Scroll, { className: styles.scrollContainer, size: 's', barHideStrategy: 'never', resize: isResizable ? 'vertical' : 'none', "data-test-id": 'field-textarea__scroll-area', children: _jsx(TextArea, { className: styles.textarea, "data-size": size, value: value, onChange: onChange, placeholder: placeholder, disabled: disabled, readonly: readonly, minRows: minRows, id: id, name: name, ref: mergeRefs(ref, localRef), onFocus: onFocus, onBlur: onBlur, onKeyDown: onInputKeyDown, tabIndex: inputTabIndex, maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, "data-test-id": 'field-textarea__input' }) }) }) })));
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState }, extractSupportProps(rest), { children: _jsxs(FieldContainerPrivate, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, "data-resizable": isResizable || undefined, "data-actions": Boolean(footer) || undefined, variant: CONTAINER_VARIANT.MultiLine, style: { '--max-rows': maxRows, '--min-rows': minRows }, inputRef: localRef, postfix: _jsx("span", { className: styles.postfix, children: postfixButtons }), children: [_jsx(Scroll, { className: styles.scrollContainer, size: 's', barHideStrategy: 'never', resize: isResizable ? 'vertical' : 'none', "data-test-id": 'field-textarea__scroll-area', children: _jsx(TextArea, { className: styles.textarea, "data-size": size, value: value, onChange: onChange, placeholder: placeholder, disabled: disabled, readonly: readonly, minRows: minRows, id: id, name: name, ref: mergeRefs(ref, localRef), onFocus: onFocus, onBlur: onBlur, onKeyDown: onInputKeyDown, tabIndex: inputTabIndex, maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, "data-test-id": 'field-textarea__input' }) }), footer] }) })));
 });

package/dist/esm/components/FieldTextArea/styles.module.css

@@ -2,6 +2,10 @@
   --max-rows:1000;
   --min-rows:3;
 }
+.container[data-actions]{
+  display:flex;
+  flex-direction:column;
+}
 .container .scrollContainer{
   min-height:calc(var(--min-rows) * var(--row-height) + var(--horizontal-scroll-bar-height));
   max-height:calc(var(--max-rows) * var(--row-height) + var(--horizontal-scroll-bar-height));

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.43.0",
+  "version": "0.43.1-preview-ff425617.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -65,5 +65,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "0c8846201ac8f73ec80be3e47418fe073619541a"
+  "gitHead": "626b2eb4a6cd83c5576c7c21de21ec1b5ab8bcca"
 }

package/src/components/FieldTextArea/FieldTextArea.tsx

@@ -1,5 +1,5 @@
 import mergeRefs from 'merge-refs';
-import { ChangeEvent, forwardRef, useMemo, useRef } from 'react';
+import { ChangeEvent, forwardRef, ReactNode, useMemo, useRef } from 'react';
 
 import { SIZE, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
 import { Scroll } from '@snack-uikit/scroll';
@@ -50,6 +50,8 @@ type FieldTextAreaOwnProps = {
   showClearButton?: boolean;
   /** Можно ли вводить больше разрешённого кол-ва символов */
   allowMoreThanMaxLength?: boolean;
+  /** Нода под футер */
+  footer?: ReactNode;
 };
 
 export type FieldTextAreaProps = WithSupportProps<FieldTextAreaOwnProps & InputProps & WrapperProps>;
@@ -85,6 +87,7 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
       size = SIZE.S,
       validationState = VALIDATION_STATE.Default,
       onCopyButtonClick,
+      footer,
       ...rest
     },
     ref,
@@ -156,6 +159,7 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
           disabled={disabled}
           readonly={readonly}
           data-resizable={isResizable || undefined}
+          data-actions={Boolean(footer) || undefined}
           variant={CONTAINER_VARIANT.MultiLine}
           style={{ '--max-rows': maxRows, '--min-rows': minRows }}
           inputRef={localRef}
@@ -188,6 +192,7 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
               data-test-id='field-textarea__input'
             />
           </Scroll>
+          {footer}
         </FieldContainerPrivate>
       </FieldDecorator>
     );

package/src/components/FieldTextArea/styles.module.scss

@@ -8,7 +8,7 @@ $padding-right: (
 );
 $scroll-bar-heights: (
   's': styles-tokens-fields.$dimension-050m,
-  'm': calc(styles-tokens-fields.$dimension-025m + styles-tokens-fields.$dimension-050m),
+  'm': calc(#{styles-tokens-fields.$dimension-025m} + #{styles-tokens-fields.$dimension-050m}),
   'l': styles-tokens-fields.$dimension-1m,
 );
 $padding-right: (
@@ -18,7 +18,7 @@ $padding-right: (
 );
 $scroll-bar-heights: (
   's': styles-tokens-fields.$dimension-050m,
-  'm': calc(styles-tokens-fields.$dimension-025m + styles-tokens-fields.$dimension-050m),
+  'm': calc(#{styles-tokens-fields.$dimension-025m} + #{styles-tokens-fields.$dimension-050m}),
   'l': styles-tokens-fields.$dimension-1m,
 );
 
@@ -26,6 +26,11 @@ $scroll-bar-heights: (
   --max-rows: 1000;
   --min-rows: 3;
 
+  &[data-actions] {
+    display: flex;
+    flex-direction: column;
+  }
+
   .scrollContainer {
     min-height: calc(var(--min-rows) * var(--row-height) + var(--horizontal-scroll-bar-height));
     max-height: calc(var(--max-rows) * var(--row-height) + var(--horizontal-scroll-bar-height));
@@ -53,4 +58,3 @@ $scroll-bar-heights: (
     }
   }
 }
-