Merge remote-tracking branch 'origin/master' into next

packages/react-ui-validations/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.16.2](https://github.com/skbkontur/retail-ui/tree/master/packages/react-ui-validations/compare/[email protected]@1.16.2) (2024-07-09)
+
+
+### Bug Fixes
+
+* **validations:** program validation on multiple fields ([#3454](https://github.com/skbkontur/retail-ui/tree/master/packages/react-ui-validations/issues/3454)) ([8317e0b](https://github.com/skbkontur/retail-ui/tree/master/packages/react-ui-validations/commit/8317e0baac36346a15cfff7477f4b482430a007d))
+
+
+
+
+
 ## [1.16.1](https://github.com/skbkontur/retail-ui/tree/master/packages/react-ui-validations/compare/[email protected]@1.16.1) (2024-07-05)
 
 

packages/react-ui-validations/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ui-validations",
-  "version": "1.16.1",
+  "version": "1.16.2",
   "description": "Validations for @skbkontur/react-ui",
   "scripts": {
     "prebuild": "yarn clean",

packages/react-ui-validations/src/ValidationWrapperInternal.tsx

@@ -248,10 +248,12 @@ export class ValidationWrapperInternal extends React.Component<
     }
 
     return new Promise((resolve) => {
-      this.setState({ validation }, resolve);
-      if (Boolean(current) !== Boolean(validation)) {
-        this.context.onValidationUpdated(this, !validation);
-      }
+      this.setState({ validation }, () => {
+        if (Boolean(current) !== Boolean(validation)) {
+          this.context.onValidationUpdated(this, !validation);
+        }
+        resolve();
+      });
     });
   }
 

packages/react-ui-validations/tests/ValidationContainer.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import {
+  Button,
   ComboBox,
   DatePicker,
   FileUploader,
@@ -15,6 +16,7 @@ import {
   FocusMode,
   ValidationContainer,
   ValidationContainerProps,
+  ValidationInfo,
   ValidationsFeatureFlagsContext,
   ValidationWrapper,
 } from '../src';
@@ -159,4 +161,86 @@ describe('ValidationContainer', () => {
       expect(screen.getByRole('textbox')).not.toHaveFocus();
     });
   });
+
+  describe('on validation updated', () => {
+    const renderValidationContainer = (
+      children: React.ReactElement,
+      props?: ValidationContainerProps,
+    ): React.RefObject<ValidationContainer> => {
+      const containerRef = React.createRef<ValidationContainer>();
+      render(
+        <ValidationContainer ref={containerRef} {...props}>
+          {children}
+        </ValidationContainer>,
+      );
+      return containerRef;
+    };
+    const validate = (value: string) => {
+      return value.includes('bad') ? ({ message: 'Ошибка', type: 'submit' } as ValidationInfo) : null;
+    };
+
+    it('works with one field', async () => {
+      const ValidationForm = () => {
+        const [value1, setValue1] = React.useState('bad');
+
+        return (
+          <>
+            <ValidationWrapper validationInfo={validate(value1)}>
+              <Input value={value1} onValueChange={setValue1} />
+            </ValidationWrapper>
+            <button onClick={() => setValue1('good')}>Repair</button>
+          </>
+        );
+      };
+
+      const onValidationUpdated = jest.fn();
+      const containerRef = renderValidationContainer(<ValidationForm />, { onValidationUpdated });
+      await containerRef.current?.submit();
+      expect(onValidationUpdated).toBeCalledWith(false);
+
+      screen.getByRole('button', { name: 'Repair' }).click();
+      expect(onValidationUpdated).toBeCalledWith(true);
+    });
+
+    it('works with multiple fields', async () => {
+      const ValidationForm = () => {
+        const [value1, setValue1] = React.useState('bad');
+        const [value2, setValue2] = React.useState('bad');
+        const validationContainerRef = React.useRef<ValidationContainer>(null);
+
+        return (
+          <>
+            <ValidationWrapper validationInfo={validate(value1)}>
+              <Input value={value1} onValueChange={setValue1} />
+            </ValidationWrapper>
+            <ValidationWrapper validationInfo={validate(value2)}>
+              <Input value={value2} onValueChange={setValue2} />
+            </ValidationWrapper>
+            <button onClick={() => setValue1('good')}>Partial Repair</button>
+            <button
+              onClick={() => {
+                setValue1('good');
+                setValue2('good');
+              }}
+            >
+              Repair
+            </button>
+            <Button onClick={() => validationContainerRef.current?.submit()}>Submit</Button>
+          </>
+        );
+      };
+
+      const onValidationUpdated = jest.fn();
+      const containerRef = renderValidationContainer(<ValidationForm />, { onValidationUpdated });
+      await containerRef.current?.submit();
+
+      expect(onValidationUpdated).toBeCalledWith(false);
+
+      screen.getByRole('button', { name: 'Partial Repair' }).click();
+      expect(onValidationUpdated).toBeCalledWith(false);
+
+      screen.getByRole('button', { name: 'Repair' }).click();
+      expect(onValidationUpdated).toBeCalledWith(true);
+    });
+  });
 });

