@snack-uikit/fields 0.23.5-preview-8898cdde.0 → 0.23.5

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.23.5 (2024-08-05)
+
+
+### Bug Fixes
+
+* **FF-3788:** updated typescript to v5 ([89e3338](https://github.com/cloud-ru-tech/snack-uikit/commit/89e3338a3ef4df24e4c20d9a9c8cd16e7934ba63))
+* **PDS-617:** slider range should not change the label on input events ([d7ab88a](https://github.com/cloud-ru-tech/snack-uikit/commit/d7ab88a69e3cc47568766899e91c438493ed8c7e))
+
+
+
+
+
 ## 0.23.4 (2024-07-29)
 
 ### Only dependencies have been changed

package/dist/components/FieldDecorator/styles.module.css

@@ -160,13 +160,13 @@
   color:var(--sys-neutral-text-light, #8b8e9b);
 }
 .hint[data-validation=error]{
-  color:var(--sys-red-text-main, #7a2d2d);
+  color:var(--sys-red-text-main, #621c1b);
 }
 .hint[data-validation=warning]{
-  color:var(--sys-yellow-text-main, #815f19);
+  color:var(--sys-yellow-text-main, #5e3d06);
 }
 .hint[data-validation=success]{
-  color:var(--sys-green-text-main, #3d6035);
+  color:var(--sys-green-text-main, #323f27);
 }
 
 .icon{
@@ -183,10 +183,10 @@
   color:var(--sys-neutral-accent-default, #787b8a);
 }
 .hintIcon[data-validation=error]{
-  color:var(--sys-red-accent-default, #cb3f3e);
+  color:var(--sys-red-accent-default, #cd3c3c);
 }
 .hintIcon[data-validation=warning]{
-  color:var(--sys-yellow-accent-default, #e2b134);
+  color:var(--sys-yellow-accent-default, #ffc443);
 }
 .hintIcon[data-validation=success]{
   color:var(--sys-green-accent-default, #57b762);
@@ -196,26 +196,26 @@
   color:var(--sys-neutral-text-light, #8b8e9b);
 }
 .counterLimit > span[data-limit-exceeded], .counterLimit > span[data-validation=error]{
-  color:var(--sys-red-text-light, #e7756a);
+  color:var(--sys-red-text-light, #ea6658);
 }
 .counterLimit > span[data-validation=warning]{
-  color:var(--sys-yellow-text-light, #d3a736);
+  color:var(--sys-yellow-text-light, #ddb035);
 }
 .counterLimit > span[data-validation=success]{
-  color:var(--sys-green-text-light, #69b56f);
+  color:var(--sys-green-text-light, #67ba6e);
 }
 
 .counterCurrentValue[data-limit-exceeded][data-validation=default]{
-  color:var(--sys-neutral-text-main, #41424e);
+  color:var(--sys-neutral-text-main, #33343f);
 }
 .counterCurrentValue[data-limit-exceeded][data-validation=error]{
-  color:var(--sys-red-text-main, #7a2d2d);
+  color:var(--sys-red-text-main, #621c1b);
 }
 .counterCurrentValue[data-limit-exceeded][data-validation=warning]{
-  color:var(--sys-yellow-text-main, #815f19);
+  color:var(--sys-yellow-text-main, #5e3d06);
 }
 .counterCurrentValue[data-limit-exceeded][data-validation=success]{
-  color:var(--sys-green-text-light, #69b56f);
+  color:var(--sys-green-text-light, #67ba6e);
 }
 
 .labelTooltipTrigger{

package/dist/components/FieldSlider/FieldSlider.js

@@ -14,7 +14,7 @@ import mergeRefs from 'merge-refs';
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { InputPrivate, SIZE } from '@snack-uikit/input-private';
 import { Slider } from '@snack-uikit/slider';
-import { extractSupportProps } from '@snack-uikit/utils';
+import { extractSupportProps, useEventHandler } from '@snack-uikit/utils';
 import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
@@ -113,7 +113,10 @@ export const FieldSlider = forwardRef((_a, ref) => {
         const { mark } = getClosestMark(textFieldNumValue, allowedValues, mark => mark);
         handleChange(mark);
     };
-    const handleTextValueChange = () => {
+    const handleTextValueChange = useEventHandler(() => {
+        if (range) {
+            return;
+        }
         const parsedValue = parseInt(textFieldInputValue);
         const actualMinByMark = parseInt(String(getMarkValue(min)));
         const actualMin = Number.isNaN(actualMinByMark) ? min : actualMinByMark;
@@ -127,7 +130,7 @@ export const FieldSlider = forwardRef((_a, ref) => {
         else {
             handleNonEqualMarksSliderChange(textFieldNumValue);
         }
-    };
+    });
     const onTextFieldBlur = (e) => {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
         handleTextValueChange();
@@ -142,8 +145,6 @@ export const FieldSlider = forwardRef((_a, ref) => {
     }, [value, textInputFormatter]);
     useEffect(() => {
         handleTextValueChange();
-        // update value only when marks, min or max are changed
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [marks, min, max]);
+    }, [marks, min, max, handleTextValueChange]);
     return (_jsxs(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, disabled: disabled, required: required, caption: caption, hint: hint, showHintIcon: showHintIcon, readonly: readonly, size: size }, extractSupportProps(rest), { children: [_jsx(FieldContainerPrivate, { className: styles.fieldContainer, size: size, validationState: VALIDATION_STATE.Default, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: localRef, postfix: postfixIcon, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: textFieldInputValue, onChange: range ? undefined : onTextFieldChange, onFocus: onFocus, onBlur: range ? onBlur : onTextFieldBlur, onKeyDown: handleTextFieldKeyChange, disabled: disabled, readonly: range ? true : readonly, type: 'text', id: id, name: name, "data-test-id": 'field-slider__input' }) }), _jsx("div", { className: styles.sliderWrapper, children: _jsx("div", { className: styles.slider, "data-size": size, children: _jsx(Slider, { range: range, min: min, max: max, step: step, value: value, onChange: onChange, marks: showScaleBar ? marks : undefined, disabled: readonly || disabled, "data-test-id": 'field-slider__slider' }) }) })] })));
 });

package/dist/helperComponents/ButtonCopyValue/styles.module.css

@@ -39,7 +39,7 @@
   outline-offset:var(--spacing-state-focus-offset, 2px);
 }
 .buttonCopyValue:active{
-  color:var(--sys-neutral-text-main, #41424e);
+  color:var(--sys-neutral-text-main, #33343f);
 }
 .buttonCopyValue[data-disabled]{
   cursor:not-allowed;

package/dist/helperComponents/ButtonHideValue/styles.module.css

@@ -39,7 +39,7 @@
   outline-offset:var(--spacing-state-focus-offset, 2px);
 }
 .buttonHideValue:active{
-  color:var(--sys-neutral-text-main, #41424e);
+  color:var(--sys-neutral-text-main, #33343f);
 }
 .buttonHideValue[data-disabled]{
   cursor:not-allowed;

package/dist/helperComponents/FieldContainerPrivate/styles.module.css

@@ -23,7 +23,7 @@
   outline-color:var(--sys-primary-decor-activated, #c5b2f1);
 }
 .container[data-validation=error]{
-  background-color:var(--sys-red-background1-level, #fef6f3);
+  background-color:var(--sys-red-background1-level, #fcf6f5);
   border-color:var(--sys-red-decor-default, #fdd6cd);
 }
 .container[data-validation=error]:hover{
@@ -35,11 +35,11 @@
   outline-style:var(--border-state-focus-m-border-style, solid);
   outline-color:var(--border-state-focus-m-border-color, );
   background-color:var(--sys-neutral-background2-level, #ffffff);
-  border-color:var(--sys-red-accent-default, #cb3f3e);
+  border-color:var(--sys-red-accent-default, #cd3c3c);
   outline-color:var(--sys-red-decor-activated, #fbab99);
 }
 .container[data-validation=warning]{
-  background-color:var(--sys-yellow-background1-level, #fcfbef);
+  background-color:var(--sys-yellow-background1-level, #fefae6);
   border-color:var(--sys-yellow-decor-default, #f0dfb1);
 }
 .container[data-validation=warning]:hover{
@@ -51,11 +51,11 @@
   outline-style:var(--border-state-focus-m-border-style, solid);
   outline-color:var(--border-state-focus-m-border-color, );
   background-color:var(--sys-neutral-background2-level, #ffffff);
-  border-color:var(--sys-yellow-accent-default, #e2b134);
-  outline-color:var(--sys-yellow-decor-activated, #e6c878);
+  border-color:var(--sys-yellow-accent-default, #ffc443);
+  outline-color:var(--sys-yellow-decor-activated, #e5c878);
 }
 .container[data-validation=success]{
-  background-color:var(--sys-green-background1-level, #f6fdf3);
+  background-color:var(--sys-green-background1-level, #f6faf3);
   border-color:var(--sys-green-decor-default, #d2ead0);
 }
 .container[data-validation=success]:hover{

package/dist/helperComponents/TextArea/styles.module.css

@@ -5,7 +5,7 @@
   max-width:100%;
   margin:0;
   padding:0;
-  color:var(--sys-neutral-text-main, #41424e);
+  color:var(--sys-neutral-text-main, #33343f);
   background-color:transparent;
   border:none;
   border-radius:0;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.23.5-preview-8898cdde.0",
+  "version": "0.23.5",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,18 +32,18 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.17.3-preview-8898cdde.0",
+    "@snack-uikit/button": "0.17.2",
     "@snack-uikit/calendar": "0.7.10",
     "@snack-uikit/dropdown": "0.2.4",
     "@snack-uikit/icons": "0.22.0",
     "@snack-uikit/input-private": "3.1.4",
-    "@snack-uikit/list": "0.14.3-preview-8898cdde.0",
+    "@snack-uikit/list": "0.14.2",
     "@snack-uikit/scroll": "0.6.0",
     "@snack-uikit/skeleton": "0.3.4",
     "@snack-uikit/slider": "0.1.15",
     "@snack-uikit/tag": "0.9.7",
     "@snack-uikit/tooltip": "0.13.7",
-    "@snack-uikit/truncate-string": "0.4.21-preview-8898cdde.0",
+    "@snack-uikit/truncate-string": "0.4.20",
     "@snack-uikit/utils": "3.3.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "3.3.3",
@@ -59,5 +59,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "a0351f376ac28462b847d1bf99ad3f7ba7a1d0cd"
+  "gitHead": "620a9816c0cd7402f8f514df2cccc297599ecd44"
 }

package/src/components/FieldSlider/FieldSlider.tsx

@@ -13,7 +13,7 @@ import {
 
 import { InputPrivate, InputPrivateProps, SIZE } from '@snack-uikit/input-private';
 import { Slider, SliderProps as SliderComponentProps } from '@snack-uikit/slider';
-import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+import { extractSupportProps, useEventHandler, WithSupportProps } from '@snack-uikit/utils';
 
 import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
@@ -212,7 +212,11 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(
       handleChange(mark);
     };
 
-    const handleTextValueChange = () => {
+    const handleTextValueChange = useEventHandler(() => {
+      if (range) {
+        return;
+      }
+
       const parsedValue = parseInt(textFieldInputValue);
       const actualMinByMark = parseInt(String(getMarkValue(min)));
       const actualMin = Number.isNaN(actualMinByMark) ? min : actualMinByMark;
@@ -228,7 +232,7 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(
       } else {
         handleNonEqualMarksSliderChange(textFieldNumValue);
       }
-    };
+    });
 
     const onTextFieldBlur = (e: FocusEvent<HTMLInputElement, Element>) => {
       onBlur?.(e);
@@ -247,9 +251,7 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(
 
     useEffect(() => {
       handleTextValueChange();
-      // update value only when marks, min or max are changed
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [marks, min, max]);
+    }, [marks, min, max, handleTextValueChange]);
 
     return (
       <FieldDecorator