@ntbjs/react-components 1.2.0-rc.97 → 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.
- package/{ActionButton-adaadbae.js → ActionButton-46735b89.js} +17 -17
- package/{Alert-b41a748e.js → Alert-13b75102.js} +36 -33
- package/{AssetGallery-3c21105d.js → AssetGallery-094ed34b.js} +595 -442
- package/{AssetPreviewTopBar-ac66b804.js → AssetPreviewTopBar-912c3469.js} +38 -35
- package/{Badge-4a2a9f6b.js → Badge-aec841c8.js} +67 -47
- package/{Button-4c60d2f4.js → Button-49f82b31.js} +77 -66
- package/{Checkbox-84dd9aa1.js → Checkbox-68dc38a8.js} +50 -46
- package/{CompactAutocompleteSelect-bf5e8820.js → CompactAutocompleteSelect-b68618b3.js} +143 -110
- package/{CompactStarRating-017d64cb.js → CompactStarRating-405e4508.js} +105 -90
- package/{CompactTextInput-8132e42d.js → CompactTextInput-0d53acdf.js} +104 -93
- package/{ContextMenu-4427ad11.js → ContextMenu-4ec3d9f3.js} +7 -8
- package/{ContextMenuItem-b5f97001.js → ContextMenuItem-ba2b697e.js} +32 -29
- package/{InputGroup-9d1cd295.js → InputGroup-49fbc423.js} +7 -8
- package/{Instructions-235aa0fc.js → Instructions-b6d3e7bd.js} +111 -97
- package/{MultiLevelCheckboxSelect-4f51a1a2.js → MultiLevelCheckboxSelect-f3de8047.js} +204 -143
- package/{MultiSelect-53089d1e.js → MultiSelect-efd60232.js} +120 -91
- package/{Popover-938e6bfc.js → Popover-569cd272.js} +33 -32
- package/{Radio-1d09e729.js → Radio-32d0513a.js} +33 -33
- package/{SectionSeparator-d9ae38b7.js → SectionSeparator-259a22ed.js} +7 -8
- package/{Switch-15d9a890.js → Switch-4a41585f.js} +40 -39
- package/{Tab-88f77a44.js → Tab-f499ecbc.js} +9 -10
- package/{Tabs-e64ecfaa.js → Tabs-a8c77f71.js} +38 -48
- package/{TextArea-cbe713eb.js → TextArea-a5579cc8.js} +140 -151
- package/{TextInput-b9414cc6.js → TextInput-0d109708.js} +70 -64
- package/{Tooltip-22238771.js → Tooltip-66daf6e3.js} +20 -21
- package/{VerificationStatusIcon-99a54d5d.js → VerificationStatusIcon-6fe95a92.js} +33 -24
- package/{close-1751121a.js → close-ebf2f3cf.js} +12 -8
- package/data/Alert/index.js +2 -3
- package/data/Badge/index.js +2 -3
- package/data/Popover/index.js +3 -4
- package/data/Tab/index.js +2 -3
- package/data/Tabs/index.js +3 -4
- package/data/Tooltip/index.js +3 -4
- package/data/index.js +9 -10
- package/{index-1e234d23.js → defaultTheme-ea44e34a.js} +352 -39
- package/edit-note-c47d292e.js +41 -0
- package/{expand-more-d74e2bd2.js → expand-more-94585605.js} +12 -8
- package/inputs/ActionButton/index.js +2 -3
- package/inputs/Button/index.js +6 -7
- package/inputs/Checkbox/index.js +2 -3
- package/inputs/CompactAutocompleteSelect/index.js +13 -14
- package/inputs/CompactStarRating/index.js +10 -11
- package/inputs/CompactTextInput/index.js +11 -12
- package/inputs/MultiSelect/index.js +4 -5
- package/inputs/Radio/index.js +2 -3
- package/inputs/Switch/index.js +2 -3
- package/inputs/TextArea/index.js +11 -12
- package/inputs/TextInput/index.js +3 -4
- package/inputs/index.js +28 -31
- package/layout/InputGroup/index.js +2 -3
- package/layout/SectionSeparator/index.js +2 -3
- package/layout/index.js +3 -4
- package/package.json +5 -5
- package/{react-select-creatable.esm-31bd2caf.js → react-select-creatable.esm-2f23d6c6.js} +1272 -1470
- package/{shift-away-subtle-c3c2f2b2.js → shift-away-subtle-0bed9a3c.js} +1 -1
- package/ssr/index.js +3 -1
- package/{warning-circle-478e65cc.js → warning-circle-24522402.js} +12 -8
- package/widgets/AssetGallery/index.js +31 -33
- package/widgets/AssetPreview/AssetPreviewTopBar/index.js +3 -4
- package/widgets/ContextMenu/ContextMenuItem/index.js +2 -3
- package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +7 -8
- package/widgets/ContextMenu/index.js +2 -3
- package/widgets/Instructions/index.js +17 -18
- package/widgets/index.js +33 -35
- package/CompactAutocompleteSelectAsync-e76bf873.js +0 -28
- package/defaultTheme-8bd3e0b9.js +0 -271
- package/edit-note-cefe2215.js +0 -37
- package/inputs/CompactAutocompleteSelectAsync/index.js +0 -11
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
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[
|
|
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
|
|
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
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
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:
|
|
50
|
-
disabled:
|
|
51
|
-
active:
|
|
52
|
-
onClick:
|
|
53
|
-
backgroundColors:
|
|
54
|
-
buttonWidthHeight:
|
|
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-
|
|
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[
|
|
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[
|
|
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
|
|
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
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
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, ["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
|
-
|
|
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[
|
|
87
|
+
}, props), React__default['default'].createElement(AlertRender, {
|
|
85
88
|
fontSize: fontSize,
|
|
86
89
|
lineHeight: lineHeight,
|
|
87
90
|
lineClamp: lineClamp
|
|
88
|
-
}, icon, " ", React__default[
|
|
91
|
+
}, icon, " ", React__default['default'].createElement("span", null, alertMessage)));
|
|
89
92
|
});
|
|
90
93
|
Alert.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
91
|
-
warning:
|
|
92
|
-
error:
|
|
93
|
-
type:
|
|
94
|
-
icon:
|
|
95
|
-
align:
|
|
96
|
-
alertMessage:
|
|
97
|
-
fontSize:
|
|
98
|
-
lineHeight:
|
|
99
|
-
lineClamp:
|
|
100
|
-
verticalPadding:
|
|
101
|
-
horizontalPadding:
|
|
102
|
-
width:
|
|
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,
|