@ntbjs/react-components 1.1.0-beta.2 → 1.1.0-beta.21

package/{Button-00ce7d0f.js → Button-0df54220.js}

@@ -3,32 +3,12 @@
 var defaultTheme = require('./defaultTheme-870f7df1.js');
 var React = require('react');
 var styled = require('styled-components');
-var Popover = require('./Popover-616682bf.js');
-var ContextMenu = require('./ContextMenu-a68d4f28.js');
+var Popover = require('./Popover-de874e41.js');
+var ContextMenu = require('./ContextMenu-ccb7a26a.js');
+var expandMore = require('./expand-more-94585605.js');
 
 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);
 
@@ -99,20 +79,6 @@ var DropdownButtonContainer = styled__default['default'].div.attrs(defaultTheme.
   return !props.singleAction && 'margin-bottom: 1px';
 });
 
-function _extends() { _extends = 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.apply(this, arguments); }
-
-var _ref = /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  d: "M12 14.15l-12-12L2.15 0 12 9.9 21.85.05 24 2.2 12 14.15z"
-});
-
-function SvgExpandMore(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 14.15"
-  }, props), _ref);
-}
-
 var Button = React__default['default'].forwardRef(function Button(_ref, forwardedRef) {
   var onClickEffect = _ref.onClickEffect,
       singleAction = _ref.singleAction,
@@ -246,7 +212,7 @@ var Button = React__default['default'].forwardRef(function Button(_ref, forwarde
     disabled: disabled,
     onClick: handleDropdownButtonClick,
     className: dropdownIsActive ? 'dropdown-is-active' : ''
-  }, React__default['default'].createElement(SvgExpandMore, null))))) : React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(MainButtonContainerSingle, {
+  }, React__default['default'].createElement(expandMore.SvgExpandMore, null))))) : React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(MainButtonContainerSingle, {
     dropdownItems: dropdownItems,
     secondary: secondary,
     outlined: outlined,
@@ -274,7 +240,7 @@ var Button = React__default['default'].forwardRef(function Button(_ref, forwarde
     $loading: loadingState,
     size: size,
     singleAction: singleAction
-  }, icon, children), React__default['default'].createElement(SvgExpandMore, null)))))));
+  }, icon, children), React__default['default'].createElement(expandMore.SvgExpandMore, null)))))));
 });
 Button.propTypes = process.env.NODE_ENV !== "production" ? {
   onClickEffect: defaultTheme.PropTypes.func,

package/{CompactStarRating-f9997240.js → CompactStarRating-b379f623.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"])), 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  & .hiddenInput {\n    display: none;\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    "])));
@@ -109,7 +109,7 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
 
   var stars = Array.from(Array(max).keys());
 
-  var _useState = React.useState(defaultValue),
+  var _useState = React.useState(value || defaultValue),
       _useState2 = defaultTheme._slicedToArray(_useState, 2),
       rating = _useState2[0],
       setRating = _useState2[1];
