@ntbjs/react-components 1.2.0-rc.10 → 1.2.0-rc.12

package/{AssetGallery-f63e2732.js → AssetGallery-d82e2298.js}

@@ -24,7 +24,7 @@ require('./CompactStarRating-9c81ca6e.js');
 require('./CompactTextInput-8d1aae0f.js');
 require('./MultiSelect-4b8d3d0d.js');
 require('./Radio-32d0513a.js');
-require('./TextArea-fc4de398.js');
+require('./TextArea-b0125a43.js');
 require('./TextInput-0d109708.js');
 require('./Switch-4a41585f.js');
 var ContextMenu = require('./ContextMenu-4ec3d9f3.js');
@@ -481,7 +481,6 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       openedSubActions = _React$useState4[0],
       updateOpenedSubActions = _React$useState4[1];
 
-  console.log('activeSummaryCard', activeSummaryCard);
   React.useEffect(function () {
     var _asset$actions;
 

package/{Instructions-a78f15fc.js → Instructions-92d9cb6f.js}

@@ -5,7 +5,7 @@ var lodash = require('lodash');
 var React = require('react');
 var warningCircle = require('./warning-circle-24522402.js');
 var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-43e79e21.js');
-var TextArea = require('./TextArea-fc4de398.js');
+var TextArea = require('./TextArea-b0125a43.js');
 var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -51,7 +51,10 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
       showMoreText = _ref.showMoreText,
       showLessText = _ref.showLessText,
       isExpanded = _ref.isExpanded,
-      props = defaultTheme._objectWithoutProperties(_ref, ["clickToAdd", "customAddMessage", "selectedOption", "loadOptions", "readOnly", "disabled", "hidden", "name", "lightBackground", "autoSelect", "subscribeCurrentValue", "onChange", "onFocus", "onBlur", "onUpdateCallback", "availableOptions", "loadingMessageFunc", "placeholder", "type", "edit", "rows", "showMore", "showMoreText", "showLessText", "isExpanded"]);
+      loadingIcon = _ref.loadingIcon,
+      successIcon = _ref.successIcon,
+      padding = _ref.padding,
+      props = defaultTheme._objectWithoutProperties(_ref, ["clickToAdd", "customAddMessage", "selectedOption", "loadOptions", "readOnly", "disabled", "hidden", "name", "lightBackground", "autoSelect", "subscribeCurrentValue", "onChange", "onFocus", "onBlur", "onUpdateCallback", "availableOptions", "loadingMessageFunc", "placeholder", "type", "edit", "rows", "showMore", "showMoreText", "showLessText", "isExpanded", "loadingIcon", "successIcon", "padding"]);
 
   var _useState = React.useState(false),
       _useState2 = defaultTheme._slicedToArray(_useState, 2),
@@ -204,7 +207,10 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
     showMore: showMore,
     showMoreText: showMoreText,
     showLessText: showLessText,
-    icon: React__default['default'].createElement(warningCircle.SvgWarningCircle, null)
+    icon: React__default['default'].createElement(warningCircle.SvgWarningCircle, null),
+    loadingIcon: loadingIcon,
+    successIcon: successIcon,
+    padding: padding
   })));
 });
 Instructions.defaultProps = {
@@ -216,6 +222,7 @@ Instructions.defaultProps = {
   disabled: false,
   readOnly: false,
   type: '',
+  padding: 'medium',
   onUpdateCallback: function onUpdateCallback() {}
 };
 Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -244,7 +251,10 @@ Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
   onBlur: defaultTheme.PropTypes.func,
   onUpdateCallback: defaultTheme.PropTypes.func,
   type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'loading', 'success']),
-  isExpanded: defaultTheme.PropTypes.func
+  isExpanded: defaultTheme.PropTypes.func,
+  loadingIcon: defaultTheme.PropTypes.element,
+  successIcon: defaultTheme.PropTypes.element,
+  padding: defaultTheme.PropTypes.oneOf(['', 'small', 'medium', 'large'])
 } : {};
 
 exports.Instructions = Instructions;

package/{TextArea-fc4de398.js → TextArea-b0125a43.js}

@@ -28,14 +28,14 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
 }, function (props) {
   return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n        display: none;\n      "])));
 });
