@ntbjs/react-components 1.3.0-rc.57 → 1.3.0-rc.58

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -21,7 +21,7 @@ var polished = require('polished');
21
21
  var ContextMenu = require('./ContextMenu-1b7b7cec.js');
22
22
  require('./AssetPreviewTopBar-08ca770d.js');
23
23
  var ActionButton = require('./ActionButton-f84f83eb.js');
24
- require('./Button-4d1069dc.js');
24
+ require('./Button-873454c8.js');
25
25
  require('./Checkbox-acd15d02.js');
26
26
  require('./CompactAutocompleteSelect-b0d2ce48.js');
27
27
  require('./CompactStarRating-957641bf.js');
@@ -12,8 +12,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
12
12
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
14
14
 
15
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
16
- var Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n border-radius: 3px;\n font-family: inherit;\n font-size: 0.875rem;\n font-weight: 400;\n padding: 12px 16px;\n cursor: pointer;\n background: ", ";\n border: 2px solid ", ";\n transition: all 250ms, opacity 200ms;\n\n &:hover,\n &.dropdown-is-active {\n background: #296c58;\n border-color: #296c58;\n }\n\n ", "\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (props) {
15
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31;
16
+ var Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n border-radius: 3px;\n font-family: inherit;\n font-size: 0.875rem;\n font-weight: 400;\n padding: 12px 16px;\n cursor: pointer;\n background: ", ";\n border: 2px solid ", ";\n transition: all 250ms, opacity 200ms;\n\n &:hover,\n &.dropdown-is-active {\n background: #296c58;\n border-color: #296c58;\n }\n\n ", "\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (props) {
17
17
  return props.theme.getColor('emerald-500');
18
18
  }, function (props) {
19
19
  return props.theme.getColor('emerald-500');
@@ -46,43 +46,45 @@ var Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefault
46
46
  }, function (props) {
47
47
  return props.size === 'large' && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n padding: 16px 16px;\n "])));
48
48
  }, function (props) {
49
- return props.singleAction && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n gap: 34px;\n border-radius: 3px !important;\n transition: all 250ms, opacity 200ms;\n "])));
49
+ return props.singleAction && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n gap: ", "px;\n border-radius: 3px !important;\n transition: all 250ms, opacity 200ms;\n "])), props.singleActionGap);
50
+ }, function (props) {
51
+ return props.width && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n min-width: ", "px;\n justify-content: center;\n "])), props.width);
50
52
  });
51
- var ButtonContent = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n transform: scale(1);\n opacity: 1;\n transition: all 200ms;\n\n > svg {\n width: 100%;\n max-width: 16px;\n max-height: 16px;\n margin-right: 8px;\n\n ", ";\n\n ", ";\n }\n\n ", "\n\n ", ";\n"])), function (props) {
52
- return props.size === 'small' && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n max-width: 13px;\n max-height: 13px;\n "])));
53
+ var ButtonContent = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n transform: scale(1);\n opacity: 1;\n transition: all 200ms;\n\n > svg {\n width: 100%;\n max-width: 16px;\n max-height: 16px;\n margin-right: 8px;\n\n ", ";\n\n ", ";\n }\n\n ", "\n\n ", ";\n"])), function (props) {
54
+ return props.size === 'small' && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n max-width: 13px;\n max-height: 13px;\n "])));
53
55
  }, function (props) {
54
- return props.size === 'x-small' && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n max-width: 11px;\n max-height: 11px;\n "])));
56
+ return props.size === 'x-small' && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n max-width: 11px;\n max-height: 11px;\n "])));
55
57
  }, function (props) {
56
- return props.$loading && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n transform: scale(0.95);\n opacity: 0;\n "])));
58
+ return props.$loading && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n transform: scale(0.95);\n opacity: 0;\n "])));
57
59
  }, function (props) {
58
- return props.singleAction && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n svg {\n width: 100% !important;\n height: 100% !important;\n margin-right: 24px;\n }\n "])));
60
+ return props.singleAction && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n svg {\n width: 100% !important;\n height: 100% !important;\n margin-right: 24px;\n }\n "])));
59
61
  });
60
- var LoadingIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n padding: 4px;\n background: inherit;\n opacity: 0;\n transition: opacity 200ms;\n box-sizing: border-box;\n\n ", "\n"])), function (props) {
61
- return props.$loading && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
62
+ var LoadingIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n padding: 4px;\n background: inherit;\n opacity: 0;\n transition: opacity 200ms;\n box-sizing: border-box;\n\n ", "\n"])), function (props) {
63
+ return props.$loading && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
62
64
  });
