@ntbjs/react-components 0.0.1-beta.33 → 0.0.1-beta.37

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 (7) hide show
  1. package/{AssetGallery-d48afdf5.js → AssetGallery-563abf37.js} +215 -43
  2. package/{TextInput-72ce7e10.js → TextInput-1ed37e22.js} +3 -0
  3. package/inputs/TextInput/index.js +1 -1
  4. package/inputs/index.js +1 -1
  5. package/package.json +1 -1
  6. package/widgets/AssetGallery/index.js +2 -2
  7. package/widgets/index.js +2 -2
package/{AssetGallery-d48afdf5.js → AssetGallery-563abf37.js} RENAMED
@@ -9,7 +9,7 @@ require('./Button-89056918.js');
9
9
  require('./Checkbox-791a409f.js');
10
10
  require('./Radio-9271a4b6.js');
11
11
  require('./TextArea-70a74014.js');
12
- require('./TextInput-72ce7e10.js');
12
+ require('./TextInput-1ed37e22.js');
13
13
  require('./Popover-0ff13419.js');
14
14
  var Tooltip = require('./Tooltip-85e7d561.js');
15
15
  var styled = require('styled-components');
@@ -120,8 +120,8 @@ var assetShapeWithLayout = defaultTheme._objectSpread2(defaultTheme._objectSprea
120
120
  var css_248z = ".lazy-load-image-background.opacity {\n opacity: 0;\n}\n\n.lazy-load-image-background.opacity.lazy-load-image-loaded {\n opacity: 1;\n transition: opacity .3s;\n}\n";
121
121
  defaultTheme.styleInject(css_248z);
122
122
 
123
- var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28;
124
- var AssetGalleryCompactCard$2 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$2 || (_templateObject$2 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n height: 100%;\n ", ";\n ", ";\n\n ", "\n\n video {\n width: 100%;\n height: 100%;\n }\n"])), function (props) {
123
+ var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
124
+ var AssetGalleryCompactCard$2 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$2 || (_templateObject$2 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n height: 100%;\n ", ";\n ", ";\n\n ", "\n video {\n width: 100%;\n height: 100%;\n }\n"])), function (props) {
125
125
  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
126
126
  }, function (props) {
127
127
  return props.disabled && styled.css(_templateObject2$2 || (_templateObject2$2 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n opacity: 0.4;\n "])));
@@ -132,47 +132,51 @@ var Figure = styled__default['default'].figure(_templateObject4$1 || (_templateO
132
132
  return props.hasHeightAndWidth ? styled.css(_templateObject5$1 || (_templateObject5$1 = defaultTheme._taggedTemplateLiteral(["\n object-fit: cover;\n "]))) : styled.css(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\n object-fit: contain;\n "])));
133
133
  });
134
134
  var Overlay = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7$1 || (_templateObject7$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n"])));
135
- var OverlayBackdrop = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n opacity: 0;\n background: linear-gradient(rgba(0, 0, 0, 0.6), transparent 70%, rgba(0, 0, 0, 0.6));\n transition: opacity 220ms;\n\n ", ":hover & {\n opacity: 1;\n }\n"])), Overlay);
136
- var OverlayInfo = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9$1 || (_templateObject9$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 15px 12px 10px;\n color: ", ";\n"])), function (props) {
135
+ var OverlayBackdrop = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n opacity: 0;\n background: linear-gradient(rgba(0, 0, 0, 0.6), transparent 70%, rgba(0, 0, 0, 0.6));\n transition: opacity 220ms;\n\n ", "\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
136
+ return props.softSelected && styled.css(_templateObject9$1 || (_templateObject9$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
137
+ }, Overlay);
138
+ var OverlayInfo = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10$1 || (_templateObject10$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 15px 12px 10px;\n color: ", ";\n"])), function (props) {
137
139
  return props.theme.getColor('gray-100');
138
140
  });
139
- var OverlayInfoTopTitleAndFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10$1 || (_templateObject10$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
140
- var OverlayInfoTopTitle = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11$1 || (_templateObject11$1 = defaultTheme._taggedTemplateLiteral(["\n flex-grow: 1;\n font-family: ", ";\n font-weight: 400;\n line-height: 1.4;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n margin-right: 20px;\n opacity: 0;\n transition: opacity 220ms;\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
141
+ var OverlayInfoTopTitleAndFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11$1 || (_templateObject11$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
142
+ var OverlayInfoTopTitle = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12$1 || (_templateObject12$1 = defaultTheme._taggedTemplateLiteral(["\n flex-grow: 1;\n font-family: ", ";\n font-weight: 400;\n line-height: 1.4;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n margin-right: 20px;\n opacity: 0;\n transition: opacity 220ms;\n\n ", "\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
141
143
  return props.theme.primaryFontFamily;
144
+ }, function (props) {
145
+ return props.softSelected && styled.css(_templateObject13$1 || (_templateObject13$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
142
146
  }, Overlay);
143
- var OverlayInfoTopFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12$1 || (_templateObject12$1 = defaultTheme._taggedTemplateLiteral(["\n flex-shrink: 0;\n width: auto;\n max-width: 19px;\n max-height: 19px;\n"])));
144
- var OverlayInfoTopNoteAndFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13$1 || (_templateObject13$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
145
- var OverlayInfoTopNote = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14$1 || (_templateObject14$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n padding-top: 5px;\n transform: translate3d(0, -100%, 0);\n transition: transform 250ms;\n\n svg {\n max-width: 20px;\n max-height: 20px;\n width: 100%;\n flex-shrink: 0;\n }\n\n ", ":hover && {\n ", "\n }\n"])), Overlay, function (props) {
147
+ var OverlayInfoTopFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14$1 || (_templateObject14$1 = defaultTheme._taggedTemplateLiteral(["\n flex-shrink: 0;\n width: auto;\n max-width: 19px;\n max-height: 19px;\n"])));
148
+ var OverlayInfoTopNoteAndFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15$1 || (_templateObject15$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
149
+ var OverlayInfoTopNote = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16$1 || (_templateObject16$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n padding-top: 5px;\n transform: translate3d(0, -100%, 0);\n transition: transform 250ms;\n\n svg {\n max-width: 20px;\n max-height: 20px;\n width: 100%;\n flex-shrink: 0;\n }\n\n ", ":hover && {\n ", "\n }\n"])), Overlay, function (props) {
146
150
  var _props$assetTitle;
147
151
 
148
- return ((_props$assetTitle = props.assetTitle) === null || _props$assetTitle === void 0 ? void 0 : _props$assetTitle.trim().length) > 0 ? styled.css(_templateObject15$1 || (_templateObject15$1 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, 0, 0);\n "]))) : styled.css(_templateObject16$1 || (_templateObject16$1 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, -100%, 0);\n "])));
152
+ return ((_props$assetTitle = props.assetTitle) === null || _props$assetTitle === void 0 ? void 0 : _props$assetTitle.trim().length) > 0 ? styled.css(_templateObject17$1 || (_templateObject17$1 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, 0, 0);\n "]))) : styled.css(_templateObject18$1 || (_templateObject18$1 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, -100%, 0);\n "])));
149
153
  });
150
- var OverlayInfoTopFileTypeTopLeft = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17$1 || (_templateObject17$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n padding-top: 5px;\n transform: translate3d(0, -100%, 0);\n transition: transform 250ms;\n margin-right: 5px;\n\n svg {\n max-width: 20px;\n max-height: 20px;\n width: 100%;\n flex-shrink: 0;\n }\n\n ", ":hover && {\n ", "\n }\n"])), Overlay, function (props) {
154
+ var OverlayInfoTopFileTypeTopLeft = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19$1 || (_templateObject19$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n padding-top: 5px;\n transform: translate3d(0, -100%, 0);\n transition: transform 250ms;\n margin-right: 5px;\n\n svg {\n max-width: 20px;\n max-height: 20px;\n width: 100%;\n flex-shrink: 0;\n }\n\n ", ":hover && {\n ", "\n }\n"])), Overlay, function (props) {
151
155
  var _props$assetTitle2;
152
156
 
153
- return ((_props$assetTitle2 = props.assetTitle) === null || _props$assetTitle2 === void 0 ? void 0 : _props$assetTitle2.trim().length) > 0 ? styled.css(_templateObject18$1 || (_templateObject18$1 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, 0, 0);\n "]))) : styled.css(_templateObject19$1 || (_templateObject19$1 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, -100%, 0);\n "])));
157
+ return ((_props$assetTitle2 = props.assetTitle) === null || _props$assetTitle2 === void 0 ? void 0 : _props$assetTitle2.trim().length) > 0 ? styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, 0, 0);\n "]))) : styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, -100%, 0);\n "])));
154
158
  });
155
- var OverlayInfoTopNoteTitle = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-weight: 400;\n line-height: 1.4;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n margin-left: 5px;\n opacity: 0;\n transition: opacity 250ms;\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
159
+ var OverlayInfoTopNoteTitle = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-weight: 400;\n line-height: 1.4;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n margin-left: 5px;\n opacity: 0;\n transition: opacity 250ms;\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
156
160
  return props.theme.primaryFontFamily;
157
161
  }, Overlay);
