@pingux/astro 2.71.0-alpha.0 → 2.71.0-alpha.2

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.
Files changed (25) hide show
  1. package/lib/cjs/components/ListBox/ListBox.js +4 -2
  2. package/lib/cjs/components/ListBox/ListBox.styles.js +20 -0
  3. package/lib/cjs/components/ListBox/Option.js +47 -8
  4. package/lib/cjs/components/MultivaluesField/CondensedMultivaluesField.js +508 -0
  5. package/lib/cjs/components/MultivaluesField/DefaultMultivaluesField.js +616 -0
  6. package/lib/cjs/components/MultivaluesField/MultivaluesField.js +18 -481
  7. package/lib/cjs/components/MultivaluesField/MultivaluesField.stories.js +114 -2
  8. package/lib/cjs/components/MultivaluesField/MultivaluesField.test.js +251 -2
  9. package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js +3 -1
  10. package/lib/cjs/recipes/DateTimeRangePicker.stories.js +182 -0
  11. package/lib/cjs/types/listBox.d.ts +6 -0
  12. package/lib/cjs/utils/designUtils/figmaLinks.d.ts +3 -0
  13. package/lib/cjs/utils/designUtils/figmaLinks.js +3 -0
  14. package/lib/components/ListBox/ListBox.js +4 -2
  15. package/lib/components/ListBox/ListBox.styles.js +20 -0
  16. package/lib/components/ListBox/Option.js +47 -8
  17. package/lib/components/MultivaluesField/CondensedMultivaluesField.js +495 -0
  18. package/lib/components/MultivaluesField/DefaultMultivaluesField.js +603 -0
  19. package/lib/components/MultivaluesField/MultivaluesField.js +18 -480
  20. package/lib/components/MultivaluesField/MultivaluesField.stories.js +111 -1
  21. package/lib/components/MultivaluesField/MultivaluesField.test.js +250 -2
  22. package/lib/components/SelectFieldBase/SelectFieldBase.js +3 -1
  23. package/lib/recipes/DateTimeRangePicker.stories.js +167 -0
  24. package/lib/utils/designUtils/figmaLinks.js +3 -0
  25. package/package.json +1 -1
@@ -5,12 +5,14 @@ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/obje
5
5
  var _Symbol = require("@babel/runtime-corejs3/core-js-stable/symbol");
6
6
  var _Object$create = require("@babel/runtime-corejs3/core-js-stable/object/create");
7
7
  var _Object$getPrototypeOf = require("@babel/runtime-corejs3/core-js-stable/object/get-prototype-of");
8
- var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
8
+ var _forEachInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
9
9
  var _Object$setPrototypeOf = require("@babel/runtime-corejs3/core-js-stable/object/set-prototype-of");
10
10
  var _Promise = require("@babel/runtime-corejs3/core-js-stable/promise");
11
11
  var _reverseInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/reverse");
12
12
  var _sliceInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/slice");
13
13
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
14
+ var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
15
+ var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
14
16
  var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
15
17
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
16
18
  var _react = _interopRequireDefault(require("react"));
@@ -20,7 +22,7 @@ var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/s
20
22
  var _testWrapper = require("../../utils/testUtils/testWrapper");
21
23
  var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
22
24
  var _react2 = require("@emotion/react");
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 _context3; _forEachInstanceProperty(_context3 = ["next", "throw", "return"]).call(_context3, 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 _context4; 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(_context4 = this.tryEntries).call(_context4, 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; }
25
+ 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 _context3; _forEachInstanceProperty2(_context3 = ["next", "throw", "return"]).call(_context3, 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" }], _forEachInstanceProperty2(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 _context4; if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, _forEachInstanceProperty2(_context4 = this.tryEntries).call(_context4, 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; }
24
26
  var items = [{
25
27
  id: 1,
26
28
  name: 'Aardvark',
@@ -34,10 +36,33 @@ var items = [{
34
36
  name: 'Snake',
35
37
  key: 'Snake'
36
38
  }];
39
+ var withSection = [{
40
+ name: 'Animals',
41
+ key: 'Animals',
42
+ children: [{
43
+ name: 'Option A1'
44
+ }, {
45
+ name: 'Option A2'
46
+ }]
47
+ }, {
48
+ name: 'People',
49
+ key: 'People',
50
+ children: [{
51
+ name: 'Option B1'
52
+ }, {
53
+ name: 'Option B2'
54
+ }, {
55
+ name: 'Option B3'
56
+ }]
57
+ }];
37
58
  var defaultProps = {
38
59
  items: items,
39
60
  label: 'Field Label'
40
61
  };
62
+ var defaultSectionProps = {
63
+ items: withSection,
64
+ label: 'Field Label'
65
+ };
41
66
  var getComponent = function getComponent() {
42
67
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
43
68
  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
@@ -64,6 +89,25 @@ var getComponentInForm = function getComponentInForm(onFormSubmit) {
64
89
  }, item.name);
65
90
  }))));
