@pingux/astro 2.50.0 → 2.51.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/ListView/ListView.js +26 -10
- package/lib/cjs/components/ListView/ListView.stories.js +179 -13
- package/lib/cjs/components/ListView/ListView.test.js +300 -35
- package/lib/cjs/components/ListView/ListViewExpandableItem.js +100 -0
- package/lib/cjs/components/ListView/ListViewFocusWrapper.js +117 -0
- package/lib/cjs/components/ListView/ListViewItem.js +24 -16
- package/lib/cjs/components/ListViewItem/ListViewItem.styles.js +34 -1
- package/lib/cjs/hooks/useExpandableListViewItem/index.d.ts +1 -0
- package/lib/cjs/hooks/useExpandableListViewItem/index.js +14 -0
- package/lib/cjs/hooks/useExpandableListViewItem/useExpandableListViewItem.d.ts +51 -0
- package/lib/cjs/hooks/useExpandableListViewItem/useExpandableListViewItem.js +237 -0
- package/lib/components/ListView/ListView.js +26 -10
- package/lib/components/ListView/ListView.stories.js +177 -14
- package/lib/components/ListView/ListView.test.js +300 -35
- package/lib/components/ListView/ListViewExpandableItem.js +86 -0
- package/lib/components/ListView/ListViewFocusWrapper.js +102 -0
- package/lib/components/ListView/ListViewItem.js +25 -17
- package/lib/components/ListViewItem/ListViewItem.styles.js +34 -1
- package/lib/hooks/useExpandableListViewItem/index.js +1 -0
- package/lib/hooks/useExpandableListViewItem/useExpandableListViewItem.js +229 -0
- package/package.json +6 -2
@@ -7,11 +7,20 @@ import _Object$setPrototypeOf from "@babel/runtime-corejs3/core-js-stable/object
|
|
7
7
|
import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
|
8
8
|
import _reverseInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reverse";
|
9
9
|
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
|
10
|
+
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
11
|
+
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
12
|
+
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
13
|
+
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
14
|
+
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
15
|
+
import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
|
10
16
|
import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
|
17
|
+
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
11
18
|
import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
|
12
19
|
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
20
|
+
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; }
|
21
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context15, _context16; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context15 = ownKeys(Object(source), !0)).call(_context15, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context16 = ownKeys(Object(source))).call(_context16, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
13
22
|
import _Set from "@babel/runtime-corejs3/core-js-stable/set";
|
14
|
-
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, defineProperty = _Object$defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $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 defineProperty(generator, "_invoke", { value: makeInvokeMethod(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 _context8; _forEachInstanceProperty(_context8 = ["next", "throw", "return"]).call(_context8, 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; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(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); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), 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, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), 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 (val) { var object = Object(val), 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 _context9; 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(_context9 = this.tryEntries).call(_context9, 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; }
|
23
|
+
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, defineProperty = _Object$defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $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 defineProperty(generator, "_invoke", { value: makeInvokeMethod(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 _context13; _forEachInstanceProperty(_context13 = ["next", "throw", "return"]).call(_context13, 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; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(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); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), 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, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), 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 (val) { var object = Object(val), 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 _context14; 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(_context14 = this.tryEntries).call(_context14, 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; }
|
15
24
|
import React from 'react';
|
16
25
|
import { FocusScope } from 'react-aria';
|
17
26
|
import { Item } from 'react-stately';
|
@@ -20,8 +29,10 @@ import _ from 'lodash';
|
|
20
29
|
import loadingStates from '../../utils/devUtils/constants/loadingStates';
|
21
30
|
import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
|
22
31
|
import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
|
32
|
+
import Button from '../Button';
|
23
33
|
import CheckboxField from '../CheckboxField';
|
24
34
|
import ListView from './ListView';
|
35
|
+
import { escapeFocusDelegate } from './ListViewFocusWrapper';
|
25
36
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
26
37
|
var items = [{
|
27
38
|
key: 'Aardvark',
|
@@ -41,6 +52,19 @@ var defaultProps = {
|
|
41
52
|
label: 'Test Label',
|
42
53
|
'data-testid': testId
|
43
54
|
};
|
55
|
+
var stopPropagation = jest.fn();
|
56
|
+
var preventDefault = jest.fn();
|
57
|
+
var focusNext = jest.fn();
|
58
|
+
var focusPrevious = jest.fn();
|
59
|
+
var setIsFocusEscaped = jest.fn();
|
60
|
+
var testEvent = {
|
61
|
+
stopPropagation: stopPropagation,
|
62
|
+
preventDefault: preventDefault
|
63
|
+
};
|
64
|
+
var focusManager = {
|
65
|
+
focusNext: focusNext,
|
66
|
+
focusPrevious: focusPrevious
|
67
|
+
};
|
44
68
|
beforeAll(function () {
|
45
69
|
jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
|
46
70
|
return 1000;
|
@@ -83,20 +107,34 @@ var getComponent = function getComponent() {
|
|
83
107
|
}, item.name));
|
84
108
|
})));
|
85
109
|
};
|
86
|
-
var
|
110
|
+
var getComponentExpandable = function getComponentExpandable() {
|
87
111
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
88
112
|
var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
89
113
|
_ref2$renderFn = _ref2.renderFn,
|
90
114
|
renderFn = _ref2$renderFn === void 0 ? render : _ref2$renderFn;
|
115
|
+
return renderFn(___EmotionJSX(ListView, _extends({}, defaultProps, props, {
|
116
|
+
items: items
|
117
|
+
}), function (item) {
|
118
|
+
return ___EmotionJSX(Item, {
|
119
|
+
key: item.name,
|
120
|
+
textValue: item.name
|
121
|
+
}, ___EmotionJSX("h1", null, item.name), ___EmotionJSX(Button, null, "I am a button"));
|
122
|
+
}));
|
123
|
+
};
|
124
|
+
var getComponentEmpty = function getComponentEmpty() {
|
125
|
+
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
126
|
+
var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
127
|
+
_ref3$renderFn = _ref3.renderFn,
|
128
|
+
renderFn = _ref3$renderFn === void 0 ? render : _ref3$renderFn;
|
91
129
|
return renderFn(___EmotionJSX(FocusScope, {
|
92
130
|
restoreFocus: true
|
93
131
|
}, ___EmotionJSX(ListView, _extends({}, defaultProps, props))));
|
94
132
|
};
|
95
133
|
var getComponentWithCheckbox = function getComponentWithCheckbox() {
|
96
134
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
97
|
-
var
|
98
|
-
|
99
|
-
renderFn =
|
135
|
+
var _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
136
|
+
_ref4$renderFn = _ref4.renderFn,
|
137
|
+
renderFn = _ref4$renderFn === void 0 ? render : _ref4$renderFn;
|
100
138
|
return renderFn(___EmotionJSX(FocusScope, {
|
101
139
|
restoreFocus: true
|
102
140
|
}, ___EmotionJSX(ListView, _extends({}, defaultProps, props, {
|
@@ -187,29 +225,52 @@ test('navigating to a disabled key will not apply the isFocused class', /*#__PUR
|
|
187
225
|
}
|
188
226
|
}, _callee2);
|
189
227
|
})));
|
190
|
-
test('
|
191
|
-
var
|
228
|
+
test('navigating to a disabled key will not apply the isFocused class', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
|
229
|
+
var listView, options;
|
192
230
|
return _regeneratorRuntime().wrap(function _callee3$(_context3) {
|
193
231
|
while (1) switch (_context3.prev = _context3.next) {
|
232
|
+
case 0:
|
233
|
+
getComponent({
|
234
|
+
selectionMode: 'expansion',
|
235
|
+
disabledKeys: ['Kangaroo']
|
236
|
+
});
|
237
|
+
listView = screen.getByTestId(testId); // Open the list arrow down to the second option,
|
238
|
+
// and ensure that it is focused, and then selected after enter is pressed
|
239
|
+
userEvent.tab();
|
240
|
+
userEvent.type(listView, '{arrowdown}', {
|
241
|
+
skipClick: true
|
242
|
+
});
|
243
|
+
options = screen.getAllByRole('gridcell');
|
244
|
+
expect(options[1]).not.toHaveClass('is-focused');
|
245
|
+
case 6:
|
246
|
+
case "end":
|
247
|
+
return _context3.stop();
|
248
|
+
}
|
249
|
+
}, _callee3);
|
250
|
+
})));
|
251
|
+
test('clicking an item on the list selects the item', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
|
252
|
+
var options, updatedOption;
|
253
|
+
return _regeneratorRuntime().wrap(function _callee4$(_context4) {
|
254
|
+
while (1) switch (_context4.prev = _context4.next) {
|
194
255
|
case 0:
|
195
256
|
getComponent();
|
196
257
|
options = screen.getByTestId(items[1].name);
|
197
258
|
userEvent.click(options);
|
198
|
-
|
259
|
+
_context4.next = 5;
|
199
260
|
return screen.findAllByRole('gridcell');
|
200
261
|
case 5:
|
201
|
-
updatedOption =
|
262
|
+
updatedOption = _context4.sent;
|
202
263
|
expect(updatedOption[1]).toHaveClass('is-selected');
|
203
264
|
case 7:
|
204
265
|
case "end":
|
205
|
-
return
|
266
|
+
return _context4.stop();
|
206
267
|
}
|
207
|
-
},
|
268
|
+
}, _callee4);
|
208
269
|
})));
|
209
|
-
test('clicking an item fires "onSelectionChange" handler and returns Set with keys of items', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function
|
270
|
+
test('clicking an item fires "onSelectionChange" handler and returns Set with keys of items', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
|
210
271
|
var expectedResult, onSelectionChange, option1, selectedItems;
|
211
|
-
return _regeneratorRuntime().wrap(function
|
212
|
-
while (1) switch (
|
272
|
+
return _regeneratorRuntime().wrap(function _callee5$(_context5) {
|
273
|
+
while (1) switch (_context5.prev = _context5.next) {
|
213
274
|
case 0:
|
214
275
|
expectedResult = new _Set();
|
215
276
|
expectedResult.add(items[1].key);
|
@@ -224,9 +285,9 @@ test('clicking an item fires "onSelectionChange" handler and returns Set with ke
|
|
224
285
|
expect(_.isEqual(expectedResult, selectedItems)).toBeTruthy();
|
225
286
|
case 9:
|
226
287
|
case "end":
|
227
|
-
return
|
288
|
+
return _context5.stop();
|
228
289
|
}
|
229
|
-
},
|
290
|
+
}, _callee5);
|
230
291
|
})));
|
231
292
|
test('renders loader, if a loader component is passed in, and state is loading', function () {
|
232
293
|
getComponent({
|
@@ -235,6 +296,18 @@ test('renders loader, if a loader component is passed in, and state is loading',
|
|
235
296
|
var loader = screen.getByRole('alert');
|
236
297
|
expect(loader).toBeInTheDocument();
|
237
298
|
});
|
299
|
+
test('renders loader, if a loader component is passed in, and state is loading', function () {
|
300
|
+
getComponent({
|
301
|
+
loadingState: loadingStates.LOADING
|
302
|
+
});
|
303
|
+
var listView = screen.getByTestId(testId);
|
304
|
+
userEvent.tab();
|
305
|
+
userEvent.type(listView, '{arrowdown}', {
|
306
|
+
skipClick: true
|
307
|
+
});
|
308
|
+
var loaders = screen.getAllByRole('alert');
|
309
|
+
expect(loaders).toHaveLength(2);
|
310
|
+
});
|
238
311
|
test('renders loader, if a loader component is passed in, and state is loadingMore', function () {
|
239
312
|
getComponent({
|
240
313
|
loadingState: loadingStates.LOADING_MORE
|
@@ -259,31 +332,31 @@ test('Item accepts a data-id and the data-id can be found in the DOM', function
|
|
259
332
|
expect(options).toHaveLength(items.length);
|
260
333
|
expect(options[0]).toHaveAttribute('data-id', items[0].name);
|
261
334
|
});
|
262
|
-
test('selectionMode "none" disallows to select item', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function
|
335
|
+
test('selectionMode "none" disallows to select item', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
|
263
336
|
var option1, updatedOption;
|
264
|
-
return _regeneratorRuntime().wrap(function
|
265
|
-
while (1) switch (
|
337
|
+
return _regeneratorRuntime().wrap(function _callee6$(_context6) {
|
338
|
+
while (1) switch (_context6.prev = _context6.next) {
|
266
339
|
case 0:
|
267
340
|
getComponent({
|
268
341
|
selectionMode: 'none'
|
269
342
|
});
|
270
343
|
option1 = screen.getByTestId(items[1].name);
|
271
344
|
userEvent.click(option1);
|
272
|
-
|
345
|
+
_context6.next = 5;
|
273
346
|
return screen.findAllByRole('gridcell');
|
274
347
|
case 5:
|
275
|
-
updatedOption =
|
348
|
+
updatedOption = _context6.sent;
|
276
349
|
expect(updatedOption[1]).not.toHaveClass('is-selected');
|
277
350
|
case 7:
|
278
351
|
case "end":
|
279
|
-
return
|
352
|
+
return _context6.stop();
|
280
353
|
}
|
281
|
-
},
|
354
|
+
}, _callee6);
|
282
355
|
})));
|
283
|
-
test('selectionMode "multiple" allows to select more than one item', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function
|
356
|
+
test('selectionMode "multiple" allows to select more than one item', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
|
284
357
|
var option1, option2, updatedOption;
|
285
|
-
return _regeneratorRuntime().wrap(function
|
286
|
-
while (1) switch (
|
358
|
+
return _regeneratorRuntime().wrap(function _callee7$(_context7) {
|
359
|
+
while (1) switch (_context7.prev = _context7.next) {
|
287
360
|
case 0:
|
288
361
|
getComponent({
|
289
362
|
selectionMode: 'multiple'
|
@@ -292,22 +365,22 @@ test('selectionMode "multiple" allows to select more than one item', /*#__PURE__
|
|
292
365
|
userEvent.click(option1);
|
293
366
|
option2 = screen.getByTestId(items[2].name);
|
294
367
|
userEvent.click(option2);
|
295
|
-
|
368
|
+
_context7.next = 7;
|
296
369
|
return screen.findAllByRole('gridcell');
|
297
370
|
case 7:
|
298
|
-
updatedOption =
|
371
|
+
updatedOption = _context7.sent;
|
299
372
|
expect(updatedOption[1]).toHaveClass('is-selected');
|
300
373
|
expect(updatedOption[2]).toHaveClass('is-selected');
|
301
374
|
case 10:
|
302
375
|
case "end":
|
303
|
-
return
|
376
|
+
return _context7.stop();
|
304
377
|
}
|
305
|
-
},
|
378
|
+
}, _callee7);
|
306
379
|
})));
|
307
|
-
test('when user navigates with tab and arrows keys, onFocus is called and the is-focused class is applied', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function
|
380
|
+
test('when user navigates with tab and arrows keys, onFocus is called and the is-focused class is applied', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
|
308
381
|
var onFocus, listView, options;
|
309
|
-
return _regeneratorRuntime().wrap(function
|
310
|
-
while (1) switch (
|
382
|
+
return _regeneratorRuntime().wrap(function _callee8$(_context8) {
|
383
|
+
while (1) switch (_context8.prev = _context8.next) {
|
311
384
|
case 0:
|
312
385
|
onFocus = jest.fn();
|
313
386
|
getComponent({
|
@@ -324,9 +397,9 @@ test('when user navigates with tab and arrows keys, onFocus is called and the is
|
|
324
397
|
expect(onFocus).toHaveBeenCalled();
|
325
398
|
case 9:
|
326
399
|
case "end":
|
327
|
-
return
|
400
|
+
return _context8.stop();
|
328
401
|
}
|
329
|
-
},
|
402
|
+
}, _callee8);
|
330
403
|
})));
|
331
404
|
test('list view not receive focus when click on checkbox', function () {
|
332
405
|
getComponentWithCheckbox();
|
@@ -349,7 +422,30 @@ test('list view reset hover on item when scroll', function () {
|
|
349
422
|
}
|
350
423
|
});
|
351
424
|
expect(listItem[0]).not.toHaveClass('is-hovered');
|
425
|
+
userEvent.hover(listItem[1]);
|
426
|
+
expect(listItem[0]).not.toHaveClass('is-hovered');
|
352
427
|
});
|
428
|
+
test('list view expandable reset hover on item when scroll', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
|
429
|
+
var listItem, listRow;
|
430
|
+
return _regeneratorRuntime().wrap(function _callee9$(_context9) {
|
431
|
+
while (1) switch (_context9.prev = _context9.next) {
|
432
|
+
case 0:
|
433
|
+
getComponentExpandable({
|
434
|
+
selectionMode: 'expansion'
|
435
|
+
});
|
436
|
+
// const listView = screen.getAllByRole('grid');
|
437
|
+
listItem = screen.getAllByRole('gridcell');
|
438
|
+
listRow = screen.getAllByRole('row');
|
439
|
+
expect(listItem[0]).not.toHaveClass('is-hovered');
|
440
|
+
userEvent.hover(listRow[0]);
|
441
|
+
userEvent.hover(listRow[1]);
|
442
|
+
expect(listItem[0]).not.toHaveClass('is-hovered');
|
443
|
+
case 7:
|
444
|
+
case "end":
|
445
|
+
return _context9.stop();
|
446
|
+
}
|
447
|
+
}, _callee9);
|
448
|
+
})));
|
353
449
|
test('list view item should not receive focus when selectionMode is "none"', function () {
|
354
450
|
var onFocus = jest.fn();
|
355
451
|
getComponent({
|
@@ -370,4 +466,173 @@ test('list view item should receive focus when selectionMode is default or a val
|
|
370
466
|
userEvent.tab();
|
371
467
|
expect(onFocus).toHaveBeenCalled();
|
372
468
|
expect(options[0]).toHaveClass('is-focused');
|
469
|
+
});
|
470
|
+
test('selectionMode "expanded" cells render expandable list items, and can be expanded, and collapsed', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee10() {
|
471
|
+
var options, updatedOptions, updatedOptions1;
|
472
|
+
return _regeneratorRuntime().wrap(function _callee10$(_context10) {
|
473
|
+
while (1) switch (_context10.prev = _context10.next) {
|
474
|
+
case 0:
|
475
|
+
getComponent({
|
476
|
+
selectionMode: 'expansion'
|
477
|
+
});
|
478
|
+
options = screen.getAllByRole('gridcell');
|
479
|
+
expect(options[0]).toHaveAttribute('aria-expanded', 'false');
|
480
|
+
userEvent.click(options[0]);
|
481
|
+
_context10.next = 6;
|
482
|
+
return screen.findAllByRole('gridcell');
|
483
|
+
case 6:
|
484
|
+
updatedOptions = _context10.sent;
|
485
|
+
expect(updatedOptions[0]).toHaveAttribute('aria-expanded', 'true');
|
486
|
+
userEvent.click(options[0]);
|
487
|
+
_context10.next = 11;
|
488
|
+
return screen.findAllByRole('gridcell');
|
489
|
+
case 11:
|
490
|
+
updatedOptions1 = _context10.sent;
|
491
|
+
expect(updatedOptions1[0]).toHaveAttribute('aria-expanded', 'false');
|
492
|
+
case 13:
|
493
|
+
case "end":
|
494
|
+
return _context10.stop();
|
495
|
+
}
|
496
|
+
}, _callee10);
|
497
|
+
})));
|
498
|
+
test('should navigate to expandable listitems with keyboard ', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee11() {
|
499
|
+
var option, row, focusContainer, button;
|
500
|
+
return _regeneratorRuntime().wrap(function _callee11$(_context11) {
|
501
|
+
while (1) switch (_context11.prev = _context11.next) {
|
502
|
+
case 0:
|
503
|
+
getComponentExpandable({
|
504
|
+
selectionMode: 'expansion'
|
505
|
+
});
|
506
|
+
option = screen.getAllByRole('gridcell')[0];
|
507
|
+
row = screen.getAllByRole('row')[0];
|
508
|
+
userEvent.tab();
|
509
|
+
userEvent.type(option, '{enter}', {
|
510
|
+
skipClick: true
|
511
|
+
});
|
512
|
+
userEvent.type(option, '{arrowright}', {
|
513
|
+
skipClick: true
|
514
|
+
});
|
515
|
+
focusContainer = screen.getAllByTestId('focuscontainer')[0];
|
516
|
+
expect(focusContainer).toHaveClass('is-focused');
|
517
|
+
userEvent.type(row, '{arrowright}', {
|
518
|
+
skipClick: true
|
519
|
+
});
|
520
|
+
userEvent.type(row, '{arrowright}', {
|
521
|
+
skipClick: true
|
522
|
+
});
|
523
|
+
userEvent.type(option, '{arrowleft}', {
|
524
|
+
skipClick: true
|
525
|
+
});
|
526
|
+
userEvent.type(option, '{arrowleft}', {
|
527
|
+
skipClick: true
|
528
|
+
});
|
529
|
+
userEvent.type(focusContainer, '{enter}', {
|
530
|
+
skipClick: true
|
531
|
+
});
|
532
|
+
_context11.next = 15;
|
533
|
+
return screen.findByRole('button');
|
534
|
+
case 15:
|
535
|
+
button = _context11.sent;
|
536
|
+
expect(button).toHaveClass('is-focused');
|
537
|
+
case 17:
|
538
|
+
case "end":
|
539
|
+
return _context11.stop();
|
540
|
+
}
|
541
|
+
}, _callee11);
|
542
|
+
})));
|
543
|
+
test('should navigate to expandable container ', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee12() {
|
544
|
+
var option;
|
545
|
+
return _regeneratorRuntime().wrap(function _callee12$(_context12) {
|
546
|
+
while (1) switch (_context12.prev = _context12.next) {
|
547
|
+
case 0:
|
548
|
+
getComponentExpandable({
|
549
|
+
selectionMode: 'expansion'
|
550
|
+
});
|
551
|
+
option = screen.getAllByRole('gridcell')[0];
|
552
|
+
userEvent.tab();
|
553
|
+
userEvent.type(option, '{enter}', {
|
554
|
+
skipClick: true
|
555
|
+
});
|
556
|
+
userEvent.type(option, '{arrowright}', {
|
557
|
+
skipClick: true
|
558
|
+
});
|
559
|
+
userEvent.type(option, '{arrowleft}', {
|
560
|
+
skipClick: true
|
561
|
+
});
|
562
|
+
expect(option).toHaveClass('is-focused');
|
563
|
+
userEvent.type(option, '{arrowright}', {
|
564
|
+
skipClick: true
|
565
|
+
});
|
566
|
+
userEvent.type(option, '{arrowright}', {
|
567
|
+
skipClick: true
|
568
|
+
});
|
569
|
+
expect(option).toHaveClass('is-focused');
|
570
|
+
userEvent.type(option, '{arrowleft}', {
|
571
|
+
skipClick: true
|
572
|
+
});
|
573
|
+
userEvent.type(option, '{arrowleft}', {
|
574
|
+
skipClick: true
|
575
|
+
});
|
576
|
+
expect(option).toHaveClass('is-focused');
|
577
|
+
fireEvent.keyDown(option, {
|
578
|
+
key: 'ArrowLeft'
|
579
|
+
});
|
580
|
+
fireEvent.keyUp(option, {
|
581
|
+
key: 'ArrowLeft'
|
582
|
+
});
|
583
|
+
fireEvent.keyDown(option, {
|
584
|
+
key: 'ArrowLeft'
|
585
|
+
});
|
586
|
+
fireEvent.keyUp(option, {
|
587
|
+
key: 'ArrowLeft'
|
588
|
+
});
|
589
|
+
case 17:
|
590
|
+
case "end":
|
591
|
+
return _context12.stop();
|
592
|
+
}
|
593
|
+
}, _callee12);
|
594
|
+
})));
|
595
|
+
test('escape focus delegate turns on if enter is pressed', function () {
|
596
|
+
escapeFocusDelegate(_objectSpread(_objectSpread({}, testEvent), {}, {
|
597
|
+
keyCode: 13
|
598
|
+
}), setIsFocusEscaped, focusManager, false);
|
599
|
+
expect(setIsFocusEscaped).toHaveBeenCalled();
|
600
|
+
expect(focusNext).toHaveBeenCalled();
|
601
|
+
});
|
602
|
+
test('escape focus delegate calls correct functions if left is pressed', function () {
|
603
|
+
escapeFocusDelegate(_objectSpread(_objectSpread({}, testEvent), {}, {
|
604
|
+
keyCode: 37
|
605
|
+
}), setIsFocusEscaped, focusManager, true);
|
606
|
+
expect(setIsFocusEscaped).not.toHaveBeenCalled();
|
607
|
+
expect(focusNext).not.toHaveBeenCalled();
|
608
|
+
expect(stopPropagation).toHaveBeenCalled();
|
609
|
+
});
|
610
|
+
test('escape focus delegate calls correct functions if left is pressed', function () {
|
611
|
+
escapeFocusDelegate(_objectSpread(_objectSpread({}, testEvent), {}, {
|
612
|
+
keyCode: 39
|
613
|
+
}), setIsFocusEscaped, focusManager, true);
|
614
|
+
expect(setIsFocusEscaped).not.toHaveBeenCalled();
|
615
|
+
expect(focusNext).not.toHaveBeenCalled();
|
616
|
+
expect(stopPropagation).toHaveBeenCalled();
|
617
|
+
});
|
618
|
+
test('escape focus delegate calls correct functions if left is pressed', function () {
|
619
|
+
escapeFocusDelegate(_objectSpread(_objectSpread({}, testEvent), {}, {
|
620
|
+
keyCode: 38
|
621
|
+
}), setIsFocusEscaped, focusManager, true);
|
622
|
+
expect(focusNext).not.toHaveBeenCalled();
|
623
|
+
expect(focusPrevious).toHaveBeenCalled();
|
624
|
+
});
|
625
|
+
test('escape focus delegate calls correct functions if left is pressed', function () {
|
626
|
+
escapeFocusDelegate(_objectSpread(_objectSpread({}, testEvent), {}, {
|
627
|
+
keyCode: 40
|
628
|
+
}), setIsFocusEscaped, focusManager, true);
|
629
|
+
expect(focusNext).toHaveBeenCalled();
|
630
|
+
expect(focusPrevious).not.toHaveBeenCalled();
|
631
|
+
});
|
632
|
+
test('escape focus delegate calls correct functions if anything else is pressed', function () {
|
633
|
+
escapeFocusDelegate(_objectSpread(_objectSpread({}, testEvent), {}, {
|
634
|
+
keyCode: 4
|
635
|
+
}), setIsFocusEscaped, focusManager, true);
|
636
|
+
expect(focusNext).not.toHaveBeenCalled();
|
637
|
+
expect(focusPrevious).not.toHaveBeenCalled();
|
373
638
|
});
|
@@ -0,0 +1,86 @@
|
|
1
|
+
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
2
|
+
import React, { useContext, useRef } from 'react';
|
3
|
+
import MenuDownIcon from '@pingux/mdi-react/MenuDownIcon';
|
4
|
+
import MenuUpIcon from '@pingux/mdi-react/MenuUpIcon';
|
5
|
+
import PropTypes from 'prop-types';
|
6
|
+
import useExpandableListViewItem from '../../hooks/useExpandableListViewItem/useExpandableListViewItem';
|
7
|
+
import { Box, Icon } from '../../index';
|
8
|
+
import { ListViewContext } from './ListViewContext';
|
9
|
+
import ListViewFocusWrapper from './ListViewFocusWrapper';
|
10
|
+
import { jsx as ___EmotionJSX } from "@emotion/react";
|
11
|
+
var ListViewExpandableItem = function ListViewExpandableItem(props) {
|
12
|
+
var item = props.item,
|
13
|
+
_props$item$props = props.item.props,
|
14
|
+
listItemProps = _props$item$props.listItemProps,
|
15
|
+
rowProps = _props$item$props.rowProps,
|
16
|
+
_props$item$props$has = _props$item$props.hasSeparator,
|
17
|
+
hasSeparator = _props$item$props$has === void 0 ? true : _props$item$props$has,
|
18
|
+
hasInsetSeparator = _props$item$props.hasInsetSeparator,
|
19
|
+
isHoverable = props.isHoverable,
|
20
|
+
isFocusable = props.isFocusable,
|
21
|
+
className = props.className;
|
22
|
+
var key = item.key;
|
23
|
+
var _useContext = useContext(ListViewContext),
|
24
|
+
state = _useContext.state;
|
25
|
+
var expandableItemRowRef = useRef();
|
26
|
+
var expandableChildrenRef = useRef();
|
27
|
+
var hookProps = {
|
28
|
+
item: item,
|
29
|
+
listItemProps: listItemProps,
|
30
|
+
rowProps: rowProps,
|
31
|
+
hasSeparator: hasSeparator,
|
32
|
+
hasInsetSeparator: hasInsetSeparator,
|
33
|
+
isHoverable: isHoverable,
|
34
|
+
isFocusable: isFocusable,
|
35
|
+
className: className,
|
36
|
+
expandableItemRowRef: expandableItemRowRef,
|
37
|
+
expandableChildrenRef: expandableChildrenRef,
|
38
|
+
state: state
|
39
|
+
};
|
40
|
+
var _useExpandableListVie = useExpandableListViewItem(hookProps),
|
41
|
+
expandableRowProps = _useExpandableListVie.expandableRowProps,
|
42
|
+
cellProps = _useExpandableListVie.cellProps,
|
43
|
+
expandableContainerProps = _useExpandableListVie.expandableContainerProps,
|
44
|
+
expandableItemState = _useExpandableListVie.expandableItemState;
|
45
|
+
var isExpanded = expandableItemState.isExpanded,
|
46
|
+
toggleExpanded = expandableItemState.toggleExpanded,
|
47
|
+
isFocusEscaped = expandableItemState.isFocusEscaped;
|
48
|
+
return ___EmotionJSX(Box, expandableRowProps, ___EmotionJSX(Box, _extends({}, cellProps, {
|
49
|
+
onMouseDown: toggleExpanded,
|
50
|
+
isRow: true,
|
51
|
+
justifyContent: "start"
|
52
|
+
}), ___EmotionJSX(Box, {
|
53
|
+
isRow: true,
|
54
|
+
sx: {
|
55
|
+
alignItems: 'center',
|
56
|
+
width: '100%'
|
57
|
+
}
|
58
|
+
}, item.rendered[0], ___EmotionJSX(Icon, {
|
59
|
+
sx: {
|
60
|
+
ml: 'auto'
|
61
|
+
},
|
62
|
+
icon: isExpanded ? MenuUpIcon : MenuDownIcon,
|
63
|
+
title: {
|
64
|
+
name: "".concat(key, " expand icon button")
|
65
|
+
}
|
66
|
+
}))), ___EmotionJSX(Box, expandableItemState.gridCellProps, isExpanded && ___EmotionJSX(ListViewFocusWrapper, {
|
67
|
+
isFocusEscaped: isFocusEscaped,
|
68
|
+
containerProps: expandableContainerProps
|
69
|
+
}, item.rendered[1])));
|
70
|
+
};
|
71
|
+
ListViewExpandableItem.propTypes = {
|
72
|
+
item: PropTypes.shape({
|
73
|
+
key: PropTypes.string,
|
74
|
+
rendered: PropTypes.node,
|
75
|
+
props: PropTypes.shape({
|
76
|
+
'data-id': PropTypes.string,
|
77
|
+
listItemProps: PropTypes.shape({}),
|
78
|
+
rowProps: PropTypes.shape({}),
|
79
|
+
hasSeparator: PropTypes.bool,
|
80
|
+
hasInsetSeparator: PropTypes.bool
|
81
|
+
})
|
82
|
+
}),
|
83
|
+
isHoverable: PropTypes.bool,
|
84
|
+
isFocusable: PropTypes.bool
|
85
|
+
};
|
86
|
+
export default ListViewExpandableItem;
|