158
- var OverlayCompleted$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid ", ";\n"])), function (props) {
159
- return polished.rgba(props.theme.getColor('emerald-500'), 0.7);
162
+ var OverlayCompleted$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
163
+ return !props.softSelected && polished.rgba(props.theme.getColor('emerald-500'), 0.7);
160
164
  });
161
- var OverlayHasError$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid ", ";\n"])), function (props) {
162
- return polished.rgba(props.theme.getColor('red-500'), 0.7);
165
+ var OverlayHasError$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid ", ";\n"])), function (props) {
166
+ return !props.softSelected && polished.rgba(props.theme.getColor('red-500'), 0.7);
163
167
  });
164
- var OverlaySelected$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
165
- return props.selected ? props.theme.getColor('orange-500') : 'transparent';
168
+ var OverlaySelected$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
169
+ return props.softSelected ? polished.rgba(props.theme.getColor('orange-500'), 0.5) : props.selected ? props.theme.getColor('orange-500') : 'transparent';
166
170
  });
167
- var OverlayInfoBottom = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
168
- var OverlayInfoBottomSelectButton = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n opacity: ", ";\n flex-shrink: 0;\n cursor: pointer;\n transition: opacity 220ms;\n\n > svg {\n width: 23px;\n height: 100%;\n transition: color 120ms;\n color: ", ";\n }\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
171
+ var OverlayInfoBottom = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
172
+ var OverlayInfoBottomSelectButton = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n opacity: ", ";\n flex-shrink: 0;\n cursor: pointer;\n transition: opacity 220ms;\n\n > svg {\n width: 23px;\n height: 100%;\n transition: color 120ms;\n color: ", ";\n }\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
169
173
  return props.selected ? 1 : 0;
