@ntbjs/react-components 0.0.1-beta.40 → 0.0.1-beta.43

package/{AssetGallery-b85a48c8.js → AssetGallery-514bef11.js}

@@ -3,13 +3,14 @@
 var defaultTheme = require('./defaultTheme-18d7c1ee.js');
 var React = require('react');
 var lodash = require('lodash');
+var ResizeObserver = require('resize-observer-polyfill');
 var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
 var ActionButton = require('./ActionButton-10a681b9.js');
 require('./Button-6f6b4ed4.js');
 require('./Checkbox-791a409f.js');
 require('./Radio-9271a4b6.js');
 require('./TextArea-70a74014.js');
-require('./TextInput-1ed37e22.js');
+require('./TextInput-770f2416.js');
 require('./Popover-0ff13419.js');
 var Tooltip = require('./Tooltip-85e7d561.js');
 var styled = require('styled-components');
@@ -39,6 +40,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(ResizeObserver);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
@@ -266,7 +268,9 @@ var ComputedRootComponent$1 = function ComputedRootComponent(_ref) {
     }
   }
 
-  return React__default['default'].createElement(AssetGalleryCompactCard$2, newProps);
+  return React__default['default'].createElement(AssetGalleryCompactCard$2, defaultTheme._extends({
+    ref: newProps.innerRef
+  }, newProps));
 };
 
 var ComputedActionButton$1 = React__default['default'].forwardRef(function ComputedActionButton(_ref2, forwardedRef) {
@@ -354,8 +358,27 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       };
     }
   }, []);
+
+  function onDragstart(event) {
+    asset.onDragstart(event);
+  }
+
+  React.useEffect(function () {
+    if (lodash.isFunction(asset.onDragstart)) {
+      if (dragRef.current) {
+        dragRef.current.addEventListener('dragstart', onDragstart);
+      }
+
+      return function () {
+        if (dragRef.current) {
+          dragRef.current.removeEventListener('dragstart', onDragstart);
+        }
+      };
+    }
+  }, []);
   var videoPlayerRef = React.useRef();
   var cardRef = React.useRef();
+  var dragRef = React.useRef(null);
 
   function onMouseEnter(event) {
     event.stopPropagation();
@@ -426,7 +449,9 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
     onClick: onClick,
     extendedSelectMode: extendedSelectMode,
     onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
+    onMouseLeave: onMouseLeave,
+    draggable: asset.draggable,
+    innerRef: dragRef
   }, asset.previewUrl && (['video'].includes(asset.fileType) ? React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
     scrollPosition: scrollPosition
   }, React__default['default'].createElement("video", {
@@ -563,7 +588,9 @@ var ComputedRootComponent = function ComputedRootComponent(_ref) {
     }
   }
 
-  return React__default['default'].createElement(AssetGalleryGridCard$2, newProps);
+  return React__default['default'].createElement(AssetGalleryGridCard$2, defaultTheme._extends({
+    ref: newProps.innerRef
+  }, newProps));
 };
 
 ComputedRootComponent.propTypes = process.env.NODE_ENV !== "production" ? {} : {};
@@ -605,6 +632,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
       scrollPosition = props.scrollPosition;
   var videoPlayerRef = React.useRef();
   var cardRef = React.useRef();
+  var dragRef = React.useRef(null);
 
   function onMouseEnter(event) {
     event.stopPropagation();
@@ -675,6 +703,24 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
       };
     }
   }, []);
