@ntbjs/react-components 1.3.0-rc.46 → 1.3.0-rc.47
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.
|
@@ -21,7 +21,7 @@ var polished = require('polished');
|
|
|
21
21
|
var ContextMenu = require('./ContextMenu-4eb8fdc5.js');
|
|
22
22
|
require('./AssetPreviewTopBar-b1fe3188.js');
|
|
23
23
|
var ActionButton = require('./ActionButton-b2345555.js');
|
|
24
|
-
require('./Button-
|
|
24
|
+
require('./Button-cecb719a.js');
|
|
25
25
|
require('./Checkbox-ad9c9e54.js');
|
|
26
26
|
require('./CompactAutocompleteSelect-5676b507.js');
|
|
27
27
|
require('./CompactStarRating-d4cfae17.js');
|
|
@@ -12,20 +12,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
12
12
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
13
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
14
14
|
|
|
15
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28
|
|
16
|
-
var
|
|
17
|
-
return props.dynamic ? '150px' : 'auto';
|
|
18
|
-
});
|
|
19
|
-
var Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n width: ", ";\n position: relative;\n border-radius: 3px;\n font-family: inherit;\n font-size: 0.875rem;\n font-weight: 400;\n padding: 12px 16px;\n cursor: pointer;\n background: ", ";\n border: 2px solid ", ";\n transition: all 250ms, opacity 200ms;\n\n &:hover,\n &.dropdown-is-active {\n background: #296c58;\n border-color: #296c58;\n }\n\n ", "\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (props) {
|
|
20
|
-
return props.dynamic ? '100%' : 'auto';
|
|
21
|
-
}, function (props) {
|
|
15
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28;
|
|
16
|
+
var Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n border-radius: 3px;\n font-family: inherit;\n font-size: 0.875rem;\n font-weight: 400;\n padding: 12px 16px;\n cursor: pointer;\n background: ", ";\n border: 2px solid ", ";\n transition: all 250ms, opacity 200ms;\n\n &:hover,\n &.dropdown-is-active {\n background: #296c58;\n border-color: #296c58;\n }\n\n ", "\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (props) {
|
|
22
17
|
return props.theme.getColor('emerald-500');
|
|
23
18
|
}, function (props) {
|
|
24
19
|
return props.theme.getColor('emerald-500');
|
|
25
20
|
}, function (props) {
|
|
26
21
|
return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('white'));
|
|
27
22
|
}, function (props) {
|
|
28
|
-
return props.secondary && styled.css(
|
|
23
|
+
return props.secondary && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n background: ", ";\n border-color: ", ";\n\n ", "\n\n &:hover,\n &.dropdown-is-active {\n background: ", ";\n border-color: ", ";\n }\n "])), function (props) {
|
|
29
24
|
return props.theme.getColor('gray-200');
|
|
30
25
|
}, function (props) {
|
|
31
26
|
return props.theme.getColor('gray-200');
|
|
@@ -35,59 +30,56 @@ var Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefault
|
|
|
35
30
|
return props.theme.getColor('gray-300');
|
|
36
31
|
});
|
|
37
32
|
}, function (props) {
|
|
38
|
-
return props.outlined && styled.css(
|
|
33
|
+
return props.outlined && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n background: transparent;\n transition: none;\n\n ", "\n\n ", "\n\n &:hover,\n &.dropdown-is-active {\n background-color: #296c58;\n\n ", "\n\n ", "\n }\n "])), props.theme.themeProp('border-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-500')), props.theme.themeProp('color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-500')), props.theme.themeProp('border-color', props.theme.getColor('emerald-400'), '#296c58'), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-200')));
|
|
39
34
|
}, function (props) {
|
|
40
|
-
return props.outlined && props.secondary && styled.css(
|
|
35
|
+
return props.outlined && props.secondary && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n\n &:hover,\n &.dropdown-is-active {\n background: ", ";\n\n ", "\n\n ", "\n }\n "])), props.theme.themeProp('border-color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')), props.theme.getColor('gray-300'), props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-300')), props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('gray-700')));
|
|
41
36
|
}, function (props) {
|
|
42
|
-
return props.outlined && props.secondary && props.dropdownItems && styled.css(
|
|
37
|
+
return props.outlined && props.secondary && props.dropdownItems && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n &:hover,\n &.dropdown-is-active {\n ", "\n }\n "])), props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700')));
|
|
43
38
|
}, function (props) {
|
|
44
|
-
return props.block && styled.css(
|
|
39
|
+
return props.block && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n "])));
|
|
45
40
|
}, function (props) {
|
|
46
|
-
return props.disabled && styled.css(
|
|
41
|
+
return props.disabled && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n "])));
|
|
47
42
|
}, function (props) {
|
|
48
|
-
return props.size === 'x-small' && styled.css(
|
|
43
|
+
return props.size === 'x-small' && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n padding: 1px 16px;\n height: 24px;\n "])));
|
|
49
44
|
}, function (props) {
|
|
50
|
-
return props.size === 'small' && styled.css(
|
|
45
|
+
return props.size === 'small' && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n padding: 6px 16px;\n "])));
|
|
51
46
|
}, function (props) {
|
|
52
|
-
return props.size === 'large' && styled.css(
|
|
47
|
+
return props.size === 'large' && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n padding: 16px 16px;\n "])));
|
|
53
48
|
}, function (props) {
|
|
54
|
-
return props.singleAction && styled.css(
|
|
49
|
+
return props.singleAction && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n gap: 34px;\n border-radius: 3px !important;\n transition: all 250ms, opacity 200ms;\n "])));
|
|
55
50
|
});
|
|
56
|
-
var ButtonContent = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
57
|
-
return props.size === 'small' && styled.css(
|
|
51
|
+
var ButtonContent = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n transform: scale(1);\n opacity: 1;\n transition: all 200ms;\n\n > svg {\n width: 100%;\n max-width: 16px;\n max-height: 16px;\n margin-right: 8px;\n\n ", ";\n\n ", ";\n }\n\n ", "\n\n ", ";\n"])), function (props) {
|
|
52
|
+
return props.size === 'small' && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n max-width: 13px;\n max-height: 13px;\n "])));
|
|
58
53
|
}, function (props) {
|
|
59
|
-
return props.size === 'x-small' && styled.css(
|
|
54
|
+
return props.size === 'x-small' && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n max-width: 11px;\n max-height: 11px;\n "])));
|
|
60
55
|
}, function (props) {
|
|
61
|
-
return props.$loading && styled.css(
|
|
56
|
+
return props.$loading && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n transform: scale(0.95);\n opacity: 0;\n "])));
|
|
62
57
|
}, function (props) {
|
|
63
|
-
return props.singleAction && styled.css(
|
|
58
|
+
return props.singleAction && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n svg {\n width: 100% !important;\n height: 100% !important;\n margin-right: 24px;\n }\n "])));
|
|
64
59
|
});
|
|
65
|
-
var LoadingIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
66
|
-
return props.$loading && styled.css(
|
|
60
|
+
var LoadingIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n padding: 4px;\n background: inherit;\n opacity: 0;\n transition: opacity 200ms;\n box-sizing: border-box;\n\n ", "\n"])), function (props) {
|
|
61
|
+
return props.$loading && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
|
|
67
62
|
});
|
|
68
|
-
var LoadingIndicatorSvg = styled__default["default"].svg.attrs(defaultTheme.applyDefaultTheme)(
|
|
69
|
-
var LoadingIndicatorSvgCircle = styled__default["default"].circle.attrs(defaultTheme.applyDefaultTheme)(
|
|
70
|
-
var ButtonWrapper = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(
|
|
71
|
-
var MainButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
72
|
-
return props.dropdownItems && styled.css(
|
|
63
|
+
var LoadingIndicatorSvg = styled__default["default"].svg.attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n height: 100%;\n color: inherit;\n transform: rotate(-88deg);\n"])));
|
|
64
|
+
var LoadingIndicatorSvgCircle = styled__default["default"].circle.attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n transition: stroke-dashoffset 300ms linear;\n stroke-dasharray: 113;\n"])));
|
|
65
|
+
var ButtonWrapper = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n white-space: nowrap;\n"])));
|
|
66
|
+
var MainButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n button {\n ", ";\n\n ", ";\n }\n"])), function (props) {
|
|
67
|
+
return props.dropdownItems && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n "])));
|
|
73
68
|
}, function (props) {
|
|
74
|
-
return props.dropdownItems && props.outlined && styled.css(
|
|
69
|
+
return props.dropdownItems && props.outlined && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n border-right: none;\n "])));
|
|
75
70
|
});
|
|
76
|
-
var MainButtonContainerSingle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
77
|
-
return props.singleAction && styled.css(
|
|
71
|
+
var MainButtonContainerSingle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n width: 100%;\n ", ";\n\n button {\n ", ";\n }\n"])), function (props) {
|
|
72
|
+
return props.singleAction && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n border-radius: 3px !important;\n transition: all 250ms, opacity 200ms;\n "])));
|
|
78
73
|
}, function (props) {
|
|
79
|
-
return props.dropdownItems && styled.css(
|
|
74
|
+
return props.dropdownItems && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n "])));
|
|
80
75
|
});
|
|
81
|
-
var DropdownButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
76
|
+
var DropdownButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n\n button {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n\n ", ";\n }\n\n svg {\n color: inherit;\n height: 7px;\n width: 12px;\n\n ", ";\n }\n"])), function (props) {
|
|
82
77
|
return !props.singleAction && 'border-left: none';
|
|
83
78
|
}, function (props) {
|
|
84
79
|
return !props.singleAction && 'margin-bottom: 1px';
|
|
85
80
|
});
|
|
86
|
-
Button$1.defaultProps = {
|
|
87
|
-
dynamic: false
|
|
88
|
-
};
|
|
89
81
|
|
|
90
|
-
var _excluded = ["onClickEffect", "singleAction", "activeDropdown", "dropdownItems", "secondary", "outlined", "block", "icon", "size", "disabled", "loading", "className", "children"
|
|
82
|
+
var _excluded = ["onClickEffect", "singleAction", "activeDropdown", "dropdownItems", "secondary", "outlined", "block", "icon", "size", "disabled", "loading", "className", "children"];
|
|
91
83
|
var Button = React__default["default"].forwardRef(function Button(_ref, forwardedRef) {
|
|
92
84
|
var onClickEffect = _ref.onClickEffect,
|
|
93
85
|
_ref$singleAction = _ref.singleAction,
|
|
@@ -105,8 +97,6 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
|
|
|
105
97
|
loading = _ref.loading,
|
|
106
98
|
className = _ref.className,
|
|
107
99
|
children = _ref.children,
|
|
108
|
-
_ref$dynamic = _ref.dynamic,
|
|
109
|
-
dynamic = _ref$dynamic === void 0 ? false : _ref$dynamic,
|
|
110
100
|
props = defaultTheme._objectWithoutProperties(_ref, _excluded);
|
|
111
101
|
var _useState = React.useState(loading || false),
|
|
112
102
|
_useState2 = defaultTheme._slicedToArray(_useState, 2),
|
|
@@ -157,11 +147,8 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
|
|
|
157
147
|
var handleDropdownClose = function handleDropdownClose() {
|
|
158
148
|
setDropdownIsActive(false);
|
|
159
149
|
};
|
|
160
|
-
return React__default["default"].createElement(ButtonWrapper, null, !singleAction ? React__default["default"].createElement(
|
|
161
|
-
dynamic: dynamic
|
|
162
|
-
}, React__default["default"].createElement(MainButtonContainer, {
|
|
150
|
+
return React__default["default"].createElement(ButtonWrapper, null, !singleAction ? React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(MainButtonContainer, {
|
|
163
151
|
dropdownItems: dropdownItems,
|
|
164
|
-
dynamic: dynamic,
|
|
165
152
|
secondary: secondary,
|
|
166
153
|
outlined: outlined
|
|
167
154
|
}, React__default["default"].createElement(Button$1, defaultTheme._extends({
|
|
@@ -169,7 +156,6 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
|
|
|
169
156
|
onClick: onClickEffect,
|
|
170
157
|
singleAction: singleAction,
|
|
171
158
|
dropdownItems: dropdownItems,
|
|
172
|
-
dynamic: dynamic,
|
|
173
159
|
secondary: secondary,
|
|
174
160
|
outlined: outlined,
|
|
175
161
|
block: block,
|
|
@@ -197,7 +183,7 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
|
|
|
197
183
|
style: {
|
|
198
184
|
strokeDashoffset: "".concat(loadingStep, "px")
|
|
199
185
|
}
|
|
200
|
-
}))))), (dropdownItems || activeDropdown
|
|
186
|
+
}))))), (dropdownItems || activeDropdown) && React__default["default"].createElement(DropdownButtonContainer, {
|
|
201
187
|
dropdownItems: dropdownItems,
|
|
202
188
|
secondary: secondary,
|
|
203
189
|
outlined: outlined
|
|
@@ -261,8 +247,7 @@ Button.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
261
247
|
disabled: defaultTheme.PropTypes.bool,
|
|
262
248
|
loading: defaultTheme.PropTypes.bool,
|
|
263
249
|
className: defaultTheme.PropTypes.string,
|
|
264
|
-
children: defaultTheme.PropTypes.any.isRequired
|
|
265
|
-
dynamic: defaultTheme.PropTypes.bool
|
|
250
|
+
children: defaultTheme.PropTypes.any.isRequired
|
|
266
251
|
} : {};
|
|
267
252
|
|
|
268
253
|
exports.Button = Button;
|
package/inputs/Button/index.js
CHANGED
package/inputs/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var ActionButton = require('../ActionButton-b2345555.js');
|
|
6
|
-
var Button = require('../Button-
|
|
6
|
+
var Button = require('../Button-cecb719a.js');
|
|
7
7
|
var Checkbox = require('../Checkbox-ad9c9e54.js');
|
|
8
8
|
var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-5676b507.js');
|
|
9
9
|
var CompactStarRating = require('../CompactStarRating-d4cfae17.js');
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var AssetAction = require('../../AssetAction-
|
|
3
|
+
var AssetAction = require('../../AssetAction-122bff17.js');
|
|
4
4
|
require('../../defaultTheme-cd01e6c2.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('lodash');
|
|
@@ -39,7 +39,7 @@ require('@floating-ui/react');
|
|
|
39
39
|
require('../../ContextMenu-4eb8fdc5.js');
|
|
40
40
|
require('../../AssetPreviewTopBar-b1fe3188.js');
|
|
41
41
|
require('../../ActionButton-b2345555.js');
|
|
42
|
-
require('../../Button-
|
|
42
|
+
require('../../Button-cecb719a.js');
|
|
43
43
|
require('../../CompactStarRating-d4cfae17.js');
|
|
44
44
|
require('../../CompactTextInput-f89988be.js');
|
|
45
45
|
require('../../MultiSelect-f87624b5.js');
|
package/widgets/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var AssetAction = require('../AssetAction-
|
|
5
|
+
var AssetAction = require('../AssetAction-122bff17.js');
|
|
6
6
|
var ContextMenu = require('../ContextMenu-4eb8fdc5.js');
|
|
7
7
|
var AssetPreviewTopBar = require('../AssetPreviewTopBar-b1fe3188.js');
|
|
8
8
|
var Instructions = require('../Instructions-d1545bd4.js');
|
|
@@ -34,7 +34,7 @@ require('../close-1751121a.js');
|
|
|
34
34
|
require('react-lazy-load-image-component');
|
|
35
35
|
require('@floating-ui/react');
|
|
36
36
|
require('../ActionButton-b2345555.js');
|
|
37
|
-
require('../Button-
|
|
37
|
+
require('../Button-cecb719a.js');
|
|
38
38
|
require('../expand-more-d74e2bd2.js');
|
|
39
39
|
require('../CompactAutocompleteSelect-5676b507.js');
|
|
40
40
|
require('react-select');
|