170
174
  }, function (props) {
171
175
  return props.selected ? props.theme.getColor('orange-500') : 'inherit';
172
176
  }, Overlay);
173
- var OverlayInfoBottomActions = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n margin-left: auto;\n opacity: 0;\n transition: opacity 220ms;\n\n ", ":hover & {\n opacity: 1;\n }\n"])), Overlay);
174
- var ConsumerDefinedOverlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n"])));
175
- var Fragment$1 = styled__default['default'].div(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral([""])));
177
+ var OverlayInfoBottomActions = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n margin-left: auto;\n opacity: 0;\n transition: opacity 220ms;\n\n ", ":hover & {\n opacity: 1;\n }\n"])), Overlay);
178
+ var ConsumerDefinedOverlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n"])));
179
+ var Fragment$1 = styled__default['default'].div(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral([""])));
176
180
 
177
181
  function _extends$4() { _extends$4 = 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$4.apply(this, arguments); }
178
182
 
@@ -297,6 +301,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
297
301
  extendedSelectMode = props.extendedSelectMode,
298
302
  onAssetSelected = props.onAssetSelected,
299
303
  onAssetUnselected = props.onAssetUnselected,
304
+ softSelected = props.softSelected,
300
305
  component = props.component,
301
306
  scrollPosition = props.scrollPosition;
302
307
 
@@ -403,6 +408,14 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
403
408
  }
404
409
  }
405
410
  }, [asset.fileType]);
411
+ React.useEffect(function () {
412
+ if (softSelected) {
413
+ cardRef.current.scrollIntoView({
414
+ behavior: 'smooth',
415
+ block: 'nearest'
416
+ });
417
+ }
418
+ }, [softSelected]);
406
419
  return React__default['default'].createElement(AssetGalleryCompactCard$2, {
407
420
  as: ComputedRootComponent$1,
408
421
  component: component,
@@ -434,8 +447,11 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
434
447
  scrollPosition: scrollPosition
435
448
  }))), React__default['default'].createElement(Overlay, {
436
449
  ref: cardRef
437
- }, React__default['default'].createElement(OverlayBackdrop, null), React__default['default'].createElement(OverlayInfo, null, React__default['default'].createElement("div", null, React__default['default'].createElement(OverlayInfoTopTitleAndFileType, null, React__default['default'].createElement(OverlayInfoTopTitle, {
438
- title: asset.title
450
+ }, React__default['default'].createElement(OverlayBackdrop, {
451
+ softSelected: softSelected
452
+ }), React__default['default'].createElement(OverlayInfo, null, React__default['default'].createElement("div", null, React__default['default'].createElement(OverlayInfoTopTitleAndFileType, null, React__default['default'].createElement(OverlayInfoTopTitle, {
453
+ title: asset.title,
454
+ softSelected: softSelected
439
455
  }, asset.title || "\xA0"), (!asset.fileTypeIconPosition || asset.fileTypeIconPosition === 'top-right') && typeIcon), React__default['default'].createElement(OverlayInfoTopNoteAndFileType, null, asset.fileTypeIconPosition === 'top-left' && React__default['default'].createElement(OverlayInfoTopFileTypeTopLeft, {
440
456
  assetTitle: asset.title
441
457
  }, typeIcon), ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(OverlayInfoTopNote, {
@@ -458,8 +474,13 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
458
474
  return onActionClick(event, action);
459
475
  }
460
476
  }));
461
- })))), asset.completed && React__default['default'].createElement(OverlayCompleted$1, null), asset.hasError && React__default['default'].createElement(OverlayHasError$1, null), selectable && React__default['default'].createElement(OverlaySelected$1, {
462
- selected: selected
477
+ })))), asset.completed && React__default['default'].createElement(OverlayCompleted$1, {
478
+ softSelected: softSelected
479
+ }), asset.hasError && React__default['default'].createElement(OverlayHasError$1, {
480
+ softSelected: softSelected
481
+ }), selectable && React__default['default'].createElement(OverlaySelected$1, {
482
+ selected: selected,
483
+ softSelected: softSelected
463
484
  })), asset.overlay && React__default['default'].createElement(ConsumerDefinedOverlay$1, null, asset.overlay));
