@ntbjs/react-components 1.3.0-rc.57 → 1.3.0-rc.58
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-1b7b7cec.js');
|
|
22
22
|
require('./AssetPreviewTopBar-08ca770d.js');
|
|
23
23
|
var ActionButton = require('./ActionButton-f84f83eb.js');
|
|
24
|
-
require('./Button-
|
|
24
|
+
require('./Button-873454c8.js');
|
|
25
25
|
require('./Checkbox-acd15d02.js');
|
|
26
26
|
require('./CompactAutocompleteSelect-b0d2ce48.js');
|
|
27
27
|
require('./CompactStarRating-957641bf.js');
|
|
@@ -12,8 +12,8 @@ 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, _templateObject29, _templateObject30;
|
|
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) {
|
|
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, _templateObject29, _templateObject30, _templateObject31;
|
|
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\n ", ";\n"])), function (props) {
|
|
17
17
|
return props.theme.getColor('emerald-500');
|
|
18
18
|
}, function (props) {
|
|
19
19
|
return props.theme.getColor('emerald-500');
|
|
@@ -46,43 +46,45 @@ var Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefault
|
|
|
46
46
|
}, function (props) {
|
|
47
47
|
return props.size === 'large' && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n padding: 16px 16px;\n "])));
|
|
48
48
|
}, function (props) {
|
|
49
|
-
return props.singleAction && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n gap:
|
|
49
|
+
return props.singleAction && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n gap: ", "px;\n border-radius: 3px !important;\n transition: all 250ms, opacity 200ms;\n "])), props.singleActionGap);
|
|
50
|
+
}, function (props) {
|
|
51
|
+
return props.width && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n min-width: ", "px;\n justify-content: center;\n "])), props.width);
|
|
50
52
|
});
|
|
51
|
-
var ButtonContent = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
52
|
-
return props.size === 'small' && styled.css(
|
|
53
|
+
var ButtonContent = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = 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) {
|
|
54
|
+
return props.size === 'small' && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n max-width: 13px;\n max-height: 13px;\n "])));
|
|
53
55
|
}, function (props) {
|
|
54
|
-
return props.size === 'x-small' && styled.css(
|
|
56
|
+
return props.size === 'x-small' && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n max-width: 11px;\n max-height: 11px;\n "])));
|
|
55
57
|
}, function (props) {
|
|
56
|
-
return props.$loading && styled.css(
|
|
58
|
+
return props.$loading && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n transform: scale(0.95);\n opacity: 0;\n "])));
|
|
57
59
|
}, function (props) {
|
|
58
|
-
return props.singleAction && styled.css(
|
|
60
|
+
return props.singleAction && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n svg {\n width: 100% !important;\n height: 100% !important;\n margin-right: 24px;\n }\n "])));
|
|
59
61
|
});
|
|
60
|
-
var LoadingIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
61
|
-
return props.$loading && styled.css(
|
|
62
|
+
var LoadingIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = 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) {
|
|
63
|
+
return props.$loading && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
|
|
62
64
|
});
|
|
63
|
-
var LoadingIndicatorSvg = styled__default["default"].svg.attrs(defaultTheme.applyDefaultTheme)(
|
|
64
|
-
var LoadingIndicatorSvgCircle = styled__default["default"].circle.attrs(defaultTheme.applyDefaultTheme)(
|
|
65
|
-
var ButtonWrapper = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(
|
|
66
|
-
var MainButtonWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
67
|
-
return (props.activeDropdown || props.dropdownItems) && !props.outlined && styled.css(
|
|
65
|
+
var LoadingIndicatorSvg = styled__default["default"].svg.attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n height: 100%;\n color: inherit;\n transform: rotate(-88deg);\n"])));
|
|
66
|
+
var LoadingIndicatorSvgCircle = styled__default["default"].circle.attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n transition: stroke-dashoffset 300ms linear;\n stroke-dasharray: 113;\n"])));
|
|
67
|
+
var ButtonWrapper = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n white-space: nowrap;\n display: flex;\n"])));
|
|
68
|
+
var MainButtonWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n border-radius: 3px;\n ", ";\n"])), function (props) {
|
|
69
|
+
return (props.activeDropdown || props.dropdownItems) && !props.outlined && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n background: ", ";\n "])), props.secondary ? props.theme.getColor('gray-200') : props.theme.getColor('emerald-500'));
|
|
68
70
|
});
|
|
69
|
-
var MainButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
70
|
-
return (props.activeDropdown || props.dropdownItems) && styled.css(
|
|
71
|
+
var MainButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n button {\n ", ";\n\n ", ";\n }\n"])), function (props) {
|
|
72
|
+
return (props.activeDropdown || props.dropdownItems) && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n "])));
|
|
71
73
|
}, function (props) {
|
|
72
|
-
return (props.activeDropdown || props.dropdownItems) && props.outlined && styled.css(
|
|
74
|
+
return (props.activeDropdown || props.dropdownItems) && props.outlined && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n border-right: none;\n "])));
|
|
73
75
|
});
|
|
74
|
-
var MainButtonContainerSingle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
75
|
-
return props.singleAction && styled.css(
|
|
76
|
+
var MainButtonContainerSingle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n width: 100%;\n ", ";\n\n button {\n ", ";\n }\n"])), function (props) {
|
|
77
|
+
return props.singleAction && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n border-radius: 3px !important;\n transition: all 250ms, opacity 200ms;\n "])));
|
|
76
78
|
}, function (props) {
|
|
77
|
-
return (props.activeDropdown || props.dropdownItems) && styled.css(
|
|
79
|
+
return (props.activeDropdown || props.dropdownItems) && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n "])));
|
|
78
80
|
});
|
|
79
|
-
var DropdownButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
81
|
+
var DropdownButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject31 || (_templateObject31 = 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) {
|
|
80
82
|
return !props.singleAction && 'border-left: none';
|
|
81
83
|
}, function (props) {
|
|
82
84
|
return !props.singleAction && 'margin-bottom: 1px';
|
|
83
85
|
});
|
|
84
86
|
|
|
85
|
-
var _excluded = ["onClickEffect", "singleAction", "activeDropdown", "dropdownItems", "secondary", "outlined", "block", "icon", "size", "disabled", "loading", "className", "children"];
|
|
87
|
+
var _excluded = ["onClickEffect", "singleAction", "activeDropdown", "dropdownItems", "secondary", "outlined", "block", "icon", "size", "disabled", "loading", "className", "children", "singleActionGap", "width"];
|
|
86
88
|
var Button = React__default["default"].forwardRef(function Button(_ref, forwardedRef) {
|
|
87
89
|
var onClickEffect = _ref.onClickEffect,
|
|
88
90
|
_ref$singleAction = _ref.singleAction,
|
|
@@ -100,6 +102,9 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
|
|
|
100
102
|
loading = _ref.loading,
|
|
101
103
|
className = _ref.className,
|
|
102
104
|
children = _ref.children,
|
|
105
|
+
_ref$singleActionGap = _ref.singleActionGap,
|
|
106
|
+
singleActionGap = _ref$singleActionGap === void 0 ? 34 : _ref$singleActionGap,
|
|
107
|
+
width = _ref.width,
|
|
103
108
|
props = defaultTheme._objectWithoutProperties(_ref, _excluded);
|
|
104
109
|
var _useState = React.useState(loading || false),
|
|
105
110
|
_useState2 = defaultTheme._slicedToArray(_useState, 2),
|
|
@@ -110,6 +115,7 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
|
|
|
110
115
|
loadingStep = _useState4[0],
|
|
111
116
|
setLoadingStep = _useState4[1];
|
|
112
117
|
var loadingInterval = React.useRef(0);
|
|
118
|
+
console.log('singleActionGap', singleActionGap);
|
|
113
119
|
var _useState5 = React.useState(false),
|
|
114
120
|
_useState6 = defaultTheme._slicedToArray(_useState5, 2),
|
|
115
121
|
dropdownIsActive = _useState6[0],
|
|
@@ -170,7 +176,8 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
|
|
|
170
176
|
size: size,
|
|
171
177
|
disabled: disabled,
|
|
172
178
|
className: className,
|
|
173
|
-
"aria-busy": disabled
|
|
179
|
+
"aria-busy": disabled,
|
|
180
|
+
width: width
|
|
174
181
|
}, props), React__default["default"].createElement(ButtonContent, {
|
|
175
182
|
$loading: loadingState,
|
|
176
183
|
size: size
|
|
@@ -204,6 +211,7 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
|
|
|
204
211
|
}, React__default["default"].createElement(Button$1, {
|
|
205
212
|
ref: forwardedRef,
|
|
206
213
|
singleAction: singleAction,
|
|
214
|
+
singleActionGap: singleActionGap,
|
|
207
215
|
dropdownItems: dropdownItems,
|
|
208
216
|
secondary: secondary,
|
|
209
217
|
outlined: outlined,
|
|
@@ -211,7 +219,8 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
|
|
|
211
219
|
size: size,
|
|
212
220
|
disabled: disabled,
|
|
213
221
|
onClick: handleDropdownButtonClick,
|
|
214
|
-
className: dropdownIsActive ? 'dropdown-is-active' : ''
|
|
222
|
+
className: dropdownIsActive ? 'dropdown-is-active' : '',
|
|
223
|
+
width: width
|
|
215
224
|
}, React__default["default"].createElement(expandMore.SvgExpandMore, null))))) : React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(MainButtonContainerSingle, {
|
|
216
225
|
dropdownItems: dropdownItems,
|
|
217
226
|
secondary: secondary,
|
|
@@ -228,6 +237,7 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
|
|
|
228
237
|
}, React__default["default"].createElement(Button$1, {
|
|
229
238
|
ref: forwardedRef,
|
|
230
239
|
singleAction: singleAction,
|
|
240
|
+
singleActionGap: singleActionGap,
|
|
231
241
|
dropdownItems: dropdownItems,
|
|
232
242
|
secondary: secondary,
|
|
233
243
|
outlined: outlined,
|
|
@@ -235,7 +245,8 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
|
|
|
235
245
|
size: size,
|
|
236
246
|
disabled: disabled,
|
|
237
247
|
onClick: handleDropdownButtonClick,
|
|
238
|
-
className: dropdownIsActive ? 'dropdown-is-active' : ''
|
|
248
|
+
className: dropdownIsActive ? 'dropdown-is-active' : '',
|
|
249
|
+
width: width
|
|
239
250
|
}, React__default["default"].createElement(ButtonContent, {
|
|
240
251
|
$loading: loadingState,
|
|
241
252
|
size: size,
|
|
@@ -255,7 +266,9 @@ Button.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
255
266
|
disabled: defaultTheme.PropTypes.bool,
|
|
256
267
|
loading: defaultTheme.PropTypes.bool,
|
|
257
268
|
className: defaultTheme.PropTypes.string,
|
|
258
|
-
children: defaultTheme.PropTypes.any.isRequired
|
|
269
|
+
children: defaultTheme.PropTypes.any.isRequired,
|
|
270
|
+
singleActionGap: defaultTheme.PropTypes.number,
|
|
271
|
+
width: defaultTheme.PropTypes.number
|
|
259
272
|
} : {};
|
|
260
273
|
|
|
261
274
|
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-f84f83eb.js');
|
|
6
|
-
var Button = require('../Button-
|
|
6
|
+
var Button = require('../Button-873454c8.js');
|
|
7
7
|
var Checkbox = require('../Checkbox-acd15d02.js');
|
|
8
8
|
var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-b0d2ce48.js');
|
|
9
9
|
var CompactStarRating = require('../CompactStarRating-957641bf.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-df8163e5.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-1b7b7cec.js');
|
|
40
40
|
require('../../AssetPreviewTopBar-08ca770d.js');
|
|
41
41
|
require('../../ActionButton-f84f83eb.js');
|
|
42
|
-
require('../../Button-
|
|
42
|
+
require('../../Button-873454c8.js');
|
|
43
43
|
require('../../CompactStarRating-957641bf.js');
|
|
44
44
|
require('../../CompactTextInput-05b5d847.js');
|
|
45
45
|
require('../../MultiSelect-d6294329.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-df8163e5.js');
|
|
6
6
|
var ContextMenu = require('../ContextMenu-1b7b7cec.js');
|
|
7
7
|
var AssetPreviewTopBar = require('../AssetPreviewTopBar-08ca770d.js');
|
|
8
8
|
var Instructions = require('../Instructions-48ff279a.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-f84f83eb.js');
|
|
37
|
-
require('../Button-
|
|
37
|
+
require('../Button-873454c8.js');
|
|
38
38
|
require('../expand-more-d74e2bd2.js');
|
|
39
39
|
require('../CompactAutocompleteSelect-b0d2ce48.js');
|
|
40
40
|
require('react-select');
|