@ntbjs/react-components 1.1.0-beta.22 → 1.1.0-beta.24

package/{AssetGallery-763861f4.js → AssetGallery-bc291d22.js}

@@ -10,7 +10,7 @@ var ActionButton = require('./ActionButton-90485300.js');
 require('./AutocompleteSelect-e82bd937.js');
 require('./Button-0df54220.js');
 require('./Checkbox-50f1f3c7.js');
-require('./CompactStarRating-b379f623.js');
+require('./CompactStarRating-c5bf1e84.js');
 require('./CompactTextInput-46a00295.js');
 require('./MultiSelect-3eca3c3e.js');
 require('./Radio-0b46b2a8.js');

package/{CompactStarRating-b379f623.js → CompactStarRating-c5bf1e84.js}

@@ -32,7 +32,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-var CompactStarRating$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 500;\n  height: 24px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n\n  ", "\n\n  & .hiddenInput {\n    display: none;\n  }\n"])), function (props) {
+var CompactStarRating$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 500;\n  height: 24px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n\n  ", "\n\n  input[type=\"number\"] {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n    margin: 0;\n  }\n"])), function (props) {
   return props.theme.primaryFontFamily;
 }, function (props) {
   return props.disabled && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n      button {\n        cursor: not-allowed;\n      }\n      > * {\n        cursor: not-allowed;\n      }\n    "])));
@@ -40,7 +40,7 @@ var CompactStarRating$1 = styled__default['default'].div.attrs(defaultTheme.appl
 var labelWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  width: 33.3%;\n  display: flex;\n  align-items: center;\n  text-align: left;\n  font: normal normal normal 14px/16px Roboto;\n  letter-spacing: 0px;\n  padding: 0;\n  height: 19px;\n\n  ", "\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
 });