464
485
  };
465
486
 
@@ -471,12 +492,13 @@ AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
471
492
  extendedSelectMode: defaultTheme.PropTypes.bool,
472
493
  onAssetSelected: defaultTheme.PropTypes.func.isRequired,
473
494
  onAssetUnselected: defaultTheme.PropTypes.func.isRequired,
495
+ softSelected: defaultTheme.PropTypes.bool.isRequired,
474
496
  component: defaultTheme.PropTypes.func,
475
497
  scrollPosition: defaultTheme.PropTypes.number
476
498
  } : {};
477
499
  AssetGalleryCompactCard.defaultProps = {};
478
500
  var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default['default'].memo(AssetGalleryCompactCard, function (prevProps, nextProps) {
479
- var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'asset.previewUrl', 'asset.overlay', 'hasHeightAndWidth'];
501
+ var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'hasHeightAndWidth'];
480
502
  return reactiveProps.every(function (propKey) {
481
503
  return lodash.get(prevProps, propKey) === lodash.get(nextProps, propKey);
482
504
  });
@@ -512,14 +534,14 @@ var BottomSelectButton = styled__default['default'].div.attrs(defaultTheme.apply
512
534
  return props.selected ? props.theme.getColor('orange-500') : 'inherit';
513
535
  }, AssetGalleryGridCard$2);
514
536
  var BottomActions = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n margin-left: auto;\n opacity: 0;\n transition: opacity 220ms;\n\n ", ":hover & {\n opacity: 1;\n }\n"])), AssetGalleryGridCard$2);
515
- var OverlayCompleted = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid ", ";\n"])), function (props) {
516
- return polished.rgba(props.theme.getColor('emerald-500'), 0.7);
537
+ var OverlayCompleted = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
538
+ return !props.softSelected && polished.rgba(props.theme.getColor('emerald-500'), 0.7);
517
539
  });
518
540
  var OverlayHasError = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid ", ";\n"])), function (props) {
519
- return polished.rgba(props.theme.getColor('red-500'), 0.7);
541
+ return !props.softSelected && polished.rgba(props.theme.getColor('red-500'), 0.7);
520
542
  });
521
543
  var OverlaySelected = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
522
- return props.selected ? props.theme.getColor('orange-500') : 'transparent';
544
+ return props.softSelected ? polished.rgba(props.theme.getColor('orange-500'), 0.5) : props.selected ? props.theme.getColor('orange-500') : 'transparent';
523
545
  });
524
546
  var ConsumerDefinedOverlay = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n"])));
525
547
  var Fragment = styled__default['default'].div(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral([""])));
@@ -576,6 +598,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
576
598
  extendedSelectMode = props.extendedSelectMode,
577
599
  onAssetSelected = props.onAssetSelected,
578
600
  onAssetUnselected = props.onAssetUnselected,
601
+ softSelected = props.softSelected,
579
602
  component = props.component,
580
603
  scrollPosition = props.scrollPosition;
581
604
  var videoPlayerRef = React.useRef();
@@ -650,6 +673,14 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
650
673
  };
651
674
  }
652
675
  }, []);
676
+ React.useEffect(function () {
677
+ if (softSelected) {
678
+ cardRef.current.scrollIntoView({
679
+ behavior: 'smooth',
680
+ block: 'nearest'
681
+ });
682
+ }
683
+ }, [softSelected]);
653
684
  return React__default['default'].createElement(AssetGalleryGridCard$2, {
654
685
  as: ComputedRootComponent,
655
686
  component: component,
@@ -714,8 +745,13 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
714
745
  return onActionClick(event, action);
715
746
  }
716
747
  }));
717
- })))), asset.completed && React__default['default'].createElement(OverlayCompleted, null), asset.hasError && React__default['default'].createElement(OverlayHasError, null), selectable && React__default['default'].createElement(OverlaySelected, {
718
- selected: selected
748
+ })))), asset.completed && React__default['default'].createElement(OverlayCompleted, {
749
+ softSelected: softSelected
750
+ }), asset.hasError && React__default['default'].createElement(OverlayHasError, {
751
+ softSelected: softSelected
752
+ }), selectable && React__default['default'].createElement(OverlaySelected, {
753
+ selected: selected,
754
+ softSelected: softSelected
719
755
  }), asset.overlay && React__default['default'].createElement(ConsumerDefinedOverlay, null, asset.overlay));