+
+  function onDragstart(event) {
+    asset.onDragstart(event);
+  }
+
+  React.useEffect(function () {
+    if (lodash.isFunction(asset.onDragstart)) {
+      if (dragRef.current) {
+        dragRef.current.addEventListener('dragstart', onDragstart);
+      }
+
+      return function () {
+        if (dragRef.current) {
+          dragRef.current.removeEventListener('dragstart', onDragstart);
+        }
+      };
+    }
+  }, []);
   React.useEffect(function () {
     if (softSelected) {
       cardRef.current.scrollIntoView({
@@ -692,7 +738,9 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
     onClick: onClick,
     extendedSelectMode: extendedSelectMode,
     onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
+    onMouseLeave: onMouseLeave,
+    draggable: asset.draggable,
+    innerRef: dragRef
   }, React__default['default'].createElement(ContentWrapper, {
     layout: asset.layout,
     ref: cardRef
@@ -828,7 +876,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
   useIsomorphicLayoutEffect(function () {
     if (!assetGalleryDOMNode.current) return;
     var throttledOnResize = lodash.throttle(onResize, 1);
-    var resizeObserver = new ResizeObserver(throttledOnResize);
+    var resizeObserver = new ResizeObserver__default['default'](throttledOnResize);
     resizeObserver.observe(assetGalleryDOMNode.current);
 
     function onResize(entries) {

package/{TextInput-1ed37e22.js → TextInput-770f2416.js}

@@ -11,25 +11,30 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-var activeLabel = styled.css(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-size: 0.75rem;\n  padding: 0 3px;\n  ", "\n  top: -7px;\n  left: 7px;\n  opacity: 1;\n"])), function (props) {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var activeLabel = styled.css(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-size: 0.75rem;\n  padding: 0 3px;\n  ", "\n  top: -7px;\n  left: 7px !important;\n  opacity: 1;\n"])), function (props) {
   return props.theme.themeProp('background', "linear-gradient(0deg, ".concat(props.theme.getColor('gray-900'), " calc(50% + 1px), transparent 50%)"), "linear-gradient(0deg, ".concat(props.theme.getColor('white'), " calc(50% + 1px), transparent 50%)"));
 });
 var placeholderBaseStyle = styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  color: inherit;\n  opacity: 0.7;\n"])));
-var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 13px;\n  left: 11px;\n  line-height: 1.2;\n  font-size: 0.875rem;\n  transition: all 150ms;\n  ", "\n\n  ", "\n"])), placeholderBaseStyle, function (props) {
+var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 13px;\n  left: 11px;\n  line-height: 1.2;\n  font-size: 0.875rem;\n  transition: all 150ms;\n  ", "\n\n  ", "\ncontent: \"\";\n  ", "\n"])), placeholderBaseStyle, function (props) {
   var _props$inputValue;
 
-  return (props.placeholderVisible || ((_props$inputValue = props.inputValue) === null || _props$inputValue === void 0 ? void 0 : _props$inputValue.length)) && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), activeLabel);
+  return (props.placeholderVisible || ((_props$inputValue = props.inputValue) === null || _props$inputValue === void 0 ? void 0 : _props$inputValue.length) > 0) && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), activeLabel);
+}, function (props) {
+  return props.hasIcon && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n      left: 35px;\n    "])));
 });
-var TextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n  margin-top: 8px;\n\n  &:focus-within {\n    ", " {\n      ", "\n    }\n  }\n\n  ", "\n"])), TextInputLabel, activeLabel, function (props) {
-  return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n      > * {\n        cursor: not-allowed;\n      }\n    "])));
+var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  display: flex;\n  padding: 0 10px;\n\n  svg {\n    width: 15px;\n    opacity: 0.6;\n    transition: opacity 250ms;\n  }\n"])));
+var TextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n  margin-top: 8px;\n\n  &:focus-within {\n    ", " {\n      ", "\n    }\n\n    ", " {\n      svg {\n        opacity: 1;\n      }\n    }\n  }\n\n  ", "\n"])), TextInputLabel, activeLabel, TextInputFieldIcon, function (props) {
+  return props.disabled && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n\n      > * {\n        cursor: not-allowed;\n      }\n    "])));
 });
-var TextInputField = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  font-family: inherit;\n  font-size: 0.875rem;\n  border-radius: 2px;\n  padding: 12px 10px;\n  margin: 0 0 1.07143rem;\n  color: inherit;\n  ", "\n  border: 1px solid;\n  ", "\n  border-radius: 3px;\n  box-sizing: border-box;\n  appearance: none;\n  transition: border-color 350ms;\n\n  ", "\n\n  &::placeholder {\n    ", "\n  }\n\n  :focus {\n    outline: none;\n    ", "\n  }\n"])), function (props) {
+var TextInputField = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  font-family: inherit;\n  font-size: 0.875rem;\n  border-radius: 2px;\n  padding: 12px 10px;\n  margin: 0 0 1.07143rem;\n  color: inherit;\n  ", "\n  border: 1px solid;\n  ", "\n  border-radius: 3px;\n  box-sizing: border-box;\n  appearance: none;\n  transition: border-color 350ms;\n\n  ", "\n\n  ", "\n  &::placeholder {\n    ", "\n  }\n\n  :focus {\n    outline: none;\n    ", "\n  }\n"])), function (props) {
   return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
 }, function (props) {
   return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
 }, function (props) {
-  return props.error && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n      border-color: ", " !important;\n    "])), props.theme.getColor('red-500'));
+  return props.error && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n      border-color: ", " !important;\n    "])), props.theme.getColor('red-500'));
+}, function (props) {
+  return props.hasIcon && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n      padding-left: 35px;\n    "])));
 }, placeholderBaseStyle, function (props) {
   return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'));
 });