66
91
  };
92
+ var getSectionsComponent = function getSectionsComponent() {
93
+ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
94
+ var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
95
+ _ref3$renderFn = _ref3.renderFn,
96
+ renderFn = _ref3$renderFn === void 0 ? _testWrapper.render : _ref3$renderFn;
97
+ return renderFn((0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.MultivaluesField, (0, _extends2["default"])({}, defaultSectionProps, props, {
98
+ mode: "condensed"
99
+ }), function (section) {
100
+ return (0, _react2.jsx)(_index.Section, {
101
+ key: section.key,
102
+ items: section.children,
103
+ title: section.name
104
+ }, function (item) {
105
+ return (0, _react2.jsx)(_index.Item, {
106
+ key: item.name
107
+ }, item.name);
108
+ });
109
+ })));
110
+ };
67
111
  beforeAll(function () {
68
112
  jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
69
113
  return 1000;
@@ -733,6 +777,211 @@ test('in non-restrictive mode the partial string values should be accepted', fun
733
777
  expect(input).not.toHaveValue('');
734
778
  expect(input).toHaveValue(value);
735
779
  });
780
+ test('in condensed mode selects and deselects ', function () {
781
+ getComponent({
782
+ mode: 'condensed'
783
+ });
784
+ _userEvent["default"].tab();
785
+ var listbox = _testWrapper.screen.getByRole('listbox');
786
+ var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
787
+ var firstOption = options[0];
788
+ var buttons = _testWrapper.screen.getAllByRole('button');
789
+ var button = buttons[1];
790
+ expect(button).toHaveTextContent('Select All');
791
+ button.click();
792
+ expect(button).toHaveTextContent('Deselect All');
793
+ expect(_testWrapper.screen.getByText('All Selected')).toBeInTheDocument();
794
+ firstOption.click();
795
+ expect(button).toHaveTextContent('Select All');
796
+ expect(_testWrapper.screen.getByText('2 Selected')).toBeInTheDocument();
797
+ button.click();
798
+ expect(button).toHaveTextContent('Deselect All');
799
+ button.click();
800
+ expect(button).toHaveTextContent('Select All');
801
+ });
802
+ test('in condensed mode "onSelectionChange" is called', function () {
803
+ var onSelectionChange = jest.fn();
804
+ getComponent({
805
+ mode: 'condensed',
806
+ onSelectionChange: onSelectionChange
807
+ });
808
+ var input = _testWrapper.screen.getByRole('combobox');
809
+ var value = 'Aardvark';
810
+ _userEvent["default"].type(input, value);
811
+ var option = (0, _testWrapper.within)(_testWrapper.screen.getByRole('listbox')).getByRole('option');
812
+ _userEvent["default"].click(option);
813
+ expect(_testWrapper.screen.getByText('1 Selected')).toBeInTheDocument();
814
+ expect(onSelectionChange).toBeCalledTimes(1);
815
+ expect(onSelectionChange.mock.calls[0][0].has(value)).toBeTruthy();
816
+ });
817
+ test('opening and closing listbox fires "onOpenChange" in condensed mode', function () {
818
+ var onOpenChange = jest.fn();
819
+ getComponent({
820
+ mode: 'condensed',
821
+ onOpenChange: onOpenChange
822
+ });
823
+ var input = _testWrapper.screen.getByRole('combobox');
824
+ _userEvent["default"].tab();
825
+ expect(input).toHaveFocus();
826
+ expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
827
+ expect(onOpenChange).toHaveBeenCalledWith(true);
828
+ input.blur();
829
+ expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
830
+ expect(onOpenChange).toHaveBeenCalledWith(false);
831
+ });
832
+ test('selected keys in condensed mode ', function () {
833
+ getComponent({
834
+ mode: 'condensed',
835
+ selectedKeys: [items[1].key, items[2].key]
836
+ });
837
+ var listbox = _testWrapper.screen.queryByRole('listbox');
838
+ expect(listbox).not.toBeInTheDocument();
839
+ expect(_testWrapper.screen.getByText('2 Selected')).toBeInTheDocument();
840
+ });
841
+ test('default selected keys in condensed mode ', function () {
842
+ getComponent({
843
+ mode: 'condensed',
844
+ defaultSelectedKeys: [items[1].key, items[2].key]
845
+ });
846
+ var listbox = _testWrapper.screen.queryByRole('listbox');
847
+ expect(listbox).not.toBeInTheDocument();
848
+ expect(_testWrapper.screen.getByText('2 Selected')).toBeInTheDocument();
849
+ });
850
+ test('onInputChange is called in condensed mode ', function () {
851
+ var onInputChange = jest.fn();
852
+ getComponent({
853
+ mode: 'condensed',
854
+ onInputChange: onInputChange
855
+ });
856
+ var input = _testWrapper.screen.getByRole('combobox');
857
+ var value = 'Aardvark';
858
+ _userEvent["default"].type(input, value);
859
+ var listbox = _testWrapper.screen.getByRole('listbox');
860
+ expect(listbox).toBeInTheDocument();
861
+ var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
862
+ expect(options.length).toBe(1);
863
+ expect(onInputChange).toBeCalledTimes(value.length);
864
+ expect(onInputChange).toHaveBeenCalledWith(value);
865
+ });
866
+ test('opens listbox on focus and fires "onFocus', function () {
867
+ var onFocus = jest.fn();
868
+ getComponent({
869
+ mode: 'condensed',
870
+ onFocus: onFocus
871
+ });
872
+ var input = _testWrapper.screen.getByRole('combobox');
873
+ _userEvent["default"].tab();
874
+ expect(input).toHaveFocus();
875
+ expect(_testWrapper.screen.getByRole('listbox')).toBeInTheDocument();
876
+ var options = _testWrapper.screen.getAllByRole('option');
877
+ expect(options.length).toBe(items.length);
878
+ expect(options[0]).toHaveTextContent(items[0].name);
879
+ expect(onFocus).toBeCalled();
880
+ });
881
+ test('closes listbox on blur and fires "onBlur"', function () {
882
+ var onBlur = jest.fn();
883
+ getComponent({
884
+ mode: 'condensed',
885
+ onBlur: onBlur
886
+ });
887
+ var input = _testWrapper.screen.getByRole('combobox');
888
+ _userEvent["default"].tab();
889
+ expect(input).toHaveFocus();
890
+ expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
891
+ input.blur();
892
+ expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
893
+ expect(onBlur).toBeCalled();
894
+ });
895
+ test('list and button are keyboard accessible', function () {
896
+ getComponent({
897
+ mode: 'condensed'
898
+ });
899
+ _userEvent["default"].tab();
900
+ var listbox = _testWrapper.screen.getByRole('listbox');
901
+ var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
902
+ var firstOption = options[0];
903
+ var secondOption = options[1];
904
+ var buttons = _testWrapper.screen.getAllByRole('button');
905
+ var button = buttons[1];
906
+ _userEvent["default"].tab();
907
+ expect(button).toHaveFocus();
908
+ _userEvent["default"].tab();
909
+ expect(firstOption).toHaveFocus();
910
+ _userEvent["default"].type(firstOption, '{arrowdown}', {
911
+ skipClick: true
912
+ });
913
+ expect(secondOption).toHaveFocus();
914
+ _userEvent["default"].type(secondOption, '{esc}', {
915
+ skipClick: true
916
+ });
917
+ expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
918
+ });
919
+ test('popover closes on input blur', function () {
920
+ getComponent({
921
+ mode: 'condensed'
922
+ });
923
+ expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
924
+ expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
925
+ var input = _testWrapper.screen.getByRole('combobox');
926
+ _userEvent["default"].click(input);
927
+ var listbox = _testWrapper.screen.getByRole('listbox');
928
+ var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
929
+ var checkboxes = (0, _testWrapper.within)(listbox).getAllByRole('img');
930
+ expect(checkboxes.length).toBe(3);
931
+ var secondOption = options[1];
932
+ secondOption.click();
933
+ var value = 'Aardvark';
934
+ _userEvent["default"].type(input, value);
935
+ _userEvent["default"].click(document.body);
936
+ expect(input).toHaveValue('');
937
+ expect(listbox).not.toBeInTheDocument();
938
+ });
939
+ test('trigger button handles popover open and close in condensed', function () {
940
+ getComponent({
941
+ mode: 'condensed'
942
+ });
943
+ expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
944
+ var input = _testWrapper.screen.getByRole('combobox');
945
+ _userEvent["default"].click(_testWrapper.screen.getAllByRole('button')[0]);
946
+ expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
947
+ expect(input).toHaveFocus();
948
+ _userEvent["default"].tab();
949
+ _testWrapper.fireEvent.click(_testWrapper.screen.getAllByRole('button')[0]);
950
+ expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
951
+ });
952
+ test('should render items with sections passed in props', function () {
953
+ getSectionsComponent();
954
+ expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
955
+ expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
956
+ var input = _testWrapper.screen.getByRole('combobox');
957
+ _userEvent["default"].click(input);
958
+ expect(_testWrapper.screen.getAllByRole('group')).toHaveLength(2);
959
+ expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
960
+ expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(5);
961
+ });
962
+ test('should render the separators', function () {
963
+ getSectionsComponent();
964
+ var input = _testWrapper.screen.getByRole('combobox');
965
+ _userEvent["default"].click(input);
966
+ expect(_testWrapper.screen.queryAllByRole('separator')).toHaveLength(3);
967
+ var groups = _testWrapper.screen.getAllByRole('group');
968
+ expect(groups).toHaveLength(2);
969
+ expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
970
+ expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(5);
971
+ (0, _forEach["default"])(groups).call(groups, function (group, index) {
972
+ expect(function () {
973
+ return (0, _testWrapper.within)(group).getByText(withSection[index].name);
974
+ });
975
+ var itemOpt = withSection[index].options;
976
+ if ((0, _isArray["default"])(itemOpt)) {
977
+ (0, _forEach["default"])(itemOpt).call(itemOpt, function (opt) {
978
+ return expect(function () {
979
+ return (0, _testWrapper.within)(group).getByText(opt.name);
980
+ });
981
+ });
982
+ }
983
+ });
984
+ });
736
985
 
737
986
  // Needs to be added to each components test file
738
987
  (0, _universalComponentTest.universalComponentTests)({
@@ -83,7 +83,7 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
83
83
  variant: "forms.select"
84
84
  }, triggerProps, ariaProps, {
85
85
  "aria-describedby": helperText && helperTextId
86
- }), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
86
+ }), slots === null || slots === void 0 ? void 0 : slots.leftOfData, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
87
87
  as: "span",