720
756
  };
721
757
 
@@ -726,12 +762,13 @@ AssetGalleryGridCard.propTypes = process.env.NODE_ENV !== "production" ? {
726
762
  extendedSelectMode: defaultTheme.PropTypes.bool,
727
763
  onAssetSelected: defaultTheme.PropTypes.func.isRequired,
728
764
  onAssetUnselected: defaultTheme.PropTypes.func.isRequired,
765
+ softSelected: defaultTheme.PropTypes.bool.isRequired,
729
766
  component: defaultTheme.PropTypes.func,
730
767
  scrollPosition: defaultTheme.PropTypes.number
731
768
  } : {};
732
769
  AssetGalleryGridCard.defaultProps = {};
733
770
  var AssetGalleryGridCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default['default'].memo(AssetGalleryGridCard, function (prevProps, nextProps) {
734
- var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'asset.previewUrl', 'asset.overlay', 'asset.layout'];
771
+ var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'asset.layout'];
735
772
  return reactiveProps.every(function (propKey) {
736
773
  return lodash.get(prevProps, propKey) === lodash.get(nextProps, propKey);
737
774
  });
@@ -747,6 +784,8 @@ var GroupLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultT
747
784
  var AssetGalleryCardBase = styled__default['default'].div(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n overflow: hidden;\n will-change: transform, width, height;\n"])));
748
785
 
749
786
  var AssetGalleryBase = React__default['default'].forwardRef(function AssetGalleryBase(_ref, forwardedRef) {
787
+ var _window, _window2;
788
+
750
789
  var assetsProp = _ref.assets,
751
790
  viewMode = _ref.viewMode,
752
791
  thumbnailMaxHeight = _ref.thumbnailMaxHeight,
@@ -754,8 +793,11 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
754
793
  selectedAssetKeys = _ref.selectedAssetKeys,
755
794
  onAssetSelected = _ref.onAssetSelected,
756
795
  onAssetUnselected = _ref.onAssetUnselected,
796
+ softSelectable = _ref.softSelectable,
797
+ softSelectedAssetKey = _ref.softSelectedAssetKey,
798
+ onAssetSoftSelectedChanged = _ref.onAssetSoftSelectedChanged,
757
799
  component = _ref.component,
758
- props = defaultTheme._objectWithoutProperties(_ref, ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "component"]);
800
+ props = defaultTheme._objectWithoutProperties(_ref, ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "softSelectable", "softSelectedAssetKey", "onAssetSoftSelectedChanged", "component"]);
759
801
 
760
802
  var assetGalleryDOMNode = React.useRef();
761
803
  var assetGalleryCompactRef = useMergedRefs(forwardedRef, assetGalleryDOMNode);
@@ -779,8 +821,8 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
779
821
  var GRID_VIEW_MODE_ASSET_HEIGHT = 403;
780
822
  var MISSING_WIDTH_PLACEHOLDER = 1920;
781
823
  var MISSING_HEIGHT_PLACEHOLDER = 1080;
782
- var previousYOffset = React.useRef(window.pageYOffset);
783
- var latestYOffset = React.useRef(window.pageYOffset);
824
+ var previousYOffset = React.useRef(((_window = window) === null || _window === void 0 ? void 0 : _window.pageYOffset) || 0);
825
+ var latestYOffset = React.useRef(((_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.pageYOffset) || 0);
784
826
  var scrollDirection = React.useRef('down');
785
827
  React.useLayoutEffect(function () {
786
828
  if (!assetGalleryDOMNode.current) return;
@@ -956,18 +998,22 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
956
998
  }
957
999
 
958
1000
  function setScrollPositionAndDirection() {
959
- var newYOffset = window.pageYOffset;
1001
+ var _window3;
1002
+
1003
+ var newYOffset = ((_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.pageYOffset) || 0;
960
1004
  previousYOffset.current = latestYOffset.current;
961
1005
  latestYOffset.current = newYOffset;
962
1006
  scrollDirection.current = latestYOffset.current > previousYOffset.current ? 'down' : 'up';
963
1007
  }
964
1008
 
965
1009
  var calculateVisibility = function calculateVisibility() {
1010
+ var _window4;
1011
+
966
1012
  if (!assetGalleryDOMNode.current) return;
967
1013
  var bufferTop = scrollDirection.current === 'up' ? PRIMARY_SCROLL_BUFFER_HEIGHT : SECONDARY_SCROLL_BUFFER_HEIGHT;
968
1014
  var bufferBottom = scrollDirection.current === 'up' ? SECONDARY_SCROLL_BUFFER_HEIGHT : PRIMARY_SCROLL_BUFFER_HEIGHT;
969
1015
  var containerOffset = getOffsetTop(assetGalleryDOMNode.current);
970
- var scrollerHeight = window.innerHeight;
1016
+ var scrollerHeight = ((_window4 = window) === null || _window4 === void 0 ? void 0 : _window4.innerHeight) || 0;
971
1017
  var yOffset = latestYOffset.current;
972
1018
  var minTranslateYPlusHeight = yOffset - containerOffset - bufferTop;
973
1019
  var maxTranslateY = yOffset - containerOffset + scrollerHeight + bufferBottom;
@@ -997,6 +1043,106 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
997
1043
  return offsetTop;
998
1044
  }
999
1045
 
1046
+ var handleKeyPress = React.useCallback(function (e) {
1047
+ function isElementVisible(el) {
1048
+ var rect = el.getBoundingClientRect(),
1049
+ vWidth = window.innerWidth || document.documentElement.clientWidth,
1050
+ vHeight = window.innerHeight || document.documentElement.clientHeight,
1051
+ efp = function efp(x, y) {
1052
+ return document.elementFromPoint(x, y);
1053
+ };
1054
+
1055
+ if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) return false;
1056
+ return el.contains(efp(rect.left, rect.top)) || el.contains(efp(rect.right, rect.top)) || el.contains(efp(rect.right, rect.bottom)) || el.contains(efp(rect.left, rect.bottom));
1057
+ }
1058
+
1059
+ function softSelectFirstVisibleAsset() {
1060
+ var visibleAssets = assets.filter(function (asset) {
1061
+ return asset.layout.show;
1062
+ });
1063
+
1064
+ for (var i = 0; i < assetGalleryDOMNode.current.children.length; i++) {
1065
+ if (isElementVisible(assetGalleryDOMNode.current.children[i])) {
1066
+ onAssetSoftSelectedChanged(visibleAssets[i].key);
1067
+ break;
1068
+ }
1069
+ }
1070
+ }
1071
+
1072
+ if (assets.length === 0) return;
1073
+
1074
+ if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
1075
+ if (softSelectedAssetKey === null) {
1076
+ softSelectFirstVisibleAsset();
1077
+ return;
1078
+ }
1079
+ }
1080
+
1081
+ if (e.key === 'ArrowLeft') {
1082
+ var previousAssetIndex = assets.findIndex(function (asset) {
1083
+ return asset.key === softSelectedAssetKey;
1084
+ }) - 1;
1085
+ var previousAsset = assets[previousAssetIndex];
1086
+
1087
+ if (previousAsset) {
1088
+ if (previousAsset.layout.show) {
1089
+ onAssetSoftSelectedChanged(previousAsset.key);
1090
+ } else {
1091
+ softSelectFirstVisibleAsset();
1092
+ }
1093
+ }
1094
+
1095
+ return;
1096
+ }
1097
+
1098
+ if (e.key === 'ArrowRight') {
1099
+ var nextAssetIndex = assets.findIndex(function (asset) {
1100
+ return asset.key === softSelectedAssetKey;
1101
+ }) + 1;
1102
+ var nextAsset = assets[nextAssetIndex];
1103
+
1104
+ if (nextAsset) {
1105
+ if (nextAsset.layout.show) {
1106
+ onAssetSoftSelectedChanged(nextAsset.key);
1107
+ } else {
1108
+ softSelectFirstVisibleAsset();
1109
+ }
1110
+ }
1111
+
1112
+ return;
1113
+ }
1114
+
1115
+ if (e.key === 'Enter') {
1116
+ if (softSelectedAssetKey === null) return;
1117
+
1118
+ if (selectedAssetKeys.includes(softSelectedAssetKey)) {
1119
+ onAssetUnselected(softSelectedAssetKey);
1120
+ } else {
1121
+ onAssetSelected(softSelectedAssetKey);
1122
+ }
1123
+ }
1124
+ }, [assets, softSelectedAssetKey, onAssetSoftSelectedChanged, selectedAssetKeys, assetGalleryCompactRef]);
1125
+ var handleClick = React.useCallback(function () {
1126
+ onAssetSoftSelectedChanged(null);
1127
+ }, []);
1128
+ React.useEffect(function () {
1129
+ if (softSelectable) {
1130
+ document.addEventListener('keydown', handleKeyPress);
1131
+ }
1132
+
1133
+ return function () {
1134
+ return document.removeEventListener('keydown', handleKeyPress);
1135
+ };
1136
+ }, [softSelectable, handleKeyPress]);
1137
+ React.useEffect(function () {
1138
+ if (softSelectable && softSelectedAssetKey !== null) {
1139
+ document.addEventListener('click', handleClick, true);
1140
+ }
1141
+
1142
+ return function () {
1143
+ return document.removeEventListener('click', handleClick, true);
1144
+ };
1145
+ }, [softSelectable, softSelectedAssetKey, handleClick]);
1000
1146
  return React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(AssetGalleryBase$1, defaultTheme._extends({
1001
1147
  ref: assetGalleryCompactRef,
1002
1148
  style: {
@@ -1024,6 +1170,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
1024
1170
  extendedSelectMode: Boolean(selectedAssetKeys.length),
1025
1171
  onAssetSelected: onAssetSelected,
1026
1172
  onAssetUnselected: onAssetUnselected,
1173
+ softSelected: softSelectedAssetKey === asset.key,
1027
1174
  component: component
1028
1175
  }) : React__default['default'].createElement(AssetGalleryCompactCard$1, {
1029
1176
  asset: asset,
@@ -1033,6 +1180,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
1033
1180
  extendedSelectMode: Boolean(selectedAssetKeys.length),
1034
1181
  onAssetSelected: onAssetSelected,
1035
1182
  onAssetUnselected: onAssetUnselected,
1183
+ softSelected: softSelectedAssetKey === asset.key,
1036
1184
  component: component
1037
1185
  })));
1038
1186
  })));