packages/react-ui/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.25.2](https://github.com/skbkontur/retail-ui/compare/@skbkontur/[email protected]...@skbkontur/[email protected]) (2024-07-16)
+
+
+### Bug Fixes
+
+* **Loader:** fix Loader in 18 react ([#3467](https://github.com/skbkontur/retail-ui/issues/3467)) ([5c0fcce](https://github.com/skbkontur/retail-ui/commit/5c0fccefea1de468a9a796456f6a8a9163587a51))
+* **Select:** pass disabled to _renderButton ([#3468](https://github.com/skbkontur/retail-ui/issues/3468)) ([bc4cac9](https://github.com/skbkontur/retail-ui/commit/bc4cac9444667bc10f499fec417cd67cc1081075))
+* **validations:** program validation on multiple fields ([#3454](https://github.com/skbkontur/retail-ui/issues/3454)) ([8317e0b](https://github.com/skbkontur/retail-ui/commit/8317e0baac36346a15cfff7477f4b482430a007d))
+
+
+
+
+
 ## [4.25.1](https://github.com/skbkontur/retail-ui/compare/@skbkontur/[email protected]...@skbkontur/[email protected]) (2024-06-17)
 
 **Note:** Version bump only for package @skbkontur/react-ui

packages/react-ui/components/RadioGroup/RadioGroup.tsx

@@ -11,6 +11,7 @@ import { Theme } from '../../lib/theming/Theme';
 import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';
 import { cx } from '../../lib/theming/Emotion';
 import { rootNode, TSetRootNode } from '../../lib/rootNode';
+import { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';
 
 import { styles } from './RadioGroup.styles';
 import { Prevent } from './Prevent';
@@ -154,7 +155,15 @@ export class RadioGroup<T> extends React.Component<RadioGroupProps<T>, RadioGrou
   }
 
   public renderMain() {
-    const { width, onMouseLeave, onMouseOver, onMouseEnter, onBlur, 'aria-describedby': ariaDescribedby } = this.props;
+    const {
+      width,
+      onMouseLeave,
+      onMouseOver,
+      onMouseEnter,
+      onBlur,
+      'aria-describedby': ariaDescribedby,
+      disabled,
+    } = this.props;
     const style = {
       width: width ?? 'auto',
     };
@@ -165,7 +174,7 @@ export class RadioGroup<T> extends React.Component<RadioGroupProps<T>, RadioGrou
     };
 
     return (
-      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props} {...getVisualStateDataAttributes({ disabled })}>
         <FocusTrap onBlur={onBlur}>
           <span
             data-tid={RadioGroupDataTids.root}

packages/react-ui/components/RadioGroup/__tests__/RadioGroup-test.tsx

@@ -303,4 +303,10 @@ describe('<RadioGroup />', () => {
     expect(radioGroup).toHaveAttribute('aria-describedby', 'elementRadioGroupId');
     expect(radioGroup).toHaveAccessibleDescription('Description Radio group');
   });
+
+  it('should have visual state disabled attribute', () => {
+    render(<RadioGroup items={['one', 'two']} disabled />);
+
+    expect(screen.getByRole('radiogroup')).toHaveAttribute('data-visual-state-disabled');
+  });
 });

packages/react-ui/components/Select/Select.tsx

@@ -368,6 +368,7 @@ export class Select<TValue = {}, TItem = {}> extends React.Component<SelectProps
       onClick: this.toggle,
       onKeyDown: this.handleKey,
       size: this.getProps().size,
+      disabled: this.getProps().disabled,
     };
 
     return buttonParams;

packages/react-ui/components/Select/__tests__/Select-test.tsx

@@ -304,6 +304,12 @@ describe('Select', () => {
 
       expect(screen.getByRole('button')).toHaveAttribute('aria-label', ariaLabel);
     });
+
+    it('sets value disabled `_renderButton` is passed', () => {
+      render(<Select disabled _renderButton={(params) => <button {...params}>test</button>} />);
+
+      expect(screen.getByRole('button')).toBeDisabled();
+    });
   });
 
   describe('Locale', () => {

packages/react-ui/components/Token/Token.tsx

@@ -12,6 +12,7 @@ import { isTheme2022 } from '../../lib/theming/ThemeHelpers';
 import { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';
 import { SizeProp } from '../../lib/types/props';
 import { reactGetTextContent } from '../../lib/reactGetTextContent';
+import { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';
 
 import { styles, colorStyles } from './Token.styles';
 import { TokenLocale, TokenLocaleHelper } from './locale';
@@ -154,7 +155,7 @@ export class Token extends React.Component<TokenProps> {
     );
 
     return (
-      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
+      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props} {...getVisualStateDataAttributes({ disabled })}>
         <TokenView
           className={classNames}
           size={size}

packages/react-ui/components/Token/__tests__/Token-test.tsx

@@ -127,5 +127,11 @@ describe('Token', () => {
 
       expect(screen.getByRole('button')).toHaveAttribute('aria-label', TokenLocalesRu.removeButtonAriaLabel + ' ');
     });
+
+    it('should have visual state disabled attribute', () => {
+      render(<Token disabled />);
+
+      expect(screen.getByTestId(TokenDataTids.root)).toHaveAttribute('data-visual-state-disabled');
+    });
   });
 });

packages/react-ui/lib/taskWithDelayAndMinimalDuration.ts

@@ -77,6 +77,7 @@ export class TaskWithDelayAndMinimalDuration {
   };
 
   public clearTask = () => {
+    this.isTaskActive = false;
     this.clearTimeoutBeforeTaskStart();
     this.clearTimeoutBeforeTaskStop();
   };

packages/react-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/react-ui",
-  "version": "4.25.1",
+  "version": "4.25.2",
   "description": "UI Components",
   "main": "cjs/index.js",
   "module": "index.js",