@snack-uikit/fields 0.55.3-preview-490457e4.0 → 0.56.0

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 (11) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/README.md +1 -1
  3. package/dist/cjs/components/FieldSelect/styles.module.css +6 -6
  4. package/dist/cjs/components/FieldTextArea/FieldTextArea.d.ts +1 -1
  5. package/dist/cjs/components/FieldTextArea/FieldTextArea.js +2 -2
  6. package/dist/esm/components/FieldSelect/styles.module.css +6 -6
  7. package/dist/esm/components/FieldTextArea/FieldTextArea.d.ts +1 -1
  8. package/dist/esm/components/FieldTextArea/FieldTextArea.js +2 -2
  9. package/package.json +2 -2
  10. package/src/components/FieldSelect/styles.module.scss +1 -1
  11. package/src/components/FieldTextArea/FieldTextArea.tsx +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # 0.56.0 (2026-05-26)
7
+
8
+
9
+ ### Features
10
+
11
+ * **PDS-3805:** visible copy-button on not-readonly field-text-area ([c11c83a](https://github.com/cloud-ru-tech/snack-uikit/commit/c11c83aa11fdc410db03386edf965995fce7e408))
12
+
13
+
14
+
15
+
16
+
6
17
  ## 0.55.2 (2026-05-18)
7
18
 
8
19
  ### Only dependencies have been changed
package/README.md CHANGED
@@ -895,7 +895,7 @@ FieldStepper в основном предназначен для работы с
895
895
  | maxRows | `number` | 1000 | Максимальное кол-во строк, до которого размер поля может быть увеличен |
896
896
  | resizable | `boolean` | - | Может ли ли пользователь изменять размеры поля (если св-во не включено, поле автоматически меняет свой размер) |
897
897
  | onChange | `(value: string, e?: ChangeEvent<HTMLTextAreaElement>) => void` | - | Колбек смены значения |
898
- | showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
898
+ | showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля |
899
899
  | onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
900
900
  | showClearButton | `boolean` | true | Отображение кнопки очистки поля |
901
901
  | allowMoreThanMaxLength | `boolean` | true | Можно ли вводить больше разрешённого кол-ва символов |
package/dist/cjs/components/FieldSelect/styles.module.css CHANGED
@@ -78,8 +78,8 @@
78
78
  color:var(--sys-neutral-text-light, #8b8e9b);
79
79
  }
80
80
  .container[data-size=s][data-variant=single-line-container] .displayValue{
81
- width:calc(100% - (var(--space-fields-single-line-container-s-right, 7px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-xs, 16px) * 2)));
82
- margin-right:calc(var(--space-fields-single-line-container-s-right, 7px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-xs, 16px) * 2));
81
+ width:calc(100% - (var(--space-fields-single-line-container-s-right, 7px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)));
82
+ margin-right:calc(var(--space-fields-single-line-container-s-right, 7px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2));
83
83
  padding-left:var(--space-fields-single-line-container-s-left, 7px);
84
84
  border-radius:var(--radius-fields-s, 4px);
85
85
  }
@@ -97,8 +97,8 @@
97
97
  color:var(--sys-neutral-text-light, #8b8e9b);
98
98
  }