@@ -1045,6 +1193,9 @@ AssetGalleryBase.propTypes = process.env.NODE_ENV !== "production" ? {
1045
1193
  selectedAssetKeys: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string), defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.number)]).isRequired,
1046
1194
  onAssetSelected: defaultTheme.PropTypes.func.isRequired,
1047
1195
  onAssetUnselected: defaultTheme.PropTypes.func.isRequired,
1196
+ softSelectable: defaultTheme.PropTypes.bool,
1197
+ softSelectedAssetKey: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.number]),
1198
+ onAssetSoftSelectedChanged: defaultTheme.PropTypes.func.isRequired,
1048
1199
  component: defaultTheme.PropTypes.func,
1049
1200
  className: defaultTheme.PropTypes.string
1050
1201
  } : {};
@@ -1056,14 +1207,21 @@ var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_r
1056
1207
  selectable = _ref.selectable,
1057
1208
  selectedAssetKeys = _ref.selectedAssetKeys,
1058
1209
  onSelectedChanged = _ref.onSelectedChanged,
1210
+ softSelectable = _ref.softSelectable,
1211
+ onSoftSelectedChanged = _ref.onSoftSelectedChanged,
1059
1212
  component = _ref.component,
1060
- props = defaultTheme._objectWithoutProperties(_ref, ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onSelectedChanged", "component"]);
1213
+ props = defaultTheme._objectWithoutProperties(_ref, ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onSelectedChanged", "softSelectable", "onSoftSelectedChanged", "component"]);
1061
1214
 
1062
1215
  var _useState = React.useState(selectedAssetKeys || []),
1063
1216
  _useState2 = defaultTheme._slicedToArray(_useState, 2),
1064
1217
  selectedAssetKeysInternalState = _useState2[0],
1065
1218
  setSelectedAssetKeysInternalState = _useState2[1];
1066
1219
 
1220
+ var _useState3 = React.useState(null),
1221
+ _useState4 = defaultTheme._slicedToArray(_useState3, 2),
1222
+ softSelectedAssetKeyInternalState = _useState4[0],
1223
+ setSoftSelectedAssetKeyInternalState = _useState4[1];
1224
+
1067
1225
  React.useEffect(function () {
1068
1226
  setSelectedAssetKeysInternalState(selectedAssetKeys || []);
1069
1227
  }, [selectedAssetKeys]);
@@ -1074,6 +1232,11 @@ var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_r
1074
1232
  onSelectedChanged(selectedAssetKeysInternalState);
1075
1233
  }
1076
1234
  }, [selectedAssetKeysInternalState]);