63
- var LoadingIndicatorSvg = styled__default["default"].svg.attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n height: 100%;\n color: inherit;\n transform: rotate(-88deg);\n"])));
64
- var LoadingIndicatorSvgCircle = styled__default["default"].circle.attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n transition: stroke-dashoffset 300ms linear;\n stroke-dasharray: 113;\n"])));
65
- var ButtonWrapper = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n white-space: nowrap;\n display: flex;\n"])));
66
- var MainButtonWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n border-radius: 3px;\n ", ";\n"])), function (props) {
67
- return (props.activeDropdown || props.dropdownItems) && !props.outlined && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n background: ", ";\n "])), props.secondary ? props.theme.getColor('gray-200') : props.theme.getColor('emerald-500'));
65
+ var LoadingIndicatorSvg = styled__default["default"].svg.attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n height: 100%;\n color: inherit;\n transform: rotate(-88deg);\n"])));
66
+ var LoadingIndicatorSvgCircle = styled__default["default"].circle.attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n transition: stroke-dashoffset 300ms linear;\n stroke-dasharray: 113;\n"])));
67
+ var ButtonWrapper = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n white-space: nowrap;\n display: flex;\n"])));
68
+ var MainButtonWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n border-radius: 3px;\n ", ";\n"])), function (props) {
69
+ return (props.activeDropdown || props.dropdownItems) && !props.outlined && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n background: ", ";\n "])), props.secondary ? props.theme.getColor('gray-200') : props.theme.getColor('emerald-500'));
68
70
  });
69
- var MainButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n button {\n ", ";\n\n ", ";\n }\n"])), function (props) {
70
- return (props.activeDropdown || props.dropdownItems) && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n "])));
71
+ var MainButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n button {\n ", ";\n\n ", ";\n }\n"])), function (props) {
72
+ return (props.activeDropdown || props.dropdownItems) && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n "])));
71
73
  }, function (props) {
72
- return (props.activeDropdown || props.dropdownItems) && props.outlined && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n border-right: none;\n "])));
74
+ return (props.activeDropdown || props.dropdownItems) && props.outlined && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n border-right: none;\n "])));
73
75
  });
74
- var MainButtonContainerSingle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n width: 100%;\n ", ";\n\n button {\n ", ";\n }\n"])), function (props) {
75
- return props.singleAction && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n border-radius: 3px !important;\n transition: all 250ms, opacity 200ms;\n "])));
76
+ var MainButtonContainerSingle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n width: 100%;\n ", ";\n\n button {\n ", ";\n }\n"])), function (props) {
77
+ return props.singleAction && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n border-radius: 3px !important;\n transition: all 250ms, opacity 200ms;\n "])));
76
78
  }, function (props) {
77
- return (props.activeDropdown || props.dropdownItems) && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n "])));
79
+ return (props.activeDropdown || props.dropdownItems) && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n "])));
78
80
  });
79
- var DropdownButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n\n button {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n\n ", ";\n }\n\n svg {\n color: inherit;\n height: 7px;\n width: 12px;\n\n ", ";\n }\n"])), function (props) {
81
+ var DropdownButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n\n button {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n\n ", ";\n }\n\n svg {\n color: inherit;\n height: 7px;\n width: 12px;\n\n ", ";\n }\n"])), function (props) {
80
82
  return !props.singleAction && 'border-left: none';
81
83
  }, function (props) {
82
84
  return !props.singleAction && 'margin-bottom: 1px';
83
85
  });
84
86
 
