@ntbjs/react-components 1.3.0-rc.31 → 1.3.0-rc.33

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 (64) hide show
  1. package/{ActionButton-98202fed.js → ActionButton-b2345555.js} +17 -18
  2. package/{Alert-13b75102.js → Alert-d69a3f95.js} +20 -24
  3. package/{AssetAction-e7e78b13.js → AssetAction-f2fb01c8.js} +461 -632
  4. package/{AssetPreviewTopBar-1ef9dafb.js → AssetPreviewTopBar-f800a63a.js} +31 -35
  5. package/{Badge-757b0a39.js → Badge-e984e6f5.js} +28 -49
  6. package/{Button-4a6f72b6.js → Button-17bb2db1.js} +53 -65
  7. package/{Checkbox-68dc38a8.js → Checkbox-ad9c9e54.js} +30 -35
  8. package/{CompactAutocompleteSelect-b0c7e4ec.js → CompactAutocompleteSelect-76b297c1.js} +82 -114
  9. package/{CompactStarRating-d8674f9e.js → CompactStarRating-158381c8.js} +71 -87
  10. package/{CompactTextInput-9b8d7c49.js → CompactTextInput-90c41fe2.js} +71 -83
  11. package/{ContextMenu-4ec3d9f3.js → ContextMenu-4eb8fdc5.js} +6 -6
  12. package/{ContextMenuItem-ba2b697e.js → ContextMenuItem-c536b460.js} +22 -26
  13. package/{InputGroup-49fbc423.js → InputGroup-a89a0ea3.js} +6 -6
  14. package/{Instructions-29555f04.js → Instructions-52e8f6dd.js} +73 -92
  15. package/{MultiLevelCheckboxSelect-068d98fc.js → MultiLevelCheckboxSelect-3fa37f40.js} +102 -164
  16. package/{MultiSelect-efd60232.js → MultiSelect-32e3ed90.js} +71 -101
  17. package/{Popover-2605c9d0.js → Popover-85ce744d.js} +31 -33
  18. package/{Radio-32d0513a.js → Radio-55db4781.js} +21 -22
  19. package/{SectionSeparator-259a22ed.js → SectionSeparator-af8dc1ce.js} +6 -6
  20. package/{Switch-4a41585f.js → Switch-04ecd8d0.js} +25 -27
  21. package/{Tab-f499ecbc.js → Tab-e43241f0.js} +7 -7
  22. package/{Tabs-116aa951.js → Tabs-cfc08c6b.js} +21 -33
  23. package/{TextArea-6cc4023f.js → TextArea-77fd5efd.js} +66 -75
  24. package/{TextInput-0d109708.js → TextInput-9a995449.js} +41 -48
  25. package/{Tooltip-66daf6e3.js → Tooltip-a68a7e49.js} +13 -13
  26. package/{VerificationStatusIcon-d5bfb67a.js → VerificationStatusIcon-7b0e23fe.js} +20 -30
  27. package/{close-ebf2f3cf.js → close-1751121a.js} +8 -12
  28. package/data/Alert/index.js +2 -2
  29. package/data/Badge/index.js +2 -2
  30. package/data/Popover/index.js +3 -3
  31. package/data/Tab/index.js +2 -2
  32. package/data/Tabs/index.js +3 -3
  33. package/data/Tooltip/index.js +3 -3
  34. package/data/index.js +9 -9
  35. package/{defaultTheme-ea44e34a.js → defaultTheme-cd01e6c2.js} +212 -260
  36. package/edit-note-cefe2215.js +37 -0
  37. package/{expand-more-94585605.js → expand-more-d74e2bd2.js} +8 -12
  38. package/inputs/ActionButton/index.js +2 -2
  39. package/inputs/Button/index.js +6 -6
  40. package/inputs/Checkbox/index.js +2 -2
  41. package/inputs/CompactAutocompleteSelect/index.js +13 -13
  42. package/inputs/CompactStarRating/index.js +10 -10
  43. package/inputs/CompactTextInput/index.js +11 -11
  44. package/inputs/MultiSelect/index.js +4 -4
  45. package/inputs/Radio/index.js +2 -2
  46. package/inputs/Switch/index.js +2 -2
  47. package/inputs/TextArea/index.js +11 -11
  48. package/inputs/TextInput/index.js +3 -3
  49. package/inputs/index.js +28 -28
  50. package/layout/InputGroup/index.js +2 -2
  51. package/layout/SectionSeparator/index.js +2 -2
  52. package/layout/index.js +3 -3
  53. package/package.json +1 -1
  54. package/{react-select-creatable.esm-2f23d6c6.js → react-select-creatable.esm-753a67f1.js} +1494 -1275
  55. package/{shift-away-subtle-0bed9a3c.js → shift-away-subtle-631cd794.js} +1 -1
  56. package/ssr/index.js +1 -3
  57. package/widgets/AssetGallery/index.js +32 -32
  58. package/widgets/AssetPreview/AssetPreviewTopBar/index.js +3 -3
  59. package/widgets/ContextMenu/ContextMenuItem/index.js +2 -2
  60. package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +6 -6
  61. package/widgets/ContextMenu/index.js +2 -2
  62. package/widgets/Instructions/index.js +16 -16
  63. package/widgets/index.js +32 -32
  64. package/edit-note-c47d292e.js +0 -41
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-ea44e34a.js');
3
+ var defaultTheme = require('./defaultTheme-cd01e6c2.js');
4
4
  var React = require('react');
