@ntbjs/react-components 1.2.0-rc.98 → 1.2.0-rc.99

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 (68) hide show
  1. package/{ActionButton-adaadbae.js → ActionButton-46735b89.js} +17 -17
  2. package/{Alert-b41a748e.js → Alert-13b75102.js} +36 -33
  3. package/{AssetGallery-df037aa0.js → AssetGallery-094ed34b.js} +595 -442
  4. package/{AssetPreviewTopBar-ac66b804.js → AssetPreviewTopBar-912c3469.js} +38 -35
  5. package/{Badge-4a2a9f6b.js → Badge-aec841c8.js} +67 -47
  6. package/{Button-4c60d2f4.js → Button-49f82b31.js} +77 -66
  7. package/{Checkbox-84dd9aa1.js → Checkbox-68dc38a8.js} +50 -46
  8. package/{CompactAutocompleteSelect-bf5e8820.js → CompactAutocompleteSelect-b68618b3.js} +143 -110
  9. package/{CompactStarRating-017d64cb.js → CompactStarRating-405e4508.js} +105 -90
  10. package/{CompactTextInput-8132e42d.js → CompactTextInput-0d53acdf.js} +104 -93
  11. package/{ContextMenu-4427ad11.js → ContextMenu-4ec3d9f3.js} +7 -8
  12. package/{ContextMenuItem-b5f97001.js → ContextMenuItem-ba2b697e.js} +32 -29
  13. package/{InputGroup-9d1cd295.js → InputGroup-49fbc423.js} +7 -8
  14. package/{Instructions-235aa0fc.js → Instructions-b6d3e7bd.js} +111 -97
  15. package/{MultiLevelCheckboxSelect-4f51a1a2.js → MultiLevelCheckboxSelect-f3de8047.js} +204 -143
  16. package/{MultiSelect-53089d1e.js → MultiSelect-efd60232.js} +120 -91
  17. package/{Popover-938e6bfc.js → Popover-569cd272.js} +33 -32
  18. package/{Radio-1d09e729.js → Radio-32d0513a.js} +33 -33
  19. package/{SectionSeparator-d9ae38b7.js → SectionSeparator-259a22ed.js} +7 -8
  20. package/{Switch-15d9a890.js → Switch-4a41585f.js} +40 -39
  21. package/{Tab-88f77a44.js → Tab-f499ecbc.js} +9 -10
  22. package/{Tabs-e64ecfaa.js → Tabs-a8c77f71.js} +38 -48
  23. package/{TextArea-cbe713eb.js → TextArea-a5579cc8.js} +140 -151
  24. package/{TextInput-b9414cc6.js → TextInput-0d109708.js} +70 -64
  25. package/{Tooltip-22238771.js → Tooltip-66daf6e3.js} +20 -21
  26. package/{VerificationStatusIcon-99a54d5d.js → VerificationStatusIcon-6fe95a92.js} +33 -24
  27. package/{close-1751121a.js → close-ebf2f3cf.js} +12 -8
  28. package/data/Alert/index.js +2 -3
  29. package/data/Badge/index.js +2 -3
  30. package/data/Popover/index.js +3 -4
  31. package/data/Tab/index.js +2 -3
  32. package/data/Tabs/index.js +3 -4
  33. package/data/Tooltip/index.js +3 -4
  34. package/data/index.js +9 -10
  35. package/{index-1e234d23.js → defaultTheme-ea44e34a.js} +352 -39
  36. package/edit-note-c47d292e.js +41 -0
  37. package/{expand-more-d74e2bd2.js → expand-more-94585605.js} +12 -8
  38. package/inputs/ActionButton/index.js +2 -3
  39. package/inputs/Button/index.js +6 -7
  40. package/inputs/Checkbox/index.js +2 -3
  41. package/inputs/CompactAutocompleteSelect/index.js +13 -14
  42. package/inputs/CompactStarRating/index.js +10 -11
  43. package/inputs/CompactTextInput/index.js +11 -12
  44. package/inputs/MultiSelect/index.js +4 -5
  45. package/inputs/Radio/index.js +2 -3
  46. package/inputs/Switch/index.js +2 -3
  47. package/inputs/TextArea/index.js +11 -12
  48. package/inputs/TextInput/index.js +3 -4
  49. package/inputs/index.js +28 -31
  50. package/layout/InputGroup/index.js +2 -3
  51. package/layout/SectionSeparator/index.js +2 -3
  52. package/layout/index.js +3 -4
  53. package/package.json +5 -5
  54. package/{react-select-creatable.esm-31bd2caf.js → react-select-creatable.esm-2f23d6c6.js} +1272 -1470
  55. package/{shift-away-subtle-c3c2f2b2.js → shift-away-subtle-0bed9a3c.js} +1 -1
  56. package/ssr/index.js +3 -1
  57. package/{warning-circle-478e65cc.js → warning-circle-24522402.js} +12 -8
  58. package/widgets/AssetGallery/index.js +31 -33
  59. package/widgets/AssetPreview/AssetPreviewTopBar/index.js +3 -4
  60. package/widgets/ContextMenu/ContextMenuItem/index.js +2 -3
  61. package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +7 -8
  62. package/widgets/ContextMenu/index.js +2 -3
  63. package/widgets/Instructions/index.js +17 -18
  64. package/widgets/index.js +33 -35
  65. package/CompactAutocompleteSelectAsync-e76bf873.js +0 -28
  66. package/defaultTheme-8bd3e0b9.js +0 -271
  67. package/edit-note-cefe2215.js +0 -37
  68. package/inputs/CompactAutocompleteSelectAsync/index.js +0 -11
