@true-engineering/true-react-common-ui-kit 3.18.0 → 3.20.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 +12 -0
  3. package/dist/components/TextArea/TextArea.d.ts +2 -0
  4. package/dist/true-react-common-ui-kit.js +62 -60
  5. package/dist/true-react-common-ui-kit.js.map +1 -1
  6. package/dist/true-react-common-ui-kit.umd.cjs +62 -60
  7. package/dist/true-react-common-ui-kit.umd.cjs.map +1 -1
  8. package/package.json +1 -1
  9. package/src/components/AccountInfo/AccountInfo.stories.tsx +32 -32
  10. package/src/components/AccountInfo/AccountInfo.tsx +80 -80
  11. package/src/components/AddButton/AddButton.stories.tsx +21 -21
  12. package/src/components/AddButton/AddButton.tsx +52 -52
  13. package/src/components/Button/Button.tsx +129 -129
  14. package/src/components/Colors/Colors.stories.tsx +7 -7
  15. package/src/components/DateInput/DateInput.tsx +90 -90
  16. package/src/components/DateInput/constants.ts +2 -2
  17. package/src/components/DatePicker/DatePicker.tsx +308 -308
  18. package/src/components/Description/Description.stories.tsx +27 -27
  19. package/src/components/Description/Description.tsx +61 -61
  20. package/src/components/FiltersPane/components/FilterValueView/FilterValueView.tsx +166 -166
  21. package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.tsx +210 -210
  22. package/src/components/FiltersPane/components/FilterWithPeriod/FilterWithPeriod.tsx +177 -177
  23. package/src/components/Flag/Flag.stories.tsx +29 -29
  24. package/src/components/Flag/Flag.tsx +26 -26
  25. package/src/components/Flag/augment.d.ts +1 -1
  26. package/src/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.styles.ts +38 -38
  27. package/src/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.styles.ts +25 -25
  28. package/src/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.tsx +196 -196
  29. package/src/components/FlexibleTable/helpers.ts +13 -13
  30. package/src/components/Icon/Icon.stories.tsx +86 -86
  31. package/src/components/Icon/complexIcons/augment.d.ts +1 -1
  32. package/src/components/Icon/complexIcons/avatarGreen.svg +57 -57
  33. package/src/components/Icon/complexIcons/index.ts +1 -1
  34. package/src/components/IncrementInput/IncrementInput.tsx +105 -105
  35. package/src/components/Input/Input.tsx +297 -297
  36. package/src/components/Input/types.ts +32 -32
  37. package/src/components/List/List.stories.tsx +70 -70
  38. package/src/components/List/List.tsx +33 -33
  39. package/src/components/List/components/ListItem/ListItem.tsx +57 -57
  40. package/src/components/Modal/Modal.stories.tsx +105 -105
  41. package/src/components/MultiSelect/MultiSelect.stories.tsx +46 -46
  42. package/src/components/MultiSelect/MultiSelect.tsx +106 -106
  43. package/src/components/MultiSelect/components/MultiSelectInput/MultiSelectInput.tsx +53 -53
  44. package/src/components/Notification/Notification.stories.tsx +46 -46
  45. package/src/components/Notification/Notification.tsx +69 -69
  46. package/src/components/NumberInput/NumberInput.tsx +137 -137
  47. package/src/components/NumberInput/index.ts +1 -1
  48. package/src/components/PhoneInput/PhoneInput.tsx +214 -214
  49. package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.tsx +155 -155
  50. package/src/components/PhoneInput/types.ts +16 -16
  51. package/src/components/RadioButton/RadioButton.stories.tsx +46 -46
  52. package/src/components/RadioButton/RadioButton.tsx +57 -57
  53. package/src/components/ScrollIntoViewIfNeeded/index.ts +1 -1
  54. package/src/components/Select/MultiSelect.stories.tsx +240 -240
  55. package/src/components/Select/Select.stories.tsx +235 -235
  56. package/src/components/Select/Select.tsx +1 -1
  57. package/src/components/Select/constants.ts +2 -2
  58. package/src/components/Select/types.ts +1 -1
  59. package/src/components/Selector/Selector.stories.tsx +62 -62
  60. package/src/components/Selector/Selector.tsx +115 -115
  61. package/src/components/Selector/index.ts +2 -2
  62. package/src/components/Selector/types.ts +12 -12
  63. package/src/components/Skeleton/Skeleton.stories.tsx +19 -19
  64. package/src/components/SmartInput/SmartInput.tsx +134 -134
  65. package/src/components/Status/Status.stories.tsx +73 -73
  66. package/src/components/Status/Status.styles.ts +143 -143
  67. package/src/components/Status/Status.tsx +49 -49
  68. package/src/components/Status/constants.ts +11 -11
  69. package/src/components/Status/index.ts +3 -3
  70. package/src/components/Status/types.ts +5 -5
  71. package/src/components/Switch/Switch.stories.tsx +40 -40
  72. package/src/components/Switch/Switch.tsx +75 -75
  73. package/src/components/TextArea/TextArea.stories.tsx +1 -0
  74. package/src/components/TextArea/TextArea.tsx +5 -1
  75. package/src/components/TextWithInfo/TextWithInfo.stories.tsx +53 -53
  76. package/src/components/TextWithInfo/TextWithInfo.tsx +62 -62
  77. package/src/components/TextWithTooltip/TextWithTooltip.stories.tsx +58 -58
  78. package/src/components/ThemedPreloader/ThemedPreloader.stories.tsx +41 -41
  79. package/src/components/ThemedPreloader/ThemedPreloader.tsx +54 -54
  80. package/src/components/ThemedPreloader/components/DefaultPreloader/index.ts +1 -1
  81. package/src/components/Toaster/Toaster.stories.tsx +30 -30
  82. package/src/components/Tooltip/Tooltip.stories.tsx +19 -19
  83. package/src/components/Tooltip/Tooltip.tsx +35 -35
  84. package/src/components/Tooltip/types.ts +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