5
5
  var styled = require('styled-components');
6
6
  var polished = require('polished');
@@ -11,13 +11,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
11
11
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
12
12
 
13
13
  var _templateObject, _templateObject2;
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-width: ", ";\n max-height: ", ";\n\n pointer-events: none;\n transition: color 250ms;\n }\n"])), function (props) {
15
- return "".concat(props.buttonWidthHeight[0], "px");
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-width: ", ";\n max-height: ", ";\n\n pointer-events: none;\n transition: color 250ms;\n }\n"])), function (props) {
15
+ return "".concat(props.actionWidthHeight[0], "px");
16
16
  }, function (props) {
17
- return "".concat(props.buttonWidthHeight[1], "px");
17
+ return "".concat(props.actionWidthHeight[1], "px");
18
18
  }, function (props) {
19
19
  var _props$backgroundColo, _props$backgroundColo2, _props$backgroundColo3, _props$backgroundColo4;
20
-
21
20
  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
21
  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
22
  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%)"));
@@ -28,25 +27,25 @@ var ActionButton$1 = styled__default['default'].button.attrs(defaultTheme.applyD
28
27
  }, function (props) {
29
28
  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
29
  }, function (props) {
31
- return "".concat(props.buttonWidthHeight[0] - 15, "px");
30
+ return "".concat(props.actionWidthHeight[0] - 15, "px");
32
31
  }, function (props) {
33
- return "".concat(props.buttonWidthHeight[1] - 15, "px");
32
+ return "".concat(props.actionWidthHeight[1] - 15, "px");
34
33
  });
35
34
 
