@true-engineering/true-react-common-ui-kit 3.20.1 → 3.21.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 (89) hide show
  1. package/LICENSE +201 -201
  2. package/README.md +6 -0
  3. package/dist/components/DatePicker/types.d.ts +1 -1
  4. package/dist/components/WithPopup/WithPopup.d.ts +1 -1
  5. package/dist/true-react-common-ui-kit.js +60 -58
  6. package/dist/true-react-common-ui-kit.js.map +1 -1
  7. package/dist/true-react-common-ui-kit.umd.cjs +60 -58
  8. package/dist/true-react-common-ui-kit.umd.cjs.map +1 -1
  9. package/package.json +1 -1
  10. package/src/components/AccountInfo/AccountInfo.stories.tsx +32 -32
  11. package/src/components/AccountInfo/AccountInfo.tsx +80 -80
  12. package/src/components/AddButton/AddButton.stories.tsx +21 -21
  13. package/src/components/AddButton/AddButton.tsx +52 -52
  14. package/src/components/Button/Button.tsx +129 -129
  15. package/src/components/Colors/Colors.stories.tsx +7 -7
  16. package/src/components/DateInput/DateInput.tsx +90 -90
  17. package/src/components/DateInput/constants.ts +2 -2
  18. package/src/components/DatePicker/DatePicker.tsx +310 -308
  19. package/src/components/DatePicker/types.ts +1 -0
  20. package/src/components/Description/Description.stories.tsx +27 -27
  21. package/src/components/Description/Description.tsx +61 -61
  22. package/src/components/FiltersPane/components/FilterValueView/FilterValueView.tsx +166 -166
  23. package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.tsx +210 -210
  24. package/src/components/FiltersPane/components/FilterWithPeriod/FilterWithPeriod.tsx +177 -177
  25. package/src/components/Flag/Flag.stories.tsx +29 -29
  26. package/src/components/Flag/Flag.tsx +26 -26
  27. package/src/components/Flag/augment.d.ts +1 -1
  28. package/src/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.styles.ts +38 -38
  29. package/src/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.styles.ts +25 -25
  30. package/src/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.tsx +196 -196
  31. package/src/components/FlexibleTable/helpers.ts +13 -13
  32. package/src/components/Icon/Icon.stories.tsx +86 -86
  33. package/src/components/Icon/complexIcons/augment.d.ts +1 -1
  34. package/src/components/Icon/complexIcons/avatarGreen.svg +57 -57
  35. package/src/components/Icon/complexIcons/index.ts +1 -1
  36. package/src/components/IncrementInput/IncrementInput.tsx +105 -105
  37. package/src/components/Input/Input.tsx +297 -297
  38. package/src/components/Input/types.ts +32 -32
  39. package/src/components/List/List.stories.tsx +70 -70
  40. package/src/components/List/List.tsx +33 -33
  41. package/src/components/List/components/ListItem/ListItem.tsx +57 -57
  42. package/src/components/Modal/Modal.stories.tsx +105 -105
  43. package/src/components/MultiSelect/MultiSelect.stories.tsx +46 -46
  44. package/src/components/MultiSelect/MultiSelect.tsx +106 -106
  45. package/src/components/MultiSelect/components/MultiSelectInput/MultiSelectInput.tsx +53 -53
  46. package/src/components/Notification/Notification.stories.tsx +46 -46
  47. package/src/components/Notification/Notification.tsx +69 -69
  48. package/src/components/NumberInput/NumberInput.tsx +137 -137
  49. package/src/components/NumberInput/index.ts +1 -1
  50. package/src/components/PhoneInput/PhoneInput.tsx +214 -214
  51. package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.tsx +155 -155
  52. package/src/components/PhoneInput/types.ts +16 -16
  53. package/src/components/RadioButton/RadioButton.stories.tsx +46 -46
  54. package/src/components/RadioButton/RadioButton.tsx +57 -57
  55. package/src/components/ScrollIntoViewIfNeeded/index.ts +1 -1
  56. package/src/components/Select/MultiSelect.stories.tsx +240 -240
  57. package/src/components/Select/Select.stories.tsx +235 -235
  58. package/src/components/Select/constants.ts +2 -2
  59. package/src/components/Select/types.ts +1 -1
  60. package/src/components/Selector/Selector.stories.tsx +62 -62
  61. package/src/components/Selector/Selector.tsx +115 -115
  62. package/src/components/Selector/index.ts +2 -2
  63. package/src/components/Selector/types.ts +12 -12
  64. package/src/components/Skeleton/Skeleton.stories.tsx +19 -19
  65. package/src/components/SmartInput/SmartInput.tsx +134 -134
  66. package/src/components/Status/Status.stories.tsx +73 -73
  67. package/src/components/Status/Status.styles.ts +143 -143
  68. package/src/components/Status/Status.tsx +49 -49
  69. package/src/components/Status/constants.ts +11 -11
  70. package/src/components/Status/index.ts +3 -3
  71. package/src/components/Status/types.ts +5 -5
  72. package/src/components/Switch/Switch.stories.tsx +40 -40
  73. package/src/components/Switch/Switch.tsx +75 -75
  74. package/src/components/TextWithInfo/TextWithInfo.stories.tsx +53 -53
  75. package/src/components/TextWithInfo/TextWithInfo.tsx +62 -62
  76. package/src/components/TextWithTooltip/TextWithTooltip.stories.tsx +58 -58
  77. package/src/components/ThemedPreloader/ThemedPreloader.stories.tsx +41 -41
  78. package/src/components/ThemedPreloader/ThemedPreloader.tsx +54 -54
  79. package/src/components/ThemedPreloader/components/DefaultPreloader/index.ts +1 -1
  80. package/src/components/Toaster/Toaster.stories.tsx +30 -30
  81. package/src/components/Tooltip/Tooltip.stories.tsx +19 -19
  82. package/src/components/Tooltip/Tooltip.tsx +35 -35
  83. package/src/components/Tooltip/types.ts +1 -1
  84. package/src/components/WithPopup/WithPopup.tsx +1 -1
  85. package/src/helpers/popper-helpers.ts +17 -17
  86. package/src/hooks/use-dropdown.ts +84 -84
  87. package/src/hooks/use-is-mounted.ts +15 -15
  88. package/src/theme/helpers.ts +76 -76
  89. package/src/vite-env.d.ts +1 -1
