@ntbjs/react-components 1.2.0-rc.98 → 1.2.0-rc.99

package/{Instructions-235aa0fc.js → Instructions-b6d3e7bd.js}

@@ -1,12 +1,11 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-8bd3e0b9.js');
+var defaultTheme = require('./defaultTheme-ea44e34a.js');
 var lodash = require('lodash');
-var index = require('./index-1e234d23.js');
 var React = require('react');
-var warningCircle = require('./warning-circle-478e65cc.js');
-var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-bf5e8820.js');
-var TextArea = require('./TextArea-cbe713eb.js');
+var warningCircle = require('./warning-circle-24522402.js');
+var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-b68618b3.js');
+var TextArea = require('./TextArea-a5579cc8.js');
 var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -15,77 +14,84 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var Instructions$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  ", ";\n"])), function (props) {
+var Instructions$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  ", ";\n"])), function (props) {
   return props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
 });
-var TopBarContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  width: 100%;\n  margin-top: 0;\n  transition: margin-top 120ms;\n  &&.slide-in {\n    margin-top: -24px;\n  }\n  ", ";\n\n  ", ";\n"])), function (props) {
+var TopBarContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  width: 100%;\n  margin-top: 0;\n  transition: margin-top 120ms;\n  &&.slide-in {\n    margin-top: -24px;\n  }\n  ", ";\n\n  ", ";\n"])), function (props) {
   return props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
 }, function (props) {
   return props.initialHover && props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
 });
-var SelectContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  width: 100%;\n  margin: 0 2px;\n"])));
-var InstructionsArea = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  margin: 2px 2px -2px 2px;\n"])));
+var SelectContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  width: 100%;\n  margin: 0 2px;\n"])));
+var InstructionsArea = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  margin: 2px 2px -2px 2px;\n"])));
 