@@ -1,8 +1,7 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-8bd3e0b9.js');
3
+ var defaultTheme = require('./defaultTheme-ea44e34a.js');
4
4
  var React = require('react');
5
- var index = require('./index-1e234d23.js');
6
5
  var styled = require('styled-components');
7
6
  var polished = require('polished');
8
7
 
@@ -12,12 +11,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
11
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
13
12
 
14
13
  var _templateObject, _templateObject2;
15
- var ActionButton$1 = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n width: ", ";\n height: ", ";\n border: 0;\n color: inherit;\n background-color: transparent;\n ", "\n background-position: center;\n background-repeat: no-repeat;\n background-size: 0 0;\n transition: background-size 250ms ease;\n cursor: pointer;\n\n ", "\n\n ", "\n\n &:disabled {\n opacity: 0.5;\n color: inherit;\n cursor: not-allowed;\n }\n\n svg {\n width: 100%;\n max-height: 20px;\n max-width: 20px;\n pointer-events: none;\n transition: color 250ms;\n }\n"])), function (props) {
14
+ var ActionButton$1 = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n width: ", ";\n height: ", ";\n border: 0;\n color: inherit;\n background-color: transparent;\n ", "\n background-position: center;\n background-repeat: no-repeat;\n background-size: 0 0;\n transition: background-size 250ms ease;\n cursor: pointer;\n\n ", "\n\n ", "\n\n &:disabled {\n opacity: 0.5;\n color: inherit;\n cursor: not-allowed;\n }\n\n svg {\n width: 100%;\n max-height: 20px;\n max-width: 20px;\n pointer-events: none;\n transition: color 250ms;\n }\n"])), function (props) {
16
15
  return "".concat(props.buttonWidthHeight[0], "px");
17
16
  }, function (props) {
18
17
  return "".concat(props.buttonWidthHeight[1], "px");
19
18
  }, function (props) {
20
19
  var _props$backgroundColo, _props$backgroundColo2, _props$backgroundColo3, _props$backgroundColo4;
20
+
21
21
  var darkThemeBgColor = (_props$backgroundColo = props === null || props === void 0 ? void 0 : (_props$backgroundColo2 = props.backgroundColors) === null || _props$backgroundColo2 === void 0 ? void 0 : _props$backgroundColo2[0]) !== null && _props$backgroundColo !== void 0 ? _props$backgroundColo : props.theme.getColor('gray-600');
22
22
  var lightThemeBgColor = (_props$backgroundColo3 = props === null || props === void 0 ? void 0 : (_props$backgroundColo4 = props.backgroundColors) === null || _props$backgroundColo4 === void 0 ? void 0 : _props$backgroundColo4[1]) !== null && _props$backgroundColo3 !== void 0 ? _props$backgroundColo3 : props.theme.getColor('gray-200');
23
23
  return props.theme.themeProp('background-image', "radial-gradient(circle at center, ".concat(darkThemeBgColor, " 50%, transparent 50%)"), "radial-gradient(circle at center, ".concat(lightThemeBgColor, " 50%, transparent 50%)"));
@@ -29,15 +29,15 @@ var ActionButton$1 = styled__default["default"].button.attrs(defaultTheme.applyD
29
29
  return props.useShadow ? props.theme.themeProp('box-shadow', "0px 3px 6px ".concat(polished.rgba(props.theme.getColor('black'), 0.7)), "0px 3px 6px ".concat(props.theme.getColor('black'))) : null;
30
30
  });
31
31
 