@@ -1,58 +1,58 @@
1
- <svg
2
- width="100%"
3
- height="100%"
4
- viewBox="0 0 32 32"
5
- fill="none"
6
- xmlns="http://www.w3.org/2000/svg"
7
- >
8
- <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
9
- <mask
10
- id="mask0_0_12744"
11
- style="mask-type: 'alpha';"
12
- maskUnits="userSpaceOnUse"
13
- x="0"
14
- y="0"
15
- width="32"
16
- height="32"
17
- >
18
- <circle cx="16" cy="16" r="16" fill="white" />
19
- </mask>
20
- <g mask="url(#mask0_0_12744)">
21
- <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
22
- <mask
23
- id="mask1_0_12744"
24
- style="mask-type: 'alpha';"
25
- maskUnits="userSpaceOnUse"
26
- x="3"
27
- y="16"
28
- width="26"
29
- height="26"
30
- >
31
- <circle cx="16" cy="29" r="13" fill="white" />
32
- </mask>
33
- <g mask="url(#mask1_0_12744)">
34
- <ellipse
35
- cx="16"
36
- cy="17.5"
37
- rx="6"
38
- ry="7.5"
39
- fill="#505F79"
40
- fill-opacity="0.204983"
41
- />
42
- </g>
43
- </g>
44
- <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
45
- <defs>
46
- <linearGradient
47
- id="paint0_linear_0_12744"
48
- x1="13.347"
49
- y1="46.279"
50
- x2="33.5318"
51
- y2="30.8088"
52
- gradientUnits="userSpaceOnUse"
53
- >
54
- <stop stop-color="#ABD229" />
55
- <stop offset="1" stop-color="#9CD03F" />
56
- </linearGradient>
57
- </defs>
1
+ <svg
2
+ width="100%"
3
+ height="100%"
4
+ viewBox="0 0 32 32"
5
+ fill="none"
6
+ xmlns="http://www.w3.org/2000/svg"
7
+ >
8
+ <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
9
+ <mask
10
+ id="mask0_0_12744"
11
+ style="mask-type: 'alpha';"
12
+ maskUnits="userSpaceOnUse"
13
+ x="0"
14
+ y="0"
15
+ width="32"
16
+ height="32"
17
+ >
18
+ <circle cx="16" cy="16" r="16" fill="white" />
19
+ </mask>
20
+ <g mask="url(#mask0_0_12744)">
21
+ <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
22
+ <mask
23
+ id="mask1_0_12744"
24
+ style="mask-type: 'alpha';"
25
+ maskUnits="userSpaceOnUse"
26
+ x="3"
27
+ y="16"
28
+ width="26"
29
+ height="26"
30
+ >
31
+ <circle cx="16" cy="29" r="13" fill="white" />
32
+ </mask>
33
+ <g mask="url(#mask1_0_12744)">
34
+ <ellipse
35
+ cx="16"
36
+ cy="17.5"
37
+ rx="6"
38
+ ry="7.5"
39
+ fill="#505F79"
40
+ fill-opacity="0.204983"
41
+ />
42
+ </g>
43
+ </g>
44
+ <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
45
+ <defs>
46
+ <linearGradient
47
+ id="paint0_linear_0_12744"
48
+ x1="13.347"
49
+ y1="46.279"
50
+ x2="33.5318"
51
+ y2="30.8088"
52
+ gradientUnits="userSpaceOnUse"
53
+ >
54
+ <stop stop-color="#ABD229" />
55
+ <stop offset="1" stop-color="#9CD03F" />
56
+ </linearGradient>
57
+ </defs>
58
58
  </svg>