@@ -44,6 +49,7 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
       disabled = _ref.disabled,
       autoComplete = _ref.autoComplete,
       error = _ref.error,
+      icon = _ref.icon,
       onChange = _ref.onChange,
       onBlur = _ref.onBlur;
 
@@ -75,8 +81,9 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
   }, label && React__default['default'].createElement(TextInputLabel, {
     htmlFor: "text-input-".concat(uniqueId),
     placeholderVisible: Boolean(placeholder),
+    hasIcon: Boolean(icon),
     inputValue: controlledValue
-  }, label, required && ' *'), React__default['default'].createElement(TextInputField, {
+  }, label, required && ' *'), React__default['default'].createElement(TextInputFieldIcon, null, icon), React__default['default'].createElement(TextInputField, {
     ref: forwardedRef,
     value: controlledValue,
     name: name,
@@ -84,6 +91,7 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
     required: required,
     disabled: disabled,
     autoComplete: autoComplete,
+    hasIcon: Boolean(icon),
     error: error,
     id: "text-input-".concat(uniqueId),
     onChange: onInputChange,
@@ -100,6 +108,7 @@ TextInput.propTypes = process.env.NODE_ENV !== "production" ? {
   disabled: defaultTheme.PropTypes.bool,
   autoComplete: defaultTheme.PropTypes.string,
   error: defaultTheme.PropTypes.bool,
+  icon: defaultTheme.PropTypes.element,
   onChange: defaultTheme.PropTypes.func,
   onBlur: defaultTheme.PropTypes.func
 } : {};

package/inputs/TextInput/index.js

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

package/inputs/index.js

@@ -7,7 +7,7 @@ var Button = require('../Button-6f6b4ed4.js');
 var Checkbox = require('../Checkbox-791a409f.js');
 var Radio = require('../Radio-9271a4b6.js');
 var TextArea = require('../TextArea-70a74014.js');
-var TextInput = require('../TextInput-1ed37e22.js');
+var TextInput = require('../TextInput-770f2416.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.40",
+  "version": "0.0.1-beta.43",
   "description": "NTBs common front-end design utilities and React components.",
   "scripts": {
     "build": "cross-env NODE_ENV=production rollup -c",
@@ -77,6 +77,7 @@
     "nanoid": "^3.1.25",
     "polished": "^4.1.3",
     "react-lazy-load-image-component": "^1.5.1",
+    "resize-observer-polyfill": "^1.5.1",
     "styled-components": "^5.3.1"
   }
 }

package/ssr/index.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+
+
+
+Object.defineProperty(exports, 'ServerStyleSheet', {
+	enumerable: true,
+	get: function () {
+		return styled.ServerStyleSheet;
+	}
+});

package/widgets/AssetGallery/index.js

@@ -1,10 +1,11 @@
 'use strict';
 
-var AssetGallery = require('../../AssetGallery-b85a48c8.js');
+var AssetGallery = require('../../AssetGallery-514bef11.js');
 require('../../defaultTheme-18d7c1ee.js');
 require('styled-components');
 require('react');
 require('lodash');
+require('resize-observer-polyfill');
 require('react-lazy-load-image-component');
 require('../../ActionButton-10a681b9.js');
 require('../../Button-6f6b4ed4.js');
@@ -13,7 +14,7 @@ require('nanoid');
 require('../../Radio-9271a4b6.js');
 require('polished');
 require('../../TextArea-70a74014.js');
-require('../../TextInput-1ed37e22.js');
+require('../../TextInput-770f2416.js');
 require('../../Popover-0ff13419.js');
 require('@tippyjs/react');
 require('../../Tooltip-85e7d561.js');

package/widgets/index.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var AssetGallery = require('../AssetGallery-b85a48c8.js');
+var AssetGallery = require('../AssetGallery-514bef11.js');
 require('../defaultTheme-18d7c1ee.js');
 require('styled-components');
 require('react');
 require('lodash');
+require('resize-observer-polyfill');
 require('react-lazy-load-image-component');
 require('../ActionButton-10a681b9.js');
 require('../Button-6f6b4ed4.js');
@@ -15,7 +16,7 @@ require('nanoid');
 require('../Radio-9271a4b6.js');
 require('polished');
 require('../TextArea-70a74014.js');
-require('../TextInput-1ed37e22.js');
+require('../TextInput-770f2416.js');
 require('../Popover-0ff13419.js');
 require('@tippyjs/react');
 require('../Tooltip-85e7d561.js');