-var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  width: 66.6%;\n  border-radius: 3px;\n  height: 24px;\n\n  ", "\n\n  ", "\n"])), function (props) {
+var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  width: 66.6%;\n  border-radius: 3px;\n  height: 24px;\n  align-items: center;\n\n  ", "\n\n  ", "\n"])), function (props) {
   return props.error && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n      ", ";\n    "])), props.theme.themeProp('background', '#7F1B1B', '#FBEAE6'));
 }, function (props) {
   return props.warning && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n      ", ";\n    "])), props.theme.themeProp('background', '#634E01', '#FFFDE8'));
@@ -105,7 +105,8 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
       error = _ref.error,
       warning = _ref.warning,
       readOnly = _ref.readOnly,
-      props = defaultTheme._objectWithoutProperties(_ref, ["label", "icon", "iconFill", "max", "defaultValue", "value", "viewEmpty", "onChange", "onBlur", "error", "warning", "readOnly"]);
+      getRatingProp = _ref.getRating,
+      props = defaultTheme._objectWithoutProperties(_ref, ["label", "icon", "iconFill", "max", "defaultValue", "value", "viewEmpty", "onChange", "onBlur", "error", "warning", "readOnly", "getRating"]);
 
   var stars = Array.from(Array(max).keys());
 
@@ -143,77 +144,71 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
     return !lodash.isEmpty(warning);
   }, [warning]);
   React.useEffect(function () {
-    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
-    nativeInputValueSetter.call(inputRef.current, String(rating));
-    var ev2 = new Event('input', {
-      bubbles: true
-    });
-    ev2.simulated = true;
-    inputRef.current.dispatchEvent(ev2);
+    if (lodash.isFunction(getRatingProp)) {
+      getRatingProp(rating);
+    }
   }, [rating]);
 
   var starIconRender = function starIconRender(key) {
-    if (rating > 0 && rating >= key + 1) {
-      return React__default['default'].createElement(StarFill, {
-        disabled: readOnly,
-        onClick: function onClick() {
-          if (key + 1 > 1) {
-            return setRating(key + 1);
-          } else if (key + 1 == 1) {
-            setRating(function (current) {
-              return current === 1 ? 0 : key + 1;
-            });
-          }
-        },
-        onMouseEnter: function onMouseEnter() {
-          setTempRating(key + 1);
-          setHover(true);
-        },
-        onMouseLeave: function onMouseLeave() {
-          setTempRating(0);
-          setHover(false);
-        },
-        hover: hover && key + 1 <= tempRating,
-        warning: warning,
-        error: error,
-        key: key
-      }, iconFill);
-    } else if (viewEmpty) {
-      return React__default['default'].createElement(Star, {
-        disabled: readOnly,
-        onClick: function onClick() {
-          setRating(key + 1);
-        },
-        onMouseEnter: function onMouseEnter() {
-          setTempRating(key + 1);
-          setHover(true);
-        },
-        onMouseLeave: function onMouseLeave() {
-          setTempRating(0);
-          setHover(false);
-        },
-        hover: hover && key + 1 <= tempRating,
-        warning: warning,
-        error: error,
-        key: key
-      }, icon);
-    }
+    var ratingChecker = rating > 0 && rating >= key + 1;
+    return ratingChecker ? React__default['default'].createElement(StarFill, {
+      disabled: readOnly,
+      onClick: function onClick() {
+        if (key + 1 > 1) {
+          return setRating(key + 1);
+        } else if (key + 1 == 1) {
+          setRating(function (current) {
+            return current === 1 ? 0 : key + 1;
+          });
+        }
+      },
+      onMouseEnter: function onMouseEnter() {
+        setTempRating(key + 1);
+        setHover(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        setTempRating(0);
+        setHover(false);
+      },
+      hover: hover && key + 1 <= tempRating,
+      warning: warning,
+      error: error,
+      key: key
+    }, iconFill) : viewEmpty && React__default['default'].createElement(Star, {
+      disabled: readOnly,
+      onClick: function onClick() {
+        setRating(key + 1);
+      },
+      onMouseEnter: function onMouseEnter() {
+        setTempRating(key + 1);
+        setHover(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        setTempRating(0);
+        setHover(false);
+      },
+      hover: hover && key + 1 <= tempRating,
+      warning: warning,
+      error: error,
+      key: key
+    }, icon);
   };
 
   return React__default['default'].createElement(CompactStarRating$1, defaultTheme._extends({
     disabled: readOnly,
-    ref: forwardedRef
-  }, props), React__default['default'].createElement(labelWidth, null, label), React__default['default'].createElement("input", {
-    className: "hiddenInput",
-    type: "number",
-    ref: inputRef,
+    ref: forwardedRef,
     onChange: onChange,
     onBlur: onBlur
-  }), React__default['default'].createElement(starsWidth, {
+  }, props), React__default['default'].createElement(labelWidth, null, label), React__default['default'].createElement(starsWidth, {
     error: hasError,
     warning: hasWarning
   }, stars.map(function (key) {
-    return starIconRender(key);
+    return React__default['default'].createElement("div", {
+      key: key
+    }, React__default['default'].createElement("input", {
+      type: "number",
+      ref: inputRef
+    }), starIconRender(key));
   })));
 });
 CompactStarRating.defaultProps = {
@@ -237,7 +232,8 @@ CompactStarRating.propTypes = process.env.NODE_ENV !== "production" ? {
   onBlur: defaultTheme.PropTypes.func,
   error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
   warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
-  readOnly: defaultTheme.PropTypes.bool
+  readOnly: defaultTheme.PropTypes.bool,
+  getRating: defaultTheme.PropTypes.bool
 } : {};
 
 exports.CompactStarRating = CompactStarRating;

package/inputs/CompactStarRating/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var CompactStarRating = require('../../CompactStarRating-b379f623.js');
+var CompactStarRating = require('../../CompactStarRating-c5bf1e84.js');
 require('../../defaultTheme-870f7df1.js');
 require('styled-components');
 require('react');

package/inputs/index.js

@@ -6,7 +6,7 @@ var ActionButton = require('../ActionButton-90485300.js');
 var AutocompleteSelect = require('../AutocompleteSelect-e82bd937.js');
 var Button = require('../Button-0df54220.js');
 var Checkbox = require('../Checkbox-50f1f3c7.js');
-var CompactStarRating = require('../CompactStarRating-b379f623.js');
+var CompactStarRating = require('../CompactStarRating-c5bf1e84.js');
 var CompactTextInput = require('../CompactTextInput-46a00295.js');
 var MultiSelect = require('../MultiSelect-3eca3c3e.js');
 var Radio = require('../Radio-0b46b2a8.js');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "1.1.0-beta.22",
+  "version": "1.1.0-beta.24",
   "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-763861f4.js');
+var AssetGallery = require('../../AssetGallery-bc291d22.js');
 require('../../defaultTheme-870f7df1.js');
 require('styled-components');
 require('react');
@@ -25,7 +25,7 @@ require('@tippyjs/react');
 require('../../shift-away-subtle-0bdd3b0d.js');
 require('../../ContextMenu-ccb7a26a.js');
 require('../../Checkbox-50f1f3c7.js');
-require('../../CompactStarRating-b379f623.js');
+require('../../CompactStarRating-c5bf1e84.js');
 require('../../CompactTextInput-46a00295.js');
 require('../../Alert-fcc0bb50.js');
 require('../../Badge-34ad2850.js');

package/widgets/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var AssetGallery = require('../AssetGallery-763861f4.js');
+var AssetGallery = require('../AssetGallery-bc291d22.js');
 var ContextMenu = require('../ContextMenu-ccb7a26a.js');
 var AssetPreviewTopBar = require('../AssetPreviewTopBar-020a6f96.js');
 var Instructions = require('../Instructions-f8301b0b.js');
@@ -29,7 +29,7 @@ require('polished');
 require('@tippyjs/react');
 require('../shift-away-subtle-0bdd3b0d.js');
 require('../Checkbox-50f1f3c7.js');
-require('../CompactStarRating-b379f623.js');
+require('../CompactStarRating-c5bf1e84.js');
 require('../CompactTextInput-46a00295.js');
 require('../Alert-fcc0bb50.js');
 require('../Badge-34ad2850.js');