@@ -126,8 +126,8 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
 
   var inputRef = React.useRef();
   React.useEffect(function () {
-    setRating(value);
-  }, [value]);
+    setRating(value || defaultValue);
+  }, [value, defaultValue]);
   var hasError = React.useMemo(function () {
     if (lodash.isBoolean(error)) {
       return error;
@@ -204,7 +204,8 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
     disabled: readOnly,
     ref: forwardedRef
   }, props), React__default['default'].createElement(labelWidth, null, label), React__default['default'].createElement("input", {
-    type: "hidden",
+    className: "hiddenInput",
+    type: "number",
     ref: inputRef,
     onChange: onChange,
     onBlur: onBlur

package/{CompactTextInput-f00e46a3.js → CompactTextInput-46a00295.js}

@@ -6,11 +6,12 @@ var nanoid = require('nanoid');
 var lodash = require('lodash');
 var styled = require('styled-components');
 var editNote = require('./edit-note-c47d292e.js');
-var Popover = require('./Popover-616682bf.js');
-var Tooltip = require('./Tooltip-860530ff.js');
-require('./Tab-06b7a58d.js');
-require('./Tabs-cfbf45fe.js');
-require('./Badge-86593df4.js');
+require('./Alert-fcc0bb50.js');
+require('./Badge-34ad2850.js');
+var Popover = require('./Popover-de874e41.js');
+require('./Tab-fc380f0b.js');
+require('./Tabs-0aa159fa.js');
+var Tooltip = require('./Tooltip-8c51cc72.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -61,7 +62,7 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
 }, function (props) {
   return props.error && props.theme.themeProp('color', '#CB968F', '#CB968F');
 });
-var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  box-sizing: border-box;\n  height: 22px;\n  width: 100%;\n  display: block;\n  font-size: 0.875rem;\n  line-height: 1rem;\n  font-family: inherit;\n  ", "\n  padding: 1px 4px;\n  ", ";\n  border-radius: 3px;\n  border: 1px solid transparent;\n  text-overflow: ellipsis;\n\n  ", ";\n\n  &&:not(:hover):not(:focus) {\n    ", ";\n    ", ";\n  }\n\n  &&:hover:not(:focus) {\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    & + ", " {\n      opacity: 1;\n    }\n  }\n\n  &&:focus {\n    ", ";\n\n    ", ";\n    outline: none;\n\n    ", ";\n\n    ", ";\n  }\n\n  &::placeholder {\n    ", ";\n\n    ", ";\n  }\n\n  ", "\n"])), function (props) {
+var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  box-sizing: border-box;\n  height: 22px;\n  width: 100%;\n  display: block;\n  font-size: 0.875rem;\n  line-height: 1rem;\n  font-family: inherit;\n  ", "\n  padding: 1px 4px;\n  ", ";\n  border-radius: 3px;\n  border: 1px solid transparent;\n  text-overflow: ellipsis;\n  \n  ", ";\n\n  &&:not(:hover):not(:focus) {\n    ", ";\n    ", ";\n  }\n\n  &&:hover:not(:focus) {\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    & + ", " {\n      opacity: 1;\n    }\n  }\n\n  &&:focus {\n    ", ";\n\n    ", ";\n    outline: none;\n\n    ", ";\n\n    ", ";\n  }\n\n  &&::placeholder {\n    color: inherit;\n    opacity: 0.6;\n}\n\n  ", "\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
 }, function (props) {
   return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
@@ -93,10 +94,6 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
   return props.error && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n        border-color: ", ";\n      "])), function (props) {
     return props.theme.getColor('red-500');
   });
-}, function (props) {
-  return props.theme.themeProp('color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'));
-}, function (props) {
-  return props.theme.themeProp('opacity', 0.6, 0.5, 1);
 }, function (props) {
   return props.bold && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n      font-size: 1rem;\n      font-weight: 500;\n      line-height: 1.0625;\n      padding-top: 3px;\n      padding-bottom: 2px;\n    "])));
 });

package/{ContextMenu-a68d4f28.js → ContextMenu-ccb7a26a.js}

@@ -25,7 +25,7 @@ var ContextMenu = React__default['default'].forwardRef(function ContextMenu(_ref
   }), children);
 });
 ContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.node).isRequired
+  children: defaultTheme.PropTypes.array
 } : {};
 ContextMenu.defaultProps = {};
 

package/Instructions-98d6fe45.js