-var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  width: 100%;\n  font-family: inherit;\n  font-size: 0.875rem;\n  border-radius: 2px;\n  padding: 5px 10px;\n  resize: vertical;\n  z-index: 0;\n  border-radius: 3px;\n  box-sizing: border-box;\n  appearance: none;\n  border: 1px solid;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  ", "\n\n    transition: height 550ms ease-in-out; border-color 350ms;\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    &&:hover:not(:focus) {\n    ", ";\n       ", ";\n\n  }\n\n  ", " \n\n  ", " \n      ", "\n        ", ";\n\n      ", ";\n\n  ", ";\n\n  &&:hover:not(:focus) {\n    ", ";\n    transition: background 350ms;\n    & + ", " {\n      opacity: 1;\n      ", ";\n      transition: opacity 350ms;\n    }\n  }\n\n  ", "\n  ", "\n  ", "\n\n  &::placeholder {\n    ", "\n\n    ", "\n  }\n\n  &&:focus {\n    outline: none;\n    ", "\n\n    ", ";\n\n    ", "\n    ", "\n  }\n\n  &&:not(:hover):not(:focus) {\n    ", ";\n\n    ", ";\n  }\n"])), function (props) {
+var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  width: 100%;\n  font-family: inherit;\n  font-size: 0.875rem;\n  border-radius: 2px;\n  padding: 5px 10px;\n  resize: vertical;\n  z-index: 0;\n  border-radius: 3px;\n  box-sizing: border-box;\n  appearance: none;\n  border: 1px solid;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  ", "\n\n    transition: height 550ms ease-in-out; border-color 350ms;\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    &&:hover:not(:focus) {\n    ", ";\n  }\n\n  ", " \n\n  ", " \n      ", "\n        ", ";\n\n      ", ";\n\n  ", ";\n\n  &&:hover:not(:focus) {\n    ", ";\n    transition: background 350ms;\n    & + ", " {\n      opacity: 1;\n      ", ";\n      transition: opacity 350ms;\n    }\n  }\n\n  ", "\n  ", "\n  ", "\n\n  &::placeholder {\n    ", "\n\n    ", "\n  }\n\n  &&:focus {\n    outline: none;\n    ", "\n\n    ", ";\n\n    ", "\n    ", "\n  }\n\n  &&:not(:hover):not(:focus) {\n    ", ";\n\n    ", ";\n  }\n"])), function (props) {
   return props.padding === 'small' && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n      padding: 5px 10px;\n    "])));
 }, function (props) {
   return props.padding === 'medium' && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n      padding: 13px 15px;\n    "])));
 }, function (props) {
   return props.padding === 'large' && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n      padding: 15px 55px;\n    "])));
 }, function (props) {
-  return props.showMore && !props.expanded && props.defaultHeight < props.maxHeight && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n      height: ", "px;\n      -webkit-mask-image: linear-gradient(0deg, transparent 5px, white 45px);\n    "])), props.defaultHeight);
+  return props.showMore && !props.expanded && props.defaultHeight < props.maxHeight && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n      -webkit-mask-image: linear-gradient(0deg, transparent 5px, white 45px);\n    "])));
 }, function (props) {
   return props.expanded && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n      height: ", "px;\n    "])), props.maxHeight);
 }, function (props) {
@@ -61,9 +61,7 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
 }, function (props) {
   return props.type === 'error-border' && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n        ", "\n      "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
 }, function (props) {
-  return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-800'), props.theme.getColor('gray-100'));
-}, function (props) {
-  return props.disabled && props.theme.themeProp('background', props.theme.getColor('gray-900'), 'white');
+  return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
 }, function (props) {
   return props.type === 'warning' && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n      padding: 13px 15px 13px 10px;\n      ", "\n      ", "\n        &&:hover:not(:focus) {\n        ", "\n        ", "\n      }\n      &&:read-only:hover {\n        ", "\n      }\n    "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01 ', props.theme.getColor('signal-yellow-400')), function (props) {
     return props.disabled && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n            background: none !important;\n          "])));
@@ -139,7 +137,7 @@ var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDe
 }, function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
 });
-var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n  margin-bottom: 0;\n  display: block;\n  position: absolute;\n  font-size: 0.875rem;\n  cursor: pointer;\n  padding: 2px 10px;\n  margin-right: 10px;\n  height: 14px !important;\n  margin-top: -23px;\n\n  ", "\n  transition:  margin-top 550ms ease-in-out;\n  -webkit-mask-image: linear-gradient(180deg, transparent 1px, white 6px);\n  ", "\n\n  ", ";\n\n  ", "\n"])), function (props) {
+var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n  margin-top: -18px;\n  margin-bottom: 0;\n  display: block;\n  position: absolute;\n  font-size: 0.875rem;\n  cursor: pointer;\n  padding: 2px 10px;\n  margin-right: 10px;\n  margin-top: -26px;\n  ", "\n  transition:  margin-top 550ms ease-in-out;\n  -webkit-mask-image: linear-gradient(180deg, transparent 1px, white 7px);\n  ", "\n\n  ", ";\n\n  ", "\n"])), function (props) {
   return props.expanded && styled.css(_templateObject43 || (_templateObject43 = defaultTheme._taggedTemplateLiteral(["\n      margin-top: 0px;\n    "])));
 }, function (props) {
   return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
@@ -251,7 +249,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
     }
   }, []);
   if (hidden) return null;
