@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.
Files changed (78) hide show
  1. package/.eslintrc +7 -8
  2. package/{ActionButton-46735b89.js → ActionButton-581e717e.js} +23 -18
  3. package/{Alert-13b75102.js → Alert-b79a8fcc.js} +30 -29
  4. package/{AssetGallery-7d05ac94.js → AssetAction-06d40708.js} +790 -655
  5. package/AssetPreviewTopBar-1b5dfde2.js +118 -0
  6. package/{Badge-757b0a39.js → Badge-a35c7018.js} +44 -54
  7. package/Button-70230131.js +284 -0
  8. package/Checkbox-92d07052.js +152 -0
  9. package/CompactAutocompleteSelect-c7a11d3d.js +478 -0
  10. package/CompactStarRating-86673c4f.js +343 -0
  11. package/CompactTextInput-f1824946.js +380 -0
  12. package/{ContextMenu-4ec3d9f3.js → ContextMenu-999756c8.js} +9 -7
  13. package/ContextMenuItem-ae4357ba.js +114 -0
  14. package/{InputGroup-49fbc423.js → InputGroup-0423e24c.js} +9 -7
  15. package/{Instructions-e5947be9.js → Instructions-9910f44d.js} +109 -82
  16. package/{MultiLevelCheckboxSelect-b897d605.js → MultiLevelCheckboxSelect-7a036b16.js} +158 -168
  17. package/MultiSelect-9d8c24e5.js +406 -0
  18. package/{Popover-569cd272.js → Popover-0d9a689b.js} +24 -24
  19. package/Radio-a0610a91.js +90 -0
  20. package/{SectionSeparator-259a22ed.js → SectionSeparator-5025c8f4.js} +9 -7
  21. package/Switch-b7193858.js +122 -0
  22. package/{Tab-f499ecbc.js → Tab-7c817d4d.js} +10 -8
  23. package/{Tabs-a8c77f71.js → Tabs-318feff9.js} +54 -44
  24. package/TextArea-ecfd3418.js +382 -0
  25. package/TextInput-91d6341d.js +252 -0
  26. package/{Tooltip-66daf6e3.js → Tooltip-478ec993.js} +16 -14
  27. package/{VerificationStatusIcon-d5bfb67a.js → VerificationStatusIcon-ecec5f07.js} +30 -32
  28. package/{close-ebf2f3cf.js → close-1751121a.js} +8 -12
  29. package/data/Alert/index.js +2 -2
  30. package/data/Badge/index.js +2 -2
  31. package/data/Popover/index.js +3 -3
  32. package/data/Tab/index.js +2 -2
  33. package/data/Tabs/index.js +3 -3
  34. package/data/Tooltip/index.js +3 -3
  35. package/data/index.js +9 -9
  36. package/{defaultTheme-ea44e34a.js → defaultTheme-573a9150.js} +205 -263
  37. package/edit-note-cefe2215.js +37 -0
  38. package/{expand-more-94585605.js → expand-more-d74e2bd2.js} +8 -12
  39. package/inputs/ActionButton/index.js +2 -2
  40. package/inputs/Button/index.js +6 -6
  41. package/inputs/Checkbox/index.js +2 -2
  42. package/inputs/CompactAutocompleteSelect/index.js +13 -13
  43. package/inputs/CompactStarRating/index.js +10 -10
  44. package/inputs/CompactTextInput/index.js +11 -11
  45. package/inputs/MultiSelect/index.js +4 -4
  46. package/inputs/Radio/index.js +2 -2
  47. package/inputs/Switch/index.js +2 -2
  48. package/inputs/TextArea/index.js +12 -12
  49. package/inputs/TextInput/index.js +3 -3
  50. package/inputs/index.js +28 -28
  51. package/layout/InputGroup/index.js +2 -2
  52. package/layout/SectionSeparator/index.js +2 -2
  53. package/layout/index.js +3 -3
  54. package/package.json +6 -5
  55. package/{react-select-creatable.esm-2f23d6c6.js → react-select-creatable.esm-8bf8566a.js} +1500 -1074
  56. package/{shift-away-subtle-0bed9a3c.js → shift-away-subtle-a9da38b8.js} +1 -1
  57. package/ssr/index.js +1 -3
  58. package/widgets/AssetGallery/index.js +34 -32
  59. package/widgets/AssetPreview/AssetPreviewTopBar/index.js +3 -3
  60. package/widgets/ContextMenu/ContextMenuItem/index.js +2 -2
  61. package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +9 -7
  62. package/widgets/ContextMenu/index.js +2 -2
  63. package/widgets/Instructions/index.js +16 -17
  64. package/widgets/index.js +37 -35
  65. package/AssetPreviewTopBar-912c3469.js +0 -99
  66. package/Button-49f82b31.js +0 -264
  67. package/Checkbox-68dc38a8.js +0 -140
  68. package/CompactAutocompleteSelect-755b1869.js +0 -451
  69. package/CompactStarRating-bcfb78ac.js +0 -339
  70. package/CompactTextInput-9e507306.js +0 -349
  71. package/ContextMenuItem-ba2b697e.js +0 -110
  72. package/MultiSelect-efd60232.js +0 -377
  73. package/Radio-32d0513a.js +0 -86
  74. package/Switch-4a41585f.js +0 -107
  75. package/TextArea-8f62da6e.js +0 -353
  76. package/TextInput-0d109708.js +0 -236
  77. package/edit-note-c47d292e.js +0 -41
  78. 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;