@ntbjs/react-components 0.0.1-beta.31 → 0.0.1-beta.35

package/{AssetGallery-c79858ba.js → AssetGallery-8513d161.js}

@@ -9,7 +9,7 @@ require('./Button-89056918.js');
 require('./Checkbox-791a409f.js');
 require('./Radio-9271a4b6.js');
 require('./TextArea-70a74014.js');
-require('./TextInput-72ce7e10.js');
+require('./TextInput-1ed37e22.js');
 require('./Popover-0ff13419.js');
 var Tooltip = require('./Tooltip-85e7d561.js');
 var styled = require('styled-components');
@@ -297,7 +297,8 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       extendedSelectMode = props.extendedSelectMode,
       onAssetSelected = props.onAssetSelected,
       onAssetUnselected = props.onAssetUnselected,
-      component = props.component;
+      component = props.component,
+      scrollPosition = props.scrollPosition;
 
   function onClick(event) {
     if (extendedSelectMode) {
@@ -411,7 +412,9 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
     extendedSelectMode: extendedSelectMode,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
-  }, asset.previewUrl && (['video'].includes(asset.fileType) ? React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, null, React__default['default'].createElement("video", {
+  }, asset.previewUrl && (['video'].includes(asset.fileType) ? React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
+    scrollPosition: scrollPosition
+  }, React__default['default'].createElement("video", {
     ref: videoPlayerRef,
     loop: true,
     muted: true
@@ -425,8 +428,10 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
     src: asset.previewUrl,
     height: "100%",
     width: "100%",
-    effect: "opacity",
-    threshold: 700
+    delayMethod: "debounce",
+    delayTime: 0,
+    threshold: 1500,
+    scrollPosition: scrollPosition
   }))), React__default['default'].createElement(Overlay, {
     ref: cardRef
   }, 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, {
@@ -466,15 +471,16 @@ AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
   extendedSelectMode: defaultTheme.PropTypes.bool,
   onAssetSelected: defaultTheme.PropTypes.func.isRequired,
   onAssetUnselected: defaultTheme.PropTypes.func.isRequired,
-  component: defaultTheme.PropTypes.func
+  component: defaultTheme.PropTypes.func,
+  scrollPosition: defaultTheme.PropTypes.number
 } : {};
 AssetGalleryCompactCard.defaultProps = {};
-var AssetGalleryCompactCard$1 = React__default['default'].memo(AssetGalleryCompactCard, function (prevProps, nextProps) {
+var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default['default'].memo(AssetGalleryCompactCard, function (prevProps, nextProps) {
   var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'asset.previewUrl', 'asset.overlay', 'hasHeightAndWidth'];
   return reactiveProps.every(function (propKey) {
     return lodash.get(prevProps, propKey) === lodash.get(nextProps, propKey);
   });
-});
+}));
 
 var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 var AssetGalleryGridCard$2 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  height: 100%;\n  margin: 0;\n  ", "\n  border: 1px solid;\n  ", ";\n  ", "\n  box-sizing: border-box;\n  text-decoration: none;\n"])), function (props) {
@@ -570,7 +576,8 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
       extendedSelectMode = props.extendedSelectMode,
       onAssetSelected = props.onAssetSelected,
       onAssetUnselected = props.onAssetUnselected,
-      component = props.component;
+      component = props.component,
+      scrollPosition = props.scrollPosition;
   var videoPlayerRef = React.useRef();
   var cardRef = React.useRef();
 
@@ -660,7 +667,9 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
     title: asset.note.title
   }, asset.note.icon ? asset.note.icon : React__default['default'].createElement(SvgWarningCircle, null), React__default['default'].createElement(NoteTitle, null, asset.note.title)), React__default['default'].createElement(Asset, {
     "data-id": "ss"
-  }, asset.previewUrl && (['video'].includes(asset.fileType) ? React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, null, React__default['default'].createElement("video", {
+  }, asset.previewUrl && (['video'].includes(asset.fileType) ? React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
+    scrollPosition: scrollPosition
+  }, React__default['default'].createElement("video", {
     ref: videoPlayerRef,
     loop: true,
     muted: true
@@ -672,8 +681,10 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
     src: asset.previewUrl,
     height: "100%",
     width: "100%",
-    effect: "opacity",
-    threshold: 700
+    delayMethod: "debounce",
+    delayTime: 0,
+    threshold: 1500,
+    scrollPosition: scrollPosition
   })))), React__default['default'].createElement(Info, null, React__default['default'].createElement("div", {
     style: {
       display: 'flex'
@@ -715,15 +726,16 @@ AssetGalleryGridCard.propTypes = process.env.NODE_ENV !== "production" ? {
   extendedSelectMode: defaultTheme.PropTypes.bool,
   onAssetSelected: defaultTheme.PropTypes.func.isRequired,
   onAssetUnselected: defaultTheme.PropTypes.func.isRequired,
-  component: defaultTheme.PropTypes.func
+  component: defaultTheme.PropTypes.func,
+  scrollPosition: defaultTheme.PropTypes.number
 } : {};
 AssetGalleryGridCard.defaultProps = {};
-var AssetGalleryGridCard$1 = React__default['default'].memo(AssetGalleryGridCard, function (prevProps, nextProps) {
+var AssetGalleryGridCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default['default'].memo(AssetGalleryGridCard, function (prevProps, nextProps) {
   var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'asset.previewUrl', 'asset.overlay', 'asset.layout'];
   return reactiveProps.every(function (propKey) {
     return lodash.get(prevProps, propKey) === lodash.get(nextProps, propKey);
   });
-});
+}));
 
 var _templateObject, _templateObject2, _templateObject3;
 var AssetGalleryBase$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n"])));
@@ -761,8 +773,8 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
   }, [viewMode, thumbnailMaxHeight]);
   var SPACE_BETWEEN_ASSETS = 8;
   var SPACE_UNDER_ASSETS = 8;
