@ntbjs/react-components 1.3.0-rc.4 → 1.3.0-rc.41
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/.eslintrc +7 -8
- package/{ActionButton-46735b89.js → ActionButton-581e717e.js} +23 -18
- package/{Alert-13b75102.js → Alert-b79a8fcc.js} +30 -29
- package/{AssetGallery-7d05ac94.js → AssetAction-06d40708.js} +790 -655
- package/AssetPreviewTopBar-1b5dfde2.js +118 -0
- package/{Badge-757b0a39.js → Badge-a35c7018.js} +44 -54
- package/Button-70230131.js +284 -0
- package/Checkbox-92d07052.js +152 -0
- package/CompactAutocompleteSelect-c7a11d3d.js +478 -0
- package/CompactStarRating-86673c4f.js +343 -0
- package/CompactTextInput-f1824946.js +380 -0
- package/{ContextMenu-4ec3d9f3.js → ContextMenu-999756c8.js} +9 -7
- package/ContextMenuItem-ae4357ba.js +114 -0
- package/{InputGroup-49fbc423.js → InputGroup-0423e24c.js} +9 -7
- package/{Instructions-e5947be9.js → Instructions-9910f44d.js} +109 -82
- package/{MultiLevelCheckboxSelect-b897d605.js → MultiLevelCheckboxSelect-7a036b16.js} +158 -168
- package/MultiSelect-9d8c24e5.js +406 -0
- package/{Popover-569cd272.js → Popover-0d9a689b.js} +24 -24
- package/Radio-a0610a91.js +90 -0
- package/{SectionSeparator-259a22ed.js → SectionSeparator-5025c8f4.js} +9 -7
- package/Switch-b7193858.js +122 -0
- package/{Tab-f499ecbc.js → Tab-7c817d4d.js} +10 -8
- package/{Tabs-a8c77f71.js → Tabs-318feff9.js} +54 -44
- package/TextArea-ecfd3418.js +382 -0
- package/TextInput-91d6341d.js +252 -0
- package/{Tooltip-66daf6e3.js → Tooltip-478ec993.js} +16 -14
- package/{VerificationStatusIcon-d5bfb67a.js → VerificationStatusIcon-ecec5f07.js} +30 -32
- package/{close-ebf2f3cf.js → close-1751121a.js} +8 -12
- package/data/Alert/index.js +2 -2
- package/data/Badge/index.js +2 -2
- package/data/Popover/index.js +3 -3
- package/data/Tab/index.js +2 -2
- package/data/Tabs/index.js +3 -3
- package/data/Tooltip/index.js +3 -3
- package/data/index.js +9 -9
- package/{defaultTheme-ea44e34a.js → defaultTheme-573a9150.js} +205 -263
- package/edit-note-cefe2215.js +37 -0
- package/{expand-more-94585605.js → expand-more-d74e2bd2.js} +8 -12
- package/inputs/ActionButton/index.js +2 -2
- package/inputs/Button/index.js +6 -6
- package/inputs/Checkbox/index.js +2 -2
- package/inputs/CompactAutocompleteSelect/index.js +13 -13
- package/inputs/CompactStarRating/index.js +10 -10
- package/inputs/CompactTextInput/index.js +11 -11
- package/inputs/MultiSelect/index.js +4 -4
- package/inputs/Radio/index.js +2 -2
- package/inputs/Switch/index.js +2 -2
- package/inputs/TextArea/index.js +12 -12
- package/inputs/TextInput/index.js +3 -3
- package/inputs/index.js +28 -28
- package/layout/InputGroup/index.js +2 -2
- package/layout/SectionSeparator/index.js +2 -2
- package/layout/index.js +3 -3
- package/package.json +6 -5
- package/{react-select-creatable.esm-2f23d6c6.js → react-select-creatable.esm-8bf8566a.js} +1500 -1074
- package/{shift-away-subtle-0bed9a3c.js → shift-away-subtle-a9da38b8.js} +1 -1
- package/ssr/index.js +1 -3
- package/widgets/AssetGallery/index.js +34 -32
- package/widgets/AssetPreview/AssetPreviewTopBar/index.js +3 -3
- package/widgets/ContextMenu/ContextMenuItem/index.js +2 -2
- package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +9 -7
- package/widgets/ContextMenu/index.js +2 -2
- package/widgets/Instructions/index.js +16 -17
- package/widgets/index.js +37 -35
- package/AssetPreviewTopBar-912c3469.js +0 -99
- package/Button-49f82b31.js +0 -264
- package/Checkbox-68dc38a8.js +0 -140
- package/CompactAutocompleteSelect-755b1869.js +0 -451
- package/CompactStarRating-bcfb78ac.js +0 -339
- package/CompactTextInput-9e507306.js +0 -349
- package/ContextMenuItem-ba2b697e.js +0 -110
- package/MultiSelect-efd60232.js +0 -377
- package/Radio-32d0513a.js +0 -86
- package/Switch-4a41585f.js +0 -107
- package/TextArea-8f62da6e.js +0 -353
- package/TextInput-0d109708.js +0 -236
- package/edit-note-c47d292e.js +0 -41
- package/warning-circle-24522402.js +0 -41
|
@@ -1,349 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var defaultTheme = require('./defaultTheme-ea44e34a.js');
|
|
4
|
-
var lodash = require('lodash');
|
|
5
|
-
var nanoid = require('nanoid');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var editNote = require('./edit-note-c47d292e.js');
|
|
8
|
-
require('./Alert-13b75102.js');
|
|
9
|
-
require('./Badge-757b0a39.js');
|
|
10
|
-
require('./Popover-569cd272.js');
|
|
11
|
-
require('./Tab-f499ecbc.js');
|
|
12
|
-
require('./Tabs-a8c77f71.js');
|
|
13
|
-
var Tooltip = require('./Tooltip-66daf6e3.js');
|
|
14
|
-
require('./VerificationStatusIcon-d5bfb67a.js');
|
|
15
|
-
var styled = require('styled-components');
|
|
16
|
-
|
|
17
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
18
|
-
|
|
19
|
-
function _interopNamespace(e) {
|
|
20
|
-
if (e && e.__esModule) return e;
|
|
21
|
-
var n = Object.create(null);
|
|
22
|
-
if (e) {
|
|
23
|
-
Object.keys(e).forEach(function (k) {
|
|
24
|
-
if (k !== 'default') {
|
|
25
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
26
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
27
|
-
enumerable: true,
|
|
28
|
-
get: function () {
|
|
29
|
-
return e[k];
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
}
|
|
35
|
-
n['default'] = e;
|
|
36
|
-
return Object.freeze(n);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
40
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
41
|
-
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
42
|
-
|
|
43
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
44
|
-
|
|
45
|
-
var _ref = /*#__PURE__*/React__namespace.createElement("path", {
|
|
46
|
-
fill: "currentColor",
|
|
47
|
-
d: "M9 10H5c-1.38 0-2.56-.49-3.54-1.46S0 6.39 0 5s.49-2.56 1.46-3.54S3.62 0 5 0h4v2H5c-.83 0-1.54.29-2.13.88s-.88 1.29-.88 2.13.29 1.54.88 2.13 1.29.88 2.13.88h4v2zM6 6V4h8v2H6zm5 4V8h4c.83 0 1.54-.29 2.13-.88s.88-1.29.88-2.13-.29-1.54-.88-2.13-1.29-.88-2.13-.88h-4V0h4c1.38 0 2.56.49 3.54 1.46S20 3.61 20 5s-.49 2.56-1.46 3.54S16.39 10 15 10h-4z"
|
|
48
|
-
});
|
|
49
|
-
|
|
50
|
-
function SvgLink(props) {
|
|
51
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
52
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
53
|
-
viewBox: "0 0 20 10"
|
|
54
|
-
}, props), _ref);
|
|
55
|
-
}
|
|
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;
|
|
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
|
-
return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
|
|
60
|
-
}, function (props) {
|
|
61
|
-
return props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)');
|
|
62
|
-
});
|
|
63
|
-
var fadeOut = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n from {\n background-color: ", ";\n }\n to {\n background-color: ", ";\n }\n"])), function (props) {
|
|
64
|
-
return props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)');
|
|
65
|
-
}, function (props) {
|
|
66
|
-
return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
|
|
67
|
-
});
|
|
68
|
-
var fadeInCheck = styled.keyframes(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
|
|
69
|
-
var fadeOutCheck = styled.keyframes(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
|
|
70
|
-
var CompactTextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 24px;\n font-family: ", ";\n"])), function (props) {
|
|
71
|
-
return props.theme.primaryFontFamily;
|
|
72
|
-
});
|
|
73
|
-
var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = 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
|
-
return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
|
|
75
|
-
}, function (props) {
|
|
76
|
-
return props.disabled && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
|
|
77
|
-
});
|
|
78
|
-
var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n height: 19px;\n flex-basis: ", ";\n"])), function (props) {
|
|
79
|
-
return props.$hasLabel ? '66.66%' : '100%';
|
|
80
|
-
});
|
|
81
|
-
var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = 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
|
-
return props.fadeIn ? 0 : 1;
|
|
83
|
-
}, function (props) {
|
|
84
|
-
return props.fadeIn ? fadeOutCheck : fadeInCheck;
|
|
85
|
-
}, function (props) {
|
|
86
|
-
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
|
|
87
|
-
});
|
|
88
|
-
var InputSuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = 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
|
-
return props.fadeIn ? 0 : 1;
|
|
90
|
-
}, function (props) {
|
|
91
|
-
return props.fadeIn ? fadeOutCheck : fadeInCheck;
|
|
92
|
-
}, function (props) {
|
|
93
|
-
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
|
|
94
|
-
});
|
|
95
|
-
var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = 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) {
|
|
96
|
-
return props.theme.themeProp('background', styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n linear-gradient(-90deg,\n ", " 55%,\n transparent)\n "])), function (props) {
|
|
97
|
-
return props.type === 'error' ? '#901d1d' : props.type === 'warning' ? '#816600' : props.theme.getColor('gray-700');
|
|
98
|
-
}), styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n linear-gradient(-90deg,\n ", " 55%,\n transparent)\n "])), function (props) {
|
|
99
|
-
return props.type === 'error' ? '#f7d5d0' : props.type === 'warning' ? '#fffebf' : props.theme.getColor('gray-100');
|
|
100
|
-
}));
|
|
101
|
-
}, function (props) {
|
|
102
|
-
return props.theme.getColor('gray-400');
|
|
103
|
-
}, function (props) {
|
|
104
|
-
return props.type === 'warning' && props.theme.themeProp('color', '#C3AF43', '#C3AF43');
|
|
105
|
-
}, function (props) {
|
|
106
|
-
return props.type === 'error' && props.theme.themeProp('color', '#CB968F', '#CB968F');
|
|
107
|
-
});
|
|
108
|
-
var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = 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 text-overflow: ellipsis;\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) {
|
|
109
|
-
return props.readOnly && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n "])));
|
|
110
|
-
}, function (props) {
|
|
111
|
-
return props.disabled && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n "])));
|
|
112
|
-
}, function (props) {
|
|
113
|
-
return props.type === 'success' && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
|
|
114
|
-
return props.type === 'success' ? fadeIn : fadeOut;
|
|
115
|
-
});
|
|
116
|
-
}, function (props) {
|
|
117
|
-
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
118
|
-
}, function (props) {
|
|
119
|
-
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
120
|
-
}, function (props) {
|
|
121
|
-
return props.hasLink && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n ", "\n }\n &&:read-only {\n cursor: default;\n }\n "])), function (props) {
|
|
122
|
-
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('emerald-500'));
|
|
123
|
-
});
|
|
124
|
-
}, function (props) {
|
|
125
|
-
return !props.readOnly && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n background: none;\n "])));
|
|
126
|
-
}, function (props) {
|
|
127
|
-
return props.type === 'warning' && props.theme.themeProp('background', '#634E01', '#FFFDE8');
|
|
128
|
-
}, function (props) {
|
|
129
|
-
return props.type === 'error' && props.theme.themeProp('background', '#7f1b1b', '#FBEAE6');
|
|
130
|
-
}, function (props) {
|
|
131
|
-
return props.edit && props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)');
|
|
132
|
-
}, function (props) {
|
|
133
|
-
return props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)');
|
|
134
|
-
}, function (props) {
|
|
135
|
-
return props.hasLink && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n cursor: default;\n ", "\n }\n "])), function (props) {
|
|
136
|
-
return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('emerald-500'));
|
|
137
|
-
});
|
|
138
|
-
}, function (props) {
|
|
139
|
-
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
140
|
-
}, function (props) {
|
|
141
|
-
return props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
142
|
-
}, function (props) {
|
|
143
|
-
return props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
144
|
-
}, function (props) {
|
|
145
|
-
return props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFFEBF');
|
|
146
|
-
}, function (props) {
|
|
147
|
-
return props.type === 'error' && props.theme.themeProp('background', '#901d1d', '#F7D5D0');
|
|
148
|
-
}, function (props) {
|
|
149
|
-
return props.hasLink && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n cursor: pointer;\n\n &&:read-only {\n background: none !important;\n cursor: default;\n }\n "])));
|
|
150
|
-
}, InputIconContainer, function (props) {
|
|
151
|
-
return props.disabled && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed;\n "])));
|
|
152
|
-
}, function (props) {
|
|
153
|
-
return props.disabled && props.hasLink && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed !important;\n "])));
|
|
154
|
-
}, function (props) {
|
|
155
|
-
return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
156
|
-
}, function (props) {
|
|
157
|
-
return props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
158
|
-
}, function (props) {
|
|
159
|
-
return props.type === 'error' && !props.readOnly && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
|
|
160
|
-
}, function (props) {
|
|
161
|
-
return !props.readOnly && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
|
|
162
|
-
return props.theme.getColor('gray-600');
|
|
163
|
-
});
|
|
164
|
-
}, function (props) {
|
|
165
|
-
return props.type === 'warning' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
|
|
166
|
-
return props.theme.themeProp('border-color', '#F4E21E', '#F4E21E');
|
|
167
|
-
}, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
|
|
168
|
-
}, function (props) {
|
|
169
|
-
return props.type === 'error' && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
|
|
170
|
-
return props.theme.themeProp('border-color', '#D83018', '#D83018');
|
|
171
|
-
}, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
|
|
172
|
-
}, function (props) {
|
|
173
|
-
return props.bold && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1rem;\n font-weight: 500;\n line-height: 1.0625;\n padding-top: 3px;\n padding-bottom: 2px;\n "])));
|
|
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);
|
|
177
|
-
});
|
|
178
|
-
|
|
179
|
-
var CompactTextInput = React__default['default'].forwardRef(function CompactTextInput(_ref, forwardedRef) {
|
|
180
|
-
var label = _ref.label,
|
|
181
|
-
inputType = _ref.inputType,
|
|
182
|
-
name = _ref.name,
|
|
183
|
-
defaultValue = _ref.defaultValue,
|
|
184
|
-
value = _ref.value,
|
|
185
|
-
placeholder = _ref.placeholder,
|
|
186
|
-
link = _ref.link,
|
|
187
|
-
linkTarget = _ref.linkTarget,
|
|
188
|
-
linkHandler = _ref.linkHandler,
|
|
189
|
-
activeLinkHandler = _ref.activeLinkHandler,
|
|
190
|
-
autoSelect = _ref.autoSelect,
|
|
191
|
-
readOnly = _ref.readOnly,
|
|
192
|
-
disabled = _ref.disabled,
|
|
193
|
-
edit = _ref.edit,
|
|
194
|
-
type = _ref.type,
|
|
195
|
-
descriptionToolTip = _ref.descriptionToolTip,
|
|
196
|
-
bold = _ref.bold,
|
|
197
|
-
hidden = _ref.hidden,
|
|
198
|
-
onChangeProp = _ref.onChange,
|
|
199
|
-
onFocusProp = _ref.onFocus,
|
|
200
|
-
onBlurProp = _ref.onBlur,
|
|
201
|
-
loadingIcon = _ref.loadingIcon,
|
|
202
|
-
successIcon = _ref.successIcon,
|
|
203
|
-
props = defaultTheme._objectWithoutProperties(_ref, ["label", "inputType", "name", "defaultValue", "value", "placeholder", "link", "linkTarget", "linkHandler", "activeLinkHandler", "autoSelect", "readOnly", "disabled", "edit", "type", "descriptionToolTip", "bold", "hidden", "onChange", "onFocus", "onBlur", "loadingIcon", "successIcon"]);
|
|
204
|
-
|
|
205
|
-
var _useState = React.useState(nanoid.nanoid()),
|
|
206
|
-
_useState2 = defaultTheme._slicedToArray(_useState, 1),
|
|
207
|
-
uniqueId = _useState2[0];
|
|
208
|
-
|
|
209
|
-
var _useState3 = React.useState(),
|
|
210
|
-
_useState4 = defaultTheme._slicedToArray(_useState3, 2),
|
|
211
|
-
currentValue = _useState4[0],
|
|
212
|
-
setCurrentValue = _useState4[1];
|
|
213
|
-
|
|
214
|
-
var _useState5 = React.useState(false),
|
|
215
|
-
_useState6 = defaultTheme._slicedToArray(_useState5, 2),
|
|
216
|
-
autoFocus = _useState6[0],
|
|
217
|
-
setAutoFocus = _useState6[1];
|
|
218
|
-
|
|
219
|
-
var memoizedDescriptionToolTip = React.useMemo(function () {
|
|
220
|
-
return descriptionToolTip;
|
|
221
|
-
}, [descriptionToolTip]);
|
|
222
|
-
React.useEffect(function () {
|
|
223
|
-
setCurrentValue(value || defaultValue);
|
|
224
|
-
setAutoFocus(false);
|
|
225
|
-
}, [value, defaultValue]);
|
|
226
|
-
var onChange = React.useCallback(function (event) {
|
|
227
|
-
setCurrentValue(event.target.value);
|
|
228
|
-
|
|
229
|
-
if (!autoFocus) {
|
|
230
|
-
setAutoFocus(true);
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
if (lodash.isFunction(onChangeProp)) {
|
|
234
|
-
onChangeProp(event);
|
|
235
|
-
}
|
|
236
|
-
}, [onChangeProp]);
|
|
237
|
-
var onFocus = React.useCallback(function (event) {
|
|
238
|
-
if (autoSelect) {
|
|
239
|
-
event.target.select();
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
if (lodash.isFunction(onFocusProp)) {
|
|
243
|
-
onFocusProp(event);
|
|
244
|
-
}
|
|
245
|
-
}, [autoSelect, readOnly, onFocusProp]);
|
|
246
|
-
var onBlur = React.useCallback(function (event) {
|
|
247
|
-
if (lodash.isFunction(onBlurProp)) {
|
|
248
|
-
onBlurProp(event);
|
|
249
|
-
}
|
|
250
|
-
}, [onBlurProp]);
|
|
251
|
-
|
|
252
|
-
var input = function input() {
|
|
253
|
-
return React__default['default'].createElement(Input, {
|
|
254
|
-
ref: forwardedRef,
|
|
255
|
-
id: uniqueId,
|
|
256
|
-
key: uniqueId,
|
|
257
|
-
autoFocus: autoFocus,
|
|
258
|
-
inputType: inputType,
|
|
259
|
-
name: name,
|
|
260
|
-
readOnly: readOnly,
|
|
261
|
-
disabled: disabled,
|
|
262
|
-
edit: edit,
|
|
263
|
-
placeholder: placeholder,
|
|
264
|
-
defaultValue: defaultValue,
|
|
265
|
-
value: value,
|
|
266
|
-
type: type,
|
|
267
|
-
bold: bold,
|
|
268
|
-
hasLink: !lodash.isEmpty(link),
|
|
269
|
-
onFocus: onFocus,
|
|
270
|
-
onChange: onChange,
|
|
271
|
-
onBlur: onBlur
|
|
272
|
-
});
|
|
273
|
-
};
|
|
274
|
-
|
|
275
|
-
if (hidden) return null;
|
|
276
|
-
return React__default['default'].createElement(CompactTextInput$1, props, label && React__default['default'].createElement(Label, {
|
|
277
|
-
htmlFor: uniqueId,
|
|
278
|
-
disabled: disabled
|
|
279
|
-
}, label, React__default['default'].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React__default['default'].createElement(InputContainer, {
|
|
280
|
-
$hasLabel: !lodash.isEmpty(label)
|
|
281
|
-
}, !memoizedDescriptionToolTip && !link && input(), memoizedDescriptionToolTip && !link && React__default['default'].createElement("div", null, React__default['default'].createElement(Tooltip.Tooltip, {
|
|
282
|
-
content: memoizedDescriptionToolTip,
|
|
283
|
-
key: "tooltip1",
|
|
284
|
-
placement: "bottom-end",
|
|
285
|
-
trigger: 'mouseenter',
|
|
286
|
-
zIndex: 999999
|
|
287
|
-
}, input())), link && activeLinkHandler && !readOnly && React__default['default'].createElement("div", null, React__default['default'].createElement(Tooltip.Tooltip, {
|
|
288
|
-
content: React__default['default'].createElement(LinkPopoverContainer, null, React__default['default'].createElement("a", {
|
|
289
|
-
href: link,
|
|
290
|
-
target: linkTarget,
|
|
291
|
-
onClick: function onClick(e) {
|
|
292
|
-
if (activeLinkHandler) {
|
|
293
|
-
e.preventDefault();
|
|
294
|
-
linkHandler();
|
|
295
|
-
}
|
|
296
|
-
},
|
|
297
|
-
rel: "noreferrer"
|
|
298
|
-
}, React__default['default'].createElement(SvgLink, null), currentValue)),
|
|
299
|
-
key: "tooltip2",
|
|
300
|
-
placement: "bottom-start",
|
|
301
|
-
zIndex: 999999,
|
|
302
|
-
interactive: true
|
|
303
|
-
}, input())), !memoizedDescriptionToolTip && link && readOnly && input(), !readOnly && !disabled && React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(InputIconContainer, {
|
|
304
|
-
type: type
|
|
305
|
-
}, React__default['default'].createElement(editNote.SvgEditNote, null)), lodash.isEmpty(label) && React__default['default'].createElement(InputSuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon))));
|
|
306
|
-
});
|
|
307
|
-
CompactTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
308
|
-
label: defaultTheme.PropTypes.string,
|
|
309
|
-
success: defaultTheme.PropTypes.bool,
|
|
310
|
-
inputType: defaultTheme.PropTypes.string,
|
|
311
|
-
name: defaultTheme.PropTypes.string,
|
|
312
|
-
defaultValue: defaultTheme.PropTypes.string,
|
|
313
|
-
value: defaultTheme.PropTypes.string,
|
|
314
|
-
placeholder: defaultTheme.PropTypes.string,
|
|
315
|
-
link: defaultTheme.PropTypes.string,
|
|
316
|
-
linkTarget: defaultTheme.PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
|
|
317
|
-
linkHandler: defaultTheme.PropTypes.func,
|
|
318
|
-
activeLinkHandler: defaultTheme.PropTypes.bool,
|
|
319
|
-
autoSelect: defaultTheme.PropTypes.bool,
|
|
320
|
-
readOnly: defaultTheme.PropTypes.bool,
|
|
321
|
-
disabled: defaultTheme.PropTypes.bool,
|
|
322
|
-
edit: defaultTheme.PropTypes.bool,
|
|
323
|
-
warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
|
|
324
|
-
bold: defaultTheme.PropTypes.bool,
|
|
325
|
-
hidden: defaultTheme.PropTypes.bool,
|
|
326
|
-
onChange: defaultTheme.PropTypes.func,
|
|
327
|
-
onFocus: defaultTheme.PropTypes.func,
|
|
328
|
-
onBlur: defaultTheme.PropTypes.func,
|
|
329
|
-
type: defaultTheme.PropTypes.oneOf(['', 'error', 'warning', 'loading', 'success']),
|
|
330
|
-
descriptionToolTip: defaultTheme.PropTypes.string,
|
|
331
|
-
loadingIcon: defaultTheme.PropTypes.element,
|
|
332
|
-
successIcon: defaultTheme.PropTypes.element
|
|
333
|
-
} : {};
|
|
334
|
-
CompactTextInput.defaultProps = {
|
|
335
|
-
inputType: 'text',
|
|
336
|
-
autoSelect: true,
|
|
337
|
-
linkTarget: '_self',
|
|
338
|
-
bold: false,
|
|
339
|
-
readOnly: false,
|
|
340
|
-
descriptionToolTip: '',
|
|
341
|
-
edit: false,
|
|
342
|
-
hidden: false,
|
|
343
|
-
type: '',
|
|
344
|
-
linkHandler: function linkHandler() {},
|
|
345
|
-
activeLinkHandler: false,
|
|
346
|
-
onChange: function onChange() {}
|
|
347
|
-
};
|
|
348
|
-
|
|
349
|
-
exports.CompactTextInput = CompactTextInput;
|
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var defaultTheme = require('./defaultTheme-ea44e34a.js');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var styled = require('styled-components');
|
|
6
|
-
|
|
7
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
|
-
|
|
9
|
-
function _interopNamespace(e) {
|
|
10
|
-
if (e && e.__esModule) return e;
|
|
11
|
-
var n = Object.create(null);
|
|
12
|
-
if (e) {
|
|
13
|
-
Object.keys(e).forEach(function (k) {
|
|
14
|
-
if (k !== 'default') {
|
|
15
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
16
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
17
|
-
enumerable: true,
|
|
18
|
-
get: function () {
|
|
19
|
-
return e[k];
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
n['default'] = e;
|
|
26
|
-
return Object.freeze(n);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
30
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
31
|
-
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
32
|
-
|
|
33
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
34
|
-
|
|
35
|
-
var _ref = /*#__PURE__*/React__namespace.createElement("path", {
|
|
36
|
-
fill: "currentColor",
|
|
37
|
-
d: "M0 20V0l10 10L0 20z"
|
|
38
|
-
});
|
|
39
|
-
|
|
40
|
-
function SvgTriangleRight(props) {
|
|
41
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
42
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
43
|
-
viewBox: "0 0 10 20"
|
|
44
|
-
}, props), _ref);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
48
|
-
var ContextMenuItem$1 = styled__default['default'].span.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n align-items: center;\n cursor: pointer;\n display: flex;\n font-family: ", ";\n font-size: 0.875rem;\n font-weight: normal;\n height: 31px;\n min-width: 160px;\n padding: ", ";\n\n ", "\n\n ", "\n\n ", "\n\n :not(:last-of-type) {\n border-bottom: 1px solid;\n\n ", "\n }\n\n :last-of-type {\n height: 32px;\n }\n\n &:hover {\n cursor: pointer;\n\n ", "\n }\n\n ", "\n\n ", "\n"])), function (props) {
|
|
49
|
-
return props.theme.primaryFontFamily;
|
|
50
|
-
}, function (props) {
|
|
51
|
-
return props.opensSublevel ? '0 8px' : '0 28px 0 8px';
|
|
52
|
-
}, function (props) {
|
|
53
|
-
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
|
|
54
|
-
}, function (props) {
|
|
55
|
-
return props.theme.themeProp('background-color', props.theme.getColor('gray-700'), '#FEFEFE');
|
|
56
|
-
}, function (props) {
|
|
57
|
-
return !props.icon && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 28px;\n "])));
|
|
58
|
-
}, function (props) {
|
|
59
|
-
return props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200'));
|
|
60
|
-
}, function (props) {
|
|
61
|
-
return props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200'));
|
|
62
|
-
}, function (props) {
|
|
63
|
-
return props.hoverColors && props.hoverColors[0] && props.hoverColors[1] && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n &&:hover {\n ", "\n }\n "])), function (props) {
|
|
64
|
-
return props.theme.themeProp('color', props.hoverColors[0], props.hoverColors[1]);
|
|
65
|
-
});
|
|
66
|
-
}, function (props) {
|
|
67
|
-
return props.hoverBackgroundColors && props.hoverBackgroundColors[0] && props.hoverBackgroundColors[1] && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n &&:hover {\n ", "\n }\n "])), function (props) {
|
|
68
|
-
return props.theme.themeProp('background-color', props.hoverBackgroundColors[0], props.hoverBackgroundColors[1]);
|
|
69
|
-
});
|
|
70
|
-
});
|
|
71
|
-
var IconContainer = styled__default['default'].span.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n align-items: center;\n display: flex;\n height: fit-content;\n max-width: 12px;\n margin-right: 8px;\n\n svg {\n height: 12px;\n }\n"])));
|
|
72
|
-
var SublevelIconContainer = styled__default['default'].span.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n align-items: center;\n display: flex;\n height: fit-content;\n max-width: 12px;\n margin-left: auto;\n margin-right: 8px;\n padding-left: 24px;\n\n svg {\n height: 12px;\n }\n"])));
|
|
73
|
-
|
|
74
|
-
var ContextMenuItem = React__default['default'].forwardRef(function ContextMenuItem(_ref, forwardedRef) {
|
|
75
|
-
var title = _ref.title,
|
|
76
|
-
icon = _ref.icon,
|
|
77
|
-
onClickEffect = _ref.onClickEffect,
|
|
78
|
-
opensSublevel = _ref.opensSublevel,
|
|
79
|
-
hoverColors = _ref.hoverColors,
|
|
80
|
-
hoverBackgroundColors = _ref.hoverBackgroundColors,
|
|
81
|
-
props = defaultTheme._objectWithoutProperties(_ref, ["title", "icon", "onClickEffect", "opensSublevel", "hoverColors", "hoverBackgroundColors"]);
|
|
82
|
-
|
|
83
|
-
return React__default['default'].createElement(ContextMenuItem$1, defaultTheme._extends({
|
|
84
|
-
ref: forwardedRef,
|
|
85
|
-
icon: icon,
|
|
86
|
-
onClick: onClickEffect,
|
|
87
|
-
hoverColors: hoverColors,
|
|
88
|
-
hoverBackgroundColors: hoverBackgroundColors,
|
|
89
|
-
opensSublevel: opensSublevel,
|
|
90
|
-
className: opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item'
|
|
91
|
-
}, props, {
|
|
92
|
-
role: "menuitem"
|
|
93
|
-
}), icon && React__default['default'].createElement(IconContainer, null, icon), React__default['default'].createElement("span", null, title), opensSublevel && React__default['default'].createElement(SublevelIconContainer, null, React__default['default'].createElement(SvgTriangleRight, null)));
|
|
94
|
-
});
|
|
95
|
-
ContextMenuItem.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
96
|
-
title: defaultTheme.PropTypes.string.isRequired,
|
|
97
|
-
icon: defaultTheme.PropTypes.element,
|
|
98
|
-
onClickEffect: defaultTheme.PropTypes.func,
|
|
99
|
-
opensSublevel: defaultTheme.PropTypes.bool,
|
|
100
|
-
hoverColors: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string),
|
|
101
|
-
hoverBackgroundColors: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string)
|
|
102
|
-
} : {};
|
|
103
|
-
ContextMenuItem.defaultProps = {
|
|
104
|
-
icon: undefined,
|
|
105
|
-
hoverColors: undefined,
|
|
106
|
-
hoverBackgroundColors: undefined,
|
|
107
|
-
opensSublevel: false
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
exports.ContextMenuItem = ContextMenuItem;
|