@ntbjs/react-components 1.3.0-rc.2 → 1.3.0-rc.21
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/{AssetGallery-7266af6d.js → AssetGallery-85254aaf.js} +9 -8
- package/AsyncSelect-090b92ae.js +36 -0
- package/{Badge-aec841c8.js → Badge-757b0a39.js} +1 -1
- package/{CompactAutocompleteSelect-b68618b3.js → CompactAutocompleteSelect-96137f48.js} +3 -3
- package/{CompactStarRating-405e4508.js → CompactStarRating-15c1b812.js} +5 -5
- package/{CompactTextInput-0d53acdf.js → CompactTextInput-cfc495fc.js} +53 -39
- package/{Instructions-a3663a4e.js → Instructions-9a0fd247.js} +2 -2
- package/{MultiLevelCheckboxSelect-f3de8047.js → MultiLevelCheckboxSelect-e6e5cb90.js} +3 -3
- package/{Tabs-a8c77f71.js → Tabs-116aa951.js} +27 -19
- package/{TextArea-dd6da638.js → TextArea-a869b1a9.js} +70 -48
- package/{VerificationStatusIcon-6fe95a92.js → VerificationStatusIcon-d5bfb67a.js} +4 -1
- package/data/Badge/index.js +1 -1
- package/data/Tabs/index.js +1 -1
- package/data/index.js +3 -3
- package/inputs/AsyncSelect/index.js +13 -0
- package/inputs/CompactAutocompleteSelect/index.js +4 -4
- package/inputs/CompactStarRating/index.js +4 -4
- package/inputs/CompactTextInput/index.js +4 -4
- package/inputs/TextArea/index.js +5 -5
- package/inputs/index.js +10 -8
- package/package.json +3 -2
- package/widgets/AssetGallery/index.js +10 -9
- package/widgets/Instructions/index.js +6 -6
- package/widgets/index.js +11 -10
|
@@ -5,28 +5,29 @@ var lodash = require('lodash');
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var useMergedRefs = require('./useMergedRefs-b6d2f8fc.js');
|
|
7
7
|
var ResizeObserver = require('resize-observer-polyfill');
|
|
8
|
-
var MultiLevelCheckboxSelect = require('./MultiLevelCheckboxSelect-
|
|
8
|
+
var MultiLevelCheckboxSelect = require('./MultiLevelCheckboxSelect-e6e5cb90.js');
|
|
9
9
|
var styled = require('styled-components');
|
|
10
10
|
var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
|
|
11
11
|
var warningCircle = require('./warning-circle-24522402.js');
|
|
12
12
|
var Alert = require('./Alert-13b75102.js');
|
|
13
|
-
var Badge = require('./Badge-
|
|
13
|
+
var Badge = require('./Badge-757b0a39.js');
|
|
14
14
|
var Popover = require('./Popover-569cd272.js');
|
|
15
15
|
require('./Tab-f499ecbc.js');
|
|
16
|
-
require('./Tabs-
|
|
16
|
+
require('./Tabs-116aa951.js');
|
|
17
17
|
var Tooltip = require('./Tooltip-66daf6e3.js');
|
|
18
|
-
require('./VerificationStatusIcon-
|
|
18
|
+
require('./VerificationStatusIcon-d5bfb67a.js');
|
|
19
19
|
var ActionButton = require('./ActionButton-46735b89.js');
|
|
20
20
|
require('./Button-49f82b31.js');
|
|
21
21
|
require('./Checkbox-68dc38a8.js');
|
|
22
|
-
require('./CompactAutocompleteSelect-
|
|
23
|
-
require('./CompactStarRating-
|
|
24
|
-
require('./CompactTextInput-
|
|
22
|
+
require('./CompactAutocompleteSelect-96137f48.js');
|
|
23
|
+
require('./CompactStarRating-15c1b812.js');
|
|
24
|
+
require('./CompactTextInput-cfc495fc.js');
|
|
25
25
|
require('./MultiSelect-efd60232.js');
|
|
26
26
|
require('./Radio-32d0513a.js');
|
|
27
|
-
require('./TextArea-
|
|
27
|
+
require('./TextArea-a869b1a9.js');
|
|
28
28
|
require('./TextInput-0d109708.js');
|
|
29
29
|
require('./Switch-4a41585f.js');
|
|
30
|
+
require('./AsyncSelect-090b92ae.js');
|
|
30
31
|
var ContextMenu = require('./ContextMenu-4ec3d9f3.js');
|
|
31
32
|
var ContextMenuItem = require('./ContextMenuItem-ba2b697e.js');
|
|
32
33
|
var polished = require('polished');
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var defaultTheme = require('./defaultTheme-ea44e34a.js');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var styled = require('styled-components');
|
|
6
|
+
var reactSelectAsyncPaginate = require('react-select-async-paginate');
|
|
7
|
+
var reactSelectCreatable_esm = require('./react-select-creatable.esm-2f23d6c6.js');
|
|
8
|
+
|
|
9
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
|
+
|
|
11
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
13
|
+
|
|
14
|
+
var _templateObject;
|
|
15
|
+
var AsyncSelect$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 500;\n"])), function (props) {
|
|
16
|
+
return props.theme.primaryFontFamily;
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
var AsyncSelect = React__default['default'].forwardRef(function AsyncSelect(_ref, forwardedRef) {
|
|
20
|
+
var loadOptions = _ref.loadOptions,
|
|
21
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["loadOptions"]);
|
|
22
|
+
|
|
23
|
+
var CustomAsyncPaginate = reactSelectAsyncPaginate.withAsyncPaginate(reactSelectCreatable_esm.CreatableSelect$1);
|
|
24
|
+
return React__default['default'].createElement(AsyncSelect$1, defaultTheme._extends({
|
|
25
|
+
ref: forwardedRef
|
|
26
|
+
}, props), React__default['default'].createElement(CustomAsyncPaginate, {
|
|
27
|
+
loadOptions: loadOptions
|
|
28
|
+
}));
|
|
29
|
+
});
|
|
30
|
+
AsyncSelect.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
31
|
+
loadOptions: defaultTheme.PropTypes.func,
|
|
32
|
+
components: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string])
|
|
33
|
+
} : {};
|
|
34
|
+
AsyncSelect.defaultProps = {};
|
|
35
|
+
|
|
36
|
+
exports.AsyncSelect = AsyncSelect;
|
|
@@ -190,7 +190,7 @@ var Badge = React__default['default'].forwardRef(function Badge(_ref, forwardedR
|
|
|
190
190
|
});
|
|
191
191
|
Badge.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
192
192
|
badgeIcon: defaultTheme.PropTypes.node,
|
|
193
|
-
badgeContent: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.number]),
|
|
193
|
+
badgeContent: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.number, defaultTheme.PropTypes.func, defaultTheme.PropTypes.element]),
|
|
194
194
|
children: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.node, defaultTheme.PropTypes.string]),
|
|
195
195
|
elevated: defaultTheme.PropTypes.bool,
|
|
196
196
|
active: defaultTheme.PropTypes.bool,
|
|
@@ -5,12 +5,12 @@ var lodash = require('lodash');
|
|
|
5
5
|
var nanoid = require('nanoid');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
require('./Alert-13b75102.js');
|
|
8
|
-
require('./Badge-
|
|
8
|
+
require('./Badge-757b0a39.js');
|
|
9
9
|
require('./Popover-569cd272.js');
|
|
10
10
|
require('./Tab-f499ecbc.js');
|
|
11
|
-
require('./Tabs-
|
|
11
|
+
require('./Tabs-116aa951.js');
|
|
12
12
|
var Tooltip = require('./Tooltip-66daf6e3.js');
|
|
13
|
-
require('./VerificationStatusIcon-
|
|
13
|
+
require('./VerificationStatusIcon-d5bfb67a.js');
|
|
14
14
|
var styled = require('styled-components');
|
|
15
15
|
var Select = require('react-select');
|
|
16
16
|
var reactSelectAsyncPaginate = require('react-select-async-paginate');
|
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
var defaultTheme = require('./defaultTheme-ea44e34a.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
require('./Alert-13b75102.js');
|
|
6
|
-
require('./Badge-
|
|
6
|
+
require('./Badge-757b0a39.js');
|
|
7
7
|
require('./Popover-569cd272.js');
|
|
8
8
|
require('./Tab-f499ecbc.js');
|
|
9
|
-
require('./Tabs-
|
|
9
|
+
require('./Tabs-116aa951.js');
|
|
10
10
|
var Tooltip = require('./Tooltip-66daf6e3.js');
|
|
11
|
-
require('./VerificationStatusIcon-
|
|
11
|
+
require('./VerificationStatusIcon-d5bfb67a.js');
|
|
12
12
|
var styled = require('styled-components');
|
|
13
13
|
|
|
14
14
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -243,7 +243,7 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
|
|
|
243
243
|
setHover(false);
|
|
244
244
|
},
|
|
245
245
|
hover: hover && key + 1 <= tempRating,
|
|
246
|
-
type:
|
|
246
|
+
type: "button",
|
|
247
247
|
key: key
|
|
248
248
|
}, iconFill);
|
|
249
249
|
} else if (viewEmpty) {
|
|
@@ -263,7 +263,7 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
|
|
|
263
263
|
setHover(false);
|
|
264
264
|
},
|
|
265
265
|
hover: hover && key + 1 <= tempRating,
|
|
266
|
-
type:
|
|
266
|
+
type: "button",
|
|
267
267
|
key: key
|
|
268
268
|
}, icon);
|
|
269
269
|
}
|
|
@@ -6,12 +6,12 @@ var nanoid = require('nanoid');
|
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var editNote = require('./edit-note-c47d292e.js');
|
|
8
8
|
require('./Alert-13b75102.js');
|
|
9
|
-
require('./Badge-
|
|
9
|
+
require('./Badge-757b0a39.js');
|
|
10
10
|
require('./Popover-569cd272.js');
|
|
11
11
|
require('./Tab-f499ecbc.js');
|
|
12
|
-
require('./Tabs-
|
|
12
|
+
require('./Tabs-116aa951.js');
|
|
13
13
|
var Tooltip = require('./Tooltip-66daf6e3.js');
|
|
14
|
-
require('./VerificationStatusIcon-
|
|
14
|
+
require('./VerificationStatusIcon-d5bfb67a.js');
|
|
15
15
|
var styled = require('styled-components');
|
|
16
16
|
|
|
17
17
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -54,7 +54,7 @@ function SvgLink(props) {
|
|
|
54
54
|
}, props), _ref);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
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;
|
|
57
|
+
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, _templateObject32, _templateObject33, _templateObject34, _templateObject35;
|
|
58
58
|
var fadeIn = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n background-color: ", ";\n }\n to {\n background-color: ", ";\n }\n"])), function (props) {
|
|
59
59
|
return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
|
|
60
60
|
}, function (props) {
|
|
@@ -67,35 +67,42 @@ var fadeOut = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTh
|
|
|
67
67
|
});
|
|
68
68
|
var fadeInCheck = styled.keyframes(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
|
|
69
69
|
var fadeOutCheck = styled.keyframes(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
|
|
70
|
-
var
|
|
70
|
+
var linkColor = styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), function (props) {
|
|
71
|
+
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('emerald-500'));
|
|
72
|
+
});
|
|
73
|
+
var commonAnchorTagStyle = styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n a,\n && {\n font-size: 0.875rem;\n text-decoration: underline;\n }\n"])));
|
|
74
|
+
var readOnlyBackground = styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), function (props) {
|
|
75
|
+
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
76
|
+
});
|
|
77
|
+
var CompactTextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 24px;\n font-family: ", ";\n"])), function (props) {
|
|
71
78
|
return props.theme.primaryFontFamily;
|
|
72
79
|
});
|
|
73
|
-
var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(
|
|
80
|
+
var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n justify-content: space-between;\n height: 19px;\n display: flex;\n align-items: center;\n ", "\n"])), function (props) {
|
|
74
81
|
return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
|
|
75
82
|
}, function (props) {
|
|
76
|
-
return props.disabled && styled.css(
|
|
83
|
+
return props.disabled && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
|
|
77
84
|
});
|
|
78
|
-
var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
85
|
+
var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n height: 19px;\n flex-basis: ", ";\n"])), function (props) {
|
|
79
86
|
return props.$hasLabel ? '66.66%' : '100%';
|
|
80
87
|
});
|
|
81
|
-
var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
88
|
+
var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n display: flex;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n margin-right: 5px;\n ", "\n > svg {\n width: 13px;\n }\n"])), function (props) {
|
|
82
89
|
return props.fadeIn ? 0 : 1;
|
|
83
90
|
}, function (props) {
|
|
84
91
|
return props.fadeIn ? fadeOutCheck : fadeInCheck;
|
|
85
92
|
}, function (props) {
|
|
86
93
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
|
|
87
94
|
});
|
|
88
|
-
var InputSuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
95
|
+
var InputSuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n display: flex;\n justify-content: flex-end;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n position: relative;\n margin-top: -20px;\n margin-right: 8px;\n ", "\n > svg {\n width: 13px;\n }\n"])), function (props) {
|
|
89
96
|
return props.fadeIn ? 0 : 1;
|
|
90
97
|
}, function (props) {
|
|
91
98
|
return props.fadeIn ? fadeOutCheck : fadeInCheck;
|
|
92
99
|
}, function (props) {
|
|
93
100
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
|
|
94
101
|
});
|
|
95
|
-
var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
96
|
-
return props.theme.themeProp('background', styled.css(
|
|
102
|
+
var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n padding: 5px 10px 0 0;\n ", ";\n\n display: flex;\n align-items: center;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n color: ", ";\n\n ", "\n\n ", "\n\n > svg {\n width: 12px;\n }\n"])), function (props) {
|
|
103
|
+
return props.theme.themeProp('background', styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n linear-gradient(-90deg,\n ", " 55%,\n transparent)\n "])), function (props) {
|
|
97
104
|
return props.type === 'error' ? '#901d1d' : props.type === 'warning' ? '#816600' : props.theme.getColor('gray-700');
|
|
98
|
-
}), styled.css(
|
|
105
|
+
}), styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n linear-gradient(-90deg,\n ", " 55%,\n transparent)\n "])), function (props) {
|
|
99
106
|
return props.type === 'error' ? '#f7d5d0' : props.type === 'warning' ? '#fffebf' : props.theme.getColor('gray-100');
|
|
100
107
|
}));
|
|
101
108
|
}, function (props) {
|
|
@@ -105,12 +112,12 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
|
|
|
105
112
|
}, function (props) {
|
|
106
113
|
return props.type === 'error' && props.theme.themeProp('color', '#CB968F', '#CB968F');
|
|
107
114
|
});
|
|
108
|
-
var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(
|
|
109
|
-
return props.readOnly && styled.css(
|
|
115
|
+
var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n box-sizing: border-box;\n height: 22px;\n width: 100%;\n display: block;\n font-size: 0.875rem;\n line-height: 1rem;\n font-family: inherit;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n padding: 1px 10px;\n ", ";\n border-radius: 3px;\n border: 1px solid transparent;\n\n ", ";\n\n &&:not(:hover):not(:focus) {\n ", "\n ", ";\n ", ";\n ", ";\n ", ";\n \n ", "\n }\n\n &&:hover:not(:focus) {\n\n ", "\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n\n ", "\n & + ", " {\n opacity: 1;\n \n }\n }\n\n ", "\n ", "\n\n }\n\n &&:focus {\n ", ";\n\n ", ";\n \n ", ";\n\n ", ";\n outline: none;\n\n ", ";\n\n ", ";\n }\n\n &&::placeholder {\n color: inherit;\n opacity: 0.6;\n }\n\n ", "\n"])), function (props) {
|
|
116
|
+
return props.readOnly && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n "])));
|
|
110
117
|
}, function (props) {
|
|
111
|
-
return props.disabled && styled.css(
|
|
118
|
+
return props.disabled && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n "])));
|
|
112
119
|
}, function (props) {
|
|
113
|
-
return props.type === 'success' && styled.css(
|
|
120
|
+
return props.type === 'success' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
|
|
114
121
|
return props.type === 'success' ? fadeIn : fadeOut;
|
|
115
122
|
});
|
|
116
123
|
}, function (props) {
|
|
@@ -118,11 +125,9 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
|
|
|
118
125
|
}, function (props) {
|
|
119
126
|
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
120
127
|
}, function (props) {
|
|
121
|
-
return props.hasLink && styled.css(
|
|
122
|
-
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('emerald-500'));
|
|
123
|
-
});
|
|
128
|
+
return props.hasLink && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n ", "\n }\n &&:read-only {\n cursor: default;\n }\n "])), linkColor);
|
|
124
129
|
}, function (props) {
|
|
125
|
-
return !props.readOnly && styled.css(
|
|
130
|
+
return !props.readOnly && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n background: none;\n "])));
|
|
126
131
|
}, function (props) {
|
|
127
132
|
return props.type === 'warning' && props.theme.themeProp('background', '#634E01', '#FFFDE8');
|
|
128
133
|
}, function (props) {
|
|
@@ -132,13 +137,11 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
|
|
|
132
137
|
}, function (props) {
|
|
133
138
|
return props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)');
|
|
134
139
|
}, function (props) {
|
|
135
|
-
return props.hasLink && styled.css(
|
|
136
|
-
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('emerald-500'));
|
|
137
|
-
});
|
|
140
|
+
return props.hasLink && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n cursor: default;\n ", "\n }\n "])), linkColor);
|
|
138
141
|
}, function (props) {
|
|
139
142
|
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
140
143
|
}, function (props) {
|
|
141
|
-
return props.readOnly &&
|
|
144
|
+
return props.readOnly && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), readOnlyBackground);
|
|
142
145
|
}, function (props) {
|
|
143
146
|
return props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
144
147
|
}, function (props) {
|
|
@@ -146,35 +149,35 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
|
|
|
146
149
|
}, function (props) {
|
|
147
150
|
return props.type === 'error' && props.theme.themeProp('background', '#901d1d', '#F7D5D0');
|
|
148
151
|
}, function (props) {
|
|
149
|
-
return props.hasLink && styled.css(
|
|
152
|
+
return props.hasLink && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n cursor: pointer;\n\n &&:read-only {\n background: none !important;\n cursor: default;\n }\n "])));
|
|
150
153
|
}, InputIconContainer, function (props) {
|
|
151
|
-
return props.disabled && styled.css(
|
|
154
|
+
return props.disabled && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed;\n "])));
|
|
152
155
|
}, function (props) {
|
|
153
|
-
return props.disabled && props.hasLink && styled.css(
|
|
156
|
+
return props.disabled && props.hasLink && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed !important;\n "])));
|
|
154
157
|
}, function (props) {
|
|
155
158
|
return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
156
159
|
}, function (props) {
|
|
157
|
-
return props.readOnly &&
|
|
160
|
+
return props.readOnly && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), readOnlyBackground);
|
|
158
161
|
}, function (props) {
|
|
159
162
|
return props.type === 'error' && !props.readOnly && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
160
163
|
}, function (props) {
|
|
161
|
-
return !props.readOnly && styled.css(
|
|
164
|
+
return !props.readOnly && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
|
|
162
165
|
return props.theme.getColor('gray-600');
|
|
163
166
|
});
|
|
164
167
|
}, function (props) {
|
|
165
|
-
return props.type === 'warning' && styled.css(
|
|
168
|
+
return props.type === 'warning' && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
|
|
166
169
|
return props.theme.themeProp('border-color', '#F4E21E', '#F4E21E');
|
|
167
170
|
}, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
|
|
168
171
|
}, function (props) {
|
|
169
|
-
return props.type === 'error' && styled.css(
|
|
172
|
+
return props.type === 'error' && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
|
|
170
173
|
return props.theme.themeProp('border-color', '#D83018', '#D83018');
|
|
171
174
|
}, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
|
|
172
175
|
}, function (props) {
|
|
173
|
-
return props.bold && styled.css(
|
|
174
|
-
});
|
|
175
|
-
var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 8px;\n\n a {\n font-size: 0.875rem;\n ", ";\n }\n\n svg {\n width: 18px;\n margin-right: 8px;\n }\n"])), function (props) {
|
|
176
|
-
return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('emerald-500'), 1);
|
|
176
|
+
return props.bold && styled.css(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1rem;\n font-weight: 500;\n line-height: 1.0625;\n padding-top: 3px;\n padding-bottom: 2px;\n "])));
|
|
177
177
|
});
|
|
178
|
+
var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n padding: 5px 8px;\n\n svg {\n width: 18px;\n margin-right: 8px;\n }\n"])), commonAnchorTagStyle);
|
|
179
|
+
var StyledLink = styled__default['default'].a.attrs(defaultTheme.applyDefaultTheme)(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n"])), commonAnchorTagStyle, linkColor);
|
|
180
|
+
var ReadOnlyLinkContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n\n border: 1px solid transparent;\n border-radius: 3px;\n padding: 0 10px 1px;\n"])), readOnlyBackground);
|
|
178
181
|
|
|
179
182
|
var CompactTextInput = React__default['default'].forwardRef(function CompactTextInput(_ref, forwardedRef) {
|
|
180
183
|
var label = _ref.label,
|
|
@@ -284,8 +287,8 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
|
|
|
284
287
|
placement: "bottom-end",
|
|
285
288
|
trigger: 'mouseenter',
|
|
286
289
|
zIndex: 999999
|
|
287
|
-
}, input())), link &&
|
|
288
|
-
content: React__default['default'].createElement(LinkPopoverContainer, null, React__default['default'].createElement(
|
|
290
|
+
}, input())), link && !readOnly && React__default['default'].createElement("div", null, React__default['default'].createElement(Tooltip.Tooltip, {
|
|
291
|
+
content: React__default['default'].createElement(LinkPopoverContainer, null, activeLinkHandler ? React__default['default'].createElement(StyledLink, {
|
|
289
292
|
href: link,
|
|
290
293
|
target: linkTarget,
|
|
291
294
|
onClick: function onClick(e) {
|
|
@@ -295,12 +298,23 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
|
|
|
295
298
|
}
|
|
296
299
|
},
|
|
297
300
|
rel: "noreferrer"
|
|
301
|
+
}, React__default['default'].createElement(SvgLink, null), currentValue) : React__default['default'].createElement(StyledLink, {
|
|
302
|
+
href: link,
|
|
303
|
+
target: linkTarget,
|
|
304
|
+
rel: "noreferrer"
|
|
298
305
|
}, React__default['default'].createElement(SvgLink, null), currentValue)),
|
|
299
306
|
key: "tooltip2",
|
|
300
307
|
placement: "bottom-start",
|
|
301
308
|
zIndex: 999999,
|
|
302
309
|
interactive: true
|
|
303
|
-
}, input())),
|
|
310
|
+
}, input())), link && readOnly && React__default['default'].createElement(ReadOnlyLinkContainer, null, React__default['default'].createElement(StyledLink, {
|
|
311
|
+
href: link,
|
|
312
|
+
rel: "noreferrer",
|
|
313
|
+
style: {
|
|
314
|
+
display: 'inline-block'
|
|
315
|
+
},
|
|
316
|
+
target: linkTarget
|
|
317
|
+
}, currentValue)), !readOnly && !disabled && React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(InputIconContainer, {
|
|
304
318
|
type: type
|
|
305
319
|
}, React__default['default'].createElement(editNote.SvgEditNote, null)), lodash.isEmpty(label) && React__default['default'].createElement(InputSuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon))));
|
|
306
320
|
});
|
|
@@ -4,8 +4,8 @@ var defaultTheme = require('./defaultTheme-ea44e34a.js');
|
|
|
4
4
|
var lodash = require('lodash');
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var warningCircle = require('./warning-circle-24522402.js');
|
|
7
|
-
var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-
|
|
8
|
-
var TextArea = require('./TextArea-
|
|
7
|
+
var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-96137f48.js');
|
|
8
|
+
var TextArea = require('./TextArea-a869b1a9.js');
|
|
9
9
|
var styled = require('styled-components');
|
|
10
10
|
|
|
11
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -4,12 +4,12 @@ var defaultTheme = require('./defaultTheme-ea44e34a.js');
|
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var styled = require('styled-components');
|
|
6
6
|
require('./Alert-13b75102.js');
|
|
7
|
-
require('./Badge-
|
|
7
|
+
require('./Badge-757b0a39.js');
|
|
8
8
|
var Popover = require('./Popover-569cd272.js');
|
|
9
9
|
require('./Tab-f499ecbc.js');
|
|
10
|
-
require('./Tabs-
|
|
10
|
+
require('./Tabs-116aa951.js');
|
|
11
11
|
require('./Tooltip-66daf6e3.js');
|
|
12
|
-
require('./VerificationStatusIcon-
|
|
12
|
+
require('./VerificationStatusIcon-d5bfb67a.js');
|
|
13
13
|
var Checkbox = require('./Checkbox-68dc38a8.js');
|
|
14
14
|
var lodash = require('lodash');
|
|
15
15
|
var TextInput = require('./TextInput-0d109708.js');
|
|
@@ -11,15 +11,19 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
11
11
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
12
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
13
13
|
|
|
14
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
14
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
|
|
15
15
|
var Tabs$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: block;\n position: relative;\n ", ";\n"])), function (props) {
|
|
16
16
|
return props.backgroundColor && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n background-color: ", ";\n "])), props.backgroundColor);
|
|
17
17
|
});
|
|
18
|
-
var TabHeaders = styled__default['default'].ul.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n overflow-x: auto;\n overflow-y: hidden;\n white-space: nowrap;\n gap: 24px;\n margin: 0;\n
|
|
19
|
-
|
|
18
|
+
var TabHeaders = styled__default['default'].ul.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n overflow-x: auto;\n overflow-y: hidden;\n white-space: nowrap;\n gap: 24px;\n\n margin: 0;\n ", ";\n ", ";\n"])), function (props) {
|
|
19
|
+
return !props.customPadding && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n padding: 0;\n "])));
|
|
20
|
+
}, function (props) {
|
|
21
|
+
return props.customPadding && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n padding: 0 ", ";\n "])), props.customPadding);
|
|
22
|
+
});
|
|
23
|
+
var TabHeader = styled__default['default'].li.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n text-transform: uppercase;\n font-weight: 600;\n font-size: 0.875rem;\n display: flex;\n padding-bottom: 8px;\n letter-spacing: 0.6px;\n cursor: pointer;\n border-bottom: 1px solid;\n border-color: transparent;\n margin-bottom: 1px;\n\n ", ";\n &&:hover:not(:focus) {\n ", ";\n }\n"])), function (props) {
|
|
20
24
|
return props.theme.secondaryFontFamily;
|
|
21
25
|
}, function (props) {
|
|
22
|
-
return props.active && styled.css(
|
|
26
|
+
return props.active && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
|
|
23
27
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700'));
|
|
24
28
|
});
|
|
25
29
|
}, function (props) {
|
|
@@ -37,29 +41,27 @@ var TabHeader = styled__default['default'].li.attrs(defaultTheme.applyDefaultThe
|
|
|
37
41
|
}
|
|
38
42
|
});
|
|
39
43
|
});
|
|
40
|
-
var TabContent = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
44
|
+
var TabContent = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n"])));
|
|
45
|
+
var TabHeaderBorder = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n border-top: 1px solid;\n\n ", ";\n ", ";\n ", ";\n"])), function (props) {
|
|
41
46
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5');
|
|
47
|
+
}, function (props) {
|
|
48
|
+
return !props.customPadding && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n margin: -2px 0;\n "])));
|
|
49
|
+
}, function (props) {
|
|
50
|
+
return props.customPadding && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n margin: -2px ", ";\n "])), props.customPadding);
|
|
42
51
|
});
|
|
43
52
|
|
|
44
53
|
var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef) {
|
|
45
54
|
var children = _ref.children,
|
|
46
55
|
defaultMinHeight = _ref.defaultMinHeight,
|
|
47
|
-
|
|
56
|
+
customPadding = _ref.customPadding,
|
|
57
|
+
props = defaultTheme._objectWithoutProperties(_ref, ["children", "defaultMinHeight", "customPadding"]);
|
|
48
58
|
|
|
49
59
|
var _useState = React.useState(0),
|
|
50
60
|
_useState2 = defaultTheme._slicedToArray(_useState, 2),
|
|
51
61
|
activeTab = _useState2[0],
|
|
52
62
|
setActiveTab = _useState2[1];
|
|
53
63
|
|
|
54
|
-
var _useState3 = React.useState(),
|
|
55
|
-
_useState4 = defaultTheme._slicedToArray(_useState3, 2),
|
|
56
|
-
defaultHeight = _useState4[0],
|
|
57
|
-
setDefaultHeight = _useState4[1];
|
|
58
|
-
|
|
59
64
|
var contentRef = React.useRef(null);
|
|
60
|
-
React.useEffect(function () {
|
|
61
|
-
setDefaultHeight(defaultMinHeight);
|
|
62
|
-
}, []);
|
|
63
65
|
var tabs = React.useMemo(function () {
|
|
64
66
|
var tabs = [];
|
|
65
67
|
|
|
@@ -109,7 +111,9 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
|
|
|
109
111
|
ref: forwardedRef
|
|
110
112
|
}, props, {
|
|
111
113
|
role: "tablist"
|
|
112
|
-
}), React__default['default'].createElement(TabHeaders,
|
|
114
|
+
}), React__default['default'].createElement(TabHeaders, {
|
|
115
|
+
customPadding: customPadding
|
|
116
|
+
}, tabs.map(function (tab) {
|
|
113
117
|
return React__default['default'].createElement(TabHeader, {
|
|
114
118
|
key: tab.key,
|
|
115
119
|
hidden: tab.hidden,
|
|
@@ -119,25 +123,29 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
|
|
|
119
123
|
},
|
|
120
124
|
role: "tab"
|
|
121
125
|
}, tab.trigger);
|
|
122
|
-
})), React__default['default'].createElement(
|
|
126
|
+
})), React__default['default'].createElement(TabHeaderBorder, {
|
|
127
|
+
customPadding: customPadding
|
|
128
|
+
}), React__default['default'].createElement(TabContent, null, tabs.map(function (tab) {
|
|
123
129
|
return React__default['default'].createElement("div", {
|
|
124
130
|
ref: tab.key === (activeTab === null || activeTab === void 0 ? void 0 : activeTab.key) ? contentRef : null,
|
|
125
131
|
key: tab.key,
|
|
126
132
|
role: "tabpanel",
|
|
127
133
|
hidden: tab.key !== activeTab,
|
|
128
134
|
style: {
|
|
129
|
-
minHeight: !lodash.isEmpty(
|
|
135
|
+
minHeight: !lodash.isEmpty(defaultMinHeight) ? defaultMinHeight : ''
|
|
130
136
|
}
|
|
131
137
|
}, tab.content);
|
|
132
138
|
})));
|
|
133
139
|
});
|
|
134
140
|
Tabs.defaultProps = {
|
|
135
|
-
defaultMinHeight: ''
|
|
141
|
+
defaultMinHeight: '',
|
|
142
|
+
customPadding: 0
|
|
136
143
|
};
|
|
137
144
|
Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
138
145
|
children: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.array, defaultTheme.PropTypes.object]),
|
|
139
146
|
backgroundColor: defaultTheme.PropTypes.string,
|
|
140
|
-
defaultMinHeight: defaultTheme.PropTypes.string
|
|
147
|
+
defaultMinHeight: defaultTheme.PropTypes.string,
|
|
148
|
+
customPadding: defaultTheme.PropTypes.string
|
|
141
149
|
} : {};
|
|
142
150
|
|
|
143
151
|
exports.Tabs = Tabs;
|