88
88
  variant: "forms.select.currentValue"
89
89
  }, valueProps), state.selectedItem ? state.selectedItem.rendered : (0, _react2.jsx)(_Text["default"], {
@@ -158,6 +158,8 @@ SelectFieldBase.propTypes = _objectSpread(_objectSpread({
158
158
  }),
159
159
  /** Provides a way to insert markup in specified places. */
160
160
  slots: _propTypes["default"].shape({
161
+ /** The given node will be inserted before the text in field container. */
162
+ leftOfData: _propTypes["default"].node,
161
163
  /** The given node will be inserted into the field container. */
162
164
  inContainer: _propTypes["default"].node
163
165
  }),
@@ -0,0 +1,182 @@
1
+ "use strict";
2
+
3
+ var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
+ var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
5
+ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
6
+ var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
7
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
8
+ _Object$defineProperty(exports, "__esModule", {
9
+ value: true
10
+ });
11
+ exports["default"] = exports.Default = void 0;
12
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
13
+ var _padStart = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/pad-start"));
14
+ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
15
+ var _react = _interopRequireWildcard(require("react"));
16
+ var _date = require("@internationalized/date");
17
+ var _CalendarIcon = _interopRequireDefault(require("@pingux/mdi-react/CalendarIcon"));
18
+ var _storybookAddonDesigns = require("storybook-addon-designs");
19
+ var _hooks = require("../hooks");
20
+ var _index = require("../index");
21
+ var _figmaLinks = require("../utils/designUtils/figmaLinks");
22
+ var _react2 = require("@emotion/react");
23
+ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
24
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
25
+ var _default = {
26
+ title: 'Recipes/DateTimeRangePicker',
27
+ decorators: [_storybookAddonDesigns.withDesign]
28
+ };
29
+ exports["default"] = _default;
30
+ var dropdownItems = [{
31
+ key: 'Today',
32
+ name: 'Today'
33
+ }, {
34
+ key: 'From Yesterday',
35
+ name: 'From Yesterday'
36
+ }, {
37
+ key: 'Last 7 Days',
38
+ name: 'Last 7 Days'
39
+ }, {
40
+ key: 'Last 30 Days',
41
+ name: 'Last 30 Days'
42
+ }, {
43
+ key: 'This Month',
44
+ name: 'This Month'
45
+ }, {
46
+ key: 'Last Month',
47
+ name: 'Last Month'
48
+ }, {
49
+ key: 'Custom Range',
50
+ name: 'Custom Range'
51
+ }];
52
+ function convertDateTimeValueToString(timeValue, DateValue) {
53
+ var _context, _context2, _context3, _context4;
54
+ // eslint-disable-next-line prefer-const
55
+ var hour = timeValue.hour,
56
+ minute = timeValue.minute;
57
+ var ampm = hour >= 12 ? 'PM' : 'AM';
58
+ hour %= 12;
59
+ hour = hour || 12;
60
+ var hourString = String(hour);
61
+ var minuteString = (0, _padStart["default"])(_context = String(minute)).call(_context, 2, '0');
62
+ return (0, _concat["default"])(_context2 = (0, _concat["default"])(_context3 = (0, _concat["default"])(_context4 = "".concat(DateValue.toString(), " ")).call(_context4, hourString, ":")).call(_context3, minuteString, " ")).call(_context2, ampm);
63
+ }
64
+ var Default = function Default() {
65
+ var modalState = (0, _hooks.useModalState)();
66
+ var _useState = (0, _react.useState)({
67
+ start: '2030-01-12',
68
+ end: '2030-01-15'
69
+ }),
70
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
71
+ range = _useState2[0],
72
+ setRange = _useState2[1];
73
+ var _useState3 = (0, _react.useState)(new _date.Time(1)),
74
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
75
+ startTime = _useState4[0],
76
+ setStartTime = _useState4[1];
77
+ var _useState5 = (0, _react.useState)(new _date.Time(12, 59)),
78
+ _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
79
+ endTime = _useState6[0],
80
+ setEndTime = _useState6[1];
81
+ var _useState7 = (0, _react.useState)('Today'),
82
+ _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
83
+ selectedKey = _useState8[0],
84
+ setSelectedKey = _useState8[1];
85
+ var handleSelectionChange = function handleSelectionChange(key) {
86
+ if (key === 'Custom Range') {
87
+ modalState.open();
88
+ }
89
+ setSelectedKey(key);
90
+ };
91
+ return (0, _react2.jsx)(_index.Box, {
92
+ gap: "lg"
93
+ }, (0, _react2.jsx)(_index.Text, null, "Click on the \u2018Custom Range\u2019 option to view the modal"), (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, {
94
+ width: "200px",
95
+ items: dropdownItems,
96
+ selectedKey: selectedKey,
97
+ onSelectionChange: handleSelectionChange,
98
+ label: "Date Range",
99
+ slots: {
100
+ leftOfData: (0, _react2.jsx)(_index.Icon, {
101
+ icon: _CalendarIcon["default"],
102
+ color: "accent.40",
103
+ mr: "xs",
104
+ title: {
105
+ name: 'Calendar Icon'
106
+ }
107
+ })
108
+ }
109
+ }, function (item) {
110
+ return (0, _react2.jsx)(_index.Item, {
111
+ key: item.key
112
+ }, item.name);
113
+ }), modalState.isOpen && (0, _react2.jsx)(_index.Modal, {
114
+ isOpen: modalState.isOpen,
115
+ onClose: modalState.close,
116
+ hasCloseButton: true,
117
+ title: "Custom Date and Time Range",
118
+ contentProps: {
119
+ maxWidth: '636px',
120
+ width: '100%'
121
+ }
122
+ }, (0, _react2.jsx)(_index.Box, {
123
+ gap: "lg",
124
+ mt: "lg"
125
+ }, (0, _react2.jsx)(_index.Box, {
126
+ minHeight: "358px"
127
+ }, (0, _react2.jsx)(_index.Text, {
128
+ as: "h2",
129
+ variant: "H2",
130
+ mb: "xs"
131
+ }, "Date Range"), (0, _react2.jsx)(_index.RangeCalendar, {
132
+ value: range,
133
+ onChange: setRange
134
+ })), (0, _react2.jsx)(_index.Separator, {
135
+ margin: 0
136
+ }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
137
+ as: "h2",
138
+ variant: "H2"
139
+ }, "Time Range"), (0, _react2.jsx)(_index.Box, {
140
+ isRow: true,
141
+ gap: "lg",
142
+ alignItems: "center",
143
+ mt: "xs"
144
+ }, (0, _react2.jsx)(_index.TimeField, {
145
+ label: "Start Time",
146
+ value: startTime,
147
+ onChange: setStartTime
148
+ }), (0, _react2.jsx)(_index.Box, {
149
+ height: "59.95px"
150
+ }, (0, _react2.jsx)(_index.Box, {
151
+ height: "19.95px"
152
+ }), (0, _react2.jsx)(_index.Box, {
153
+ height: "40px",
154
+ justifyContent: "center"
155
+ }, (0, _react2.jsx)(_index.Text, {
156
+ as: "h2",
157
+ variant: "H2"
158
+ }, "-"))), (0, _react2.jsx)(_index.TimeField, {
159
+ label: "End Time",
160
+ value: endTime,
161
+ onChange: setEndTime
162
+ }))), (0, _react2.jsx)(_index.Separator, {
163
+ margin: 0
164
+ }), (0, _react2.jsx)(_index.Text, null, convertDateTimeValueToString(startTime, range.start), ' ', "-", ' ', convertDateTimeValueToString(endTime, range.end)), (0, _react2.jsx)(_index.ButtonBar, {
165
+ sx: {
166
+ padding: 0
167
+ }
168
+ }, (0, _react2.jsx)(_index.Button, {
169
+ variant: "primary",
170
+ "data-id": "apply-button"
171
+ }, "Apply"), (0, _react2.jsx)(_index.Button, {
172
+ variant: "link",
173
+ "data-id": "cancel-button"
174
+ }, "Cancel"))))));
175
+ };
176
+ exports.Default = Default;
177
+ Default.parameters = {
178
+ design: {
179
+ type: 'figma',
180
+ url: _figmaLinks.FIGMA_LINKS.dateTimeRangePicker["default"]
181
+ }
182
+ };
@@ -5,6 +5,7 @@ import { VirtualizerItemOptions } from '@react-aria/virtualizer';
5
5
  import { ReusableView } from '@react-stately/virtualizer';