@@ -6581,63 +6581,63 @@
6581
6581
  return trueReactPlatformHelpers.mergeRefs(refs);
6582
6582
  }, refs);
6583
6583
  };
6584
- const avatarGreen = ` <svg\r
6585
- width="100%"\r
6586
- height="100%"\r
6587
- viewBox="0 0 32 32"\r
6588
- fill="none"\r
6589
- xmlns="http://www.w3.org/2000/svg"\r
6590
- >\r
6591
- <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />\r
6592
- <mask\r
6593
- id="mask0_0_12744"\r
6594
- style="mask-type: 'alpha';"\r
6595
- maskUnits="userSpaceOnUse"\r
6596
- x="0"\r
6597
- y="0"\r
6598
- width="32"\r
6599
- height="32"\r
6600
- >\r
6601
- <circle cx="16" cy="16" r="16" fill="white" />\r
6602
- </mask>\r
6603
- <g mask="url(#mask0_0_12744)">\r
6604
- <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />\r
6605
- <mask\r
6606
- id="mask1_0_12744"\r
6607
- style="mask-type: 'alpha';"\r
6608
- maskUnits="userSpaceOnUse"\r
6609
- x="3"\r
6610
- y="16"\r
6611
- width="26"\r
6612
- height="26"\r
6613
- >\r
6614
- <circle cx="16" cy="29" r="13" fill="white" />\r
6615
- </mask>\r
6616
- <g mask="url(#mask1_0_12744)">\r
6617
- <ellipse\r
6618
- cx="16"\r
6619
- cy="17.5"\r
6620
- rx="6"\r
6621
- ry="7.5"\r
6622
- fill="#505F79"\r
6623
- fill-opacity="0.204983"\r
6624
- />\r
6625
- </g>\r
6626
- </g>\r
6627
- <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />\r
6628
- <defs>\r
6629
- <linearGradient\r
6630
- id="paint0_linear_0_12744"\r
6631
- x1="13.347"\r
6632
- y1="46.279"\r
6633
- x2="33.5318"\r
6634
- y2="30.8088"\r
6635
- gradientUnits="userSpaceOnUse"\r
6636
- >\r
6637
- <stop stop-color="#ABD229" />\r
6638
- <stop offset="1" stop-color="#9CD03F" />\r
6639
- </linearGradient>\r
6640
- </defs>\r
6584
+ const avatarGreen = ` <svg
6585
+ width="100%"
6586
+ height="100%"
6587
+ viewBox="0 0 32 32"
6588
+ fill="none"
6589
+ xmlns="http://www.w3.org/2000/svg"
6590
+ >
6591
+ <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
6592
+ <mask
6593
+ id="mask0_0_12744"
6594
+ style="mask-type: 'alpha';"
6595
+ maskUnits="userSpaceOnUse"
6596
+ x="0"
6597
+ y="0"
6598
+ width="32"
6599
+ height="32"
6600
+ >
6601
+ <circle cx="16" cy="16" r="16" fill="white" />
6602
+ </mask>
6603
+ <g mask="url(#mask0_0_12744)">
6604
+ <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
6605
+ <mask
6606
+ id="mask1_0_12744"
6607
+ style="mask-type: 'alpha';"
6608
+ maskUnits="userSpaceOnUse"
6609
+ x="3"
6610
+ y="16"
6611
+ width="26"
6612
+ height="26"
6613
+ >
6614
+ <circle cx="16" cy="29" r="13" fill="white" />
6615
+ </mask>
6616
+ <g mask="url(#mask1_0_12744)">
6617
+ <ellipse
6618
+ cx="16"
6619
+ cy="17.5"
6620
+ rx="6"
6621
+ ry="7.5"
6622
+ fill="#505F79"
6623
+ fill-opacity="0.204983"
6624
+ />
6625
+ </g>
6626
+ </g>
6627
+ <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
6628
+ <defs>
6629
+ <linearGradient
6630
+ id="paint0_linear_0_12744"
6631
+ x1="13.347"
6632
+ y1="46.279"
6633
+ x2="33.5318"
6634
+ y2="30.8088"
6635
+ gradientUnits="userSpaceOnUse"
6636
+ >
6637
+ <stop stop-color="#ABD229" />
6638
+ <stop offset="1" stop-color="#9CD03F" />
6639
+ </linearGradient>
6640
+ </defs>
6641
6641
  </svg>`;
6642
6642
  var complexIcons = {
6643
6643
  avatar: avatarGreen
@@ -11460,7 +11460,9 @@
11460
11460
  optionsMode
11461
11461
  ]);
11462
11462
  var debounceHandleOnType = React.useMemo(function() {
11463
- return tsDebounce.debounce(handleOnType, debounceTime);
11463
+ return tsDebounce.debounce(handleOnType, debounceTime, {
11464
+ isImmediate: debounceTime === 0
11465
+ });
11464
11466
  }, [
11465
11467
  handleOnType,
11466
11468
  debounceTime
@@ -29074,7 +29076,7 @@
29074
29076
  }
29075
29077
  var DEFAULT_VALUE = "";
29076
29078
  var TextArea = /* @__PURE__ */ React.forwardRef(function(param, ref) {
29077
- var _param_value = param.value, value = _param_value === void 0 ? DEFAULT_VALUE : _param_value, label = param.label, placeholder = param.placeholder, isDisabled = param.isDisabled, _param_hasFloatingLabel = param.hasFloatingLabel, hasFloatingLabel = _param_hasFloatingLabel === void 0 ? true : _param_hasFloatingLabel, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, infoMessage = param.infoMessage, errorMessage = param.errorMessage, _param_isRequired = param.isRequired, isRequired = _param_isRequired === void 0 ? false : _param_isRequired, name = param.name, _param_hasRequiredLabel = param.hasRequiredLabel, hasRequiredLabel = _param_hasRequiredLabel === void 0 ? false : _param_hasRequiredLabel, _param_shouldFocusOnMount = param.shouldFocusOnMount, shouldFocusOnMount = _param_shouldFocusOnMount === void 0 ? false : _param_shouldFocusOnMount, _param_hasCounter = param.hasCounter, hasCounter = _param_hasCounter === void 0 ? true : _param_hasCounter, _param_shouldTrimAfterMaxLength = param.shouldTrimAfterMaxLength, shouldTrimAfterMaxLength = _param_shouldTrimAfterMaxLength === void 0 ? false : _param_shouldTrimAfterMaxLength, _param_isAutoSizeable = param.isAutoSizeable, isAutoSizeable = _param_isAutoSizeable === void 0 ? true : _param_isAutoSizeable, maxLength = param.maxLength, rows = param.rows, testId = param.testId, data = param.data, tweakStyles = param.tweakStyles, onChange = param.onChange, onPaste = param.onPaste, onFocus = param.onFocus, onBlur = param.onBlur;
29079
+ var _param_value = param.value, value = _param_value === void 0 ? DEFAULT_VALUE : _param_value, label = param.label, placeholder = param.placeholder, isDisabled = param.isDisabled, _param_hasFloatingLabel = param.hasFloatingLabel, hasFloatingLabel = _param_hasFloatingLabel === void 0 ? true : _param_hasFloatingLabel, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, infoMessage = param.infoMessage, errorMessage = param.errorMessage, _param_isRequired = param.isRequired, isRequired = _param_isRequired === void 0 ? false : _param_isRequired, name = param.name, _param_hasRequiredLabel = param.hasRequiredLabel, hasRequiredLabel = _param_hasRequiredLabel === void 0 ? false : _param_hasRequiredLabel, _param_shouldFocusOnMount = param.shouldFocusOnMount, shouldFocusOnMount = _param_shouldFocusOnMount === void 0 ? false : _param_shouldFocusOnMount, _param_hasCounter = param.hasCounter, hasCounter = _param_hasCounter === void 0 ? true : _param_hasCounter, _param_shouldTrimAfterMaxLength = param.shouldTrimAfterMaxLength, shouldTrimAfterMaxLength = _param_shouldTrimAfterMaxLength === void 0 ? false : _param_shouldTrimAfterMaxLength, _param_isAutoSizeable = param.isAutoSizeable, isAutoSizeable = _param_isAutoSizeable === void 0 ? true : _param_isAutoSizeable, _param_shouldAlwaysShowPlaceholder = param.shouldAlwaysShowPlaceholder, shouldAlwaysShowPlaceholder = _param_shouldAlwaysShowPlaceholder === void 0 ? false : _param_shouldAlwaysShowPlaceholder, maxLength = param.maxLength, rows = param.rows, testId = param.testId, data = param.data, tweakStyles = param.tweakStyles, onChange = param.onChange, onPaste = param.onPaste, onFocus = param.onFocus, onBlur = param.onBlur;
29078
29080
  var classes = useStyles$6({
29079
29081
  theme: tweakStyles
29080
29082
  });
@@ -29099,7 +29101,7 @@
29099
29101
  var hasFocus = isFocused || isActive;
29100
29102
  var hasValue = value !== void 0 && value !== "";
29101
29103
  var hasLabel = trueReactPlatformHelpers.isReactNodeNotEmpty(label);
29102
- var hasPlaceholder = (!hasLabel || hasFocus) && trueReactPlatformHelpers.isStringNotEmpty(placeholder);
29104
+ var hasPlaceholder = (!hasLabel || hasFocus || shouldAlwaysShowPlaceholder) && trueReactPlatformHelpers.isStringNotEmpty(placeholder);
29103
29105
  var props = _object_spread$6({
29104
29106
  className: classes.textarea,
29105
29107
  onFocus: handleOnFocus,