32
- var _excluded = ["icon", "disabled", "active", "onClick", "buttonWidthHeight"];
33
- var ActionButton = React__default["default"].forwardRef(function ActionButton(_ref, forwardedRef) {
32
+ var ActionButton = React__default['default'].forwardRef(function ActionButton(_ref, forwardedRef) {
34
33
  var icon = _ref.icon,
35
- disabled = _ref.disabled,
36
- active = _ref.active,
37
- onClick = _ref.onClick,
38
- buttonWidthHeight = _ref.buttonWidthHeight,
39
- props = defaultTheme._objectWithoutProperties(_ref, _excluded);
40
- return React__default["default"].createElement(ActionButton$1, defaultTheme._extends({
34
+ disabled = _ref.disabled,
35
+ active = _ref.active,
36
+ onClick = _ref.onClick,
37
+ buttonWidthHeight = _ref.buttonWidthHeight,
38
+ props = defaultTheme._objectWithoutProperties(_ref, ["icon", "disabled", "active", "onClick", "buttonWidthHeight"]);
39
+
40
+ return React__default['default'].createElement(ActionButton$1, defaultTheme._extends({
41
41
  ref: forwardedRef,
42
42
  disabled: disabled,
43
43
  active: active,
@@ -46,12 +46,12 @@ var ActionButton = React__default["default"].forwardRef(function ActionButton(_r
46
46
  }, props), icon);
47
47
  });
48
48
  ActionButton.propTypes = process.env.NODE_ENV !== "production" ? {
49
- icon: index.PropTypes.element.isRequired,
50
- disabled: index.PropTypes.bool,
51
- active: index.PropTypes.bool,
52
- onClick: index.PropTypes.func,
53
- backgroundColors: index.PropTypes.arrayOf(index.PropTypes.string),
54
- buttonWidthHeight: index.PropTypes.array
49
+ icon: defaultTheme.PropTypes.element.isRequired,
50
+ disabled: defaultTheme.PropTypes.bool,
51
+ active: defaultTheme.PropTypes.bool,
52
+ onClick: defaultTheme.PropTypes.func,
53
+ backgroundColors: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string),
54
+ buttonWidthHeight: defaultTheme.PropTypes.array
55
55
  } : {};
56
56
  ActionButton.defaultProps = {
57
57
  onClick: function onClick() {},
@@ -1,8 +1,7 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-8bd3e0b9.js');
3
+ var defaultTheme = require('./defaultTheme-ea44e34a.js');
4
4
  var React = require('react');
5
- var index = require('./index-1e234d23.js');
6
5
  var styled = require('styled-components');
7
6
  var lodash = require('lodash');
8
7
 
@@ -12,8 +11,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
11
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
13
12
 
14
13
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
15
- var Alert$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n padding: ", ";\n width: ", ";\n box-sizing: border-box;\n\n ", "\n\n ", "\n \n ", "\n \n text-align: ", ";\n"])), function (props) {
14
+ var Alert$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n padding: ", ";\n width: ", ";\n box-sizing: border-box;\n\n ", "\n\n ", "\n \n ", "\n \n text-align: ", ";\n"])), function (props) {
16
15
  var _props$verticalPaddin, _props$horizontalPadd;
16
+
17
17
  var verticalPadding = (_props$verticalPaddin = props.verticalPadding) !== null && _props$verticalPaddin !== void 0 ? _props$verticalPaddin : 17;
18
18
  var horizontalPadding = (_props$horizontalPadd = props.horizontalPadding) !== null && _props$horizontalPadd !== void 0 ? _props$horizontalPadd : 30;
19
19
  return "".concat(verticalPadding, "px ").concat(horizontalPadding, "px");
@@ -28,7 +28,7 @@ var Alert$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultThem
28
28
  }, function (props) {
29
29
  return props.align === 'center' ? 'center' : 'left';
30
30
  });
31
- var AlertRender = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n word-break: break-word;\n ", "\n ", "\n ", ";\n\n svg {\n width: 12px;\n height: 12px;\n }\n\n span {\n flex: 1;\n padding-left: 5px;\n ", ";\n }\n"])), function (props) {
31
+ var AlertRender = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n word-break: break-word;\n ", "\n ", "\n ", ";\n\n svg {\n width: 12px;\n height: 12px;\n }\n\n span {\n flex: 1;\n padding-left: 5px;\n ", ";\n }\n"])), function (props) {
32
32
  return props.lineHeight ? "line-height: ".concat(props.lineHeight, "px;") : null;
33
33
  }, function (props) {
34
34
  return props.fontSize ? "font-size: ".concat(props.fontSize, "px;") : null;
@@ -38,24 +38,25 @@ var AlertRender = styled__default["default"].div.attrs(defaultTheme.applyDefault
38
38
  return props.lineClamp ? styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n "])), props.lineClamp) : null;
39
39
  });
40
40
 
41
- var _excluded = ["warning", "error", "type", "alertMessage", "align", "icon", "fontSize", "lineHeight", "lineClamp", "verticalPadding", "horizontalPadding", "width"];
42
- var Alert = React__default["default"].forwardRef(function Alert(_ref, forwardedRef) {
41
+ var Alert = React__default['default'].forwardRef(function Alert(_ref, forwardedRef) {
43
42
  var warning = _ref.warning,
44
- error = _ref.error,
45
- type = _ref.type,
46
- alertMessage = _ref.alertMessage,
47
- align = _ref.align,
48
- icon = _ref.icon,
49
- fontSize = _ref.fontSize,
50
- lineHeight = _ref.lineHeight,
51
- lineClamp = _ref.lineClamp,
52
- verticalPadding = _ref.verticalPadding,
53
- horizontalPadding = _ref.horizontalPadding,
54
- width = _ref.width,
55
- props = defaultTheme._objectWithoutProperties(_ref, _excluded);
43
+ error = _ref.error,
44
+ type = _ref.type,
45
+ alertMessage = _ref.alertMessage,
46
+ align = _ref.align,
47
+ icon = _ref.icon,
48
+ fontSize = _ref.fontSize,
49
+ lineHeight = _ref.lineHeight,
50
+ lineClamp = _ref.lineClamp,
51
+ verticalPadding = _ref.verticalPadding,
52
+ horizontalPadding = _ref.horizontalPadding,
53
+ width = _ref.width,
54
+ props = defaultTheme._objectWithoutProperties(_ref, ["warning", "error", "type", "alertMessage", "align", "icon", "fontSize", "lineHeight", "lineClamp", "verticalPadding", "horizontalPadding", "width"]);
55
+
56
56
  var isWarning = false;
57
57
  var isError = false;
58
58
  var isInfo = true;
59
+
59
60
  if (!lodash.isEmpty(type)) {
60
61
  if (type === 'warning') {
61
62
  isWarning = true;
@@ -67,11 +68,13 @@ var Alert = React__default["default"].forwardRef(function Alert(_ref, forwardedR
67
68
  } else {
68
69
  isWarning = warning;
69
70
  isError = error;
71
+
70
72
  if (isWarning || isError) {
71
73
  isInfo = false;
72
74
  }
73
75
  }
74
- return React__default["default"].createElement(Alert$1, defaultTheme._extends({
76
+
77
+ return React__default['default'].createElement(Alert$1, defaultTheme._extends({
75
78
  ref: forwardedRef,
76
79
  alertMessage: alertMessage,
77
80
  warning: isWarning,
@@ -81,25 +84,25 @@ var Alert = React__default["default"].forwardRef(function Alert(_ref, forwardedR
81
84
  verticalPadding: verticalPadding,
82
85
  horizontalPadding: horizontalPadding,
83
86
  width: width
84
- }, props), React__default["default"].createElement(AlertRender, {
87
+ }, props), React__default['default'].createElement(AlertRender, {
85
88
  fontSize: fontSize,
86
89
  lineHeight: lineHeight,
87
90
  lineClamp: lineClamp
88
- }, icon, " ", React__default["default"].createElement("span", null, alertMessage)));
91
+ }, icon, " ", React__default['default'].createElement("span", null, alertMessage)));
89
92
  });
90
93
  Alert.propTypes = process.env.NODE_ENV !== "production" ? {
91
- warning: index.PropTypes.bool,
92
- error: index.PropTypes.bool,
93
- type: index.PropTypes.oneOf(['warning', 'error', 'info']),
94
- icon: index.PropTypes.element,
95
- align: index.PropTypes.oneOf(['left', 'center']),
96
- alertMessage: index.PropTypes.string,
97
- fontSize: index.PropTypes.number,
98
- lineHeight: index.PropTypes.number,
99
- lineClamp: index.PropTypes.number,
100
- verticalPadding: index.PropTypes.number,
101
- horizontalPadding: index.PropTypes.number,
102
- width: index.PropTypes.number
94
+ warning: defaultTheme.PropTypes.bool,
95
+ error: defaultTheme.PropTypes.bool,
96
+ type: defaultTheme.PropTypes.oneOf(['warning', 'error', 'info']),
97
+ icon: defaultTheme.PropTypes.element,
98
+ align: defaultTheme.PropTypes.oneOf(['left', 'center']),
99
+ alertMessage: defaultTheme.PropTypes.string,
100
+ fontSize: defaultTheme.PropTypes.number,
101
+ lineHeight: defaultTheme.PropTypes.number,
102
+ lineClamp: defaultTheme.PropTypes.number,
103
+ verticalPadding: defaultTheme.PropTypes.number,
104
+ horizontalPadding: defaultTheme.PropTypes.number,
105
+ width: defaultTheme.PropTypes.number
103
106
  } : {};
104
107
  Alert.defaultProps = {
105
108
  warning: false,