85
- var _excluded = ["onClickEffect", "singleAction", "activeDropdown", "dropdownItems", "secondary", "outlined", "block", "icon", "size", "disabled", "loading", "className", "children"];
87
+ var _excluded = ["onClickEffect", "singleAction", "activeDropdown", "dropdownItems", "secondary", "outlined", "block", "icon", "size", "disabled", "loading", "className", "children", "singleActionGap", "width"];
86
88
  var Button = React__default["default"].forwardRef(function Button(_ref, forwardedRef) {
87
89
  var onClickEffect = _ref.onClickEffect,
88
90
  _ref$singleAction = _ref.singleAction,
@@ -100,6 +102,9 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
100
102
  loading = _ref.loading,
101
103
  className = _ref.className,
102
104
  children = _ref.children,
105
+ _ref$singleActionGap = _ref.singleActionGap,
106
+ singleActionGap = _ref$singleActionGap === void 0 ? 34 : _ref$singleActionGap,
107
+ width = _ref.width,
103
108
  props = defaultTheme._objectWithoutProperties(_ref, _excluded);
104
109
  var _useState = React.useState(loading || false),
105
110
  _useState2 = defaultTheme._slicedToArray(_useState, 2),
@@ -110,6 +115,7 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
110
115
  loadingStep = _useState4[0],
111
116
  setLoadingStep = _useState4[1];
112
117
  var loadingInterval = React.useRef(0);
118
+ console.log('singleActionGap', singleActionGap);
113
119
  var _useState5 = React.useState(false),
114
120
  _useState6 = defaultTheme._slicedToArray(_useState5, 2),
115
121
  dropdownIsActive = _useState6[0],
@@ -170,7 +176,8 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
170
176
  size: size,
171
177
  disabled: disabled,
172
178
  className: className,
173
- "aria-busy": disabled
179
+ "aria-busy": disabled,
180
+ width: width
174
181
  }, props), React__default["default"].createElement(ButtonContent, {
175
182
  $loading: loadingState,
176
183
  size: size
@@ -204,6 +211,7 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
204
211
  }, React__default["default"].createElement(Button$1, {
205
212
  ref: forwardedRef,
206
213
  singleAction: singleAction,
214
+ singleActionGap: singleActionGap,
207
215
  dropdownItems: dropdownItems,
208
216
  secondary: secondary,
209
217
  outlined: outlined,
@@ -211,7 +219,8 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
211
219
  size: size,
212
220
  disabled: disabled,
213
221
  onClick: handleDropdownButtonClick,
214
- className: dropdownIsActive ? 'dropdown-is-active' : ''
222
+ className: dropdownIsActive ? 'dropdown-is-active' : '',
223
+ width: width
215
224
  }, React__default["default"].createElement(expandMore.SvgExpandMore, null))))) : React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(MainButtonContainerSingle, {
216
225
  dropdownItems: dropdownItems,
217
226
  secondary: secondary,
@@ -228,6 +237,7 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
228
237
  }, React__default["default"].createElement(Button$1, {
229
238
  ref: forwardedRef,
230
239
  singleAction: singleAction,
240
+ singleActionGap: singleActionGap,
231
241
  dropdownItems: dropdownItems,
232
242
  secondary: secondary,
233
243
  outlined: outlined,
@@ -235,7 +245,8 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
235
245
  size: size,
236
246
  disabled: disabled,
237
247
  onClick: handleDropdownButtonClick,
238
- className: dropdownIsActive ? 'dropdown-is-active' : ''
248
+ className: dropdownIsActive ? 'dropdown-is-active' : '',
249
+ width: width
239
250
  }, React__default["default"].createElement(ButtonContent, {
240
251
  $loading: loadingState,
241
252
  size: size,
@@ -255,7 +266,9 @@ Button.propTypes = process.env.NODE_ENV !== "production" ? {
255
266
  disabled: defaultTheme.PropTypes.bool,
256
267
  loading: defaultTheme.PropTypes.bool,
257
268
  className: defaultTheme.PropTypes.string,
258
- children: defaultTheme.PropTypes.any.isRequired
269
+ children: defaultTheme.PropTypes.any.isRequired,
270
+ singleActionGap: defaultTheme.PropTypes.number,
271
+ width: defaultTheme.PropTypes.number
259
272
  } : {};
260
273
 
261
274
  exports.Button = Button;
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Button = require('../../Button-4d1069dc.js');
3
+ var Button = require('../../Button-873454c8.js');
4
4
  require('../../defaultTheme-cd01e6c2.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/index.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var ActionButton = require('../ActionButton-f84f83eb.js');
6
- var Button = require('../Button-4d1069dc.js');
6
+ var Button = require('../Button-873454c8.js');
7
7
  var Checkbox = require('../Checkbox-acd15d02.js');
8
8
  var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-b0d2ce48.js');
9
9
  var CompactStarRating = require('../CompactStarRating-957641bf.js');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "1.3.0-rc.57",
3
+ "version": "1.3.0-rc.58",
4
4
  "description": "NTBs common front-end design utilities and React components.",
5
5
  "scripts": {
6
6
  "build": "cross-env NODE_ENV=production rollup -c",
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var AssetAction = require('../../AssetAction-b9d9a5f5.js');
3
+ var AssetAction = require('../../AssetAction-df8163e5.js');
4
4
  require('../../defaultTheme-cd01e6c2.js');
5
5
  require('styled-components');
6
6
  require('lodash');
@@ -39,7 +39,7 @@ require('@floating-ui/react');
39
39
  require('../../ContextMenu-1b7b7cec.js');
40
40
  require('../../AssetPreviewTopBar-08ca770d.js');
41
41
  require('../../ActionButton-f84f83eb.js');
42
- require('../../Button-4d1069dc.js');
42
+ require('../../Button-873454c8.js');
43
43
  require('../../CompactStarRating-957641bf.js');
44
44
  require('../../CompactTextInput-05b5d847.js');
45
45
  require('../../MultiSelect-d6294329.js');
package/widgets/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var AssetAction = require('../AssetAction-b9d9a5f5.js');
5
+ var AssetAction = require('../AssetAction-df8163e5.js');
6
6
  var ContextMenu = require('../ContextMenu-1b7b7cec.js');
7
7
  var AssetPreviewTopBar = require('../AssetPreviewTopBar-08ca770d.js');
8
8
  var Instructions = require('../Instructions-48ff279a.js');
@@ -34,7 +34,7 @@ require('../close-1751121a.js');
34
34
  require('react-lazy-load-image-component');
35
35
  require('@floating-ui/react');
36
36
  require('../ActionButton-f84f83eb.js');
37
- require('../Button-4d1069dc.js');
37
+ require('../Button-873454c8.js');
38
38
  require('../expand-more-d74e2bd2.js');
39
39
  require('../CompactAutocompleteSelect-b0d2ce48.js');
40
40
  require('react-select');