-  return React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(TextInput, {
+  return React__default['default'].createElement(TextInput, {
     disabled: disabled,
     readOnly: readOnly,
     type: type,
@@ -279,6 +277,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
     icon: icon,
     id: "text-input-".concat(uniqueId),
     lightBackground: lightBackground,
+    padding: padding,
     onChange: function onChange(e) {
       if (e.target.value) {
         setInputIsEmpty(false);
@@ -293,7 +292,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
     noBorder: noBorder
   }, rest, {
     onClick: showMore ? handleTextAreaChange : undefined
-  })), (type === 'loading' || type === 'success') && React__default['default'].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && React__default['default'].createElement(InputIconContainer, {
+  })), (type === 'loading' || type === 'success') && React__default['default'].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
     disabled: disabled
   }, React__default['default'].createElement(editNote.SvgEditNote, {
     className: padding === 'small' && 'smallPadingIcon'
@@ -304,7 +303,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
     inputIsEmpty: inputIsEmpty
   }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default['default'].createElement(Description, {
     type: type
-  }, description)), maxContentRows > rows && showMore && React__default['default'].createElement(ShowMoreText, {
+  }, description), maxContentRows > rows && showMore && React__default['default'].createElement(ShowMoreText, {
     onClick: showMore ? handleTextAreaShowLess : undefined,
     expanded: expanded
   }, !expanded ? showMoreText : showLessText));

package/inputs/TextArea/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var TextArea = require('../../TextArea-fc4de398.js');
+var TextArea = require('../../TextArea-b0125a43.js');
 require('../../defaultTheme-ea44e34a.js');
 require('styled-components');
 require('react');

package/inputs/index.js

@@ -10,7 +10,7 @@ var CompactStarRating = require('../CompactStarRating-9c81ca6e.js');
 var CompactTextInput = require('../CompactTextInput-8d1aae0f.js');
 var MultiSelect = require('../MultiSelect-4b8d3d0d.js');
 var Radio = require('../Radio-32d0513a.js');
-var TextArea = require('../TextArea-fc4de398.js');
+var TextArea = require('../TextArea-b0125a43.js');
 var TextInput = require('../TextInput-0d109708.js');
 var Switch = require('../Switch-4a41585f.js');
 var MultiLevelCheckboxSelect = require('../MultiLevelCheckboxSelect-418de626.js');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "1.2.0-rc.10",
+  "version": "1.2.0-rc.12",
   "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-f63e2732.js');
+var AssetGallery = require('../../AssetGallery-d82e2298.js');
 require('../../defaultTheme-ea44e34a.js');
 require('styled-components');
 require('lodash');
@@ -40,7 +40,7 @@ require('../../CompactStarRating-9c81ca6e.js');
 require('../../CompactTextInput-8d1aae0f.js');
 require('../../MultiSelect-4b8d3d0d.js');
 require('../../Radio-32d0513a.js');
-require('../../TextArea-fc4de398.js');
+require('../../TextArea-b0125a43.js');
 require('../../Switch-4a41585f.js');
 require('../../ContextMenuItem-1fe17ed5.js');
 

package/widgets/Instructions/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Instructions = require('../../Instructions-a78f15fc.js');
+var Instructions = require('../../Instructions-92d9cb6f.js');
 require('../../defaultTheme-ea44e34a.js');
 require('styled-components');
 require('lodash');
@@ -14,7 +14,7 @@ require('../../react-select-creatable.esm-2f23d6c6.js');
 require('react-dom');
 require('../../close-ebf2f3cf.js');
 require('../../expand-more-94585605.js');
-require('../../TextArea-fc4de398.js');
+require('../../TextArea-b0125a43.js');
 require('../../useMergedRefs-b6d2f8fc.js');
 require('../../edit-note-c47d292e.js');
 

package/widgets/index.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var AssetGallery = require('../AssetGallery-f63e2732.js');
+var AssetGallery = require('../AssetGallery-d82e2298.js');
 var ContextMenu = require('../ContextMenu-4ec3d9f3.js');
 var AssetPreviewTopBar = require('../AssetPreviewTopBar-c28715f7.js');
-var Instructions = require('../Instructions-a78f15fc.js');
+var Instructions = require('../Instructions-92d9cb6f.js');
 require('../defaultTheme-ea44e34a.js');
 require('styled-components');
 require('lodash');
@@ -44,7 +44,7 @@ require('../CompactStarRating-9c81ca6e.js');
 require('../CompactTextInput-8d1aae0f.js');
 require('../MultiSelect-4b8d3d0d.js');
 require('../Radio-32d0513a.js');
-require('../TextArea-fc4de398.js');
+require('../TextArea-b0125a43.js');
 require('../Switch-4a41585f.js');
 require('../ContextMenuItem-1fe17ed5.js');