@ntbjs/react-components 1.1.0-beta.31 → 1.1.0-beta.33

package/{AssetGallery-b6b43bbf.js → AssetGallery-a1b96fb9.js}

@@ -10,8 +10,8 @@ var ActionButton = require('./ActionButton-90485300.js');
 require('./AutocompleteSelect-e82bd937.js');
 require('./Button-0df54220.js');
 require('./Checkbox-50f1f3c7.js');
-require('./CompactStarRating-36e6b7b0.js');
-require('./CompactTextInput-6f22ebd6.js');
+require('./CompactStarRating-dafceb01.js');
+require('./CompactTextInput-c6712379.js');
 require('./MultiSelect-3eca3c3e.js');
 require('./Radio-0b46b2a8.js');
 require('./TextArea-efe4fa88.js');
@@ -21,7 +21,7 @@ require('./Badge-34ad2850.js');
 require('./Popover-de874e41.js');
 require('./Tab-fc380f0b.js');
 require('./Tabs-0aa159fa.js');
-var Tooltip = require('./Tooltip-3bb6463f.js');
+var Tooltip = require('./Tooltip-e7f59097.js');
 var styled = require('styled-components');
 var polished = require('polished');
 var warningCircle = require('./warning-circle-24522402.js');

package/{CompactStarRating-36e6b7b0.js → CompactStarRating-dafceb01.js}

@@ -31,21 +31,19 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 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  input[type=\"number\"] {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n    margin: 0;\n  }\n"])), function (props) {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+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  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    "])));
 });
-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) {
+var labelWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = 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  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'));
+var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = 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(_templateObject4 || (_templateObject4 = 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'));
+  return props.warning && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n      ", ";\n    "])), props.theme.themeProp('background', '#634E01', '#FFFDE8'));
 });
-var Star = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n\n  svg {\n    height: 12px;\n    padding-left: 4px;\n    transition: color 250ms;\n  }\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (props) {
+var Star = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n\n  svg {\n    height: 12px;\n    padding-left: 4px;\n    transition: color 250ms;\n  }\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", "\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
 }, function (props) {
   return props.error && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
@@ -53,8 +51,10 @@ var Star = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(
   return props.warning && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
 }, function (props) {
   return props.hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'));
+}, function (props) {
+  return props.disabled && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n      button {\n        cursor: not-allowed;\n      }\n      > * {\n        cursor: not-allowed;\n      }\n    "])));
 });
-var StarFill = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n\n  svg {\n    height: 12px;\n    padding-left: 4px;\n    transition: color 250ms;\n  }\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (props) {
+var StarFill = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n\n  svg {\n    height: 12px;\n    padding-left: 4px;\n    transition: color 250ms;\n  }\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", "\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
 }, function (props) {
   return props.error && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
@@ -62,6 +62,8 @@ var StarFill = styled__default['default'].div.attrs(defaultTheme.applyDefaultThe
   return props.warning && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
 }, function (props) {
   return props.hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'));
+}, function (props) {
+  return props.disabled && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n      button {\n        cursor: not-allowed;\n      }\n      > * {\n        cursor: not-allowed;\n      }\n    "])));
 });
 
 function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
@@ -148,12 +150,20 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
       getRatingProp(rating);
     }
   }, [rating]);
