@true-engineering/true-react-common-ui-kit 3.31.0 → 3.32.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 (83) hide show
  1. package/LICENSE +201 -201
  2. package/README.md +7 -0
  3. package/dist/components/Notification/Notification.d.ts +2 -0
  4. package/dist/components/Notification/Notification.styles.d.ts +1 -1
  5. package/dist/components/Notification/types.d.ts +1 -1
  6. package/dist/true-react-common-ui-kit.js +64 -61
  7. package/dist/true-react-common-ui-kit.js.map +1 -1
  8. package/dist/true-react-common-ui-kit.umd.cjs +64 -61
  9. package/dist/true-react-common-ui-kit.umd.cjs.map +1 -1
  10. package/package.json +98 -98
  11. package/src/components/AccountInfo/AccountInfo.stories.tsx +32 -32
  12. package/src/components/AccountInfo/AccountInfo.tsx +80 -80
  13. package/src/components/AddButton/AddButton.stories.tsx +21 -21
  14. package/src/components/AddButton/AddButton.tsx +52 -52
  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/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/types.ts +70 -70
  29. package/src/components/Icon/Icon.stories.tsx +86 -86
  30. package/src/components/Icon/complexIcons/augment.d.ts +1 -1
  31. package/src/components/Icon/complexIcons/avatarGreen.svg +57 -57
  32. package/src/components/Icon/complexIcons/index.ts +1 -1
  33. package/src/components/Icon/icons-list.ts +856 -856
  34. package/src/components/IncrementInput/IncrementInput.tsx +105 -105
  35. package/src/components/Input/types.ts +32 -32
  36. package/src/components/Modal/Modal.stories.tsx +105 -105
  37. package/src/components/MultiSelect/MultiSelect.stories.tsx +46 -46
  38. package/src/components/MultiSelect/MultiSelect.tsx +106 -106
  39. package/src/components/MultiSelect/components/MultiSelectInput/MultiSelectInput.tsx +53 -53
  40. package/src/components/Notification/Notification.stories.tsx +55 -46
  41. package/src/components/Notification/Notification.styles.ts +57 -55
  42. package/src/components/Notification/Notification.tsx +77 -69
  43. package/src/components/Notification/types.ts +1 -1
  44. package/src/components/NumberInput/NumberInput.tsx +137 -137
  45. package/src/components/NumberInput/index.ts +1 -1
  46. package/src/components/PhoneInput/PhoneInput.tsx +214 -214
  47. package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.tsx +155 -155
  48. package/src/components/PhoneInput/types.ts +16 -16
  49. package/src/components/RadioButton/RadioButton.stories.tsx +46 -46
  50. package/src/components/RadioButton/RadioButton.tsx +57 -57
  51. package/src/components/ScrollIntoViewIfNeeded/index.ts +1 -1
  52. package/src/components/Select/Select.stories.tsx +235 -235
  53. package/src/components/Select/constants.ts +2 -2
  54. package/src/components/Select/types.ts +1 -1
  55. package/src/components/Selector/Selector.stories.tsx +62 -62
  56. package/src/components/Selector/Selector.tsx +115 -115
  57. package/src/components/Selector/index.ts +2 -2
  58. package/src/components/Selector/types.ts +12 -12
  59. package/src/components/Skeleton/Skeleton.stories.tsx +19 -19
  60. package/src/components/SmartInput/SmartInput.tsx +134 -134
  61. package/src/components/Status/Status.stories.tsx +73 -73
  62. package/src/components/Status/Status.styles.ts +143 -143
  63. package/src/components/Status/Status.tsx +49 -49
  64. package/src/components/Status/constants.ts +11 -11
  65. package/src/components/Status/index.ts +3 -3
  66. package/src/components/Status/types.ts +5 -5
  67. package/src/components/Switch/Switch.stories.tsx +40 -40
  68. package/src/components/Switch/Switch.tsx +75 -75
  69. package/src/components/TextWithInfo/TextWithInfo.stories.tsx +53 -53
  70. package/src/components/TextWithInfo/TextWithInfo.tsx +62 -62
  71. package/src/components/TextWithTooltip/TextWithTooltip.stories.tsx +58 -58
  72. package/src/components/ThemedPreloader/ThemedPreloader.stories.tsx +41 -41
  73. package/src/components/ThemedPreloader/ThemedPreloader.tsx +54 -54
  74. package/src/components/ThemedPreloader/components/DefaultPreloader/index.ts +1 -1
  75. package/src/components/Toaster/Toaster.stories.tsx +30 -30
  76. package/src/components/Tooltip/Tooltip.stories.tsx +19 -19
  77. package/src/components/Tooltip/Tooltip.tsx +35 -35
  78. package/src/components/Tooltip/types.ts +1 -1
  79. package/src/helpers/popper-helpers.ts +17 -17
  80. package/src/hooks/use-dropdown.ts +84 -84
  81. package/src/hooks/use-is-mounted.ts +15 -15
  82. package/src/theme/helpers.ts +76 -76
  83. package/src/vite-env.d.ts +1 -1