-  var PRIMARY_SCROLL_BUFFER_HEIGHT = 700;
-  var SECONDARY_SCROLL_BUFFER_HEIGHT = 300;
+  var PRIMARY_SCROLL_BUFFER_HEIGHT = 1500;
+  var SECONDARY_SCROLL_BUFFER_HEIGHT = 500;
   var GRID_VIEW_MODE_ASSET_MIN_WIDTH = 300;
   var GRID_VIEW_MODE_ASSET_HEIGHT = 403;
   var MISSING_WIDTH_PLACEHOLDER = 1920;
@@ -1007,7 +1019,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
       }
     }, viewMode === 'grid' ? React__default['default'].createElement(AssetGalleryGridCard$1, {
       asset: asset,
-      selectable: "selectable" in asset ? asset.selectable : selectable,
+      selectable: 'selectable' in asset ? asset.selectable : selectable,
       selected: selectedAssetKeys.includes(asset.key),
       extendedSelectMode: Boolean(selectedAssetKeys.length),
       onAssetSelected: onAssetSelected,
@@ -1016,7 +1028,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
     }) : React__default['default'].createElement(AssetGalleryCompactCard$1, {
       asset: asset,
       hasHeightAndWidth: asset.layout.hasHeightAndWidth,
-      selectable: "selectable" in asset ? asset.selectable : selectable,
+      selectable: 'selectable' in asset ? asset.selectable : selectable,
       selected: selectedAssetKeys.includes(asset.key),
       extendedSelectMode: Boolean(selectedAssetKeys.length),
       onAssetSelected: onAssetSelected,

package/{TextInput-72ce7e10.js → TextInput-1ed37e22.js}

@@ -42,6 +42,7 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
       placeholder = _ref.placeholder,
       required = _ref.required,
       disabled = _ref.disabled,
+      autoComplete = _ref.autoComplete,
       error = _ref.error,
       onChange = _ref.onChange,
       onBlur = _ref.onBlur;
@@ -82,6 +83,7 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
     placeholder: placeholder,
     required: required,
     disabled: disabled,
+    autoComplete: autoComplete,
     error: error,
     id: "text-input-".concat(uniqueId),
     onChange: onInputChange,
@@ -96,6 +98,7 @@ TextInput.propTypes = process.env.NODE_ENV !== "production" ? {
   placeholder: defaultTheme.PropTypes.string,
   required: defaultTheme.PropTypes.bool,
   disabled: defaultTheme.PropTypes.bool,
+  autoComplete: defaultTheme.PropTypes.string,
   error: defaultTheme.PropTypes.bool,
   onChange: defaultTheme.PropTypes.func,
   onBlur: defaultTheme.PropTypes.func

package/inputs/TextInput/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var TextInput = require('../../TextInput-72ce7e10.js');
+var TextInput = require('../../TextInput-1ed37e22.js');
 require('../../defaultTheme-18d7c1ee.js');
 require('styled-components');
 require('react');

package/inputs/index.js

@@ -7,7 +7,7 @@ var Button = require('../Button-89056918.js');
 var Checkbox = require('../Checkbox-791a409f.js');
 var Radio = require('../Radio-9271a4b6.js');
 var TextArea = require('../TextArea-70a74014.js');
-var TextInput = require('../TextInput-72ce7e10.js');
+var TextInput = require('../TextInput-1ed37e22.js');
 require('../defaultTheme-18d7c1ee.js');
 require('styled-components');
 require('react');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "0.0.1-beta.31",
+  "version": "0.0.1-beta.35",
   "description": "NTBs common front-end design utilities and React components.",
   "scripts": {
     "build": "cross-env NODE_ENV=production rollup -c",

package/widgets/AssetGallery/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var AssetGallery = require('../../AssetGallery-c79858ba.js');
+var AssetGallery = require('../../AssetGallery-8513d161.js');
 require('../../defaultTheme-18d7c1ee.js');
 require('styled-components');
 require('react');
@@ -13,7 +13,7 @@ require('nanoid');
 require('../../Radio-9271a4b6.js');
 require('polished');
 require('../../TextArea-70a74014.js');
-require('../../TextInput-72ce7e10.js');
+require('../../TextInput-1ed37e22.js');
 require('../../Popover-0ff13419.js');
 require('@tippyjs/react');
 require('../../Tooltip-85e7d561.js');

package/widgets/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var AssetGallery = require('../AssetGallery-c79858ba.js');
+var AssetGallery = require('../AssetGallery-8513d161.js');
 require('../defaultTheme-18d7c1ee.js');
 require('styled-components');
 require('react');
@@ -15,7 +15,7 @@ require('nanoid');
 require('../Radio-9271a4b6.js');
 require('polished');
 require('../TextArea-70a74014.js');
-require('../TextInput-72ce7e10.js');
+require('../TextInput-1ed37e22.js');
 require('../Popover-0ff13419.js');
 require('@tippyjs/react');
 require('../Tooltip-85e7d561.js');