6
6
  import type { CollectionChildren, FocusStrategy } from '@react-types/shared';
7
7
  import { BoxProps } from './box';
8
+ import { StyleProps } from './shared';
8
9
  export interface ComboBoxStateType extends ComboBoxState<object> {
9
10
  focusStrategy: FocusStrategy;
10
11
  }
@@ -29,10 +30,15 @@ export interface ListBoxProps extends AriaListBoxOptions<object> {
29
30
  renderEmptyState?: React.ReactNode;
30
31
  variant?: string;
31
32
  children?: CollectionChildren<object>;
33
+ isCondensed?: boolean;
32
34
  }
33
35
  export interface OptionType {
34
36
  item: ListBoxItemType;
35
37
  hasVirtualFocus?: boolean;
38
+ isCondensed?: boolean;
39
+ }
40
+ export interface OptionWithCheckboxType extends StyleProps {
41
+ isSelected?: boolean;
36
42
  }
37
43
  export interface AriaListBoxOptionsType extends AriaOptionProps {
38
44
  onPressStart: () => void;
@@ -79,6 +79,9 @@ export declare const FIGMA_LINKS: {
79
79
  countryPicker: {
80
80
  default: string;
81
81
  };
82
+ dateTimeRangePicker: {
83
+ default: string;
84
+ };
82
85
  helpHint: {
83
86
  default: string;
84
87
  withLink: string;
@@ -86,6 +86,9 @@ var FIGMA_LINKS = {
86
86
  countryPicker: {
87
87
  "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=4568-7532&mode=design&t=eSfQYHRFNPf37J4C-0'
88
88
  },
89
+ dateTimeRangePicker: {
90
+ "default": 'https://www.figma.com/design/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=49152-4497&t=n7OkhpTOBBWW4rme-0'
91
+ },
89
92
  helpHint: {
90
93
  "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A4534&t=We3h7LaaFJQnxdSy-1',
91
94
  withLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=28958%3A40081&mode=design&t=WmSYPx1hR8kxFiXf-1'
@@ -8,7 +8,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
8
8
  import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
9
9
  import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
10
10
  import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
11
- var _excluded = ["defaultSelectedKeys", "disabledKeys", "hasAutoFocus", "hasFocusWrap", "hasNoEmptySelection", "hasVirtualFocus", "id", "isLoading", "isFocusedOnHover", "isSelectedOnPressUp", "isVirtualized", "items", "keyboardDelegate", "label", "onLoadMore", "onScroll", "onSelectionChange", "renderEmptyState", "selectedKeys", "selectionMode", "state", "aria-label", "aria-labelledby", "aria-describedby", "aria-details"];
11
+ var _excluded = ["defaultSelectedKeys", "disabledKeys", "hasAutoFocus", "hasFocusWrap", "hasNoEmptySelection", "hasVirtualFocus", "id", "isCondensed", "isLoading", "isFocusedOnHover", "isSelectedOnPressUp", "isVirtualized", "items", "keyboardDelegate", "label", "onLoadMore", "onScroll", "onSelectionChange", "renderEmptyState", "selectedKeys", "selectionMode", "state", "aria-label", "aria-labelledby", "aria-describedby", "aria-details"];
12
12
  import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
13
13
  import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
14
14
  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; }
@@ -58,6 +58,7 @@ var ListBox = /*#__PURE__*/forwardRef(function (props, ref) {
58
58
  hasNoEmptySelection = props.hasNoEmptySelection,
59
59
  hasVirtualFocus = props.hasVirtualFocus,
60
60
  id = props.id,
61
+ isCondensed = props.isCondensed,
61
62
  isLoading = props.isLoading,
62
63
  isFocusedOnHover = props.isFocusedOnHover,
63
64
  isSelectedOnPressUp = props.isSelectedOnPressUp,
@@ -162,7 +163,8 @@ var ListBox = /*#__PURE__*/forwardRef(function (props, ref) {
162
163
  return ___EmotionJSX(Option, {
163
164
  key: item.key,
164
165
  item: item,
165
- hasVirtualFocus: hasVirtualFocus
166
+ hasVirtualFocus: hasVirtualFocus,
167
+ isCondensed: isCondensed
166
168
  });
167
169
  }
168
170
  if (type === collectionTypes.LOADER) {
@@ -26,8 +26,28 @@ listBox.option = _objectSpread(_objectSpread({}, text.base), {}, {
26
26
  '&.is-focused': {
27
27
  color: 'white',
28
28
  bg: 'active'
29
+ },
30
+ '&.is-condensed': {
31
+ '&.is-selected': {
32
+ pl: 'md',
33
+ color: 'text.primary',
34
+ fontWeight: 400
35
+ },
36
+ '&.is-focused': {
37
+ color: 'text.primary',
38
+ fontWeight: 400,
39
+ bg: 'white'
40
+ }
29
41
  }
30
42
  });
43
+ listBox.checkboxIcon = {
44
+ '&.is-focus-visible': {
45
+ boxShadow: 'none',
46
+ outline: '1px solid',
47
+ outlineColor: 'focus',
48
+ outlineOffset: '0px'
49
+ }
50
+ };
31
51
  listBox.selectField = {
32
52
  maxHeight: '200px',
33
53
  overflow: 'auto',