@ntbjs/react-components 1.2.0-rc.20 → 1.2.0-rc.22

package/{AssetGallery-95776546.js → AssetGallery-77ca2b13.js}

@@ -20,7 +20,7 @@ var ActionButton = require('./ActionButton-06df3d6c.js');
 require('./Button-c38d56a0.js');
 require('./Checkbox-68dc38a8.js');
 require('./CompactAutocompleteSelect-43e79e21.js');
-require('./CompactStarRating-9c81ca6e.js');
+require('./CompactStarRating-8b377d59.js');
 require('./CompactTextInput-4388f2f2.js');
 require('./MultiSelect-4b8d3d0d.js');
 require('./Radio-32d0513a.js');
@@ -222,7 +222,8 @@ var FooterLeft = styled__default['default'].div.attrs(defaultTheme.applyDefaultT
 var FooterRight = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13$2 || (_templateObject13$2 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n\n  > * {\n    margin-left: 4px;\n  }\n"])));
 
 var SummaryCard = React__default['default'].forwardRef(function AssetSummaryCard(_ref, forwardedRef) {
-  var title = _ref.title,
+  var activeSummaryCard = _ref.activeSummaryCard,
+      title = _ref.title,
       description = _ref.description,
       instructions = _ref.instructions,
       instructionsType = _ref.instructionsType,
@@ -232,13 +233,14 @@ var SummaryCard = React__default['default'].forwardRef(function AssetSummaryCard
       footerRight = _ref.footerRight,
       width = _ref.width,
       useBorder = _ref.useBorder,
-      props = defaultTheme._objectWithoutProperties(_ref, ["title", "description", "instructions", "instructionsType", "headerLeft", "headerRight", "footerLeft", "footerRight", "width", "useBorder"]);
+      props = defaultTheme._objectWithoutProperties(_ref, ["activeSummaryCard", "title", "description", "instructions", "instructionsType", "headerLeft", "headerRight", "footerLeft", "footerRight", "width", "useBorder"]);
 
   var shouldRenderInstructions = !!instructions;
   var shouldRenderHeader = !!headerLeft || !!headerRight;
   var shouldRenderFooter = !!footerLeft || !!footerRight;
   var shouldAddGutterAfterInstructions = shouldRenderInstructions && shouldRenderFooter;
   var shouldAddGutterAfterTitle = !!title && (!!description || !!instructions || shouldRenderFooter);
+  if (!activeSummaryCard) return null;
   return React__default['default'].createElement(SummaryCard$1, defaultTheme._extends({
     ref: forwardedRef,
     width: width,
@@ -267,6 +269,7 @@ var SummaryCard = React__default['default'].forwardRef(function AssetSummaryCard
   }));
 });
 SummaryCard.propTypes = process.env.NODE_ENV !== "production" ? {
+  activeSummaryCard: defaultTheme.PropTypes.bool,
   title: defaultTheme.PropTypes.string,
   description: defaultTheme.PropTypes.string,
   instructions: defaultTheme.PropTypes.string,
@@ -287,19 +290,20 @@ SummaryCard.defaultProps = {
   headerRight: null,
   footerLeft: null,
   footerRight: null,
-  useBorder: false
+  useBorder: false,
+  activeSummaryCard: false
 };
 
 var _templateObject$1, _templateObject2$1, _templateObject3$1, _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$1, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1;
 var AssetGalleryWrapper$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
   return props.disabled && styled.css(_templateObject2$1 || (_templateObject2$1 = defaultTheme._taggedTemplateLiteral(["\n      cursor: not-allowed;\n    "])));
 });
-var AssetGalleryCompactCard$2 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$1 || (_templateObject3$1 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  height: 100%;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  padding-top: ", "px;\n  box-sizing: border-box;\n  cursor: pointer;\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n  video {\n    width: 100%;\n    height: 100%;\n  }\n\n  .audio {\n    display: flex;\n    justify-content: center;\n    height: 100%;\n    svg {\n      width: 25%;\n    }\n  }\n"])), function (props) {
-  return props.selected ? 3 : 0;
+var AssetGalleryCompactCard$2 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$1 || (_templateObject3$1 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  height: 100%;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  padding-top: ", "px;\n  box-sizing: border-box;\n  cursor: pointer;\n\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n  video {\n    width: 100%;\n    height: 100%;\n  }\n\n  .audio {\n    display: flex;\n    justify-content: center;\n    height: 100%;\n    svg {\n      width: 25%;\n    }\n  }\n"])), function (props) {
+  return props.selected ? 1 : 0;
 }, function (props) {
-  return props.selected ? 3 : 0;
+  return props.selected ? 1 : 0;
 }, function (props) {
-  return props.selected ? 3 : 0;
+  return props.selected ? 1 : 0;
 }, function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
 }, function (props) {
@@ -309,7 +313,7 @@ var AssetGalleryCompactCard$2 = styled__default['default'].div.attrs(defaultThem
 }, function (props) {
   return props.extendedSelectMode && styled.css(_templateObject5$1 || (_templateObject5$1 = defaultTheme._taggedTemplateLiteral(["\n      cursor: pointer;\n    "])));
 });
-var Figure$1 = styled__default['default'].figure(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n  margin: 0;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  .lazy-load-image-background {\n    display: block !important;\n  }\n\n  img,\n  video,\n  .audio {\n    display: block;\n    height: 100%;\n    width: 100%;\n    ", "\n  }\n\n  .audio {\n    display: flex;\n    justify-content: center;\n    svg {\n      width: 25%;\n    }\n  }\n"])), function (props) {
+var Figure$1 = styled__default['default'].figure(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n  margin: 0;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  .lazy-load-image-background {\n    display: block !important;\n  }\n\n  img,\n  video,\n  .audio {\n    display: block;\n    height: 100%;\n    width: 100%;\n    ", "\n  }\n\n  .audio {\n    display: flex;\n\n    justify-content: center;\n    svg {\n      width: 25%;\n    }\n  }\n"])), function (props) {
   return props.hasHeightAndWidth ? styled.css(_templateObject7$1 || (_templateObject7$1 = defaultTheme._taggedTemplateLiteral(["\n            object-fit: cover;\n          "]))) : styled.css(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n            object-fit: contain;\n          "])));
 });
 var FigureOverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9$1 || (_templateObject9$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  inset: 0;\n  opacity: ", ";\n  background-color: ", ";\n"])), function (props) {
@@ -318,7 +322,7 @@ var FigureOverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.
   return props.selected ? '#ACCEF7' : 'transparent';
 });
 var Overlay$1 = 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"])));
-var OverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11$1 || (_templateObject11$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  opacity: 0;\n  transition: opacity 220ms;\n\n  ", "\n\n  ", "\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
+var OverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11$1 || (_templateObject11$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  opacity: 0;\n  transition: opacity 220ms;\n\n  ", "\n  ", "\n    ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
   return !props.selected ? styled.css(_templateObject12$1 || (_templateObject12$1 = defaultTheme._taggedTemplateLiteral(["\n          background: radial-gradient(\n            ellipse at center,\n            rgba(0, 0, 0, 0.3) 27%,\n            rgba(0, 0, 0, 0.5) 60%,\n            rgba(0, 0, 0, 0.7) 90%\n          );\n        "]))) : null;
 }, function (props) {
   return (props.selected || props.softSelected) && styled.css(_templateObject13$1 || (_templateObject13$1 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 1;\n    "])));
@@ -355,7 +359,7 @@ var OverlayInfoTopVersions$1 = styled__default['default'].div.attrs(defaultTheme
   return props !== null && props !== void 0 && props.collapseExtraInfo ? 'none' : 'block';
 }, Overlay$1);
 var OverlayInfoTopWarning$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject21$1 || (_templateObject21$1 = defaultTheme._taggedTemplateLiteral(["\n  margin-left: auto;\n  height: 24px;\n  width: 24px;\n  border-radius: 50%;\n  box-sizing: border-box;\n  padding: ", ";\n  background-color: ", ";\n  opacity: 1;\n\n  svg {\n    width: 100%;\n    color: ", ";\n  }\n\n  ", ":hover & {\n    opacity: 0;\n  }\n"])), function (props) {
-  return props.type === 'error' ? 0 : '4px';
+  return props.type === 'error' ? 0 : '3px 4px';
 }, function (props) {
   return props.type === 'error' ? props.theme.getColor('red-500') : props.theme.getColor('gray-100');
 }, function (props) {
@@ -637,7 +641,10 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       previewContent = React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
         scrollPosition: scrollPosition
       }, React__default['default'].createElement("div", {
-        className: "audio"
+        className: "audio",
+        style: {
+          height: '100%'
+        }
       }, React__default['default'].createElement(SvgHeadset, null)));
     } else {
       previewContent = React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
@@ -715,6 +722,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
     var _asset$summary, _asset$summary2, _asset$summary3, _asset$summary4, _asset$summary5, _asset$summary6, _asset$summary7, _asset$summary8;
 
     return React__default['default'].createElement(SummaryCard, {
+      activeSummaryCard: activeSummaryCard,
       title: (asset === null || asset === void 0 ? void 0 : (_asset$summary = asset.summary) === null || _asset$summary === void 0 ? void 0 : _asset$summary.title) || '',
       description: (asset === null || asset === void 0 ? void 0 : (_asset$summary2 = asset.summary) === null || _asset$summary2 === void 0 ? void 0 : _asset$summary2.description) || '',
       instructions: (asset === null || asset === void 0 ? void 0 : (_asset$summary3 = asset.summary) === null || _asset$summary3 === void 0 ? void 0 : _asset$summary3.instructions) || '',
@@ -1254,6 +1262,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
     var _asset$summary, _asset$summary2, _asset$summary3, _asset$summary4, _asset$summary5, _asset$summary6;
 
     return React__default['default'].createElement(SummaryCard, {
+      activeSummaryCard: true,
       title: (asset === null || asset === void 0 ? void 0 : (_asset$summary = asset.summary) === null || _asset$summary === void 0 ? void 0 : _asset$summary.title) || '',
       description: (asset === null || asset === void 0 ? void 0 : (_asset$summary2 = asset.summary) === null || _asset$summary2 === void 0 ? void 0 : _asset$summary2.description) || '',
       instructions: (asset === null || asset === void 0 ? void 0 : (_asset$summary3 = asset.summary) === null || _asset$summary3 === void 0 ? void 0 : _asset$summary3.instructions) || '',
@@ -1698,7 +1707,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
       style: {
         transform: "translate3d(".concat(asset.layout.translateX, "px, ").concat(asset.layout.translateY, "px, 0)"),
         width: "".concat(asset.layout.width, "px"),
-        height: "".concat(asset.layout.height, "px")
+        height: 'auto'
       }
     }, viewMode === 'grid' ? React__default['default'].createElement(AssetGalleryGridCard$1, {
       asset: asset,

package/{CompactStarRating-9c81ca6e.js → CompactStarRating-8b377d59.js}

@@ -163,7 +163,7 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
 
   var stars = Array.from(Array(max).keys());
 
-  var _useState = React.useState(value || defaultValue),
+  var _useState = React.useState(''),
       _useState2 = defaultTheme._slicedToArray(_useState, 2),
       rating = _useState2[0],
       setRating = _useState2[1];
@@ -173,19 +173,28 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
       hover = _useState4[0],
       setHover = _useState4[1];
 
-  var _useState5 = React.useState(0),
+  var _useState5 = React.useState(''),
       _useState6 = defaultTheme._slicedToArray(_useState5, 2),
       tempRating = _useState6[0],
       setTempRating = _useState6[1];
 
+  var _useState7 = React.useState(''),
+      _useState8 = defaultTheme._slicedToArray(_useState7, 2),
+      initialRating = _useState8[0],
+      setInitialRating = _useState8[1];
+
   var inputRef = React.useRef();
   React.useEffect(function () {
     setRating(value || defaultValue);
+    setInitialRating(value || defaultValue);
   }, [value, defaultValue]);
   React.useEffect(function () {
     inputRef.current.value = String(rating);
 
-    if (rating != value || rating != defaultValue) {
+    if (rating === initialRating) {
+      return undefined;
+    } else {
+      setInitialRating(rating);
       onChange({
         target: inputRef.current
       });

package/inputs/CompactStarRating/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var CompactStarRating = require('../../CompactStarRating-9c81ca6e.js');
+var CompactStarRating = require('../../CompactStarRating-8b377d59.js');
 require('../../defaultTheme-ea44e34a.js');
 require('styled-components');
 require('react');

package/inputs/index.js

@@ -6,7 +6,7 @@ var ActionButton = require('../ActionButton-06df3d6c.js');
 var Button = require('../Button-c38d56a0.js');
 var Checkbox = require('../Checkbox-68dc38a8.js');
 var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-43e79e21.js');
-var CompactStarRating = require('../CompactStarRating-9c81ca6e.js');
+var CompactStarRating = require('../CompactStarRating-8b377d59.js');
 var CompactTextInput = require('../CompactTextInput-4388f2f2.js');
 var MultiSelect = require('../MultiSelect-4b8d3d0d.js');
 var Radio = require('../Radio-32d0513a.js');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "1.2.0-rc.20",
+  "version": "1.2.0-rc.22",
   "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-95776546.js');
+var AssetGallery = require('../../AssetGallery-77ca2b13.js');
 require('../../defaultTheme-ea44e34a.js');
 require('styled-components');
 require('lodash');
@@ -37,7 +37,7 @@ require('react-select');
 require('react-select-async-paginate');
 require('../../react-select-creatable.esm-2f23d6c6.js');
 require('react-dom');
-require('../../CompactStarRating-9c81ca6e.js');
+require('../../CompactStarRating-8b377d59.js');
 require('../../CompactTextInput-4388f2f2.js');
 require('../../MultiSelect-4b8d3d0d.js');
 require('../../Radio-32d0513a.js');

package/widgets/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var AssetGallery = require('../AssetGallery-95776546.js');
+var AssetGallery = require('../AssetGallery-77ca2b13.js');
 var ContextMenu = require('../ContextMenu-4ec3d9f3.js');
 var AssetPreviewTopBar = require('../AssetPreviewTopBar-c28715f7.js');
 var Instructions = require('../Instructions-06fa9d0c.js');
@@ -41,7 +41,7 @@ require('react-select');
 require('react-select-async-paginate');
 require('../react-select-creatable.esm-2f23d6c6.js');
 require('react-dom');
-require('../CompactStarRating-9c81ca6e.js');
+require('../CompactStarRating-8b377d59.js');
 require('../CompactTextInput-4388f2f2.js');
 require('../MultiSelect-4b8d3d0d.js');
 require('../Radio-32d0513a.js');