-var _excluded = ["clickToAdd", "customAddMessage", "selectedOption", "loadOptions", "readOnly", "disabled", "hidden", "name", "lightBackground", "autoSelect", "subscribeCurrentValue", "onChange", "onFocus", "onBlur", "onUpdateCallback", "availableOptions", "loadingMessageFunc", "placeholder", "type", "selectType", "edit", "rows", "showMore", "showMoreText", "showLessText", "isExpanded", "loadingIcon", "successIcon", "padding"];
-var Instructions = React__default["default"].forwardRef(function Instructions(_ref, forwardedRef) {
+var Instructions = React__default['default'].forwardRef(function Instructions(_ref, forwardedRef) {
   var clickToAdd = _ref.clickToAdd,
-    customAddMessage = _ref.customAddMessage,
-    selectedOption = _ref.selectedOption,
-    loadOptions = _ref.loadOptions,
-    readOnly = _ref.readOnly,
-    disabled = _ref.disabled,
-    hidden = _ref.hidden,
-    name = _ref.name,
-    lightBackground = _ref.lightBackground,
-    autoSelect = _ref.autoSelect,
-    subscribeCurrentValueProp = _ref.subscribeCurrentValue,
-    onChangeProp = _ref.onChange,
-    onFocusProp = _ref.onFocus,
-    onBlurProp = _ref.onBlur,
-    onUpdateCallback = _ref.onUpdateCallback,
-    availableOptions = _ref.availableOptions,
-    loadingMessageFunc = _ref.loadingMessageFunc,
-    placeholder = _ref.placeholder,
-    type = _ref.type,
-    selectType = _ref.selectType,
-    edit = _ref.edit,
-    rows = _ref.rows,
-    showMore = _ref.showMore,
-    showMoreText = _ref.showMoreText,
-    showLessText = _ref.showLessText,
-    isExpanded = _ref.isExpanded,
-    loadingIcon = _ref.loadingIcon,
-    successIcon = _ref.successIcon,
-    padding = _ref.padding,
-    props = defaultTheme._objectWithoutProperties(_ref, _excluded);
+      customAddMessage = _ref.customAddMessage,
+      selectedOption = _ref.selectedOption,
+      loadOptions = _ref.loadOptions,
+      readOnly = _ref.readOnly,
+      disabled = _ref.disabled,
+      hidden = _ref.hidden,
+      name = _ref.name,
+      lightBackground = _ref.lightBackground,
+      autoSelect = _ref.autoSelect,
+      subscribeCurrentValueProp = _ref.subscribeCurrentValue,
+      onChangeProp = _ref.onChange,
+      onFocusProp = _ref.onFocus,
+      onBlurProp = _ref.onBlur,
+      onUpdateCallback = _ref.onUpdateCallback,
+      availableOptions = _ref.availableOptions,
+      loadingMessageFunc = _ref.loadingMessageFunc,
+      placeholder = _ref.placeholder,
+      type = _ref.type,
+      selectType = _ref.selectType,
+      edit = _ref.edit,
+      rows = _ref.rows,
+      showMore = _ref.showMore,
+      showMoreText = _ref.showMoreText,
+      showLessText = _ref.showLessText,
+      isExpanded = _ref.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", "selectType", "edit", "rows", "showMore", "showMoreText", "showLessText", "isExpanded", "loadingIcon", "successIcon", "padding"]);
+
   var _useState = React.useState(false),
-    _useState2 = defaultTheme._slicedToArray(_useState, 2),
-    isHovered = _useState2[0],
-    setIsHovered = _useState2[1];
+      _useState2 = defaultTheme._slicedToArray(_useState, 2),
+      isHovered = _useState2[0],
+      setIsHovered = _useState2[1];
+
   var _useState3 = React.useState({}),
-    _useState4 = defaultTheme._slicedToArray(_useState3, 2),
-    selected = _useState4[0],
-    setSelected = _useState4[1];
+      _useState4 = defaultTheme._slicedToArray(_useState3, 2),
+      selected = _useState4[0],
+      setSelected = _useState4[1];
+
   var _useState5 = React.useState(clickToAdd),
-    _useState6 = defaultTheme._slicedToArray(_useState5, 2),
-    addInstructions = _useState6[0],
-    setAddInstructions = _useState6[1];
+      _useState6 = defaultTheme._slicedToArray(_useState5, 2),
+      addInstructions = _useState6[0],
+      setAddInstructions = _useState6[1];
+
   var _useState7 = React.useState(customAddMessage),
-    _useState8 = defaultTheme._slicedToArray(_useState7, 2),
-    customMessage = _useState8[0],
-    setCustomMessage = _useState8[1];
+      _useState8 = defaultTheme._slicedToArray(_useState7, 2),
+      customMessage = _useState8[0],
+      setCustomMessage = _useState8[1];
+
   var _useState9 = React.useState(lightBackground),
-    _useState10 = defaultTheme._slicedToArray(_useState9, 2),
-    background = _useState10[0],
-    setBackground = _useState10[1];
+      _useState10 = defaultTheme._slicedToArray(_useState9, 2),
+      background = _useState10[0],
+      setBackground = _useState10[1];
+
   var _useState11 = React.useState(true),
-    _useState12 = defaultTheme._slicedToArray(_useState11, 2),
-    initialHover = _useState12[0],
-    setInitialHover = _useState12[1];
+      _useState12 = defaultTheme._slicedToArray(_useState11, 2),
+      initialHover = _useState12[0],
+      setInitialHover = _useState12[1];
+
   var _useState13 = React.useState(),
-    _useState14 = defaultTheme._slicedToArray(_useState13, 2),
-    currentValue = _useState14[0],
-    setCurrentValue = _useState14[1];
+      _useState14 = defaultTheme._slicedToArray(_useState13, 2),
+      currentValue = _useState14[0],
+      setCurrentValue = _useState14[1];
+
   React.useEffect(function () {
     if (lodash.isFunction(subscribeCurrentValueProp)) {
       subscribeCurrentValueProp(currentValue);
@@ -107,6 +113,7 @@ var Instructions = React__default["default"].forwardRef(function Instructions(_r
   }, [addInstructions, handleOnFocus]);
   var onChange = React.useCallback(function (event) {
     setCurrentValue(event.target.value);
+
     if (lodash.isFunction(onChangeProp)) {
       onChangeProp(event);
     }
@@ -115,9 +122,11 @@ var Instructions = React__default["default"].forwardRef(function Instructions(_r
     if (autoSelect) {
       event.target.select();
     }
+
     if (lodash.isFunction(onFocusProp)) {
       onFocusProp(event);
     }
+
     if (event.target.value === customMessage) {
       setCurrentValue('');
     }
@@ -127,17 +136,21 @@ var Instructions = React__default["default"].forwardRef(function Instructions(_r
       onBlurProp(event);
     }
   }, [onBlurProp]);
+
   var handleMouseOver = function handleMouseOver() {
     setIsHovered(true);
   };
+
   var handleMouseLeave = function handleMouseLeave() {
     setIsHovered(false);
   };
+
   var handleOnFocus = function handleOnFocus() {
     if (customMessage === currentValue) {
       setCurrentValue('');
     }
   };
+
   var handleChange = function handleChange(selected) {
     if (selected === null) {
       setSelected({});
@@ -154,6 +167,7 @@ var Instructions = React__default["default"].forwardRef(function Instructions(_r
       onUpdateCallback(selected);
     }
   };
+
   var sharedSelectProps = {
     options: loadOptions ? undefined : availableOptions,
     loadOptions: loadOptions,
@@ -161,22 +175,22 @@ var Instructions = React__default["default"].forwardRef(function Instructions(_r
     placeholder: placeholder
   };
   if (hidden) return null;
-  return React__default["default"].createElement(Instructions$1, defaultTheme._extends({
+  return React__default['default'].createElement(Instructions$1, defaultTheme._extends({
     ref: forwardedRef,
     initialHover: initialHover,
     onMouseDown: handleMouseOver,
     onMouseLeave: handleMouseLeave
-  }, props), !readOnly && !disabled && React__default["default"].createElement(TopBarContainer, {
+  }, props), !readOnly && !disabled && React__default['default'].createElement(TopBarContainer, {
     initialHover: initialHover,
     className: isHovered && !readOnly && !disabled && 'slide-in'
-  }, React__default["default"].createElement(SelectContainer, null, React__default["default"].createElement(CompactAutocompleteSelect.CompactAutocompleteSelect, defaultTheme._extends({
+  }, React__default['default'].createElement(SelectContainer, null, React__default['default'].createElement(CompactAutocompleteSelect.CompactAutocompleteSelect, defaultTheme._extends({
     type: selectType,
     value: selectedOption,
     creatable: false,
     onChange: handleChange
-  }, sharedSelectProps)))), React__default["default"].createElement(InstructionsArea, {
+  }, sharedSelectProps)))), React__default['default'].createElement(InstructionsArea, {
     type: type
-  }, React__default["default"].createElement(TextArea.TextArea, {
+  }, React__default['default'].createElement(TextArea.TextArea, {
     noBorder: true,
     instructionsTextArea: true,
     type: type,
@@ -194,7 +208,7 @@ 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
@@ -214,36 +228,36 @@ Instructions.defaultProps = {
   onUpdateCallback: function onUpdateCallback() {}
 };
 Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
-  name: index.PropTypes.string,
-  placeholder: index.PropTypes.string,
-  rows: index.PropTypes.oneOfType([index.PropTypes.number, index.PropTypes.string]),
-  selectedOption: index.PropTypes.any,
-  loadOptions: index.PropTypes.func,
-  loadingMessageFunc: index.PropTypes.func,
-  clickToAdd: index.PropTypes.bool,
-  customAddMessage: index.PropTypes.string,
-  autoSelect: index.PropTypes.bool,
-  readOnly: index.PropTypes.bool,
-  disabled: index.PropTypes.bool,
-  hidden: index.PropTypes.bool,
-  showMore: index.PropTypes.bool,
-  showMoreText: index.PropTypes.string,
-  showLessText: index.PropTypes.string,
-  availableOptions: index.PropTypes.arrayOf(index.PropTypes.object),
-  lightBackground: index.PropTypes.bool,
-  edit: index.PropTypes.bool,
-  options: index.PropTypes.array,
-  subscribeCurrentValue: index.PropTypes.func,
-  onChange: index.PropTypes.func,
-  onFocus: index.PropTypes.func,
-  onBlur: index.PropTypes.func,
-  onUpdateCallback: index.PropTypes.func,
-  type: index.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'instructions-warning', 'loading', 'success']),
-  selectType: index.PropTypes.oneOf(['', 'error', 'warning', 'instructions-warning', 'loading', 'success']),
-  isExpanded: index.PropTypes.func,
-  loadingIcon: index.PropTypes.element,
-  successIcon: index.PropTypes.element,
-  padding: index.PropTypes.oneOf(['', 'small', 'medium', 'large'])
+  name: defaultTheme.PropTypes.string,
+  placeholder: defaultTheme.PropTypes.string,
+  rows: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
+  selectedOption: defaultTheme.PropTypes.any,
+  loadOptions: defaultTheme.PropTypes.func,
+  loadingMessageFunc: defaultTheme.PropTypes.func,
+  clickToAdd: defaultTheme.PropTypes.bool,
+  customAddMessage: defaultTheme.PropTypes.string,
+  autoSelect: defaultTheme.PropTypes.bool,
+  readOnly: defaultTheme.PropTypes.bool,
+  disabled: defaultTheme.PropTypes.bool,
+  hidden: defaultTheme.PropTypes.bool,
+  showMore: defaultTheme.PropTypes.bool,
+  showMoreText: defaultTheme.PropTypes.string,
+  showLessText: defaultTheme.PropTypes.string,
+  availableOptions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
+  lightBackground: defaultTheme.PropTypes.bool,
+  edit: defaultTheme.PropTypes.bool,
+  options: defaultTheme.PropTypes.array,
+  subscribeCurrentValue: defaultTheme.PropTypes.func,
+  onChange: defaultTheme.PropTypes.func,
+  onFocus: defaultTheme.PropTypes.func,
+  onBlur: defaultTheme.PropTypes.func,
+  onUpdateCallback: defaultTheme.PropTypes.func,
+  type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'instructions-warning', 'loading', 'success']),
+  selectType: defaultTheme.PropTypes.oneOf(['', 'error', 'warning', 'instructions-warning', 'loading', 'success']),
+  isExpanded: defaultTheme.PropTypes.func,
+  loadingIcon: defaultTheme.PropTypes.element,
+  successIcon: defaultTheme.PropTypes.element,
+  padding: defaultTheme.PropTypes.oneOf(['', 'small', 'medium', 'large'])
 } : {};
 
 exports.Instructions = Instructions;