1235
+ React.useEffect(function () {
1236
+ if (lodash.isFunction(onSoftSelectedChanged)) {
1237
+ onSoftSelectedChanged(softSelectedAssetKeyInternalState);
1238
+ }
1239
+ }, [softSelectedAssetKeyInternalState]);
1077
1240
  var onSelected = React.useCallback(function (assetKey) {
1078
1241
  setSelectedAssetKeysInternalState(function (currentState) {
1079
1242
  return [].concat(defaultTheme._toConsumableArray(currentState), [assetKey]);
@@ -1086,6 +1249,10 @@ var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_r
1086
1249
  });
1087
1250
  });
1088
1251
  }, []);
1252
+ var onAssetSoftSelectedChanged = React.useCallback(function () {
1253
+ var assetKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
1254
+ setSoftSelectedAssetKeyInternalState(assetKey);
1255
+ }, []);
1089
1256
  return React__default['default'].createElement(AssetGalleryBase, defaultTheme._extends({
1090
1257
  ref: forwardedRef,
1091
1258
  assets: assets,
@@ -1094,6 +1261,9 @@ var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_r
1094
1261
  selectedAssetKeys: selectedAssetKeysInternalState,
1095
1262
  onAssetSelected: onSelected,
1096
1263
  onAssetUnselected: onUnselected,
1264
+ softSelectable: softSelectable,
1265
+ softSelectedAssetKey: softSelectedAssetKeyInternalState,
1266
+ onAssetSoftSelectedChanged: onAssetSoftSelectedChanged,
1097
1267
  component: component,
1098
1268
  viewMode: viewMode
1099
1269
  }, props));