@@ -1 +1 @@
1
- export * from './icons';
1
+ export * from './icons';
@@ -1,105 +1,105 @@
1
- import { FC, useEffect } from 'react';
2
- import clsx from 'clsx';
3
- import { addDataTestId, isNumberInteger } from '@true-engineering/true-react-platform-helpers';
4
- import { addDataAttributes, getNumberInRange, getNumberLength } from '../../helpers';
5
- import { useTweakStyles } from '../../hooks';
6
- import { ICommonProps } from '../../types';
7
- import { Icon } from '../Icon';
8
- import { INumberInputProps, NumberInput } from '../NumberInput';
9
- import { useStyles, IIncrementInputStyles, inputStyles } from './IncrementInput.styles';
10
-
11
- export interface IIncrementInputProps
12
- extends Omit<INumberInputProps, 'canBeFloat' | 'precision' | 'tweakStyles'>,
13
- ICommonProps<IIncrementInputStyles> {
14
- /** @default 1 */
15
- step?: number;
16
- }
17
-
18
- export const IncrementInput: FC<IIncrementInputProps> = ({
19
- value,
20
- onChange,
21
- min,
22
- max,
23
- step = 1,
24
- intPartPrecision,
25
- data,
26
- testId,
27
- tweakStyles,
28
- isDisabled,
29
- isReadonly,
30
- isInvalid,
31
- ...props
32
- }) => {
33
- const tweakInputStyles = useTweakStyles({
34
- innerStyles: inputStyles,
35
- tweakStyles,
36
- className: 'tweakInput',
37
- currentComponentName: 'IncrementInput',
38
- });
39
-
40
- const classes = useStyles({ theme: tweakStyles });
41
-
42
- const isIncreaseDisabled =
43
- isDisabled ||
44
- isReadonly ||
45
- (intPartPrecision !== undefined && getNumberLength((value ?? 0) + step) > intPartPrecision) ||
46
- (max !== undefined && value !== undefined && value >= max);
47
-
48
- const isDecreaseDisabled =
49
- isDisabled || isReadonly || (min !== undefined && value !== undefined ? value <= min : false);
50
-
51
- const increment = (): void => {
52
- onChange(getNumberInRange((value ?? 0) + step, min, max));
53
- };
54
-
55
- const decrement = (): void => {
56
- onChange(getNumberInRange((value ?? 0) - step, min, max));
57
- };
58
-
59
- useEffect(() => {
60
- if (!isNumberInteger(step)) {
61
- console.error('Параметр step должен быть целым числом');
62
- }
63
- }, [step]);
64
-
65
- return (
66
- <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
67
- <NumberInput
68
- {...props}
69
- isInvalid={isInvalid}
70
- isDisabled={isDisabled}
71
- isReadonly={isReadonly}
72
- min={min}
73
- max={max}
74
- intPartPrecision={intPartPrecision}
75
- onChange={onChange}
76
- value={value}
77
- tweakStyles={tweakInputStyles}
78
- />
79
- <div className={classes.buttons}>
80
- <button
81
- className={clsx(classes.button, {
82
- [classes.disabledButton]: isIncreaseDisabled,
83
- [classes.errorButton]: isInvalid,
84
- })}
85
- type="button"
86
- disabled={isIncreaseDisabled}
87
- onClick={increment}
88
- >
89
- <Icon type="plus" />
90
- </button>
91
- <button
92
- className={clsx(classes.button, {
93
- [classes.disabledButton]: isDecreaseDisabled,
94
- [classes.errorButton]: isInvalid,
95
- })}
96
- type="button"
97
- disabled={isDecreaseDisabled}
98
- onClick={decrement}
99
- >
100
- <Icon type="minus" />
101
- </button>
102
- </div>
103
- </div>
104
- );
105
- };
1
+ import { FC, useEffect } from 'react';
2
+ import clsx from 'clsx';
3
+ import { addDataTestId, isNumberInteger } from '@true-engineering/true-react-platform-helpers';
4
+ import { addDataAttributes, getNumberInRange, getNumberLength } from '../../helpers';
5
+ import { useTweakStyles } from '../../hooks';
6
+ import { ICommonProps } from '../../types';
7
+ import { Icon } from '../Icon';
8
+ import { INumberInputProps, NumberInput } from '../NumberInput';
9
+ import { useStyles, IIncrementInputStyles, inputStyles } from './IncrementInput.styles';
10
+
11
+ export interface IIncrementInputProps
12
+ extends Omit<INumberInputProps, 'canBeFloat' | 'precision' | 'tweakStyles'>,
13
+ ICommonProps<IIncrementInputStyles> {
14
+ /** @default 1 */
15
+ step?: number;
16
+ }
17
+
18
+ export const IncrementInput: FC<IIncrementInputProps> = ({
19
+ value,
20
+ onChange,
21
+ min,
22
+ max,
23
+ step = 1,
24
+ intPartPrecision,
25
+ data,
26
+ testId,
27
+ tweakStyles,
28
+ isDisabled,
29
+ isReadonly,
30
+ isInvalid,
31
+ ...props
32
+ }) => {
33
+ const tweakInputStyles = useTweakStyles({
34
+ innerStyles: inputStyles,
35
+ tweakStyles,
36
+ className: 'tweakInput',
37
+ currentComponentName: 'IncrementInput',
38
+ });
39
+
40
+ const classes = useStyles({ theme: tweakStyles });
41
+
42
+ const isIncreaseDisabled =
43
+ isDisabled ||
44
+ isReadonly ||
45
+ (intPartPrecision !== undefined && getNumberLength((value ?? 0) + step) > intPartPrecision) ||
46
+ (max !== undefined && value !== undefined && value >= max);
47
+
48
+ const isDecreaseDisabled =
49
+ isDisabled || isReadonly || (min !== undefined && value !== undefined ? value <= min : false);
50
+
51
+ const increment = (): void => {
52
+ onChange(getNumberInRange((value ?? 0) + step, min, max));
53
+ };
54
+
55
+ const decrement = (): void => {
56
+ onChange(getNumberInRange((value ?? 0) - step, min, max));
57
+ };
58
+
59
+ useEffect(() => {
60
+ if (!isNumberInteger(step)) {
61
+ console.error('Параметр step должен быть целым числом');
62
+ }
63
+ }, [step]);
64
+
65
+ return (
66
+ <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
67
+ <NumberInput
68
+ {...props}
69
+ isInvalid={isInvalid}
70
+ isDisabled={isDisabled}
71
+ isReadonly={isReadonly}
72
+ min={min}
73
+ max={max}
74
+ intPartPrecision={intPartPrecision}
75
+ onChange={onChange}
76
+ value={value}
77
+ tweakStyles={tweakInputStyles}
78
+ />
79
+ <div className={classes.buttons}>
80
+ <button
81
+ className={clsx(classes.button, {
82
+ [classes.disabledButton]: isIncreaseDisabled,
83
+ [classes.errorButton]: isInvalid,
84
+ })}
85
+ type="button"
86
+ disabled={isIncreaseDisabled}
87
+ onClick={increment}
88
+ >
89
+ <Icon type="plus" />
90
+ </button>
91
+ <button
92
+ className={clsx(classes.button, {
93
+ [classes.disabledButton]: isDecreaseDisabled,
94
+ [classes.errorButton]: isInvalid,
95
+ })}
96
+ type="button"
97
+ disabled={isDecreaseDisabled}
98
+ onClick={decrement}
99
+ >
100
+ <Icon type="minus" />
101
+ </button>
102
+ </div>
103
+ </div>
104
+ );
105
+ };