+  React.useEffect(function () {
+    inputRef.current.value = String(rating);
+    onChange({
+      target: inputRef.current
+    });
+  }, [rating]);
 
   var starIconRender = function starIconRender(key) {
     if (rating > 0 && rating >= key + 1) {
       return React__default['default'].createElement(StarFill, {
         disabled: readOnly,
-        onClick: function onClick() {
+        onClick: function onClick(event) {
+          event.preventDefault();
+
           if (key + 1 > 1) {
             return setRating(key + 1);
           } else if (key + 1 == 1) {
@@ -178,7 +188,8 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
     } else if (viewEmpty) {
       return React__default['default'].createElement(Star, {
         disabled: readOnly,
-        onClick: function onClick() {
+        onClick: function onClick(event) {
+          event.preventDefault();
           setRating(key + 1);
         },
         onMouseEnter: function onMouseEnter() {
@@ -198,7 +209,6 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
   };
 
   return React__default['default'].createElement(CompactStarRating$1, defaultTheme._extends({
-    disabled: readOnly,
     ref: forwardedRef,
     onChange: onChange,
     onBlur: onBlur

package/{CompactTextInput-6f22ebd6.js → CompactTextInput-c6712379.js}

@@ -11,7 +11,7 @@ require('./Badge-34ad2850.js');
 var Popover = require('./Popover-de874e41.js');
 require('./Tab-fc380f0b.js');
 require('./Tabs-0aa159fa.js');
-var Tooltip = require('./Tooltip-3bb6463f.js');
+var Tooltip = require('./Tooltip-e7f59097.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/{Instructions-f8301b0b.js → Instructions-3daec8f9.js}

@@ -34,8 +34,12 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
       readOnly = _ref.readOnly,
       lightBackground = _ref.lightBackground,
       options = _ref.options,
+      autoSelect = _ref.autoSelect,
       subscribeCurrentValueProp = _ref.subscribeCurrentValue,
-      props = defaultTheme._objectWithoutProperties(_ref, ["clickToAdd", "customAddMessage", "selectedOption", "readOnly", "lightBackground", "options", "subscribeCurrentValue"]);
+      onChangeProp = _ref.onChange,
+      onFocusProp = _ref.onFocus,
+      onBlurProp = _ref.onBlur,
+      props = defaultTheme._objectWithoutProperties(_ref, ["clickToAdd", "customAddMessage", "selectedOption", "readOnly", "lightBackground", "options", "autoSelect", "subscribeCurrentValue", "onChange", "onFocus", "onBlur"]);
 
   var _useState = React.useState(false),
       _useState2 = defaultTheme._slicedToArray(_useState, 2),
@@ -72,6 +76,32 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
       currentValue = _useState14[0],
       setCurrentValue = _useState14[1];
 
+  var onChange = React.useCallback(function (event) {
+    setCurrentValue(event.target.value);
+
+    if (lodash.isFunction(onChangeProp)) {
+      onChangeProp(event);
+    }
+  }, [onChangeProp]);
+  var onFocus = React.useCallback(function (event) {
+    if (autoSelect) {
+      event.target.select();
+    }
+
+    if (lodash.isFunction(onFocusProp)) {
+      onFocusProp(event);
+    }
+
+    if (event.target.value === customMessage) {
+      setCurrentValue('');
+    }
+  }, [autoSelect, readOnly, onFocusProp]);
+  var onBlur = React.useCallback(function (event) {
+    if (lodash.isFunction(onBlurProp)) {
+      onBlurProp(event);
+    }
+  }, [onBlurProp]);
+
   var filterOptions = function filterOptions(inputValue) {
     return options.filter(function (option) {
       return option.label.toLowerCase().includes(inputValue.toLowerCase());
@@ -132,18 +162,6 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
     }
   };
 
-  var handleLabelChange = function handleLabelChange(event) {
-    var newValue = event.target.value;
-
-    if (lodash.isEmpty(selected) && newValue) {
-      setCurrentValue(newValue);
-    }
-
-    if (newValue) {
-      setCurrentValue(newValue);
-    }
-  };
-
   React.useEffect(function () {
     if (lodash.isFunction(subscribeCurrentValueProp)) {
       subscribeCurrentValueProp(currentValue);
@@ -183,24 +201,29 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
     readOnly: readOnly,
     warningAlert: true,
     value: currentValue,
-    onChange: handleLabelChange,
-    onFocus: handleOnFocus,
+    onFocus: onFocus,
+    onChange: onChange,
+    onBlur: onBlur,
     icon: React__default['default'].createElement(warningCircle.SvgWarningCircle, null)
   })));
 });
 Instructions.defaultProps = {
   clickToAdd: false,
-  lightBackground: false
+  lightBackground: false,
+  autoSelect: true
 };
 Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
   selectedOption: defaultTheme.PropTypes.object,
   clickToAdd: defaultTheme.PropTypes.bool,
   customAddMessage: defaultTheme.PropTypes.string,
-  disabled: defaultTheme.PropTypes.bool,
+  autoSelect: defaultTheme.PropTypes.bool,
   readOnly: defaultTheme.PropTypes.bool,
   lightBackground: defaultTheme.PropTypes.bool,
   options: defaultTheme.PropTypes.array,
-  subscribeCurrentValue: defaultTheme.PropTypes.func
+  subscribeCurrentValue: defaultTheme.PropTypes.func,
+  onChange: defaultTheme.PropTypes.func,
+  onFocus: defaultTheme.PropTypes.func,
+  onBlur: defaultTheme.PropTypes.func
 } : {};
 
 exports.Instructions = Instructions;

package/{Tooltip-3bb6463f.js → Tooltip-e7f59097.js}

@@ -13,7 +13,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var TippyTooltip__default = /*#__PURE__*/_interopDefaultLegacy(TippyTooltip);
 
 var _templateObject;
-var Tooltip$1 = styled__default['default'](TippyTooltip__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 400;\n  background: ", ";\n  border-radius: 3px;\n  z-index: 999999 !important;\n\n  .tippy-tooltip {\n    z-index: 999999 !important;\n  }\n\n  .tippy-content {\n    padding: 9px 12px;\n    z-index: 999999 !important;\n  }\n\n  .tippy-arrow {\n    color: ", ";\n    z-index: 999999 !important;\n  }\n\n  a {\n    color: inherit;\n    z-index: 999999 !important;\n  }\n"])), function (props) {
+var Tooltip$1 = styled__default['default'](TippyTooltip__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 400;\n  background: ", ";\n  border-radius: 3px;\n\n  .tippy-content {\n    padding: 9px 12px;\n  }\n\n  .tippy-arrow {\n    color: ", ";\n  }\n\n  a {\n    color: inherit;\n  }\n"])), function (props) {
   return props.theme.primaryFontFamily;
 }, function (props) {
   return props.theme.getColor('gray-700');

package/data/Tooltip/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Tooltip = require('../../Tooltip-3bb6463f.js');
+var Tooltip = require('../../Tooltip-e7f59097.js');
 require('../../defaultTheme-870f7df1.js');
 require('styled-components');
 require('react');

package/data/index.js

@@ -7,7 +7,7 @@ var Badge = require('../Badge-34ad2850.js');
 var Popover = require('../Popover-de874e41.js');
 var Tab = require('../Tab-fc380f0b.js');
 var Tabs = require('../Tabs-0aa159fa.js');
-var Tooltip = require('../Tooltip-3bb6463f.js');
+var Tooltip = require('../Tooltip-e7f59097.js');
 require('../defaultTheme-870f7df1.js');
 require('styled-components');
 require('react');

package/inputs/CompactStarRating/index.js

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

package/inputs/CompactTextInput/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var CompactTextInput = require('../../CompactTextInput-6f22ebd6.js');
+var CompactTextInput = require('../../CompactTextInput-c6712379.js');
 require('../../defaultTheme-870f7df1.js');
 require('styled-components');
 require('react');
@@ -15,7 +15,7 @@ require('@tippyjs/react');
 require('../../shift-away-subtle-0bdd3b0d.js');
 require('../../Tab-fc380f0b.js');
 require('../../Tabs-0aa159fa.js');
-require('../../Tooltip-3bb6463f.js');
+require('../../Tooltip-e7f59097.js');
 
 
 

package/inputs/index.js

@@ -6,8 +6,8 @@ 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-36e6b7b0.js');
-var CompactTextInput = require('../CompactTextInput-6f22ebd6.js');
+var CompactStarRating = require('../CompactStarRating-dafceb01.js');
+var CompactTextInput = require('../CompactTextInput-c6712379.js');
 var MultiSelect = require('../MultiSelect-3eca3c3e.js');
 var Radio = require('../Radio-0b46b2a8.js');
 var TextArea = require('../TextArea-efe4fa88.js');
@@ -34,7 +34,7 @@ require('../Alert-fcc0bb50.js');
 require('../Badge-34ad2850.js');
 require('../Tab-fc380f0b.js');
 require('../Tabs-0aa159fa.js');
-require('../Tooltip-3bb6463f.js');
+require('../Tooltip-e7f59097.js');
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "1.1.0-beta.31",
+  "version": "1.1.0-beta.33",
   "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-b6b43bbf.js');
+var AssetGallery = require('../../AssetGallery-a1b96fb9.js');
 require('../../defaultTheme-870f7df1.js');
 require('styled-components');
 require('react');
@@ -25,13 +25,13 @@ require('@tippyjs/react');
 require('../../shift-away-subtle-0bdd3b0d.js');
 require('../../ContextMenu-ccb7a26a.js');
 require('../../Checkbox-50f1f3c7.js');
-require('../../CompactStarRating-36e6b7b0.js');
-require('../../CompactTextInput-6f22ebd6.js');
+require('../../CompactStarRating-dafceb01.js');
+require('../../CompactTextInput-c6712379.js');
 require('../../Alert-fcc0bb50.js');
 require('../../Badge-34ad2850.js');
 require('../../Tab-fc380f0b.js');
 require('../../Tabs-0aa159fa.js');
-require('../../Tooltip-3bb6463f.js');
+require('../../Tooltip-e7f59097.js');
 require('../../MultiSelect-3eca3c3e.js');
 require('../../Radio-0b46b2a8.js');
 require('../../TextArea-efe4fa88.js');

package/widgets/Instructions/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Instructions = require('../../Instructions-f8301b0b.js');
+var Instructions = require('../../Instructions-3daec8f9.js');
 require('../../defaultTheme-870f7df1.js');
 require('styled-components');
 require('react');

package/widgets/index.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var AssetGallery = require('../AssetGallery-b6b43bbf.js');
+var AssetGallery = require('../AssetGallery-a1b96fb9.js');
 var ContextMenu = require('../ContextMenu-ccb7a26a.js');
 var AssetPreviewTopBar = require('../AssetPreviewTopBar-020a6f96.js');
-var Instructions = require('../Instructions-f8301b0b.js');
+var Instructions = require('../Instructions-3daec8f9.js');
 require('../defaultTheme-870f7df1.js');
 require('styled-components');
 require('react');
@@ -29,13 +29,13 @@ require('polished');
 require('@tippyjs/react');
 require('../shift-away-subtle-0bdd3b0d.js');
 require('../Checkbox-50f1f3c7.js');
-require('../CompactStarRating-36e6b7b0.js');
-require('../CompactTextInput-6f22ebd6.js');
+require('../CompactStarRating-dafceb01.js');
+require('../CompactTextInput-c6712379.js');
 require('../Alert-fcc0bb50.js');
 require('../Badge-34ad2850.js');
 require('../Tab-fc380f0b.js');
 require('../Tabs-0aa159fa.js');
-require('../Tooltip-3bb6463f.js');
+require('../Tooltip-e7f59097.js');
 require('../MultiSelect-3eca3c3e.js');
 require('../Radio-0b46b2a8.js');
 require('../TextArea-efe4fa88.js');