@@ -0,0 +1,210 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-870f7df1.js');
+var React = require('react');
+var styled = require('styled-components');
+var TextArea = require('./TextArea-efe4fa88.js');
+var AutocompleteSelect = require('./AutocompleteSelect-e82bd937.js');
+var warningCircle = require('./warning-circle-24522402.js');
+var lodash = require('lodash');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+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  width: 100%;\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  justify-content: end;\n  ", ";\n\n  ", ";\n\n  width: 100%;\n  margin-top: 0;\n  transition: margin-top 120ms;\n  &&.slide-in {\n    margin-top: -24px;\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', '#FFFDE8', '#FFFDE8');
+});
+var SelectContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  width: 35%;\n  margin-right: 3px;\n"])));
+var InstructionsArea = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  margin: 0;\n  width: 100%;\n  margin: auto;\n  ", ";\n"])), function (props) {
+  return props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
+});
+
+var Instructions = React__default['default'].forwardRef(function Instructions(_ref, forwardedRef) {
+  var clickToAdd = _ref.clickToAdd,
+      customAddMessage = _ref.customAddMessage,
+      selectedOption = _ref.selectedOption,
+      readOnly = _ref.readOnly,
+      lightBackground = _ref.lightBackground,
+      options = _ref.options,
+      onChangeProp = _ref.onChange,
+      props = defaultTheme._objectWithoutProperties(_ref, ["clickToAdd", "customAddMessage", "selectedOption", "readOnly", "lightBackground", "options", "onChange"]);
+
+  var filterOptions = function filterOptions(inputValue) {
+    return options.filter(function (option) {
+      return option.label.toLowerCase().includes(inputValue.toLowerCase());
+    });
+  };
+
+  var onChange = React.useCallback(function (event) {
+    setCurrentValue(event.target.value);
+
+    if (lodash.isFunction(onChangeProp)) {
+      onChangeProp(event);
+    }
+  }, [onChangeProp]);
+
+  var loadOptions = function loadOptions(inputValue, prevOptions) {
+    var pageLength = 10;
+    var filteredOptions;
+
+    if (!inputValue) {
+      filteredOptions = options;
+    } else {
+      filteredOptions = filterOptions(inputValue);
+    }
+
+    var hasMore = filteredOptions.length > prevOptions.length + pageLength;
+    var slicedOptions = filteredOptions.slice(prevOptions.length, prevOptions.length + pageLength);
+    return {
+      options: slicedOptions,
+      hasMore: hasMore
+    };
+  };
+
+  var loadOptionsPromise = function loadOptionsPromise(inputValue, prevOptions) {
+    return new Promise(function (resolve) {
+      resolve(loadOptions(inputValue, prevOptions));
+    });
+  };
+
+  var _useState = React.useState(false),
+      _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];
+
+  var _useState5 = React.useState(clickToAdd),
+      _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];
+
+  var _useState9 = React.useState(lightBackground),
+      _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];
+
+  var _useState13 = React.useState(),
+      _useState14 = defaultTheme._slicedToArray(_useState13, 2),
+      currentValue = _useState14[0],
+      setCurrentValue = _useState14[1];
+
+  var handleMouseEnter = function handleMouseEnter() {
+    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({});
+      setAddInstructions(true);
+      setBackground(true);
+      setInitialHover(true);
+      setCustomMessage(customAddMessage);
+    } else {
+      setSelected(selected);
+      setCurrentValue(selected.value);
+      setAddInstructions(false);
+      setBackground(false);
+      setInitialHover(false);
+    }
+  };
+
+  var handleLabelChange = function handleLabelChange(event) {
+    var newValue = event.target.value;
+
+    if (lodash.isEmpty(selected) && newValue) {
+      setCurrentValue(newValue);
+    }
+
+    if (newValue) {
+      setCurrentValue(newValue);
+    }
+  };
+
+  React.useEffect(function () {
+    handleChange(selected);
+  }, [selected]);
+  React.useEffect(function () {
+    if (selectedOption) {
+      setCurrentValue(selectedOption.value);
+    }
+  }, [selectedOption]);
+  React.useEffect(function () {
+    if (addInstructions) {
+      setCurrentValue(customMessage);
+      setInitialHover(true);
+    }
+  }, [addInstructions, handleOnFocus]);
+  return React__default['default'].createElement(Instructions$1, defaultTheme._extends({
+    ref: forwardedRef,
+    initialHover: initialHover,
+    onChange: onChange,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, props), React__default['default'].createElement(TopBarContainer, {
+    initialHover: initialHover,
+    className: isHovered && !readOnly && 'slide-in'
+  }, React__default['default'].createElement(SelectContainer, null, React__default['default'].createElement(AutocompleteSelect.AutocompleteSelect, {
+    warning: true,
+    creatable: false,
+    value: selectedOption,
+    loadOptions: loadOptionsPromise,
+    onChange: handleChange
+  }))), React__default['default'].createElement(InstructionsArea, null, React__default['default'].createElement(TextArea.TextArea, {
+    noBorder: true,
+    lightBackground: background,
+    readOnly: readOnly,
+    warningAlert: true,
+    value: currentValue,
+    onChange: handleLabelChange,
+    onFocus: handleOnFocus,
+    icon: React__default['default'].createElement(warningCircle.SvgWarningCircle, null)
+  })));
+});
+Instructions.defaultProps = {
+  clickToAdd: false,
+  lightBackground: false
+};
+Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
+  selectedOption: defaultTheme.PropTypes.object,
+  clickToAdd: defaultTheme.PropTypes.bool,
+  customAddMessage: defaultTheme.PropTypes.string,
+  disabled: defaultTheme.PropTypes.bool,
+  readOnly: defaultTheme.PropTypes.bool,
+  lightBackground: defaultTheme.PropTypes.bool,
+  options: defaultTheme.PropTypes.array,
+  onChange: defaultTheme.PropTypes.func
+} : {};
+
+exports.Instructions = Instructions;