@ntbjs/react-components 1.2.0-rc.88 → 1.2.0-rc.89

package/{AssetGallery-66bff01c.js → AssetGallery-eaaac02f.js}

@@ -19,7 +19,7 @@ require('./VerificationStatusIcon-3bae6e2f.js');
 var ActionButton = require('./ActionButton-a9316775.js');
 require('./Button-39607724.js');
 require('./Checkbox-ad9c9e54.js');
-require('./CompactAutocompleteSelect-1641f82f.js');
+require('./CompactAutocompleteSelect-1962d32f.js');
 require('./CompactStarRating-bbe8800b.js');
 require('./CompactTextInput-72224756.js');
 require('./MultiSelect-149a817b.js');

package/{CompactAutocompleteSelect-1641f82f.js → CompactAutocompleteSelect-1962d32f.js}

@@ -1,6 +1,7 @@
 'use strict';
 
 var defaultTheme = require('./defaultTheme-cd01e6c2.js');
+var lodash = require('lodash');
 var nanoid = require('nanoid');
 var React = require('react');
 require('./Alert-d69a3f95.js');
@@ -60,7 +61,7 @@ var SuccessContainer = styled__default["default"].div.attrs(defaultTheme.applyDe
 }, function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
 });
-styled__default["default"](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n  ", "\n    &&:hover:not(:focus) {\n    ", "\n  }\n"])), sharedStyle, function (props) {
+var AsyncCreatableAutocompleteSelect = styled__default["default"](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n  ", "\n    &&:hover:not(:focus) {\n    ", "\n  }\n"])), sharedStyle, function (props) {
   return props.disabled && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n      cursor: not-allowed;\n    "])));
 }, function (props) {
   return props.disabled && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n        background: none !important;\n        cursor: not-allowed;\n      "])));
@@ -70,12 +71,12 @@ var AsyncAutocompleteSelect = styled__default["default"](reactSelectAsyncPaginat
 }, function (props) {
   return props.disabled && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n        background: none !important;\n        cursor: not-allowed;\n      "])));
 });
-styled__default["default"](Select__default["default"]).attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n  ", "\n    &&:hover:not(:focus) {\n    ", "\n  }\n"])), sharedStyle, function (props) {
+var AutocompletSelect = styled__default["default"](Select__default["default"]).attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n  ", "\n    &&:hover:not(:focus) {\n    ", "\n  }\n"])), sharedStyle, function (props) {
   return props.disabled && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n    "])));
 }, function (props) {
   return props.disabled && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n        background: none !important;\n        cursor: not-allowed;\n      "])));
 });
-styled__default["default"](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), sharedStyle, function (props) {
+var AutocompletCreatableSelect = styled__default["default"](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), sharedStyle, function (props) {
   return props.disabled && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n    "])));
 });
 var Control = styled__default["default"](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    ", ";\n    ", ";\n\n    height: 22px;\n    min-height: 22px;\n    box-shadow: none;\n    box-sizing: border-box;\n    padding: 1px 3px 0 8.7px;\n    cursor: pointer;\n    border: 1px solid transparent;\n    background-color: transparent;\n    ", "\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    ", "\n    ", "\n        ", "\n  }\n\n  & .dropdown-indicator {\n    display: none;\n  }\n\n  &:hover .dropdown-indicator {\n    display: flex;\n  }\n\n  &&:hover {\n    border-color: transparent;\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    ", ";\n  }\n"])), function (props) {
@@ -153,7 +154,7 @@ var IndicatorSeparator = styled__default["default"](Select.components.IndicatorS
   return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
 });
 
