@pingux/astro 1.16.1-alpha.0 → 1.17.0-alpha.2

package/lib/cjs/components/MultivaluesField/MultivaluesField.stories.js

@@ -16,10 +16,10 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = exports.WithReadOnlyValues = exports.WithDisabledKeys = exports.WithCustomValues = exports.WithCustomSize = exports.Uncontrolled = exports.Default = exports.Controlled = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _ = require("../..");
@@ -34,7 +34,9 @@ var _default = {
   title: 'Form/MultivaluesField',
   component: _.MultivaluesField,
   argTypes: {
-    direction: {},
+    direction: {
+      defaultValue: 'bottom'
+    },
     hasAutoFocus: {},
     hasNoStatusIndicator: {},
     isDisabled: {},
@@ -118,7 +120,26 @@ var items = [{
   key: 'Shark'
 }];
 
+var setOverlayStyle = function setOverlayStyle(direction, isOpen, mr, ml, mt) {
+  return {
+    marginRight: direction === 'right' && isOpen ? mr : 0,
+    marginLeft: direction === 'left' && isOpen ? ml : 0,
+    marginTop: direction === 'top' && isOpen ? mt : 0
+  };
+};
+
 var Default = function Default(args) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
   return (// const items = [
     // { id: 1, name: 'Aardvark', key: 'Aardvark' },
     // { id: 2, name: 'Kangaroo', key: 'Kangaroo' },
@@ -128,9 +149,14 @@ var Default = function Default(args) {
     // { id: 6, name: 'Orangutan', key: 'Orangutan' },
     // { id: 7, name: 'Shark', key: 'Shark' },
     // ];
-    (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+    (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+    , {
+      style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+    }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
       items: items
-    }, args), function (item) {
+    }, args, {
+      onOpenChange: onOpenChange
+    }), function (item) {
       return (0, _react2.jsx)(_.Item, {
         key: item.key,
         "data-id": item.name
@@ -142,10 +168,26 @@ var Default = function Default(args) {
 exports.Default = Default;
 
 var WithCustomValues = function WithCustomValues(args) {
-  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      isOpen = _useState4[0],
+      setIsOpen = _useState4[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
     items: items,
     mode: "non-restrictive"
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return (0, _react2.jsx)(_.Item, {
       key: item.key,
       "data-id": item.name
@@ -161,10 +203,26 @@ WithCustomValues.argTypes = {
 };
 
 var WithDisabledKeys = function WithDisabledKeys(args) {
-  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      isOpen = _useState6[0],
+      setIsOpen = _useState6[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
     disabledKeys: ['Aardvark'],
     items: items
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return (0, _react2.jsx)(_.Item, {
       key: item.key,
       "data-id": item.name
@@ -175,10 +233,26 @@ var WithDisabledKeys = function WithDisabledKeys(args) {
 exports.WithDisabledKeys = WithDisabledKeys;
 
 var Uncontrolled = function Uncontrolled(args) {
-  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      isOpen = _useState8[0],
+      setIsOpen = _useState8[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
     defaultSelectedKeys: ['Aardvark', 'Snake'],
     items: items
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return (0, _react2.jsx)(_.Item, {
       key: item.key,
       "data-id": item.name
@@ -189,17 +263,32 @@ var Uncontrolled = function Uncontrolled(args) {
 exports.Uncontrolled = Uncontrolled;
 
 var Controlled = function Controlled(args) {
-  var _useState = (0, _react.useState)(['Aardvark', 'Snake']),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      selectedKeys = _useState2[0],
-      setSelectedKeys = _useState2[1];
+  var _useState9 = (0, _react.useState)(['Aardvark', 'Snake']),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      selectedKeys = _useState10[0],
+      setSelectedKeys = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+      isOpen = _useState12[0],
+      setIsOpen = _useState12[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
 
-  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
     label: "Field Label"
   }, args, {
     items: items,
     onSelectionChange: setSelectedKeys,
-    selectedKeys: selectedKeys
+    selectedKeys: selectedKeys,
+    onOpenChange: onOpenChange
   }), function (item) {
     return (0, _react2.jsx)(_.Item, {
       key: item.key,
@@ -211,6 +300,17 @@ var Controlled = function Controlled(args) {
 exports.Controlled = Controlled;
 
 var WithCustomSize = function WithCustomSize(args) {
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+      isOpen = _useState14[0],
+      setIsOpen = _useState14[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
   return (0, _react2.jsx)(_.Box, {
     sx: {
       width: '100%',
@@ -219,9 +319,14 @@ var WithCustomSize = function WithCustomSize(args) {
     }
   }, (0, _react2.jsx)(_.Box, {
     width: 300
-  }, (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  }, (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '25%', '25%', '75%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
     items: items
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return (0, _react2.jsx)(_.Item, {
       key: item.key,
       "data-id": item.name
@@ -232,10 +337,26 @@ var WithCustomSize = function WithCustomSize(args) {
 exports.WithCustomSize = WithCustomSize;
 
 var WithReadOnlyValues = function WithReadOnlyValues(args) {
-  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+      isOpen = _useState16[0],
+      setIsOpen = _useState16[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
     readOnlyKeys: ['Aardvark', 'Snake'],
     items: items
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return (0, _react2.jsx)(_.Item, {
       key: item.key,
       "data-id": item.name

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -11,13 +11,14 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 var _excluded = ["shouldFocusOnHover", "shouldSelectOnPressUp"];
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import React, { useCallback, useRef, useState, forwardRef, useImperativeHandle } from 'react';
+import React, { useCallback, useRef, useState, forwardRef, useImperativeHandle, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { DismissButton, useOverlayPosition } from '@react-aria/overlays';
 import { useComboBox } from '@react-aria/combobox';
@@ -57,13 +58,14 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
       onFocusChange = props.onFocusChange,
       onKeyDown = props.onKeyDown,
       onKeyUp = props.onKeyUp,
+      hasAddOption = props.hasAddOption,
       hasCustomValue = props.hasCustomValue,
       hasNoEmptySelection = props.hasNoEmptySelection,
       defaultSelectedKey = props.defaultSelectedKey,
       selectedKey = props.selectedKey,
       onSelectionChange = props.onSelectionChange,
-      defaultItems = props.defaultItems,
-      items = props.items,
+      initialDefaultItems = props.defaultItems,
+      initialItems = props.items,
       onOpenChange = props.onOpenChange,
       loadingState = props.loadingState,
       onLoadMore = props.onLoadMore,
@@ -91,13 +93,11 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     onFocusChange: onFocusChange,
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,
-    allowsCustomValue: hasCustomValue,
+    allowsCustomValue: hasAddOption || hasCustomValue,
     disallowEmptySelection: hasNoEmptySelection,
     defaultSelectedKey: defaultSelectedKey,
     selectedKey: selectedKey,
     onSelectionChange: onSelectionChange,
-    defaultItems: defaultItems,
-    items: items,
     onOpenChange: onOpenChange,
     loadingState: loadingState,
     onLoadMore: onLoadMore,
@@ -123,18 +123,47 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var onSelectionChangeHandler = function onSelectionChangeHandler(key) {
     var newVal = key || selectedKey || '';
+
+    if (hasAddOption && selectedKey !== inputValue) {
+      newVal = inputValue;
+    }
+
     if (onSelectionChange) onSelectionChange(newVal);
   };
 
+  var shouldShowAddOption = hasAddOption && inputValue && selectedKey !== inputValue;
+  var addOption = "ADD: ".concat(inputValue);
+
+  var getItemsArr = function getItemsArr(initialArr) {
+    if (initialArr && shouldShowAddOption) {
+      var _context;
+
+      return _concatInstanceProperty(_context = []).call(_context, initialArr, [{
+        name: addOption,
+        key: addOption
+      }]);
+    }
+
+    return initialArr;
+  };
+
+  var defaultItems = getItemsArr(initialDefaultItems);
+  var items = getItemsArr(initialItems);
+
   var _useFilter = useFilter({
     sensitivity: 'base'
   }),
       contains = _useFilter.contains;
 
   var state = useComboBoxState(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
-    onSelectionChange: hasCustomValue ? onSelectionChangeHandler : onSelectionChange,
+    defaultItems: defaultItems,
+    items: items,
+    onSelectionChange: hasAddOption || hasCustomValue ? onSelectionChangeHandler : onSelectionChange,
     defaultFilter: typeof defaultFilter !== 'undefined' ? defaultFilter : contains
   }));
+  useEffect(function () {
+    if (shouldShowAddOption) state.selectionManager.setFocusedKey(addOption);
+  }, [shouldShowAddOption, state, addOption]);
 
   var _useComboBox = useComboBox(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
     buttonRef: buttonRef,
@@ -241,6 +270,9 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, listbox));
 });
 ComboBoxField.propTypes = {
+  /* Whether or not adding new options to the list is enabled. */
+  hasAddOption: PropTypes.bool,
+
   /** Whether the ComboBox allows a non-item matching input value to be set. */
   hasCustomValue: PropTypes.bool,
 

package/lib/components/ComboBoxField/ComboBoxField.stories.js

@@ -1,3 +1,5 @@
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/starts-with";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
@@ -469,4 +471,53 @@ export var CustomDefaultFilter = function CustomDefaultFilter() {
       key: item.name
     }, item.name);
   }));
+};
+export var ControlledWithAddOption = function ControlledWithAddOption() {
+  var _useState11 = useState(items),
+      _useState12 = _slicedToArray(_useState11, 2),
+      options = _useState12[0],
+      setOptions = _useState12[1];
+
+  var _useState13 = useState(''),
+      _useState14 = _slicedToArray(_useState13, 2),
+      inputValue = _useState14[0],
+      setInputValue = _useState14[1];
+
+  var _useState15 = useState(''),
+      _useState16 = _slicedToArray(_useState15, 2),
+      selectedKey = _useState16[0],
+      setSelectedKey = _useState16[1];
+
+  var onSelectionChange = function onSelectionChange(key) {
+    // Add new option to options array
+    if (key && !_findInstanceProperty(options).call(options, function (_ref2) {
+      var name = _ref2.name;
+      return name === key;
+    })) {
+      var _context2;
+
+      setOptions(_concatInstanceProperty(_context2 = []).call(_context2, options, [{
+        key: key,
+        name: key
+      }]));
+    }
+
+    setInputValue(key);
+    setSelectedKey(key);
+  };
+
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    defaultItems: options
+  }, actions, {
+    inputValue: inputValue,
+    selectedKey: selectedKey,
+    onInputChange: setInputValue,
+    onSelectionChange: onSelectionChange,
+    hasAddOption: true
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
 };

package/lib/components/ComboBoxField/ComboBoxField.test.js

@@ -9,6 +9,8 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/starts-with";
@@ -16,7 +18,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useState, useMemo } from 'react';
 import { axe } from 'jest-axe';
@@ -83,6 +85,54 @@ var ComboBoxWithCustomFilter = function ComboBoxWithCustomFilter() {
   });
 };
 
+var ComboBoxWithAddOption = function ComboBoxWithAddOption() {
+  var _useState3 = useState(items),
+      _useState4 = _slicedToArray(_useState3, 2),
+      options = _useState4[0],
+      setOptions = _useState4[1];
+
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      inputValue = _useState6[0],
+      setInputValue = _useState6[1];
+
+  var _useState7 = useState(''),
+      _useState8 = _slicedToArray(_useState7, 2),
+      selectedKey = _useState8[0],
+      setSelectedKey = _useState8[1];
+
+  var onSelectionChange = function onSelectionChange(key) {
+    if (key && !_findInstanceProperty(options).call(options, function (_ref2) {
+      var name = _ref2.name;
+      return name === key;
+    })) {
+      var _context;
+
+      setOptions(_concatInstanceProperty(_context = []).call(_context, options, [{
+        key: key,
+        name: key
+      }]));
+    }
+
+    setInputValue(key);
+    setSelectedKey(key);
+  };
+
+  return ___EmotionJSX(ComboBoxField, {
+    label: "Example label",
+    defaultItems: options,
+    inputValue: inputValue,
+    selectedKey: selectedKey,
+    onInputChange: setInputValue,
+    onSelectionChange: onSelectionChange,
+    hasAddOption: true
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  });
+};
+
 beforeAll(function () {
   jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
     return 1000;
@@ -357,41 +407,41 @@ test('should use default contains filtering', function () {
 });
 test('should be able to use controlled filtering', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
   var options, input;
-  return _regeneratorRuntime.wrap(function _callee$(_context) {
+  return _regeneratorRuntime.wrap(function _callee$(_context2) {
     while (1) {
-      switch (_context.prev = _context.next) {
+      switch (_context2.prev = _context2.next) {
         case 0:
           render(___EmotionJSX(ComboBoxWithCustomFilter, null));
           input = screen.queryByRole('combobox'); // Should list all without filterable input
 
           userEvent.type(input, '{arrowdown}');
-          _context.next = 5;
+          _context2.next = 5;
           return screen.findAllByRole('option');
 
         case 5:
-          options = _context.sent;
+          options = _context2.sent;
           expect(options).toHaveLength(items.length); // Should only list the second option
 
           userEvent.type(input, 'k');
-          _context.next = 10;
+          _context2.next = 10;
           return screen.findAllByRole('option');
 
         case 10:
-          options = _context.sent;
+          options = _context2.sent;
           expect(options[0]).toHaveTextContent(items[1].name);
 
         case 12:
         case "end":
-          return _context.stop();
+          return _context2.stop();
       }
     }
   }, _callee);
 })));
 test('should be able to use custom default filtering', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
   var options, defaultFilter, input;
-  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+  return _regeneratorRuntime.wrap(function _callee2$(_context3) {
     while (1) {
-      switch (_context2.prev = _context2.next) {
+      switch (_context3.prev = _context3.next) {
         case 0:
           defaultFilter = function defaultFilter(option, inputValue) {
             return _startsWithInstanceProperty(option).call(option, inputValue);
@@ -403,33 +453,33 @@ test('should be able to use custom default filtering', /*#__PURE__*/_asyncToGene
           input = screen.queryByRole('combobox'); // Should list all without filterable input
 
           userEvent.type(input, '{arrowdown}');
-          _context2.next = 6;
+          _context3.next = 6;
           return screen.findAllByRole('option');
 
         case 6:
-          options = _context2.sent;
+          options = _context3.sent;
           expect(options).toHaveLength(items.length); // Should only list the second option
 
           userEvent.type(input, 'K');
-          _context2.next = 11;
+          _context3.next = 11;
           return screen.findAllByRole('option');
 
         case 11:
-          options = _context2.sent;
+          options = _context3.sent;
           expect(options[0]).toHaveTextContent(items[1].name);
 
         case 13:
         case "end":
-          return _context2.stop();
+          return _context3.stop();
       }
     }
   }, _callee2);
 })));
 test('should show in input "textValue" if provided', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
   var newItems, input, options;
-  return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+  return _regeneratorRuntime.wrap(function _callee3$(_context4) {
     while (1) {
-      switch (_context3.prev = _context3.next) {
+      switch (_context4.prev = _context4.next) {
         case 0:
           newItems = _mapInstanceProperty(items).call(items, function (item) {
             return _objectSpread(_objectSpread({}, item), {}, {
@@ -441,11 +491,11 @@ test('should show in input "textValue" if provided', /*#__PURE__*/_asyncToGenera
           });
           input = screen.queryByRole('combobox');
           userEvent.click(input);
-          _context3.next = 6;
+          _context4.next = 6;
           return screen.findAllByRole('option');
 
         case 6:
-          options = _context3.sent;
+          options = _context4.sent;
           userEvent.click(options[0]);
           expect(input).toHaveValue(newItems[0].textValue); // Check that on clicking again "textValue" still returning
 
@@ -454,7 +504,7 @@ test('should show in input "textValue" if provided', /*#__PURE__*/_asyncToGenera
 
         case 11:
         case "end":
-          return _context3.stop();
+          return _context4.stop();
       }
     }
   }, _callee3);
@@ -777,25 +827,56 @@ test('onSelectionChange works properly with custom value', function () {
   userEvent.type(input, '{selectall}{backspace}{enter}');
   expect(onSelectionChange).toHaveBeenCalledWith('');
 });
+test('add option shows when "hasAddOption" is provided', function () {
+  render(___EmotionJSX(ComboBoxWithAddOption, null));
+  var input = screen.queryByRole('combobox');
+  expect(input).toHaveValue('');
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(screen.queryByRole('option')).not.toBeInTheDocument();
+  var inputValue = 'New value';
+  userEvent.type(input, inputValue);
+  expect(input).toHaveValue(inputValue);
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  var option = screen.queryByRole('option');
+  expect(option).toBeInTheDocument();
+  expect(option).toHaveClass('is-focused');
+  expect(option).toHaveTextContent("ADD: ".concat(inputValue));
+});
+test('if "hasAddOption" is provided, then custom value is added to listbox on blur', function () {
+  render(___EmotionJSX(ComboBoxWithAddOption, null));
+  var input = screen.queryByRole('combobox');
+  var inputValue = 'New value';
+  userEvent.type(input, inputValue);
+  expect(input).toHaveValue(inputValue); // blur input
+
+  userEvent.tab();
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(screen.queryByRole('option')).not.toBeInTheDocument();
+  userEvent.click(input);
+  expect(input).toHaveValue(inputValue);
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  var options = screen.queryAllByRole('option');
+  expect(options[options.length - 1]).toHaveTextContent(inputValue);
+});
 test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
   var _getComponent6, container, results;
 
-  return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+  return _regeneratorRuntime.wrap(function _callee4$(_context5) {
     while (1) {
-      switch (_context4.prev = _context4.next) {
+      switch (_context5.prev = _context5.next) {
         case 0:
           jest.useRealTimers();
           _getComponent6 = getComponent(), container = _getComponent6.container;
-          _context4.next = 4;
+          _context5.next = 4;
           return axe(container);
 
         case 4:
-          results = _context4.sent;
+          results = _context5.sent;
           expect(results).toHaveNoViolations();
 
         case 6:
         case "end":
-          return _context4.stop();
+          return _context5.stop();
       }
     }
   }, _callee4);