@ntbjs/react-components 1.3.0-rc.4 → 1.3.0-rc.41

package/{Instructions-e5947be9.js → Instructions-9910f44d.js}

@@ -1,97 +1,131 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-ea44e34a.js');
+var defaultTheme = require('./defaultTheme-573a9150.js');
 var lodash = require('lodash');
 var React = require('react');
-var warningCircle = require('./warning-circle-24522402.js');
-var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-755b1869.js');
-var TextArea = require('./TextArea-8f62da6e.js');
+var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-c7a11d3d.js');
+var TextArea = require('./TextArea-ecfd3418.js');
 var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 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 _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function SvgWarningCircle(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M10.8 15.6h2.4V18h-2.4zm0-9.6h2.4v7.2h-2.4zm1.188-6A12 12 0 1024 12 11.994 11.994 0 0011.988 0zM12 21.6a9.6 9.6 0 119.6-9.6 9.597 9.597 0 01-9.6 9.6z"
+  })));
+}
+
+var Instructions$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "Instructionsstyled__Instructions",
+  componentId: "sc-1lgufne-0"
+})(["display:flex;position:relative;flex-direction:column;", ";"], 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).withConfig({
+  displayName: "Instructionsstyled__TopBarContainer",
+  componentId: "sc-1lgufne-1"
+})(["position:absolute;display:flex;width:100%;margin-top:0;transition:margin-top 120ms;&&.slide-in{margin-top:-24px;}", ";", ";"], 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).withConfig({
+  displayName: "Instructionsstyled__SelectContainer",
+  componentId: "sc-1lgufne-2"
+})(["width:100%;margin:0 2px;"]);
+var InstructionsArea = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme).withConfig({
+  displayName: "Instructionsstyled__InstructionsArea",
+  componentId: "sc-1lgufne-3"
+})(["margin:2px 2px -2px 2px;"]);
 
-var Instructions = React__default['default'].forwardRef(function Instructions(_ref, forwardedRef) {
+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 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, ["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"]);
-
+    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);
   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);
@@ -113,7 +147,6 @@ 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);
     }
@@ -122,11 +155,9 @@ 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('');
     }
@@ -136,21 +167,17 @@ 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({});
@@ -167,7 +194,6 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
       onUpdateCallback(selected);
     }
   };
-
   var sharedSelectProps = {
     options: loadOptions ? undefined : availableOptions,
     loadOptions: loadOptions,
@@ -175,22 +201,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,
@@ -208,7 +234,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(SvgWarningCircle, null),
     loadingIcon: loadingIcon,
     successIcon: successIcon,
     padding: padding
@@ -261,3 +287,4 @@ Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 
 exports.Instructions = Instructions;
+exports.SvgWarningCircle = SvgWarningCircle;