@@ -1105,6 +1275,8 @@ AssetGallery.propTypes = process.env.NODE_ENV !== "production" ? {
1105
1275
  selectable: defaultTheme.PropTypes.bool,
1106
1276
  selectedAssetKeys: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string), defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.number)]),
1107
1277
  onSelectedChanged: defaultTheme.PropTypes.func,
1278
+ softSelectable: defaultTheme.PropTypes.bool,
1279
+ onSoftSelectedChanged: defaultTheme.PropTypes.func,
1108
1280
  component: defaultTheme.PropTypes.func
1109
1281
  } : {};
1110
1282
  AssetGallery.defaultProps = {
package/{TextInput-72ce7e10.js → TextInput-1ed37e22.js} RENAMED
@@ -42,6 +42,7 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
42
42
  placeholder = _ref.placeholder,
43
43
  required = _ref.required,
44
44
  disabled = _ref.disabled,
45
+ autoComplete = _ref.autoComplete,
45
46
  error = _ref.error,
46
47
  onChange = _ref.onChange,
47
48
  onBlur = _ref.onBlur;
@@ -82,6 +83,7 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
82
83
  placeholder: placeholder,
83
84
  required: required,
84
85
  disabled: disabled,
86
+ autoComplete: autoComplete,
85
87
  error: error,
86
88
  id: "text-input-".concat(uniqueId),
87
89
  onChange: onInputChange,
@@ -96,6 +98,7 @@ TextInput.propTypes = process.env.NODE_ENV !== "production" ? {
96
98
  placeholder: defaultTheme.PropTypes.string,
97
99
  required: defaultTheme.PropTypes.bool,
98
100
  disabled: defaultTheme.PropTypes.bool,
101
+ autoComplete: defaultTheme.PropTypes.string,
99
102
  error: defaultTheme.PropTypes.bool,
100
103
  onChange: defaultTheme.PropTypes.func,
101
104
  onBlur: defaultTheme.PropTypes.func
package/inputs/TextInput/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var TextInput = require('../../TextInput-72ce7e10.js');
3
+ var TextInput = require('../../TextInput-1ed37e22.js');
4
4
  require('../../defaultTheme-18d7c1ee.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/index.js CHANGED
@@ -7,7 +7,7 @@ var Button = require('../Button-89056918.js');
7
7
  var Checkbox = require('../Checkbox-791a409f.js');
8
8
  var Radio = require('../Radio-9271a4b6.js');
9
9
  var TextArea = require('../TextArea-70a74014.js');
10
- var TextInput = require('../TextInput-72ce7e10.js');
10
+ var TextInput = require('../TextInput-1ed37e22.js');
11
11
  require('../defaultTheme-18d7c1ee.js');
12
12
  require('styled-components');
13
13
  require('react');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "0.0.1-beta.33",
3
+ "version": "0.0.1-beta.37",
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",
package/widgets/AssetGallery/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var AssetGallery = require('../../AssetGallery-d48afdf5.js');
3
+ var AssetGallery = require('../../AssetGallery-563abf37.js');
4
4
  require('../../defaultTheme-18d7c1ee.js');
5
5
  require('styled-components');
6
6
  require('react');
@@ -13,7 +13,7 @@ require('nanoid');
13
13
  require('../../Radio-9271a4b6.js');
14
14
  require('polished');
15
15
  require('../../TextArea-70a74014.js');
16
- require('../../TextInput-72ce7e10.js');
16
+ require('../../TextInput-1ed37e22.js');
17
17
  require('../../Popover-0ff13419.js');
18
18
  require('@tippyjs/react');
19
19
  require('../../Tooltip-85e7d561.js');
package/widgets/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var AssetGallery = require('../AssetGallery-d48afdf5.js');
5
+ var AssetGallery = require('../AssetGallery-563abf37.js');
6
6
  require('../defaultTheme-18d7c1ee.js');
7
7
  require('styled-components');
8
8
  require('react');
@@ -15,7 +15,7 @@ require('nanoid');
15
15
  require('../Radio-9271a4b6.js');
16
16
  require('polished');
17
17
  require('../TextArea-70a74014.js');
18
- require('../TextInput-72ce7e10.js');
18
+ require('../TextInput-1ed37e22.js');
19
19
  require('../Popover-0ff13419.js');
20
20
  require('@tippyjs/react');
21
21
  require('../Tooltip-85e7d561.js');