36
- var ActionButton = React__default['default'].forwardRef(function ActionButton(_ref, forwardedRef) {
35
+ var _excluded = ["icon", "disabled", "active", "onClick", "actionWidthHeight"];
36
+ var ActionButton = React__default["default"].forwardRef(function ActionButton(_ref, forwardedRef) {
37
37
  var icon = _ref.icon,
38
- disabled = _ref.disabled,
39
- active = _ref.active,
40
- onClick = _ref.onClick,
41
- buttonWidthHeight = _ref.buttonWidthHeight,
42
- props = defaultTheme._objectWithoutProperties(_ref, ["icon", "disabled", "active", "onClick", "buttonWidthHeight"]);
43
-
44
- return React__default['default'].createElement(ActionButton$1, defaultTheme._extends({
38
+ disabled = _ref.disabled,
39
+ active = _ref.active,
40
+ onClick = _ref.onClick,
41
+ actionWidthHeight = _ref.actionWidthHeight,
42
+ props = defaultTheme._objectWithoutProperties(_ref, _excluded);
43
+ return React__default["default"].createElement(ActionButton$1, defaultTheme._extends({
45
44
  ref: forwardedRef,
46
45
  disabled: disabled,
47
46
  active: active,
48
47
  onClick: onClick,
49
- buttonWidthHeight: buttonWidthHeight
48
+ actionWidthHeight: actionWidthHeight
50
49
  }, props), icon);
51
50
  });
52
51
  ActionButton.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -55,11 +54,11 @@ ActionButton.propTypes = process.env.NODE_ENV !== "production" ? {
55
54
  active: defaultTheme.PropTypes.bool,
56
55
  onClick: defaultTheme.PropTypes.func,
57
56
  backgroundColors: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string),
58
- buttonWidthHeight: defaultTheme.PropTypes.array
57
+ actionWidthHeight: defaultTheme.PropTypes.array
59
58
  } : {};
60
59
  ActionButton.defaultProps = {
61
60
  onClick: function onClick() {},
62
- buttonWidthHeight: [40, 40]
61
+ actionWidthHeight: [40, 40]
63
62
  };
64
63
 
65
64
  exports.ActionButton = ActionButton;
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-ea44e34a.js');
3
+ var defaultTheme = require('./defaultTheme-cd01e6c2.js');
4
4
  var React = require('react');
5
5
  var styled = require('styled-components');
6
6
  var lodash = require('lodash');
@@ -11,9 +11,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
11
11
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
12
12
 
13
13
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
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) {
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) {
15
15
  var _props$verticalPaddin, _props$horizontalPadd;
16
-
17
16
  var verticalPadding = (_props$verticalPaddin = props.verticalPadding) !== null && _props$verticalPaddin !== void 0 ? _props$verticalPaddin : 17;
18
17
  var horizontalPadding = (_props$horizontalPadd = props.horizontalPadding) !== null && _props$horizontalPadd !== void 0 ? _props$horizontalPadd : 30;
19
18
  return "".concat(verticalPadding, "px ").concat(horizontalPadding, "px");
@@ -28,7 +27,7 @@ var Alert$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultThem
28
27
  }, function (props) {
29
28
  return props.align === 'center' ? 'center' : 'left';
30
29
  });
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) {
30
+ 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
31
  return props.lineHeight ? "line-height: ".concat(props.lineHeight, "px;") : null;
33
32
  }, function (props) {
34
33
  return props.fontSize ? "font-size: ".concat(props.fontSize, "px;") : null;
@@ -38,25 +37,24 @@ var AlertRender = styled__default['default'].div.attrs(defaultTheme.applyDefault
38
37
  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
38
  });
40
39
 
41
- var Alert = React__default['default'].forwardRef(function Alert(_ref, forwardedRef) {
40
+ var _excluded = ["warning", "error", "type", "alertMessage", "align", "icon", "fontSize", "lineHeight", "lineClamp", "verticalPadding", "horizontalPadding", "width"];
41
+ var Alert = React__default["default"].forwardRef(function Alert(_ref, forwardedRef) {
42
42
  var warning = _ref.warning,
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
-
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, _excluded);
56
55
  var isWarning = false;
57
56
  var isError = false;
58
57
  var isInfo = true;
59
-
60
58
  if (!lodash.isEmpty(type)) {
61
59
  if (type === 'warning') {
62
60
  isWarning = true;
@@ -68,13 +66,11 @@ var Alert = React__default['default'].forwardRef(function Alert(_ref, forwardedR
68
66
  } else {
69
67
  isWarning = warning;
70
68
  isError = error;
71
-
72
69
  if (isWarning || isError) {
73
70
  isInfo = false;
74
71
  }
75
72
  }
76
-
77
- return React__default['default'].createElement(Alert$1, defaultTheme._extends({
73
+ return React__default["default"].createElement(Alert$1, defaultTheme._extends({
78
74
  ref: forwardedRef,
79
75
  alertMessage: alertMessage,
80
76
  warning: isWarning,
@@ -84,11 +80,11 @@ var Alert = React__default['default'].forwardRef(function Alert(_ref, forwardedR
84
80
  verticalPadding: verticalPadding,
85
81
  horizontalPadding: horizontalPadding,
86
82
  width: width
87
- }, props), React__default['default'].createElement(AlertRender, {
83
+ }, props), React__default["default"].createElement(AlertRender, {
88
84
  fontSize: fontSize,
89
85
  lineHeight: lineHeight,
90
86
  lineClamp: lineClamp
91
- }, icon, " ", React__default['default'].createElement("span", null, alertMessage)));
87
+ }, icon, " ", React__default["default"].createElement("span", null, alertMessage)));
92
88
  });
93
89
  Alert.propTypes = process.env.NODE_ENV !== "production" ? {
94
90
  warning: defaultTheme.PropTypes.bool,