@pingux/astro 2.0.0-alpha.1 → 2.0.0-alpha.4

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

@@ -9,16 +9,13 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
 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; }
-
 import React, { useState } from 'react';
-import { Box, Item, MultivaluesField, OverlayProvider, Icon } from '../../';
+import { Box, Icon, Item, MultivaluesField, OverlayProvider } from '../..';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
-import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/MultivaluesField',
@@ -91,7 +88,6 @@ export default {
     }
   }
 };
-
 var VariableIcon = function VariableIcon(props) {
   return ___EmotionJSX("svg", _extends({
     width: "16",
@@ -118,7 +114,6 @@ var VariableIcon = function VariableIcon(props) {
     fill: "white"
   }))));
 };
-
 var HTMLIcon = function HTMLIcon(props) {
   return ___EmotionJSX("svg", _extends({
     width: "16",
@@ -180,7 +175,6 @@ var HTMLIcon = function HTMLIcon(props) {
     transform: "translate(3 3)"
   }))));
 };
-
 var items = [{
   id: 1,
   name: 'Aardvark',
@@ -262,7 +256,6 @@ var itemsWithSlots = [{
     })
   }
 }];
-
 var setOverlayStyle = function setOverlayStyle(direction, isOpen, mr, ml, mt) {
   return {
     marginRight: direction === 'right' && isOpen ? mr : 0,
@@ -270,20 +263,17 @@ var setOverlayStyle = function setOverlayStyle(direction, isOpen, mr, ml, mt) {
     marginTop: direction === 'top' && isOpen ? mt : 0
   };
 };
-
 export var Default = function Default(args) {
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
   var direction = args.direction;
-
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
-
-  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  return ___EmotionJSX(OverlayProvider
+  // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
   }, ___EmotionJSX(MultivaluesField, _extends({
@@ -299,17 +289,15 @@ export var Default = function Default(args) {
 };
 export var Uncontrolled = function Uncontrolled(args) {
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isOpen = _useState4[0],
-      setIsOpen = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    isOpen = _useState4[0],
+    setIsOpen = _useState4[1];
   var direction = args.direction;
-
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
-
-  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  return ___EmotionJSX(OverlayProvider
+  // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
   }, ___EmotionJSX(MultivaluesField, _extends({
@@ -326,22 +314,19 @@ export var Uncontrolled = function Uncontrolled(args) {
 };
 export var Controlled = function Controlled(args) {
   var _useState5 = useState(['Aardvark', 'Snake']),
-      _useState6 = _slicedToArray(_useState5, 2),
-      selectedKeys = _useState6[0],
-      setSelectedKeys = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedKeys = _useState6[0],
+    setSelectedKeys = _useState6[1];
   var _useState7 = useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      isOpen = _useState8[0],
-      setIsOpen = _useState8[1];
-
+    _useState8 = _slicedToArray(_useState7, 2),
+    isOpen = _useState8[0],
+    setIsOpen = _useState8[1];
   var direction = args.direction;
-
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
-
-  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  return ___EmotionJSX(OverlayProvider
+  // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
   }, ___EmotionJSX(MultivaluesField, _extends({
@@ -360,17 +345,15 @@ export var Controlled = function Controlled(args) {
 };
 export var Error = function Error(args) {
   var _useState9 = useState(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      isOpen = _useState10[0],
-      setIsOpen = _useState10[1];
-
+    _useState10 = _slicedToArray(_useState9, 2),
+    isOpen = _useState10[0],
+    setIsOpen = _useState10[1];
   var direction = args.direction;
-
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
-
-  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  return ___EmotionJSX(OverlayProvider
+  // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
   }, ___EmotionJSX(MultivaluesField, _extends({}, args, {
@@ -387,17 +370,15 @@ export var Error = function Error(args) {
 };
 export var ReadOnlyField = function ReadOnlyField(args) {
   var _useState11 = useState(false),
-      _useState12 = _slicedToArray(_useState11, 2),
-      isOpen = _useState12[0],
-      setIsOpen = _useState12[1];
-
+    _useState12 = _slicedToArray(_useState11, 2),
+    isOpen = _useState12[0],
+    setIsOpen = _useState12[1];
   var direction = args.direction;
-
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
-
-  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  return ___EmotionJSX(OverlayProvider
+  // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
   }, ___EmotionJSX(MultivaluesField, _extends({
@@ -414,17 +395,15 @@ export var ReadOnlyField = function ReadOnlyField(args) {
 };
 export var ReadOnlyValues = function ReadOnlyValues(args) {
   var _useState13 = useState(false),
-      _useState14 = _slicedToArray(_useState13, 2),
-      isOpen = _useState14[0],
-      setIsOpen = _useState14[1];
-
+    _useState14 = _slicedToArray(_useState13, 2),
+    isOpen = _useState14[0],
+    setIsOpen = _useState14[1];
   var direction = args.direction;
-
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
-
-  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  return ___EmotionJSX(OverlayProvider
+  // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
   }, ___EmotionJSX(MultivaluesField, _extends({
@@ -441,17 +420,15 @@ export var ReadOnlyValues = function ReadOnlyValues(args) {
 };
 export var DisabledKeys = function DisabledKeys(args) {
   var _useState15 = useState(false),
-      _useState16 = _slicedToArray(_useState15, 2),
-      isOpen = _useState16[0],
-      setIsOpen = _useState16[1];
-
+    _useState16 = _slicedToArray(_useState15, 2),
+    isOpen = _useState16[0],
+    setIsOpen = _useState16[1];
   var direction = args.direction;
-
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
-
-  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  return ___EmotionJSX(OverlayProvider
+  // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
   }, ___EmotionJSX(MultivaluesField, _extends({
@@ -468,17 +445,15 @@ export var DisabledKeys = function DisabledKeys(args) {
 };
 export var CustomValues = function CustomValues(args) {
   var _useState17 = useState(false),
-      _useState18 = _slicedToArray(_useState17, 2),
-      isOpen = _useState18[0],
-      setIsOpen = _useState18[1];
-
+    _useState18 = _slicedToArray(_useState17, 2),
+    isOpen = _useState18[0],
+    setIsOpen = _useState18[1];
   var direction = args.direction;
-
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
-
-  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  return ___EmotionJSX(OverlayProvider
+  // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
   }, ___EmotionJSX(MultivaluesField, _extends({
@@ -500,17 +475,15 @@ CustomValues.argTypes = {
 };
 export var IconSlotsInChip = function IconSlotsInChip(args) {
   var _useState19 = useState(false),
-      _useState20 = _slicedToArray(_useState19, 2),
-      isOpen = _useState20[0],
-      setIsOpen = _useState20[1];
-
+    _useState20 = _slicedToArray(_useState19, 2),
+    isOpen = _useState20[0],
+    setIsOpen = _useState20[1];
   var direction = args.direction;
-
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
-
-  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  return ___EmotionJSX(OverlayProvider
+  // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
   }, ___EmotionJSX(MultivaluesField, _extends({
@@ -526,16 +499,13 @@ export var IconSlotsInChip = function IconSlotsInChip(args) {
 };
 export var CustomSize = function CustomSize(args) {
   var _useState21 = useState(false),
-      _useState22 = _slicedToArray(_useState21, 2),
-      isOpen = _useState22[0],
-      setIsOpen = _useState22[1];
-
+    _useState22 = _slicedToArray(_useState21, 2),
+    isOpen = _useState22[0],
+    setIsOpen = _useState22[1];
   var direction = args.direction;
-
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
-
   return ___EmotionJSX(Box, {
     sx: {
       width: '100%',
@@ -544,7 +514,8 @@ export var CustomSize = function CustomSize(args) {
     }
   }, ___EmotionJSX(Box, {
     width: 300
-  }, ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  }, ___EmotionJSX(OverlayProvider
+  // note: spacing for demo purpose only so that the select list renders in the correct place
   , {
     style: setOverlayStyle(direction, isOpen, '25%', '25%', '75%')
   }, ___EmotionJSX(MultivaluesField, _extends({

package/lib/components/MultivaluesField/MultivaluesField.test.js

@@ -1,12 +1,22 @@
+import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$create from "@babel/runtime-corejs3/core-js-stable/object/create";
+import _Object$getPrototypeOf from "@babel/runtime-corejs3/core-js-stable/object/get-prototype-of";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$setPrototypeOf from "@babel/runtime-corejs3/core-js-stable/object/set-prototype-of";
+import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
+import _reverseInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reverse";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, $Symbol = "function" == typeof _Symbol ? _Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return _Object$defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = _Object$create(protoGenerator.prototype), context = new Context(tryLocsList || []); return generator._invoke = function (innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; }(innerFn, self, context), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = _Object$getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(IteratorPrototype); function defineIteratorMethods(prototype) { var _context4; _forEachInstanceProperty(_context4 = ["next", "throw", "return"]).call(_context4, function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; this._invoke = function (method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); }; } function maybeInvokeDelegate(delegate, context) { var method = delegate.iterator[context.method]; if (undefined === method) { if (context.delegate = null, "throw" === context.method) { if (delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel; context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method"); } return ContinueSentinel; } var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], _forEachInstanceProperty(tryLocsList).call(tryLocsList, pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = _Object$create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = _Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (object) { var keys = []; for (var key in object) { keys.push(key); } return _reverseInstanceProperty(keys).call(keys), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { var _context5; if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, _forEachInstanceProperty(_context5 = this.tryEntries).call(_context5, resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+_sliceInstanceProperty(name).call(name, 1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 import { Item, MultivaluesField, OverlayProvider } from '../../index';
-import { render, screen, within } from '../../utils/testUtils/testWrapper';
 import statuses from '../../utils/devUtils/constants/statuses';
+import { render, screen, within } from '../../utils/testUtils/testWrapper';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var items = [{
   id: 1,
@@ -25,14 +35,11 @@ var defaultProps = {
   items: items,
   label: 'Field Label'
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$renderFn = _ref.renderFn,
-      renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
-
+    _ref$renderFn = _ref.renderFn,
+    renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
   return renderFn(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({}, defaultProps, props), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
@@ -40,15 +47,11 @@ var getComponent = function getComponent() {
     }, item.name);
   })));
 };
-
-var getComponentInForm = function getComponentInForm() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var onFormSubmit = arguments.length > 1 ? arguments[1] : undefined;
-
+var getComponentInForm = function getComponentInForm(onFormSubmit) {
+  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var _ref2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-      _ref2$renderFn = _ref2.renderFn,
-      renderFn = _ref2$renderFn === void 0 ? render : _ref2$renderFn;
-
+    _ref2$renderFn = _ref2.renderFn,
+    renderFn = _ref2$renderFn === void 0 ? render : _ref2$renderFn;
   return renderFn(___EmotionJSX(OverlayProvider, null, ___EmotionJSX("form", {
     onSubmit: onFormSubmit
   }, ___EmotionJSX(MultivaluesField, _extends({}, defaultProps, props), function (item) {
@@ -58,7 +61,6 @@ var getComponentInForm = function getComponentInForm() {
     }, item.name);
   }))));
 };
-
 beforeAll(function () {
   jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
     return 1000;
@@ -177,9 +179,9 @@ test('no chips are rendered, if nothing is selected', function () {
   });
   expect(screen.queryByRole('presentation')).not.toBeInTheDocument(0);
 });
-test('after clicking an option, and then typing a custom input, the listbox remains open and filters the options', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+test('after clicking an option, and then typing a custom input, the listbox remains open and filters the options', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
   var input, options, firstOption, value, listbox, filteredOptions;
-  return _regeneratorRuntime.wrap(function _callee$(_context) {
+  return _regeneratorRuntime().wrap(function _callee$(_context) {
     while (1) {
       switch (_context.prev = _context.next) {
         case 0:
@@ -195,18 +197,15 @@ test('after clicking an option, and then typing a custom input, the listbox rema
           expect(firstOption).not.toBeInTheDocument();
           _context.next = 10;
           return userEvent.clear(input);
-
         case 10:
           value = 'ka';
           _context.next = 13;
           return userEvent.type(input, value);
-
         case 13:
           listbox = screen.queryByRole('listbox');
           expect(listbox).toBeInTheDocument();
           filteredOptions = within(listbox).getAllByRole('option');
           expect(filteredOptions.length).toBe(1);
-
         case 17:
         case "end":
           return _context.stop();
@@ -228,8 +227,8 @@ test('clicking on delete button deletes selection, and re-adds option to list',
   var deleteButton = chip.nextSibling;
   deleteButton.click();
   expect(chip).not.toBeInTheDocument();
-  userEvent.tab();
-  expect(input).toHaveFocus();
+  input.blur();
+  input.focus();
   var updatedOptions = screen.getAllByRole('option');
   expect(updatedOptions[0]).toBeInTheDocument();
   expect(updatedOptions[0]).toHaveTextContent(items[0].name);
@@ -302,9 +301,9 @@ test('in non-restrictive mode, a chip gets added if there is only one matching f
   expect(chipContainer).toHaveAttribute('role', 'presentation');
   expect(firstOption).not.toBeInTheDocument();
 });
-test('dropdown with options reappears after entering a custom input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+test('dropdown with options reappears after entering a custom input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
   var input, value1, value2, listbox, options2;
-  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+  return _regeneratorRuntime().wrap(function _callee2$(_context2) {
     while (1) {
       switch (_context2.prev = _context2.next) {
         case 0:
@@ -318,16 +317,13 @@ test('dropdown with options reappears after entering a custom input', /*#__PURE_
           value2 = '';
           _context2.next = 8;
           return userEvent.clear(input);
-
         case 8:
           _context2.next = 10;
           return userEvent.type(input, value2);
-
         case 10:
           listbox = screen.getByRole('listbox');
           options2 = within(listbox).getAllByRole('option');
           expect(options2.length).toBe(items.length);
-
         case 13:
         case "end":
           return _context2.stop();
@@ -483,10 +479,9 @@ test('selected keys', function () {
   var secondBadge = screen.getByText(items[2].name);
   expect(secondBadge).toBeInTheDocument();
 });
-test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
   var _getComponent, container, results;
-
-  return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+  return _regeneratorRuntime().wrap(function _callee3$(_context3) {
     while (1) {
       switch (_context3.prev = _context3.next) {
         case 0:
@@ -494,11 +489,9 @@ test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator(
           _getComponent = getComponent(), container = _getComponent.container;
           _context3.next = 4;
           return axe(container);
-
         case 4:
           results = _context3.sent;
           expect(results).toHaveNoViolations();
-
         case 6:
         case "end":
           return _context3.stop();
@@ -578,7 +571,7 @@ test('popover closes on input blur', function () {
 });
 test('form does not submit when adding custom value', function () {
   var onFormSubmit = jest.fn();
-  getComponentInForm({}, onFormSubmit);
+  getComponentInForm(onFormSubmit, {});
   var input = screen.getByRole('combobox');
   expect(input).toHaveValue('');
   var value = 'custom';

package/lib/components/NavBar/NavBar.js

@@ -2,12 +2,13 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
 import { FocusScope, useFocusManager } from '@react-aria/focus';
+import PropTypes from 'prop-types';
 import { NavBarContext } from '../../context/NavBarContext';
+import useProgressiveState from '../../hooks/useProgressiveState';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import Box from '../Box/Box';
-import useProgressiveState from '../../hooks/useProgressiveState';
+
 /**
  * Composed component that spreads children.
  *
@@ -17,26 +18,21 @@ import useProgressiveState from '../../hooks/useProgressiveState';
  * an array of objects that is passed into it.
  *
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var NavBar = function NavBar(props) {
   var defaultSelectedKey = props.defaultSelectedKey,
-      selectedKeyProp = props.selectedKey,
-      setSelectedKeyProp = props.setSelectedKey,
-      defaultExpandedKeys = props.defaultExpandedKeys,
-      children = props.children;
-
+    selectedKeyProp = props.selectedKey,
+    setSelectedKeyProp = props.setSelectedKey,
+    defaultExpandedKeys = props.defaultExpandedKeys,
+    children = props.children;
   var _useState = useState(defaultExpandedKeys),
-      _useState2 = _slicedToArray(_useState, 2),
-      expandedKeys = _useState2[0],
-      setExpandedKeys = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    expandedKeys = _useState2[0],
+    setExpandedKeys = _useState2[1];
   var _useProgressiveState = useProgressiveState(selectedKeyProp, defaultSelectedKey),
-      _useProgressiveState2 = _slicedToArray(_useProgressiveState, 2),
-      selectedKey = _useProgressiveState2[0],
-      setSelectedKey = _useProgressiveState2[1];
-
+    _useProgressiveState2 = _slicedToArray(_useProgressiveState, 2),
+    selectedKey = _useProgressiveState2[0],
+    setSelectedKey = _useProgressiveState2[1];
   var items = _Array$isArray(children) ? _mapInstanceProperty(children).call(children, function (child) {
     return {
       item: child,
@@ -62,16 +58,14 @@ var NavBar = function NavBar(props) {
     restoreFocus: true
   }, _mapInstanceProperty(items).call(items, function (_ref) {
     var item = _ref.item,
-        key = _ref.key;
+      key = _ref.key;
     return ___EmotionJSX(FocusableItem, {
       key: key
     }, item);
   })) : null));
 };
-
 var FocusableItem = function FocusableItem(props) {
   var focusManager = useFocusManager();
-
   var onKeyDown = function onKeyDown(e) {
     switch (e.key) {
       case 'ArrowRight':
@@ -79,34 +73,27 @@ var FocusableItem = function FocusableItem(props) {
         e.preventDefault();
         focusManager.focusNext();
         break;
-
       case 'ArrowLeft':
       case 'ArrowUp':
         e.preventDefault();
         focusManager.focusPrevious();
         break;
-
       default:
         break;
     }
   };
-
   var childWithFocusHandle = /*#__PURE__*/React.cloneElement(props.children, {
     onKeyDown: onKeyDown
   });
   return childWithFocusHandle;
 };
-
 NavBar.propTypes = {
   /** The initial selected key in the collection (uncontrolled). */
   defaultSelectedKey: PropTypes.string,
-
   /** The initial expanded keys in the collection (uncontrolled). */
   defaultExpandedKeys: isIterableProp,
-
   /** The selected key in the collection (controlled). */
   selectedKey: isIterableProp,
-
   /**
   * Callback function that fires when the selected key changes.
   *

package/lib/components/NavBar/NavBar.stories.js

@@ -20,7 +20,6 @@ export default {
   },
   title: 'Components/NavBar'
 };
-
 var Credentials = function Credentials(props) {
   return ___EmotionJSX("svg", _extends({
     width: "18px",
@@ -29,8 +28,7 @@ var Credentials = function Credentials(props) {
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     x: "0px",
-    y: "0px",
-    xml: "preserve"
+    y: "0px"
   }, props), ___EmotionJSX("g", {
     id: "Layer_2"
   }), ___EmotionJSX("g", {
@@ -50,7 +48,6 @@ var Credentials = function Credentials(props) {
     d: "M15.1,14.3c0-0.9,0.7-1.6,1.6-1.6c0.9,0,1.6,0.7,1.6,1.6c0,0.9-0.7,1.6-1.6,1.6C15.9,15.9,15.1,15.2,15.1,14.3 M16.8,11 c-0.9,0-1.7,0.3-2.3,0.9c-0.6,0.6-1,1.4-1,2.3c0,0.9,0.3,1.7,1,2.3c0.6,0.6,1.4,1,2.3,1c0.9,0,1.7-0.3,2.3-1c0.6-0.6,1-1.4,1-2.3 c0-0.9-0.3-1.7-1-2.3C18.5,11.3,17.6,11,16.8,11 M21.1,14.3c0,0.5-0.1,1-0.3,1.5c-0.2,0.5-0.4,1-0.8,1.3v4.2l-3.3-1.1l-3.3,1.1 v-4.2c-0.7-0.8-1.1-1.8-1.1-2.9c0-1.2,0.4-2.3,1.3-3.1c0.8-0.8,1.9-1.3,3.1-1.3c1.2,0,2.3,0.4,3.1,1.3 C20.7,12,21.1,13.1,21.1,14.3z"
   }))));
 };
-
 var Verify = function Verify(props) {
   return ___EmotionJSX("svg", _extends({
     width: "18px",
@@ -80,7 +77,6 @@ var Verify = function Verify(props) {
     id: "Shape"
   }))))));
 };
-
 var logo = ___EmotionJSX("svg", {
   width: "130",
   height: "23",
@@ -103,7 +99,6 @@ var logo = ___EmotionJSX("svg", {
   d: "M36.9874 1.1947C35.9856 1.1947 35.1575 2.04867 35.1575 3.10948C35.1575 4.17059 35.964 5.02519 36.9435 5.02519C37.9457 5.02519 38.7528 4.17059 38.7528 3.10948C38.7528 2.04867 37.9678 1.1947 36.9874 1.1947ZM56.9033 15.1542L55.3339 15.1312C55.0284 15.1312 54.855 15.0152 54.855 14.8537C54.855 14.5314 55.2689 14.2548 56.009 13.8847C56.2262 13.9084 56.3134 13.9084 56.4446 13.9084C58.8193 13.9084 60.5636 12.4303 60.5636 10.4005C60.5636 9.61595 60.3439 9.0155 59.9081 8.46364L59.9605 8.47065L59.9606 8.47066C60.1397 8.49475 60.4151 8.5318 60.672 8.5318C61.4778 8.5318 62.0866 8.27764 62.7193 7.65479L61.4996 5.69332C60.8237 6.34046 59.9958 6.70963 59.1899 6.70963C58.8193 6.70963 58.4264 6.61608 57.8177 6.45516C57.0109 6.24833 56.4446 6.15619 55.8128 6.15619C52.9597 6.15619 51.1075 7.72483 51.1075 10.1476C51.1075 11.9005 51.8913 12.985 53.5037 13.424C51.673 13.9305 51.4561 14.6472 51.4561 15.4081C51.4561 16.216 51.7818 16.7461 52.3055 16.953C52.8291 17.1848 53.6782 17.2985 54.9848 17.3225L56.2262 17.3459C57.3822 17.3689 58.2745 17.6928 58.2745 18.7533C58.2745 19.2382 57.9916 19.676 57.5562 19.9526C57.0994 20.2536 56.467 20.3442 55.7268 20.3442C54.3761 20.3442 53.6337 19.8377 53.6337 18.8909C53.6337 18.5682 53.6561 18.4079 53.7657 18.1307H51.064C50.9545 18.3606 50.8029 18.6848 50.8029 19.331C50.8029 20.1367 51.1075 20.8304 51.7178 21.4296C52.7194 22.4222 54.3541 22.6985 55.9431 22.6985C57.6855 22.6985 59.3645 22.2842 60.3439 21.1757C60.9548 20.4841 61.2385 19.7232 61.2385 18.7312C61.2385 17.6691 60.9324 16.8615 60.2795 16.216C59.4945 15.4535 58.6016 15.1769 56.9033 15.1542ZM54.0479 10.1703C54.0479 9.06345 54.6801 8.41632 55.7907 8.41632C56.9033 8.41632 57.5562 9.06345 57.5562 10.1703C57.5562 11.2548 56.9244 11.8541 55.7692 11.8541C54.7452 11.8541 54.0479 11.3704 54.0479 10.1703ZM43.6997 9.82372C44.375 9.17909 45.1373 8.76354 45.7242 8.76354C46.4871 8.76354 46.7042 9.15543 46.7042 10.4931V18.1768H49.5808V9.54716C49.5808 8.80867 49.5151 8.30146 49.3627 7.86351C49.0144 6.8472 47.9252 6.15619 46.683 6.15619C46.0303 6.15619 45.2671 6.34046 44.6792 6.66278C44.2068 6.93488 43.8401 7.20758 43.4131 7.52507L43.3936 7.53962C43.3936 7.05529 43.2412 6.54855 42.9789 6.06359L40.3874 6.8472C40.6481 7.63176 40.779 8.60074 40.779 9.61595V18.1768H43.6997V9.82372ZM35.485 6.5697L38.4035 6.08505V18.1768H35.485V6.5697ZM32.0851 2.92521C31.2343 2.41721 30.4496 2.14096 27.8792 2.14096H23.8931V18.1768H26.9433V12.2702H28.6201C30.2969 12.2702 30.9512 12.0853 31.6485 11.7391C33.3037 10.9088 34.2612 9.20118 34.2612 7.07926C34.2612 5.23234 33.4995 3.75614 32.0851 2.92521ZM28.5333 9.63945C29.7748 9.63945 30.1457 9.47775 30.5583 8.80867C30.8212 8.3715 30.9288 7.90926 30.9288 7.14711C30.9288 5.64757 30.1668 4.74738 28.8805 4.74738H26.9433V9.63945H28.5333Z",
   fill: "white"
 }));
-
 var data = [{
   'data-id': 'dashboard-data-id',
   heading: 'Dashboard',
@@ -371,10 +366,9 @@ export var Default = function Default() {
 };
 export var Controlled = function Controlled() {
   var _useState = useState('Dashboard Link Group'),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedKey = _useState2[0],
-      setSelectedKey = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedKey = _useState2[0],
+    setSelectedKey = _useState2[1];
   var customData = [{
     icon: Earth,
     key: 'Environment',