99
99
  .container[data-size=m][data-variant=single-line-container] .displayValue{
100
- width:calc(100% - (var(--space-fields-single-line-container-m-right, 9px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-s, 24px) * 2)));
101
- margin-right:calc(var(--space-fields-single-line-container-m-right, 9px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-s, 24px) * 2));
100
+ width:calc(100% - (var(--space-fields-single-line-container-m-right, 9px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
101
+ margin-right:calc(var(--space-fields-single-line-container-m-right, 9px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
102
102
  padding-left:var(--space-fields-single-line-container-m-left, 9px);
103
103
  border-radius:var(--radius-fields-m, 4px);
104
104
  }
@@ -116,8 +116,8 @@
116
116
  color:var(--sys-neutral-text-light, #8b8e9b);
117
117
  }
118
118
  .container[data-size=l][data-variant=single-line-container] .displayValue{
119
- width:calc(100% - (var(--space-fields-single-line-container-l-right, 11px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-s, 24px) * 2)));
120
- margin-right:calc(var(--space-fields-single-line-container-l-right, 11px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-s, 24px) * 2));
119
+ width:calc(100% - (var(--space-fields-single-line-container-l-right, 11px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
120
+ margin-right:calc(var(--space-fields-single-line-container-l-right, 11px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
121
121
  padding-left:var(--space-fields-single-line-container-l-left, 11px);
122
122
  border-radius:var(--radius-fields-l, 4px);
123
123
  }
package/dist/cjs/components/FieldTextArea/FieldTextArea.d.ts CHANGED
@@ -13,7 +13,7 @@ type FieldTextAreaOwnProps = {
13
13
  resizable?: boolean;
14
14
  /** Колбек смены значения */
15
15
  onChange?(value: string, e?: ChangeEvent<HTMLTextAreaElement>): void;
16
- /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
16
+ /** Отображение кнопки Копировать для поля */
17
17
  showCopyButton?: boolean;
18
18
  /** Колбек клика по кнопке Копировать для поля */
19
19
  onCopyButtonClick?(): void;
package/dist/cjs/components/FieldTextArea/FieldTextArea.js CHANGED
@@ -41,7 +41,7 @@ exports.FieldTextArea = (0, react_1.forwardRef)((_a, ref) => {
41
41
  disabled = false,
42
42
  resizable = false,
43
43
  readonly = false,
44
- showCopyButton: showCopyButtonProp = true,
44
+ showCopyButton: showCopyButtonProp = readonly,
45
45
  showClearButton: showClearButtonProp = true,
46
46
  allowMoreThanMaxLength = true,
47
47
  showHintIcon,
@@ -75,7 +75,7 @@ exports.FieldTextArea = (0, react_1.forwardRef)((_a, ref) => {
75
75
  defaultValue: '',
76
76
  onChange: onChangeProp
77
77
  });
78
- const showCopyButton = showCopyButtonProp && Boolean(value) && !disabled && readonly;
78
+ const showCopyButton = showCopyButtonProp && Boolean(value) && !disabled;
79
79
  const showClearButton = showClearButtonProp && Boolean(value) && !disabled && !readonly;
80
80
  const fieldValidationState = (0, getValidationState_1.getValidationState)({
81
81
  validationState,
package/dist/esm/components/FieldSelect/styles.module.css CHANGED
@@ -78,8 +78,8 @@
78
78
  color:var(--sys-neutral-text-light, #8b8e9b);
79
79
  }
80
80
  .container[data-size=s][data-variant=single-line-container] .displayValue{
81
- width:calc(100% - (var(--space-fields-single-line-container-s-right, 7px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-xs, 16px) * 2)));
82
- margin-right:calc(var(--space-fields-single-line-container-s-right, 7px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-xs, 16px) * 2));
81
+ width:calc(100% - (var(--space-fields-single-line-container-s-right, 7px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)));
82
+ margin-right:calc(var(--space-fields-single-line-container-s-right, 7px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2));
83
83
  padding-left:var(--space-fields-single-line-container-s-left, 7px);
84
84
  border-radius:var(--radius-fields-s, 4px);
85
85
  }
@@ -97,8 +97,8 @@
97
97
  color:var(--sys-neutral-text-light, #8b8e9b);
98
98
  }
99
99
  .container[data-size=m][data-variant=single-line-container] .displayValue{
100
- width:calc(100% - (var(--space-fields-single-line-container-m-right, 9px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-s, 24px) * 2)));
101
- margin-right:calc(var(--space-fields-single-line-container-m-right, 9px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-s, 24px) * 2));
100
+ width:calc(100% - (var(--space-fields-single-line-container-m-right, 9px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
101
+ margin-right:calc(var(--space-fields-single-line-container-m-right, 9px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
102
102
  padding-left:var(--space-fields-single-line-container-m-left, 9px);
103
103
  border-radius:var(--radius-fields-m, 4px);
104
104
  }
@@ -116,8 +116,8 @@
116
116
  color:var(--sys-neutral-text-light, #8b8e9b);
117
117
  }
118
118
  .container[data-size=l][data-variant=single-line-container] .displayValue{
119
- width:calc(100% - (var(--space-fields-single-line-container-l-right, 11px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-s, 24px) * 2)));
120
- margin-right:calc(var(--space-fields-single-line-container-l-right, 11px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(--space-fields-postfix-gap, 4px) + var(--size-icon-container-s, 24px) * 2));
119
+ width:calc(100% - (var(--space-fields-single-line-container-l-right, 11px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
120
+ margin-right:calc(var(--space-fields-single-line-container-l-right, 11px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
121
121
  padding-left:var(--space-fields-single-line-container-l-left, 11px);
122
122
  border-radius:var(--radius-fields-l, 4px);
123
123
  }
package/dist/esm/components/FieldTextArea/FieldTextArea.d.ts CHANGED
@@ -13,7 +13,7 @@ type FieldTextAreaOwnProps = {
13
13
  resizable?: boolean;
14
14
  /** Колбек смены значения */
15
15
  onChange?(value: string, e?: ChangeEvent<HTMLTextAreaElement>): void;
16
- /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
16
+ /** Отображение кнопки Копировать для поля */
17
17
  showCopyButton?: boolean;
18
18
  /** Колбек клика по кнопке Копировать для поля */
19
19
  onCopyButtonClick?(): void;
package/dist/esm/components/FieldTextArea/FieldTextArea.js CHANGED
@@ -22,7 +22,7 @@ import { getValidationState } from '../../utils/getValidationState';
22
22
  import { FieldDecorator } from '../FieldDecorator';
23
23
  import styles from './styles.module.css';
24
24
  export const FieldTextArea = forwardRef((_a, ref) => {
25
- 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, onKeyDown, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, error, size = SIZE.S, validationState = VALIDATION_STATE.Default, onCopyButtonClick, footer, spellCheck, autoFocus, inputMode } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "minRows", "maxRows", "disabled", "resizable", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "showHintIcon", "onChange", "onFocus", "onBlur", "onKeyDown", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "error", "size", "validationState", "onCopyButtonClick", "footer", "spellCheck", "autoFocus", "inputMode"]);
25
+ var { id, name, value: valueProp, placeholder, maxLength, minRows = 3, maxRows = 1000, disabled = false, resizable = false, readonly = false, showCopyButton: showCopyButtonProp = readonly, showClearButton: showClearButtonProp = true, allowMoreThanMaxLength = true, showHintIcon, onChange: onChangeProp, onFocus, onBlur, onKeyDown, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, error, size = SIZE.S, validationState = VALIDATION_STATE.Default, onCopyButtonClick, footer, spellCheck, autoFocus, inputMode } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "minRows", "maxRows", "disabled", "resizable", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "showHintIcon", "onChange", "onFocus", "onBlur", "onKeyDown", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "error", "size", "validationState", "onCopyButtonClick", "footer", "spellCheck", "autoFocus", "inputMode"]);
26
26
  const localRef = useRef(null);
27
27
  const clearButtonRef = useRef(null);
28
28
  const copyButtonRef = useRef(null);
@@ -32,7 +32,7 @@ export const FieldTextArea = forwardRef((_a, ref) => {
32
32
  defaultValue: '',
33
33
  onChange: onChangeProp,
34
34
  });
35
- const showCopyButton = showCopyButtonProp && Boolean(value) && !disabled && readonly;
35
+ const showCopyButton = showCopyButtonProp && Boolean(value) && !disabled;
36
36
  const showClearButton = showClearButtonProp && Boolean(value) && !disabled && !readonly;
37
37
  const fieldValidationState = getValidationState({ validationState, error });
38
38
  const onClear = () => {
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Fields",
7
- "version": "0.55.3-preview-490457e4.0",
7
+ "version": "0.56.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -66,5 +66,5 @@
66
66
  "peerDependencies": {
67
67
  "@snack-uikit/locale": "*"
68
68
  },
69
- "gitHead": "49c03b263265a9c659cfd499987728c033fbacd0"
69
+ "gitHead": "f2f27755aef6282983bd8db599c6e3abe1f5632d"
70
70
  }
package/src/components/FieldSelect/styles.module.scss CHANGED
@@ -73,7 +73,7 @@ $base-min-width: 4px;
73
73
  &[data-variant='#{$containerVariant}'] {
74
74
  .displayValue {
75
75
  $button-width: styles-tokens-element.simple-var($icons-sizes, $size);
76
- $postfix-width: calc(styles-tokens-element.$space-fields-postfix-gap + $button-width * 2);
76
+ $postfix-width: calc(var(#{styles-tokens-element.$space-fields-postfix-gap}) + $button-width * 2);
77
77
  $margin-right: calc(
78
78
  #{styles-tokens-element.simple-var(styles-tokens-fields.$fields, $containerVariant, $size, 'padding-right')} + #{styles-tokens-element.simple-var(styles-tokens-fields.$fields, $containerVariant, $size, 'gap')} + #{$postfix-width}
79
79
  );
package/src/components/FieldTextArea/FieldTextArea.tsx CHANGED
@@ -53,7 +53,7 @@ type FieldTextAreaOwnProps = {
53
53
  resizable?: boolean;
54
54
  /** Колбек смены значения */
55
55
  onChange?(value: string, e?: ChangeEvent<HTMLTextAreaElement>): void;
56
- /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
56
+ /** Отображение кнопки Копировать для поля */
57
57
  showCopyButton?: boolean;
58
58
  /** Колбек клика по кнопке Копировать для поля */
59
59
  onCopyButtonClick?(): void;
@@ -83,7 +83,7 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
83
83
  disabled = false,
84
84
  resizable = false,
85
85
  readonly = false,
86
- showCopyButton: showCopyButtonProp = true,
86
+ showCopyButton: showCopyButtonProp = readonly,
87
87
  showClearButton: showClearButtonProp = true,
88
88
  allowMoreThanMaxLength = true,
89
89
  showHintIcon,
@@ -120,7 +120,7 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
120
120
  defaultValue: '',
121
121
  onChange: onChangeProp,
122
122
  });
123
- const showCopyButton = showCopyButtonProp && Boolean(value) && !disabled && readonly;
123
+ const showCopyButton = showCopyButtonProp && Boolean(value) && !disabled;
124
124
  const showClearButton = showClearButtonProp && Boolean(value) && !disabled && !readonly;
125
125
 
126
126
  const fieldValidationState = getValidationState({ validationState, error });