@@ -6656,63 +6656,63 @@
6656
6656
  return trueReactPlatformHelpers.mergeRefs(refs);
6657
6657
  }, refs);
6658
6658
  };
6659
- const avatarGreen = ` <svg\r
6660
- width="100%"\r
6661
- height="100%"\r
6662
- viewBox="0 0 32 32"\r
6663
- fill="none"\r
6664
- xmlns="http://www.w3.org/2000/svg"\r
6665
- >\r
6666
- <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />\r
6667
- <mask\r
6668
- id="mask0_0_12744"\r
6669
- style="mask-type: 'alpha';"\r
6670
- maskUnits="userSpaceOnUse"\r
6671
- x="0"\r
6672
- y="0"\r
6673
- width="32"\r
6674
- height="32"\r
6675
- >\r
6676
- <circle cx="16" cy="16" r="16" fill="white" />\r
6677
- </mask>\r
6678
- <g mask="url(#mask0_0_12744)">\r
6679
- <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />\r
6680
- <mask\r
6681
- id="mask1_0_12744"\r
6682
- style="mask-type: 'alpha';"\r
6683
- maskUnits="userSpaceOnUse"\r
6684
- x="3"\r
6685
- y="16"\r
6686
- width="26"\r
6687
- height="26"\r
6688
- >\r
6689
- <circle cx="16" cy="29" r="13" fill="white" />\r
6690
- </mask>\r
6691
- <g mask="url(#mask1_0_12744)">\r
6692
- <ellipse\r
6693
- cx="16"\r
6694
- cy="17.5"\r
6695
- rx="6"\r
6696
- ry="7.5"\r
6697
- fill="#505F79"\r
6698
- fill-opacity="0.204983"\r
6699
- />\r
6700
- </g>\r
6701
- </g>\r
6702
- <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />\r
6703
- <defs>\r
6704
- <linearGradient\r
6705
- id="paint0_linear_0_12744"\r
6706
- x1="13.347"\r
6707
- y1="46.279"\r
6708
- x2="33.5318"\r
6709
- y2="30.8088"\r
6710
- gradientUnits="userSpaceOnUse"\r
6711
- >\r
6712
- <stop stop-color="#ABD229" />\r
6713
- <stop offset="1" stop-color="#9CD03F" />\r
6714
- </linearGradient>\r
6715
- </defs>\r
6659
+ const avatarGreen = ` <svg
6660
+ width="100%"
6661
+ height="100%"
6662
+ viewBox="0 0 32 32"
6663
+ fill="none"
6664
+ xmlns="http://www.w3.org/2000/svg"
6665
+ >
6666
+ <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
6667
+ <mask
6668
+ id="mask0_0_12744"
6669
+ style="mask-type: 'alpha';"
6670
+ maskUnits="userSpaceOnUse"
6671
+ x="0"
6672
+ y="0"
6673
+ width="32"
6674
+ height="32"
6675
+ >
6676
+ <circle cx="16" cy="16" r="16" fill="white" />
6677
+ </mask>
6678
+ <g mask="url(#mask0_0_12744)">
6679
+ <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
6680
+ <mask
6681
+ id="mask1_0_12744"
6682
+ style="mask-type: 'alpha';"
6683
+ maskUnits="userSpaceOnUse"
6684
+ x="3"
6685
+ y="16"
6686
+ width="26"
6687
+ height="26"
6688
+ >
6689
+ <circle cx="16" cy="29" r="13" fill="white" />
6690
+ </mask>
6691
+ <g mask="url(#mask1_0_12744)">
6692
+ <ellipse
6693
+ cx="16"
6694
+ cy="17.5"
6695
+ rx="6"
6696
+ ry="7.5"
6697
+ fill="#505F79"
6698
+ fill-opacity="0.204983"
6699
+ />
6700
+ </g>
6701
+ </g>
6702
+ <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
6703
+ <defs>
6704
+ <linearGradient
6705
+ id="paint0_linear_0_12744"
6706
+ x1="13.347"
6707
+ y1="46.279"
6708
+ x2="33.5318"
6709
+ y2="30.8088"
6710
+ gradientUnits="userSpaceOnUse"
6711
+ >
6712
+ <stop stop-color="#ABD229" />
6713
+ <stop offset="1" stop-color="#9CD03F" />
6714
+ </linearGradient>
6715
+ </defs>
6716
6716
  </svg>`;
6717
6717
  const fileExcel = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">\r\n <rect width="20" height="20" rx="4" fill="#21A366"/>\r\n <rect width="20" height="20" rx="4" fill="url(#paint0_linear_0_16081)" style="mix-blend-mode:overlay"/>\r\n <path d="M8.00342 14.5244L10.0728 11.3062L12.1357 14.5244H14.4019L11.2217 9.73828L14.1162 5.21875H11.939L10.1108 8.2085L8.24463 5.21875H6.04834L8.93018 9.66846L5.75 14.5244H8.00342Z" fill="white"/>\r\n <defs>\r\n <linearGradient id="paint0_linear_0_16081" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">\r\n <stop stop-color="white" stop-opacity="0.245559"/>\r\n <stop offset="1" stop-opacity="0.498578"/>\r\n </linearGradient>\r\n </defs>\r\n</svg>';
6718
6718
  const fileImage = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">\r\n <rect width="20" height="20" rx="4" fill="#FF991F"/>\r\n <rect width="20" height="20" rx="4" fill="url(#paint0_linear_0_16103)" style="mix-blend-mode:overlay"/>\r\n <path fill-rule="evenodd" clip-rule="evenodd" d="M3.90113 15C3.09595 15 2.62093 14.097 3.07709 13.4335L6.67606 8.19861C7.07341 7.62064 7.9268 7.62065 8.32414 8.19861L13.0001 15H3.90113Z" fill="white"/>\r\n <path fill-rule="evenodd" clip-rule="evenodd" d="M9.53962 15L12.7076 10.2481C13.1034 9.65434 13.9758 9.65434 14.3717 10.2481L16.5031 13.4453C16.9462 14.1099 16.4698 15 15.6711 15H9.53962Z" fill="white"/>\r\n <path d="M16.0001 5.5C16.0001 6.32843 15.3285 7 14.5001 7C13.6717 7 13.0001 6.32843 13.0001 5.5C13.0001 4.67157 13.6717 4 14.5001 4C15.3285 4 16.0001 4.67157 16.0001 5.5Z" fill="white"/>\r\n <defs>\r\n <linearGradient id="paint0_linear_0_16103" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">\r\n <stop stop-color="white" stop-opacity="0.245559"/>\r\n <stop offset="1" stop-opacity="0.498578"/>\r\n </linearGradient>\r\n </defs>\r\n</svg>';
@@ -27987,7 +27987,8 @@
27987
27987
  info: {},
27988
27988
  warning: {},
27989
27989
  ok: {},
27990
- "not-ok": {}
27990
+ "not-ok": {},
27991
+ custom: {}
27991
27992
  });
27992
27993
  function _define_property$e(obj, key, value) {
27993
27994
  if (key in obj) {
@@ -28042,20 +28043,22 @@
28042
28043
  return target;
28043
28044
  }
28044
28045
  var Notification = function(param) {
28045
- var children = param.children, type = param.type, _param_isFullWidth = param.isFullWidth, isFullWidth = _param_isFullWidth === void 0 ? true : _param_isFullWidth, text = param.text, title = param.title, testId = param.testId, _param_size = param.size, size = _param_size === void 0 ? "s" : _param_size, data = param.data, tweakStyles = param.tweakStyles;
28046
+ var children = param.children, type = param.type, _param_isFullWidth = param.isFullWidth, isFullWidth = _param_isFullWidth === void 0 ? true : _param_isFullWidth, text = param.text, title = param.title, testId = param.testId, _param_size = param.size, size = _param_size === void 0 ? "s" : _param_size, data = param.data, icon = param.icon, tweakStyles = param.tweakStyles;
28046
28047
  var classes = useStyles$b({
28047
28048
  theme: tweakStyles
28048
28049
  });
28049
28050
  var hasText = trueReactPlatformHelpers.isStringNotEmpty(text);
28050
28051
  var hasTitle = trueReactPlatformHelpers.isStringNotEmpty(title);
28052
+ var isDefaultType = type !== "custom";
28053
+ var hasIcon = trueReactPlatformHelpers.isReactNodeNotEmpty(icon) || isDefaultType;
28051
28054
  var _obj2;
28052
28055
  return /* @__PURE__ */ jsxs("div", _object_spread_props$c(_object_spread$d({
28053
28056
  className: clsx(classes.root, classes[size], classes[type], (_obj2 = {}, _define_property$e(_obj2, classes.inline, !isFullWidth), _define_property$e(_obj2, classes.withTitle, hasTitle), _define_property$e(_obj2, classes.withText, hasText), _obj2))
28054
28057
  }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)), {
28055
28058
  children: [
28056
- /* @__PURE__ */ jsx("div", {
28059
+ hasIcon && /* @__PURE__ */ jsx("div", {
28057
28060
  className: classes.icon,
28058
- children: /* @__PURE__ */ jsx(Icon, {
28061
+ children: trueReactPlatformHelpers.isReactNodeNotEmpty(icon) ? renderIcon(icon) : isDefaultType && /* @__PURE__ */ jsx(Icon, {
28059
28062
  type: "status-".concat(type)
28060
28063
  })
28061
28064
  }),