-var _excluded = ["label", "availableOptions", "placeholder", "selectedOption", "loadOptions", "noOptionsMessageFunc", "createNewOptionMessageFunc", "onUpdateCallback", "loadingMessageFunc", "readOnly", "edit", "disabled", "hidden", "type", "descriptionToolTip", "loadingIcon", "successIcon"];
+var _excluded = ["label", "availableOptions", "placeholder", "selectedOption", "loadOptions", "noOptionsMessageFunc", "createNewOptionMessageFunc", "onUpdateCallback", "loadingMessageFunc", "creatable", "readOnly", "edit", "disabled", "hidden", "type", "descriptionToolTip", "loadingIcon", "successIcon"];
 var CompactAutocompleteSelect = React__default["default"].forwardRef(function CompactAutocompleteSelect(_ref, forwardedRef) {
   var label = _ref.label,
     availableOptions = _ref.availableOptions,
@@ -164,6 +165,7 @@ var CompactAutocompleteSelect = React__default["default"].forwardRef(function Co
     createNewOptionMessageFunc = _ref.createNewOptionMessageFunc,
     onUpdateCallback = _ref.onUpdateCallback,
     loadingMessageFunc = _ref.loadingMessageFunc,
+    creatable = _ref.creatable,
     readOnly = _ref.readOnly,
     edit = _ref.edit,
     disabled = _ref.disabled,
@@ -184,6 +186,10 @@ var CompactAutocompleteSelect = React__default["default"].forwardRef(function Co
     _useState6 = defaultTheme._slicedToArray(_useState5, 2),
     focused = _useState6[0],
     setFocused = _useState6[1];
+  var _useState7 = React.useState(0),
+    _useState8 = defaultTheme._slicedToArray(_useState7, 2),
+    cacheUnique = _useState8[0],
+    setCacheUnique = _useState8[1];
   var memoizedDescriptionToolTip = React.useMemo(function () {
     return descriptionToolTip;
   }, [descriptionToolTip]);
@@ -275,7 +281,7 @@ var CompactAutocompleteSelect = React__default["default"].forwardRef(function Co
   };
   var sharedSelectProps = {
     ref: forwardedRef,
-    options: availableOptions,
+    options: loadOptions ? undefined : availableOptions,
     value: selected,
     loadOptions: loadOptions,
     loadingMessage: loadingMessageFunc,
@@ -296,12 +302,16 @@ var CompactAutocompleteSelect = React__default["default"].forwardRef(function Co
     isSearchable: true,
     placeholder: placeholder,
     id: uniqueId,
+    cacheUniqs: loadOptions ? [cacheUnique] : undefined,
     onChange: function onChange(selected, actionMeta) {
       switch (actionMeta.action) {
         case 'create-option':
           if (onUpdateCallback) {
             onUpdateCallback(actionMeta.action, selected.value);
           }
+          if (cacheUnique) {
+            setCacheUnique(cacheUnique + 1);
+          }
           setSelected(selected);
           break;
         case 'select-option':
@@ -347,7 +357,15 @@ var CompactAutocompleteSelect = React__default["default"].forwardRef(function Co
     }, React__default["default"].createElement(InputContainer, null, label && React__default["default"].createElement(Label, {
       htmlFor: uniqueId,
       disabled: disabled
-    }, label, React__default["default"].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React__default["default"].createElement(AsyncAutocompleteSelect, defaultTheme._extends({}, props, sharedSelectProps))));
+    }, label, React__default["default"].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), loadOptions ? creatable ? React__default["default"].createElement(AsyncCreatableAutocompleteSelect, defaultTheme._extends({
+      $hasLabel: !lodash.isEmpty(label)
+    }, sharedSelectProps, props)) : React__default["default"].createElement(AsyncAutocompleteSelect, defaultTheme._extends({
+      $hasLabel: !lodash.isEmpty(label)
+    }, props, sharedSelectProps)) : creatable ? React__default["default"].createElement(AutocompletCreatableSelect, defaultTheme._extends({
+      $hasLabel: !lodash.isEmpty(label)
+    }, sharedSelectProps, props)) : React__default["default"].createElement(AutocompletSelect, defaultTheme._extends({
+      $hasLabel: !lodash.isEmpty(label)
+    }, sharedSelectProps, props))));
   };
   return React__default["default"].createElement(React__default["default"].Fragment, null, !memoizedDescriptionToolTip && input(), memoizedDescriptionToolTip && React__default["default"].createElement("div", null, React__default["default"].createElement(Tooltip.Tooltip, {
     content: memoizedDescriptionToolTip,
@@ -379,23 +397,5 @@ CompactAutocompleteSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   loadingIcon: defaultTheme.PropTypes.element,
   successIcon: defaultTheme.PropTypes.element
 } : {};
-CompactAutocompleteSelect.defaultProps = {
-  noOptionsMessageFunc: function noOptionsMessageFunc(inputValue) {
-    if (inputValue) {
-      return "No matches for \"".concat(inputValue, "\"");
-    } else {
-      return 'No available options';
-    }
-  },
-  readOnly: false,
-  disabled: false,
-  creatable: true,
-  edit: false,
-  error: false,
-  warning: false,
-  hidden: false,
-  type: '',
-  descriptionToolTip: ''
-};
 
 exports.CompactAutocompleteSelect = CompactAutocompleteSelect;

package/{Instructions-b3e8e09d.js → Instructions-a06c8787.js}

@@ -4,7 +4,7 @@ var defaultTheme = require('./defaultTheme-cd01e6c2.js');
 var lodash = require('lodash');
 var React = require('react');
 var warningCircle = require('./warning-circle-478e65cc.js');
-var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-1641f82f.js');
+var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-1962d32f.js');
 var TextArea = require('./TextArea-c2620d92.js');
 var styled = require('styled-components');
 

package/inputs/CompactAutocompleteSelect/index.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var CompactAutocompleteSelect = require('../../CompactAutocompleteSelect-1641f82f.js');
+var CompactAutocompleteSelect = require('../../CompactAutocompleteSelect-1962d32f.js');
 require('../../defaultTheme-cd01e6c2.js');
 require('styled-components');
+require('lodash');
 require('nanoid');
 require('react');
 require('../../Alert-d69a3f95.js');
-require('lodash');
 require('../../Badge-cbbff6b8.js');
 require('../../Popover-c5e425a7.js');
 require('polished');

package/inputs/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var ActionButton = require('../ActionButton-a9316775.js');
 var Button = require('../Button-39607724.js');
 var Checkbox = require('../Checkbox-ad9c9e54.js');
-var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-1641f82f.js');
+var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-1962d32f.js');
 var CompactStarRating = require('../CompactStarRating-bbe8800b.js');
 var CompactTextInput = require('../CompactTextInput-72224756.js');
 var MultiSelect = require('../MultiSelect-149a817b.js');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "1.2.0-rc.88",
+  "version": "1.2.0-rc.89",
   "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-66bff01c.js');
+var AssetGallery = require('../../AssetGallery-eaaac02f.js');
 require('../../defaultTheme-cd01e6c2.js');
 require('styled-components');
 require('lodash');
@@ -32,7 +32,7 @@ require('../../ActionButton-a9316775.js');
 require('../../Button-39607724.js');
 require('../../ContextMenu-4eb8fdc5.js');
 require('../../expand-more-d74e2bd2.js');
-require('../../CompactAutocompleteSelect-1641f82f.js');
+require('../../CompactAutocompleteSelect-1962d32f.js');
 require('react-select');
 require('react-select-async-paginate');
 require('../../react-select-creatable.esm-66ca61dc.js');

package/widgets/Instructions/index.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var Instructions = require('../../Instructions-b3e8e09d.js');
+var Instructions = require('../../Instructions-a06c8787.js');
 require('../../defaultTheme-cd01e6c2.js');
 require('styled-components');
 require('lodash');
 require('react');
 require('../../warning-circle-478e65cc.js');
-require('../../CompactAutocompleteSelect-1641f82f.js');
+require('../../CompactAutocompleteSelect-1962d32f.js');
 require('nanoid');
 require('../../Alert-d69a3f95.js');
 require('../../Badge-cbbff6b8.js');

package/widgets/index.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var AssetGallery = require('../AssetGallery-66bff01c.js');
+var AssetGallery = require('../AssetGallery-eaaac02f.js');
 var ContextMenu = require('../ContextMenu-4eb8fdc5.js');
 var AssetPreviewTopBar = require('../AssetPreviewTopBar-c9e45035.js');
-var Instructions = require('../Instructions-b3e8e09d.js');
+var Instructions = require('../Instructions-a06c8787.js');
 require('../defaultTheme-cd01e6c2.js');
 require('styled-components');
 require('lodash');
@@ -36,7 +36,7 @@ require('../warning-circle-478e65cc.js');
 require('../ActionButton-a9316775.js');
 require('../Button-39607724.js');
 require('../expand-more-d74e2bd2.js');
-require('../CompactAutocompleteSelect-1641f82f.js');
+require('../CompactAutocompleteSelect-1962d32f.js');
 require('react-select');
 require('react-select-async-paginate');
 require('../react-select-creatable.esm-66ca61dc.js');