@innovaccer/design-system
Version:
React components library project for Innovaccer Design System
38,254 lines • 1.81 MB
JavaScript
/**
* Generated on: 2026-09-23T10:39:29.967Z
* Package: @innovaccer/design-system
* Version: v4.30.3
* License: MIT
* Docs: https://mds.innovaccer.com
*/
import * as React from 'react';
import React__default, { useRef, useReducer, useCallback, useEffect as useEffect$2, useMemo, useState as useState$3 } from 'react';
import * as ReactDOM from 'react-dom';
import { flushSync } from 'react-dom';
import { Player } from '@lottiefiles/react-lottie-player';
var colorToHex = function colorToHex(color) {
return getComputedStyle(document.documentElement).getPropertyValue("--".concat(color));
};
var css = /*#__PURE__*/Object.freeze({
__proto__: null,
colorToHex: colorToHex
});
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _arrayWithoutHoles(r) {
if (Array.isArray(r)) return _arrayLikeToArray(r);
}
function _assertThisInitialized$1(e) {
if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return e;
}
function asyncGeneratorStep(n, t, e, r, o, a, c) {
try {
var i = n[a](c),
u = i.value;
} catch (n) {
return void e(n);
}
i.done ? t(u) : Promise.resolve(u).then(r, o);
}
function _asyncToGenerator(n) {
return function () {
var t = this,
e = arguments;
return new Promise(function (r, o) {
var a = n.apply(t, e);
function _next(n) {
asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
}
function _throw(n) {
asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
}
_next(void 0);
});
};
}
function _callSuper(t, o, e) {
return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
}
function _classCallCheck(a, n) {
if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
}
function _defineProperties(e, r) {
for (var t = 0; t < r.length; t++) {
var o = r[t];
o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o);
}
}
function _createClass(e, r, t) {
return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
writable: !1
}), e;
}
function _createForOfIteratorHelper(r, e) {
var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (!t) {
if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
t && (r = t);
var n = 0,
F = function () {};
return {
s: F,
n: function () {
return n >= r.length ? {
done: !0
} : {
done: !1,
value: r[n++]
};
},
e: function (r) {
throw r;
},
f: F
};
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
var o,
a = !0,
u = !1;
return {
s: function () {
t = t.call(r);
},
n: function () {
var r = t.next();
return a = r.done, r;
},
e: function (r) {
u = !0, o = r;
},
f: function () {
try {
a || null == t.return || t.return();
} finally {
if (u) throw o;
}
}
};
}
function _defineProperty$1(e, r, t) {
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _extends$2() {
return _extends$2 = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends$2.apply(null, arguments);
}
function _getPrototypeOf(t) {
return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
return t.__proto__ || Object.getPrototypeOf(t);
}, _getPrototypeOf(t);
}
function _inherits(t, e) {
if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
t.prototype = Object.create(e && e.prototype, {
constructor: {
value: t,
writable: !0,
configurable: !0
}
}), Object.defineProperty(t, "prototype", {
writable: !1
}), e && _setPrototypeOf(t, e);
}
function _isNativeReflectConstruct() {
try {
var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
} catch (t) {}
return (_isNativeReflectConstruct = function () {
return !!t;
})();
}
function _iterableToArray(r) {
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
r && (o = o.filter(function (r) {
return Object.getOwnPropertyDescriptor(e, r).enumerable;
})), t.push.apply(t, o);
}
return t;
}
function _objectSpread2(e) {
for (var r = 1; r < arguments.length; r++) {
var t = null != arguments[r] ? arguments[r] : {};
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
_defineProperty$1(e, r, t[r]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
});
}
return e;
}
function _objectWithoutProperties(e, t) {
if (null == e) return {};
var o,
r,
i = _objectWithoutPropertiesLoose$1(e, t);
if (Object.getOwnPropertySymbols) {
var s = Object.getOwnPropertySymbols(e);
for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
}
return i;
}
function _objectWithoutPropertiesLoose$1(r, e) {
if (null == r) return {};
var t = {};
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
if (e.includes(n)) continue;
t[n] = r[n];
}
return t;
}
function _possibleConstructorReturn(t, e) {
if (e && ("object" == typeof e || "function" == typeof e)) return e;
if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
return _assertThisInitialized$1(t);
}
function _regeneratorRuntime() {
_regeneratorRuntime = function () {
return e;
};
var t,
e = {},
r = Object.prototype,
n = r.hasOwnProperty,
o = Object.defineProperty || function (t, e, r) {
t[e] = r.value;
},
i = "function" == typeof Symbol ? Symbol : {},
a = i.iterator || "@@iterator",
c = i.asyncIterator || "@@asyncIterator",
u = i.toStringTag || "@@toStringTag";
function define(t, e, r) {
return Object.defineProperty(t, e, {
value: r,
enumerable: !0,
configurable: !0,
writable: !0
}), t[e];
}
try {
define({}, "");
} catch (t) {
define = function (t, e, r) {
return t[e] = r;
};
}
function wrap(t, e, r, n) {
var i = e && e.prototype instanceof Generator ? e : Generator,
a = Object.create(i.prototype),
c = new Context(n || []);
return o(a, "_invoke", {
value: makeInvokeMethod(t, r, c)
}), a;
}
function tryCatch(t, e, r) {
try {
return {
type: "normal",
arg: t.call(e, r)
};
} catch (t) {
return {
type: "throw",
arg: t
};
}
}
e.wrap = wrap;
var h = "suspendedStart",
l = "suspendedYield",
f = "executing",
s = "completed",
y = {};
function Generator() {}
function GeneratorFunction() {}
function GeneratorFunctionPrototype() {}
var p = {};
define(p, a, function () {
return this;
});
var d = Object.getPrototypeOf,
v = d && d(d(values([])));
v && v !== r && n.call(v, a) && (p = v);
var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
function defineIteratorMethods(t) {
["next", "throw", "return"].forEach(function (e) {
define(t, e, function (t) {
return this._invoke(e, t);
});
});
}
function AsyncIterator(t, e) {
function invoke(r, o, i, a) {
var c = tryCatch(t[r], t, o);
if ("throw" !== c.type) {
var u = c.arg,
h = u.value;
return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
invoke("next", t, i, a);
}, function (t) {
invoke("throw", t, i, a);
}) : e.resolve(h).then(function (t) {
u.value = t, i(u);
}, function (t) {
return invoke("throw", t, i, a);
});
}
a(c.arg);
}
var r;
o(this, "_invoke", {
value: function (t, n) {
function callInvokeWithMethodAndArg() {
return new e(function (e, r) {
invoke(t, n, e, r);
});
}
return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
}
});
}
function makeInvokeMethod(e, r, n) {
var o = h;
return function (i, a) {
if (o === f) throw Error("Generator is already running");
if (o === s) {
if ("throw" === i) throw a;
return {
value: t,
done: !0
};
}
for (n.method = i, n.arg = a;;) {
var c = n.delegate;
if (c) {
var u = maybeInvokeDelegate(c, n);
if (u) {
if (u === y) continue;
return u;
}
}
if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
if (o === h) throw o = s, n.arg;
n.dispatchException(n.arg);
} else "return" === n.method && n.abrupt("return", n.arg);
o = f;
var p = tryCatch(e, r, n);
if ("normal" === p.type) {
if (o = n.done ? s : l, p.arg === y) continue;
return {
value: p.arg,
done: n.done
};
}
"throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
}
};
}
function maybeInvokeDelegate(e, r) {
var n = r.method,
o = e.iterator[n];
if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
var i = tryCatch(o, e.iterator, r.arg);
if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
var a = i.arg;
return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
}
function pushTryEntry(t) {
var e = {
tryLoc: t[0]
};
1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
}
function resetTryEntry(t) {
var e = t.completion || {};
e.type = "normal", delete e.arg, t.completion = e;
}
function Context(t) {
this.tryEntries = [{
tryLoc: "root"
}], t.forEach(pushTryEntry, this), this.reset(!0);
}
function values(e) {
if (e || "" === e) {
var r = e[a];
if (r) return r.call(e);
if ("function" == typeof e.next) return e;
if (!isNaN(e.length)) {
var o = -1,
i = function next() {
for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
return next.value = t, next.done = !0, next;
};
return i.next = i;
}
}
throw new TypeError(typeof e + " is not iterable");
}
return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
value: GeneratorFunctionPrototype,
configurable: !0
}), o(GeneratorFunctionPrototype, "constructor", {
value: GeneratorFunction,
configurable: !0
}), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
var e = "function" == typeof t && t.constructor;
return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
}, e.mark = function (t) {
return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
}, e.awrap = function (t) {
return {
__await: t
};
}, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
return this;
}), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
void 0 === i && (i = Promise);
var a = new AsyncIterator(wrap(t, r, n, o), i);
return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
return t.done ? t.value : a.next();
});
}, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
return this;
}), define(g, "toString", function () {
return "[object Generator]";
}), e.keys = function (t) {
var e = Object(t),
r = [];
for (var n in e) r.push(n);
return r.reverse(), function next() {
for (; r.length;) {
var t = r.pop();
if (t in e) return next.value = t, next.done = !1, next;
}
return next.done = !0, next;
};
}, e.values = values, Context.prototype = {
constructor: Context,
reset: function (e) {
if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
},
stop: function () {
this.done = !0;
var t = this.tryEntries[0].completion;
if ("throw" === t.type) throw t.arg;
return this.rval;
},
dispatchException: function (e) {
if (this.done) throw e;
var r = this;
function handle(n, o) {
return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
}
for (var o = this.tryEntries.length - 1; o >= 0; --o) {
var i = this.tryEntries[o],
a = i.completion;
if ("root" === i.tryLoc) return handle("end");
if (i.tryLoc <= this.prev) {
var c = n.call(i, "catchLoc"),
u = n.call(i, "finallyLoc");
if (c && u) {
if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
} else if (c) {
if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
} else {
if (!u) throw Error("try statement without catch or finally");
if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
}
}
}
},
abrupt: function (t, e) {
for (var r = this.tryEntries.length - 1; r >= 0; --r) {
var o = this.tryEntries[r];
if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
var i = o;
break;
}
}
i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
var a = i ? i.completion : {};
return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
},
complete: function (t, e) {
if ("throw" === t.type) throw t.arg;
return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
},
finish: function (t) {
for (var e = this.tryEntries.length - 1; e >= 0; --e) {
var r = this.tryEntries[e];
if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
}
},
catch: function (t) {
for (var e = this.tryEntries.length - 1; e >= 0; --e) {
var r = this.tryEntries[e];
if (r.tryLoc === t) {
var n = r.completion;
if ("throw" === n.type) {
var o = n.arg;
resetTryEntry(r);
}
return o;
}
}
throw Error("illegal catch attempt");
},
delegateYield: function (e, r, n) {
return this.delegate = {
iterator: values(e),
resultName: r,
nextLoc: n
}, "next" === this.method && (this.arg = t), y;
}
}, e;
}
function _setPrototypeOf(t, e) {
return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
return t.__proto__ = e, t;
}, _setPrototypeOf(t, e);
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
function _toConsumableArray(r) {
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
}
function _toPrimitive(t, r) {
if ("object" != typeof t || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != typeof i) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == typeof i ? i : i + "";
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
var placeholders = _defineProperty$1(_defineProperty$1({}, 'hh:mm', '--:--'), 'hh:mm AM', '--:-- AM');
var isPlaceholderPresent = function isPlaceholderPresent(placeholderChar, time) {
return time && time.includes(placeholderChar);
};
var isFormat12hour = function isFormat12hour(format) {
return format === 'hh:mm AM';
};
var get12hourFormat = function get12hourFormat(hours) {
var AMPM = hours < 12 ? 'AM' : 'PM';
var hrs = hours % 12 || 12;
return {
hrs: hrs,
AMPM: AMPM
};
};
var get24hourFormat = function get24hourFormat(hours, am_pm) {
var convertedHours = hours;
if (am_pm) {
if (am_pm === 'PM' && hours < 12) {
convertedHours = hours + 12;
} else if (am_pm === 'AM' && hours === 12) {
convertedHours = hours - 12;
}
return convertedHours;
}
return hours;
};
var translateToTime = function translateToTime(format, time) {
if (!time) return '';
if (typeof time === 'number') {
var timeObj = getTimeObjectFromNumber(format, time);
return translateToString$1(format, timeObj);
}
return time;
};
var getTimeObjectFromNumber = function getTimeObjectFromNumber(format, time) {
var d = new Date(time);
var hrs = d.getHours();
var hours = isFormat12hour(format) ? get12hourFormat(hrs).hrs : hrs;
var am_pm = isFormat12hour(format) ? get12hourFormat(hrs).AMPM : '';
var minutes = d.getMinutes();
var seconds = d.getSeconds();
return {
hours: hours,
minutes: minutes,
seconds: seconds,
am_pm: am_pm
};
};
var getTimeObjFromStr = function getTimeObjFromStr(format, time) {
var separator = ':';
var hours = 0;
var minutes = 0;
var len = format.length;
var timeLength = time.length;
var lastChars = format.substring(len - 2, len);
var is12hrFormat = lastChars === 'AM' || lastChars === 'PM';
var am_pm = is12hrFormat ? time.substring(timeLength - 2, timeLength) : '';
var timeFormat = is12hrFormat ? time.substring(0, timeLength - 3) : time;
var inputFormat = is12hrFormat ? format.substring(0, len - 3) : format;
var v = timeFormat.split(separator);
inputFormat.split(separator).forEach(function (f, i) {
switch (f) {
case 'hh':
hours = +v[i] || 0;
break;
case 'mm':
minutes = +v[i] || 0;
break;
}
});
return {
hours: hours,
minutes: minutes,
am_pm: am_pm
};
};
var getOutputTimeString = function getOutputTimeString(inputFormat, outputFormat, time) {
if (inputFormat === outputFormat) return time;
var _getTimeObjFromStr = getTimeObjFromStr(inputFormat, time),
hours = _getTimeObjFromStr.hours,
minutes = _getTimeObjFromStr.minutes,
am_pm = _getTimeObjFromStr.am_pm;
var AMPM = isFormat12hour(outputFormat) ? get12hourFormat(hours).AMPM : '';
var hrs = isFormat12hour(outputFormat) ? get12hourFormat(hours).hrs : get24hourFormat(hours, am_pm);
var timeStr = translateToString$1(outputFormat, {
minutes: minutes,
hours: hrs,
am_pm: AMPM
});
return timeStr;
};
var translateToString$1 = function translateToString(format, time) {
var hours = time.hours,
minutes = time.minutes,
am_pm = time.am_pm;
var separator = ':';
var timeFormat = format.split(' ');
var v = timeFormat[0].split(separator);
var val = '';
v.forEach(function (f, i) {
switch (f) {
case 'hh':
val += hours < 10 ? "0".concat(hours) : hours;
break;
case 'mm':
val += minutes < 10 ? "0".concat(minutes) : minutes;
break;
}
if (i !== f.length - 1) val += separator;
});
val += isFormat12hour(format) && am_pm ? " ".concat(am_pm) : '';
return val;
};
var isValid = function isValid(validators) {
for (var _len = arguments.length, value = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
value[_key - 1] = arguments[_key];
}
var iterator = Array.isArray(validators) ? validators : [validators];
return iterator.every(function (validator) {
return validator.apply(void 0, value);
});
};
var date$1 = function date(val, format) {
var validate = function validate(date, month, year) {
var monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
// Adjust for leap years
if (year % 400 == 0 || year % 100 != 0 && year % 4 == 0) monthLength[1] = 29;
// Check the range of the day
return month <= 12 && date <= monthLength[month - 1];
};
if (val) {
switch (format) {
case 'dd/mm/yyyy':
{
var p = val.split('/');
var _date = +p[0] || 1;
var month = +p[1] || 1;
var year = +p[2] || 1900;
return validate(_date, month, year);
}
case 'mm/dd/yyyy':
{
var _p = val.split('/');
var _date2 = +_p[1] || 1;
var _month = +_p[0] || 1;
var _year = +_p[2] || 1900;
return validate(_date2, _month, _year);
}
case 'yyyy/mm/dd':
{
var _p2 = val.split('/');
var _date3 = +_p2[2] || 1;
var _month2 = +_p2[1] || 1;
var _year2 = +_p2[0] || 1900;
return validate(_date3, _month2, _year2);
}
case 'dd-mm-yyyy':
{
var _p3 = val.split('-');
var _date4 = +_p3[0] || 1;
var _month3 = +_p3[1] || 1;
var _year3 = +_p3[2] || 1900;
return validate(_date4, _month3, _year3);
}
case 'mm-dd-yyyy':
{
var _p4 = val.split('-');
var _date5 = +_p4[1] || 1;
var _month4 = +_p4[0] || 1;
var _year4 = +_p4[2] || 1900;
return validate(_date5, _month4, _year4);
}
case 'yyyy-mm-dd':
{
var _p5 = val.split('-');
var _date6 = +_p5[2] || 1;
var _month5 = +_p5[1] || 1;
var _year5 = +_p5[0] || 1900;
return validate(_date6, _month5, _year5);
}
default:
return false;
}
}
return false;
};
var time$1 = function time(val, format) {
var _getTimeObjFromStr = getTimeObjFromStr(format, val),
hours = _getTimeObjFromStr.hours,
minutes = _getTimeObjFromStr.minutes;
var hoursCond = isFormat12hour(format) ? hours <= 12 : hours < 24;
return hoursCond && minutes <= 60;
};
var isNaturalNumber = function isNaturalNumber(val) {
if (typeof val === 'string' && /[^0-9]/.test(val) || typeof val === 'number' && (val <= 0 || val - Math.floor(val) !== 0)) {
return false;
}
return true;
};
var validators = /*#__PURE__*/Object.freeze({
__proto__: null,
isValid: isValid,
date: date$1,
time: time$1,
isNaturalNumber: isNaturalNumber
});
var date = {
'dd/mm/yyyy': [/[0123]/, /\d/, '/', /[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
'mm/dd/yyyy': [/[01]/, /\d/, '/', /[0123]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
'yyyy/mm/dd': [/\d/, /\d/, /\d/, /\d/, '/', /[01]/, /\d/, '/', /[0123]/, /\d/],
'dd-mm-yyyy': [/[0123]/, /\d/, '-', /[01]/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
'mm-dd-yyyy': [/[01]/, /\d/, '-', /[0123]/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
'yyyy-mm-dd': [/\d/, /\d/, /\d/, /\d/, '-', /[01]/, /\d/, '-', /[0123]/, /\d/]
};
var rangeDate = {
'dd/mm/yyyy': [/[0123]/, /\d/, '/', /[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, ' ', '-', ' ', /[0123]/, /\d/, '/', /[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
'mm/dd/yyyy': [/[01]/, /\d/, '/', /[0123]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, ' ', '-', ' ', /[01]/, /\d/, '/', /[0123]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
'yyyy/mm/dd': [/\d/, /\d/, /\d/, /\d/, '/', /[01]/, /\d/, '/', /[0123]/, /\d/, ' ', '-', ' ', /\d/, /\d/, /\d/, /\d/, '/', /[01]/, /\d/, '/', /[0123]/, /\d/],
'dd-mm-yyyy': [/[0123]/, /\d/, '-', /[01]/, /\d/, '-', /\d/, /\d/, /\d/, /\d/, ' ', '-', ' ', /[0123]/, /\d/, '-', /[01]/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
'mm-dd-yyyy': [/[01]/, /\d/, '-', /[0123]/, /\d/, '-', /\d/, /\d/, /\d/, /\d/, ' ', '-', ' ', /[01]/, /\d/, '-', /[0123]/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
'yyyy-mm-dd': [/\d/, /\d/, /\d/, /\d/, '-', /[01]/, /\d/, '-', /[0123]/, /\d/, ' ', '-', ' ', /\d/, /\d/, /\d/, /\d/, '-', /[01]/, /\d/, '-', /[0123]/, /\d/]
};
var time = _defineProperty$1(_defineProperty$1({}, 'hh:mm', [/[0-1-2]/, /\d/, ':', /[0-5]/, /\d/]), 'hh:mm AM', [/[0-1]/, /\d/, ':', /[0-5]/, /\d/, ' ', /[APap]/, 'M']);
var masks = /*#__PURE__*/Object.freeze({
__proto__: null,
date: date,
rangeDate: rangeDate,
time: time
});
var index = /*#__PURE__*/Object.freeze({
__proto__: null,
css: css,
validators: validators,
masks: masks
});
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
function unwrapExports (x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
var classnames = createCommonjsModule(function (module) {
/*!
Copyright (c) 2018 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/* global define */
(function () {
var hasOwn = {}.hasOwnProperty;
function classNames () {
var classes = '';
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (arg) {
classes = appendClass(classes, parseValue(arg));
}
}
return classes;
}
function parseValue (arg) {
if (typeof arg === 'string' || typeof arg === 'number') {
return arg;
}
if (typeof arg !== 'object') {
return '';
}
if (Array.isArray(arg)) {
return classNames.apply(null, arg);
}
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
return arg.toString();
}
var classes = '';
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes = appendClass(classes, key);
}
}
return classes;
}
function appendClass (value, newClass) {
if (!newClass) {
return value;
}
if (value) {
return value + ' ' + newClass;
}
return value + newClass;
}
if (module.exports) {
classNames.default = classNames;
module.exports = classNames;
} else {
window.classNames = classNames;
}
}());
});
// export type DefaultProps<T> = T extends { defaultProps: any }
// ? T['defaultProps']
// : {};
// export type Props<T, U> = Omit<T, keyof U> & {
// [P in keyof T & keyof U]?: T[P];
// };
var extractBaseProps = function extractBaseProps(props) {
var baseProps = ['className', 'data-test'];
var basePropsObj = baseProps.reduce(function (acc, curr) {
return props[curr] ? _objectSpread2(_objectSpread2({}, acc), {}, _defineProperty$1({}, curr, props[curr])) : _objectSpread2({}, acc);
}, {});
return basePropsObj;
};
var filterProps = function filterProps(props, propsList, include) {
return Object.entries(props).filter(function (obj) {
return include ? propsList.includes(obj[0]) : !propsList.includes(obj[0]);
}).reduce(function (acc, curr) {
acc[curr[0]] = curr[1];
return acc;
}, {});
};
var AvatarContext = /*#__PURE__*/React.createContext({
size: 'regular',
appearance: 'secondary',
firstName: '',
lastName: '',
darkAppearance: []
});
var AvatarProvider = AvatarContext.Provider;
var iconAppearanceMapper = {
secondary: 'inverse',
primary: 'primary_darker',
alert: 'alert_darker',
accent2: 'accent2_darker',
accent3: 'accent3_darker',
warning: 'warning_darker',
success: 'success_darker',
accent1: 'accent1_darker',
accent4: 'accent4_darker'
};
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z$1o = "/* Avatar */\n\n.avatar-module-Avatar-D8RSu-4-30-3 {\n display: flex;\n flex-grow: 0;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n text-transform: uppercase;\n border-radius: var(--border-radius-full);\n cursor: default;\n position: relative;\n}\n\n.avatar-module-Avatar-wrapper-EoBlf-4-30-3:has(.avatar-module-Avatar-D8RSu-4-30-3:focus-visible)::after {\n content: '';\n position: absolute;\n top: calc(-1 * var(--spacing-20));\n bottom: calc(-1 * var(--spacing-20));\n left: calc(-1 * var(--spacing-10));\n right: calc(-1 * var(--spacing-10));\n border: var(--border-width-05) solid var(--primary-focus);\n border-radius: var(--border-radius-10);\n pointer-events: none;\n}\n\n.avatar-module-Avatar-D8RSu-4-30-3:focus-visible {\n /* Fallback focus ring for browsers without :has support */\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n@supports selector(.Avatar-wrapper:has(.Avatar:focus-visible)) {\n .avatar-module-Avatar-D8RSu-4-30-3:focus-visible {\n outline: none;\n }\n}\n\n.avatar-module-Avatar-wrapper--square--Pcj7-4-30-3 {\n padding: var(--spacing-2-5);\n box-sizing: border-box;\n}\n\n.avatar-module-Avatar-wrapper-EoBlf-4-30-3 {\n position: relative;\n}\n\n.avatar-module-Avatar--square-lGJGN-4-30-3 {\n width: 100%;\n height: 100%;\n border-radius: var(--border-radius-10);\n}\n\n.avatar-module-Avatar--regular-ewNzb-4-30-3 {\n height: var(--spacing-80);\n width: var(--spacing-80);\n}\n\n.avatar-module-Avatar--tiny-Veo-U-4-30-3 {\n height: var(--spacing-60);\n width: var(--spacing-60);\n}\n\n.avatar-module-Avatar--micro-H0bVd-4-30-3 {\n height: 20px;\n width: 20px;\n}\n\n.avatar-module-Avatar--noInitials-do2M4-4-30-3 {\n cursor: default;\n}\n\n.avatar-module-Avatar--disabled-7nTRh-4-30-3 {\n cursor: not-allowed;\n}\n\n.avatar-module-Avatar--disabled-7nTRh-4-30-3::after {\n opacity: var(--opacity-16);\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n position: absolute;\n pointer-events: none;\n content: '';\n background-color: var(--white);\n}\n\n.avatar-module-Avatar--primary-MthKO-4-30-3 {\n background: var(--primary-300);\n}\n\n.avatar-module-Avatar--secondary-Fru0H-4-30-3 {\n background: var(--secondary-light);\n}\n\n.avatar-module-Avatar--success-KErql-4-30-3 {\n background: var(--success-300);\n}\n\n.avatar-module-Avatar--alert-mtBzz-4-30-3 {\n background: var(--alert-300);\n}\n\n.avatar-module-Avatar--warning-OUu3j-4-30-3 {\n background: var(--warning-300);\n}\n\n.avatar-module-Avatar--accent1-Q0YGB-4-30-3 {\n background: var(--accent1-300);\n}\n\n.avatar-module-Avatar--accent2-70bqJ-4-30-3 {\n background: var(--accent2-300);\n}\n\n.avatar-module-Avatar--accent3-GEYFR-4-30-3 {\n background: var(--accent3-300);\n}\n\n.avatar-module-Avatar--accent4-PHVye-4-30-3 {\n background: var(--accent4-300);\n}\n\n.avatar-module-Avatar-content--tiny-ZKHWg-4-30-3 {\n line-height: var(--font-height-s) !important;\n font-size: 10px !important;\n}\n\n.avatar-module-Avatar-content--micro-qs9Ij-4-30-3 {\n line-height: var(--font-height-s) !important;\n font-size: 10px !important;\n}\n\n.avatar-module-Avatar-content--primary-APpou-4-30-3 {\n color: var(--primary-darker) !important;\n}\n\n.avatar-module-Avatar-content--secondary-otLfi-4-30-3 {\n color: var(--inverse) !important;\n}\n\n.avatar-module-Avatar-content--success-Zmxy6-4-30-3 {\n color: var(--success-darker) !important;\n}\n\n.avatar-module-Avatar-content--alert-ng-FC-4-30-3 {\n color: var(--alert-darker) !important;\n}\n\n.avatar-module-Avatar-content--warning-0Tidt-4-30-3 {\n color: var(--warning-darker) !important;\n}\n\n.avatar-module-Avatar-content--accent1-f6QRu-4-30-3 {\n color: var(--accent1-darker) !important;\n}\n\n.avatar-module-Avatar-content--accent2-y3plU-4-30-3 {\n color: var(--accent2-darker) !important;\n}\n\n.avatar-module-Avatar-content--accent3-SDOJJ-4-30-3 {\n color: var(--accent3-darker) !important;\n}\n\n.avatar-module-Avatar-content--accent4-Dgi83-4-30-3 {\n color: var(--accent4-darker) !important;\n}\n\n.avatar-module-Avatar-presence-ByKmm-4-30-3 {\n position: absolute;\n border-radius: var(--border-radius-full);\n width: var(--spacing-20);\n height: var(--spacing-20);\n right: 0;\n bottom: 0;\n}\n\n.avatar-module-Avatar-presence--active-AU4X3-4-30-3 {\n background: var(--success);\n}\n\n.avatar-module-Avatar-presence--away-CDNWs-4-30-3 {\n background: var(--secondary-dark);\n}\n\n.avatar-module-Avatar-status-03nd7-4-30-3 {\n top: calc(-1 * var(--spacing-05));\n right: calc(-1 * var(--spacing-05));\n width: var(--spacing-30);\n height: var(--spacing-30);\n border-radius: var(--border-radius-full);\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n cursor: pointer;\n overflow: hidden;\n}\n";
var avatarStyles = {"Avatar":"avatar-module-Avatar-D8RSu-4-30-3","Avatar-wrapper":"avatar-module-Avatar-wrapper-EoBlf-4-30-3","Avatar-wrapper--square":"avatar-module-Avatar-wrapper--square--Pcj7-4-30-3","Avatar--square":"avatar-module-Avatar--square-lGJGN-4-30-3","Avatar--regular":"avatar-module-Avatar--regular-ewNzb-4-30-3","Avatar--tiny":"avatar-module-Avatar--tiny-Veo-U-4-30-3","Avatar--micro":"avatar-module-Avatar--micro-H0bVd-4-30-3","Avatar--noInitials":"avatar-module-Avatar--noInitials-do2M4-4-30-3","Avatar--disabled":"avatar-module-Avatar--disabled-7nTRh-4-30-3","Avatar--primary":"avatar-module-Avatar--primary-MthKO-4-30-3","Avatar--secondary":"avatar-module-Avatar--secondary-Fru0H-4-30-3","Avatar--success":"avatar-module-Avatar--success-KErql-4-30-3","Avatar--alert":"avatar-module-Avatar--alert-mtBzz-4-30-3","Avatar--warning":"avatar-module-Avatar--warning-OUu3j-4-30-3","Avatar--accent1":"avatar-module-Avatar--accent1-Q0YGB-4-30-3","Avatar--accent2":"avatar-module-Avatar--accent2-70bqJ-4-30-3","Avatar--accent3":"avatar-module-Avatar--accent3-GEYFR-4-30-3","Avatar--accent4":"avatar-module-Avatar--accent4-PHVye-4-30-3","Avatar-content--tiny":"avatar-module-Avatar-content--tiny-ZKHWg-4-30-3","Avatar-content--micro":"avatar-module-Avatar-content--micro-qs9Ij-4-30-3","Avatar-content--primary":"avatar-module-Avatar-content--primary-APpou-4-30-3","Avatar-content--secondary":"avatar-module-Avatar-content--secondary-otLfi-4-30-3","Avatar-content--success":"avatar-module-Avatar-content--success-Zmxy6-4-30-3","Avatar-content--alert":"avatar-module-Avatar-content--alert-ng-FC-4-30-3","Avatar-content--warning":"avatar-module-Avatar-content--warning-0Tidt-4-30-3","Avatar-content--accent1":"avatar-module-Avatar-content--accent1-f6QRu-4-30-3","Avatar-content--accent2":"avatar-module-Avatar-content--accent2-y3plU-4-30-3","Avatar-content--accent3":"avatar-module-Avatar-content--accent3-SDOJJ-4-30-3","Avatar-content--accent4":"avatar-module-Avatar-content--accent4-Dgi83-4-30-3","Avatar-presence":"avatar-module-Avatar-presence-ByKmm-4-30-3","Avatar-presence--active":"avatar-module-Avatar-presence--active-AU4X3-4-30-3","Avatar-presence--away":"avatar-module-Avatar-presence--away-CDNWs-4-30-3","Avatar-status":"avatar-module-Avatar-status-03nd7-4-30-3"};
styleInject(css_248z$1o);
var AvatarIcon = function AvatarIcon(props) {
var contextProp = React.useContext(AvatarContext);
var size = contextProp.size,
appearance = contextProp.appearance,
_contextProp$darkAppe = contextProp.darkAppearance,
darkAppearance = _contextProp$darkAppe === void 0 ? [] : _contextProp$darkAppe;
var iconSize = size === 'regular' ? 20 : 16;
var iconAppearance = appearance && iconAppearanceMapper[appearance] || 'inverse';
var IconClassNames = classnames(_defineProperty$1({}, avatarStyles['Avatar-content'], appearance && darkAppearance.includes(appearance)));
return /*#__PURE__*/React.createElement(Icon, _extends$2({}, props, {
size: iconSize,
appearance: iconAppearance,
className: IconClassNames
}));
};
var sizeMapper = {
regular: 32,
tiny: 24,
micro: 20
};
var AvatarImage = function AvatarImage(props) {
var children = props.children,
src = props.src;
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
error = _React$useState2[0],
setError = _React$useState2[1];
var contextProp = React.useContext(AvatarContext);
var size = contextProp.size,
appearance = contextProp.appearance,
firstName = contextProp.firstName,
lastName = contextProp.lastName,
darkAppearance = contextProp.darkAppearance;
var baseProps = extractBaseProps(props);
var initials = "".concat(firstName ? firstName.trim()[0] : '').concat(lastName ? lastName.trim()[0] : '');
var imgSize = size && sizeMapper[size];
var avatarAppearance = appearance || 'secondary';
var TextClassNames = classnames(_defineProperty$1(_defineProperty$1({}, avatarStyles["Avatar-content--".concat(size)], size), avatarStyles["Avatar-content--".concat(avatarAppearance)], avatarAppearance));
var IconClassNames = classnames(_defineProperty$1({}, avatarStyles['Avatar-content'], avatarAppearance && darkAppearance.includes(avatarAppearance)));
var iconAppearance = iconAppearanceMapper[avatarAppearance] || 'inverse';
var onError = function onError() {
setError(true);
};
if (children) {
return /*#__PURE__*/React.createElement(React.Fragment, null, children);
}
if (error) {
if (initials) {
return /*#__PURE__*/React.createElement(Text$1, _extends$2({
weight: "medium",
className: TextClassNames
}, baseProps), initials);
}
return /*#__PURE__*/React.createElement(Icon, {
"data-test": "DesignSystem-Avatar--Icon",
name: "person",
size: size === 'regular' ? 20 : 16,
appearance: iconAppearance,
className: IconClassNames
});
}
return /*#__PURE__*/React.createElement("img", _extends$2({
"data-test": "DesignSystem-Image",
src: src,
alt: ""
}, baseProps, {
height: imgSize,
width: imgSize,
onError: onError
}));
};
var initialsLength = 2;
var DefaultAppearance = 'secondary';
var colors = ['accent4', 'primary', 'accent3', 'alert', 'accent2', 'warning', 'accent1', 'success'];
var Avatar = function Avatar(props) {
var withTooltip = props.withTooltip,
tooltipPosition = props.tooltipPosition,
size = props.size,
children = props.children,
firstName = props.firstName,
lastName = props.lastName,
className = props.className,
appearance = props.appearance,
shape = props.shape,
disabled = props.disabled,
tooltipSuffix = props.tooltipSuffix,
tabIndex = props.tabIndex,
presence = props.presence,
status = props.status,
strokeColor = props.strokeColor,
role = props.role,
ariaHidden = props['aria-hidden'],
ariaLabelProp = props['aria-label'],
ariaChecked = props['aria-checked'],
ariaDisabled = props['aria-disabled'],
onClick = props.onClick,
onKeyDown = props.onKeyDown;
var baseProps = extractBaseProps(props);
var initials = children && typeof children === 'string' ? children.trim().slice(0, initialsLength) : "".concat(firstName ? firstName.trim()[0] : '').concat(lastName ? lastName.trim()[0] : '');
var getTooltipName = function getTooltipName() {
if (children && typeof children === 'string') {
return "".concat(children, " ").concat(tooltipSuffix || '');
}
return "".concat(firstName || '', " ").concat(lastName || '', " ").concat(tooltipSuffix || '') || '';
};
var AvatarAppearance = appearance || colors[(initials.charCodeAt(0) + (initials.charCodeAt(1) || 0)) % 8] || DefaultAppearance;
var isDecorative = ariaHidden === true;
var resolvedRole = isDecorative ? 'presentation' : role !== null && role !== void 0 ? role : 'img';
var ariaLabel = isDecorative ? undefined : ariaLabelProp || getTooltipName().trim() || initials || 'Avatar';
var resolvedTabIndex = isDecorative ? -1 : disabled ? -1 : tabIndex !== undefined ? tabIndex : 0;
// A decorative avatar must stay inert; interactive state/handlers only apply when a role is exposed.
var interactiveProps = isDecorative ? {} : {
'aria-checked': ariaChecked,
'aria-disabled': ariaDisabled,
onClick: onClick,
onKeyDown: onKeyDown
};
var darkAppearance = ['secondary', 'success', 'warning', 'accent1', 'accent4'];
var showPresence = presence && !disabled && size !== 'micro' && shape === 'round' && (presence === 'active' || presence === 'away');
var showStatus = status && size !== 'micro' && size === 'regular' && shape === 'round';
var AvatarClassNames = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, avatarStyles.Avatar, true), avatarStyles['Avatar--square'], shape === 'square'), avatarStyles["Avatar--".concat(size)], shape !== 'square'), avatarStyles["Avatar--".concat(AvatarAppearance)], AvatarAppearance), avatarStyles['Avatar--noInitials'], !initials || !withTooltip), avatarStyles['Avatar--disabled'], disabled), avatarStyles['Avatar--default'], !disabled), className);
var AvatarWrapperClassNames = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, avatarStyles['Avatar-wrapper'], true), avatarStyles['Avatar-wrapper--square'], shape === 'square'), avatarStyles["Avatar--".concat(size)], shape === 'square'));
var TextClassNames = classnames(_defineProperty$1(_defineProperty$1({}, avatarStyles["Avatar-content--".concat(size)], size), avatarStyles["Avatar-content--".concat(AvatarAppearance)], AvatarAppearance));
var presenceClassNames = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, avatarStyles['Avatar-presence'], presence), avatarStyles['Avatar-presence--active'], presence === 'active'), avatarStyles['Avatar-presence--away'], presence === 'away'));
var borderStyle = {
boxShadow: "0 0 0 var(--spacing-05) ".concat(strokeColor)
};
var sharedProp = {
size: size,
firstName: firstName,
lastName: lastName,
appearance: AvatarAppearance,
darkAppearance: darkAppearance
};
var renderFallbackIcon = function renderFallbackIcon() {
var iconName = shape === 'square' ? 'groups' : 'person';
var iconAppearance = iconAppearanceMapper[AvatarAppearance] || 'inverse';
return /*#__PURE__*/React.createElement(Icon, {
"data-test": "DesignSystem-Avatar--Icon",
name: iconName,
size: size === 'regular' ? 20 : 16,
appearance: iconAppearance
});
};
var renderAvatar = function renderAvatar() {
if (children && typeof children !== 'string') {
return /*#__PURE__*/React.createElement("span", {
"data-test": "DesignSystem-AvatarWrapper",
className: AvatarWrapperClassNames
}, /*#__PURE__*/React.createElement(AvatarProvider, {
value: sharedProp
}, /*#__PURE__*/React.createElement("span", _extends$2({
"data-test": "DesignSystem-Avatar"
}, baseProps, {
className: AvatarClassNames,
role: resolvedRole,
"aria-label": ariaLabel,
"aria-hidden": ariaHidden,
tabIndex: resolvedTabIndex
}, interactiveProps), children)));
}
return /*#__PURE__*/React.createElement("span", {
"data-test": "DesignSystem-AvatarWrapper",
className: AvatarWrapperClassNames
}, /*#__PURE__*/React.createElement("span", _extends$2({
"data-test": "DesignSystem-Avatar"
}, baseProps, {
className: AvatarClassNames,
role: resolvedRole,
"aria-label": ariaLabel,
"aria-hidden": ariaHidden,
tabIndex: resolvedTabIndex
}, interactiveProps), /*#__PURE__*/React.createElement(React.Fragment, null, initials && /*#__PURE__*/React.createElement(Text$1, {
weight: "medium",
className: TextClassNames
}, initials), !initials && renderFallbackIcon())));
};
var renderTooltip = function renderTooltip() {
return /*#__PURE__*/React.createElement("span", {
className: "position-relative d-inline-flex"
}, withTooltip && initials ?
/*#__PURE__*/
// ariaLabel already falls back to this same tooltip text (getTooltipName()), so the
// trigger's accessible name already conveys it — aria-hidden avoids describing it twice.
React.createElement(Tooltip, {
tooltip: getTooltipName(),
position: tooltipPosition,
triggerClass: "flex-grow-0",
"aria-hidden": "true"
}, renderAvatar()) : renderAvatar(), showPresence && /*#__PURE__*/React.createElement("span", {
"data-test": "DesignSystem-Avatar--Presence",
className: presenceClassNames,
style: borderStyle
}), showStatus && /*#__PURE__*/React.createElement("span", {
"data-test": "DesignSystem-Avatar--Status",
className: avatarStyles['Avatar-status'],
style: borderStyle
}, status));
};
return renderTooltip();
};
Avatar.displayName = 'Avatar';
Avatar.Icon = AvatarIcon;
Avatar.Image = AvatarImage;
Avatar.defaultProps = {
tooltipPosition: 'bottom',
withTooltip: true,
size: 'regular',
shape: 'round',
strokeColor: 'var(--white)'
};
var isSpaceKey = function isSpaceKey(e) {
return e.key === ' ' || e.key === 'Space' || e.key === 'Spacebar';
};
var css_248z$1n = ".avatarGroup-module-AvatarGroup-item-BdNGp-4-30-3 {\n border-radius: var(--border-radius-full);\n position: relative;\n margin-right: calc(var(--spacing-05) * -1);\n}\n\n.avatarGroup-module-AvatarGroup-item--square-ghPcd-4-30-3 {\n border-radius: var(--border-radius-10);\n}\n\n.avatarGroup-module-AvatarGroup-item--regular-zOeeU-4-30-3 {\n height: var(--spacing-80);\n}\n\n.avatarGroup-module-AvatarGroup-item--tiny-UfaCA-4-30-3 {\n height: var(--spacing-60);\n margin-right: 0;\n}\n\n.avatarGroup-module-AvatarGroup-item--micro-RJOdk-4-30-3 {\n margin-right: var(--spacing-10);\n}\n\n.avatarGroup-module-AvatarGroup-Popper-z-iGj-4-30-3 {\n overflow-y: auto;\n box-sizing: border-box;\n}\n\n.avatarGroup-module-AvatarGroup-TextWrapper-bg8co-4-30-3 {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n overflow-y: auto;\n}\n\n.avatarGroup-module-AvatarCount-wrapper-k9GxW-4-30-3 {\n border-radius: var(--border-radius-full);\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.avatarGroup-module-AvatarCount-wrapper-k9GxW-4-30-3:focus-visible {\n outline: none;\n}\n\n.avatarGroup-module-AvatarCount-wrapper-k9GxW-4-30-3:focus-visible::after {\n content: '';\n position: absolute;\n top: calc(-1 * var(--spacing-20));\n bottom: calc(-1 * var(--spacing-20));\n left: calc(-1 * var(--spacing-10));\n right: calc(-1 * var(--spacing-10));\n border: var(--border-width-05) solid var(--primary-focus);\n border-radius: var(--border-radius-10);\n pointer-events: none;\n}\n\n.avatarGroup-module-AvatarGroup-inputWrapper-VHc2A-4-30-3 {\n border-bottom: var(--border-width-2-5) solid var(--secondary-dark);\n}\n\n.avatarGroup-module-AvatarGroup-inputWrapper-VHc2A-4-30-3:focus-within {\n border-bottom: var(--border-width-2-5) solid var(--primary);\n}\n\n.avatarGroup-module-AvatarGroup-input-pXgb--4-30-3 {\n min-width: unset !important;\n background: transparent;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n height: calc(var(--spacing-80) + var(--spacing-10)) !important;\n}\n\n.avatarGroup-module-AvatarGroup-input-pXgb--4-30-3,\n.avatarGroup-module-AvatarGroup-input-pXgb--4-30-3:focus-within {\n border: unset !important;\n box-shadow: none !important;\n outline: none !important;\n}\n\n.avatarGroup-module-AvatarGroup-input-pXgb--4-30-3:hover {\n background-color: var(--secondary-lightest);\n}\n\n.avatarGroup-module-AvatarGroup-listItem--disabled-Ln1fi-4-30-3 {\n cursor: not-allowed;\n pointer-events: auto !important;\n}\n\n@media (forced-colors: active) {\n .avatarGroup-module-AvatarGroup-input-pXgb--4-30-3:focus-within {\n outline: var(--border-width-05) solid Highlight !important;\n outline-offset: var(--spacing-05);\n }\n}\n";
var styles$1b = {"AvatarGroup-item":"avatarGroup-module-AvatarGroup-item-BdNGp-4-30-3","AvatarGroup-item--square":"avatarGroup-module-AvatarGroup-item--square-ghPcd-4-30-3","AvatarGroup-item--regular":"avatarGroup-module-AvatarGroup-item--regular-zOeeU-4-30-3","AvatarGroup-item--tiny":"avatarGroup-module-AvatarGroup-item--tiny-UfaCA-4-30-3","AvatarGroup-item--micro":"avatarGroup-module-AvatarGroup-item--micro-RJOdk-4-30-3","AvatarGroup-Popper":"avatarGroup-module-AvatarGroup-Popper-z-iGj-4-30-3","AvatarGroup-TextWrapper":"avatarGroup-module-AvatarGroup-TextWrapper-bg8co-4-30-3","AvatarCount-wrapper":"avatarGroup-module-AvatarCount-wrapper-k9GxW-4-30-3","AvatarGroup-inputWrapper":"avatarGroup-module-AvatarGroup-inputWrapper-VHc2A-4-30-3","AvatarGroup-input":"avatarGroup-module-AvatarGroup-input-pXgb--4-30-3","AvatarGroup-listItem--disabled":"avatarGroup-module-AvatarGroup-listItem--disabled-Ln1fi-4-30-3"};
styleInject(css_248z$1n);
var AvatarCount = function AvatarCount(props) {
var hiddenAvatarCount = props.hiddenAvatarCount,
avatarStyle = props.avatarStyle,
_props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size,
on = props.on,
open = props.open,
moreAvatarsLabel = props.moreAvatarsLabel;
var ContentClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, avatarStyles['Avatar-content'], true), avatarStyles['Avatar-content--tiny'], size === 'tiny'), avatarStyles['Avatar-content--micro'], size === 'micro'));
var AvatarVariantsClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, avatarStyles.Avatar, true), avatarStyles["Avatar--".concat(size)], size), avatarStyles["Avatar--secondary"], true), 'cursor-default', true), 'cursor-pointer', on === 'click'));
return /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-AvatarGroup--TriggerAvatar",
className: styles$1b['AvatarCount-wrapper'],
style: avatarStyle,
tabIndex: 0,
role: "button",
"aria-haspopup": "listbox",
"aria-expanded": open,
"aria-label": "+".concat(hiddenAvatarCount, " ").concat(moreAvatarsLabel),
onKeyDown: function onKeyDown(event) {
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
event.currentTarget.click();
}
}
}, /*#__PURE__*/React.createElement("span", {
"data-test": "DesignSystem-AvatarGroup--TriggerAvatarVariants",
className: AvatarVariantsClass
}, /*#__PURE__*/React.createElement(Text$1, {
className: ContentClass
}, "+".concat(hiddenAvatarCount))));
};
var Avatars = function Avatars(props) {
var avatarList = props.avatarList,
avatarStyle = props.avatarStyle,
tooltipPosition = props.tooltipPosition,
size = props.size;
var avatars = avatarList.map(function (item, index) {
var icon = item.icon,
image = item.image,
shape = item.shape;
var avatarShape = shape === 'square' ? 'square' : 'round';
var GroupClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$1b["AvatarGroup-item"], true), styles$1b["AvatarGroup-item--square"], avatarShape === 'square'), styles$1b["AvatarGroup-item--tiny"], size === 'tiny'), styles$1b["AvatarGroup-item--micro"], size === 'micro'), styles$1b["AvatarGroup-item--regular"], size === 'regular'));
var newAvatarStyle = _objectSpread2(_objectSpread2({}, avatarStyle), {}, {
zIndex: avatarList.length - index
});
return /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-AvatarGroup--Avatar",
className: GroupClass,
style: newAvatarStyle,
key: index
}, /*#__PURE__*/React.createElement(Avatar, _extends$2({
size: size,
shape: avatarShape,
withTooltip: true,
tooltipPosition: tooltipPosition
}, item), image || icon));
});
return avatars;
};
var AvatarGroupEmptyState = function AvatarGroupEmptyState(props) {
var height = props.height,
title = props.title,
description = props.description;
return /*#__PURE__*/React.createElement("div", {
className: "d-flex flex-column justify-content-center align-items-center",
style: {
height: height ? height - 4 : ''
},
"data-test": "DesignSystem-AvatarGroup--EmptyState"
}, title && /*#__PURE__*/React.createElement(Text$1, {
className: "text-align-center mb-3",
weight: "strong"
}, title), description && /*#__PURE__*/React.createElement(Text$1, {
className: "text-align-center mb-6",
weight: "medium",
size: "small",
appearance: "subtle"
}, description));
};
var AvatarGroupInput = function AvatarGroupInput(props) {
var inputClassName = classnames(_defineProperty$1({
'w-100': true
}, styles$1b['AvatarGroup-input'], true));
return /*#__PURE__*/React.createElement("div", {
className: styles$1b['AvatarGroup-inputWrapper']
}, /*#__PURE__*/React.createElement(Input, _extends$2({
icon: "search",
className: inputClassName,
"data-test": "DesignSystem-AvatarGroup--Input"
}, props)));
};
var AvatarOptionItem = function AvatarOptionItem(props) {
var avatarData = props.avatarData;
var _avatarData$firstName = avatarData.firstName,
firstName = _avatarData$firstName === void 0 ? '' : _avatarData$firstName,
_avatarData$lastName = avatarData.lastName,
lastName = _avatarData$lastName === void 0 ? '' : _avatarData$lastName,
_avatarData$tooltipSu = avatarData.tooltipSuffix,
tooltipSuffix = _avatarData$tooltipSu === void 0 ? '' : _avatarData$tooltipSu,
disabled = avatarData.disabled,
image = avatarData.image,
icon = avatarData.icon;
var name = "".concat(firstName, " ").concat(lastName, " ").concat(tooltipSuffix);
var elementRef = React.useRef(null);
var triggerClassName = classnames(_defineProperty$1(_defineProperty$1({}, 'cursor-not-allowed', disabled), 'ellipsis--noWrap', true));
var itemClassName = classnames(_defineProperty$1(_defineProperty$1({}, 'AvatarGroup-listItem--disabled', disabled), 'cursor-default', !disabled));
return /*#__PURE__*/React.createElement(Listbox.Item, {
disabled: disabled,
className: itemClassName,
tagName: "li",
"data-test": "DesignSystem-AvatarGroup--Item"
}, /*#__PURE__*/React.createElement(Avatar, _extends$2({}, avatarData, {
withTooltip: false,
"aria-hidden": true
}), image || icon), /*#__PURE__*/React.createElement(Tooltip, {
showOnTruncation: true,
tooltip: name,
elementRef: elementRef,
triggerClass: triggerClassName,
position: "right"
}, /*#__PURE__*/React.createElement(Text$1, {
ref: elementRef,
"data-test": "DesignSystem-AvatarGroup--Text",
className: "ellipsis--noWrap ml-4"
}, name)));
};
var AvatarPopperBody = function AvatarPopperBody(props) {
var hiddenAvatarList = props.hiddenAvatarList,
popperRenderer = props.popperRenderer,
maxHeight = props.maxHeight,
minHeight = props.minHeight,
width = props.width,
popperClassName = props.popperClassName,
withSearch = props.withSearch,
searchPlaceholder = props.searchPlaceholder,
searchComparator = props.searchComparator,
size = props.size;
var _React$useState = React.useState(''),
_React$useState2 = _slicedToArray(_React$useState, 2),
searchValue = _React$useState2[0],
setSearchValue = _React$useState2[1];
var _React$useState3 = React.useState(hiddenAvatarList),
_React$useState4 = _slicedToArray(_React$useState3, 2),
searchList = _React$useState4[0],
setSearchList = _React$useState4[1];
var onSearchHandler = function onSearchHandler(event) {
var inputValue = event.target.value;
setSearchValue(inputValue);
var list = hiddenAvatarList.filter(function (avatarData) {
var _firstName$toLowerCas, _lastName$toLowerCase;
var firstName = avatarData.firstName,
lastName = avatarData.lastName;
if (searchComparator) {
return searchComparator(inputValue, avatarData);
}
return (firstName === null || firstName === void 0 || (_firstName$toLowerCas = firstName.toLowerCase()) === null || _firstName$toLowerCas === void 0 ? void 0 : _firstName$toLowerCas.startsWith(inputValue.toLowerCase())) || (lastName === null || lastName === void 0 || (_lastName$toLowerCase = lastName.toLowerCase()) === null || _lastName$toLowerCase === void 0 ? void 0 : _lastName$toLowerCase.startsWith(inputValue.toLowerCase()));
});
setSearchList(list);
};
var onClearHandler = function onClearHandler() {
setSearchValue('');
setSearchList(hiddenAvatarList);
};
var popperClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$1b['AvatarGroup-Popper'], true), 'py-3', !withSearch), 'pb-3', withSearch), popperClassName);
var searchInputHeight = 36;
var searchBorder = 1;
var customStyle = {
width: width,
minHeight: minHeight,
maxHeight: withSearch ? maxHeight - searchInputHeight - searchBorder : maxHeight
};
if (popperRenderer) {
return popperRenderer(hiddenAvatarList);
}
return /*#__PURE__*/React.createElement("div", {
style: {
width: customStyle.width
},
"data-test": "DesignSystem-AvatarGroup--Popover"
}, withSearch && /*#__PURE__*/React.createElement(AvatarGroupInput, {
value: searchValue,
placeholder: searchPlaceholder,
onChange: onSearchHandler,
onClear: onClearHandler
}), /*#__PURE__*/React.createElement("div", {
style: customStyle,
className: popperClass
}, searchList.length === 0 && /*#__PURE__*/React.createElement(AvatarGroupEmptyState, {
height: customStyle.maxHeight,
title: "No users found",
description: "Try modifying your search to find what you are looking for."
}), !!searchList.length && /*#__PURE__*/React.createElement(Listbox, {
tagName: "ul",
showDivider: false,
type: "description",
size: size === 'micro' ? 'tight' : 'compressed',
"data-test": "DesignSystem-AvatarGroup--List"
}, searchList.map(function (item, index) {
return /*#__PURE__*/React.createElement(AvatarOptionItem, {
key: index,
avatarData: _objectSpread2(_objectSpread2({}, item), {}, {
size: size
})
});
}))));
};
var AvatarGroup = function AvatarGroup(props) {
var max = props.max,
borderColor = props.borderColor,
popoverOptions = props.popoverOptions,
tooltipPosition = props.tooltipPosition,
list = props.list,
className = props.className,
size = props.size,
ariaLabel = props['aria-label'],
ariaLabelledBy = props['aria-labelledby'],
_props$moreAvatarsLab = props.moreAvatarsLabel,
moreAvatarsLabel = _props$moreAvatarsLab === void 0 ? 'more' : _props$moreAvatarsLab;
var popperRenderer = popoverOptions.popperRenderer,
_popoverOptions$maxHe = popoverOptions.maxHeight,
maxHeight = _popoverOptions$maxHe === void 0 ? 256 : _popoverOptions$maxHe,
_popoverOptions$width = popoverOptions.width,
width = _popoverOptions$width === void 0 ? 176 : _popoverOptions$width,
minHeight = popoverOptions.minHeight,
_popoverOptions$posit = popoverOptions.position,
position = _popoverOptions$posit === void 0 ? 'bottom' : _popoverOptions$posit,
_popoverOptions$on = popoverOptions.on,
on = _popoverOptions$on === void 0 ? 'hover' : _popoverOptions$on,
_popoverOptions$appen = popoverOptions.appendToBody,
appendToBody = _popoverOptions$appen === void 0 ? true : _popoverOptions$appen,
withSearch = popoverOptions.withSearch,
searchPlaceholder = popoverOptions.searchPlaceholder,
searchComparator = popoverOptions.searchComparator,
_popoverOptions$poppe = popoverOptions.popperClassName,
popperClassName = _popoverOptions$poppe === void 0 ? '' : _popoverOptions$poppe;
var baseProps = extractBaseProps(props);
var hiddenAvatarCount = list.length > max ? Math.min(list.length - max, 99) : 0;
var style = {
backgroundColor: "".concat(borderColor),
boxShadow: "0 0 0 calc(var(--spacing-2-5) + var(--spacing-05)) ".concat(borderColor)
};
var tinyAvatarStyle = {
boxShadow: "0 0 0 var(--spacing-05) ".concat(borderColor)
};
var avatarStyle = size !== 'regular' ? _objectSpread2(_objectSpread2({}, style), tinyAvatarStyle) : style;
var avatarList = list.length === 3 ? list : list.slice(0, max);
var showOverflowTrigger = list.length - max > 0 && list.length !== 3;
var AvatarGroupClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$1b['AvatarGroup'], true), 'd-inline-flex', true), className);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
open = _React$useState2[0],
setOpen = _React$useState2[1];
React.useEffect(function () {
if (!showOverflowTrigger) setOpen(false);
}, [showOverflowTrigger]);
var avatarPopperBodyProps = {
hiddenAvatarList: _toConsumableArray(list).slice(max, list.length),
popperRenderer: popperRenderer,
maxHeight: maxHeight,
minHeight: minHeight,
width: width,
popperClassName: popperClassName,
withSearch: withSearch,
searchPlaceholder: searchPlaceholder,
searchComparator: searchComparator,
size: size
};
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-AvatarGroup"
}, baseProps, {
className: AvatarGroupClass,
role: "group",
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy
}), /*#__PURE__*/React.createElement(Avatars, {
size: size,
avatarList: avatarList,
avatarStyle: avatarStyle,
tooltipPosition: tooltipPosition
}), showOverflowTrigger && /*#__PURE__*/React.createElement(Popover, {
on: on,
open: open,
onToggle: setOpen,
trigger: /*#__PURE__*/React.createElement(AvatarCount, {
on: on,
size: size,
hiddenAvatarCount: hiddenAvatarCount,
avatarStyle: avatarStyle,
open: open,
moreAvatarsLabel: moreAvatarsLabel
}),
position: position,
appendToBody: appendToBody,
offset: "medium"
}, /*#__PURE__*/React.createElement(AvatarPopperBody, avatarPopperBodyProps)));
};
AvatarGroup.displayName = 'AvatarGroup';
AvatarGroup.defaultProps = {
max: 2,
tooltipPosition: 'bottom',
borderColor: 'white',
popoverOptions: {},
size: 'regular',
moreAvatarsLabel: 'more'
};
var css_248z$1m = "@keyframes backdrop-module-backdrop-open-UtELd-4-30-3 {\n from {\n opacity: 0;\n }\n to {\n opacity: var(--opacity-16);\n }\n}\n\n@keyframes backdrop-module-backdrop-close-s0fHr-4-30-3 {\n from {\n opacity: var(--opacity-16);\n }\n to {\n opacity: 0;\n }\n}\n\n.backdrop-module-Backdrop-HFSff-4-30-3 {\n background-color: rgba(26, 26, 26, 0.64);\n height: 100vh;\n width: 100vw;\n position: fixed;\n left: 0;\n top: 0;\n display: none;\n align-items: center;\n z-index: 1000;\n overflow: auto;\n flex-direction: column;\n justify-content: center;\n touch-action: none;\n visibility: hidden;\n}\n\n.backdrop-module-Backdrop--open-H0Qal-4-30-3 {\n display: flex;\n visibility: visible;\n}\n\n.backdrop-module-Backdrop-animation--open-uyxvi-4-30-3 {\n animation: backdrop-module-backdrop-open-UtELd-4-30-3 var(--duration--fast-02) var(--entrance-expressive-curve);\n}\n\n.backdrop-module-Backdrop-animation--close-Fe-PA-4-30-3 {\n animation: backdrop-module-backdrop-close-s0fHr-4-30-3 var(--duration--fast-02) var(--exit-expressive-curve);\n}\n";
var styles$1a = {"Backdrop":"backdrop-module-Backdrop-HFSff-4-30-3","Backdrop--open":"backdrop-module-Backdrop--open-H0Qal-4-30-3","Backdrop-animation--open":"backdrop-module-Backdrop-animation--open-uyxvi-4-30-3","backdrop-open":"backdrop-module-backdrop-open-UtELd-4-30-3","Backdrop-animation--close":"backdrop-module-Backdrop-animation--close-Fe-PA-4-30-3","backdrop-close":"backdrop-module-backdrop-close-s0fHr-4-30-3"};
styleInject(css_248z$1m);
var useEffect$1 = React.useEffect,
useState$2 = React.useState;
/**
* ### Note:
* ** The backdrop component is used to provide emphasis on a particular element or parts of it. <br/>**
* The backdrop signals to the user of a state change within the application and can be used for creating loaders, dialogs, and more. <br/>
* In its simplest form, the backdrop component will add a dimmed layer over your application.
*/
var Backdrop = function Backdrop(props) {
var className = props.className;
var baseProps = extractBaseProps(props);
var _useState = useState$2(null),
_useState2 = _slicedToArray(_useState, 2),
savedBodyOverflow = _useState2[0],
setBodyOverflow = _useState2[1];
var _React$useState = React.useState(props.open),
_React$useState2 = _slicedToArray(_React$useState, 2),
open = _React$useState2[0],
setOpen = _React$useState2[1];
var _React$useState3 = React.useState(props.open),
_React$useState4 = _slicedToArray(_React$useState3, 2),
animate = _React$useState4[0],
setAnimate = _React$useState4[1];
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$1a.Backdrop, true), styles$1a['Backdrop--open'], open), styles$1a['Backdrop-animation--open'], animate), styles$1a['Backdrop-animation--close'], !animate), className);
var disableBodyScroll = function disableBodyScroll() {
document.body.style.setProperty('overflow', 'hidden', 'important');
};
var enableBodyScroll = function enableBodyScroll() {
document.body.style.overflow = savedBodyOverflow || '';
setBodyOverflow(null);
};
useEffect$1(function () {
if (props.open) {
setBodyOverflow(document.body.style.overflow);
disableBodyScroll();
setOpen(true);
setAnimate(true);
}
if (!props.open) {
window.setTimeout(function () {
setOpen(false);
}, 120);
setAnimate(false);
enableBodyScroll();
}
return function () {
enableBodyScroll();
};
}, [props.open]);
var BackdropElement = /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-Backdrop",
"data-layer": true,
"data-opened": open
}, baseProps, {
className: classes,
style: {
zIndex: props.zIndex
}
})), document.body);
return BackdropElement;
};
Backdrop.displayName = 'Backdrop';
var css_248z$1l = "/* badge */\n\n.badge-module-Badge-axSjP-4-30-3 {\n /* 160px */\n max-width: calc(var(--spacing-40) * 10);\n /* truncate */\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: var(--font-size-s);\n line-height: var(--font-height-s);\n text-transform: uppercase;\n padding-right: var(--spacing-10);\n padding-left: var(--spacing-10);\n padding-top: var(--spacing-05);\n padding-bottom: var(--spacing-05);\n border-radius: var(--border-radius-10);\n display: inline-block;\n box-sizing: border-box;\n font-weight: var(--font-weight-bold);\n cursor: default;\n}\n\n.badge-module-Badge--primary-Bzypo-4-30-3 {\n background: var(--primary);\n color: var(--white);\n}\n\n.badge-module-Badge--secondary-WIu5q-4-30-3 {\n background: var(--secondary-light);\n color: var(--inverse);\n}\n\n.badge-module-Badge--success-M-hkD-4-30-3 {\n background: var(--success);\n color: var(--white);\n}\n\n.badge-module-Badge--alert-zeKFm-4-30-3 {\n background: var(--alert);\n color: var(--white);\n}\n\n.badge-module-Badge--warning-CaLfS-4-30-3 {\n background: var(--warning);\n color: var(--warning-darker);\n}\n\n.badge-module-Badge--accent1-yRHhk-4-30-3 {\n background: var(--accent1);\n color: var(--white);\n}\n\n.badge-module-Badge--accent2-RXIlu-4-30-3 {\n background: var(--accent2);\n color: var(--white);\n}\n\n.badge-module-Badge--accent3-Ahofy-4-30-3 {\n background: var(--accent3);\n color: var(--white);\n}\n\n.badge-module-Badge--accent4-adMko-4-30-3 {\n background: var(--accent4);\n color: var(--white);\n}\n\n.badge-module-Badge--subtle-primary-egSuo-4-30-3 {\n color: var(--primary-darker);\n background: var(--primary-lightest);\n}\n\n.badge-module-Badge--subtle-secondary-ZZUuU-4-30-3 {\n color: var(--text);\n background: var(--secondary-light);\n}\n\n.badge-module-Badge--subtle-success-bZ7d6-4-30-3 {\n color: var(--success-darker);\n background: var(--success-lightest);\n}\n\n.badge-module-Badge--subtle-alert-Iu9LY-4-30-3 {\n color: var(--alert-darker);\n background: var(--alert-lightest);\n}\n\n.badge-module-Badge--subtle-warning-PERDW-4-30-3 {\n color: var(--warning-darker);\n background: var(--warning-300);\n}\n\n.badge-module-Badge--subtle-accent1-M14Ub-4-30-3 {\n color: var(--accent1-darker);\n background: var(--accent1-lightest);\n}\n\n.badge-module-Badge--subtle-accent2-e1DOS-4-30-3 {\n color: var(--accent2-darker);\n background: var(--accent2-lightest);\n}\n\n.badge-module-Badge--subtle-accent3-30YqY-4-30-3 {\n color: var(--accent3-darker);\n background: var(--accent3-lightest);\n}\n\n.badge-module-Badge--subtle-accent4-wHQ23-4-30-3 {\n color: var(--accent4-darker);\n background: var(--accent4-lightest);\n}\n";
var badgeStyles = {"Badge":"badge-module-Badge-axSjP-4-30-3","Badge--primary":"badge-module-Badge--primary-Bzypo-4-30-3","Badge--secondary":"badge-module-Badge--secondary-WIu5q-4-30-3","Badge--success":"badge-module-Badge--success-M-hkD-4-30-3","Badge--alert":"badge-module-Badge--alert-zeKFm-4-30-3","Badge--warning":"badge-module-Badge--warning-CaLfS-4-30-3","Badge--accent1":"badge-module-Badge--accent1-yRHhk-4-30-3","Badge--accent2":"badge-module-Badge--accent2-RXIlu-4-30-3","Badge--accent3":"badge-module-Badge--accent3-Ahofy-4-30-3","Badge--accent4":"badge-module-Badge--accent4-adMko-4-30-3","Badge--subtle-primary":"badge-module-Badge--subtle-primary-egSuo-4-30-3","Badge--subtle-secondary":"badge-module-Badge--subtle-secondary-ZZUuU-4-30-3","Badge--subtle-success":"badge-module-Badge--subtle-success-bZ7d6-4-30-3","Badge--subtle-alert":"badge-module-Badge--subtle-alert-Iu9LY-4-30-3","Badge--subtle-warning":"badge-module-Badge--subtle-warning-PERDW-4-30-3","Badge--subtle-accent1":"badge-module-Badge--subtle-accent1-M14Ub-4-30-3","Badge--subtle-accent2":"badge-module-Badge--subtle-accent2-e1DOS-4-30-3","Badge--subtle-accent3":"badge-module-Badge--subtle-accent3-30YqY-4-30-3","Badge--subtle-accent4":"badge-module-Badge--subtle-accent4-wHQ23-4-30-3"};
styleInject(css_248z$1l);
var css_248z$1k = ".pageHeader-module-PageHeader-YgqsC-4-30-3 {\n width: 100%;\n}\n\n.pageHeader-module-PageHeader-wrapper-DOQ8C-4-30-3 {\n padding: var(--spacing-20) var(--spacing-40) var(--spacing-20) 0;\n}\n\n.pageHeader-module-PageHeader-wrapper--withTabs-T6lAs-4-30-3 {\n padding-bottom: 0;\n}\n\n.pageHeader-module-PageHeader-wrapper--withTabs-T6lAs-4-30-3 .pageHeader-module-TabsWrapper-header-H-fcc-4-30-3 {\n border-bottom: none;\n}\n\n.pageHeader-module-PageHeader-bottom--withTabs-dc1u7-4-30-3 {\n margin-top: var(--spacing-30);\n}\n\n.pageHeader-module-PageHeader-YgqsC-4-30-3 .pageHeader-module-Row-beZ5Z-4-30-3 {\n width: 100%;\n}\n\n.pageHeader-module-PageHeader-titleWrapper-QLuCf-4-30-3 {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n padding-right: var(--spacing-20);\n}\n\n.pageHeader-module-PageHeader-titleWrapper-QLuCf-4-30-3 .pageHeader-module-Badge-2T-RV-4-30-3 {\n margin-left: var(--spacing-30);\n flex-shrink: 0;\n}\n\n.pageHeader-module-PageHeader-statusWrapper-RYrwh-4-30-3 {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n}\n\n.pageHeader-module-PageHeader-statusWrapper-RYrwh-4-30-3 .pageHeader-module-StatusHint-bRjnp-4-30-3 {\n margin-right: var(--spacing-20);\n}\n\n.pageHeader-module-PageHeader-navigationWrapper-6p7EF-4-30-3 {\n margin-top: var(--spacing-30);\n}\n\n.pageHeader-module-PageHeader-navigationWrapper--noMargin-zdkZt-4-30-3 {\n margin-top: 0;\n}\n\n.pageHeader-module-PageHeader-title-mgCZA-4-30-3 {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.pageHeader-module-PageHeader-actionsWrapper-tF81M-4-30-3 {\n display: flex;\n justify-content: flex-end;\n padding-left: var(--spacing-20);\n}\n\n/* =====================================================\n Responsive main header row\n ===================================================== */\n\n/* Base: flex layout — used by all variants */\n.pageHeader-module-PageHeader-row-9SWPh-4-30-3 {\n display: flex;\n flex-wrap: wrap;\n align-items: start;\n width: 100%;\n}\n\n.pageHeader-module-PageHeader-group--title-Xxnou-4-30-3 {\n flex: 1 1 auto;\n min-width: 0;\n order: 1;\n}\n\n/* Center-nav group — navigation/stepper in center position */\n.pageHeader-module-PageHeader-group--center-sr6xA-4-30-3 {\n flex: 0 0 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0 var(--spacing-20);\n min-width: 0;\n order: 2;\n}\n\n/* Actions / right-side group */\n.pageHeader-module-PageHeader-group--actions-50gKz-4-30-3 {\n flex: 0 0 auto;\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n align-items: center;\n padding-left: var(--spacing-20);\n row-gap: var(--spacing-30);\n order: 3;\n}\n\n/* Default (full): CSS Grid for true 3-col centering */\n.pageHeader-module-PageHeader-row--withCenter-TRFcb-4-30-3 {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n align-items: start;\n}\n\n/* Ghost: center nav stays in the grid for measurement but is invisible and out of flow.\n Used when collision detection moves the nav to PageHeader-bottom. */\n.pageHeader-module-PageHeader-group--center--ghost-1eK5--4-30-3 {\n position: absolute;\n visibility: hidden;\n pointer-events: none;\n}\n\n/* All stacked: flex marker on the row + full-width children */\n.pageHeader-module-PageHeader-row--allStacked-7ozlo-4-30-3 {\n display: flex;\n flex-wrap: wrap;\n}\n\n.pageHeader-module-PageHeader-group--title--stacked-nsh-X-4-30-3 {\n flex: 0 0 100%;\n order: 1;\n}\n\n.pageHeader-module-PageHeader-group--actions--stacked-rbym4-4-30-3 {\n flex: 0 0 100%;\n order: 2;\n padding-left: 0;\n padding-top: var(--spacing-10);\n justify-content: flex-start;\n}\n\n/* =====================================================\n Level 1: inter-section spacing when right group wraps\n ===================================================== */\n\n/* At < 576 px, the actions group sits between title and nav/stepper/tabs.\n For level 1 headers that have actions, increase the gap to 12 px so all\n three sections (title, actions, nav) have consistent breathing room. */\n@media (max-width: 575px) {\n .pageHeader-module-PageHeader-group--actions--level1Responsive-XNCs--4-30-3 {\n padding-top: var(--spacing-30);\n }\n\n .pageHeader-module-PageHeader-bottom--level1Responsive-gfU-W-4-30-3 {\n margin-top: var(--spacing-30);\n }\n\n .pageHeader-module-PageHeader-navigationWrapper--noMarginSm-fbqg9-4-30-3 {\n margin-top: 0;\n }\n}\n";
var styles$19 = {"PageHeader":"pageHeader-module-PageHeader-YgqsC-4-30-3","PageHeader-wrapper":"pageHeader-module-PageHeader-wrapper-DOQ8C-4-30-3","PageHeader-wrapper--withTabs":"pageHeader-module-PageHeader-wrapper--withTabs-T6lAs-4-30-3","TabsWrapper-header":"pageHeader-module-TabsWrapper-header-H-fcc-4-30-3","PageHeader-bottom--withTabs":"pageHeader-module-PageHeader-bottom--withTabs-dc1u7-4-30-3","Row":"pageHeader-module-Row-beZ5Z-4-30-3","PageHeader-titleWrapper":"pageHeader-module-PageHeader-titleWrapper-QLuCf-4-30-3","Badge":"pageHeader-module-Badge-2T-RV-4-30-3","PageHeader-statusWrapper":"pageHeader-module-PageHeader-statusWrapper-RYrwh-4-30-3","StatusHint":"pageHeader-module-StatusHint-bRjnp-4-30-3","PageHeader-navigationWrapper":"pageHeader-module-PageHeader-navigationWrapper-6p7EF-4-30-3","PageHeader-navigationWrapper--noMargin":"pageHeader-module-PageHeader-navigationWrapper--noMargin-zdkZt-4-30-3","PageHeader-title":"pageHeader-module-PageHeader-title-mgCZA-4-30-3","PageHeader-actionsWrapper":"pageHeader-module-PageHeader-actionsWrapper-tF81M-4-30-3","PageHeader-row":"pageHeader-module-PageHeader-row-9SWPh-4-30-3","PageHeader-group--title":"pageHeader-module-PageHeader-group--title-Xxnou-4-30-3","PageHeader-group--center":"pageHeader-module-PageHeader-group--center-sr6xA-4-30-3","PageHeader-group--actions":"pageHeader-module-PageHeader-group--actions-50gKz-4-30-3","PageHeader-row--withCenter":"pageHeader-module-PageHeader-row--withCenter-TRFcb-4-30-3","PageHeader-group--center--ghost":"pageHeader-module-PageHeader-group--center--ghost-1eK5--4-30-3","PageHeader-row--allStacked":"pageHeader-module-PageHeader-row--allStacked-7ozlo-4-30-3","PageHeader-group--title--stacked":"pageHeader-module-PageHeader-group--title--stacked-nsh-X-4-30-3","PageHeader-group--actions--stacked":"pageHeader-module-PageHeader-group--actions--stacked-rbym4-4-30-3","PageHeader-group--actions--level1Responsive":"pageHeader-module-PageHeader-group--actions--level1Responsive-XNCs--4-30-3","PageHeader-bottom--level1Responsive":"pageHeader-module-PageHeader-bottom--level1Responsive-gfU-W-4-30-3","PageHeader-navigationWrapper--noMarginSm":"pageHeader-module-PageHeader-navigationWrapper--noMarginSm-fbqg9-4-30-3"};
styleInject(css_248z$1k);
var _excluded$1z = ["appearance", "children", "subtle", "className"];
var Badge = function Badge(props) {
var appearance = props.appearance,
children = props.children,
subtle = props.subtle,
className = props.className,
rest = _objectWithoutProperties(props, _excluded$1z);
var baseProps = extractBaseProps(props);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, badgeStyles.Badge, true), styles$19.Badge, true), badgeStyles["Badge--".concat(appearance)], appearance && !subtle), badgeStyles["Badge--subtle-".concat(appearance)], subtle), className);
return /*#__PURE__*/React.createElement("span", _extends$2({
"data-test": "DesignSystem-Badge"
}, baseProps, {
className: classes
}, rest), children);
};
Badge.displayName = 'Badge';
Badge.defaultProps = {
appearance: 'secondary'
};
var css_248z$1j = "/* breadcrumbs */\n\n.breadcrumbs-module-Breadcrumbs-Uy-AK-4-30-3 {\n display: flex;\n align-items: center;\n}\n\n.breadcrumbs-module-Breadcrumbs-item-M3i9B-4-30-3 {\n display: flex;\n align-items: center;\n}\n\n.breadcrumbs-module-Breadcrumbs-link-aJJRG-4-30-3 {\n /* 160px */\n max-width: calc(var(--spacing-40) * 10);\n margin: var(--spacing-10) 0;\n}\n\n.breadcrumbs-module-Breadcrumbs-link-aJJRG-4-30-3:active {\n color: var(--inverse);\n}\n\n.breadcrumbs-module-Breadcrumbs-item-M3i9B-4-30-3:first-child .breadcrumbs-module-Breadcrumbs-link-aJJRG-4-30-3 {\n margin-left: 0;\n}\n\n.breadcrumbs-module-Breadcrumbs-itemSeparator-d2S2j-4-30-3 {\n color: var(--secondary);\n font-size: var(--font-size-s);\n line-height: var(--font-height-s);\n width: var(--spacing-10);\n margin: 0 var(--spacing-10);\n}\n\n.breadcrumbs-module-Breadcrumbs-dropdown--CUKk-4-30-3 {\n height: var(--font-height-m);\n}\n\n.breadcrumbs-module-Breadcrumbs-Button-FybbI-4-30-3:focus {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n";
var styles$18 = {"Breadcrumbs":"breadcrumbs-module-Breadcrumbs-Uy-AK-4-30-3","Breadcrumbs-item":"breadcrumbs-module-Breadcrumbs-item-M3i9B-4-30-3","Breadcrumbs-link":"breadcrumbs-module-Breadcrumbs-link-aJJRG-4-30-3","Breadcrumbs-itemSeparator":"breadcrumbs-module-Breadcrumbs-itemSeparator-d2S2j-4-30-3","Breadcrumbs-dropdown":"breadcrumbs-module-Breadcrumbs-dropdown--CUKk-4-30-3","Breadcrumbs-Button":"breadcrumbs-module-Breadcrumbs-Button-FybbI-4-30-3"};
styleInject(css_248z$1j);
var RenderLink = function RenderLink(_ref) {
var item = _ref.item,
onClick = _ref.onClick;
var onClickHandler = function onClickHandler(ev) {
if (onClick) {
ev.preventDefault();
onClick(item.link);
}
};
var linkClassName = classnames(_defineProperty$1(_defineProperty$1({}, styles$18['Breadcrumbs-link'], true), 'ellipsis--noWrap', true));
return /*#__PURE__*/React.createElement(Link, {
className: linkClassName,
"data-test": "DesignSystem-Breadcrumbs-link",
href: item.link,
onClick: onClickHandler,
appearance: "subtle",
size: "tiny"
}, item.label);
};
var RenderItem = function RenderItem(_ref2) {
var item = _ref2.item,
onClick = _ref2.onClick,
index = _ref2.index,
showTooltip = _ref2.showTooltip;
return /*#__PURE__*/React.createElement("div", {
key: index,
className: styles$18['Breadcrumbs-item'],
"data-test": "DesignSystem-Breadcrumbs-item"
}, showTooltip ?
/*#__PURE__*/
// The link's own text is item.label too (just CSS-truncated), so its accessible name
// already conveys this — aria-hidden avoids describing it a second time.
React.createElement(Tooltip, {
tooltip: item.label,
position: "bottom",
"aria-hidden": "true"
}, /*#__PURE__*/React.createElement(RenderLink, {
item: item,
onClick: onClick
})) : /*#__PURE__*/React.createElement(RenderLink, {
item: item,
onClick: onClick
}), /*#__PURE__*/React.createElement("span", {
className: styles$18['Breadcrumbs-itemSeparator']
}, "/"));
};
var renderDropdown = function renderDropdown(list, onClick) {
var options = list.map(function (item) {
return {
label: item.label,
value: item.link
};
});
var customTrigger = function customTrigger() {
return /*#__PURE__*/React.createElement(Button, {
type: "button",
size: "tiny",
appearance: "transparent",
icon: "more_horiz_filled",
largeIcon: true,
"aria-label": "Show more breadcrumbs",
className: styles$18['Breadcrumbs-Button'],
"data-test": "DesignSystem-Breadcrumbs--Button"
});
};
return /*#__PURE__*/React.createElement(Dropdown, {
className: styles$18['Breadcrumbs-dropdown'],
triggerSize: 'tiny',
triggerOptions: {
customTrigger: customTrigger
},
options: options,
menu: true,
onChange: function onChange(selected) {
if (onClick) {
onClick(selected);
}
}
});
};
var Breadcrumbs = function Breadcrumbs(props) {
var list = props.list,
onClick = props.onClick,
className = props.className,
showTooltip = props.showTooltip;
var baseProps = extractBaseProps(props);
var BreadcrumbClass = classnames(_defineProperty$1({}, styles$18.Breadcrumbs, true), className);
return /*#__PURE__*/React.createElement("nav", _extends$2({
"data-test": "DesignSystem-Breadcrumbs"
}, baseProps, {
className: BreadcrumbClass,
"aria-label": "Breadcrumb"
}), list.length <= 4 ? list.map(function (item, index) {
return /*#__PURE__*/React.createElement(RenderItem, {
key: index,
item: item,
onClick: onClick,
showTooltip: showTooltip
});
}) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RenderItem, {
item: list[0],
onClick: onClick,
showTooltip: showTooltip
}), /*#__PURE__*/React.createElement("div", {
className: "d-flex align-items-center"
}, renderDropdown(list.slice(1, list.length - 1), onClick), /*#__PURE__*/React.createElement("span", {
className: styles$18['Breadcrumbs-itemSeparator']
}, "/")), /*#__PURE__*/React.createElement(RenderItem, {
item: list[list.length - 1],
onClick: onClick,
showTooltip: showTooltip
})));
};
var css_248z$1i = ".button-module-Button-xxWB4-4-30-3 {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n position: relative;\n vertical-align: middle;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: 0;\n border-radius: var(--border-radius-10);\n\n padding-top: var(--spacing-20);\n padding-bottom: var(--spacing-20);\n\n text-align: center;\n font-family: var(--font-family);\n font-weight: var(--font-weight-normal);\n font-size: var(--font-size);\n line-height: var(--font-height-s);\n color: var(--text-white);\n\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.button-module-Button--disabled-3Kfao-4-30-3 {\n cursor: not-allowed;\n}\n\n.button-module-Button-xxWB4-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.button-module-Button--iconAlign-right-tzezJ-4-30-3 {\n flex-direction: row-reverse;\n}\n\n.button-module-Button-regularIcon--left-eiSbs-4-30-3 {\n margin-left: calc(-1 * var(--spacing-05));\n}\n\n.button-module-Button-regularIcon--right-VaPke-4-30-3 {\n margin-right: calc(-1 * var(--spacing-05));\n}\n\n.button-module-Button--tiny-ftCQP-4-30-3 {\n height: var(--spacing-60);\n padding-right: var(--spacing-20);\n padding-left: var(--spacing-20);\n padding-top: var(--spacing-10);\n padding-bottom: var(--spacing-10);\n font-size: var(--font-size-s);\n font-weight: var(--font-weight-medium);\n}\n\n.button-module-Button--tinySquare-JSE77-4-30-3 {\n width: var(--spacing-60);\n}\n\n.button-module-Button--regular-Vs8An-4-30-3 {\n height: var(--spacing-80);\n padding-right: var(--spacing-30);\n padding-left: var(--spacing-30);\n}\n\n.button-module-Button--regularSquare-VG89r-4-30-3 {\n width: var(--spacing-80);\n}\n\n.button-module-Button--large-inVqO-4-30-3 {\n height: 40px;\n padding-right: var(--spacing-40);\n padding-left: var(--spacing-40);\n\n line-height: var(--font-height-m);\n font-size: var(--font-size-m);\n}\n\n.button-module-Button--largeSquare-puIze-4-30-3 {\n width: 40px;\n}\n\n.button-module-Button--tinySquare-JSE77-4-30-3 .button-module-Button-icon-2Qw-d-4-30-3,\n.button-module-Button--largeSquare-puIze-4-30-3 .button-module-Button-icon-2Qw-d-4-30-3,\n.button-module-Button--tinySquare-JSE77-4-30-3 .button-module-Spinner-f7Izb-4-30-3,\n.button-module-Button--largeSquare-puIze-4-30-3 .button-module-Spinner-f7Izb-4-30-3 {\n padding-left: var(--spacing-05);\n padding-right: var(--spacing-05);\n}\n\n.button-module-Button--expanded-j33fV-4-30-3 {\n width: 100%;\n}\n\n.button-module-Button-icon-2Qw-d-4-30-3 {\n line-height: inherit;\n display: flex;\n align-items: center;\n}\n\n.button-module-Button-icon--left-UoJq5-4-30-3 {\n margin-right: var(--spacing-15);\n}\n\n.button-module-Button-icon--right-4iJWc-4-30-3 {\n margin-left: var(--spacing-15);\n}\n\n.button-module-Button--basic-99RJE-4-30-3 {\n background: var(--secondary-light);\n color: var(--inverse);\n}\n\n.button-module-Button--basic-99RJE-4-30-3:hover {\n background: var(--secondary);\n}\n\n.button-module-Button--basic-99RJE-4-30-3:active {\n background: var(--secondary-dark);\n}\n\n.button-module-Button--basic-disabled-VTodO-4-30-3 {\n background: var(--secondary-lighter);\n color: var(--inverse-lightest);\n}\n\n.button-module-Button--primary-beKmU-4-30-3 {\n background: var(--primary);\n}\n\n.button-module-Button--primary-beKmU-4-30-3:hover {\n background: var(--primary-dark);\n}\n\n.button-module-Button--primary-beKmU-4-30-3:active {\n background: var(--primary-darker);\n}\n\n.button-module-Button--primary-disabled-q4Gct-4-30-3 {\n background: var(--primary-lighter);\n}\n\n.button-module-Button-infoIcon--primary-Voj8D-4-30-3 {\n color: var(--text-link);\n}\n\n.button-module-Button--success-UppQk-4-30-3 {\n background: var(--primary);\n}\n\n.button-module-Button--success-UppQk-4-30-3:hover {\n background: var(--primary-dark);\n}\n\n.button-module-Button--success-UppQk-4-30-3:active {\n background: var(--primary-darker);\n}\n\n.button-module-Button--success-disabled-dJO00-4-30-3 {\n background: var(--primary-lighter);\n}\n\n.button-module-Button-infoIcon--success-cmCsw-4-30-3 {\n color: var(--text-link);\n}\n\n.button-module-Button--alert-H5mRH-4-30-3 {\n background: var(--alert);\n}\n\n.button-module-Button--alert-H5mRH-4-30-3:hover {\n background: var(--alert-dark);\n}\n\n.button-module-Button--alert-H5mRH-4-30-3:active {\n background: var(--alert-darker);\n}\n\n.button-module-Button--alert-disabled-Ved-C-4-30-3 {\n background: var(--alert-lighter);\n}\n\n.button-module-Button-infoIcon--alert-ZdPD5-4-30-3 {\n color: var(--alert);\n}\n\n.button-module-Button--transparent-r8FxI-4-30-3 {\n background: transparent;\n color: var(--inverse);\n}\n\n.button-module-Button--transparent-r8FxI-4-30-3:hover {\n background: var(--secondary);\n}\n\n.button-module-Button--transparent-r8FxI-4-30-3:active {\n background: var(--secondary-dark);\n}\n\n.button-module-Button--transparent-r8FxI-4-30-3:focus-visible:active {\n background: var(--secondary-dark);\n}\n\n.button-module-Button--transparent-disabled-a45jn-4-30-3 {\n background: transparent;\n color: var(--inverse-lightest);\n}\n\n.button-module-Button-spinner-l5KLk-4-30-3 {\n display: flex;\n position: absolute;\n z-index: 1;\n}\n\n.button-module-Button--selected-vkcfl-4-30-3 {\n background: var(--primary-ultra-light);\n color: var(--primary-dark);\n box-shadow: inset 0 0 0 2px var(--primary);\n}\n\n.button-module-Button--selected-vkcfl-4-30-3:hover {\n background: var(--primary-lightest);\n}\n\n.button-module-Button--selected-vkcfl-4-30-3:active {\n background: var(--primary-lighter);\n color: var(--primary-darker);\n box-shadow: inset 0 0 0 2px var(--primary-dark);\n}\n\n.button-module-Button--selected-vkcfl-4-30-3:focus-visible {\n background: var(--primary-ultra-light);\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n box-shadow: inset 0 0 0 var(--border-width-05) var(--primary);\n}\n\n.button-module-Button--selected-vkcfl-4-30-3:focus-visible:active {\n background: var(--primary-lighter);\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n box-shadow: inset 0 0 0 var(--border-width-05) var(--primary-dark);\n}\n\n.button-module-Button--selected-disabled-w9ByQ-4-30-3 {\n background: var(--primary-ultra-light);\n color: var(--primary-lighter);\n box-shadow: inset 0 0 0 2px var(--primary-lightest);\n}\n\n.button-module-Button-text--hidden-iCXLu-4-30-3 {\n visibility: hidden;\n}\n\n.button-module-Button-text-A8xeT-4-30-3 {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.button-module-Button-infoIconWrapper-dUlkA-4-30-3 {\n position: absolute;\n top: -4px;\n right: -4px;\n width: var(--spacing-30);\n height: var(--spacing-30);\n box-sizing: border-box;\n border-radius: var(--border-radius-full);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n border: var(--border-width-2-5) solid var(--secondary-lightest);\n pointer-events: none;\n}\n\n.button-module-Button-infoIconWrapper--transparent-myFrQ-4-30-3 {\n border: none;\n background: transparent;\n top: var(--spacing-2-5);\n right: var(--spacing-2-5);\n}\n\n.button-module-Button-infoIconWrapper--iconOnly-transparent-Z0pEg-4-30-3 {\n top: var(--spacing-2-5);\n right: var(--spacing-2-5);\n}\n\n.button-module-Button-infoIconWrapper-outlined--basic-fQkKz-4-30-3 {\n background: var(--secondary-lightest);\n}\n\n.button-module-Button-infoIconWrapper-outlined--primary-uhoBf-4-30-3 {\n background: var(--primary-ultra-light);\n}\n\n.button-module-Button-infoIconWrapper-outlined--alert-fj7nm-4-30-3 {\n background: var(--alert-ultra-light);\n}\n\n.button-module-Button-infoIconWrapper--basic-aScUb-4-30-3 {\n background: var(--secondary-lighter);\n}\n\n.button-module-Button-infoIconWrapper--primary-lK9Rs-4-30-3,\n.button-module-Button-infoIconWrapper--success-MgjVX-4-30-3 {\n background: var(--primary-lightest);\n}\n\n.button-module-Button-infoIconWrapper--alert-z8cyc-4-30-3 {\n background: var(--alert-lightest);\n}\n\n.button-module-Button-infoIcon-YjV4x-4-30-3 {\n color: var(--text-subtle);\n}\n\n/* outlined button styles */\n\n.button-module-Button-outlined--basic-YdB4n-4-30-3 {\n color: var(--inverse);\n background: transparent;\n box-shadow: inset 0 0 0 1px var(--secondary);\n}\n\n.button-module-Button-outlined--basic-YdB4n-4-30-3:hover {\n background: var(--secondary-lighter);\n box-shadow: inset 0 0 0 1px var(--inverse-lightest);\n}\n\n.button-module-Button-outlined--basic-YdB4n-4-30-3:active {\n background: var(--secondary);\n box-shadow: inset 0 0 0 1px var(--inverse-lightest);\n}\n\n.button-module-Button-outlined--basic-YdB4n-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);\n}\n\n.button-module-Button-outlined--basic-disabled-mW-GC-4-30-3 {\n color: var(--inverse-lightest);\n background: transparent;\n box-shadow: inset 0 0 0 1px var(--secondary);\n}\n\n.button-module-Button-outlined--selected-M-y6e-4-30-3 {\n background: var(--primary-ultra-light);\n color: var(--primary-dark);\n box-shadow: inset 0 0 0 2px var(--primary);\n}\n\n.button-module-Button-outlined--selected-M-y6e-4-30-3:hover {\n background: var(--primary-lightest);\n box-shadow: inset 0 0 0 2px var(--primary);\n}\n\n.button-module-Button-outlined--selected-M-y6e-4-30-3:active {\n background: var(--primary-lighter);\n color: var(--primary-darker);\n box-shadow: inset 0 0 0 2px var(--primary-dark);\n}\n\n.button-module-Button-outlined--selected-M-y6e-4-30-3:focus-visible {\n color: var(--primary-dark);\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n box-shadow: inset 0 0 0 var(--border-width-05) var(--primary);\n}\n\n.button-module-Button-outlined--selected-M-y6e-4-30-3:focus-visible:active {\n background: var(--primary-lighter);\n color: var(--primary-darker);\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n box-shadow: inset 0 0 0 var(--border-width-05) var(--primary-dark);\n}\n\n.button-module-Button-outlined--selected-disabled-CqlPp-4-30-3 {\n background: var(--primary-ultra-light);\n color: var(--primary-lighter);\n box-shadow: inset 0 0 0 2px var(--primary-lightest);\n}\n\n.button-module-Button-outlined--primary-7yL2I-4-30-3 {\n background: transparent;\n box-shadow: inset 0 0 0 1px var(--primary);\n color: var(--primary);\n}\n\n.button-module-Button-outlined--primary-7yL2I-4-30-3:hover {\n background: var(--primary-ultra-light);\n box-shadow: inset 0 0 0 1px var(--primary-dark);\n color: var(--primary-dark);\n}\n\n.button-module-Button-outlined--primary-7yL2I-4-30-3:active {\n background: var(--primary-lightest);\n box-shadow: inset 0 0 0 1px var(--primary-dark);\n color: var(--primary-dark);\n}\n\n.button-module-Button-outlined--primary-7yL2I-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary);\n}\n\n.button-module-Button-outlined--primary-disabled-lu4xl-4-30-3 {\n background: transparent;\n color: var(--primary-lighter);\n box-shadow: inset 0 0 0 1px var(--primary-lighter);\n}\n\n.button-module-Button-infoIcon-outlined--primary-Z69y7-4-30-3 {\n color: var(--text-link);\n}\n\n.button-module-Button-outlined--alert-gnncZ-4-30-3 {\n background: transparent;\n box-shadow: inset 0 0 0 1px var(--alert);\n color: var(--alert);\n}\n\n.button-module-Button-outlined--alert-gnncZ-4-30-3:hover {\n background: var(--alert-ultra-light);\n box-shadow: inset 0 0 0 1px var(--alert-dark);\n color: var(--alert-dark);\n}\n\n.button-module-Button-outlined--alert-gnncZ-4-30-3:active {\n background: var(--alert-lightest);\n box-shadow: inset 0 0 0 1px var(--alert-dark);\n color: var(--alert-dark);\n}\n\n.button-module-Button-outlined--alert-gnncZ-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n box-shadow: inset 0 0 0 var(--border-width-2-5) var(--alert);\n}\n\n.button-module-Button-outlined--alert-disabled-ttK9A-4-30-3 {\n background: transparent;\n color: var(--alert-lighter);\n box-shadow: inset 0 0 0 1px var(--alert-lighter);\n}\n\n.button-module-Button-infoIcon-outlined--alert-7TL4--4-30-3 {\n color: var(--alert);\n}\n\n.button-module-Button-srOnly-4lL8R-4-30-3 {\n position: absolute;\n width: var(--spacing-2-5);\n height: var(--spacing-2-5);\n padding: 0;\n margin: calc(-1 * var(--spacing-2-5));\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n@media (forced-colors: active) {\n .button-module-Button--basic-99RJE-4-30-3,\n .button-module-Button--primary-beKmU-4-30-3,\n .button-module-Button--success-UppQk-4-30-3,\n .button-module-Button--alert-H5mRH-4-30-3,\n .button-module-Button--transparent-r8FxI-4-30-3 {\n border: var(--border-width-2-5) solid ButtonText;\n }\n\n .button-module-Button--basic-disabled-VTodO-4-30-3,\n .button-module-Button--primary-disabled-q4Gct-4-30-3,\n .button-module-Button--success-disabled-dJO00-4-30-3,\n .button-module-Button--alert-disabled-Ved-C-4-30-3,\n .button-module-Button--transparent-disabled-a45jn-4-30-3 {\n border: var(--border-width-2-5) solid GrayText;\n }\n\n /* Selected state: inset box-shadow acts as the visible border */\n .button-module-Button--selected-vkcfl-4-30-3,\n .button-module-Button--selected-vkcfl-4-30-3:hover,\n .button-module-Button--selected-vkcfl-4-30-3:active,\n .button-module-Button--selected-disabled-w9ByQ-4-30-3 {\n border: var(--border-width-05) solid ButtonText;\n box-shadow: none;\n }\n\n .button-module-Button--selected-vkcfl-4-30-3:focus-visible,\n .button-module-Button--selected-vkcfl-4-30-3:focus-visible:active {\n outline: var(--border-width-05) solid Highlight;\n box-shadow: none;\n }\n\n /* Outlined variants: inset box-shadow is the only visible border */\n .button-module-Button-outlined--basic-YdB4n-4-30-3,\n .button-module-Button-outlined--basic-YdB4n-4-30-3:hover,\n .button-module-Button-outlined--basic-YdB4n-4-30-3:active,\n .button-module-Button-outlined--basic-disabled-mW-GC-4-30-3 {\n border: var(--border-width-2-5) solid ButtonText;\n box-shadow: none;\n }\n\n .button-module-Button-outlined--basic-YdB4n-4-30-3:focus-visible {\n outline: var(--border-width-05) solid Highlight;\n box-shadow: none;\n }\n\n .button-module-Button-outlined--selected-M-y6e-4-30-3,\n .button-module-Button-outlined--selected-M-y6e-4-30-3:hover,\n .button-module-Button-outlined--selected-M-y6e-4-30-3:active,\n .button-module-Button-outlined--selected-disabled-CqlPp-4-30-3 {\n border: var(--border-width-05) solid ButtonText;\n box-shadow: none;\n }\n\n .button-module-Button-outlined--selected-M-y6e-4-30-3:focus-visible,\n .button-module-Button-outlined--selected-M-y6e-4-30-3:focus-visible:active {\n outline: var(--border-width-05) solid Highlight;\n box-shadow: none;\n }\n\n .button-module-Button-outlined--primary-7yL2I-4-30-3,\n .button-module-Button-outlined--primary-7yL2I-4-30-3:hover,\n .button-module-Button-outlined--primary-7yL2I-4-30-3:active,\n .button-module-Button-outlined--primary-disabled-lu4xl-4-30-3 {\n border: var(--border-width-2-5) solid ButtonText;\n box-shadow: none;\n }\n\n .button-module-Button-outlined--primary-7yL2I-4-30-3:focus-visible {\n outline: var(--border-width-05) solid Highlight;\n box-shadow: none;\n }\n\n .button-module-Button-outlined--alert-gnncZ-4-30-3,\n .button-module-Button-outlined--alert-gnncZ-4-30-3:hover,\n .button-module-Button-outlined--alert-gnncZ-4-30-3:active,\n .button-module-Button-outlined--alert-disabled-ttK9A-4-30-3 {\n border: var(--border-width-2-5) solid ButtonText;\n box-shadow: none;\n }\n\n .button-module-Button-outlined--alert-gnncZ-4-30-3:focus-visible {\n outline: var(--border-width-05) solid Highlight;\n box-shadow: none;\n }\n}\n";
var buttonStyles = {"Button":"button-module-Button-xxWB4-4-30-3","Button--disabled":"button-module-Button--disabled-3Kfao-4-30-3","Button--iconAlign-right":"button-module-Button--iconAlign-right-tzezJ-4-30-3","Button-regularIcon--left":"button-module-Button-regularIcon--left-eiSbs-4-30-3","Button-regularIcon--right":"button-module-Button-regularIcon--right-VaPke-4-30-3","Button--tiny":"button-module-Button--tiny-ftCQP-4-30-3","Button--tinySquare":"button-module-Button--tinySquare-JSE77-4-30-3","Button--regular":"button-module-Button--regular-Vs8An-4-30-3","Button--regularSquare":"button-module-Button--regularSquare-VG89r-4-30-3","Button--large":"button-module-Button--large-inVqO-4-30-3","Button--largeSquare":"button-module-Button--largeSquare-puIze-4-30-3","Button-icon":"button-module-Button-icon-2Qw-d-4-30-3","Spinner":"button-module-Spinner-f7Izb-4-30-3","Button--expanded":"button-module-Button--expanded-j33fV-4-30-3","Button-icon--left":"button-module-Button-icon--left-UoJq5-4-30-3","Button-icon--right":"button-module-Button-icon--right-4iJWc-4-30-3","Button--basic":"button-module-Button--basic-99RJE-4-30-3","Button--basic-disabled":"button-module-Button--basic-disabled-VTodO-4-30-3","Button--primary":"button-module-Button--primary-beKmU-4-30-3","Button--primary-disabled":"button-module-Button--primary-disabled-q4Gct-4-30-3","Button-infoIcon--primary":"button-module-Button-infoIcon--primary-Voj8D-4-30-3","Button--success":"button-module-Button--success-UppQk-4-30-3","Button--success-disabled":"button-module-Button--success-disabled-dJO00-4-30-3","Button-infoIcon--success":"button-module-Button-infoIcon--success-cmCsw-4-30-3","Button--alert":"button-module-Button--alert-H5mRH-4-30-3","Button--alert-disabled":"button-module-Button--alert-disabled-Ved-C-4-30-3","Button-infoIcon--alert":"button-module-Button-infoIcon--alert-ZdPD5-4-30-3","Button--transparent":"button-module-Button--transparent-r8FxI-4-30-3","Button--transparent-disabled":"button-module-Button--transparent-disabled-a45jn-4-30-3","Button-spinner":"button-module-Button-spinner-l5KLk-4-30-3","Button--selected":"button-module-Button--selected-vkcfl-4-30-3","Button--selected-disabled":"button-module-Button--selected-disabled-w9ByQ-4-30-3","Button-text--hidden":"button-module-Button-text--hidden-iCXLu-4-30-3","Button-text":"button-module-Button-text-A8xeT-4-30-3","Button-infoIconWrapper":"button-module-Button-infoIconWrapper-dUlkA-4-30-3","Button-infoIconWrapper--transparent":"button-module-Button-infoIconWrapper--transparent-myFrQ-4-30-3","Button-infoIconWrapper--iconOnly-transparent":"button-module-Button-infoIconWrapper--iconOnly-transparent-Z0pEg-4-30-3","Button-infoIconWrapper-outlined--basic":"button-module-Button-infoIconWrapper-outlined--basic-fQkKz-4-30-3","Button-infoIconWrapper-outlined--primary":"button-module-Button-infoIconWrapper-outlined--primary-uhoBf-4-30-3","Button-infoIconWrapper-outlined--alert":"button-module-Button-infoIconWrapper-outlined--alert-fj7nm-4-30-3","Button-infoIconWrapper--basic":"button-module-Button-infoIconWrapper--basic-aScUb-4-30-3","Button-infoIconWrapper--primary":"button-module-Button-infoIconWrapper--primary-lK9Rs-4-30-3","Button-infoIconWrapper--success":"button-module-Button-infoIconWrapper--success-MgjVX-4-30-3","Button-infoIconWrapper--alert":"button-module-Button-infoIconWrapper--alert-z8cyc-4-30-3","Button-infoIcon":"button-module-Button-infoIcon-YjV4x-4-30-3","Button-outlined--basic":"button-module-Button-outlined--basic-YdB4n-4-30-3","Button-outlined--basic-disabled":"button-module-Button-outlined--basic-disabled-mW-GC-4-30-3","Button-outlined--selected":"button-module-Button-outlined--selected-M-y6e-4-30-3","Button-outlined--selected-disabled":"button-module-Button-outlined--selected-disabled-CqlPp-4-30-3","Button-outlined--primary":"button-module-Button-outlined--primary-7yL2I-4-30-3","Button-outlined--primary-disabled":"button-module-Button-outlined--primary-disabled-lu4xl-4-30-3","Button-infoIcon-outlined--primary":"button-module-Button-infoIcon-outlined--primary-Z69y7-4-30-3","Button-outlined--alert":"button-module-Button-outlined--alert-gnncZ-4-30-3","Button-outlined--alert-disabled":"button-module-Button-outlined--alert-disabled-ttK9A-4-30-3","Button-infoIcon-outlined--alert":"button-module-Button-infoIcon-outlined--alert-7TL4--4-30-3","Button-srOnly":"button-module-Button-srOnly-4lL8R-4-30-3"};
styleInject(css_248z$1i);
var uidGenerator = function uidGenerator() {
var dt = new Date().getTime();
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (dt + Math.random() * 16) % 16 | 0;
dt = Math.floor(dt / 16);
var s = (c === 'x' ? r : r & 0x3 | 0x8).toString(16);
return s;
});
return uuid;
};
var _excluded$1y = ["size", "appearance", "styleType", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className", "tooltip", "iconType", "onClick", "onKeyDown", "aria-describedby"];
var sizeMapping$3 = {
tiny: 12,
regular: 16,
large: 20
};
// eslint-disable-next-line react/display-name
var ButtonElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
var _classNames;
var _props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size,
_props$appearance = props.appearance,
appearance = _props$appearance === void 0 ? 'basic' : _props$appearance,
_props$styleType = props.styleType,
styleType = _props$styleType === void 0 ? 'filled' : _props$styleType,
_props$iconAlign = props.iconAlign,
iconAlign = _props$iconAlign === void 0 ? 'left' : _props$iconAlign,
_props$tabIndex = props.tabIndex,
tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
largeIcon = props.largeIcon,
type = props.type,
children = props.children,
icon = props.icon,
expanded = props.expanded,
selected = props.selected,
loading = props.loading,
disabled = props.disabled,
className = props.className,
tooltip = props.tooltip,
iconType = props.iconType,
onClick = props.onClick,
onKeyDown = props.onKeyDown,
ariaDescribedBy = props['aria-describedby'],
rest = _objectWithoutProperties(props, _excluded$1y);
var buttonLabel = children ? String(children) : undefined;
var isIconOnly = icon && !children;
var tooltipIdRef = React.useRef(null);
if (tooltipIdRef.current === null && tooltip && !isIconOnly) {
tooltipIdRef.current = "Button-tooltip-".concat(uidGenerator());
}
var computedAriaDescribedBy = [ariaDescribedBy, tooltip && !isIconOnly ? tooltipIdRef.current : undefined].filter(Boolean).join(' ') || undefined;
var computedAriaLabel = props['aria-label'] || (loading && buttonLabel ? buttonLabel : undefined) || (isIconOnly && tooltip ? tooltip : undefined);
var isOutlined = styleType === 'outlined' && appearance !== 'transparent';
var isBasicOrTransparent = appearance === 'basic' || appearance === 'transparent';
var getSpinnerAppearance = function getSpinnerAppearance() {
if (appearance === 'alert') return 'alert';
if (appearance === 'primary' || appearance === 'success') return 'primary';
return 'secondary';
};
var spinnerAppearance = getSpinnerAppearance();
var isDisabledProp = disabled || loading;
var useAriaDisabled = Boolean(isDisabledProp && tooltip);
var nativeDisabled = useAriaDisabled ? undefined : isDisabledProp;
var renderedType = useAriaDisabled && (type === 'submit' || !type) ? 'button' : type;
var isDisabled = nativeDisabled || useAriaDisabled;
var buttonClass = classnames((_classNames = {}, _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_classNames, buttonStyles['Button'], true), buttonStyles['Button--expanded'], expanded), buttonStyles["Button--".concat(size)], size), buttonStyles["Button--".concat(size, "Square")], !children), buttonStyles["Button--".concat(appearance)], appearance && !isOutlined && !isDisabled), buttonStyles["Button--".concat(appearance, "-disabled")], appearance && !isOutlined && isDisabled), buttonStyles['Button--selected'], selected && isBasicOrTransparent && !isOutlined && !isDisabled), buttonStyles['Button--selected-disabled'], selected && isBasicOrTransparent && !isOutlined && isDisabled), buttonStyles["Button--iconAlign-".concat(iconAlign)], children && iconAlign), buttonStyles['Button--disabled'], isDisabled), _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_classNames, buttonStyles["Button-outlined--".concat(appearance)], appearance && isOutlined && !isDisabled), buttonStyles["Button-outlined--".concat(appearance, "-disabled")], appearance && isOutlined && isDisabled), buttonStyles['Button-outlined--selected'], selected && isBasicOrTransparent && isOutlined && !isDisabled), buttonStyles['Button-outlined--selected-disabled'], selected && isBasicOrTransparent && isOutlined && isDisabled)), className);
var iconClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, buttonStyles['Button-icon'], true), buttonStyles["Button-icon--".concat(iconAlign)], children && iconAlign), "mr-3", children && iconAlign === 'left' && size === 'tiny'), "ml-3", children && iconAlign === 'right' && size === 'tiny'), buttonStyles["Button-regularIcon--".concat(iconAlign)], children && iconAlign && size === 'regular' && !expanded));
var buttonTextClass = classnames(_defineProperty$1(_defineProperty$1({}, buttonStyles['Button-text'], true), buttonStyles['Button-text--hidden'], true));
var infoIconClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, buttonStyles['Button-infoIcon'], true), buttonStyles["Button-infoIcon--".concat(appearance)], appearance && !isOutlined), buttonStyles["Button-infoIcon-outlined--".concat(appearance)], appearance && isOutlined));
var infoIconWrapperClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, buttonStyles['Button-infoIconWrapper'], true), buttonStyles["Button-infoIconWrapper--".concat(appearance)], appearance && !isOutlined), buttonStyles["Button-infoIconWrapper-outlined--".concat(appearance)], appearance && isOutlined), buttonStyles['Button-infoIconWrapper--iconOnly'], !children), buttonStyles['Button-infoIconWrapper--iconOnly-transparent'], !children && appearance === 'transparent'));
var handleKeyDown = function handleKeyDown(event) {
if (useAriaDisabled && (event.key === 'Enter' || isSpaceKey(event))) {
event.preventDefault();
event.stopPropagation();
return;
}
if (onKeyDown) {
onKeyDown(event);
}
};
var handleClick = function handleClick(event) {
if (useAriaDisabled) {
event.preventDefault();
event.stopPropagation();
return;
}
if (onClick) {
onClick(event);
}
};
var spinnerSize = size === 'large' && children ? 'small' : 'xsmall';
var iconSize = size === 'tiny' ? 14 : largeIcon && !children ? sizeMapping$3[size] + 4 : sizeMapping$3[size];
var showInfoAffordance = disabled && tooltip && !loading;
return /*#__PURE__*/React.createElement("button", _extends$2({
"data-test": "DesignSystem-Button",
ref: ref,
type: renderedType,
className: buttonClass,
disabled: nativeDisabled,
"aria-disabled": useAriaDisabled ? true : undefined,
"aria-describedby": computedAriaDescribedBy,
tabIndex: tabIndex,
"aria-busy": loading || undefined,
"aria-label": computedAriaLabel,
"aria-pressed": typeof selected === 'boolean' && isBasicOrTransparent ? selected : undefined,
onClick: handleClick,
onKeyDown: handleKeyDown
}, rest), loading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spinner, {
size: spinnerSize,
appearance: spinnerAppearance,
"data-test": "DesignSystem-Button--Spinner",
className: buttonStyles['Button-spinner']
}), /*#__PURE__*/React.createElement(Text$1, {
className: buttonTextClass
}, children || '')) : /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("div", {
className: iconClass,
"data-test": "DesignSystem-Button--Icon-Wrapper"
}, /*#__PURE__*/React.createElement(Icon, {
"data-test": "DesignSystem-Button--Icon",
name: icon,
type: iconType,
size: iconSize
})), children && /*#__PURE__*/React.createElement("span", {
className: buttonStyles['Button-text']
}, children), showInfoAffordance && /*#__PURE__*/React.createElement("span", {
className: infoIconWrapperClass
}, /*#__PURE__*/React.createElement(Icon, {
name: "info_outline",
type: "outlined",
size: 12,
className: infoIconClass,
"aria-hidden": "true",
"data-test": "DesignSystem-Button--Info-Icon"
}))), tooltip && !isIconOnly && /*#__PURE__*/React.createElement("span", {
id: tooltipIdRef.current,
className: buttonStyles['Button-srOnly']
}, tooltip));
});
var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
var tooltip = props.tooltip,
expanded = props.expanded;
var triggerClass = expanded ? 'w-100' : 'flex-grow-0';
return tooltip ? /*#__PURE__*/React.createElement(Tooltip, {
tooltip: tooltip,
"aria-hidden": "true",
triggerClass: triggerClass
}, /*#__PURE__*/React.createElement(ButtonElement, _extends$2({}, props, {
ref: ref
}))) : /*#__PURE__*/React.createElement(ButtonElement, _extends$2({}, props, {
ref: ref
}));
});
Button.displayName = 'Button';
var css_248z$1h = "/* calendar */\n\n.calendar-module-Calendar-wrapper-bKSSk-4-30-3 {\n display: flex;\n flex-wrap: wrap;\n}\n\n.calendar-module-Calendar-7PxjX-4-30-3 {\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n}\n\n.calendar-module-Calendar--small-A1CLy-4-30-3 {\n padding: var(--spacing-30);\n padding-bottom: var(--spacing-20);\n width: 212px;\n}\n\n.calendar-module-Calendar-date--small-CcxQJ-4-30-3 {\n height: 248px;\n}\n\n.calendar-module-Calendar-month--small-wkwYD-4-30-3 {\n height: 200px;\n}\n\n.calendar-module-Calendar-year--small-RdwBQ-4-30-3 {\n height: 200px;\n}\n\n.calendar-module-Calendar--large-sSoxU-4-30-3 {\n padding-top: var(--spacing-40);\n padding-left: var(--spacing-40);\n padding-right: var(--spacing-40);\n padding-bottom: var(--spacing-30);\n width: 316px;\n}\n\n.calendar-module-Calendar-date--large-1ZITF-4-30-3 {\n height: 324px;\n}\n\n.calendar-module-Calendar-month--large-5g0oP-4-30-3 {\n height: 276px;\n}\n\n.calendar-module-Calendar-year--large-jELMf-4-30-3 {\n height: 272px;\n}\n\n.calendar-module-Calendar-header--large-z3JIz-4-30-3 {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n padding-bottom: var(--spacing-30);\n}\n\n.calendar-module-Calendar-header--small-dWwwm-4-30-3 {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n padding-bottom: var(--spacing-20);\n}\n\n.calendar-module-Calendar-headerIcon-nsCVk-4-30-3 {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n\n.calendar-module-Calendar-headerIcon--prev-1RFOJ-4-30-3 {\n left: 0;\n}\n\n.calendar-module-Calendar-headerIcon--next-ympYc-4-30-3 {\n right: 0;\n}\n\n.calendar-module-Calendar-headerContent-Ik37t-4-30-3 {\n display: flex;\n white-space: nowrap;\n cursor: pointer;\n padding-top: var(--spacing-10);\n padding-bottom: var(--spacing-10);\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n\n.calendar-module-Calendar-headerButton-c6Ucj-4-30-3 {\n /* Reset button aesthetics */\n background: transparent;\n border: none;\n padding: 0;\n margin: 0;\n font-family: inherit;\n color: inherit;\n cursor: pointer;\n\n /* Maintain the existing Flexbox layout structure */\n display: flex;\n justify-content: center;\n align-items: center;\n\n /* Rounded corners for better focus outline appearance */\n border-radius: var(--border-radius-10);\n}\n\n.calendar-module-Calendar-headerButton-c6Ucj-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: 1px;\n}\n\n.calendar-module-Calendar-headerButton-c6Ucj-4-30-3:focus:not(:focus-visible) {\n outline: none;\n}\n\n.calendar-module-Calendar-body-d-N5F-4-30-3 {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n justify-content: space-between;\n}\n\n.calendar-module-Calendar-valueRow-85rKl-4-30-3 {\n display: flex;\n justify-content: space-between;\n padding-top: var(--spacing-05);\n padding-bottom: var(--spacing-05);\n}\n\n.calendar-module-Calendar-valueWrapper-H46Ub-4-30-3 {\n display: inline-flex;\n flex: 1 0 0;\n justify-content: center;\n position: relative;\n}\n\n.calendar-module-Calendar-monthValueWrapper-jHs9P-4-30-3,\n.calendar-module-Calendar-yearValueWrapper-2xlz7-4-30-3 {\n display: inline-flex;\n justify-content: center;\n position: relative;\n}\n\n.calendar-module-Calendar-valueWrapper--inRange-fV605-4-30-3 {\n background: var(--primary-ultra-light);\n}\n\n.calendar-module-Calendar-valueWrapper--inRange-fV605-4-30-3 .calendar-module-Calendar-inRangeValue-VoWIb-4-30-3:hover {\n background: var(--primary-lightest);\n border-color: transparent;\n}\n\n.calendar-module-Calendar-valueWrapper--inRange-fV605-4-30-3 .calendar-module-Calendar-inRangeValue-VoWIb-4-30-3:active {\n background: var(--primary-lighter);\n border-color: transparent;\n}\n\n.calendar-module-Calendar-valueWrapper--inRangeError-MfWMS-4-30-3 {\n background: var(--alert-lightest);\n}\n\n.calendar-module-Calendar-valueWrapper--start-z-bt7-4-30-3 {\n background: linear-gradient(90deg, white 50%, var(--primary-ultra-light) 50%);\n border-radius: var(--border-radius-10) 0 0 var(--border-radius-10);\n}\n\n.calendar-module-Calendar-valueWrapper--startError-RglvV-4-30-3 {\n background: linear-gradient(90deg, white 50%, var(--alert-lightest) 50%);\n}\n\n.calendar-module-Calendar-valueWrapper--end-3mDNa-4-30-3 {\n background: linear-gradient(90deg, var(--primary-ultra-light) 50%, white 50%);\n border-radius: 0 var(--border-radius-10) var(--border-radius-10) 0;\n}\n\n.calendar-module-Calendar-valueWrapper--hoverDate-WqHTe-4-30-3 {\n background: linear-gradient(90deg, var(--primary-ultra-light) 10%, white 50%);\n border-radius: 0 var(--border-radius-10) var(--border-radius-10) 0;\n}\n\n.calendar-module-Calendar-valueWrapper--hoverEndDate-ZBQie-4-30-3 {\n background: linear-gradient(90deg, white 50%, var(--primary-ultra-light) 10%);\n}\n\n.calendar-module-Calendar-valueWrapper--endError-Q6xFE-4-30-3 {\n background: linear-gradient(90deg, var(--alert-lightest) 50%, white 50%);\n}\n\n.calendar-module-Calendar-valueWrapper--startEnd-djqp--4-30-3 {\n background: transparent;\n}\n\n.calendar-module-Calendar-value-Ht0Qg-4-30-3 {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n box-sizing: border-box;\n border-radius: var(--spacing-10);\n border: var(--border-width-2-5) solid transparent;\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n\n /* Button reset (used on <button> for a11y) */\n background: transparent;\n padding: 0;\n margin: 0;\n font-family: inherit;\n color: inherit;\n}\n\n/* Always show focus on calendar cells: open-via-click moves focus programmatically\n (mouse modality → :focus-visible is false), and roving tabindex needs a visible target. */\n.calendar-module-Calendar-value-Ht0Qg-4-30-3:focus,\n.calendar-module-Calendar-value-Ht0Qg-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: 1px;\n}\n\n.calendar-module-Calendar-value-Ht0Qg-4-30-3:hover {\n background: var(--secondary-light);\n border-color: var(--secondary-dark);\n}\n\n.calendar-module-Calendar-value-Ht0Qg-4-30-3:active {\n background: var(--secondary);\n border-color: var(--secondary-dark);\n}\n\n.calendar-module-Calendar-value--start-mlqzh-4-30-3:hover,\n.calendar-module-Calendar-value--end-975vB-4-30-3:hover {\n background: var(--primary-ultra-light);\n border-color: transparent;\n}\n\n.calendar-module-Calendar-value--startError-bXXuR-4-30-3:hover,\n.calendar-module-Calendar-value--endError-M5HbA-4-30-3:hover {\n background: var(--alert-lightest);\n border-color: transparent;\n}\n\n.calendar-module-Calendar-value--start-mlqzh-4-30-3,\n.calendar-module-Calendar-value--end-975vB-4-30-3 {\n background: var(--primary-ultra-light);\n}\n\n.calendar-module-Calendar-value--startError-bXXuR-4-30-3,\n.calendar-module-Calendar-value--endError-M5HbA-4-30-3 {\n background: var(--alert-lightest);\n}\n\n.calendar-module-Calendar-value--currDateMonthYear-IaAJg-4-30-3 {\n background: var(--primary-ultra-light);\n border-color: var(--primary);\n}\n\n.calendar-module-Calendar-value--currDateMonthYear-IaAJg-4-30-3:hover {\n background: var(--primary-lightest);\n border-color: var(--primary);\n}\n\n.calendar-module-Calendar-value--currDateMonthYear-IaAJg-4-30-3:active {\n background: var(--primary-lighter);\n border-color: var(--primary-darker);\n}\n\n.calendar-module-Calendar-value--active--twAB-4-30-3 {\n background: var(--primary);\n font-weight: var(--font-weight-bold);\n border-color: transparent;\n}\n\n.calendar-module-Calendar-value--active--twAB-4-30-3:hover {\n background: var(--primary-dark);\n border-color: transparent;\n}\n\n.calendar-module-Calendar-value--active--twAB-4-30-3:active {\n background: var(--primary-darker);\n border-color: transparent;\n}\n\n.calendar-module-Calendar-yearValue--small--xk4--4-30-3,\n.calendar-module-Calendar-monthValue--small-R3bKo-4-30-3 {\n height: var(--spacing-60);\n width: var(--spacing-120);\n}\n\n.calendar-module-Calendar-yearValue--large-Lmlui-4-30-3,\n.calendar-module-Calendar-monthValue--large-kkWJR-4-30-3 {\n height: var(--spacing-80);\n width: var(--spacing-160);\n}\n\n.calendar-module-Calendar-dateValue--small-u5Af3-4-30-3 {\n height: var(--spacing-60);\n width: var(--spacing-60);\n}\n\n.calendar-module-Calendar-dateValue--large-ngrnG-4-30-3 {\n height: var(--spacing-80);\n width: var(--spacing-80);\n}\n\n.calendar-module-Calendar-valueWrapper--active-dummy-fi7cK-4-30-3 .calendar-module-Calendar-value--startError-bXXuR-4-30-3,\n.calendar-module-Calendar-valueWrapper--active-dummy-fi7cK-4-30-3 .calendar-module-Calendar-value--endError-M5HbA-4-30-3 {\n background: var(--alert-lightest);\n}\n\n.calendar-module-Calendar-valueWrapper--active-dummy-fi7cK-4-30-3 .calendar-module-Calendar-value--startError-bXXuR-4-30-3:hover,\n.calendar-module-Calendar-valueWrapper--active-dummy-fi7cK-4-30-3 .calendar-module-Calendar-value--endError-M5HbA-4-30-3:hover {\n background: var(--alert-lightest);\n border-color: transparent;\n}\n\n.calendar-module-Calendar-valueWrapper--disabled-KJRyE-4-30-3 {\n opacity: var(--opacity-10);\n}\n\n.calendar-module-Calendar-value--disabled-xwiCL-4-30-3 {\n pointer-events: none;\n}\n\n.calendar-module-Calendar-dayValues-EuWrN-4-30-3 {\n display: flex;\n justify-content: center;\n padding-top: var(--spacing-20);\n padding-bottom: var(--spacing-20);\n}\n\n.calendar-module-Calendar-dateValues-sXhcu-4-30-3 {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n justify-content: space-around;\n}\n\n.calendar-module-Calendar-dayValues-EuWrN-4-30-3 .calendar-module-Calendar-value-Ht0Qg-4-30-3 {\n padding: 0;\n cursor: default;\n border-color: transparent;\n}\n\n.calendar-module-Calendar-dayValues-EuWrN-4-30-3 .calendar-module-Calendar-value-Ht0Qg-4-30-3:hover,\n.calendar-module-Calendar-dayValues-EuWrN-4-30-3 .calendar-module-Calendar-value-Ht0Qg-4-30-3:active {\n background: transparent;\n border-color: transparent;\n}\n\n.calendar-module-Calendar-eventsIndicator-FoS6M-4-30-3 {\n position: absolute;\n bottom: var(--spacing-05);\n width: var(--spacing-10);\n height: var(--spacing-10);\n background-color: var(--alert);\n border-radius: var(--border-radius-full);\n}\n.calendar-module-Calendar-eventsIndicator--small-94d0W-4-30-3 {\n width: 3px;\n height: 3px;\n}\n.calendar-module-Calendar-eventsIndicator--active-NHhLl-4-30-3 {\n background-color: var(--white);\n}\n\n.calendar-module-Calendar-valueWrapper--inStartRange-lfSXQ-4-30-3 {\n background: linear-gradient(90deg, white 50%, var(--primary-ultra-light) 50%);\n}\n\n.calendar-module-Calendar-valueWrapper--inEndRange-hiHYl-4-30-3 {\n background: linear-gradient(90deg, var(--primary-ultra-light) 50%, white 50%);\n}\n\n.calendar-module-Calendar-valueWrapper--inEdgeRange-GU8He-4-30-3 .calendar-module-Calendar-inRangeValue-VoWIb-4-30-3 {\n background: var(--primary-ultra-light);\n}\n\n.calendar-module-Calendar-valueWrapper--inEdgeRange-GU8He-4-30-3 .calendar-module-Calendar-inRangeValue-VoWIb-4-30-3:hover {\n background: var(--primary-lightest);\n border-color: transparent;\n}\n\n.calendar-module-Calendar-valueWrapper--inEdgeRange-GU8He-4-30-3 .calendar-module-Calendar-inRangeValue-VoWIb-4-30-3:active {\n background: var(--primary-lighter);\n border-color: transparent;\n}\n\n@media (forced-colors: active) {\n .calendar-module-Calendar-valueWrapper--start-z-bt7-4-30-3,\n .calendar-module-Calendar-valueWrapper--end-3mDNa-4-30-3,\n .calendar-module-Calendar-valueWrapper--hoverDate-WqHTe-4-30-3,\n .calendar-module-Calendar-valueWrapper--hoverEndDate-ZBQie-4-30-3,\n .calendar-module-Calendar-valueWrapper--inStartRange-lfSXQ-4-30-3,\n .calendar-module-Calendar-valueWrapper--inEndRange-hiHYl-4-30-3,\n .calendar-module-Calendar-valueWrapper--inRange-fV605-4-30-3,\n .calendar-module-Calendar-valueWrapper--inEdgeRange-GU8He-4-30-3 .calendar-module-Calendar-inRangeValue-VoWIb-4-30-3 {\n background: Highlight;\n }\n\n .calendar-module-Calendar-valueWrapper--startError-RglvV-4-30-3,\n .calendar-module-Calendar-valueWrapper--endError-Q6xFE-4-30-3,\n .calendar-module-Calendar-valueWrapper--inRangeError-MfWMS-4-30-3 {\n background: Mark;\n }\n\n /* Active/selected date cell */\n .calendar-module-Calendar-value--active--twAB-4-30-3,\n .calendar-module-Calendar-value--active--twAB-4-30-3:hover,\n .calendar-module-Calendar-value--active--twAB-4-30-3:active {\n forced-color-adjust: none;\n background: Highlight;\n color: HighlightText;\n border-color: transparent;\n }\n\n /* Today's date marker ring */\n .calendar-module-Calendar-value--currDateMonthYear-IaAJg-4-30-3 {\n border-color: ButtonText;\n }\n\n /* Event dot: use system color so it stays visible */\n .calendar-module-Calendar-eventsIndicator-FoS6M-4-30-3 {\n background-color: ButtonText;\n }\n\n .calendar-module-Calendar-eventsIndicator--active-NHhLl-4-30-3 {\n background-color: HighlightText;\n }\n\n /* Disabled dates use opacity — switch to GrayText */\n .calendar-module-Calendar-valueWrapper--disabled-KJRyE-4-30-3 {\n opacity: 1;\n color: GrayText;\n }\n}\n";
var styles$17 = {"Calendar-wrapper":"calendar-module-Calendar-wrapper-bKSSk-4-30-3","Calendar":"calendar-module-Calendar-7PxjX-4-30-3","Calendar--small":"calendar-module-Calendar--small-A1CLy-4-30-3","Calendar-date--small":"calendar-module-Calendar-date--small-CcxQJ-4-30-3","Calendar-month--small":"calendar-module-Calendar-month--small-wkwYD-4-30-3","Calendar-year--small":"calendar-module-Calendar-year--small-RdwBQ-4-30-3","Calendar--large":"calendar-module-Calendar--large-sSoxU-4-30-3","Calendar-date--large":"calendar-module-Calendar-date--large-1ZITF-4-30-3","Calendar-month--large":"calendar-module-Calendar-month--large-5g0oP-4-30-3","Calendar-year--large":"calendar-module-Calendar-year--large-jELMf-4-30-3","Calendar-header--large":"calendar-module-Calendar-header--large-z3JIz-4-30-3","Calendar-header--small":"calendar-module-Calendar-header--small-dWwwm-4-30-3","Calendar-headerIcon":"calendar-module-Calendar-headerIcon-nsCVk-4-30-3","Calendar-headerIcon--prev":"calendar-module-Calendar-headerIcon--prev-1RFOJ-4-30-3","Calendar-headerIcon--next":"calendar-module-Calendar-headerIcon--next-ympYc-4-30-3","Calendar-headerContent":"calendar-module-Calendar-headerContent-Ik37t-4-30-3","Calendar-headerButton":"calendar-module-Calendar-headerButton-c6Ucj-4-30-3","Calendar-body":"calendar-module-Calendar-body-d-N5F-4-30-3","Calendar-valueRow":"calendar-module-Calendar-valueRow-85rKl-4-30-3","Calendar-valueWrapper":"calendar-module-Calendar-valueWrapper-H46Ub-4-30-3","Calendar-monthValueWrapper":"calendar-module-Calendar-monthValueWrapper-jHs9P-4-30-3","Calendar-yearValueWrapper":"calendar-module-Calendar-yearValueWrapper-2xlz7-4-30-3","Calendar-valueWrapper--inRange":"calendar-module-Calendar-valueWrapper--inRange-fV605-4-30-3","Calendar-inRangeValue":"calendar-module-Calendar-inRangeValue-VoWIb-4-30-3","Calendar-valueWrapper--inRangeError":"calendar-module-Calendar-valueWrapper--inRangeError-MfWMS-4-30-3","Calendar-valueWrapper--start":"calendar-module-Calendar-valueWrapper--start-z-bt7-4-30-3","Calendar-valueWrapper--startError":"calendar-module-Calendar-valueWrapper--startError-RglvV-4-30-3","Calendar-valueWrapper--end":"calendar-module-Calendar-valueWrapper--end-3mDNa-4-30-3","Calendar-valueWrapper--hoverDate":"calendar-module-Calendar-valueWrapper--hoverDate-WqHTe-4-30-3","Calendar-valueWrapper--hoverEndDate":"calendar-module-Calendar-valueWrapper--hoverEndDate-ZBQie-4-30-3","Calendar-valueWrapper--endError":"calendar-module-Calendar-valueWrapper--endError-Q6xFE-4-30-3","Calendar-valueWrapper--startEnd":"calendar-module-Calendar-valueWrapper--startEnd-djqp--4-30-3","Calendar-value":"calendar-module-Calendar-value-Ht0Qg-4-30-3","Calendar-value--start":"calendar-module-Calendar-value--start-mlqzh-4-30-3","Calendar-value--end":"calendar-module-Calendar-value--end-975vB-4-30-3","Calendar-value--startError":"calendar-module-Calendar-value--startError-bXXuR-4-30-3","Calendar-value--endError":"calendar-module-Calendar-value--endError-M5HbA-4-30-3","Calendar-value--currDateMonthYear":"calendar-module-Calendar-value--currDateMonthYear-IaAJg-4-30-3","Calendar-value--active":"calendar-module-Calendar-value--active--twAB-4-30-3","Calendar-yearValue--small":"calendar-module-Calendar-yearValue--small--xk4--4-30-3","Calendar-monthValue--small":"calendar-module-Calendar-monthValue--small-R3bKo-4-30-3","Calendar-yearValue--large":"calendar-module-Calendar-yearValue--large-Lmlui-4-30-3","Calendar-monthValue--large":"calendar-module-Calendar-monthValue--large-kkWJR-4-30-3","Calendar-dateValue--small":"calendar-module-Calendar-dateValue--small-u5Af3-4-30-3","Calendar-dateValue--large":"calendar-module-Calendar-dateValue--large-ngrnG-4-30-3","Calendar-valueWrapper--active-dummy":"calendar-module-Calendar-valueWrapper--active-dummy-fi7cK-4-30-3","Calendar-valueWrapper--disabled":"calendar-module-Calendar-valueWrapper--disabled-KJRyE-4-30-3","Calendar-value--disabled":"calendar-module-Calendar-value--disabled-xwiCL-4-30-3","Calendar-dayValues":"calendar-module-Calendar-dayValues-EuWrN-4-30-3","Calendar-dateValues":"calendar-module-Calendar-dateValues-sXhcu-4-30-3","Calendar-eventsIndicator":"calendar-module-Calendar-eventsIndicator-FoS6M-4-30-3","Calendar-eventsIndicator--small":"calendar-module-Calendar-eventsIndicator--small-94d0W-4-30-3","Calendar-eventsIndicator--active":"calendar-module-Calendar-eventsIndicator--active-NHhLl-4-30-3","Calendar-valueWrapper--inStartRange":"calendar-module-Calendar-valueWrapper--inStartRange-lfSXQ-4-30-3","Calendar-valueWrapper--inEndRange":"calendar-module-Calendar-valueWrapper--inEndRange-hiHYl-4-30-3","Calendar-valueWrapper--inEdgeRange":"calendar-module-Calendar-valueWrapper--inEdgeRange-GU8He-4-30-3"};
styleInject(css_248z$1h);
var config = {
yearBlockRange: 12,
yearsInRow: 3,
monthBlock: 12,
monthsInRow: 3,
daysInRow: 7,
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
days: {
small: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
large: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
}
};
var monthBlock = config.monthBlock,
monthsInRow = config.monthsInRow,
yearBlockRange$1 = config.yearBlockRange,
yearsInRow = config.yearsInRow;
/**
* Data attribute for calendar date cells (used for keyboard navigation)
*/
var DATE_CELL_SELECTOR = '[data-calendar-date-cell]';
/**
* Data attribute for calendar month cells
*/
var MONTH_CELL_SELECTOR = '[data-calendar-month-cell]';
/**
* Data attribute for calendar year cells
*/
var YEAR_CELL_SELECTOR = '[data-calendar-year-cell]';
var ENABLED_CELL_SELECTOR = ':not([aria-disabled="true"]):not([disabled])';
/**
* Finds the best focus target in the currently rendered calendar view
* (date, month, or year). Returns null when no enabled cell exists.
*/
var findFocusableCalendarCell = function findFocusableCalendarCell(root) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var preferredAriaLabel = options.preferredAriaLabel,
_options$preferredSel = options.preferredSelectedIndex,
preferredSelectedIndex = _options$preferredSel === void 0 ? 'first' : _options$preferredSel;
var selectedDates = Array.from(root.querySelectorAll("".concat(DATE_CELL_SELECTOR, "[aria-selected=\"true\"]").concat(ENABLED_CELL_SELECTOR)));
if (preferredAriaLabel) {
var preferred = selectedDates.find(function (cell) {
return cell.getAttribute('aria-label') === preferredAriaLabel;
});
if (preferred) return preferred;
}
if (selectedDates.length > 0) {
return preferredSelectedIndex === 'last' ? selectedDates[selectedDates.length - 1] : selectedDates[0];
}
var firstDate = root.querySelector("".concat(DATE_CELL_SELECTOR).concat(ENABLED_CELL_SELECTOR));
if (firstDate) return firstDate;
var selectedMonth = root.querySelector("".concat(MONTH_CELL_SELECTOR, "[aria-selected=\"true\"]").concat(ENABLED_CELL_SELECTOR));
if (selectedMonth) return selectedMonth;
var firstMonth = root.querySelector("".concat(MONTH_CELL_SELECTOR).concat(ENABLED_CELL_SELECTOR));
if (firstMonth) return firstMonth;
var selectedYear = root.querySelector("".concat(YEAR_CELL_SELECTOR, "[aria-selected=\"true\"]").concat(ENABLED_CELL_SELECTOR));
if (selectedYear) return selectedYear;
return root.querySelector("".concat(YEAR_CELL_SELECTOR).concat(ENABLED_CELL_SELECTOR));
};
/**
* Focus a date cell at the given row and column within the calendar container.
* Used for date view grid navigation.
* When monthIndex is provided, scopes to that calendar's date grid (for monthsInView > 1).
*/
var focusDateCell = function focusDateCell(container, row, col, monthIndex) {
var grid = monthIndex !== undefined ? container.querySelector("[data-calendar-index=\"".concat(monthIndex, "\"]")) : container.querySelector('[data-calendar-index]') || container;
if (!grid) return false;
var cell = grid.querySelector("".concat(DATE_CELL_SELECTOR, "[data-row=\"").concat(row, "\"][data-col=\"").concat(col, "\"]"));
if (cell && !cell.disabled) {
cell.focus({
preventScroll: true
});
return true;
}
return false;
};
/**
* Focus a month cell at the given index (0-11) within the calendar container.
*/
var focusMonthCell = function focusMonthCell(container, monthIndex) {
var cell = container.querySelector("".concat(MONTH_CELL_SELECTOR, "[data-month=\"").concat(monthIndex, "\"]"));
if (cell && !cell.disabled) {
cell.focus({
preventScroll: true
});
return true;
}
return false;
};
/**
* Focus a year cell at the given index (0-11) within the year block.
*/
var focusYearCell = function focusYearCell(container, yearIndex) {
var cell = container.querySelector("".concat(YEAR_CELL_SELECTOR, "[data-year-index=\"").concat(yearIndex, "\"]"));
if (cell && !cell.disabled) {
cell.focus({
preventScroll: true
});
return true;
}
return false;
};
/**
* Format date for aria-label (e.g., "March 12, 2026")
*/
var formatDateAriaLabel = function formatDateAriaLabel(d) {
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
return "".concat(months[d.getMonth()], " ").concat(d.getDate(), ", ").concat(d.getFullYear());
};
/**
* Handle keyboard events in the date view grid using Date Math.
* Returns true if the key was handled (caller should preventDefault).
*/
var handleDateViewKeyDown = function handleDateViewKeyDown(params) {
var event = params.event,
focusedDate = params.focusedDate,
_params$startOfWeekIn = params.startOfWeekIndex,
startOfWeekIndex = _params$startOfWeekIn === void 0 ? 0 : _params$startOfWeekIn,
isDateDisabled = params.isDateDisabled,
onNavigate = params.onNavigate,
onSelect = params.onSelect,
onPageUp = params.onPageUp,
onPageDown = params.onPageDown,
onShiftPageUp = params.onShiftPageUp,
onShiftPageDown = params.onShiftPageDown,
onEscape = params.onEscape;
var newDate = null;
var currentDayIndex = focusedDate.getDay();
var visualColumnIndex = (currentDayIndex - startOfWeekIndex + 7) % 7;
switch (event.key) {
case 'ArrowUp':
newDate = new Date(focusedDate);
newDate.setDate(focusedDate.getDate() - 7);
break;
case 'ArrowDown':
newDate = new Date(focusedDate);
newDate.setDate(focusedDate.getDate() + 7);
break;
case 'ArrowLeft':
newDate = new Date(focusedDate);
newDate.setDate(focusedDate.getDate() - 1);
break;
case 'ArrowRight':
newDate = new Date(focusedDate);
newDate.setDate(focusedDate.getDate() + 1);
break;
case 'Home':
newDate = new Date(focusedDate);
newDate.setDate(focusedDate.getDate() - visualColumnIndex);
break;
case 'End':
newDate = new Date(focusedDate);
newDate.setDate(focusedDate.getDate() + (6 - visualColumnIndex));
break;
case 'PageUp':
event.preventDefault();
if (event.shiftKey) {
onShiftPageUp();
} else {
onPageUp();
}
return true;
case 'PageDown':
event.preventDefault();
if (event.shiftKey) {
onShiftPageDown();
} else {
onPageDown();
}
return true;
case 'Enter':
case ' ':
case 'Spacebar':
event.preventDefault();
if (event.repeat) return true;
if (isDateDisabled && isDateDisabled(focusedDate)) return true;
onSelect();
return true;
case 'Escape':
if (onEscape) {
event.preventDefault();
onEscape();
return true;
}
break;
default:
return false;
}
if (newDate) {
if (isNaN(newDate.getTime())) {
return false;
}
// Check if newDate exceeds minDate or maxDate limits
if (isDateDisabled && isDateDisabled(newDate)) {
event.preventDefault();
return true;
}
if (newDate) {
event.preventDefault();
onNavigate(newDate);
return true;
}
}
return false;
};
/**
* Handle keyboard events in the month view grid (3x4).
*/
var handleMonthViewKeyDown = function handleMonthViewKeyDown(params) {
var event = params.event,
focusedMonth = params.focusedMonth,
isMonthDisabled = params.isMonthDisabled,
onNavigate = params.onNavigate,
onSelect = params.onSelect,
onEscape = params.onEscape;
var row = Math.floor(focusedMonth / monthsInRow);
var col = focusedMonth % monthsInRow;
var totalRows = Math.ceil(monthBlock / monthsInRow);
var nextMonth = null;
switch (event.key) {
case 'ArrowUp':
{
if (row > 0) nextMonth = focusedMonth - monthsInRow;
break;
}
case 'ArrowDown':
{
if (row < totalRows - 1) nextMonth = focusedMonth + monthsInRow;
break;
}
case 'ArrowLeft':
{
if (col > 0) nextMonth = focusedMonth - 1;
break;
}
case 'ArrowRight':
{
if (col < monthsInRow - 1) nextMonth = focusedMonth + 1;
break;
}
case 'Home':
nextMonth = 0;
break;
case 'End':
nextMonth = 11;
break;
case 'Enter':
case ' ':
case 'Spacebar':
event.preventDefault();
// Prevent auto-repeat: only process first keydown
if (event.repeat) return true;
onSelect(focusedMonth);
return true;
case 'Escape':
if (onEscape) {
event.preventDefault();
onEscape();
return true;
}
break;
}
if (nextMonth !== null) {
if (isMonthDisabled && isMonthDisabled(nextMonth)) {
event.preventDefault();
return true;
}
event.preventDefault();
onNavigate(nextMonth);
return true;
}
return false;
};
/**
* Handle keyboard events in the year view grid.
* focusedYearIndex is the offset within the current 12-year block (0-11).
*/
var handleYearViewKeyDown = function handleYearViewKeyDown(params) {
var event = params.event,
focusedYearIndex = params.focusedYearIndex,
yearBlockStart = params.yearBlockStart,
isYearDisabled = params.isYearDisabled,
onNavigate = params.onNavigate,
onSelect = params.onSelect,
onPageUp = params.onPageUp,
onPageDown = params.onPageDown,
onEscape = params.onEscape;
var row = Math.floor(focusedYearIndex / yearsInRow);
var col = focusedYearIndex % yearsInRow;
var totalRows = Math.ceil(yearBlockRange$1 / yearsInRow);
var nextYearIndex = null;
switch (event.key) {
case 'ArrowUp':
{
if (row > 0) nextYearIndex = focusedYearIndex - yearsInRow;
break;
}
case 'ArrowDown':
{
if (row < totalRows - 1) nextYearIndex = focusedYearIndex + yearsInRow;
break;
}
case 'ArrowLeft':
{
if (col > 0) nextYearIndex = focusedYearIndex - 1;
break;
}
case 'ArrowRight':
{
if (col < yearsInRow - 1) nextYearIndex = focusedYearIndex + 1;
break;
}
case 'Home':
nextYearIndex = 0;
break;
case 'End':
nextYearIndex = yearBlockRange$1 - 1;
break;
case 'PageUp':
event.preventDefault();
onPageUp();
return true;
case 'PageDown':
event.preventDefault();
onPageDown();
return true;
case 'Enter':
case ' ':
case 'Spacebar':
event.preventDefault();
// Prevent auto-repeat: only process first keydown
if (event.repeat) return true;
onSelect(yearBlockStart + focusedYearIndex);
return true;
case 'Escape':
if (onEscape) {
event.preventDefault();
onEscape();
return true;
}
break;
}
if (nextYearIndex !== null) {
if (isYearDisabled && isYearDisabled(yearBlockStart + nextYearIndex)) {
event.preventDefault();
return true;
}
event.preventDefault();
onNavigate(nextYearIndex);
return true;
}
return false;
};
var yearBlockRange = config.yearBlockRange;
var getIndexOfDay = function getIndexOfDay(day) {
return ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'].indexOf(day);
};
var getYearBlock = function getYearBlock(year) {
return year - year % yearBlockRange;
};
var getDaysInMonth = function getDaysInMonth(year, month) {
return new Date(year, month + 1, 0).getDate();
};
var getFirstDayOfMonth = function getFirstDayOfMonth(year, month) {
return new Date(year, month).getDay();
};
var getDateInfo = function getDateInfo(d) {
if (d) {
var dateVal = convertToDate(d);
if (dateVal) {
var year = dateVal.getFullYear();
var month = dateVal.getMonth();
var day = dateVal.getDay();
var date = dateVal.getDate();
var decadeYear = getYearBlock(year);
return {
decadeYear: decadeYear,
year: year,
month: month,
day: day,
date: date
};
} else {
return {};
}
}
return {};
};
var convertToDate = function convertToDate(d, format, validators) {
var dateVal;
if (d) {
if (typeof d === 'number') {
dateVal = new Date(d);
} else if (typeof d === 'string') {
return format ? translateToDate(format, d, validators) : undefined;
} else if (!(d instanceof Date)) {
var _ref = d,
year = _ref.year,
month = _ref.month,
date = _ref.date;
dateVal = new Date(year, month, date, 0, 0, 0);
} else {
dateVal = d;
}
}
return dateVal;
};
var compareYearBlock = function compareYearBlock(d, operator, currDecade) {
if (d) {
var _getDateInfo = getDateInfo(d),
limitDecade = _getDateInfo.decadeYear;
switch (operator) {
case 'less':
if (limitDecade < currDecade) return true;
break;
case 'more':
if (limitDecade > currDecade) return true;
break;
case 'equal':
if (limitDecade === currDecade) return true;
break;
}
}
return false;
};
var compareDate = function compareDate(d, operator, currYear, currMonth, currDate) {
if (d) {
var _getDateInfo2 = getDateInfo(d),
limitYear = _getDateInfo2.year,
limitMonth = _getDateInfo2.month,
limitDate = _getDateInfo2.date;
switch (operator) {
case 'less':
if (limitYear < currYear) return true;
if (limitYear > currYear) return false;
if (currMonth !== undefined) {
if (limitMonth < currMonth) return true;
if (limitMonth > currMonth) return false;
}
if (currDate !== undefined && limitDate < currDate) return true;
break;
case 'more':
if (limitYear > currYear) return true;
if (limitYear < currYear) return false;
if (currMonth !== undefined) {
if (limitMonth > currMonth) return true;
if (limitMonth < currMonth) return false;
}
if (currDate !== undefined && limitDate > currDate) return true;
break;
case 'equal':
if (currDate !== undefined) {
if (limitYear === currYear && limitMonth === currMonth && limitDate === currDate) return true;
} else if (currMonth !== undefined) {
if (limitYear === currYear && limitMonth === currMonth) return true;
} else if (limitYear === currYear) return true;
}
}
return false;
};
var translateToString = function translateToString(format, d) {
if (format && d) {
var _getDateInfo3 = getDateInfo(d),
year = _getDateInfo3.year,
month = _getDateInfo3.month,
date = _getDateInfo3.date;
var separator = format.includes('/') ? '/' : '-';
var f = format.split(separator);
var val = f.reduce(function (out, curr, i) {
switch (curr) {
case 'mm':
out += (month < 9 && '0') + (month + 1);
break;
case 'yyyy':
out += year;
break;
case 'dd':
out += (date < 10 && '0') + date;
break;
}
if (i !== f.length - 1) out += separator;
return out;
}, '');
return val;
}
return '';
};
var translateToDate = function translateToDate(format, val) {
var validators = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
if (isValid(validators, val, format)) {
var separator = format.includes('/') ? '/' : '-';
var year = -1,
month = -1,
date = -1;
var v = val.split(separator);
format.split(separator).forEach(function (f, i) {
switch (f) {
case 'mm':
month = +v[i] - 1;
break;
case 'yyyy':
year = +v[i];
break;
case 'dd':
date = +v[i];
break;
}
});
var d = convertToDate({
year: year,
month: month,
date: date
});
return d;
} else {
return undefined;
}
};
var dateComparison = function dateComparison(date, operator, currDate, currMonth, currYear) {
var currentDate = new Date("".concat(currYear, "-").concat(currMonth, "-").concat(currDate));
if (date) {
switch (operator) {
case 'less':
return date <= currentDate;
case 'equal':
return date.toDateString() === currentDate.toDateString();
case 'more':
return date >= currentDate;
default:
return false;
}
}
return false;
};
var Calendar = /*#__PURE__*/function (_React$Component) {
function Calendar(props) {
var _this;
_classCallCheck(this, Calendar);
_this = _callSuper(this, Calendar, [props]);
_defineProperty$1(_this, "calendarWrapperRef", /*#__PURE__*/React.createRef());
_defineProperty$1(_this, "updateState", function (year, month, date) {
_this.setState({
year: year,
month: month,
date: date
});
});
_defineProperty$1(_this, "getDateValue", function (year, month, date) {
var d = new Date(year, month, date);
return d;
});
_defineProperty$1(_this, "getNavDateInfo", function (index) {
var _this$state = _this.state,
yearBlockNav = _this$state.yearBlockNav,
yearNav = _this$state.yearNav,
monthNav = _this$state.monthNav;
var monthBlock = config.monthBlock;
var yearBlock = yearBlockNav;
var month = (monthNav + index) % monthBlock === -1 ? 11 : (monthNav + index) % monthBlock;
// const year = yearNav + (index !== 0 && month < monthNav ? 1 : 0);
var year;
if (index >= 0) {
year = yearNav + (index !== 0 && month < monthNav ? 1 : 0);
} else {
year = yearNav - (index !== 0 && month > monthNav ? 1 : 0);
}
return {
yearBlock: yearBlock,
year: year,
month: month
};
});
/** Compute row/col for a date in the calendar grid (for keyboard focus) */
_defineProperty$1(_this, "getDateGridPosition", function (year, month, date) {
var firstDayOfWeek = _this.props.firstDayOfWeek;
var daysInRow = config.daysInRow;
var firstDayIndex = getFirstDayOfMonth(year, month);
var desiredFirstDayIndex = getIndexOfDay(firstDayOfWeek);
var dayDiff = (firstDayIndex - desiredFirstDayIndex + 7) % 7;
var dummyDays = Math.abs(dayDiff);
var position = dummyDays + date - 1;
if (position < 0) return null;
return {
row: Math.floor(position / daysInRow),
col: position % daysInRow
};
});
_defineProperty$1(_this, "getInRangeError", function () {
var _this$props = _this.props,
rangePicker = _this$props.rangePicker,
rangeLimit = _this$props.rangeLimit;
var _this$state2 = _this.state,
startDateState = _this$state2.startDate,
endDateState = _this$state2.endDate,
hoverDateState = _this$state2.hoverDate;
if (rangePicker && rangeLimit) {
var _getDateInfo = getDateInfo(startDateState),
startYear = _getDateInfo.year,
startMonth = _getDateInfo.month,
startDate = _getDateInfo.date;
var _getDateInfo2 = getDateInfo(endDateState),
endYear = _getDateInfo2.year,
endMonth = _getDateInfo2.month,
endDate = _getDateInfo2.date;
var _getDateInfo3 = getDateInfo(hoverDateState),
hoverYear = _getDateInfo3.year,
hoverMonth = _getDateInfo3.month,
hoverDate = _getDateInfo3.date;
var limitDate;
if (startDateState) {
limitDate = new Date(startDateState);
limitDate.setDate(startDate + rangeLimit);
return compareDate(limitDate, 'less', hoverYear, hoverMonth, hoverDate + 1) || compareDate(limitDate, 'less', endYear, endMonth, endDate + 1);
}
if (endDateState) {
limitDate = new Date(endDateState);
limitDate.setDate(endDate - rangeLimit);
return compareDate(limitDate, 'more', hoverYear, hoverMonth, hoverDate - 1) || compareDate(limitDate, 'more', startYear, startMonth, startDate - 1);
}
}
return false;
});
_defineProperty$1(_this, "selectYear", function (year, disabled) {
return function () {
if (disabled) return;
_this.updateState(year);
_this.setState({
view: 'month'
});
};
});
_defineProperty$1(_this, "yearMouseOverHandler", function (year, isCurrentYear, isDisabled, ev) {
var onYearHover = _this.props.onYearHover;
var yearData = {
value: year,
year: year,
isCurrentYear: isCurrentYear,
isDisabled: isDisabled
};
if (onYearHover) onYearHover(yearData, ev);
});
_defineProperty$1(_this, "selectMonth", function (month, disabled) {
return function () {
if (disabled) return;
_this.updateState(_this.state.yearNav, month);
_this.setState({
view: 'date'
});
};
});
_defineProperty$1(_this, "monthMouseOverHandler", function (month, isCurrentMonth, isDisabled, ev) {
var months = config.months;
var onMonthHover = _this.props.onMonthHover;
var monthData = {
value: months[month],
month: months[month],
year: _this.state.year,
isCurrentMonth: isCurrentMonth,
isDisabled: isDisabled
};
if (onMonthHover) onMonthHover(monthData, ev);
});
_defineProperty$1(_this, "selectDate", function (index, date, prevMonthDayRange, dayRange) {
var d = _this.calculateDate(index, date, prevMonthDayRange, dayRange, false);
_this.setState({
currDate: d
});
});
_defineProperty$1(_this, "calculateDate", function (index, date, prevMonthDayRange, dayRange, isDateHovered) {
var neighbouringMonthIndex;
var neighbouringMonthDate;
var type = '';
if (date <= 0) {
neighbouringMonthIndex = index - 1;
neighbouringMonthDate = prevMonthDayRange + date;
type = 'prev';
} else if (date > dayRange) {
neighbouringMonthIndex = index;
neighbouringMonthDate = date;
} else {
neighbouringMonthIndex = index;
neighbouringMonthDate = date;
}
var _this$getNavDateInfo = _this.getNavDateInfo(neighbouringMonthIndex),
year = _this$getNavDateInfo.year,
month = _this$getNavDateInfo.month;
if (isDateHovered === false) {
_this.updateState(year, month, neighbouringMonthDate);
_this.onNavIconClickHandler(type)();
}
var d = _this.getDateValue(year, month, neighbouringMonthDate);
return d;
});
_defineProperty$1(_this, "onNavIconClickHandler", function (type) {
return function () {
var _this$state3 = _this.state,
view = _this$state3.view,
yearBlockNav = _this$state3.yearBlockNav,
yearNav = _this$state3.yearNav,
monthNav = _this$state3.monthNav;
var yearBlockRange = config.yearBlockRange,
monthBlock = config.monthBlock;
switch (view) {
case 'year':
if (type === 'prev') _this.setState({
yearBlockNav: yearBlockNav - yearBlockRange
});
if (type === 'next') _this.setState({
yearBlockNav: yearBlockNav + yearBlockRange
});
break;
case 'month':
if (type === 'prev') _this.setState({
yearNav: yearNav - 1
});
if (type === 'next') _this.setState({
yearNav: yearNav + 1
});
break;
case 'date':
if (type === 'prev') {
if (monthNav === 0) _this.setState({
yearNav: yearNav - 1
});
_this.setState({
monthNav: (monthBlock + monthNav - 1) % monthBlock
});
}
if (type === 'next') {
if (monthNav === monthBlock - 1) _this.setState({
yearNav: yearNav + 1
});
_this.setState({
monthNav: (monthNav + 1) % monthBlock
});
}
break;
}
};
});
_defineProperty$1(_this, "renderJumpButton", function (type) {
var _this$props2 = _this.props,
disabledBefore = _this$props2.disabledBefore,
disabledAfter = _this$props2.disabledAfter,
size = _this$props2.size;
var _this$state4 = _this.state,
view = _this$state4.view,
yearBlockNav = _this$state4.yearBlockNav,
yearNav = _this$state4.yearNav,
monthNav = _this$state4.monthNav;
var disabled = false;
switch (view) {
case 'year':
if (type === 'prev') {
disabled = compareYearBlock(disabledBefore, 'more', yearBlockNav) || compareYearBlock(disabledBefore, 'equal', yearBlockNav);
}
if (type === 'next') {
disabled = compareYearBlock(disabledAfter, 'less', yearBlockNav) || compareYearBlock(disabledAfter, 'equal', yearBlockNav);
}
break;
case 'month':
if (type === 'prev') {
disabled = compareDate(disabledBefore, 'more', yearNav - 1);
}
if (type === 'next') {
disabled = compareDate(disabledAfter, 'less', yearNav + 1);
}
break;
case 'date':
if (type === 'prev') {
disabled = compareDate(disabledBefore, 'more', yearNav, monthNav - 1);
}
if (type === 'next') {
disabled = compareDate(disabledAfter, 'less', yearNav, monthNav + 1);
}
break;
}
var headerIconClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$17['Calendar-headerIcon'], true), styles$17["Calendar-headerIcon--".concat(type)], type));
var ariaLabel = '';
if (view === 'date') ariaLabel = type === 'prev' ? 'Previous month' : 'Next month';else if (view === 'month') ariaLabel = type === 'prev' ? 'Previous year' : 'Next year';else if (view === 'year') ariaLabel = type === 'prev' ? 'Previous year block' : 'Next year block';
return /*#__PURE__*/React.createElement("div", {
className: headerIconClass
}, /*#__PURE__*/React.createElement(Tooltip, {
tooltip: ariaLabel,
position: "bottom"
}, /*#__PURE__*/React.createElement(Button, {
type: "button",
appearance: "basic",
icon: "arrow_".concat(type === 'next' ? 'forward' : 'back'),
disabled: disabled,
size: size === 'small' ? 'tiny' : 'regular',
onClick: _this.onNavIconClickHandler(type),
"aria-label": ariaLabel
})));
});
_defineProperty$1(_this, "onNavHeadingClickHandler", function (currView) {
return function () {
var monthsInView = _this.props.monthsInView;
var jumpView = _this.props.jumpView;
if (jumpView) {
if (monthsInView > 1) jumpView = false;
}
if (jumpView) {
if (currView === 'year') _this.setState({
view: 'date'
});
if (currView === 'month') _this.setState({
view: 'year'
});
if (currView === 'date') _this.setState({
view: 'month'
});
}
};
});
_defineProperty$1(_this, "renderHeaderContent", function (index) {
var _this$props3 = _this.props,
size = _this$props3.size,
monthsInView = _this$props3.monthsInView,
rangePicker = _this$props3.rangePicker;
var _this$state5 = _this.state,
view = _this$state5.view,
yearBlockNav = _this$state5.yearBlockNav;
var yearBlockRange = config.yearBlockRange,
months = config.months;
var _this$getNavDateInfo2 = _this.getNavDateInfo(index),
yearNavVal = _this$getNavDateInfo2.year,
monthNavVal = _this$getNavDateInfo2.month;
var headerContentClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$17['Calendar-headerContent'], true), styles$17['Calendar-headerContent--noIcon-left'], index === monthsInView - 1), styles$17['Calendar-headerContent--noIcon-right'], index === 0));
var headerContent = '';
if (view === 'year') headerContent = "".concat(yearBlockNav, " - ").concat(yearBlockNav + (yearBlockRange - 1));
if (view === 'month') headerContent = "".concat(yearNavVal);
var renderHeading = function renderHeading(content) {
if (size === 'small') {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text$1, {
weight: "strong"
}, content), view !== 'year' && !rangePicker && /*#__PURE__*/React.createElement(Icon, {
appearance: "inverse",
className: "pl-3",
name: "keyboard_arrow_down"
}));
}
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
size: "s",
as: "span"
}, content), view !== 'year' && !rangePicker && /*#__PURE__*/React.createElement(Icon, {
appearance: "inverse",
className: "pl-3",
name: "keyboard_arrow_down"
}));
};
return /*#__PURE__*/React.createElement("div", {
className: headerContentClass
}, view !== 'date' && /*#__PURE__*/React.createElement("button", {
type: "button",
className: styles$17['Calendar-headerButton'],
onClick: _this.onNavHeadingClickHandler(view),
"aria-label": view === 'year' ? 'Select date' : 'Select year'
}, renderHeading(headerContent)), view === 'date' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
type: "button",
className: styles$17['Calendar-headerButton'],
onClick: _this.onNavHeadingClickHandler(view),
"aria-label": "Select month"
}, renderHeading(months[monthNavVal])), /*#__PURE__*/React.createElement("button", {
type: "button",
className: classnames(styles$17['Calendar-headerButton'], 'ml-4'),
onClick: _this.onNavHeadingClickHandler('month'),
"aria-label": "Select year"
}, renderHeading(yearNavVal))));
});
_defineProperty$1(_this, "renderBodyYear", function () {
var _this$state$focusedYe;
var yearBlockRange = config.yearBlockRange,
yearsInRow = config.yearsInRow;
var _this$props4 = _this.props,
size = _this$props4.size,
rangePicker = _this$props4.rangePicker,
disabledBefore = _this$props4.disabledBefore,
disabledAfter = _this$props4.disabledAfter;
var _this$state6 = _this.state,
yearBlockNav = _this$state6.yearBlockNav,
currYear = _this$state6.currYear;
var noOfRows = Math.ceil(yearBlockRange / yearsInRow);
var calculatedIndex = _this.state.year !== undefined ? _this.state.year - yearBlockNav : 0;
var defaultIndex = calculatedIndex >= 0 && calculatedIndex <= 11 ? calculatedIndex : 0;
var targetIndex = (_this$state$focusedYe = _this.state.focusedYearIndex) !== null && _this$state$focusedYe !== void 0 ? _this$state$focusedYe : defaultIndex;
if (targetIndex < 0 || targetIndex > 11) {
targetIndex = defaultIndex;
}
var targetYear = yearBlockNav + targetIndex;
var isTargetDisabled = compareDate(disabledBefore, 'more', targetYear) || compareDate(disabledAfter, 'less', targetYear);
if (isTargetDisabled) {
for (var i = 0; i < 12; i++) {
var y = yearBlockNav + i;
if (!(compareDate(disabledBefore, 'more', y) || compareDate(disabledAfter, 'less', y))) {
targetIndex = i;
break;
}
}
}
var effectiveFocusedYearIndex = targetIndex;
return Array.from({
length: noOfRows
}, function (_y, row) {
return /*#__PURE__*/React.createElement("div", {
key: row,
role: "row",
className: styles$17['Calendar-valueRow']
}, Array.from({
length: yearsInRow
}, function (_x, col) {
var offset = yearsInRow * row + col;
if (offset === yearBlockNav) return undefined;
var year = yearBlockNav + offset;
var disabled = compareDate(disabledBefore, 'more', year) || compareDate(disabledAfter, 'less', year);
var active = !disabled && !rangePicker && year === _this.state.year;
var isCurrentYear = function isCurrentYear() {
return year === currYear;
};
var wrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$17['Calendar-yearValueWrapper'], true), styles$17['Calendar-valueWrapper--disabled'], disabled));
var valueClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$17['Calendar-value'], true), styles$17['Calendar-value--active'], active), styles$17['Calendar-value--disabled'], disabled), styles$17['Calendar-yearValue'], true), styles$17["Calendar-yearValue--".concat(size)], size), styles$17['Calendar-value--currDateMonthYear'], isCurrentYear()));
var textClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$17['Calendar-value--currDate'], isCurrentYear() && !active), styles$17['Calendar-text'], true));
var getTextColor = classnames({
inverse: !active && !isCurrentYear() && !disabled,
white: active,
'primary-dark': isCurrentYear()
});
var getTextAppearance = function getTextAppearance() {
return disabled ? 'subtle' : 'default';
};
var isFocused = effectiveFocusedYearIndex === offset;
return /*#__PURE__*/React.createElement("div", {
key: "".concat(row, "-").concat(col),
className: wrapperClass
}, /*#__PURE__*/React.createElement("button", {
type: "button",
role: "gridcell",
"data-test": "DesignSystem-Calendar--yearValue",
"data-calendar-year-cell": true,
"data-year-index": offset,
className: valueClass,
tabIndex: isFocused ? 0 : -1,
"aria-label": year.toString(),
"aria-disabled": disabled,
"aria-selected": active,
"aria-current": isCurrentYear() ? 'date' : undefined,
onClick: _this.selectYear(year, disabled),
onKeyDown: function onKeyDown(ev) {
return _this.handleYearCellKeyDown(ev, year, offset, disabled);
},
onFocus: function onFocus() {
return _this.setState({
focusedYearIndex: offset
});
},
onMouseOver: _this.yearMouseOverHandler.bind(_this, year, isCurrentYear(), disabled)
}, /*#__PURE__*/React.createElement(Text$1, {
size: size === 'small' ? 'small' : 'regular',
color: getTextAppearance() === 'default' || isCurrentYear() ? getTextColor : undefined,
appearance: getTextAppearance(),
className: textClass,
weight: active ? 'strong' : undefined
}, year)));
}));
});
});
_defineProperty$1(_this, "renderBodyMonth", function () {
var _this$state$month, _this$state$focusedMo;
var monthBlock = config.monthBlock,
monthsInRow = config.monthsInRow,
months = config.months;
var _this$props5 = _this.props,
size = _this$props5.size,
disabledBefore = _this$props5.disabledBefore,
disabledAfter = _this$props5.disabledAfter;
var _this$state7 = _this.state,
yearNav = _this$state7.yearNav,
year = _this$state7.year,
currYear = _this$state7.currYear,
currMonth = _this$state7.currMonth;
var noOfRows = Math.ceil(monthBlock / monthsInRow);
var defaultMonth = (_this$state$month = _this.state.month) !== null && _this$state$month !== void 0 ? _this$state$month : 0;
var targetMonth = (_this$state$focusedMo = _this.state.focusedMonth) !== null && _this$state$focusedMo !== void 0 ? _this$state$focusedMo : defaultMonth;
if (targetMonth < 0 || targetMonth > 11) {
targetMonth = defaultMonth;
}
var isTargetDisabled = compareDate(disabledBefore, 'more', yearNav, targetMonth) || compareDate(disabledAfter, 'less', yearNav, targetMonth);
if (isTargetDisabled) {
for (var m = 0; m < monthBlock; m++) {
if (!(compareDate(disabledBefore, 'more', yearNav, m) || compareDate(disabledAfter, 'less', yearNav, m))) {
targetMonth = m;
break;
}
}
}
var effectiveFocusedMonth = targetMonth;
return Array.from({
length: noOfRows
}, function (_y, row) {
return /*#__PURE__*/React.createElement("div", {
key: row,
role: "row",
className: styles$17['Calendar-valueRow']
}, Array.from({
length: monthsInRow
}, function (_x, col) {
var month = monthsInRow * row + col;
var disabled = compareDate(disabledBefore, 'more', yearNav, month) || compareDate(disabledAfter, 'less', yearNav, month);
var active = !disabled && year === yearNav && month === _this.state.month;
var isCurrentMonth = function isCurrentMonth() {
return currYear === yearNav && currMonth === month;
};
var wrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$17['Calendar-monthValueWrapper'], true), styles$17['Calendar-valueWrapper--disabled'], disabled));
var valueClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$17['Calendar-value'], true), styles$17['Calendar-value--active'], active), styles$17['Calendar-value--disabled'], disabled), styles$17['Calendar-monthValue'], true), styles$17["Calendar-monthValue--".concat(size)], size), styles$17['Calendar-value--currDateMonthYear'], isCurrentMonth()));
var getTextColor = classnames({
inverse: !active && !isCurrentMonth() && !disabled,
white: active,
'primary-dark': isCurrentMonth()
});
var getTextAppearance = function getTextAppearance() {
return disabled ? 'subtle' : 'default';
};
var textClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$17['Calendar-value--currDate'], isCurrentMonth() && !active), styles$17['Calendar-text'], true));
var isFocused = effectiveFocusedMonth === month;
return /*#__PURE__*/React.createElement("div", {
key: "".concat(row, "-").concat(col),
className: wrapperClass
}, /*#__PURE__*/React.createElement("button", {
type: "button",
role: "gridcell",
"data-test": "DesignSystem-Calendar--monthValue",
"data-calendar-month-cell": true,
"data-month": month,
className: valueClass,
tabIndex: isFocused ? 0 : -1,
"aria-label": months[month],
"aria-disabled": disabled,
"aria-selected": active,
"aria-current": isCurrentMonth() ? 'date' : undefined,
onClick: _this.selectMonth(month, disabled),
onKeyDown: function onKeyDown(ev) {
return _this.handleMonthCellKeyDown(ev, month, disabled);
},
onFocus: function onFocus() {
return _this.setState({
focusedMonth: month
});
},
onMouseOver: _this.monthMouseOverHandler.bind(_this, month, isCurrentMonth(), disabled)
}, /*#__PURE__*/React.createElement(Text$1, {
size: size === 'small' ? 'small' : 'regular',
color: getTextAppearance() === 'default' || isCurrentMonth() ? getTextColor : undefined,
appearance: getTextAppearance(),
className: textClass,
weight: active ? 'strong' : undefined
}, months[month])));
}));
});
});
_defineProperty$1(_this, "onDateRowMouseLeaveHandler", function () {
var rangePicker = _this.props.rangePicker;
if (rangePicker) {
_this.setState({
hoverDate: undefined
});
}
});
_defineProperty$1(_this, "handleMonthCellKeyDown", function (event, _month, disabled) {
if (disabled) {
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
}
if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown' && event.key !== 'ArrowLeft' && event.key !== 'ArrowRight' && event.key !== 'Home' && event.key !== 'End') {
return;
}
}
var container = _this.calendarWrapperRef.current;
if (!container) return;
var focusedMonth = _month;
var handled = handleMonthViewKeyDown({
event: event,
container: container,
focusedMonth: focusedMonth,
isMonthDisabled: function isMonthDisabled(m) {
return compareDate(_this.props.disabledBefore, 'more', _this.state.yearNav, m) || compareDate(_this.props.disabledAfter, 'less', _this.state.yearNav, m);
},
onNavigate: function onNavigate(newMonth) {
var didFocus = focusMonthCell(container, newMonth);
if (didFocus) {
_this.setState({
focusedMonth: newMonth
});
}
},
onSelect: function onSelect(m) {
_this.selectMonth(m)();
}
});
if (handled) {
event.stopPropagation();
}
});
_defineProperty$1(_this, "handleYearCellKeyDown", function (event, _year, _offset, disabled) {
if (disabled) {
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
}
if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown' && event.key !== 'ArrowLeft' && event.key !== 'ArrowRight' && event.key !== 'Home' && event.key !== 'End' && event.key !== 'PageUp' && event.key !== 'PageDown') {
return;
}
}
var container = _this.calendarWrapperRef.current;
if (!container) return;
var yearBlockNav = _this.state.yearBlockNav;
var focusedYearIndex = _offset;
var handled = handleYearViewKeyDown({
event: event,
container: container,
focusedYearIndex: focusedYearIndex,
yearBlockStart: yearBlockNav,
isYearDisabled: function isYearDisabled(y) {
return compareDate(_this.props.disabledBefore, 'more', y) || compareDate(_this.props.disabledAfter, 'less', y);
},
onNavigate: function onNavigate(newYearIndex) {
var didFocus = focusYearCell(container, newYearIndex);
if (didFocus) {
_this.setState({
focusedYearIndex: newYearIndex
});
}
},
onSelect: function onSelect(y) {
_this.selectYear(y)();
},
onPageUp: function onPageUp() {
return _this.onNavIconClickHandler('prev')();
},
onPageDown: function onPageDown() {
return _this.onNavIconClickHandler('next')();
}
});
if (handled) {
event.stopPropagation();
}
});
_defineProperty$1(_this, "handleDateCellKeyDown", function (ev, index, _row, _col, _noOfRows, date, prevMonthDayRange, dayRange, inRangeError, rangePicker, startDate, endDate) {
var container = _this.calendarWrapperRef.current;
if (!container) return;
var _this$getNavDateInfo3 = _this.getNavDateInfo(index),
yearNavVal = _this$getNavDateInfo3.year,
monthNavVal = _this$getNavDateInfo3.month;
var displayDate = date <= 0 ? prevMonthDayRange + date : date > dayRange ? date - dayRange : date;
var focusedDate = _this.calculateDate(index, date, prevMonthDayRange, dayRange, true) || _this.getDateValue(yearNavVal, monthNavVal, displayDate) || new Date();
var handled = handleDateViewKeyDown({
event: ev,
container: container,
focusedDate: focusedDate,
startOfWeekIndex: getIndexOfDay(_this.props.firstDayOfWeek),
isDateDisabled: function isDateDisabled(d) {
return compareDate(_this.props.disabledBefore, 'more', d.getFullYear(), d.getMonth(), d.getDate()) || compareDate(_this.props.disabledAfter, 'less', d.getFullYear(), d.getMonth(), d.getDate());
},
onNavigate: function onNavigate(newDate) {
// Here we need to check if newDate falls out of bounds of current view
var _this$state8 = _this.state,
yearNav = _this$state8.yearNav,
monthNav = _this$state8.monthNav;
var monthsInView = _this.props.monthsInView;
var isVisible = function isVisible(target) {
for (var i = 0; i < monthsInView; i++) {
var _this$getNavDateInfo4 = _this.getNavDateInfo(i),
year = _this$getNavDateInfo4.year,
month = _this$getNavDateInfo4.month;
if (target.getFullYear() === year && target.getMonth() === month) {
return {
visible: true,
monthIndex: i
};
}
}
return {
visible: false
};
};
var targetVisibility = isVisible(newDate);
if (targetVisibility.visible) {
// Date is in view, we can just jump focus to it directly
var pos = _this.getDateGridPosition(newDate.getFullYear(), newDate.getMonth(), newDate.getDate());
if (pos) {
var didFocus = focusDateCell(container, pos.row, pos.col, targetVisibility.monthIndex);
if (didFocus) {
_this.setState({
focusedDateRow: pos.row,
focusedDateCol: pos.col,
focusedDateMonthIndex: targetVisibility.monthIndex
});
}
}
} else {
// Date is NOT in view. We need to shift the view.
// For now, let's just trigger a month nav forward/back based on the direction.
var currentVisibleStart = _this.getDateValue(yearNav, monthNav, 1);
if (newDate < currentVisibleStart) {
// Need to navigate backward
_this.setState({
monthNav: (config.monthBlock + monthNav - 1) % config.monthBlock,
yearNav: monthNav === 0 ? yearNav - 1 : yearNav,
pendingFocusDate: newDate
});
} else {
// Need to navigate forward
_this.setState({
monthNav: (monthNav + 1) % config.monthBlock,
yearNav: monthNav === config.monthBlock - 1 ? yearNav + 1 : yearNav,
pendingFocusDate: newDate
});
}
}
},
onSelect: function onSelect() {
if (rangePicker) {
if (startDate && endDate) {
_this.selectDate(index, date, prevMonthDayRange, dayRange);
} else if (!inRangeError) {
_this.selectDate(index, date, prevMonthDayRange, dayRange);
}
} else {
_this.selectDate(index, date, prevMonthDayRange, dayRange);
}
},
onPageUp: function onPageUp() {
return _this.onNavIconClickHandler('prev')();
},
onPageDown: function onPageDown() {
return _this.onNavIconClickHandler('next')();
},
onShiftPageUp: function onShiftPageUp() {
var yearNav = _this.state.yearNav;
_this.setState({
yearNav: yearNav - 1,
yearBlockNav: getYearBlock(yearNav - 1)
});
},
onShiftPageDown: function onShiftPageDown() {
var yearNav = _this.state.yearNav;
_this.setState({
yearNav: yearNav + 1,
yearBlockNav: getYearBlock(yearNav + 1)
});
}
});
if (handled) {
ev.stopPropagation();
}
});
_defineProperty$1(_this, "renderBodyDate", function (index) {
var daysInRow = config.daysInRow,
days = config.days;
var _this$props6 = _this.props,
size = _this$props6.size,
firstDayOfWeek = _this$props6.firstDayOfWeek;
var textSize = size === 'large' ? 'regular' : 'small';
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: styles$17['Calendar-dayValues'],
role: "row"
}, Array.from({
length: 7
}, function (_x, day) {
var valueClass = classnames(_defineProperty$1({}, styles$17['Calendar-valueWrapper'], true));
var dayValue = (day + daysInRow + getIndexOfDay(firstDayOfWeek)) % daysInRow;
return /*#__PURE__*/React.createElement("div", {
key: day,
role: "columnheader",
className: valueClass
}, /*#__PURE__*/React.createElement(Text$1, {
appearance: "default",
weight: "strong",
size: textSize
}, days[size][dayValue]));
})), /*#__PURE__*/React.createElement("div", {
className: styles$17['Calendar-dateValues'],
role: "rowgroup",
onMouseLeave: _this.onDateRowMouseLeaveHandler
}, _this.renderDateValues(index)));
});
_defineProperty$1(_this, "renderDateValues", function (index) {
var _ref, _ref2;
var daysInRow = config.daysInRow,
monthBlock = config.monthBlock;
var _this$props7 = _this.props,
size = _this$props7.size,
rangePicker = _this$props7.rangePicker,
firstDayOfWeek = _this$props7.firstDayOfWeek,
disabledBefore = _this$props7.disabledBefore,
disabledAfter = _this$props7.disabledAfter,
monthsInView = _this$props7.monthsInView,
onDateHover = _this$props7.onDateHover;
var _this$state9 = _this.state,
startDate = _this$state9.startDate,
endDate = _this$state9.endDate,
hoverDate = _this$state9.hoverDate,
yearState = _this$state9.year,
monthState = _this$state9.month,
dateState = _this$state9.date,
currMonth = _this$state9.currMonth,
currYear = _this$state9.currYear,
todayDate = _this$state9.todayDate,
focusedDateRow = _this$state9.focusedDateRow,
focusedDateCol = _this$state9.focusedDateCol,
focusedDateMonthIndex = _this$state9.focusedDateMonthIndex;
var _this$getNavDateInfo5 = _this.getNavDateInfo(index),
yearNavVal = _this$getNavDateInfo5.year,
monthNavVal = _this$getNavDateInfo5.month;
var prevMonth = monthNavVal - 1;
var prevYear = yearNavVal;
var prevMonthDayRange = getDaysInMonth(prevYear, prevMonth);
var dayRange = getDaysInMonth(yearNavVal, monthNavVal);
var firstDayIndex = getFirstDayOfMonth(yearNavVal, monthNavVal);
var desiredFirstDayIndex = getIndexOfDay(firstDayOfWeek);
var dayDiff = (firstDayIndex - desiredFirstDayIndex + 7) % 7;
var dummyDays = Math.abs(dayDiff);
var noOfRows = Math.ceil((dayRange + dummyDays) / daysInRow);
// if(noOfRows !== 6 && monthsInView <= 1) ?
if (noOfRows === 6) ; else if (monthsInView > 1) ; else {
noOfRows = noOfRows + 1;
}
var inRangeError = _this.getInRangeError();
var events = _this.props.events;
var onClickHandler = function onClickHandler(date, disabled) {
return function () {
if (disabled) return;
if (rangePicker) {
if (startDate && endDate) {
_this.selectDate(index, date, prevMonthDayRange, dayRange);
} else {
if (!inRangeError) _this.selectDate(index, date, prevMonthDayRange, dayRange);
}
} else {
_this.selectDate(index, date, prevMonthDayRange, dayRange);
}
};
};
var onMouseOverHandler = function onMouseOverHandler(date) {
return function () {
if (rangePicker) {
var d = _this.getDateValue(yearNavVal, monthNavVal, date);
if (!startDate || !endDate) {
_this.setState({
hoverDate: d
});
}
}
};
};
var onMouseEnterHandler = function onMouseEnterHandler(date, isToday, isDisabled, ev) {
var d = _this.calculateDate(index, date, prevMonthDayRange, dayRange, true) || new Date();
var months = config.months,
days = config.days;
var dayName = days.large[d.getDay()];
var dateData = {
value: d.getDate(),
isToday: isToday,
isDisabled: isDisabled,
todayDate: _this.state.currDate,
fullDate: d,
date: d.getDate(),
month: months[d.getMonth()],
year: d.getFullYear(),
dayName: dayName
};
if (onDateHover) onDateHover(dateData, ev);
};
var selectedPos = yearState === yearNavVal && monthState === monthNavVal && dateState ? _this.getDateGridPosition(yearNavVal, monthNavVal, dateState) : null;
var effectiveRow = (_ref = focusedDateRow !== null && focusedDateRow !== void 0 ? focusedDateRow : selectedPos === null || selectedPos === void 0 ? void 0 : selectedPos.row) !== null && _ref !== void 0 ? _ref : 0;
var effectiveCol = (_ref2 = focusedDateCol !== null && focusedDateCol !== void 0 ? focusedDateCol : selectedPos === null || selectedPos === void 0 ? void 0 : selectedPos.col) !== null && _ref2 !== void 0 ? _ref2 : 0;
var effectiveMonthIndex = focusedDateMonthIndex !== null && focusedDateMonthIndex !== void 0 ? focusedDateMonthIndex : selectedPos && selectedPos.row >= 0 && selectedPos.col >= 0 ? index : index === 0 ? 0 : -1;
var maxValidRow = noOfRows - 1;
var clampedRow = Math.min(effectiveRow, maxValidRow);
var finalFocusRow = clampedRow;
var finalFocusCol = effectiveCol;
if (effectiveMonthIndex === index) {
var isValidFocus = function isValidFocus(r, c) {
var d = daysInRow * r + c - dummyDays + 1;
var isDummy = d <= 0 || d > dayRange;
var renders = !isDummy;
if (isDummy) {
if (monthsInView === 1) renders = true;else if (index === 0) renders = d <= 0;else if (index === monthsInView - 1) renders = d > dayRange;
}
if (!renders) return false;
var actualD = _this.getDateValue(yearNavVal, monthNavVal, d) || new Date();
var disabled = compareDate(disabledBefore, 'more', actualD.getFullYear(), actualD.getMonth(), actualD.getDate()) || compareDate(disabledAfter, 'less', actualD.getFullYear(), actualD.getMonth(), actualD.getDate());
return !disabled;
};
if (!isValidFocus(clampedRow, effectiveCol)) {
var found = false;
if (yearState === yearNavVal && monthState === monthNavVal && dateState) {
var pos = _this.getDateGridPosition(yearNavVal, monthNavVal, dateState);
if (pos && isValidFocus(pos.row, pos.col)) {
finalFocusRow = pos.row;
finalFocusCol = pos.col;
found = true;
}
}
if (!found) {
for (var d = 1; d <= dayRange; d++) {
var _pos = _this.getDateGridPosition(yearNavVal, monthNavVal, d);
if (_pos && isValidFocus(_pos.row, _pos.col)) {
finalFocusRow = _pos.row;
finalFocusCol = _pos.col;
found = true;
break;
}
}
}
if (!found) {
for (var r = 0; r < noOfRows; r++) {
for (var c = 0; c < daysInRow; c++) {
if (isValidFocus(r, c)) {
finalFocusRow = r;
finalFocusCol = c;
found = true;
break;
}
}
if (found) break;
}
}
}
}
return Array.from({
length: noOfRows
}, function (_y, row) {
return /*#__PURE__*/React.createElement("div", {
key: row,
role: "row",
className: styles$17['Calendar-valueRow']
}, Array.from({
length: daysInRow
}, function (_x, colIndex) {
var _classNames10, _classNames11;
var date = daysInRow * row + colIndex - dummyDays + 1;
var dummy = date <= 0 || date > dayRange;
var actualDateObj = _this.getDateValue(yearNavVal, monthNavVal, date) || new Date();
var disabled = compareDate(disabledBefore, 'more', actualDateObj.getFullYear(), actualDateObj.getMonth(), actualDateObj.getDate()) || compareDate(disabledAfter, 'less', actualDateObj.getFullYear(), actualDateObj.getMonth(), actualDateObj.getDate());
var active = !disabled && yearState === yearNavVal && monthState === monthNavVal && dateState === date;
var today = function today() {
return actualDateObj.getFullYear() === currYear && actualDateObj.getMonth() === currMonth && actualDateObj.getDate() === todayDate;
};
var startActive = false;
var endActive = false;
var inRange = false;
var inRangeLast = false;
var _getDateInfo4 = getDateInfo(startDate),
sYear = _getDateInfo4.year,
sMonth = _getDateInfo4.month,
sDate = _getDateInfo4.date;
var _getDateInfo5 = getDateInfo(endDate),
eYear = _getDateInfo5.year,
eMonth = _getDateInfo5.month,
eDate = _getDateInfo5.date;
var isStart = startActive || endDate && inRangeLast && compareDate(hoverDate, 'less', eYear, eMonth, eDate);
var isEnd = endActive || startDate && inRangeLast && compareDate(hoverDate, 'more', sYear, sMonth, sDate);
var dateInString = "".concat(date <= 0 ? prevMonthDayRange + date : date > dayRange ? date - dayRange : date);
var monthInString = "".concat(date <= 0 ? monthNavVal === 0 ? monthNavVal + monthBlock : (monthNavVal - 1) % monthBlock + 1 : date > dayRange ? (monthNavVal + 1) % monthBlock + 1 : monthNavVal + 1);
var yearInString = "".concat(date <= 0 && monthNavVal + 1 === 1 ? yearNavVal - 1 : date > dayRange && monthNavVal + 1 === 12 ? yearNavVal + 1 : yearNavVal);
var completeDateString = "".concat(monthInString.length === 2 ? monthInString : "0".concat(monthInString), "/").concat(dateInString.length === 2 ? dateInString : "0".concat(dateInString), "/").concat(yearInString);
var isEventExist = events && _typeof(events) === 'object' && events.hasOwnProperty(completeDateString);
if (rangePicker) {
startActive = compareDate(startDate, 'equal', yearNavVal, monthNavVal, date);
endActive = compareDate(endDate, 'equal', yearNavVal, monthNavVal, date);
inRangeLast = compareDate(hoverDate, 'equal', yearNavVal, monthNavVal, date);
active = !disabled && (startActive || endActive);
if (startDate && endDate) {
inRange = !disabled && (dateComparison(startDate, 'less', dateInString, monthInString, yearInString) && dateComparison(endDate, 'more', dateInString, monthInString, yearInString) || startActive || endActive);
} else if (startDate) {
inRange = !disabled && (dateComparison(hoverDate, 'more', dateInString, monthInString, yearInString) || inRangeLast) && dateComparison(startDate, 'less', dateInString, monthInString, yearInString);
} else if (endDate) {
inRange = !disabled && (dateComparison(hoverDate, 'less', dateInString, monthInString, yearInString) || inRangeLast) && dateComparison(endDate, 'more', dateInString, monthInString, yearInString);
}
}
var isRangeError = inRange && inRangeError;
var isStartActive = startDate && dateComparison(startDate, 'equal', dateInString, monthInString, yearInString);
var isEndActive = endDate && dateComparison(endDate, 'equal', dateInString, monthInString, yearInString);
var activeDate = startDate && endDate && (isStartActive || isEndActive);
var isHoverBackwardLast = _this.props.allowReverseSelection && dateComparison(hoverDate, 'equal', dateInString, monthInString, yearInString) && hoverDate && (startDate && hoverDate < startDate || endDate && hoverDate < endDate);
var isHoverForwardLast = dateComparison(hoverDate, 'equal', dateInString, monthInString, yearInString) && hoverDate && startDate && hoverDate >= startDate;
var isEdgeElement = colIndex === 0 || colIndex === 6;
var isValueRange = inRange || rangePicker && (active || activeDate);
var wrapperClass = classnames((_classNames10 = {}, _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_classNames10, styles$17['Calendar-valueWrapper'], true), styles$17['Calendar-valueWrapper--disabled'], disabled), styles$17['Calendar-valueWrapper--inRange'], !isEdgeElement && isValueRange), styles$17['Calendar-valueWrapper--inEdgeRange'], isValueRange && isEdgeElement), styles$17['Calendar-valueWrapper--inRangeError'], isRangeError), styles$17['Calendar-valueWrapper--start'], isStart && !isEnd && colIndex !== 6 || rangePicker && isStartActive && colIndex !== 6), styles$17['Calendar-valueWrapper--end'], isEnd && !isStart && colIndex !== 0 || rangePicker && isEndActive && colIndex !== 0), styles$17['Calendar-valueWrapper--startEnd'], isStart && isEnd), styles$17['Calendar-valueWrapper--startError'], isStart && isRangeError || rangePicker && isRangeError && isStartActive), styles$17['Calendar-valueWrapper--endError'], isEnd && isRangeError || rangePicker && isRangeError && isEndActive), _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_classNames10, styles$17['Calendar-valueWrapper--dummy'], dummy && !disabled && !active && !activeDate), styles$17['Calendar-valueWrapper--active-dummy'], dummy && !disabled && (active || activeDate)), styles$17['Calendar-valueWrapper--hoverDate'], rangePicker && isHoverForwardLast), styles$17['Calendar-valueWrapper--hoverEndDate'], rangePicker && isHoverBackwardLast), styles$17['Calendar-valueWrapper--inStartRange'], isValueRange && colIndex === 0 && !active && !activeDate), styles$17['Calendar-valueWrapper--inEndRange'], isValueRange && colIndex === 6 && !active && !activeDate)));
var valueClass = classnames((_classNames11 = {}, _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_classNames11, styles$17['Calendar-value'], true), styles$17['Calendar-inRangeValue'], !isStart && !isEnd && !active && !activeDate), styles$17['Calendar-value--start'], isStart && !isEnd), styles$17['Calendar-value--end'], isEnd && !isStart), styles$17['Calendar-value--startError'], isStart && isRangeError), styles$17['Calendar-value--endError'], isEnd && isRangeError), styles$17['Calendar-value--active'], active || activeDate), styles$17['Calendar-value--disabled'], disabled), styles$17['Calendar-dateValue'], true), styles$17["Calendar-dateValue--".concat(size)], size), _defineProperty$1(_defineProperty$1(_classNames11, styles$17['Calendar-value--currDateMonthYear'], today()), styles$17['Calendar-value--currDate'], today() && !active && !activeDate)));
var getTextColor = classnames({
inverse: !active && !today() && !disabled && !activeDate,
white: active || activeDate,
'primary-dark': today()
});
var getTextAppearance = function getTextAppearance() {
return disabled ? 'subtle' : active || activeDate ? 'default' : dummy ? 'subtle' : 'default';
};
var displayDate = !dummy ? date : date <= 0 ? prevMonthDayRange + date : date - dayRange;
var fullDate = _this.calculateDate(index, date, prevMonthDayRange, dayRange, true) || _this.getDateValue(yearNavVal, monthNavVal, displayDate) || new Date();
var isFocused = effectiveMonthIndex === index && finalFocusRow === row && finalFocusCol === colIndex;
var dateCellContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
type: "button",
role: "gridcell",
"data-calendar-date-cell": true,
"data-row": row,
"data-col": colIndex,
"data-test": "DesignSystem-Calendar--dateValue",
className: valueClass,
tabIndex: isFocused ? 0 : -1,
"aria-label": formatDateAriaLabel(fullDate),
"aria-disabled": disabled,
"aria-selected": Boolean(active || activeDate),
"aria-current": today() ? 'date' : undefined,
onClick: onClickHandler(date, disabled),
onKeyDown: function onKeyDown(ev) {
return _this.handleDateCellKeyDown(ev, index, row, colIndex, noOfRows, date, prevMonthDayRange, dayRange, inRangeError, !!rangePicker, startDate, endDate);
},
onFocus: function onFocus() {
return _this.setState({
focusedDateRow: row,
focusedDateCol: colIndex,
focusedDateMonthIndex: index
});
},
onMouseOver: onMouseOverHandler(date),
onMouseEnter: onMouseEnterHandler.bind(_this, date, today(), disabled)
}, /*#__PURE__*/React.createElement(Text$1, {
color: getTextAppearance() === 'default' || today() ? getTextColor : undefined,
appearance: getTextAppearance(),
size: size === 'small' ? 'small' : 'regular',
weight: active || activeDate ? 'strong' : undefined
}, displayDate)), isEventExist && _this.renderEventsIndicator(size, active));
// Only render dummy dates on outer edges in multi-month view
// In monthsInView > 1, prevent duplicate rendering of boundary dates
var _this$props$monthsInV = _this.props.monthsInView,
monthsInView = _this$props$monthsInV === void 0 ? 1 : _this$props$monthsInV;
var shouldRenderDummy = !dummy;
if (dummy) {
if (monthsInView === 1) {
shouldRenderDummy = true;
} else if (index === 0) {
shouldRenderDummy = date <= 0; // Only leading dummies
} else if (index === monthsInView - 1) {
shouldRenderDummy = date > dayRange; // Only trailing dummies
}
}
return /*#__PURE__*/React.createElement("div", {
key: "".concat(row, "-").concat(colIndex),
className: wrapperClass,
"data-test": "designSystem-Calendar-WrapperClass"
}, shouldRenderDummy && dateCellContent);
}));
});
});
_defineProperty$1(_this, "renderCalendar", function (index) {
var _this$props8 = _this.props,
size = _this$props8.size,
monthsInView = _this$props8.monthsInView;
var view = _this.state.view;
var containerClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$17['Calendar'], true), styles$17["Calendar-".concat(view, "--").concat(size)], view), styles$17["Calendar--".concat(size)], size));
var headerClass = classnames(_defineProperty$1({}, styles$17["Calendar-header--".concat(size)], size));
var bodyClass = classnames(_defineProperty$1({}, styles$17['Calendar-body'], true));
return /*#__PURE__*/React.createElement("div", {
key: index,
"data-test": "DesignSystem-Calendar",
"data-calendar-index": index,
className: containerClass
}, /*#__PURE__*/React.createElement("div", {
className: headerClass
}, index === 0 && _this.renderJumpButton('prev'), _this.renderHeaderContent(index), index === monthsInView - 1 && _this.renderJumpButton('next')), /*#__PURE__*/React.createElement("div", {
className: bodyClass,
role: "grid"
}, view === 'year' && _this.renderBodyYear(), view === 'month' && _this.renderBodyMonth(), view === 'date' && _this.renderBodyDate(index)));
});
_defineProperty$1(_this, "setCalendarWrapperRef", function (node) {
_this.calendarWrapperRef.current = node;
var wrapperRef = _this.props.wrapperRef;
if (!wrapperRef) return;
if (typeof wrapperRef === 'function') {
wrapperRef(node);
} else {
wrapperRef.current = node;
}
});
var _this$props9 = _this.props,
_rangePicker = _this$props9.rangePicker,
_startDate = _this$props9.startDate,
_endDate = _this$props9.endDate,
_monthsInView = _this$props9.monthsInView,
_view = _this$props9.view;
var currDate = _rangePicker ? _endDate || _startDate : props.date;
var _yearNav = props.yearNav !== undefined ? props.yearNav : getDateInfo(currDate || Date.now()).year;
var _monthNav = props.monthNav !== undefined ? props.monthNav : getDateInfo(currDate || Date.now()).month;
var _getDateInfo6 = getDateInfo(currDate),
_year2 = _getDateInfo6.year,
_month2 = _getDateInfo6.month,
_date = _getDateInfo6.date;
var todayCompleteDate = getDateInfo(new Date(Date.now()));
_this.state = {
currDate: currDate,
startDate: _startDate,
endDate: _endDate,
yearNav: _yearNav,
monthNav: _monthNav,
year: _year2,
month: _month2,
date: _date,
todayDate: todayCompleteDate.date,
currMonth: todayCompleteDate.month,
currYear: todayCompleteDate.year,
view: _monthsInView > 1 ? 'date' : _view,
yearBlockNav: getYearBlock(_yearNav),
pendingFocusDate: undefined
};
return _this;
}
_inherits(Calendar, _React$Component);
return _createClass(Calendar, [{
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
var _prevState$startDate, _this$state$startDate, _this$state$endDate, _prevState$endDate, _this$state$endDate2;
var monthsInView = this.props.monthsInView;
if (prevProps.date !== this.props.date) {
var _getDateInfo7 = getDateInfo(this.props.date),
year = _getDateInfo7.year,
month = _getDateInfo7.month,
date = _getDateInfo7.date;
this.updateState(year, month, date);
var d = convertToDate(this.props.date);
this.setState({
currDate: d
});
}
if (this.props.startDate && !isNaN(this.props.startDate.getTime()) && prevProps.startDate !== this.props.startDate) {
var _d = convertToDate(this.props.startDate);
this.setState({
startDate: _d
});
}
if (this.props.endDate && !isNaN(this.props.endDate.getTime()) && prevProps.endDate !== this.props.endDate) {
var _d2 = convertToDate(this.props.endDate);
this.setState({
endDate: _d2
});
}
if (prevProps.view !== this.props.view) {
if (this.props.monthsInView === 1) {
this.setState({
view: this.props.view
});
}
}
if (prevProps.yearNav !== this.props.yearNav) {
var yearNav = this.props.yearNav;
if (yearNav) {
this.setState({
yearNav: yearNav,
yearBlockNav: getYearBlock(yearNav)
});
}
}
if (prevProps.monthNav !== this.props.monthNav) {
var monthNav = this.props.monthNav;
if (monthNav) {
this.setState({
monthNav: monthNav
});
}
}
if (prevState.currDate !== this.state.currDate) {
var _this$props10 = this.props,
rangePicker = _this$props10.rangePicker,
onDateChange = _this$props10.onDateChange;
var _this$state10 = this.state,
currDate = _this$state10.currDate,
startDate = _this$state10.startDate,
endDate = _this$state10.endDate;
if (currDate) {
if (onDateChange) onDateChange(currDate);
if (rangePicker) {
this.setState({
hoverDate: undefined
});
if (startDate && endDate) {
this.setState({
startDate: currDate,
endDate: undefined
});
} else {
var _getDateInfo8 = getDateInfo(currDate),
_year3 = _getDateInfo8.year,
_month3 = _getDateInfo8.month,
_date2 = _getDateInfo8.date;
if (startDate) {
if (compareDate(startDate, 'more', _year3, _month3, _date2)) {
this.setState({
startDate: currDate
});
} else {
this.setState({
endDate: currDate
});
}
} else if (endDate) {
if (compareDate(endDate, 'less', _year3, _month3, _date2)) {
this.setState({
endDate: currDate
});
} else {
this.setState({
startDate: currDate
});
}
} else {
this.setState({
startDate: currDate
});
}
}
} else {
this.setState({
startDate: currDate
});
}
}
}
if (this.state.startDate && !isNaN(this.state.startDate.getTime()) && ((_prevState$startDate = prevState.startDate) === null || _prevState$startDate === void 0 ? void 0 : _prevState$startDate.getTime()) !== ((_this$state$startDate = this.state.startDate) === null || _this$state$startDate === void 0 ? void 0 : _this$state$startDate.getTime()) || this.state.endDate && !isNaN((_this$state$endDate = this.state.endDate) === null || _this$state$endDate === void 0 ? void 0 : _this$state$endDate.getTime()) && ((_prevState$endDate = prevState.endDate) === null || _prevState$endDate === void 0 ? void 0 : _prevState$endDate.getTime()) !== ((_this$state$endDate2 = this.state.endDate) === null || _this$state$endDate2 === void 0 ? void 0 : _this$state$endDate2.getTime())) {
var onRangeChange = this.props.onRangeChange;
var _this$state11 = this.state,
_startDate2 = _this$state11.startDate,
_endDate2 = _this$state11.endDate;
if (onRangeChange) onRangeChange(_startDate2, _endDate2);
}
if (this.props.allowReverseSelection && prevState.hoverDate !== this.state.hoverDate) {
var _this$state12 = this.state,
hoverDate = _this$state12.hoverDate,
_startDate3 = _this$state12.startDate,
_endDate3 = _this$state12.endDate;
if (_startDate3 && !_endDate3) {
var _getDateInfo9 = getDateInfo(_startDate3),
_year4 = _getDateInfo9.year,
_month4 = _getDateInfo9.month,
_date3 = _getDateInfo9.date;
if (compareDate(hoverDate, 'less', _year4, _month4, _date3)) {
this.setState({
startDate: undefined,
endDate: _startDate3
});
}
} else if (_endDate3 && !_startDate3) {
var _getDateInfo10 = getDateInfo(_endDate3),
_year5 = _getDateInfo10.year,
_month5 = _getDateInfo10.month,
_date4 = _getDateInfo10.date;
if (compareDate(hoverDate, 'more', _year5, _month5, _date4)) {
this.setState({
startDate: _endDate3,
endDate: undefined
});
}
}
}
if (prevState.year !== this.state.year) {
var _year6 = this.state.year;
if (_year6 !== undefined && monthsInView === 1) {
this.setState({
year: _year6,
yearBlockNav: getYearBlock(_year6),
yearNav: _year6
});
}
}
if (prevState.month !== this.state.month) {
var _month6 = this.state.month;
if (_month6 !== undefined && monthsInView === 1) {
this.setState({
monthNav: _month6
});
}
}
if (this.state.pendingFocusDate) {
// Find the grid containing the pending date and focus it
var pendingFocusDate = this.state.pendingFocusDate;
var _monthsInView2 = this.props.monthsInView;
for (var i = 0; i < _monthsInView2; i++) {
var _this$getNavDateInfo6 = this.getNavDateInfo(i),
_year7 = _this$getNavDateInfo6.year,
_month7 = _this$getNavDateInfo6.month;
if (pendingFocusDate.getFullYear() === _year7 && pendingFocusDate.getMonth() === _month7) {
var pos = this.getDateGridPosition(_year7, _month7, pendingFocusDate.getDate());
if (pos && this.calendarWrapperRef.current) {
var focused = focusDateCell(this.calendarWrapperRef.current, pos.row, pos.col, i);
if (focused) {
this.setState({
pendingFocusDate: undefined,
focusedDateRow: pos.row,
focusedDateCol: pos.col,
focusedDateMonthIndex: i
});
return; // Successfully focused
}
}
break;
}
}
// Fallback 1: Try to focus the first valid focusable date cell
if (this.calendarWrapperRef.current) {
var firstFocusableDate = this.calendarWrapperRef.current.querySelector('[data-calendar-date-cell]:not([aria-disabled="true"]):not([disabled])');
if (firstFocusableDate) {
firstFocusableDate.focus({
preventScroll: true
});
this.setState({
pendingFocusDate: undefined
});
} else {
// Fallback 2: Focus calendar header
var headerBtn = this.calendarWrapperRef.current.querySelector('[class*="Calendar-headerButton"]:not([disabled]), [class*="Calendar-headerIcon"] button:not([disabled])');
if (headerBtn) {
headerBtn.focus({
preventScroll: true
});
}
this.setState({
pendingFocusDate: undefined
});
}
}
}
// Restore focus when it was dropped to body after nav (e.g. Next/Prev became disabled)
var navChanged = prevState.monthNav !== this.state.monthNav || prevState.yearNav !== this.state.yearNav || prevState.yearBlockNav !== this.state.yearBlockNav;
if (navChanged && document.activeElement === document.body && this.calendarWrapperRef.current) {
var _headerBtn = this.calendarWrapperRef.current.querySelector('[class*="Calendar-headerButton"]:not([disabled]), [class*="Calendar-headerIcon"] button:not([disabled])');
if (_headerBtn) {
_headerBtn.focus({
preventScroll: true
});
}
}
}
}, {
key: "renderEventsIndicator",
value: function renderEventsIndicator(size, active) {
var eventsIndicatorClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$17['Calendar-eventsIndicator'], true), styles$17["Calendar-eventsIndicator--".concat(size)], true), styles$17['Calendar-eventsIndicator--active'], active));
return /*#__PURE__*/React.createElement("span", {
"data-test": "DesignSystem-Calendar-Event-Indicator",
className: eventsIndicatorClass
});
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props11 = this.props,
monthsInView = _this$props11.monthsInView,
className = _this$props11.className,
ariaLabel = _this$props11['aria-label'],
ariaLabelledBy = _this$props11['aria-labelledby'];
var baseProps = extractBaseProps(this.props);
var classes = classnames(_defineProperty$1({}, styles$17['Calendar-wrapper'], true), className);
var defaultAriaLabel = ariaLabelledBy ? undefined : 'Calendar';
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
ref: this.setCalendarWrapperRef,
className: classes,
"data-test": "DesignSystem-Calendar-Wrapper",
"aria-label": ariaLabel || defaultAriaLabel,
"aria-labelledby": ariaLabelledBy
}), Array.from({
length: monthsInView
}, function (_x, index) {
return _this2.renderCalendar(index);
}));
}
}]);
}(React.Component);
_defineProperty$1(Calendar, "defaultProps", {
size: 'large',
monthsInView: 1,
view: 'date',
firstDayOfWeek: 'sunday',
jumpView: true
});
var css_248z$1g = "/* badge */\n\n.card-module-Card-3nZt4-4-30-3 {\n border-radius: var(--border-radius-10);\n border: var(--border-width-2-5) solid var(--secondary-light);\n position: relative;\n background-color: var(--white);\n}\n\n.card-module-Card--default-vE68u-4-30-3,\n.card-module-Card--light-ef-kI-4-30-3,\n.card-module-Card--medium-hfCda-4-30-3,\n.card-module-Card--dark-z4IwI-4-30-3 {\n border: none;\n box-shadow: var(--shadow-s);\n}\n\n.card-module-Card--shadow10-EQ0Tc-4-30-3 {\n border: none;\n box-shadow: var(--shadow-s);\n}\n\n.card-module-Card--shadow20-r2kA9-4-30-3 {\n border: none;\n box-shadow: var(--shadow-m);\n}\n\n.card-module-Card--shadow30-7DdVE-4-30-3 {\n border: none;\n box-shadow: var(--shadow-l);\n}\n\n.card-module-Card-header-L-wfV-4-30-3 {\n padding: var(--spacing-40) var(--spacing-40) var(--spacing-30) var(--spacing-40);\n}\n\n.card-module-Card-body-AWtGZ-4-30-3 {\n padding-left: var(--spacing-40);\n padding-right: var(--spacing-40);\n}\n\n.card-module-Card-footer-Gomt8-4-30-3 {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n position: absolute;\n bottom: 0;\n width: 100%;\n padding: var(--spacing-40);\n}\n\n.card-module-Card-footer--withSeperator-xBISR-4-30-3 {\n border-top: var(--border-width-2-5) solid var(--secondary-light);\n}\n\n@media (forced-colors: active) {\n /* box-shadow is stripped in forced-colors; add a real border so the card boundary is visible */\n .card-module-Card--default-vE68u-4-30-3,\n .card-module-Card--light-ef-kI-4-30-3,\n .card-module-Card--medium-hfCda-4-30-3,\n .card-module-Card--dark-z4IwI-4-30-3,\n .card-module-Card--shadow10-EQ0Tc-4-30-3,\n .card-module-Card--shadow20-r2kA9-4-30-3,\n .card-module-Card--shadow30-7DdVE-4-30-3 {\n border: var(--border-width-2-5) solid ButtonText;\n box-shadow: none;\n }\n}\n";
var styles$16 = {"Card":"card-module-Card-3nZt4-4-30-3","Card--default":"card-module-Card--default-vE68u-4-30-3","Card--light":"card-module-Card--light-ef-kI-4-30-3","Card--medium":"card-module-Card--medium-hfCda-4-30-3","Card--dark":"card-module-Card--dark-z4IwI-4-30-3","Card--shadow10":"card-module-Card--shadow10-EQ0Tc-4-30-3","Card--shadow20":"card-module-Card--shadow20-r2kA9-4-30-3","Card--shadow30":"card-module-Card--shadow30-7DdVE-4-30-3","Card-header":"card-module-Card-header-L-wfV-4-30-3","Card-body":"card-module-Card-body-AWtGZ-4-30-3","Card-footer":"card-module-Card-footer-Gomt8-4-30-3","Card-footer--withSeperator":"card-module-Card-footer--withSeperator-xBISR-4-30-3"};
styleInject(css_248z$1g);
var _excluded$1x = ["shadow", "children", "className"];
var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
var _props$shadow = props.shadow,
shadow = _props$shadow === void 0 ? 'shadow10' : _props$shadow,
children = props.children,
className = props.className,
rest = _objectWithoutProperties(props, _excluded$1x);
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$16.Card, true), styles$16["Card--".concat(shadow)], shadow), className);
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-Card",
ref: ref
}, rest, {
className: classes
}), children);
});
Card.displayName = 'Card';
Card.defaultProps = {
shadow: 'shadow10'
};
var css_248z$1f = ".cardSubdued-module-CardSubdued-cRpHh-4-30-3 {\n background: var(--card-subdued-bg);\n padding: var(--spacing-40);\n}\n\n.cardSubdued-module-CardSubdued--top-9xPTI-4-30-3 {\n border-top: var(--border-width-2-5) solid var(--secondary-light);\n}\n\n.cardSubdued-module-CardSubdued--left-5pkIL-4-30-3 {\n border-left: var(--border-width-2-5) solid var(--secondary-light);\n}\n\n.cardSubdued-module-CardSubdued--right-vqxr4-4-30-3 {\n border-right: var(--border-width-2-5) solid var(--secondary-light);\n}\n\n.cardSubdued-module-CardSubdued--bottom-fOplq-4-30-3 {\n border-bottom: var(--border-width-2-5) solid var(--secondary-light);\n}\n";
var styles$15 = {"CardSubdued":"cardSubdued-module-CardSubdued-cRpHh-4-30-3","CardSubdued--top":"cardSubdued-module-CardSubdued--top-9xPTI-4-30-3","CardSubdued--left":"cardSubdued-module-CardSubdued--left-5pkIL-4-30-3","CardSubdued--right":"cardSubdued-module-CardSubdued--right-vqxr4-4-30-3","CardSubdued--bottom":"cardSubdued-module-CardSubdued--bottom-fOplq-4-30-3"};
styleInject(css_248z$1f);
var _excluded$1w = ["border", "children", "className"];
var CardSubdued = /*#__PURE__*/React.forwardRef(function (props, ref) {
var border = props.border,
children = props.children,
className = props.className,
rest = _objectWithoutProperties(props, _excluded$1w);
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$15.CardSubdued, true), styles$15["CardSubdued--".concat(border)], border), className);
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-CardSubdued",
ref: ref
}, rest, {
className: classes
}), children);
});
CardSubdued.displayName = 'CardSubdued';
var CardHeader = function CardHeader(props) {
var className = props.className,
children = props.children;
var baseProps = extractBaseProps(props);
var classes = classnames(_defineProperty$1({}, styles$16['Card-header'], true), className);
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-CardHeader"
}, baseProps, {
className: classes
}), children);
};
CardHeader.displayName = 'CardHeader';
var CardBody = function CardBody(props) {
var className = props.className,
children = props.children;
var baseProps = extractBaseProps(props);
var classes = classnames(_defineProperty$1({}, styles$16['Card-body'], true), className);
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-CardBody"
}, baseProps, {
className: classes
}), children);
};
CardBody.displayName = 'CardBody';
var CardFooter = function CardFooter(props) {
var className = props.className,
children = props.children,
withSeperator = props.withSeperator;
var baseProps = extractBaseProps(props);
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$16['Card-footer'], true), styles$16['Card-footer--withSeperator'], withSeperator), className);
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-CardFooter"
}, baseProps, {
className: classes
}), children);
};
CardFooter.displayName = 'CardFooter';
CardFooter.defaultProps = {
withSeperator: true
};
var isEnterKey = function isEnterKey(e) {
return e.key === 'Enter';
};
var _excluded$1v = ["onClick", "onKeyDown", "role", "tabIndex"];
var allowed = {
button: new Set(['Enter', 'Space', 'Spacebar', ' ']),
link: new Set(['Enter']),
// onChange handles everything, no need for extra keyboard interaction
checkbox: new Set([]),
radio: new Set([])
};
// Refer for keyboard interactions: https://webaim.org/techniques/keyboard/#testing
var isKeyboardInteractionAllowed = function isKeyboardInteractionAllowed(role, key) {
if (!allowed[role]) {
return false;
}
var allowedKeys = allowed[role];
return allowedKeys.has(key);
};
var useAccessibilityProps = function useAccessibilityProps(_ref) {
var onClick = _ref.onClick,
_onKeyDown = _ref.onKeyDown,
_ref$role = _ref.role,
role = _ref$role === void 0 ? 'button' : _ref$role,
tabIndex = _ref.tabIndex,
ariaProps = _objectWithoutProperties(_ref, _excluded$1v);
// Only add interactive props when onClick is provided.
if (!onClick) {
return _objectSpread2({}, ariaProps);
}
return _objectSpread2(_objectSpread2({
onClick: onClick,
role: role,
tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0
}, ariaProps), {}, {
onKeyDown: function onKeyDown(e) {
if (_onKeyDown) {
_onKeyDown(e);
return;
}
var key = e.key;
if (isKeyboardInteractionAllowed(role, key)) {
e.preventDefault();
onClick(e);
}
}
});
};
var css_248z$1e = "/* Although the icons in the font can be scaled to any size, in accordance with material design icons guidelines, \n * we recommend them to be shown in either 18, 24, 36 or 48px. The default being 24px. \n * https://google.github.io/material-design-icons/\n */\n\n/* Rules for sizing the icon. */\n\n/* .material-icons.md-18 { font-size: 18px; }\n.material-icons.md-24 { font-size: 24px; }\n.material-icons.md-36 { font-size: 36px; }\n.material-icons.md-48 { font-size: 48px; } */\n\n/* Rules for using icons as black on a light background. */\n\n/* .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }\n.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } */\n\n/* Rules for using icons as white on a dark background. */\n\n/* .material-icons.md-light { color: rgba(255, 255, 255, 1); }\n.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } */\n.icon-module-Icon-2ZCUa-4-30-3 {\n flex-shrink: 0;\n overflow: hidden;\n flex-shrink: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n\n.icon-module-Icon--subtle-LctKY-4-30-3 {\n color: var(--text-subtle);\n}\n\n.icon-module-Icon--disabled-cfSpt-4-30-3 {\n color: var(--text-disabled);\n}\n\n.icon-module-Icon--destructive-hh3wH-4-30-3 {\n color: var(--text-destructive);\n}\n\n.icon-module-Icon--white-xVSQx-4-30-3 {\n color: var(--text-white);\n}\n\n.icon-module-Icon--default-gUL8T-4-30-3 {\n color: var(--text);\n}\n\n.icon-module-Icon--info-NPl0c-4-30-3 {\n color: var(--primary);\n}\n\n.icon-module-Icon--success--1Pol-4-30-3 {\n color: var(--success);\n}\n\n.icon-module-Icon--warning-vkwDf-4-30-3 {\n color: var(--warning);\n}\n\n.icon-module-Icon--alert-9wT0L-4-30-3 {\n color: var(--alert);\n}\n\n.icon-module-Icon--primary-5RS0y-4-30-3 {\n color: var(--primary);\n}\n\n.icon-module-Icon--primaryLighter-G9i-U-4-30-3 {\n color: var(--primary-lighter);\n}\n\n.icon-module-Icon--primaryDark-Z9EK7-4-30-3 {\n color: var(--primary-dark);\n}\n\n.icon-module-Icon--primaryDarker-WzRg--4-30-3 {\n color: var(--primary-darker);\n}\n\n.icon-module-Icon--alertLighter-6B-e7-4-30-3 {\n color: var(--alert-lighter);\n}\n\n.icon-module-Icon--alertDark-k7w0--4-30-3 {\n color: var(--alert-dark);\n}\n\n.icon-module-Icon--alertDarker-ZGpJS-4-30-3 {\n color: var(--alert-darker);\n}\n\n.icon-module-Icon--successLighter-NJRIN-4-30-3 {\n color: var(--success-lighter);\n}\n\n.icon-module-Icon--successDark-w7jA3-4-30-3 {\n color: var(--success-dark);\n}\n\n.icon-module-Icon--successDarker-whOmv-4-30-3 {\n color: var(--success-darker);\n}\n\n.icon-module-Icon--warningLighter-IjeGH-4-30-3 {\n color: var(--warning-lighter);\n}\n\n.icon-module-Icon--warningDark-c0V89-4-30-3 {\n color: var(--warning-dark);\n}\n\n.icon-module-Icon--warningDarker-Y1Zk1-4-30-3 {\n color: var(--warning-darker);\n}\n\n.icon-module-Icon--accent1-joGUJ-4-30-3 {\n color: var(--accent1);\n}\n\n.icon-module-Icon--accent1Lighter-ecAka-4-30-3 {\n color: var(--accent1-lighter);\n}\n\n.icon-module-Icon--accent1Dark-kWavq-4-30-3 {\n color: var(--accent1-dark);\n}\n\n.icon-module-Icon--accent1Darker-xkikD-4-30-3 {\n color: var(--accent1-darker);\n}\n\n.icon-module-Icon--accent2-U6Nln-4-30-3 {\n color: var(--accent2);\n}\n\n.icon-module-Icon--accent2Lighter-l-bdc-4-30-3 {\n color: var(--accent2-lighter);\n}\n\n.icon-module-Icon--accent2Dark-fQYZp-4-30-3 {\n color: var(--accent2-dark);\n}\n\n.icon-module-Icon--accent2Darker-fPTcU-4-30-3 {\n color: var(--accent2-darker);\n}\n\n.icon-module-Icon--accent3-pqiXT-4-30-3 {\n color: var(--accent3);\n}\n\n.icon-module-Icon--accent3Lighter-GdEsf-4-30-3 {\n color: var(--accent3-lighter);\n}\n\n.icon-module-Icon--accent3Dark-UrkMU-4-30-3 {\n color: var(--accent3-dark);\n}\n\n.icon-module-Icon--accent3Darker-h-Kf4-4-30-3 {\n color: var(--accent3-darker);\n}\n\n.icon-module-Icon--accent4-URPLg-4-30-3 {\n color: var(--accent4);\n}\n\n.icon-module-Icon--accent4Lighter-TfLqj-4-30-3 {\n color: var(--accent4-lighter);\n}\n\n.icon-module-Icon--accent4Dark-eMTg--4-30-3 {\n color: var(--accent4-dark);\n}\n\n.icon-module-Icon--accent4Darker-zY0fj-4-30-3 {\n color: var(--accent4-darker);\n}\n\n.icon-module-Icon--inverse-PaEaG-4-30-3 {\n color: var(--inverse);\n}\n";
var iconStyles = {"Icon":"icon-module-Icon-2ZCUa-4-30-3","Icon--subtle":"icon-module-Icon--subtle-LctKY-4-30-3","Icon--disabled":"icon-module-Icon--disabled-cfSpt-4-30-3","Icon--destructive":"icon-module-Icon--destructive-hh3wH-4-30-3","Icon--white":"icon-module-Icon--white-xVSQx-4-30-3","Icon--default":"icon-module-Icon--default-gUL8T-4-30-3","Icon--info":"icon-module-Icon--info-NPl0c-4-30-3","Icon--success":"icon-module-Icon--success--1Pol-4-30-3","Icon--warning":"icon-module-Icon--warning-vkwDf-4-30-3","Icon--alert":"icon-module-Icon--alert-9wT0L-4-30-3","Icon--primary":"icon-module-Icon--primary-5RS0y-4-30-3","Icon--primaryLighter":"icon-module-Icon--primaryLighter-G9i-U-4-30-3","Icon--primaryDark":"icon-module-Icon--primaryDark-Z9EK7-4-30-3","Icon--primaryDarker":"icon-module-Icon--primaryDarker-WzRg--4-30-3","Icon--alertLighter":"icon-module-Icon--alertLighter-6B-e7-4-30-3","Icon--alertDark":"icon-module-Icon--alertDark-k7w0--4-30-3","Icon--alertDarker":"icon-module-Icon--alertDarker-ZGpJS-4-30-3","Icon--successLighter":"icon-module-Icon--successLighter-NJRIN-4-30-3","Icon--successDark":"icon-module-Icon--successDark-w7jA3-4-30-3","Icon--successDarker":"icon-module-Icon--successDarker-whOmv-4-30-3","Icon--warningLighter":"icon-module-Icon--warningLighter-IjeGH-4-30-3","Icon--warningDark":"icon-module-Icon--warningDark-c0V89-4-30-3","Icon--warningDarker":"icon-module-Icon--warningDarker-Y1Zk1-4-30-3","Icon--accent1":"icon-module-Icon--accent1-joGUJ-4-30-3","Icon--accent1Lighter":"icon-module-Icon--accent1Lighter-ecAka-4-30-3","Icon--accent1Dark":"icon-module-Icon--accent1Dark-kWavq-4-30-3","Icon--accent1Darker":"icon-module-Icon--accent1Darker-xkikD-4-30-3","Icon--accent2":"icon-module-Icon--accent2-U6Nln-4-30-3","Icon--accent2Lighter":"icon-module-Icon--accent2Lighter-l-bdc-4-30-3","Icon--accent2Dark":"icon-module-Icon--accent2Dark-fQYZp-4-30-3","Icon--accent2Darker":"icon-module-Icon--accent2Darker-fPTcU-4-30-3","Icon--accent3":"icon-module-Icon--accent3-pqiXT-4-30-3","Icon--accent3Lighter":"icon-module-Icon--accent3Lighter-GdEsf-4-30-3","Icon--accent3Dark":"icon-module-Icon--accent3Dark-UrkMU-4-30-3","Icon--accent3Darker":"icon-module-Icon--accent3Darker-h-Kf4-4-30-3","Icon--accent4":"icon-module-Icon--accent4-URPLg-4-30-3","Icon--accent4Lighter":"icon-module-Icon--accent4Lighter-TfLqj-4-30-3","Icon--accent4Dark":"icon-module-Icon--accent4Dark-eMTg--4-30-3","Icon--accent4Darker":"icon-module-Icon--accent4Darker-zY0fj-4-30-3","Icon--inverse":"icon-module-Icon--inverse-PaEaG-4-30-3"};
styleInject(css_248z$1e);
var _excluded$1u = ["appearance", "className", "name", "size", "children", "type"];
// 'outline', 'rounded' to be deprecated soon.
var iconTypeMapper = {
timelapse: 'outlined',
content_copy: 'outlined',
speed: 'outlined',
add_circle_outline: 'outlined',
turned_in_not: 'outlined',
important_devices: 'outlined',
thumb_down_off_alt: 'outlined',
alarm_on: 'outlined',
calendar_view_month: 'outlined',
aspect_ratio: 'outlined',
change_history: 'outlined',
arrow_circle_down: 'outlined',
card_membership: 'outlined',
query_builder: 'outlined',
copyright: 'outlined',
arrow_circle_up: 'outlined',
alarm: 'outlined',
work_outline: 'outlined',
bookmark_border: 'outlined',
delete_outline: 'outlined',
credit_card: 'outlined',
highlight_of: 'outlined',
check_circle_outline: 'outlined',
help_outline: 'outlined',
schedule: 'outlined',
radio_button_unchecked: 'outlined',
radio_button_checked: 'outlined',
"delete": 'outlined'
};
/**
*
* <pre class="DocPage-codeBlock mx-6 mb-7">
* Following Icons are mapped to **outlined** type by default:
* <br />
* timelapse, content_copy, speed, add_circle_outline, turned_in_not, important_devices, thumb_down_off_alt, alarm_on, calendar_view_month, aspect_ratio, change_history, arrow_circle_down, card_membership, query_builder, copyright, arrow_circle_up, alarm, work_outline, bookmark_border, delete_outline, credit_card, highlight_of, check_circle_outline, help_outline, schedule, radio_button_unchecked, radio_button_checked, delete
* </pre>
*/
var Icon = function Icon(props) {
var appearance = props.appearance,
className = props.className,
name = props.name,
size = props.size,
children = props.children,
propsType = props.type,
rest = _objectWithoutProperties(props, _excluded$1u);
var accessibilityProps = useAccessibilityProps(rest);
var baseProps = extractBaseProps(props);
var onClick = rest.onClick;
var ariaLabel = rest['aria-label'];
var ariaLabelledby = rest['aria-labelledby'];
// Non-interactive icons render the material-symbols ligature (e.g. `fiber_manual_record`) as their
// text content. Without a role, assistive tech treats the `<i>` as generic and ignores aria-label,
// announcing the ligature text instead. `role="img"` makes the aria-label/aria-labelledby the
// accessible name and suppresses the ligature text. Interactive icons already get `role="button"`
// from `useAccessibilityProps` and must stay unchanged.
var labelledNonInteractive = !onClick && (ariaLabel || ariaLabelledby);
// A decorative icon carries no name of its own and cannot be focused, so its material-symbols
// ligature (e.g. `keyboard_arrow_down`) is a font implementation detail rather than content. Left
// exposed, it is concatenated into the accessible name of any ancestor control, e.g. a disclosure
// button announcing "keyboard_arrow_down AUTH POLICY". Hide it by default; consumers opt out by
// passing `aria-label`/`aria-labelledby` (which switch on `role="img"` above), by making the icon
// interactive with `onClick`, or with an explicit `aria-hidden={false}`.
var isDecorative = !onClick && !ariaLabel && !ariaLabelledby && rest.tabIndex === undefined;
var mapper = {
outline: 'outlined',
sharp: 'outlined',
round: 'rounded',
filled: 'rounded',
'two-tone': 'rounded'
};
var type = propsType && mapper[propsType] || propsType || name && iconTypeMapper[name] || 'rounded';
var getIconAppearance = function getIconAppearance(iconColor) {
var x = iconColor.indexOf('_');
return iconColor.slice(0, x) + iconColor.charAt(x + 1).toUpperCase() + iconColor.slice(x + 2);
};
var color = appearance && appearance.includes('_') ? getIconAppearance(appearance) : appearance;
var iconClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, 'material-symbols', true), 'material-symbols-rounded', type === 'rounded'), 'material-symbols-outlined', type === 'outlined'), iconStyles['Icon'], true), iconStyles["Icon--".concat(color)], appearance), "".concat(className), className));
var styles = {
fontSize: "".concat(size, "px"),
width: "".concat(size, "px")
};
// change `children` to {name} after migration
if (children && /*#__PURE__*/React.isValidElement(children)) {
return /*#__PURE__*/React.createElement("span", _extends$2({}, baseProps, {
className: className
}), children);
}
return /*#__PURE__*/React.createElement("i", _extends$2({
"data-test": "DesignSystem-Icon"
}, baseProps, {
className: iconClass,
style: styles,
role: labelledNonInteractive ? 'img' : undefined,
"aria-hidden": isDecorative || undefined
}, accessibilityProps), name);
};
Icon.displayName = 'Icon';
Icon.defaultProps = {
size: 16
};
var _excluded$1t = ["children", "componentType", "className"];
var GenericText = function GenericText(_ref, ref) {
var children = _ref.children,
_ref$componentType = _ref.componentType,
componentType = _ref$componentType === void 0 ? 'span' : _ref$componentType,
className = _ref.className,
rest = _objectWithoutProperties(_ref, _excluded$1t);
return /*#__PURE__*/React.createElement(componentType, _objectSpread2(_objectSpread2({}, rest), {}, {
className: className,
ref: ref
}), children);
};
var Link$1 = /*#__PURE__*/React.forwardRef(GenericText);
var css_248z$1d = "/* Text */\n.text-module-Text-s1VoI-4-30-3 {\n margin: 0;\n line-height: var(--font-height);\n}\n\n.text-module-Text--small-Jgkij-4-30-3 {\n font-size: var(--font-size-s);\n line-height: var(--font-height-normal);\n font-weight: var(--font-weight-medium);\n}\n\n.text-module-Text--regular-1srPn-4-30-3 {\n font-size: var(--font-size);\n line-height: var(--font-height);\n}\n\n.text-module-Text--large-dvoDb-4-30-3 {\n font-size: var(--font-size-m);\n line-height: var(--font-height-m);\n}\n\n.text-module-Text--default-8sTrE-4-30-3 {\n color: var(--text);\n}\n\n.text-module-Text--subtle-dIroX-4-30-3 {\n color: var(--text-subtle);\n}\n\n.text-module-Text--disabled-n3vwU-4-30-3 {\n color: var(--text-disabled);\n}\n\n.text-module-Text--destructive-IyHaq-4-30-3 {\n color: var(--text-destructive);\n}\n\n.text-module-Text--white-7KdSH-4-30-3 {\n color: var(--text-white);\n}\n\n.text-module-Text--success---5U--4-30-3 {\n color: var(--text-success);\n}\n\n.text-module-Text--link-xbXRL-4-30-3 {\n color: var(--text-link);\n}\n\n.text-module-Text--medium-NJhdl-4-30-3 {\n font-weight: var(--font-weight-medium);\n}\n\n.text-module-Text--strong-V4cio-4-30-3 {\n font-weight: var(--font-weight-bold);\n}\n";
var textStyles = {"Text":"text-module-Text-s1VoI-4-30-3","Text--small":"text-module-Text--small-Jgkij-4-30-3","Text--regular":"text-module-Text--regular-1srPn-4-30-3","Text--large":"text-module-Text--large-dvoDb-4-30-3","Text--default":"text-module-Text--default-8sTrE-4-30-3","Text--subtle":"text-module-Text--subtle-dIroX-4-30-3","Text--disabled":"text-module-Text--disabled-n3vwU-4-30-3","Text--destructive":"text-module-Text--destructive-IyHaq-4-30-3","Text--white":"text-module-Text--white-7KdSH-4-30-3","Text--success":"text-module-Text--success---5U--4-30-3","Text--link":"text-module-Text--link-xbXRL-4-30-3","Text--medium":"text-module-Text--medium-NJhdl-4-30-3","Text--strong":"text-module-Text--strong-V4cio-4-30-3"};
styleInject(css_248z$1d);
var _excluded$1s = ["appearance", "size", "children", "weight", "small", "className", "color", "as"];
var Text$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
var _props$appearance = props.appearance,
appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
_props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size,
children = props.children,
weight = props.weight,
small = props.small,
className = props.className,
color = props.color,
as = props.as,
rest = _objectWithoutProperties(props, _excluded$1s);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, textStyles.Text, true), textStyles["Text--".concat(appearance)], !color && appearance), textStyles["Text--".concat(weight)], weight), textStyles["Text--".concat(size)], size), "color-".concat(color), color), textStyles['Text--small'], size === 'small' || small), className);
return /*#__PURE__*/React.createElement(Link$1, _extends$2({
ref: ref,
"data-test": "DesignSystem-Text"
}, rest, {
className: classes,
componentType: as || 'span'
}), children);
});
Text$1.displayName = 'Text';
Text$1.defaultProps = {
appearance: 'default',
size: 'regular'
};
var css_248z$1c = ".chip-module-Chip-poUZ4-4-30-3 {\n display: flex;\n box-sizing: border-box;\n border-radius: var(--border-radius-30);\n width: -moz-fit-content;\n width: fit-content;\n justify-content: space-between;\n border-style: solid;\n border-width: var(--border-width-2-5);\n align-items: center;\n flex-direction: row;\n cursor: default;\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.chip-module-Chip-size--regular-VNFwg-4-30-3 {\n height: var(--spacing-60);\n}\n.chip-module-Chip-size--small-9pIoV-4-30-3 {\n height: 20px;\n}\n\n.chip-module-Chip-wrapper-pvcWT-4-30-3 {\n display: inline-flex;\n align-items: center;\n}\n\n.chip-module-Chip-content-07-mq-4-30-3 {\n display: flex;\n align-items: center;\n min-width: 0;\n flex: 1;\n align-self: stretch;\n padding-top: var(--spacing-05);\n padding-bottom: var(--spacing-05);\n padding-right: var(--spacing-20);\n}\n\n.chip-module-Chip-content--regular-6UA96-4-30-3 {\n padding-left: var(--spacing-20);\n}\n\n.chip-module-Chip-content--small-X2jbT-4-30-3 {\n padding-left: var(--spacing-15);\n}\n\n.chip-module-Chip-content-07-mq-4-30-3:focus-visible {\n outline: none;\n}\n\n.chip-module-Chip-icon--left-iQJW--4-30-3 {\n margin-right: var(--spacing-10);\n display: flex;\n align-items: center;\n}\n\n.chip-module-Chip-icon--right-UOlsF-4-30-3 {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--border-radius-full);\n}\n\n.chip-module-Chip-icon--rightSmall-PKKxo-4-30-3 {\n width: var(--spacing-60);\n height: var(--spacing-60);\n box-sizing: border-box;\n padding: var(--spacing-15);\n margin-left: calc(var(--spacing-05) * -1);\n margin-right: calc((var(--spacing-05) + var(--spacing-2-5)) * -1);\n flex-shrink: 0;\n}\n\n.chip-module-Chip--action-xkWzq-4-30-3 {\n background: var(--secondary-light);\n border: 0px;\n cursor: pointer;\n}\n\n.chip-module-Chip--action-xkWzq-4-30-3:hover {\n background: var(--secondary);\n}\n\n.chip-module-Chip--action-xkWzq-4-30-3:has(.chip-module-Chip-content-07-mq-4-30-3:focus-visible) {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.chip-module-Chip--action-xkWzq-4-30-3:active {\n background: var(--secondary-dark);\n}\n\n.chip-module-Chip-action--disabled-qik7a-4-30-3 {\n background: var(--secondary-light);\n opacity: var(--opacity-12);\n border: 0px;\n outline: none;\n cursor: not-allowed;\n}\n\n.chip-module-Chip--selection-OQh8T-4-30-3 {\n background: var(--shadow-0);\n border-color: var(--secondary);\n cursor: pointer;\n}\n\n.chip-module-Chip--selection-OQh8T-4-30-3:hover {\n background: var(--secondary-lighter);\n border-color: var(--secondary-dark);\n}\n\n.chip-module-Chip--selection-OQh8T-4-30-3:has(.chip-module-Chip-content-07-mq-4-30-3:focus-visible) {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.chip-module-Chip--selection-OQh8T-4-30-3:active {\n background: var(--secondary-light);\n border-color: var(--inverse-lightest);\n}\n\n.chip-module-Chip-selection--disabled-Wh7oX-4-30-3 {\n background: var(--white);\n border-color: var(--secondary);\n opacity: var(--opacity-12);\n cursor: not-allowed;\n}\n\n.chip-module-Chip-selection--selected-N7Nmu-4-30-3 {\n background: var(--primary-ultra-light);\n border-color: var(--primary);\n box-shadow: inset 0 0 0 1px var(--primary);\n}\n\n.chip-module-Chip-selection--selected-N7Nmu-4-30-3:hover {\n background: var(--primary-lightest);\n border-color: var(--primary);\n box-shadow: inset 0 0 0 1px var(--primary);\n}\n\n.chip-module-Chip-selection--selected-N7Nmu-4-30-3:has(.chip-module-Chip-content-07-mq-4-30-3:focus-visible) {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.chip-module-Chip-selection--selected-N7Nmu-4-30-3:active {\n background: var(--primary-lighter);\n border-color: var(--primary-dark);\n box-shadow: inset 0 0 0 1px var(--primary-dark);\n}\n\n.chip-module-Chip-selection--selected-N7Nmu-4-30-3:active .chip-module-Chip-icon-lfFwr-4-30-3,\n.chip-module-Chip-selection--selected-N7Nmu-4-30-3:active .chip-module-Chip-text-Y9aWF-4-30-3 {\n color: var(--primary-darker);\n}\n\n.chip-module-Chip-text--truncate-FdQRv-4-30-3 {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: inline;\n max-width: 100%;\n}\n\n.chip-module-Chip-selection--selectedDisabled-cqtgW-4-30-3 {\n background: var(--primary-ultra-light);\n border-color: var(--primary-lightest);\n box-shadow: inset 0 0 0 1px var(--primary-lightest);\n opacity: 1;\n}\n\n.chip-module-Chip--input-76VFm-4-30-3 {\n background: var(--secondary-light);\n font-weight: var(--font-weight-normal);\n border: 0px;\n}\n\n.chip-module-Chip--input-76VFm-4-30-3:hover {\n background: var(--secondary);\n}\n\n.chip-module-Chip--input-76VFm-4-30-3:has(.chip-module-Chip-content-07-mq-4-30-3:focus-visible) {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.chip-module-Chip--input-76VFm-4-30-3:active {\n background: var(--secondary-dark);\n}\n\n.chip-module-Chip-input--disabled-Xt12a-4-30-3 {\n background: var(--secondary-lighter);\n opacity: var(--opacity-12);\n cursor: not-allowed;\n border: 0px;\n}\n\n.chip-module-Chip-icon--right-UOlsF-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.chip-module-Chip-icon--right-UOlsF-4-30-3:hover {\n background-color: var(--secondary);\n}\n\n.chip-module-Chip-icon--right-UOlsF-4-30-3:active {\n background-color: var(--secondary-dark);\n}\n\n.chip-module-Chip-icon-disabled--right-Q8o-W-4-30-3 {\n pointer-events: none;\n}\n\n.chip-module-Chip-icon--selected-OTsQP-4-30-3 {\n border-radius: var(--border-radius-full);\n}\n\n.chip-module-Chip-icon--selected-OTsQP-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.chip-module-Chip-icon--selected-OTsQP-4-30-3:hover {\n background-color: var(--primary-lighter);\n}\n\n.chip-module-Chip-icon--selected-OTsQP-4-30-3:active {\n background-color: var(--primary-light);\n}\n\n.chip-module-Chip-selection--disabled-Wh7oX-4-30-3:has(.chip-module-Chip-content-07-mq-4-30-3:focus-visible),\n.chip-module-Chip-icon-disabled--right-Q8o-W-4-30-3:focus-visible,\n.chip-module-Chip-selection--selectedDisabled-cqtgW-4-30-3:has(.chip-module-Chip-content-07-mq-4-30-3:focus-visible),\n.chip-module-Chip-input--disabled-Xt12a-4-30-3:has(.chip-module-Chip-content-07-mq-4-30-3:focus-visible) {\n outline: none;\n}\n\n.chip-module-Chip-icon--clear-GujdY-4-30-3 .chip-module-Chip-content-07-mq-4-30-3 {\n padding-right: 0;\n}\n\n@media (forced-colors: active) {\n /* Action chips: border:0 makes them invisible — add a real border */\n .chip-module-Chip--action-xkWzq-4-30-3 {\n border: var(--border-width-2-5) solid ButtonText;\n }\n\n /* Input chips: border:0 makes them invisible — add a real border */\n .chip-module-Chip--input-76VFm-4-30-3 {\n border: var(--border-width-2-5) solid ButtonText;\n }\n\n /* Selected state uses inset box-shadow as a double border on top of the existing border-color */\n .chip-module-Chip-selection--selected-N7Nmu-4-30-3,\n .chip-module-Chip-selection--selected-N7Nmu-4-30-3:hover,\n .chip-module-Chip-selection--selected-N7Nmu-4-30-3:active,\n .chip-module-Chip-selection--selectedDisabled-cqtgW-4-30-3 {\n border-color: Highlight;\n box-shadow: none;\n }\n\n .chip-module-Chip-action--disabled-qik7a-4-30-3,\n .chip-module-Chip-input--disabled-Xt12a-4-30-3 {\n opacity: 1;\n color: GrayText;\n border: var(--border-width-2-5) solid GrayText;\n }\n\n .chip-module-Chip-selection--disabled-Wh7oX-4-30-3 {\n opacity: 1;\n color: GrayText;\n border-color: GrayText;\n }\n}\n";
var styles$14 = {"Chip":"chip-module-Chip-poUZ4-4-30-3","Chip-size--regular":"chip-module-Chip-size--regular-VNFwg-4-30-3","Chip-size--small":"chip-module-Chip-size--small-9pIoV-4-30-3","Chip-wrapper":"chip-module-Chip-wrapper-pvcWT-4-30-3","Chip-content":"chip-module-Chip-content-07-mq-4-30-3","Chip-content--regular":"chip-module-Chip-content--regular-6UA96-4-30-3","Chip-content--small":"chip-module-Chip-content--small-X2jbT-4-30-3","Chip-icon--left":"chip-module-Chip-icon--left-iQJW--4-30-3","Chip-icon--right":"chip-module-Chip-icon--right-UOlsF-4-30-3","Chip-icon--rightSmall":"chip-module-Chip-icon--rightSmall-PKKxo-4-30-3","Chip--action":"chip-module-Chip--action-xkWzq-4-30-3","Chip-action--disabled":"chip-module-Chip-action--disabled-qik7a-4-30-3","Chip--selection":"chip-module-Chip--selection-OQh8T-4-30-3","Chip-selection--disabled":"chip-module-Chip-selection--disabled-Wh7oX-4-30-3","Chip-selection--selected":"chip-module-Chip-selection--selected-N7Nmu-4-30-3","Chip-icon":"chip-module-Chip-icon-lfFwr-4-30-3","Chip-text":"chip-module-Chip-text-Y9aWF-4-30-3","Chip-text--truncate":"chip-module-Chip-text--truncate-FdQRv-4-30-3","Chip-selection--selectedDisabled":"chip-module-Chip-selection--selectedDisabled-cqtgW-4-30-3","Chip--input":"chip-module-Chip--input-76VFm-4-30-3","Chip-input--disabled":"chip-module-Chip-input--disabled-Xt12a-4-30-3","Chip-icon-disabled--right":"chip-module-Chip-icon-disabled--right-Q8o-W-4-30-3","Chip-icon--selected":"chip-module-Chip-icon--selected-OTsQP-4-30-3","Chip-icon--clear":"chip-module-Chip-icon--clear-GujdY-4-30-3"};
styleInject(css_248z$1c);
var GenericChip = function GenericChip(props) {
var _props$role, _props$clearButtonAri;
var label = props.label,
icon = props.icon,
clearButton = props.clearButton,
disabled = props.disabled,
className = props.className,
selected = props.selected,
onClose = props.onClose,
onClick = props.onClick,
labelPrefix = props.labelPrefix,
iconType = props.iconType,
maxWidth = props.maxWidth,
_props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size,
type = props.type;
var wrapperStyle = {
maxWidth: maxWidth
};
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
isTextTruncated = _React$useState2[0],
setIsTextTruncated = _React$useState2[1];
var _Tooltip$useAutoToolt = Tooltip.useAutoTooltip(),
detectTruncation = _Tooltip$useAutoToolt.detectTruncation;
var contentRef = /*#__PURE__*/React.createRef();
var IconSize = size === 'small' ? 14 : 16;
var ClearIconSize = size === 'small' ? 12 : 16;
React.useEffect(function () {
var isTruncated = detectTruncation(contentRef);
setIsTextTruncated(isTruncated);
}, [contentRef]);
var baseProps = extractBaseProps(props);
var iconClass = function iconClass(align) {
return classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$14['Chip-icon'], true), styles$14["Chip-icon--".concat(align)], align), styles$14['Chip-icon--rightSmall'], size === 'small' && align === 'right'), styles$14["Chip-icon-disabled--right"], align === 'right' && disabled), 'cursor-pointer', align === 'right' && !disabled), styles$14['Chip-icon--selected'], align === 'right' && selected), 'p-3', size === 'regular' && align === 'right'));
};
var onCloseHandler = function onCloseHandler(e) {
e.stopPropagation();
if (onClose) onClose();
};
var onClickHandler = function onClickHandler() {
if (onClick) onClick();
};
var onKeyDownHandler = function onKeyDownHandler(event) {
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
onCloseHandler(event);
}
};
var onChipKeyDownHandler = function onChipKeyDownHandler(event) {
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
onClickHandler();
}
};
var iconAppearance = function iconAppearance(align) {
return classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, 'primary_dark', selected && !disabled), 'primary_lighter', selected && disabled), 'subtle', !selected && align === 'right'), 'inverse', !selected && align === 'left'));
};
var chipTextClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$14['Chip-text'], true), 'mr-3', true));
var textColor = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, 'primary-dark', selected && !disabled), 'primary-lighter', selected && disabled), 'inverse', !disabled && !selected));
var renderLabel = function renderLabel() {
if (typeof label === 'string') {
return /*#__PURE__*/React.createElement("div", {
className: styles$14['Chip-text--truncate'],
ref: contentRef
}, labelPrefix && /*#__PURE__*/React.createElement(Text$1, {
"data-test": "DesignSystem-GenericChip--LabelPrefix",
weight: "medium",
color: textColor,
className: chipTextClass
}, labelPrefix), /*#__PURE__*/React.createElement(Text$1, {
"data-test": "DesignSystem-GenericChip--Text",
size: size,
color: textColor,
className: styles$14['Chip-text']
}, label));
}
return label;
};
var getTooltipText = function getTooltipText() {
var labelText = typeof label === 'string' ? label : '';
if (labelPrefix) {
return "".concat(labelPrefix, " ").concat(labelText);
}
return labelText;
};
var isWrapperInteractive = Boolean(onClick) || Boolean(props.role) || !clearButton;
var computedTabIndex = props.tabIndex !== undefined ? disabled ? -1 : props.tabIndex : disabled || !isWrapperInteractive ? -1 : 0;
var computedRole = (_props$role = props.role) !== null && _props$role !== void 0 ? _props$role : isWrapperInteractive ? 'button' : undefined;
var clearButtonAriaAttr = (_props$clearButtonAri = props.clearButtonAriaLabel) !== null && _props$clearButtonAri !== void 0 ? _props$clearButtonAri : typeof label === 'string' ? "Remove ".concat(label) : 'Remove';
var computedAriaLabel = function () {
if (props['aria-label']) return props['aria-label'];
if (clearButton && typeof label === 'string') {
return labelPrefix ? "".concat(labelPrefix, " ").concat(label) : label;
}
return undefined;
}();
var getAriaProps = function getAriaProps() {
var ariaProps = {};
if (type === 'selection') {
if (computedRole === 'button') {
ariaProps['aria-pressed'] = selected;
} else if (computedRole === 'checkbox' || computedRole === 'menuitemcheckbox' || computedRole === 'radio') {
ariaProps['aria-checked'] = selected;
} else if (computedRole === 'option' || computedRole === 'tab' || computedRole === 'treeitem') {
ariaProps['aria-selected'] = selected;
}
}
return ariaProps;
};
var chipContent = /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement(Icon, {
"data-test": "DesignSystem-GenericChip--Icon",
name: icon,
type: iconType,
size: IconSize,
appearance: iconAppearance('left'),
className: iconClass('left')
}), renderLabel());
return /*#__PURE__*/React.createElement(Tooltip, {
showTooltip: isTextTruncated,
"data-test": "DesignSystem-GenericChip--Tooltip",
tooltip: getTooltipText(),
triggerClass: "flex-grow-0"
}, /*#__PURE__*/React.createElement("div", _extends$2({
style: wrapperStyle,
"data-test": "DesignSystem-GenericChip--Wrapper"
}, baseProps, {
className: classnames(styles$14['Chip-wrapper'], className)
}), /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-GenericChip--Content",
role: computedRole,
tabIndex: computedTabIndex,
"aria-label": computedRole ? computedAriaLabel : undefined,
"aria-labelledby": computedRole ? props['aria-labelledby'] : undefined,
className: classnames(styles$14['Chip-content'], styles$14["Chip-content--".concat(size)]),
onClick: onClickHandler,
onKeyDown: onChipKeyDownHandler
}, getAriaProps()), chipContent), clearButton && /*#__PURE__*/React.createElement("div", {
role: "button",
"aria-label": clearButtonAriaAttr,
onClick: onCloseHandler,
tabIndex: disabled ? -1 : 0,
onKeyDown: onKeyDownHandler,
className: iconClass('right'),
"data-test": "DesignSystem-GenericChip--clearButton"
}, /*#__PURE__*/React.createElement(Icon, {
name: "clear",
appearance: iconAppearance('right'),
size: ClearIconSize
}))));
};
GenericChip.displayName = 'GenericChip';
GenericChip.defaultProps = {
maxWidth: 'var(--spacing-640)'
};
var Chip = function Chip(props) {
var label = props.label,
icon = props.icon,
clearButton = props.clearButton,
_props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size,
type = props.type,
disabled = props.disabled,
selected = props.selected,
onClose = props.onClose,
onClick = props.onClick,
name = props.name,
className = props.className,
labelPrefix = props.labelPrefix,
iconType = props.iconType,
maxWidth = props.maxWidth,
role = props.role,
ariaLabel = props['aria-label'],
ariaLabelledBy = props['aria-labelledby'],
clearButtonAriaLabel = props.clearButtonAriaLabel,
tabIndex = props.tabIndex;
var baseProps = extractBaseProps(props);
var onCloseHandler = function onCloseHandler() {
if (!disabled && onClose) onClose(name);
};
var onClickHandler = function onClickHandler() {
if (!disabled && onClick) onClick(name);
};
var clearbutton = type === 'action' ? false : clearButton;
var select = type === 'selection' && selected ? true : false;
var chipClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$14.Chip, true), styles$14["Chip-".concat(type, "--disabled")], disabled), styles$14["Chip--".concat(type)], type && !disabled), styles$14["Chip-".concat(type, "--selected")], selected && !disabled), styles$14["Chip-selection--selectedDisabled"], type === 'selection' && selected && disabled), styles$14['Chip-icon--clear'], clearbutton), styles$14["Chip-size--".concat(size)], size), className);
return /*#__PURE__*/React.createElement(GenericChip, _extends$2({
"data-test": "DesignSystem-Chip--GenericChip"
}, baseProps, {
label: label,
selected: select,
icon: icon,
size: size,
iconType: iconType,
clearButton: clearbutton,
disabled: disabled,
className: chipClass,
onClose: onCloseHandler,
onClick: onClick ? onClickHandler : undefined,
name: name,
labelPrefix: labelPrefix,
maxWidth: maxWidth,
type: type,
role: role,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
clearButtonAriaLabel: clearButtonAriaLabel,
tabIndex: tabIndex
}));
};
Chip.displayName = 'Chip';
Chip.defaultProps = {
type: 'input',
maxWidth: 'var(--spacing-640)'
};
var css_248z$1b = ".chipGroup-module-ChipGroup--1ERo-4-30-3 {\n display: inline-flex;\n}\n\n.chipGroup-module-ChipGroup-item-5ygP--4-30-3 {\n margin: 0 var(--spacing-10);\n}\n\n.chipGroup-module-ChipGroup-item-5ygP--4-30-3:first-child {\n margin-left: 0;\n}\n\n.chipGroup-module-ChipGroup-item-5ygP--4-30-3:last-child {\n margin-right: 0;\n}\n";
var styles$13 = {"ChipGroup":"chipGroup-module-ChipGroup--1ERo-4-30-3","ChipGroup-item":"chipGroup-module-ChipGroup-item-5ygP--4-30-3"};
styleInject(css_248z$1b);
var _excluded$1r = ["onClick", "onClose"];
var ChipGroup = function ChipGroup(props) {
var list = props.list,
onClick = props.onClick,
onClose = props.onClose,
className = props.className;
var baseProps = extractBaseProps(props);
var onClickHandler = function onClickHandler(item) {
if (onClick) onClick(item);
};
var onCloseHandler = function onCloseHandler(item) {
if (onClose) onClose(item);
};
var ChipGroupClass = classnames(_defineProperty$1({}, styles$13.ChipGroup, true), className);
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-ChipGroup"
}, baseProps, {
className: ChipGroupClass
}), list.map(function (item, ind) {
item.onClick;
item.onClose;
var chipProps = _objectWithoutProperties(item, _excluded$1r);
return /*#__PURE__*/React.createElement("span", {
key: ind,
className: styles$13['ChipGroup-item']
}, /*#__PURE__*/React.createElement(Chip, _extends$2({
"data-test": "DesignSystem-ChipGroup--Chip"
}, chipProps, {
onClick: function onClick() {
return onClickHandler(item);
},
onClose: function onClose() {
return onCloseHandler(item);
}
})));
}));
};
ChipGroup.displayName = 'ChipGroup';
var CheckboxIcon = function CheckboxIcon(props) {
switch (props.name) {
case 'checked--regular':
return /*#__PURE__*/React__default.createElement("svg", {
width: "10",
height: "8",
viewBox: "0 0 10 8",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React__default.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M3.66667 5.56L8.72667 0.5L9.66667 1.44667L3.66667 7.44667L0.333333 4.11333L1.27333 3.17333L3.66667 5.56Z",
fill: "white"
}));
case 'checked--tiny':
return /*#__PURE__*/React__default.createElement("svg", {
width: "10",
height: "8",
viewBox: "0 0 10 8",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React__default.createElement("path", {
d: "M0.333344 4L1.27334 3.06L3.66668 5.44667L8.72668 0.386665L9.66668 1.33333L3.66668 7.33333L0.333344 4Z",
fill: "white"
}));
case 'indeterminate--regular':
return /*#__PURE__*/React__default.createElement("svg", {
width: "10",
height: "2",
viewBox: "0 0 10 2",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React__default.createElement("path", {
d: "M0 0H10V2H0V0Z",
fill: "white"
}));
case 'indeterminate--tiny':
return /*#__PURE__*/React__default.createElement("svg", {
width: "8",
height: "2",
viewBox: "0 0 8 2",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React__default.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M8 0H0V2H8V0Z",
fill: "white"
}));
default:
return null;
}
};
var css_248z$1a = ".checkbox-module-Checkbox-Bxzy6-4-30-3 {\n display: flex;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n line-height: initial;\n box-sizing: border-box;\n padding-top: var(--spacing-05);\n padding-bottom: var(--spacing-05);\n}\n\n.checkbox-module-Checkbox-input-shIYv-4-30-3 {\n position: absolute;\n z-index: 2;\n opacity: 0;\n cursor: pointer;\n height: 100%;\n width: 100%;\n margin: 0;\n}\n\n.checkbox-module-Checkbox-labelWrapper-8RA7S-4-30-3 {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n\n.checkbox-module-Checkbox-label-1c-Z--4-30-3 {\n display: flex;\n cursor: pointer;\n margin-left: calc(-1 * var(--spacing-20));\n padding-left: var(--spacing-20);\n}\n\n.checkbox-module-Checkbox-label--tiny-4ICqD-4-30-3 {\n font-weight: var(--font-weight-bold);\n}\n\n.checkbox-module-Checkbox-outerWrapper-47kQq-4-30-3 {\n position: relative;\n margin-top: var(--spacing-05);\n margin-right: var(--spacing-20);\n}\n\n.checkbox-module-Checkbox-outerWrapper--regular-MXygQ-4-30-3 {\n height: var(--spacing-40);\n min-width: var(--spacing-40);\n}\n\n.checkbox-module-Checkbox-outerWrapper--tiny-g9Lcz-4-30-3 {\n height: var(--spacing-30);\n min-width: var(--spacing-30);\n}\n\n/* Type: Unchecked */\n\n.checkbox-module-Checkbox-wrapper-iH4AL-4-30-3 {\n top: 0;\n left: 0;\n border-radius: var(--border-radius-05);\n display: flex;\n align-items: center;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n justify-content: center;\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.checkbox-module-Checkbox-input-shIYv-4-30-3:focus {\n outline: 0;\n}\n\n.checkbox-module-Checkbox-input-shIYv-4-30-3:focus ~ .checkbox-module-Checkbox-wrapper-iH4AL-4-30-3 {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.checkbox-module-Checkbox-input-shIYv-4-30-3 ~ .checkbox-module-Checkbox-wrapper--default-Cs-Dj-4-30-3 {\n border: var(--border-width-2-5) solid var(--inverse-lighter);\n background-color: var(--shadow-0);\n}\n\n.checkbox-module-Checkbox-input-shIYv-4-30-3:hover ~ .checkbox-module-Checkbox-wrapper--default-Cs-Dj-4-30-3 {\n border: var(--border-width-2-5) solid var(--inverse-light);\n background-color: var(--secondary-lighter);\n}\n\n.checkbox-module-Checkbox-input-shIYv-4-30-3:active ~ .checkbox-module-Checkbox-wrapper--default-Cs-Dj-4-30-3 {\n border: var(--border-width-2-5) solid var(--inverse-light);\n background-color: var(--secondary-light);\n}\n\n.checkbox-module-Checkbox--disabled-j-irf-4-30-3 {\n pointer-events: none;\n}\n\n.checkbox-module-Checkbox--disabled-j-irf-4-30-3 .checkbox-module-Checkbox-wrapper--default-Cs-Dj-4-30-3 {\n border: var(--border-width-2-5) solid var(--secondary);\n background-color: var(--secondary-lightest);\n}\n\n/* Type: checked && Type: indeterminate */\n\n.checkbox-module-Checkbox-input--checked-1V8bz-4-30-3 ~ .checkbox-module-Checkbox-wrapper-iH4AL-4-30-3,\n.checkbox-module-Checkbox-input--indeterminate-yMTip-4-30-3 ~ .checkbox-module-Checkbox-wrapper-iH4AL-4-30-3 {\n background-color: var(--primary);\n border: 0;\n}\n\n.checkbox-module-Checkbox-input--checked-1V8bz-4-30-3:focus ~ .checkbox-module-Checkbox-wrapper-iH4AL-4-30-3,\n.checkbox-module-Checkbox-input--indeterminate-yMTip-4-30-3:focus ~ .checkbox-module-Checkbox-wrapper-iH4AL-4-30-3 {\n background-color: var(--primary);\n border: 0;\n}\n\n.checkbox-module-Checkbox-input--checked-1V8bz-4-30-3:hover ~ .checkbox-module-Checkbox-wrapper-iH4AL-4-30-3,\n.checkbox-module-Checkbox-input--indeterminate-yMTip-4-30-3:hover ~ .checkbox-module-Checkbox-wrapper-iH4AL-4-30-3 {\n background-color: var(--primary-dark);\n border: 0;\n}\n\n.checkbox-module-Checkbox-input--checked-1V8bz-4-30-3:active ~ .checkbox-module-Checkbox-wrapper-iH4AL-4-30-3,\n.checkbox-module-Checkbox-input--indeterminate-yMTip-4-30-3:active ~ .checkbox-module-Checkbox-wrapper-iH4AL-4-30-3 {\n background-color: var(--primary-darker);\n border: 0;\n}\n\n.checkbox-module-Checkbox--disabled-j-irf-4-30-3 .checkbox-module-Checkbox-input--checked-1V8bz-4-30-3 ~ .checkbox-module-Checkbox-wrapper-iH4AL-4-30-3,\n.checkbox-module-Checkbox--disabled-j-irf-4-30-3 .checkbox-module-Checkbox-input--indeterminate-yMTip-4-30-3 ~ .checkbox-module-Checkbox-wrapper-iH4AL-4-30-3 {\n background-color: var(--primary-lighter);\n border: 0;\n}\n\n/* Error State -> Default */\n\n.checkbox-module-Checkbox-wrapper--error-pnJwU-4-30-3 {\n border: var(--border-width-2-5) solid var(--alert);\n}\n\n.checkbox-module-Checkbox-input-shIYv-4-30-3:hover ~ .checkbox-module-Checkbox-wrapper--error-pnJwU-4-30-3 {\n border: var(--border-width-2-5) solid var(--alert-dark);\n}\n\n.checkbox-module-Checkbox-input-shIYv-4-30-3:active ~ .checkbox-module-Checkbox-wrapper--error-pnJwU-4-30-3 {\n border: var(--border-width-2-5) solid var(--alert-darker);\n background-color: var(--secondary-light);\n}\n\n.checkbox-module-Checkbox--disabled-j-irf-4-30-3 .checkbox-module-Checkbox-wrapper--error-pnJwU-4-30-3 {\n border: var(--border-width-2-5) solid var(--alert-lighter);\n background-color: var(--secondary-lightest);\n}\n\n/* Error State -> Checked & Indeterminate */\n\n.checkbox-module-Checkbox-input--checked-1V8bz-4-30-3 ~ .checkbox-module-Checkbox-wrapper--error-pnJwU-4-30-3,\n.checkbox-module-Checkbox-input--indeterminate-yMTip-4-30-3 ~ .checkbox-module-Checkbox-wrapper--error-pnJwU-4-30-3 {\n border: var(--border-width-2-5) solid var(--alert);\n}\n\n.checkbox-module-Checkbox-input--checked-1V8bz-4-30-3:focus ~ .checkbox-module-Checkbox-wrapper--error-pnJwU-4-30-3,\n.checkbox-module-Checkbox-input--indeterminate-yMTip-4-30-3:focus ~ .checkbox-module-Checkbox-wrapper--error-pnJwU-4-30-3 {\n border: var(--border-width-2-5) solid var(--alert);\n}\n\n.checkbox-module-Checkbox-input--checked-1V8bz-4-30-3:hover ~ .checkbox-module-Checkbox-wrapper--error-pnJwU-4-30-3,\n.checkbox-module-Checkbox-input--indeterminate-yMTip-4-30-3:hover ~ .checkbox-module-Checkbox-wrapper--error-pnJwU-4-30-3 {\n border: var(--border-width-2-5) solid var(--alert-dark);\n}\n\n.checkbox-module-Checkbox-input--checked-1V8bz-4-30-3:active ~ .checkbox-module-Checkbox-wrapper--error-pnJwU-4-30-3,\n.checkbox-module-Checkbox-input--indeterminate-yMTip-4-30-3:active ~ .checkbox-module-Checkbox-wrapper--error-pnJwU-4-30-3 {\n background-color: var(--primary-darker);\n border: var(--border-width-2-5) solid var(--alert-darker);\n}\n\n.checkbox-module-Checkbox--disabled-j-irf-4-30-3 .checkbox-module-Checkbox-input--checked-1V8bz-4-30-3 ~ .checkbox-module-Checkbox-wrapper--error-pnJwU-4-30-3,\n.checkbox-module-Checkbox--disabled-j-irf-4-30-3 .checkbox-module-Checkbox-input--indeterminate-yMTip-4-30-3 ~ .checkbox-module-Checkbox-wrapper--error-pnJwU-4-30-3 {\n border: var(--border-width-2-5) solid var(--alert-lighter);\n}\n";
var styles$12 = {"Checkbox":"checkbox-module-Checkbox-Bxzy6-4-30-3","Checkbox-input":"checkbox-module-Checkbox-input-shIYv-4-30-3","Checkbox-labelWrapper":"checkbox-module-Checkbox-labelWrapper-8RA7S-4-30-3","Checkbox-label":"checkbox-module-Checkbox-label-1c-Z--4-30-3","Checkbox-label--tiny":"checkbox-module-Checkbox-label--tiny-4ICqD-4-30-3","Checkbox-outerWrapper":"checkbox-module-Checkbox-outerWrapper-47kQq-4-30-3","Checkbox-outerWrapper--regular":"checkbox-module-Checkbox-outerWrapper--regular-MXygQ-4-30-3","Checkbox-outerWrapper--tiny":"checkbox-module-Checkbox-outerWrapper--tiny-g9Lcz-4-30-3","Checkbox-wrapper":"checkbox-module-Checkbox-wrapper-iH4AL-4-30-3","Checkbox-wrapper--default":"checkbox-module-Checkbox-wrapper--default-Cs-Dj-4-30-3","Checkbox--disabled":"checkbox-module-Checkbox--disabled-j-irf-4-30-3","Checkbox-input--checked":"checkbox-module-Checkbox-input--checked-1V8bz-4-30-3","Checkbox-input--indeterminate":"checkbox-module-Checkbox-input--indeterminate-yMTip-4-30-3","Checkbox-wrapper--error":"checkbox-module-Checkbox-wrapper--error-pnJwU-4-30-3"};
styleInject(css_248z$1a);
var css_248z$19 = ".dropdown-module-Dropdown--waM8-4-30-3 {\n width: 100%;\n position: relative;\n}\n\n.dropdown-module-Dropdown-wrapper-r0AX--4-30-3 {\n margin-top: var(--spacing-10);\n margin-bottom: var(--spacing-10);\n}\n\n.dropdown-module-Dropdown-inputWrapper-4ZQ9m-4-30-3 {\n border-bottom: var(--border-width-2-5) solid var(--secondary-dark);\n}\n\n.dropdown-module-Dropdown-inputWrapper-4ZQ9m-4-30-3:focus-within {\n border-bottom: var(--border-width-2-5) solid var(--primary);\n}\n\n.dropdown-module-Dropdown-input-ovmvS-4-30-3 {\n min-width: unset !important;\n background: transparent;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n height: 36px;\n}\n\n.dropdown-module-Dropdown-input-ovmvS-4-30-3,\n.dropdown-module-Dropdown-input-ovmvS-4-30-3:focus-within {\n border: unset !important;\n box-shadow: none !important;\n outline: none !important;\n}\n\n.dropdown-module-Dropdown-input-ovmvS-4-30-3:hover {\n background-color: var(--secondary-lightest);\n}\n\n.dropdown-module-Dropdown-section-rT604-4-30-3 {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-left: var(--spacing-30);\n margin-top: var(--spacing-30);\n margin-bottom: var(--spacing-15);\n}\n\n.dropdown-module-Dropdown-section--withClear--R25A-4-30-3 {\n margin-top: var(--spacing-20);\n margin-bottom: var(--spacing-05);\n}\n\n.dropdown-module-Dropdown-buttonWrapper-hWHut-4-30-3 {\n display: flex;\n justify-content: flex-end;\n padding-top: var(--spacing-20);\n padding-right: var(--spacing-20);\n padding-bottom: var(--spacing-20);\n border-top: var(--border-width-2-5) solid var(--secondary-light);\n}\n\n.dropdown-module-Dropdown-footer-q2lkI-4-30-3 {\n padding-left: var(--spacing-30);\n padding-bottom: var(--spacing-10);\n padding-top: var(--spacing-20);\n box-sizing: border-box;\n}\n\n.dropdown-module-Option-9a9gu-4-30-3 {\n display: flex;\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n color: var(--text);\n cursor: pointer;\n}\n\n.dropdown-module-Option-9a9gu-4-30-3,\n.dropdown-module-Option-loading-niIYl-4-30-3 {\n padding-top: var(--spacing-15);\n padding-bottom: var(--spacing-15);\n padding-left: var(--spacing-30);\n padding-right: var(--spacing-20);\n}\n\n.dropdown-module-Option-checkbox-m-8Hz-4-30-3 .dropdown-module-Checkbox-outerWrapper-X7RB4-4-30-3 {\n background-color: var(--shadow-0);\n}\n\n.dropdown-module-Option-checkboxWrapper-K7FXe-4-30-3 {\n display: block;\n}\n\n.dropdown-module-OptionCheckbox-sWOoI-4-30-3 {\n width: 100%;\n padding-left: var(--spacing-30);\n padding-top: var(--spacing-15);\n padding-bottom: var(--spacing-15);\n}\n\n.dropdown-module-Option--interactive-5AoOx-4-30-3:hover,\n.dropdown-module-Option-checkbox--interactive-EiiG5-4-30-3:hover {\n background-color: var(--secondary-lightest);\n}\n\n.dropdown-module-Option--interactive-5AoOx-4-30-3:hover:active,\n.dropdown-module-Option-checkbox--interactive-EiiG5-4-30-3:hover:active {\n background-color: var(--secondary-light);\n}\n\n.dropdown-module-Option-9a9gu-4-30-3:focus,\n.dropdown-module-Option-9a9gu-4-30-3:focus-visible,\n.dropdown-module-Option-checkbox-m-8Hz-4-30-3:focus,\n.dropdown-module-Option-checkbox-m-8Hz-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: calc(-1 * var(--border-width-05));\n}\n\n.dropdown-module-OptionWrapper-OXl8n-4-30-3:focus,\n.dropdown-module-OptionWrapper-OXl8n-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: calc(-1 * var(--border-width-05));\n}\n\n.dropdown-module-Option-loading-niIYl-4-30-3 {\n pointer-events: none;\n}\n\n.dropdown-module-Option--selected-N166--4-30-3 {\n background-color: var(--primary-lightest);\n}\n\n.dropdown-module-Option--selected-N166--4-30-3:focus,\n.dropdown-module-Option--selected-N166--4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: calc(-1 * var(--border-width-05));\n}\n\n.dropdown-module-Option--selected-N166--4-30-3.dropdown-module-Option--interactive-5AoOx-4-30-3:hover {\n background-color: var(--primary-lighter);\n}\n\n.dropdown-module-Option--selected-N166--4-30-3.dropdown-module-Option--interactive-5AoOx-4-30-3:active {\n background-color: var(--primary-lighter);\n color: var(--primary-darker);\n}\n\n.dropdown-module-Option--selected-N166--4-30-3:active .dropdown-module-Option-text-lXgSe-4-30-3,\n.dropdown-module-Option--selected-N166--4-30-3:active .dropdown-module-Option-subInfo-rCqn2-4-30-3 {\n color: var(--primary-darker);\n}\n\n.dropdown-module-Option--disabled-z9O1J-4-30-3,\n.dropdown-module-OptionWrapper--disabled-dDEXE-4-30-3 {\n pointer-events: auto;\n cursor: default;\n}\n\n.dropdown-module-Option-label-lSBP--4-30-3 {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n}\n\n.dropdown-module-Option-checkIcon-jg8-d-4-30-3 {\n display: flex;\n flex-shrink: 0;\n align-self: center;\n margin-left: auto;\n padding-left: var(--spacing-20);\n}\n\n.dropdown-module-OptionCheckbox-sWOoI-4-30-3 .dropdown-module-Checkbox-label-HN9S6-4-30-3 {\n padding-right: var(--spacing-30);\n width: 100%;\n display: flex;\n overflow: hidden;\n cursor: pointer;\n}\n\n.dropdown-module-Option-text-lXgSe-4-30-3,\n.dropdown-module-OptionCheckbox-sWOoI-4-30-3 .dropdown-module-Text-wTZmG-4-30-3 {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.dropdown-module-Option-text--wrap-RxZCx-4-30-3,\n.dropdown-module-Dropdown-wrapper--wrap-HMI-K-4-30-3 .dropdown-module-OptionCheckbox-sWOoI-4-30-3 .dropdown-module-Text-wTZmG-4-30-3 {\n white-space: unset;\n}\n\n.dropdown-module-Option--icon-AA5JI-4-30-3 {\n padding-left: var(--spacing-20);\n}\n\n.dropdown-module-Option-icon-sux-R-4-30-3 {\n display: flex;\n}\n\n.dropdown-module-Option-icon-sux-R-4-30-3 {\n height: -moz-fit-content;\n height: fit-content;\n line-height: var(--font-height);\n}\n\n@media (forced-colors: active) {\n .dropdown-module-Dropdown-input-ovmvS-4-30-3:focus-within {\n outline: var(--border-width-05) solid Highlight !important;\n outline-offset: var(--spacing-05);\n }\n}\n";
var dropdownStyles = {"Dropdown":"dropdown-module-Dropdown--waM8-4-30-3","Dropdown-wrapper":"dropdown-module-Dropdown-wrapper-r0AX--4-30-3","Dropdown-inputWrapper":"dropdown-module-Dropdown-inputWrapper-4ZQ9m-4-30-3","Dropdown-input":"dropdown-module-Dropdown-input-ovmvS-4-30-3","Dropdown-section":"dropdown-module-Dropdown-section-rT604-4-30-3","Dropdown-section--withClear":"dropdown-module-Dropdown-section--withClear--R25A-4-30-3","Dropdown-buttonWrapper":"dropdown-module-Dropdown-buttonWrapper-hWHut-4-30-3","Dropdown-footer":"dropdown-module-Dropdown-footer-q2lkI-4-30-3","Option":"dropdown-module-Option-9a9gu-4-30-3","Option-loading":"dropdown-module-Option-loading-niIYl-4-30-3","Option-checkbox":"dropdown-module-Option-checkbox-m-8Hz-4-30-3","Checkbox-outerWrapper":"dropdown-module-Checkbox-outerWrapper-X7RB4-4-30-3","Option-checkboxWrapper":"dropdown-module-Option-checkboxWrapper-K7FXe-4-30-3","OptionCheckbox":"dropdown-module-OptionCheckbox-sWOoI-4-30-3","Option--interactive":"dropdown-module-Option--interactive-5AoOx-4-30-3","Option-checkbox--interactive":"dropdown-module-Option-checkbox--interactive-EiiG5-4-30-3","OptionWrapper":"dropdown-module-OptionWrapper-OXl8n-4-30-3","Option--selected":"dropdown-module-Option--selected-N166--4-30-3","Option-text":"dropdown-module-Option-text-lXgSe-4-30-3","Option-subInfo":"dropdown-module-Option-subInfo-rCqn2-4-30-3","Option--disabled":"dropdown-module-Option--disabled-z9O1J-4-30-3","OptionWrapper--disabled":"dropdown-module-OptionWrapper--disabled-dDEXE-4-30-3","Option-label":"dropdown-module-Option-label-lSBP--4-30-3","Option-checkIcon":"dropdown-module-Option-checkIcon-jg8-d-4-30-3","Checkbox-label":"dropdown-module-Checkbox-label-HN9S6-4-30-3","Text":"dropdown-module-Text-wTZmG-4-30-3","Option-text--wrap":"dropdown-module-Option-text--wrap-RxZCx-4-30-3","Dropdown-wrapper--wrap":"dropdown-module-Dropdown-wrapper--wrap-HMI-K-4-30-3","Option--icon":"dropdown-module-Option--icon-AA5JI-4-30-3","Option-icon":"dropdown-module-Option-icon-sux-R-4-30-3"};
styleInject(css_248z$19);
var css_248z$18 = ".grid-module-Grid-c7nCj-4-30-3 {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n height: 100%;\n overflow: hidden;\n background: var(--white);\n}\n\n.grid-module-Grid-wrapper-lro6U-4-30-3 {\n display: flex;\n position: relative;\n overflow: hidden;\n height: 100%;\n}\n\n.grid-module-Grid--pinned-3JMcl-4-30-3 {\n position: absolute;\n height: 100%;\n z-index: 5;\n overflow-x: hidden;\n -ms-overflow-style: none;\n scrollbar-width: none;\n border-right: var(--border-width-7-5) solid var(--secondary);\n}\n\n.grid-module-Grid-pinned-c-pxc-4-30-3::-webkit-scrollbar {\n display: none;\n}\n\n.grid-module-Grid--main-zduCm-4-30-3 {\n flex-grow: 1;\n}\n\n.grid-module-Grid--comfortable-TOG1A-4-30-3 .grid-module-Grid-cell--head--JOK--4-30-3 {\n min-height: 40px;\n}\n\n.grid-module-Grid--comfortable-TOG1A-4-30-3 .grid-module-Grid-cell--body--nkVA-4-30-3 {\n padding-top: var(--spacing-30);\n padding-bottom: var(--spacing-30);\n}\n\n.grid-module-Grid--standard-vGamG-4-30-3 .grid-module-Grid-cell--head--JOK--4-30-3 {\n min-height: 40px;\n}\n\n.grid-module-Grid--standard-vGamG-4-30-3 .grid-module-Grid-cell--body--nkVA-4-30-3 {\n padding-top: var(--spacing-30);\n padding-bottom: var(--spacing-30);\n}\n\n.grid-module-Grid--compressed-mwkZ6-4-30-3 .grid-module-Grid-cell--head--JOK--4-30-3 {\n min-height: 40px;\n}\n\n.grid-module-Grid--compressed-mwkZ6-4-30-3 .grid-module-Grid-cell--body--nkVA-4-30-3 {\n padding-top: var(--spacing-20);\n padding-bottom: var(--spacing-20);\n}\n\n.grid-module-Grid--tight-1w1jV-4-30-3 .grid-module-Grid-cell--head--JOK--4-30-3 {\n min-height: var(--spacing-80);\n}\n\n.grid-module-Grid--tight-1w1jV-4-30-3 .grid-module-Grid-cell--body--nkVA-4-30-3 {\n padding-top: var(--spacing-10);\n padding-bottom: var(--spacing-10);\n}\n\n.grid-module-Grid-head-WsxqC-4-30-3 {\n display: flex;\n flex: 0 0 auto;\n overflow-x: auto;\n -ms-overflow-style: none;\n scrollbar-width: none;\n border-bottom: var(--border);\n}\n\n.grid-module-Grid-head-WsxqC-4-30-3::-webkit-scrollbar {\n display: none;\n}\n\n.grid-module-Grid-headCell-OcJ4F-4-30-3 {\n display: flex;\n height: 100%;\n flex-direction: row;\n align-items: center;\n}\n\n.grid-module-Grid-headCell--draggable-WH7xi-4-30-3 {\n cursor: grab;\n}\n\n.grid-module-Grid-headCell--draggable-WH7xi-4-30-3:active {\n cursor: grabbing;\n z-index: 3;\n opacity: 1;\n background-color: inherit;\n color: inherit;\n}\n\n.grid-module-Grid-body-pAJM6-4-30-3 {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n overflow-x: auto;\n overflow-y: auto;\n}\n\n.grid-module-Grid-rowGroup-RkiRn-4-30-3 {\n display: contents;\n}\n\n.grid-module-Grid-rowWrapper-cZ8-a-4-30-3 {\n display: inline-flex;\n flex-direction: column;\n min-width: -moz-fit-content;\n min-width: fit-content;\n flex-shrink: 0;\n border-bottom: var(--border);\n}\n\n.grid-module-Grid-rowWrapper-cZ8-a-4-30-3:last-child .grid-module-Grid-row--body-hzvsO-4-30-3 {\n border-bottom: 0;\n}\n\n.grid-module-GridBody-padding-3KYKp-4-30-3 {\n flex-shrink: 0;\n}\n\n.grid-module-Grid-nestedRow-uxEsD-4-30-3 {\n width: 100%;\n overflow: hidden;\n}\n\n.grid-module-Grid-nestedRowTrigger--amMF-4-30-3 {\n margin-right: var(--spacing-30);\n cursor: pointer;\n}\n\n.grid-module-Grid-nestedRow-uxEsD-4-30-3 .grid-module-Grid-rowWrapper-cZ8-a-4-30-3 {\n border-bottom: 0;\n}\n\n.grid-module-Grid-nestedRow-uxEsD-4-30-3 .grid-module-Grid-cell-GVffL-4-30-3:first-child {\n padding-left: calc(var(--spacing-80) + var(--spacing-20));\n}\n\n.grid-module-Grid-nestedRowPlaceholder-h98gD-4-30-3 {\n width: var(--spacing-60);\n margin-right: var(--spacing-30);\n}\n\n.grid-module-Grid-cell-GVffL-4-30-3 {\n position: relative;\n box-sizing: border-box;\n padding-left: var(--spacing-30);\n padding-right: var(--spacing-30);\n flex-grow: 1;\n}\n\n.grid-module-Grid-cell--body--nkVA-4-30-3 {\n padding-right: var(--spacing-30);\n}\n\n.grid-module-Grid-cell--head--JOK--4-30-3 {\n overflow: hidden;\n padding-right: var(--spacing-10);\n}\n\n.grid-module-Grid-cell--dragged-djAY0-4-30-3 {\n z-index: 3;\n opacity: 1;\n background-color: inherit;\n color: inherit;\n}\n\n.grid-module-Grid-cell--separator-TYHdI-4-30-3 {\n border-left: var(--border);\n border-color: var(--secondary-light);\n}\n\n.grid-module-Grid-cell--selected-1zcBx-4-30-3 {\n background: var(--primary-lightest);\n}\n\n.grid-module-Grid-cell--nestedRow-U3Dg5-4-30-3 {\n padding-left: var(--spacing-20);\n}\n\n.grid-module-Grid-cell--head--JOK--4-30-3.grid-module-Grid-cell-GVffL-4-30-3:first-of-type {\n border-left: none;\n}\n\n.grid-module-Grid-cell--head--JOK--4-30-3.grid-module-Grid-cell--selected-1zcBx-4-30-3 {\n background: var(--primary-light);\n}\n\n.grid-module-Grid-cell--checkbox-kWT4v-4-30-3 {\n width: unset;\n min-width: unset;\n display: flex;\n align-items: center;\n z-index: 1;\n padding-right: 0 !important;\n overflow: visible !important;\n}\n\n.grid-module-Grid-cell--separator-TYHdI-4-30-3 {\n border-left: var(--border);\n border-color: var(--secondary-light);\n}\n\n.grid-module-Grid-cell--selected-1zcBx-4-30-3 {\n background: var(--primary-lightest);\n}\n\n.grid-module-Grid-sortingIcons-Lwutu-4-30-3 {\n display: flex;\n align-items: center;\n padding-left: var(--spacing-10);\n}\n\n.grid-module-Grid-cellReorder-SMPMA-4-30-3 {\n display: flex;\n align-items: center;\n cursor: grab;\n}\n\n.grid-module-Grid-cellReorder-SMPMA-4-30-3:active {\n cursor: grabbing;\n}\n\n.grid-module-Grid-cellContent-Ls-ZE-4-30-3 {\n display: flex;\n align-items: center;\n flex-grow: 1;\n height: 100%;\n box-sizing: border-box;\n z-index: inherit;\n}\n\n.grid-module-Grid-cell--head--JOK--4-30-3 .grid-module-Grid-cellContent-Ls-ZE-4-30-3 {\n overflow: hidden;\n}\n\n.grid-module-Grid-cell--head--JOK--4-30-3 .grid-module-Grid-cellContent-Ls-ZE-4-30-3:focus-visible {\n box-shadow: inset 0 0 0 var(--border-width-05) var(--primary-focus);\n border-radius: var(--border-radius-10);\n}\n\n.grid-module-Grid-cellResize-J-SJu-4-30-3 {\n position: absolute;\n top: 0;\n right: 0;\n width: var(--spacing-60);\n height: 100%;\n cursor: ew-resize;\n box-sizing: border-box;\n}\n\n.grid-module-Grid-cellResize-J-SJu-4-30-3::after {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n width: var(--spacing-10);\n height: 100%;\n}\n\n.grid-module-Grid-headCell-OcJ4F-4-30-3:has(> .grid-module-Grid-cellResize-J-SJu-4-30-3) {\n padding-right: calc(var(--spacing-60) - var(--spacing-10));\n}\n\n.grid-module-Grid-cellSortIcon-ZV0FF-4-30-3 {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n\n.grid-module-Grid-cellSortIcon-ZV0FF-4-30-3:hover {\n background: var(--secondary);\n}\n\n.grid-module-Grid-cellResize-J-SJu-4-30-3:hover::after,\n.grid-module-Grid-cellResize-J-SJu-4-30-3:focus-visible::after {\n background: var(--primary);\n}\n\n.grid-module-Grid-cellResize-J-SJu-4-30-3:focus-visible {\n outline: none;\n}\n\n.grid-module-Grid-reorderHighlighter-UMzz7-4-30-3 {\n position: absolute;\n height: 100%;\n border: var(--border-width-7-5) solid var(--primary-light);\n z-index: 10;\n}\n\n.grid-module-Grid-cellGroup-Q3add-4-30-3 {\n display: flex;\n box-sizing: border-box;\n height: 100%;\n}\n\n.grid-module-Grid-cellGroup--pinned-gR1WR-4-30-3 {\n position: sticky;\n z-index: 4;\n}\n\n.grid-module-Grid-cellGroup--pinned-left-EsISF-4-30-3 {\n left: 0;\n}\n\n.grid-module-Grid-cellGroup--pinned-right-jWDJC-4-30-3 {\n right: 0;\n}\n\n.grid-module-Grid-c7nCj-4-30-3 .grid-module-Checkbox-wrapper-0R1-K-4-30-3 {\n margin-right: 0;\n}\n\n/** Grid Cell **/\n\n.grid-module-GridCell-Atntl-4-30-3 {\n display: flex;\n align-items: center;\n width: 100%;\n box-sizing: border-box;\n}\n\n.grid-module-GridCell--align-left-zURf7-4-30-3 {\n justify-content: flex-start;\n text-align: left;\n}\n\n.grid-module-GridCell--align-right-nMKtX-4-30-3 {\n justify-content: flex-end;\n text-align: right;\n}\n\n.grid-module-GridCell--align-center-dtOQN-4-30-3 {\n justify-content: center;\n text-align: center;\n}\n\n.grid-module-GridCell--default-7p5Cq-4-30-3 {\n}\n\n.grid-module-GridCell--metaList-wNdz6-4-30-3 {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n overflow: hidden;\n}\n\n.grid-module-GridCell--statusHint-UyDMp-4-30-3 .grid-module-StatusHint-R1JrO-4-30-3 {\n overflow: hidden;\n}\n\n.grid-module-GridCell--statusHint-UyDMp-4-30-3 .grid-module-StatusHint-R1JrO-4-30-3 .grid-module-Text-Fy3XX-4-30-3 {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.grid-module-GridCell--avatar-fZFWf-4-30-3 .grid-module-Avatar-3XZ0C-4-30-3 {\n margin: 0;\n}\n\n.grid-module-GridCell-metaListWrapper-C5Xha-4-30-3 {\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n overflow: hidden;\n}\n\n.grid-module-GridCell-metaList-Eu-pj-4-30-3 {\n display: flex;\n}\n\n.grid-module-GridCell-metaList-Eu-pj-4-30-3 .grid-module-Text-Fy3XX-4-30-3 {\n display: flex;\n align-items: center;\n}\n\n.grid-module-GridCell-metaSeparator-B6hFq-4-30-3 {\n content: '';\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--spacing-10);\n height: var(--spacing-10);\n border-radius: var(--border-radius-full);\n background: var(--inverse-lightest);\n margin: 0 var(--spacing-20);\n}\n\n.grid-module-GridCell-mark--default-pkKi7-4-30-3 {\n background: var(--warning-light);\n border-radius: var(--border-radius-05);\n}\n\n.grid-module-GridCell-mark--metaList-MwAIW-4-30-3 {\n font-size: var(--font-size-s);\n line-height: var(--font-height-normal);\n color: var(--text-subtle);\n background: var(--warning-light);\n border-radius: var(--border-radius-05);\n}\n\n.grid-module-GridCell--metaList-wNdz6-4-30-3 ul li:first-child {\n margin-left: 0;\n}\n\n/** Header **/\n\n/** Table-header **/\n\n.grid-module-Header-8rhUu-4-30-3 {\n background: var(--white);\n padding: var(--spacing-30);\n border-bottom: var(--border);\n}\n\n.grid-module-Header-content-0SgQi-4-30-3 {\n display: flex;\n}\n\n.grid-module-Header-content--bottom-bkVrG-4-30-3 {\n align-items: center;\n justify-content: space-between;\n}\n\n.grid-module-Header-search-4git6-4-30-3 {\n width: var(--spacing-640);\n margin-bottom: var(--spacing-40);\n}\n\n.grid-module-Header-label-B0-kh-4-30-3 {\n display: flex;\n flex-grow: 1;\n align-items: center;\n}\n\n.grid-module-Header-label-B0-kh-4-30-3 .grid-module-Checkbox-ETqg7-4-30-3 {\n margin-right: var(--spacing-20);\n}\n\n.grid-module-Header-dropdown-xPNuH-4-30-3 {\n display: flex;\n margin-left: var(--spacing-10);\n margin-bottom: var(--spacing-40);\n}\n\n.grid-module-Header-dropdown-xPNuH-4-30-3 .grid-module-Dropdown-Ev9FG-4-30-3 {\n margin: 0 var(--spacing-10);\n}\n\n.grid-module-Header-draggableDropdown-QkIiO-4-30-3 .grid-module-Dropdown-wrapper-T1n1M-4-30-3 {\n max-height: 200px;\n overflow-y: auto;\n}\n\n.grid-module-Header-filters-u0J3G-4-30-3 {\n display: flex;\n}\n\n.grid-module-Header-sorting-zOkI4-4-30-3 {\n display: flex;\n}\n\n.grid-module-Header-actions-WHtHK-4-30-3 {\n margin-bottom: var(--spacing-40);\n}\n\n.grid-module-Header-global-actions-e6dK3-4-30-3 {\n justify-content: flex-end;\n margin-left: auto;\n margin-bottom: var(--spacing-40);\n}\n\n/* Grid row */\n\n.grid-module-Grid-row--disabled-f0pzU-4-30-3 {\n opacity: var(--opacity-10);\n pointer-events: none;\n}\n\n.grid-module-Grid-row-wBTps-4-30-3 {\n display: flex;\n flex-grow: 1;\n flex-shrink: 0;\n box-sizing: border-box;\n background: var(--white);\n}\n\n.grid-module-Grid-row--body-hzvsO-4-30-3 {\n border-color: var(--secondary-light);\n}\n\n.grid-module-Grid--resource-Wwxtj-4-30-3 .grid-module-Grid-row--body-hzvsO-4-30-3:hover {\n cursor: pointer;\n background: var(--secondary-lightest);\n}\n\n.grid-module-Grid--resource-Wwxtj-4-30-3 .grid-module-Grid-row--body-hzvsO-4-30-3:active {\n background: var(--secondary-lighter);\n}\n\n.grid-module-Grid--resource-Wwxtj-4-30-3 .grid-module-Grid-row--body-hzvsO-4-30-3:focus-visible {\n box-shadow: var(--shadow-spread) rgba(212, 212, 212, 0.16);\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: calc(-1 * var(--spacing-05));\n}\n\n/* Selected States */\n\n.grid-module-Grid-row--selected-4THdv-4-30-3 {\n background: rgba(214, 238, 255, 0.48);\n}\n\n.grid-module-Grid-row--selected-4THdv-4-30-3:hover {\n background: rgba(139, 202, 254, 0.48) !important;\n}\n\n.grid-module-Grid-row--selected-4THdv-4-30-3:active {\n background: var(--primary-lighter) !important;\n}\n\n.grid-module-Grid-row--selected-4THdv-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: calc(-1 * var(--spacing-05));\n box-shadow: var(--shadow-spread) rgba(0, 96, 214, 0.16);\n}\n\n/* Activated States */\n\n.grid-module-Grid-row--activated-nOoqM-4-30-3 {\n background: var(--primary-lightest);\n}\n\n/* Pinned Columns Default State */\n\n.grid-module-Grid--resource-Wwxtj-4-30-3 .grid-module-Grid-row--body-hzvsO-4-30-3:hover .grid-module-Grid-cellWrapper--pinned-0NirR-4-30-3 {\n cursor: pointer;\n background: var(--secondary-lightest);\n}\n\n.grid-module-Grid--resource-Wwxtj-4-30-3 .grid-module-Grid-row--body-hzvsO-4-30-3:active .grid-module-Grid-cellWrapper--pinned-0NirR-4-30-3 {\n background: var(--secondary-lighter);\n}\n\n.grid-module-Grid--resource-Wwxtj-4-30-3 .grid-module-Grid-row--body-hzvsO-4-30-3:focus-visible .grid-module-Grid-cellWrapper--pinned-0NirR-4-30-3 {\n box-shadow: var(--shadow-spread) rgba(212, 212, 212, 0.16);\n}\n\n/* Pinned Columns Selected State */\n\n.grid-module-Grid-row--selected-4THdv-4-30-3 .grid-module-Grid-cellWrapper--pinned-0NirR-4-30-3 {\n background: rgba(214, 238, 255, 0.48);\n}\n\n.grid-module-Grid-row--selected-4THdv-4-30-3:hover .grid-module-Grid-cellWrapper--pinned-0NirR-4-30-3 {\n background: rgba(139, 202, 254, 0.48) !important;\n}\n\n.grid-module-Grid-row--selected-4THdv-4-30-3:active .grid-module-Grid-cellWrapper--pinned-0NirR-4-30-3 {\n background: var(--primary-lighter) !important;\n}\n\n.grid-module-Grid-row--selected-4THdv-4-30-3:focus-visible .grid-module-Grid-cellWrapper--pinned-0NirR-4-30-3 {\n box-shadow: var(--shadow-spread) rgba(0, 96, 214, 0.16);\n}\n\n/* Grid header */\n.grid-module-Grid-row--head-FUyUu-4-30-3 .grid-module-Grid-cellGroup--pinned-gR1WR-4-30-3 {\n background: var(--white);\n}\n\n.grid-module-Grid-row--head-FUyUu-4-30-3 .grid-module-Grid-cellGroup--pinned-left-EsISF-4-30-3 {\n border-style: inset;\n border-right: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);\n border-right-width: 4px;\n -o-border-image: linear-gradient(\n to right,\n var(--secondary-light),\n var(--secondary-light) 25%,\n rgba(212, 212, 212, 0.1) 25%,\n rgba(212, 212, 212, 0.1)\n )\n 1 100%;\n border-image: linear-gradient(\n to right,\n var(--secondary-light),\n var(--secondary-light) 25%,\n rgba(212, 212, 212, 0.1) 25%,\n rgba(212, 212, 212, 0.1)\n )\n 1 100%;\n}\n\n.grid-module-Grid-row--head-FUyUu-4-30-3 .grid-module-Grid-cellGroup--pinned-right-jWDJC-4-30-3 {\n border-style: inset;\n border-left: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);\n border-left-width: 4px;\n -o-border-image: linear-gradient(\n to left,\n var(--secondary-light),\n var(--secondary-light) 25%,\n rgba(212, 212, 212, 0.1) 25%,\n rgba(212, 212, 212, 0.1)\n )\n 1 100%;\n border-image: linear-gradient(\n to left,\n var(--secondary-light),\n var(--secondary-light) 25%,\n rgba(212, 212, 212, 0.1) 25%,\n rgba(212, 212, 212, 0.1)\n )\n 1 100%;\n}\n\n/* Pinned Column Border */\n\n.grid-module-Grid-cellWrapper--pinned-left-5Ic9Q-4-30-3 {\n border-style: inset;\n border-right: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);\n border-right-width: 4px;\n -o-border-image: linear-gradient(\n to right,\n var(--secondary-light),\n var(--secondary-light) 25%,\n rgba(212, 212, 212, 0.1) 25%,\n rgba(212, 212, 212, 0.1)\n )\n 1 100%;\n border-image: linear-gradient(\n to right,\n var(--secondary-light),\n var(--secondary-light) 25%,\n rgba(212, 212, 212, 0.1) 25%,\n rgba(212, 212, 212, 0.1)\n )\n 1 100%;\n}\n\n.grid-module-Grid-cellWrapper--pinned-right-72w51-4-30-3 {\n border-style: inset;\n border-left: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);\n border-left-width: 4px;\n -o-border-image: linear-gradient(\n to left,\n var(--secondary-light),\n var(--secondary-light) 25%,\n rgba(212, 212, 212, 0.1) 25%,\n rgba(212, 212, 212, 0.1)\n )\n 1 100%;\n border-image: linear-gradient(\n to left,\n var(--secondary-light),\n var(--secondary-light) 25%,\n rgba(212, 212, 212, 0.1) 25%,\n rgba(212, 212, 212, 0.1)\n )\n 1 100%;\n}\n\n.grid-module-Grid-srOnly-OZzXj-4-30-3 {\n position: absolute;\n width: var(--spacing-2-5);\n height: var(--spacing-2-5);\n padding: 0;\n margin: calc(-1 * var(--spacing-2-5));\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n";
var gridStyles = {"Grid":"grid-module-Grid-c7nCj-4-30-3","Grid-wrapper":"grid-module-Grid-wrapper-lro6U-4-30-3","Grid--pinned":"grid-module-Grid--pinned-3JMcl-4-30-3","Grid-pinned":"grid-module-Grid-pinned-c-pxc-4-30-3","Grid--main":"grid-module-Grid--main-zduCm-4-30-3","Grid--comfortable":"grid-module-Grid--comfortable-TOG1A-4-30-3","Grid-cell--head":"grid-module-Grid-cell--head--JOK--4-30-3","Grid-cell--body":"grid-module-Grid-cell--body--nkVA-4-30-3","Grid--standard":"grid-module-Grid--standard-vGamG-4-30-3","Grid--compressed":"grid-module-Grid--compressed-mwkZ6-4-30-3","Grid--tight":"grid-module-Grid--tight-1w1jV-4-30-3","Grid-head":"grid-module-Grid-head-WsxqC-4-30-3","Grid-headCell":"grid-module-Grid-headCell-OcJ4F-4-30-3","Grid-headCell--draggable":"grid-module-Grid-headCell--draggable-WH7xi-4-30-3","Grid-body":"grid-module-Grid-body-pAJM6-4-30-3","Grid-rowGroup":"grid-module-Grid-rowGroup-RkiRn-4-30-3","Grid-rowWrapper":"grid-module-Grid-rowWrapper-cZ8-a-4-30-3","Grid-row--body":"grid-module-Grid-row--body-hzvsO-4-30-3","GridBody-padding":"grid-module-GridBody-padding-3KYKp-4-30-3","Grid-nestedRow":"grid-module-Grid-nestedRow-uxEsD-4-30-3","Grid-nestedRowTrigger":"grid-module-Grid-nestedRowTrigger--amMF-4-30-3","Grid-cell":"grid-module-Grid-cell-GVffL-4-30-3","Grid-nestedRowPlaceholder":"grid-module-Grid-nestedRowPlaceholder-h98gD-4-30-3","Grid-cell--dragged":"grid-module-Grid-cell--dragged-djAY0-4-30-3","Grid-cell--separator":"grid-module-Grid-cell--separator-TYHdI-4-30-3","Grid-cell--selected":"grid-module-Grid-cell--selected-1zcBx-4-30-3","Grid-cell--nestedRow":"grid-module-Grid-cell--nestedRow-U3Dg5-4-30-3","Grid-cell--checkbox":"grid-module-Grid-cell--checkbox-kWT4v-4-30-3","Grid-sortingIcons":"grid-module-Grid-sortingIcons-Lwutu-4-30-3","Grid-cellReorder":"grid-module-Grid-cellReorder-SMPMA-4-30-3","Grid-cellContent":"grid-module-Grid-cellContent-Ls-ZE-4-30-3","Grid-cellResize":"grid-module-Grid-cellResize-J-SJu-4-30-3","Grid-cellSortIcon":"grid-module-Grid-cellSortIcon-ZV0FF-4-30-3","Grid-reorderHighlighter":"grid-module-Grid-reorderHighlighter-UMzz7-4-30-3","Grid-cellGroup":"grid-module-Grid-cellGroup-Q3add-4-30-3","Grid-cellGroup--pinned":"grid-module-Grid-cellGroup--pinned-gR1WR-4-30-3","Grid-cellGroup--pinned-left":"grid-module-Grid-cellGroup--pinned-left-EsISF-4-30-3","Grid-cellGroup--pinned-right":"grid-module-Grid-cellGroup--pinned-right-jWDJC-4-30-3","Checkbox-wrapper":"grid-module-Checkbox-wrapper-0R1-K-4-30-3","GridCell":"grid-module-GridCell-Atntl-4-30-3","GridCell--align-left":"grid-module-GridCell--align-left-zURf7-4-30-3","GridCell--align-right":"grid-module-GridCell--align-right-nMKtX-4-30-3","GridCell--align-center":"grid-module-GridCell--align-center-dtOQN-4-30-3","GridCell--default":"grid-module-GridCell--default-7p5Cq-4-30-3","GridCell--metaList":"grid-module-GridCell--metaList-wNdz6-4-30-3","GridCell--statusHint":"grid-module-GridCell--statusHint-UyDMp-4-30-3","StatusHint":"grid-module-StatusHint-R1JrO-4-30-3","Text":"grid-module-Text-Fy3XX-4-30-3","GridCell--avatar":"grid-module-GridCell--avatar-fZFWf-4-30-3","Avatar":"grid-module-Avatar-3XZ0C-4-30-3","GridCell-metaListWrapper":"grid-module-GridCell-metaListWrapper-C5Xha-4-30-3","GridCell-metaList":"grid-module-GridCell-metaList-Eu-pj-4-30-3","GridCell-metaSeparator":"grid-module-GridCell-metaSeparator-B6hFq-4-30-3","GridCell-mark--default":"grid-module-GridCell-mark--default-pkKi7-4-30-3","GridCell-mark--metaList":"grid-module-GridCell-mark--metaList-MwAIW-4-30-3","Header":"grid-module-Header-8rhUu-4-30-3","Header-content":"grid-module-Header-content-0SgQi-4-30-3","Header-content--bottom":"grid-module-Header-content--bottom-bkVrG-4-30-3","Header-search":"grid-module-Header-search-4git6-4-30-3","Header-label":"grid-module-Header-label-B0-kh-4-30-3","Checkbox":"grid-module-Checkbox-ETqg7-4-30-3","Header-dropdown":"grid-module-Header-dropdown-xPNuH-4-30-3","Dropdown":"grid-module-Dropdown-Ev9FG-4-30-3","Header-draggableDropdown":"grid-module-Header-draggableDropdown-QkIiO-4-30-3","Dropdown-wrapper":"grid-module-Dropdown-wrapper-T1n1M-4-30-3","Header-filters":"grid-module-Header-filters-u0J3G-4-30-3","Header-sorting":"grid-module-Header-sorting-zOkI4-4-30-3","Header-actions":"grid-module-Header-actions-WHtHK-4-30-3","Header-global-actions":"grid-module-Header-global-actions-e6dK3-4-30-3","Grid-row--disabled":"grid-module-Grid-row--disabled-f0pzU-4-30-3","Grid-row":"grid-module-Grid-row-wBTps-4-30-3","Grid--resource":"grid-module-Grid--resource-Wwxtj-4-30-3","Grid-row--selected":"grid-module-Grid-row--selected-4THdv-4-30-3","Grid-row--activated":"grid-module-Grid-row--activated-nOoqM-4-30-3","Grid-cellWrapper--pinned":"grid-module-Grid-cellWrapper--pinned-0NirR-4-30-3","Grid-row--head":"grid-module-Grid-row--head-FUyUu-4-30-3","Grid-cellWrapper--pinned-left":"grid-module-Grid-cellWrapper--pinned-left-5Ic9Q-4-30-3","Grid-cellWrapper--pinned-right":"grid-module-Grid-cellWrapper--pinned-right-72w51-4-30-3","Grid-srOnly":"grid-module-Grid-srOnly-OZzXj-4-30-3"};
styleInject(css_248z$18);
var _excluded$1q = ["size", "tabIndex", "defaultChecked", "indeterminate", "label", "error", "disabled", "onChange", "name", "value", "className", "checked", "helpText", "id", "labelRef", "wrapLabel", "aria-describedby", "aria-label", "aria-labelledby"];
var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
var _props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size,
_props$tabIndex = props.tabIndex,
tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
defaultChecked = props.defaultChecked,
indeterminate = props.indeterminate,
label = props.label,
error = props.error,
disabled = props.disabled,
onChange = props.onChange,
name = props.name,
value = props.value,
className = props.className,
checkedProp = props.checked,
helpText = props.helpText,
_props$id = props.id,
id = _props$id === void 0 ? [name, label, uidGenerator()].filter(Boolean).join('-') : _props$id,
labelRef = props.labelRef,
wrapLabel = props.wrapLabel,
ariaDescribedby = props['aria-describedby'],
ariaLabel = props['aria-label'],
ariaLabelledBy = props['aria-labelledby'],
rest = _objectWithoutProperties(props, _excluded$1q);
var ref = React.useRef(null);
React.useImperativeHandle(forwardedRef, function () {
return ref.current;
});
var _React$useState = React.useState(checkedProp === undefined ? defaultChecked : checkedProp),
_React$useState2 = _slicedToArray(_React$useState, 2),
checked = _React$useState2[0],
setChecked = _React$useState2[1];
React.useEffect(function () {
setIndeterminate(indeterminate);
}, [indeterminate]);
React.useEffect(function () {
if (checkedProp !== undefined) {
setChecked(checkedProp);
}
}, [checkedProp]);
var CheckboxClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$12['Checkbox'], true), styles$12['Checkbox--disabled'], disabled), className);
var CheckboxOuterWrapper = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$12['Checkbox-outerWrapper'], true), dropdownStyles['Checkbox-outerWrapper'], true), styles$12["Checkbox-outerWrapper--".concat(size)], size));
var CheckboxInputWrapper = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$12['Checkbox-input'], true), styles$12['Checkbox-input--checked'], checked), styles$12['Checkbox-input--indeterminate'], props.indeterminate));
var CheckboxWrapper = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$12['Checkbox-wrapper'], true), gridStyles['Checkbox-wrapper'], true), styles$12['Checkbox-wrapper--default'], !error), styles$12['Checkbox-wrapper--error'], error));
var CheckboxLabelClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$12['Checkbox-label'], true), dropdownStyles['Checkbox-label'], true), styles$12['Checkbox-label--tiny'], size === 'tiny'));
var LabelTextClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, 'mw-100', true), 'ellipsis--noWrap', wrapLabel !== true), 'ellipsis', wrapLabel));
var setIndeterminate = function setIndeterminate(indeterminateValue) {
ref.current.indeterminate = indeterminateValue;
};
var onChangeHandler = function onChangeHandler(e) {
if (checkedProp === undefined) {
setChecked(e.target.checked);
setIndeterminate(e.target.indeterminate);
}
if (onChange) onChange(e);
};
var IconMapper = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, 'checked--regular', checked && size === 'regular'), 'checked--tiny', checked && size === 'tiny'), 'indeterminate--regular', indeterminate && size === 'regular'), 'indeterminate--tiny', indeterminate && size === 'tiny'));
var helpTextId = helpText && helpText.trim() ? "".concat(id, "-helptext") : undefined;
var describedBy = [ariaDescribedby, helpTextId].filter(Boolean).join(' ') || undefined;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-Checkbox",
className: CheckboxClass
}, /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-Checkbox-OuterWrapper",
className: CheckboxOuterWrapper
}, /*#__PURE__*/React.createElement("input", _extends$2({}, rest, {
type: "checkbox",
defaultChecked: defaultChecked,
onChange: onChangeHandler,
checked: checked,
disabled: disabled,
ref: ref,
name: name,
value: value,
className: CheckboxInputWrapper,
tabIndex: tabIndex,
id: id,
"data-test": "DesignSystem-Checkbox-InputBox",
"aria-invalid": error || undefined,
"aria-checked": indeterminate ? 'mixed' : undefined,
"aria-describedby": describedBy,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy
})), /*#__PURE__*/React.createElement("span", {
className: CheckboxWrapper,
"data-test": "DesignSystem-Checkbox-Icon"
}, IconMapper && /*#__PURE__*/React.createElement(CheckboxIcon, {
name: IconMapper
}))), (label || helpText) && /*#__PURE__*/React.createElement("div", {
className: styles$12['Checkbox-labelWrapper']
}, label && label.trim() && /*#__PURE__*/React.createElement("label", {
htmlFor: id,
className: CheckboxLabelClass,
"data-test": "DesignSystem-Checkbox-Label"
}, /*#__PURE__*/React.createElement(Text$1, {
size: size === 'tiny' ? 'small' : 'regular',
appearance: disabled ? 'disabled' : 'default',
className: LabelTextClass,
ref: labelRef
}, label.trim())), helpText && /*#__PURE__*/React.createElement(Text$1, {
"data-test": "DesignSystem-Checkbox-HelpText",
id: helpTextId,
size: "small",
appearance: disabled ? 'disabled' : 'subtle'
}, helpText.trim()))));
});
Checkbox.displayName = 'Checkbox';
var css_248z$17 = ".column-module-Row-LudWR-4-30-3 {\n display: flex;\n flex-wrap: wrap;\n flex: 1 100%;\n}\n\n.column-module-Col-BW4pl-4-30-3 {\n position: relative;\n box-sizing: border-box;\n flex: 1 0 0%;\n}\n\n.column-module-Col--auto-HnufQ-4-30-3 {\n flex: 0 0 auto;\n width: auto;\n}\n\n.column-module-Col--1-iSoXZ-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 1);\n}\n\n.column-module-Col--2-KR9Oj-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 2);\n}\n\n.column-module-Col--3-tRdfx-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 3);\n}\n\n.column-module-Col--4-SxYUZ-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 4);\n}\n\n.column-module-Col--5-Ghiks-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 5);\n}\n\n.column-module-Col--6-JO4qo-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 6);\n}\n\n.column-module-Col--7-SRnJx-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 7);\n}\n\n.column-module-Col--8-HBxc4-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 8);\n}\n\n.column-module-Col--9-eMJ9n-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 9);\n}\n\n.column-module-Col--10-VSo8k-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 10);\n}\n\n.column-module-Col--11-miljX-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 11);\n}\n\n.column-module-Col--12-9Obkj-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 12);\n}\n\n/* if the viewport is between 0 to 575 pixels wide. */\n\n@media (max-width: 575px) {\n .column-module-Col--xs-auto-oXQ2q-4-30-3 {\n flex: 0 0 auto;\n width: auto;\n }\n .column-module-Col--xs-1-KvELd-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 1);\n }\n .column-module-Col--xs-2-OUGOZ-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 2);\n }\n .column-module-Col--xs-3-G55n8-4-30-3 {\n flex: 0 0 auto;\n }\n .column-module-Col--xs-4-PADe9-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 4);\n }\n .column-module-Col--xs-5-Ex4rw-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 5);\n }\n .column-module-Col--xs-6-fzX37-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 6);\n }\n .column-module-Col--xs-7-zWOG--4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 7);\n }\n .column-module-Col--xs-8-gngfO-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 8);\n }\n .column-module-Col--xs-9-b-r8L-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 9);\n }\n .column-module-Col--xs-10-umLd0-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 10);\n }\n .column-module-Col--xs-11-KvOKo-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 11);\n }\n .column-module-Col--xs-12-u1Ks8-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 12);\n }\n}\n\n/* if the viewport is between 576 and 767 pixels wide. */\n\n@media (min-width: 576px) and (max-width: 767px) {\n .column-module-Col--s-auto-rQS8S-4-30-3 {\n flex: 0 0 auto;\n width: auto;\n }\n .column-module-Col--s-1-BVL5j-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 1);\n }\n .column-module-Col--s-2-9s29P-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 2);\n }\n .column-module-Col--s-3-69Bdl-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 3);\n }\n .column-module-Col--s-4-nE4kT-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 4);\n }\n .column-module-Col--s-5-B72Pu-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 5);\n }\n .column-module-Col--s-6-AdMSU-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 6);\n }\n .column-module-Col--s-7-e656U-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 7);\n }\n .column-module-Col--s-8-1EhC1-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 8);\n }\n .column-module-Col--s-9-rpHj--4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 9);\n }\n .column-module-Col--s-10-GVB2t-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 10);\n }\n .column-module-Col--s-11-3WJSe-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 11);\n }\n .column-module-Col--s-12-eFxie-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 12);\n }\n}\n\n/* if the viewport is between 768 and 991 pixels wide. */\n\n@media (min-width: 768px) and (max-width: 991px) {\n .column-module-Col--m-auto-DTvE1-4-30-3 {\n flex: 0 0 auto;\n width: auto;\n }\n .column-module-Col--m-1-T7-6r-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 1);\n }\n .column-module-Col--m-2-UJZxe-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 2);\n }\n .column-module-Col--m-3-jgXEy-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 3);\n }\n .column-module-Col--m-4-86-dP-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 4);\n }\n .column-module-Col--m-5-RxZc2-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 5);\n }\n .column-module-Col--m-6-RwrEz-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 6);\n }\n .column-module-Col--m-7-HuA0i-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 7);\n }\n .column-module-Col--m-8-qKE7R-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 8);\n }\n .column-module-Col--m-9--8vSy-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 9);\n }\n .column-module-Col--m-10-aBQ1l-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 10);\n }\n .column-module-Col--m-11-08F-U-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 11);\n }\n .column-module-Col--m-12-gZ47F-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 12);\n }\n}\n\n/* if the viewport is between 992 and 1199 pixels wide. */\n\n@media (min-width: 992px) and (max-width: 1199px) {\n .column-module-Col--l-auto-SxR1p-4-30-3 {\n flex: 0 0 auto;\n width: auto;\n }\n .column-module-Col--l-1-aLREn-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 1);\n }\n .column-module-Col--l-2-0mG-c-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 2);\n }\n .column-module-Col--l-3--aWDx-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 3);\n }\n .column-module-Col--l-4-GTf5q-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 4);\n }\n .column-module-Col--l-5-5MGhB-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 5);\n }\n .column-module-Col--l-6-DY6jT-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 6);\n }\n .column-module-Col--l-7-Wyv6Z-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 7);\n }\n .column-module-Col--l-8-30knO-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 8);\n }\n .column-module-Col--l-9-H-ap--4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 9);\n }\n .column-module-Col--l-10-wgJl4-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 10);\n }\n .column-module-Col--l-11-4dOz3-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 11);\n }\n .column-module-Col--l-12-xC5rs-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 12);\n }\n}\n\n/* if the viewport is 1200 pixels wide or wider. */\n\n@media (min-width: 1200px) {\n .column-module-Col--xl-auto-zH0n0-4-30-3 {\n flex: 0 0 auto;\n width: auto;\n }\n .column-module-Col--xl-1-ZCRQR-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 1);\n }\n .column-module-Col--xl-2-5agyW-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 2);\n }\n .column-module-Col--xl-3-e5vjv-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 3);\n }\n .column-module-Col--xl-4--aAZH-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 4);\n }\n .column-module-Col--xl-5-167j6-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 5);\n }\n .column-module-Col--xl-6-wXLZ--4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 6);\n }\n .column-module-Col--xl-7-QA116-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 7);\n }\n .column-module-Col--xl-8-Q22c5-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 8);\n }\n .column-module-Col--xl-9-bJrrK-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 9);\n }\n .column-module-Col--xl-10-IALsA-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 10);\n }\n .column-module-Col--xl-11-vrchj-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 11);\n }\n .column-module-Col--xl-12-6dUnj-4-30-3 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 12);\n }\n}\n";
var rowStyles = {"Row":"column-module-Row-LudWR-4-30-3","Col":"column-module-Col-BW4pl-4-30-3","Col--auto":"column-module-Col--auto-HnufQ-4-30-3","Col--1":"column-module-Col--1-iSoXZ-4-30-3","Col--2":"column-module-Col--2-KR9Oj-4-30-3","Col--3":"column-module-Col--3-tRdfx-4-30-3","Col--4":"column-module-Col--4-SxYUZ-4-30-3","Col--5":"column-module-Col--5-Ghiks-4-30-3","Col--6":"column-module-Col--6-JO4qo-4-30-3","Col--7":"column-module-Col--7-SRnJx-4-30-3","Col--8":"column-module-Col--8-HBxc4-4-30-3","Col--9":"column-module-Col--9-eMJ9n-4-30-3","Col--10":"column-module-Col--10-VSo8k-4-30-3","Col--11":"column-module-Col--11-miljX-4-30-3","Col--12":"column-module-Col--12-9Obkj-4-30-3","Col--xs-auto":"column-module-Col--xs-auto-oXQ2q-4-30-3","Col--xs-1":"column-module-Col--xs-1-KvELd-4-30-3","Col--xs-2":"column-module-Col--xs-2-OUGOZ-4-30-3","Col--xs-3":"column-module-Col--xs-3-G55n8-4-30-3","Col--xs-4":"column-module-Col--xs-4-PADe9-4-30-3","Col--xs-5":"column-module-Col--xs-5-Ex4rw-4-30-3","Col--xs-6":"column-module-Col--xs-6-fzX37-4-30-3","Col--xs-7":"column-module-Col--xs-7-zWOG--4-30-3","Col--xs-8":"column-module-Col--xs-8-gngfO-4-30-3","Col--xs-9":"column-module-Col--xs-9-b-r8L-4-30-3","Col--xs-10":"column-module-Col--xs-10-umLd0-4-30-3","Col--xs-11":"column-module-Col--xs-11-KvOKo-4-30-3","Col--xs-12":"column-module-Col--xs-12-u1Ks8-4-30-3","Col--s-auto":"column-module-Col--s-auto-rQS8S-4-30-3","Col--s-1":"column-module-Col--s-1-BVL5j-4-30-3","Col--s-2":"column-module-Col--s-2-9s29P-4-30-3","Col--s-3":"column-module-Col--s-3-69Bdl-4-30-3","Col--s-4":"column-module-Col--s-4-nE4kT-4-30-3","Col--s-5":"column-module-Col--s-5-B72Pu-4-30-3","Col--s-6":"column-module-Col--s-6-AdMSU-4-30-3","Col--s-7":"column-module-Col--s-7-e656U-4-30-3","Col--s-8":"column-module-Col--s-8-1EhC1-4-30-3","Col--s-9":"column-module-Col--s-9-rpHj--4-30-3","Col--s-10":"column-module-Col--s-10-GVB2t-4-30-3","Col--s-11":"column-module-Col--s-11-3WJSe-4-30-3","Col--s-12":"column-module-Col--s-12-eFxie-4-30-3","Col--m-auto":"column-module-Col--m-auto-DTvE1-4-30-3","Col--m-1":"column-module-Col--m-1-T7-6r-4-30-3","Col--m-2":"column-module-Col--m-2-UJZxe-4-30-3","Col--m-3":"column-module-Col--m-3-jgXEy-4-30-3","Col--m-4":"column-module-Col--m-4-86-dP-4-30-3","Col--m-5":"column-module-Col--m-5-RxZc2-4-30-3","Col--m-6":"column-module-Col--m-6-RwrEz-4-30-3","Col--m-7":"column-module-Col--m-7-HuA0i-4-30-3","Col--m-8":"column-module-Col--m-8-qKE7R-4-30-3","Col--m-9":"column-module-Col--m-9--8vSy-4-30-3","Col--m-10":"column-module-Col--m-10-aBQ1l-4-30-3","Col--m-11":"column-module-Col--m-11-08F-U-4-30-3","Col--m-12":"column-module-Col--m-12-gZ47F-4-30-3","Col--l-auto":"column-module-Col--l-auto-SxR1p-4-30-3","Col--l-1":"column-module-Col--l-1-aLREn-4-30-3","Col--l-2":"column-module-Col--l-2-0mG-c-4-30-3","Col--l-3":"column-module-Col--l-3--aWDx-4-30-3","Col--l-4":"column-module-Col--l-4-GTf5q-4-30-3","Col--l-5":"column-module-Col--l-5-5MGhB-4-30-3","Col--l-6":"column-module-Col--l-6-DY6jT-4-30-3","Col--l-7":"column-module-Col--l-7-Wyv6Z-4-30-3","Col--l-8":"column-module-Col--l-8-30knO-4-30-3","Col--l-9":"column-module-Col--l-9-H-ap--4-30-3","Col--l-10":"column-module-Col--l-10-wgJl4-4-30-3","Col--l-11":"column-module-Col--l-11-4dOz3-4-30-3","Col--l-12":"column-module-Col--l-12-xC5rs-4-30-3","Col--xl-auto":"column-module-Col--xl-auto-zH0n0-4-30-3","Col--xl-1":"column-module-Col--xl-1-ZCRQR-4-30-3","Col--xl-2":"column-module-Col--xl-2-5agyW-4-30-3","Col--xl-3":"column-module-Col--xl-3-e5vjv-4-30-3","Col--xl-4":"column-module-Col--xl-4--aAZH-4-30-3","Col--xl-5":"column-module-Col--xl-5-167j6-4-30-3","Col--xl-6":"column-module-Col--xl-6-wXLZ--4-30-3","Col--xl-7":"column-module-Col--xl-7-QA116-4-30-3","Col--xl-8":"column-module-Col--xl-8-Q22c5-4-30-3","Col--xl-9":"column-module-Col--xl-9-bJrrK-4-30-3","Col--xl-10":"column-module-Col--xl-10-IALsA-4-30-3","Col--xl-11":"column-module-Col--xl-11-vrchj-4-30-3","Col--xl-12":"column-module-Col--xl-12-6dUnj-4-30-3"};
styleInject(css_248z$17);
var _excluded$1p = ["size", "sizeXS", "sizeS", "sizeM", "sizeL", "sizeXL", "className", "children"];
var Column = /*#__PURE__*/React.forwardRef(function (props, ref) {
var size = props.size,
sizeXS = props.sizeXS,
sizeS = props.sizeS,
sizeM = props.sizeM,
sizeL = props.sizeL,
sizeXL = props.sizeXL,
className = props.className,
children = props.children,
rest = _objectWithoutProperties(props, _excluded$1p);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, rowStyles['Col'], true), rowStyles["Col--".concat(size)], size), rowStyles["Col--xs-".concat(sizeXS)], sizeXS), rowStyles["Col--s-".concat(sizeS)], sizeS), rowStyles["Col--m-".concat(sizeM)], sizeM), rowStyles["Col--l-".concat(sizeL)], sizeL), rowStyles["Col--xl-".concat(sizeXL)], sizeXL), className);
return /*#__PURE__*/React.createElement("div", _extends$2({
ref: ref,
"data-test": "DesignSystem-Column"
}, rest, {
className: classes
}), children);
});
Column.displayName = 'Column';
var _excluded$1o = ["onKeyDown"];
var Trigger$1 = function Trigger(props) {
var inputFormat = props.inputFormat,
inputOptions = props.inputOptions,
validators = props.validators,
state = props.state,
setState = props.setState,
inputRef = props.inputRef,
onInputKeyDown = props.onInputKeyDown;
var init = state.init,
date$1 = state.date,
error = state.error;
var _inputOptions$placeho = inputOptions.placeholderChar,
placeholderChar = _inputOptions$placeho === void 0 ? '_' : _inputOptions$placeho;
var onPasteHandler = function onPasteHandler(_e, val) {
var onPaste = inputOptions.onPaste;
setState({
open: true
});
if (val && !val.includes(placeholderChar)) {
var d = translateToDate(inputFormat, val, validators);
setState({
date: d
});
}
if (onPaste) onPaste(_e, val);
};
var onChangeHandler = function onChangeHandler(_e, val) {
var onChange = inputOptions.onChange;
setState({
open: true
});
if (val && !val.includes(placeholderChar)) {
var d = translateToDate(inputFormat, val, validators);
setState({
date: d
});
}
if (onChange) onChange(_e);
};
var onBlurHandler = function onBlurHandler(_e, val) {
var onBlur = inputOptions.onBlur;
setState({
init: true
});
var hasNumber = /\d/;
if (val && hasNumber.test(val) && val.includes(placeholderChar)) {
setState({
error: true
});
} else if (val && !hasNumber.test(val) || !val) {
setState({
error: false
});
}
if (onBlur) onBlur(_e, val || '');
};
var onClearHandler = function onClearHandler(e) {
var onClear = inputOptions.onClear;
setState({
init: true,
date: undefined
});
if (onClear) onClear(e);
};
var showError = inputOptions.error || inputOptions.required && error && init;
var errorMessage = inputOptions.caption === undefined ? 'Invalid value' : inputOptions.caption;
var inputValidator = function inputValidator(val) {
return isValid(validators, val, inputFormat);
};
var mask = date[inputFormat];
var optionsKeyDown = inputOptions.onKeyDown,
inputRest = _objectWithoutProperties(inputOptions, _excluded$1o);
return /*#__PURE__*/React.createElement(X, _extends$2({
icon: "events",
placeholder: inputFormat
}, inputRest, {
ref: inputRef,
error: showError,
mask: mask,
value: date$1 ? translateToString(inputFormat, date$1) : init ? X.utils.getDefaultValue(mask, placeholderChar) : '',
onChange: onChangeHandler,
onPaste: onPasteHandler,
onBlur: onBlurHandler,
onKeyDown: function onKeyDown(e) {
// Consumer first so preventDefault can cancel picker Tab/ArrowDown focus moves.
optionsKeyDown === null || optionsKeyDown === void 0 || optionsKeyDown(e);
if (!e.defaultPrevented) {
onInputKeyDown === null || onInputKeyDown === void 0 || onInputKeyDown(e);
}
},
onClear: onClearHandler,
caption: showError ? errorMessage : '',
validators: [inputValidator],
clearOnEmptyBlur: true,
useDefaultValueOnEmpty: true
}));
};
var css_248z$16 = ".datePicker-module-DatePicker-content-Iw4EE-4-30-3 {\n display: flex;\n}\n\n@media (max-width: 576px) {\n .datePicker-module-DatePicker-content-Iw4EE-4-30-3 {\n flex-direction: column;\n }\n}\n";
var styles$11 = {"DatePicker-content":"datePicker-module-DatePicker-content-Iw4EE-4-30-3"};
styleInject(css_248z$16);
var _excluded$1n = ["date", "open", "position", "inputFormat", "outputFormat", "inputOptions", "validators", "withInput", "disabledBefore", "disabledAfter", "onDateChange", "closeOnSelect", "size", "showTodayDate", "children", "view"];
var DatePicker = /*#__PURE__*/function (_React$Component) {
function DatePicker(props) {
var _this;
_classCallCheck(this, DatePicker);
_this = _callSuper(this, DatePicker, [props]);
_defineProperty$1(_this, "inputRef", /*#__PURE__*/React.createRef());
_defineProperty$1(_this, "calendarContainerRef", /*#__PURE__*/React.createRef());
_defineProperty$1(_this, "focusCalendar", function () {
var root = _this.calendarContainerRef.current;
if (!root) return false;
var target = findFocusableCalendarCell(root);
if (!target) return false;
// focusVisible keeps a ring after mouse-open in browsers that support it;
// calendar CSS also paints :focus so the indicator is never silent.
target.focus({
preventScroll: true,
focusVisible: true
});
return true;
});
_defineProperty$1(_this, "onInputKeyDown", function (e) {
if (!_this.state.open || e.defaultPrevented) return;
// Keep typing uninterrupted; move focus into the portaled calendar on Tab / ArrowDown.
// Only prevent default when a focusable calendar cell exists (date/month/year views).
if (e.key === 'ArrowDown' || e.key === 'Tab' && !e.shiftKey) {
var root = _this.calendarContainerRef.current;
var target = root ? findFocusableCalendarCell(root) : null;
if (!target) return;
e.preventDefault();
requestAnimationFrame(function () {
target.focus({
preventScroll: true,
focusVisible: true
});
});
}
});
_defineProperty$1(_this, "getError", function (date) {
var _this$props = _this.props,
disabledBefore = _this$props.disabledBefore,
disabledAfter = _this$props.disabledAfter,
outputFormat = _this$props.outputFormat,
onError = _this$props.onError;
if (!date) return false;
var _getDateInfo = getDateInfo(disabledBefore),
dbYear = _getDateInfo.year,
dbMonth = _getDateInfo.month,
dbDate = _getDateInfo.date;
var _getDateInfo2 = getDateInfo(disabledAfter),
daYear = _getDateInfo2.year,
daMonth = _getDateInfo2.month,
daDate = _getDateInfo2.date;
if (compareDate(date, 'less', dbYear, dbMonth, dbDate) || compareDate(date, 'more', daYear, daMonth, daDate)) {
if (onError) {
var dVal = translateToString(outputFormat, date);
onError(date, dVal);
}
return true;
}
return false;
});
_defineProperty$1(_this, "onDateChangeHandler", function (d) {
_this.setState({
init: true,
date: d
});
var closeOnSelect = _this.props.closeOnSelect;
if (closeOnSelect) _this.setState({
open: false
});
});
_defineProperty$1(_this, "onToggleHandler", function (o, type) {
var disabled = _this.props.inputOptions.disabled;
if (disabled) return;
switch (type) {
case 'outsideClick':
case 'escapeKeypress':
_this.setState({
open: o
});
break;
case 'onClick':
{
// Only move focus when opening (closed → open). If already open (e.g. opened by typing),
// keep focus in the input so the user can reposition the caret / select text.
var shouldFocusCalendar = !_this.state.open;
_this.setState({
open: true
}, function () {
if (!shouldFocusCalendar) return;
requestAnimationFrame(function () {
requestAnimationFrame(function () {
_this.focusCalendar();
});
});
});
break;
}
}
});
var inputFormat = props.inputFormat,
validators = props.validators;
var _date = convertToDate(props.date, inputFormat, validators);
var error = _this.getError(_date);
_this.state = {
date: _date,
error: error,
init: false,
open: props.open || false
};
return _this;
}
_inherits(DatePicker, _React$Component);
return _createClass(DatePicker, [{
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
if (prevProps.date !== this.props.date) {
var _this$props2 = this.props,
inputFormat = _this$props2.inputFormat,
validators = _this$props2.validators;
var d = convertToDate(this.props.date, inputFormat, validators);
this.setState({
date: d
});
}
if (prevProps.open !== this.props.open) {
this.setState({
open: this.props.open || false
});
}
if (prevState.date !== this.state.date) {
var _this$props3 = this.props,
onDateChange = _this$props3.onDateChange,
outputFormat = _this$props3.outputFormat;
var date = this.state.date;
var newError = this.getError(date);
this.setState({
error: newError
});
if (onDateChange) {
if (!newError) {
var dVal = translateToString(outputFormat, date);
onDateChange(date, dVal);
} else {
onDateChange(undefined, '');
}
}
}
// Return focus to the date input when the popover closes (select / Escape / outside click).
if (prevState.open && !this.state.open) {
var active = document.activeElement;
var calendarRoot = this.calendarContainerRef.current;
if (!active || active === document.body || calendarRoot && calendarRoot.contains(active)) {
var _this$inputRef$curren;
(_this$inputRef$curren = this.inputRef.current) === null || _this$inputRef$curren === void 0 || _this$inputRef$curren.focus({
preventScroll: true
});
}
}
}
}, {
key: "renderCalendar",
value: function renderCalendar() {
var _this2 = this;
var _this$props4 = this.props;
_this$props4.date;
_this$props4.open;
_this$props4.position;
var inputFormat = _this$props4.inputFormat;
_this$props4.outputFormat;
_this$props4.inputOptions;
var validators = _this$props4.validators;
_this$props4.withInput;
var disabledBefore = _this$props4.disabledBefore,
disabledAfter = _this$props4.disabledAfter;
_this$props4.onDateChange;
_this$props4.closeOnSelect;
var size = _this$props4.size,
_this$props4$showToda = _this$props4.showTodayDate,
showTodayDate = _this$props4$showToda === void 0 ? true : _this$props4$showToda,
_this$props4$children = _this$props4.children,
children = _this$props4$children === void 0 ? /*#__PURE__*/React.createElement(React.Fragment, null) : _this$props4$children,
view = _this$props4.view,
rest = _objectWithoutProperties(_this$props4, _excluded$1n);
var date = this.state.date;
var months = config.months;
var todayDate = new Date(Date.now());
var todayMonthAndDate = "".concat(months[todayDate.getMonth()], " ").concat(todayDate.getDate());
var currDate = convertToDate(date, inputFormat, validators);
var dateDisabledBefore = convertToDate(disabledBefore, inputFormat, validators);
var dateDisabledAfter = convertToDate(disabledAfter, inputFormat, validators);
var isSameDay = function isSameDay(date1, date2) {
return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
};
var isTodayDisabled = function isTodayDisabled() {
var isSameAsDisabledBefore = dateDisabledBefore && isSameDay(todayDate, dateDisabledBefore);
var isSameAsDisabledAfter = dateDisabledAfter && isSameDay(todayDate, dateDisabledAfter);
return !isSameAsDisabledBefore && compareDate(dateDisabledBefore, 'more', todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate()) || !isSameAsDisabledAfter && compareDate(dateDisabledAfter, 'less', todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate());
};
var todayChipClass = classnames({
'd-flex justify-content-center': true,
'pb-5': size === 'small',
'pb-6': size === 'large',
'pt-3': size === 'large' && view === 'year'
});
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
className: styles$11['DatePicker-content']
}, children, /*#__PURE__*/React.createElement(Calendar, _extends$2({}, rest, {
size: size,
date: currDate,
view: view,
disabledBefore: dateDisabledBefore,
disabledAfter: dateDisabledAfter,
onDateChange: this.onDateChangeHandler,
wrapperRef: this.calendarContainerRef
}))), showTodayDate && /*#__PURE__*/React.createElement("div", {
className: todayChipClass,
"data-test": "DesignSystem-Select--TodaysDate-wrapper"
}, /*#__PURE__*/React.createElement(Chip, {
label: "Today, ".concat(todayMonthAndDate),
name: "chip",
type: "action",
disabled: isTodayDisabled(),
onClick: function onClick() {
return _this2.onDateChangeHandler(new Date());
}
})));
}
}, {
key: "render",
value: function render() {
var _this$props5 = this.props,
position = _this$props5.position,
withInput = _this$props5.withInput,
inputFormat = _this$props5.inputFormat,
inputOptions = _this$props5.inputOptions,
validators = _this$props5.validators,
popoverOptions = _this$props5.popoverOptions;
var open = this.state.open;
if (withInput) {
var triggerInputOptions = _objectSpread2(_objectSpread2(_objectSpread2({}, inputOptions), inputOptions['aria-label'] || this.props['aria-label'] ? {
'aria-label': inputOptions['aria-label'] || this.props['aria-label']
} : {}), inputOptions['aria-labelledby'] || this.props['aria-labelledby'] ? {
'aria-labelledby': inputOptions['aria-labelledby'] || this.props['aria-labelledby']
} : {});
return /*#__PURE__*/React.createElement(Popover, _extends$2({
trigger: /*#__PURE__*/React.createElement(Trigger$1, {
inputFormat: inputFormat,
inputOptions: triggerInputOptions,
validators: validators,
state: this.state,
setState: this.setState.bind(this),
inputRef: this.inputRef,
onInputKeyDown: this.onInputKeyDown
}),
triggerClass: "w-100",
position: position,
appendToBody: true,
open: open,
onToggle: this.onToggleHandler
}, popoverOptions), this.renderCalendar());
}
return this.renderCalendar();
}
}]);
}(React.Component);
_defineProperty$1(DatePicker, "defaultProps", _objectSpread2(_objectSpread2({}, Calendar.defaultProps), {}, {
position: 'bottom-start',
inputFormat: 'mm/dd/yyyy',
outputFormat: 'mm/dd/yyyy',
validators: [date$1],
inputOptions: {},
closeOnSelect: true
}));
var parseDate = function parseDate(date_time) {
var d = new Date();
d.setHours(date_time.substring(0, 2));
d.setMinutes(date_time.substring(3, 5));
return d;
};
var isFormat12Hour = function isFormat12Hour(format) {
return format === '12-Hour';
};
var isTimeIn12HourFormat = function isTimeIn12HourFormat(time) {
return _isTimeInAM(time) || _isTimeInPM(time);
};
var _isTimeInAM = function _isTimeInAM(time) {
return time.includes('a') || time.includes('A');
};
var _isTimeInPM = function _isTimeInPM(time) {
return time.includes('p') || time.includes('P');
};
/**
* Convert time from 12 hour format to 24 hour format
* @param timeStr in hh:mm [AM/PM] format
* @returns time in HH:MM format
*/
var convert12To24HourFormat$1 = function convert12To24HourFormat(timeStr) {
var _timeStr$split = timeStr.split(' '),
_timeStr$split2 = _slicedToArray(_timeStr$split, 2),
time = _timeStr$split2[0],
modifier = _timeStr$split2[1];
var timeArr = time.split(':');
var hours = timeArr[0];
var minutes = timeArr[1];
if (hours === '12' && _isTimeInAM(modifier)) {
hours = '00';
}
if (_isTimeInPM(modifier) && hours !== '12') {
hours = (parseInt(hours, 10) + 12).toString();
}
return "".concat(hours, ":").concat(minutes);
};
/**
* @param val
* @returns insert 0 at start in case of single digit
*/
var convertToTwoDigit = function convertToTwoDigit(val) {
return ('0' + val).slice(-2);
};
/**
* Convert time from 24 hour format to 12 hour format
* @param timeStr in HH:MM format
* @returns time in hh:mm [AM/PM] format
*/
var convert24To12HourFormat = function convert24To12HourFormat(timeStr) {
var timeArr = timeStr.split(':');
var hours = parseInt(timeArr[0], 10);
var modifier = hours >= 12 ? 'PM' : 'AM';
var convertedHours = hours % 12 || 12;
var hoursInString = convertedHours.toString();
hoursInString = convertToTwoDigit(hoursInString);
var minutes = timeArr[1];
var result = "".concat(hoursInString.toString(), ":").concat(minutes, " ").concat(modifier);
return result;
};
var getTimeIn24HrFormat = function getTimeIn24HrFormat(timeStr) {
if (isTimeIn12HourFormat(timeStr)) {
return convert12To24HourFormat$1(timeStr);
}
return timeStr;
};
/**
* @param startTime in HH:MM format
* @param endTime in HH:MM format
* @returns returns true if start time is greater than end time
*/
var checkTimeDifference = function checkTimeDifference(startTime, endTime) {
var parseStartTime = parseDate(startTime);
var parseEndTime = parseDate(endTime);
return parseStartTime > parseEndTime;
};
/**
* @param startTime in HH:MM format
* @param endTime in HH:MM format
* @param interval
* @returns array of 24 hour time list based on interval
*/
var get24HourTimeList = function get24HourTimeList(startTime, endTime, interval) {
var timeList = [];
var parseStartTime = parseDate(startTime);
var parseEndTime = parseDate(endTime);
while (parseStartTime <= parseEndTime) {
timeList.push(parseStartTime.toTimeString().substring(0, 5));
parseStartTime.setMinutes(parseStartTime.getMinutes() + interval);
}
return timeList;
};
/**
* @param startTime in HH:MM format
* @param interval
* @returns time list in 24 hour format including times option for next day
*/
var getReverseTimeList = function getReverseTimeList(startTime, endTime, interval) {
var timeList = get24HourTimeList('00:00', '23:59', interval);
var startTimeIndex = timeList.indexOf(startTime);
var endTimeIndex = timeList.indexOf(endTime);
var nextDayTimeIndex = endTime === '' ? startTimeIndex : endTimeIndex + 1;
var presentDayList = timeList.slice(startTimeIndex);
var nextDayList = timeList.slice(0, nextDayTimeIndex);
var result = presentDayList.concat(nextDayList);
return result;
};
var getTimeListIn24HourFormat = function getTimeListIn24HourFormat(startTime, endTime, interval) {
if (endTime === '' || checkTimeDifference(startTime, endTime)) {
return getReverseTimeList(startTime, endTime, interval);
}
return get24HourTimeList(startTime, endTime, interval);
};
var getTimeDifference = function getTimeDifference(startTime, endTime) {
var timeStart = new Date('07/07/2022 ' + startTime);
var timeEnd = new Date('07/07/2022 ' + endTime);
var diff = timeEnd.getTime() - timeStart.getTime();
var diff_as_date = new Date(diff);
var hour = diff_as_date.getUTCHours();
var minute = diff_as_date.getUTCMinutes();
return {
hour: hour,
minute: minute
};
};
var getCustomLabel = function getCustomLabel(time, timeFormat, showDuration, referenceTime) {
var label = time;
if (isFormat12Hour(timeFormat)) {
label = convert24To12HourFormat(time);
}
if (showDuration && referenceTime) {
var _getTimeDifference = getTimeDifference(referenceTime, time),
hour = _getTimeDifference.hour,
minute = _getTimeDifference.minute;
var timeDiffLabel = " (".concat(hour, " hr ").concat(minute, " min)");
label += timeDiffLabel;
}
return label;
};
var isOptionDisabled = function isOptionDisabled(time, timeFormat, disabledSlotList) {
var timeValue = time;
if (isFormat12Hour(timeFormat)) {
timeValue = convert24To12HourFormat(time);
}
if (disabledSlotList.includes(timeValue)) {
return true;
}
return false;
};
var convertTimeToOptionList = function convertTimeToOptionList(timeList, timeFormat) {
var id = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'TimePicker-Option-key';
var showDuration = arguments.length > 3 ? arguments[3] : undefined;
var referenceTime = arguments.length > 4 ? arguments[4] : undefined;
var disabledSlotList = arguments.length > 5 ? arguments[5] : undefined;
var optionList = timeList.map(function (time, index) {
return {
label: getCustomLabel(time, timeFormat, showDuration, referenceTime),
value: time,
disabled: disabledSlotList && isOptionDisabled(time, timeFormat, disabledSlotList),
selected: false,
optionID: id + index
};
});
return optionList;
};
var computeEndTime = function computeEndTime(startTime) {
return startTime ? '' : '23:59';
};
var getDropdownOptionList = function getDropdownOptionList(props) {
var startTime = props.startTime,
endTime = props.endTime,
interval = props.interval,
timeFormat = props.timeFormat,
showDuration = props.showDuration,
disabledSlotList = props.disabledSlotList,
id = props.id;
var startTimeIn24Hr = startTime ? getTimeIn24HrFormat(startTime) : '00:00';
var endTimeIn24Hr = endTime ? getTimeIn24HrFormat(endTime) : computeEndTime(startTime);
var timeList = getTimeListIn24HourFormat(startTimeIn24Hr, endTimeIn24Hr, interval);
var dropdownOptionList = convertTimeToOptionList(timeList, timeFormat, id, showDuration, startTime, disabledSlotList);
return dropdownOptionList;
};
var convertMinTo60 = function convertMinTo60(time) {
var parseNum = parseInt(time, 10);
if (parseNum < 10) return time;
var timeInNum = parseNum > 60 ? parseNum % 60 : parseNum;
var min = (timeInNum.toString() + '0').slice(0, 2);
return min;
};
var get24HourCurrentTime = function get24HourCurrentTime() {
var today = new Date();
return convertToTwoDigit(today.getHours()) + ':' + convertToTwoDigit(today.getMinutes());
};
var convertHourTo24 = function convertHourTo24(time) {
var timeInNum = parseInt(time, 10) % 24;
return timeInNum.toString();
};
var convertHourTo12 = function convertHourTo12(time) {
var timeInNum = parseInt(time, 10) % 12;
return timeInNum.toString();
};
var _checkNumber = function _checkNumber(str) {
var numberRegex = /^[0-9]+$/;
return numberRegex.test(str);
};
var _checkNumberWithAMPM = function _checkNumberWithAMPM(str) {
var numberWithAMPMRegex = /^[0-9]+[ AaMmPp]+$/;
return numberWithAMPMRegex.test(str);
};
var _checkNumberWithSpecialChar = function _checkNumberWithSpecialChar(str) {
var numberWithSpecialCharRegex = /^[0-9]+[`\s!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~][0-9]*$/;
return numberWithSpecialCharRegex.test(str);
};
var _checkNumberWithSpecialCharAMPM = function _checkNumberWithSpecialCharAMPM(str) {
var numberWithSpecialCharAMPM = /^[0-9]+[`\s!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~][0-9]+[ AaMmPp]+$/;
return numberWithSpecialCharAMPM.test(str);
};
var specialCharRegex = /[`\s!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/;
/**
* @param searchTime in [number special-char number] format
* @returns timeObj with hour & minute in 24 hour format
*/
var getTimeFromNumberWithSpecialChar = function getTimeFromNumberWithSpecialChar(searchTime) {
var time = searchTime.split(specialCharRegex);
var hour = convertHourTo24(time[0]);
var hh = convertToTwoDigit(hour);
var min = time[1] !== '' ? convertMinTo60(time[1]) : '00';
var mm = (min + '0').slice(0, 2);
return {
hour: hh,
min: mm
};
};
/**
* If search term only contains number
* @param searchTerm
* @returns timeObj with hour & minute in 24 hour format
*/
var getSearchTimeFromNumber = function getSearchTimeFromNumber(searchTerm, show12HourFormat) {
var searchLen = searchTerm.length;
var searchTimeInNum = parseInt(searchTerm, 10);
var firstTwoTerm = searchTerm.slice(0, 2);
var hh = '00';
var mm = '00';
switch (searchLen) {
case 1:
// if search term length is 1 consider it as hour
hh = '0' + searchTerm;
break;
case 2:
// if search term length is 2
if (searchTimeInNum <= 24 || show12HourFormat && searchTimeInNum <= 12) {
// consider it as hour
hh = convertToTwoDigit(searchTerm);
} else {
// consider first term as hour and last term as min
hh = '0' + searchTerm[0];
mm = convertMinTo60(searchTerm[1] + '0');
// mm = searchTerm[1] + '0';
}
break;
case 3:
hh = '0' + searchTerm[0];
mm = convertMinTo60(searchTerm.slice(1));
break;
case 4:
hh = show12HourFormat ? convertHourTo12(firstTwoTerm) : convertHourTo24(firstTwoTerm);
mm = convertMinTo60(searchTerm.slice(2));
break;
default:
// set time as -1 in case of invalid time
hh = '-1';
mm = '-1';
}
return {
hour: hh,
min: mm
};
};
/**
* @param searchTime in [number AMPM] format
* @returns timeObj with hour & minute in 24 hour format
*/
var getTimeFromNumberWithAMPM = function getTimeFromNumberWithAMPM(searchTime) {
var timeArr = searchTime.split(/[\saAmMpP]/);
var _getSearchTimeFromNum = getSearchTimeFromNumber(timeArr[0], true),
hour = _getSearchTimeFromNum.hour,
min = _getSearchTimeFromNum.min;
return {
hour: hour,
min: min
};
};
/**
* @param searchTerm entered by user in any format
* @returns modified search term in 24 hour format
*/
var formatSearchTerm = function formatSearchTerm(optionList, searchTerm) {
var searchTime = {
hour: '00',
min: '00'
};
// If search term only contains numbers
if (_checkNumber(searchTerm)) {
var searchTimeInHHMM = getSearchTimeFromNumber(searchTerm);
if (parseInt(searchTimeInHHMM.hour) <= 12 && parseInt(searchTimeInHHMM.hour) > 0) {
// switch to AM/PM based on current time
searchTime = getCurrentRelativeTime(optionList, searchTimeInHHMM);
} else {
searchTime = searchTimeInHHMM;
}
}
// if search term contains numbers along with [ampm]
else if (_checkNumberWithAMPM(searchTerm)) {
searchTime = getTimeFromNumberWithAMPM(searchTerm);
searchTime.hour = convert12To24HourFormat(searchTime.hour, searchTerm);
}
// if search term contains numbers along with special character
else if (_checkNumberWithSpecialChar(searchTerm)) {
var _searchTimeInHHMM = getTimeFromNumberWithSpecialChar(searchTerm);
if (parseInt(_searchTimeInHHMM.hour) <= 12) {
// switch to AM/PM based on current time
searchTime = getCurrentRelativeTime(optionList, _searchTimeInHHMM);
} else {
searchTime = _searchTimeInHHMM;
}
}
// if search term contains numbers, special character & [AmPm]
else if (_checkNumberWithSpecialCharAMPM(searchTerm)) {
var timeWithoutAMPM = searchTerm.replace(/[\saApPmM]/g, '');
if (_checkNumber(timeWithoutAMPM)) {
searchTime = getSearchTimeFromNumber(timeWithoutAMPM, true);
} else if (_checkNumberWithSpecialChar(timeWithoutAMPM)) {
searchTime = getTimeFromNumberWithSpecialChar(timeWithoutAMPM);
}
searchTime.hour = convert12To24HourFormat(searchTime.hour, searchTerm);
}
return searchTime;
};
/**
* @param hours
* @param searchTerm
* @returns hours based on AM/PM in 24 hour format
*/
var convert12To24HourFormat = function convert12To24HourFormat(hours, searchTerm) {
if (hours === '12' && _isTimeInAM(searchTerm)) {
hours = '00';
} else if (_isTimeInPM(searchTerm) && hours !== '12') {
hours = (parseInt(hours, 10) + 12).toString();
}
return hours;
};
/**
* Switch to AM/PM time based on current time
* @param optionList
* @param searchTime
*/
var getCurrentRelativeTime = function getCurrentRelativeTime(optionList, searchTime) {
var searchTimeStr = "".concat(searchTime.hour, ":").concat(searchTime.min);
var currentTime = get24HourCurrentTime();
var greaterTime = checkTimeDifference(currentTime, searchTimeStr);
var currentTimeIndex = findClosestTimeIndex(optionList, currentTime);
var searchTimeIndex = findClosestTimeIndex(optionList, searchTimeStr);
if (greaterTime && currentTimeIndex > searchTimeIndex) {
var hourIn24Format = parseInt(searchTime.hour, 10) + 12;
searchTime.hour = hourIn24Format.toString();
}
return searchTime;
};
var findClosestTimeIndex = function findClosestTimeIndex(optionList, searchItem) {
var closestItemIndex = 0;
var minTime = {
hour: 100,
mins: 100
};
for (var index = 0; index < optionList.length; index++) {
var _getTimeDifference = getTimeDifference(searchItem, optionList[index]),
hour = _getTimeDifference.hour,
minute = _getTimeDifference.minute;
if (hour < minTime.hour || hour === minTime.hour && minute < minTime.mins) {
minTime.hour = hour;
minTime.mins = minute;
closestItemIndex = index;
}
}
return closestItemIndex;
};
/**
* Get index of search term from option list
* @param optionList
* @param searchTerm
* @returns Index of the search term in option list
*/
var getSearchIndex = function getSearchIndex(optionList, searchTerm) {
var _formatSearchTerm = formatSearchTerm(optionList, searchTerm),
hour = _formatSearchTerm.hour,
min = _formatSearchTerm.min;
if (min === '60') {
min = '00';
hour = (parseInt(hour, 10) + 1).toString();
}
var searchItem = "".concat(hour, ":").concat(min);
var searchIndex = findClosestTimeIndex(optionList, searchItem);
return searchIndex;
};
/**
* @param searchTerm
* @returns count number of digits present inside search term
*/
var countNumberInStr = function countNumberInStr(searchTerm) {
var _searchTerm$match;
return ((_searchTerm$match = searchTerm.match(/\d/g)) === null || _searchTerm$match === void 0 ? void 0 : _searchTerm$match.length) || 0;
};
var isValidSearchTerm = function isValidSearchTerm(searchTerm) {
var totalDigit = countNumberInStr(searchTerm);
return totalDigit > 0 && totalDigit < 5;
};
var getValueFromOptionList = function getValueFromOptionList(optionList) {
var list = optionList.map(function (option) {
return option.value;
});
return list;
};
var getSearchValueIndex = function getSearchValueIndex(options, searchTerm) {
// Search Term is valid if it contains number
if (!isValidSearchTerm(searchTerm)) {
return -1;
}
var searchIndex = getSearchIndex(options, searchTerm);
return searchIndex;
};
var getScrollIndex = function getScrollIndex(dropdownOptionList, searchTerm) {
var optionList = getValueFromOptionList(dropdownOptionList);
if (searchTerm === '') {
// return current time index
var currTime = get24HourCurrentTime();
var currTimeIndex = findClosestTimeIndex(optionList, currTime);
return currTimeIndex;
}
return getSearchValueIndex(optionList, searchTerm);
};
var getSearchedOptions = function getSearchedOptions(options, searchTerm) {
var result = options.filter(function (option) {
return option.label.toLowerCase().includes(searchTerm.toLowerCase());
});
return result;
};
var sortList = function sortList(arr) {
return arr.sort(function (a, b) {
return a.value > b.value ? 1 : b.value > a.value ? -1 : 0;
});
};
var _isEqual = function _isEqual(firstList, secondList) {
var firstSortedList = sortList(_toConsumableArray(firstList));
var secondSortedList = sortList(_toConsumableArray(secondList));
return firstSortedList.length === secondSortedList.length && firstSortedList.every(function (option, index) {
return option.value === secondSortedList[index].value;
});
};
var _isControlled = function _isControlled(selected) {
return selected !== undefined;
};
var _isOpenControlled = function _isOpenControlled(open) {
return open !== undefined;
};
var _showSelectedItems = function _showSelectedItems(bulk, searchTerm, withCheckbox) {
return bulk && withCheckbox && searchTerm === '';
};
var _isSelectAllPresent = function _isSelectAllPresent(searchTerm, bulkOptions, withSelectAll, withCheckbox) {
return withCheckbox && withSelectAll && bulkOptions === 0 && searchTerm === '';
};
var scrollTo = function scrollTo(element, top) {
element.scrollTo(0, top);
};
var scrollIntoView = function scrollIntoView(menuElement, focusedElement) {
var menuRect = menuElement === null || menuElement === void 0 ? void 0 : menuElement.getBoundingClientRect();
var focusedRect = focusedElement.getBoundingClientRect();
var overscroll = focusedElement.offsetHeight;
if (focusedRect.bottom > menuRect.bottom && menuElement) {
scrollTo(menuElement, focusedElement.offsetTop - menuRect.height + overscroll);
} else if (focusedRect.top < menuRect.top && menuElement) {
scrollTo(menuElement, focusedElement.offsetTop - overscroll);
}
};
var getSelectAll$1 = function getSelectAll(selected, optionsLength, disabledOptionsLength) {
if (selected.length) {
if (selected.length > 0 && disabledOptionsLength > 0 && selected.length === optionsLength - disabledOptionsLength) {
return {
indeterminate: true,
checked: true
}; //
}
var indeterminate = selected.length > 0 && selected.length !== optionsLength;
var checked = selected.length > 0 && selected.length === optionsLength;
var obj = {
checked: checked,
indeterminate: indeterminate
};
return obj;
}
return {
indeterminate: false,
checked: false
};
};
var scrollToOptionIndex = function scrollToOptionIndex(scrollIndex, listOptions) {
var _listOptions$scrollIn;
var optionID = listOptions && ((_listOptions$scrollIn = listOptions[scrollIndex]) === null || _listOptions$scrollIn === void 0 ? void 0 : _listOptions$scrollIn.optionID);
var targetOption = document.getElementById(optionID);
targetOption && targetOption.scrollIntoView && targetOption.scrollIntoView({
block: 'center'
});
};
var groupListOptions = function groupListOptions(listOptions) {
var _ref;
var groupList = listOptions.reduce(function (acc, option) {
var group = option.group || '';
if (!acc[group]) {
acc[group] = [];
}
acc[group].push(option);
return acc;
}, {});
var flattenedGroupList = (_ref = []).concat.apply(_ref, _toConsumableArray(Object.values(groupList)));
return flattenedGroupList;
};
var css_248z$15 = ".timePicker-module-TimePicker-trigger-fjkh7-4-30-3 {\n width: calc(var(--spacing-40) * 20);\n min-width: calc(var(--spacing-40) * 16);\n}\n";
var timePickerStyles = {"TimePicker-trigger":"timePicker-module-TimePicker-trigger-fjkh7-4-30-3"};
styleInject(css_248z$15);
var TimePickerWithSearch = function TimePickerWithSearch(props) {
var open = props.open,
endTime = props.endTime,
interval = props.interval,
onChange = props.onChange,
startTime = props.startTime,
timeFormat = props.timeFormat,
showDuration = props.showDuration,
noResultMessage = props.noResultMessage,
disabledSlotList = props.disabledSlotList,
fetchTimeOptions = props.fetchTimeOptions,
error = props.error,
className = props.className,
ariaLabel = props['aria-label'],
optionsAriaLabel = props.optionsAriaLabel;
var _React$useState = React.useState(0),
_React$useState2 = _slicedToArray(_React$useState, 2),
tabIndex = _React$useState2[0],
setTabIndex = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
openPopover = _React$useState4[0],
setOpenPopover = _React$useState4[1];
var _React$useState5 = React.useState(-1),
_React$useState6 = _slicedToArray(_React$useState5, 2),
selectedIndex = _React$useState6[0],
setSelectedIndex = _React$useState6[1];
var _React$useState7 = React.useState(0),
_React$useState8 = _slicedToArray(_React$useState7, 2),
counter = _React$useState8[0],
setCounter = _React$useState8[1];
var dropdownOptionList = getDropdownOptionList(props);
React.useEffect(function () {
open !== undefined && setOpenPopover(open);
}, [open]);
React.useEffect(function () {
var timer;
if (openPopover && selectedIndex != -1) {
setTabIndex(selectedIndex);
timer = setTimeout(function () {
scrollToOptionIndex(selectedIndex, dropdownOptionList);
}, 100);
}
return function () {
clearTimeout(timer);
};
}, [openPopover]);
// Required to re-render dropdown forcefully whenever props changes
React.useEffect(function () {
setCounter(counter + 1);
}, [startTime, endTime, interval, showDuration, disabledSlotList]);
var onChangeHandler = function onChangeHandler(props) {
var time = props;
if (isFormat12Hour(timeFormat)) {
time = convert24To12HourFormat(time);
}
var selectIndex = dropdownOptionList.findIndex(function (option) {
return option.value === props;
});
setSelectedIndex(selectIndex);
onChange && onChange(time);
};
var getOptionList = function getOptionList(searchTerm) {
var scrollIndex;
var indexValue = getScrollIndex(dropdownOptionList, searchTerm);
if (searchTerm === '' && selectedIndex != -1) {
scrollIndex = selectedIndex;
setTabIndex(selectedIndex);
} else {
scrollIndex = indexValue;
setTabIndex(indexValue);
}
return Promise.resolve({
options: indexValue === -1 ? [] : dropdownOptionList,
count: dropdownOptionList.length,
scrollToIndex: scrollIndex === 0 ? scrollIndex + 1 : scrollIndex,
searchTerm: searchTerm
});
};
var fetchOptionList = function fetchOptionList() {
return fetchTimeOptions ? fetchTimeOptions : getOptionList;
};
return /*#__PURE__*/React.createElement(Dropdown, {
key: counter,
maxHeight: 160,
loadersCount: 0,
withSearch: true,
open: openPopover,
tabIndex: tabIndex,
searchPlaceholder: "Search",
onChange: onChangeHandler,
fetchOptions: fetchOptionList(),
noResultMessage: noResultMessage,
staticLimit: dropdownOptionList.length,
onPopperToggle: function onPopperToggle() {
setOpenPopover(!openPopover);
},
error: error,
"aria-label": ariaLabel,
optionsAriaLabel: optionsAriaLabel,
className: classnames(timePickerStyles['TimePicker-trigger'], className),
truncateOption: false
});
};
TimePickerWithSearch.defaultProps = {
timeFormat: '12-Hour',
interval: 15,
optionsAriaLabel: 'Time options'
};
TimePickerWithSearch.displayName = 'TimePickerWithSearch';
var TimePickerWithInput = function TimePickerWithInput(props) {
var validators = props.validators,
inputOptions = props.inputOptions,
inputFormat = props.inputFormat,
outputFormat = props.outputFormat,
onTimeChange = props.onTimeChange,
timeProp = props.time,
error = props.error;
var _React$useState = React.useState(timeProp),
_React$useState2 = _slicedToArray(_React$useState, 2),
time$1 = _React$useState2[0],
setTime = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
init = _React$useState4[0],
setInit = _React$useState4[1];
var _inputOptions$placeho = inputOptions.placeholderChar,
placeholderChar = _inputOptions$placeho === void 0 ? '_' : _inputOptions$placeho;
React.useEffect(function () {
var timeStr = translateToTime(inputFormat, time$1);
var updatedTime = timeProp === undefined && timeStr.includes(placeholderChar) ? time$1 : timeProp;
setTime(updatedTime);
}, [timeProp]);
var onChangeHandler = function onChangeHandler(e) {
var val = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var updatedTime = val === null || val === void 0 ? void 0 : val.toUpperCase();
setTime(updatedTime);
if (inputOptions.onChange) {
inputOptions.onChange(e, val);
}
};
var onBlurHandler = function onBlurHandler(e) {
var val = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var updatedTime = translateToTime(inputFormat, time$1);
setInit(true);
if (onTimeChange) {
var outputTimeStr = updatedTime && !isPlaceholderPresent(placeholderChar, updatedTime) ? getOutputTimeString(inputFormat, outputFormat, updatedTime) : undefined;
onTimeChange(outputTimeStr);
}
if (inputOptions.onBlur) inputOptions.onBlur(e, val);
};
var onClearHandler = function onClearHandler(e) {
var updatedTime = '';
setInit(true);
if (onTimeChange) onTimeChange(updatedTime);
if (inputOptions.onClear) inputOptions.onClear(e);
};
var inputValidator = function inputValidator(val) {
return isValid(validators, val, inputFormat);
};
var mask = time[inputFormat];
return /*#__PURE__*/React.createElement(X, _extends$2({
placeholder: placeholders[inputFormat],
placeholderChar: placeholderChar
}, inputOptions, {
mask: mask,
value: time$1 ? translateToTime(inputFormat, time$1) : init ? X.utils.getDefaultValue(mask, placeholderChar) : '',
validators: inputValidator,
onChange: onChangeHandler,
onClear: onClearHandler,
onBlur: onBlurHandler,
error: error,
"aria-label": inputOptions['aria-label'] || props['aria-label'],
useDefaultValueOnEmpty: true
}));
};
TimePickerWithInput.defaultProps = {
inputFormat: 'hh:mm AM',
outputFormat: 'hh:mm AM',
inputOptions: {},
validators: [time$1]
};
TimePickerWithInput.displayName = 'TimePickerWithInput';
var TimePicker = function TimePicker(props) {
return props.withSearch ? /*#__PURE__*/React.createElement(TimePickerWithSearch, props) : /*#__PURE__*/React.createElement(TimePickerWithInput, props);
};
TimePicker.defaultProps = _objectSpread2(_objectSpread2({}, TimePickerWithInput.defaultProps), TimePickerWithSearch.defaultProps);
TimePicker.displayName = 'TimePicker';
/* eslint-disable no-undefined,no-param-reassign,no-shadow */
/**
* Throttle execution of a function. Especially useful for rate limiting
* execution of handlers on events like resize and scroll.
*
* @param {number} delay - A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
* @param {boolean} [noTrailing] - Optional, defaults to false. If noTrailing is true, callback will only execute every `delay` milliseconds while the
* throttled-function is being called. If noTrailing is false or unspecified, callback will be executed one final time
* after the last throttled-function call. (After the throttled-function has not been called for `delay` milliseconds,
* the internal counter is reset).
* @param {Function} callback - A function to be executed after delay milliseconds. The `this` context and all arguments are passed through, as-is,
* to `callback` when the throttled-function is executed.
* @param {boolean} [debounceMode] - If `debounceMode` is true (at begin), schedule `clear` to execute after `delay` ms. If `debounceMode` is false (at end),
* schedule `callback` to execute after `delay` ms.
*
* @returns {Function} A new, throttled, function.
*/
function throttle (delay, noTrailing, callback, debounceMode) {
/*
* After wrapper has stopped being called, this timeout ensures that
* `callback` is executed at the proper times in `throttle` and `end`
* debounce modes.
*/
var timeoutID;
var cancelled = false; // Keep track of the last time `callback` was executed.
var lastExec = 0; // Function to clear existing timeout
function clearExistingTimeout() {
if (timeoutID) {
clearTimeout(timeoutID);
}
} // Function to cancel next exec
function cancel() {
clearExistingTimeout();
cancelled = true;
} // `noTrailing` defaults to falsy.
if (typeof noTrailing !== 'boolean') {
debounceMode = callback;
callback = noTrailing;
noTrailing = undefined;
}
/*
* The `wrapper` function encapsulates all of the throttling / debouncing
* functionality and when executed will limit the rate at which `callback`
* is executed.
*/
function wrapper() {
for (var _len = arguments.length, arguments_ = new Array(_len), _key = 0; _key < _len; _key++) {
arguments_[_key] = arguments[_key];
}
var self = this;
var elapsed = Date.now() - lastExec;
if (cancelled) {
return;
} // Execute `callback` and update the `lastExec` timestamp.
function exec() {
lastExec = Date.now();
callback.apply(self, arguments_);
}
/*
* If `debounceMode` is true (at begin) this is used to clear the flag
* to allow future `callback` executions.
*/
function clear() {
timeoutID = undefined;
}
if (debounceMode && !timeoutID) {
/*
* Since `wrapper` is being called for the first time and
* `debounceMode` is true (at begin), execute `callback`.
*/
exec();
}
clearExistingTimeout();
if (debounceMode === undefined && elapsed > delay) {
/*
* In throttle mode, if `delay` time has been exceeded, execute
* `callback`.
*/
exec();
} else if (noTrailing !== true) {
/*
* In trailing throttle mode, since `delay` time has not been
* exceeded, schedule `callback` to execute `delay` ms after most
* recent execution.
*
* If `debounceMode` is true (at begin), schedule `clear` to execute
* after `delay` ms.
*
* If `debounceMode` is false (at end), schedule `callback` to
* execute after `delay` ms.
*/
timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
}
}
wrapper.cancel = cancel; // Return the wrapper function.
return wrapper;
}
/* eslint-disable no-undefined */
/**
* Debounce execution of a function. Debouncing, unlike throttling,
* guarantees that a function is only executed a single time, either at the
* very beginning of a series of calls, or at the very end.
*
* @param {number} delay - A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
* @param {boolean} [atBegin] - Optional, defaults to false. If atBegin is false or unspecified, callback will only be executed `delay` milliseconds
* after the last debounced-function call. If atBegin is true, callback will be executed only at the first debounced-function call.
* (After the throttled-function has not been called for `delay` milliseconds, the internal counter is reset).
* @param {Function} callback - A function to be executed after delay milliseconds. The `this` context and all arguments are passed through, as-is,
* to `callback` when the debounced-function is executed.
*
* @returns {Function} A new, debounced function.
*/
function debounce$1 (delay, atBegin, callback) {
return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);
}
var css_248z$14 = ".dropdownButton-module-DropdownButton-WEFAu-4-30-3 {\n width: 100%;\n justify-content: space-between;\n padding-top: unset;\n padding-bottom: unset;\n background: var(--secondary-light);\n color: var(--text);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.dropdownButton-module-DropdownButton-wrapper--2rai-4-30-3 {\n width: 100%;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n align-items: center;\n}\n\n.dropdownButton-module-DropdownButton-text-iFVYT-4-30-3 {\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.dropdownButton-module-DropdownButton--tiny-Itu7p-4-30-3 {\n height: var(--spacing-60);\n padding-right: var(--spacing-20);\n padding-left: var(--spacing-20);\n}\n\n.dropdownButton-module-DropdownButton--regular--xsdh-4-30-3 {\n height: var(--spacing-80);\n padding-right: var(--spacing-20);\n padding-left: var(--spacing-30);\n}\n\n.dropdownButton-module-DropdownButton--tinySquare-h9ZCv-4-30-3 {\n padding-left: var(--spacing-10);\n padding-right: var(--spacing-10);\n}\n\n.dropdownButton-module-DropdownButton--regularSquare-aHX5x-4-30-3 {\n padding-left: var(--spacing-20);\n padding-right: var(--spacing-20);\n}\n\n.dropdownButton-module-DropdownButton--placeholder-P-OZc-4-30-3 {\n color: var(--text);\n}\n\n.dropdownButton-module-DropdownButton-WEFAu-4-30-3:hover {\n background: var(--secondary);\n color: var(--text);\n}\n\n.dropdownButton-module-DropdownButton-WEFAu-4-30-3:focus-visible {\n background-color: var(--secondary-light);\n box-shadow: none;\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.dropdownButton-module-DropdownButton-WEFAu-4-30-3:active,\n.dropdownButton-module-DropdownButton--open-FO2da-4-30-3 {\n background-color: var(--secondary-dark) !important;\n color: var(--text) !important;\n animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);\n animation-duration: 120ms;\n}\n\n.dropdownButton-module-DropdownButton-WEFAu-4-30-3:disabled {\n background: var(--secondary-lighter);\n color: var(--text-disabled);\n pointer-events: none;\n}\n\n.dropdownButton-module-DropdownButton--icon-lOUG2-4-30-3 {\n padding-left: var(--spacing-20);\n}\n\n.dropdownButton-module-DropdownButton--error-WBIV1-4-30-3 {\n border: var(--border-width-2-5) solid var(--alert);\n}\n";
var dropdownButtonStyles = {"DropdownButton":"dropdownButton-module-DropdownButton-WEFAu-4-30-3","DropdownButton-wrapper":"dropdownButton-module-DropdownButton-wrapper--2rai-4-30-3","DropdownButton-text":"dropdownButton-module-DropdownButton-text-iFVYT-4-30-3","DropdownButton--tiny":"dropdownButton-module-DropdownButton--tiny-Itu7p-4-30-3","DropdownButton--regular":"dropdownButton-module-DropdownButton--regular--xsdh-4-30-3","DropdownButton--tinySquare":"dropdownButton-module-DropdownButton--tinySquare-h9ZCv-4-30-3","DropdownButton--regularSquare":"dropdownButton-module-DropdownButton--regularSquare-aHX5x-4-30-3","DropdownButton--placeholder":"dropdownButton-module-DropdownButton--placeholder-P-OZc-4-30-3","DropdownButton--open":"dropdownButton-module-DropdownButton--open-FO2da-4-30-3","DropdownButton--icon":"dropdownButton-module-DropdownButton--icon-lOUG2-4-30-3","DropdownButton--error":"dropdownButton-module-DropdownButton--error-WBIV1-4-30-3"};
styleInject(css_248z$14);
var _excluded$1m = ["triggerSize", "placeholder", "menu", "children", "icon", "disabled", "open", "inlineLabel", "error", "iconType", "id", "aria-label", "aria-labelledby"];
var DropdownButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
var _props$triggerSize = props.triggerSize,
triggerSize = _props$triggerSize === void 0 ? 'regular' : _props$triggerSize,
_props$placeholder = props.placeholder,
placeholder = _props$placeholder === void 0 ? 'Select' : _props$placeholder,
_props$menu = props.menu,
menu = _props$menu === void 0 ? false : _props$menu,
children = props.children,
icon = props.icon,
disabled = props.disabled,
open = props.open,
inlineLabel = props.inlineLabel,
error = props.error,
iconType = props.iconType,
id = props.id,
ariaLabel = props['aria-label'],
ariaLabelledBy = props['aria-labelledby'],
rest = _objectWithoutProperties(props, _excluded$1m);
var buttonDisabled = disabled ? 'disabled' : 'default';
var trimmedPlaceholder = placeholder.trim();
var value = children ? children : trimmedPlaceholder;
var isPlaceholder = !children && !menu;
var valueElementId = id && children ? "".concat(id, "-value") : undefined;
var triggerLabelledBy = ariaLabelledBy && valueElementId ? "".concat(ariaLabelledBy, " ").concat(valueElementId) : ariaLabelledBy;
var iconName = !menu ? open ? 'keyboard_arrow_up' : 'keyboard_arrow_down' : icon ? icon : 'more_horiz';
var buttonClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, buttonStyles['Button'], true), dropdownButtonStyles.DropdownButton, true), dropdownButtonStyles["DropdownButton--".concat(triggerSize)], triggerSize), dropdownButtonStyles["DropdownButton--".concat(triggerSize, "Square")], menu), dropdownButtonStyles['DropdownButton--placeholder'], !children && !menu), dropdownButtonStyles['DropdownButton--icon'], icon), dropdownButtonStyles['DropdownButton--open'], open), dropdownButtonStyles['DropdownButton--error'], error));
var textClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, textStyles['Text'], true), textStyles['Text--regular'], true), dropdownButtonStyles['DropdownButton-text'], true));
return /*#__PURE__*/React.createElement("button", _extends$2({
ref: ref,
id: id,
type: "button",
value: children,
className: buttonClass,
disabled: disabled,
tabIndex: 0,
"aria-haspopup": menu ? 'menu' : 'listbox',
"aria-expanded": open,
"aria-label": ariaLabelledBy ? undefined : ariaLabel,
"aria-labelledby": triggerLabelledBy,
"data-test": "DesignSystem-DropdownTrigger"
}, rest), !menu && /*#__PURE__*/React.createElement("div", {
className: dropdownButtonStyles['DropdownButton-wrapper']
}, inlineLabel && /*#__PURE__*/React.createElement(Text$1, {
appearance: "subtle",
className: "mr-4 white-space-nowrap"
}, "".concat(inlineLabel.trim().charAt(0).toUpperCase()).concat(inlineLabel.trim().slice(1))), icon && !inlineLabel && /*#__PURE__*/React.createElement(Icon, {
appearance: buttonDisabled,
className: "d-flex align-items-center mr-4",
name: icon,
type: iconType
}), value && /*#__PURE__*/React.createElement("span", {
id: valueElementId,
className: textClass,
"aria-hidden": isPlaceholder && ariaLabelledBy ? true : undefined
}, value)), /*#__PURE__*/React.createElement(Icon, {
appearance: buttonDisabled,
name: iconName,
type: iconType
}));
});
DropdownButton.displayName = 'DropdownButton';
var CheckboxOption = function CheckboxOption(props) {
var className = props.className,
selected = props.selected,
optionData = props.optionData,
onChangeHandler = props.onChangeHandler,
onUpdateActiveOption = props.onUpdateActiveOption,
dataTest = props.dataTest,
_props$id = props.id,
id = _props$id === void 0 ? '' : _props$id,
menu = props.menu;
var subInfo = optionData.subInfo,
label = optionData.label,
disabled = optionData.disabled;
var checkboxClassName = classnames(_defineProperty$1(_defineProperty$1({}, dropdownStyles['OptionCheckbox'], true), 'pb-0', subInfo));
var renderSubInfo = function renderSubInfo(subInfo) {
var labelAppearance = disabled ? 'disabled' : 'subtle';
var iconAppearance = selected ? 'white' : 'disabled';
if (typeof subInfo === 'string') {
return /*#__PURE__*/React.createElement(Text$1, {
"data-test": "DesignSystem-DropdownOption--WITH_META--Meta",
appearance: labelAppearance,
size: "small",
weight: "medium"
}, subInfo);
}
var _subInfo$list = subInfo.list,
list = _subInfo$list === void 0 ? [] : _subInfo$list,
seperator = subInfo.seperator;
return /*#__PURE__*/React.createElement(MetaList, {
list: list,
seperator: seperator,
iconAppearance: iconAppearance,
labelAppearance: labelAppearance,
seperatorAppearance: iconAppearance,
"data-test": "DesignSystem-DropdownOption--WITH_META--MetaList"
});
};
var handleKeyDown = function handleKeyDown(event) {
if (disabled) return;
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
var checkboxInput = event.currentTarget.querySelector('input[type="checkbox"]');
checkboxInput === null || checkboxInput === void 0 || checkboxInput.click();
}
};
return /*#__PURE__*/React.createElement("div", {
className: className,
onMouseEnter: onUpdateActiveOption,
onKeyDown: handleKeyDown,
"data-test": dataTest,
"data-disabled": disabled,
role: menu ? 'menuitemcheckbox' : 'option',
"aria-checked": menu ? selected : undefined,
"aria-selected": !menu ? selected : undefined,
"aria-disabled": disabled || undefined,
tabIndex: disabled ? -1 : 0
}, /*#__PURE__*/React.createElement(Checkbox, {
label: label,
disabled: disabled,
checked: selected,
onChange: onChangeHandler,
tabIndex: -1,
className: checkboxClassName,
"data-test": "".concat(dataTest, "--Checkbox"),
id: id
}), subInfo && /*#__PURE__*/React.createElement("div", {
className: "pl-8 ml-3"
}, renderSubInfo(subInfo)));
};
var DefaultOption = function DefaultOption(props) {
var className = props.className,
textClassName = props.textClassName,
onClickHandler = props.onClickHandler,
optionData = props.optionData,
color = props.color,
appearance = props.appearance,
onUpdateActiveOption = props.onUpdateActiveOption,
dataTest = props.dataTest,
selected = props.selected,
menu = props.menu;
var label = optionData.label,
disabled = optionData.disabled;
var handleKeyDown = function handleKeyDown(event) {
if (disabled) return;
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
onClickHandler === null || onClickHandler === void 0 || onClickHandler(event);
}
};
return /*#__PURE__*/React.createElement("div", {
className: className,
onClick: onClickHandler,
onKeyDown: handleKeyDown,
onMouseEnter: onUpdateActiveOption,
"data-test": dataTest,
"data-disabled": disabled,
role: menu ? 'menuitem' : 'option',
tabIndex: disabled ? -1 : 0,
"aria-disabled": disabled || undefined,
"aria-selected": !menu ? selected : undefined
}, /*#__PURE__*/React.createElement("div", {
className: dropdownStyles['Option-label']
}, /*#__PURE__*/React.createElement(Text$1, {
className: textClassName,
color: color,
id: optionData.optionID
}, label)), selected && !menu && /*#__PURE__*/React.createElement(Icon, {
name: "check",
appearance: appearance,
className: dropdownStyles['Option-checkIcon'],
size: 16,
"data-test": "DesignSystem-DropdownOption--checkIcon"
}));
};
var MetaOption = function MetaOption(props) {
var className = props.className,
textClassName = props.textClassName,
onClickHandler = props.onClickHandler,
optionData = props.optionData,
onUpdateActiveOption = props.onUpdateActiveOption,
renderSubInfo = props.renderSubInfo,
color = props.color,
appearance = props.appearance,
dataTest = props.dataTest,
selected = props.selected,
menu = props.menu;
var subInfo = optionData.subInfo,
label = optionData.label,
disabled = optionData.disabled;
var handleKeyDown = function handleKeyDown(event) {
if (disabled) return;
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
onClickHandler === null || onClickHandler === void 0 || onClickHandler(event);
}
};
return /*#__PURE__*/React.createElement("div", {
className: className,
onClick: onClickHandler,
onKeyDown: handleKeyDown,
onMouseEnter: onUpdateActiveOption,
"data-test": dataTest,
"data-disabled": disabled,
role: menu ? 'menuitem' : 'option',
tabIndex: disabled ? -1 : 0,
"aria-disabled": disabled || undefined,
"aria-selected": !menu ? selected : undefined
}, /*#__PURE__*/React.createElement("div", {
className: dropdownStyles['Option-label']
}, /*#__PURE__*/React.createElement(Text$1, {
className: textClassName,
color: color
}, label), subInfo && renderSubInfo(subInfo)), selected && !menu && /*#__PURE__*/React.createElement(Icon, {
name: "check",
appearance: appearance,
className: dropdownStyles['Option-checkIcon'],
size: 16,
"data-test": "DesignSystem-DropdownOption--checkIcon"
}));
};
var IconOption = function IconOption(props) {
var className = props.className,
textClassName = props.textClassName,
onClickHandler = props.onClickHandler,
optionData = props.optionData,
onUpdateActiveOption = props.onUpdateActiveOption,
color = props.color,
dataTest = props.dataTest,
selected = props.selected,
menu = props.menu;
var label = optionData.label,
icon = optionData.icon,
disabled = optionData.disabled,
iconType = optionData.iconType;
var OptionClass = classnames(_defineProperty$1(_defineProperty$1({}, "".concat(className), true), dropdownStyles['Option--icon'], icon));
var IconClass = classnames(_defineProperty$1(_defineProperty$1({}, dropdownStyles['Option-icon'], true), 'mr-4', true));
var handleKeyDown = function handleKeyDown(event) {
if (disabled) return;
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
onClickHandler === null || onClickHandler === void 0 || onClickHandler(event);
}
};
return /*#__PURE__*/React.createElement("div", {
className: OptionClass,
onClick: onClickHandler,
onKeyDown: handleKeyDown,
onMouseEnter: onUpdateActiveOption,
"data-test": dataTest,
"data-disabled": disabled,
role: menu ? 'menuitem' : 'option',
tabIndex: disabled ? -1 : 0,
"aria-disabled": disabled || undefined,
"aria-selected": !menu ? selected : undefined
}, icon && /*#__PURE__*/React.createElement(Icon, {
className: IconClass,
"data-test": "".concat(dataTest, "--Icon"),
name: icon,
type: iconType,
"aria-hidden": true
}), /*#__PURE__*/React.createElement("div", {
className: dropdownStyles['Option-label']
}, /*#__PURE__*/React.createElement(Text$1, {
className: textClassName,
color: color
}, label)), selected && !menu && /*#__PURE__*/React.createElement(Icon, {
name: "check",
appearance: props.appearance,
className: dropdownStyles['Option-checkIcon'],
size: 16,
"data-test": "DesignSystem-DropdownOption--checkIcon"
}));
};
var IconWithMetaOption = function IconWithMetaOption(props) {
var className = props.className,
textClassName = props.textClassName,
renderSubInfo = props.renderSubInfo,
onClickHandler = props.onClickHandler,
optionData = props.optionData,
onUpdateActiveOption = props.onUpdateActiveOption,
appearance = props.appearance,
color = props.color,
dataTest = props.dataTest,
selected = props.selected,
menu = props.menu;
var subInfo = optionData.subInfo,
label = optionData.label,
icon = optionData.icon,
disabled = optionData.disabled;
var OptionClass = classnames(_defineProperty$1(_defineProperty$1({}, "".concat(className), true), dropdownStyles['Option--icon'], icon));
var IconClass = classnames(_defineProperty$1(_defineProperty$1({}, dropdownStyles['Option-icon'], true), 'mr-4', true));
var handleKeyDown = function handleKeyDown(event) {
if (disabled) return;
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
onClickHandler === null || onClickHandler === void 0 || onClickHandler(event);
}
};
return /*#__PURE__*/React.createElement("div", {
className: OptionClass,
onClick: onClickHandler,
onKeyDown: handleKeyDown,
onMouseEnter: onUpdateActiveOption,
"data-test": dataTest,
"data-disabled": disabled,
role: menu ? 'menuitem' : 'option',
tabIndex: disabled ? -1 : 0,
"aria-disabled": disabled || undefined,
"aria-selected": !menu ? selected : undefined
}, icon && /*#__PURE__*/React.createElement(Icon, {
"data-test": "".concat(dataTest, "--Icon"),
className: IconClass,
name: icon,
appearance: appearance,
"aria-hidden": true
}), /*#__PURE__*/React.createElement("div", {
className: dropdownStyles['Option-label']
}, /*#__PURE__*/React.createElement(Text$1, {
className: textClassName,
color: color
}, label), subInfo && renderSubInfo(subInfo)), selected && !menu && /*#__PURE__*/React.createElement(Icon, {
name: "check",
appearance: appearance,
className: dropdownStyles['Option-checkIcon'],
size: 16,
"data-test": "DesignSystem-DropdownOption--checkIcon"
}));
};
/** Props passed to `optionRenderer` for custom dropdown rows */
var OptionTypeMapping = _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, 'DEFAULT', DefaultOption), 'WITH_ICON', IconOption), 'WITH_META', MetaOption), 'WITH_CHECKBOX', CheckboxOption), 'ICON_WITH_META', IconWithMetaOption);
var Option = function Option(props) {
var optionData = props.optionData,
selected = props.selected,
onClick = props.onClick,
updateActiveOption = props.updateActiveOption,
onChange = props.onChange,
active = props.active,
index = props.index,
checkboxes = props.checkboxes,
menu = props.menu,
_props$id = props.id,
id = _props$id === void 0 ? '' : _props$id;
var _ref = optionData.optionType ? optionData : props,
_ref$optionType = _ref.optionType,
optionType = _ref$optionType === void 0 ? 'DEFAULT' : _ref$optionType;
var disabled = optionData.disabled;
var color = disabled ? 'inverse-lightest' : undefined;
var appearance = disabled ? 'disabled' : 'default';
var type = checkboxes ? 'WITH_CHECKBOX' : optionType;
var component = OptionTypeMapping[type];
var OptionClassName = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, dropdownStyles['Option'], true), dropdownStyles['Option--active'], active), dropdownStyles['Option--selected'], selected && !menu), dropdownStyles['Option--disabled'], disabled), dropdownStyles['Option--interactive'], !disabled), 'OptionWrapper', true), "color-".concat(color), !!color));
var CheckboxClassName = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, dropdownStyles['Option-checkbox'], true), dropdownStyles['Option-checkbox--active'], active), dropdownStyles['Option-checkbox--interactive'], !disabled), dropdownStyles['OptionWrapper--disabled'], disabled), 'OptionWrapper', true));
var textClassName = classnames(_defineProperty$1(_defineProperty$1({}, dropdownStyles['Option-text'], true), dropdownStyles['Option-text--wrap'], !props.truncateOption));
var customOptionClass = classnames(_defineProperty$1(_defineProperty$1({}, 'OptionWrapper', true), dropdownStyles['OptionWrapper--disabled'], disabled));
var onUpdateActiveOption = function onUpdateActiveOption() {
if (disabled) return;
if (updateActiveOption) updateActiveOption(index);
};
var onClickHandler = function onClickHandler(e) {
e.stopPropagation();
if (disabled) return;
if (onClick) onClick();
};
var onChangeHandler = function onChangeHandler(e) {
e.stopPropagation();
if (disabled) return;
if (onChange) onChange(e);
};
var handleCustomOptionKeyDown = function handleCustomOptionKeyDown(event) {
if (disabled) return;
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
if (checkboxes) {
var checkboxInput = event.currentTarget.querySelector('input[type="checkbox"]');
checkboxInput === null || checkboxInput === void 0 || checkboxInput.click();
} else if (onClick) {
onClick();
}
}
};
if (props.optionRenderer) {
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-DropdownOption--Custom",
className: customOptionClass,
"data-disabled": disabled,
onMouseEnter: onUpdateActiveOption,
onKeyDown: handleCustomOptionKeyDown,
role: menu ? 'menuitem' : 'option',
"aria-selected": !menu ? selected : undefined,
"aria-disabled": disabled || undefined,
tabIndex: disabled ? -1 : 0
}, !checkboxes && {
onClick: onClick
}), props.optionRenderer({
optionData: optionData,
selected: selected,
onChange: onChange,
active: active,
index: index,
onClick: onClick,
id: id
}));
}
var renderSubInfo = function renderSubInfo(subInfo) {
var labelAppearance = disabled ? 'disabled' : selected && !menu ? 'white' : 'subtle';
var subInfoColor = disabled ? 'inverse-lightest' : selected && !menu ? 'primary-dark' : 'inverse-lighter';
var iconAppearance = selected ? 'white' : 'disabled';
if (typeof subInfo === 'string') {
return /*#__PURE__*/React.createElement(Text$1, {
"data-test": "DesignSystem-DropdownOption--WITH_META--Meta",
color: subInfoColor,
size: "small",
weight: "medium",
className: dropdownStyles['Option-subInfo']
}, subInfo);
}
var _subInfo$list = subInfo.list,
list = _subInfo$list === void 0 ? [] : _subInfo$list,
seperator = subInfo.seperator;
return /*#__PURE__*/React.createElement(MetaList, {
list: list,
seperator: seperator,
iconAppearance: iconAppearance,
labelAppearance: labelAppearance,
seperatorAppearance: iconAppearance,
"data-test": "DesignSystem-DropdownOption--WITH_META--MetaList"
});
};
return component({
selected: selected,
menu: menu,
index: index,
renderSubInfo: renderSubInfo,
optionData: optionData,
textClassName: textClassName,
appearance: appearance,
color: color,
onClickHandler: onClickHandler,
onChangeHandler: onChangeHandler,
onUpdateActiveOption: onUpdateActiveOption,
dataTest: "DesignSystem-DropdownOption--".concat(type),
className: checkboxes ? CheckboxClassName : OptionClassName,
id: id
});
};
var css_248z$13 = "@keyframes placeholder-module-shimmer-Lxrg3-4-30-3 {\n 0% {\n background-position: -500px 0;\n }\n 100% {\n background-position: 500px 0;\n }\n}\n\n.placeholder-module-Placeholder--animation-aMGNi-4-30-3 {\n border-radius: var(--border-radius-05);\n animation-duration: 1.5s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: placeholder-module-shimmer-Lxrg3-4-30-3;\n animation-timing-function: linear;\n background: var(--secondary-lightest);\n background: linear-gradient(\n to right,\n var(--secondary-lighter) 8%,\n var(--secondary-dark) 18%,\n var(--secondary-lighter) 33%\n );\n background-size: 1000px 104px;\n}\n\n.placeholder-module-Placeholder-vJUgz-4-30-3 {\n display: flex;\n flex-grow: 1;\n flex-shrink: 0;\n align-items: center;\n}\n\n.placeholder-module-Placeholder--withImage-yTlyC-4-30-3 {\n display: flex;\n justify-content: flex-start;\n}\n\n.placeholder-module-Placeholder-paragraph-6zgwj-4-30-3 {\n display: flex;\n flex-direction: column;\n flex: 1 0;\n}\n\n.placeholder-module-Placeholder-paragraph--withImage-6eoKu-4-30-3 {\n margin-left: var(--spacing-20);\n}\n\n.placeholder-module-PlaceholderParagraph-02mKH-4-30-3 {\n display: flex;\n flex-grow: 1;\n height: var(--font-size);\n}\n\n.placeholder-module-PlaceholderParagraph-wrapper-Sznyx-4-30-3 {\n display: flex;\n align-items: center;\n height: var(--font-height);\n}\n\n.placeholder-module-PlaceholderParagraph-wrapper--length-small-hR-g8-4-30-3 {\n width: 33%;\n}\n\n.placeholder-module-PlaceholderParagraph-wrapper--length-medium-8Q4r0-4-30-3 {\n width: 66%;\n}\n\n.placeholder-module-PlaceholderParagraph-wrapper--length-large-3ieIN-4-30-3 {\n width: 100%;\n}\n\n.placeholder-module-PlaceholderParagraph-wrapper--size-xxs-VxxWI-4-30-3 {\n height: var(--font-height-s);\n}\n\n.placeholder-module-PlaceholderParagraph-wrapper--size-xs-hXLBa-4-30-3 {\n height: var(--font-height-m);\n}\n\n.placeholder-module-PlaceholderParagraph-wrapper--size-s-HnFD1-4-30-3 {\n height: var(--font-height-s);\n}\n\n.placeholder-module-PlaceholderParagraph-wrapper--size-m-fbcAd-4-30-3 {\n height: var(--font-height-m);\n}\n\n.placeholder-module-PlaceholderParagraph-wrapper--size-l-85-g4-4-30-3 {\n height: var(--font-height-l);\n}\n\n.placeholder-module-PlaceholderParagraph-wrapper--size-xl-kd-HK-4-30-3 {\n height: var(--font-height-xl);\n}\n\n.placeholder-module-PlaceholderParagraph-wrapper--size-xxl-wK2D7-4-30-3 {\n height: var(--font-height-xxl);\n}\n\n.placeholder-module-PlaceholderParagraph-wrapper--size-xxxl-QwffS-4-30-3 {\n height: var(--font-height-xxl);\n}\n\n.placeholder-module-PlaceholderParagraph--xxs-dJyU6-4-30-3 {\n height: var(--font-size-s);\n}\n\n.placeholder-module-PlaceholderParagraph--xs-CZxRT-4-30-3 {\n height: var(--font-size-s);\n}\n\n.placeholder-module-PlaceholderParagraph--s-1TOed-4-30-3 {\n height: var(--font-size);\n}\n\n.placeholder-module-PlaceholderParagraph--m-umPOe-4-30-3 {\n height: var(--font-size-m);\n}\n\n.placeholder-module-PlaceholderParagraph--l-5tvMH-4-30-3 {\n height: var(--font-size-l);\n}\n\n.placeholder-module-PlaceholderParagraph--xl-M63Dg-4-30-3 {\n height: var(--font-size-xl);\n}\n\n.placeholder-module-PlaceholderParagraph--xxl-yW2hv-4-30-3 {\n height: var(--font-size-xxl);\n}\n\n.placeholder-module-PlaceholderParagraph--xxxl-hm8Ue-4-30-3 {\n height: var(--font-size-xxxl);\n}\n\n.placeholder-module-PlaceholderImage-tEdXI-4-30-3 {\n display: flex;\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n}\n\n.placeholder-module-PlaceholderImage--small-IZcYq-4-30-3 {\n width: 16px;\n height: 16px;\n}\n\n.placeholder-module-PlaceholderImage--medium-NA-GL-4-30-3 {\n width: 32px;\n height: 32px;\n}\n\n.placeholder-module-PlaceholderImage--large-z28GC-4-30-3 {\n width: 48px;\n height: 48px;\n}\n\n.placeholder-module-PlaceholderImage--round-IvhOF-4-30-3 {\n border-radius: var(--border-radius-full);\n}\n";
var styles$10 = {"Placeholder--animation":"placeholder-module-Placeholder--animation-aMGNi-4-30-3","shimmer":"placeholder-module-shimmer-Lxrg3-4-30-3","Placeholder":"placeholder-module-Placeholder-vJUgz-4-30-3","Placeholder--withImage":"placeholder-module-Placeholder--withImage-yTlyC-4-30-3","Placeholder-paragraph":"placeholder-module-Placeholder-paragraph-6zgwj-4-30-3","Placeholder-paragraph--withImage":"placeholder-module-Placeholder-paragraph--withImage-6eoKu-4-30-3","PlaceholderParagraph":"placeholder-module-PlaceholderParagraph-02mKH-4-30-3","PlaceholderParagraph-wrapper":"placeholder-module-PlaceholderParagraph-wrapper-Sznyx-4-30-3","PlaceholderParagraph-wrapper--length-small":"placeholder-module-PlaceholderParagraph-wrapper--length-small-hR-g8-4-30-3","PlaceholderParagraph-wrapper--length-medium":"placeholder-module-PlaceholderParagraph-wrapper--length-medium-8Q4r0-4-30-3","PlaceholderParagraph-wrapper--length-large":"placeholder-module-PlaceholderParagraph-wrapper--length-large-3ieIN-4-30-3","PlaceholderParagraph-wrapper--size-xxs":"placeholder-module-PlaceholderParagraph-wrapper--size-xxs-VxxWI-4-30-3","PlaceholderParagraph-wrapper--size-xs":"placeholder-module-PlaceholderParagraph-wrapper--size-xs-hXLBa-4-30-3","PlaceholderParagraph-wrapper--size-s":"placeholder-module-PlaceholderParagraph-wrapper--size-s-HnFD1-4-30-3","PlaceholderParagraph-wrapper--size-m":"placeholder-module-PlaceholderParagraph-wrapper--size-m-fbcAd-4-30-3","PlaceholderParagraph-wrapper--size-l":"placeholder-module-PlaceholderParagraph-wrapper--size-l-85-g4-4-30-3","PlaceholderParagraph-wrapper--size-xl":"placeholder-module-PlaceholderParagraph-wrapper--size-xl-kd-HK-4-30-3","PlaceholderParagraph-wrapper--size-xxl":"placeholder-module-PlaceholderParagraph-wrapper--size-xxl-wK2D7-4-30-3","PlaceholderParagraph-wrapper--size-xxxl":"placeholder-module-PlaceholderParagraph-wrapper--size-xxxl-QwffS-4-30-3","PlaceholderParagraph--xxs":"placeholder-module-PlaceholderParagraph--xxs-dJyU6-4-30-3","PlaceholderParagraph--xs":"placeholder-module-PlaceholderParagraph--xs-CZxRT-4-30-3","PlaceholderParagraph--s":"placeholder-module-PlaceholderParagraph--s-1TOed-4-30-3","PlaceholderParagraph--m":"placeholder-module-PlaceholderParagraph--m-umPOe-4-30-3","PlaceholderParagraph--l":"placeholder-module-PlaceholderParagraph--l-5tvMH-4-30-3","PlaceholderParagraph--xl":"placeholder-module-PlaceholderParagraph--xl-M63Dg-4-30-3","PlaceholderParagraph--xxl":"placeholder-module-PlaceholderParagraph--xxl-yW2hv-4-30-3","PlaceholderParagraph--xxxl":"placeholder-module-PlaceholderParagraph--xxxl-hm8Ue-4-30-3","PlaceholderImage":"placeholder-module-PlaceholderImage-tEdXI-4-30-3","PlaceholderImage--small":"placeholder-module-PlaceholderImage--small-IZcYq-4-30-3","PlaceholderImage--medium":"placeholder-module-PlaceholderImage--medium-NA-GL-4-30-3","PlaceholderImage--large":"placeholder-module-PlaceholderImage--large-z28GC-4-30-3","PlaceholderImage--round":"placeholder-module-PlaceholderImage--round-IvhOF-4-30-3"};
styleInject(css_248z$13);
var PlaceholderParagraph = function PlaceholderParagraph(props) {
var length = props.length,
size = props.size,
className = props.className;
var baseProps = extractBaseProps(props);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$10['Placeholder--animation'], true), styles$10.PlaceholderParagraph, true), styles$10["PlaceholderParagraph--".concat(size)], size));
var wrapperClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$10['PlaceholderParagraph-wrapper'], true), styles$10["PlaceholderParagraph-wrapper--length-".concat(length)], length), styles$10["PlaceholderParagraph-wrapper--size-".concat(size)], size), className);
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
className: wrapperClass,
"aria-hidden": "true"
}), /*#__PURE__*/React.createElement("span", {
className: classes
}));
};
PlaceholderParagraph.displayName = 'PlaceholderParagraph';
PlaceholderParagraph.defaultProps = {
length: 'medium'
};
var PlaceholderImage = function PlaceholderImage(props) {
var _props$size = props.size,
size = _props$size === void 0 ? 'small' : _props$size,
round = props.round,
className = props.className;
var baseProps = extractBaseProps(props);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$10.PlaceholderImage, true), styles$10['Placeholder--animation'], true), styles$10['PlaceholderImage--round'], round), styles$10["PlaceholderImage--".concat(size)], size), className);
return /*#__PURE__*/React.createElement("span", _extends$2({}, baseProps, {
className: classes,
"aria-hidden": "true"
}));
};
PlaceholderImage.displayName = 'PlaceholderImage';
PlaceholderImage.defaultProps = {
size: 'small'
};
var Placeholder = function Placeholder(props) {
var imageSize = props.imageSize,
withImage = props.withImage,
round = props.round,
children = props.children,
className = props.className;
var baseProps = extractBaseProps(props);
var paragraphClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$10['Placeholder-paragraph'], true), styles$10['Placeholder-paragraph--withImage'], withImage));
var classes = classnames(_defineProperty$1({}, styles$10['Placeholder'], true), className);
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-Placeholder"
}, baseProps, {
className: classes,
"aria-hidden": "true"
}), withImage && /*#__PURE__*/React.createElement(PlaceholderImage, {
round: round,
size: imageSize,
"data-test": "DesignSystem-Placeholder--Image"
}), children && /*#__PURE__*/React.createElement("div", {
className: paragraphClasses,
"data-test": "DesignSystem-Placeholder--Paragraph"
}, children));
};
Placeholder.displayName = 'Placeholder';
Placeholder.defaultProps = {
withImage: true,
imageSize: 'small'
};
var Loading = function Loading(props) {
var loadingType = props.loadingType,
optionIndex = props.optionIndex;
var placeholderSizes = ['medium', 'large'];
var size = placeholderSizes[(optionIndex + 2) % 2];
switch (loadingType) {
case 'DEFAULT':
return /*#__PURE__*/React.createElement(PlaceholderParagraph, {
length: size,
"data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
});
case 'WITH_ICON':
return /*#__PURE__*/React.createElement(Placeholder, {
withImage: true,
round: true,
"data-test": "DesignSystem-Dropdown--Placeholder"
}, /*#__PURE__*/React.createElement(PlaceholderParagraph, {
length: "large"
}));
case 'WITH_META':
return /*#__PURE__*/React.createElement(Placeholder, {
withImage: false,
"data-test": "DesignSystem-Dropdown--Placeholder"
}, /*#__PURE__*/React.createElement(PlaceholderParagraph, {
length: "large",
"data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
}), /*#__PURE__*/React.createElement(PlaceholderParagraph, {
length: "medium",
size: "xxs",
"data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
}));
case 'WITH_CHECKBOX':
return /*#__PURE__*/React.createElement(Placeholder, {
withImage: true,
"data-test": "DesignSystem-Dropdown--Placeholder"
}, /*#__PURE__*/React.createElement(PlaceholderParagraph, {
length: "large"
}));
case 'ICON_WITH_META':
return /*#__PURE__*/React.createElement(Placeholder, {
withImage: true,
round: true,
imageSize: 'medium',
"data-test": "DesignSystem-Dropdown--Placeholder"
}, /*#__PURE__*/React.createElement(PlaceholderParagraph, {
length: "large",
"data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
}), /*#__PURE__*/React.createElement(PlaceholderParagraph, {
length: "medium",
size: "xxs",
"data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
}));
}
return null;
};
var errorTitle = {
FAILED_TO_FETCH: 'Failed to fetch data',
NO_RECORDS_FOUND: 'No results found',
DEFAULT: 'No record available'
};
var errorDescription = {
FAILED_TO_FETCH: "We couldn't load the data, try reloading.",
NO_RECORDS_FOUND: 'Try modifying your search to find what you are looking for.',
DEFAULT: 'We have nothing to show you at the moment.'
};
var ErrorTemplate = function ErrorTemplate(_ref) {
var dropdownStyle = _ref.dropdownStyle,
errorType = _ref.errorType,
updateOptions = _ref.updateOptions;
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, dropdownStyles['Dropdown-wrapper'], true), 'px-7', true), 'd-flex', true));
return /*#__PURE__*/React.createElement("div", {
className: classes,
style: dropdownStyle,
"data-test": "DesignSystem-Dropdown--wrapper"
}, /*#__PURE__*/React.createElement("div", {
className: "d-flex flex-column justify-content-center align-items-center w-100",
"data-test": "DesignSystem-Dropdown--errorWrapper"
}, /*#__PURE__*/React.createElement(Text$1, {
className: "text-align-center mb-3",
weight: "strong"
}, errorTitle[errorType]), /*#__PURE__*/React.createElement(Text$1, {
className: "text-align-center mb-6",
weight: "medium",
size: "small",
appearance: "subtle"
}, errorDescription[errorType]), errorType === 'FAILED_TO_FETCH' && /*#__PURE__*/React.createElement(Button, {
size: "tiny",
largeIcon: true,
"aria-label": "reload",
icon: "refresh",
iconAlign: "left",
onClick: function onClick() {
return updateOptions();
}
}, "Reload")));
};
var alignmentMapping = {
right: 'bottom-start',
left: 'bottom-end'
};
var DropdownList = function DropdownList(props) {
var _props$ariaLabel;
var _props$listOptions = props.listOptions,
listOptions = _props$listOptions === void 0 ? [] : _props$listOptions,
inputRef = props.inputRef,
_props$align = props.align,
align = _props$align === void 0 ? 'right' : _props$align,
_props$optionType = props.optionType,
optionType = _props$optionType === void 0 ? 'DEFAULT' : _props$optionType,
_props$applyButtonLab = props.applyButtonLabel,
applyButtonLabel = _props$applyButtonLab === void 0 ? 'Apply' : _props$applyButtonLab,
_props$cancelButtonLa = props.cancelButtonLabel,
cancelButtonLabel = _props$cancelButtonLa === void 0 ? 'Cancel' : _props$cancelButtonLa,
_props$truncateOption = props.truncateOption,
truncateOption = _props$truncateOption === void 0 ? true : _props$truncateOption,
_props$withSelectAll = props.withSelectAll,
withSelectAll = _props$withSelectAll === void 0 ? true : _props$withSelectAll,
_props$maxHeight = props.maxHeight,
maxHeight = _props$maxHeight === void 0 ? 200 : _props$maxHeight,
customTrigger = props.customTrigger,
selected = props.selected,
tempSelected = props.tempSelected,
previousSelected = props.previousSelected,
remainingOptions = props.remainingOptions,
firstEnabledOption = props.firstEnabledOption,
dropdownOpen = props.dropdownOpen,
menu = props.menu,
searchTerm = props.searchTerm,
showApplyButton = props.showApplyButton,
withCheckbox = props.withCheckbox,
withSearch = props.withSearch,
popoverOptions = props.popoverOptions,
onSearchChange = props.onSearchChange,
optionRenderer = props.optionRenderer,
optionsAriaLabel = props.optionsAriaLabel,
applyOptions = props.applyOptions,
cancelOptions = props.cancelOptions,
toggleDropdown = props.toggleDropdown,
className = props.className,
_props$searchPlacehol = props.searchPlaceholder,
searchPlaceholder = _props$searchPlacehol === void 0 ? 'Search..' : _props$searchPlacehol,
scrollIndex = props.scrollIndex,
updateOptions = props.updateOptions,
noResultMessage = props.noResultMessage,
errorType = props.errorType,
loadingOptions = props.loadingOptions;
var triggerAriaLabel = (_props$ariaLabel = props['aria-label']) === null || _props$ariaLabel === void 0 ? void 0 : _props$ariaLabel.trim();
var triggerAriaLabelledBy = props['aria-labelledby'];
var resolvedOptionsAriaLabel = (optionsAriaLabel === null || optionsAriaLabel === void 0 ? void 0 : optionsAriaLabel.trim()) || (triggerAriaLabel ? "".concat(triggerAriaLabel, " options") : menu ? 'Menu options' : 'Options');
var baseProps = extractBaseProps(props);
var ariaProps = Object.keys(props).filter(function (key) {
return key === 'inert' || key === 'aria-hidden';
}).reduce(function (acc, key) {
acc[key] = props[key];
return acc;
}, {});
var dropdownRef = /*#__PURE__*/React.createRef();
var triggerRef = /*#__PURE__*/React.createRef();
var popoverContentRef = /*#__PURE__*/React.createRef();
var dropdownTriggerRef = /*#__PURE__*/React.createRef();
var dropdownCancelButtonRef = /*#__PURE__*/React.createRef();
var dropdownApplyButtonRef = /*#__PURE__*/React.createRef();
var dropdownFieldIdsPrefixRef = React.useRef("ds-dropdown-".concat(uidGenerator()));
// Target of the trigger's `aria-controls`. This sits on the popup wrapper rather than the
// listbox, because the listbox is not rendered in the loading, empty and error states while
// the trigger still reports itself as expanded.
var popupId = "".concat(dropdownFieldIdsPrefixRef.current, "-popup");
var enableSearch = withSearch || props.async;
var _React$useState = React.useState(),
_React$useState2 = _slicedToArray(_React$useState, 2),
popoverStyle = _React$useState2[0],
setPopoverStyle = _React$useState2[1];
var _React$useState3 = React.useState(firstEnabledOption),
_React$useState4 = _slicedToArray(_React$useState3, 2),
cursor = _React$useState4[0],
setCursor = _React$useState4[1];
var _React$useState5 = React.useState(),
_React$useState6 = _slicedToArray(_React$useState5, 2),
minHeight = _React$useState6[0],
setMinHeight = _React$useState6[1];
var getMinHeight = function getMinHeight() {
if (dropdownRef.current) {
var _dropdownRef$current;
var _minHeight = (_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.offsetHeight;
_minHeight && setMinHeight(_minHeight);
}
};
var isDropdownListBlank = listOptions.length === 0 && !loadingOptions && selected.length <= 0;
React.useEffect(function () {
var timer;
if (dropdownOpen) {
var _triggerRef$current;
var width = props.width,
minWidth = props.minWidth,
maxWidth = props.maxWidth;
var popperWidth = (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.clientWidth;
var popperMinWidth = showApplyButton ? 176 : menu ? 128 : popperWidth;
var popperWrapperStyle = {
width: width ? width : popperWidth,
minWidth: minWidth ? minWidth : popperMinWidth,
maxWidth: maxWidth ? maxWidth : '100%'
};
requestAnimationFrame(getMinHeight);
setPopoverStyle(popperWrapperStyle);
// scrolls to current time
if (scrollIndex && tempSelected.length === 0) {
timer = setTimeout(function () {
scrollToOptionIndex(scrollIndex, listOptions);
}, 100);
}
if (!enableSearch) {
requestAnimationFrame(function () {
focusFirstOption();
});
}
}
return function () {
clearTimeout(timer);
};
}, [dropdownOpen]);
React.useEffect(function () {
if (firstEnabledOption !== cursor) setCursor(firstEnabledOption);
}, [firstEnabledOption]);
var _props$triggerSize = props.triggerSize,
triggerSize = _props$triggerSize === void 0 ? 'regular' : _props$triggerSize,
_props$placeholder = props.placeholder,
placeholder = _props$placeholder === void 0 ? 'Select' : _props$placeholder,
icon = props.icon,
error = props.error,
disabled = props.disabled,
inlineLabel = props.inlineLabel,
triggerLabel = props.triggerLabel,
iconType = props.iconType;
var CustomTrigger = customTrigger ? customTrigger(triggerLabel ? triggerLabel : placeholder) : /*#__PURE__*/React.createElement(React.Fragment, null);
var NewCustomTrigger = /*#__PURE__*/React.cloneElement(CustomTrigger, {
tabIndex: 0,
ref: dropdownTriggerRef,
'aria-haspopup': menu ? 'menu' : 'listbox',
'aria-expanded': !!dropdownOpen,
'aria-controls': dropdownOpen ? popupId : undefined
});
var trigger = customTrigger ? NewCustomTrigger : /*#__PURE__*/React.createElement(DropdownButton, {
id: props.id,
placeholder: placeholder,
triggerSize: triggerSize,
open: dropdownOpen,
icon: icon,
disabled: disabled,
inlineLabel: inlineLabel,
menu: menu,
error: error,
ref: dropdownTriggerRef,
iconType: iconType,
"aria-label": triggerAriaLabelledBy ? undefined : triggerAriaLabel,
"aria-labelledby": triggerAriaLabelledBy,
"aria-controls": dropdownOpen ? popupId : undefined
}, triggerLabel);
var dropdownStyle = {
maxHeight: maxHeight,
overflowY: 'auto',
overflowX: 'hidden',
minHeight: minHeight
};
var loaderStyle = {
maxHeight: minHeight ? minHeight : maxHeight,
overflowY: 'auto',
overflowX: 'hidden',
minHeight: minHeight
};
var defaultErrorTemplate = function defaultErrorTemplate() {
return /*#__PURE__*/React.createElement(ErrorTemplate, {
dropdownStyle: _objectSpread2(_objectSpread2({}, dropdownStyle), {}, {
minHeight: maxHeight
}),
updateOptions: updateOptions,
errorType: errorType
});
};
var getDropdownSectionClass = function getDropdownSectionClass(showClearButton) {
return classnames(_defineProperty$1(_defineProperty$1({}, dropdownStyles['Dropdown-section'], true), dropdownStyles['Dropdown-section--withClear'], showClearButton));
};
var dropdownClass = classnames(_defineProperty$1({}, dropdownStyles['Dropdown'], true), className);
var dropdownWrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, dropdownStyles['Dropdown-wrapper'], true), dropdownStyles['Dropdown-wrapper--wrap'], !truncateOption));
var SelectAllClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, dropdownStyles['Option-checkbox--active'], cursor === 0), dropdownStyles['Option-checkboxWrapper'], true), dropdownStyles['Option-checkbox'], true), dropdownStyles['Option-checkbox--interactive'], true), 'OptionWrapper', true));
var onToggleDropdown = function onToggleDropdown(open, type) {
var _dropdownTriggerRef$c;
toggleDropdown(open, type);
if (!disabled) (_dropdownTriggerRef$c = dropdownTriggerRef.current) === null || _dropdownTriggerRef$c === void 0 || _dropdownTriggerRef$c.focus();
setCursor(firstEnabledOption);
};
var onCancelOptions = function onCancelOptions() {
var _dropdownTriggerRef$c2;
cancelOptions();
(_dropdownTriggerRef$c2 = dropdownTriggerRef.current) === null || _dropdownTriggerRef$c2 === void 0 || _dropdownTriggerRef$c2.focus();
};
var onApplyOptions = function onApplyOptions() {
var _dropdownTriggerRef$c3;
applyOptions();
(_dropdownTriggerRef$c3 = dropdownTriggerRef.current) === null || _dropdownTriggerRef$c3 === void 0 || _dropdownTriggerRef$c3.focus();
};
var optionClickHandler = function optionClickHandler(item) {
var _dropdownTriggerRef$c4;
props.onOptionSelect(item);
(_dropdownTriggerRef$c4 = dropdownTriggerRef.current) === null || _dropdownTriggerRef$c4 === void 0 || _dropdownTriggerRef$c4.focus();
};
var searchClearHandler = function searchClearHandler() {
setCursor(firstEnabledOption);
if (onSearchChange && searchTerm) onSearchChange('');
};
var searchHandler = function searchHandler(event) {
setCursor(firstEnabledOption);
if (onSearchChange) onSearchChange(event.target.value);
};
var updateActiveOption = function updateActiveOption(index, parentCheckbox) {
var updatedIndex = withCheckbox && withSelectAll && !props.async && !parentCheckbox ? index + 1 : index;
setCursor(updatedIndex);
};
var renderFooter = function renderFooter() {
var _props$footerLabel = props.footerLabel,
footerLabel = _props$footerLabel === void 0 ? 'Search for more options' : _props$footerLabel;
return /*#__PURE__*/React.createElement("div", {
className: dropdownStyles['Dropdown-footer']
}, /*#__PURE__*/React.createElement(Text$1, {
size: "small",
appearance: 'subtle'
}, footerLabel));
};
var renderGroups = function renderGroups(group, selectedGroup, inOptionsComposite) {
var onClearOptions = props.onClearOptions;
var isClearDisabled = selected.every(function (option) {
return option.disabled;
});
return /*#__PURE__*/React.createElement("div", {
className: getDropdownSectionClass(selectedGroup),
role: inOptionsComposite ? 'presentation' : undefined
}, /*#__PURE__*/React.createElement(Text$1, {
size: "small",
appearance: 'subtle'
}, group), selectedGroup && /*#__PURE__*/React.createElement(Button, {
onClick: onClearOptions,
disabled: isClearDisabled,
appearance: "transparent",
size: "tiny",
type: "button"
}, "Clear"));
};
var renderApplyButton = function renderApplyButton() {
var disable = _isEqual(previousSelected, tempSelected) || props.loadingOptions;
return /*#__PURE__*/React.createElement("div", {
className: dropdownStyles['Dropdown-buttonWrapper']
}, /*#__PURE__*/React.createElement(Button, {
ref: dropdownCancelButtonRef,
className: "mr-4",
appearance: 'basic',
onClick: onCancelOptions,
disabled: props.loadingOptions,
size: 'tiny',
tabIndex: -1,
"data-test": "DesignSystem-Dropdown-CancelButton",
type: "button"
}, cancelButtonLabel), /*#__PURE__*/React.createElement(Button, {
ref: dropdownApplyButtonRef,
appearance: 'primary',
disabled: disable,
size: 'tiny',
onClick: onApplyOptions,
"data-test": "DesignSystem-Dropdown-ApplyButton",
type: "button"
}, applyButtonLabel));
};
var renderSearch = function renderSearch() {
return /*#__PURE__*/React.createElement("div", {
className: dropdownStyles['Dropdown-inputWrapper']
}, /*#__PURE__*/React.createElement(Input, {
name: "Dropdown-search",
icon: 'search',
value: searchTerm,
placeholder: searchPlaceholder,
autoFocus: true,
onChange: searchHandler,
onClear: searchClearHandler,
ref: inputRef,
autoComplete: 'off',
"aria-label": resolvedOptionsAriaLabel ? "Search ".concat(resolvedOptionsAriaLabel) : 'Search options',
className: dropdownStyles['Dropdown-input']
}));
};
var renderLoading = function renderLoading(loadersLength) {
var arr = Array(loadersLength).fill('Loading');
var type = withCheckbox ? 'WITH_CHECKBOX' : optionType;
return arr.map(function (option, ind) {
return /*#__PURE__*/React.createElement("div", {
className: dropdownStyles['Option-loading'],
key: "".concat(option, "-").concat(ind)
}, /*#__PURE__*/React.createElement(Loading, {
loadingType: type,
optionIndex: ind
}));
});
};
var renderSelectAll = function renderSelectAll() {
var _props$selectAllLabel = props.selectAllLabel,
selectAllLabel = _props$selectAllLabel === void 0 ? 'Select All' : _props$selectAllLabel,
selectAll = props.selectAll,
onSelectAll = props.onSelectAll;
var label = selectAllLabel.trim() ? selectAllLabel.trim() : 'Select All';
var id = "".concat(dropdownFieldIdsPrefixRef.current, "-select-all");
var onSelectAllKeyDown = function onSelectAllKeyDown(event) {
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
var checkboxInput = event.currentTarget.querySelector('input[type="checkbox"]');
if (checkboxInput) checkboxInput.click();
}
};
return /*#__PURE__*/React.createElement("div", {
className: SelectAllClass,
onMouseEnter: function onMouseEnter() {
return updateActiveOption(0, true);
},
onKeyDown: onSelectAllKeyDown,
tabIndex: 0,
role: "option",
"aria-selected": selectAll.checked
}, /*#__PURE__*/React.createElement("label", {
htmlFor: id,
className: dropdownStyles['Checkbox-label']
}, /*#__PURE__*/React.createElement(Checkbox, {
label: label,
onChange: onSelectAll,
checked: selectAll.checked,
indeterminate: selectAll.indeterminate,
tabIndex: -1,
className: dropdownStyles['OptionCheckbox'],
id: id
})));
};
var renderOptions = function renderOptions(item, index) {
var selectAllPresent = _isSelectAllPresent(searchTerm, remainingOptions, withSelectAll, withCheckbox);
var active = selectAllPresent ? index + 1 === cursor : index === cursor;
var optionIsSelected = tempSelected.findIndex(function (option) {
return option.value === item.value;
}) !== -1;
var id = "".concat(dropdownFieldIdsPrefixRef.current, "-option-").concat(index);
var option = /*#__PURE__*/React.createElement(Option, {
optionData: item,
truncateOption: truncateOption,
selected: optionIsSelected,
index: index,
updateActiveOption: updateActiveOption,
optionRenderer: optionRenderer,
active: active,
checkboxes: withCheckbox,
menu: menu,
onClick: function onClick() {
return optionClickHandler(item);
},
onChange: function onChange(e) {
return props.onSelect(item, e.target.checked);
},
optionType: props.optionType,
id: id
});
// `label htmlFor` is only meaningful when the option renders a checkbox with a matching id
// (CheckboxOption). Every other option type has no element with that id, so wrapping its
// role="menuitem"/"option" row in a dangling <label> breaks role announcement in screen readers.
if (withCheckbox) {
return /*#__PURE__*/React.createElement("label", {
htmlFor: id,
key: index,
role: "presentation"
}, option);
}
return /*#__PURE__*/React.createElement("div", {
key: index,
role: "presentation"
}, option);
};
var renderDropdownSection = function renderDropdownSection() {
var _listOptions$0$group;
var _props$selectedSectio = props.selectedSectionLabel,
selectedSectionLabel = _props$selectedSectio === void 0 ? 'Selected Items' : _props$selectedSectio,
_props$allItemsSectio = props.allItemsSectionLabel,
allItemsSectionLabel = _props$allItemsSectio === void 0 ? 'All Items' : _props$allItemsSectio,
_props$loadersCount = props.loadersCount,
loadersCount = _props$loadersCount === void 0 ? 10 : _props$loadersCount,
_props$errorTemplate = props.errorTemplate,
errorTemplate = _props$errorTemplate === void 0 ? defaultErrorTemplate : _props$errorTemplate;
var selectAllPresent = _isSelectAllPresent(searchTerm, remainingOptions, withSelectAll, withCheckbox);
var groupedListOptions = groupListOptions(listOptions);
var emptyMessageClass = classnames(_defineProperty$1(_defineProperty$1({}, dropdownStyles['Dropdown-wrapper'], true), 'w-100', true));
if (loadersCount && loadingOptions) {
return /*#__PURE__*/React.createElement("div", {
className: dropdownStyles['Dropdown-loading']
}, /*#__PURE__*/React.createElement("div", {
className: dropdownStyles['Dropdown-wrapper'],
style: loaderStyle
}, renderLoading(loadersCount)));
}
if (isDropdownListBlank) {
if (noResultMessage) {
return /*#__PURE__*/React.createElement("div", {
className: emptyMessageClass,
style: dropdownStyle,
"data-test": "DesignSystem-Dropdown--errorWrapper"
}, /*#__PURE__*/React.createElement("div", {
className: dropdownStyles['Option']
}, /*#__PURE__*/React.createElement("div", {
className: dropdownStyles['Option-subinfo']
}, noResultMessage)));
} else {
return errorTemplate && errorTemplate({
errorType: errorType
});
}
}
return /*#__PURE__*/React.createElement("div", {
className: dropdownWrapperClass,
style: dropdownStyle,
ref: dropdownRef
}, /*#__PURE__*/React.createElement("div", {
role: menu ? 'menu' : 'listbox',
"aria-label": resolvedOptionsAriaLabel,
"aria-labelledby": triggerAriaLabelledBy,
"aria-multiselectable": !menu && withCheckbox ? true : undefined
}, selectAllPresent && renderSelectAll(), selected.length > 0 && renderGroups(selectedSectionLabel, true, true), selected.map(function (option, index) {
return renderOptions(option, index);
}), selected.length > 0 && listOptions.length - selected.length > 0 && !((_listOptions$0$group = listOptions[0].group) !== null && _listOptions$0$group !== void 0 && _listOptions$0$group.trim()) && renderGroups(allItemsSectionLabel, false, true), groupedListOptions.map(function (option, index) {
var prevGroup = index > 0 ? groupedListOptions[index - 1].group : selected.length ? selectedSectionLabel : undefined;
var currentGroup = option.group;
var isGroupDifferent = prevGroup !== currentGroup;
var updatedIndex = index + selected.length;
return /*#__PURE__*/React.createElement("div", {
className: dropdownStyles['Option-checkboxWrapper'],
key: index,
role: "presentation"
}, isGroupDifferent && currentGroup && renderGroups(currentGroup, false, true), renderOptions(option, updatedIndex));
})), props.async && remainingOptions > 0 && renderFooter());
};
var isFocusableOption = function isFocusableOption(node) {
if (!node || node.getAttribute('data-disabled') === 'true') return false;
return node.tabIndex >= 0;
};
var focusOption = function focusOption(direction, classes) {
var container = popoverContentRef.current || document;
var elements = container.querySelectorAll(classes);
if (!elements.length) return;
// Determine current position from actual DOM focus, not cursor state
var activeEl = document.activeElement;
var currentIndex = -1;
// Check if focus is currently on the search input
var isSearchFocused = enableSearch && inputRef.current && (activeEl === inputRef.current || inputRef.current.contains(activeEl));
if (isSearchFocused) {
if (direction === 'up') return; // Already at the top, nothing above search
currentIndex = -1; // From search, down goes to first option
} else {
for (var _i = 0; _i < elements.length; _i++) {
if (elements[_i] === activeEl || elements[_i].contains(activeEl)) {
currentIndex = _i;
break;
}
}
// If no option focused, start from edge
if (currentIndex === -1) {
currentIndex = direction === 'down' ? -1 : elements.length;
}
}
var startIndex = direction === 'down' ? currentIndex + 1 : currentIndex - 1;
var endIndex = direction === 'down' ? elements.length : -1;
var i = startIndex;
var found = false;
while (i !== endIndex) {
if (isFocusableOption(elements[i])) {
var element = elements[i];
if (dropdownRef.current) scrollIntoView(dropdownRef.current, element);
element.focus();
found = true;
break;
}
i += direction === 'down' ? 1 : -1;
}
// If going up and no option found above, focus the search input
if (!found && direction === 'up' && enableSearch && inputRef.current) {
inputRef.current.focus();
}
};
var focusFirstOption = function focusFirstOption() {
var container = popoverContentRef.current || document;
var optionClass = '.OptionWrapper';
var elements = container.querySelectorAll(optionClass);
if (!elements.length) return;
for (var i = 0; i < elements.length; i++) {
if (isFocusableOption(elements[i])) {
var element = elements[i];
if (dropdownRef.current) scrollIntoView(dropdownRef.current, element);
element.focus();
break;
}
}
};
var focusEdgeOption = function focusEdgeOption(position) {
var container = popoverContentRef.current || document;
var elements = container.querySelectorAll('.OptionWrapper');
if (!elements.length) return;
if (position === 'first') {
for (var i = 0; i < elements.length; i++) {
if (isFocusableOption(elements[i])) {
elements[i].focus();
break;
}
}
} else {
for (var _i2 = elements.length - 1; _i2 >= 0; _i2--) {
if (isFocusableOption(elements[_i2])) {
elements[_i2].focus();
break;
}
}
}
};
var getActiveOptionElement = function getActiveOptionElement() {
var container = popoverContentRef.current;
if (!container) return null;
var activeOption = container.querySelector(".".concat(dropdownStyles['Option--active'], ", .").concat(dropdownStyles['Option-checkbox--active']));
if (activeOption && isFocusableOption(activeOption)) return activeOption;
var allOptions = Array.from(container.querySelectorAll('.OptionWrapper'));
return allOptions.find(function (option) {
return isFocusableOption(option);
}) || null;
};
var activateOptionElement = function activateOptionElement(element) {
if (!element || !isFocusableOption(element)) return;
var checkboxInput = element.querySelector('input[type="checkbox"]');
if (checkboxInput) {
checkboxInput.click();
return;
}
element.click();
};
var onkeydown = function onkeydown(event) {
var optionClass = '.OptionWrapper';
switch (event.key) {
case 'ArrowDown':
event.preventDefault();
dropdownOpen ? focusOption('down', optionClass) : onToggleDropdown(!dropdownOpen);
break;
case 'ArrowUp':
event.preventDefault();
dropdownOpen ? focusOption('up', optionClass) : onToggleDropdown(!dropdownOpen);
break;
case 'Enter':
{
if (!dropdownOpen) {
event.preventDefault();
onToggleDropdown(true);
}
break;
}
case 'Escape':
if (dropdownOpen) {
event.preventDefault();
onToggleDropdown(false, 'onClick');
}
break;
case 'Tab':
{
var _dropdownApplyButtonR;
if (!showApplyButton && dropdownOpen) {
event.preventDefault();
onToggleDropdown(false, 'onClick');
return;
}
var currentElement = document.activeElement;
var disabledApplyButton = (_dropdownApplyButtonR = dropdownApplyButtonRef.current) === null || _dropdownApplyButtonR === void 0 ? void 0 : _dropdownApplyButtonR.disabled;
if ((currentElement === dropdownCancelButtonRef.current && disabledApplyButton || currentElement === dropdownApplyButtonRef.current) && dropdownOpen) {
event.preventDefault();
onToggleDropdown(false, 'onClick');
return;
}
if (showApplyButton && dropdownOpen) {
event.preventDefault();
if (currentElement === dropdownCancelButtonRef.current) {
var _dropdownApplyButtonR2;
(_dropdownApplyButtonR2 = dropdownApplyButtonRef.current) === null || _dropdownApplyButtonR2 === void 0 || _dropdownApplyButtonR2.focus();
} else {
var _dropdownCancelButton;
(_dropdownCancelButton = dropdownCancelButtonRef.current) === null || _dropdownCancelButton === void 0 || _dropdownCancelButton.focus();
}
}
break;
}
}
};
var onPopoverKeyDown = function onPopoverKeyDown(event) {
var optionClass = '.OptionWrapper';
switch (event.key) {
case 'ArrowDown':
event.preventDefault();
event.stopPropagation();
focusOption('down', optionClass);
break;
case 'ArrowUp':
event.preventDefault();
event.stopPropagation();
focusOption('up', optionClass);
break;
case 'Home':
{
// Let Home/End work normally in the search input for text cursor movement
var homeTarget = document.activeElement;
var isInputFocused = enableSearch && inputRef.current && (homeTarget === inputRef.current || inputRef.current.contains(homeTarget));
if (!isInputFocused) {
event.preventDefault();
event.stopPropagation();
focusEdgeOption('first');
}
break;
}
case 'End':
{
var endTarget = document.activeElement;
var isInputFocusedEnd = enableSearch && inputRef.current && (endTarget === inputRef.current || inputRef.current.contains(endTarget));
if (!isInputFocusedEnd) {
event.preventDefault();
event.stopPropagation();
focusEdgeOption('last');
}
break;
}
case 'Enter':
{
var enterTarget = document.activeElement;
var _isInputFocused = enableSearch && inputRef.current && (enterTarget === inputRef.current || inputRef.current.contains(enterTarget));
if (_isInputFocused) {
event.preventDefault();
event.stopPropagation();
activateOptionElement(getActiveOptionElement());
}
break;
}
case 'Escape':
event.preventDefault();
event.stopPropagation();
onToggleDropdown(false, 'onClick');
break;
case 'Tab':
{
event.preventDefault();
event.stopPropagation();
// Tab order: [non-option focusables before options] → option list → [non-option focusables after options] → close
// The option list is a single tab stop; arrow keys navigate within it.
var container = popoverContentRef.current;
if (!container) {
onToggleDropdown(false, 'onClick');
return;
}
var currentEl = document.activeElement;
var isOnOption = currentEl && currentEl.closest('.OptionWrapper');
// Collect all non-option focusable elements in the popover
var focusableSelector = 'button:not([disabled]), input:not([disabled]), [tabindex="0"]';
var nonOptionFocusables = Array.from(container.querySelectorAll(focusableSelector)).filter(function (el) {
if (el.disabled) return false;
if (el.getAttribute('aria-disabled') === 'true') return false;
if (el.closest('.OptionWrapper')) return false;
if (el.closest('[data-test="DesignSystem-Checkbox"]')) return false;
return true;
});
// Split into before-options and after-options using first OptionWrapper position
var firstOption = container.querySelector('.OptionWrapper');
var before = [];
var after = [];
nonOptionFocusables.forEach(function (el) {
if (!firstOption) {
before.push(el);
} else if (el.compareDocumentPosition(firstOption) & Node.DOCUMENT_POSITION_FOLLOWING) {
before.push(el);
} else {
after.push(el);
}
});
// Build the full tab stops: [...before, OPTION_LIST, ...after]
var hasOptions = !!firstOption;
var tabStops = [].concat(before, _toConsumableArray(hasOptions ? [null] : []), after);
// Determine current position in tab stops
var currentStop = -1;
if (isOnOption) {
currentStop = tabStops.indexOf(null);
} else {
for (var idx = 0; idx < tabStops.length; idx++) {
var stop = tabStops[idx];
if (stop && (stop === currentEl || stop.contains(currentEl))) {
currentStop = idx;
break;
}
}
}
if (event.shiftKey) {
var prev = currentStop > 0 ? currentStop - 1 : -1;
if (prev === -1) {
onToggleDropdown(false, 'onClick');
} else if (tabStops[prev] === null) {
focusEdgeOption('last');
} else {
tabStops[prev].focus();
}
} else {
var next = currentStop !== -1 && currentStop < tabStops.length - 1 ? currentStop + 1 : -1;
if (next === -1) {
onToggleDropdown(false, 'onClick');
} else if (tabStops[next] === null) {
focusEdgeOption('first');
} else {
tabStops[next].focus();
}
}
break;
}
}
};
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, ariaProps, {
className: dropdownClass,
ref: triggerRef,
onKeyDown: onkeydown,
role: "presentation"
}), /*#__PURE__*/React.createElement(Popover, _extends$2({
onToggle: onToggleDropdown,
trigger: trigger,
triggerClass: !menu ? 'w-100' : '',
open: dropdownOpen,
customStyle: popoverStyle,
position: alignmentMapping[align]
}, popoverOptions, {
"data-test": "DesignSystem-Dropdown--Popover"
}), /*#__PURE__*/React.createElement("div", {
id: popupId,
onKeyDown: onPopoverKeyDown,
ref: popoverContentRef,
role: "presentation"
}, enableSearch && renderSearch(), renderDropdownSection(), showApplyButton && withCheckbox && renderApplyButton())));
};
DropdownList.displayName = 'DropdownList';
var _excluded$1l = ["triggerOptions", "selected", "tabIndex"];
var inputRef = /*#__PURE__*/React.createRef();
/**
*
* Dropdown component has been deprecated, please use following components instead:
*
* - [Select](https://mds.innovaccer.com/?path=/docs/components-select-all--all)
* - [Menu](https://mds.innovaccer.com/?path=/docs/components-menu-all--all)
* - [Combobox](https://mds.innovaccer.com/?path=/docs/components-combobox-all--all)
*
* ###Note:
* 1. Dropdown props types:
* - async: fetchOptions
* - sync: options, loading
* 2. Sync Dropdown:
* - Manually toggle loading state to update options (Options <= staticLimit).
* 3. Callback Functions
* - Controlled Dropdown:
* * onUpdate: Called when user `clicks on option` / `clicks on Clear, Cancel or Apply button`.
* * onChange: Called when selected options are updated.
* - Uncontrolled Dropdown:
* * onChange: Called when user `clicks on option` / `clicks on Clear, or Apply button`.
* 4. Default errorTemplate:
*
* <pre class="DocPage-codeBlock mx-6 mb-7">
* (props) => {
* const { errorType = 'DEFAULT' } = props;
* const errorMessages = {
* 'FAILED\_TO\_FETCH': 'Failed to fetch data',
* 'NO\_RECORDS\_FOUND': 'No results found',
* 'DEFAULT': 'No record available'
* }
* return(
* \<Heading>{errorMessages[errorType]}\</Heading>
* );
* }
* </pre>
*/
var Dropdown = /*#__PURE__*/function (_React$Component) {
function Dropdown(props) {
var _this;
_classCallCheck(this, Dropdown);
_this = _callSuper(this, Dropdown, [props]);
_defineProperty$1(_this, "staticLimit", void 0);
_defineProperty$1(_this, "getDisabledOptions", function () {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
return options.filter(function (option) {
return option.disabled;
});
});
_defineProperty$1(_this, "fetchOptionsFunction", function (searchTerm) {
var options = _this.props.options;
var filteredOptions = searchTerm ? getSearchedOptions(options, searchTerm) : options;
return new Promise(function (resolve) {
resolve({
searchTerm: searchTerm,
options: filteredOptions,
count: filteredOptions.length
});
});
});
_defineProperty$1(_this, "getUnSelectedOptions", function (options, init) {
if (options.length) {
if (!init) {
return options.filter(function (option) {
return _this.state.tempSelected.findIndex(function (item) {
return item.value === option.value;
}) === -1;
});
}
var _this$props$selected = _this.props.selected,
selected = _this$props$selected === void 0 ? [] : _this$props$selected;
var unSelectedGroup = options.filter(function (option) {
return _isControlled(_this.props.selected) ? selected.findIndex(function (item) {
return item.value === option.value;
}) === -1 : !option.selected;
});
return unSelectedGroup;
}
return options;
});
_defineProperty$1(_this, "getSelectedOptions", function (options, init) {
var _this$props$selected2 = _this.props.selected,
selected = _this$props$selected2 === void 0 ? [] : _this$props$selected2;
if (options.length) {
if (!init) return _this.state.tempSelected;
var selectedGroup = _isControlled(_this.props.selected) ? selected : options.filter(function (option) {
return option.selected;
});
return selectedGroup;
}
return [];
});
_defineProperty$1(_this, "updateOptions", function (init, async) {
var _this$state = _this.state,
searchTerm = _this$state.searchTerm,
selectAll = _this$state.selectAll,
tempSelected = _this$state.tempSelected,
previousSelected = _this$state.previousSelected,
errorType = _this$state.errorType;
var updatedAsync = async === undefined ? _this.state.async : async;
var _this$props = _this.props,
fetchOptions = _this$props.fetchOptions,
withCheckbox = _this$props.withCheckbox,
withSearch = _this$props.withSearch;
var fetchFunction = fetchOptions ? fetchOptions : _this.fetchOptionsFunction;
fetchFunction(searchTerm).then(function (res) {
var options = res.options,
count = res.count;
if (res.scrollToIndex) {
setTimeout(function () {
scrollToOptionIndex(res.scrollToIndex, options);
}, 0);
}
if (!res.searchTerm || res.searchTerm && res.searchTerm === _this.state.searchTerm) {
var _inputRef$current;
updatedAsync = searchTerm === '' ? count > _this.staticLimit : updatedAsync;
var unSelectedGroup = _showSelectedItems(updatedAsync, searchTerm, withCheckbox) ? _this.getUnSelectedOptions(options, init) : options;
var selectedGroup = searchTerm === '' ? _this.getSelectedOptions(options, init) : [];
var optionsLength = searchTerm === '' ? count : _this.state.optionsLength;
var disabledOptions = _this.getDisabledOptions(unSelectedGroup.slice(0, _this.staticLimit));
var errorResult = errorType;
if (optionsLength === 0 && searchTerm === '') {
errorResult = 'DEFAULT';
} else if (searchTerm !== '') {
errorResult = 'NO_RECORDS_FOUND';
} else {
errorResult = 'FAILED_TO_FETCH';
}
_this.setState(_objectSpread2(_objectSpread2({}, _this.state), {}, {
errorType: fetchOptions ? errorResult : errorType,
scrollIndex: res.scrollToIndex || 0,
optionsLength: optionsLength,
loading: false,
async: updatedAsync,
searchedOptionsLength: count,
options: unSelectedGroup.slice(0, _this.staticLimit),
tempSelected: init ? selectedGroup : tempSelected,
previousSelected: init ? selectedGroup : previousSelected,
selected: _showSelectedItems(updatedAsync, searchTerm, withCheckbox) ? selectedGroup : [],
triggerLabel: _this.updateTriggerLabel(init ? selectedGroup : tempSelected),
selectAll: !updatedAsync && init ? getSelectAll$1(selectedGroup, optionsLength, disabledOptions.length) : selectAll
}));
if (updatedAsync || withSearch) (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
}
})["catch"](function () {
_this.setState({
errorType: fetchOptions ? 'FAILED_TO_FETCH' : errorType,
loading: false,
options: []
});
});
});
_defineProperty$1(_this, "updateSearchTerm", function (search) {
_this.setState(_objectSpread2(_objectSpread2({}, _this.state), {}, {
loading: true,
searchInit: true,
searchTerm: search,
errorType: 'NO_RECORDS_FOUND'
}));
});
_defineProperty$1(_this, "updateOnPopperToggle", function () {
var _this$props2 = _this.props,
withCheckbox = _this$props2.withCheckbox,
showApplyButton = _this$props2.showApplyButton,
onClose = _this$props2.onClose,
name = _this$props2.name,
_this$props2$selected = _this$props2.selected,
selected = _this$props2$selected === void 0 ? [] : _this$props2$selected;
var _this$state2 = _this.state,
previousSelected = _this$state2.previousSelected,
tempSelected = _this$state2.tempSelected,
optionsLength = _this$state2.optionsLength,
async = _this$state2.async,
loading = _this$state2.loading,
searchTerm = _this$state2.searchTerm,
options = _this$state2.options;
var popperIsOpen = _isOpenControlled(_this.props.open) ? _this.props.open : _this.state.open;
var disabledOptionsCount = _this.getDisabledOptions(options).length;
if (withCheckbox && showApplyButton) {
var temporarySelected = _isControlled(_this.props.selected) ? selected : previousSelected;
_this.setState({
tempSelected: temporarySelected,
selectAll: getSelectAll$1(temporarySelected, optionsLength, disabledOptionsCount),
triggerLabel: _this.updateTriggerLabel(temporarySelected)
});
}
if (_isOpenControlled(_this.props.open)) {
_this.setState({
open: popperIsOpen
});
}
if (popperIsOpen) {
var moveSelectedGroup = _showSelectedItems(async, searchTerm, withCheckbox) && !_isEqual(_this.state.selected, tempSelected);
_this.setState({
loading: moveSelectedGroup || loading || searchTerm !== '',
searchInit: searchTerm !== '',
searchTerm: ''
});
if (moveSelectedGroup) _this.updateOptions(false);
}
if (onClose && !popperIsOpen) {
var arr = withCheckbox && showApplyButton ? _isControlled(_this.props.selected) ? selected : previousSelected : _this.state.tempSelected;
var values = arr.map(function (option) {
return option.value;
});
_this.debounceOnClose(values, name);
}
});
_defineProperty$1(_this, "debounceOnClose", debounce$1(300, function (values, name) {
var onClose = _this.props.onClose;
if (onClose) {
onClose(values, name);
}
}));
_defineProperty$1(_this, "updateTriggerLabel", function () {
var selectedArray = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
var totalOptions = arguments.length > 1 ? arguments[1] : undefined;
var selectedLength = selectedArray.length;
if (selectedLength === 0) return '';
var _this$props3 = _this.props,
_this$props3$triggerO = _this$props3.triggerOptions,
triggerOptions = _this$props3$triggerO === void 0 ? {} : _this$props3$triggerO,
getLabel = _this$props3.getLabel;
var customLabel = triggerOptions.customLabel,
_triggerOptions$label = triggerOptions.labelLimit,
labelLimit = _triggerOptions$label === void 0 ? 2 : _triggerOptions$label;
var optionsLength = _this.state ? _this.state.optionsLength : totalOptions;
var label = '';
if (selectedLength <= labelLimit) {
label = selectedArray.map(function (option) {
return option.label;
}).join(', ');
} else {
label = customLabel ? customLabel(selectedLength, optionsLength, selectedArray) : "".concat(selectedLength, " selected");
}
if (getLabel) getLabel(label);
return label;
});
_defineProperty$1(_this, "updateSelectedOptions", function (selectedArray, isSingleSelect, isControlled) {
var _this$state3 = _this.state,
optionsLength = _this$state3.optionsLength,
previousSelected = _this$state3.previousSelected,
selected = _this$state3.selected,
loading = _this$state3.loading,
open = _this$state3.open;
var _this$props4 = _this.props,
onChange = _this$props4.onChange,
withCheckbox = _this$props4.withCheckbox,
showApplyButton = _this$props4.showApplyButton,
closeOnSelect = _this$props4.closeOnSelect,
name = _this$props4.name,
onPopperToggle = _this$props4.onPopperToggle;
var updatePreviousSelected = withCheckbox && showApplyButton && isControlled;
var disabledOptions = _this.getDisabledOptions(_this.state.options);
var isClearClicked = selectedArray.length === 0 && selected.length > 0 || selectedArray.every(function (option) {
return option.disabled;
}) && !selected.every(function (option) {
return option.disabled;
});
_this.setState(_objectSpread2(_objectSpread2({}, _this.state), {}, {
tempSelected: selectedArray,
triggerLabel: _this.updateTriggerLabel(selectedArray),
selectAll: getSelectAll$1(selectedArray, optionsLength, disabledOptions.length),
open: _isOpenControlled(_this.props.open) || withCheckbox ? open : !closeOnSelect,
previousSelected: updatePreviousSelected ? selectedArray : previousSelected,
selected: isClearClicked ? selectedArray : selected,
loading: isClearClicked ? true : loading
}));
if (isClearClicked) _this.debounceClear();
if (onChange && (!showApplyButton || isControlled)) {
var values = selectedArray.map(function (item) {
return item.value;
});
var selectedValues = isSingleSelect ? values[0] : values;
onChange(selectedValues, name);
}
if (!withCheckbox && closeOnSelect && onPopperToggle && _isOpenControlled(_this.props.open)) {
onPopperToggle(false, 'optionClick');
}
});
_defineProperty$1(_this, "isValidOption", function (option) {
var _this$props5 = _this.props,
closeOnSelect = _this$props5.closeOnSelect,
withCheckbox = _this$props5.withCheckbox,
open = _this$props5.open,
onPopperToggle = _this$props5.onPopperToggle;
var temp = _this.state.tempSelected;
if (temp.length > 0 && !withCheckbox && temp[0].value === option['value']) {
_this.setState(_objectSpread2(_objectSpread2({}, _this.state), {}, {
open: _isOpenControlled(open) || !closeOnSelect
}));
if (!withCheckbox && closeOnSelect && onPopperToggle && _isOpenControlled(open)) {
onPopperToggle(false, 'optionClick');
}
return false;
}
return true;
});
_defineProperty$1(_this, "onOptionSelect", function (option) {
var _this$props6 = _this.props,
onUpdate = _this$props6.onUpdate,
selected = _this$props6.selected,
menu = _this$props6.menu;
if (_isControlled(selected)) {
if (onUpdate && (_this.isValidOption(option) || menu)) {
onUpdate('select-option', option);
}
return;
}
if (_this.isValidOption(option) || menu) {
_this.updateSelectedOptions([option], true);
}
});
_defineProperty$1(_this, "onSelect", function (option, checked) {
var _this$props7 = _this.props,
onUpdate = _this$props7.onUpdate,
selected = _this$props7.selected,
showApplyButton = _this$props7.showApplyButton;
if (_isControlled(selected) && !showApplyButton) {
if (onUpdate) onUpdate(checked ? 'select-option' : 'deselect-option', option);
return;
}
var tempSelected = _this.state.tempSelected;
var selectedArray = tempSelected.slice();
if (!checked) {
var index = selectedArray.findIndex(function (item) {
return item.value === option.value;
});
selectedArray.splice(index, 1);
}
selectedArray = checked ? selectedArray.concat(option) : selectedArray;
_this.updateSelectedOptions(selectedArray, false);
});
_defineProperty$1(_this, "onSelectAll", function (event) {
var _this$props8 = _this.props,
onUpdate = _this$props8.onUpdate,
selected = _this$props8.selected,
showApplyButton = _this$props8.showApplyButton;
var _this$state4 = _this.state,
tempSelected = _this$state4.tempSelected,
options = _this$state4.options;
if (_isControlled(selected) && !showApplyButton) {
if (onUpdate) onUpdate(event.target.checked ? 'select-all' : 'deselect-all');
return;
}
var selectedArr = tempSelected.slice();
var selectedDisabledArray = selectedArr.filter(function (option) {
return option.disabled;
});
var selectedArray = event.target.checked ? [].concat(_toConsumableArray(options.filter(function (option) {
return !option.disabled;
})), _toConsumableArray(selectedDisabledArray)) : selectedDisabledArray;
_this.updateSelectedOptions(selectedArray, false);
});
_defineProperty$1(_this, "debounceSearch", debounce$1(_this.props.searchDebounceDuration, function () {
_this.setState({
searchInit: false
}, function () {
_this.updateOptions(false);
});
}));
_defineProperty$1(_this, "reload", function () {
_this.setState({
loading: true
}, function () {
_this.updateOptions(false);
});
});
_defineProperty$1(_this, "debounceClear", debounce$1(250, function () {
return _this.updateOptions(false);
}));
_defineProperty$1(_this, "onClearOptions", function () {
var _this$props9 = _this.props,
selected = _this$props9.selected,
name = _this$props9.name,
onUpdate = _this$props9.onUpdate,
showApplyButton = _this$props9.showApplyButton,
onChange = _this$props9.onChange;
var tempSelected = _this.state.tempSelected;
var selectedArray = tempSelected.filter(function (option) {
return option.disabled;
});
if (_isControlled(selected) && !showApplyButton) {
if (onUpdate) onUpdate('clear-all');
return;
}
_this.setState({
selected: selectedArray,
tempSelected: selectedArray,
triggerLabel: '',
loading: true
});
_this.debounceClear();
if (onChange && !showApplyButton) onChange(selectedArray, name);
});
_defineProperty$1(_this, "onTogglePopper", function (type) {
var onPopperToggle = _this.props.onPopperToggle;
if (onPopperToggle && _isOpenControlled(_this.props.open)) {
onPopperToggle(false, type);
}
});
_defineProperty$1(_this, "onCancelOptions", function () {
var _this$state5 = _this.state,
previousSelected = _this$state5.previousSelected,
tempSelected = _this$state5.tempSelected,
optionsLength = _this$state5.optionsLength;
var _this$props10 = _this.props,
selected = _this$props10.selected,
onUpdate = _this$props10.onUpdate,
onClose = _this$props10.onClose,
name = _this$props10.name;
var popperIsOpen = _isOpenControlled(_this.props.open) ? _this.state.open : false;
var values = previousSelected.map(function (option) {
return option.value;
});
if (_isControlled(selected)) {
if (onUpdate) onUpdate('cancel-selected', previousSelected, tempSelected);
_this.onTogglePopper('cancelClick');
return;
}
var label = _this.updateTriggerLabel(previousSelected);
var disabledOptions = _this.getDisabledOptions(_this.state.options);
_this.setState(_objectSpread2(_objectSpread2({}, _this.state), {}, {
tempSelected: previousSelected,
selectAll: getSelectAll$1(previousSelected, optionsLength, disabledOptions.length),
triggerLabel: label,
open: popperIsOpen
}));
if (onClose && !popperIsOpen) {
onClose(values, name);
}
_this.onTogglePopper('cancelClick');
});
_defineProperty$1(_this, "onApplyOptions", function () {
var _this$state6 = _this.state,
tempSelected = _this$state6.tempSelected,
previousSelected = _this$state6.previousSelected;
var _this$props11 = _this.props,
onChange = _this$props11.onChange,
selected = _this$props11.selected,
onUpdate = _this$props11.onUpdate,
onClose = _this$props11.onClose,
name = _this$props11.name;
var popperIsOpen = _isOpenControlled(_this.props.open) ? _this.state.open : false;
var values = tempSelected.map(function (option) {
return option.value;
});
if (_isControlled(selected)) {
if (onUpdate) onUpdate('apply-selected', previousSelected, tempSelected);
_this.onTogglePopper('applyClick');
return;
}
_this.setState(_objectSpread2(_objectSpread2({}, _this.state), {}, {
previousSelected: tempSelected,
optionsApplied: true,
open: popperIsOpen
}));
if (onChange) {
onChange(values, name);
}
if (onClose && !popperIsOpen) {
onClose(values, name);
}
_this.onTogglePopper('applyClick');
});
_defineProperty$1(_this, "onToggleDropdown", function (updatedOpen, type) {
if (_this.props.disabled) {
return;
}
var onPopperToggle = _this.props.onPopperToggle;
if (onPopperToggle && _isOpenControlled(_this.props.open)) {
onPopperToggle(updatedOpen, type);
return;
}
_this.setState({
open: updatedOpen
});
});
var _props$selected = props.selected,
_selected = _props$selected === void 0 ? [] : _props$selected,
_totalOptions = props.totalOptions,
_withCheckbox = props.withCheckbox,
_loading = props.loading,
_open = props.open,
_options = props.options;
_this.staticLimit = Math.min(100, props.staticLimit);
var _optionsLength = _totalOptions ? _totalOptions : _options.length;
var _async = 'fetchOptions' in _this.props || _optionsLength > _this.staticLimit;
var _selectedGroup = !_async ? _this.getSelectedOptions(_options, true) : [];
var _disabledOptions = _this.getDisabledOptions(_options);
_this.state = {
async: _async,
optionsLength: _optionsLength,
open: _open,
searchInit: false,
searchedOptionsLength: _optionsLength,
optionsApplied: false,
options: _options || [],
loading: _async ? true : _loading,
searchTerm: '',
tempSelected: _selectedGroup,
previousSelected: _selectedGroup,
selected: _showSelectedItems(_async, '', _withCheckbox) ? _selected : [],
triggerLabel: _this.updateTriggerLabel(_selectedGroup, _optionsLength),
selectAll: getSelectAll$1(_selectedGroup, _optionsLength, _disabledOptions.length),
errorType: 'DEFAULT'
};
return _this;
}
_inherits(Dropdown, _React$Component);
return _createClass(Dropdown, [{
key: "componentDidMount",
value: function componentDidMount() {
var async = this.state.async;
if (async) this.updateOptions(true);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
if (!this.state.async) {
var _this$props12 = this.props,
loading = _this$props12.loading,
fetchOptions = _this$props12.fetchOptions,
_this$props12$options = _this$props12.options,
options = _this$props12$options === void 0 ? [] : _this$props12$options,
withSearch = _this$props12.withSearch;
var disabledOptionsCount = this.getDisabledOptions(options).length;
if (prevProps.loading !== loading && !fetchOptions) {
if (options.length > this.staticLimit) {
this.updateOptions(true, true);
} else {
var _inputRef$current2;
var selectedGroup = this.getSelectedOptions(options, true);
this.setState(_objectSpread2(_objectSpread2({}, this.state), {}, {
options: options,
loading: loading,
tempSelected: selectedGroup,
previousSelected: selectedGroup,
optionsLength: options.length,
searchedOptionsLength: options.length,
triggerLabel: this.updateTriggerLabel(selectedGroup),
selectAll: getSelectAll$1(selectedGroup, this.state.optionsLength, disabledOptionsCount)
}));
if (withSearch) (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
}
}
}
if (this.props.selected !== undefined && prevProps.selected !== this.props.selected && prevProps.loading === this.props.loading) {
var isSingleSelect = !this.props.withCheckbox;
this.updateSelectedOptions(this.props.selected, isSingleSelect, true);
}
if (prevState.searchTerm !== this.state.searchTerm) {
this.debounceSearch();
}
if (prevProps.open !== this.props.open || prevState.open !== this.state.open) {
if (_isOpenControlled(this.props.open) && this.props.open === this.state.open) return;
this.updateOnPopperToggle();
}
}
}, {
key: "render",
value: function render() {
var _this$state7 = this.state,
options = _this$state7.options,
async = _this$state7.async,
open = _this$state7.open,
searchTerm = _this$state7.searchTerm,
searchInit = _this$state7.searchInit,
loading = _this$state7.loading,
searchedOptionsLength = _this$state7.searchedOptionsLength,
tempSelected = _this$state7.tempSelected,
selectAll = _this$state7.selectAll,
triggerLabel = _this$state7.triggerLabel,
previousSelected = _this$state7.previousSelected,
scrollIndex = _this$state7.scrollIndex,
errorType = _this$state7.errorType;
var _this$props13 = this.props,
_this$props13$withSel = _this$props13.withSelectAll,
withSelectAll = _this$props13$withSel === void 0 ? true : _this$props13$withSel,
withCheckbox = _this$props13.withCheckbox;
var _this$props14 = this.props,
_this$props14$trigger = _this$props14.triggerOptions,
triggerOptions = _this$props14$trigger === void 0 ? {} : _this$props14$trigger;
_this$props14.selected;
var tabIndex = _this$props14.tabIndex,
rest = _objectWithoutProperties(_this$props14, _excluded$1l);
var remainingOptionsLen = searchedOptionsLength - options.length;
var firstEnabledOption = tabIndex ? tabIndex : _isSelectAllPresent(searchTerm, remainingOptionsLen, withSelectAll, withCheckbox) ? 0 : options.findIndex(function (option) {
return !option.disabled;
});
return /*#__PURE__*/React.createElement(DropdownList, _extends$2({
listOptions: options,
inputRef: inputRef,
remainingOptions: remainingOptionsLen,
firstEnabledOption: firstEnabledOption,
loadingOptions: loading,
async: async,
searchInit: searchInit,
dropdownOpen: open,
searchTerm: searchTerm,
triggerLabel: triggerLabel,
tempSelected: tempSelected,
previousSelected: previousSelected,
selected: this.state.selected,
applyOptions: this.onApplyOptions,
cancelOptions: this.onCancelOptions,
toggleDropdown: this.onToggleDropdown,
onClearOptions: this.onClearOptions,
onSelect: this.onSelect,
selectAll: selectAll,
onSearchChange: this.updateSearchTerm,
onOptionSelect: this.onOptionSelect,
onSelectAll: this.onSelectAll,
customTrigger: triggerOptions.customTrigger,
scrollIndex: scrollIndex,
updateOptions: this.reload,
errorType: errorType
}, rest));
}
}]);
}(React.Component);
_defineProperty$1(Dropdown, "defaultProps", {
triggerOptions: {},
options: [],
closeOnSelect: true,
staticLimit: 50,
searchDebounceDuration: 300
});
var css_248z$12 = "/* Flex component */\n.flex-module-Flex-zcDLv-4-30-3 {\n display: flex;\n}\n\n/* Direction variants */\n.flex-module-Flex--row-oJHr8-4-30-3 {\n flex-direction: row;\n}\n\n.flex-module-Flex--column-C3UQ2-4-30-3 {\n flex-direction: column;\n}\n\n.flex-module-Flex--rowReverse-Bilh8-4-30-3 {\n flex-direction: row-reverse;\n}\n\n.flex-module-Flex--columnReverse-mgG-Y-4-30-3 {\n flex-direction: column-reverse;\n}\n\n/* Justify content variants */\n.flex-module-Flex--justifyStart-gYZMn-4-30-3 {\n justify-content: flex-start;\n}\n\n.flex-module-Flex--justifyEnd-2jHF4-4-30-3 {\n justify-content: flex-end;\n}\n\n.flex-module-Flex--justifyCenter-cAi0h-4-30-3 {\n justify-content: center;\n}\n\n.flex-module-Flex--justifyBetween-QPAwb-4-30-3 {\n justify-content: space-between;\n}\n\n.flex-module-Flex--justifyAround-4mEpb-4-30-3 {\n justify-content: space-around;\n}\n\n.flex-module-Flex--justifyEvenly-hLJ-U-4-30-3 {\n justify-content: space-evenly;\n}\n\n/* Align items variants */\n.flex-module-Flex--alignStart-mbGzS-4-30-3 {\n align-items: flex-start;\n}\n\n.flex-module-Flex--alignEnd-Gvm6H-4-30-3 {\n align-items: flex-end;\n}\n\n.flex-module-Flex--alignCenter-0duDC-4-30-3 {\n align-items: center;\n}\n\n.flex-module-Flex--alignBaseline-f6tSl-4-30-3 {\n align-items: baseline;\n}\n\n.flex-module-Flex--alignStretch-HnLEh-4-30-3 {\n align-items: stretch;\n}\n\n/* Wrap variants */\n.flex-module-Flex--wrap-WhliA-4-30-3 {\n flex-wrap: wrap;\n}\n\n.flex-module-Flex--nowrap-2eXzJ-4-30-3 {\n flex-wrap: nowrap;\n}\n\n.flex-module-Flex--wrapReverse-ekLxU-4-30-3 {\n flex-wrap: wrap-reverse;\n}\n\n/* Gap variants */\n.flex-module-Flex--gap0-4XUg8-4-30-3 {\n gap: 0;\n}\n\n.flex-module-Flex--gap2-0K-5V-4-30-3 {\n gap: var(--spacing-05);\n}\n\n.flex-module-Flex--gap4-zDQWM-4-30-3 {\n gap: var(--spacing-10);\n}\n\n.flex-module-Flex--gap8-6xMEi-4-30-3 {\n gap: var(--spacing-20);\n}\n\n.flex-module-Flex--gap12-3NgKi-4-30-3 {\n gap: var(--spacing-30);\n}\n\n.flex-module-Flex--gap16-NCObj-4-30-3 {\n gap: var(--spacing-40);\n}\n\n.flex-module-Flex--gap24-D44Dr-4-30-3 {\n gap: var(--spacing-60);\n}\n\n.flex-module-Flex--gap32-s8Wwy-4-30-3 {\n gap: var(--spacing-80);\n}\n\n.flex-module-Flex--gap48-Fm1yU-4-30-3 {\n gap: var(--spacing-120);\n}\n";
var styles$$ = {"Flex":"flex-module-Flex-zcDLv-4-30-3","Flex--row":"flex-module-Flex--row-oJHr8-4-30-3","Flex--column":"flex-module-Flex--column-C3UQ2-4-30-3","Flex--rowReverse":"flex-module-Flex--rowReverse-Bilh8-4-30-3","Flex--columnReverse":"flex-module-Flex--columnReverse-mgG-Y-4-30-3","Flex--justifyStart":"flex-module-Flex--justifyStart-gYZMn-4-30-3","Flex--justifyEnd":"flex-module-Flex--justifyEnd-2jHF4-4-30-3","Flex--justifyCenter":"flex-module-Flex--justifyCenter-cAi0h-4-30-3","Flex--justifyBetween":"flex-module-Flex--justifyBetween-QPAwb-4-30-3","Flex--justifyAround":"flex-module-Flex--justifyAround-4mEpb-4-30-3","Flex--justifyEvenly":"flex-module-Flex--justifyEvenly-hLJ-U-4-30-3","Flex--alignStart":"flex-module-Flex--alignStart-mbGzS-4-30-3","Flex--alignEnd":"flex-module-Flex--alignEnd-Gvm6H-4-30-3","Flex--alignCenter":"flex-module-Flex--alignCenter-0duDC-4-30-3","Flex--alignBaseline":"flex-module-Flex--alignBaseline-f6tSl-4-30-3","Flex--alignStretch":"flex-module-Flex--alignStretch-HnLEh-4-30-3","Flex--wrap":"flex-module-Flex--wrap-WhliA-4-30-3","Flex--nowrap":"flex-module-Flex--nowrap-2eXzJ-4-30-3","Flex--wrapReverse":"flex-module-Flex--wrapReverse-ekLxU-4-30-3","Flex--gap0":"flex-module-Flex--gap0-4XUg8-4-30-3","Flex--gap2":"flex-module-Flex--gap2-0K-5V-4-30-3","Flex--gap4":"flex-module-Flex--gap4-zDQWM-4-30-3","Flex--gap8":"flex-module-Flex--gap8-6xMEi-4-30-3","Flex--gap12":"flex-module-Flex--gap12-3NgKi-4-30-3","Flex--gap16":"flex-module-Flex--gap16-NCObj-4-30-3","Flex--gap24":"flex-module-Flex--gap24-D44Dr-4-30-3","Flex--gap32":"flex-module-Flex--gap32-s8Wwy-4-30-3","Flex--gap48":"flex-module-Flex--gap48-Fm1yU-4-30-3"};
styleInject(css_248z$12);
var _excluded$1k = ["direction", "justifyContent", "alignItems", "wrap", "gap", "columnGap", "rowGap", "className", "style", "children"];
var spacingTokenMap$1 = {
'spacing-10': 'var(--spacing-10)',
'spacing-20': 'var(--spacing-20)',
'spacing-30': 'var(--spacing-30)',
'spacing-40': 'var(--spacing-40)',
'spacing-60': 'var(--spacing-60)',
'spacing-80': 'var(--spacing-80)',
'spacing-120': 'var(--spacing-120)',
'spacing-160': 'var(--spacing-160)'
};
var getSpacingValue$1 = function getSpacingValue(spacing) {
if (!spacing) return undefined;
return spacingTokenMap$1[spacing];
};
var buildResponsiveStyles$1 = function buildResponsiveStyles(value, cssProperty) {
if (!value) return {};
if (typeof value === 'string') {
if (cssProperty.includes('gap')) {
return _defineProperty$1({}, cssProperty, getSpacingValue$1(value));
}
return _defineProperty$1({}, cssProperty, value);
}
var styles = {};
if (value.xs) {
if (cssProperty.includes('gap')) {
var spacingValue = getSpacingValue$1(value.xs);
if (spacingValue) {
styles[cssProperty] = spacingValue;
}
} else {
styles[cssProperty] = value.xs;
}
}
return styles;
};
var directionMap = {
row: 'row',
column: 'column',
'row-reverse': 'rowReverse',
'column-reverse': 'columnReverse'
};
var justifyContentMap = {
'flex-start': 'justifyStart',
'flex-end': 'justifyEnd',
center: 'justifyCenter',
'space-between': 'justifyBetween',
'space-around': 'justifyAround',
'space-evenly': 'justifyEvenly'
};
var alignItemsMap = {
'flex-start': 'alignStart',
'flex-end': 'alignEnd',
center: 'alignCenter',
baseline: 'alignBaseline',
stretch: 'alignStretch'
};
var wrapMap = {
wrap: 'wrap',
nowrap: 'nowrap',
'wrap-reverse': 'wrapReverse'
};
var Flex = function Flex(props) {
var _props$direction = props.direction,
direction = _props$direction === void 0 ? 'row' : _props$direction,
_props$justifyContent = props.justifyContent,
justifyContent = _props$justifyContent === void 0 ? 'flex-start' : _props$justifyContent,
_props$alignItems = props.alignItems,
alignItems = _props$alignItems === void 0 ? 'stretch' : _props$alignItems,
_props$wrap = props.wrap,
wrap = _props$wrap === void 0 ? 'nowrap' : _props$wrap,
gap = props.gap,
columnGap = props.columnGap,
rowGap = props.rowGap,
className = props.className,
style = props.style,
children = props.children,
rest = _objectWithoutProperties(props, _excluded$1k);
var inlineStyles = _objectSpread2({}, style);
if (direction) {
if (typeof direction === 'string') {
inlineStyles.flexDirection = direction;
} else if (direction.xs) {
inlineStyles.flexDirection = direction.xs;
}
}
if (justifyContent) {
if (typeof justifyContent === 'string') {
inlineStyles.justifyContent = justifyContent;
} else if (justifyContent.xs) {
inlineStyles.justifyContent = justifyContent.xs;
}
}
if (alignItems) {
if (typeof alignItems === 'string') {
inlineStyles.alignItems = alignItems;
} else if (alignItems.xs) {
inlineStyles.alignItems = alignItems.xs;
}
}
if (wrap) {
if (typeof wrap === 'string') {
inlineStyles.flexWrap = wrap;
} else if (wrap.xs) {
inlineStyles.flexWrap = wrap.xs;
}
}
var gapStyles = buildResponsiveStyles$1(gap, 'gap');
var columnGapStyles = buildResponsiveStyles$1(columnGap, 'columnGap');
var rowGapStyles = buildResponsiveStyles$1(rowGap, 'rowGap');
var mergedStyles = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, inlineStyles), gapStyles), columnGapStyles), rowGapStyles);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$$.Flex, true), styles$$["Flex--".concat(directionMap[direction])], typeof direction === 'string' && direction), styles$$["Flex--".concat(justifyContentMap[justifyContent])], typeof justifyContent === 'string' && justifyContent), styles$$["Flex--".concat(alignItemsMap[alignItems])], typeof alignItems === 'string' && alignItems), styles$$["Flex--".concat(wrapMap[wrap])], typeof wrap === 'string' && wrap), styles$$["Flex--gap--".concat(typeof gap === 'string' ? gap : undefined)], typeof gap === 'string' && gap), styles$$["Flex--columnGap--".concat(typeof columnGap === 'string' ? columnGap : undefined)], typeof columnGap === 'string' && columnGap), styles$$["Flex--rowGap--".concat(typeof rowGap === 'string' ? rowGap : undefined)], typeof rowGap === 'string' && rowGap), className);
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-Flex"
}, rest, {
className: classes,
style: mergedStyles
}), children);
};
Flex.displayName = 'Flex';
Flex.defaultProps = {
direction: 'row',
justifyContent: 'flex-start',
alignItems: 'stretch',
wrap: 'nowrap'
};
var css_248z$11 = "/* Heading */\n.heading-module-Heading-tmepg-4-30-3 {\n margin: 0;\n}\n\n.heading-module-Heading--s-r3kT8-4-30-3 {\n font-weight: var(--font-weight-bold);\n font-size: var(--font-size-m);\n line-height: var(--font-height-m);\n}\n\n.heading-module-Heading--m-KypUv-4-30-3 {\n font-weight: var(--font-weight-medium);\n font-size: var(--font-size-l);\n line-height: var(--font-height-l);\n}\n\n.heading-module-Heading--l-6irdW-4-30-3 {\n font-weight: var(--font-weight-normal);\n font-size: var(--font-size-xl);\n line-height: var(--font-height-xl);\n}\n\n.heading-module-Heading--xl-XGjXU-4-30-3 {\n font-weight: var(--font-weight-medium);\n font-size: var(--font-size-xxl);\n line-height: var(--font-height-xxl);\n}\n\n.heading-module-Heading--xxl-eD434-4-30-3 {\n font-weight: var(--font-weight-normal);\n font-size: var(--font-size-xxxl);\n line-height: var(--font-height-xxl);\n}\n\n.heading-module-Heading--default-3YJIX-4-30-3 {\n color: var(--text);\n}\n\n.heading-module-Heading--subtle-K3WJd-4-30-3 {\n color: var(--text-subtle);\n}\n\n.heading-module-Heading--disabled-dQRjW-4-30-3 {\n color: var(--text-disabled);\n}\n\n.heading-module-Heading--white-LK0i2-4-30-3 {\n color: var(--text-white);\n}\n";
var styles$_ = {"Heading":"heading-module-Heading-tmepg-4-30-3","Heading--s":"heading-module-Heading--s-r3kT8-4-30-3","Heading--m":"heading-module-Heading--m-KypUv-4-30-3","Heading--l":"heading-module-Heading--l-6irdW-4-30-3","Heading--xl":"heading-module-Heading--xl-XGjXU-4-30-3","Heading--xxl":"heading-module-Heading--xxl-eD434-4-30-3","Heading--default":"heading-module-Heading--default-3YJIX-4-30-3","Heading--subtle":"heading-module-Heading--subtle-K3WJd-4-30-3","Heading--disabled":"heading-module-Heading--disabled-dQRjW-4-30-3","Heading--white":"heading-module-Heading--white-LK0i2-4-30-3"};
styleInject(css_248z$11);
var _excluded$1j = ["appearance", "size", "as", "children", "className", "color"];
var sizeMap = {
s: 'h5',
m: 'h4',
l: 'h3',
xl: 'h2',
xxl: 'h1'
};
var Heading = /*#__PURE__*/React.forwardRef(function (props, ref) {
var _props$appearance = props.appearance,
appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
_props$size = props.size,
size = _props$size === void 0 ? 'm' : _props$size,
as = props.as,
children = props.children,
className = props.className,
color = props.color,
rest = _objectWithoutProperties(props, _excluded$1j);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$_.Heading, true), styles$_["Heading--".concat(size)], size), styles$_["Heading--".concat(appearance)], !color && appearance), "color-".concat(color), color), className);
return /*#__PURE__*/React.createElement(Link$1, _extends$2({
ref: ref,
"data-test": "DesignSystem-Heading"
}, rest, {
className: classes,
componentType: as || sizeMap[size]
}), children);
});
Heading.displayName = 'Heading';
var css_248z$10 = ".actionButton-module-ActionButton-GMsQC-4-30-3 {\n display: flex;\n flex-shrink: 0;\n overflow: hidden;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n cursor: pointer;\n color: var(--inverse-lighter);\n border-radius: var(--border-radius-full);\n padding: var(--spacing-05);\n}\n\n.actionButton-module-ActionButton-GMsQC-4-30-3:focus-visible,\n.actionButton-module-ActionButton-GMsQC-4-30-3:focus {\n outline: var(--spacing-05) solid var(--primary-focus);\n}\n\n.actionButton-module-ActionButton-GMsQC-4-30-3:hover {\n background-color: var(--secondary);\n}\n\n.actionButton-module-ActionButton-GMsQC-4-30-3:active {\n background-color: var(--secondary-dark);\n}\n";
var styles$Z = {"ActionButton":"actionButton-module-ActionButton-GMsQC-4-30-3"};
styleInject(css_248z$10);
var _excluded$1i = ["className", "iconType"];
var ActionButton$1 = function ActionButton(props) {
var className = props.className,
iconType = props.iconType,
rest = _objectWithoutProperties(props, _excluded$1i);
var iconClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$Z['ActionButton'], true), "".concat(className), className));
return /*#__PURE__*/React.createElement(Icon, _extends$2({
className: iconClass,
type: iconType,
"data-test": "DesignSystem-Input-ActionButton"
}, rest));
};
ActionButton$1.displayName = 'ActionButton';
ActionButton$1.defaultProps = {
size: 16,
type: 'rounded'
};
var css_248z$$ = "/* input */\n\n.input-module-Input-input-eQ8b8-4-30-3::-ms-clear {\n display: none;\n}\n\n.input-module-Input-4ywvi-4-30-3 {\n display: flex;\n flex-grow: 1;\n flex-direction: row;\n align-items: center;\n box-sizing: border-box;\n border-radius: var(--border-radius-10);\n border: var(--border);\n background: var(--white);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.input-module-Input--tiny-NegXy-4-30-3 {\n height: var(--font-height-m);\n padding-top: var(--spacing-10);\n padding-bottom: var(--spacing-10);\n padding-left: var(--spacing-20);\n padding-right: var(--spacing-10);\n}\n\n.input-module-Input--regular-YN-1C-4-30-3 {\n height: var(--font-height-l);\n padding-top: var(--spacing-10);\n padding-bottom: var(--spacing-10);\n padding-right: var(--spacing-15);\n padding-left: var(--spacing-20);\n}\n\n.input-module-Input--large-FqoAi-4-30-3 {\n height: 40px;\n padding-top: var(--spacing-20);\n padding-bottom: var(--spacing-20);\n padding-right: var(--spacing-15);\n padding-left: var(--spacing-20);\n}\n\n.input-module-Input-4ywvi-4-30-3:hover {\n background: var(--secondary-lighter);\n border-color: var(--secondary-dark);\n cursor: text;\n}\n\n.input-module-Input-4ywvi-4-30-3:focus-within {\n background: var(--white);\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.input-module-Input-4ywvi-4-30-3:focus-within .input-module-Input-icon--left-F1r05-4-30-3 {\n color: var(--primary);\n}\n\n.input-module-Input--error-EGIUq-4-30-3:focus-within {\n border-color: var(--alert);\n}\n\n.input-module-Input--error-EGIUq-4-30-3:focus-within .input-module-Input-icon--left-F1r05-4-30-3 {\n color: var(--alert);\n}\n\n.input-module-Input--disabled-IRtQk-4-30-3 {\n background: var(--secondary-lightest);\n border-color: var(--secondary-lighter);\n pointer-events: none;\n}\n\n.input-module-Input--readOnly-4IaEw-4-30-3 {\n background: var(--secondary-lightest);\n border-color: var(--secondary);\n pointer-events: none;\n}\n\n.input-module-Input--disabled-IRtQk-4-30-3 .input-module-Input-icon--left-F1r05-4-30-3 {\n color: var(--inverse-lightest);\n}\n\n.input-module-Input--error-EGIUq-4-30-3,\n.input-module-Input--error-EGIUq-4-30-3:hover {\n background: var(--white);\n border-color: var(--alert);\n}\n\n.input-module-Input-input-eQ8b8-4-30-3 {\n display: flex;\n width: 100%;\n font-family: var(--font-family);\n font-weight: var(--font-weight-normal);\n font-size: var(--font-size);\n line-height: var(--font-height-s);\n color: var(--inverse);\n padding: 0;\n border: none;\n background: transparent;\n}\n\n.input-module-Input-input-eQ8b8-4-30-3::-moz-placeholder {\n color: var(--inverse-lighter);\n}\n\n.input-module-Input-input-eQ8b8-4-30-3::placeholder {\n color: var(--inverse-lighter);\n}\n\n.input-module-Input-input-eQ8b8-4-30-3:focus {\n outline: 0;\n}\n\n.input-module-Input-input-eQ8b8-4-30-3:disabled .input-module-Input-input-eQ8b8-4-30-3::-moz-placeholder {\n color: var(--inverse-lighter);\n}\n\n.input-module-Input-input-eQ8b8-4-30-3:disabled .input-module-Input-input-eQ8b8-4-30-3::placeholder {\n color: var(--inverse-lighter);\n}\n\n.input-module-Input-input--regular-2cMTS-4-30-3 {\n line-height: var(--font-height);\n}\n\n.input-module-Input-input--large-Ps2E1-4-30-3 {\n line-height: var(--font-height-m);\n font-size: var(--font-size-m);\n}\n\n.input-module-Input-input--tiny-qQEuS-4-30-3 {\n line-height: var(--font-height-s);\n font-size: var(--font-size-s);\n font-weight: var(--font-weight-medium);\n}\n\n.input-module-Input-icon-V1pYc-4-30-3 {\n display: flex;\n align-content: center;\n font-size: var(--font-size-m);\n}\n\n.input-module-Input-icon--left-F1r05-4-30-3 {\n margin-right: var(--spacing-20);\n color: var(--inverse);\n}\n\n.input-module-Input-icon--inputBlank-GkWyn-4-30-3 {\n color: var(--inverse-lighter);\n}\n\n.input-module-Input-icon--error-o9EcI-4-30-3 {\n color: var(--alert);\n}\n\n.input-module-Input-icon--right-A9G9E-4-30-3 {\n cursor: pointer;\n color: var(--inverse-lighter);\n border-radius: var(--border-radius-full);\n box-sizing: content-box;\n}\n\n.input-module-Input-iconWrapper--right-HdKL--4-30-3:focus-visible .input-module-Input-icon--right-A9G9E-4-30-3 {\n outline: var(--spacing-05) solid var(--primary-focus);\n}\n\n.input-module-Input-icon--right-A9G9E-4-30-3:focus-visible {\n outline: var(--spacing-05) solid var(--primary-focus);\n border-radius: var(--border-radius-full);\n}\n\n.input-module-Input-iconWrapper--right-HdKL--4-30-3:hover .input-module-Input-icon--right-A9G9E-4-30-3 {\n background-color: var(--secondary);\n}\n\n.input-module-Input-iconWrapper--right-HdKL--4-30-3:active .input-module-Input-icon--right-A9G9E-4-30-3 {\n background-color: var(--secondary-dark);\n}\n\n.input-module-Input-inlineLabel-Sgbvs-4-30-3 {\n margin-right: var(--spacing-20);\n}\n\n.input-module-Input-iconWrapper--right-HdKL--4-30-3:focus-visible {\n outline: none;\n}\n";
var inputStyles = {"Input-input":"input-module-Input-input-eQ8b8-4-30-3","Input":"input-module-Input-4ywvi-4-30-3","Input--tiny":"input-module-Input--tiny-NegXy-4-30-3","Input--regular":"input-module-Input--regular-YN-1C-4-30-3","Input--large":"input-module-Input--large-FqoAi-4-30-3","Input-icon--left":"input-module-Input-icon--left-F1r05-4-30-3","Input--error":"input-module-Input--error-EGIUq-4-30-3","Input--disabled":"input-module-Input--disabled-IRtQk-4-30-3","Input--readOnly":"input-module-Input--readOnly-4IaEw-4-30-3","Input-input--regular":"input-module-Input-input--regular-2cMTS-4-30-3","Input-input--large":"input-module-Input-input--large-Ps2E1-4-30-3","Input-input--tiny":"input-module-Input-input--tiny-qQEuS-4-30-3","Input-icon":"input-module-Input-icon-V1pYc-4-30-3","Input-icon--inputBlank":"input-module-Input-icon--inputBlank-GkWyn-4-30-3","Input-icon--error":"input-module-Input-icon--error-o9EcI-4-30-3","Input-icon--right":"input-module-Input-icon--right-A9G9E-4-30-3","Input-iconWrapper--right":"input-module-Input-iconWrapper--right-HdKL--4-30-3","Input-inlineLabel":"input-module-Input-inlineLabel-Sgbvs-4-30-3"};
styleInject(css_248z$$);
var css_248z$_ = ".verificationCodeInput-module-VerificationCodeInput-Input-bdn9x-4-30-3 {\n display: inline-flex;\n width: 40px;\n}\n\n.verificationCodeInput-module-VerificationCodeInput-Input-bdn9x-4-30-3 .verificationCodeInput-module-Input-input-IIOUQ-4-30-3 {\n text-align: center;\n}\n\n.verificationCodeInput-module-VerificationCodeInput-Input-bdn9x-4-30-3 .verificationCodeInput-module-Input-input-IIOUQ-4-30-3::-webkit-inner-spin-button,\n.verificationCodeInput-module-VerificationCodeInput-Input-bdn9x-4-30-3 .verificationCodeInput-module-Input-input-IIOUQ-4-30-3::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n";
var styles$Y = {"VerificationCodeInput-Input":"verificationCodeInput-module-VerificationCodeInput-Input-bdn9x-4-30-3","Input-input":"verificationCodeInput-module-Input-input-IIOUQ-4-30-3"};
styleInject(css_248z$_);
var _excluded$1h = ["size", "type", "minWidth", "defaultValue", "name", "placeholder", "value", "icon", "inlineLabel", "required", "error", "info", "onChange", "onClick", "onClear", "onBlur", "onFocus", "onPaste", "actionIcon", "className", "autoFocus", "disabled", "readOnly", "iconType", "clearButtonAriaLabel", "aria-invalid", "aria-labelledby", "tabIndex"];
var sizeMapping$2 = {
tiny: 12,
regular: 16,
large: 16
};
var iconSizeMapping = {
tiny: 14,
regular: 16,
large: 20
};
/**
* ###### Input has two types:
* - [Controlled Input](https://reactjs.org/docs/forms.html#controlled-components)
* - [Uncontrolled Input](https://reactjs.org/docs/uncontrolled-components.html)
*/
var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
var _props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size,
_props$type = props.type,
type = _props$type === void 0 ? 'text' : _props$type,
_props$minWidth = props.minWidth,
minWidth = _props$minWidth === void 0 ? type !== 'number' ? 256 : undefined : _props$minWidth,
defaultValue = props.defaultValue,
name = props.name,
placeholder = props.placeholder,
value = props.value,
icon = props.icon,
inlineLabel = props.inlineLabel,
required = props.required,
error = props.error,
info = props.info,
onChange = props.onChange,
onClick = props.onClick,
onClear = props.onClear,
onBlur = props.onBlur,
onFocus = props.onFocus,
onPaste = props.onPaste,
actionIcon = props.actionIcon,
className = props.className,
autoFocus = props.autoFocus,
disabled = props.disabled,
readOnly = props.readOnly,
iconType = props.iconType,
clearButtonAriaLabel = props.clearButtonAriaLabel,
ariaInvalid = props['aria-invalid'],
ariaLabelledBy = props['aria-labelledby'],
tabIndexProp = props.tabIndex,
rest = _objectWithoutProperties(props, _excluded$1h);
var ref = React.useRef(null);
var _React$useState = React.useState(!value),
_React$useState2 = _slicedToArray(_React$useState, 2),
isInputBlank = _React$useState2[0],
setIsInputBlank = _React$useState2[1];
var inlineLabelIdRef = React.useRef(null);
if (inlineLabelIdRef.current === null) {
inlineLabelIdRef.current = "Input-inlineLabel-".concat(uidGenerator());
}
var inlineLabelId = inlineLabelIdRef.current;
React.useImperativeHandle(forwardedRef, function () {
return ref.current;
});
React.useEffect(function () {
var _ref$current;
if (autoFocus) (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus({
preventScroll: true
});
}, []);
React.useEffect(function () {
if (ref.current && value !== undefined) {
var element = ref.current;
try {
var cursorPosition = element.value.length;
element.setSelectionRange(cursorPosition, cursorPosition);
} catch (error) {
console.error('Error setting selection range:', error);
}
}
}, [type]);
var resolvedClearButtonAriaLabel = clearButtonAriaLabel || (props['aria-label'] ? "Clear ".concat(props['aria-label']) : undefined) || (placeholder ? "Clear ".concat(placeholder) : 'Clear input');
var baseProps = extractBaseProps(props);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, inputStyles['Input'], true), inputStyles["Input--".concat(size)], size), inputStyles['Input--disabled'], disabled), inputStyles['Input--error'], error), inputStyles['Input--readOnly'], readOnly), className);
var inputClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, inputStyles['Input-input'], true), styles$Y['Input-input'], true), inputStyles["Input-input--".concat(size)], size), "mr-4", actionIcon || onClear || info));
var leftIconClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, inputStyles['Input-icon'], true), inputStyles['Input-icon--left'], true), inputStyles['Input-icon--inputBlank'], isInputBlank), inputStyles['Input-icon--error'], error), 'mr-3', size && size === 'tiny'));
var rightIconClass = classnames(_defineProperty$1(_defineProperty$1({}, inputStyles['Input-icon'], true), inputStyles['Input-iconWrapper--right'], true));
var inputRightIconClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, inputStyles['Input-icon--right'], true), 'p-3-5', size === 'tiny'), 'p-3', size === 'regular' || size === 'large'));
var trigger = /*#__PURE__*/React.createElement("div", {
className: rightIconClass // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
,
tabIndex: 0,
role: "img",
"aria-label": info
}, /*#__PURE__*/React.createElement(Icon, {
name: 'info',
size: sizeMapping$2[size],
className: inputRightIconClass
}));
var iconSize = iconSizeMapping[size];
return /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-InputWrapper",
className: classes,
style: {
minWidth: minWidth
},
onClick: function onClick() {
var _ref$current2;
return (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
},
role: "presentation",
onBlur: function onBlur() {
var _ref$current3;
return setIsInputBlank(!((_ref$current3 = ref.current) !== null && _ref$current3 !== void 0 && _ref$current3.value));
}
}, inlineLabel && /*#__PURE__*/React.createElement("div", {
className: inputStyles['Input-inlineLabel'],
id: inlineLabelId
}, /*#__PURE__*/React.createElement(Text$1, {
appearance: "subtle"
}, inlineLabel)), icon && /*#__PURE__*/React.createElement("div", {
className: leftIconClass
}, /*#__PURE__*/React.createElement(Icon, {
name: icon,
size: iconSize,
type: iconType
})), /*#__PURE__*/React.createElement("input", _extends$2({
"data-test": "DesignSystem-Input"
}, baseProps, rest, {
ref: ref,
name: name,
type: type,
defaultValue: defaultValue,
placeholder: placeholder,
className: inputClass,
value: value,
required: required,
disabled: disabled,
readOnly: readOnly,
onChange: onChange,
onBlur: onBlur,
onClick: onClick,
onFocus: onFocus,
onPaste: onPaste,
"aria-labelledby": inlineLabel && ariaLabelledBy ? [inlineLabelId, ariaLabelledBy].filter(Boolean).join(' ') : ariaLabelledBy || undefined,
"aria-describedby": [rest['aria-describedby'], inlineLabel && !ariaLabelledBy ? inlineLabelId : undefined].filter(Boolean).join(' ') || undefined
/**
*for readOnly: true, tab focus from input element is removed. Hence, its tabIndex is set to -1.
*For rest, "undefined" lets user agent(browser) use the default tabIndex.
*/,
tabIndex: tabIndexProp !== undefined ? tabIndexProp : readOnly ? -1 : undefined,
"aria-invalid": error === true ? true : ariaInvalid
})), disabled ? '' : info ? /*#__PURE__*/React.createElement(Tooltip, {
position: "bottom",
tooltip: info
}, trigger) : actionIcon && (value || defaultValue) ? actionIcon : onClear && (value || defaultValue) && /*#__PURE__*/React.createElement("div", {
className: rightIconClass,
role: "button",
tabIndex: 0,
"aria-label": resolvedClearButtonAriaLabel,
onClick: function onClick(e) {
var _ref$current4;
(_ref$current4 = ref.current) === null || _ref$current4 === void 0 || _ref$current4.focus({
preventScroll: true
});
onClear(e);
},
onKeyDown: function onKeyDown(e) {
if (e.key === 'Enter' || isSpaceKey(e)) {
var _ref$current5;
e.preventDefault();
(_ref$current5 = ref.current) === null || _ref$current5 === void 0 || _ref$current5.focus({
preventScroll: true
});
onClear(e);
}
}
}, /*#__PURE__*/React.createElement(Icon, {
"data-test": "DesignSystem-Input--closeIcon",
"aria-hidden": "true",
name: 'close',
size: sizeMapping$2[size],
className: inputRightIconClass
})));
});
Input.displayName = 'Input';
Object.assign(Input, {
ActionButton: ActionButton$1
});
var css_248z$Z = ".metricInput-module-MetricInput-input-F33lA-4-30-3::-ms-clear {\n display: none;\n}\n\n.metricInput-module-MetricInput--0hzO-4-30-3 {\n display: flex;\n width: 100%;\n flex-direction: row;\n align-items: center;\n box-sizing: border-box;\n border-radius: var(--border-radius-10);\n box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);\n background: var(--white);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.metricInput-module-MetricInput--regular-qwE-W-4-30-3 {\n height: var(--spacing-80);\n}\n\n.metricInput-module-MetricInput--large-PHYvQ-4-30-3 {\n height: 40px;\n}\n\n.metricInput-module-MetricInput--small-73F16-4-30-3 {\n height: var(--spacing-60);\n}\n\n.metricInput-module-MetricInput--0hzO-4-30-3:hover {\n background: var(--secondary-lightest);\n cursor: text;\n}\n\n.metricInput-module-MetricInput--0hzO-4-30-3:focus-within {\n background: var(--white);\n box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);\n}\n\n.metricInput-module-MetricInput--0hzO-4-30-3:focus-within:not(:has(.metricInput-module-MetricInput-arrowButton-ZHqEY-4-30-3:focus-visible)) {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.metricInput-module-MetricInput--0hzO-4-30-3:focus-within .metricInput-module-MetricInput-icon-xUfPZ-4-30-3 {\n color: var(--primary);\n}\n\n.metricInput-module-MetricInput--disabled-41NDQ-4-30-3 {\n background: var(--secondary-lightest);\n box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary-light);\n pointer-events: none;\n}\n\n.metricInput-module-MetricInput--readOnly-fVSGN-4-30-3 {\n background: var(--secondary-lightest);\n box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);\n pointer-events: none;\n}\n\n.metricInput-module-MetricInput--disabled-41NDQ-4-30-3 .metricInput-module-MetricInput-icon-xUfPZ-4-30-3 {\n color: var(--inverse-lightest);\n}\n\n.metricInput-module-MetricInput--error-FAM-w-4-30-3,\n.metricInput-module-MetricInput--error-FAM-w-4-30-3:hover {\n background: var(--white);\n box-shadow: inset 0 0 0 var(--border-width-2-5) var(--alert);\n}\n\n.metricInput-module-MetricInput--error-FAM-w-4-30-3:focus-within {\n box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);\n}\n\n.metricInput-module-MetricInput--error-FAM-w-4-30-3:focus-within:not(:has(.metricInput-module-MetricInput-arrowButton-ZHqEY-4-30-3:focus-visible)) {\n outline: var(--border-width-05) solid var(--alert);\n outline-offset: var(--spacing-05);\n}\n\n.metricInput-module-MetricInput--error-FAM-w-4-30-3:focus-within .metricInput-module-MetricInput-icon-xUfPZ-4-30-3 {\n color: var(--alert);\n}\n\n/* Content wrapper — holds icon, prefix, input, suffix */\n.metricInput-module-MetricInput-content-tI8cI-4-30-3 {\n flex: 1;\n display: flex;\n align-items: center;\n min-width: 0;\n overflow: hidden;\n}\n\n.metricInput-module-MetricInput-content--regular-92X2e-4-30-3 {\n padding: var(--spacing-15) var(--spacing-15);\n gap: var(--spacing-05);\n}\n\n.metricInput-module-MetricInput-content--large-jTJ08-4-30-3 {\n padding: var(--spacing-20) var(--spacing-15);\n gap: var(--spacing-15);\n}\n\n.metricInput-module-MetricInput-content--small-YzuJ5-4-30-3 {\n padding: var(--spacing-10) var(--spacing-15);\n gap: var(--spacing-05);\n}\n\n.metricInput-module-MetricInput-input-F33lA-4-30-3 {\n display: flex;\n width: 100%;\n font-family: var(--font-family);\n font-weight: var(--font-weight-normal);\n font-size: var(--font-size);\n line-height: var(--font-height-s);\n color: var(--inverse);\n padding: 0;\n border: none;\n background: transparent;\n}\n\n.metricInput-module-MetricInput-input--large-Xn7eL-4-30-3 {\n line-height: var(--font-height-m);\n font-size: var(--font-size-m);\n}\n\n.metricInput-module-MetricInput-input--regular-lel2M-4-30-3 {\n line-height: var(--font-height);\n font-size: var(--font-size);\n}\n\n.metricInput-module-MetricInput-input--small-U6Uw5-4-30-3 {\n line-height: var(--font-height-s);\n font-size: var(--font-size-s);\n font-weight: var(--font-weight-medium);\n}\n\n.metricInput-module-MetricInput-input-F33lA-4-30-3::-moz-placeholder {\n color: var(--inverse-lighter);\n}\n\n.metricInput-module-MetricInput-input-F33lA-4-30-3::placeholder {\n color: var(--inverse-lighter);\n}\n\n.metricInput-module-MetricInput-input-F33lA-4-30-3:focus {\n outline: 0;\n}\n\n.metricInput-module-MetricInput-input-F33lA-4-30-3:disabled .metricInput-module-MetricInput-input-F33lA-4-30-3::-moz-placeholder {\n color: var(--inverse-lighter);\n}\n\n.metricInput-module-MetricInput-input-F33lA-4-30-3:disabled .metricInput-module-MetricInput-input-F33lA-4-30-3::placeholder {\n color: var(--inverse-lighter);\n}\n\n.metricInput-module-MetricInput-icon--regular-QqKyP-4-30-3 {\n margin-right: var(--spacing-20);\n line-height: var(--font-height-s);\n}\n\n.metricInput-module-MetricInput-icon--large-oSw1r-4-30-3 {\n margin-right: var(--spacing-30);\n line-height: var(--font-height-m);\n}\n\n.metricInput-module-MetricInput-icon--small--U0nf-4-30-3 {\n margin-right: var(--spacing-10);\n}\n\n.metricInput-module-MetricInput-input-F33lA-4-30-3::-webkit-inner-spin-button,\n.metricInput-module-MetricInput-input-F33lA-4-30-3::-webkit-outer-spin-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n margin: 0;\n}\n\n/* Arrow buttons (decrement on left, increment on right) */\n.metricInput-module-MetricInput-arrowButton-ZHqEY-4-30-3 {\n flex-shrink: 0;\n align-self: stretch;\n width: var(--spacing-60);\n background: var(--secondary-light);\n color: var(--inverse);\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n\n.metricInput-module-MetricInput-arrowButton--left-fEP4s-4-30-3 {\n border-right: var(--border);\n border-radius: var(--border-radius-10) 0 0 var(--border-radius-10);\n}\n\n.metricInput-module-MetricInput-arrowButton--right-c54s0-4-30-3 {\n border-left: var(--border);\n border-radius: 0 var(--border-radius-10) var(--border-radius-10) 0;\n}\n\n.metricInput-module-MetricInput-arrowButton-ZHqEY-4-30-3:hover {\n background: var(--secondary);\n}\n\n.metricInput-module-MetricInput-arrowButton-ZHqEY-4-30-3:active {\n background: var(--secondary-dark);\n}\n\n.metricInput-module-MetricInput-arrowButton-ZHqEY-4-30-3:focus {\n outline: 0;\n}\n\n.metricInput-module-MetricInput-arrowButton-ZHqEY-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n@media (forced-colors: active) {\n /* box-shadow is stripped — restore a real border for the wrapper boundary */\n .metricInput-module-MetricInput--0hzO-4-30-3 {\n border: var(--border-width-2-5) solid ButtonText;\n box-shadow: none;\n }\n\n .metricInput-module-MetricInput--disabled-41NDQ-4-30-3 {\n border-color: GrayText;\n }\n\n /* Wrapper focus rings */\n .metricInput-module-MetricInput--0hzO-4-30-3:focus-within:not(:has(.metricInput-module-MetricInput-arrowButton-ZHqEY-4-30-3:focus-visible)) {\n outline: var(--border-width-05) solid Highlight;\n outline-offset: var(--spacing-05);\n }\n\n .metricInput-module-MetricInput--error-FAM-w-4-30-3:focus-within:not(:has(.metricInput-module-MetricInput-arrowButton-ZHqEY-4-30-3:focus-visible)) {\n outline: var(--border-width-05) solid Highlight;\n outline-offset: var(--spacing-05);\n }\n\n /* Arrow button states */\n .metricInput-module-MetricInput-arrowButton-ZHqEY-4-30-3:disabled {\n color: GrayText;\n }\n\n .metricInput-module-MetricInput-arrowButton-ZHqEY-4-30-3:focus-visible {\n outline: var(--border-width-05) solid Highlight;\n outline-offset: var(--spacing-05);\n }\n}\n";
var styles$X = {"MetricInput-input":"metricInput-module-MetricInput-input-F33lA-4-30-3","MetricInput":"metricInput-module-MetricInput--0hzO-4-30-3","MetricInput--regular":"metricInput-module-MetricInput--regular-qwE-W-4-30-3","MetricInput--large":"metricInput-module-MetricInput--large-PHYvQ-4-30-3","MetricInput--small":"metricInput-module-MetricInput--small-73F16-4-30-3","MetricInput-arrowButton":"metricInput-module-MetricInput-arrowButton-ZHqEY-4-30-3","MetricInput-icon":"metricInput-module-MetricInput-icon-xUfPZ-4-30-3","MetricInput--disabled":"metricInput-module-MetricInput--disabled-41NDQ-4-30-3","MetricInput--readOnly":"metricInput-module-MetricInput--readOnly-fVSGN-4-30-3","MetricInput--error":"metricInput-module-MetricInput--error-FAM-w-4-30-3","MetricInput-content":"metricInput-module-MetricInput-content-tI8cI-4-30-3","MetricInput-content--regular":"metricInput-module-MetricInput-content--regular-92X2e-4-30-3","MetricInput-content--large":"metricInput-module-MetricInput-content--large-jTJ08-4-30-3","MetricInput-content--small":"metricInput-module-MetricInput-content--small-YzuJ5-4-30-3","MetricInput-input--large":"metricInput-module-MetricInput-input--large-Xn7eL-4-30-3","MetricInput-input--regular":"metricInput-module-MetricInput-input--regular-lel2M-4-30-3","MetricInput-input--small":"metricInput-module-MetricInput-input--small-U6Uw5-4-30-3","MetricInput-icon--regular":"metricInput-module-MetricInput-icon--regular-QqKyP-4-30-3","MetricInput-icon--large":"metricInput-module-MetricInput-icon--large-oSw1r-4-30-3","MetricInput-icon--small":"metricInput-module-MetricInput-icon--small--U0nf-4-30-3","MetricInput-arrowButton--left":"metricInput-module-MetricInput-arrowButton--left-fEP4s-4-30-3","MetricInput-arrowButton--right":"metricInput-module-MetricInput-arrowButton--right-c54s0-4-30-3"};
styleInject(css_248z$Z);
var css_248z$Y = "/* pagination */\n\n.pagination-module-Pagination-DCmdy-4-30-3 {\n display: flex;\n vertical-align: middle;\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.pagination-module-Pagination-button-bEn7d-4-30-3 {\n padding-left: var(--spacing-20);\n padding-right: var(--spacing-20);\n}\n\n.pagination-module-Pagination-buttonWrapper--hS-F-4-30-3 {\n display: flex;\n flex-direction: row;\n}\n\n.pagination-module-Pagination-pageIndex-bDTfx-4-30-3 {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: var(--spacing-30);\n padding-right: var(--spacing-30);\n}\n\n.pagination-module-Pagination-MetricInput-SPkmy-4-30-3 {\n width: var(--spacing-120);\n margin-right: var(--spacing-20);\n padding-left: var(--spacing-20);\n padding-right: var(--spacing-20);\n}\n\n.pagination-module-Pagination-MetricInput-SPkmy-4-30-3 .pagination-module-MetricInput-input-7icmp-4-30-3 {\n text-align: center;\n}\n.pagination-module-Pagination-MetricInput-SPkmy-4-30-3 .pagination-module-MetricInput-arrowIcons-6jLZm-4-30-3 {\n display: none;\n}\n\n@media (max-width: 575px) {\n .pagination-module-Pagination-pageIndex-bDTfx-4-30-3 {\n order: -1;\n flex-basis: 100%;\n }\n .pagination-module-Pagination-buttonWrapper--hS-F-4-30-3 {\n margin-top: var(--spacing-20);\n width: 50%;\n }\n .pagination-module-Pagination-buttonWrapper--next-5AZZQ-4-30-3 {\n justify-content: flex-start;\n }\n .pagination-module-Pagination-buttonWrapper--previous--r33Z-4-30-3 {\n justify-content: flex-end;\n }\n}\n";
var styles$W = {"Pagination":"pagination-module-Pagination-DCmdy-4-30-3","Pagination-button":"pagination-module-Pagination-button-bEn7d-4-30-3","Pagination-buttonWrapper":"pagination-module-Pagination-buttonWrapper--hS-F-4-30-3","Pagination-pageIndex":"pagination-module-Pagination-pageIndex-bDTfx-4-30-3","Pagination-MetricInput":"pagination-module-Pagination-MetricInput-SPkmy-4-30-3","MetricInput-input":"pagination-module-MetricInput-input-7icmp-4-30-3","MetricInput-arrowIcons":"pagination-module-MetricInput-arrowIcons-6jLZm-4-30-3","Pagination-buttonWrapper--next":"pagination-module-Pagination-buttonWrapper--next-5AZZQ-4-30-3","Pagination-buttonWrapper--previous":"pagination-module-Pagination-buttonWrapper--previous--r33Z-4-30-3"};
styleInject(css_248z$Y);
var _excluded$1g = ["size", "defaultValue", "name", "placeholder", "icon", "prefix", "suffix", "error", "min", "max", "onChange", "onClick", "onBlur", "onFocus", "className", "autoFocus", "disabled", "readOnly", "value", "showActionButton", "onKeyDown", "iconType"];
var sizeMapping$1 = {
small: 14,
regular: 16,
large: 20
};
var actionButtonIconSizeMapping = {
small: 12,
regular: 14,
large: 16
};
var capMin = function capMin() {
var min = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -Infinity;
var value = arguments.length > 1 ? arguments[1] : undefined;
return isNaN(min) || !min && min !== 0 || isNaN(value) || !value && value !== 0 ? value : Math.max(min, value);
};
var capMax = function capMax() {
var max = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : +Infinity;
var value = arguments.length > 1 ? arguments[1] : undefined;
return isNaN(max) || !max && max !== 0 || isNaN(value) || !value && value !== 0 ? value : Math.min(max, value);
};
/**
* ###### MetricInput has two types:
* - [Controlled MetricInput](https://reactjs.org/docs/forms.html#controlled-components)
* - [Uncontrolled MetricInput](https://reactjs.org/docs/uncontrolled-components.html)
*/
var MetricInput = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
var _props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size,
defaultValue = props.defaultValue,
name = props.name,
placeholder = props.placeholder,
icon = props.icon,
prefix = props.prefix,
suffix = props.suffix,
error = props.error,
min = props.min,
max = props.max,
onChange = props.onChange,
onClick = props.onClick,
onBlur = props.onBlur,
onFocus = props.onFocus,
className = props.className,
autoFocus = props.autoFocus,
disabled = props.disabled,
readOnly = props.readOnly,
valueProp = props.value,
_props$showActionButt = props.showActionButton,
showActionButton = _props$showActionButt === void 0 ? true : _props$showActionButt,
onKeyDown = props.onKeyDown,
iconType = props.iconType,
rest = _objectWithoutProperties(props, _excluded$1g);
var ref = React.useRef(null);
var wrapperRef = React.useRef(null);
var isUncontrolled = valueProp === undefined;
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
isFocused = _React$useState2[0],
setIsFocused = _React$useState2[1];
var onWrapperBlur = function onWrapperBlur(e) {
var _wrapperRef$current;
if (!((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(e.relatedTarget))) {
setIsFocused(false);
}
};
var _React$useState3 = React.useState(valueProp || defaultValue),
_React$useState4 = _slicedToArray(_React$useState3, 2),
value = _React$useState4[0],
setValue = _React$useState4[1];
React.useImperativeHandle(forwardedRef, function () {
return ref.current;
});
React.useEffect(function () {
var _ref$current;
if (autoFocus) (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus({
preventScroll: true
});
}, []);
React.useEffect(function () {
if (valueProp !== undefined) {
setValue(valueProp);
}
}, [valueProp]);
var baseProps = extractBaseProps(props);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$X['MetricInput'], true), styles$X["MetricInput--".concat(size)], size), styles$X['MetricInput--disabled'], disabled), styles$X['MetricInput--readOnly'], readOnly), styles$X['MetricInput--error'], error), className);
var contentClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$X['MetricInput-content'], true), styles$X["MetricInput-content--".concat(size)], size));
var inputClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$X['MetricInput-input'], true), styles$W['MetricInput-input'], true), styles$X["MetricInput-input--".concat(size)], size), 'mr-4', !suffix && !showActionButton && size === 'small'), 'mr-5', !suffix && !showActionButton && size === 'regular'), 'mr-6', !suffix && !showActionButton && size === 'large'));
var iconClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$X['MetricInput-icon'], true), styles$X["MetricInput-icon--".concat(size)], size));
var prefixClass = classnames(_defineProperty$1(_defineProperty$1({}, 'mr-4', size === 'regular' || size === 'small'), 'mr-5', size === 'large'));
var suffixClass = classnames(_defineProperty$1(_defineProperty$1({}, 'ml-4 mr-4', size === 'regular' || size === 'small'), 'mx-5', size === 'large'));
var arrowButtonClass = classnames(styles$X['MetricInput-arrowButton'], styles$W['MetricInput-arrowIcons']);
var actionButtonIconSize = actionButtonIconSizeMapping[size];
var onChangeHandler = function onChangeHandler(e) {
if (isUncontrolled) {
setValue(e.target.value);
}
if (onChange) onChange(e);
};
var onArrowClick = function onArrowClick(e, direction) {
var _newValue$toString$sp;
var newValue = Number(value || 0);
var decimalDigits = ((_newValue$toString$sp = newValue.toString().split('.')[1]) === null || _newValue$toString$sp === void 0 ? void 0 : _newValue$toString$sp.length) || 0;
var isValid = direction === 'down' ? min !== undefined && newValue > min || min === undefined : max !== undefined && newValue < max || max === undefined;
if (disabled || readOnly || !isValid) return;
newValue = direction === 'down' ? newValue - 1 : newValue + 1;
newValue = capMax(max, capMin(min, +newValue.toFixed(decimalDigits)));
if (isUncontrolled) setValue(newValue);
if (onChange) {
var syntheticEvent = Object.create(e, {
target: {
value: {
value: newValue
}
}
});
onChange(syntheticEvent);
}
};
var onKeyDownHandler = function onKeyDownHandler(e) {
switch (e.key) {
case 'e':
case 'E':
e.preventDefault();
return;
case 'ArrowDown':
e.preventDefault();
onArrowClick(e, 'down');
return;
case 'ArrowUp':
e.preventDefault();
onArrowClick(e, 'up');
return;
}
};
var handleKeyDown = function handleKeyDown(e) {
if (showActionButton) {
onKeyDownHandler(e);
}
};
var numericValue = Number(value !== null && value !== void 0 ? value : 0);
var isAtMin = min !== undefined && numericValue <= min;
var isAtMax = max !== undefined && numericValue >= max;
return /*#__PURE__*/React.createElement("div", {
ref: wrapperRef,
"data-test": "DesignSystem-MetricInputWrapper",
className: classes,
onKeyDown: onKeyDown,
onFocus: function onFocus() {
return setIsFocused(true);
},
onBlur: onWrapperBlur,
role: "presentation"
}, showActionButton && /*#__PURE__*/React.createElement("button", {
type: "button",
className: "".concat(arrowButtonClass, " ").concat(styles$X['MetricInput-arrowButton--left']),
onClick: function onClick(e) {
return onArrowClick(e, 'down');
},
"aria-label": "Decrement value",
"data-test": "DesignSystem-MetricInput--downIcon",
disabled: disabled || readOnly || isAtMin,
tabIndex: isFocused ? 0 : -1
}, /*#__PURE__*/React.createElement(Icon, {
name: "keyboard_arrow_left",
size: actionButtonIconSize
})), /*#__PURE__*/React.createElement("div", {
className: contentClass
}, icon && /*#__PURE__*/React.createElement(Icon, {
"data-test": "DesignSystem-MetricInput--icon",
name: icon,
type: iconType,
size: sizeMapping$1[size],
appearance: !value ? 'disabled' : 'subtle',
className: iconClass
}), prefix && /*#__PURE__*/React.createElement(Text$1, {
"data-test": "DesignSystem-MetricInput--prefix",
className: prefixClass,
size: size,
appearance: "subtle"
}, prefix), /*#__PURE__*/React.createElement("input", _extends$2({
"data-test": "DesignSystem-MetricInput"
}, baseProps, rest, {
type: "number",
ref: ref,
name: name,
defaultValue: defaultValue,
placeholder: placeholder,
className: inputClass,
value: value,
disabled: disabled,
readOnly: readOnly,
min: min,
max: max,
"aria-invalid": error || undefined,
onChange: onChangeHandler,
onBlur: onBlur,
onClick: onClick,
onFocus: onFocus,
onKeyDown: handleKeyDown
})), suffix && /*#__PURE__*/React.createElement(Text$1, {
"data-test": "DesignSystem-MetricInput--suffix",
className: suffixClass,
size: size,
appearance: "subtle"
}, suffix)), showActionButton && /*#__PURE__*/React.createElement("button", {
type: "button",
className: "".concat(arrowButtonClass, " ").concat(styles$X['MetricInput-arrowButton--right']),
onClick: function onClick(e) {
return onArrowClick(e, 'up');
},
"aria-label": "Increment value",
"data-test": "DesignSystem-MetricInput--upIcon",
disabled: disabled || readOnly || isAtMax,
tabIndex: isFocused ? 0 : -1
}, /*#__PURE__*/React.createElement(Icon, {
name: "keyboard_arrow_right",
size: actionButtonIconSize
})));
});
MetricInput.displayName = 'MetricInput';
var isEditable = function isEditable(mask, pos) {
return _typeof(mask[pos]) === 'object';
};
var getDefaultValue = function getDefaultValue(mask, placeholderChar) {
var val = '';
for (var i = 0; i < mask.length; i++) {
val += isEditable(mask, i) ? placeholderChar : mask[i];
}
return val;
};
var _excluded$1f = ["mask", "value", "placeholderChar", "validators", "clearOnEmptyBlur", "useDefaultValueOnEmpty", "defaultValue", "mask", "error", "caption", "required", "onChange", "onPaste", "onBlur", "onFocus", "onClear", "className", "helpText", "label", "autoComplete", "clearButtonAriaLabel", "aria-describedby", "aria-label", "aria-labelledby"];
/**
* It works as Uncontrolled Input
*
* **Updated value can be passed**
*/
var InputMask = /*#__PURE__*/React.forwardRef(function (props, forwardRef) {
props.mask;
var valueProp = props.value,
_props$placeholderCha = props.placeholderChar,
placeholderChar = _props$placeholderCha === void 0 ? '_' : _props$placeholderCha,
_props$validators = props.validators,
validators = _props$validators === void 0 ? [] : _props$validators,
_props$clearOnEmptyBl = props.clearOnEmptyBlur,
clearOnEmptyBlur = _props$clearOnEmptyBl === void 0 ? true : _props$clearOnEmptyBl,
_props$useDefaultValu = props.useDefaultValueOnEmpty,
useDefaultValueOnEmpty = _props$useDefaultValu === void 0 ? false : _props$useDefaultValu,
defaultValue = props.defaultValue,
mask = props.mask,
error = props.error,
caption = props.caption,
required = props.required,
onChange = props.onChange,
onPaste = props.onPaste,
onBlur = props.onBlur,
onFocus = props.onFocus,
onClear = props.onClear,
className = props.className,
helpText = props.helpText,
label = props.label,
_props$autoComplete = props.autoComplete,
autoComplete = _props$autoComplete === void 0 ? 'off' : _props$autoComplete,
clearButtonAriaLabelProp = props.clearButtonAriaLabel,
ariaDescribedBy = props['aria-describedby'],
ariaLabel = props['aria-label'],
ariaLabelledBy = props['aria-labelledby'],
rest = _objectWithoutProperties(props, _excluded$1f);
// Prefer explicit aria-labelledby, then explicit aria-label, then visual `label`.
// Pull aria-* out of `rest` so an explicit `undefined` from callers cannot wipe the fallback.
// Prefer an explicit clearButtonAriaLabel (localized/product-specific) before generating one.
var resolvedAriaLabelledBy = ariaLabelledBy;
var resolvedAriaLabel = resolvedAriaLabelledBy ? undefined : ariaLabel || label || undefined;
var clearNameSource = label || ariaLabel;
var clearButtonAriaLabel = clearButtonAriaLabelProp || (clearNameSource ? "Clear ".concat(clearNameSource) : undefined);
var helpTextIdRef = React.useRef(null);
if (helpTextIdRef.current === null) {
helpTextIdRef.current = "InputMask-helpText-".concat(uidGenerator());
}
var helpTextId = helpTextIdRef.current;
var isEditable = React.useCallback(function (pos) {
return _typeof(mask[pos]) === 'object';
}, [mask]);
var getNewCursorPosition = React.useCallback(function (type, position) {
if (type === 'right') {
for (var i = position; i < mask.length; i++) {
if (isEditable(i)) return i;
}
return mask.length;
}
if (type === 'left') {
for (var _i = position; _i >= 0; _i--) {
if (isEditable(_i - 1)) return _i;
}
return 0;
}
return position;
}, [mask, isEditable]);
var getDefaultSelection = React.useCallback(function () {
var pos = getNewCursorPosition('right', 0);
return {
start: pos,
end: pos
};
}, [getNewCursorPosition]);
var getPlaceholderValue = React.useCallback(function () {
var start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var end = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : mask.length - 1;
return getDefaultValue(mask, placeholderChar).slice(start, end + 1);
}, [mask, placeholderChar]);
var defaultPlaceholderValue = React.useMemo(function () {
return getPlaceholderValue();
}, [getPlaceholderValue]);
var defaultSelection = React.useMemo(function () {
return getDefaultSelection();
}, [getDefaultSelection]);
var ref = React.useRef(null);
var deferId = React.useRef();
var selectionPos = React.useRef(defaultSelection);
var newSelectionPos = React.useRef(0);
var _React$useState = React.useState(defaultValue || valueProp || ''),
_React$useState2 = _slicedToArray(_React$useState, 2),
value = _React$useState2[0],
setValue = _React$useState2[1];
React.useImperativeHandle(forwardRef, function () {
return ref.current;
});
React.useEffect(function () {
setValue(valueProp || '');
}, [valueProp]);
React.useEffect(function () {
setCursorPosition(newSelectionPos.current);
}, [value]);
var getSelectionLength = React.useCallback(function (val) {
return Math.abs(val.end - val.start);
}, []);
var getCurrSelection = React.useCallback(function () {
var _ref$current, _ref$current2;
return {
start: ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.selectionStart) || 0,
end: ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.selectionEnd) || 0
};
}, [ref.current]);
var setSelectionRange_compatible_types = ['text', 'password', 'tel', 'url'];
var setSelectionPos = React.useCallback(function (pos) {
if (ref.current) {
var el = ref.current;
var start = Math.min(pos.start, pos.end);
var end = Math.max(pos.start, pos.end);
if (setSelectionRange_compatible_types.includes(el.type)) {
el.setSelectionRange(start, end);
} else {
var el_type = el.type;
el.type = 'text';
el.setSelectionRange(start, end);
el.type = el_type;
}
}
}, [ref.current]);
var setCursorPosition = React.useCallback(function (val) {
if (document && document.activeElement === ref.current) {
setSelectionPos({
start: val,
end: val
});
}
}, [setSelectionPos]);
var insertAtIndex = React.useCallback(function (currValue, index) {
var iterator = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
var newValue = '';
var newIndex = index + 1;
var newIterator = iterator;
if (index >= mask.length) {
return newValue;
}
if (iterator >= currValue.length) {
selectionPos.current = {
start: index,
end: index
};
return newValue;
}
var m = mask[index];
if (isEditable(index)) {
if (currValue[iterator].match(m)) {
newValue += currValue[iterator];
} else {
newValue += placeholderChar;
}
newIterator++;
} else {
newValue += m;
}
newValue += insertAtIndex(currValue, newIndex, newIterator);
return newValue;
}, [mask, placeholderChar, isEditable]);
var updateSelection = React.useCallback(function () {
selectionPos.current = getCurrSelection();
deferId.current = window.requestAnimationFrame(updateSelection);
}, [selectionPos.current, getCurrSelection]);
var matchSeparatorValue = function matchSeparatorValue(currValue) {
var separator = props.placeholder || 'dd/mm/yyyy';
if (separator.substring(0, 4) === 'yyyy') {
return currValue && currValue[4] === separator[4] && currValue[7] === separator[7];
}
return currValue && currValue[2] === separator[2] && currValue[5] === separator[5];
};
var isSameFormat = function isSameFormat(currValue, inputLength) {
var value = currValue.substring(0, inputLength);
if (inputLength === 23) {
var date = value.split(' - ');
var startVal = date[0];
var endVal = date[1];
return matchSeparatorValue(startVal) && matchSeparatorValue(endVal);
}
return matchSeparatorValue(value);
};
var onPasteHandler = function onPasteHandler(e) {
var _e$clipboardData;
e.preventDefault();
var pastedValue = (_e$clipboardData = e.clipboardData) === null || _e$clipboardData === void 0 ? void 0 : _e$clipboardData.getData('Text');
var sameFormat = isSameFormat(pastedValue, pastedValue.length);
var isValidDate = isValid(validators, pastedValue);
if (sameFormat && onPaste && isValidDate) {
onPaste(e, pastedValue);
setValue(pastedValue);
}
};
var onChangeHandler = React.useCallback(function (e) {
var _e$currentTarget;
var inputVal = (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.value;
var currSelection = getCurrSelection();
var start = Math.min(selectionPos.current.start, currSelection.start);
var end = currSelection.end;
var cursorPosition = start;
var enteredVal = '';
var updatedVal = '';
var removedLength = 0;
var insertedStringLength = 0;
enteredVal = inputVal.slice(start, end);
updatedVal = insertAtIndex(enteredVal, start);
var oldValue = value;
if (oldValue.length === 0 && useDefaultValueOnEmpty) {
oldValue = defaultPlaceholderValue;
}
insertedStringLength = updatedVal.length;
if (currSelection.end > selectionPos.current.end) {
removedLength = insertedStringLength ? getSelectionLength(selectionPos.current) : 0;
} else if (inputVal.length < oldValue.length) {
removedLength = oldValue.length - inputVal.length;
}
var maskedVal = oldValue.split('');
for (var i = 0; i < insertedStringLength; i++) {
maskedVal[start + i] = updatedVal[i];
}
for (var _i2 = 0; _i2 < removedLength; _i2++) {
var index$1 = start + insertedStringLength + _i2;
maskedVal[index$1] = getPlaceholderValue(index$1, index$1);
}
var enteredValue = maskedVal.slice(0, mask.length).join('');
if (updatedVal !== placeholderChar && updatedVal !== '' && !updatedVal.includes(placeholderChar) && isValid(validators, enteredValue)) {
cursorPosition += insertedStringLength;
}
var newCursorPosition = getNewCursorPosition(removedLength ? 'left' : 'right', cursorPosition);
if (removedLength === 1 && !updatedVal.length && !isEditable(cursorPosition) && newCursorPosition > 0) {
cursorPosition = newCursorPosition;
cursorPosition--;
maskedVal[cursorPosition] = placeholderChar;
} else if (removedLength !== 1) {
cursorPosition = newCursorPosition;
}
var newValue = maskedVal.slice(0, mask.length).join('');
newSelectionPos.current = cursorPosition;
if (newValue !== oldValue && isValid(validators, newValue)) {
if (defaultPlaceholderValue === '__:__ _M') {
setValue(newValue.toUpperCase());
onChange === null || onChange === void 0 || onChange(e, newValue.toUpperCase());
} else {
setValue(newValue);
onChange === null || onChange === void 0 || onChange(e, newValue);
}
} else {
window.requestAnimationFrame(function () {
return setCursorPosition(newSelectionPos.current);
});
}
}, [selectionPos.current, validators, getCurrSelection, insertAtIndex, getSelectionLength, getPlaceholderValue, getNewCursorPosition, isEditable, setCursorPosition, setValue, onChange]);
var onBlurHandler = React.useCallback(function (e) {
var inputVal = e.currentTarget.value;
if (clearOnEmptyBlur) {
if (inputVal === defaultPlaceholderValue) {
setValue('');
inputVal = '';
}
}
onBlur === null || onBlur === void 0 || onBlur(e, inputVal);
if (deferId.current) window.cancelAnimationFrame(deferId.current);
}, [clearOnEmptyBlur, deferId.current, getPlaceholderValue, setValue, onBlur]);
var onClearHandler = React.useCallback(function (e) {
newSelectionPos.current = defaultSelection.start;
setValue(defaultPlaceholderValue);
onClear === null || onClear === void 0 || onClear(e);
}, [setValue, getPlaceholderValue, setCursorPosition, getDefaultSelection, onClear]);
var onFocusHandler = React.useCallback(function (e) {
deferId.current = window.requestAnimationFrame(updateSelection);
if (!value) {
newSelectionPos.current = defaultSelection.start;
setValue(getPlaceholderValue());
}
onFocus === null || onFocus === void 0 || onFocus(e);
}, [deferId.current, value, updateSelection, setValue, setSelectionPos, onFocus]);
var classes = React.useMemo(function () {
return classnames({
'd-flex flex-column flex-grow-1': true
}, className);
}, [className]);
var isValueEqualPlaceholder = value === defaultPlaceholderValue;
var helpMessage = error ? caption : helpText;
var resolvedDescribedBy = [ariaDescribedBy, helpMessage ? helpTextId : undefined].filter(Boolean).join(' ') || undefined;
return /*#__PURE__*/React.createElement("div", {
className: classes,
"data-test": "DesignSystem-InputMask--Wrapper"
}, /*#__PURE__*/React.createElement(Input, _extends$2({}, rest, {
value: value,
error: error,
required: required,
onFocus: onFocusHandler,
onChange: onChangeHandler,
onClear: !isValueEqualPlaceholder ? onClearHandler : undefined,
onBlur: onBlurHandler,
onPaste: onPasteHandler,
autoComplete: autoComplete,
ref: ref,
"aria-label": resolvedAriaLabel,
"aria-labelledby": resolvedAriaLabelledBy,
"aria-describedby": resolvedDescribedBy,
clearButtonAriaLabel: clearButtonAriaLabel
})), /*#__PURE__*/React.createElement(HelpText, {
id: helpTextId,
message: helpMessage,
error: error
}));
});
InputMask.displayName = 'InputMask';
// we are adding a new property which is not present in default interface
// we could have explicitly added the interface above with definition
// but then it would force us to marks utils as optional
// as we cannot add new properties by defining the InputMask
// that would cause user to use `!` everywhere or check for utils
InputMask.utils = {
getDefaultValue: getDefaultValue
};
var X = InputMask;
var css_248z$X = "/* Label */\n.label-module-Label--OmlF-4-30-3 {\n display: inline-flex;\n position: relative;\n}\n.label-module-Label--small-pPJnY-4-30-3 {\n font-size: var(--font-size-s);\n}\n\n.label-module-Label--withInput-RWqFC-4-30-3 {\n margin-bottom: var(--spacing-10);\n}\n\n.label-module-Label--optional-25o6w-4-30-3 {\n align-items: center;\n}\n\n.label-module-Label-text-SI451-4-30-3 {\n line-height: var(--font-height-s);\n font-weight: var(--font-weight-medium);\n word-break: break-word;\n}\n\n.label-module-Label-optionalText-BxJ0x-4-30-3 {\n line-height: var(--font-height-s);\n margin-left: var(--spacing-10);\n}\n\n.label-module-Label-optionalText--small-hQbks-4-30-3 {\n font-size: var(--font-size-s);\n}\n\n.label-module-Label--disabled-06XI--4-30-3 {\n color: var(--text-disabled);\n}\n\n.label-module-Label-srOnly-JMorQ-4-30-3 {\n position: absolute;\n width: var(--spacing-2-5);\n height: var(--spacing-2-5);\n padding: 0;\n margin: calc(-1 * var(--spacing-2-5));\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n.label-module-Label-requiredIndicator-4Cxyi-4-30-3 {\n height: var(--spacing-15);\n width: var(--spacing-15);\n border-radius: var(--border-radius-full);\n background: var(--alert);\n margin-left: var(--spacing-10);\n margin-bottom: var(--spacing-15);\n display: inline-flex;\n}\n";
var styles$V = {"Label":"label-module-Label--OmlF-4-30-3","Label--small":"label-module-Label--small-pPJnY-4-30-3","Label--withInput":"label-module-Label--withInput-RWqFC-4-30-3","Label--optional":"label-module-Label--optional-25o6w-4-30-3","Label-text":"label-module-Label-text-SI451-4-30-3","Label-optionalText":"label-module-Label-optionalText-BxJ0x-4-30-3","Label-optionalText--small":"label-module-Label-optionalText--small-hQbks-4-30-3","Label--disabled":"label-module-Label--disabled-06XI--4-30-3","Label-srOnly":"label-module-Label-srOnly-JMorQ-4-30-3","Label-requiredIndicator":"label-module-Label-requiredIndicator-4Cxyi-4-30-3"};
styleInject(css_248z$X);
var _excluded$1e = ["required", "optional", "withInput", "disabled", "children", "className", "info", "size"];
/**
* *NOTE: Extends props with HTMLProps<HTMLLabelElement>*
*/
var Label = function Label(props) {
var required = props.required,
optional = props.optional,
withInput = props.withInput,
disabled = props.disabled,
children = props.children,
className = props.className,
info = props.info,
_props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size,
rest = _objectWithoutProperties(props, _excluded$1e);
var baseProps = extractBaseProps(props);
var LabelClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$V.Label, true), styles$V['Label--withInput'], withInput), styles$V['Label--optional'], optional), className);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$V['Label-text'], true), styles$V['Label--disabled'], disabled), styles$V['Label--small'], size && size === 'small'));
var OptionalClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$V['Label-optionalText'], true), styles$V['Label-optionalText--small'], size && size === 'small'));
var renderInfo = function renderInfo() {
var isRequired = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
var isOptional = arguments.length > 1 ? arguments[1] : undefined;
if (isRequired) {
var requiredIndicator = classnames(_defineProperty$1(_defineProperty$1({}, styles$V['Label-requiredIndicator'], true), 'mb-3-5 mt-2', size && size === 'small'));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
className: requiredIndicator,
"aria-hidden": "true",
"data-test": "DesignSystem-Label--RequiredIndicator"
}), /*#__PURE__*/React.createElement("span", {
className: styles$V['Label-srOnly']
}, "(required)"));
}
if (isOptional) {
return /*#__PURE__*/React.createElement(Text$1, {
"data-test": "DesignSystem-Label--OptionalText",
appearance: "subtle",
className: OptionalClasses
}, "(optional)");
}
return null;
};
var renderIndicator = function renderIndicator(info) {
var iconClass = classnames({
'ml-3': true,
'cursor-pointer': true,
'd-flex': true,
'align-items-center': true,
'mb-3-5': size && size === 'small'
});
return /*#__PURE__*/React.createElement(Tooltip, {
tooltip: info
}, /*#__PURE__*/React.createElement(Icon, {
"data-test": "DesignSystem-Label--Info",
name: "info",
size: 12,
appearance: "subtle",
"aria-label": info,
className: iconClass
}));
};
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-Label"
}, baseProps, {
className: LabelClass
}), /*#__PURE__*/React.createElement(Link$1, _extends$2({
"data-test": "DesignSystem-Label--Text",
className: classes,
componentType: "label"
}, rest), children, renderInfo(required, optional), info && renderIndicator(info)));
};
Label.displayName = 'Label';
var css_248z$W = "/* Caption */\n.caption-module-Caption-x0-4O-4-30-3 {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n}\n\n.caption-module-Caption--withInput-USihh-4-30-3 {\n margin-top: var(--spacing-10);\n}\n\n.caption-module-Caption-icon-BVGQm-4-30-3 {\n display: flex;\n align-content: center;\n margin-right: var(--spacing-10);\n}\n\n.caption-module-Caption--hidden-C-EcV-4-30-3 {\n display: none;\n}\n";
var styles$U = {"Caption":"caption-module-Caption-x0-4O-4-30-3","Caption--withInput":"caption-module-Caption--withInput-USihh-4-30-3","Caption-icon":"caption-module-Caption-icon-BVGQm-4-30-3","Caption--hidden":"caption-module-Caption--hidden-C-EcV-4-30-3"};
styleInject(css_248z$W);
var _excluded$1d = ["error", "hide", "withInput", "children", "className"];
var Caption = function Caption(props) {
var error = props.error,
hide = props.hide,
withInput = props.withInput,
children = props.children,
className = props.className,
rest = _objectWithoutProperties(props, _excluded$1d);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$U.Caption, true), styles$U['Caption--hidden'], hide), styles$U['Caption--withInput'], withInput), className);
var errorIconClass = classnames(_defineProperty$1({}, styles$U['Caption-icon'], true));
return /*#__PURE__*/React.createElement("div", _extends$2({}, rest, {
className: classes,
"data-test": "DesignSystem-Caption"
}), error && /*#__PURE__*/React.createElement("div", {
className: errorIconClass
}, /*#__PURE__*/React.createElement(Icon, {
size: 14,
name: 'error',
appearance: 'alert'
})), /*#__PURE__*/React.createElement(Text$1, {
appearance: error ? 'destructive' : 'subtle',
size: "small",
weight: "medium"
}, children));
};
Caption.displayName = 'Caption';
var css_248z$V = ".legend-module-Legend--0IVR-4-30-3 {\n display: flex;\n flex-direction: row;\n align-items: center;\n width: -moz-fit-content;\n width: fit-content;\n}\n\n.legend-module-Legend-icon-AAtts-4-30-3 {\n border-radius: var(--border-radius-05);\n margin-right: var(--spacing-20);\n}\n";
var legendStyles = {"Legend":"legend-module-Legend--0IVR-4-30-3","Legend-icon":"legend-module-Legend-icon-AAtts-4-30-3"};
styleInject(css_248z$V);
var Legend = function Legend(props) {
var iconAppearance = props.iconAppearance,
iconSize = props.iconSize,
labelAppearance = props.labelAppearance,
children = props.children,
labelWeight = props.labelWeight,
_onMouseEnter = props.onMouseEnter,
_onMouseLeave = props.onMouseLeave,
_onClick = props.onClick,
className = props.className;
var baseProps = extractBaseProps(props);
var isClickable = Boolean(_onClick);
var handleKeyDown = function handleKeyDown(event) {
if (!isClickable) {
return;
}
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
_onClick === null || _onClick === void 0 || _onClick(event);
}
};
var legendClass = classnames(_defineProperty$1({}, legendStyles['Legend'], true), className);
var styles = {
background: "var(--".concat(iconAppearance, ")"),
height: "".concat(iconSize, "px"),
width: "".concat(iconSize, "px")
};
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
className: legendClass,
role: isClickable ? 'button' : undefined,
tabIndex: isClickable ? 0 : undefined,
onClick: function onClick(e) {
return _onClick && _onClick(e);
},
onKeyDown: handleKeyDown,
onMouseEnter: function onMouseEnter(e) {
return _onMouseEnter && _onMouseEnter(e);
},
onMouseLeave: function onMouseLeave(e) {
return _onMouseLeave && _onMouseLeave(e);
}
}), /*#__PURE__*/React.createElement("span", {
className: legendStyles['Legend-icon'],
style: styles
}), /*#__PURE__*/React.createElement(Text$1, {
appearance: labelAppearance,
weight: labelWeight
}, children));
};
Legend.displayName = 'Legend';
Legend.defaultProps = {
iconAppearance: 'inverse',
iconSize: 16
};
var Editable = function Editable(props) {
var className = props.className,
onChange = props.onChange,
editing = props.editing,
children = props.children;
var baseProps = extractBaseProps(props);
var EditableClass = classnames(_defineProperty$1({}, 'Editable', true), className);
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-Editable"
}, baseProps, {
className: EditableClass
}), /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-EditableWrapper",
onMouseEnter: function onMouseEnter() {
return !editing && onChange('hover');
},
onMouseLeave: function onMouseLeave() {
return !editing && onChange('default');
}
}, children));
};
Editable.displayName = 'Editable';
var css_248z$U = ".editableDropdown-module-EditableDropdown-8s4sE-4-30-3 {\n width: 100%;\n}\n\n.editableDropdown-module-EditableDropdown-8s4sE-4-30-3:focus-visible {\n outline: none;\n}\n\n.editableDropdown-module-EditableDropdown-default-YIYT0-4-30-3 {\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n height: var(--spacing-80);\n padding-left: var(--spacing-30);\n padding-right: var(--spacing-20);\n border-radius: var(--border-radius-10);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n cursor: pointer;\n border: var(--border-width-2-5) solid transparent;\n}\n\n.editableDropdown-module-EditableDropdown-wrapper-5PCzu-4-30-3 {\n width: 100%;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n align-items: center;\n}\n\n.editableDropdown-module-EditableDropdown-text-E-azo-4-30-3 {\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: var(--text);\n font-size: var(--font-size);\n line-height: var(--font-height);\n font-weight: var(--font-weight-normal);\n}\n\n.editableDropdown-module-EditableDropdown-text--subtle-pyRLr-4-30-3 {\n color: var(--text-subtle);\n}\n\n.editableDropdown-module-EditableDropdown-icon-aWCHE-4-30-3 {\n visibility: hidden;\n}\n\n.editableDropdown-module-EditableDropdown-default-YIYT0-4-30-3:hover .editableDropdown-module-EditableDropdown-icon-aWCHE-4-30-3,\n.editableDropdown-module-EditableDropdown-8s4sE-4-30-3:focus-visible .editableDropdown-module-EditableDropdown-icon-aWCHE-4-30-3 {\n visibility: visible;\n}\n\n.editableDropdown-module-EditableDropdown-default-YIYT0-4-30-3:hover {\n background: var(--secondary);\n}\n\n.editableDropdown-module-EditableDropdown-8s4sE-4-30-3:focus-visible .editableDropdown-module-EditableDropdown-default-YIYT0-4-30-3 {\n background: var(--secondary-light);\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n border-radius: var(--border-radius-10);\n}\n";
var styles$T = {"EditableDropdown":"editableDropdown-module-EditableDropdown-8s4sE-4-30-3","EditableDropdown-default":"editableDropdown-module-EditableDropdown-default-YIYT0-4-30-3","EditableDropdown-wrapper":"editableDropdown-module-EditableDropdown-wrapper-5PCzu-4-30-3","EditableDropdown-text":"editableDropdown-module-EditableDropdown-text-E-azo-4-30-3","EditableDropdown-text--subtle":"editableDropdown-module-EditableDropdown-text--subtle-pyRLr-4-30-3","EditableDropdown-icon":"editableDropdown-module-EditableDropdown-icon-aWCHE-4-30-3"};
styleInject(css_248z$U);
var _excluded$1c = ["onChange", "onClose", "disabled", "open", "onPopperToggle"];
var EditableDropdown = function EditableDropdown(props) {
var placeholder = props.placeholder,
dropdownOptions = props.dropdownOptions,
className = props.className,
customTriggerRenderer = props.customTriggerRenderer;
var onDropdownChange = dropdownOptions.onChange,
onDropdownClose = dropdownOptions.onClose,
dropdownDisabled = dropdownOptions.disabled;
dropdownOptions.open;
dropdownOptions.onPopperToggle;
var rest = _objectWithoutProperties(dropdownOptions, _excluded$1c);
var _React$useState = React.useState(placeholder),
_React$useState2 = _slicedToArray(_React$useState, 2),
label = _React$useState2[0],
setLabel = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
editing = _React$useState4[0],
setEditing = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
showComponent = _React$useState6[0],
setShowComponent = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
dropdownOpen = _React$useState8[0],
setDropdownOpen = _React$useState8[1];
var containerRef = React.useRef(null);
var focusDropdownTriggerAfterOpenRef = React.useRef(false);
var CompClass = classnames(_defineProperty$1({}, styles$T['EditableDropdown'], true), className);
var DefaultCompClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$T['EditableDropdown-default'], true), 'd-none', showComponent));
var EditableDropdownClass = classnames(_defineProperty$1({}, 'd-none', !showComponent));
var baseProps = extractBaseProps(props);
var getLabel = function getLabel(updatedLabel) {
setLabel(updatedLabel);
};
var isDropdownDisabled = !!dropdownDisabled;
var onChangeHandler = function onChangeHandler(eventType) {
if (isDropdownDisabled) return;
switch (eventType) {
case 'edit':
setEditing(true);
setShowComponent(true);
setDropdownOpen(true);
break;
case 'hover':
// Do not set showComponent to true on hover to avoid keyboard focus interference
break;
case 'default':
setShowComponent(false);
}
};
var onChange = function onChange(value) {
setEditing(false);
setShowComponent(false);
setDropdownOpen(false);
if (onDropdownChange) onDropdownChange(value);
};
var onClose = function onClose(selected) {
setEditing(false);
setShowComponent(false);
setDropdownOpen(false);
if (onDropdownClose) onDropdownClose(selected);
};
var onPopperToggle = function onPopperToggle(open) {
setDropdownOpen(open);
if (!open) {
setEditing(false);
setShowComponent(false);
}
};
var renderComponent = function renderComponent(componentLabel) {
if (customTriggerRenderer) return customTriggerRenderer(componentLabel);
return componentLabel;
};
React.useEffect(function () {
if (!editing || !dropdownOpen || isDropdownDisabled || !focusDropdownTriggerAfterOpenRef.current) return;
var frame = requestAnimationFrame(function () {
var _containerRef$current;
focusDropdownTriggerAfterOpenRef.current = false;
var trigger = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector('[data-test="DesignSystem-DropdownTrigger"]');
trigger === null || trigger === void 0 || trigger.focus();
});
return function () {
return cancelAnimationFrame(frame);
};
}, [editing, dropdownOpen, isDropdownDisabled]);
var displayText = label || placeholder;
var textClass = classnames(styles$T['EditableDropdown-text'], _defineProperty$1({}, styles$T['EditableDropdown-text--subtle'], !label));
var handleKeyDown = function handleKeyDown(event) {
if (isDropdownDisabled) return;
if (!editing && (event.key === 'Enter' || isSpaceKey(event))) {
if (event.currentTarget !== event.target) return;
event.preventDefault();
if (event.repeat) return;
focusDropdownTriggerAfterOpenRef.current = true;
onChangeHandler('edit');
}
};
var handleClick = function handleClick() {
if (isDropdownDisabled || editing) return;
focusDropdownTriggerAfterOpenRef.current = true;
onChangeHandler('edit');
};
var ariaLabel = props['aria-label'];
var computedAriaLabel = ariaLabel || (label ? "Click to edit. Current selection: ".concat(label) : "Click to edit. ".concat(placeholder));
var labelContent = renderComponent(displayText);
return /*#__PURE__*/React.createElement("div", _extends$2({
ref: containerRef,
"data-test": "DesignSystem-EditableDropdown"
}, baseProps, {
className: CompClass,
onKeyDown: handleKeyDown,
onClick: handleClick,
role: editing ? undefined : 'button',
tabIndex: isDropdownDisabled ? -1 : editing ? -1 : 0,
"aria-disabled": isDropdownDisabled || undefined,
"aria-label": computedAriaLabel
}), /*#__PURE__*/React.createElement(Editable, {
onChange: onChangeHandler,
editing: editing
}, /*#__PURE__*/React.createElement(Dropdown, _extends$2({}, rest, {
placeholder: placeholder,
onChange: onChange,
getLabel: getLabel,
onClose: onClose,
"aria-hidden": !showComponent ? true : undefined,
inert: !showComponent ? '' : undefined,
open: dropdownOpen,
onPopperToggle: onPopperToggle,
disabled: isDropdownDisabled,
className: EditableDropdownClass,
"data-test": "DesignSystem-EditableDropdown--Dropdown"
})), /*#__PURE__*/React.createElement("div", {
className: DefaultCompClass,
"data-test": "DesignSystem-EditableDropdown--Default"
}, customTriggerRenderer ? labelContent : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: styles$T['EditableDropdown-wrapper']
}, /*#__PURE__*/React.createElement("span", {
className: textClass
}, labelContent)), /*#__PURE__*/React.createElement(Icon, {
appearance: "default",
name: "keyboard_arrow_down",
className: styles$T['EditableDropdown-icon']
})))));
};
EditableDropdown.defaultProps = {
placeholder: '',
dropdownOptions: {}
};
var css_248z$T = ".link-module-Link-MwjNx-4-30-3 {\n text-decoration: none;\n font-weight: var(--font-weight-medium);\n transition: color var(--duration--fast-01) var(--standard-productive-curve),\n border-color var(--duration--fast-01) var(--standard-productive-curve);\n box-sizing: border-box;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .link-module-Link-MwjNx-4-30-3 {\n transition: none;\n }\n}\n\n.link-module-Link-text-Gpzgr-4-30-3 {\n display: inline-flex;\n vertical-align: middle;\n border-bottom: var(--border-width-2-5) solid currentColor;\n}\n\n.link-module-Link-MwjNx-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n border-radius: var(--border-radius-10);\n}\n\n.link-module-Link--regular-hKQMh-4-30-3 {\n font-size: var(--font-size);\n height: var(--font-height);\n}\n\n.link-module-Link--tiny-5Wp1N-4-30-3 {\n font-size: var(--font-size-s);\n height: var(--font-height-s);\n line-height: var(--font-height-s);\n}\n\n.link-module-Link--default-dCI0C-4-30-3 {\n color: var(--text-link);\n}\n\n.link-module-Link--subtle-RjZLu-4-30-3 {\n color: var(--inverse-lighter);\n border-bottom-color: transparent;\n}\n\n.link-module-Link-text--subtle-bd8ev-4-30-3 {\n border-bottom-color: transparent;\n}\n\n.link-module-Link--default-dCI0C-4-30-3:hover {\n color: var(--primary-dark);\n}\n\n.link-module-Link--subtle-RjZLu-4-30-3:hover {\n color: var(--inverse-light);\n}\n\n.link-module-Link--subtle-RjZLu-4-30-3:hover .link-module-Link-text--subtle-bd8ev-4-30-3 {\n border-bottom-color: currentColor;\n}\n\n.link-module-Link--default-dCI0C-4-30-3:active {\n color: var(--primary-darker);\n}\n\n.link-module-Link--subtle-RjZLu-4-30-3:active {\n color: var(--inverse);\n}\n\n.link-module-Link--subtle-RjZLu-4-30-3:active .link-module-Link-text--subtle-bd8ev-4-30-3 {\n border-bottom-color: transparent;\n}\n\n.link-module-Link--button-reset-GZzET-4-30-3 {\n background: none;\n border-top: none;\n border-left: none;\n border-right: none;\n padding: 0;\n cursor: pointer;\n font-family: inherit;\n}\n\n.link-module-Link--default-disabled-4AGTL-4-30-3 {\n color: var(--primary-lighter);\n pointer-events: none;\n}\n\n.link-module-Link--subtle-disabled-jeH3g-4-30-3 {\n color: var(--inverse-lightest);\n pointer-events: none;\n}\n\n.link-module-Link-infoIconWrapper-i3NjW-4-30-3 {\n display: inline-flex;\n vertical-align: middle;\n transform: translateY(calc(-1 * var(--spacing-15)));\n margin-left: var(--spacing-2-5);\n width: var(--spacing-30);\n height: var(--spacing-30);\n box-sizing: border-box;\n border-radius: var(--border-radius-full);\n align-items: center;\n justify-content: center;\n background: transparent;\n border: none;\n}\n\n.link-module-Link-infoIcon-nCtZE-4-30-3 {\n color: var(--text-subtle);\n pointer-events: none;\n}\n\n.link-module-Link-infoIcon--default--CPoD-4-30-3 {\n color: var(--primary);\n}\n\n.link-module-Link-infoIcon--subtle-PIigh-4-30-3 {\n color: var(--inverse-light);\n}\n\n.link-module-Link-tooltip--disabled--LfHb-4-30-3 {\n pointer-events: auto;\n cursor: not-allowed;\n}\n";
var styles$S = {"Link":"link-module-Link-MwjNx-4-30-3","Link-text":"link-module-Link-text-Gpzgr-4-30-3","Link--regular":"link-module-Link--regular-hKQMh-4-30-3","Link--tiny":"link-module-Link--tiny-5Wp1N-4-30-3","Link--default":"link-module-Link--default-dCI0C-4-30-3","Link--subtle":"link-module-Link--subtle-RjZLu-4-30-3","Link-text--subtle":"link-module-Link-text--subtle-bd8ev-4-30-3","Link--button-reset":"link-module-Link--button-reset-GZzET-4-30-3","Link--default-disabled":"link-module-Link--default-disabled-4AGTL-4-30-3","Link--subtle-disabled":"link-module-Link--subtle-disabled-jeH3g-4-30-3","Link-infoIconWrapper":"link-module-Link-infoIconWrapper-i3NjW-4-30-3","Link-infoIcon":"link-module-Link-infoIcon-nCtZE-4-30-3","Link-infoIcon--default":"link-module-Link-infoIcon--default--CPoD-4-30-3","Link-infoIcon--subtle":"link-module-Link-infoIcon--subtle-PIigh-4-30-3","Link-tooltip--disabled":"link-module-Link-tooltip--disabled--LfHb-4-30-3"};
styleInject(css_248z$T);
var _excluded$1b = ["children", "className", "appearance", "size", "disabled", "href", "target", "rel", "download", "hreflang", "onClick", "tooltip", "onKeyDown"];
/**
*
* The choice to use the appearance `subtle` property for the **Link** component, while using the `subtle` boolean prop for the **LinkButton** component, is based on the different roles of typography and action components.
* - The **Link** component is primarily a typography element. Typography components use the "appearance" property to define their visual style, ensuring consistency and predictability when styling text-based elements.
* - In contrast, the **LinkButton** component is an action component. Action components use "boolean props" to indicate variations in their behavior and appearance. Therefore, the **LinkButton** uses the `subtle` boolean prop to signify a specific visual style that aligns with other button components.
*/
var LinkElement = function LinkElement(props) {
var children = props.children,
className = props.className,
appearance = props.appearance,
size = props.size,
disabled = props.disabled,
href = props.href,
target = props.target,
rel = props.rel,
download = props.download,
hreflang = props.hreflang,
onClick = props.onClick,
tooltip = props.tooltip,
onKeyDown = props.onKeyDown,
rest = _objectWithoutProperties(props, _excluded$1b);
var isAnchor = !!href;
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$S.Link, true), styles$S["Link--".concat(size)], size), styles$S["Link--".concat(appearance)], appearance && !disabled), styles$S["Link--".concat(appearance, "-disabled")], disabled), styles$S['Link-tooltip--disabled'], disabled && !!tooltip), styles$S['Link--button-reset'], !isAnchor), className);
var elementProps = isAnchor ? {
componentType: 'a',
href: disabled ? undefined : href,
target: target,
rel: rel,
download: download,
hreflang: hreflang
} : {
componentType: 'button',
type: 'button',
disabled: tooltip ? undefined : disabled
};
var handleKeyDown = function handleKeyDown(event) {
if (disabled && (event.key === 'Enter' || isSpaceKey(event))) {
event.preventDefault();
event.stopPropagation();
}
onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
};
var handleClick = function handleClick(event) {
if (disabled) {
event.preventDefault();
event.stopPropagation();
return;
}
onClick === null || onClick === void 0 || onClick(event);
};
var showInfoAffordance = disabled && tooltip;
var infoIconClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$S['Link-infoIcon'], true), styles$S['Link-infoIcon--default'], appearance === 'default'), styles$S['Link-infoIcon--subtle'], appearance === 'subtle'));
var textClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$S['Link-text'], true), styles$S['Link-text--default'], appearance === 'default'), styles$S['Link-text--subtle'], appearance === 'subtle'));
return /*#__PURE__*/React.createElement(Link$1, _extends$2({
"data-test": "DesignSystem-Link",
className: classes,
tabIndex: disabled && !tooltip ? -1 : 0,
"aria-disabled": disabled,
onClick: handleClick,
onKeyDown: handleKeyDown
}, elementProps, rest), /*#__PURE__*/React.createElement("span", {
className: textClass
}, children), showInfoAffordance && /*#__PURE__*/React.createElement("span", {
className: styles$S['Link-infoIconWrapper']
}, /*#__PURE__*/React.createElement(Icon, {
name: "info_outline",
type: "outlined",
size: 12,
className: infoIconClass,
"aria-hidden": "true",
"data-test": "DesignSystem-Link--Info-Icon"
})));
};
var Link = function Link(props) {
var tooltip = props.tooltip;
return tooltip ? /*#__PURE__*/React.createElement(Tooltip, {
tooltip: tooltip,
triggerClass: "flex-grow-0",
wrapperElement: "span"
}, /*#__PURE__*/React.createElement(LinkElement, props)) : /*#__PURE__*/React.createElement(LinkElement, props);
};
Link.displayName = 'Link';
Link.defaultProps = {
appearance: 'default',
size: 'regular',
disabled: false
};
var css_248z$S = ".message-module-Message-5m7p--4-30-3 {\n display: flex;\n flex-direction: row;\n overflow: hidden;\n padding: var(--spacing-30) var(--spacing-60) var(--spacing-30) var(--spacing-40);\n border: var(--border-width-2-5) solid;\n width: 100%;\n border-radius: var(--border-radius-10);\n box-sizing: border-box;\n}\n\n.message-module-Message--small-AOGUY-4-30-3 {\n padding: var(--spacing-20);\n}\n\n.message-module-Message--alert-VltpF-4-30-3 {\n border-color: var(--alert);\n background-color: rgba(189, 28, 0, 0.04);\n}\n\n.message-module-Message--success-8AZFe-4-30-3 {\n border-color: var(--success);\n background-color: rgba(0, 128, 0, 0.04);\n}\n\n.message-module-Message--info-N9C6k-4-30-3 {\n border-color: var(--primary);\n background-color: rgba(0, 96, 214, 0.04);\n}\n\n.message-module-Message--warning-sPwHB-4-30-3 {\n border-color: var(--accent1);\n background-color: rgba(189, 91, 0, 0.04);\n}\n\n.message-module-Message-icon--regular-t4xyh-4-30-3 {\n margin-right: var(--spacing-40);\n padding-top: var(--spacing-05);\n}\n\n.message-module-Message-icon--small-mS-r9-4-30-3 {\n margin-right: var(--spacing-20);\n padding-top: var(--spacing-05) !important;\n}\n\n.message-module-Message-icon--withTitle-l6DPU-4-30-3 {\n padding-top: var(--spacing-10);\n}\n\n.message-module-Message-icon--warning-IglaC-4-30-3 {\n color: var(--accent1);\n}\n\n.message-module-Message-heading--regular-TF8fn-4-30-3 {\n margin-bottom: var(--spacing-10);\n}\n\n.message-module-Message-heading--small-f4Ij3-4-30-3 {\n font-size: var(--font-size);\n line-height: var(--font-height);\n margin-bottom: var(--spacing-05);\n}\n\n.message-module-Message-text--small-dsMhm-4-30-3 {\n font-size: var(--font-size-s);\n line-height: var(--font-height-s);\n font-weight: var(--font-weight-medium);\n}\n\n.message-module-Message-heading--alert--cn2r-4-30-3,\n.message-module-Message-text--alert-a8T-5-4-30-3 {\n color: var(--alert-darker) !important;\n}\n\n.message-module-Message-heading--info--Uzim-4-30-3,\n.message-module-Message-text--info-94pB0-4-30-3 {\n color: var(--primary-darker) !important;\n}\n\n.message-module-Message-heading--success-qk8Ep-4-30-3,\n.message-module-Message-text--success-hlaXA-4-30-3 {\n color: var(--success-darker) !important;\n}\n\n.message-module-Message-heading--warning-OWfuJ-4-30-3,\n.message-module-Message-text--warning-tPSB8-4-30-3 {\n color: var(--accent1-darker) !important;\n}\n\n.message-module-Message-actions-5bFUf-4-30-3 {\n display: flex;\n align-items: center;\n}\n\n.message-module-Message-actions--regular-04ICc-4-30-3 {\n margin-top: var(--spacing-30);\n}\n\n.message-module-Message-actions--small-Hj3w0-4-30-3 {\n margin-top: var(--spacing-10);\n}\n";
var styles$R = {"Message":"message-module-Message-5m7p--4-30-3","Message--small":"message-module-Message--small-AOGUY-4-30-3","Message--alert":"message-module-Message--alert-VltpF-4-30-3","Message--success":"message-module-Message--success-8AZFe-4-30-3","Message--info":"message-module-Message--info-N9C6k-4-30-3","Message--warning":"message-module-Message--warning-sPwHB-4-30-3","Message-icon--regular":"message-module-Message-icon--regular-t4xyh-4-30-3","Message-icon--small":"message-module-Message-icon--small-mS-r9-4-30-3","Message-icon--withTitle":"message-module-Message-icon--withTitle-l6DPU-4-30-3","Message-icon--warning":"message-module-Message-icon--warning-IglaC-4-30-3","Message-heading--regular":"message-module-Message-heading--regular-TF8fn-4-30-3","Message-heading--small":"message-module-Message-heading--small-f4Ij3-4-30-3","Message-text--small":"message-module-Message-text--small-dsMhm-4-30-3","Message-heading--alert":"message-module-Message-heading--alert--cn2r-4-30-3","Message-text--alert":"message-module-Message-text--alert-a8T-5-4-30-3","Message-heading--info":"message-module-Message-heading--info--Uzim-4-30-3","Message-text--info":"message-module-Message-text--info-94pB0-4-30-3","Message-heading--success":"message-module-Message-heading--success-qk8Ep-4-30-3","Message-text--success":"message-module-Message-text--success-hlaXA-4-30-3","Message-heading--warning":"message-module-Message-heading--warning-OWfuJ-4-30-3","Message-text--warning":"message-module-Message-text--warning-tPSB8-4-30-3","Message-actions":"message-module-Message-actions-5bFUf-4-30-3","Message-actions--regular":"message-module-Message-actions--regular-04ICc-4-30-3","Message-actions--small":"message-module-Message-actions--small-Hj3w0-4-30-3"};
styleInject(css_248z$S);
var IconMapping$2 = {
success: 'check_circle',
info: 'info',
warning: 'warning',
alert: 'error'
};
var Message = function Message(props) {
var actions = props.actions,
title = props.title,
className = props.className,
_props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size,
id = props.id,
_props$headingAs = props.headingAs,
headingAs = _props$headingAs === void 0 ? 'h5' : _props$headingAs;
var appearance = props.appearance;
appearance = appearance === 'default' ? 'info' : appearance;
var baseProps = extractBaseProps(props);
var MessageClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$R['Message'], true), styles$R["Message--".concat(appearance)], appearance), styles$R["Message--".concat(size)], size && size === 'small'), className);
var IconClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$R["Message-icon--".concat(appearance)], appearance), styles$R["Message-icon--".concat(size)], size), styles$R['Message-icon--withTitle'], title));
var TitleClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$R["Message-heading--".concat(appearance)], appearance), styles$R["Message-heading--".concat(size)], size));
var DescriptionClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$R["Message-text--".concat(appearance)], appearance), styles$R["Message-text--".concat(size)], size));
var ActionsClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$R['Message-actions'], true), styles$R["Message-actions--".concat(size)], size));
var renderDescription = function renderDescription(description, children) {
if (description || typeof children === 'string') {
return /*#__PURE__*/React.createElement(Text$1, {
"data-test": "DesignSystem-Message--Description",
className: DescriptionClass
}, description || (typeof children === 'string' ? children : ''));
}
if (children) {
return /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-Message--Description",
className: styles$R['Message-description']
}, children);
}
return null;
};
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-Message",
role: appearance === 'alert' || appearance === 'warning' ? 'alert' : 'status'
}, baseProps, {
id: id,
className: MessageClass
}), /*#__PURE__*/React.createElement(Icon, {
"data-test": "DesignSystem-Message--Icon",
"aria-hidden": "true",
name: IconMapping$2[appearance],
size: size === 'small' ? 14 : 16,
appearance: appearance,
className: IconClass
}), /*#__PURE__*/React.createElement("div", null, title && /*#__PURE__*/React.createElement(Heading, {
"data-test": "DesignSystem-Message--Title",
size: "s",
className: TitleClass,
as: headingAs
}, title), renderDescription(props.description, props.children), actions && /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-Message--actions",
className: ActionsClass
}, actions)));
};
Message.displayName = 'Message';
Message.defaultProps = {
appearance: 'info',
description: ''
};
var css_248z$R = ".metaList-module-Meta-dNPqh-4-30-3 {\n display: flex;\n flex-direction: row;\n align-items: center;\n width: -moz-fit-content;\n width: fit-content;\n font-size: var(--font-size);\n}\n\n.metaList-module-MetaList-seperator-mjgNU-4-30-3 {\n margin-left: var(--spacing-20);\n}\n.metaList-module-MetaList-seperator--left-eKtN8-4-30-3 {\n margin-right: var(--spacing-10);\n}\n.metaList-module-Meta-icon-JwRHR-4-30-3 {\n padding-right: var(--spacing-10);\n display: flex;\n align-items: center;\n}\n.metaList-module-MetaList-rB1dP-4-30-3 {\n display: flex;\n flex-direction: row;\n align-items: center;\n width: -moz-fit-content;\n width: fit-content;\n font-size: var(--font-size);\n}\n.metaList-module-MetaList-item-S2e6p-4-30-3 {\n margin: 0 var(--spacing-10);\n display: flex;\n flex-direction: row;\n align-items: center;\n width: -moz-fit-content;\n width: fit-content;\n font-size: var(--font-size);\n}\n\n.metaList-module-MetaList-item-S2e6p-4-30-3:first-child {\n margin-left: 0;\n}\n\n.metaList-module-MetaList-item-S2e6p-4-30-3:last-child {\n margin-right: 0;\n}\n";
var styles$Q = {"Meta":"metaList-module-Meta-dNPqh-4-30-3","MetaList-seperator":"metaList-module-MetaList-seperator-mjgNU-4-30-3","MetaList-seperator--left":"metaList-module-MetaList-seperator--left-eKtN8-4-30-3","Meta-icon":"metaList-module-Meta-icon-JwRHR-4-30-3","MetaList":"metaList-module-MetaList-rB1dP-4-30-3","MetaList-item":"metaList-module-MetaList-item-S2e6p-4-30-3"};
styleInject(css_248z$R);
var Meta = function Meta(props) {
var label = props.label,
icon = props.icon,
size = props.size,
iconType = props.iconType;
return /*#__PURE__*/React.createElement("span", {
"data-test": "DesignSystem-MetaList--Meta",
className: styles$Q['Meta']
}, icon && /*#__PURE__*/React.createElement(Icon, {
"data-test": "DesignSystem-MetaList--MetaIcon",
name: icon,
appearance: "subtle",
className: styles$Q['Meta-icon'],
type: iconType,
size: size === 'regular' ? 16 : 12
}), /*#__PURE__*/React.createElement(Text$1, {
size: size,
"data-test": "DesignSystem-MetaList--MetaLabel",
appearance: "subtle"
}, label));
};
Meta.displayName = 'Meta';
var MetaList = function MetaList(props) {
var list = props.list,
seperator = props.seperator,
className = props.className,
size = props.size;
var baseProps = extractBaseProps(props);
var MetaClass = classnames(_defineProperty$1({}, styles$Q['MetaList'], true), className);
var SeperatorClass = classnames(_defineProperty$1({}, styles$Q['MetaList-seperator'], true));
var LeftSeperatorClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$Q['MetaList-seperator'], true), styles$Q['MetaList-seperator--left'], true));
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-MetaList"
}, baseProps, {
className: MetaClass
}), seperator && /*#__PURE__*/React.createElement(Icon, {
"data-test": "DesignSystem-MetaList--Seperator",
name: "fiber_manual_record",
size: 8,
className: LeftSeperatorClass,
appearance: "disabled",
"aria-hidden": "true"
}), list.map(function (item, ind) {
var _item$label = item.label,
label = _item$label === void 0 ? '' : _item$label,
icon = item.icon,
iconType = item.iconType;
var rightSeperator = ind !== list.length - 1;
return /*#__PURE__*/React.createElement("span", {
key: ind,
className: styles$Q['MetaList-item']
}, /*#__PURE__*/React.createElement(Meta, {
size: size,
label: label,
icon: icon,
iconType: iconType
}), rightSeperator && /*#__PURE__*/React.createElement(Icon, {
"data-test": "DesignSystem-MetaList--rightSeperator",
name: "fiber_manual_record",
size: 8,
className: SeperatorClass,
appearance: "disabled",
"aria-hidden": "true"
}));
}));
};
MetaList.displayName = 'MetaList';
MetaList.defaultProps = {
seperatorAppearance: 'disabled',
iconAppearance: 'subtle',
labelAppearance: 'subtle',
size: 'regular'
};
var css_248z$Q = "/* MdsGrid */\n.mdsGrid-module-MdsGrid-SsvW3-4-30-3 {\n display: grid;\n box-sizing: border-box;\n width: 100%;\n}\n\n/* Gap variations */\n.mdsGrid-module-MdsGrid-gap--spacing-10-mM7LL-4-30-3 {\n gap: var(--spacing-10);\n}\n\n.mdsGrid-module-MdsGrid-gap--spacing-20-hF7Az-4-30-3 {\n gap: var(--spacing-20);\n}\n\n.mdsGrid-module-MdsGrid-gap--spacing-30-9bsWk-4-30-3 {\n gap: var(--spacing-30);\n}\n\n.mdsGrid-module-MdsGrid-gap--spacing-40-1Zofh-4-30-3 {\n gap: var(--spacing-40);\n}\n\n.mdsGrid-module-MdsGrid-gap--spacing-60-NuzpU-4-30-3 {\n gap: var(--spacing-60);\n}\n\n.mdsGrid-module-MdsGrid-gap--spacing-80-rBc5a-4-30-3 {\n gap: var(--spacing-80);\n}\n\n.mdsGrid-module-MdsGrid-gap--spacing-120-MsDGS-4-30-3 {\n gap: var(--spacing-120);\n}\n\n.mdsGrid-module-MdsGrid-gap--spacing-160-NT7nM-4-30-3 {\n gap: var(--spacing-160);\n}\n\n/* Column gap variations */\n.mdsGrid-module-MdsGrid-columnGap--spacing-10-KEZs4-4-30-3 {\n -moz-column-gap: var(--spacing-10);\n column-gap: var(--spacing-10);\n}\n\n.mdsGrid-module-MdsGrid-columnGap--spacing-20-Z6HMd-4-30-3 {\n -moz-column-gap: var(--spacing-20);\n column-gap: var(--spacing-20);\n}\n\n.mdsGrid-module-MdsGrid-columnGap--spacing-30-cIs-1-4-30-3 {\n -moz-column-gap: var(--spacing-30);\n column-gap: var(--spacing-30);\n}\n\n.mdsGrid-module-MdsGrid-columnGap--spacing-40-4KGum-4-30-3 {\n -moz-column-gap: var(--spacing-40);\n column-gap: var(--spacing-40);\n}\n\n.mdsGrid-module-MdsGrid-columnGap--spacing-60-Db1Bo-4-30-3 {\n -moz-column-gap: var(--spacing-60);\n column-gap: var(--spacing-60);\n}\n\n.mdsGrid-module-MdsGrid-columnGap--spacing-80-8dYNY-4-30-3 {\n -moz-column-gap: var(--spacing-80);\n column-gap: var(--spacing-80);\n}\n\n.mdsGrid-module-MdsGrid-columnGap--spacing-120-IiWsq-4-30-3 {\n -moz-column-gap: var(--spacing-120);\n column-gap: var(--spacing-120);\n}\n\n.mdsGrid-module-MdsGrid-columnGap--spacing-160-xLma--4-30-3 {\n -moz-column-gap: var(--spacing-160);\n column-gap: var(--spacing-160);\n}\n\n/* Row gap variations */\n.mdsGrid-module-MdsGrid-rowGap--spacing-10-n84Bk-4-30-3 {\n row-gap: var(--spacing-10);\n}\n\n.mdsGrid-module-MdsGrid-rowGap--spacing-20-HJszq-4-30-3 {\n row-gap: var(--spacing-20);\n}\n\n.mdsGrid-module-MdsGrid-rowGap--spacing-30-vJ-5p-4-30-3 {\n row-gap: var(--spacing-30);\n}\n\n.mdsGrid-module-MdsGrid-rowGap--spacing-40-uKyUe-4-30-3 {\n row-gap: var(--spacing-40);\n}\n\n.mdsGrid-module-MdsGrid-rowGap--spacing-60-fl0Ia-4-30-3 {\n row-gap: var(--spacing-60);\n}\n\n.mdsGrid-module-MdsGrid-rowGap--spacing-80-vx3sD-4-30-3 {\n row-gap: var(--spacing-80);\n}\n\n.mdsGrid-module-MdsGrid-rowGap--spacing-120-s4V9U-4-30-3 {\n row-gap: var(--spacing-120);\n}\n\n.mdsGrid-module-MdsGrid-rowGap--spacing-160-EdiFo-4-30-3 {\n row-gap: var(--spacing-160);\n}\n\n/* Justify items variations */\n.mdsGrid-module-MdsGrid-justifyItems--start-eHRaj-4-30-3 {\n justify-items: start;\n}\n\n.mdsGrid-module-MdsGrid-justifyItems--end-edjoX-4-30-3 {\n justify-items: end;\n}\n\n.mdsGrid-module-MdsGrid-justifyItems--center-2X7nZ-4-30-3 {\n justify-items: center;\n}\n\n.mdsGrid-module-MdsGrid-justifyItems--stretch-kn94P-4-30-3 {\n justify-items: stretch;\n}\n\n/* Align items variations */\n.mdsGrid-module-MdsGrid-alignItems--start-2Do86-4-30-3 {\n align-items: start;\n}\n\n.mdsGrid-module-MdsGrid-alignItems--end-waknT-4-30-3 {\n align-items: end;\n}\n\n.mdsGrid-module-MdsGrid-alignItems--center-yx4U8-4-30-3 {\n align-items: center;\n}\n\n.mdsGrid-module-MdsGrid-alignItems--stretch-Bqs-w-4-30-3 {\n align-items: stretch;\n}\n\n/* Auto flow variations */\n.mdsGrid-module-MdsGrid-autoFlow--row-hbgrw-4-30-3 {\n grid-auto-flow: row;\n}\n\n.mdsGrid-module-MdsGrid-autoFlow--column-rqFc3-4-30-3 {\n grid-auto-flow: column;\n}\n\n.mdsGrid-module-MdsGrid-autoFlow--row--dense-lbfql-4-30-3 {\n grid-auto-flow: row dense;\n}\n\n.mdsGrid-module-MdsGrid-autoFlow--column--dense-bJ3Pc-4-30-3 {\n grid-auto-flow: column dense;\n}\n\n/* Template columns variations */\n.mdsGrid-module-MdsGrid-templateColumns--repeat--1----1fr---LXjWZ-4-30-3 {\n grid-template-columns: repeat(1, 1fr);\n}\n\n.mdsGrid-module-MdsGrid-templateColumns--repeat--2----1fr---Ib92--4-30-3 {\n grid-template-columns: repeat(2, 1fr);\n}\n\n.mdsGrid-module-MdsGrid-templateColumns--repeat--3----1fr---kX-cN-4-30-3 {\n grid-template-columns: repeat(3, 1fr);\n}\n\n.mdsGrid-module-MdsGrid-templateColumns--repeat--4----1fr---A8VSk-4-30-3 {\n grid-template-columns: repeat(4, 1fr);\n}\n\n.mdsGrid-module-MdsGrid-templateColumns--repeat--12----1fr---vSCpW-4-30-3 {\n grid-template-columns: repeat(12, 1fr);\n}\n\n.mdsGrid-module-MdsGrid-templateColumns--1fr--1fr--1fr-bvXnM-4-30-3 {\n grid-template-columns: 1fr 1fr 1fr;\n}\n\n.mdsGrid-module-MdsGrid-templateColumns--1fr--2fr-SG4cB-4-30-3 {\n grid-template-columns: 1fr 2fr;\n}\n\n.mdsGrid-module-MdsGrid-templateColumns--2fr--1fr-doRYF-4-30-3 {\n grid-template-columns: 2fr 1fr;\n}\n\n.mdsGrid-module-MdsGrid-templateColumns--2fr--1fr--1fr-PlTNP-4-30-3 {\n grid-template-columns: 2fr 1fr 1fr;\n}\n\n.mdsGrid-module-MdsGrid-templateColumns--200px--1fr--2fr-vKcqN-4-30-3 {\n grid-template-columns: 200px 1fr 2fr;\n}\n\n/* Template rows variations */\n.mdsGrid-module-MdsGrid-templateRows--auto--auto--auto-Xqtrn-4-30-3 {\n grid-template-rows: auto auto auto;\n}\n\n.mdsGrid-module-MdsGrid-templateRows--100px--200px-3Vgry-4-30-3 {\n grid-template-rows: 100px 200px;\n}\n\n.mdsGrid-module-MdsGrid-templateRows--1fr--2fr-Tix---4-30-3 {\n grid-template-rows: 1fr 2fr;\n}\n\n.mdsGrid-module-MdsGrid-templateRows--auto--1fr-zwVSp-4-30-3 {\n grid-template-rows: auto 1fr;\n}\n\n/* MdsGridItem */\n.mdsGrid-module-MdsGridItem--FsIK-4-30-3 {\n box-sizing: border-box;\n}\n\n/* Justify self variations */\n.mdsGrid-module-MdsGridItem-justifySelf--start-CHjwa-4-30-3 {\n justify-self: start;\n}\n\n.mdsGrid-module-MdsGridItem-justifySelf--end-rvVbS-4-30-3 {\n justify-self: end;\n}\n\n.mdsGrid-module-MdsGridItem-justifySelf--center-vasFQ-4-30-3 {\n justify-self: center;\n}\n\n.mdsGrid-module-MdsGridItem-justifySelf--stretch-YgtoO-4-30-3 {\n justify-self: stretch;\n}\n\n/* Align self variations */\n.mdsGrid-module-MdsGridItem-alignSelf--start-rz0Wg-4-30-3 {\n align-self: start;\n}\n\n.mdsGrid-module-MdsGridItem-alignSelf--end-xtt0h-4-30-3 {\n align-self: end;\n}\n\n.mdsGrid-module-MdsGridItem-alignSelf--center-T1fvd-4-30-3 {\n align-self: center;\n}\n\n.mdsGrid-module-MdsGridItem-alignSelf--stretch-tYo2v-4-30-3 {\n align-self: stretch;\n}\n\n/* Column span variations */\n.mdsGrid-module-MdsGridItem-columnSpan--1--rcAl-4-30-3 {\n grid-column: span 1;\n}\n\n.mdsGrid-module-MdsGridItem-columnSpan--2-ocHQu-4-30-3 {\n grid-column: span 2;\n}\n\n.mdsGrid-module-MdsGridItem-columnSpan--3-lRLzj-4-30-3 {\n grid-column: span 3;\n}\n\n.mdsGrid-module-MdsGridItem-columnSpan--4-PkE3H-4-30-3 {\n grid-column: span 4;\n}\n\n.mdsGrid-module-MdsGridItem-columnSpan--5-bIRoL-4-30-3 {\n grid-column: span 5;\n}\n\n.mdsGrid-module-MdsGridItem-columnSpan--6-LngYK-4-30-3 {\n grid-column: span 6;\n}\n\n.mdsGrid-module-MdsGridItem-columnSpan--7-8D5lx-4-30-3 {\n grid-column: span 7;\n}\n\n.mdsGrid-module-MdsGridItem-columnSpan--8-6cOqO-4-30-3 {\n grid-column: span 8;\n}\n\n.mdsGrid-module-MdsGridItem-columnSpan--9-YvDY7-4-30-3 {\n grid-column: span 9;\n}\n\n.mdsGrid-module-MdsGridItem-columnSpan--10-Jda-6-4-30-3 {\n grid-column: span 10;\n}\n\n.mdsGrid-module-MdsGridItem-columnSpan--11-0sVRm-4-30-3 {\n grid-column: span 11;\n}\n\n.mdsGrid-module-MdsGridItem-columnSpan--12-iYiVh-4-30-3 {\n grid-column: span 12;\n}\n\n/* Row span variations */\n.mdsGrid-module-MdsGridItem-rowSpan--1-UfSFY-4-30-3 {\n grid-row: span 1;\n}\n\n.mdsGrid-module-MdsGridItem-rowSpan--2-RcCmm-4-30-3 {\n grid-row: span 2;\n}\n\n.mdsGrid-module-MdsGridItem-rowSpan--3-2l-1t-4-30-3 {\n grid-row: span 3;\n}\n\n.mdsGrid-module-MdsGridItem-rowSpan--4-w3b-k-4-30-3 {\n grid-row: span 4;\n}\n\n.mdsGrid-module-MdsGridItem-rowSpan--5-xDjGB-4-30-3 {\n grid-row: span 5;\n}\n\n.mdsGrid-module-MdsGridItem-rowSpan--6-COx1o-4-30-3 {\n grid-row: span 6;\n}\n\n/* Column start variations */\n.mdsGrid-module-MdsGridItem-columnStart--1-8Egf8-4-30-3 {\n grid-column-start: 1;\n}\n\n.mdsGrid-module-MdsGridItem-columnStart--2-F8nbf-4-30-3 {\n grid-column-start: 2;\n}\n\n.mdsGrid-module-MdsGridItem-columnStart--3-PlzEc-4-30-3 {\n grid-column-start: 3;\n}\n\n.mdsGrid-module-MdsGridItem-columnStart--4-8S4L--4-30-3 {\n grid-column-start: 4;\n}\n\n.mdsGrid-module-MdsGridItem-columnStart--5-Ew-g2-4-30-3 {\n grid-column-start: 5;\n}\n\n.mdsGrid-module-MdsGridItem-columnStart--6-oBVoo-4-30-3 {\n grid-column-start: 6;\n}\n\n.mdsGrid-module-MdsGridItem-columnStart--7-Cnb7p-4-30-3 {\n grid-column-start: 7;\n}\n\n.mdsGrid-module-MdsGridItem-columnStart--8-xjKMr-4-30-3 {\n grid-column-start: 8;\n}\n\n.mdsGrid-module-MdsGridItem-columnStart--9-L9-zC-4-30-3 {\n grid-column-start: 9;\n}\n\n.mdsGrid-module-MdsGridItem-columnStart--10-lJThd-4-30-3 {\n grid-column-start: 10;\n}\n\n.mdsGrid-module-MdsGridItem-columnStart--11-ORr-q-4-30-3 {\n grid-column-start: 11;\n}\n\n.mdsGrid-module-MdsGridItem-columnStart--12-QFwjD-4-30-3 {\n grid-column-start: 12;\n}\n\n/* Row start variations */\n.mdsGrid-module-MdsGridItem-rowStart--1-IKxiL-4-30-3 {\n grid-row-start: 1;\n}\n\n.mdsGrid-module-MdsGridItem-rowStart--2-yaQUd-4-30-3 {\n grid-row-start: 2;\n}\n\n.mdsGrid-module-MdsGridItem-rowStart--3-JCrYv-4-30-3 {\n grid-row-start: 3;\n}\n\n.mdsGrid-module-MdsGridItem-rowStart--4-uCJy3-4-30-3 {\n grid-row-start: 4;\n}\n\n.mdsGrid-module-MdsGridItem-rowStart--5-5qYoX-4-30-3 {\n grid-row-start: 5;\n}\n\n.mdsGrid-module-MdsGridItem-rowStart--6-OvU4E-4-30-3 {\n grid-row-start: 6;\n}\n";
var styles$P = {"MdsGrid":"mdsGrid-module-MdsGrid-SsvW3-4-30-3","MdsGrid-gap--spacing-10":"mdsGrid-module-MdsGrid-gap--spacing-10-mM7LL-4-30-3","MdsGrid-gap--spacing-20":"mdsGrid-module-MdsGrid-gap--spacing-20-hF7Az-4-30-3","MdsGrid-gap--spacing-30":"mdsGrid-module-MdsGrid-gap--spacing-30-9bsWk-4-30-3","MdsGrid-gap--spacing-40":"mdsGrid-module-MdsGrid-gap--spacing-40-1Zofh-4-30-3","MdsGrid-gap--spacing-60":"mdsGrid-module-MdsGrid-gap--spacing-60-NuzpU-4-30-3","MdsGrid-gap--spacing-80":"mdsGrid-module-MdsGrid-gap--spacing-80-rBc5a-4-30-3","MdsGrid-gap--spacing-120":"mdsGrid-module-MdsGrid-gap--spacing-120-MsDGS-4-30-3","MdsGrid-gap--spacing-160":"mdsGrid-module-MdsGrid-gap--spacing-160-NT7nM-4-30-3","MdsGrid-columnGap--spacing-10":"mdsGrid-module-MdsGrid-columnGap--spacing-10-KEZs4-4-30-3","MdsGrid-columnGap--spacing-20":"mdsGrid-module-MdsGrid-columnGap--spacing-20-Z6HMd-4-30-3","MdsGrid-columnGap--spacing-30":"mdsGrid-module-MdsGrid-columnGap--spacing-30-cIs-1-4-30-3","MdsGrid-columnGap--spacing-40":"mdsGrid-module-MdsGrid-columnGap--spacing-40-4KGum-4-30-3","MdsGrid-columnGap--spacing-60":"mdsGrid-module-MdsGrid-columnGap--spacing-60-Db1Bo-4-30-3","MdsGrid-columnGap--spacing-80":"mdsGrid-module-MdsGrid-columnGap--spacing-80-8dYNY-4-30-3","MdsGrid-columnGap--spacing-120":"mdsGrid-module-MdsGrid-columnGap--spacing-120-IiWsq-4-30-3","MdsGrid-columnGap--spacing-160":"mdsGrid-module-MdsGrid-columnGap--spacing-160-xLma--4-30-3","MdsGrid-rowGap--spacing-10":"mdsGrid-module-MdsGrid-rowGap--spacing-10-n84Bk-4-30-3","MdsGrid-rowGap--spacing-20":"mdsGrid-module-MdsGrid-rowGap--spacing-20-HJszq-4-30-3","MdsGrid-rowGap--spacing-30":"mdsGrid-module-MdsGrid-rowGap--spacing-30-vJ-5p-4-30-3","MdsGrid-rowGap--spacing-40":"mdsGrid-module-MdsGrid-rowGap--spacing-40-uKyUe-4-30-3","MdsGrid-rowGap--spacing-60":"mdsGrid-module-MdsGrid-rowGap--spacing-60-fl0Ia-4-30-3","MdsGrid-rowGap--spacing-80":"mdsGrid-module-MdsGrid-rowGap--spacing-80-vx3sD-4-30-3","MdsGrid-rowGap--spacing-120":"mdsGrid-module-MdsGrid-rowGap--spacing-120-s4V9U-4-30-3","MdsGrid-rowGap--spacing-160":"mdsGrid-module-MdsGrid-rowGap--spacing-160-EdiFo-4-30-3","MdsGrid-justifyItems--start":"mdsGrid-module-MdsGrid-justifyItems--start-eHRaj-4-30-3","MdsGrid-justifyItems--end":"mdsGrid-module-MdsGrid-justifyItems--end-edjoX-4-30-3","MdsGrid-justifyItems--center":"mdsGrid-module-MdsGrid-justifyItems--center-2X7nZ-4-30-3","MdsGrid-justifyItems--stretch":"mdsGrid-module-MdsGrid-justifyItems--stretch-kn94P-4-30-3","MdsGrid-alignItems--start":"mdsGrid-module-MdsGrid-alignItems--start-2Do86-4-30-3","MdsGrid-alignItems--end":"mdsGrid-module-MdsGrid-alignItems--end-waknT-4-30-3","MdsGrid-alignItems--center":"mdsGrid-module-MdsGrid-alignItems--center-yx4U8-4-30-3","MdsGrid-alignItems--stretch":"mdsGrid-module-MdsGrid-alignItems--stretch-Bqs-w-4-30-3","MdsGrid-autoFlow--row":"mdsGrid-module-MdsGrid-autoFlow--row-hbgrw-4-30-3","MdsGrid-autoFlow--column":"mdsGrid-module-MdsGrid-autoFlow--column-rqFc3-4-30-3","MdsGrid-autoFlow--row dense":"mdsGrid-module-MdsGrid-autoFlow--row--dense-lbfql-4-30-3","MdsGrid-autoFlow--column dense":"mdsGrid-module-MdsGrid-autoFlow--column--dense-bJ3Pc-4-30-3","MdsGrid-templateColumns--repeat(1, 1fr)":"mdsGrid-module-MdsGrid-templateColumns--repeat--1----1fr---LXjWZ-4-30-3","MdsGrid-templateColumns--repeat(2, 1fr)":"mdsGrid-module-MdsGrid-templateColumns--repeat--2----1fr---Ib92--4-30-3","MdsGrid-templateColumns--repeat(3, 1fr)":"mdsGrid-module-MdsGrid-templateColumns--repeat--3----1fr---kX-cN-4-30-3","MdsGrid-templateColumns--repeat(4, 1fr)":"mdsGrid-module-MdsGrid-templateColumns--repeat--4----1fr---A8VSk-4-30-3","MdsGrid-templateColumns--repeat(12, 1fr)":"mdsGrid-module-MdsGrid-templateColumns--repeat--12----1fr---vSCpW-4-30-3","MdsGrid-templateColumns--1fr 1fr 1fr":"mdsGrid-module-MdsGrid-templateColumns--1fr--1fr--1fr-bvXnM-4-30-3","MdsGrid-templateColumns--1fr 2fr":"mdsGrid-module-MdsGrid-templateColumns--1fr--2fr-SG4cB-4-30-3","MdsGrid-templateColumns--2fr 1fr":"mdsGrid-module-MdsGrid-templateColumns--2fr--1fr-doRYF-4-30-3","MdsGrid-templateColumns--2fr 1fr 1fr":"mdsGrid-module-MdsGrid-templateColumns--2fr--1fr--1fr-PlTNP-4-30-3","MdsGrid-templateColumns--200px 1fr 2fr":"mdsGrid-module-MdsGrid-templateColumns--200px--1fr--2fr-vKcqN-4-30-3","MdsGrid-templateRows--auto auto auto":"mdsGrid-module-MdsGrid-templateRows--auto--auto--auto-Xqtrn-4-30-3","MdsGrid-templateRows--100px 200px":"mdsGrid-module-MdsGrid-templateRows--100px--200px-3Vgry-4-30-3","MdsGrid-templateRows--1fr 2fr":"mdsGrid-module-MdsGrid-templateRows--1fr--2fr-Tix---4-30-3","MdsGrid-templateRows--auto 1fr":"mdsGrid-module-MdsGrid-templateRows--auto--1fr-zwVSp-4-30-3","MdsGridItem":"mdsGrid-module-MdsGridItem--FsIK-4-30-3","MdsGridItem-justifySelf--start":"mdsGrid-module-MdsGridItem-justifySelf--start-CHjwa-4-30-3","MdsGridItem-justifySelf--end":"mdsGrid-module-MdsGridItem-justifySelf--end-rvVbS-4-30-3","MdsGridItem-justifySelf--center":"mdsGrid-module-MdsGridItem-justifySelf--center-vasFQ-4-30-3","MdsGridItem-justifySelf--stretch":"mdsGrid-module-MdsGridItem-justifySelf--stretch-YgtoO-4-30-3","MdsGridItem-alignSelf--start":"mdsGrid-module-MdsGridItem-alignSelf--start-rz0Wg-4-30-3","MdsGridItem-alignSelf--end":"mdsGrid-module-MdsGridItem-alignSelf--end-xtt0h-4-30-3","MdsGridItem-alignSelf--center":"mdsGrid-module-MdsGridItem-alignSelf--center-T1fvd-4-30-3","MdsGridItem-alignSelf--stretch":"mdsGrid-module-MdsGridItem-alignSelf--stretch-tYo2v-4-30-3","MdsGridItem-columnSpan--1":"mdsGrid-module-MdsGridItem-columnSpan--1--rcAl-4-30-3","MdsGridItem-columnSpan--2":"mdsGrid-module-MdsGridItem-columnSpan--2-ocHQu-4-30-3","MdsGridItem-columnSpan--3":"mdsGrid-module-MdsGridItem-columnSpan--3-lRLzj-4-30-3","MdsGridItem-columnSpan--4":"mdsGrid-module-MdsGridItem-columnSpan--4-PkE3H-4-30-3","MdsGridItem-columnSpan--5":"mdsGrid-module-MdsGridItem-columnSpan--5-bIRoL-4-30-3","MdsGridItem-columnSpan--6":"mdsGrid-module-MdsGridItem-columnSpan--6-LngYK-4-30-3","MdsGridItem-columnSpan--7":"mdsGrid-module-MdsGridItem-columnSpan--7-8D5lx-4-30-3","MdsGridItem-columnSpan--8":"mdsGrid-module-MdsGridItem-columnSpan--8-6cOqO-4-30-3","MdsGridItem-columnSpan--9":"mdsGrid-module-MdsGridItem-columnSpan--9-YvDY7-4-30-3","MdsGridItem-columnSpan--10":"mdsGrid-module-MdsGridItem-columnSpan--10-Jda-6-4-30-3","MdsGridItem-columnSpan--11":"mdsGrid-module-MdsGridItem-columnSpan--11-0sVRm-4-30-3","MdsGridItem-columnSpan--12":"mdsGrid-module-MdsGridItem-columnSpan--12-iYiVh-4-30-3","MdsGridItem-rowSpan--1":"mdsGrid-module-MdsGridItem-rowSpan--1-UfSFY-4-30-3","MdsGridItem-rowSpan--2":"mdsGrid-module-MdsGridItem-rowSpan--2-RcCmm-4-30-3","MdsGridItem-rowSpan--3":"mdsGrid-module-MdsGridItem-rowSpan--3-2l-1t-4-30-3","MdsGridItem-rowSpan--4":"mdsGrid-module-MdsGridItem-rowSpan--4-w3b-k-4-30-3","MdsGridItem-rowSpan--5":"mdsGrid-module-MdsGridItem-rowSpan--5-xDjGB-4-30-3","MdsGridItem-rowSpan--6":"mdsGrid-module-MdsGridItem-rowSpan--6-COx1o-4-30-3","MdsGridItem-columnStart--1":"mdsGrid-module-MdsGridItem-columnStart--1-8Egf8-4-30-3","MdsGridItem-columnStart--2":"mdsGrid-module-MdsGridItem-columnStart--2-F8nbf-4-30-3","MdsGridItem-columnStart--3":"mdsGrid-module-MdsGridItem-columnStart--3-PlzEc-4-30-3","MdsGridItem-columnStart--4":"mdsGrid-module-MdsGridItem-columnStart--4-8S4L--4-30-3","MdsGridItem-columnStart--5":"mdsGrid-module-MdsGridItem-columnStart--5-Ew-g2-4-30-3","MdsGridItem-columnStart--6":"mdsGrid-module-MdsGridItem-columnStart--6-oBVoo-4-30-3","MdsGridItem-columnStart--7":"mdsGrid-module-MdsGridItem-columnStart--7-Cnb7p-4-30-3","MdsGridItem-columnStart--8":"mdsGrid-module-MdsGridItem-columnStart--8-xjKMr-4-30-3","MdsGridItem-columnStart--9":"mdsGrid-module-MdsGridItem-columnStart--9-L9-zC-4-30-3","MdsGridItem-columnStart--10":"mdsGrid-module-MdsGridItem-columnStart--10-lJThd-4-30-3","MdsGridItem-columnStart--11":"mdsGrid-module-MdsGridItem-columnStart--11-ORr-q-4-30-3","MdsGridItem-columnStart--12":"mdsGrid-module-MdsGridItem-columnStart--12-QFwjD-4-30-3","MdsGridItem-rowStart--1":"mdsGrid-module-MdsGridItem-rowStart--1-IKxiL-4-30-3","MdsGridItem-rowStart--2":"mdsGrid-module-MdsGridItem-rowStart--2-yaQUd-4-30-3","MdsGridItem-rowStart--3":"mdsGrid-module-MdsGridItem-rowStart--3-JCrYv-4-30-3","MdsGridItem-rowStart--4":"mdsGrid-module-MdsGridItem-rowStart--4-uCJy3-4-30-3","MdsGridItem-rowStart--5":"mdsGrid-module-MdsGridItem-rowStart--5-5qYoX-4-30-3","MdsGridItem-rowStart--6":"mdsGrid-module-MdsGridItem-rowStart--6-OvU4E-4-30-3"};
styleInject(css_248z$Q);
var _excluded$1a = ["columnSpan", "rowSpan", "columnStart", "rowStart", "justifySelf", "alignSelf", "className", "children"];
var GridItem = function GridItem(props) {
var columnSpan = props.columnSpan,
rowSpan = props.rowSpan,
columnStart = props.columnStart,
rowStart = props.rowStart,
justifySelf = props.justifySelf,
alignSelf = props.alignSelf,
className = props.className,
children = props.children,
rest = _objectWithoutProperties(props, _excluded$1a);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$P.MdsGridItem, true), styles$P["MdsGridItem-justifySelf--".concat(justifySelf)], justifySelf), styles$P["MdsGridItem-alignSelf--".concat(alignSelf)], alignSelf), styles$P["MdsGridItem-columnSpan--".concat(columnSpan)], columnSpan), styles$P["MdsGridItem-rowSpan--".concat(rowSpan)], rowSpan), styles$P["MdsGridItem-columnStart--".concat(columnStart)], columnStart), styles$P["MdsGridItem-rowStart--".concat(rowStart)], rowStart), className);
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-MdsGridItem"
}, rest, {
className: classes
}), children);
};
GridItem.defaultProps = {
columnSpan: 1,
rowSpan: 1
};
var _excluded$19 = ["templateColumns", "templateRows", "gap", "columnGap", "rowGap", "autoFlow", "justifyItems", "alignItems", "className", "style", "children"];
var spacingTokenMap = {
'spacing-10': 'var(--spacing-10)',
'spacing-20': 'var(--spacing-20)',
'spacing-30': 'var(--spacing-30)',
'spacing-40': 'var(--spacing-40)',
'spacing-60': 'var(--spacing-60)',
'spacing-80': 'var(--spacing-80)',
'spacing-120': 'var(--spacing-120)',
'spacing-160': 'var(--spacing-160)'
};
var getSpacingValue = function getSpacingValue(spacing) {
if (!spacing) return undefined;
return spacingTokenMap[spacing];
};
var buildResponsiveStyles = function buildResponsiveStyles(value, cssProperty) {
if (!value) return {};
if (typeof value === 'string') {
if (cssProperty.includes('gap')) {
return _defineProperty$1({}, cssProperty, getSpacingValue(value));
}
return _defineProperty$1({}, cssProperty, value);
}
var styles = {};
if (value.xs) {
if (cssProperty.includes('gap')) {
var spacingValue = getSpacingValue(value.xs);
if (spacingValue) {
styles[cssProperty] = spacingValue;
}
} else {
styles[cssProperty] = value.xs;
}
}
return styles;
};
var MdsGrid = function MdsGrid(props) {
var templateColumns = props.templateColumns,
templateRows = props.templateRows,
gap = props.gap,
columnGap = props.columnGap,
rowGap = props.rowGap,
autoFlow = props.autoFlow,
justifyItems = props.justifyItems,
alignItems = props.alignItems,
className = props.className,
style = props.style,
children = props.children,
rest = _objectWithoutProperties(props, _excluded$19);
var inlineStyles = _objectSpread2({}, style);
if (templateColumns) {
if (typeof templateColumns === 'string') {
inlineStyles.gridTemplateColumns = templateColumns;
} else if (templateColumns.xs) {
inlineStyles.gridTemplateColumns = templateColumns.xs;
}
}
if (templateRows) {
if (typeof templateRows === 'string') {
inlineStyles.gridTemplateRows = templateRows;
} else if (templateRows.xs) {
inlineStyles.gridTemplateRows = templateRows.xs;
}
}
var gapStyles = buildResponsiveStyles(gap, 'gap');
var columnGapStyles = buildResponsiveStyles(columnGap, 'columnGap');
var rowGapStyles = buildResponsiveStyles(rowGap, 'rowGap');
var mergedStyles = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, inlineStyles), gapStyles), columnGapStyles), rowGapStyles);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$P.MdsGrid, true), styles$P["MdsGrid-gap--".concat(typeof gap === 'string' ? gap : undefined)], typeof gap === 'string' && gap), styles$P["MdsGrid-columnGap--".concat(typeof columnGap === 'string' ? columnGap : undefined)], typeof columnGap === 'string' && columnGap), styles$P["MdsGrid-rowGap--".concat(typeof rowGap === 'string' ? rowGap : undefined)], typeof rowGap === 'string' && rowGap), styles$P["MdsGrid-justifyItems--".concat(justifyItems)], justifyItems), styles$P["MdsGrid-alignItems--".concat(alignItems)], alignItems), styles$P["MdsGrid-autoFlow--".concat(autoFlow)], autoFlow), className);
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-MdsGrid"
}, rest, {
className: classes,
style: mergedStyles
}), children);
};
MdsGrid.displayName = 'MdsGrid';
MdsGrid.defaultProps = {
autoFlow: 'row',
justifyItems: 'stretch',
alignItems: 'stretch'
};
MdsGrid.GridItem = GridItem;
/**
* Key codes are deprecated, soon major browser support will end.
*/
var PAGE_UP = 33;
var PAGE_DOWN = 34;
var END = 35;
var HOME = 36;
var ARROW_LEFT = 37;
var ARROW_UP = 38;
var ARROW_RIGHT = 39;
var ARROW_DOWN = 40;
var formatPercentage = function formatPercentage(ratio) {
return "".concat((ratio * 100).toFixed(2), "%");
};
var countDecimalPlaces = function countDecimalPlaces(value) {
if (!isFinite(value)) return 0;
if (Math.floor(value) !== value) {
var valueArray = value.toString().split('.');
return valueArray[1].length || 0;
}
return 0;
};
var approxEqual = function approxEqual(a, b) {
var tolerance = 0.00001;
return Math.abs(a - b) <= tolerance;
};
var clamp = function clamp(value, min, max) {
if (value == null) {
return value;
}
var result = Math.min(Math.max(value, min), max);
return result;
};
var arraysEqual = function arraysEqual(oldValues, newValues) {
if (oldValues.length !== newValues.length) return false;
return newValues.every(function (value, index) {
return value === oldValues[index];
});
};
function argMin(values, argFn) {
if (values.length === 0) {
return undefined;
}
var minValue = values[0];
var minArg = argFn(minValue);
for (var index = 1; index < values.length; index++) {
var value = values[index];
var arg = argFn(value);
if (arg < minArg) {
minValue = value;
minArg = arg;
}
}
return minValue;
}
function fillValues(values, startIndex, endIndex, fillValue) {
var inc = startIndex < endIndex ? 1 : -1;
for (var index = startIndex; index !== endIndex + inc; index += inc) {
values[index] = fillValue;
}
}
function isElementOfType(element) {
return element != null && element.type != null;
}
var css_248z$P = ".slider-module-Slider-6TikH-4-30-3 {\n width: 100%;\n}\n\n.slider-module-Slider-wrapper-WM2J6-4-30-3 {\n position: relative;\n outline: none;\n cursor: pointer;\n}\n\n.slider-module-Slider-wrapper--disabled-NHJzG-4-30-3 {\n cursor: not-allowed;\n}\n\n.slider-module-Slider-track-d76a8-4-30-3 {\n border-radius: var(--border-radius-10);\n height: var(--spacing-40);\n display: flex;\n align-items: center;\n overflow: hidden;\n padding-bottom: var(--spacing-20);\n}\n\n.slider-module-Slider-progress-371yB-4-30-3 {\n background: var(--secondary-lighter);\n height: var(--spacing-05);\n box-sizing: border-box;\n border-radius: var(--border-radius-05);\n}\n\n.slider-module-Slider-progress--inRange-GkXBe-4-30-3 {\n background: var(--primary);\n}\n\n.slider-module-Slider-progress--inRangeDisabled-zUebN-4-30-3 {\n border: var(--border);\n}\n\n.slider-module-Slider-axis-G4Rp0-4-30-3 {\n margin-top: calc(-1 * var(--spacing-20));\n}\n\n.slider-module-Slider-label-hbyPe-4-30-3 {\n margin-top: var(--spacing-10);\n transform: translate(-50%, 0px);\n display: flex;\n align-items: center;\n flex-direction: column;\n position: absolute;\n -webkit-user-select: none;\n user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n}\n\n.slider-module-Slider-ticks-J8lu0-4-30-3 {\n width: var(--spacing-05);\n height: var(--spacing-10);\n border-radius: var(--border-radius-2-5);\n background-color: var(--secondary-dark);\n}\n\n.slider-module-Slider-tooltip--visible-O3adL-4-30-3 {\n visibility: visible;\n}\n\n.slider-module-Slider-tooltip--hidden--RxsH-4-30-3 {\n visibility: hidden;\n}\n\n.slider-module-Slider-tooltip-GGohr-4-30-3 {\n position: absolute;\n color: var(--white);\n outline: none;\n bottom: calc(100% + 4px);\n transform: translateX(calc(-50% + 8px));\n}\n\n.slider-module-Slider-handle-WSP0Z-4-30-3 {\n height: var(--spacing-40);\n width: var(--spacing-40);\n position: absolute;\n left: 0;\n top: 0;\n border-radius: var(--border-radius-full);\n background-color: var(--white);\n border: var(--border-width-05) solid var(--primary);\n box-shadow: var(--shadow-s);\n cursor: pointer;\n box-sizing: border-box;\n outline: none;\n display: flex;\n transition: border var(--duration--fast-01) var(--standard-productive-curve),\n background-color var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.slider-module-Slider-handle-WSP0Z-4-30-3::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: var(--spacing-60);\n height: var(--spacing-60);\n background-color: transparent;\n border-radius: var(--border-radius-full);\n}\n\n.slider-module-Slider-handle-WSP0Z-4-30-3:hover {\n background-color: var(--primary-lightest);\n}\n\n.slider-module-Slider-handle-WSP0Z-4-30-3:active {\n background-color: var(--primary);\n}\n\n.slider-module-Slider-handle-WSP0Z-4-30-3:focus {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.slider-module-Slider-handle-WSP0Z-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.slider-module-Slider-handle--disabled-SdL-F-4-30-3 {\n pointer-events: none;\n background-color: var(--secondary-lighter);\n box-shadow: none;\n}\n\n.slider-module-Slider-handle--disabled-SdL-F-4-30-3:focus {\n outline: none;\n box-shadow: none;\n}\n\n@media (forced-colors: active) {\n /* Handle elevation comes from box-shadow only — add a real border so it stays visible */\n .slider-module-Slider-handle-WSP0Z-4-30-3 {\n border: var(--border-width-05) solid ButtonText;\n box-shadow: none;\n }\n\n /* Restore focus ring on the handle (outline:none is set unconditionally) */\n .slider-module-Slider-handle-WSP0Z-4-30-3:focus,\n .slider-module-Slider-handle-WSP0Z-4-30-3:focus-visible {\n outline: var(--border-width-05) solid Highlight;\n outline-offset: var(--spacing-05);\n }\n\n /* Filled portion of the track */\n .slider-module-Slider-progress--inRange-GkXBe-4-30-3 {\n forced-color-adjust: none;\n background: Highlight;\n }\n}\n";
var styles$O = {"Slider":"slider-module-Slider-6TikH-4-30-3","Slider-wrapper":"slider-module-Slider-wrapper-WM2J6-4-30-3","Slider-wrapper--disabled":"slider-module-Slider-wrapper--disabled-NHJzG-4-30-3","Slider-track":"slider-module-Slider-track-d76a8-4-30-3","Slider-progress":"slider-module-Slider-progress-371yB-4-30-3","Slider-progress--inRange":"slider-module-Slider-progress--inRange-GkXBe-4-30-3","Slider-progress--inRangeDisabled":"slider-module-Slider-progress--inRangeDisabled-zUebN-4-30-3","Slider-axis":"slider-module-Slider-axis-G4Rp0-4-30-3","Slider-label":"slider-module-Slider-label-hbyPe-4-30-3","Slider-ticks":"slider-module-Slider-ticks-J8lu0-4-30-3","Slider-tooltip--visible":"slider-module-Slider-tooltip--visible-O3adL-4-30-3","Slider-tooltip--hidden":"slider-module-Slider-tooltip--hidden--RxsH-4-30-3","Slider-tooltip":"slider-module-Slider-tooltip-GGohr-4-30-3","Slider-handle":"slider-module-Slider-handle-WSP0Z-4-30-3","Slider-handle--disabled":"slider-module-Slider-handle--disabled-SdL-F-4-30-3"};
styleInject(css_248z$P);
var css_248z$O = ".tooltip-module-Tooltip-BzFZs-4-30-3 {\n max-width: var(--spacing-640);\n padding: var(--spacing-10) var(--spacing-20);\n border-radius: var(--border-radius-10);\n z-index: 500;\n background: var(--inverse);\n overflow: hidden;\n box-sizing: border-box;\n transition: opacity 120ms;\n transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);\n}\n\n.tooltip-module-Tooltip--small-WsdO5-4-30-3 {\n line-height: var(--font-height-s);\n}\n\n.tooltip-module-Tooltip-text-tDwJG-4-30-3 {\n white-space: pre-wrap;\n word-break: break-word;\n -webkit-hyphens: auto;\n hyphens: auto;\n}\n\n@keyframes tooltip-module-tooltip-open-top-VGviE-4-30-3 {\n from {\n top: 0px;\n opacity: 0;\n }\n to {\n top: -4px;\n opacity: 1;\n }\n}\n@keyframes tooltip-module-tooltip-close-top-xSYx8-4-30-3 {\n from {\n top: -4px;\n opacity: 1;\n }\n to {\n top: 0px;\n opacity: 0;\n }\n}\n\n.tooltip-module-Tooltip-animation-open-top-D0Bht-4-30-3 {\n animation: tooltip-module-tooltip-open-top-VGviE-4-30-3 120ms cubic-bezier(0, 0, 0.3, 1);\n animation-fill-mode: forwards;\n}\n.tooltip-module-Tooltip-animation-close-top-p--Cg-4-30-3 {\n animation: tooltip-module-tooltip-close-top-xSYx8-4-30-3 80ms cubic-bezier(0.4, 0.14, 1, 1);\n}\n@keyframes tooltip-module-tooltip-open-bottom-aJGl9-4-30-3 {\n from {\n top: -4px;\n opacity: 0;\n }\n to {\n top: 0px;\n opacity: 1;\n }\n}\n@keyframes tooltip-module-tooltip-close-bottom-eYZve-4-30-3 {\n from {\n top: 0px;\n opacity: 1;\n }\n to {\n top: -4px;\n opacity: 0;\n }\n}\n\n.tooltip-module-Tooltip-animation-open-bottom-WKD5b-4-30-3 {\n animation: tooltip-module-tooltip-open-bottom-aJGl9-4-30-3 120ms cubic-bezier(0, 0, 0.3, 1);\n animation-fill-mode: forwards;\n}\n.tooltip-module-Tooltip-animation-close-bottom-0Nh14-4-30-3 {\n animation: tooltip-module-tooltip-close-bottom-eYZve-4-30-3 80ms cubic-bezier(0.4, 0.14, 1, 1);\n}\n\n@keyframes tooltip-module-tooltip-open-left-s3-1K-4-30-3 {\n from {\n left: 1px;\n opacity: 0;\n }\n to {\n left: -3px;\n opacity: 1;\n }\n}\n@keyframes tooltip-module-tooltip-close-left-yNuIX-4-30-3 {\n from {\n left: -3px;\n opacity: 1;\n }\n to {\n left: 1px;\n opacity: 0;\n }\n}\n\n.tooltip-module-Tooltip-animation-open-left-cZNy6-4-30-3 {\n animation: tooltip-module-tooltip-open-left-s3-1K-4-30-3 120ms cubic-bezier(0, 0, 0.3, 1);\n animation-fill-mode: forwards;\n}\n.tooltip-module-Tooltip-animation-close-left-vH8jz-4-30-3 {\n animation: tooltip-module-tooltip-close-left-yNuIX-4-30-3 80ms cubic-bezier(0.4, 0.14, 1, 1);\n}\n\n@keyframes tooltip-module-tooltip-open-right-Ia-cr-4-30-3 {\n from {\n left: -3px;\n opacity: 0;\n }\n to {\n left: 1px;\n opacity: 1;\n }\n}\n@keyframes tooltip-module-tooltip-close-right-yOe2m-4-30-3 {\n from {\n left: 1px;\n opacity: 1;\n }\n to {\n left: -3px;\n opacity: 0;\n }\n}\n\n.tooltip-module-Tooltip-animation-open-right-PzfHz-4-30-3 {\n animation: tooltip-module-tooltip-open-right-Ia-cr-4-30-3 120ms cubic-bezier(0, 0, 0.3, 1);\n animation-fill-mode: forwards;\n}\n.tooltip-module-Tooltip-animation-close-right-KMa4x-4-30-3 {\n animation: tooltip-module-tooltip-close-right-yOe2m-4-30-3 80ms cubic-bezier(0.4, 0.14, 1, 1);\n}\n\n.tooltip-module-Tooltip-container-iDy8C-4-30-3 {\n transition-delay: 400ms;\n animation-delay: 400ms;\n}\n";
var styles$N = {"Tooltip":"tooltip-module-Tooltip-BzFZs-4-30-3","Tooltip--small":"tooltip-module-Tooltip--small-WsdO5-4-30-3","Tooltip-text":"tooltip-module-Tooltip-text-tDwJG-4-30-3","Tooltip-animation-open-top":"tooltip-module-Tooltip-animation-open-top-D0Bht-4-30-3","tooltip-open-top":"tooltip-module-tooltip-open-top-VGviE-4-30-3","Tooltip-animation-close-top":"tooltip-module-Tooltip-animation-close-top-p--Cg-4-30-3","tooltip-close-top":"tooltip-module-tooltip-close-top-xSYx8-4-30-3","Tooltip-animation-open-bottom":"tooltip-module-Tooltip-animation-open-bottom-WKD5b-4-30-3","tooltip-open-bottom":"tooltip-module-tooltip-open-bottom-aJGl9-4-30-3","Tooltip-animation-close-bottom":"tooltip-module-Tooltip-animation-close-bottom-0Nh14-4-30-3","tooltip-close-bottom":"tooltip-module-tooltip-close-bottom-eYZve-4-30-3","Tooltip-animation-open-left":"tooltip-module-Tooltip-animation-open-left-cZNy6-4-30-3","tooltip-open-left":"tooltip-module-tooltip-open-left-s3-1K-4-30-3","Tooltip-animation-close-left":"tooltip-module-Tooltip-animation-close-left-vH8jz-4-30-3","tooltip-close-left":"tooltip-module-tooltip-close-left-yNuIX-4-30-3","Tooltip-animation-open-right":"tooltip-module-Tooltip-animation-open-right-PzfHz-4-30-3","tooltip-open-right":"tooltip-module-tooltip-open-right-Ia-cr-4-30-3","Tooltip-animation-close-right":"tooltip-module-Tooltip-animation-close-right-KMa4x-4-30-3","tooltip-close-right":"tooltip-module-tooltip-close-right-yOe2m-4-30-3","Tooltip-container":"tooltip-module-Tooltip-container-iDy8C-4-30-3"};
styleInject(css_248z$O);
var Handle = /*#__PURE__*/function (_React$Component) {
function Handle() {
var _this;
_classCallCheck(this, Handle);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, Handle, [].concat(args));
_defineProperty$1(_this, "state", {
isHandleMoving: false,
isHandleHovered: false,
isHandleFocused: false
});
_defineProperty$1(_this, "handleElement", null);
_defineProperty$1(_this, "refHandlers", {
handle: function handle(el) {
return _this.handleElement = el;
}
});
_defineProperty$1(_this, "mouseEventClientOffset", function (event) {
return event.clientX;
});
_defineProperty$1(_this, "clientToValue", function (clientPixel) {
var _this$props = _this.props,
tickSize = _this$props.tickSize,
value = _this$props.value;
if (_this.handleElement == null) {
return value;
}
var clientPixelNormalized = clientPixel;
var _this$getHandleMidpoi = _this.getHandleMidpointAndOffset(_this.handleElement),
handleMidpoint = _this$getHandleMidpoi.handleMidpoint,
handleOffset = _this$getHandleMidpoi.handleOffset;
var handleCenterPixel = handleMidpoint + handleOffset;
var pixelDelta = clientPixelNormalized - handleCenterPixel;
if (isNaN(pixelDelta)) {
return value;
}
return value + pixelDelta / tickSize;
});
_defineProperty$1(_this, "changeValue", function (newValue) {
var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.props.onChange;
var isDirectionalUpdate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var _this$props2 = _this.props,
stepSize = _this$props2.stepSize,
min = _this$props2.min,
max = _this$props2.max,
currentValue = _this$props2.value;
// Special case: if requesting exact min or max, allow it
if (newValue === min || newValue === max) {
var _updatedValue = clamp(newValue, min, max);
if (!isNaN(_updatedValue) && currentValue !== _updatedValue) {
if (callback) callback(_updatedValue);
}
return _updatedValue;
}
var snapped;
if (isDirectionalUpdate) {
// Determine direction of movement
var isIncrementing = typeof currentValue === 'number' && newValue > currentValue;
// For directional movement (keyboard arrows), we need to find the next valid step
// If current value is on-grid, use newValue brackets to find next step
// If current value is off-grid, use currentValue brackets to snap to nearest in that direction
var currentStepsFromMin = (currentValue - min) / stepSize;
var isCurrentOnGrid = Math.abs(currentStepsFromMin - Math.round(currentStepsFromMin)) < 1e-10;
if (isCurrentOnGrid) {
// Current is on grid, so find the step in the direction of newValue
var rawStepsFromMin = (newValue - min) / stepSize;
var stepsFromMin = Math.round(rawStepsFromMin * 1e10) / 1e10;
var lowerStep = min + Math.floor(stepsFromMin) * stepSize;
var upperStep = min + Math.ceil(stepsFromMin) * stepSize;
var lowerClean = Math.round(lowerStep * 1e10) / 1e10;
var upperClean = Math.round(upperStep * 1e10) / 1e10;
// Pick based on direction
snapped = isIncrementing ? upperClean : lowerClean;
} else {
// Current is off-grid, snap to nearest valid step in movement direction
var _rawStepsFromMin = (currentValue - min) / stepSize;
var _stepsFromMin = Math.round(_rawStepsFromMin * 1e10) / 1e10;
var _lowerStep = min + Math.floor(_stepsFromMin) * stepSize;
var _upperStep = min + Math.ceil(_stepsFromMin) * stepSize;
var _lowerClean = Math.round(_lowerStep * 1e10) / 1e10;
var _upperClean = Math.round(_upperStep * 1e10) / 1e10;
// Pick the step in the movement direction
snapped = isIncrementing ? _upperClean : _lowerClean;
}
} else {
// For non-directional or large movement (mouse, initial value, labels, page up/down), use nearest step to newValue
// Preserve value as-is when there is no positional change (e.g., click without drag)
if (newValue === currentValue) return currentValue;
var _rawStepsFromMin2 = (newValue - min) / stepSize;
var _stepsFromMin2 = Math.round(_rawStepsFromMin2 * 1e10) / 1e10;
var _lowerStep2 = min + Math.floor(_stepsFromMin2) * stepSize;
var _upperStep2 = min + Math.ceil(_stepsFromMin2) * stepSize;
// Clean floating point artifacts and clamp to valid range
var rawLowerClean = Math.round(_lowerStep2 * 1e10) / 1e10;
var rawUpperClean = Math.round(_upperStep2 * 1e10) / 1e10;
var _lowerClean2 = clamp(rawLowerClean, min, max);
var _upperClean2 = clamp(rawUpperClean, min, max);
// Pick nearest
var distToLower = Math.abs(newValue - _lowerClean2);
var distToUpper = Math.abs(newValue - _upperClean2);
snapped = distToLower <= distToUpper ? _lowerClean2 : _upperClean2;
}
var updatedValue = clamp(snapped, min, max);
// Use precision-aware comparison to avoid float artifacts
var hasChanged = !isNaN(updatedValue) && (typeof currentValue !== 'number' || Math.abs(updatedValue - currentValue) > 1e-10);
if (hasChanged) {
if (callback) callback(updatedValue);
}
return updatedValue;
});
_defineProperty$1(_this, "endHandleMovement", function (event) {
var clientPixel = _this.mouseEventClientOffset(event);
var onRelease = _this.props.onRelease;
_this.removeDocumentEventListeners();
_this.setState({
isHandleMoving: false
});
var finalValue = _this.changeValue(_this.clientToValue(clientPixel));
if (onRelease) onRelease(finalValue);
});
_defineProperty$1(_this, "continueHandleMovement", function (event) {
var clientPixel = _this.mouseEventClientOffset(event);
if (_this.state.isHandleMoving && !_this.props.disabled) {
var value = _this.clientToValue(clientPixel);
_this.changeValue(value);
}
});
_defineProperty$1(_this, "beginHandleMovement", function (event) {
if (_this.props.disabled) return;
document.addEventListener('mousemove', _this.continueHandleMovement);
document.addEventListener('mouseup', _this.endHandleMovement);
_this.setState({
isHandleMoving: true
});
var value = _this.clientToValue(event.clientX);
_this.changeValue(value);
});
_defineProperty$1(_this, "handleKeyDown", function (event) {
if (_this.props.disabled) return;
var _this$props3 = _this.props,
stepSize = _this$props3.stepSize,
value = _this$props3.value,
min = _this$props3.min,
max = _this$props3.max;
var keyCode = event.keyCode;
var largeStep = stepSize * 10;
if (keyCode === ARROW_LEFT || keyCode === ARROW_DOWN) {
_this.changeValue(value - stepSize, _this.props.onChange, true);
event.preventDefault();
} else if (keyCode === ARROW_RIGHT || keyCode === ARROW_UP) {
var newValue = value + stepSize;
// Smart stepping: if next step would overshoot max but we're close, snap to max
if (newValue > max && max - value < stepSize) {
_this.changeValue(max, _this.props.onChange, true);
} else {
_this.changeValue(newValue, _this.props.onChange, true);
}
event.preventDefault();
} else if (keyCode === HOME) {
_this.changeValue(min, _this.props.onChange, false);
event.preventDefault();
} else if (keyCode === END) {
_this.changeValue(max, _this.props.onChange, false);
event.preventDefault();
} else if (keyCode === PAGE_DOWN) {
_this.changeValue(value - largeStep, _this.props.onChange, false);
event.preventDefault();
} else if (keyCode === PAGE_UP) {
var _newValue = value + largeStep;
// Smart stepping: if page up would overshoot max but we're close, snap to max
if (_newValue > max && max - value < largeStep) {
_this.changeValue(max, _this.props.onChange, false);
} else {
_this.changeValue(_newValue, _this.props.onChange, false);
}
event.preventDefault();
}
});
_defineProperty$1(_this, "handleKeyUp", function (event) {
if (_this.props.disabled) return;
var releaseKeys = [ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ARROW_DOWN, HOME, END, PAGE_UP, PAGE_DOWN];
if (releaseKeys.indexOf(event.keyCode) >= 0) {
var onRelease = _this.props.onRelease;
if (onRelease) onRelease(_this.props.value);
}
});
_defineProperty$1(_this, "getHandleMidpointAndOffset", function (handleElement) {
var useOppositeDimension = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (handleElement == null) {
return {
handleMidpoint: 0,
handleOffset: 0
};
}
var handleRect = handleElement.getBoundingClientRect();
var sizeKey = useOppositeDimension ? 'height' : 'width';
var handleOffset = handleRect.left;
return {
handleOffset: handleOffset,
handleMidpoint: handleRect[sizeKey] / 2
};
});
_defineProperty$1(_this, "handleMouseOver", function () {
_this.setState({
isHandleHovered: true
});
});
_defineProperty$1(_this, "handleMouseLeave", function () {
_this.setState({
isHandleHovered: false
});
});
_defineProperty$1(_this, "handleFocus", function () {
_this.setState({
isHandleFocused: true
});
});
_defineProperty$1(_this, "handleBlur", function () {
_this.setState({
isHandleFocused: false
});
});
_defineProperty$1(_this, "removeDocumentEventListeners", function () {
document.removeEventListener('mousemove', _this.continueHandleMovement);
document.removeEventListener('mouseup', _this.endHandleMovement);
});
return _this;
}
_inherits(Handle, _React$Component);
return _createClass(Handle, [{
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.removeDocumentEventListeners();
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(_prevProps, prevState) {
if (prevState.isHandleMoving !== this.state.isHandleMoving) {
if (this.handleElement) this.handleElement.focus();
}
}
}, {
key: "render",
value: function render() {
var _this$props4 = this.props,
min = _this$props4.min,
tickSizeRatio = _this$props4.tickSizeRatio,
value = _this$props4.value,
disabled = _this$props4.disabled,
label = _this$props4.label,
ariaLabel = _this$props4.ariaLabel,
isCurrentLabelHovered = _this$props4.isCurrentLabelHovered;
var _this$state = this.state,
isHandleMoving = _this$state.isHandleMoving,
isHandleHovered = _this$state.isHandleHovered,
isHandleFocused = _this$state.isHandleFocused;
var showTootlip = isHandleMoving || isHandleHovered || isHandleFocused || isCurrentLabelHovered;
var _this$getHandleMidpoi2 = this.getHandleMidpointAndOffset(this.handleElement, true),
handleMidpoint = _this$getHandleMidpoi2.handleMidpoint;
var offsetRatio = (value - min) * tickSizeRatio;
var offsetCalc = "calc(".concat(formatPercentage(offsetRatio), " - ").concat(handleMidpoint, "px)");
var style = {
left: offsetCalc
};
var className = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$O['Slider-handle'], true), styles$O['Slider-handle--disabled'], disabled), styles$O['Slider-handle--active'], isHandleMoving), 'border-0', disabled));
var TooltipClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$O['Slider-tooltip'], true), styles$N['Tooltip'], true), 'd-none', !showTootlip));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: className,
onMouseOver: this.handleMouseOver,
onFocus: this.handleFocus,
onMouseLeave: this.handleMouseLeave,
onBlur: this.handleBlur,
onMouseDown: this.beginHandleMovement,
onKeyDown: this.handleKeyDown,
onKeyUp: this.handleKeyUp,
ref: this.refHandlers.handle,
style: style,
tabIndex: disabled ? -1 : 0,
"data-test": "DesignSystem-MultiSlider-Handle",
role: "slider",
"aria-label": ariaLabel || label,
"aria-valuemin": this.props.min,
"aria-valuemax": this.props.max,
"aria-valuenow": value,
"aria-valuetext": label,
"aria-disabled": disabled || undefined
}), /*#__PURE__*/React.createElement("div", {
className: TooltipClass,
style: style
}, label));
}
}]);
}(React.Component);
var MultiSliderHandle = function MultiSliderHandle() {
return null;
};
var MultiSlider = /*#__PURE__*/function (_React$Component) {
function MultiSlider(_props) {
var _this;
_classCallCheck(this, MultiSlider);
_this = _callSuper(this, MultiSlider, [_props]);
_defineProperty$1(_this, "handleElements", []);
_defineProperty$1(_this, "trackElement", null);
_defineProperty$1(_this, "labelId", "slider-label-".concat(uidGenerator()));
_defineProperty$1(_this, "getLabelPrecision", function (_ref) {
var labelPrecision = _ref.labelPrecision,
stepSize = _ref.stepSize;
return labelPrecision == null ? countDecimalPlaces(stepSize) : labelPrecision;
});
_defineProperty$1(_this, "getOffsetRatio", function (value) {
return clamp((value - _this.props.min) * _this.state.tickSizeRatio, 0, 1);
});
_defineProperty$1(_this, "addHandleRef", function (ref) {
if (ref != null) {
_this.handleElements.push(ref);
}
});
_defineProperty$1(_this, "getHandleValues", function (props) {
var maybeHandles = React.Children.map(props.children, function (child) {
return isElementOfType(child) ? child.props : null;
});
var handles = maybeHandles != null ? maybeHandles : [];
handles = handles.filter(function (handle) {
return handle !== null;
});
handles.sort(function (left, right) {
return left.value - right.value;
});
return handles;
});
_defineProperty$1(_this, "updateTickSize", function () {
if (_this.trackElement != null) {
var trackSize = _this.trackElement.clientWidth;
var tickSizeRatio = 1 / (_this.props.max - _this.props.min);
var tickSize = trackSize * tickSizeRatio;
_this.setState({
tickSize: tickSize,
tickSizeRatio: tickSizeRatio
});
}
});
_defineProperty$1(_this, "getTrackFill", function (start, end) {
if (start.fillAfter !== undefined) {
return start.fillAfter;
}
if (end !== undefined && end.fillBefore !== undefined) {
return end.fillBefore;
}
return false;
});
_defineProperty$1(_this, "maybeHandleTrackClick", function (event) {
var target = event.target;
var canHandleTrackEvent = !_this.props.disabled && target.closest('.Slider-handle') == null;
if (canHandleTrackEvent) {
var foundHandle = _this.nearestHandleForValue(_this.handleElements, function (handle) {
return handle.mouseEventClientOffset(event);
});
if (foundHandle) {
foundHandle.beginHandleMovement(event);
}
}
});
_defineProperty$1(_this, "getLockedHandleIndex", function (startIndex, endIndex) {
var inc = startIndex < endIndex ? 1 : -1;
for (var index = startIndex + inc; index !== endIndex + inc; index += inc) {
return index;
}
return -1;
});
_defineProperty$1(_this, "getNewHandleValues", function (newValue, oldIndex) {
var handleProps = _this.getHandleValues(_this.props);
var oldValues = handleProps.map(function (handle) {
return handle.value;
});
var newValues = oldValues.slice();
// Check if moving this handle would cross another handle
var direction = newValue > oldValues[oldIndex] ? 1 : -1;
var adjacentIndex = oldIndex + direction;
// If there's an adjacent handle in the movement direction, check for collision
if (adjacentIndex >= 0 && adjacentIndex < oldValues.length) {
var adjacentValue = oldValues[adjacentIndex];
var wouldCross = direction > 0 ? newValue > adjacentValue : newValue < adjacentValue;
if (wouldCross) {
// Snap to the adjacent handle's value
newValues[oldIndex] = adjacentValue;
if (newValues.length > 1) newValues.sort(function (left, right) {
return left - right;
});
return newValues;
}
}
// No collision, proceed normally
newValues[oldIndex] = newValue;
if (newValues.length > 1) newValues.sort(function (left, right) {
return left - right;
});
var newIndex = newValues.indexOf(newValue);
var lockIndex = _this.getLockedHandleIndex(oldIndex, newIndex);
if (lockIndex === -1) {
fillValues(newValues, oldIndex, newIndex, newValue);
}
return newValues;
});
_defineProperty$1(_this, "onReleaseHandler", function (newValue, index) {
var onRangeRelease = _this.props.onRangeRelease;
var handleProps = _this.getHandleValues(_this.props);
var newValues = _this.getNewHandleValues(newValue, index);
// Range Slider callback
if (onRangeRelease) {
var range = newValues;
onRangeRelease(range);
}
// Slider callback
handleProps.forEach(function (handle, i) {
if (handle.onRelease) handle.onRelease(newValues[i]);
});
});
_defineProperty$1(_this, "onChangeHandler", function (newValue, index) {
var onRangeChange = _this.props.onRangeChange;
var handleProps = _this.getHandleValues(_this.props);
var oldValues = handleProps.map(function (handle) {
return handle.value;
});
var newValues = _this.getNewHandleValues(newValue, index);
if (!arraysEqual(newValues, oldValues)) {
// Range Slider Callback
if (onRangeChange) {
var range = newValues;
onRangeChange(range);
}
// Slider callback
handleProps.forEach(function (handle, i) {
if (handle.onChange) handle.onChange(newValues[i]);
});
}
});
_defineProperty$1(_this, "formatLabel", function (value) {
var labelRenderer = _this.props.labelRenderer;
var labelValue = value.toFixed(_this.state.labelPrecision);
if (typeof labelRenderer === 'function') {
return labelRenderer(Number(labelValue));
}
return labelValue;
});
_defineProperty$1(_this, "getHandleAriaLabel", function (index, totalHandles) {
var sliderLabel = _this.props.label;
if (totalHandles === 1) {
return sliderLabel || 'Value';
}
if (totalHandles === 2) {
if (index === 0) return sliderLabel ? "Minimum ".concat(sliderLabel) : 'Minimum';
return sliderLabel ? "Maximum ".concat(sliderLabel) : 'Maximum';
}
return sliderLabel ? "".concat(sliderLabel, " handle ").concat(index + 1) : "Handle ".concat(index + 1);
});
_defineProperty$1(_this, "renderHandles", function () {
var _this$props = _this.props,
disabled = _this$props.disabled,
max = _this$props.max,
min = _this$props.min,
stepSize = _this$props.stepSize;
var handleProps = _this.getHandleValues(_this.props);
if (handleProps.length === 0) {
return null;
}
return handleProps.map(function (_ref2, index) {
var value = _ref2.value;
var isCurrentLabelHovered = _this.state.hoveredLabelValue === Number(value.toFixed(_this.state.labelPrecision));
return /*#__PURE__*/React.createElement(Handle, {
disabled: disabled,
key: "".concat(index, "-").concat(handleProps.length),
max: max,
min: min,
onRelease: function onRelease(newValue) {
return _this.onReleaseHandler(newValue, index);
},
onChange: function onChange(newValue) {
return _this.onChangeHandler(newValue, index);
},
label: _this.formatLabel(value),
ariaLabel: _this.getHandleAriaLabel(index, handleProps.length),
ref: _this.addHandleRef,
stepSize: stepSize,
tickSize: _this.state.tickSize,
tickSizeRatio: _this.state.tickSizeRatio,
value: value,
isCurrentLabelHovered: isCurrentLabelHovered
});
});
});
_defineProperty$1(_this, "renderLabels", function () {
var _this$props2 = _this.props,
labelStepSize = _this$props2.labelStepSize,
max = _this$props2.max,
min = _this$props2.min,
labelRenderer = _this$props2.labelRenderer,
disabled = _this$props2.disabled;
var labels = [];
var stepSizeRatio = _this.state.tickSizeRatio * labelStepSize;
var handles = _this.getHandleValues(_this.props);
var activeLabels = handles.map(function (handle) {
return handle.value.toFixed(_this.state.labelPrecision);
});
var _loop = function _loop(i) {
var offsetPercentage = formatPercentage(offsetRatio);
var style = {
left: offsetPercentage
};
var active = !disabled && activeLabels.indexOf(i.toFixed(_this.state.labelPrecision)) !== -1;
var onClickHandler = function onClickHandler(event) {
if (!_this.props.disabled) {
var foundHandle = _this.nearestHandleForValue(_this.handleElements, function (handle) {
return handle.mouseEventClientOffset(event);
});
if (foundHandle) {
foundHandle.changeValue(i);
}
}
};
var SliderTicksClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$O['Slider-ticks'], true), 'bg-dark', active));
labels.push(/*#__PURE__*/React.createElement("div", {
onClick: onClickHandler,
className: styles$O['Slider-label'],
key: i,
style: style,
onMouseOver: function onMouseOver() {
return _this.handleLabelMouseOver(i);
},
onFocus: function onFocus() {
return _this.handleLabelMouseOver(i);
},
onMouseLeave: _this.handleLabelMouseLeave,
onBlur: _this.handleLabelMouseLeave,
"data-test": "DesignSystem-MultiSlider-Label",
"aria-hidden": "true"
}, /*#__PURE__*/React.createElement("span", {
className: SliderTicksClass
}), labelRenderer !== false && /*#__PURE__*/React.createElement(Text$1, {
size: "small",
appearance: disabled ? 'disabled' : active ? 'default' : 'subtle',
weight: !disabled && active ? 'strong' : undefined
}, _this.formatLabel(i))));
};
for (var i = min, offsetRatio = 0; i < max || approxEqual(i, max); i += labelStepSize, offsetRatio += stepSizeRatio) {
_loop(i);
}
return labels;
});
_defineProperty$1(_this, "renderTrackFill", function (index, start, end) {
var _sort = [_this.getOffsetRatio(start.value), _this.getOffsetRatio(end.value)].sort(function (left, right) {
return left - right;
}),
_sort2 = _slicedToArray(_sort, 2),
startRatio = _sort2[0],
endRatio = _sort2[1];
var startOffset = Number((startRatio * 100).toFixed(2));
var endOffset = Number(((1 - endRatio) * 100).toFixed(2));
var width = "".concat(100 - endOffset - startOffset, "%");
var orientationStyle = {
width: width
};
var style = _objectSpread2({}, orientationStyle);
var fillTrack = _this.getTrackFill(start, end);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$O['Slider-progress'], true), styles$O['Slider-progress--disabled'], _this.props.disabled), styles$O['Slider-progress--inRange'], fillTrack), styles$O['Slider-progress--inRangeDisabled'], fillTrack && _this.props.disabled));
return /*#__PURE__*/React.createElement("div", {
key: "track-".concat(index),
className: classes,
style: style
});
});
_defineProperty$1(_this, "renderTracks", function () {
var trackStops = _this.getHandleValues(_this.props);
trackStops.push({
value: _this.props.max
});
var previous = {
value: _this.props.min || 0
};
var handles = [];
trackStops.forEach(function (track, index) {
var current = track;
handles.push(_this.renderTrackFill(index, previous, current));
previous = current;
});
return handles;
});
_defineProperty$1(_this, "handleLabelMouseOver", function (value) {
_this.setState({
hoveredLabelValue: value
});
});
_defineProperty$1(_this, "handleLabelMouseLeave", function () {
_this.setState({
hoveredLabelValue: undefined
});
});
_this.state = {
labelPrecision: _this.getLabelPrecision(_this.props),
tickSize: 0,
tickSizeRatio: 0
};
return _this;
}
_inherits(MultiSlider, _React$Component);
return _createClass(MultiSlider, [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(props) {
return {
labelPrecision: this.getLabelPrecision(props)
};
}
}, {
key: "getSnapshotBeforeUpdate",
value: function getSnapshotBeforeUpdate(prevProps) {
var prevHandleProps = this.getHandleValues(prevProps);
var newHandleProps = this.getHandleValues(this.props);
if (newHandleProps.length !== prevHandleProps.length) {
this.handleElements = [];
}
return null;
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
this.updateTickSize();
}
}, {
key: "nearestHandleForValue",
value: function nearestHandleForValue(handles, getOffset) {
return argMin(handles, function (handle) {
var offset = getOffset(handle);
var offsetValue = handle.clientToValue(offset);
var handleValue = handle.props.value;
return Math.abs(offsetValue - handleValue);
});
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props3 = this.props,
label = _this$props3.label,
className = _this$props3.className;
var baseProps = extractBaseProps(this.props);
var SliderClass = classnames(_defineProperty$1({}, styles$O['Slider'], true), className);
var WrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$O['Slider-wrapper'], true), styles$O['Slider-wrapper--disabled'], this.props.disabled));
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
className: SliderClass,
"data-test": "DesignSystem-MultiSlider"
}), label && /*#__PURE__*/React.createElement(Label, {
withInput: true,
id: this.labelId
}, label), /*#__PURE__*/React.createElement("div", {
className: WrapperClass
}, /*#__PURE__*/React.createElement("div", {
className: styles$O['Slider-track'],
ref: function ref(_ref3) {
return _this2.trackElement = _ref3;
},
onMouseDown: this.maybeHandleTrackClick,
"data-test": "DesignSystem-MultiSlider-Slider-Track",
"aria-hidden": "true"
}, this.renderTracks()), /*#__PURE__*/React.createElement("div", {
className: styles$O['Slider-axis']
}, this.renderLabels()), this.renderHandles()));
}
}]);
}(React.Component);
_defineProperty$1(MultiSlider, "defaultProps", {
labelStepSize: 1,
max: 10,
min: 0,
stepSize: 1,
labelRenderer: true
});
_defineProperty$1(MultiSlider, "Handle", MultiSliderHandle);
var _excluded$18 = ["children", "className", "onOutsideClick", "wrapperElement"];
var OutsideClick = /*#__PURE__*/React.forwardRef(function (props, ref) {
var children = props.children,
className = props.className,
onOutsideClick = props.onOutsideClick,
_props$wrapperElement = props.wrapperElement,
wrapperElement = _props$wrapperElement === void 0 ? 'div' : _props$wrapperElement,
rest = _objectWithoutProperties(props, _excluded$18);
var innerRef = React.useRef(null);
React.useImperativeHandle(ref, function () {
return innerRef.current;
}, [innerRef]);
React.useEffect(function () {
document.addEventListener('click', handleOutsideClick, true);
return function () {
document.removeEventListener('click', handleOutsideClick);
};
}, []);
var handleOutsideClick = React.useCallback(function (event) {
var element = innerRef;
if (!event.target || !element.current) {
return;
}
if (!element.current.contains(event.target)) {
onOutsideClick(event);
}
}, []);
var WrapperTag = wrapperElement;
return /*#__PURE__*/React.createElement(WrapperTag, _extends$2({
ref: innerRef
}, rest, {
className: className
}), children);
});
OutsideClick.displayName = 'OutsideClick';
var _excluded$17 = ["appearance", "children", "className", "color"];
var Paragraph = /*#__PURE__*/React.forwardRef(function (props, ref) {
var _props$appearance = props.appearance,
appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
children = props.children,
className = props.className,
color = props.color,
rest = _objectWithoutProperties(props, _excluded$17);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, textStyles.Text, true), textStyles["Text--".concat(appearance)], !color && appearance), "color-".concat(color), color), className);
return /*#__PURE__*/React.createElement(Link$1, _extends$2({
ref: ref,
"data-test": "DesignSystem-Paragraph"
}, rest, {
className: classes,
componentType: "p"
}), children);
});
Paragraph.displayName = 'Paragraph';
Paragraph.defaultProps = {
appearance: 'default'
};
var css_248z$N = ".progressBar-module-ProgressBar-I9SrG-4-30-3 {\n width: 100%;\n border-radius: var(--border-radius-10);\n background: var(--secondary-lighter);\n}\n\n.progressBar-module-ProgressBar-indicator-Wk5Cj-4-30-3 {\n background-color: var(--primary);\n border-radius: var(--border-radius-10);\n transition: var(--duration--slow-01) var(--standard-expressive-curve);\n height: 100%;\n}\n\n.progressBar-module-ProgressBar-indicator--small-3qwXo-4-30-3 {\n height: var(--spacing-10);\n}\n\n.progressBar-module-ProgressBar-indicator--regular-XWwir-4-30-3 {\n height: var(--spacing-20);\n}\n\n.progressBar-module-ProgressBar-indicator--indeterminate-ReTta-4-30-3 {\n background-color: var(--primary);\n border-radius: var(--border-radius-10);\n position: absolute;\n bottom: 0;\n top: 0;\n width: 32%;\n animation: progressBar-module-indeterminate-progress-bar-WrhBP-4-30-3 1.4s infinite linear;\n}\n\n@keyframes progressBar-module-indeterminate-progress-bar-WrhBP-4-30-3 {\n from {\n left: -32%;\n }\n to {\n left: 100%;\n }\n}\n";
var styles$M = {"ProgressBar":"progressBar-module-ProgressBar-I9SrG-4-30-3","ProgressBar-indicator":"progressBar-module-ProgressBar-indicator-Wk5Cj-4-30-3","ProgressBar-indicator--small":"progressBar-module-ProgressBar-indicator--small-3qwXo-4-30-3","ProgressBar-indicator--regular":"progressBar-module-ProgressBar-indicator--regular-XWwir-4-30-3","ProgressBar-indicator--indeterminate":"progressBar-module-ProgressBar-indicator--indeterminate-ReTta-4-30-3","indeterminate-progress-bar":"progressBar-module-indeterminate-progress-bar-WrhBP-4-30-3"};
styleInject(css_248z$N);
var ProgressBar = function ProgressBar(props) {
var max = props.max,
value = props.value,
className = props.className,
size = props.size,
state = props.state,
ariaLabel = props['aria-label'],
ariaLabelledby = props['aria-labelledby'],
id = props.id;
var baseProps = extractBaseProps(props);
var style = state !== 'indeterminate' ? {
width: value && value > 0 ? "".concat(Math.min(value, max) * 100 / max, "%") : '0'
} : {};
var ProgressBarClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$M.ProgressBar, true), styles$M['ProgressBar-indicator--small'], size === 'small'), styles$M['ProgressBar-indicator--regular'], size === 'regular'), 'position-relative overflow-hidden', state === 'indeterminate'), className);
var ProgressIndicatorClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$M['ProgressBar-indicator'], true), styles$M['ProgressBar-indicator--indeterminate'], state === 'indeterminate'));
var clampedValue = state !== 'indeterminate' ? Math.max(0, Math.min(value || 0, max)) : undefined;
var percentage = state !== 'indeterminate' && max > 0 ? Math.round((clampedValue || 0) * 100 / max) : undefined;
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-ProgressBar",
role: "progressbar",
id: id,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
"aria-valuemin": 0,
"aria-valuemax": max,
"aria-valuenow": clampedValue,
"aria-valuetext": percentage !== undefined ? "".concat(percentage, "%") : undefined
}, baseProps, {
className: ProgressBarClass
}), /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-ProgressBar-Indicator",
className: ProgressIndicatorClass,
style: style
}));
};
ProgressBar.displayName = 'ProgressBar';
ProgressBar.defaultProps = {
max: 100,
size: 'regular',
state: 'default'
};
var css_248z$M = "/* Radio */\n\n.radio-module-Radio-sJTSN-4-30-3 {\n display: flex;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n padding-top: var(--spacing-05);\n padding-bottom: var(--spacing-05);\n width: -moz-fit-content;\n width: fit-content;\n}\n\n.radio-module-Radio-outerWrapper-y7yec-4-30-3 {\n position: relative;\n flex-shrink: 0;\n margin-top: var(--spacing-05);\n}\n\n.radio-module-Radio-defaultWrapper-42-VN-4-30-3 {\n border: var(--border-width-2-5) solid var(--inverse-lighter);\n}\n\n.radio-module-Radio-errorWrapper-EIko4-4-30-3 {\n border: var(--border);\n border-color: var(--alert);\n}\n\n.radio-module-Radio-outerWrapper--regular-GAbrZ-4-30-3 {\n height: var(--spacing-40);\n width: var(--spacing-40);\n}\n\n.radio-module-Radio-outerWrapper--tiny-ICX4H-4-30-3 {\n height: var(--spacing-30);\n width: var(--spacing-30);\n}\n\n.radio-module-Radio-input-tMZXc-4-30-3 {\n opacity: 0;\n position: absolute;\n height: 100%;\n width: 100%;\n z-index: 2;\n margin: 0;\n cursor: pointer;\n}\n\n.radio-module-Radio-labelWrapper-aPfU--4-30-3 {\n padding-left: var(--spacing-20);\n display: flex;\n flex-direction: column;\n}\n\n.radio-module-Radio-Label-pyxfI-4-30-3 {\n display: flex;\n cursor: pointer;\n margin-left: calc(-1 * var(--spacing-20));\n padding-left: var(--spacing-20);\n}\n\n.radio-module-Radio-wrapper-X9saa-4-30-3 {\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n position: absolute;\n border-radius: var(--border-radius-full);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n z-index: 1;\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.radio-module-Radio--disabled-Mbuyd-4-30-3 {\n pointer-events: none;\n}\n\n.radio-module-Radio-sJTSN-4-30-3:hover .radio-module-Radio-wrapper-X9saa-4-30-3 {\n border: var(--border-width-2-5) solid var(--inverse-light);\n background-color: var(--secondary-lighter);\n}\n\n.radio-module-Radio-sJTSN-4-30-3:active .radio-module-Radio-wrapper-X9saa-4-30-3 {\n background-color: var(--secondary-light);\n border: var(--border-width-2-5) solid var(--inverse-light);\n}\n\n.radio-module-Radio-sJTSN-4-30-3:hover .radio-module-Radio-errorWrapper-EIko4-4-30-3 {\n border: var(--border);\n background-color: var(--secondary-lighter);\n border-color: var(--alert-dark);\n}\n\n.radio-module-Radio-sJTSN-4-30-3:active .radio-module-Radio-errorWrapper-EIko4-4-30-3 {\n border: var(--border);\n background-color: var(--secondary-light);\n border-color: var(--alert-darker);\n}\n\n.radio-module-Radio-sJTSN-4-30-3:focus-within .radio-module-Radio-wrapper-X9saa-4-30-3 {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.radio-module-Radio-sJTSN-4-30-3:focus-within .radio-module-Radio-errorWrapper-EIko4-4-30-3 {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.radio-module-Radio-sJTSN-4-30-3:focus-within .radio-module-Radio-input-tMZXc-4-30-3:checked ~ .radio-module-Radio-wrapper-X9saa-4-30-3 {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.radio-module-Radio-sJTSN-4-30-3:focus-within .radio-module-Radio-input-tMZXc-4-30-3:checked ~ .radio-module-Radio-errorWrapper-EIko4-4-30-3 {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.radio-module-Radio--disabled-Mbuyd-4-30-3 .radio-module-Radio-wrapper-X9saa-4-30-3 {\n border: var(--border-width-2-5) solid var(--secondary);\n background-color: var(--secondary-lightest);\n}\n\n.radio-module-Radio--disabled-Mbuyd-4-30-3 .radio-module-Radio-errorWrapper-EIko4-4-30-3 {\n border: var(--border-width-2-5) solid var(--alert-lighter);\n background-color: var(--secondary-lightest);\n}\n\n.radio-module-Radio-input-tMZXc-4-30-3:checked ~ .radio-module-Radio-wrapper-X9saa-4-30-3 {\n border: var(--border-width-2-5) solid var(--primary);\n}\n\n.radio-module-Radio-input-tMZXc-4-30-3:checked ~ .radio-module-Radio-errorWrapper-EIko4-4-30-3 {\n border: var(--border-width-2-5) solid var(--alert);\n}\n\n.radio-module-Radio-input-tMZXc-4-30-3:checked ~ .radio-module-Radio-wrapper-X9saa-4-30-3:after {\n display: block;\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.radio-module-Radio-wrapper-X9saa-4-30-3:after {\n content: '';\n display: none;\n border-radius: var(--border-radius-full);\n background: var(--primary);\n}\n\n.radio-module-Radio-wrapper--regular-bCOY2-4-30-3:after {\n width: var(--spacing-20);\n height: var(--spacing-20);\n}\n\n.radio-module-Radio-wrapper--tiny-V-uaD-4-30-3:after {\n width: var(--spacing-10);\n height: var(--spacing-10);\n border: var(--border-width-2-5) solid var(--primary);\n}\n\n.radio-module-Radio-sJTSN-4-30-3:hover .radio-module-Radio-input-tMZXc-4-30-3:checked ~ .radio-module-Radio-wrapper-X9saa-4-30-3 {\n border: var(--border-width-2-5) solid var(--primary-dark);\n}\n\n.radio-module-Radio-sJTSN-4-30-3:hover .radio-module-Radio-input-tMZXc-4-30-3:checked ~ .radio-module-Radio-wrapper-X9saa-4-30-3:after {\n background: var(--primary-dark);\n}\n\n.radio-module-Radio-sJTSN-4-30-3:hover .radio-module-Radio-input-tMZXc-4-30-3:checked ~ .radio-module-Radio-wrapper--tiny-V-uaD-4-30-3:after {\n border: var(--border-width-2-5) solid var(--primary-dark);\n}\n\n.radio-module-Radio-sJTSN-4-30-3:active .radio-module-Radio-input-tMZXc-4-30-3:checked ~ .radio-module-Radio-wrapper-X9saa-4-30-3 {\n background-color: var(--secondary-light);\n border: var(--border-width-2-5) solid var(--primary-darker);\n}\n\n.radio-module-Radio-sJTSN-4-30-3:hover .radio-module-Radio-input-tMZXc-4-30-3:checked ~ .radio-module-Radio-errorWrapper-EIko4-4-30-3 {\n background-color: var(--secondary-lighter);\n border: var(--border-width-2-5) solid var(--alert-dark);\n}\n\n.radio-module-Radio-sJTSN-4-30-3:active .radio-module-Radio-input-tMZXc-4-30-3:checked ~ .radio-module-Radio-errorWrapper-EIko4-4-30-3 {\n background-color: var(--secondary-light);\n border: var(--border-width-2-5) solid var(--alert-darker);\n}\n\n.radio-module-Radio-sJTSN-4-30-3:active .radio-module-Radio-input-tMZXc-4-30-3:checked ~ .radio-module-Radio-wrapper-X9saa-4-30-3:after {\n background: var(--primary-darker);\n}\n\n.radio-module-Radio-sJTSN-4-30-3:active .radio-module-Radio-input-tMZXc-4-30-3:checked ~ .radio-module-Radio-wrapper--tiny-V-uaD-4-30-3:after {\n border: var(--border-width-2-5) solid var(--primary-darker);\n}\n\n.radio-module-Radio--disabled-Mbuyd-4-30-3 .radio-module-Radio-input-tMZXc-4-30-3:checked ~ .radio-module-Radio-wrapper-X9saa-4-30-3 {\n border: var(--border-width-2-5) solid var(--primary-lighter);\n background-color: var(--secondary-lightest);\n}\n\n.radio-module-Radio--disabled-Mbuyd-4-30-3 .radio-module-Radio-input-tMZXc-4-30-3:checked ~ .radio-module-Radio-errorWrapper-EIko4-4-30-3 {\n border: var(--border-width-2-5) solid var(--alert-lighter);\n background-color: var(--secondary-lightest);\n}\n\n.radio-module-Radio--disabled-Mbuyd-4-30-3 .radio-module-Radio-input-tMZXc-4-30-3:checked ~ .radio-module-Radio-wrapper-X9saa-4-30-3:after {\n background: var(--primary-lighter);\n}\n\n.radio-module-Radio--disabled-Mbuyd-4-30-3 .radio-module-Radio-input-tMZXc-4-30-3 ~ .radio-module-Radio-wrapper-X9saa-4-30-3:focus {\n outline: none;\n}\n\n.radio-module-Radio--disabled-Mbuyd-4-30-3 .radio-module-Radio-input-tMZXc-4-30-3 ~ .radio-module-Radio-errorWrapper-EIko4-4-30-3:focus {\n outline: none;\n}\n";
var styles$L = {"Radio":"radio-module-Radio-sJTSN-4-30-3","Radio-outerWrapper":"radio-module-Radio-outerWrapper-y7yec-4-30-3","Radio-defaultWrapper":"radio-module-Radio-defaultWrapper-42-VN-4-30-3","Radio-errorWrapper":"radio-module-Radio-errorWrapper-EIko4-4-30-3","Radio-outerWrapper--regular":"radio-module-Radio-outerWrapper--regular-GAbrZ-4-30-3","Radio-outerWrapper--tiny":"radio-module-Radio-outerWrapper--tiny-ICX4H-4-30-3","Radio-input":"radio-module-Radio-input-tMZXc-4-30-3","Radio-labelWrapper":"radio-module-Radio-labelWrapper-aPfU--4-30-3","Radio-Label":"radio-module-Radio-Label-pyxfI-4-30-3","Radio-wrapper":"radio-module-Radio-wrapper-X9saa-4-30-3","Radio--disabled":"radio-module-Radio--disabled-Mbuyd-4-30-3","Radio-wrapper--regular":"radio-module-Radio-wrapper--regular-bCOY2-4-30-3","Radio-wrapper--tiny":"radio-module-Radio-wrapper--tiny-V-uaD-4-30-3"};
styleInject(css_248z$M);
var _excluded$16 = ["size", "label", "disabled", "onChange", "name", "value", "checked", "defaultChecked", "className", "helpText", "error", "aria-label", "aria-labelledby", "aria-describedby", "id"];
var Radio = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
var _props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size,
label = props.label,
disabled = props.disabled,
onChange = props.onChange,
name = props.name,
value = props.value,
checked = props.checked,
defaultChecked = props.defaultChecked,
className = props.className,
helpText = props.helpText,
error = props.error,
ariaLabel = props['aria-label'],
ariaLabelledBy = props['aria-labelledby'],
ariaDescribedBy = props['aria-describedby'],
idProp = props.id,
rest = _objectWithoutProperties(props, _excluded$16);
var ref = React.useRef(null);
var generatedIdRef = React.useRef(null);
if (generatedIdRef.current === null) {
generatedIdRef.current = [name, label, uidGenerator()].filter(Boolean).join('-');
}
var resolvedId = idProp || generatedIdRef.current;
var helpTextIdRef = React.useRef(null);
if (helpTextIdRef.current === null) {
helpTextIdRef.current = "Radio-helpText-".concat(uidGenerator());
}
var helpTextId = helpTextIdRef.current;
React.useImperativeHandle(forwardedRef, function () {
return ref.current;
});
var RadioClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$L['Radio'], true), styles$L['Radio--disabled'], disabled), className);
var RadioWrapper = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$L['Radio-wrapper'], true), styles$L["Radio-defaultWrapper"], !error), styles$L["Radio-errorWrapper"], error), styles$L["Radio-wrapper--".concat(size)], size));
var RadioOuterWrapper = classnames(_defineProperty$1(_defineProperty$1({}, styles$L['Radio-outerWrapper'], true), styles$L["Radio-outerWrapper--".concat(size)], size));
var RadioLabelClass = classnames(_defineProperty$1({}, styles$L['Radio-Label'], true));
var describedBy = [ariaDescribedBy, helpText ? helpTextId : undefined].filter(Boolean).join(' ') || undefined;
// aria-invalid is a global WAI-ARIA 1.2 state valid on all roles, including radio.
// Spread via an object so jsx-a11y static analysis does not incorrectly flag it.
var errorAriaProps = {};
if (error) errorAriaProps['aria-invalid'] = true;
return /*#__PURE__*/React.createElement("div", {
className: RadioClass,
"data-test": "DesignSystem-Radio"
}, /*#__PURE__*/React.createElement("div", {
className: RadioOuterWrapper,
"data-test": "DesignSystem-Radio-OuterWrapper"
}, /*#__PURE__*/React.createElement("input", _extends$2({
tabIndex: 0,
type: "radio",
disabled: disabled,
checked: checked,
defaultChecked: defaultChecked,
ref: ref,
name: name,
value: value,
onChange: onChange,
className: styles$L['Radio-input'],
id: resolvedId,
"data-test": "DesignSystem-Radio-Input",
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-describedby": describedBy
}, errorAriaProps, rest)), /*#__PURE__*/React.createElement("span", {
"data-test": "DesignSystem-Radio-wrapper",
className: RadioWrapper
})), /*#__PURE__*/React.createElement("div", {
className: styles$L['Radio-labelWrapper']
}, label && /*#__PURE__*/React.createElement("label", {
className: RadioLabelClass,
htmlFor: resolvedId,
"data-test": "DesignSystem-Radio-Label"
}, /*#__PURE__*/React.createElement(Text$1, {
size: size === 'tiny' ? 'small' : 'regular',
appearance: disabled ? 'disabled' : 'default'
}, label)), helpText && /*#__PURE__*/React.createElement(Text$1, {
id: helpTextId,
"data-test": "DesignSystem-Radio-HelpText",
size: "small",
appearance: disabled ? 'disabled' : 'subtle'
}, helpText.trim())));
});
Radio.displayName = 'Radio';
var _excluded$15 = ["className", "children"];
var Row = /*#__PURE__*/React.forwardRef(function (props, ref) {
var className = props.className,
children = props.children,
rest = _objectWithoutProperties(props, _excluded$15);
var classes = classnames(_defineProperty$1({}, rowStyles.Row, true), className);
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-Row",
ref: ref
}, rest, {
className: classes
}), children);
});
Row.displayName = 'Row';
var css_248z$L = ".statusHint-module-StatusHint-20-9Y-4-30-3 {\n display: flex;\n flex-direction: row;\n width: -moz-fit-content;\n width: fit-content;\n align-items: center;\n}\n\n.statusHint-module-StatusHint-icon-XMbB3-4-30-3 {\n flex-shrink: 0;\n border-radius: var(--border-radius-full);\n height: var(--spacing-20);\n width: var(--spacing-20);\n}\n\n.statusHint-module-StatusHint--alert-6GWUf-4-30-3 {\n background: var(--alert);\n}\n\n.statusHint-module-StatusHint--success-vLRLm-4-30-3 {\n background: var(--success);\n}\n\n.statusHint-module-StatusHint--warning-Go4Xc-4-30-3 {\n background: var(--warning);\n}\n\n.statusHint-module-StatusHint--info--Qb0E-4-30-3 {\n background: var(--primary);\n}\n\n.statusHint-module-StatusHint--default-XXxYB-4-30-3 {\n background: var(--secondary-light);\n}\n";
var styles$K = {"StatusHint":"statusHint-module-StatusHint-20-9Y-4-30-3","StatusHint-icon":"statusHint-module-StatusHint-icon-XMbB3-4-30-3","StatusHint--alert":"statusHint-module-StatusHint--alert-6GWUf-4-30-3","StatusHint--success":"statusHint-module-StatusHint--success-vLRLm-4-30-3","StatusHint--warning":"statusHint-module-StatusHint--warning-Go4Xc-4-30-3","StatusHint--info":"statusHint-module-StatusHint--info--Qb0E-4-30-3","StatusHint--default":"statusHint-module-StatusHint--default-XXxYB-4-30-3"};
styleInject(css_248z$L);
var _excluded$14 = ["appearance", "children", "onMouseEnter", "onMouseLeave", "onClick", "truncateLabel", "className", "size"];
var StatusHint = function StatusHint(props) {
var appearance = props.appearance,
children = props.children,
_onMouseEnter = props.onMouseEnter,
_onMouseLeave = props.onMouseLeave,
_onClick = props.onClick,
truncateLabel = props.truncateLabel,
className = props.className,
_props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size,
rest = _objectWithoutProperties(props, _excluded$14);
var baseProps = extractBaseProps(props);
var isClickable = Boolean(_onClick);
var handleKeyDown = function handleKeyDown(event) {
if (!isClickable) return;
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
_onClick === null || _onClick === void 0 || _onClick(event);
}
};
var StatusHintClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$K.StatusHint, true), styles$19.StatusHint, true), className);
var StatusHintIconClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$K['StatusHint-icon'], true), styles$K["StatusHint--".concat(appearance)], appearance), 'mr-3-5', size === 'small'), 'mr-4', size === 'regular'));
var StatusHintTextClass = classnames(_defineProperty$1({}, 'ellipsis--noWrap', truncateLabel));
var renderChildren = function renderChildren() {
if (typeof children === 'string' || typeof children === 'number') {
return /*#__PURE__*/React.createElement(Text$1, {
"data-test": "DesignSystem-StatusHint--Text",
weight: 'medium',
className: StatusHintTextClass,
size: size
}, children);
}
return children;
};
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-StatusHint"
}, baseProps, {
className: StatusHintClass,
onClick: function onClick(e) {
return _onClick && _onClick(e);
},
onKeyDown: handleKeyDown,
onMouseEnter: function onMouseEnter(e) {
return _onMouseEnter && _onMouseEnter(e);
},
onMouseLeave: function onMouseLeave(e) {
return _onMouseLeave && _onMouseLeave(e);
},
role: isClickable ? 'button' : undefined,
tabIndex: isClickable ? 0 : undefined
}, rest), /*#__PURE__*/React.createElement("span", {
"data-test": "DesignSystem-StatusHint--Icon",
role: "img",
"aria-label": "".concat(appearance, " status"),
className: StatusHintIconClass
}), renderChildren());
};
StatusHint.displayName = 'StatusHint';
StatusHint.defaultProps = {
appearance: 'default'
};
var css_248z$K = ".pills-module-Pills--00hR-4-30-3 {\n /* 160px */\n max-width: calc(var(--spacing-40) * 10);\n /* truncate */\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: var(--font-size-s);\n line-height: var(--font-height-s);\n text-transform: uppercase;\n padding-right: var(--spacing-15);\n padding-left: var(--spacing-15);\n padding-top: var(--spacing-05);\n padding-bottom: var(--spacing-05);\n border-radius: var(--border-radius-full);\n display: inline-block;\n box-sizing: border-box;\n font-weight: var(--font-weight-bold);\n cursor: default;\n}\n";
var styles$J = {"Pills":"pills-module-Pills--00hR-4-30-3"};
styleInject(css_248z$K);
var Pills = function Pills(props) {
var appearance = props.appearance,
children = props.children,
subtle = props.subtle,
className = props.className,
ariaLabel = props['aria-label'];
var baseProps = extractBaseProps(props);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$J.Pills, true), badgeStyles["Badge--".concat(appearance)], appearance && !subtle), badgeStyles["Badge--subtle-".concat(appearance)], subtle), className);
return /*#__PURE__*/React.createElement("span", _extends$2({
"data-test": "DesignSystem-Pills",
role: ariaLabel ? 'status' : undefined,
"aria-label": ariaLabel
}, baseProps, {
className: classes
}), children);
};
Pills.displayName = 'Pills';
Pills.defaultProps = {
appearance: 'secondary'
};
var css_248z$J = "@keyframes spinner-module-mds-rotate-0PjQp-4-30-3 {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes spinner-module-mds-spin-rFR6x-4-30-3 {\n 0% {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -35px;\n }\n 100% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -124px;\n }\n}\n\n.spinner-module-Spinner-Gnrbl-4-30-3 {\n animation: spinner-module-mds-rotate-0PjQp-4-30-3 2s linear infinite;\n}\n\n.spinner-module-Spinner--xsmall-fTG9G-4-30-3 {\n height: var(--spacing-30);\n width: var(--spacing-30);\n}\n\n.spinner-module-Spinner--small-H43c1-4-30-3 {\n height: var(--spacing-40);\n width: var(--spacing-40);\n}\n\n.spinner-module-Spinner--medium-FJ68A-4-30-3 {\n height: var(--spacing-80);\n width: var(--spacing-80);\n}\n\n.spinner-module-Spinner--large-mEm-A-4-30-3 {\n height: var(--spacing-120);\n width: var(--spacing-120);\n}\n\n.spinner-module-Circle--gSx3-4-30-3 {\n stroke-linecap: round;\n stroke-dasharray: 1 200;\n stroke-dashoffset: 0;\n animation: spinner-module-mds-spin-rFR6x-4-30-3 1.5s ease-in-out infinite;\n}\n\n.spinner-module-Circle--primary-REY8w-4-30-3 {\n stroke: var(--primary-dark);\n}\n\n.spinner-module-Circle--secondary-KzVQ8-4-30-3 {\n stroke: var(--inverse-lighter);\n}\n\n.spinner-module-Circle--white-xc8CI-4-30-3 {\n stroke: var(--white);\n}\n\n.spinner-module-Circle--alert-KYAj6-4-30-3 {\n stroke: var(--alert-dark);\n}\n";
var styles$I = {"Spinner":"spinner-module-Spinner-Gnrbl-4-30-3","mds-rotate":"spinner-module-mds-rotate-0PjQp-4-30-3","Spinner--xsmall":"spinner-module-Spinner--xsmall-fTG9G-4-30-3","Spinner--small":"spinner-module-Spinner--small-H43c1-4-30-3","Spinner--medium":"spinner-module-Spinner--medium-FJ68A-4-30-3","Spinner--large":"spinner-module-Spinner--large-mEm-A-4-30-3","Circle":"spinner-module-Circle--gSx3-4-30-3","mds-spin":"spinner-module-mds-spin-rFR6x-4-30-3","Circle--primary":"spinner-module-Circle--primary-REY8w-4-30-3","Circle--secondary":"spinner-module-Circle--secondary-KzVQ8-4-30-3","Circle--white":"spinner-module-Circle--white-xc8CI-4-30-3","Circle--alert":"spinner-module-Circle--alert-KYAj6-4-30-3"};
styleInject(css_248z$J);
var Spinner = function Spinner(props) {
var appearance = props.appearance,
size = props.size,
className = props.className,
_props$ariaLabel = props['aria-label'],
ariaLabel = _props$ariaLabel === void 0 ? 'Loading' : _props$ariaLabel,
ariaLabelledBy = props['aria-labelledby'];
var baseProps = extractBaseProps(props);
var wrapperClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$I.Spinner, true), styles$I["Spinner--".concat(size)], size), className);
var circleClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$I.Circle, true), styles$I["Circle--".concat(appearance)], appearance));
var svgProps = {
viewBox: '0 0 50 50'
};
var strokeWidthMapping = {
xsmall: 8,
small: 6,
medium: 4,
large: 4
};
var circleProps = {
cx: 25,
cy: 25,
r: 20,
fill: 'none',
strokeMiterlimit: '10',
strokeWidth: strokeWidthMapping[size]
};
return /*#__PURE__*/React.createElement("svg", _extends$2({}, baseProps, {
role: "status",
"aria-live": "polite",
"aria-label": ariaLabelledBy ? undefined : ariaLabel,
"aria-labelledby": ariaLabelledBy,
className: wrapperClasses
}, svgProps), /*#__PURE__*/React.createElement("circle", _extends$2({
className: circleClasses
}, circleProps)));
};
Spinner.displayName = 'Spinner';
Spinner.defaultProps = {
appearance: 'primary',
size: 'medium',
'aria-label': 'Loading'
};
var _excluded$13 = ["value", "defaultValue", "onRelease", "onChange"];
var Slider = function Slider(props) {
var valueProp = props.value,
defaultValue = props.defaultValue,
onRelease = props.onRelease,
onChange = props.onChange,
rest = _objectWithoutProperties(props, _excluded$13);
var _React$useState = React.useState(valueProp === undefined ? defaultValue : valueProp),
_React$useState2 = _slicedToArray(_React$useState, 2),
value = _React$useState2[0],
setValue = _React$useState2[1];
React.useEffect(function () {
if (valueProp !== undefined) {
setValue(valueProp);
}
}, [valueProp]);
var onChangeHandler = function onChangeHandler(newValue) {
if (valueProp === undefined) {
setValue(newValue);
}
if (onChange) onChange(newValue);
};
return /*#__PURE__*/React.createElement(MultiSlider, rest, /*#__PURE__*/React.createElement(MultiSlider.Handle, {
value: value,
onChange: onChangeHandler,
onRelease: onRelease,
fillBefore: true
}));
};
Slider.displayName = 'Slider';
Slider.defaultProps = _objectSpread2(_objectSpread2({}, MultiSlider.defaultProps), {}, {
defaultValue: 0
});
var _excluded$12 = ["value", "defaultValue", "onChange", "onRelease"];
var RangeIndex = /*#__PURE__*/function (RangeIndex) {
RangeIndex[RangeIndex["START"] = 0] = "START";
RangeIndex[RangeIndex["END"] = 1] = "END";
return RangeIndex;
}(RangeIndex || {});
var RangeSlider = function RangeSlider(props) {
var valueProp = props.value,
defaultValue = props.defaultValue,
onChange = props.onChange,
onRelease = props.onRelease,
rest = _objectWithoutProperties(props, _excluded$12);
var _React$useState = React.useState(valueProp === undefined ? defaultValue : valueProp),
_React$useState2 = _slicedToArray(_React$useState, 2),
value = _React$useState2[0],
setValue = _React$useState2[1];
React.useEffect(function () {
if (valueProp !== undefined) {
setValue(valueProp);
}
}, [valueProp]);
var onChangeHandler = function onChangeHandler(range) {
if (valueProp === undefined) {
setValue(range);
}
if (onChange) onChange(range);
};
return /*#__PURE__*/React.createElement(MultiSlider, _extends$2({
onRangeChange: onChangeHandler,
onRangeRelease: onRelease
}, rest), /*#__PURE__*/React.createElement(MultiSlider.Handle, {
value: value[RangeIndex.START],
fillAfter: true
}), /*#__PURE__*/React.createElement(MultiSlider.Handle, {
value: value[RangeIndex.END]
}));
};
RangeSlider.displayName = 'RangeSlider';
RangeSlider.defaultProps = _objectSpread2(_objectSpread2({}, MultiSlider.defaultProps), {}, {
defaultValue: [0, 10]
});
var css_248z$I = "/* Subheading */\n.subheading-module-Subheading-qdIJH-4-30-3 {\n margin: 0;\n font-weight: var(--font-weight-bolder);\n font-size: var(--spacing-30);\n line-height: var(--font-height-m);\n letter-spacing: var(--letter-spacing);\n text-transform: uppercase;\n}\n\n.subheading-module-Subheading--default-wlFtB-4-30-3 {\n color: var(--text);\n}\n\n.subheading-module-Subheading--subtle--rivS-4-30-3 {\n color: var(--text-subtle);\n}\n\n.subheading-module-Subheading--disabled-LAyqD-4-30-3 {\n color: var(--text-disabled);\n}\n\n.subheading-module-Subheading--white-Y8Awi-4-30-3 {\n color: var(--text-white);\n}\n";
var styles$H = {"Subheading":"subheading-module-Subheading-qdIJH-4-30-3","Subheading--default":"subheading-module-Subheading--default-wlFtB-4-30-3","Subheading--subtle":"subheading-module-Subheading--subtle--rivS-4-30-3","Subheading--disabled":"subheading-module-Subheading--disabled-LAyqD-4-30-3","Subheading--white":"subheading-module-Subheading--white-Y8Awi-4-30-3"};
styleInject(css_248z$I);
var _excluded$11 = ["appearance", "as", "children", "className", "color"];
var Subheading = /*#__PURE__*/React.forwardRef(function (props, ref) {
var _props$appearance = props.appearance,
appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
as = props.as,
children = props.children,
className = props.className,
color = props.color,
rest = _objectWithoutProperties(props, _excluded$11);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$H.Subheading, true), styles$H["Subheading--".concat(appearance)], !color && appearance), "color-".concat(color), color), className);
var componentType = as || 'h4';
return /*#__PURE__*/React.createElement(Link$1, _extends$2({
ref: ref,
"data-test": "DesignSystem-Subheading"
}, rest, {
className: classes,
componentType: componentType
}), children);
});
Subheading.displayName = 'Subheading';
Subheading.defaultProps = {
appearance: 'default'
};
var css_248z$H = ".switch-module-Switch-QepNe-4-30-3 {\n display: inline-flex;\n position: relative;\n}\n\n.switch-module-Switch--tiny-r1E6o-4-30-3 {\n height: var(--spacing-40);\n width: var(--spacing-80);\n}\n\n.switch-module-Switch--regular-ciyyD-4-30-3 {\n height: var(--spacing-60);\n width: var(--spacing-120);\n}\n\n.switch-module-Switch--large-kX3JT-4-30-3 {\n height: var(--spacing-60);\n width: var(--spacing-120);\n}\n\n.switch-module-Switch-input-5oT7E-4-30-3 {\n position: absolute;\n cursor: pointer;\n z-index: 10;\n opacity: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n}\n\n.switch-module-Switch-wrapper-btwpQ-4-30-3 {\n display: flex;\n align-items: center;\n line-height: 100%;\n padding: var(--spacing-05);\n top: 0;\n left: 0;\n width: 100%;\n background-color: var(--secondary-light);\n transition: background 120ms ease;\n padding-right: var(--spacing-15);\n}\n\n.switch-module-Switch-input-5oT7E-4-30-3:focus ~ .switch-module-Switch-wrapper-btwpQ-4-30-3 {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n background-color: var(--secondary-light);\n}\n\n.switch-module-Switch-input-5oT7E-4-30-3:focus ~ .switch-module-Switch-wrapper--checked-1oCxY-4-30-3 {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n background-color: var(--primary);\n}\n\n.switch-module-Switch-input-5oT7E-4-30-3:hover ~ .switch-module-Switch-wrapper-btwpQ-4-30-3 {\n background-color: var(--secondary);\n}\n\n.switch-module-Switch-input-5oT7E-4-30-3:hover ~ .switch-module-Switch-wrapper--checked-1oCxY-4-30-3 {\n background-color: var(--primary-dark);\n}\n\n.switch-module-Switch-input-5oT7E-4-30-3:active ~ .switch-module-Switch-wrapper-btwpQ-4-30-3 {\n background-color: var(--secondary-dark);\n}\n\n.switch-module-Switch-input-5oT7E-4-30-3:active ~ .switch-module-Switch-wrapper--checked-1oCxY-4-30-3 {\n background-color: var(--primary-darker);\n}\n\n.switch-module-Switch-input-5oT7E-4-30-3:active ~ .switch-module-Switch-wrapper-btwpQ-4-30-3:before {\n border-color: var(--inverse-light);\n}\n\n.switch-module-Switch-input-5oT7E-4-30-3:active ~ .switch-module-Switch-wrapper--checked-1oCxY-4-30-3:before {\n border-color: transparent;\n}\n\n.switch-module-Switch-wrapper--tiny--PBMV-4-30-3 {\n border-radius: var(--border-radius-full);\n}\n\n.switch-module-Switch-wrapper--regular-6j-AT-4-30-3 {\n border-radius: var(--border-radius-full);\n}\n\n.switch-module-Switch-wrapper--large-A8WkP-4-30-3 {\n border-radius: var(--border-radius-full);\n}\n\n.switch-module-Switch-wrapper-btwpQ-4-30-3:before {\n content: '';\n height: 100%;\n width: 50%;\n background-color: var(--shadow-0);\n box-shadow: var(--shadow-m);\n border-radius: var(--border-radius-full);\n box-sizing: border-box;\n transition-duration: 80ms;\n border: var(--border-width-2-5) solid var(--inverse-lighter);\n}\n\n.switch-module-Switch-wrapper--checked-1oCxY-4-30-3 {\n background-color: var(--primary);\n transition: background 120ms ease;\n padding-left: var(--spacing-15);\n padding-right: 2px !important;\n}\n\n.switch-module-Switch-wrapper--checked-1oCxY-4-30-3:before {\n transform: translateX(100%);\n transition-duration: 80ms;\n border-color: transparent;\n}\n\n.switch-module-Switch--disabled-xXiea-4-30-3 {\n pointer-events: none;\n}\n\n.switch-module-Switch-wrapper--disabled-HghBP-4-30-3 {\n background-color: var(--secondary-lighter);\n}\n\n.switch-module-Switch-wrapper--disabled-HghBP-4-30-3:before {\n border-color: var(--secondary-dark);\n}\n\n.switch-module-Switch-wrapper--checkedDisabled-9Xe28-4-30-3 {\n background-color: var(--primary-lighter);\n}\n\n.switch-module-Switch-wrapper--checkedDisabled-9Xe28-4-30-3:before {\n border-color: transparent;\n}\n\n@media (forced-colors: active) {\n .switch-module-Switch-wrapper-btwpQ-4-30-3 {\n outline: var(--border-width-2-5) solid ButtonText;\n outline-offset: calc(-1 * var(--border-width-2-5));\n box-shadow: none;\n }\n\n /* Checked (enabled) track: use Highlight to distinguish on-state */\n .switch-module-Switch-wrapper--checked-1oCxY-4-30-3:not(.switch-module-Switch-wrapper--checkedDisabled-9Xe28-4-30-3) {\n background-color: Highlight;\n }\n\n .switch-module-Switch-wrapper--checkedDisabled-9Xe28-4-30-3 {\n background-color: ButtonFace;\n outline-color: GrayText;\n }\n\n /* Thumb: box-shadow is removed in forced-colors mode — ensure the existing border is visible */\n .switch-module-Switch-wrapper-btwpQ-4-30-3:before {\n box-shadow: none;\n border-color: ButtonText;\n }\n\n /* In the checked (enabled) state the thumb border is transparent — make it contrast against the track */\n .switch-module-Switch-wrapper--checked-1oCxY-4-30-3:not(.switch-module-Switch-wrapper--checkedDisabled-9Xe28-4-30-3):before {\n border-color: HighlightText;\n }\n\n /* Checked-disabled thumb: use GrayText so it reads as disabled */\n .switch-module-Switch-wrapper--checkedDisabled-9Xe28-4-30-3:before {\n border-color: GrayText;\n }\n\n /* Unchecked-disabled thumb */\n .switch-module-Switch-wrapper--disabled-HghBP-4-30-3:before {\n border-color: GrayText;\n }\n}\n";
var styles$G = {"Switch":"switch-module-Switch-QepNe-4-30-3","Switch--tiny":"switch-module-Switch--tiny-r1E6o-4-30-3","Switch--regular":"switch-module-Switch--regular-ciyyD-4-30-3","Switch--large":"switch-module-Switch--large-kX3JT-4-30-3","Switch-input":"switch-module-Switch-input-5oT7E-4-30-3","Switch-wrapper":"switch-module-Switch-wrapper-btwpQ-4-30-3","Switch-wrapper--checked":"switch-module-Switch-wrapper--checked-1oCxY-4-30-3","Switch-wrapper--tiny":"switch-module-Switch-wrapper--tiny--PBMV-4-30-3","Switch-wrapper--regular":"switch-module-Switch-wrapper--regular-6j-AT-4-30-3","Switch-wrapper--large":"switch-module-Switch-wrapper--large-A8WkP-4-30-3","Switch--disabled":"switch-module-Switch--disabled-xXiea-4-30-3","Switch-wrapper--disabled":"switch-module-Switch-wrapper--disabled-HghBP-4-30-3","Switch-wrapper--checkedDisabled":"switch-module-Switch-wrapper--checkedDisabled-9Xe28-4-30-3"};
styleInject(css_248z$H);
var _excluded$10 = ["size", "defaultChecked", "disabled", "onChange", "name", "value", "className", "appearance", "checked"];
/**
* ######Switch has two types:
* - [Controlled Switch](https://reactjs.org/docs/forms.html#controlled-components)
* - [Uncontrolled Switch](https://reactjs.org/docs/uncontrolled-components.html)
*/
var Switch = /*#__PURE__*/React.forwardRef(function (props, ref) {
var _props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size,
defaultChecked = props.defaultChecked,
disabled = props.disabled,
onChange = props.onChange,
name = props.name,
value = props.value,
className = props.className;
props.appearance;
var checkedProp = props.checked,
rest = _objectWithoutProperties(props, _excluded$10);
var _React$useState = React.useState(checkedProp === undefined ? defaultChecked : checkedProp),
_React$useState2 = _slicedToArray(_React$useState, 2),
checked = _React$useState2[0],
setChecked = _React$useState2[1];
React.useEffect(function () {
if (checkedProp !== undefined) setChecked(checkedProp);
}, [checkedProp]);
var SwitchClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$G.Switch, true), styles$G['Switch--disabled'], disabled), styles$G["Switch--".concat(size)], size), className);
var SwitchWrapper = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$G['Switch-wrapper'], true), styles$G['Switch-wrapper--disabled'], disabled), styles$G["Switch-wrapper--".concat(size)], size), styles$G['Switch-wrapper--checked'], checked), styles$G['Switch-wrapper--checkedDisabled'], checked && disabled));
var onChangeHandler = function onChangeHandler(event) {
var evt = event;
var isKb = evt.type === 'keydown' || evt.type === 'keyup';
var toggle = function toggle() {
if (checkedProp === undefined) setChecked(!checked);
if (onChange) onChange(event, !checked);
};
if (event.type === 'change') {
toggle();
} else if (isKb && (isSpaceKey(event) || evt.key === 'Enter')) {
evt.preventDefault();
toggle();
}
};
return /*#__PURE__*/React.createElement("div", {
className: SwitchClass
}, /*#__PURE__*/React.createElement("input", _extends$2({}, rest, {
type: "checkbox",
role: "switch",
"aria-checked": checked,
defaultChecked: defaultChecked,
disabled: disabled,
onChange: onChangeHandler,
checked: checked,
ref: ref,
name: name,
value: value,
className: styles$G['Switch-input'],
onKeyDown: onChangeHandler
})), /*#__PURE__*/React.createElement("span", {
className: SwitchWrapper
}));
});
Switch.displayName = 'Switch';
var css_248z$G = "/* Textarea */\n\n.textarea-module-Textarea-Es1Ps-4-30-3 {\n min-height: var(--spacing-80);\n width: 100%;\n display: block;\n font-family: var(--font-family);\n font-weight: var(--font-weight-normal);\n line-height: var(--font-height);\n font-size: var(--font-size);\n box-sizing: border-box;\n border-radius: var(--border-radius-10);\n border: var(--border);\n color: var(--inverse);\n padding: var(--spacing-20) var(--spacing-30);\n resize: none;\n cursor: auto; /* this ensures text cursor over text, and pointer cursor over scroll*/\n}\n\n.textarea-module-Textarea-Es1Ps-4-30-3::-moz-placeholder {\n color: var(--inverse-lighter);\n}\n\n.textarea-module-Textarea-Es1Ps-4-30-3::placeholder {\n color: var(--inverse-lighter);\n}\n\n.textarea-module-Textarea-Es1Ps-4-30-3::-ms-clear {\n display: none;\n}\n\n.textarea-module-Textarea-Es1Ps-4-30-3:focus-within {\n border-color: var(--secondary);\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-2-5);\n}\n\n.textarea-module-Textarea-Es1Ps-4-30-3:disabled {\n color: var(--inverse-lightest);\n background: var(--secondary-lightest);\n border-color: var(--secondary-light);\n}\n\n.textarea-module-Textarea--readOnly-mTqc8-4-30-3 {\n pointer-events: none;\n background: var(--secondary-lightest);\n border-color: var(--secondary);\n}\n\n.textarea-module-Textarea--error-gqkse-4-30-3 {\n border: var(--border-width-2-5) solid var(--alert);\n}\n\n.textarea-module-Textarea--error-gqkse-4-30-3:focus-within {\n border-color: var(--alert);\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-2-5);\n}\n\n.textarea-module-Textarea--resize-6QHWa-4-30-3 {\n resize: both;\n}\n\n.textarea-module-Textarea--small-reQLZ-4-30-3 {\n font-size: var(--font-size-s);\n font-weight: var(--font-weight-medium);\n line-height: var(--font-height-s);\n}\n";
var styles$F = {"Textarea":"textarea-module-Textarea-Es1Ps-4-30-3","Textarea--readOnly":"textarea-module-Textarea--readOnly-mTqc8-4-30-3","Textarea--error":"textarea-module-Textarea--error-gqkse-4-30-3","Textarea--resize":"textarea-module-Textarea--resize-6QHWa-4-30-3","Textarea--small":"textarea-module-Textarea--small-reQLZ-4-30-3"};
styleInject(css_248z$G);
var _excluded$$ = ["size", "rows", "resize", "disabled", "name", "placeholder", "value", "defaultValue", "required", "error", "onChange", "onClick", "onBlur", "onFocus", "className", "readOnly"];
var Textarea = /*#__PURE__*/React.forwardRef(function (props, ref) {
var _props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size,
_props$rows = props.rows,
rows = _props$rows === void 0 ? 3 : _props$rows,
_props$resize = props.resize,
resize = _props$resize === void 0 ? true : _props$resize,
disabled = props.disabled,
name = props.name,
placeholder = props.placeholder,
value = props.value,
defaultValue = props.defaultValue,
required = props.required,
error = props.error,
onChange = props.onChange,
onClick = props.onClick,
onBlur = props.onBlur,
onFocus = props.onFocus,
className = props.className,
readOnly = props.readOnly,
rest = _objectWithoutProperties(props, _excluded$$);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$F.Textarea, true), styles$F['Textarea--resize'], resize), styles$F['Textarea--error'], error), styles$F['Textarea--readOnly'], readOnly), styles$F['Textarea--small'], size && size === 'small'), className);
return /*#__PURE__*/React.createElement("textarea", _extends$2({
"data-test": "DesignSystem-Textarea",
"aria-invalid": error
}, rest, {
ref: ref,
name: name,
rows: rows,
placeholder: placeholder,
className: classes,
value: value,
defaultValue: defaultValue,
required: required,
disabled: disabled,
readOnly: readOnly,
onChange: onChange,
onBlur: onBlur,
onClick: onClick,
onFocus: onFocus
}));
});
Textarea.displayName = 'Textarea';
var css_248z$F = "/* toast */\n\n.toast-module-Toast-OpDhM-4-30-3 {\n display: flex;\n flex-direction: row;\n box-sizing: border-box;\n word-break: break-word;\n width: 360px;\n border-radius: var(--border-radius-10);\n padding-left: var(--spacing-40);\n padding-right: var(--spacing-30);\n padding-top: var(--spacing-30);\n padding-bottom: var(--spacing-30);\n}\n\n.toast-module-Toast--withMessage-T8xPr-4-30-3 {\n padding-bottom: var(--spacing-40);\n}\n\n.toast-module-Toast--info-dEexw-4-30-3 {\n background-color: var(--primary);\n}\n\n.toast-module-Toast--alert-gxrp--4-30-3 {\n background-color: var(--alert);\n}\n\n.toast-module-Toast--success-gju3F-4-30-3 {\n background-color: var(--success);\n}\n\n.toast-module-Toast--warning-ELr9r-4-30-3 {\n background-color: var(--warning);\n}\n\n.toast-module-Toast--warning-ELr9r-4-30-3 {\n color: var(--text);\n}\n\n.toast-module-Toast-icon-RrG2q-4-30-3 {\n line-height: var(--font-height-m);\n}\n\n.toast-module-Toast-icon--left-dAfZv-4-30-3 {\n margin-right: var(--spacing-40);\n}\n\n.toast-module-Toast-icon--right--8Qmt-4-30-3 {\n cursor: pointer;\n margin-left: var(--spacing-30);\n border-radius: var(--border-radius-full);\n display: flex;\n align-items: center;\n padding-right: var(--spacing-10);\n padding-left: var(--spacing-10);\n height: var(--spacing-60);\n box-sizing: initial;\n background: transparent;\n border: none;\n}\n\n.toast-module-Toast-icon--info-zE2SA-4-30-3,\n.toast-module-Toast-icon--success-SOr0z-4-30-3,\n.toast-module-Toast-icon--alert-TS0aE-4-30-3,\n.toast-module-Toast-icon--default-HsZ-7-4-30-3 {\n color: var(--text-white);\n}\n\n.toast-module-Toast-icon--warning-47OGV-4-30-3 {\n color: var(--warning-darker);\n}\n\n.toast-module-Toast-closeButton-X-cMT-4-30-3 {\n background: transparent;\n border: none;\n color: inherit;\n padding: 0;\n}\n\n.toast-module-Toast-close-icon-Mwg7W-4-30-3:focus,\n.toast-module-Toast-close-icon-Mwg7W-4-30-3:focus-visible {\n outline: none;\n box-shadow: var(--shadow-spread) var(--inverse-focus);\n}\n\n.toast-module-Toast-close-icon--warning-nuh9s-4-30-3:hover,\n.toast-module-Toast-close-icon--warning-nuh9s-4-30-3:active {\n background: var(--warning-dark);\n}\n\n.toast-module-Toast-close-icon--success-fXEEm-4-30-3:hover,\n.toast-module-Toast-close-icon--success-fXEEm-4-30-3:active {\n background: var(--success-dark);\n}\n\n.toast-module-Toast-close-icon--info-0vDSQ-4-30-3:hover,\n.toast-module-Toast-close-icon--info-0vDSQ-4-30-3:active {\n background: var(--primary-dark);\n}\n\n.toast-module-Toast-close-icon--alert-cq8I3-4-30-3:hover,\n.toast-module-Toast-close-icon--alert-cq8I3-4-30-3:active {\n background: var(--alert-dark);\n}\n\n.toast-module-Toast-body--5KGi-4-30-3 {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n}\n\n.toast-module-Toast-title-4cVcs-4-30-3 {\n display: flex;\n}\n\n.toast-module-Toast-heading-BOc6U-4-30-3 {\n flex-grow: 1;\n}\n\n.toast-module-Toast-text-pwhPD-4-30-3 {\n padding-top: var(--spacing-20);\n}\n\n.toast-module-Toast-text--warning-J4ygg-4-30-3,\n.toast-module-Toast-heading--warning-sybsC-4-30-3 {\n color: var(--warning-darker) !important;\n}\n\n.toast-module-Toast-actions-3qfv--4-30-3 {\n display: flex;\n padding-top: var(--spacing-30);\n}\n\n.toast-module-Toast-actionButton-lfdEz-4-30-3 {\n color: var(--text-white);\n border-radius: var(--border-radius-10);\n margin-right: var(--spacing-20);\n}\n\n.toast-module-Toast-actionButton-lfdEz-4-30-3:focus {\n outline: var(--border-width-05) solid var(--inverse-focus);\n outline-offset: var(--spacing-05);\n}\n\n.toast-module-Toast-actionButton-lfdEz-4-30-3:last-child {\n margin-right: 0;\n}\n\n.toast-module-Toast-actionButton-label-k-pcH-4-30-3 {\n color: inherit;\n}\n\n.toast-module-Toast-actionButton--default-UVS4L-4-30-3 {\n background: var(--inverse-light);\n}\n\n.toast-module-Toast-actionButton--default-UVS4L-4-30-3:hover,\n.toast-module-Toast-actionButton--default-UVS4L-4-30-3:active {\n background: var(--inverse);\n}\n\n.toast-module-Toast-actionButton--info-MLC4o-4-30-3 {\n background: var(--primary-dark);\n}\n\n.toast-module-Toast-actionButton--info-MLC4o-4-30-3:hover,\n.toast-module-Toast-actionButton--info-MLC4o-4-30-3:active {\n background: var(--primary-darker);\n}\n\n.toast-module-Toast-actionButton--success-vppAH-4-30-3 {\n background: var(--success-dark);\n}\n\n.toast-module-Toast-actionButton--success-vppAH-4-30-3:hover,\n.toast-module-Toast-actionButton--success-vppAH-4-30-3:active {\n background: var(--success-darker);\n}\n\n.toast-module-Toast-actionButton--alert-VMKO0-4-30-3 {\n background: var(--alert-dark);\n}\n\n.toast-module-Toast-actionButton--alert-VMKO0-4-30-3:hover,\n.toast-module-Toast-actionButton--alert-VMKO0-4-30-3:active {\n background: var(--alert-darker);\n}\n\n.toast-module-Toast-actionButton--warning-GNDkx-4-30-3 {\n background: var(--warning-dark);\n color: var(--text);\n}\n\n.toast-module-Toast-actionButton--warning-GNDkx-4-30-3:hover,\n.toast-module-Toast-actionButton--warning-GNDkx-4-30-3:active {\n background: var(--warning-darker);\n color: var(--text-white);\n}\n\n@media (forced-colors: active) {\n /* Close icon focus ring is conveyed via box-shadow only — replace with outline */\n .toast-module-Toast-close-icon-Mwg7W-4-30-3:focus,\n .toast-module-Toast-close-icon-Mwg7W-4-30-3:focus-visible {\n outline: var(--border-width-05) solid Highlight;\n outline-offset: var(--spacing-05);\n box-shadow: none;\n }\n}\n";
var styles$E = {"Toast":"toast-module-Toast-OpDhM-4-30-3","Toast--withMessage":"toast-module-Toast--withMessage-T8xPr-4-30-3","Toast--info":"toast-module-Toast--info-dEexw-4-30-3","Toast--alert":"toast-module-Toast--alert-gxrp--4-30-3","Toast--success":"toast-module-Toast--success-gju3F-4-30-3","Toast--warning":"toast-module-Toast--warning-ELr9r-4-30-3","Toast-icon":"toast-module-Toast-icon-RrG2q-4-30-3","Toast-icon--left":"toast-module-Toast-icon--left-dAfZv-4-30-3","Toast-icon--right":"toast-module-Toast-icon--right--8Qmt-4-30-3","Toast-icon--info":"toast-module-Toast-icon--info-zE2SA-4-30-3","Toast-icon--success":"toast-module-Toast-icon--success-SOr0z-4-30-3","Toast-icon--alert":"toast-module-Toast-icon--alert-TS0aE-4-30-3","Toast-icon--default":"toast-module-Toast-icon--default-HsZ-7-4-30-3","Toast-icon--warning":"toast-module-Toast-icon--warning-47OGV-4-30-3","Toast-closeButton":"toast-module-Toast-closeButton-X-cMT-4-30-3","Toast-close-icon":"toast-module-Toast-close-icon-Mwg7W-4-30-3","Toast-close-icon--warning":"toast-module-Toast-close-icon--warning-nuh9s-4-30-3","Toast-close-icon--success":"toast-module-Toast-close-icon--success-fXEEm-4-30-3","Toast-close-icon--info":"toast-module-Toast-close-icon--info-0vDSQ-4-30-3","Toast-close-icon--alert":"toast-module-Toast-close-icon--alert-cq8I3-4-30-3","Toast-body":"toast-module-Toast-body--5KGi-4-30-3","Toast-title":"toast-module-Toast-title-4cVcs-4-30-3","Toast-heading":"toast-module-Toast-heading-BOc6U-4-30-3","Toast-text":"toast-module-Toast-text-pwhPD-4-30-3","Toast-text--warning":"toast-module-Toast-text--warning-J4ygg-4-30-3","Toast-heading--warning":"toast-module-Toast-heading--warning-sybsC-4-30-3","Toast-actions":"toast-module-Toast-actions-3qfv--4-30-3","Toast-actionButton":"toast-module-Toast-actionButton-lfdEz-4-30-3","Toast-actionButton-label":"toast-module-Toast-actionButton-label-k-pcH-4-30-3","Toast-actionButton--default":"toast-module-Toast-actionButton--default-UVS4L-4-30-3","Toast-actionButton--info":"toast-module-Toast-actionButton--info-MLC4o-4-30-3","Toast-actionButton--success":"toast-module-Toast-actionButton--success-vppAH-4-30-3","Toast-actionButton--alert":"toast-module-Toast-actionButton--alert-VMKO0-4-30-3","Toast-actionButton--warning":"toast-module-Toast-actionButton--warning-GNDkx-4-30-3"};
styleInject(css_248z$F);
var ActionButton = function ActionButton(props) {
var appearance = props.appearance,
label = props.label,
onClick = props.onClick;
var buttonClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, buttonStyles['Button'], true), buttonStyles['Button--tiny'], true), styles$E['Toast-actionButton'], true), styles$E["Toast-actionButton--".concat(appearance)], appearance));
var onClickHandler = function onClickHandler(e) {
e.preventDefault();
if (onClick) onClick(e);
};
return /*#__PURE__*/React.createElement("button", {
type: "button",
className: buttonClass,
onClick: onClickHandler
}, /*#__PURE__*/React.createElement("span", {
className: styles$E['Toast-actionButton-label'],
"data-test": "DesignSystem-Toast-ActionButton-Label"
}, label));
};
ActionButton.displayName = 'ActionButton';
ActionButton.defaultProps = {
appearance: 'default'
};
var Toast = function Toast(props) {
var title = props.title,
message = props.message,
actions = props.actions,
onClose = props.onClose,
className = props.className,
ariaLabel = props['aria-label'],
ariaAtomic = props['aria-atomic'],
id = props.id;
var appearance = props.appearance;
appearance = appearance === 'default' ? 'info' : appearance;
var baseProps = extractBaseProps(props);
var wrapperClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$E.Toast, true), styles$E['Toast--withMessage'], message), styles$E["Toast--".concat(appearance)], appearance), className);
var IconMapping = {
info: 'info',
success: 'check_circle',
alert: 'error',
warning: 'warning'
};
var icon = IconMapping[appearance];
var titleClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$E['Toast-title'], true), styles$E['Toast-title--withMessage'], message));
var iconClass = function iconClass(align) {
return classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$E['Toast-icon'], true), styles$E["Toast-icon--".concat(align)], align), styles$E["Toast-icon--".concat(appearance)], appearance));
};
var closeButtonClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$E['Toast-icon--right'], true), styles$E['Toast-close-icon'], true), styles$E["Toast-close-icon--".concat(appearance)], appearance), styles$E["Toast-icon--".concat(appearance)], appearance));
var textClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$E['Toast-text'], true), styles$E["Toast-text--".concat(appearance)], appearance));
var headingClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$E['Toast-heading'], true), styles$E["Toast-heading--".concat(appearance)], appearance));
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
id: id,
className: wrapperClass,
role: appearance === 'alert' || appearance === 'warning' ? 'alert' : 'status',
"aria-live": appearance === 'alert' || appearance === 'warning' ? 'assertive' : 'polite',
"aria-label": ariaLabel,
"aria-atomic": ariaAtomic
}), icon && /*#__PURE__*/React.createElement(Icon, {
name: icon,
className: iconClass('left'),
"aria-hidden": "true"
}), /*#__PURE__*/React.createElement("div", {
className: styles$E['Toast-body']
}, /*#__PURE__*/React.createElement("div", {
className: titleClass
}, /*#__PURE__*/React.createElement(Heading, {
size: "s",
className: headingClass,
appearance: appearance !== 'warning' ? 'white' : 'default',
as: "span"
}, title), onClose && /*#__PURE__*/React.createElement(Button, {
appearance: "transparent",
icon: "close",
"aria-label": "Close",
onClick: onClose,
"data-test": "DesignSystem-Toast--CloseButton",
className: closeButtonClass
})), message && /*#__PURE__*/React.createElement(Text$1, {
appearance: appearance !== 'warning' ? 'white' : 'default',
className: textClass
}, message), !!(actions !== null && actions !== void 0 && actions.length) && /*#__PURE__*/React.createElement("div", {
className: styles$E['Toast-actions']
}, actions.slice(0, 2).map(function (action, index) {
return /*#__PURE__*/React.createElement(ActionButton, {
key: index,
label: action.label,
appearance: appearance,
onClick: action.onClick
});
}))));
};
Toast.displayName = 'Toast';
Toast.defaultProps = {
appearance: 'info'
};
var objectWithoutPropertiesLoose = createCommonjsModule(function (module) {
function _objectWithoutPropertiesLoose(r, e) {
if (null == r) return {};
var t = {};
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
if (e.includes(n)) continue;
t[n] = r[n];
}
return t;
}
module.exports = _objectWithoutPropertiesLoose, module.exports.__esModule = true, module.exports["default"] = module.exports;
});
var _objectWithoutPropertiesLoose = unwrapExports(objectWithoutPropertiesLoose);
var _extends_1 = createCommonjsModule(function (module) {
function _extends() {
return module.exports = _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, module.exports.__esModule = true, module.exports["default"] = module.exports, _extends.apply(null, arguments);
}
module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
});
var _extends$1 = unwrapExports(_extends_1);
var setPrototypeOf = createCommonjsModule(function (module) {
function _setPrototypeOf(t, e) {
return module.exports = _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
return t.__proto__ = e, t;
}, module.exports.__esModule = true, module.exports["default"] = module.exports, _setPrototypeOf(t, e);
}
module.exports = _setPrototypeOf, module.exports.__esModule = true, module.exports["default"] = module.exports;
});
unwrapExports(setPrototypeOf);
var inheritsLoose = createCommonjsModule(function (module) {
function _inheritsLoose(t, o) {
t.prototype = Object.create(o.prototype), t.prototype.constructor = t, setPrototypeOf(t, o);
}
module.exports = _inheritsLoose, module.exports.__esModule = true, module.exports["default"] = module.exports;
});
var _inheritsLoose = unwrapExports(inheritsLoose);
var assertThisInitialized = createCommonjsModule(function (module) {
function _assertThisInitialized(e) {
if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return e;
}
module.exports = _assertThisInitialized, module.exports.__esModule = true, module.exports["default"] = module.exports;
});
var _assertThisInitialized = unwrapExports(assertThisInitialized);
var _typeof_1 = createCommonjsModule(function (module) {
function _typeof(o) {
"@babel/helpers - typeof";
return module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, module.exports.__esModule = true, module.exports["default"] = module.exports, _typeof(o);
}
module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports;
});
unwrapExports(_typeof_1);
var toPrimitive_1 = createCommonjsModule(function (module) {
var _typeof = _typeof_1["default"];
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
module.exports = toPrimitive, module.exports.__esModule = true, module.exports["default"] = module.exports;
});
unwrapExports(toPrimitive_1);
var toPropertyKey_1 = createCommonjsModule(function (module) {
var _typeof = _typeof_1["default"];
function toPropertyKey(t) {
var i = toPrimitive_1(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
module.exports = toPropertyKey, module.exports.__esModule = true, module.exports["default"] = module.exports;
});
unwrapExports(toPropertyKey_1);
var defineProperty$3 = createCommonjsModule(function (module) {
function _defineProperty(e, r, t) {
return (r = toPropertyKey_1(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
module.exports = _defineProperty, module.exports.__esModule = true, module.exports["default"] = module.exports;
});
var _defineProperty = unwrapExports(defineProperty$3);
var toStr$4 = Object.prototype.toString;
var isArguments$2 = function isArguments(value) {
var str = toStr$4.call(value);
var isArgs = str === '[object Arguments]';
if (!isArgs) {
isArgs = str !== '[object Array]' &&
value !== null &&
typeof value === 'object' &&
typeof value.length === 'number' &&
value.length >= 0 &&
toStr$4.call(value.callee) === '[object Function]';
}
return isArgs;
};
var keysShim$1;
if (!Object.keys) {
// modified from https://github.com/es-shims/es5-shim
var has = Object.prototype.hasOwnProperty;
var toStr$3 = Object.prototype.toString;
var isArgs = isArguments$2; // eslint-disable-line global-require
var isEnumerable = Object.prototype.propertyIsEnumerable;
var hasDontEnumBug = !isEnumerable.call({ toString: null }, 'toString');
var hasProtoEnumBug = isEnumerable.call(function () {}, 'prototype');
var dontEnums = [
'toString',
'toLocaleString',
'valueOf',
'hasOwnProperty',
'isPrototypeOf',
'propertyIsEnumerable',
'constructor'
];
var equalsConstructorPrototype = function (o) {
var ctor = o.constructor;
return ctor && ctor.prototype === o;
};
var excludedKeys = {
$applicationCache: true,
$console: true,
$external: true,
$frame: true,
$frameElement: true,
$frames: true,
$innerHeight: true,
$innerWidth: true,
$onmozfullscreenchange: true,
$onmozfullscreenerror: true,
$outerHeight: true,
$outerWidth: true,
$pageXOffset: true,
$pageYOffset: true,
$parent: true,
$scrollLeft: true,
$scrollTop: true,
$scrollX: true,
$scrollY: true,
$self: true,
$webkitIndexedDB: true,
$webkitStorageInfo: true,
$window: true
};
var hasAutomationEqualityBug = (function () {
/* global window */
if (typeof window === 'undefined') { return false; }
for (var k in window) {
try {
if (!excludedKeys['$' + k] && has.call(window, k) && window[k] !== null && typeof window[k] === 'object') {
try {
equalsConstructorPrototype(window[k]);
} catch (e) {
return true;
}
}
} catch (e) {
return true;
}
}
return false;
}());
var equalsConstructorPrototypeIfNotBuggy = function (o) {
/* global window */
if (typeof window === 'undefined' || !hasAutomationEqualityBug) {
return equalsConstructorPrototype(o);
}
try {
return equalsConstructorPrototype(o);
} catch (e) {
return false;
}
};
keysShim$1 = function keys(object) {
var isObject = object !== null && typeof object === 'object';
var isFunction = toStr$3.call(object) === '[object Function]';
var isArguments = isArgs(object);
var isString = isObject && toStr$3.call(object) === '[object String]';
var theKeys = [];
if (!isObject && !isFunction && !isArguments) {
throw new TypeError('Object.keys called on a non-object');
}
var skipProto = hasProtoEnumBug && isFunction;
if (isString && object.length > 0 && !has.call(object, 0)) {
for (var i = 0; i < object.length; ++i) {
theKeys.push(String(i));
}
}
if (isArguments && object.length > 0) {
for (var j = 0; j < object.length; ++j) {
theKeys.push(String(j));
}
} else {
for (var name in object) {
if (!(skipProto && name === 'prototype') && has.call(object, name)) {
theKeys.push(String(name));
}
}
}
if (hasDontEnumBug) {
var skipConstructor = equalsConstructorPrototypeIfNotBuggy(object);
for (var k = 0; k < dontEnums.length; ++k) {
if (!(skipConstructor && dontEnums[k] === 'constructor') && has.call(object, dontEnums[k])) {
theKeys.push(dontEnums[k]);
}
}
}
return theKeys;
};
}
var implementation$4 = keysShim$1;
var slice = Array.prototype.slice;
var origKeys = Object.keys;
var keysShim = origKeys ? function keys(o) { return origKeys(o); } : implementation$4;
var originalKeys = Object.keys;
keysShim.shim = function shimObjectKeys() {
if (Object.keys) {
var keysWorksWithArguments = (function () {
// Safari 5.0 bug
var args = Object.keys(arguments);
return args && args.length === arguments.length;
}(1, 2));
if (!keysWorksWithArguments) {
Object.keys = function keys(object) { // eslint-disable-line func-name-matching
if (isArguments$2(object)) {
return originalKeys(slice.call(object));
}
return originalKeys(object);
};
}
} else {
Object.keys = keysShim;
}
return Object.keys || keysShim;
};
var objectKeys = keysShim;
/** @type {import('./shams')} */
/* eslint complexity: [2, 18], max-statements: [2, 33] */
var shams$1 = function hasSymbols() {
if (typeof Symbol !== 'function' || typeof Object.getOwnPropertySymbols !== 'function') { return false; }
if (typeof Symbol.iterator === 'symbol') { return true; }
/** @type {{ [k in symbol]?: unknown }} */
var obj = {};
var sym = Symbol('test');
var symObj = Object(sym);
if (typeof sym === 'string') { return false; }
if (Object.prototype.toString.call(sym) !== '[object Symbol]') { return false; }
if (Object.prototype.toString.call(symObj) !== '[object Symbol]') { return false; }
// temp disabled per https://github.com/ljharb/object.assign/issues/17
// if (sym instanceof Symbol) { return false; }
// temp disabled per https://github.com/WebReflection/get-own-property-symbols/issues/4
// if (!(symObj instanceof Symbol)) { return false; }
// if (typeof Symbol.prototype.toString !== 'function') { return false; }
// if (String(sym) !== Symbol.prototype.toString.call(sym)) { return false; }
var symVal = 42;
obj[sym] = symVal;
for (var _ in obj) { return false; } // eslint-disable-line no-restricted-syntax, no-unreachable-loop
if (typeof Object.keys === 'function' && Object.keys(obj).length !== 0) { return false; }
if (typeof Object.getOwnPropertyNames === 'function' && Object.getOwnPropertyNames(obj).length !== 0) { return false; }
var syms = Object.getOwnPropertySymbols(obj);
if (syms.length !== 1 || syms[0] !== sym) { return false; }
if (!Object.prototype.propertyIsEnumerable.call(obj, sym)) { return false; }
if (typeof Object.getOwnPropertyDescriptor === 'function') {
// eslint-disable-next-line no-extra-parens
var descriptor = /** @type {PropertyDescriptor} */ (Object.getOwnPropertyDescriptor(obj, sym));
if (descriptor.value !== symVal || descriptor.enumerable !== true) { return false; }
}
return true;
};
/** @type {import('.')} */
var shams = function hasToStringTagShams() {
return shams$1() && !!Symbol.toStringTag;
};
/** @type {import('.')} */
var esObjectAtoms = Object;
/** @type {import('.')} */
var esErrors = Error;
/** @type {import('./eval')} */
var _eval = EvalError;
/** @type {import('./range')} */
var range = RangeError;
/** @type {import('./ref')} */
var ref = ReferenceError;
/** @type {import('./syntax')} */
var syntax = SyntaxError;
/** @type {import('./type')} */
var type = TypeError;
/** @type {import('./uri')} */
var uri = URIError;
/** @type {import('./abs')} */
var abs$1 = Math.abs;
/** @type {import('./floor')} */
var floor$1 = Math.floor;
/** @type {import('./max')} */
var max$2 = Math.max;
/** @type {import('./min')} */
var min$1 = Math.min;
/** @type {import('./pow')} */
var pow$1 = Math.pow;
/** @type {import('./round')} */
var round$1 = Math.round;
/** @type {import('./isNaN')} */
var _isNaN = Number.isNaN || function isNaN(a) {
return a !== a;
};
var $isNaN = _isNaN;
/** @type {import('./sign')} */
var sign$1 = function sign(number) {
if ($isNaN(number) || number === 0) {
return number;
}
return number < 0 ? -1 : +1;
};
/** @type {import('./gOPD')} */
var gOPD$2 = Object.getOwnPropertyDescriptor;
var require$$0$1 = gOPD$2;
/** @type {import('.')} */
var $gOPD$1 = require$$0$1;
if ($gOPD$1) {
try {
$gOPD$1([], 'length');
} catch (e) {
// IE 8 has a broken gOPD
$gOPD$1 = null;
}
}
var gopd = $gOPD$1;
/** @type {import('.')} */
var $defineProperty$1 = Object.defineProperty || false;
if ($defineProperty$1) {
try {
$defineProperty$1({}, 'a', { value: 1 });
} catch (e) {
// IE 8 has a broken defineProperty
$defineProperty$1 = false;
}
}
var esDefineProperty = $defineProperty$1;
var origSymbol = typeof Symbol !== 'undefined' && Symbol;
/** @type {import('.')} */
var hasSymbols$2 = function hasNativeSymbols() {
if (typeof origSymbol !== 'function') { return false; }
if (typeof Symbol !== 'function') { return false; }
if (typeof origSymbol('foo') !== 'symbol') { return false; }
if (typeof Symbol('bar') !== 'symbol') { return false; }
return shams$1();
};
/** @type {import('./Reflect.getPrototypeOf')} */
var Reflect_getPrototypeOf = (typeof Reflect !== 'undefined' && Reflect.getPrototypeOf) || null;
var $Object$2 = esObjectAtoms;
/** @type {import('./Object.getPrototypeOf')} */
var Object_getPrototypeOf = $Object$2.getPrototypeOf || null;
/* eslint no-invalid-this: 1 */
var ERROR_MESSAGE = 'Function.prototype.bind called on incompatible ';
var toStr$2 = Object.prototype.toString;
var max$1 = Math.max;
var funcType = '[object Function]';
var concatty = function concatty(a, b) {
var arr = [];
for (var i = 0; i < a.length; i += 1) {
arr[i] = a[i];
}
for (var j = 0; j < b.length; j += 1) {
arr[j + a.length] = b[j];
}
return arr;
};
var slicy = function slicy(arrLike, offset) {
var arr = [];
for (var i = offset || 0, j = 0; i < arrLike.length; i += 1, j += 1) {
arr[j] = arrLike[i];
}
return arr;
};
var joiny = function (arr, joiner) {
var str = '';
for (var i = 0; i < arr.length; i += 1) {
str += arr[i];
if (i + 1 < arr.length) {
str += joiner;
}
}
return str;
};
var implementation$3 = function bind(that) {
var target = this;
if (typeof target !== 'function' || toStr$2.apply(target) !== funcType) {
throw new TypeError(ERROR_MESSAGE + target);
}
var args = slicy(arguments, 1);
var bound;
var binder = function () {
if (this instanceof bound) {
var result = target.apply(
this,
concatty(args, arguments)
);
if (Object(result) === result) {
return result;
}
return this;
}
return target.apply(
that,
concatty(args, arguments)
);
};
var boundLength = max$1(0, target.length - args.length);
var boundArgs = [];
for (var i = 0; i < boundLength; i++) {
boundArgs[i] = '$' + i;
}
bound = Function('binder', 'return function (' + joiny(boundArgs, ',') + '){ return binder.apply(this,arguments); }')(binder);
if (target.prototype) {
var Empty = function Empty() {};
Empty.prototype = target.prototype;
bound.prototype = new Empty();
Empty.prototype = null;
}
return bound;
};
var functionBind = Function.prototype.bind || implementation$3;
/** @type {import('./functionCall')} */
var functionCall = Function.prototype.call;
/** @type {import('./functionApply')} */
var functionApply = Function.prototype.apply;
/** @type {import('./reflectApply')} */
var reflectApply = typeof Reflect !== 'undefined' && Reflect && Reflect.apply;
/** @type {import('./actualApply')} */
var actualApply = reflectApply || functionBind.call(functionCall, functionApply);
var $TypeError$1 = type;
/** @type {import('.')} */
var callBindApplyHelpers = function callBindBasic(args) {
if (args.length < 1 || typeof args[0] !== 'function') {
throw new $TypeError$1('a function is required');
}
return actualApply(functionBind, functionCall, args);
};
var gOPD$1 = gopd;
var hasProtoAccessor;
try {
// eslint-disable-next-line no-extra-parens, no-proto
hasProtoAccessor = /** @type {{ __proto__?: typeof Array.prototype }} */ ([]).__proto__ === Array.prototype;
} catch (e) {
if (!e || typeof e !== 'object' || !('code' in e) || e.code !== 'ERR_PROTO_ACCESS') {
throw e;
}
}
// eslint-disable-next-line no-extra-parens
var desc = !!hasProtoAccessor && gOPD$1 && gOPD$1(Object.prototype, /** @type {keyof typeof Object.prototype} */ ('__proto__'));
var $Object$1 = Object;
var $getPrototypeOf = $Object$1.getPrototypeOf;
/** @type {import('./get')} */
var get = desc && typeof desc.get === 'function'
? callBindApplyHelpers([desc.get])
: typeof $getPrototypeOf === 'function'
? /** @type {import('./get')} */ function getDunder(value) {
// eslint-disable-next-line eqeqeq
return $getPrototypeOf(value == null ? value : $Object$1(value));
}
: false;
var getDunderProto = get;
/** @type {import('.')} */
var getProto = Reflect_getPrototypeOf
? function getProto(O) {
// @ts-expect-error TS can't narrow inside a closure, for some reason
return Reflect_getPrototypeOf(O);
}
: Object_getPrototypeOf
? function getProto(O) {
if (!O || (typeof O !== 'object' && typeof O !== 'function')) {
throw new TypeError('getProto: not an object');
}
// @ts-expect-error TS can't narrow inside a closure, for some reason
return Object_getPrototypeOf(O);
}
: getDunderProto
? function getProto(O) {
// @ts-expect-error TS can't narrow inside a closure, for some reason
return getDunderProto(O);
}
: null;
var call = Function.prototype.call;
var $hasOwn = Object.prototype.hasOwnProperty;
/** @type {import('.')} */
var hasown = functionBind.call(call, $hasOwn);
var $TypeError = esErrors;
var $EvalError = _eval;
var $RangeError = range;
var $ReferenceError = ref;
var $SyntaxError = syntax;
var $URIError = uri;
var abs = abs$1;
var floor = floor$1;
var max = max$2;
var min = min$1;
var pow = pow$1;
var round = round$1;
var sign = sign$1;
var $defineProperty = esDefineProperty;
var hasOwn = hasown;
var undefined$1;
var $Function = Function;
// eslint-disable-next-line consistent-return
var getEvalledConstructor = function (expressionSyntax) {
try {
return $Function('"use strict"; return (' + expressionSyntax + ').constructor;')();
} catch (e) {}
};
var throwTypeError = function () {
throw new $TypeError$1();
};
var ThrowTypeError = gOPD$1
? (function () {
try {
// eslint-disable-next-line no-unused-expressions, no-caller, no-restricted-properties
arguments.callee; // IE 8 does not throw here
return throwTypeError;
} catch (calleeThrows) {
try {
// IE 8 throws on Object.getOwnPropertyDescriptor(arguments, '')
return gOPD$1(arguments, 'callee').get;
} catch (gOPDthrows) {
return throwTypeError;
}
}
}())
: throwTypeError;
var hasSymbols$1 = hasSymbols$2();
var needsEval = {};
var TypedArray = typeof Uint8Array === 'undefined' || !getProto ? undefined$1 : getProto(Uint8Array);
var INTRINSICS = {
__proto__: null,
'%AggregateError%': typeof AggregateError === 'undefined' ? undefined$1 : AggregateError,
'%Array%': Array,
'%ArrayBuffer%': typeof ArrayBuffer === 'undefined' ? undefined$1 : ArrayBuffer,
'%ArrayIteratorPrototype%': hasSymbols$1 && getProto ? getProto([][Symbol.iterator]()) : undefined$1,
'%AsyncFromSyncIteratorPrototype%': undefined$1,
'%AsyncFunction%': needsEval,
'%AsyncGenerator%': needsEval,
'%AsyncGeneratorFunction%': needsEval,
'%AsyncIteratorPrototype%': needsEval,
'%Atomics%': typeof Atomics === 'undefined' ? undefined$1 : Atomics,
'%BigInt%': typeof BigInt === 'undefined' ? undefined$1 : BigInt,
'%BigInt64Array%': typeof BigInt64Array === 'undefined' ? undefined$1 : BigInt64Array,
'%BigUint64Array%': typeof BigUint64Array === 'undefined' ? undefined$1 : BigUint64Array,
'%Boolean%': Boolean,
'%DataView%': typeof DataView === 'undefined' ? undefined$1 : DataView,
'%Date%': Date,
'%decodeURI%': decodeURI,
'%decodeURIComponent%': decodeURIComponent,
'%encodeURI%': encodeURI,
'%encodeURIComponent%': encodeURIComponent,
'%Error%': $TypeError,
'%eval%': eval, // eslint-disable-line no-eval
'%EvalError%': $EvalError,
'%Float32Array%': typeof Float32Array === 'undefined' ? undefined$1 : Float32Array,
'%Float64Array%': typeof Float64Array === 'undefined' ? undefined$1 : Float64Array,
'%FinalizationRegistry%': typeof FinalizationRegistry === 'undefined' ? undefined$1 : FinalizationRegistry,
'%Function%': $Function,
'%GeneratorFunction%': needsEval,
'%Int8Array%': typeof Int8Array === 'undefined' ? undefined$1 : Int8Array,
'%Int16Array%': typeof Int16Array === 'undefined' ? undefined$1 : Int16Array,
'%Int32Array%': typeof Int32Array === 'undefined' ? undefined$1 : Int32Array,
'%isFinite%': isFinite,
'%isNaN%': isNaN,
'%IteratorPrototype%': hasSymbols$1 && getProto ? getProto(getProto([][Symbol.iterator]())) : undefined$1,
'%JSON%': typeof JSON === 'object' ? JSON : undefined$1,
'%Map%': typeof Map === 'undefined' ? undefined$1 : Map,
'%MapIteratorPrototype%': typeof Map === 'undefined' || !hasSymbols$1 || !getProto ? undefined$1 : getProto(new Map()[Symbol.iterator]()),
'%Math%': Math,
'%Number%': Number,
'%Object%': $Object$2,
'%Object.getOwnPropertyDescriptor%': gOPD$1,
'%parseFloat%': parseFloat,
'%parseInt%': parseInt,
'%Promise%': typeof Promise === 'undefined' ? undefined$1 : Promise,
'%Proxy%': typeof Proxy === 'undefined' ? undefined$1 : Proxy,
'%RangeError%': $RangeError,
'%ReferenceError%': $ReferenceError,
'%Reflect%': typeof Reflect === 'undefined' ? undefined$1 : Reflect,
'%RegExp%': RegExp,
'%Set%': typeof Set === 'undefined' ? undefined$1 : Set,
'%SetIteratorPrototype%': typeof Set === 'undefined' || !hasSymbols$1 || !getProto ? undefined$1 : getProto(new Set()[Symbol.iterator]()),
'%SharedArrayBuffer%': typeof SharedArrayBuffer === 'undefined' ? undefined$1 : SharedArrayBuffer,
'%String%': String,
'%StringIteratorPrototype%': hasSymbols$1 && getProto ? getProto(''[Symbol.iterator]()) : undefined$1,
'%Symbol%': hasSymbols$1 ? Symbol : undefined$1,
'%SyntaxError%': $SyntaxError,
'%ThrowTypeError%': ThrowTypeError,
'%TypedArray%': TypedArray,
'%TypeError%': $TypeError$1,
'%Uint8Array%': typeof Uint8Array === 'undefined' ? undefined$1 : Uint8Array,
'%Uint8ClampedArray%': typeof Uint8ClampedArray === 'undefined' ? undefined$1 : Uint8ClampedArray,
'%Uint16Array%': typeof Uint16Array === 'undefined' ? undefined$1 : Uint16Array,
'%Uint32Array%': typeof Uint32Array === 'undefined' ? undefined$1 : Uint32Array,
'%URIError%': $URIError,
'%WeakMap%': typeof WeakMap === 'undefined' ? undefined$1 : WeakMap,
'%WeakRef%': typeof WeakRef === 'undefined' ? undefined$1 : WeakRef,
'%WeakSet%': typeof WeakSet === 'undefined' ? undefined$1 : WeakSet,
'%Function.prototype.call%': functionCall,
'%Function.prototype.apply%': functionApply,
'%Object.defineProperty%': $defineProperty,
'%Object.getPrototypeOf%': Object_getPrototypeOf,
'%Math.abs%': abs,
'%Math.floor%': floor,
'%Math.max%': max,
'%Math.min%': min,
'%Math.pow%': pow,
'%Math.round%': round,
'%Math.sign%': sign,
'%Reflect.getPrototypeOf%': Reflect_getPrototypeOf
};
if (getProto) {
try {
null.error; // eslint-disable-line no-unused-expressions
} catch (e) {
// https://github.com/tc39/proposal-shadowrealm/pull/384#issuecomment-1364264229
var errorProto = getProto(getProto(e));
INTRINSICS['%Error.prototype%'] = errorProto;
}
}
var doEval = function doEval(name) {
var value;
if (name === '%AsyncFunction%') {
value = getEvalledConstructor('async function () {}');
} else if (name === '%GeneratorFunction%') {
value = getEvalledConstructor('function* () {}');
} else if (name === '%AsyncGeneratorFunction%') {
value = getEvalledConstructor('async function* () {}');
} else if (name === '%AsyncGenerator%') {
var fn = doEval('%AsyncGeneratorFunction%');
if (fn) {
value = fn.prototype;
}
} else if (name === '%AsyncIteratorPrototype%') {
var gen = doEval('%AsyncGenerator%');
if (gen && getProto) {
value = getProto(gen.prototype);
}
}
INTRINSICS[name] = value;
return value;
};
var LEGACY_ALIASES = {
__proto__: null,
'%ArrayBufferPrototype%': ['ArrayBuffer', 'prototype'],
'%ArrayPrototype%': ['Array', 'prototype'],
'%ArrayProto_entries%': ['Array', 'prototype', 'entries'],
'%ArrayProto_forEach%': ['Array', 'prototype', 'forEach'],
'%ArrayProto_keys%': ['Array', 'prototype', 'keys'],
'%ArrayProto_values%': ['Array', 'prototype', 'values'],
'%AsyncFunctionPrototype%': ['AsyncFunction', 'prototype'],
'%AsyncGenerator%': ['AsyncGeneratorFunction', 'prototype'],
'%AsyncGeneratorPrototype%': ['AsyncGeneratorFunction', 'prototype', 'prototype'],
'%BooleanPrototype%': ['Boolean', 'prototype'],
'%DataViewPrototype%': ['DataView', 'prototype'],
'%DatePrototype%': ['Date', 'prototype'],
'%ErrorPrototype%': ['Error', 'prototype'],
'%EvalErrorPrototype%': ['EvalError', 'prototype'],
'%Float32ArrayPrototype%': ['Float32Array', 'prototype'],
'%Float64ArrayPrototype%': ['Float64Array', 'prototype'],
'%FunctionPrototype%': ['Function', 'prototype'],
'%Generator%': ['GeneratorFunction', 'prototype'],
'%GeneratorPrototype%': ['GeneratorFunction', 'prototype', 'prototype'],
'%Int8ArrayPrototype%': ['Int8Array', 'prototype'],
'%Int16ArrayPrototype%': ['Int16Array', 'prototype'],
'%Int32ArrayPrototype%': ['Int32Array', 'prototype'],
'%JSONParse%': ['JSON', 'parse'],
'%JSONStringify%': ['JSON', 'stringify'],
'%MapPrototype%': ['Map', 'prototype'],
'%NumberPrototype%': ['Number', 'prototype'],
'%ObjectPrototype%': ['Object', 'prototype'],
'%ObjProto_toString%': ['Object', 'prototype', 'toString'],
'%ObjProto_valueOf%': ['Object', 'prototype', 'valueOf'],
'%PromisePrototype%': ['Promise', 'prototype'],
'%PromiseProto_then%': ['Promise', 'prototype', 'then'],
'%Promise_all%': ['Promise', 'all'],
'%Promise_reject%': ['Promise', 'reject'],
'%Promise_resolve%': ['Promise', 'resolve'],
'%RangeErrorPrototype%': ['RangeError', 'prototype'],
'%ReferenceErrorPrototype%': ['ReferenceError', 'prototype'],
'%RegExpPrototype%': ['RegExp', 'prototype'],
'%SetPrototype%': ['Set', 'prototype'],
'%SharedArrayBufferPrototype%': ['SharedArrayBuffer', 'prototype'],
'%StringPrototype%': ['String', 'prototype'],
'%SymbolPrototype%': ['Symbol', 'prototype'],
'%SyntaxErrorPrototype%': ['SyntaxError', 'prototype'],
'%TypedArrayPrototype%': ['TypedArray', 'prototype'],
'%TypeErrorPrototype%': ['TypeError', 'prototype'],
'%Uint8ArrayPrototype%': ['Uint8Array', 'prototype'],
'%Uint8ClampedArrayPrototype%': ['Uint8ClampedArray', 'prototype'],
'%Uint16ArrayPrototype%': ['Uint16Array', 'prototype'],
'%Uint32ArrayPrototype%': ['Uint32Array', 'prototype'],
'%URIErrorPrototype%': ['URIError', 'prototype'],
'%WeakMapPrototype%': ['WeakMap', 'prototype'],
'%WeakSetPrototype%': ['WeakSet', 'prototype']
};
var $concat = functionBind.call(functionCall, Array.prototype.concat);
var $spliceApply = functionBind.call(functionApply, Array.prototype.splice);
var $replace = functionBind.call(functionCall, String.prototype.replace);
var $strSlice = functionBind.call(functionCall, String.prototype.slice);
var $exec$1 = functionBind.call(functionCall, RegExp.prototype.exec);
/* adapted from https://github.com/lodash/lodash/blob/4.17.15/dist/lodash.js#L6735-L6744 */
var rePropName = /[^%.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|%$))/g;
var reEscapeChar = /\\(\\)?/g; /** Used to match backslashes in property paths. */
var stringToPath = function stringToPath(string) {
var first = $strSlice(string, 0, 1);
var last = $strSlice(string, -1);
if (first === '%' && last !== '%') {
throw new $SyntaxError('invalid intrinsic syntax, expected closing `%`');
} else if (last === '%' && first !== '%') {
throw new $SyntaxError('invalid intrinsic syntax, expected opening `%`');
}
var result = [];
$replace(string, rePropName, function (match, number, quote, subString) {
result[result.length] = quote ? $replace(subString, reEscapeChar, '$1') : number || match;
});
return result;
};
/* end adaptation */
var getBaseIntrinsic = function getBaseIntrinsic(name, allowMissing) {
var intrinsicName = name;
var alias;
if (hasOwn(LEGACY_ALIASES, intrinsicName)) {
alias = LEGACY_ALIASES[intrinsicName];
intrinsicName = '%' + alias[0] + '%';
}
if (hasOwn(INTRINSICS, intrinsicName)) {
var value = INTRINSICS[intrinsicName];
if (value === needsEval) {
value = doEval(intrinsicName);
}
if (typeof value === 'undefined' && !allowMissing) {
throw new $TypeError$1('intrinsic ' + name + ' exists, but is not available. Please file an issue!');
}
return {
alias: alias,
name: intrinsicName,
value: value
};
}
throw new $SyntaxError('intrinsic ' + name + ' does not exist!');
};
var getIntrinsic = function GetIntrinsic(name, allowMissing) {
if (typeof name !== 'string' || name.length === 0) {
throw new $TypeError$1('intrinsic name must be a non-empty string');
}
if (arguments.length > 1 && typeof allowMissing !== 'boolean') {
throw new $TypeError$1('"allowMissing" argument must be a boolean');
}
if ($exec$1(/^%?[^%]*%?$/, name) === null) {
throw new $SyntaxError('`%` may not be present anywhere but at the beginning and end of the intrinsic name');
}
var parts = stringToPath(name);
var intrinsicBaseName = parts.length > 0 ? parts[0] : '';
var intrinsic = getBaseIntrinsic('%' + intrinsicBaseName + '%', allowMissing);
var intrinsicRealName = intrinsic.name;
var value = intrinsic.value;
var skipFurtherCaching = false;
var alias = intrinsic.alias;
if (alias) {
intrinsicBaseName = alias[0];
$spliceApply(parts, $concat([0, 1], alias));
}
for (var i = 1, isOwn = true; i < parts.length; i += 1) {
var part = parts[i];
var first = $strSlice(part, 0, 1);
var last = $strSlice(part, -1);
if (
(
(first === '"' || first === "'" || first === '`')
|| (last === '"' || last === "'" || last === '`')
)
&& first !== last
) {
throw new $SyntaxError('property names with quotes must have matching quotes');
}
if (part === 'constructor' || !isOwn) {
skipFurtherCaching = true;
}
intrinsicBaseName += '.' + part;
intrinsicRealName = '%' + intrinsicBaseName + '%';
if (hasOwn(INTRINSICS, intrinsicRealName)) {
value = INTRINSICS[intrinsicRealName];
} else if (value != null) {
if (!(part in value)) {
if (!allowMissing) {
throw new $TypeError$1('base intrinsic for ' + name + ' exists, but the property is not available.');
}
return void undefined$1;
}
if (gOPD$1 && (i + 1) >= parts.length) {
var desc = gOPD$1(value, part);
isOwn = !!desc;
// By convention, when a data property is converted to an accessor
// property to emulate a data property that does not suffer from
// the override mistake, that accessor's getter is marked with
// an `originalValue` property. Here, when we detect this, we
// uphold the illusion by pretending to see that original data
// property, i.e., returning the value rather than the getter
// itself.
if (isOwn && 'get' in desc && !('originalValue' in desc.get)) {
value = desc.get;
} else {
value = value[part];
}
} else {
isOwn = hasOwn(value, part);
value = value[part];
}
if (isOwn && !skipFurtherCaching) {
INTRINSICS[intrinsicRealName] = value;
}
}
}
return value;
};
var GetIntrinsic = getIntrinsic;
/** @type {(thisArg: string, searchString: string, position?: number) => number} */
var $indexOf = callBindApplyHelpers([GetIntrinsic('%String.prototype.indexOf%')]);
/** @type {import('.')} */
var callBound$1 = function callBoundIntrinsic(name, allowMissing) {
// eslint-disable-next-line no-extra-parens
var intrinsic = /** @type {Parameters<typeof callBindBasic>[0][0]} */ (GetIntrinsic(name, !!allowMissing));
if (typeof intrinsic === 'function' && $indexOf(name, '.prototype.') > -1) {
return callBindApplyHelpers([intrinsic]);
}
return intrinsic;
};
var callBound = callBound$1;
var hasToStringTag$2 = shams();
var $toString$1 = callBound('Object.prototype.toString');
/** @type {import('.')} */
var isStandardArguments = function isArguments(value) {
if (
hasToStringTag$2
&& value
&& typeof value === 'object'
&& Symbol.toStringTag in value
) {
return false;
}
return $toString$1(value) === '[object Arguments]';
};
/** @type {import('.')} */
var isLegacyArguments = function isArguments(value) {
if (isStandardArguments(value)) {
return true;
}
return value !== null
&& typeof value === 'object'
&& 'length' in value
&& typeof value.length === 'number'
&& value.length >= 0
&& $toString$1(value) !== '[object Array]'
&& 'callee' in value
&& $toString$1(value.callee) === '[object Function]';
};
var supportsStandardArguments = (function () {
return isStandardArguments(arguments);
}());
// @ts-expect-error TODO make this not error
isStandardArguments.isLegacyArguments = isLegacyArguments; // for tests
/** @type {import('.')} */
var isArguments$1 = supportsStandardArguments ? isStandardArguments : isLegacyArguments;
/** @type {import('.')} */
var defineDataProperty = function defineDataProperty(
obj,
property,
value
) {
if (!obj || (typeof obj !== 'object' && typeof obj !== 'function')) {
throw new $TypeError$1('`obj` must be an object or a function`');
}
if (typeof property !== 'string' && typeof property !== 'symbol') {
throw new $TypeError$1('`property` must be a string or a symbol`');
}
if (arguments.length > 3 && typeof arguments[3] !== 'boolean' && arguments[3] !== null) {
throw new $TypeError$1('`nonEnumerable`, if provided, must be a boolean or null');
}
if (arguments.length > 4 && typeof arguments[4] !== 'boolean' && arguments[4] !== null) {
throw new $TypeError$1('`nonWritable`, if provided, must be a boolean or null');
}
if (arguments.length > 5 && typeof arguments[5] !== 'boolean' && arguments[5] !== null) {
throw new $TypeError$1('`nonConfigurable`, if provided, must be a boolean or null');
}
if (arguments.length > 6 && typeof arguments[6] !== 'boolean') {
throw new $TypeError$1('`loose`, if provided, must be a boolean');
}
var nonEnumerable = arguments.length > 3 ? arguments[3] : null;
var nonWritable = arguments.length > 4 ? arguments[4] : null;
var nonConfigurable = arguments.length > 5 ? arguments[5] : null;
var loose = arguments.length > 6 ? arguments[6] : false;
/* @type {false | TypedPropertyDescriptor<unknown>} */
var desc = !!gOPD$1 && gOPD$1(obj, property);
if ($defineProperty) {
$defineProperty(obj, property, {
configurable: nonConfigurable === null && desc ? desc.configurable : !nonConfigurable,
enumerable: nonEnumerable === null && desc ? desc.enumerable : !nonEnumerable,
value: value,
writable: nonWritable === null && desc ? desc.writable : !nonWritable
});
} else if (loose || (!nonEnumerable && !nonWritable && !nonConfigurable)) {
// must fall back to [[Set]], and was not explicitly asked to make non-enumerable, non-writable, or non-configurable
obj[property] = value; // eslint-disable-line no-param-reassign
} else {
throw new $SyntaxError('This environment does not support defining a property as non-configurable, non-writable, or non-enumerable.');
}
};
var hasPropertyDescriptors = function hasPropertyDescriptors() {
return !!$defineProperty;
};
hasPropertyDescriptors.hasArrayLengthDefineBug = function hasArrayLengthDefineBug() {
// node v0.6 has a bug where array lengths can be Set but not Defined
if (!$defineProperty) {
return null;
}
try {
return $defineProperty([], 'length', { value: 1 }).length !== 1;
} catch (e) {
// In Firefox 4-22, defining length on an array throws an exception.
return true;
}
};
var hasPropertyDescriptors_1 = hasPropertyDescriptors;
var define = defineDataProperty;
var require$$0 = hasPropertyDescriptors_1;
var hasSymbols = typeof Symbol === 'function' && typeof Symbol('foo') === 'symbol';
var toStr$1 = Object.prototype.toString;
var concat = Array.prototype.concat;
var isFunction$1 = function (fn) {
return typeof fn === 'function' && toStr$1.call(fn) === '[object Function]';
};
var supportsDescriptors$2 = require$$0();
var defineProperty$2 = function (object, name, value, predicate) {
if (name in object) {
if (predicate === true) {
if (object[name] === value) {
return;
}
} else if (!isFunction$1(predicate) || !predicate()) {
return;
}
}
if (supportsDescriptors$2) {
define(object, name, value, true);
} else {
define(object, name, value);
}
};
var defineProperties = function (object, map) {
var predicates = arguments.length > 2 ? arguments[2] : {};
var props = objectKeys(map);
if (hasSymbols) {
props = concat.call(props, Object.getOwnPropertySymbols(map));
}
for (var i = 0; i < props.length; i += 1) {
defineProperty$2(object, props[i], map[props[i]], predicates[props[i]]);
}
};
defineProperties.supportsDescriptors = !!supportsDescriptors$2;
var defineProperties_1 = defineProperties;
var hasDescriptors$1 = require$$0();
var $floor = GetIntrinsic('%Math.floor%');
/** @type {import('.')} */
var setFunctionLength$1 = function setFunctionLength(fn, length) {
if (typeof fn !== 'function') {
throw new $TypeError$1('`fn` is not a function');
}
if (typeof length !== 'number' || length < 0 || length > 0xFFFFFFFF || $floor(length) !== length) {
throw new $TypeError$1('`length` must be a positive 32-bit integer');
}
var loose = arguments.length > 2 && !!arguments[2];
var functionLengthIsConfigurable = true;
var functionLengthIsWritable = true;
if ('length' in fn && gOPD$1) {
var desc = gOPD$1(fn, 'length');
if (desc && !desc.configurable) {
functionLengthIsConfigurable = false;
}
if (desc && !desc.writable) {
functionLengthIsWritable = false;
}
}
if (functionLengthIsConfigurable || functionLengthIsWritable || !loose) {
if (hasDescriptors$1) {
define(/** @type {Parameters<define>[0]} */ (fn), 'length', length, true, true);
} else {
define(/** @type {Parameters<define>[0]} */ (fn), 'length', length);
}
}
return fn;
};
/** @type {import('./applyBind')} */
var applyBind = function applyBind() {
return actualApply(functionBind, functionApply, arguments);
};
var setFunctionLength = setFunctionLength$1;
var callBind = createCommonjsModule(function (module) {
module.exports = function callBind(originalFunction) {
var func = callBindApplyHelpers(arguments);
var adjustedLength = originalFunction.length - (arguments.length - 1);
return setFunctionLength(
func,
1 + (adjustedLength > 0 ? adjustedLength : 0),
true
);
};
if ($defineProperty) {
$defineProperty(module.exports, 'apply', { value: applyBind });
} else {
module.exports.apply = applyBind;
}
});
callBind.apply;
var numberIsNaN = function (value) {
return value !== value;
};
var implementation$2 = function is(a, b) {
if (a === 0 && b === 0) {
return 1 / a === 1 / b;
}
if (a === b) {
return true;
}
if (numberIsNaN(a) && numberIsNaN(b)) {
return true;
}
return false;
};
var polyfill$2 = function getPolyfill() {
return typeof Object.is === 'function' ? Object.is : implementation$2;
};
var shim$1 = function shimObjectIs() {
var polyfill = polyfill$2();
defineProperties_1(Object, { is: polyfill }, {
is: function testObjectIs() {
return Object.is !== polyfill;
}
});
return polyfill;
};
var polyfill$1 = callBind(polyfill$2(), Object);
defineProperties_1(polyfill$1, {
getPolyfill: polyfill$2,
implementation: implementation$2,
shim: shim$1
});
var objectIs = polyfill$1;
var hasToStringTag$1 = shams();
/** @type {import('.')} */
var fn;
if (hasToStringTag$1) {
/** @type {(receiver: ThisParameterType<typeof RegExp.prototype.exec>, ...args: Parameters<typeof RegExp.prototype.exec>) => ReturnType<typeof RegExp.prototype.exec>} */
var $exec = callBound('RegExp.prototype.exec');
/** @type {object} */
var isRegexMarker = {};
var throwRegexMarker = function () {
throw isRegexMarker;
};
/** @type {{ toString(): never, valueOf(): never, [Symbol.toPrimitive]?(): never }} */
var badStringifier = {
toString: throwRegexMarker,
valueOf: throwRegexMarker
};
if (typeof Symbol.toPrimitive === 'symbol') {
badStringifier[Symbol.toPrimitive] = throwRegexMarker;
}
/** @type {import('.')} */
// @ts-expect-error TS can't figure out that the $exec call always throws
// eslint-disable-next-line consistent-return
fn = function isRegex(value) {
if (!value || typeof value !== 'object') {
return false;
}
// eslint-disable-next-line no-extra-parens
var descriptor = /** @type {NonNullable<typeof gOPD>} */ (gOPD$1)(/** @type {{ lastIndex?: unknown }} */ (value), 'lastIndex');
var hasLastIndexDataProperty = descriptor && hasOwn(descriptor, 'value');
if (!hasLastIndexDataProperty) {
return false;
}
try {
// eslint-disable-next-line no-extra-parens
$exec(value, /** @type {string} */ (/** @type {unknown} */ (badStringifier)));
} catch (e) {
return e === isRegexMarker;
}
};
} else {
/** @type {(receiver: ThisParameterType<typeof Object.prototype.toString>, ...args: Parameters<typeof Object.prototype.toString>) => ReturnType<typeof Object.prototype.toString>} */
var $toString = callBound('Object.prototype.toString');
/** @const @type {'[object RegExp]'} */
var regexClass = '[object RegExp]';
/** @type {import('.')} */
fn = function isRegex(value) {
// In older browsers, typeof regex incorrectly returns 'function'
if (!value || (typeof value !== 'object' && typeof value !== 'function')) {
return false;
}
return $toString(value) === regexClass;
};
}
var isRegex = fn;
var functionsHaveNames = function functionsHaveNames() {
return typeof function f() {}.name === 'string';
};
var gOPD = Object.getOwnPropertyDescriptor;
if (gOPD) {
try {
gOPD([], 'length');
} catch (e) {
// IE 8 has a broken gOPD
gOPD = null;
}
}
functionsHaveNames.functionsHaveConfigurableNames = function functionsHaveConfigurableNames() {
if (!functionsHaveNames() || !gOPD) {
return false;
}
var desc = gOPD(function () {}, 'name');
return !!desc && !!desc.configurable;
};
var $bind = Function.prototype.bind;
functionsHaveNames.boundFunctionsHaveNames = function boundFunctionsHaveNames() {
return functionsHaveNames() && typeof $bind === 'function' && function f() {}.bind().name !== '';
};
var functionsHaveNames_1 = functionsHaveNames;
var hasDescriptors = require$$0();
var functionsHaveConfigurableNames = functionsHaveNames_1.functionsHaveConfigurableNames();
/** @type {import('.')} */
var setFunctionName = function setFunctionName(fn, name) {
if (typeof fn !== 'function') {
throw new $TypeError$1('`fn` is not a function');
}
var loose = arguments.length > 2 && !!arguments[2];
if (!loose || functionsHaveConfigurableNames) {
if (hasDescriptors) {
define(/** @type {Parameters<define>[0]} */ (fn), 'name', name, true, true);
} else {
define(/** @type {Parameters<define>[0]} */ (fn), 'name', name);
}
}
return fn;
};
var $Object = Object;
var implementation$1 = setFunctionName(function flags() {
if (this == null || this !== $Object(this)) {
throw new $TypeError$1('RegExp.prototype.flags getter called on non-object');
}
var result = '';
if (this.hasIndices) {
result += 'd';
}
if (this.global) {
result += 'g';
}
if (this.ignoreCase) {
result += 'i';
}
if (this.multiline) {
result += 'm';
}
if (this.dotAll) {
result += 's';
}
if (this.unicode) {
result += 'u';
}
if (this.unicodeSets) {
result += 'v';
}
if (this.sticky) {
result += 'y';
}
return result;
}, 'get flags', true);
var supportsDescriptors$1 = defineProperties_1.supportsDescriptors;
var $gOPD = Object.getOwnPropertyDescriptor;
var polyfill = function getPolyfill() {
if (supportsDescriptors$1 && (/a/mig).flags === 'gim') {
var descriptor = $gOPD(RegExp.prototype, 'flags');
if (
descriptor
&& typeof descriptor.get === 'function'
&& 'dotAll' in RegExp.prototype
&& 'hasIndices' in RegExp.prototype
) {
/* eslint getter-return: 0 */
var calls = '';
var o = {};
Object.defineProperty(o, 'hasIndices', {
get: function () {
calls += 'd';
}
});
Object.defineProperty(o, 'sticky', {
get: function () {
calls += 'y';
}
});
descriptor.get.call(o);
if (calls === 'dy') {
return descriptor.get;
}
}
}
return implementation$1;
};
var supportsDescriptors = defineProperties_1.supportsDescriptors;
var defineProperty$1 = Object.defineProperty;
var regex = /a/;
var shim = function shimFlags() {
if (!supportsDescriptors || !getProto) {
throw new $TypeError('RegExp.prototype.flags requires a true ES5 environment that supports property descriptors');
}
var polyfill$1 = polyfill();
var proto = getProto(regex);
var descriptor = gOPD$1(proto, 'flags');
if (!descriptor || descriptor.get !== polyfill$1) {
defineProperty$1(proto, 'flags', {
configurable: true,
enumerable: false,
get: polyfill$1
});
}
return polyfill$1;
};
var flagsBound = callBind(polyfill());
defineProperties_1(flagsBound, {
getPolyfill: polyfill,
implementation: implementation$1,
shim: shim
});
var regexp_prototype_flags = flagsBound;
var getDay = callBound('Date.prototype.getDay');
/** @type {import('.')} */
var tryDateObject = function tryDateGetDayCall(value) {
try {
getDay(value);
return true;
} catch (e) {
return false;
}
};
/** @type {(value: unknown) => string} */
var toStr = callBound('Object.prototype.toString');
var dateClass = '[object Date]';
var hasToStringTag = shams();
/** @type {import('.')} */
var isDateObject = function isDateObject(value) {
if (typeof value !== 'object' || value === null) {
return false;
}
return hasToStringTag ? tryDateObject(value) : toStr(value) === dateClass;
};
var isArguments = isArguments$1;
var isDate = isDateObject;
var getTime = Date.prototype.getTime;
function deepEqual(actual, expected, options) {
var opts = options || {};
// 7.1. All identical values are equivalent, as determined by ===.
if (opts.strict ? objectIs(actual, expected) : actual === expected) {
return true;
}
// 7.3. Other pairs that do not both pass typeof value == 'object', equivalence is determined by ==.
if (!actual || !expected || (typeof actual !== 'object' && typeof expected !== 'object')) {
return opts.strict ? objectIs(actual, expected) : actual == expected;
}
/*
* 7.4. For all other Object pairs, including Array objects, equivalence is
* determined by having the same number of owned properties (as verified
* with Object.prototype.hasOwnProperty.call), the same set of keys
* (although not necessarily the same order), equivalent values for every
* corresponding key, and an identical 'prototype' property. Note: this
* accounts for both named and indexed properties on Arrays.
*/
// eslint-disable-next-line no-use-before-define
return objEquiv(actual, expected, opts);
}
function isUndefinedOrNull(value) {
return value === null || value === undefined;
}
function isBuffer(x) {
if (!x || typeof x !== 'object' || typeof x.length !== 'number') {
return false;
}
if (typeof x.copy !== 'function' || typeof x.slice !== 'function') {
return false;
}
if (x.length > 0 && typeof x[0] !== 'number') {
return false;
}
return true;
}
function objEquiv(a, b, opts) {
/* eslint max-statements: [2, 50] */
var i, key;
if (typeof a !== typeof b) { return false; }
if (isUndefinedOrNull(a) || isUndefinedOrNull(b)) { return false; }
// an identical 'prototype' property.
if (a.prototype !== b.prototype) { return false; }
if (isArguments(a) !== isArguments(b)) { return false; }
var aIsRegex = isRegex(a);
var bIsRegex = isRegex(b);
if (aIsRegex !== bIsRegex) { return false; }
if (aIsRegex || bIsRegex) {
return a.source === b.source && regexp_prototype_flags(a) === regexp_prototype_flags(b);
}
if (isDate(a) && isDate(b)) {
return getTime.call(a) === getTime.call(b);
}
var aIsBuffer = isBuffer(a);
var bIsBuffer = isBuffer(b);
if (aIsBuffer !== bIsBuffer) { return false; }
if (aIsBuffer || bIsBuffer) { // && would work too, because both are true or both false here
if (a.length !== b.length) { return false; }
for (i = 0; i < a.length; i++) {
if (a[i] !== b[i]) { return false; }
}
return true;
}
if (typeof a !== typeof b) { return false; }
try {
var ka = objectKeys(a);
var kb = objectKeys(b);
} catch (e) { // happens when one is a string literal and the other isn't
return false;
}
// having the same number of owned properties (keys incorporates hasOwnProperty)
if (ka.length !== kb.length) { return false; }
// the same set of keys (although not necessarily the same order),
ka.sort();
kb.sort();
// ~~~cheap key test
for (i = ka.length - 1; i >= 0; i--) {
if (ka[i] != kb[i]) { return false; }
}
// equivalent values for every corresponding key, and ~~~possibly expensive deep test
for (i = ka.length - 1; i >= 0; i--) {
key = ka[i];
if (!deepEqual(a[key], b[key], opts)) { return false; }
}
return true;
}
var deepEqual_1 = deepEqual;
/**!
* @fileOverview Kickass library to create and place poppers near their reference elements.
* @version 1.16.1
* @license
* Copyright (c) 2016 Federico Zivolo and contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && typeof navigator !== 'undefined';
var timeoutDuration = function () {
var longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];
for (var i = 0; i < longerTimeoutBrowsers.length; i += 1) {
if (isBrowser && navigator.userAgent.indexOf(longerTimeoutBrowsers[i]) >= 0) {
return 1;
}
}
return 0;
}();
function microtaskDebounce(fn) {
var called = false;
return function () {
if (called) {
return;
}
called = true;
window.Promise.resolve().then(function () {
called = false;
fn();
});
};
}
function taskDebounce(fn) {
var scheduled = false;
return function () {
if (!scheduled) {
scheduled = true;
setTimeout(function () {
scheduled = false;
fn();
}, timeoutDuration);
}
};
}
var supportsMicroTasks = isBrowser && window.Promise;
/**
* Create a debounced version of a method, that's asynchronously deferred
* but called in the minimum time possible.
*
* @method
* @memberof Popper.Utils
* @argument {Function} fn
* @returns {Function}
*/
var debounce = supportsMicroTasks ? microtaskDebounce : taskDebounce;
/**
* Check if the given variable is a function
* @method
* @memberof Popper.Utils
* @argument {Any} functionToCheck - variable to check
* @returns {Boolean} answer to: is a function?
*/
function isFunction(functionToCheck) {
var getType = {};
return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
}
/**
* Get CSS computed property of the given element
* @method
* @memberof Popper.Utils
* @argument {Eement} element
* @argument {String} property
*/
function getStyleComputedProperty(element, property) {
if (element.nodeType !== 1) {
return [];
}
// NOTE: 1 DOM access here
var window = element.ownerDocument.defaultView;
var css = window.getComputedStyle(element, null);
return property ? css[property] : css;
}
/**
* Returns the parentNode or the host of the element
* @method
* @memberof Popper.Utils
* @argument {Element} element
* @returns {Element} parent
*/
function getParentNode(element) {
if (element.nodeName === 'HTML') {
return element;
}
return element.parentNode || element.host;
}
/**
* Returns the scrolling parent of the given element
* @method
* @memberof Popper.Utils
* @argument {Element} element
* @returns {Element} scroll parent
*/
function getScrollParent(element) {
// Return body, `getScroll` will take care to get the correct `scrollTop` from it
if (!element) {
return document.body;
}
switch (element.nodeName) {
case 'HTML':
case 'BODY':
return element.ownerDocument.body;
case '#document':
return element.body;
}
// Firefox want us to check `-x` and `-y` variations as well
var _getStyleComputedProp = getStyleComputedProperty(element),
overflow = _getStyleComputedProp.overflow,
overflowX = _getStyleComputedProp.overflowX,
overflowY = _getStyleComputedProp.overflowY;
if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) {
return element;
}
return getScrollParent(getParentNode(element));
}
/**
* Returns the reference node of the reference object, or the reference object itself.
* @method
* @memberof Popper.Utils
* @param {Element|Object} reference - the reference element (the popper will be relative to this)
* @returns {Element} parent
*/
function getReferenceNode(reference) {
return reference && reference.referenceNode ? reference.referenceNode : reference;
}
var isIE11 = isBrowser && !!(window.MSInputMethodContext && document.documentMode);
var isIE10 = isBrowser && /MSIE 10/.test(navigator.userAgent);
/**
* Determines if the browser is Internet Explorer
* @method
* @memberof Popper.Utils
* @param {Number} version to check
* @returns {Boolean} isIE
*/
function isIE(version) {
if (version === 11) {
return isIE11;
}
if (version === 10) {
return isIE10;
}
return isIE11 || isIE10;
}
/**
* Returns the offset parent of the given element
* @method
* @memberof Popper.Utils
* @argument {Element} element
* @returns {Element} offset parent
*/
function getOffsetParent(element) {
if (!element) {
return document.documentElement;
}
var noOffsetParent = isIE(10) ? document.body : null;
// NOTE: 1 DOM access here
var offsetParent = element.offsetParent || null;
// Skip hidden elements which don't have an offsetParent
while (offsetParent === noOffsetParent && element.nextElementSibling) {
offsetParent = (element = element.nextElementSibling).offsetParent;
}
var nodeName = offsetParent && offsetParent.nodeName;
if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') {
return element ? element.ownerDocument.documentElement : document.documentElement;
}
// .offsetParent will return the closest TH, TD or TABLE in case
// no offsetParent is present, I hate this job...
if (['TH', 'TD', 'TABLE'].indexOf(offsetParent.nodeName) !== -1 && getStyleComputedProperty(offsetParent, 'position') === 'static') {
return getOffsetParent(offsetParent);
}
return offsetParent;
}
function isOffsetContainer(element) {
var nodeName = element.nodeName;
if (nodeName === 'BODY') {
return false;
}
return nodeName === 'HTML' || getOffsetParent(element.firstElementChild) === element;
}
/**
* Finds the root node (document, shadowDOM root) of the given element
* @method
* @memberof Popper.Utils
* @argument {Element} node
* @returns {Element} root node
*/
function getRoot(node) {
if (node.parentNode !== null) {
return getRoot(node.parentNode);
}
return node;
}
/**
* Finds the offset parent common to the two provided nodes
* @method
* @memberof Popper.Utils
* @argument {Element} element1
* @argument {Element} element2
* @returns {Element} common offset parent
*/
function findCommonOffsetParent(element1, element2) {
// This check is needed to avoid errors in case one of the elements isn't defined for any reason
if (!element1 || !element1.nodeType || !element2 || !element2.nodeType) {
return document.documentElement;
}
// Here we make sure to give as "start" the element that comes first in the DOM
var order = element1.compareDocumentPosition(element2) & Node.DOCUMENT_POSITION_FOLLOWING;
var start = order ? element1 : element2;
var end = order ? element2 : element1;
// Get common ancestor container
var range = document.createRange();
range.setStart(start, 0);
range.setEnd(end, 0);
var commonAncestorContainer = range.commonAncestorContainer;
// Both nodes are inside #document
if (element1 !== commonAncestorContainer && element2 !== commonAncestorContainer || start.contains(end)) {
if (isOffsetContainer(commonAncestorContainer)) {
return commonAncestorContainer;
}
return getOffsetParent(commonAncestorContainer);
}
// one of the nodes is inside shadowDOM, find which one
var element1root = getRoot(element1);
if (element1root.host) {
return findCommonOffsetParent(element1root.host, element2);
} else {
return findCommonOffsetParent(element1, getRoot(element2).host);
}
}
/**
* Gets the scroll value of the given element in the given side (top and left)
* @method
* @memberof Popper.Utils
* @argument {Element} element
* @argument {String} side `top` or `left`
* @returns {number} amount of scrolled pixels
*/
function getScroll(element) {
var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';
var upperSide = side === 'top' ? 'scrollTop' : 'scrollLeft';
var nodeName = element.nodeName;
if (nodeName === 'BODY' || nodeName === 'HTML') {
var html = element.ownerDocument.documentElement;
var scrollingElement = element.ownerDocument.scrollingElement || html;
return scrollingElement[upperSide];
}
return element[upperSide];
}
/*
* Sum or subtract the element scroll values (left and top) from a given rect object
* @method
* @memberof Popper.Utils
* @param {Object} rect - Rect object you want to change
* @param {HTMLElement} element - The element from the function reads the scroll values
* @param {Boolean} subtract - set to true if you want to subtract the scroll values
* @return {Object} rect - The modifier rect object
*/
function includeScroll(rect, element) {
var subtract = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var scrollTop = getScroll(element, 'top');
var scrollLeft = getScroll(element, 'left');
var modifier = subtract ? -1 : 1;
rect.top += scrollTop * modifier;
rect.bottom += scrollTop * modifier;
rect.left += scrollLeft * modifier;
rect.right += scrollLeft * modifier;
return rect;
}
/*
* Helper to detect borders of a given element
* @method
* @memberof Popper.Utils
* @param {CSSStyleDeclaration} styles
* Result of `getStyleComputedProperty` on the given element
* @param {String} axis - `x` or `y`
* @return {number} borders - The borders size of the given axis
*/
function getBordersSize(styles, axis) {
var sideA = axis === 'x' ? 'Left' : 'Top';
var sideB = sideA === 'Left' ? 'Right' : 'Bottom';
return parseFloat(styles['border' + sideA + 'Width']) + parseFloat(styles['border' + sideB + 'Width']);
}
function getSize(axis, body, html, computedStyle) {
return Math.max(body['offset' + axis], body['scroll' + axis], html['client' + axis], html['offset' + axis], html['scroll' + axis], isIE(10) ? parseInt(html['offset' + axis]) + parseInt(computedStyle['margin' + (axis === 'Height' ? 'Top' : 'Left')]) + parseInt(computedStyle['margin' + (axis === 'Height' ? 'Bottom' : 'Right')]) : 0);
}
function getWindowSizes(document) {
var body = document.body;
var html = document.documentElement;
var computedStyle = isIE(10) && getComputedStyle(html);
return {
height: getSize('Height', body, html, computedStyle),
width: getSize('Width', body, html, computedStyle)
};
}
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
var createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
var defineProperty = function (obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
};
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
/**
* Given element offsets, generate an output similar to getBoundingClientRect
* @method
* @memberof Popper.Utils
* @argument {Object} offsets
* @returns {Object} ClientRect like output
*/
function getClientRect(offsets) {
return _extends({}, offsets, {
right: offsets.left + offsets.width,
bottom: offsets.top + offsets.height
});
}
/**
* Get bounding client rect of given element
* @method
* @memberof Popper.Utils
* @param {HTMLElement} element
* @return {Object} client rect
*/
function getBoundingClientRect(element) {
var rect = {};
// IE10 10 FIX: Please, don't ask, the element isn't
// considered in DOM in some circumstances...
// This isn't reproducible in IE10 compatibility mode of IE11
try {
if (isIE(10)) {
rect = element.getBoundingClientRect();
var scrollTop = getScroll(element, 'top');
var scrollLeft = getScroll(element, 'left');
rect.top += scrollTop;
rect.left += scrollLeft;
rect.bottom += scrollTop;
rect.right += scrollLeft;
} else {
rect = element.getBoundingClientRect();
}
} catch (e) {}
var result = {
left: rect.left,
top: rect.top,
width: rect.right - rect.left,
height: rect.bottom - rect.top
};
// subtract scrollbar size from sizes
var sizes = element.nodeName === 'HTML' ? getWindowSizes(element.ownerDocument) : {};
var width = sizes.width || element.clientWidth || result.width;
var height = sizes.height || element.clientHeight || result.height;
var horizScrollbar = element.offsetWidth - width;
var vertScrollbar = element.offsetHeight - height;
// if an hypothetical scrollbar is detected, we must be sure it's not a `border`
// we make this check conditional for performance reasons
if (horizScrollbar || vertScrollbar) {
var styles = getStyleComputedProperty(element);
horizScrollbar -= getBordersSize(styles, 'x');
vertScrollbar -= getBordersSize(styles, 'y');
result.width -= horizScrollbar;
result.height -= vertScrollbar;
}
return getClientRect(result);
}
function getOffsetRectRelativeToArbitraryNode(children, parent) {
var fixedPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var isIE10 = isIE(10);
var isHTML = parent.nodeName === 'HTML';
var childrenRect = getBoundingClientRect(children);
var parentRect = getBoundingClientRect(parent);
var scrollParent = getScrollParent(children);
var styles = getStyleComputedProperty(parent);
var borderTopWidth = parseFloat(styles.borderTopWidth);
var borderLeftWidth = parseFloat(styles.borderLeftWidth);
// In cases where the parent is fixed, we must ignore negative scroll in offset calc
if (fixedPosition && isHTML) {
parentRect.top = Math.max(parentRect.top, 0);
parentRect.left = Math.max(parentRect.left, 0);
}
var offsets = getClientRect({
top: childrenRect.top - parentRect.top - borderTopWidth,
left: childrenRect.left - parentRect.left - borderLeftWidth,
width: childrenRect.width,
height: childrenRect.height
});
offsets.marginTop = 0;
offsets.marginLeft = 0;
// Subtract margins of documentElement in case it's being used as parent
// we do this only on HTML because it's the only element that behaves
// differently when margins are applied to it. The margins are included in
// the box of the documentElement, in the other cases not.
if (!isIE10 && isHTML) {
var marginTop = parseFloat(styles.marginTop);
var marginLeft = parseFloat(styles.marginLeft);
offsets.top -= borderTopWidth - marginTop;
offsets.bottom -= borderTopWidth - marginTop;
offsets.left -= borderLeftWidth - marginLeft;
offsets.right -= borderLeftWidth - marginLeft;
// Attach marginTop and marginLeft because in some circumstances we may need them
offsets.marginTop = marginTop;
offsets.marginLeft = marginLeft;
}
if (isIE10 && !fixedPosition ? parent.contains(scrollParent) : parent === scrollParent && scrollParent.nodeName !== 'BODY') {
offsets = includeScroll(offsets, parent);
}
return offsets;
}
function getViewportOffsetRectRelativeToArtbitraryNode(element) {
var excludeScroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var html = element.ownerDocument.documentElement;
var relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html);
var width = Math.max(html.clientWidth, window.innerWidth || 0);
var height = Math.max(html.clientHeight, window.innerHeight || 0);
var scrollTop = !excludeScroll ? getScroll(html) : 0;
var scrollLeft = !excludeScroll ? getScroll(html, 'left') : 0;
var offset = {
top: scrollTop - relativeOffset.top + relativeOffset.marginTop,
left: scrollLeft - relativeOffset.left + relativeOffset.marginLeft,
width: width,
height: height
};
return getClientRect(offset);
}
/**
* Check if the given element is fixed or is inside a fixed parent
* @method
* @memberof Popper.Utils
* @argument {Element} element
* @argument {Element} customContainer
* @returns {Boolean} answer to "isFixed?"
*/
function isFixed(element) {
var nodeName = element.nodeName;
if (nodeName === 'BODY' || nodeName === 'HTML') {
return false;
}
if (getStyleComputedProperty(element, 'position') === 'fixed') {
return true;
}
var parentNode = getParentNode(element);
if (!parentNode) {
return false;
}
return isFixed(parentNode);
}
/**
* Finds the first parent of an element that has a transformed property defined
* @method
* @memberof Popper.Utils
* @argument {Element} element
* @returns {Element} first transformed parent or documentElement
*/
function getFixedPositionOffsetParent(element) {
// This check is needed to avoid errors in case one of the elements isn't defined for any reason
if (!element || !element.parentElement || isIE()) {
return document.documentElement;
}
var el = element.parentElement;
while (el && getStyleComputedProperty(el, 'transform') === 'none') {
el = el.parentElement;
}
return el || document.documentElement;
}
/**
* Computed the boundaries limits and return them
* @method
* @memberof Popper.Utils
* @param {HTMLElement} popper
* @param {HTMLElement} reference
* @param {number} padding
* @param {HTMLElement} boundariesElement - Element used to define the boundaries
* @param {Boolean} fixedPosition - Is in fixed position mode
* @returns {Object} Coordinates of the boundaries
*/
function getBoundaries(popper, reference, padding, boundariesElement) {
var fixedPosition = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
// NOTE: 1 DOM access here
var boundaries = { top: 0, left: 0 };
var offsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));
// Handle viewport case
if (boundariesElement === 'viewport') {
boundaries = getViewportOffsetRectRelativeToArtbitraryNode(offsetParent, fixedPosition);
} else {
// Handle other cases based on DOM element used as boundaries
var boundariesNode = void 0;
if (boundariesElement === 'scrollParent') {
boundariesNode = getScrollParent(getParentNode(reference));
if (boundariesNode.nodeName === 'BODY') {
boundariesNode = popper.ownerDocument.documentElement;
}
} else if (boundariesElement === 'window') {
boundariesNode = popper.ownerDocument.documentElement;
} else {
boundariesNode = boundariesElement;
}
var offsets = getOffsetRectRelativeToArbitraryNode(boundariesNode, offsetParent, fixedPosition);
// In case of HTML, we need a different computation
if (boundariesNode.nodeName === 'HTML' && !isFixed(offsetParent)) {
var _getWindowSizes = getWindowSizes(popper.ownerDocument),
height = _getWindowSizes.height,
width = _getWindowSizes.width;
boundaries.top += offsets.top - offsets.marginTop;
boundaries.bottom = height + offsets.top;
boundaries.left += offsets.left - offsets.marginLeft;
boundaries.right = width + offsets.left;
} else {
// for all the other DOM elements, this one is good
boundaries = offsets;
}
}
// Add paddings
padding = padding || 0;
var isPaddingNumber = typeof padding === 'number';
boundaries.left += isPaddingNumber ? padding : padding.left || 0;
boundaries.top += isPaddingNumber ? padding : padding.top || 0;
boundaries.right -= isPaddingNumber ? padding : padding.right || 0;
boundaries.bottom -= isPaddingNumber ? padding : padding.bottom || 0;
return boundaries;
}
function getArea(_ref) {
var width = _ref.width,
height = _ref.height;
return width * height;
}
/**
* Utility used to transform the `auto` placement to the placement with more
* available space.
* @method
* @memberof Popper.Utils
* @argument {Object} data - The data object generated by update method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function computeAutoPlacement(placement, refRect, popper, reference, boundariesElement) {
var padding = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
if (placement.indexOf('auto') === -1) {
return placement;
}
var boundaries = getBoundaries(popper, reference, padding, boundariesElement);
var rects = {
top: {
width: boundaries.width,
height: refRect.top - boundaries.top
},
right: {
width: boundaries.right - refRect.right,
height: boundaries.height
},
bottom: {
width: boundaries.width,
height: boundaries.bottom - refRect.bottom
},
left: {
width: refRect.left - boundaries.left,
height: boundaries.height
}
};
var sortedAreas = Object.keys(rects).map(function (key) {
return _extends({
key: key
}, rects[key], {
area: getArea(rects[key])
});
}).sort(function (a, b) {
return b.area - a.area;
});
var filteredAreas = sortedAreas.filter(function (_ref2) {
var width = _ref2.width,
height = _ref2.height;
return width >= popper.clientWidth && height >= popper.clientHeight;
});
var computedPlacement = filteredAreas.length > 0 ? filteredAreas[0].key : sortedAreas[0].key;
var variation = placement.split('-')[1];
return computedPlacement + (variation ? '-' + variation : '');
}
/**
* Get offsets to the reference element
* @method
* @memberof Popper.Utils
* @param {Object} state
* @param {Element} popper - the popper element
* @param {Element} reference - the reference element (the popper will be relative to this)
* @param {Element} fixedPosition - is in fixed position mode
* @returns {Object} An object containing the offsets which will be applied to the popper
*/
function getReferenceOffsets(state, popper, reference) {
var fixedPosition = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
var commonOffsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));
return getOffsetRectRelativeToArbitraryNode(reference, commonOffsetParent, fixedPosition);
}
/**
* Get the outer sizes of the given element (offset size + margins)
* @method
* @memberof Popper.Utils
* @argument {Element} element
* @returns {Object} object containing width and height properties
*/
function getOuterSizes(element) {
var window = element.ownerDocument.defaultView;
var styles = window.getComputedStyle(element);
var x = parseFloat(styles.marginTop || 0) + parseFloat(styles.marginBottom || 0);
var y = parseFloat(styles.marginLeft || 0) + parseFloat(styles.marginRight || 0);
var result = {
width: element.offsetWidth + y,
height: element.offsetHeight + x
};
return result;
}
/**
* Get the opposite placement of the given one
* @method
* @memberof Popper.Utils
* @argument {String} placement
* @returns {String} flipped placement
*/
function getOppositePlacement(placement) {
var hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' };
return placement.replace(/left|right|bottom|top/g, function (matched) {
return hash[matched];
});
}
/**
* Get offsets to the popper
* @method
* @memberof Popper.Utils
* @param {Object} position - CSS position the Popper will get applied
* @param {HTMLElement} popper - the popper element
* @param {Object} referenceOffsets - the reference offsets (the popper will be relative to this)
* @param {String} placement - one of the valid placement options
* @returns {Object} popperOffsets - An object containing the offsets which will be applied to the popper
*/
function getPopperOffsets(popper, referenceOffsets, placement) {
placement = placement.split('-')[0];
// Get popper node sizes
var popperRect = getOuterSizes(popper);
// Add position, width and height to our offsets object
var popperOffsets = {
width: popperRect.width,
height: popperRect.height
};
// depending by the popper placement we have to compute its offsets slightly differently
var isHoriz = ['right', 'left'].indexOf(placement) !== -1;
var mainSide = isHoriz ? 'top' : 'left';
var secondarySide = isHoriz ? 'left' : 'top';
var measurement = isHoriz ? 'height' : 'width';
var secondaryMeasurement = !isHoriz ? 'height' : 'width';
popperOffsets[mainSide] = referenceOffsets[mainSide] + referenceOffsets[measurement] / 2 - popperRect[measurement] / 2;
if (placement === secondarySide) {
popperOffsets[secondarySide] = referenceOffsets[secondarySide] - popperRect[secondaryMeasurement];
} else {
popperOffsets[secondarySide] = referenceOffsets[getOppositePlacement(secondarySide)];
}
return popperOffsets;
}
/**
* Mimics the `find` method of Array
* @method
* @memberof Popper.Utils
* @argument {Array} arr
* @argument prop
* @argument value
* @returns index or -1
*/
function find(arr, check) {
// use native find if supported
if (Array.prototype.find) {
return arr.find(check);
}
// use `filter` to obtain the same behavior of `find`
return arr.filter(check)[0];
}
/**
* Return the index of the matching object
* @method
* @memberof Popper.Utils
* @argument {Array} arr
* @argument prop
* @argument value
* @returns index or -1
*/
function findIndex(arr, prop, value) {
// use native findIndex if supported
if (Array.prototype.findIndex) {
return arr.findIndex(function (cur) {
return cur[prop] === value;
});
}
// use `find` + `indexOf` if `findIndex` isn't supported
var match = find(arr, function (obj) {
return obj[prop] === value;
});
return arr.indexOf(match);
}
/**
* Loop trough the list of modifiers and run them in order,
* each of them will then edit the data object.
* @method
* @memberof Popper.Utils
* @param {dataObject} data
* @param {Array} modifiers
* @param {String} ends - Optional modifier name used as stopper
* @returns {dataObject}
*/
function runModifiers(modifiers, data, ends) {
var modifiersToRun = ends === undefined ? modifiers : modifiers.slice(0, findIndex(modifiers, 'name', ends));
modifiersToRun.forEach(function (modifier) {
if (modifier['function']) {
// eslint-disable-line dot-notation
console.warn('`modifier.function` is deprecated, use `modifier.fn`!');
}
var fn = modifier['function'] || modifier.fn; // eslint-disable-line dot-notation
if (modifier.enabled && isFunction(fn)) {
// Add properties to offsets to make them a complete clientRect object
// we do this before each modifier to make sure the previous one doesn't
// mess with these values
data.offsets.popper = getClientRect(data.offsets.popper);
data.offsets.reference = getClientRect(data.offsets.reference);
data = fn(data, modifier);
}
});
return data;
}
/**
* Updates the position of the popper, computing the new offsets and applying
* the new style.<br />
* Prefer `scheduleUpdate` over `update` because of performance reasons.
* @method
* @memberof Popper
*/
function update() {
// if popper is destroyed, don't perform any further update
if (this.state.isDestroyed) {
return;
}
var data = {
instance: this,
styles: {},
arrowStyles: {},
attributes: {},
flipped: false,
offsets: {}
};
// compute reference element offsets
data.offsets.reference = getReferenceOffsets(this.state, this.popper, this.reference, this.options.positionFixed);
// compute auto placement, store placement inside the data object,
// modifiers will be able to edit `placement` if needed
// and refer to originalPlacement to know the original value
data.placement = computeAutoPlacement(this.options.placement, data.offsets.reference, this.popper, this.reference, this.options.modifiers.flip.boundariesElement, this.options.modifiers.flip.padding);
// store the computed placement inside `originalPlacement`
data.originalPlacement = data.placement;
data.positionFixed = this.options.positionFixed;
// compute the popper offsets
data.offsets.popper = getPopperOffsets(this.popper, data.offsets.reference, data.placement);
data.offsets.popper.position = this.options.positionFixed ? 'fixed' : 'absolute';
// run the modifiers
data = runModifiers(this.modifiers, data);
// the first `update` will call `onCreate` callback
// the other ones will call `onUpdate` callback
if (!this.state.isCreated) {
this.state.isCreated = true;
this.options.onCreate(data);
} else {
this.options.onUpdate(data);
}
}
/**
* Helper used to know if the given modifier is enabled.
* @method
* @memberof Popper.Utils
* @returns {Boolean}
*/
function isModifierEnabled(modifiers, modifierName) {
return modifiers.some(function (_ref) {
var name = _ref.name,
enabled = _ref.enabled;
return enabled && name === modifierName;
});
}
/**
* Get the prefixed supported property name
* @method
* @memberof Popper.Utils
* @argument {String} property (camelCase)
* @returns {String} prefixed property (camelCase or PascalCase, depending on the vendor prefix)
*/
function getSupportedPropertyName(property) {
var prefixes = [false, 'ms', 'Webkit', 'Moz', 'O'];
var upperProp = property.charAt(0).toUpperCase() + property.slice(1);
for (var i = 0; i < prefixes.length; i++) {
var prefix = prefixes[i];
var toCheck = prefix ? '' + prefix + upperProp : property;
if (typeof document.body.style[toCheck] !== 'undefined') {
return toCheck;
}
}
return null;
}
/**
* Destroys the popper.
* @method
* @memberof Popper
*/
function destroy() {
this.state.isDestroyed = true;
// touch DOM only if `applyStyle` modifier is enabled
if (isModifierEnabled(this.modifiers, 'applyStyle')) {
this.popper.removeAttribute('x-placement');
this.popper.style.position = '';
this.popper.style.top = '';
this.popper.style.left = '';
this.popper.style.right = '';
this.popper.style.bottom = '';
this.popper.style.willChange = '';
this.popper.style[getSupportedPropertyName('transform')] = '';
}
this.disableEventListeners();
// remove the popper if user explicitly asked for the deletion on destroy
// do not use `remove` because IE11 doesn't support it
if (this.options.removeOnDestroy) {
this.popper.parentNode.removeChild(this.popper);
}
return this;
}
/**
* Get the window associated with the element
* @argument {Element} element
* @returns {Window}
*/
function getWindow(element) {
var ownerDocument = element.ownerDocument;
return ownerDocument ? ownerDocument.defaultView : window;
}
function attachToScrollParents(scrollParent, event, callback, scrollParents) {
var isBody = scrollParent.nodeName === 'BODY';
var target = isBody ? scrollParent.ownerDocument.defaultView : scrollParent;
target.addEventListener(event, callback, { passive: true });
if (!isBody) {
attachToScrollParents(getScrollParent(target.parentNode), event, callback, scrollParents);
}
scrollParents.push(target);
}
/**
* Setup needed event listeners used to update the popper position
* @method
* @memberof Popper.Utils
* @private
*/
function setupEventListeners(reference, options, state, updateBound) {
// Resize event listener on window
state.updateBound = updateBound;
getWindow(reference).addEventListener('resize', state.updateBound, { passive: true });
// Scroll event listener on scroll parents
var scrollElement = getScrollParent(reference);
attachToScrollParents(scrollElement, 'scroll', state.updateBound, state.scrollParents);
state.scrollElement = scrollElement;
state.eventsEnabled = true;
return state;
}
/**
* It will add resize/scroll events and start recalculating
* position of the popper element when they are triggered.
* @method
* @memberof Popper
*/
function enableEventListeners() {
if (!this.state.eventsEnabled) {
this.state = setupEventListeners(this.reference, this.options, this.state, this.scheduleUpdate);
}
}
/**
* Remove event listeners used to update the popper position
* @method
* @memberof Popper.Utils
* @private
*/
function removeEventListeners(reference, state) {
// Remove resize event listener on window
getWindow(reference).removeEventListener('resize', state.updateBound);
// Remove scroll event listener on scroll parents
state.scrollParents.forEach(function (target) {
target.removeEventListener('scroll', state.updateBound);
});
// Reset state
state.updateBound = null;
state.scrollParents = [];
state.scrollElement = null;
state.eventsEnabled = false;
return state;
}
/**
* It will remove resize/scroll events and won't recalculate popper position
* when they are triggered. It also won't trigger `onUpdate` callback anymore,
* unless you call `update` method manually.
* @method
* @memberof Popper
*/
function disableEventListeners() {
if (this.state.eventsEnabled) {
cancelAnimationFrame(this.scheduleUpdate);
this.state = removeEventListeners(this.reference, this.state);
}
}
/**
* Tells if a given input is a number
* @method
* @memberof Popper.Utils
* @param {*} input to check
* @return {Boolean}
*/
function isNumeric(n) {
return n !== '' && !isNaN(parseFloat(n)) && isFinite(n);
}
/**
* Set the style to the given popper
* @method
* @memberof Popper.Utils
* @argument {Element} element - Element to apply the style to
* @argument {Object} styles
* Object with a list of properties and values which will be applied to the element
*/
function setStyles(element, styles) {
Object.keys(styles).forEach(function (prop) {
var unit = '';
// add unit if the value is numeric and is one of the following
if (['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== -1 && isNumeric(styles[prop])) {
unit = 'px';
}
element.style[prop] = styles[prop] + unit;
});
}
/**
* Set the attributes to the given popper
* @method
* @memberof Popper.Utils
* @argument {Element} element - Element to apply the attributes to
* @argument {Object} styles
* Object with a list of properties and values which will be applied to the element
*/
function setAttributes(element, attributes) {
Object.keys(attributes).forEach(function (prop) {
var value = attributes[prop];
if (value !== false) {
element.setAttribute(prop, attributes[prop]);
} else {
element.removeAttribute(prop);
}
});
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by `update` method
* @argument {Object} data.styles - List of style properties - values to apply to popper element
* @argument {Object} data.attributes - List of attribute properties - values to apply to popper element
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The same data object
*/
function applyStyle(data) {
// any property present in `data.styles` will be applied to the popper,
// in this way we can make the 3rd party modifiers add custom styles to it
// Be aware, modifiers could override the properties defined in the previous
// lines of this modifier!
setStyles(data.instance.popper, data.styles);
// any property present in `data.attributes` will be applied to the popper,
// they will be set as HTML attributes of the element
setAttributes(data.instance.popper, data.attributes);
// if arrowElement is defined and arrowStyles has some properties
if (data.arrowElement && Object.keys(data.arrowStyles).length) {
setStyles(data.arrowElement, data.arrowStyles);
}
return data;
}
/**
* Set the x-placement attribute before everything else because it could be used
* to add margins to the popper margins needs to be calculated to get the
* correct popper offsets.
* @method
* @memberof Popper.modifiers
* @param {HTMLElement} reference - The reference element used to position the popper
* @param {HTMLElement} popper - The HTML element used as popper
* @param {Object} options - Popper.js options
*/
function applyStyleOnLoad(reference, popper, options, modifierOptions, state) {
// compute reference element offsets
var referenceOffsets = getReferenceOffsets(state, popper, reference, options.positionFixed);
// compute auto placement, store placement inside the data object,
// modifiers will be able to edit `placement` if needed
// and refer to originalPlacement to know the original value
var placement = computeAutoPlacement(options.placement, referenceOffsets, popper, reference, options.modifiers.flip.boundariesElement, options.modifiers.flip.padding);
popper.setAttribute('x-placement', placement);
// Apply `position` to popper before anything else because
// without the position applied we can't guarantee correct computations
setStyles(popper, { position: options.positionFixed ? 'fixed' : 'absolute' });
return options;
}
/**
* @function
* @memberof Popper.Utils
* @argument {Object} data - The data object generated by `update` method
* @argument {Boolean} shouldRound - If the offsets should be rounded at all
* @returns {Object} The popper's position offsets rounded
*
* The tale of pixel-perfect positioning. It's still not 100% perfect, but as
* good as it can be within reason.
* Discussion here: https://github.com/FezVrasta/popper.js/pull/715
*
* Low DPI screens cause a popper to be blurry if not using full pixels (Safari
* as well on High DPI screens).
*
* Firefox prefers no rounding for positioning and does not have blurriness on
* high DPI screens.
*
* Only horizontal placement and left/right values need to be considered.
*/
function getRoundedOffsets(data, shouldRound) {
var _data$offsets = data.offsets,
popper = _data$offsets.popper,
reference = _data$offsets.reference;
var round = Math.round,
floor = Math.floor;
var noRound = function noRound(v) {
return v;
};
var referenceWidth = round(reference.width);
var popperWidth = round(popper.width);
var isVertical = ['left', 'right'].indexOf(data.placement) !== -1;
var isVariation = data.placement.indexOf('-') !== -1;
var sameWidthParity = referenceWidth % 2 === popperWidth % 2;
var bothOddWidth = referenceWidth % 2 === 1 && popperWidth % 2 === 1;
var horizontalToInteger = !shouldRound ? noRound : isVertical || isVariation || sameWidthParity ? round : floor;
var verticalToInteger = !shouldRound ? noRound : round;
return {
left: horizontalToInteger(bothOddWidth && !isVariation && shouldRound ? popper.left - 1 : popper.left),
top: verticalToInteger(popper.top),
bottom: verticalToInteger(popper.bottom),
right: horizontalToInteger(popper.right)
};
}
var isFirefox = isBrowser && /Firefox/i.test(navigator.userAgent);
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by `update` method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function computeStyle(data, options) {
var x = options.x,
y = options.y;
var popper = data.offsets.popper;
// Remove this legacy support in Popper.js v2
var legacyGpuAccelerationOption = find(data.instance.modifiers, function (modifier) {
return modifier.name === 'applyStyle';
}).gpuAcceleration;
if (legacyGpuAccelerationOption !== undefined) {
console.warn('WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!');
}
var gpuAcceleration = legacyGpuAccelerationOption !== undefined ? legacyGpuAccelerationOption : options.gpuAcceleration;
var offsetParent = getOffsetParent(data.instance.popper);
var offsetParentRect = getBoundingClientRect(offsetParent);
// Styles
var styles = {
position: popper.position
};
var offsets = getRoundedOffsets(data, window.devicePixelRatio < 2 || !isFirefox);
var sideA = x === 'bottom' ? 'top' : 'bottom';
var sideB = y === 'right' ? 'left' : 'right';
// if gpuAcceleration is set to `true` and transform is supported,
// we use `translate3d` to apply the position to the popper we
// automatically use the supported prefixed version if needed
var prefixedProperty = getSupportedPropertyName('transform');
// now, let's make a step back and look at this code closely (wtf?)
// If the content of the popper grows once it's been positioned, it
// may happen that the popper gets misplaced because of the new content
// overflowing its reference element
// To avoid this problem, we provide two options (x and y), which allow
// the consumer to define the offset origin.
// If we position a popper on top of a reference element, we can set
// `x` to `top` to make the popper grow towards its top instead of
// its bottom.
var left = void 0,
top = void 0;
if (sideA === 'bottom') {
// when offsetParent is <html> the positioning is relative to the bottom of the screen (excluding the scrollbar)
// and not the bottom of the html element
if (offsetParent.nodeName === 'HTML') {
top = -offsetParent.clientHeight + offsets.bottom;
} else {
top = -offsetParentRect.height + offsets.bottom;
}
} else {
top = offsets.top;
}
if (sideB === 'right') {
if (offsetParent.nodeName === 'HTML') {
left = -offsetParent.clientWidth + offsets.right;
} else {
left = -offsetParentRect.width + offsets.right;
}
} else {
left = offsets.left;
}
if (gpuAcceleration && prefixedProperty) {
styles[prefixedProperty] = 'translate3d(' + left + 'px, ' + top + 'px, 0)';
styles[sideA] = 0;
styles[sideB] = 0;
styles.willChange = 'transform';
} else {
// othwerise, we use the standard `top`, `left`, `bottom` and `right` properties
var invertTop = sideA === 'bottom' ? -1 : 1;
var invertLeft = sideB === 'right' ? -1 : 1;
styles[sideA] = top * invertTop;
styles[sideB] = left * invertLeft;
styles.willChange = sideA + ', ' + sideB;
}
// Attributes
var attributes = {
'x-placement': data.placement
};
// Update `data` attributes, styles and arrowStyles
data.attributes = _extends({}, attributes, data.attributes);
data.styles = _extends({}, styles, data.styles);
data.arrowStyles = _extends({}, data.offsets.arrow, data.arrowStyles);
return data;
}
/**
* Helper used to know if the given modifier depends from another one.<br />
* It checks if the needed modifier is listed and enabled.
* @method
* @memberof Popper.Utils
* @param {Array} modifiers - list of modifiers
* @param {String} requestingName - name of requesting modifier
* @param {String} requestedName - name of requested modifier
* @returns {Boolean}
*/
function isModifierRequired(modifiers, requestingName, requestedName) {
var requesting = find(modifiers, function (_ref) {
var name = _ref.name;
return name === requestingName;
});
var isRequired = !!requesting && modifiers.some(function (modifier) {
return modifier.name === requestedName && modifier.enabled && modifier.order < requesting.order;
});
if (!isRequired) {
var _requesting = '`' + requestingName + '`';
var requested = '`' + requestedName + '`';
console.warn(requested + ' modifier is required by ' + _requesting + ' modifier in order to work, be sure to include it before ' + _requesting + '!');
}
return isRequired;
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by update method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function arrow(data, options) {
var _data$offsets$arrow;
// arrow depends on keepTogether in order to work
if (!isModifierRequired(data.instance.modifiers, 'arrow', 'keepTogether')) {
return data;
}
var arrowElement = options.element;
// if arrowElement is a string, suppose it's a CSS selector
if (typeof arrowElement === 'string') {
arrowElement = data.instance.popper.querySelector(arrowElement);
// if arrowElement is not found, don't run the modifier
if (!arrowElement) {
return data;
}
} else {
// if the arrowElement isn't a query selector we must check that the
// provided DOM node is child of its popper node
if (!data.instance.popper.contains(arrowElement)) {
console.warn('WARNING: `arrow.element` must be child of its popper element!');
return data;
}
}
var placement = data.placement.split('-')[0];
var _data$offsets = data.offsets,
popper = _data$offsets.popper,
reference = _data$offsets.reference;
var isVertical = ['left', 'right'].indexOf(placement) !== -1;
var len = isVertical ? 'height' : 'width';
var sideCapitalized = isVertical ? 'Top' : 'Left';
var side = sideCapitalized.toLowerCase();
var altSide = isVertical ? 'left' : 'top';
var opSide = isVertical ? 'bottom' : 'right';
var arrowElementSize = getOuterSizes(arrowElement)[len];
//
// extends keepTogether behavior making sure the popper and its
// reference have enough pixels in conjunction
//
// top/left side
if (reference[opSide] - arrowElementSize < popper[side]) {
data.offsets.popper[side] -= popper[side] - (reference[opSide] - arrowElementSize);
}
// bottom/right side
if (reference[side] + arrowElementSize > popper[opSide]) {
data.offsets.popper[side] += reference[side] + arrowElementSize - popper[opSide];
}
data.offsets.popper = getClientRect(data.offsets.popper);
// compute center of the popper
var center = reference[side] + reference[len] / 2 - arrowElementSize / 2;
// Compute the sideValue using the updated popper offsets
// take popper margin in account because we don't have this info available
var css = getStyleComputedProperty(data.instance.popper);
var popperMarginSide = parseFloat(css['margin' + sideCapitalized]);
var popperBorderSide = parseFloat(css['border' + sideCapitalized + 'Width']);
var sideValue = center - data.offsets.popper[side] - popperMarginSide - popperBorderSide;
// prevent arrowElement from being placed not contiguously to its popper
sideValue = Math.max(Math.min(popper[len] - arrowElementSize, sideValue), 0);
data.arrowElement = arrowElement;
data.offsets.arrow = (_data$offsets$arrow = {}, defineProperty(_data$offsets$arrow, side, Math.round(sideValue)), defineProperty(_data$offsets$arrow, altSide, ''), _data$offsets$arrow);
return data;
}
/**
* Get the opposite placement variation of the given one
* @method
* @memberof Popper.Utils
* @argument {String} placement variation
* @returns {String} flipped placement variation
*/
function getOppositeVariation(variation) {
if (variation === 'end') {
return 'start';
} else if (variation === 'start') {
return 'end';
}
return variation;
}
/**
* List of accepted placements to use as values of the `placement` option.<br />
* Valid placements are:
* - `auto`
* - `top`
* - `right`
* - `bottom`
* - `left`
*
* Each placement can have a variation from this list:
* - `-start`
* - `-end`
*
* Variations are interpreted easily if you think of them as the left to right
* written languages. Horizontally (`top` and `bottom`), `start` is left and `end`
* is right.<br />
* Vertically (`left` and `right`), `start` is top and `end` is bottom.
*
* Some valid examples are:
* - `top-end` (on top of reference, right aligned)
* - `right-start` (on right of reference, top aligned)
* - `bottom` (on bottom, centered)
* - `auto-end` (on the side with more space available, alignment depends by placement)
*
* @static
* @type {Array}
* @enum {String}
* @readonly
* @method placements
* @memberof Popper
*/
var placements = ['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start'];
// Get rid of `auto` `auto-start` and `auto-end`
var validPlacements = placements.slice(3);
/**
* Given an initial placement, returns all the subsequent placements
* clockwise (or counter-clockwise).
*
* @method
* @memberof Popper.Utils
* @argument {String} placement - A valid placement (it accepts variations)
* @argument {Boolean} counter - Set to true to walk the placements counterclockwise
* @returns {Array} placements including their variations
*/
function clockwise(placement) {
var counter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var index = validPlacements.indexOf(placement);
var arr = validPlacements.slice(index + 1).concat(validPlacements.slice(0, index));
return counter ? arr.reverse() : arr;
}
var BEHAVIORS = {
FLIP: 'flip',
CLOCKWISE: 'clockwise',
COUNTERCLOCKWISE: 'counterclockwise'
};
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by update method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function flip(data, options) {
// if `inner` modifier is enabled, we can't use the `flip` modifier
if (isModifierEnabled(data.instance.modifiers, 'inner')) {
return data;
}
if (data.flipped && data.placement === data.originalPlacement) {
// seems like flip is trying to loop, probably there's not enough space on any of the flippable sides
return data;
}
var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, options.boundariesElement, data.positionFixed);
var placement = data.placement.split('-')[0];
var placementOpposite = getOppositePlacement(placement);
var variation = data.placement.split('-')[1] || '';
var flipOrder = [];
switch (options.behavior) {
case BEHAVIORS.FLIP:
flipOrder = [placement, placementOpposite];
break;
case BEHAVIORS.CLOCKWISE:
flipOrder = clockwise(placement);
break;
case BEHAVIORS.COUNTERCLOCKWISE:
flipOrder = clockwise(placement, true);
break;
default:
flipOrder = options.behavior;
}
flipOrder.forEach(function (step, index) {
if (placement !== step || flipOrder.length === index + 1) {
return data;
}
placement = data.placement.split('-')[0];
placementOpposite = getOppositePlacement(placement);
var popperOffsets = data.offsets.popper;
var refOffsets = data.offsets.reference;
// using floor because the reference offsets may contain decimals we are not going to consider here
var floor = Math.floor;
var overlapsRef = placement === 'left' && floor(popperOffsets.right) > floor(refOffsets.left) || placement === 'right' && floor(popperOffsets.left) < floor(refOffsets.right) || placement === 'top' && floor(popperOffsets.bottom) > floor(refOffsets.top) || placement === 'bottom' && floor(popperOffsets.top) < floor(refOffsets.bottom);
var overflowsLeft = floor(popperOffsets.left) < floor(boundaries.left);
var overflowsRight = floor(popperOffsets.right) > floor(boundaries.right);
var overflowsTop = floor(popperOffsets.top) < floor(boundaries.top);
var overflowsBottom = floor(popperOffsets.bottom) > floor(boundaries.bottom);
var overflowsBoundaries = placement === 'left' && overflowsLeft || placement === 'right' && overflowsRight || placement === 'top' && overflowsTop || placement === 'bottom' && overflowsBottom;
// flip the variation if required
var isVertical = ['top', 'bottom'].indexOf(placement) !== -1;
// flips variation if reference element overflows boundaries
var flippedVariationByRef = !!options.flipVariations && (isVertical && variation === 'start' && overflowsLeft || isVertical && variation === 'end' && overflowsRight || !isVertical && variation === 'start' && overflowsTop || !isVertical && variation === 'end' && overflowsBottom);
// flips variation if popper content overflows boundaries
var flippedVariationByContent = !!options.flipVariationsByContent && (isVertical && variation === 'start' && overflowsRight || isVertical && variation === 'end' && overflowsLeft || !isVertical && variation === 'start' && overflowsBottom || !isVertical && variation === 'end' && overflowsTop);
var flippedVariation = flippedVariationByRef || flippedVariationByContent;
if (overlapsRef || overflowsBoundaries || flippedVariation) {
// this boolean to detect any flip loop
data.flipped = true;
if (overlapsRef || overflowsBoundaries) {
placement = flipOrder[index + 1];
}
if (flippedVariation) {
variation = getOppositeVariation(variation);
}
data.placement = placement + (variation ? '-' + variation : '');
// this object contains `position`, we want to preserve it along with
// any additional property we may add in the future
data.offsets.popper = _extends({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));
data = runModifiers(data.instance.modifiers, data, 'flip');
}
});
return data;
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by update method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function keepTogether(data) {
var _data$offsets = data.offsets,
popper = _data$offsets.popper,
reference = _data$offsets.reference;
var placement = data.placement.split('-')[0];
var floor = Math.floor;
var isVertical = ['top', 'bottom'].indexOf(placement) !== -1;
var side = isVertical ? 'right' : 'bottom';
var opSide = isVertical ? 'left' : 'top';
var measurement = isVertical ? 'width' : 'height';
if (popper[side] < floor(reference[opSide])) {
data.offsets.popper[opSide] = floor(reference[opSide]) - popper[measurement];
}
if (popper[opSide] > floor(reference[side])) {
data.offsets.popper[opSide] = floor(reference[side]);
}
return data;
}
/**
* Converts a string containing value + unit into a px value number
* @function
* @memberof {modifiers~offset}
* @private
* @argument {String} str - Value + unit string
* @argument {String} measurement - `height` or `width`
* @argument {Object} popperOffsets
* @argument {Object} referenceOffsets
* @returns {Number|String}
* Value in pixels, or original string if no values were extracted
*/
function toValue(str, measurement, popperOffsets, referenceOffsets) {
// separate value from unit
var split = str.match(/((?:\-|\+)?\d*\.?\d*)(.*)/);
var value = +split[1];
var unit = split[2];
// If it's not a number it's an operator, I guess
if (!value) {
return str;
}
if (unit.indexOf('%') === 0) {
var element = void 0;
switch (unit) {
case '%p':
element = popperOffsets;
break;
case '%':
case '%r':
default:
element = referenceOffsets;
}
var rect = getClientRect(element);
return rect[measurement] / 100 * value;
} else if (unit === 'vh' || unit === 'vw') {
// if is a vh or vw, we calculate the size based on the viewport
var size = void 0;
if (unit === 'vh') {
size = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
} else {
size = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
}
return size / 100 * value;
} else {
// if is an explicit pixel unit, we get rid of the unit and keep the value
// if is an implicit unit, it's px, and we return just the value
return value;
}
}
/**
* Parse an `offset` string to extrapolate `x` and `y` numeric offsets.
* @function
* @memberof {modifiers~offset}
* @private
* @argument {String} offset
* @argument {Object} popperOffsets
* @argument {Object} referenceOffsets
* @argument {String} basePlacement
* @returns {Array} a two cells array with x and y offsets in numbers
*/
function parseOffset(offset, popperOffsets, referenceOffsets, basePlacement) {
var offsets = [0, 0];
// Use height if placement is left or right and index is 0 otherwise use width
// in this way the first offset will use an axis and the second one
// will use the other one
var useHeight = ['right', 'left'].indexOf(basePlacement) !== -1;
// Split the offset string to obtain a list of values and operands
// The regex addresses values with the plus or minus sign in front (+10, -20, etc)
var fragments = offset.split(/(\+|\-)/).map(function (frag) {
return frag.trim();
});
// Detect if the offset string contains a pair of values or a single one
// they could be separated by comma or space
var divider = fragments.indexOf(find(fragments, function (frag) {
return frag.search(/,|\s/) !== -1;
}));
if (fragments[divider] && fragments[divider].indexOf(',') === -1) {
console.warn('Offsets separated by white space(s) are deprecated, use a comma (,) instead.');
}
// If divider is found, we divide the list of values and operands to divide
// them by ofset X and Y.
var splitRegex = /\s*,\s*|\s+/;
var ops = divider !== -1 ? [fragments.slice(0, divider).concat([fragments[divider].split(splitRegex)[0]]), [fragments[divider].split(splitRegex)[1]].concat(fragments.slice(divider + 1))] : [fragments];
// Convert the values with units to absolute pixels to allow our computations
ops = ops.map(function (op, index) {
// Most of the units rely on the orientation of the popper
var measurement = (index === 1 ? !useHeight : useHeight) ? 'height' : 'width';
var mergeWithPrevious = false;
return op
// This aggregates any `+` or `-` sign that aren't considered operators
// e.g.: 10 + +5 => [10, +, +5]
.reduce(function (a, b) {
if (a[a.length - 1] === '' && ['+', '-'].indexOf(b) !== -1) {
a[a.length - 1] = b;
mergeWithPrevious = true;
return a;
} else if (mergeWithPrevious) {
a[a.length - 1] += b;
mergeWithPrevious = false;
return a;
} else {
return a.concat(b);
}
}, [])
// Here we convert the string values into number values (in px)
.map(function (str) {
return toValue(str, measurement, popperOffsets, referenceOffsets);
});
});
// Loop trough the offsets arrays and execute the operations
ops.forEach(function (op, index) {
op.forEach(function (frag, index2) {
if (isNumeric(frag)) {
offsets[index] += frag * (op[index2 - 1] === '-' ? -1 : 1);
}
});
});
return offsets;
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by update method
* @argument {Object} options - Modifiers configuration and options
* @argument {Number|String} options.offset=0
* The offset value as described in the modifier description
* @returns {Object} The data object, properly modified
*/
function offset(data, _ref) {
var offset = _ref.offset;
var placement = data.placement,
_data$offsets = data.offsets,
popper = _data$offsets.popper,
reference = _data$offsets.reference;
var basePlacement = placement.split('-')[0];
var offsets = void 0;
if (isNumeric(+offset)) {
offsets = [+offset, 0];
} else {
offsets = parseOffset(offset, popper, reference, basePlacement);
}
if (basePlacement === 'left') {
popper.top += offsets[0];
popper.left -= offsets[1];
} else if (basePlacement === 'right') {
popper.top += offsets[0];
popper.left += offsets[1];
} else if (basePlacement === 'top') {
popper.left += offsets[0];
popper.top -= offsets[1];
} else if (basePlacement === 'bottom') {
popper.left += offsets[0];
popper.top += offsets[1];
}
data.popper = popper;
return data;
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by `update` method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function preventOverflow(data, options) {
var boundariesElement = options.boundariesElement || getOffsetParent(data.instance.popper);
// If offsetParent is the reference element, we really want to
// go one step up and use the next offsetParent as reference to
// avoid to make this modifier completely useless and look like broken
if (data.instance.reference === boundariesElement) {
boundariesElement = getOffsetParent(boundariesElement);
}
// NOTE: DOM access here
// resets the popper's position so that the document size can be calculated excluding
// the size of the popper element itself
var transformProp = getSupportedPropertyName('transform');
var popperStyles = data.instance.popper.style; // assignment to help minification
var top = popperStyles.top,
left = popperStyles.left,
transform = popperStyles[transformProp];
popperStyles.top = '';
popperStyles.left = '';
popperStyles[transformProp] = '';
var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, boundariesElement, data.positionFixed);
// NOTE: DOM access here
// restores the original style properties after the offsets have been computed
popperStyles.top = top;
popperStyles.left = left;
popperStyles[transformProp] = transform;
options.boundaries = boundaries;
var order = options.priority;
var popper = data.offsets.popper;
var check = {
primary: function primary(placement) {
var value = popper[placement];
if (popper[placement] < boundaries[placement] && !options.escapeWithReference) {
value = Math.max(popper[placement], boundaries[placement]);
}
return defineProperty({}, placement, value);
},
secondary: function secondary(placement) {
var mainSide = placement === 'right' ? 'left' : 'top';
var value = popper[mainSide];
if (popper[placement] > boundaries[placement] && !options.escapeWithReference) {
value = Math.min(popper[mainSide], boundaries[placement] - (placement === 'right' ? popper.width : popper.height));
}
return defineProperty({}, mainSide, value);
}
};
order.forEach(function (placement) {
var side = ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary';
popper = _extends({}, popper, check[side](placement));
});
data.offsets.popper = popper;
return data;
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by `update` method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function shift(data) {
var placement = data.placement;
var basePlacement = placement.split('-')[0];
var shiftvariation = placement.split('-')[1];
// if shift shiftvariation is specified, run the modifier
if (shiftvariation) {
var _data$offsets = data.offsets,
reference = _data$offsets.reference,
popper = _data$offsets.popper;
var isVertical = ['bottom', 'top'].indexOf(basePlacement) !== -1;
var side = isVertical ? 'left' : 'top';
var measurement = isVertical ? 'width' : 'height';
var shiftOffsets = {
start: defineProperty({}, side, reference[side]),
end: defineProperty({}, side, reference[side] + reference[measurement] - popper[measurement])
};
data.offsets.popper = _extends({}, popper, shiftOffsets[shiftvariation]);
}
return data;
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by update method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function hide(data) {
if (!isModifierRequired(data.instance.modifiers, 'hide', 'preventOverflow')) {
return data;
}
var refRect = data.offsets.reference;
var bound = find(data.instance.modifiers, function (modifier) {
return modifier.name === 'preventOverflow';
}).boundaries;
if (refRect.bottom < bound.top || refRect.left > bound.right || refRect.top > bound.bottom || refRect.right < bound.left) {
// Avoid unnecessary DOM access if visibility hasn't changed
if (data.hide === true) {
return data;
}
data.hide = true;
data.attributes['x-out-of-boundaries'] = '';
} else {
// Avoid unnecessary DOM access if visibility hasn't changed
if (data.hide === false) {
return data;
}
data.hide = false;
data.attributes['x-out-of-boundaries'] = false;
}
return data;
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by `update` method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function inner(data) {
var placement = data.placement;
var basePlacement = placement.split('-')[0];
var _data$offsets = data.offsets,
popper = _data$offsets.popper,
reference = _data$offsets.reference;
var isHoriz = ['left', 'right'].indexOf(basePlacement) !== -1;
var subtractLength = ['top', 'left'].indexOf(basePlacement) === -1;
popper[isHoriz ? 'left' : 'top'] = reference[basePlacement] - (subtractLength ? popper[isHoriz ? 'width' : 'height'] : 0);
data.placement = getOppositePlacement(placement);
data.offsets.popper = getClientRect(popper);
return data;
}
/**
* Modifier function, each modifier can have a function of this type assigned
* to its `fn` property.<br />
* These functions will be called on each update, this means that you must
* make sure they are performant enough to avoid performance bottlenecks.
*
* @function ModifierFn
* @argument {dataObject} data - The data object generated by `update` method
* @argument {Object} options - Modifiers configuration and options
* @returns {dataObject} The data object, properly modified
*/
/**
* Modifiers are plugins used to alter the behavior of your poppers.<br />
* Popper.js uses a set of 9 modifiers to provide all the basic functionalities
* needed by the library.
*
* Usually you don't want to override the `order`, `fn` and `onLoad` props.
* All the other properties are configurations that could be tweaked.
* @namespace modifiers
*/
var modifiers = {
/**
* Modifier used to shift the popper on the start or end of its reference
* element.<br />
* It will read the variation of the `placement` property.<br />
* It can be one either `-end` or `-start`.
* @memberof modifiers
* @inner
*/
shift: {
/** @prop {number} order=100 - Index used to define the order of execution */
order: 100,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: shift
},
/**
* The `offset` modifier can shift your popper on both its axis.
*
* It accepts the following units:
* - `px` or unit-less, interpreted as pixels
* - `%` or `%r`, percentage relative to the length of the reference element
* - `%p`, percentage relative to the length of the popper element
* - `vw`, CSS viewport width unit
* - `vh`, CSS viewport height unit
*
* For length is intended the main axis relative to the placement of the popper.<br />
* This means that if the placement is `top` or `bottom`, the length will be the
* `width`. In case of `left` or `right`, it will be the `height`.
*
* You can provide a single value (as `Number` or `String`), or a pair of values
* as `String` divided by a comma or one (or more) white spaces.<br />
* The latter is a deprecated method because it leads to confusion and will be
* removed in v2.<br />
* Additionally, it accepts additions and subtractions between different units.
* Note that multiplications and divisions aren't supported.
*
* Valid examples are:
* ```
* 10
* '10%'
* '10, 10'
* '10%, 10'
* '10 + 10%'
* '10 - 5vh + 3%'
* '-10px + 5vh, 5px - 6%'
* ```
* > **NB**: If you desire to apply offsets to your poppers in a way that may make them overlap
* > with their reference element, unfortunately, you will have to disable the `flip` modifier.
* > You can read more on this at this [issue](https://github.com/FezVrasta/popper.js/issues/373).
*
* @memberof modifiers
* @inner
*/
offset: {
/** @prop {number} order=200 - Index used to define the order of execution */
order: 200,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: offset,
/** @prop {Number|String} offset=0
* The offset value as described in the modifier description
*/
offset: 0
},
/**
* Modifier used to prevent the popper from being positioned outside the boundary.
*
* A scenario exists where the reference itself is not within the boundaries.<br />
* We can say it has "escaped the boundaries" — or just "escaped".<br />
* In this case we need to decide whether the popper should either:
*
* - detach from the reference and remain "trapped" in the boundaries, or
* - if it should ignore the boundary and "escape with its reference"
*
* When `escapeWithReference` is set to`true` and reference is completely
* outside its boundaries, the popper will overflow (or completely leave)
* the boundaries in order to remain attached to the edge of the reference.
*
* @memberof modifiers
* @inner
*/
preventOverflow: {
/** @prop {number} order=300 - Index used to define the order of execution */
order: 300,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: preventOverflow,
/**
* @prop {Array} [priority=['left','right','top','bottom']]
* Popper will try to prevent overflow following these priorities by default,
* then, it could overflow on the left and on top of the `boundariesElement`
*/
priority: ['left', 'right', 'top', 'bottom'],
/**
* @prop {number} padding=5
* Amount of pixel used to define a minimum distance between the boundaries
* and the popper. This makes sure the popper always has a little padding
* between the edges of its container
*/
padding: 5,
/**
* @prop {String|HTMLElement} boundariesElement='scrollParent'
* Boundaries used by the modifier. Can be `scrollParent`, `window`,
* `viewport` or any DOM element.
*/
boundariesElement: 'scrollParent'
},
/**
* Modifier used to make sure the reference and its popper stay near each other
* without leaving any gap between the two. Especially useful when the arrow is
* enabled and you want to ensure that it points to its reference element.
* It cares only about the first axis. You can still have poppers with margin
* between the popper and its reference element.
* @memberof modifiers
* @inner
*/
keepTogether: {
/** @prop {number} order=400 - Index used to define the order of execution */
order: 400,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: keepTogether
},
/**
* This modifier is used to move the `arrowElement` of the popper to make
* sure it is positioned between the reference element and its popper element.
* It will read the outer size of the `arrowElement` node to detect how many
* pixels of conjunction are needed.
*
* It has no effect if no `arrowElement` is provided.
* @memberof modifiers
* @inner
*/
arrow: {
/** @prop {number} order=500 - Index used to define the order of execution */
order: 500,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: arrow,
/** @prop {String|HTMLElement} element='[x-arrow]' - Selector or node used as arrow */
element: '[x-arrow]'
},
/**
* Modifier used to flip the popper's placement when it starts to overlap its
* reference element.
*
* Requires the `preventOverflow` modifier before it in order to work.
*
* **NOTE:** this modifier will interrupt the current update cycle and will
* restart it if it detects the need to flip the placement.
* @memberof modifiers
* @inner
*/
flip: {
/** @prop {number} order=600 - Index used to define the order of execution */
order: 600,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: flip,
/**
* @prop {String|Array} behavior='flip'
* The behavior used to change the popper's placement. It can be one of
* `flip`, `clockwise`, `counterclockwise` or an array with a list of valid
* placements (with optional variations)
*/
behavior: 'flip',
/**
* @prop {number} padding=5
* The popper will flip if it hits the edges of the `boundariesElement`
*/
padding: 5,
/**
* @prop {String|HTMLElement} boundariesElement='viewport'
* The element which will define the boundaries of the popper position.
* The popper will never be placed outside of the defined boundaries
* (except if `keepTogether` is enabled)
*/
boundariesElement: 'viewport',
/**
* @prop {Boolean} flipVariations=false
* The popper will switch placement variation between `-start` and `-end` when
* the reference element overlaps its boundaries.
*
* The original placement should have a set variation.
*/
flipVariations: false,
/**
* @prop {Boolean} flipVariationsByContent=false
* The popper will switch placement variation between `-start` and `-end` when
* the popper element overlaps its reference boundaries.
*
* The original placement should have a set variation.
*/
flipVariationsByContent: false
},
/**
* Modifier used to make the popper flow toward the inner of the reference element.
* By default, when this modifier is disabled, the popper will be placed outside
* the reference element.
* @memberof modifiers
* @inner
*/
inner: {
/** @prop {number} order=700 - Index used to define the order of execution */
order: 700,
/** @prop {Boolean} enabled=false - Whether the modifier is enabled or not */
enabled: false,
/** @prop {ModifierFn} */
fn: inner
},
/**
* Modifier used to hide the popper when its reference element is outside of the
* popper boundaries. It will set a `x-out-of-boundaries` attribute which can
* be used to hide with a CSS selector the popper when its reference is
* out of boundaries.
*
* Requires the `preventOverflow` modifier before it in order to work.
* @memberof modifiers
* @inner
*/
hide: {
/** @prop {number} order=800 - Index used to define the order of execution */
order: 800,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: hide
},
/**
* Computes the style that will be applied to the popper element to gets
* properly positioned.
*
* Note that this modifier will not touch the DOM, it just prepares the styles
* so that `applyStyle` modifier can apply it. This separation is useful
* in case you need to replace `applyStyle` with a custom implementation.
*
* This modifier has `850` as `order` value to maintain backward compatibility
* with previous versions of Popper.js. Expect the modifiers ordering method
* to change in future major versions of the library.
*
* @memberof modifiers
* @inner
*/
computeStyle: {
/** @prop {number} order=850 - Index used to define the order of execution */
order: 850,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: computeStyle,
/**
* @prop {Boolean} gpuAcceleration=true
* If true, it uses the CSS 3D transformation to position the popper.
* Otherwise, it will use the `top` and `left` properties
*/
gpuAcceleration: true,
/**
* @prop {string} [x='bottom']
* Where to anchor the X axis (`bottom` or `top`). AKA X offset origin.
* Change this if your popper should grow in a direction different from `bottom`
*/
x: 'bottom',
/**
* @prop {string} [x='left']
* Where to anchor the Y axis (`left` or `right`). AKA Y offset origin.
* Change this if your popper should grow in a direction different from `right`
*/
y: 'right'
},
/**
* Applies the computed styles to the popper element.
*
* All the DOM manipulations are limited to this modifier. This is useful in case
* you want to integrate Popper.js inside a framework or view library and you
* want to delegate all the DOM manipulations to it.
*
* Note that if you disable this modifier, you must make sure the popper element
* has its position set to `absolute` before Popper.js can do its work!
*
* Just disable this modifier and define your own to achieve the desired effect.
*
* @memberof modifiers
* @inner
*/
applyStyle: {
/** @prop {number} order=900 - Index used to define the order of execution */
order: 900,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: applyStyle,
/** @prop {Function} */
onLoad: applyStyleOnLoad,
/**
* @deprecated since version 1.10.0, the property moved to `computeStyle` modifier
* @prop {Boolean} gpuAcceleration=true
* If true, it uses the CSS 3D transformation to position the popper.
* Otherwise, it will use the `top` and `left` properties
*/
gpuAcceleration: undefined
}
};
/**
* The `dataObject` is an object containing all the information used by Popper.js.
* This object is passed to modifiers and to the `onCreate` and `onUpdate` callbacks.
* @name dataObject
* @property {Object} data.instance The Popper.js instance
* @property {String} data.placement Placement applied to popper
* @property {String} data.originalPlacement Placement originally defined on init
* @property {Boolean} data.flipped True if popper has been flipped by flip modifier
* @property {Boolean} data.hide True if the reference element is out of boundaries, useful to know when to hide the popper
* @property {HTMLElement} data.arrowElement Node used as arrow by arrow modifier
* @property {Object} data.styles Any CSS property defined here will be applied to the popper. It expects the JavaScript nomenclature (eg. `marginBottom`)
* @property {Object} data.arrowStyles Any CSS property defined here will be applied to the popper arrow. It expects the JavaScript nomenclature (eg. `marginBottom`)
* @property {Object} data.boundaries Offsets of the popper boundaries
* @property {Object} data.offsets The measurements of popper, reference and arrow elements
* @property {Object} data.offsets.popper `top`, `left`, `width`, `height` values
* @property {Object} data.offsets.reference `top`, `left`, `width`, `height` values
* @property {Object} data.offsets.arrow] `top` and `left` offsets, only one of them will be different from 0
*/
/**
* Default options provided to Popper.js constructor.<br />
* These can be overridden using the `options` argument of Popper.js.<br />
* To override an option, simply pass an object with the same
* structure of the `options` object, as the 3rd argument. For example:
* ```
* new Popper(ref, pop, {
* modifiers: {
* preventOverflow: { enabled: false }
* }
* })
* ```
* @type {Object}
* @static
* @memberof Popper
*/
var Defaults = {
/**
* Popper's placement.
* @prop {Popper.placements} placement='bottom'
*/
placement: 'bottom',
/**
* Set this to true if you want popper to position it self in 'fixed' mode
* @prop {Boolean} positionFixed=false
*/
positionFixed: false,
/**
* Whether events (resize, scroll) are initially enabled.
* @prop {Boolean} eventsEnabled=true
*/
eventsEnabled: true,
/**
* Set to true if you want to automatically remove the popper when
* you call the `destroy` method.
* @prop {Boolean} removeOnDestroy=false
*/
removeOnDestroy: false,
/**
* Callback called when the popper is created.<br />
* By default, it is set to no-op.<br />
* Access Popper.js instance with `data.instance`.
* @prop {onCreate}
*/
onCreate: function onCreate() {},
/**
* Callback called when the popper is updated. This callback is not called
* on the initialization/creation of the popper, but only on subsequent
* updates.<br />
* By default, it is set to no-op.<br />
* Access Popper.js instance with `data.instance`.
* @prop {onUpdate}
*/
onUpdate: function onUpdate() {},
/**
* List of modifiers used to modify the offsets before they are applied to the popper.
* They provide most of the functionalities of Popper.js.
* @prop {modifiers}
*/
modifiers: modifiers
};
/**
* @callback onCreate
* @param {dataObject} data
*/
/**
* @callback onUpdate
* @param {dataObject} data
*/
// Utils
// Methods
var Popper$1 = function () {
/**
* Creates a new Popper.js instance.
* @class Popper
* @param {Element|referenceObject} reference - The reference element used to position the popper
* @param {Element} popper - The HTML / XML element used as the popper
* @param {Object} options - Your custom options to override the ones defined in [Defaults](#defaults)
* @return {Object} instance - The generated Popper.js instance
*/
function Popper(reference, popper) {
var _this = this;
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
classCallCheck(this, Popper);
this.scheduleUpdate = function () {
return requestAnimationFrame(_this.update);
};
// make update() debounced, so that it only runs at most once-per-tick
this.update = debounce(this.update.bind(this));
// with {} we create a new object with the options inside it
this.options = _extends({}, Popper.Defaults, options);
// init state
this.state = {
isDestroyed: false,
isCreated: false,
scrollParents: []
};
// get reference and popper elements (allow jQuery wrappers)
this.reference = reference && reference.jquery ? reference[0] : reference;
this.popper = popper && popper.jquery ? popper[0] : popper;
// Deep merge modifiers options
this.options.modifiers = {};
Object.keys(_extends({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) {
_this.options.modifiers[name] = _extends({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});
});
// Refactoring modifiers' list (Object => Array)
this.modifiers = Object.keys(this.options.modifiers).map(function (name) {
return _extends({
name: name
}, _this.options.modifiers[name]);
})
// sort the modifiers by order
.sort(function (a, b) {
return a.order - b.order;
});
// modifiers have the ability to execute arbitrary code when Popper.js get inited
// such code is executed in the same order of its modifier
// they could add new properties to their options configuration
// BE AWARE: don't add options to `options.modifiers.name` but to `modifierOptions`!
this.modifiers.forEach(function (modifierOptions) {
if (modifierOptions.enabled && isFunction(modifierOptions.onLoad)) {
modifierOptions.onLoad(_this.reference, _this.popper, _this.options, modifierOptions, _this.state);
}
});
// fire the first update to position the popper in the right place
this.update();
var eventsEnabled = this.options.eventsEnabled;
if (eventsEnabled) {
// setup event listeners, they will take care of update the position in specific situations
this.enableEventListeners();
}
this.state.eventsEnabled = eventsEnabled;
}
// We can't use class properties because they don't get listed in the
// class prototype and break stuff like Sinon stubs
createClass(Popper, [{
key: 'update',
value: function update$$1() {
return update.call(this);
}
}, {
key: 'destroy',
value: function destroy$$1() {
return destroy.call(this);
}
}, {
key: 'enableEventListeners',
value: function enableEventListeners$$1() {
return enableEventListeners.call(this);
}
}, {
key: 'disableEventListeners',
value: function disableEventListeners$$1() {
return disableEventListeners.call(this);
}
/**
* Schedules an update. It will run on the next UI update available.
* @method scheduleUpdate
* @memberof Popper
*/
/**
* Collection of utilities useful when writing custom modifiers.
* Starting from version 1.7, this method is available only if you
* include `popper-utils.js` before `popper.js`.
*
* **DEPRECATION**: This way to access PopperUtils is deprecated
* and will be removed in v2! Use the PopperUtils module directly instead.
* Due to the high instability of the methods contained in Utils, we can't
* guarantee them to follow semver. Use them at your own risk!
* @static
* @private
* @type {Object}
* @deprecated since version 1.8
* @member Utils
* @memberof Popper
*/
}]);
return Popper;
}();
/**
* The `referenceObject` is an object that provides an interface compatible with Popper.js
* and lets you use it as replacement of a real DOM node.<br />
* You can use this method to position a popper relatively to a set of coordinates
* in case you don't have a DOM node to use as reference.
*
* ```
* new Popper(referenceObject, popperNode);
* ```
*
* NB: This feature isn't supported in Internet Explorer 10.
* @name referenceObject
* @property {Function} data.getBoundingClientRect
* A function that returns a set of coordinates compatible with the native `getBoundingClientRect` method.
* @property {number} data.clientWidth
* An ES6 getter that will return the width of the virtual reference element.
* @property {number} data.clientHeight
* An ES6 getter that will return the height of the virtual reference element.
*/
Popper$1.Utils = (typeof window !== 'undefined' ? window : global).PopperUtils;
Popper$1.placements = placements;
Popper$1.Defaults = Defaults;
var PopperJS = Popper$1;
/** @license React v16.13.1
* react-is.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h$4=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v$4=b?Symbol.for("react.block"):60121,w$4=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h$4:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}var AsyncMode=l;var ConcurrentMode=m;var ContextConsumer=k;var ContextProvider=h$4;var Element$1=c;var ForwardRef=n;var Fragment=e;var Lazy=t;var Memo=r;var Portal=d;
var Profiler=g;var StrictMode=f;var Suspense=p;var isAsyncMode=function(a){return A(a)||z(a)===l};var isConcurrentMode=A;var isContextConsumer=function(a){return z(a)===k};var isContextProvider=function(a){return z(a)===h$4};var isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};var isForwardRef=function(a){return z(a)===n};var isFragment=function(a){return z(a)===e};var isLazy=function(a){return z(a)===t};
var isMemo=function(a){return z(a)===r};var isPortal=function(a){return z(a)===d};var isProfiler=function(a){return z(a)===g};var isStrictMode=function(a){return z(a)===f};var isSuspense=function(a){return z(a)===p};
var isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h$4||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w$4||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v$4)};var typeOf=z;
var reactIs_production_min = {
AsyncMode: AsyncMode,
ConcurrentMode: ConcurrentMode,
ContextConsumer: ContextConsumer,
ContextProvider: ContextProvider,
Element: Element$1,
ForwardRef: ForwardRef,
Fragment: Fragment,
Lazy: Lazy,
Memo: Memo,
Portal: Portal,
Profiler: Profiler,
StrictMode: StrictMode,
Suspense: Suspense,
isAsyncMode: isAsyncMode,
isConcurrentMode: isConcurrentMode,
isContextConsumer: isContextConsumer,
isContextProvider: isContextProvider,
isElement: isElement,
isForwardRef: isForwardRef,
isFragment: isFragment,
isLazy: isLazy,
isMemo: isMemo,
isPortal: isPortal,
isProfiler: isProfiler,
isStrictMode: isStrictMode,
isSuspense: isSuspense,
isValidElementType: isValidElementType,
typeOf: typeOf
};
var reactIs_development = createCommonjsModule(function (module, exports) {
});
reactIs_development.AsyncMode;
reactIs_development.ConcurrentMode;
reactIs_development.ContextConsumer;
reactIs_development.ContextProvider;
reactIs_development.Element;
reactIs_development.ForwardRef;
reactIs_development.Fragment;
reactIs_development.Lazy;
reactIs_development.Memo;
reactIs_development.Portal;
reactIs_development.Profiler;
reactIs_development.StrictMode;
reactIs_development.Suspense;
reactIs_development.isAsyncMode;
reactIs_development.isConcurrentMode;
reactIs_development.isContextConsumer;
reactIs_development.isContextProvider;
reactIs_development.isElement;
reactIs_development.isForwardRef;
reactIs_development.isFragment;
reactIs_development.isLazy;
reactIs_development.isMemo;
reactIs_development.isPortal;
reactIs_development.isProfiler;
reactIs_development.isStrictMode;
reactIs_development.isSuspense;
reactIs_development.isValidElementType;
reactIs_development.typeOf;
createCommonjsModule(function (module) {
{
module.exports = reactIs_production_min;
}
});
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ReactPropTypesSecret$1 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
var ReactPropTypesSecret_1 = ReactPropTypesSecret$1;
var ReactPropTypesSecret = ReactPropTypesSecret_1;
function emptyFunction() {}
function emptyFunctionWithReset() {}
emptyFunctionWithReset.resetWarningCache = emptyFunction;
var factoryWithThrowingShims = function() {
function shim(props, propName, componentName, location, propFullName, secret) {
if (secret === ReactPropTypesSecret) {
// It is still safe when called from React.
return;
}
var err = new Error(
'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
'Use PropTypes.checkPropTypes() to call them. ' +
'Read more at http://fb.me/use-check-prop-types'
);
err.name = 'Invariant Violation';
throw err;
} shim.isRequired = shim;
function getShim() {
return shim;
} // Important!
// Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
var ReactPropTypes = {
array: shim,
bigint: shim,
bool: shim,
func: shim,
number: shim,
object: shim,
string: shim,
symbol: shim,
any: shim,
arrayOf: getShim,
element: shim,
elementType: shim,
instanceOf: getShim,
node: shim,
objectOf: getShim,
oneOf: getShim,
oneOfType: getShim,
shape: getShim,
exact: getShim,
checkPropTypes: emptyFunctionWithReset,
resetWarningCache: emptyFunction
};
ReactPropTypes.PropTypes = ReactPropTypes;
return ReactPropTypes;
};
var require$$2 = factoryWithThrowingShims;
var propTypes = createCommonjsModule(function (module) {
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
{
// By explicitly using `prop-types` you are opting into new production behavior.
// http://fb.me/prop-types-in-prod
module.exports = require$$2();
}
});
var key = '__global_unique_id__';
var gud = function() {
return commonjsGlobal[key] = (commonjsGlobal[key] || 0) + 1;
};
/**
* Copyright (c) 2014-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var warning = function() {};
var warning_1 = warning;
var _propTypes = propTypes;
var implementation = createCommonjsModule(function (module, exports) {
exports.__esModule = true;
_interopRequireDefault(React__default);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _gud2 = _interopRequireDefault(gud);
_interopRequireDefault(warning_1);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var MAX_SIGNED_31_BIT_INT = 1073741823;
// Inlined Object.is polyfill.
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
function objectIs(x, y) {
if (x === y) {
return x !== 0 || 1 / x === 1 / y;
} else {
return x !== x && y !== y;
}
}
function createEventEmitter(value) {
var handlers = [];
return {
on: function on(handler) {
handlers.push(handler);
},
off: function off(handler) {
handlers = handlers.filter(function (h) {
return h !== handler;
});
},
get: function get() {
return value;
},
set: function set(newValue, changedBits) {
value = newValue;
handlers.forEach(function (handler) {
return handler(value, changedBits);
});
}
};
}
function onlyChild(children) {
return Array.isArray(children) ? children[0] : children;
}
function createReactContext(defaultValue, calculateChangedBits) {
var _Provider$childContex, _Consumer$contextType;
var contextProp = '__create-react-context-' + (0, _gud2.default)() + '__';
var Provider = function (_Component) {
_inherits(Provider, _Component);
function Provider() {
var _temp, _this, _ret;
_classCallCheck(this, Provider);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.emitter = createEventEmitter(_this.props.value), _temp), _possibleConstructorReturn(_this, _ret);
}
Provider.prototype.getChildContext = function getChildContext() {
var _ref;
return _ref = {}, _ref[contextProp] = this.emitter, _ref;
};
Provider.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (this.props.value !== nextProps.value) {
var oldValue = this.props.value;
var newValue = nextProps.value;
var changedBits = void 0;
if (objectIs(oldValue, newValue)) {
changedBits = 0; // No change
} else {
changedBits = typeof calculateChangedBits === 'function' ? calculateChangedBits(oldValue, newValue) : MAX_SIGNED_31_BIT_INT;
changedBits |= 0;
if (changedBits !== 0) {
this.emitter.set(nextProps.value, changedBits);
}
}
}
};
Provider.prototype.render = function render() {
return this.props.children;
};
return Provider;
}(React__default.Component);
Provider.childContextTypes = (_Provider$childContex = {}, _Provider$childContex[contextProp] = _propTypes2.default.object.isRequired, _Provider$childContex);
var Consumer = function (_Component2) {
_inherits(Consumer, _Component2);
function Consumer() {
var _temp2, _this2, _ret2;
_classCallCheck(this, Consumer);
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return _ret2 = (_temp2 = (_this2 = _possibleConstructorReturn(this, _Component2.call.apply(_Component2, [this].concat(args))), _this2), _this2.state = {
value: _this2.getValue()
}, _this2.onUpdate = function (newValue, changedBits) {
var observedBits = _this2.observedBits | 0;
if ((observedBits & changedBits) !== 0) {
_this2.setState({ value: _this2.getValue() });
}
}, _temp2), _possibleConstructorReturn(_this2, _ret2);
}
Consumer.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
var observedBits = nextProps.observedBits;
this.observedBits = observedBits === undefined || observedBits === null ? MAX_SIGNED_31_BIT_INT // Subscribe to all changes by default
: observedBits;
};
Consumer.prototype.componentDidMount = function componentDidMount() {
if (this.context[contextProp]) {
this.context[contextProp].on(this.onUpdate);
}
var observedBits = this.props.observedBits;
this.observedBits = observedBits === undefined || observedBits === null ? MAX_SIGNED_31_BIT_INT // Subscribe to all changes by default
: observedBits;
};
Consumer.prototype.componentWillUnmount = function componentWillUnmount() {
if (this.context[contextProp]) {
this.context[contextProp].off(this.onUpdate);
}
};
Consumer.prototype.getValue = function getValue() {
if (this.context[contextProp]) {
return this.context[contextProp].get();
} else {
return defaultValue;
}
};
Consumer.prototype.render = function render() {
return onlyChild(this.props.children)(this.state.value);
};
return Consumer;
}(React__default.Component);
Consumer.contextTypes = (_Consumer$contextType = {}, _Consumer$contextType[contextProp] = _propTypes2.default.object, _Consumer$contextType);
return {
Provider: Provider,
Consumer: Consumer
};
}
exports.default = createReactContext;
module.exports = exports['default'];
});
unwrapExports(implementation);
var lib = createCommonjsModule(function (module, exports) {
exports.__esModule = true;
var _react2 = _interopRequireDefault(React__default);
var _implementation2 = _interopRequireDefault(implementation);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _react2.default.createContext || _implementation2.default;
module.exports = exports['default'];
});
var createContext = unwrapExports(lib);
var ManagerReferenceNodeContext = createContext();
var ManagerReferenceNodeSetterContext = createContext();
var Manager =
/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(Manager, _React$Component);
function Manager() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "referenceNode", void 0);
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "setReferenceNode", function (newReferenceNode) {
if (newReferenceNode && _this.referenceNode !== newReferenceNode) {
_this.referenceNode = newReferenceNode;
_this.forceUpdate();
}
});
return _this;
}
var _proto = Manager.prototype;
_proto.componentWillUnmount = function componentWillUnmount() {
this.referenceNode = null;
};
_proto.render = function render() {
return React.createElement(ManagerReferenceNodeContext.Provider, {
value: this.referenceNode
}, React.createElement(ManagerReferenceNodeSetterContext.Provider, {
value: this.setReferenceNode
}, this.props.children));
};
return Manager;
}(React.Component);
/**
* Takes an argument and if it's an array, returns the first item in the array,
* otherwise returns the argument. Used for Preact compatibility.
*/
var unwrapArray = function unwrapArray(arg) {
return Array.isArray(arg) ? arg[0] : arg;
};
/**
* Takes a maybe-undefined function and arbitrary args and invokes the function
* only if it is defined.
*/
var safeInvoke = function safeInvoke(fn) {
if (typeof fn === "function") {
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
return fn.apply(void 0, args);
}
};
/**
* Sets a ref using either a ref callback or a ref object
*/
var setRef = function setRef(ref, node) {
// if its a function call it
if (typeof ref === "function") {
return safeInvoke(ref, node);
} // otherwise we should treat it as a ref object
else if (ref != null) {
ref.current = node;
}
};
var initialStyle = {
position: 'absolute',
top: 0,
left: 0,
opacity: 0,
pointerEvents: 'none'
};
var initialArrowStyle = {};
var InnerPopper =
/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(InnerPopper, _React$Component);
function InnerPopper() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
data: undefined,
placement: undefined
});
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "popperInstance", void 0);
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "popperNode", null);
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "arrowNode", null);
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "setPopperNode", function (popperNode) {
if (!popperNode || _this.popperNode === popperNode) return;
setRef(_this.props.innerRef, popperNode);
_this.popperNode = popperNode;
_this.updatePopperInstance();
});
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "setArrowNode", function (arrowNode) {
_this.arrowNode = arrowNode;
});
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "updateStateModifier", {
enabled: true,
order: 900,
fn: function fn(data) {
var placement = data.placement;
_this.setState({
data: data,
placement: placement
});
return data;
}
});
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getOptions", function () {
return {
placement: _this.props.placement,
eventsEnabled: _this.props.eventsEnabled,
positionFixed: _this.props.positionFixed,
modifiers: _extends$1({}, _this.props.modifiers, {
arrow: _extends$1({}, _this.props.modifiers && _this.props.modifiers.arrow, {
enabled: !!_this.arrowNode,
element: _this.arrowNode
}),
applyStyle: {
enabled: false
},
updateStateModifier: _this.updateStateModifier
})
};
});
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getPopperStyle", function () {
return !_this.popperNode || !_this.state.data ? initialStyle : _extends$1({
position: _this.state.data.offsets.popper.position
}, _this.state.data.styles);
});
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getPopperPlacement", function () {
return !_this.state.data ? undefined : _this.state.placement;
});
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getArrowStyle", function () {
return !_this.arrowNode || !_this.state.data ? initialArrowStyle : _this.state.data.arrowStyles;
});
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getOutOfBoundariesState", function () {
return _this.state.data ? _this.state.data.hide : undefined;
});
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "destroyPopperInstance", function () {
if (!_this.popperInstance) return;
_this.popperInstance.destroy();
_this.popperInstance = null;
});
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "updatePopperInstance", function () {
_this.destroyPopperInstance();
var _assertThisInitialize = _assertThisInitialized(_assertThisInitialized(_this)),
popperNode = _assertThisInitialize.popperNode;
var referenceElement = _this.props.referenceElement;
if (!referenceElement || !popperNode) return;
_this.popperInstance = new PopperJS(referenceElement, popperNode, _this.getOptions());
});
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "scheduleUpdate", function () {
if (_this.popperInstance) {
_this.popperInstance.scheduleUpdate();
}
});
return _this;
}
var _proto = InnerPopper.prototype;
_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
// If the Popper.js options have changed, update the instance (destroy + create)
if (this.props.placement !== prevProps.placement || this.props.referenceElement !== prevProps.referenceElement || this.props.positionFixed !== prevProps.positionFixed || !deepEqual_1(this.props.modifiers, prevProps.modifiers, {
strict: true
})) {
this.updatePopperInstance();
} else if (this.props.eventsEnabled !== prevProps.eventsEnabled && this.popperInstance) {
this.props.eventsEnabled ? this.popperInstance.enableEventListeners() : this.popperInstance.disableEventListeners();
} // A placement difference in state means popper determined a new placement
// apart from the props value. By the time the popper element is rendered with
// the new position Popper has already measured it, if the place change triggers
// a size change it will result in a misaligned popper. So we schedule an update to be sure.
if (prevState.placement !== this.state.placement) {
this.scheduleUpdate();
}
};
_proto.componentWillUnmount = function componentWillUnmount() {
setRef(this.props.innerRef, null);
this.destroyPopperInstance();
};
_proto.render = function render() {
return unwrapArray(this.props.children)({
ref: this.setPopperNode,
style: this.getPopperStyle(),
placement: this.getPopperPlacement(),
outOfBoundaries: this.getOutOfBoundariesState(),
scheduleUpdate: this.scheduleUpdate,
arrowProps: {
ref: this.setArrowNode,
style: this.getArrowStyle()
}
});
};
return InnerPopper;
}(React.Component);
_defineProperty(InnerPopper, "defaultProps", {
placement: 'bottom',
eventsEnabled: true,
referenceElement: undefined,
positionFixed: false
});
PopperJS.placements;
function Popper(_ref) {
var referenceElement = _ref.referenceElement,
props = _objectWithoutPropertiesLoose(_ref, ["referenceElement"]);
return React.createElement(ManagerReferenceNodeContext.Consumer, null, function (referenceNode) {
return React.createElement(InnerPopper, _extends$1({
referenceElement: referenceElement !== undefined ? referenceElement : referenceNode
}, props));
});
}
var InnerReference =
/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(InnerReference, _React$Component);
function InnerReference() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "refHandler", function (node) {
setRef(_this.props.innerRef, node);
safeInvoke(_this.props.setReferenceNode, node);
});
return _this;
}
var _proto = InnerReference.prototype;
_proto.componentWillUnmount = function componentWillUnmount() {
setRef(this.props.innerRef, null);
};
_proto.render = function render() {
warning_1(Boolean(this.props.setReferenceNode));
return unwrapArray(this.props.children)({
ref: this.refHandler
});
};
return InnerReference;
}(React.Component);
function Reference(props) {
return React.createElement(ManagerReferenceNodeSetterContext.Consumer, null, function (setReferenceNode) {
return React.createElement(InnerReference, _extends$1({
setReferenceNode: setReferenceNode
}, props));
});
}
var OverlayManager = /*#__PURE__*/function () {
function OverlayManager() {
_classCallCheck(this, OverlayManager);
_defineProperty$1(this, "overlays", void 0);
this.overlays = [];
}
return _createClass(OverlayManager, [{
key: "add",
value: function add(overlay) {
if (overlay === null) return;
var overlayIdx = this.overlays.indexOf(overlay);
if (overlayIdx !== -1) {
return overlayIdx;
}
overlayIdx = this.overlays.length;
this.overlays.push(overlay);
return overlayIdx;
}
}, {
key: "remove",
value: function remove(overlay) {
if (overlay === null) return;
var overlayIdx = this.overlays.indexOf(overlay);
if (overlayIdx === -1) {
return;
}
this.overlays.splice(overlayIdx, 1);
}
}, {
key: "isTopOverlay",
value: function isTopOverlay(overlay) {
if (overlay === null) return;
return !!this.overlays.length && this.overlays[this.overlays.length - 1] === overlay;
}
/**
* Overlays registered after `overlay` in the stack — i.e. opened while `overlay` was
* already displayed (e.g. a Dropdown/DatePicker popper opened from within a Modal).
* Used to extend a dialog's focus trap to portaled content that visually belongs to it
* but isn't a DOM descendant (Poppers render into `document.body`, not the dialog).
*/
}, {
key: "getOverlaysAfter",
value: function getOverlaysAfter(overlay) {
if (overlay === null) return [];
var idx = this.overlays.indexOf(overlay);
if (idx === -1) return [];
return this.overlays.slice(idx + 1);
}
}]);
}();
var instance = new OverlayManager();
Object.freeze(instance);
var PopperWrapper = /*#__PURE__*/function (_React$Component) {
function PopperWrapper(props) {
var _this;
_classCallCheck(this, PopperWrapper);
_this = _callSuper(this, PopperWrapper, [props]);
_defineProperty$1(_this, "triggerRef", void 0);
_defineProperty$1(_this, "popupRef", void 0);
_defineProperty$1(_this, "hoverableDelay", void 0);
_defineProperty$1(_this, "_timer", void 0);
_defineProperty$1(_this, "_throttleWait", void 0);
_defineProperty$1(_this, "_overlayAddTimer", void 0);
_defineProperty$1(_this, "_overlayElement", null);
_defineProperty$1(_this, "offsetMapping", void 0);
_defineProperty$1(_this, "togglePopper", function (type, newValue) {
var _this$props = _this.props,
open = _this$props.open,
onToggle = _this$props.onToggle;
onToggle(newValue === undefined ? !open : newValue, type);
});
_defineProperty$1(_this, "doesEventContainsElement", function (event, ref) {
var el = ref.current;
return el && el.contains(event.target);
});
_defineProperty$1(_this, "getUpdatedStyle", function (oldStyle, placement, offset) {
var style = _this.props.style;
var newStyle = _objectSpread2(_objectSpread2({}, style), oldStyle);
var position = placement ? placement.split('-')[0] : placement;
switch (position) {
case 'top':
newStyle.marginBottom = _this.offsetMapping[offset];
break;
case 'bottom':
newStyle.marginTop = _this.offsetMapping[offset];
break;
case 'left':
newStyle.marginRight = _this.offsetMapping[offset];
break;
case 'right':
newStyle.marginLeft = _this.offsetMapping[offset];
break;
}
if (_this.props.triggerCoordinates) {
newStyle.position = 'absolute';
newStyle.transform = "translate(".concat(_this.props.triggerCoordinates.x, "px, ").concat(_this.props.triggerCoordinates.y, "px)");
}
return newStyle;
});
_defineProperty$1(_this, "onClickHandler", function () {
var openDelay = _this.props.openDelay;
// to add delay only while opening
if (openDelay && !_this.state.isOpen) {
window.setTimeout(function () {
_this.togglePopper('onClick');
}, openDelay);
} else {
_this.togglePopper('onClick');
}
});
_this.state = {
animationKeyframe: '',
isOpen: _this.props.open && !_this.props.disabled || false,
uniqueKey: ''
};
_this.hoverableDelay = 100;
_this.offsetMapping = {
small: '2px',
medium: '4px',
large: '8px'
};
_this.triggerRef = /*#__PURE__*/React.createRef();
_this.popupRef = /*#__PURE__*/React.createRef();
_this.getPopperChildren = _this.getPopperChildren.bind(_this);
_this.mouseMoveHandler = _this.mouseMoveHandler.bind(_this);
_this.handleMouseEnter = _this.handleMouseEnter.bind(_this);
_this.handleMouseLeave = _this.handleMouseLeave.bind(_this);
_this.boundaryScrollHandler = _this.boundaryScrollHandler.bind(_this);
_this.handleEscapeKey = _this.handleEscapeKey.bind(_this);
return _this;
}
_inherits(PopperWrapper, _React$Component);
return _createClass(PopperWrapper, [{
key: "scheduleOverlayAdd",
value: function scheduleOverlayAdd() {
var _this2 = this;
if (this._overlayAddTimer != null) {
window.clearTimeout(this._overlayAddTimer);
this._overlayAddTimer = undefined;
}
this._overlayAddTimer = window.setTimeout(function () {
_this2._overlayAddTimer = undefined;
if (_this2.popupRef.current && _this2.props.open) {
_this2._overlayElement = _this2.popupRef.current;
instance.add(_this2._overlayElement);
_this2.addEscapeKeyHandler();
}
}, 0);
}
}, {
key: "clearOverlayAddTimer",
value: function clearOverlayAddTimer() {
if (this._overlayAddTimer != null) {
window.clearTimeout(this._overlayAddTimer);
this._overlayAddTimer = undefined;
}
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
this.addBoundaryScrollHandler();
if (this.props.open) {
this.scheduleOverlayAdd();
}
var triggerElement = this.triggerRef.current;
var zIndex = this.getZIndexForLayer(triggerElement);
this.setState({
zIndex: zIndex === undefined ? zIndex : zIndex + 1
});
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
if (!prevProps.boundaryElement && this.props.boundaryElement) {
this.removeBoundaryScrollHandler();
this.addBoundaryScrollHandler();
}
if (prevProps.open !== this.props.open) {
if (this.props.open) {
this.scheduleOverlayAdd();
} else {
this.removeEscapeKeyHandler();
this.clearOverlayAddTimer();
instance.remove(this._overlayElement);
this._overlayElement = null;
}
this._throttleWait = false;
this.setState({
animationKeyframe: ''
});
if (this.props.open && !this.props.disabled) {
var triggerElement = this.triggerRef.current;
var zIndex = this.getZIndexForLayer(triggerElement);
this.setState({
zIndex: zIndex === undefined ? zIndex : zIndex + 1,
isOpen: true
});
} else if (!this.props.open && this.props.animationClass) {
this.setState({
isOpen: false
});
}
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.removeBoundaryScrollHandler();
this.removeEscapeKeyHandler();
this.clearOverlayAddTimer();
instance.remove(this._overlayElement);
this._overlayElement = null;
}
}, {
key: "boundaryScrollHandler",
value: function boundaryScrollHandler() {
var _this$props2 = this.props,
open = _this$props2.open,
on = _this$props2.on,
closeOnScroll = _this$props2.closeOnScroll;
if (on === 'click' && closeOnScroll) {
if (open) {
if (!this._throttleWait) {
this.togglePopper('onScroll', false);
this._throttleWait = true;
}
}
}
}
}, {
key: "addBoundaryScrollHandler",
value: function addBoundaryScrollHandler() {
if (this.props.boundaryElement && this.props.boundaryElement.addEventListener) {
this.props.boundaryElement.addEventListener('scroll', this.boundaryScrollHandler);
}
}
}, {
key: "removeBoundaryScrollHandler",
value: function removeBoundaryScrollHandler() {
if (this.props.boundaryElement && this.props.boundaryElement.removeEventListener) {
this.props.boundaryElement.removeEventListener('scroll', this.boundaryScrollHandler);
}
}
}, {
key: "handleEscapeKey",
value: function handleEscapeKey(event) {
if (event.key !== 'Escape' || !this.props.open) return;
var overlayEl = this._overlayElement || this.popupRef.current;
if (!overlayEl || !instance.isTopOverlay(overlayEl)) return;
this.togglePopper('escapeKeypress', false);
event.preventDefault();
event.stopImmediatePropagation();
}
}, {
key: "addEscapeKeyHandler",
value: function addEscapeKeyHandler() {
document.addEventListener('keydown', this.handleEscapeKey);
}
}, {
key: "removeEscapeKeyHandler",
value: function removeEscapeKeyHandler() {
document.removeEventListener('keydown', this.handleEscapeKey);
}
}, {
key: "mouseMoveHandler",
value: function mouseMoveHandler() {
var _this3 = this;
if (this._timer) clearTimeout(this._timer);
this._timer = window.setTimeout(function () {
var onToggle = _this3.props.onToggle;
onToggle(false, 'mouseLeave');
}, this.hoverableDelay);
}
}, {
key: "handleMouseEnter",
value: function handleMouseEnter() {
var _this4 = this;
var _this$props3 = this.props,
on = _this$props3.on,
openDelay = _this$props3.openDelay,
onToggle = _this$props3.onToggle;
if (on === 'hover') {
if (this._timer) clearTimeout(this._timer);
if (openDelay) {
this._timer = window.setTimeout(function () {
_this4.setState(function () {
return {
isOpen: true
};
});
_this4.togglePopper('mouseEnter', true);
}, openDelay);
} else {
onToggle(true, 'mouseEnter');
this.setState(function () {
return {
isOpen: true
};
});
}
}
}
}, {
key: "handleMouseLeave",
value: function handleMouseLeave() {
var on = this.props.on;
if (on === 'hover') {
var _this$props4 = this.props,
hoverable = _this$props4.hoverable,
onToggle = _this$props4.onToggle;
if (hoverable) {
this.mouseMoveHandler();
} else {
onToggle(false, 'mouseLeave');
this.setState({
isOpen: false
});
}
}
}
}, {
key: "getZIndexForLayer",
value: function getZIndexForLayer(node) {
if (node === null) {
return;
}
var layerNode = node.closest('[data-layer]') || document.body;
var zIndex = layerNode === document.body ? 'auto' : parseInt(window.getComputedStyle(layerNode).zIndex || '0', 10);
return zIndex === 'auto' || isNaN(zIndex) ? 500 : zIndex;
}
}, {
key: "getTriggerElement",
value: function getTriggerElement(ref) {
var _this5 = this;
var _this$props5 = this.props,
trigger = _this$props5.trigger,
on = _this$props5.on,
triggerClass = _this$props5.triggerClass,
disabled = _this$props5.disabled,
wrapperElement = _this$props5.wrapperElement;
var options = on === 'hover' && !disabled ? {
ref: ref,
onMouseEnter: this.handleMouseEnter,
onMouseLeave: this.handleMouseLeave,
onFocus: this.handleMouseEnter,
onBlur: this.handleMouseLeave
} : {
ref: ref,
onClick: function onClick(ev) {
ev.stopPropagation();
!disabled && _this5.onClickHandler();
}
};
var classes = classnames('PopperWrapper-trigger', triggerClass);
var shouldPopoverClose = function shouldPopoverClose(clicked) {
var popover = _this5.popupRef.current;
var container = document.body;
var popoverIndex = popover && parseInt(window.getComputedStyle(popover).zIndex);
var clickInsideLayer = false;
var shouldClose = false;
var openedLayers = container.querySelectorAll('[data-opened="true"]');
openedLayers.forEach(function (layer) {
if (layer && layer.contains(clicked)) {
clickInsideLayer = true;
var clickedIndex = parseInt(window.getComputedStyle(layer).zIndex);
if (popoverIndex > clickedIndex) {
shouldClose = true;
return;
}
}
});
if (container.isEqualNode(clicked) || shouldClose || !container.contains(clicked) || !clickInsideLayer) {
return true;
}
return false;
};
var onOutsideClickHandler = function onOutsideClickHandler(event) {
var _this5$props = _this5.props,
open = _this5$props.open,
closeOnBackdropClick = _this5$props.closeOnBackdropClick;
if (open && shouldPopoverClose(event.target) && closeOnBackdropClick) {
if (!_this5.doesEventContainsElement(event, _this5.popupRef)) {
_this5.togglePopper('outsideClick');
}
}
};
return /*#__PURE__*/React.createElement(OutsideClick, _extends$2({
className: classes,
onOutsideClick: onOutsideClickHandler,
wrapperElement: wrapperElement
}, options), trigger);
}
}, {
key: "getPopperChildren",
value: function getPopperChildren(_ref) {
var _this6 = this;
var ref = _ref.ref,
style = _ref.style,
placement = _ref.placement,
outOfBoundaries = _ref.outOfBoundaries;
var _this$props6 = this.props,
offset = _this$props6.offset,
children = _this$props6.children,
open = _this$props6.open,
animationClass = _this$props6.animationClass;
var _this$state = this.state,
zIndex = _this$state.zIndex,
animationKeyframe = _this$state.animationKeyframe,
uniqueKey = _this$state.uniqueKey;
var newStyle = offset ? this.getUpdatedStyle(style, placement, offset) : style;
var childrenStyles = _objectSpread2(_objectSpread2({}, newStyle), {}, {
zIndex: zIndex
});
var classes = '';
if (!animationClass) {
var _this$popupRef$curren, _this$popupRef$curren2;
var maxHeight = (_this$popupRef$curren = this.popupRef.current) === null || _this$popupRef$curren === void 0 ? void 0 : _this$popupRef$curren.offsetHeight;
// we need to check for transformStyles so that we open the popover at correct position (left/right)
var transformStyles = (_this$popupRef$curren2 = this.popupRef.current) === null || _this$popupRef$curren2 === void 0 ? void 0 : _this$popupRef$curren2.style.getPropertyValue('transform');
if (transformStyles && maxHeight && placement && !animationKeyframe) {
var _uniqueKey = Math.random().toString(36).substring(2, 6);
var isTop = placement.includes('top');
var popperAnimation = "\n @keyframes popper-open-".concat(_uniqueKey, " {\n from { \n max-height: 0;\n ").concat(isTop ? "margin-top: ".concat(maxHeight, "px") : '', ";\n }\n to {\n max-height: ").concat(maxHeight, "px;\n ").concat(isTop ? "margin-top: 0px" : '', ";\n }\n }\n @keyframes popper-close-").concat(_uniqueKey, " {\n from {\n max-height: ").concat(maxHeight, "px;\n ").concat(isTop ? "margin-top: 0px" : '', ";\n }\n to {\n max-height: 0;\n ").concat(isTop ? "margin-top: ".concat(maxHeight, "px") : '', ";\n }\n }\n ");
this.setState({
animationKeyframe: popperAnimation,
uniqueKey: _uniqueKey
});
}
// defining popper-fade-in custom keyframe as it is specific to popover usecase.
var popperAnimationStyles = {
animation: open ? "popper-open-".concat(uniqueKey, " 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms") : "popper-close-".concat(uniqueKey, " 120ms cubic-bezier(0.2, 0, 1, 0.9), fadeOut 100ms")
};
childrenStyles = _objectSpread2(_objectSpread2(_objectSpread2({}, childrenStyles), popperAnimationStyles), {}, {
overflow: 'hidden'
});
} else {
classes = classnames(_defineProperty$1(_defineProperty$1({}, "".concat(animationClass.open), this.state.isOpen), "".concat(animationClass.close), !this.state.isOpen), children.props.className);
}
var childProps = {
ref: ref,
style: childrenStyles,
'data-placement': placement,
'data-hide': outOfBoundaries,
onMouseEnter: this.handleMouseEnter,
onMouseLeave: this.handleMouseLeave,
onAnimationEnd: function onAnimationEnd() {
if (!open) {
flushSync(function () {
_this6.setState({
isOpen: false
});
});
}
}
};
var element = /*#__PURE__*/React.cloneElement(children, animationClass ? _objectSpread2(_objectSpread2({}, childProps), {}, {
className: classes
}) : _objectSpread2({}, childProps));
return element;
}
}, {
key: "render",
value: function render() {
var _this7 = this;
var _this$props7 = this.props,
placement = _this$props7.placement,
appendToBody = _this$props7.appendToBody,
hide = _this$props7.hide,
boundaryElement = _this$props7.boundaryElement,
triggerCoordinates = _this$props7.triggerCoordinates,
computeStyles = _this$props7.computeStyles;
var _this$state2 = this.state,
animationKeyframe = _this$state2.animationKeyframe,
isOpen = _this$state2.isOpen;
var coordinatesPopper = /*#__PURE__*/React.createElement(Popper, {
placement: placement,
innerRef: this.popupRef,
modifiers: _objectSpread2({
preventOverflow: {
boundariesElement: boundaryElement || document.body
},
hide: {
enabled: hide
},
computeStyles: computeStyles
}, triggerCoordinates && {
offset: {
offset: "".concat(triggerCoordinates.x, "px, ").concat(triggerCoordinates.y, "px")
}
})
}, this.getPopperChildren);
return /*#__PURE__*/React.createElement(Manager, null, animationKeyframe && /*#__PURE__*/React.createElement("style", null, animationKeyframe), /*#__PURE__*/React.createElement(Reference, {
innerRef: this.triggerRef
}, function (_ref2) {
var ref = _ref2.ref;
return _this7.getTriggerElement(ref);
}), isOpen && appendToBody && !triggerCoordinates && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement(Popper, {
placement: placement,
innerRef: this.popupRef,
modifiers: {
preventOverflow: {
boundariesElement: boundaryElement || document.body
},
hide: {
enabled: hide
},
computeStyles: computeStyles
}
}, this.getPopperChildren), document.body), isOpen && appendToBody && triggerCoordinates && /*#__PURE__*/ReactDOM.createPortal(coordinatesPopper, document.body), isOpen && !appendToBody && !triggerCoordinates && /*#__PURE__*/React.createElement(Popper, {
placement: placement,
innerRef: this.popupRef,
modifiers: {
computeStyles: computeStyles
}
}, this.getPopperChildren));
}
}]);
}(React.Component);
_defineProperty$1(PopperWrapper, "defaultProps", {
on: 'click',
offset: 'medium',
closeOnBackdropClick: true,
hoverable: true,
appendToBody: true,
style: {},
disabled: false
});
var css_248z$E = ".popover-module-Popover-34Ge0-4-30-3 {\n border-radius: var(--border-radius-10);\n position: absolute;\n z-index: 500;\n background: var(--white);\n box-shadow: var(--shadow-l);\n}\n\n.popover-module-Popover--dark-LYp8P-4-30-3 {\n background: var(--inverse);\n color: var(--white);\n}\n\n.popover-module-Popover-34Ge0-4-30-3[data-hide='true'] {\n visibility: hidden;\n pointer-events: none;\n}\n\n@keyframes popover-module-popper-fade-in-pghyg-4-30-3 {\n 0% {\n opacity: 0;\n }\n 80% {\n opacity: var(--opacity-6);\n }\n 100% {\n opacity: 1;\n }\n}\n";
var styles$D = {"Popover":"popover-module-Popover-34Ge0-4-30-3","Popover--dark":"popover-module-Popover--dark-LYp8P-4-30-3","popper-fade-in":"popover-module-popper-fade-in-pghyg-4-30-3"};
styleInject(css_248z$E);
var _excluded$_ = ["position", "customStyle", "dark", "children", "onToggle", "className", "hideOnReferenceEscape", "boundaryElement", "name"];
var propsList = ['appendToBody', 'trigger', 'hoverable', 'on', 'open', 'closeOnBackdropClick', 'offset', 'closeOnScroll'];
var Popover = function Popover(props) {
var position = props.position,
customStyle = props.customStyle,
dark = props.dark,
children = props.children,
onToggle = props.onToggle,
className = props.className,
hideOnReferenceEscape = props.hideOnReferenceEscape,
_props$boundaryElemen = props.boundaryElement,
boundaryElement = _props$boundaryElemen === void 0 ? document.body : _props$boundaryElemen,
name = props.name,
rest = _objectWithoutProperties(props, _excluded$_);
var _React$useState = React.useState(!!props.open),
_React$useState2 = _slicedToArray(_React$useState, 2),
open = _React$useState2[0],
setOpen = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
init = _React$useState4[0],
setInit = _React$useState4[1];
React.useEffect(function () {
if (props.open !== undefined) setOpen(props.open);
}, [props.open]);
var defaultOnToggle = React.useCallback(function (newOpen) {
setOpen(newOpen);
}, []);
React.useEffect(function () {
if (!init) {
if ('current' in boundaryElement && boundaryElement.current) {
setInit(true);
}
}
}, [boundaryElement]);
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$D.Popover, true), styles$D['Popover--dark'], dark), className);
var PopoverWrapper = /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-Popover",
className: classes,
"data-layer": true,
"data-opened": open,
"data-name": name
}, children);
return /*#__PURE__*/React.createElement(PopperWrapper, _extends$2({}, rest, {
init: init,
boundaryElement: 'current' in boundaryElement ? boundaryElement.current : boundaryElement,
open: open,
hide: hideOnReferenceEscape,
style: customStyle,
onToggle: onToggle || defaultOnToggle,
placement: position
}), PopoverWrapper);
};
Popover.displayName = 'Popover';
Popover.defaultProps = Object.assign({}, filterProps(PopperWrapper.defaultProps, propsList, true), {
offset: 'large',
position: 'bottom',
hideOnReferenceEscape: true,
customStyle: {}
});
var css_248z$D = ".chipInput-module-ChipInput-EQQlO-4-30-3 {\n display: flex;\n box-sizing: border-box;\n border-radius: var(--border-radius-10);\n box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary);\n background: var(--white);\n cursor: text;\n flex: 100%;\n}\n\n.chipInput-module-ChipInput--regular-3ZvCo-4-30-3 {\n padding-left: 10px;\n padding-right: var(--spacing-15);\n}\n\n.chipInput-module-ChipInput--small-YXoDv-4-30-3 {\n align-items: center;\n min-height: var(--spacing-60);\n padding-left: var(--spacing-20);\n padding-right: var(--spacing-10);\n}\n\n.chipInput-module-ChipInput-EQQlO-4-30-3:hover {\n background: var(--secondary-lighter);\n box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-dark);\n}\n\n.chipInput-module-ChipInput-EQQlO-4-30-3:focus-within {\n background: var(--white);\n}\n\n.chipInput-module-ChipInput--disabled-Qa6ok-4-30-3 {\n background: var(--secondary-lightest);\n box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-light);\n pointer-events: none;\n}\n\n.chipInput-module-ChipInput--withChips-svi7y-4-30-3 {\n padding-right: 0;\n}\n\n.chipInput-module-ChipInput--error-q8y-4-4-30-3 {\n box-shadow: inset 0 0 0 var(--spacing-2-5) var(--alert);\n}\n\n.chipInput-module-ChipInput-wrapper-NzLiD-4-30-3 {\n display: flex;\n flex: 100%;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.chipInput-module-ChipInput--small-YXoDv-4-30-3 .chipInput-module-ChipInput-wrapper-NzLiD-4-30-3 {\n min-height: var(--spacing-60);\n}\n\n.chipInput-module-ChipInput-border--focusRing-Vpauu-4-30-3 {\n border-radius: var(--border-radius-10);\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.chipInput-module-ChipInput-border--error-lX1Mm-4-30-3.chipInput-module-ChipInput-border--focusRing-Vpauu-4-30-3 {\n box-shadow: var(--shadow-spread) var(--alert-shadow);\n}\n\n.chipInput-module-ChipInput-input-ddUDt-4-30-3 {\n border: none;\n outline: none;\n display: flex;\n width: 100%;\n min-width: 15%;\n flex: 0px;\n box-sizing: border-box;\n font-family: var(--font-family);\n font-size: var(--font-size);\n}\n\n.chipInput-module-ChipInput-input--small-OzMCU-4-30-3 {\n height: 20px;\n margin-top: var(--spacing-05);\n margin-bottom: var(--spacing-05);\n font-size: var(--font-size-s);\n line-height: var(--font-height-s);\n font-weight: var(--font-weight-medium);\n}\n\n.chipInput-module-ChipInput-input--regular-qiv6--4-30-3 {\n height: var(--spacing-60);\n margin-top: var(--spacing-10);\n margin-bottom: var(--spacing-10);\n}\n\n.chipInput-module-ChipInput-EQQlO-4-30-3:hover .chipInput-module-ChipInput-input-ddUDt-4-30-3 {\n background: var(--secondary-lighter);\n}\n\n.chipInput-module-ChipInput-EQQlO-4-30-3:focus-within .chipInput-module-ChipInput-input-ddUDt-4-30-3 {\n background: var(--white);\n}\n\n.chipInput-module-ChipInput-icon-HQ7c4-4-30-3 {\n cursor: pointer;\n border-radius: var(--border-radius-full);\n}\n\n.chipInput-module-ChipInput-icon--small-PciKa-4-30-3 {\n flex-shrink: 0;\n align-self: center;\n margin-left: var(--spacing-15);\n height: var(--spacing-30);\n}\n\n.chipInput-module-ChipInput-icon--regular-AJM6E-4-30-3 {\n height: var(--spacing-40);\n margin-left: var(--spacing-20);\n margin-top: var(--spacing-20);\n}\n\n.chipInput-module-ChipInput-icon-HQ7c4-4-30-3:hover {\n background-color: var(--secondary);\n}\n\n.chipInput-module-ChipInput-icon-HQ7c4-4-30-3:active {\n background-color: var(--secondary-dark);\n}\n\n.chipInput-module-ChipInput-icon-HQ7c4-4-30-3:focus,\n.chipInput-module-ChipInput-icon-HQ7c4-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n";
var styles$C = {"ChipInput":"chipInput-module-ChipInput-EQQlO-4-30-3","ChipInput--regular":"chipInput-module-ChipInput--regular-3ZvCo-4-30-3","ChipInput--small":"chipInput-module-ChipInput--small-YXoDv-4-30-3","ChipInput--disabled":"chipInput-module-ChipInput--disabled-Qa6ok-4-30-3","ChipInput--withChips":"chipInput-module-ChipInput--withChips-svi7y-4-30-3","ChipInput--error":"chipInput-module-ChipInput--error-q8y-4-4-30-3","ChipInput-wrapper":"chipInput-module-ChipInput-wrapper-NzLiD-4-30-3","ChipInput-border--focusRing":"chipInput-module-ChipInput-border--focusRing-Vpauu-4-30-3","ChipInput-border--error":"chipInput-module-ChipInput-border--error-lX1Mm-4-30-3","ChipInput-input":"chipInput-module-ChipInput-input-ddUDt-4-30-3","ChipInput-input--small":"chipInput-module-ChipInput-input--small-OzMCU-4-30-3","ChipInput-input--regular":"chipInput-module-ChipInput-input--regular-qiv6--4-30-3","ChipInput-icon":"chipInput-module-ChipInput-icon-HQ7c4-4-30-3","ChipInput-icon--small":"chipInput-module-ChipInput-icon--small-PciKa-4-30-3","ChipInput-icon--regular":"chipInput-module-ChipInput-icon--regular-AJM6E-4-30-3"};
styleInject(css_248z$D);
var getChipInputBorderFocusRegion = function getChipInputBorderFocusRegion(target, inputClassName) {
if (!(target instanceof HTMLElement)) return null;
if (target.getAttribute('data-test') === 'DesignSystem-ChipInput--Input' || target.classList.contains(inputClassName)) {
return 'input';
}
if (target.closest('[data-test="DesignSystem-ChipInput--Icon"]')) return 'icon';
if (target.closest('[data-test="DesignSystem-ChipInput--Chip"]')) return 'chip';
return 'fieldChrome';
};
var _excluded$Z = ["type", "onClick"];
var keyCodes$1 = {
BACKSPACE: 'Backspace',
DELETE: 'Delete',
ENTER: 'Enter'
};
var ChipInput = function ChipInput(props) {
var chipOptions = props.chipOptions,
allowDuplicates = props.allowDuplicates,
_props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size,
disabled = props.disabled,
error = props.error,
placeholder = props.placeholder,
defaultValue = props.defaultValue,
value = props.value,
className = props.className,
autoFocus = props.autoFocus,
onChange = props.onChange,
onBlur = props.onBlur,
onFocus = props.onFocus,
chipValidator = props.chipValidator,
ariaLabel = props['aria-label'],
ariaLabelledBy = props['aria-labelledby'],
ariaDescribedBy = props['aria-describedby'];
var inputRef = /*#__PURE__*/React.createRef();
var customRef = React.useRef();
var _React$useState = React.useState(value || defaultValue),
_React$useState2 = _slicedToArray(_React$useState, 2),
chips = _React$useState2[0],
setChips = _React$useState2[1];
var _React$useState3 = React.useState(''),
_React$useState4 = _slicedToArray(_React$useState3, 2),
inputValue = _React$useState4[0],
setInputValue = _React$useState4[1];
var _React$useState5 = React.useState(null),
_React$useState6 = _slicedToArray(_React$useState5, 2),
borderFocusRegion = _React$useState6[0],
setBorderFocusRegion = _React$useState6[1];
var handleBorderFocusIn = React.useCallback(function (e) {
setBorderFocusRegion(getChipInputBorderFocusRegion(e.target, styles$C['ChipInput-input']));
}, []);
var handleBorderFocusOut = React.useCallback(function (e) {
var next = e.relatedTarget;
if (next instanceof Node && e.currentTarget.contains(next)) return;
setBorderFocusRegion(null);
}, []);
var baseProps = extractBaseProps(props);
React.useEffect(function () {
if (value !== undefined) {
setChips(value);
}
}, [value]);
React.useEffect(function () {
if (inputValue === '' && inputRef.current) {
inputRef.current.style.flexBasis = '0';
customRef.current.charCount = null;
}
}, [inputValue]);
var showBorderFocusRing = borderFocusRegion === 'input' || borderFocusRegion === 'fieldChrome';
var ChipInputBorderClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$C['ChipInput-border'], true), styles$C['ChipInput-border--error'], error), styles$C['ChipInput-border--focusRing'], showBorderFocusRing));
var ChipInputClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$C.ChipInput, true), styles$C['ChipInput--disabled'], disabled), styles$C['ChipInput--withChips'], chips && chips.length > 0), styles$C['ChipInput--error'], error), styles$C["ChipInput--".concat(size)], size), className);
var InputClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$C['ChipInput-input'], true), styles$C["ChipInput-input--".concat(size)], size), 'p-0', true));
var ChipClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, 'mr-3', true), 'my-2', size === 'small'), 'my-3', size === 'regular'));
var iconWrapperClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, inputStyles['Input-icon'], true), inputStyles['Input-iconWrapper--right'], true), 'pr-3', size === 'small'), 'pr-3-5', size === 'regular'));
var iconClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, inputStyles['Input-icon--right'], !disabled), 'p-3-5', size === 'small'), 'p-3', size === 'regular'));
var onUpdateChips = function onUpdateChips(updatedChips) {
if (onChange) onChange(updatedChips);
};
var onChipDeleteHandler = function onChipDeleteHandler(index) {
var updatedChips = _toConsumableArray(chips);
updatedChips.splice(index, 1);
if (!value) {
setChips(updatedChips);
}
onUpdateChips(updatedChips);
};
var onChipAddHandler = function onChipAddHandler() {
if (!inputValue) return;
var chip = inputValue.trim();
if (chipValidator && !chipValidator(chip)) {
return;
}
if ((allowDuplicates || chips.indexOf(chip) === -1) && chip) {
var updatedChips = [].concat(_toConsumableArray(chips), [chip]);
if (!value) {
setChips(updatedChips);
}
onUpdateChips(updatedChips);
setInputValue('');
}
};
var onDeleteAllHandler = function onDeleteAllHandler() {
var updatedChips = [];
if (!value) {
setChips(updatedChips);
}
onUpdateChips(updatedChips);
};
var onKeyDownHandler = function onKeyDownHandler(event) {
var chipsLength = chips.length;
switch (event.key) {
case keyCodes$1.DELETE:
case keyCodes$1.BACKSPACE:
if (inputValue === '' && chipsLength > 0) {
onChipDeleteHandler(chipsLength - 1);
}
break;
case keyCodes$1.ENTER:
event.preventDefault();
onChipAddHandler();
break;
}
};
var onInputChangeHandler = function onInputChangeHandler(e) {
var _inputRef$current, _inputRef$current2;
var elementScrollWidth = (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.scrollWidth;
var elementClientWidth = (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.clientWidth;
var charLen = e.target.value.length;
if (elementScrollWidth && elementClientWidth && inputRef.current) {
var _customRef$current;
if (elementScrollWidth > elementClientWidth && inputValue.length <= charLen && customRef.current) {
inputRef.current.style.flexBasis = 'auto';
customRef.current.charCount = charLen;
} else if (elementScrollWidth <= elementClientWidth && inputValue.length > charLen && charLen <= ((_customRef$current = customRef.current) === null || _customRef$current === void 0 ? void 0 : _customRef$current.charCount) - 2) {
inputRef.current.style.flex = '0';
}
}
setInputValue(e.target.value);
};
var chipComponents = chips.map(function (chip, index) {
var _chipOptions$type = chipOptions.type,
type = _chipOptions$type === void 0 ? 'input' : _chipOptions$type,
_onClick = chipOptions.onClick,
rest = _objectWithoutProperties(chipOptions, _excluded$Z);
return /*#__PURE__*/React.createElement(Chip, _extends$2({
"data-test": "DesignSystem-ChipInput--Chip",
label: chip,
name: chip,
type: type,
size: size,
disabled: disabled,
key: index,
className: ChipClass,
onClick: function onClick() {
return _onClick && _onClick(chip, index);
},
onClose: function onClose() {
return onChipDeleteHandler(index);
}
}, rest));
});
var iconSize = size === 'small' ? 12 : 16;
return /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-ChipInput--Border",
className: ChipInputBorderClass,
onFocusCapture: handleBorderFocusIn,
onBlurCapture: handleBorderFocusOut
}, /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-ChipInput"
}, baseProps, {
className: ChipInputClass
}), /*#__PURE__*/React.createElement("div", {
className: styles$C['ChipInput-wrapper'],
ref: customRef,
role: "presentation",
onClick: function onClick(e) {
if (e.target === e.currentTarget) {
var _inputRef$current3;
(_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.focus();
}
}
}, chips && chips.length > 0 && chipComponents, /*#__PURE__*/React.createElement("input", {
"data-test": "DesignSystem-ChipInput--Input",
ref: inputRef,
className: InputClass,
autoFocus: autoFocus,
placeholder: chips && chips.length > 0 ? '' : placeholder,
disabled: disabled,
value: inputValue,
onBlur: onBlur,
onFocus: onFocus,
onChange: onInputChangeHandler,
onKeyDown: onKeyDownHandler,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-describedby": ariaDescribedBy
})), chips.length > 0 && /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-ChipInput--Icon",
className: classnames(iconWrapperClass, 'align-self-center', 'flex-shrink-0'),
tabIndex: disabled ? -1 : 0,
role: "button",
"aria-label": "Clear all",
"aria-disabled": disabled || undefined,
onClick: disabled ? undefined : onDeleteAllHandler,
onKeyDown: disabled ? undefined : function (e) {
if (e.key === 'Enter' || isSpaceKey(e)) {
e.preventDefault();
onDeleteAllHandler();
}
}
}, /*#__PURE__*/React.createElement(Icon, {
name: "close",
size: iconSize,
appearance: disabled ? 'disabled' : undefined,
className: iconClass
}))));
};
ChipInput.displayName = 'ChipInput';
ChipInput.defaultProps = {
chipOptions: {},
defaultValue: [],
allowDuplicates: false,
autoFocus: false
};
var getTextAppearance = function getTextAppearance(isActive, disabled) {
return disabled ? 'disabled' : isActive ? 'link' : 'default';
};
var getIconAppearance = function getIconAppearance(isActive, disabled) {
return disabled ? 'disabled' : isActive ? 'primary_dark' : 'default';
};
var getPillsAppearance = function getPillsAppearance(isActive) {
return isActive ? 'primary' : 'secondary';
};
var getMenu = function getMenu(menus, active) {
var _iterator = _createForOfIteratorHelper(menus),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var menu = _step.value;
if (active.name && menu.name === active.name || active.link && menu.link === active.link) {
return menu;
}
if (menu.subMenu) {
var activeMenu = menu.subMenu.find(function (submenu) {
return active.name && submenu.name === active.name || active.link && submenu.link === active.link;
});
if (activeMenu) return activeMenu;
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return null;
};
var getExpandedMenus = function getExpandedMenus(menus, active) {
var expandedMenus = {};
var activeMenu = active ? getMenu(menus, active) : null;
var _iterator2 = _createForOfIteratorHelper(menus),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var menu = _step2.value;
// Determine if the current menu is active or should be expanded by default
var isActiveOrExpanded = (activeMenu === null || activeMenu === void 0 ? void 0 : activeMenu.name.split('.')[0]) === menu.name || menu.expanded;
if (menu.subMenu) {
expandedMenus[menu.name] = !!isActiveOrExpanded;
}
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
return expandedMenus;
};
var isMenuActive = function isMenuActive(menus, menu, active) {
if (active) {
var currActiveMenu = getMenu(menus, active);
return !!currActiveMenu && (currActiveMenu === menu || currActiveMenu.name.split('.')[0] === menu.name || currActiveMenu.name === menu.name || !!currActiveMenu.link && currActiveMenu.link === menu.link);
}
return false;
};
var getNavItemColor = function getNavItemColor(isActive, disabled) {
return disabled ? 'inverse-lightest' : isActive ? 'primary-dark' : 'inverse';
};
var formatCount = function formatCount(count) {
if (typeof count === 'string') {
return count;
}
if (typeof count === 'number') {
return count > 99 ? '99+' : count.toString();
}
return '';
};
var css_248z$C = ".verticalNav-module-VerticalNav-Dmfut-4-30-3 {\n display: inline-flex;\n flex-direction: column;\n}\n\n.verticalNav-module-VerticalNav--expanded-YioJV-4-30-3 {\n width: 240px;\n}\n\n.verticalNav-module-VerticalNav-section-LKy0d-4-30-3 {\n text-transform: uppercase;\n padding-left: var(--spacing-40);\n padding-top: var(--spacing-30);\n padding-bottom: var(--spacing-15);\n margin-top: var(--spacing-20);\n}\n\n.verticalNav-module-VerticalNav-section--border-II3bk-4-30-3 {\n border-top: var(--border-width-2-5) solid var(--secondary-light);\n}\n\n.verticalNav-module-MenuItem-tqOuM-4-30-3 {\n text-decoration: none;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n cursor: pointer;\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n width: 232px;\n}\n\n.verticalNav-module-MenuItem--horizontal-HqCw4-4-30-3 {\n height: var(--spacing-80);\n padding-right: var(--spacing-30);\n padding-left: var(--spacing-30);\n border-radius: var(--border-radius-40);\n margin: 0 var(--spacing-2-5);\n}\n\n.verticalNav-module-MenuItem--vertical-KTu0E-4-30-3 {\n margin-top: var(--spacing-10);\n margin-bottom: var(--spacing-10);\n}\n\n.verticalNav-module-MenuItem--collapsed-ksvh1-4-30-3 {\n height: 28px;\n width: 28px;\n margin-left: 10px;\n margin-right: 10px;\n justify-content: center;\n border-radius: var(--border-radius-full);\n cursor: pointer;\n}\n\n.verticalNav-module-MenuItem--expanded-CNuEg-4-30-3 {\n padding-left: var(--spacing-40);\n padding-top: var(--spacing-10);\n padding-bottom: var(--spacing-10);\n margin-right: var(--spacing-20);\n justify-content: space-between;\n border-radius: 0px var(--border-radius-40) var(--border-radius-40) 0px;\n}\n\n.verticalNav-module-MenuItem--disabled-UwXL1-4-30-3 {\n pointer-events: none;\n}\n\n.verticalNav-module-MenuItem-tqOuM-4-30-3:hover {\n background: var(--secondary);\n text-decoration: none;\n}\n\n.verticalNav-module-MenuItem-tqOuM-4-30-3:active {\n background: var(--secondary-dark);\n}\n\n.verticalNav-module-MenuItem-tqOuM-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.verticalNav-module-MenuItem-tqOuM-4-30-3:focus:not(:focus-visible) {\n outline: none;\n}\n\n.verticalNav-module-MenuItem--expanded-CNuEg-4-30-3:focus-visible {\n clip-path: inset(-6px -6px -6px 0);\n}\n\n.verticalNav-module-MenuItem--expandedRounded-u3k-c-4-30-3:focus-visible {\n clip-path: inset(-6px);\n}\n\n.verticalNav-module-MenuItem--disabled-UwXL1-4-30-3:focus-visible {\n outline: none;\n}\n\n.verticalNav-module-MenuItem--active-ocJoe-4-30-3 {\n background: var(--primary-ultra-light);\n box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary);\n}\n\n.verticalNav-module-MenuItem--activeExpanded--GaYh-4-30-3 {\n box-shadow: inset 0 var(--border-width-2-5) 0 0 var(--primary),\n inset calc(-1 * var(--border-width-2-5)) 0 0 0 var(--primary),\n inset 0 calc(-1 * var(--border-width-2-5)) 0 0 var(--primary);\n}\n\n.verticalNav-module-MenuItem--activeExpandedRounded-hDqIf-4-30-3 {\n box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary);\n}\n\n.verticalNav-module-MenuItem--active-ocJoe-4-30-3:hover {\n background: var(--primary-lightest);\n}\n\n.verticalNav-module-MenuItem--active-ocJoe-4-30-3:active {\n background: var(--primary-lighter);\n color: var(--primary-darker);\n box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary-dark);\n}\n\n.verticalNav-module-MenuItem--activeExpanded--GaYh-4-30-3:active {\n box-shadow: inset 0 var(--border-width-2-5) 0 0 var(--primary-dark),\n inset calc(-1 * var(--border-width-2-5)) 0 0 0 var(--primary-dark),\n inset 0 calc(-1 * var(--border-width-2-5)) 0 0 var(--primary-dark);\n}\n\n.verticalNav-module-MenuItem--activeExpandedRounded-hDqIf-4-30-3:active {\n box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary-dark);\n}\n\n.verticalNav-module-MenuItem--active-ocJoe-4-30-3:active .verticalNav-module-MenuItem-Text-5dxj5-4-30-3 {\n color: var(--primary-darker);\n}\n\n.verticalNav-module-MenuItem--active-ocJoe-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.verticalNav-module-MenuItem--active-ocJoe-4-30-3:focus:not(:focus-visible) {\n outline: none;\n}\n\n.verticalNav-module-MenuItem--rounded-7Cz5E-4-30-3 {\n border-radius: var(--border-radius-40);\n}\n\n.verticalNav-module-MenuItem--subMenu-ZHEdU-4-30-3 {\n padding-left: 40px;\n}\n\n.verticalNav-module-MenuItem-tqOuM-4-30-3 .verticalNav-module-Text-pcT-x-4-30-3 {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.verticalNav-module-MenuItem--overflow-RfJ7G-4-30-3 {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.verticalNav-module-MenuItem-count-hxliH-4-30-3 {\n margin-right: var(--spacing-10);\n flex-shrink: 0;\n}\n\n.verticalNav-module-MenuItem-count--disabled-2tJFi-4-30-3 {\n opacity: var(--opacity-10);\n color: var(--text);\n}\n";
var styles$B = {"VerticalNav":"verticalNav-module-VerticalNav-Dmfut-4-30-3","VerticalNav--expanded":"verticalNav-module-VerticalNav--expanded-YioJV-4-30-3","VerticalNav-section":"verticalNav-module-VerticalNav-section-LKy0d-4-30-3","VerticalNav-section--border":"verticalNav-module-VerticalNav-section--border-II3bk-4-30-3","MenuItem":"verticalNav-module-MenuItem-tqOuM-4-30-3","MenuItem--horizontal":"verticalNav-module-MenuItem--horizontal-HqCw4-4-30-3","MenuItem--vertical":"verticalNav-module-MenuItem--vertical-KTu0E-4-30-3","MenuItem--collapsed":"verticalNav-module-MenuItem--collapsed-ksvh1-4-30-3","MenuItem--expanded":"verticalNav-module-MenuItem--expanded-CNuEg-4-30-3","MenuItem--disabled":"verticalNav-module-MenuItem--disabled-UwXL1-4-30-3","MenuItem--expandedRounded":"verticalNav-module-MenuItem--expandedRounded-u3k-c-4-30-3","MenuItem--active":"verticalNav-module-MenuItem--active-ocJoe-4-30-3","MenuItem--activeExpanded":"verticalNav-module-MenuItem--activeExpanded--GaYh-4-30-3","MenuItem--activeExpandedRounded":"verticalNav-module-MenuItem--activeExpandedRounded-hDqIf-4-30-3","MenuItem-Text":"verticalNav-module-MenuItem-Text-5dxj5-4-30-3","MenuItem--rounded":"verticalNav-module-MenuItem--rounded-7Cz5E-4-30-3","MenuItem--subMenu":"verticalNav-module-MenuItem--subMenu-ZHEdU-4-30-3","Text":"verticalNav-module-Text-pcT-x-4-30-3","MenuItem--overflow":"verticalNav-module-MenuItem--overflow-RfJ7G-4-30-3","MenuItem-count":"verticalNav-module-MenuItem-count-hxliH-4-30-3","MenuItem-count--disabled":"verticalNav-module-MenuItem-count--disabled-2tJFi-4-30-3"};
styleInject(css_248z$C);
var MenuIcon = function MenuIcon(props) {
var isChildrenVisible = props.isChildrenVisible;
return /*#__PURE__*/React.createElement(Icon, {
className: "mx-4",
name: isChildrenVisible ? 'keyboard_arrow_up' : 'keyboard_arrow_down'
});
};
var MenuPills = function MenuPills(props) {
var disabled = props.disabled,
isActive = props.isActive,
count = props.count;
var PillsClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$B['MenuItem-count'], true), styles$B['MenuItem-count--disabled'], disabled));
return /*#__PURE__*/React.createElement(Pills, {
subtle: disabled,
className: PillsClass,
appearance: getPillsAppearance(isActive),
"data-test": "DesignSystem-VerticalNav--Pills"
}, count);
};
var MenuWrapper = function MenuWrapper(props) {
var children = props.children;
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-VerticalNav--MenuWrapper",
className: "d-flex align-items-center overflow-hidden"
}, props), children);
};
var MenuItem$1 = function MenuItem(props) {
var _classNames3;
var menu = props.menu,
isActive = props.isActive,
expanded = props.expanded,
rounded = props.rounded,
hasSubmenu = props.hasSubmenu,
isChildren = props.isChildren,
isChildrenVisible = props.isChildrenVisible,
onClick = props.onClick,
customItemRenderer = props.customItemRenderer,
customOptionRenderer = props.customOptionRenderer,
tabIndex = props.tabIndex;
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
isTextTruncated = _React$useState2[0],
setIsTextTruncated = _React$useState2[1];
var _Tooltip$useAutoToolt = Tooltip.useAutoTooltip(),
detectTruncation = _Tooltip$useAutoToolt.detectTruncation;
var contentRef = React.useRef(null);
React.useEffect(function () {
var isTruncated = detectTruncation(contentRef);
setIsTextTruncated(isTruncated);
}, [menu.label, expanded, menu.count, hasSubmenu, menu.icon]);
var MenuLabel = React.useCallback(function (props) {
var label = props.label,
labelColor = props.labelColor;
var labelClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$B['MenuItem-Text'], true), styles$B['MenuItem--overflow'], true), 'mr-5', !hasSubmenu && menu.count), 'ellipsis--noWrap', true));
return /*#__PURE__*/React.createElement(Text$1, {
"data-test": "DesignSystem-VerticalNav--Text",
ref: contentRef,
color: labelColor,
className: labelClass
}, label);
}, [hasSubmenu, menu.count]);
var onClickHandler = function onClickHandler(ev) {
ev.preventDefault();
if (onClick) onClick(menu);
};
var baseProps = _objectSpread2({
onClick: onClickHandler,
href: menu.link,
tabIndex: tabIndex !== undefined ? tabIndex : 0,
role: 'treeitem',
'aria-selected': isActive,
'aria-level': isChildren ? 2 : 1,
'aria-expanded': hasSubmenu ? isChildrenVisible ? 'true' : 'false' : undefined,
'aria-label': !expanded && menu.icon ? menu.label : undefined,
'data-menu-name': menu.name,
'data-disabled': menu.disabled ? 'true' : undefined
}, extractBaseProps(props));
var itemColor = getNavItemColor(isActive, menu.disabled);
var ItemClass = classnames((_classNames3 = {}, _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_classNames3, styles$B['MenuItem'], true), styles$B['MenuItem--vertical'], true), styles$B['MenuItem--collapsed'], !expanded), styles$B['MenuItem--expanded'], expanded), styles$B['MenuItem--expandedRounded'], expanded && rounded), styles$B['MenuItem--active'], isActive), styles$B['MenuItem--activeExpanded'], isActive && expanded), styles$B['MenuItem--activeExpandedRounded'], isActive && expanded && rounded), styles$B['MenuItem--disabled'], menu.disabled), styles$B['MenuItem--subMenu'], isChildren && expanded), _defineProperty$1(_defineProperty$1(_defineProperty$1(_classNames3, styles$B['MenuItem--rounded'], rounded && expanded), 'pr-5', !hasSubmenu && menu.count === undefined && expanded), "color-".concat(itemColor), true)));
var renderSubMenu = function renderSubMenu() {
if (hasSubmenu) {
return /*#__PURE__*/React.createElement(MenuIcon, {
isChildrenVisible: isChildrenVisible
});
}
if (menu.count !== undefined) {
var count = formatCount(menu.count);
return /*#__PURE__*/React.createElement(MenuPills, {
disabled: menu.disabled,
isActive: isActive,
count: count
});
}
return null;
};
var MenuIconFn = React.useCallback(function () {
return MenuIcon({
isChildrenVisible: isChildrenVisible
});
}, [isChildrenVisible]);
var MenuLabelFn = React.useCallback(function () {
return MenuLabel({
label: menu.label,
labelColor: itemColor
});
}, [MenuLabel, menu.label, itemColor]);
var MenuWrapperFn = React.useCallback(function (wrapperProps) {
return MenuWrapper(wrapperProps);
}, []);
var MenuPillsFn = React.useCallback(function () {
return menu.count !== undefined ? MenuPills({
disabled: menu.disabled,
isActive: isActive,
count: menu.count
}) : /*#__PURE__*/React.createElement(React.Fragment, null);
}, [menu.count, menu.disabled, isActive]);
if (!expanded && !menu.icon) return null;
var customItemProps = _objectSpread2(_objectSpread2({}, props), {}, {
contentRef: contentRef,
MenuIcon: MenuIconFn,
MenuLabel: MenuLabelFn,
MenuWrapper: MenuWrapperFn,
MenuPills: MenuPillsFn
});
return customItemRenderer ? customItemRenderer(customItemProps) : /*#__PURE__*/React.createElement(Tooltip, {
showTooltip: expanded ? isTextTruncated : true,
tooltip: menu.label,
position: "right"
}, /*#__PURE__*/React.createElement(Link$1, _extends$2({
componentType: "a",
className: ItemClass
}, baseProps), customOptionRenderer ? customOptionRenderer(customItemProps) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "d-flex align-items-center overflow-hidden"
}, menu.icon && /*#__PURE__*/React.createElement(Icon, {
"data-test": "DesignSystem-VerticalNav--Icon",
className: expanded ? 'mr-4' : '',
name: menu.icon,
type: menu.iconType
}), expanded && /*#__PURE__*/React.createElement(MenuLabel, {
label: menu.label,
labelColor: itemColor
})), expanded && renderSubMenu())));
};
MenuItem$1.defaultProps = {
isActive: false
};
var VERTICAL_NAV_ITEM_SELECTOR = '[data-menu-name]';
/**
* Get all visible (focusable, non-disabled) menu items from the VerticalNav container.
* Items are returned in DOM order.
*/
var getVisibleMenuItems = function getVisibleMenuItems(container) {
if (!container) return [];
var items = Array.from(container.querySelectorAll(VERTICAL_NAV_ITEM_SELECTOR));
return items.filter(function (el) {
return el.getAttribute('data-disabled') !== 'true';
});
};
/**
* Get the index of the currently focused item within the visible items list.
*/
var getFocusedIndex = function getFocusedIndex(items) {
var _active$closest;
var active = document.activeElement;
if (!active) return -1;
var focused = (_active$closest = active.closest) === null || _active$closest === void 0 ? void 0 : _active$closest.call(active, '[data-menu-name]');
if (!focused) return -1;
return items.findIndex(function (el) {
return el === focused;
});
};
/**
* Focus an item and scroll it into view.
*/
var focusItem = function focusItem(item) {
item.focus({
preventScroll: true
});
if (typeof item.scrollIntoView === 'function') {
item.scrollIntoView({
block: 'nearest'
});
}
};
var handleVerticalNavKeyDown = function handleVerticalNavKeyDown(event, options) {
var containerRef = options.containerRef,
setFocusedItemName = options.setFocusedItemName,
menuState = options.menuState,
subMenuExpandedState = options.subMenuExpandedState,
setMenuState = options.setMenuState,
setSubMenuExpandedState = options.setSubMenuExpandedState,
menus = options.menus,
expanded = options.expanded,
autoCollapse = options.autoCollapse;
var items = getVisibleMenuItems(containerRef.current);
if (items.length === 0) return;
var currentIndex = getFocusedIndex(items);
var isFocusedInside = currentIndex >= 0;
var getParentMenuName = function getParentMenuName(menuName) {
var dotIndex = menuName.indexOf('.');
return dotIndex > 0 ? menuName.slice(0, dotIndex) : null;
};
var hasSubmenu = function hasSubmenu(menuName) {
var menu = menus.find(function (m) {
return m.name === menuName;
});
return !!(menu !== null && menu !== void 0 && menu.subMenu && menu.subMenu.length > 0);
};
var isSubmenuExpanded = function isSubmenuExpanded(menuName) {
return !!(menuState[menuName] || subMenuExpandedState[menuName]);
};
var expandSubmenu = function expandSubmenu(menuName) {
if (!expanded || !hasSubmenu(menuName)) return;
if (autoCollapse) {
setMenuState(_defineProperty$1({}, menuName, true));
setSubMenuExpandedState(_defineProperty$1({}, menuName, true));
} else {
setSubMenuExpandedState(function (prev) {
return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty$1({}, menuName, true));
});
}
};
var collapseSubmenu = function collapseSubmenu(menuName) {
if (!expanded || !hasSubmenu(menuName)) return;
setMenuState(function (prev) {
return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty$1({}, menuName, false));
});
setSubMenuExpandedState(function (prev) {
return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty$1({}, menuName, false));
});
};
switch (event.key) {
case 'ArrowDown':
{
event.preventDefault();
if (!isFocusedInside) {
focusItem(items[0]);
setFocusedItemName(items[0].getAttribute('data-menu-name'));
} else {
var nextIndex = Math.min(currentIndex + 1, items.length - 1);
focusItem(items[nextIndex]);
setFocusedItemName(items[nextIndex].getAttribute('data-menu-name'));
}
break;
}
case 'ArrowUp':
{
event.preventDefault();
if (!isFocusedInside) {
focusItem(items[items.length - 1]);
setFocusedItemName(items[items.length - 1].getAttribute('data-menu-name'));
} else {
var prevIndex = Math.max(currentIndex - 1, 0);
focusItem(items[prevIndex]);
setFocusedItemName(items[prevIndex].getAttribute('data-menu-name'));
}
break;
}
case 'ArrowRight':
{
event.preventDefault();
if (!isFocusedInside) break;
var currentName = items[currentIndex].getAttribute('data-menu-name');
if (!currentName) break;
var parentName = getParentMenuName(currentName);
if (parentName) {
// ArrowRight on a submenu item is a no-op (leaf node)
break;
} else if (hasSubmenu(currentName) && !isSubmenuExpanded(currentName)) {
expandSubmenu(currentName);
} else if (hasSubmenu(currentName) && isSubmenuExpanded(currentName)) {
// Move to first child if parent has submenu and is expanded
var firstChildIndex = currentIndex + 1;
if (firstChildIndex < items.length) {
var childName = items[firstChildIndex].getAttribute('data-menu-name');
if (childName && getParentMenuName(childName) === currentName) {
focusItem(items[firstChildIndex]);
setFocusedItemName(childName);
}
}
}
break;
}
case 'ArrowLeft':
{
event.preventDefault();
if (!isFocusedInside) break;
var _currentName = items[currentIndex].getAttribute('data-menu-name');
if (!_currentName) break;
var _parentName = getParentMenuName(_currentName);
if (_parentName) {
var parentIndex = items.findIndex(function (el) {
return el.getAttribute('data-menu-name') === _parentName;
});
if (parentIndex >= 0) {
focusItem(items[parentIndex]);
setFocusedItemName(_parentName);
}
} else if (hasSubmenu(_currentName) && isSubmenuExpanded(_currentName)) {
collapseSubmenu(_currentName);
}
break;
}
case 'Home':
{
event.preventDefault();
focusItem(items[0]);
setFocusedItemName(items[0].getAttribute('data-menu-name'));
break;
}
case 'End':
{
event.preventDefault();
focusItem(items[items.length - 1]);
setFocusedItemName(items[items.length - 1].getAttribute('data-menu-name'));
break;
}
case ' ':
case 'Space':
case 'Spacebar':
{
event.preventDefault();
if (isFocusedInside) {
items[currentIndex].click();
}
break;
}
case 'Enter':
{
if (isFocusedInside) {
event.preventDefault();
items[currentIndex].click();
}
break;
}
}
};
/**
* Get the first visible (non-disabled, would-render) menu item name.
* Used for roving tabindex when no active/focused item is set.
*/
var getFirstVisibleMenuItemName = function getFirstVisibleMenuItemName(menus, expanded) {
var _iterator = _createForOfIteratorHelper(menus),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var menu = _step.value;
if (menu.disabled) continue;
if (!expanded && !menu.icon) continue;
return menu.name;
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return null;
};
/**
* Get the initial focused item name for roving tabindex.
* Prefers the active menu; otherwise the first focusable item.
* Only returns items that are actually rendered, visible, and enabled.
* Supports both active.name and active.link.
*/
var getInitialFocusedItemName = function getInitialFocusedItemName(menus, active, menuState, subMenuExpandedState, expanded) {
if (!active) return null;
// Use getMenu to support both active.name and active.link
var activeMenu = getMenu(menus, active);
if (!activeMenu) return null;
// Skip disabled items - they can't be keyboard navigated
if (activeMenu.disabled) return null;
// Check if the active menu is a top-level menu item
var isTopLevel = menus.some(function (m) {
return m.name === activeMenu.name;
});
if (isTopLevel) {
// In collapsed mode, only return if it has an icon (otherwise not rendered)
if (!expanded && !activeMenu.icon) return null;
return activeMenu.name;
}
// Active is a submenu item - find its parent
var _iterator2 = _createForOfIteratorHelper(menus),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var menu = _step2.value;
if (menu.subMenu) {
var activeSubMenu = menu.subMenu.find(function (s) {
return s.name === activeMenu.name;
});
if (activeSubMenu) {
// Submenu items are only rendered when parent is expanded
var isParentExpanded = menuState[menu.name] || subMenuExpandedState[menu.name];
// In collapsed mode, submenu items need an icon to render
var isRenderedInCollapsed = !expanded && activeSubMenu.icon;
if (!isParentExpanded || !expanded && !isRenderedInCollapsed) {
// Active submenu item is not rendered; fallback to parent if it's visible and enabled
if (menu.disabled) return null;
if (!expanded && !menu.icon) return null;
return menu.name;
}
// Submenu is rendered and enabled, return it
return activeMenu.name;
}
}
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
return null;
};
/**
* ####NOTE: VerticalNav sets first subMenu(if present) active if the Navigation is collapsed.
*/
var VerticalNav = function VerticalNav(props) {
var _ref;
var menus = props.menus,
active = props.active,
onClick = props.onClick,
expanded = props.expanded,
rounded = props.rounded,
autoCollapse = props.autoCollapse,
className = props.className,
customItemRenderer = props.customItemRenderer,
customOptionRenderer = props.customOptionRenderer,
ariaLabel = props['aria-label'],
ariaLabelledby = props['aria-labelledby'];
var _React$useState = React.useState({}),
_React$useState2 = _slicedToArray(_React$useState, 2),
subMenuExpandedState = _React$useState2[0],
setSubMenuExpandedState = _React$useState2[1];
var _React$useState3 = React.useState({}),
_React$useState4 = _slicedToArray(_React$useState3, 2),
menuState = _React$useState4[0],
setMenuState = _React$useState4[1];
var _React$useState5 = React.useState(null),
_React$useState6 = _slicedToArray(_React$useState5, 2),
focusedItemName = _React$useState6[0],
setFocusedItemName = _React$useState6[1];
var containerRef = React.useRef(null);
var baseProps = extractBaseProps(props);
// Validate that focusedItemName still exists in rendered items; otherwise reset
var isItemRendered = function isItemRendered(name) {
if (!name) return false;
var menu = menus.find(function (m) {
return m.name === name;
});
if (menu) {
if (menu.disabled) return false;
// In collapsed mode, top-level items without icons are not rendered
if (!expanded && !menu.icon) return false;
return true;
}
// Check if it's a submenu item
var _iterator = _createForOfIteratorHelper(menus),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var m = _step.value;
if (m.subMenu) {
var isExpanded = menuState[m.name] || subMenuExpandedState[m.name];
var subMenuMatch = m.subMenu.find(function (s) {
return s.name === name;
});
if (subMenuMatch) {
if (subMenuMatch.disabled) return false;
// Submenu items are only rendered when parent is expanded
// In collapsed mode, they are rendered only if they have an icon
if (!isExpanded) return false;
if (!expanded && !subMenuMatch.icon) return false;
return true;
}
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return false;
};
var validFocusedItemName = isItemRendered(focusedItemName) ? focusedItemName : null;
var effectiveFocused = (_ref = validFocusedItemName !== null && validFocusedItemName !== void 0 ? validFocusedItemName : getInitialFocusedItemName(menus, active, menuState, subMenuExpandedState, expanded)) !== null && _ref !== void 0 ? _ref : getFirstVisibleMenuItemName(menus, expanded);
var handleKeyDown = function handleKeyDown(event) {
handleVerticalNavKeyDown(event, {
containerRef: containerRef,
setFocusedItemName: setFocusedItemName,
menuState: menuState,
subMenuExpandedState: subMenuExpandedState,
setMenuState: setMenuState,
setSubMenuExpandedState: setSubMenuExpandedState,
menus: menus,
expanded: expanded,
autoCollapse: autoCollapse
});
};
var handleFocus = function handleFocus(event) {
var _target$closest;
var target = event.target;
var item = (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, '[data-menu-name]');
if (item) setFocusedItemName(item.getAttribute('data-menu-name'));
};
React.useEffect(function () {
if (props.active) {
var currMenu = getMenu(menus, props.active);
if (currMenu) updateMenuState(currMenu, true);
}
}, [props.active]);
React.useEffect(function () {
var expandedMenus = getExpandedMenus(menus, active);
setSubMenuExpandedState(expandedMenus);
}, []);
var updateMenuState = function updateMenuState(menu, val) {
var currMenu = getMenu(menus, menu);
if (currMenu) {
var nameSplit = currMenu.name.split('.');
if (nameSplit.length > 1 || currMenu.subMenu) {
var name = nameSplit[0];
if (autoCollapse) {
setMenuState(_defineProperty$1({}, name, val || !menuState[name]));
} else {
var menuData = _objectSpread2({}, menuState);
menuData[name] = val !== undefined ? val : !menuData[name];
setMenuState(menuData);
}
} else {
if (autoCollapse) {
if (!expanded) setMenuState({});
}
}
}
};
var onClickHandler = function onClickHandler(menu) {
if (menu.subMenu) {
if (!expanded) {
if (onClick) onClick(menu.subMenu[0]);
} else {
if (!subMenuExpandedState[menu.name]) {
updateMenuState(menu);
}
setMenuState(_objectSpread2(_objectSpread2({}, menuState), {}, _defineProperty$1({}, menu.name, false)));
setSubMenuExpandedState(_objectSpread2(_objectSpread2({}, subMenuExpandedState), {}, _defineProperty$1({}, menu.name, !subMenuExpandedState[menu.name])));
}
} else {
if (onClick) onClick(menu);
}
};
var renderList = function renderList() {
var list = menus.map(function (menu, index) {
var isActive = !menuState[menu.name] && isMenuActive(menus, menu, active);
var hasSubmenu = menu.subMenu && menu.subMenu.length > 0;
var isChildrenVisible = hasSubmenu && (menuState[menu.name] || subMenuExpandedState[menu.name]);
var hasGroup = index === 0 || menus[index - 1].group !== menu.group;
var sectionClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$B['VerticalNav-section'], true), styles$B['VerticalNav-section--border'], index !== 0));
return /*#__PURE__*/React.createElement(React.Fragment, {
key: index
}, hasGroup && menu.group && expanded && /*#__PURE__*/React.createElement("div", {
className: sectionClass
}, /*#__PURE__*/React.createElement(Text$1, {
"data-test": "DesignSystem-VerticalNav--Section",
size: "small",
weight: "strong",
appearance: "subtle"
}, menu.group)), /*#__PURE__*/React.createElement(MenuItem$1, {
"data-test": "DesignSystem-VerticalNav--Item",
menu: menu,
expanded: expanded,
isActive: isActive,
hasSubmenu: hasSubmenu,
isChildren: false,
rounded: rounded,
isChildrenVisible: isChildrenVisible,
onClick: onClickHandler,
customItemRenderer: customItemRenderer,
customOptionRenderer: customOptionRenderer,
tabIndex: effectiveFocused === menu.name ? 0 : -1
}), isChildrenVisible && menu.subMenu.map(function (subMenu, id) {
return /*#__PURE__*/React.createElement(MenuItem$1, {
key: id,
menu: subMenu,
expanded: expanded,
hasSubmenu: false,
isChildren: true,
rounded: rounded,
onClick: onClickHandler,
isActive: isMenuActive(menus, subMenu, active),
customItemRenderer: customItemRenderer,
customOptionRenderer: customOptionRenderer,
tabIndex: effectiveFocused === subMenu.name ? 0 : -1
});
}));
});
return list;
};
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$B.VerticalNav, true), styles$B['VerticalNav--expanded'], expanded), className);
return /*#__PURE__*/React.createElement("div", _extends$2({
ref: containerRef,
role: "tree",
tabIndex: -1,
"data-test": "DesignSystem-VerticalNav"
}, baseProps, {
className: classes,
onKeyDown: handleKeyDown,
onFocus: handleFocus,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby
}), renderList());
};
VerticalNav.defaultProps = {
expanded: true,
autoCollapse: true,
rounded: false,
showTooltip: false
};
var css_248z$B = ".horizontalNav-module-HorizontalNav-TaKHt-4-30-3 {\n display: flex;\n}\n\n.horizontalNav-module-HorizontalNav-list-j9LKM-4-30-3 {\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.horizontalNav-module-HorizontalNav-listItem-JJsD1-4-30-3 {\n display: flex;\n}\n\n.horizontalNav-module-HorizontalNav-menu-hc7-x-4-30-3 {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n cursor: pointer;\n border: 0;\n background: transparent;\n font: inherit;\n text-decoration: none;\n height: var(--spacing-80);\n padding-right: var(--spacing-30);\n padding-left: var(--spacing-30);\n border-radius: var(--border-radius-40);\n margin: 0 var(--spacing-2-5);\n}\n\n.horizontalNav-module-HorizontalNav-menu--disabled-WDs4e-4-30-3 {\n pointer-events: none;\n}\n\n.horizontalNav-module-HorizontalNav-menu--disabled-WDs4e-4-30-3:focus-visible,\n.horizontalNav-module-HorizontalNav-menu--disabled-WDs4e-4-30-3:focus {\n outline: none;\n}\n\n.horizontalNav-module-HorizontalNav-menu--default-iaSU9-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.horizontalNav-module-HorizontalNav-menu--default-iaSU9-4-30-3:hover {\n background-color: var(--secondary);\n}\n\n.horizontalNav-module-HorizontalNav-menu--default-iaSU9-4-30-3:active {\n background-color: var(--secondary-dark);\n}\n\n.horizontalNav-module-HorizontalNav-menu--active-LO21D-4-30-3 {\n background-color: var(--primary-ultra-light);\n box-shadow: 0 0 0 var(--border-width-05) var(--primary);\n}\n\n.horizontalNav-module-HorizontalNav-menu--active-LO21D-4-30-3:focus-visible {\n background-color: var(--primary-ultra-light);\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-10);\n}\n\n.horizontalNav-module-HorizontalNav-menu--active-LO21D-4-30-3:hover {\n background-color: var(--primary-lightest);\n}\n\n.horizontalNav-module-HorizontalNav-menu--active-LO21D-4-30-3:active {\n background-color: var(--primary-lighter);\n color: var(--primary-darker);\n box-shadow: 0 0 0 var(--border-width-05) var(--primary-dark);\n}\n\n.horizontalNav-module-HorizontalNav-menu--active-LO21D-4-30-3:active .horizontalNav-module-HorizontalNav-menuText-hlHtx-4-30-3 {\n color: var(--primary-darker);\n}\n\n.horizontalNav-module-HorizontalNav-menu--active-LO21D-4-30-3:focus-visible:active {\n background-color: var(--primary-lighter);\n box-shadow: 0 0 0 var(--border-width-05) var(--primary-dark);\n}\n\n.horizontalNav-module-HorizontalNav-menuText-hlHtx-4-30-3 {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.horizontalNav-module-HorizontalNav-menu--active-LO21D-4-30-3,\n.horizontalNav-module-HorizontalNav-animate-HJvL2-4-30-3 {\n transition-delay: var(--duration--fast-02);\n}\n\n.horizontalNav-module-HorizontalNav-animate-HJvL2-4-30-3 {\n transition: var(--duration--fast-02) var(--standard-productive-curve);\n}\n\n.horizontalNav-module-HorizontalNav-pills-Ko7S--4-30-3 {\n margin-right: var(--spacing-10);\n}\n\n.horizontalNav-module-HorizontalNav-pills--disabled-qc3Ao-4-30-3 {\n opacity: var(--opacity-10);\n}\n\n@media (forced-colors: active) {\n /* Active nav item uses box-shadow as its visible ring — replace with a real border */\n .horizontalNav-module-HorizontalNav-menu--active-LO21D-4-30-3 {\n border: var(--border-width-2-5) solid Highlight;\n box-shadow: none;\n }\n\n .horizontalNav-module-HorizontalNav-menu--active-LO21D-4-30-3:active,\n .horizontalNav-module-HorizontalNav-menu--active-LO21D-4-30-3:focus-visible:active {\n border-color: Highlight;\n box-shadow: none;\n }\n}\n";
var styles$A = {"HorizontalNav":"horizontalNav-module-HorizontalNav-TaKHt-4-30-3","HorizontalNav-list":"horizontalNav-module-HorizontalNav-list-j9LKM-4-30-3","HorizontalNav-listItem":"horizontalNav-module-HorizontalNav-listItem-JJsD1-4-30-3","HorizontalNav-menu":"horizontalNav-module-HorizontalNav-menu-hc7-x-4-30-3","HorizontalNav-menu--disabled":"horizontalNav-module-HorizontalNav-menu--disabled-WDs4e-4-30-3","HorizontalNav-menu--default":"horizontalNav-module-HorizontalNav-menu--default-iaSU9-4-30-3","HorizontalNav-menu--active":"horizontalNav-module-HorizontalNav-menu--active-LO21D-4-30-3","HorizontalNav-menuText":"horizontalNav-module-HorizontalNav-menuText-hlHtx-4-30-3","HorizontalNav-animate":"horizontalNav-module-HorizontalNav-animate-HJvL2-4-30-3","HorizontalNav-pills":"horizontalNav-module-HorizontalNav-pills-Ko7S--4-30-3","HorizontalNav-pills--disabled":"horizontalNav-module-HorizontalNav-pills--disabled-qc3Ao-4-30-3"};
styleInject(css_248z$B);
var HorizontalNav = function HorizontalNav(props) {
var menus = props.menus,
active = props.active,
onClick = props.onClick,
className = props.className,
_props$ariaLabel = props['aria-label'],
ariaLabel = _props$ariaLabel === void 0 ? 'Horizontal Navigation' : _props$ariaLabel;
var baseProps = extractBaseProps(props);
var classes = classnames(_defineProperty$1({}, styles$A['HorizontalNav'], true), className);
var onClickHandler = function onClickHandler(event, menu) {
if (menu.disabled) {
event.preventDefault();
return;
}
// Preserve link navigation when no callback is provided.
if (onClick) {
event.preventDefault();
onClick(menu);
}
};
var getPillsClass = function getPillsClass(disabled) {
return classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$A['HorizontalNav-pills'], true), styles$A['HorizontalNav-pills--disabled'], disabled), styles$A['HorizontalNav-animate'], true));
};
var renderIcon = function renderIcon(menu, isActive) {
if (menu.count !== undefined) {
var count = formatCount(menu.count);
return /*#__PURE__*/React.createElement(Pills, {
subtle: menu.disabled,
className: getPillsClass(menu.disabled),
appearance: getPillsAppearance(isActive),
"data-test": "DesignSystem-HorizontalNav--Pills"
}, count);
}
var IconClassName = classnames('mr-3', styles$A['HorizontalNav-animate']);
if (menu.icon) {
return /*#__PURE__*/React.createElement(Icon, {
className: IconClassName,
name: menu.icon,
type: menu.iconType,
"data-test": "DesignSystem-HorizontalNav--Icon"
});
}
return null;
};
var list = menus.map(function (menu, index) {
var isActive = isMenuActive(menus, menu, active);
var itemColor = getNavItemColor(isActive, menu.disabled);
var menuClasses = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$A['HorizontalNav-menu'], true), styles$A['HorizontalNav-menu--default'], !isActive && !menu.disabled), styles$A['HorizontalNav-menu--active'], isActive), styles$A['HorizontalNav-menu--disabled'], menu.disabled), styles$A["HorizontalNav-animate"], true), "color-".concat(itemColor), true));
var textClasses = classnames(styles$A['HorizontalNav-menuText'], styles$A['HorizontalNav-animate']);
var commonProps = {
'data-test': 'DesignSystem-HorizontalNav',
className: menuClasses
};
var content = /*#__PURE__*/React.createElement(React.Fragment, null, renderIcon(menu, isActive), /*#__PURE__*/React.createElement(Text$1, {
color: itemColor,
weight: "medium",
"data-test": "DesignSystem-HorizontalNav--Text",
className: textClasses
}, menu.label));
var renderMenu = function renderMenu() {
if (menu.disabled) {
return /*#__PURE__*/React.createElement("span", _extends$2({}, commonProps, {
"aria-disabled": "true"
}), content);
}
if (menu.link) {
return /*#__PURE__*/React.createElement("a", _extends$2({}, commonProps, {
href: menu.link,
"aria-current": isActive ? 'page' : undefined,
onClick: function onClick(event) {
return onClickHandler(event, menu);
}
}), content);
}
return /*#__PURE__*/React.createElement("button", _extends$2({
type: "button"
}, commonProps, {
"aria-current": isActive ? 'page' : undefined,
onClick: function onClick(event) {
return onClickHandler(event, menu);
}
}), content);
};
return /*#__PURE__*/React.createElement("li", {
key: index,
className: styles$A['HorizontalNav-listItem']
}, renderMenu());
});
return /*#__PURE__*/React.createElement("nav", _extends$2({}, baseProps, {
className: classes,
"aria-label": ariaLabel
}), list.length > 0 &&
/*#__PURE__*/
// eslint-disable-next-line jsx-a11y/no-redundant-roles
React.createElement("ul", {
role: "list",
className: styles$A['HorizontalNav-list'],
"data-test": "DesignSystem-HorizontalNav--List"
}, list));
};
var _excluded$Y = ["children", "tooltip", "showTooltip", "showOnTruncation", "elementRef", "className", "size", "aria-hidden"];
var tooltipPropsList = ['trigger', 'on', 'open', 'offset', 'onToggle', 'dark', 'customStyle', 'closeOnBackdropClick', 'hideOnReferenceEscape', 'closeOnScroll'];
var positionValue = {
bottom: 'bottom',
top: 'top',
'top-start': 'top',
'top-end': 'top',
'bottom-start': 'bottom',
'bottom-end': 'bottom',
left: 'left',
right: 'right'
};
function assignRef$1(ref, value) {
if (ref == null) return;
if (typeof ref === 'function') {
ref(value);
} else {
ref.current = value;
}
}
var detectTruncation = function detectTruncation(boundaryRef) {
var element = boundaryRef === null || boundaryRef === void 0 ? void 0 : boundaryRef.current;
var isTruncated = element ? element.scrollWidth > element.clientWidth : false;
return isTruncated;
};
var Tooltip = function Tooltip(props) {
var children = props.children,
tooltip = props.tooltip,
showTooltip = props.showTooltip,
showOnTruncation = props.showOnTruncation,
elementRef = props.elementRef,
className = props.className,
_props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size,
ariaHidden = props['aria-hidden'],
rest = _objectWithoutProperties(props, _excluded$Y);
var childrenRef = React.useRef(null);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
isTruncated = _React$useState2[0],
setIsTruncated = _React$useState2[1];
var tooltipIdRef = React.useRef(null);
if (tooltipIdRef.current === null) {
tooltipIdRef.current = "Tooltip-".concat(uidGenerator());
}
var tooltipId = tooltipIdRef.current;
// When true, the trigger already exposes an equivalent accessible description of its own
// (e.g. Button/LinkButton's sr-only tooltip text), so this Tooltip must not add a second one.
var hideFromAT = ariaHidden === true || ariaHidden === 'true';
// Truncation tooltips repeat text that's already present (just visually clipped) in the
// trigger/elementRef DOM node, so screen readers already have it — linking the tooltip
// bubble via aria-describedby would announce the same text a second time.
var skipDescription = hideFromAT || showOnTruncation;
React.useEffect(function () {
var element = elementRef ? elementRef : childrenRef;
setIsTruncated(detectTruncation(element));
}, [childrenRef, elementRef, children]);
// Associates the trigger with the tooltip content so screen readers announce it,
// regardless of whether the trigger also needs the ref used for truncation detection.
// The ref passed via `extraProps` is merged with (not swapped for) any ref the caller
// already attached to the trigger, so imperative access (e.g. `<Button ref={...}>`) keeps working.
var withTooltipAria = function withTooltipAria(element) {
var extraProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (! /*#__PURE__*/React.isValidElement(element)) return element;
var existingRef = element.ref;
var mergedRef = extraProps.ref ? function (node) {
assignRef$1(extraProps.ref, node);
assignRef$1(existingRef, node);
} : existingRef;
if (skipDescription) {
return /*#__PURE__*/React.cloneElement(element, {
ref: mergedRef
});
}
// If the trigger's own accessible name already says the same thing as the tooltip
// (e.g. a "Close" icon button with tooltip="Close", or <button>Save</button> with
// tooltip="Save"), describing it again would make screen readers announce the same
// word twice — once as the name, once as the description. `aria-label` and plain-text
// `children` are the two name sources we can read directly off the trigger element;
// `aria-labelledby` points elsewhere in the DOM, so it can't be resolved here.
var triggerProps = element.props;
var triggerAccessibleName = typeof triggerProps['aria-label'] === 'string' ? triggerProps['aria-label'] : typeof triggerProps.children === 'string' || typeof triggerProps.children === 'number' ? String(triggerProps.children) : undefined;
var repeatsAccessibleName = typeof tooltip === 'string' && triggerAccessibleName !== undefined && triggerAccessibleName.trim().toLowerCase() === tooltip.trim().toLowerCase();
if (repeatsAccessibleName) {
return /*#__PURE__*/React.cloneElement(element, {
ref: mergedRef
});
}
var existingDescribedBy = element.props['aria-describedby'];
return /*#__PURE__*/React.cloneElement(element, {
ref: mergedRef,
'aria-describedby': existingDescribedBy ? "".concat(existingDescribedBy, " ").concat(tooltipId) : tooltipId
});
};
// Only attach the measurement ref when truncation detection actually needs it — plain
// function-component triggers (e.g. Link, Icon) can't take a ref without forwardRef,
// so forcing one on unconditionally would warn ("Function components cannot be given refs").
var renderChildren = showOnTruncation && !elementRef ? withTooltipAria(children, {
ref: childrenRef
}) : withTooltipAria(children);
if (!showTooltip) {
// If showTooltip is false skip the Popover and return the children directly
return children;
}
var tooltipClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$N['Tooltip'], true), styles$N["Tooltip--small"], size === 'small'));
var tooltipWrapper = /*#__PURE__*/React.createElement("div", {
id: skipDescription ? undefined : tooltipId,
"aria-hidden": hideFromAT || undefined,
role: "tooltip",
className: tooltipClass,
"data-test": "DesignSystem-Tooltip-Wrapper"
}, /*#__PURE__*/React.createElement(Text$1, {
className: styles$N['Tooltip-text'],
appearance: "white",
size: size
}, tooltip));
var classes = classnames(styles$N['Tooltip-container'], className);
if (showOnTruncation) {
return isTruncated ? /*#__PURE__*/React.createElement(Popover, _extends$2({
trigger: renderChildren,
on: 'hover',
offset: 'medium',
animationClass: {
open: styles$N["Tooltip-animation-open-".concat(positionValue[props.position])],
close: styles$N["Tooltip-animation-close-".concat(positionValue[props.position])]
},
className: classes
}, rest), tooltipWrapper) : renderChildren;
}
return /*#__PURE__*/React.createElement(Popover, _extends$2({
trigger: renderChildren,
on: 'hover',
offset: 'medium',
animationClass: {
open: styles$N["Tooltip-animation-open-".concat(positionValue[props.position])],
close: styles$N["Tooltip-animation-close-".concat(positionValue[props.position])]
},
className: classes
}, rest), tooltipWrapper);
};
Tooltip.useAutoTooltip = function () {
return {
detectTruncation: detectTruncation
};
};
Tooltip.defaultProps = Object.assign({}, filterProps(Popover.defaultProps, tooltipPropsList), {
hoverable: true,
showTooltip: true,
showOnTruncation: false
});
/**
*
* Dialog component has been deprecated, please use [Modal](https://mds.innovaccer.com/?path=/docs/components-modal-modal-all--all) component instead.
*
*/
var Dialog = function Dialog(props) {
var dimension = props.dimension,
primaryButtonAppearance = props.primaryButtonAppearance,
secondaryButtonAppearance = props.secondaryButtonAppearance,
open = props.open,
onClose = props.onClose,
heading = props.heading,
title = props.title,
description = props.description,
primaryButtonLabel = props.primaryButtonLabel,
primaryButtonCallback = props.primaryButtonCallback,
secondaryButtonLabel = props.secondaryButtonLabel,
secondaryButtonCallback = props.secondaryButtonCallback;
var baseProps = extractBaseProps(props);
return /*#__PURE__*/React.createElement(Modal, _extends$2({
"data-test": "DesignSystem-Dialog"
}, baseProps, {
open: open,
dimension: dimension,
onClose: onClose,
headerOptions: {
heading: heading
},
footer: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
type: "button",
"data-test": "DesignSystem-Dialog--SecondaryButton",
appearance: secondaryButtonAppearance,
onClick: secondaryButtonCallback
}, secondaryButtonLabel), /*#__PURE__*/React.createElement(Button, {
type: "button",
className: "ml-4",
"data-test": "DesignSystem-Dialog--PrimaryButton",
appearance: primaryButtonAppearance,
onClick: primaryButtonCallback
}, primaryButtonLabel))
}), /*#__PURE__*/React.createElement(ModalDescription, {
title: title,
description: description
}));
};
Dialog.displayName = 'Dialog';
Dialog.defaultProps = {
dimension: 'small',
primaryButtonAppearance: 'primary',
secondaryButtonAppearance: 'basic'
};
var css_248z$A = ".overlay-module-OverlayHeader-X75uk-4-30-3 {\n box-sizing: border-box;\n margin-left: var(--spacing-60);\n}\n\n.overlay-module-OverlayHeader--withBackButton-P8Z6f-4-30-3 {\n margin-left: var(--spacing-40);\n}\n\n.overlay-module-OverlayHeader-headerWrapper-wDTqn-4-30-3 {\n display: flex;\n align-items: center;\n}\n\n.overlay-module-OverlayHeader-subheading-HGK3Q-4-30-3 {\n margin-top: var(--spacing-05);\n}\n\n.overlay-module-OverlayHeader-subheading--withBackButton-vmR5i-4-30-3 {\n margin-left: var(--spacing-20);\n}\n\n.overlay-module-OverlayBody-0aiqy-4-30-3 {\n overflow-y: auto;\n}\n\n.overlay-module-Overlay-body--stickFooter-9u7pt-4-30-3 {\n margin-bottom: 80px;\n}\n\n.overlay-module-OverlayFooter-0Ne3i-4-30-3 {\n display: flex;\n align-items: center;\n width: 100%;\n box-sizing: border-box;\n padding-left: var(--spacing-60);\n padding-right: var(--spacing-60);\n}\n";
var styles$z = {"OverlayHeader":"overlay-module-OverlayHeader-X75uk-4-30-3","OverlayHeader--withBackButton":"overlay-module-OverlayHeader--withBackButton-P8Z6f-4-30-3","OverlayHeader-headerWrapper":"overlay-module-OverlayHeader-headerWrapper-wDTqn-4-30-3","OverlayHeader-subheading":"overlay-module-OverlayHeader-subheading-HGK3Q-4-30-3","OverlayHeader-subheading--withBackButton":"overlay-module-OverlayHeader-subheading--withBackButton-vmR5i-4-30-3","OverlayBody":"overlay-module-OverlayBody-0aiqy-4-30-3","Overlay-body--stickFooter":"overlay-module-Overlay-body--stickFooter-9u7pt-4-30-3","OverlayFooter":"overlay-module-OverlayFooter-0Ne3i-4-30-3"};
styleInject(css_248z$A);
var _excluded$X = ["label"];
var OverlayFooter = function OverlayFooter(props) {
var open = props.open,
className = props.className,
children = props.children,
actions = props.actions,
skipFocusOnOpen = props.skipFocusOnOpen;
var baseProps = extractBaseProps(props);
var classes = classnames(_defineProperty$1({}, styles$z.OverlayFooter, true), className);
var wrapperRef = /*#__PURE__*/React.createRef();
React.useEffect(function () {
if (open && !skipFocusOnOpen && wrapperRef.current) {
var _wrapperRef$current;
var secondaryBtns = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelectorAll(".".concat(buttonStyles['Button--basic']));
var secondaryBtn = secondaryBtns[secondaryBtns.length - 1];
if (secondaryBtn) {
window.requestAnimationFrame(function () {
return secondaryBtn.focus({
preventScroll: true
});
});
}
}
}, [open, skipFocusOnOpen]);
if (actions) {
return /*#__PURE__*/React.createElement("div", _extends$2({
ref: wrapperRef
}, baseProps, {
className: classes
}), actions.map(function (_ref, index) {
_ref.label;
var options = _objectWithoutProperties(_ref, _excluded$X);
return /*#__PURE__*/React.createElement(Button, _extends$2({
type: "button"
}, options, {
key: index
}));
}));
}
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-OverlayFooter",
ref: wrapperRef
}, baseProps, {
className: classes
}), children);
};
OverlayFooter.displayName = 'OverlayFooter';
var OverlayHeader = function OverlayHeader(props) {
var className = props.className,
heading = props.heading,
subHeading = props.subHeading,
backButton = props.backButton,
backIcon = props.backIcon,
backIconCallback = props.backIconCallback,
backButtonCallback = props.backButtonCallback,
headingClass = props.headingClass,
headingId = props.headingId,
_props$headingAs = props.headingAs,
headingAs = _props$headingAs === void 0 ? 'h2' : _props$headingAs;
var baseProps = extractBaseProps(props);
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$z.OverlayHeader, true), styles$z['OverlayHeader--withBackButton'], backButton || backIcon), className);
var subheadingClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$z['OverlayHeader-subheading'], true), styles$z['OverlayHeader-subheading--withBackButton'], backButton || backIcon));
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-OverlayHeader"
}, baseProps, {
className: classes
}), /*#__PURE__*/React.createElement("div", {
className: styles$z['OverlayHeader-headerWrapper']
}, (backButton || backIcon) && /*#__PURE__*/React.createElement(Button, {
"data-test": "DesignSystem-OverlayHeader--Button",
appearance: "transparent",
className: "mr-4",
icon: "arrow_back",
largeIcon: true,
"aria-label": "Go back",
onClick: backButtonCallback || backIconCallback
}), heading && /*#__PURE__*/React.createElement(Heading, {
id: headingId,
className: headingClass,
"data-test": "DesignSystem-OverlayHeader--heading",
as: headingAs
}, heading)), subHeading && /*#__PURE__*/React.createElement(Text$1, {
"data-test": "DesignSystem-OverlayHeader--Subheading",
appearance: "subtle",
className: subheadingClass
}, subHeading));
};
OverlayHeader.displayName = 'OverlayHeader';
var OverlayBody = function OverlayBody(props) {
var children = props.children,
className = props.className;
var baseProps = extractBaseProps(props);
var classes = classnames(_defineProperty$1({}, styles$z.OverlayBody, true), className);
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-OverlayBody"
}, baseProps, {
className: classes
}), children);
};
OverlayBody.defaultProps = {
stickFooter: true,
withFooter: true
};
OverlayBody.displayName = 'OverlayBody';
var getWrapperElement = function getWrapperElement() {
var element = document.querySelector('.Overlay-wrapper');
if (element === null) {
element = document.createElement('div');
element.classList.add('Overlay-wrapper');
document.body.appendChild(element);
}
return element;
};
var getUpdatedZIndex = function getUpdatedZIndex(ele) {
var containerClassName = ele.containerClassName,
elementRef = ele.elementRef,
element = ele.element;
if (element === null) return;
var elements = element.querySelectorAll(containerClassName);
if (elements.length < 1) return;
var siblings = Array.from(elements).filter(function (el) {
return el !== elementRef.current;
});
var zIndex = -1;
siblings.forEach(function (element) {
var prevZIndex = parseInt(window.getComputedStyle(element).zIndex || '0', 10);
zIndex = Math.max(zIndex, prevZIndex + 10);
});
return zIndex > 0 ? zIndex : undefined;
};
// keyboard event, boolean?, (event: Event) => void
var closeOnEscapeKeypress = function closeOnEscapeKeypress(event, isTopOverlay, onClose) {
if (event.key === 'Escape' && isTopOverlay) {
onClose(event);
// prevent browser-specific escape key behavior (Safari exits fullscreen)
event.preventDefault();
}
};
var FOCUSABLE_SELECTOR$1 = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [contenteditable="true"], summary, area[href], [tabindex]:not([tabindex="-1"])';
/**
* Returns focusable elements within a container, in DOM order.
* Excludes elements with `visibility: hidden`, `display: none`, `aria-hidden="true"`,
* `aria-disabled="true"`, or inside an `[inert]` subtree.
*/
var getFocusableElements$1 = function getFocusableElements(container) {
var elements = container.querySelectorAll(FOCUSABLE_SELECTOR$1);
return Array.from(elements).filter(function (el) {
var style = window.getComputedStyle(el);
var isVisible = style.visibility !== 'hidden' && style.display !== 'none';
var isAriaHidden = el.getAttribute('aria-hidden') === 'true';
var isAriaDisabled = el.getAttribute('aria-disabled') === 'true';
var isInert = el.closest('[inert]') !== null;
var isExplicitlyNonFocusable = el.getAttribute('tabindex') === '-1';
return isVisible && !isAriaHidden && !isAriaDisabled && !isInert && !isExplicitlyNonFocusable;
});
};
var LISTBOX_OPTION_SELECTOR = '[role="option"]';
/**
* Returns enabled, visible listbox options (`[role="option"]`) under a listbox root, in DOM order.
* Matches combobox items that use roving `tabIndex={-1}` (excluded by {@link getFocusableElements}).
*/
var getListboxOptionElements = function getListboxOptionElements(listboxRoot) {
var options = [];
for (var _i = 0, _Array$from = Array.from(listboxRoot.children); _i < _Array$from.length; _i++) {
var node = _Array$from[_i];
if (!(node instanceof HTMLElement)) continue;
var optionNode = null;
if (node.matches(LISTBOX_OPTION_SELECTOR)) {
optionNode = node;
} else {
for (var _i2 = 0, _Array$from2 = Array.from(node.children); _i2 < _Array$from2.length; _i2++) {
var child = _Array$from2[_i2];
if (child.matches(LISTBOX_OPTION_SELECTOR) || child.matches('[data-test="DesignSystem-Listbox-ItemWrapper"]')) {
optionNode = child;
break;
}
}
}
if (!optionNode) continue;
var styleOuter = window.getComputedStyle(node);
var styleInner = optionNode !== node ? window.getComputedStyle(optionNode) : styleOuter;
var isVisible = styleOuter.visibility !== 'hidden' && styleOuter.display !== 'none' && styleInner.visibility !== 'hidden' && styleInner.display !== 'none';
var isAriaHidden = node.getAttribute('aria-hidden') === 'true' || optionNode.getAttribute('aria-hidden') === 'true';
var isAriaDisabled = node.getAttribute('aria-disabled') === 'true' || optionNode.getAttribute('aria-disabled') === 'true';
var isInert = optionNode.closest('[inert]') !== null;
var isDataDisabled = optionNode.getAttribute('data-disabled') === 'true' || node.getAttribute('data-disabled') === 'true';
if (isVisible && !isAriaHidden && !isAriaDisabled && !isInert && !isDataDisabled) {
options.push(optionNode);
}
}
return options;
};
/**
* Focusable/interactive list descendants for keyboard navigation.
* With `roleHint` `"listbox"`, returns `[role="option"]` elements under the listbox root(s), not generic tabbables
* (listbox options often use `tabindex="-1"`).
*/
var getAllFocusableElements = function getAllFocusableElements(container, roleHint) {
if (roleHint !== 'listbox') {
return getFocusableElements$1(container);
}
var roots = [];
if (container.getAttribute('role') === 'listbox') {
roots.push(container);
} else {
roots.push.apply(roots, _toConsumableArray(Array.from(container.querySelectorAll('[role="listbox"]'))));
}
if (roots.length === 0) {
return [];
}
var seen = new Set();
var out = [];
for (var _i3 = 0, _roots = roots; _i3 < _roots.length; _i3++) {
var root = _roots[_i3];
var _iterator = _createForOfIteratorHelper(getListboxOptionElements(root)),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var el = _step.value;
if (!seen.has(el)) {
seen.add(el);
out.push(el);
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
}
return out;
};
/**
* True if `element` is a dialog, or has one nested inside it. Modal/Sidesheet register
* their *outer* wrapper with `OverlayManager` (the element carrying `role="dialog"` is a
* descendant — always for Sidesheet, and for Modal whenever `backdropClose` is used), so
* checking `element`'s own `role` attribute alone misses those cases.
*/
var isOrContainsDialog = function isOrContainsDialog(element) {
return element.getAttribute('role') === 'dialog' || element.querySelector('[role="dialog"]') !== null;
};
/**
* Poppers (Dropdown menus, DatePicker calendars, ...) render their content into
* `document.body` via a portal, so it is never a DOM descendant of the dialog that
* spawned it even though it's visually layered on top of it. This returns such
* currently-open portaled overlays — found via {@link OverlayManager}'s stack, which
* records them in open order — so the dialog's focus trap can be extended to include
* them instead of losing focus to the trap when it reaches one.
*
* Stops at the first nested dialog (a Modal or Sidesheet opened on top of this one — see
* {@link isOrContainsDialog}) and excludes everything from that point on, not just the
* dialog itself: a popper the nested dialog opens (e.g. its own DatePicker) is registered
* with `OverlayManager` *after* that dialog too, so without stopping there it would also
* be picked up here and wrongly absorbed into *this* (outer) trap — whose capture-phase
* listener runs first and would hijack Tab away from the inner dialog's own trap.
*
* @param ownOverlayEl - The dialog's own element as registered with `OverlayManager`
* (e.g. `this.modalRef.current`), used to find overlays opened after it.
* @param container - The dialog's content container; used to exclude overlays that are
* (unexpectedly) DOM descendants/ancestors of it.
*/
var getNestedOverlayElements = function getNestedOverlayElements(ownOverlayEl, container) {
var nested = [];
var _iterator2 = _createForOfIteratorHelper(instance.getOverlaysAfter(ownOverlayEl)),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var overlay = _step2.value;
if (isOrContainsDialog(overlay)) break;
if (!overlay.isConnected) continue;
if (container.contains(overlay) || overlay.contains(container)) continue;
nested.push(overlay);
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
return nested;
};
/**
* Handles Tab/Shift+Tab to trap focus within the container.
*
* @param staticFocusTarget - Optional non-tabbable element (tabindex="-1") that received
* focus on overlay open (e.g. the dialog heading). It is not in the tabbable focusable
* list, so without this parameter Shift+Tab from it would escape the trap.
* @param nestedOverlays - Currently-open portaled overlays (see {@link getNestedOverlayElements})
* that should be treated as part of the trapped region, in the order they were opened.
*
* Returns true if the event was handled (focus was redirected or prevented).
*/
var handleFocusTrapKeyDown = function handleFocusTrapKeyDown(event, container, staticFocusTarget) {
var nestedOverlays = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
if (event.key !== 'Tab') return false;
var scopes = [container].concat(_toConsumableArray(nestedOverlays));
var focusable = scopes.reduce(function (acc, scope) {
return acc.concat(getFocusableElements$1(scope));
}, []);
var activeElement = document.activeElement;
if (!activeElement || !scopes.some(function (scope) {
return scope.contains(activeElement);
})) {
return false;
}
if (focusable.length === 0) {
event.preventDefault();
container.focus({
preventScroll: true
});
return true;
}
var first = focusable[0];
var last = focusable[focusable.length - 1];
if (event.shiftKey) {
var staticTargetPrecedesFirst = !!staticFocusTarget && activeElement === staticFocusTarget && !!(staticFocusTarget.compareDocumentPosition(first) & Node.DOCUMENT_POSITION_FOLLOWING);
if (activeElement === first || staticTargetPrecedesFirst) {
event.preventDefault();
last.focus({
preventScroll: true
});
return true;
}
} else {
if (activeElement === last) {
event.preventDefault();
first.focus({
preventScroll: true
});
return true;
}
}
return false;
};
var NON_CONTENT_TAGS = new Set(['SCRIPT', 'STYLE']);
/**
* Sets `aria-hidden="true"` on every `<body>` child other than `keepVisible`, so a screen
* reader's virtual/browse cursor can't wander into the rest of the page while a dialog is
* open. This is a distinct problem from keyboard focus trapping (arrow-key browse-mode
* navigation ignores tabindex and DOM focus entirely) and is why `aria-modal` alone isn't
* sufficient in every screen reader/browser combination — see WAI-ARIA APG dialog pattern.
*
* Skips `<script>`/`<style>` tags (never exposed to assistive tech regardless of
* `aria-hidden`) and anything already `aria-hidden="true"`, so a dialog opened while
* another is already active doesn't clobber the outer one's state.
*
* Returns a restore function that removes `aria-hidden` from exactly the elements this call
* added it to.
*/
var hideBackgroundFromScreenReaders = function hideBackgroundFromScreenReaders(keepVisible) {
var hidden = [];
Array.from(document.body.children).forEach(function (child) {
if (NON_CONTENT_TAGS.has(child.tagName)) return;
if (keepVisible.includes(child)) return;
if (child.getAttribute('aria-hidden') === 'true') return;
child.setAttribute('aria-hidden', 'true');
hidden.push(child);
});
return function () {
hidden.forEach(function (child) {
return child.removeAttribute('aria-hidden');
});
};
};
/**
* Ordered stack of currently-open dialog *content* elements (the one carrying
* `role="dialog"` — e.g. `this.modalContentRef.current`) that share the singleton portal
* returned by {@link getWrapperElement} (Modal/Sidesheet both render into it). Because they
* share that one `document.body` child, hiding background siblings of the portal (see
* {@link hideBackgroundFromScreenReaders}) can't by itself tell one stacked dialog's content
* apart from another's — per the WAI-ARIA dialog pattern, only the *topmost* dialog should
* stay exposed to a screen reader's browse cursor; every dialog underneath it must also be
* `aria-hidden` until it's topmost again.
*/
var dialogRootStack = [];
var restorePageBackground = null;
/**
* All currently-open Popper-portaled overlays (Dropdown/DatePicker/Popover, ...) anywhere
* in the `OverlayManager` stack, regardless of which dialog opened them. Used to build the
* page-level "keep visible" set for {@link activateBackgroundHiding}: every one of them
* shares the same `document.body`-level portal as the dialogs' own wrapper and must stay
* exposed no matter how many dialogs are stacked or which one owns it.
*
* Unlike {@link getNestedOverlayElements} — which stops at the next dialog boundary to
* scope one *specific* dialog's own focus trap — this deliberately keeps scanning past
* dialog boundaries: dialog elements themselves are excluded, but a nested dialog's own
* poppers must still be included.
*/
var getAllOpenPopperOverlays = function getAllOpenPopperOverlays() {
return instance.overlays.filter(function (overlay) {
return overlay.isConnected && !isOrContainsDialog(overlay);
});
};
/**
* Marks `dialogRoot` as the new topmost dialog: `aria-hidden`s whichever dialog was
* previously on top (if any), and — the first time the stack goes from empty to
* non-empty — hides the rest of the page too.
*
* No-op if `dialogRoot` is already the topmost entry, so a duplicate activation call for
* the same dialog can't push it twice or double-hide the previous top.
*
* @param dialogRoot - This dialog's own `role="dialog"` element.
* @param portalRoot - The shared portal root to keep visible (e.g. `this.element`, from
* {@link getWrapperElement}).
*/
var activateBackgroundHiding = function activateBackgroundHiding(dialogRoot, portalRoot) {
if (dialogRootStack[dialogRootStack.length - 1] === dialogRoot) return;
var previousTop = dialogRootStack[dialogRootStack.length - 1];
if (previousTop) previousTop.setAttribute('aria-hidden', 'true');
// Undo a stale `aria-hidden` from a past cycle where this same dialog element got
// covered and then closed without being reopened in between — the element persists
// across opens/closes (only its content unmounts), so nothing else would clear it.
dialogRoot.removeAttribute('aria-hidden');
dialogRootStack.push(dialogRoot);
if (dialogRootStack.length === 1) {
// A Popper (Dropdown/DatePicker/Popover) that's already open on first render mounts its
// `document.body` portal, as a child, before registering with `OverlayManager` via its
// own `setTimeout(0)` (see `PopperWrapper.scheduleOverlayAdd`). Whether that registration
// is queued *before* or *after* this one depends on whether the popper sits inside *this*
// dialog (mounts first, so its timer is queued first) or a later-mounting nested dialog
// (mounts after this dialog's own componentDidMount already queued this timer, so its
// registration timer is queued after). A second deferred tick guarantees every such
// registration made during the same synchronous commit has landed either way, so the
// scan below never misses one and hides it as background for the dialog's whole lifetime.
window.setTimeout(function () {
window.setTimeout(function () {
// This dialog closed (and possibly another opened) before the deferral elapsed;
// whichever dialog is now at the bottom of the stack owns the page-background scan.
if (dialogRootStack[0] !== dialogRoot) return;
restorePageBackground = hideBackgroundFromScreenReaders([portalRoot].concat(_toConsumableArray(getAllOpenPopperOverlays())));
}, 0);
}, 0);
}
};
/**
* Reverses {@link activateBackgroundHiding} for `dialogRoot`: removes it from the stack
* and exposes whichever dialog is now topmost, or the page background if none remain.
*
* Idempotent — a dialog whose `open` prop flips to `false` can call this once from
* `componentDidUpdate` and again from `componentWillUnmount` if it unmounts mid
* close-animation (`state.open` hasn't settled to `false` yet); the second call finds
* `dialogRoot` no longer in the stack and does nothing.
*/
var deactivateBackgroundHiding = function deactivateBackgroundHiding(dialogRoot) {
var index = dialogRootStack.indexOf(dialogRoot);
if (index === -1) return;
dialogRootStack.splice(index, 1);
var newTop = dialogRootStack[dialogRootStack.length - 1];
if (newTop) {
newTop.removeAttribute('aria-hidden');
return;
}
if (restorePageBackground) {
restorePageBackground();
restorePageBackground = null;
}
};
/**
* Returns focus to a previously focused element after an overlay closes.
* When {@link closingOverlay} is provided, restoration is skipped if focus
* is currently inside a *different* dialog — preventing a background
* overlay from stealing focus away from the topmost focus-trapping dialog.
*/
var restoreFocusToElementIfConnected = function restoreFocusToElementIfConnected(element, closingOverlay) {
if (!(element !== null && element !== void 0 && element.focus) || !element.isConnected) return;
window.requestAnimationFrame(function () {
if (!element.isConnected) return;
if (closingOverlay) {
var _document$activeEleme;
var activeDialog = (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.closest('[role="dialog"]');
if (activeDialog && activeDialog !== closingOverlay) {
return;
}
}
element.focus({
preventScroll: true
});
});
};
var css_248z$z = "@keyframes modal-module-modal-open-XetuH-4-30-3 {\n from {\n top: 20px;\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes modal-module-modal-close-6bwSt-4-30-3 {\n from {\n top: 104px;\n opacity: 1;\n }\n to {\n top: 124px;\n opacity: 0;\n }\n}\n\n.modal-module-Modal-jy6BE-4-30-3 {\n position: fixed !important;\n max-height: calc(100vh - 128px);\n box-shadow: var(--shadow-m);\n background-color: var(--white);\n border-radius: var(--border-radius-20);\n overflow: auto;\n flex-direction: column;\n display: none;\n margin: auto;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n height: -moz-min-content;\n height: min-content;\n}\n\n.modal-module-Modal--open-pEOMN-4-30-3 {\n display: flex;\n}\n\n.modal-module-Modal-animation--open-GPVLI-4-30-3 {\n animation: modal-module-modal-open-XetuH-4-30-3 var(--duration--moderate-02) var(--entrance-expressive-curve);\n}\n\n.modal-module-Modal-animation--close-re3FT-4-30-3 {\n animation: modal-module-modal-close-6bwSt-4-30-3 var(--duration--fast-02) var(--exit-expressive-curve);\n}\n\n.modal-module-Modal-header-fdaxo-4-30-3 {\n display: flex;\n justify-content: flex-start;\n padding-top: var(--spacing-40);\n padding-bottom: var(--spacing-30);\n padding-right: var(--spacing-40);\n}\n\n.modal-module-Modal-header--withSeperator-JuBGt-4-30-3 {\n border-bottom: var(--border);\n}\n\n.modal-module-Modal-description-yJzzp-4-30-3 {\n padding: var(--spacing-20) 0;\n}\n\n.modal-module-Modal-footer-njNb3-4-30-3 {\n padding-top: var(--spacing-60);\n padding-bottom: var(--spacing-60);\n justify-content: flex-end;\n position: absolute;\n bottom: 0;\n}\n\n.modal-module-Modal-footer--withSeperator-E6Dfh-4-30-3 {\n border-top: var(--border);\n}\n\n.modal-module-Modal-body-kEuY3-4-30-3 {\n padding: 0 var(--spacing-60);\n}\n\n.modal-module-Modal-body--withMargin-QJGL1-4-30-3 {\n margin-bottom: 80px;\n}\n\n.modal-module-Modal-body--withPadding-sX2cE-4-30-3 {\n padding-bottom: var(--spacing-40);\n}\n\n.modal-module-Modal-jy6BE-4-30-3:focus {\n outline: none;\n}\n\n.modal-module-Modal-header-fdaxo-4-30-3 [tabindex='-1']:focus {\n outline: none;\n}\n\n@media (forced-colors: active) {\n /* box-shadow is the only visual boundary; add a real border so the modal is visible */\n .modal-module-Modal-jy6BE-4-30-3 {\n border: var(--border-width-2-5) solid ButtonText;\n box-shadow: none;\n }\n}\n";
var styles$y = {"Modal":"modal-module-Modal-jy6BE-4-30-3","Modal--open":"modal-module-Modal--open-pEOMN-4-30-3","Modal-animation--open":"modal-module-Modal-animation--open-GPVLI-4-30-3","modal-open":"modal-module-modal-open-XetuH-4-30-3","Modal-animation--close":"modal-module-Modal-animation--close-re3FT-4-30-3","modal-close":"modal-module-modal-close-6bwSt-4-30-3","Modal-header":"modal-module-Modal-header-fdaxo-4-30-3","Modal-header--withSeperator":"modal-module-Modal-header--withSeperator-JuBGt-4-30-3","Modal-description":"modal-module-Modal-description-yJzzp-4-30-3","Modal-footer":"modal-module-Modal-footer-njNb3-4-30-3","Modal-footer--withSeperator":"modal-module-Modal-footer--withSeperator-E6Dfh-4-30-3","Modal-body":"modal-module-Modal-body-kEuY3-4-30-3","Modal-body--withMargin":"modal-module-Modal-body--withMargin-QJGL1-4-30-3","Modal-body--withPadding":"modal-module-Modal-body--withPadding-sX2cE-4-30-3"};
styleInject(css_248z$z);
var modalInstanceCounter = 0;
/**
* ** NOTE: Use `headerOptions`, `header`, `footerOptions`, `footer`, `onClose` and `backdropClose`(boolean). **
* ** Support for composition using `ModalHeader`, `ModalBody` and `ModalFooter` will be deprecated soon. **
*/
var Modal = /*#__PURE__*/function (_React$Component) {
function Modal(props) {
var _this;
_classCallCheck(this, Modal);
_this = _callSuper(this, Modal, [props]);
_defineProperty$1(_this, "modalRef", /*#__PURE__*/React.createRef());
_defineProperty$1(_this, "modalContentRef", /*#__PURE__*/React.createRef());
_defineProperty$1(_this, "previousActiveElement", null);
_defineProperty$1(_this, "staticFocusTarget", null);
_defineProperty$1(_this, "autoHeadingId", void 0);
_defineProperty$1(_this, "element", void 0);
_defineProperty$1(_this, "onCloseHandler", function (event) {
closeOnEscapeKeypress(event, instance.isTopOverlay(_this.modalRef.current), _this.onOutsideClickHandler);
});
_defineProperty$1(_this, "onFocusTrapKeyDown", function (event) {
var container = _this.modalContentRef.current;
if (!container) return;
var nestedOverlays = getNestedOverlayElements(_this.modalRef.current, container);
handleFocusTrapKeyDown(event, container, _this.staticFocusTarget, nestedOverlays);
});
_defineProperty$1(_this, "activateFocusTrap", function () {
var _this$modalRef$curren;
if (!_this.previousActiveElement || !((_this$modalRef$curren = _this.modalRef.current) !== null && _this$modalRef$curren !== void 0 && _this$modalRef$curren.contains(document.activeElement))) {
_this.previousActiveElement = document.activeElement;
}
var container = _this.modalContentRef.current;
if (!container) return;
window.requestAnimationFrame(function () {
// Per WAI-ARIA APG: for dialogs with semantic content (heading + body + footer),
// focus the element named by aria-labelledby (the heading) with tabindex="-1" so
// VoiceOver announces the dialog title before the user tabs to interactive elements.
// Fall back to the dialog container if no internal heading is found.
var labelledById = container.getAttribute('aria-labelledby');
var candidateEl = labelledById ? document.getElementById(labelledById) : null;
var headingEl = candidateEl && container.contains(candidateEl) ? candidateEl : null;
var target = headingEl !== null && headingEl !== void 0 ? headingEl : container;
target.setAttribute('tabindex', '-1');
target.focus({
preventScroll: true
});
_this.staticFocusTarget = target;
});
document.addEventListener('keydown', _this.onFocusTrapKeyDown, true);
document.addEventListener('keydown', _this.onCloseHandler);
// Keyboard focus trapping doesn't stop a screen reader's virtual/browse cursor, which
// ignores tabindex and DOM focus — hide the rest of the page from assistive tech too
// (aria-modal alone isn't honored consistently across browser/screen reader pairs).
activateBackgroundHiding(container, _this.element);
});
_defineProperty$1(_this, "deactivateFocusTrap", function () {
document.removeEventListener('keydown', _this.onFocusTrapKeyDown, true);
document.removeEventListener('keydown', _this.onCloseHandler);
var container = _this.modalContentRef.current;
if (container) {
deactivateBackgroundHiding(container);
container.removeAttribute('tabindex');
}
// Remove tabindex from whichever static element was focused on open (heading or container).
if (_this.staticFocusTarget && _this.staticFocusTarget !== container) {
_this.staticFocusTarget.removeAttribute('tabindex');
}
_this.staticFocusTarget = null;
// Capture in variable so RAF callback has stable reference (previousActiveElement is cleared below)
var elementToFocus = _this.previousActiveElement;
_this.previousActiveElement = null;
restoreFocusToElementIfConnected(elementToFocus, _this.modalContentRef.current);
});
_this.element = getWrapperElement();
_this.state = {
open: props.open,
animate: props.open
};
modalInstanceCounter += 1;
_this.autoHeadingId = "modal-title-".concat(modalInstanceCounter);
_this.onOutsideClickHandler = _this.onOutsideClickHandler.bind(_this);
return _this;
}
_inherits(Modal, _React$Component);
return _createClass(Modal, [{
key: "componentDidMount",
value: function componentDidMount() {
if (this.state.open) {
instance.add(this.modalRef.current);
}
if (this.props.backdropClose && this.state.open) {
instance.add(this.modalRef.current);
}
var zIndex = getUpdatedZIndex({
element: this.element,
containerClassName: '.Overlay-container',
elementRef: this.modalRef
});
this.setState({
zIndex: zIndex
});
if (this.state.open) {
this.activateFocusTrap();
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.state.open) {
this.deactivateFocusTrap();
instance.remove(this.modalRef.current);
}
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var _this2 = this;
if (prevProps.open !== this.props.open) {
if (this.props.open) {
var zIndex = getUpdatedZIndex({
element: this.element,
containerClassName: '.Overlay-container--open',
elementRef: this.modalRef
});
this.setState({
zIndex: zIndex,
open: true,
animate: true
});
instance.add(this.modalRef.current);
this.activateFocusTrap();
} else {
this.deactivateFocusTrap();
instance.remove(this.modalRef.current);
this.setState({
animate: false
}, function () {
window.setTimeout(function () {
_this2.setState({
open: false
});
}, 120);
});
}
}
}
}, {
key: "onOutsideClickHandler",
value: function onOutsideClickHandler(event) {
var _this$props = this.props,
backdropClose = _this$props.backdropClose,
onClose = _this$props.onClose;
var open = this.state.open;
if (open && instance.isTopOverlay(this.modalRef.current)) {
if (onClose) onClose(event, 'OutsideClick');else if (typeof backdropClose === 'function') backdropClose(event, 'OutsideClick');
}
}
}, {
key: "render",
value: function render() {
var _this3 = this;
var _this$state = this.state,
animate = _this$state.animate,
open = _this$state.open,
zIndex = _this$state.zIndex;
var _this$props2 = this.props,
className = _this$props2.className,
backdropClose = _this$props2.backdropClose,
dimension = _this$props2.dimension,
children = _this$props2.children,
headerOptions = _this$props2.headerOptions,
header = _this$props2.header,
footerOptions = _this$props2.footerOptions,
seperator = _this$props2.seperator,
footer = _this$props2.footer,
onClose = _this$props2.onClose,
ariaLabelledBy = _this$props2['aria-labelledby'];
var shouldUseAutoHeadingId = !ariaLabelledBy && !header && Boolean(headerOptions === null || headerOptions === void 0 ? void 0 : headerOptions.heading);
var resolvedHeadingId = (headerOptions === null || headerOptions === void 0 ? void 0 : headerOptions.headingId) || (ariaLabelledBy && !ariaLabelledBy.includes(' ') && !header && Boolean(headerOptions === null || headerOptions === void 0 ? void 0 : headerOptions.heading) ? ariaLabelledBy : undefined) || (shouldUseAutoHeadingId ? this.autoHeadingId : undefined);
var resolvedAriaLabelledBy = ariaLabelledBy || resolvedHeadingId;
var BackdropZIndex = zIndex ? zIndex - 1 : 1000;
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$y.Modal, true), styles$y['Modal--open'], open), styles$y['Modal-animation--open'], animate), styles$y['Modal-animation--close'], !animate), className);
var headerClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$y['Modal-header'], true), styles$y['Modal-header--withSeperator'], seperator));
var footerClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$y['Modal-footer'], true), styles$y['Modal-footer--withSeperator'], seperator));
var ContainerClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, rowStyles['Row'], true), 'Overlay-container', true), 'Overlay-container--open', open));
var isAPINew = headerOptions || footerOptions || footer || header;
var bodyClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$y['Modal-body'], true), styles$y['Modal-body--withMargin'], isAPINew ? !!footer : true), styles$y['Modal-body--withPadding'], isAPINew ? !footer : true));
var baseProps = extractBaseProps(this.props);
var sizeMap = {
small: {
size: '3',
sizeL: '4',
sizeM: '4',
sizeXS: '10'
},
medium: {
size: '4',
sizeL: '6',
sizeM: '6',
sizeXS: '10'
},
large: {
size: '6',
sizeL: '8',
sizeM: '8',
sizeXS: '10'
}
};
var ModalContainer = /*#__PURE__*/React.createElement(Row, {
"data-test": "DesignSystem-ModalContainer",
className: ContainerClass,
"data-layer": true,
"data-opened": open,
style: {
zIndex: zIndex ? zIndex : 1001
}
}, /*#__PURE__*/React.createElement(Column, _extends$2({
"data-test": "DesignSystem-Modal",
role: "dialog",
"aria-modal": open,
"aria-labelledby": resolvedAriaLabelledBy
}, baseProps, {
className: classes
}, sizeMap[dimension], {
ref: function ref(el) {
_this3.modalContentRef.current = el;
if (!backdropClose) _this3.modalRef.current = el;
}
}), (headerOptions || header) && /*#__PURE__*/React.createElement("div", {
className: headerClass
}, /*#__PURE__*/React.createElement(Column, null, !header && /*#__PURE__*/React.createElement(OverlayHeader, _extends$2({
"data-test": "DesignSystem-Modal--header"
}, headerOptions, {
headingId: resolvedHeadingId
})), !!header && header), /*#__PURE__*/React.createElement(Column, {
className: "flex-grow-0"
}, /*#__PURE__*/React.createElement(Tooltip, {
tooltip: "Close",
position: "bottom"
}, /*#__PURE__*/React.createElement(Button, {
icon: "close",
appearance: "transparent",
"aria-label": "Close",
"data-test": "DesignSystem-Modal--CloseButton",
onClick: function onClick(event) {
if (onClose) onClose(event, 'IconClick');
}
})))), open && children && /*#__PURE__*/React.createElement(React.Fragment, null, headerOptions || footerOptions || footer || header ? /*#__PURE__*/React.createElement(OverlayBody, {
className: bodyClass
}, this.props.children) : children), (!!footer || !!footerOptions) && /*#__PURE__*/React.createElement(OverlayFooter, _extends$2({
"data-test": "DesignSystem-Modal--footer"
}, footerOptions, {
open: open,
className: footerClass,
skipFocusOnOpen: true
}), footer)));
var ModalWrapper = backdropClose ? /*#__PURE__*/React.createElement(OutsideClick, {
ref: this.modalRef,
"data-test": "DesignSystem-Modal--OutsideClick",
onOutsideClick: this.onOutsideClickHandler
}, ModalContainer) : ModalContainer;
var WrapperElement = /*#__PURE__*/ReactDOM.createPortal(ModalWrapper, this.element);
return /*#__PURE__*/React.createElement(React.Fragment, null, WrapperElement, /*#__PURE__*/React.createElement(Backdrop, {
open: this.state.animate,
zIndex: BackdropZIndex
}));
}
}]);
}(React.Component);
_defineProperty$1(Modal, "defaultProps", {
dimension: 'medium',
closeOnEscape: true
});
var ModalHeader = function ModalHeader(props) {
var className = props.className,
heading = props.heading,
subHeading = props.subHeading,
onClose = props.onClose,
seperator = props.seperator,
backIcon = props.backIcon,
backIconCallback = props.backIconCallback,
headingId = props.headingId,
_props$headingAs = props.headingAs,
headingAs = _props$headingAs === void 0 ? 'h2' : _props$headingAs;
var baseProps = extractBaseProps(props);
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$y['Modal-header'], true), styles$y['Modal-header--withSeperator'], seperator), className);
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
className: classes
}), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(OverlayHeader, {
heading: heading,
subHeading: subHeading,
backButton: backIcon,
backButtonCallback: backIconCallback,
headingId: headingId,
headingAs: headingAs
})), /*#__PURE__*/React.createElement(Column, {
className: "flex-grow-0"
}, /*#__PURE__*/React.createElement(Button, {
icon: "close",
appearance: "transparent",
"aria-label": "Close",
"data-test": "DesignSystem-Modal--CloseButton",
onClick: function onClick(event) {
if (onClose) onClose(event, 'IconClick');
}
})));
};
ModalHeader.displayName = 'ModalHeader';
var ModalBody = function ModalBody(props) {
var children = props.children,
className = props.className;
var baseProps = extractBaseProps(props);
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$y['Modal-body'], true), styles$y['Modal-body--withMargin'], true), className);
return /*#__PURE__*/React.createElement(OverlayBody, _extends$2({}, baseProps, {
stickFooter: true,
className: classes
}), children);
};
ModalBody.defaultProps = {
stickFooter: true,
withFooter: true
};
ModalBody.displayName = 'ModalBody';
var ModalFooter = function ModalFooter(props) {
var open = props.open,
children = props.children,
className = props.className,
seperator = props.seperator;
var baseProps = extractBaseProps(props);
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$y['Modal-footer'], true), styles$y['Modal-footer--withSeperator'], seperator), className);
return /*#__PURE__*/React.createElement(OverlayFooter, _extends$2({}, baseProps, {
open: open,
className: classes
}), children);
};
ModalFooter.displayName = 'ModalFooter';
var css_248z$y = "@keyframes fullscreenModal-module-fullscreenModal-open-62v3L-4-30-3 {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0px);\n }\n}\n\n@keyframes fullscreenModal-module-fullscreenModal-close-7gVSl-4-30-3 {\n from {\n opacity: 1;\n transform: translateY(0px);\n }\n to {\n opacity: 0;\n transform: translateY(20px);\n }\n}\n\n.fullscreenModal-module-FullscreenModal-7WRgI-4-30-3 {\n position: fixed !important;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n padding-top: var(--spacing-120);\n background-color: var(--white);\n overflow: auto;\n display: flex;\n flex-direction: column;\n}\n\n.fullscreenModal-module-FullscreenModal-animation--open--3N-S-4-30-3 {\n animation: fullscreenModal-module-fullscreenModal-open-62v3L-4-30-3 240ms cubic-bezier(0, 0, 0.3, 1);\n}\n\n.fullscreenModal-module-FullscreenModal-animation--close-BR--s-4-30-3 {\n animation: fullscreenModal-module-fullscreenModal-close-7gVSl-4-30-3 120ms cubic-bezier(0.4, 0.14, 1, 1);\n}\n\n.fullscreenModal-module-FullscreenModal-header-sDsnU-4-30-3 {\n display: flex;\n justify-content: flex-start;\n padding-top: var(--spacing-30);\n padding-bottom: var(--spacing-30);\n padding-right: var(--spacing-30);\n}\n\n.fullscreenModal-module-FullscreenModal-footer-iQzjY-4-30-3 {\n justify-content: flex-end;\n padding-top: var(--spacing-40);\n padding-bottom: var(--spacing-40);\n}\n\n.fullscreenModal-module-FullscreenModal-body-7vbJl-4-30-3 {\n padding: var(--spacing-40) var(--spacing-60);\n}\n";
var styles$x = {"FullscreenModal":"fullscreenModal-module-FullscreenModal-7WRgI-4-30-3","FullscreenModal-animation--open":"fullscreenModal-module-FullscreenModal-animation--open--3N-S-4-30-3","fullscreenModal-open":"fullscreenModal-module-fullscreenModal-open-62v3L-4-30-3","FullscreenModal-animation--close":"fullscreenModal-module-FullscreenModal-animation--close-BR--s-4-30-3","fullscreenModal-close":"fullscreenModal-module-fullscreenModal-close-7gVSl-4-30-3","FullscreenModal-header":"fullscreenModal-module-FullscreenModal-header-sDsnU-4-30-3","FullscreenModal-footer":"fullscreenModal-module-FullscreenModal-footer-iQzjY-4-30-3","FullscreenModal-body":"fullscreenModal-module-FullscreenModal-body-7vbJl-4-30-3"};
styleInject(css_248z$y);
var fullscreenModalInstanceCounter = 0;
var FullscreenModal = /*#__PURE__*/function (_React$Component) {
function FullscreenModal(props) {
var _this;
_classCallCheck(this, FullscreenModal);
_this = _callSuper(this, FullscreenModal, [props]);
_defineProperty$1(_this, "modalRef", /*#__PURE__*/React.createRef());
_defineProperty$1(_this, "autoHeadingId", void 0);
_defineProperty$1(_this, "element", void 0);
_defineProperty$1(_this, "onOutsideClickHandler", function (event) {
instance.remove(_this.modalRef.current);
if (_this.props.onClose) {
_this.props.onClose(event, 'EscapePress');
} else {
_this.setState({
animate: false
}, function () {
window.setTimeout(function () {
_this.setState({
open: false
});
}, 120);
});
}
});
_defineProperty$1(_this, "onCloseHandler", function (event) {
var isTopOverlay = instance.isTopOverlay(_this.modalRef.current);
closeOnEscapeKeypress(event, isTopOverlay, _this.onOutsideClickHandler);
});
_this.element = getWrapperElement();
_this.state = {
open: props.open,
animate: props.open
};
fullscreenModalInstanceCounter += 1;
_this.autoHeadingId = "fullscreen-modal-title-".concat(fullscreenModalInstanceCounter);
return _this;
}
_inherits(FullscreenModal, _React$Component);
return _createClass(FullscreenModal, [{
key: "componentDidMount",
value: function componentDidMount() {
if (this.props.closeOnEscape) {
if (this.state.open) {
instance.add(this.modalRef.current);
}
document.addEventListener('keydown', this.onCloseHandler);
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.props.closeOnEscape) document.removeEventListener('keydown', this.onCloseHandler);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var _this2 = this;
if (prevProps.open !== this.props.open) {
if (this.props.open) {
var zIndex = getUpdatedZIndex({
element: this.element,
containerClassName: '.Overlay-container--open',
elementRef: this.modalRef
});
this.setState({
zIndex: zIndex,
open: true,
animate: true
});
if (this.props.closeOnEscape) instance.add(this.modalRef.current);
} else {
this.setState({
animate: false
}, function () {
window.setTimeout(function () {
_this2.setState({
open: false
});
}, 120);
});
if (this.props.closeOnEscape) instance.remove(this.modalRef.current);
}
}
}
}, {
key: "render",
value: function render() {
var _this$state = this.state,
animate = _this$state.animate,
open = _this$state.open,
zIndex = _this$state.zIndex;
var _this$props = this.props,
className = _this$props.className,
dimension = _this$props.dimension,
children = _this$props.children,
header = _this$props.header,
headerOptions = _this$props.headerOptions,
footer = _this$props.footer,
footerOptions = _this$props.footerOptions,
onClose = _this$props.onClose,
ariaLabelledBy = _this$props['aria-labelledby'],
ariaLabel = _this$props['aria-label'],
ariaDescribedBy = _this$props['aria-describedby'];
var shouldUseAutoHeadingId = !ariaLabelledBy && !header && Boolean(headerOptions === null || headerOptions === void 0 ? void 0 : headerOptions.heading);
var resolvedHeadingId = (headerOptions === null || headerOptions === void 0 ? void 0 : headerOptions.headingId) || (shouldUseAutoHeadingId ? this.autoHeadingId : undefined);
var resolvedAriaLabelledBy = ariaLabelledBy || resolvedHeadingId;
var resolvedAriaLabel = !resolvedAriaLabelledBy ? ariaLabel || (typeof header === 'string' ? header : undefined) : undefined;
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$x.FullscreenModal, true), styles$x['FullscreenModal-animation--open'], animate), styles$x['FullscreenModal-animation--close'], !animate), className);
var ContainerClass = classnames(_defineProperty$1(_defineProperty$1({}, 'Overlay-container', true), 'Overlay-container--open', open));
var baseProps = extractBaseProps(this.props);
var sizeMap = {
medium: {
size: '4',
sizeL: '6',
sizeM: '6',
sizeXS: '12'
},
large: {
size: '6',
sizeL: '8',
sizeM: '8',
sizeXS: '12'
}
};
var ModalContainer = open ? /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-FullscreenModalContainer",
className: ContainerClass,
"data-layer": true,
style: {
zIndex: zIndex
}
}, /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-FullscreenModal"
}, baseProps, {
className: classes,
ref: this.modalRef,
role: "dialog",
"aria-modal": true,
"aria-labelledby": resolvedAriaLabelledBy,
"aria-label": resolvedAriaLabel,
"aria-describedby": ariaDescribedBy
}), /*#__PURE__*/React.createElement(Row, {
className: "justify-content-center"
}, /*#__PURE__*/React.createElement(Column, sizeMap[dimension], /*#__PURE__*/React.createElement(Row, {
className: styles$x['FullscreenModal-header']
}, /*#__PURE__*/React.createElement(Column, null, !header && /*#__PURE__*/React.createElement(OverlayHeader, _extends$2({
"data-test": "DesignSystem-FullscreenModal--header"
}, headerOptions, {
headingId: resolvedHeadingId
})), !!header && header), /*#__PURE__*/React.createElement(Column, {
className: "flex-grow-0"
}, /*#__PURE__*/React.createElement(Tooltip, {
tooltip: "Close"
}, /*#__PURE__*/React.createElement(Button, {
icon: "close",
appearance: "transparent",
"aria-label": "Close",
"data-test": "DesignSystem-FullscreenModal--CloseButton",
onClick: function onClick(event) {
if (onClose) onClose(event, 'IconClick');
}
})))), /*#__PURE__*/React.createElement(OverlayBody, {
"data-test": "DesignSystem-FullscreenModal--Body",
className: styles$x['FullscreenModal-body']
}, children), (!!footer || !!footerOptions) && /*#__PURE__*/React.createElement(OverlayFooter, _extends$2({
"data-test": "DesignSystem-FullscreenModal--footer"
}, footerOptions, {
open: open,
className: styles$x['FullscreenModal-footer']
}), footer))))) : null;
var WrapperElement = /*#__PURE__*/ReactDOM.createPortal(ModalContainer, this.element);
return /*#__PURE__*/React.createElement(React.Fragment, null, WrapperElement);
}
}]);
}(React.Component);
_defineProperty$1(FullscreenModal, "defaultProps", {
dimension: 'medium'
});
var css_248z$x = "@keyframes sidesheet-module-sidesheet-open-8Xjl--4-30-3 {\n from {\n right: -100%;\n }\n to {\n right: 0;\n }\n}\n\n@keyframes sidesheet-module-sidesheet-close-iHEhI-4-30-3 {\n from {\n right: 0;\n }\n to {\n right: -100%;\n }\n}\n\n@keyframes sidesheet-module-shift-right-spacing-3-0drfg-4-30-3 {\n from {\n transform: translateX(calc(-1 * var(--spacing-80)));\n }\n to {\n transform: translateX(0);\n }\n}\n\n@keyframes sidesheet-module-shift-left-spacing-3-6M1aJ-4-30-3 {\n from {\n transform: translateX(var(--spacing-80));\n }\n to {\n transform: translateX(0);\n }\n}\n\n.sidesheet-module-Sidesheet-NOxgD-4-30-3 {\n position: fixed !important;\n top: 0;\n right: 0;\n height: 100vh;\n box-shadow: var(--shadow-l);\n background-color: var(--white);\n display: flex;\n flex-direction: column;\n visibility: hidden;\n}\n\n.sidesheet-module-Sidesheet--open-susbv-4-30-3 {\n visibility: visible;\n}\n\n.sidesheet-module-Sidesheet-animation--open-J-A5h-4-30-3 {\n animation: sidesheet-module-sidesheet-open-8Xjl--4-30-3 240ms cubic-bezier(0, 0, 0.3, 1);\n}\n\n.sidesheet-module-Sidesheet-animation--close-hu-c0-4-30-3 {\n animation: sidesheet-module-sidesheet-close-iHEhI-4-30-3 120ms cubic-bezier(0.4, 0.14, 1, 1);\n animation-fill-mode: forwards;\n}\n\n.sidesheet-module-Sidesheet-header--NeWW-4-30-3 {\n display: flex;\n justify-content: flex-start;\n padding-top: var(--spacing-40);\n padding-bottom: var(--spacing-30);\n padding-right: var(--spacing-40);\n}\n\n.sidesheet-module-Sidesheet-header--withSeperator-NT81x-4-30-3 {\n border-bottom: var(--border-width-2-5) solid var(--secondary-light);\n}\n\n.sidesheet-module-Sidesheet-body-M4-ag-4-30-3 {\n padding: 0 var(--spacing-60);\n}\n\n.sidesheet-module-Sidesheet-body--withMargin-sz-fg-4-30-3 {\n margin-bottom: 80px;\n}\n\n.sidesheet-module-Sidesheet-footer-PXjKf-4-30-3 {\n padding-top: var(--spacing-60);\n padding-bottom: var(--spacing-60);\n}\n\n.sidesheet-module-Sidesheet-footer--withSeperator-dePlQ-4-30-3 {\n border-top: var(--border-width-2-5) solid var(--secondary-light);\n}\n\n.sidesheet-module-Sidesheet-footer--stickToBottom-QdtOq-4-30-3 {\n position: absolute;\n bottom: 0;\n}\n\n.sidesheet-module-Sidesheet-header--shiftRight-cGhUZ-4-30-3 {\n animation: sidesheet-module-shift-right-spacing-3-0drfg-4-30-3 var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.sidesheet-module-Sidesheet-header--shiftLeft-t3PAU-4-30-3 {\n animation: sidesheet-module-shift-left-spacing-3-6M1aJ-4-30-3 var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.sidesheet-module-Sidesheet-body--nextPage-jIMMM-4-30-3 {\n animation: sidesheet-module-fadeIn-LZlsa-4-30-3 var(--duration--fast-02) var(--standard-productive-curve);\n}\n\n.sidesheet-module-Sidesheet-body--firstPage-6LHoK-4-30-3 {\n animation: sidesheet-module-fadeIn-LZlsa-4-30-3 var(--duration--fast-02) var(--standard-expressive-curve);\n}\n\n.sidesheet-module-Sidesheet-NOxgD-4-30-3:focus {\n outline: none;\n}\n\n.sidesheet-module-Sidesheet-header--NeWW-4-30-3 [tabindex='-1']:focus {\n outline: none;\n}\n\n@media (forced-colors: active) {\n /* box-shadow is the only visual boundary; add a real left border so the panel edge is visible */\n .sidesheet-module-Sidesheet-NOxgD-4-30-3 {\n border-left: var(--border-width-2-5) solid ButtonText;\n box-shadow: none;\n }\n}\n";
var styles$w = {"Sidesheet":"sidesheet-module-Sidesheet-NOxgD-4-30-3","Sidesheet--open":"sidesheet-module-Sidesheet--open-susbv-4-30-3","Sidesheet-animation--open":"sidesheet-module-Sidesheet-animation--open-J-A5h-4-30-3","sidesheet-open":"sidesheet-module-sidesheet-open-8Xjl--4-30-3","Sidesheet-animation--close":"sidesheet-module-Sidesheet-animation--close-hu-c0-4-30-3","sidesheet-close":"sidesheet-module-sidesheet-close-iHEhI-4-30-3","Sidesheet-header":"sidesheet-module-Sidesheet-header--NeWW-4-30-3","Sidesheet-header--withSeperator":"sidesheet-module-Sidesheet-header--withSeperator-NT81x-4-30-3","Sidesheet-body":"sidesheet-module-Sidesheet-body-M4-ag-4-30-3","Sidesheet-body--withMargin":"sidesheet-module-Sidesheet-body--withMargin-sz-fg-4-30-3","Sidesheet-footer":"sidesheet-module-Sidesheet-footer-PXjKf-4-30-3","Sidesheet-footer--withSeperator":"sidesheet-module-Sidesheet-footer--withSeperator-dePlQ-4-30-3","Sidesheet-footer--stickToBottom":"sidesheet-module-Sidesheet-footer--stickToBottom-QdtOq-4-30-3","Sidesheet-header--shiftRight":"sidesheet-module-Sidesheet-header--shiftRight-cGhUZ-4-30-3","shift-right-spacing-3":"sidesheet-module-shift-right-spacing-3-0drfg-4-30-3","Sidesheet-header--shiftLeft":"sidesheet-module-Sidesheet-header--shiftLeft-t3PAU-4-30-3","shift-left-spacing-3":"sidesheet-module-shift-left-spacing-3-6M1aJ-4-30-3","Sidesheet-body--nextPage":"sidesheet-module-Sidesheet-body--nextPage-jIMMM-4-30-3","fadeIn":"sidesheet-module-fadeIn-LZlsa-4-30-3","Sidesheet-body--firstPage":"sidesheet-module-Sidesheet-body--firstPage-6LHoK-4-30-3"};
styleInject(css_248z$x);
var sidesheetWidth = {
regular: '6',
large: '10'
};
var SIDESHEET_OPEN_ANIMATION = 'sidesheet-open';
var sidesheetInstanceCounter = 0;
var Sidesheet = /*#__PURE__*/function (_React$Component) {
function Sidesheet(props) {
var _this;
_classCallCheck(this, Sidesheet);
_this = _callSuper(this, Sidesheet, [props]);
_defineProperty$1(_this, "sidesheetRef", /*#__PURE__*/React.createRef());
_defineProperty$1(_this, "sidesheetContentRef", /*#__PURE__*/React.createRef());
_defineProperty$1(_this, "previousActiveElement", null);
_defineProperty$1(_this, "staticFocusTarget", null);
_defineProperty$1(_this, "autofocusRAF", null);
_defineProperty$1(_this, "autoHeadingId", void 0);
_defineProperty$1(_this, "element", void 0);
_defineProperty$1(_this, "onCloseHandler", function (event) {
closeOnEscapeKeypress(event, true, _this.onOutsideClickHandler);
});
_defineProperty$1(_this, "onFocusTrapKeyDown", function (event) {
var container = _this.sidesheetContentRef.current;
if (!container) return;
var nestedOverlays = getNestedOverlayElements(_this.sidesheetRef.current, container);
handleFocusTrapKeyDown(event, container, _this.staticFocusTarget, nestedOverlays);
});
_defineProperty$1(_this, "focusOnOpen", function () {
var container = _this.sidesheetContentRef.current;
if (!container || !_this.props.open) return;
// Per WAI-ARIA APG: focus the element named by aria-labelledby (the heading)
// so VoiceOver announces the dialog title before the user tabs to interactive
// elements. Fall back to the dialog container if no internal heading is found.
var labelledById = container.getAttribute('aria-labelledby');
var candidateEl = labelledById ? document.getElementById(labelledById) : null;
var headingEl = candidateEl && container.contains(candidateEl) ? candidateEl : null;
var target = headingEl !== null && headingEl !== void 0 ? headingEl : container;
target.setAttribute('tabindex', '-1');
target.focus({
preventScroll: true
});
_this.staticFocusTarget = target;
});
_defineProperty$1(_this, "onOpenAnimationStart", function (event) {
if (event.animationName !== SIDESHEET_OPEN_ANIMATION) return;
if (_this.autofocusRAF !== null) {
window.cancelAnimationFrame(_this.autofocusRAF);
_this.autofocusRAF = null;
}
_this.focusOnOpen();
});
_defineProperty$1(_this, "activateFocusTrap", function () {
_this.previousActiveElement = document.activeElement;
var container = _this.sidesheetContentRef.current;
if (!container) return;
_this.autofocusRAF = window.requestAnimationFrame(function () {
_this.autofocusRAF = null;
_this.focusOnOpen();
});
document.addEventListener('keydown', _this.onFocusTrapKeyDown, true);
document.addEventListener('keydown', _this.onCloseHandler);
// Keyboard focus trapping doesn't stop a screen reader's virtual/browse cursor, which
// ignores tabindex and DOM focus — hide the rest of the page from assistive tech too
// (aria-modal alone isn't honored consistently across browser/screen reader pairs).
activateBackgroundHiding(container, _this.element);
});
_defineProperty$1(_this, "deactivateFocusTrap", function () {
if (_this.autofocusRAF !== null) {
window.cancelAnimationFrame(_this.autofocusRAF);
_this.autofocusRAF = null;
}
document.removeEventListener('keydown', _this.onFocusTrapKeyDown, true);
document.removeEventListener('keydown', _this.onCloseHandler);
var container = _this.sidesheetContentRef.current;
if (container) {
deactivateBackgroundHiding(container);
container.removeAttribute('tabindex');
}
if (_this.staticFocusTarget && _this.staticFocusTarget !== container) {
_this.staticFocusTarget.removeAttribute('tabindex');
}
_this.staticFocusTarget = null;
var elementToFocus = _this.previousActiveElement;
_this.previousActiveElement = null;
restoreFocusToElementIfConnected(elementToFocus, _this.sidesheetContentRef.current);
});
_this.element = getWrapperElement();
_this.state = {
open: props.open,
animate: props.open
};
sidesheetInstanceCounter += 1;
_this.autoHeadingId = "sidesheet-title-".concat(sidesheetInstanceCounter);
_this.onOutsideClickHandler = _this.onOutsideClickHandler.bind(_this);
return _this;
}
_inherits(Sidesheet, _React$Component);
return _createClass(Sidesheet, [{
key: "componentDidMount",
value: function componentDidMount() {
if (this.state.open) {
instance.add(this.sidesheetRef.current);
this.activateFocusTrap();
}
if (this.props.backdropClose && this.state.open) {
instance.add(this.sidesheetRef.current);
}
var zIndex = getUpdatedZIndex({
element: this.element,
containerClassName: '.Overlay-container',
elementRef: this.sidesheetRef
});
this.setState({
zIndex: zIndex
});
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.state.open) {
this.deactivateFocusTrap();
instance.remove(this.sidesheetRef.current);
}
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
if (prevProps.open !== this.props.open) {
if (this.props.open) {
var zIndex = getUpdatedZIndex({
element: this.element,
containerClassName: '.Overlay-container--open',
elementRef: this.sidesheetRef
});
this.setState({
zIndex: zIndex,
open: true,
animate: true
});
instance.add(this.sidesheetRef.current);
this.activateFocusTrap();
} else {
this.deactivateFocusTrap();
instance.remove(this.sidesheetRef.current);
this.setState({
animate: false
});
}
}
}
}, {
key: "onOutsideClickHandler",
value: function onOutsideClickHandler(event) {
var onClose = this.props.onClose;
var open = this.state.open;
if (open && instance.isTopOverlay(this.sidesheetRef.current)) {
if (onClose) onClose(event, 'OutsideClick');
}
}
}, {
key: "handleAnimationEnd",
value: function handleAnimationEnd() {
if (!this.state.animate) {
this.setState({
open: false
});
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$state = this.state,
animate = _this$state.animate,
open = _this$state.open,
zIndex = _this$state.zIndex;
var _this$props = this.props,
className = _this$props.className,
backdropClose = _this$props.backdropClose,
dimension = _this$props.dimension,
footer = _this$props.footer,
seperator = _this$props.seperator,
stickFooter = _this$props.stickFooter,
headerOptions = _this$props.headerOptions,
footerOptions = _this$props.footerOptions,
header = _this$props.header,
onClose = _this$props.onClose,
ariaLabelledBy = _this$props['aria-labelledby'];
var shouldUseAutoHeadingId = !ariaLabelledBy && !header && Boolean(headerOptions === null || headerOptions === void 0 ? void 0 : headerOptions.heading);
var resolvedHeadingId = (headerOptions === null || headerOptions === void 0 ? void 0 : headerOptions.headingId) || (ariaLabelledBy && !ariaLabelledBy.includes(' ') && !header && Boolean(headerOptions === null || headerOptions === void 0 ? void 0 : headerOptions.heading) ? ariaLabelledBy : undefined) || (shouldUseAutoHeadingId ? this.autoHeadingId : undefined);
var resolvedAriaLabelledBy = ariaLabelledBy || resolvedHeadingId;
var BackdropZIndex = zIndex ? zIndex - 1 : 1000;
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$w.Sidesheet, true), styles$w['Sidesheet--open'], open), styles$w['Sidesheet-animation--open'], animate), styles$w['Sidesheet-animation--close'], !animate), className);
var ContainerClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, 'Overlay-container', true), 'fade-in', animate), 'Overlay-container--open', animate), 'Overlay-container--close', !animate));
var headerClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$w['Sidesheet-header'], true), styles$w['Sidesheet-header--withSeperator'], seperator));
var footerClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$w['Sidesheet-footer'], true), styles$w['Sidesheet-footer--withSeperator'], seperator), styles$w['Sidesheet-footer--stickToBottom'], stickFooter));
var bodyClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$w['Sidesheet-body'], true), styles$w['Sidesheet-body--withMargin'], !!footer && stickFooter), styles$w['Sidesheet-body--nextPage'], (headerOptions === null || headerOptions === void 0 ? void 0 : headerOptions.backButton) || (headerOptions === null || headerOptions === void 0 ? void 0 : headerOptions.backIcon)), styles$w['Sidesheet-body--firstPage'], !(headerOptions !== null && headerOptions !== void 0 && headerOptions.backButton) && !(headerOptions !== null && headerOptions !== void 0 && headerOptions.backIcon)));
var headingClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$w['Sidesheet-header--shiftRight'], (headerOptions === null || headerOptions === void 0 ? void 0 : headerOptions.backButton) || (headerOptions === null || headerOptions === void 0 ? void 0 : headerOptions.backIcon)), styles$w['Sidesheet-header--shiftLeft'], !(headerOptions !== null && headerOptions !== void 0 && headerOptions.backButton) && !(headerOptions !== null && headerOptions !== void 0 && headerOptions.backIcon)));
var baseProps = extractBaseProps(this.props);
var SidesheetContainer = /*#__PURE__*/React.createElement(Row, {
"data-test": "DesignSystem-SidesheetContainer",
"data-open": this.state.open,
className: ContainerClass,
"data-layer": true,
style: {
zIndex: zIndex ? zIndex : 1001
},
ref: this.sidesheetRef,
onAnimationEnd: function onAnimationEnd() {
return _this2.handleAnimationEnd;
}
}, /*#__PURE__*/React.createElement(Column, _extends$2({
ref: function ref(el) {
_this2.sidesheetContentRef.current = el;
},
"data-test": "DesignSystem-Sidesheet",
role: "dialog",
"aria-modal": open,
"aria-labelledby": resolvedAriaLabelledBy,
onAnimationStart: this.onOpenAnimationStart
}, baseProps, {
className: classes,
size: sidesheetWidth[dimension]
}), /*#__PURE__*/React.createElement("div", {
className: headerClass
}, /*#__PURE__*/React.createElement(Column, {
"data-test": "DesignSystem-Sidesheet--Header"
}, !header && /*#__PURE__*/React.createElement(OverlayHeader, _extends$2({
headingClass: headingClass
}, headerOptions, {
headingId: resolvedHeadingId
})), !!header && header), /*#__PURE__*/React.createElement(Column, {
className: "flex-grow-0"
}, /*#__PURE__*/React.createElement(Tooltip, {
tooltip: "Close"
}, /*#__PURE__*/React.createElement(Button, {
icon: "close",
appearance: "transparent",
"aria-label": "Close",
"data-test": "DesignSystem-Sidesheet--CloseButton",
largeIcon: true,
onClick: function onClick(event) {
if (onClose) onClose(event, 'IconClick');
}
})))), /*#__PURE__*/React.createElement(OverlayBody, {
"data-test": "DesignSystem-Sidesheet--OverlayBody",
className: bodyClass
}, this.props.children), (!!footer || !!footerOptions) && /*#__PURE__*/React.createElement(OverlayFooter, _extends$2({
"data-test": "DesignSystem-Sidesheet--Footer"
}, footerOptions, {
open: open,
className: footerClass,
skipFocusOnOpen: true
}), footer)));
var SidesheetWrapper = backdropClose ? /*#__PURE__*/React.createElement(OutsideClick, {
ref: this.sidesheetRef,
"data-test": "DesignSystem-Sidesheet--OutsideClick",
onOutsideClick: this.onOutsideClickHandler
}, SidesheetContainer) : SidesheetContainer;
var WrapperElement = /*#__PURE__*/ReactDOM.createPortal(SidesheetWrapper, this.element);
return /*#__PURE__*/React.createElement(React.Fragment, null, WrapperElement, /*#__PURE__*/React.createElement(Backdrop, {
open: this.state.animate,
zIndex: BackdropZIndex
}));
}
}]);
}(React.Component);
_defineProperty$1(Sidesheet, "defaultProps", {
dimension: 'regular',
stickFooter: false,
headerOptions: {},
closeOnEscape: true
});
var css_248z$w = ".collapsible-module-Collapsible-wrapper-CZ6L2-4-30-3 {\n position: relative;\n z-index: 600;\n}\n\n.collapsible-module-Collapsible-wrapper--overlay-HpWG9-4-30-3 {\n margin-right: 40px;\n}\n\n.collapsible-module-Collapsible-R-E0M-4-30-3 {\n display: inline-flex;\n flex-direction: column;\n background-color: var(--secondary-lightest);\n width: var(--spacing-120);\n height: 100%;\n transition: width 240ms;\n transition-timing-function: cubic-bezier(0.4, 0.14, 0.3, 1);\n}\n\n.collapsible-module-Collapsible--overlay-UiWwK-4-30-3 {\n position: absolute;\n}\n\n.collapsible-module-Collapsible--shadow-ObNC6-4-30-3 {\n box-shadow: var(--shadow-l);\n clip-path: inset(0px -16px 0px 0px);\n}\n\n.collapsible-module-Collapsible-body-63KgR-4-30-3 {\n flex-grow: 1;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.collapsible-module-Collapsible-footer-cTQby-4-30-3 {\n padding-top: var(--spacing-10);\n padding-bottom: var(--spacing-10);\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n}\n\n.collapsible-module-Collapsible-footer-cTQby-4-30-3:hover {\n background-color: var(--secondary-lighter);\n}\n\n.collapsible-module-Collapsible-footer-cTQby-4-30-3:focus,\n.collapsible-module-Collapsible-footer-cTQby-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.collapsible-module-Collapsible-footer-cTQby-4-30-3:active {\n background-color: var(--secondary-light);\n}\n\n.collapsible-module-Collapsible-footer--seperator-4XHlt-4-30-3 {\n border-top: var(--border-width-2-5) solid var(--secondary-light);\n}\n";
var styles$v = {"Collapsible-wrapper":"collapsible-module-Collapsible-wrapper-CZ6L2-4-30-3","Collapsible-wrapper--overlay":"collapsible-module-Collapsible-wrapper--overlay-HpWG9-4-30-3","Collapsible":"collapsible-module-Collapsible-R-E0M-4-30-3","Collapsible--overlay":"collapsible-module-Collapsible--overlay-UiWwK-4-30-3","Collapsible--shadow":"collapsible-module-Collapsible--shadow-ObNC6-4-30-3","Collapsible-body":"collapsible-module-Collapsible-body-63KgR-4-30-3","Collapsible-footer":"collapsible-module-Collapsible-footer-cTQby-4-30-3","Collapsible-footer--seperator":"collapsible-module-Collapsible-footer--seperator-4XHlt-4-30-3"};
styleInject(css_248z$w);
var Collapsible = function Collapsible(props) {
var expanded = props.expanded,
hoverable = props.hoverable,
expandedWidth = props.expandedWidth,
height = props.height,
children = props.children,
className = props.className,
onToggle = props.onToggle,
withTrigger = props.withTrigger;
var _React$useState = React.useState(true),
_React$useState2 = _slicedToArray(_React$useState, 2),
isClicked = _React$useState2[0],
setIsClicked = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
seperator = _React$useState4[0],
setSeperator = _React$useState4[1];
var ref = /*#__PURE__*/React.createRef();
var baseProps = extractBaseProps(props);
React.useEffect(function () {
if (ref.current) {
setSeperator(ref.current.scrollHeight > ref.current.clientHeight);
}
});
var WrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$v['Collapsible-wrapper'], true), styles$v['Collapsible-wrapper--overlay'], !isClicked));
var BodyClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$v['Collapsible-body'], true), 'overflow-hidden', !expanded && hoverable));
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$v.Collapsible, true), styles$v['Collapsible--overlay'], !isClicked), styles$v['Collapsible--shadow'], !isClicked && expanded), className);
var FooterClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$v['Collapsible-footer'], true), styles$v['Collapsible-footer--seperator'], seperator));
var onToggleHandler = function onToggleHandler(newExpanded, type) {
return function () {
if (onToggle) {
if (type === 'mouseenter' || type === 'mouseleave') {
if (isClicked && expanded || !hoverable) return;
setIsClicked(false);
}
if (type === 'click') {
setIsClicked(true);
}
onToggle(newExpanded);
}
};
};
var width = expanded ? expandedWidth : undefined;
return /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-CollapsibleWrapper",
className: WrapperClass,
style: {
height: height
}
}, /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-Collapsible"
}, baseProps, {
"data-layer": true,
className: classes,
style: {
width: width
}
}), /*#__PURE__*/React.createElement("div", {
className: BodyClass,
"data-test": "DesignSystem-CollapsibleBody",
onMouseEnter: onToggleHandler(true, 'mouseenter'),
onMouseLeave: onToggleHandler(false, 'mouseleave'),
ref: ref
}, children), withTrigger && /*#__PURE__*/React.createElement("div", {
role: "button",
tabIndex: 0,
className: FooterClass,
"data-test": "DesignSystem-Collapsible--Footer",
"aria-label": expanded ? 'Collapse panel' : 'Expand panel',
"aria-expanded": expanded,
onClick: onToggleHandler(!expanded, 'click'),
onKeyDown: function onKeyDown(e) {
if (isSpaceKey(e) || isEnterKey(e)) {
e.preventDefault();
onToggleHandler(!expanded, 'click')();
}
}
}, /*#__PURE__*/React.createElement(Icon, {
name: expanded ? 'keyboard_arrow_left' : 'keyboard_arrow_right',
"data-test": "DesignSystem-Collapsible--FooterIcon",
className: "px-6 py-4 my-2 cursor-pointer",
size: 16
}))));
};
Collapsible.displayName = 'Collapsible';
Collapsible.defaultProps = {
expanded: false,
hoverable: true,
height: '100%',
expandedWidth: '240px',
withTrigger: true
};
var css_248z$v = ".chat-module-Box-nVkrd-4-30-3 {\n width: 100%;\n border-radius: var(--border-radius-20);\n padding: var(--spacing-30);\n}\n\n.chat-module-Box--typing-WmXRM-4-30-3 {\n padding-top: var(--spacing-20);\n padding-bottom: var(--spacing-20);\n}\n\n.chat-module-Box--incoming-8KEhx-4-30-3 {\n border: var(--border-width-2-5) solid var(--secondary-light);\n background-color: var(--white);\n}\n\n.chat-module-Box--outgoing-eC7L7-4-30-3 {\n background-color: var(--secondary-lightest);\n}\n\n.chat-module-Box-incoming--withStatus-gGxq9-4-30-3 {\n border-bottom-left-radius: 0;\n}\n\n.chat-module-Box-outgoing--withStatus-fYw1d-4-30-3 {\n border-bottom-right-radius: 0;\n}\n\n.chat-module-Box--urgent-LErV3-4-30-3 {\n border-color: var(--alert);\n}\n\n.chat-module-ChatMessage-status-snoof-4-30-3 {\n margin-top: var(--spacing-10);\n display: block;\n}\n";
var styles$u = {"Box":"chat-module-Box-nVkrd-4-30-3","Box--typing":"chat-module-Box--typing-WmXRM-4-30-3","Box--incoming":"chat-module-Box--incoming-8KEhx-4-30-3","Box--outgoing":"chat-module-Box--outgoing-eC7L7-4-30-3","Box-incoming--withStatus":"chat-module-Box-incoming--withStatus-gGxq9-4-30-3","Box-outgoing--withStatus":"chat-module-Box-outgoing--withStatus-fYw1d-4-30-3","Box--urgent":"chat-module-Box--urgent-LErV3-4-30-3","ChatMessage-status":"chat-module-ChatMessage-status-snoof-4-30-3"};
styleInject(css_248z$v);
var Status$1 = function Status(props) {
var type = props.type,
time = props.time,
className = props.className,
_props$readText = props.readText,
readText = _props$readText === void 0 ? 'Read' : _props$readText,
_props$failedText = props.failedText,
failedText = _props$failedText === void 0 ? 'Click to retry' : _props$failedText,
_props$sendingText = props.sendingText,
sendingText = _props$sendingText === void 0 ? 'Sending..' : _props$sendingText;
var baseProps = extractBaseProps(props);
var StatusClass = classnames(_defineProperty$1({}, 'd-flex align-items-center mt-3', true), className);
var TextClass = classnames(_defineProperty$1({}, styles$u['ChatMessage-status'], true), className);
var getTime = function getTime(t) {
if (typeof t === 'number') {
var d = new Date(t);
var hours = d.getHours();
var minutes = d.getMinutes();
var AMPM = hours < 12 ? 'AM' : 'PM';
var hrs = hours % 12 || 12;
return "".concat(hrs, ":").concat(minutes, " ").concat(AMPM);
}
return t;
};
switch (type) {
case 'failed':
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
className: StatusClass
}), /*#__PURE__*/React.createElement(Icon, {
name: "error",
type: "outlined",
appearance: "destructive"
}), /*#__PURE__*/React.createElement(Text$1, {
appearance: "destructive",
size: "small",
className: "ml-1"
}, "Failed"), /*#__PURE__*/React.createElement(MetaList, {
list: [{
label: failedText
}],
seperator: true
}));
case 'urgent':
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
className: StatusClass
}), /*#__PURE__*/React.createElement(Icon, {
name: "notification_important",
type: "outlined",
appearance: "destructive"
}), /*#__PURE__*/React.createElement(Text$1, {
appearance: "destructive",
size: "small",
className: "ml-1"
}, "Urgent"), time && /*#__PURE__*/React.createElement(MetaList, {
list: [{
label: getTime(time)
}],
seperator: true
}));
case 'read':
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
className: StatusClass
}), time && /*#__PURE__*/React.createElement(Text$1, {
appearance: "subtle",
size: "small"
}, getTime(time)), /*#__PURE__*/React.createElement(MetaList, {
list: [{
label: readText
}],
seperator: true
}));
case 'sending':
return /*#__PURE__*/React.createElement(Text$1, _extends$2({}, baseProps, {
appearance: "subtle",
size: "small",
className: TextClass
}), sendingText);
case 'sent':
return /*#__PURE__*/React.createElement(React.Fragment, null, time && /*#__PURE__*/React.createElement(Text$1, _extends$2({}, baseProps, {
appearance: "subtle",
size: "small",
className: TextClass
}), getTime(time)));
default:
return null;
}
};
Status$1.displayName = 'Status';
var Box = function Box(props) {
var children = props.children,
type = props.type,
isTyping = props.isTyping,
statusType = props.statusType,
withStatus = props.withStatus,
onClick = props.onClick,
className = props.className;
var baseProps = extractBaseProps(props);
var isClickable = Boolean(onClick);
var handleKeyDown = function handleKeyDown(event) {
if (!isClickable) return;
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
onClick === null || onClick === void 0 || onClick(event);
}
};
var MessageClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$u['Box'], true), styles$u["Box--".concat(type)], type), styles$u['Box--typing'], isTyping), styles$u['Box--urgent'], statusType === 'urgent'), styles$u["Box-".concat(type, "--withStatus")], type && (withStatus || isTyping)), className);
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
className: MessageClass,
onClick: onClick,
onKeyDown: handleKeyDown,
"data-test": "DesignSystem-ChatMessage--Box",
role: isClickable ? 'button' : undefined,
tabIndex: isClickable ? 0 : undefined
}), children);
/* eslint-enable */
};
Box.displayName = 'Box';
var MessageText = function MessageText(props) {
var text = props.text,
type = props.type,
isTyping = props.isTyping,
typingText = props.typingText,
statusType = props.statusType,
className = props.className;
var baseProps = extractBaseProps(props);
if (isTyping && type === 'incoming') {
return /*#__PURE__*/React.createElement(Text$1, _extends$2({}, baseProps, {
appearance: 'subtle',
size: 'small',
className: className
}), typingText);
}
return /*#__PURE__*/React.createElement(Text$1, _extends$2({}, baseProps, {
className: className,
appearance: statusType === 'sending' ? 'subtle' : 'default'
}), text);
};
MessageText.defaultProps = {
text: '',
typingText: 'Typing..'
};
MessageText.displayName = 'MessageText';
var ChatMessage = function ChatMessage(props) {
var type = props.type,
text = props.text,
isTyping = props.isTyping,
typingText = props.typingText,
statusOptions = props.statusOptions,
onClick = props.onClick,
className = props.className;
var baseProps = extractBaseProps(props);
var _ref = statusOptions || {},
statusType = _ref.type;
return /*#__PURE__*/React.createElement(Box, _extends$2({}, baseProps, {
type: type,
className: className,
onClick: onClick,
isTyping: isTyping,
statusType: statusType,
withStatus: statusOptions !== undefined
}), /*#__PURE__*/React.createElement(MessageText, {
type: type,
text: text,
typingText: typingText,
isTyping: isTyping,
statusType: statusType
}), !isTyping && statusOptions && /*#__PURE__*/React.createElement(Status$1, statusOptions));
};
ChatMessage.displayName = 'ChatMessage';
var EmptyStateContext = /*#__PURE__*/React.createContext({});
var css_248z$u = ".emptyState-module-EmptyState-xAbqT-4-30-3 {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background: transparent;\n}\n\n.emptyState-module-EmptyState-Wrapper-IqIuE-4-30-3 {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background: transparent;\n width: 100%;\n}\n\n.emptyState-module-EmptyState-image-GWUhK-4-30-3 {\n display: flex;\n justify-content: center;\n width: 100%;\n height: 100%;\n -o-object-fit: contain;\n object-fit: contain;\n}\n\n.emptyState-module-EmptyState-title-VlvHo-4-30-3 {\n text-align: center;\n max-width: 480px;\n}\n\n.emptyState-module-EmptyState-description-orGdo-4-30-3 {\n text-align: center;\n margin-top: var(--spacing-10);\n max-width: 360px;\n}\n\n.emptyState-module-EmptyState-title--large-64J7i-4-30-3 {\n margin-top: var(--spacing-120);\n}\n\n.emptyState-module-EmptyState-title--small-lEDPt-4-30-3 {\n margin-top: var(--spacing-60);\n}\n\n.emptyState-module-EmptyState-description--large-hMXtK-4-30-3 {\n margin-bottom: var(--spacing-60);\n}\n\n.emptyState-module-EmptyState-description--small-gq50n-4-30-3 {\n margin-bottom: var(--spacing-40);\n}\n\n.emptyState-module-EmptyState-text-1y-HU-4-30-3 {\n display: flex;\n text-align: center;\n justify-content: center;\n}\n\n.emptyState-module-EmptyState-actions-xhSau-4-30-3 {\n display: flex;\n justify-content: center;\n}\n\n.emptyState-module-EmptyState-title--compressed-Pp9jF-4-30-3 {\n margin-top: var(--spacing-40);\n}\n.emptyState-module-EmptyState-title--standard-XtKl2-4-30-3 {\n margin-top: var(--spacing-60);\n}\n.emptyState-module-EmptyState-title--tight-ZSyIK-4-30-3 {\n margin-top: var(--spacing-30);\n}\n\n.emptyState-module-EmptyState-actions--compressed-E8-g2-4-30-3 {\n margin-top: var(--spacing-40);\n}\n\n.emptyState-module-EmptyState-actions--standard-G3fT9-4-30-3 {\n margin-top: var(--spacing-60);\n}\n\n.emptyState-module-EmptyState-actions--tight-mfayn-4-30-3 {\n margin-top: var(--spacing-30);\n}\n";
var styles$t = {"EmptyState":"emptyState-module-EmptyState-xAbqT-4-30-3","EmptyState-Wrapper":"emptyState-module-EmptyState-Wrapper-IqIuE-4-30-3","EmptyState-image":"emptyState-module-EmptyState-image-GWUhK-4-30-3","EmptyState-title":"emptyState-module-EmptyState-title-VlvHo-4-30-3","EmptyState-description":"emptyState-module-EmptyState-description-orGdo-4-30-3","EmptyState-title--large":"emptyState-module-EmptyState-title--large-64J7i-4-30-3","EmptyState-title--small":"emptyState-module-EmptyState-title--small-lEDPt-4-30-3","EmptyState-description--large":"emptyState-module-EmptyState-description--large-hMXtK-4-30-3","EmptyState-description--small":"emptyState-module-EmptyState-description--small-gq50n-4-30-3","EmptyState-text":"emptyState-module-EmptyState-text-1y-HU-4-30-3","EmptyState-actions":"emptyState-module-EmptyState-actions-xhSau-4-30-3","EmptyState-title--compressed":"emptyState-module-EmptyState-title--compressed-Pp9jF-4-30-3","EmptyState-title--standard":"emptyState-module-EmptyState-title--standard-XtKl2-4-30-3","EmptyState-title--tight":"emptyState-module-EmptyState-title--tight-ZSyIK-4-30-3","EmptyState-actions--compressed":"emptyState-module-EmptyState-actions--compressed-E8-g2-4-30-3","EmptyState-actions--standard":"emptyState-module-EmptyState-actions--standard-G3fT9-4-30-3","EmptyState-actions--tight":"emptyState-module-EmptyState-actions--tight-mfayn-4-30-3"};
styleInject(css_248z$u);
var _excluded$W = ["children", "maxHeight", "height", "minHeight", "src", "alt", "className"];
var imageHeight$1 = {
standard: '200px',
compressed: '150px',
tight: '100px',
large: '200px',
small: '200px'
};
var EmptyStateImage = function EmptyStateImage(props) {
var children = props.children,
maxHeight = props.maxHeight,
height = props.height,
minHeight = props.minHeight,
src = props.src,
alt = props.alt,
className = props.className,
rest = _objectWithoutProperties(props, _excluded$W);
var contextProp = React__default.useContext(EmptyStateContext);
var imageClasses = classnames(_defineProperty$1({}, styles$t['EmptyState-image'], true), className);
var imageWrapperClasses = classnames(_defineProperty$1(_defineProperty$1({}, 'd-flex', true), 'justify-content-center', true), className);
var _contextProp$size = contextProp.size,
size = _contextProp$size === void 0 ? 'standard' : _contextProp$size;
var sizeStyle = {
maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : imageHeight$1[size],
height: height,
minHeight: minHeight
};
if (children) {
return /*#__PURE__*/React__default.createElement("div", _extends$2({}, rest, {
className: imageWrapperClasses,
style: _objectSpread2({}, sizeStyle)
}), children);
}
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, src && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("img", _extends$2({
className: imageClasses,
src: src,
alt: alt,
style: _objectSpread2({}, sizeStyle),
"data-test": "DesignSystem-EmptyState--Img"
}, rest))));
};
var _excluded$V = ["children", "className", "as"];
var EmptyStateTitle = function EmptyStateTitle(props) {
var children = props.children,
className = props.className,
as = props.as,
rest = _objectWithoutProperties(props, _excluded$V);
var contextProp = React__default.useContext(EmptyStateContext);
var _contextProp$size = contextProp.size,
size = _contextProp$size === void 0 ? 'standard' : _contextProp$size;
var headingClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$t["EmptyState-text"], true), styles$t["EmptyState-title--".concat(size)], true), className);
if (size === 'standard') {
return /*#__PURE__*/React__default.createElement(Heading, _extends$2({
"data-test": "DesignSystem-EmptyState--Heading",
className: headingClass,
as: as
}, rest), children);
}
return /*#__PURE__*/React__default.createElement(Text$1, _extends$2({
"data-test": "DesignSystem-EmptyState--Heading",
className: headingClass,
weight: "medium",
size: textSize[size],
as: as
}, rest), children);
};
var _excluded$U = ["children", "className"];
var EmptyStateDescription = function EmptyStateDescription(props) {
var children = props.children,
className = props.className,
rest = _objectWithoutProperties(props, _excluded$U);
var contextProp = React__default.useContext(EmptyStateContext);
var _contextProp$size = contextProp.size,
size = _contextProp$size === void 0 ? 'standard' : _contextProp$size;
var textSize = {
standard: 'regular',
compressed: 'regular',
tight: 'small'
};
var descriptionClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$t["EmptyState-text"], true), 'mt-3', true), className);
return /*#__PURE__*/React__default.createElement(Text$1, _extends$2({
size: textSize[size],
appearance: "subtle",
className: descriptionClasses,
"data-test": "DesignSystem-EmptyState--Text"
}, rest), children);
};
var _excluded$T = ["children", "className"];
var EmptyStateActions = function EmptyStateActions(props) {
var children = props.children,
className = props.className,
rest = _objectWithoutProperties(props, _excluded$T);
var contextProp = React__default.useContext(EmptyStateContext);
var _contextProp$size = contextProp.size,
size = _contextProp$size === void 0 ? 'standard' : _contextProp$size;
var actionWrapperClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$t["EmptyState-actions--".concat(size)], true), styles$t['EmptyState-actions'], true), className);
return /*#__PURE__*/React__default.createElement("div", _extends$2({
"data-test": "DesignSystem-EmptyState--Actions",
className: actionWrapperClasses
}, rest), children);
};
var imageHeight = {
large: '256px',
small: '128px',
standard: '256px',
compressed: '256px',
tight: '256px'
};
var templateWidth = {
standard: '480px',
compressed: '400px',
tight: '320px',
large: '480px',
small: '480px'
};
var HeadingSize = {
large: 'l',
small: 'm',
standard: 'l',
compressed: 'l',
tight: 'l'
};
var textSize = {
large: 'large',
small: 'regular',
standard: 'large',
compressed: 'large',
tight: 'regular'
};
var EmptyState = function EmptyState(props) {
var imageSrc = props.imageSrc,
title = props.title,
description = props.description,
_props$size = props.size,
size = _props$size === void 0 ? 'standard' : _props$size,
children = props.children,
className = props.className,
image = props.image,
maxWidth = props.maxWidth,
minWidth = props.minWidth,
width = props.width,
headingAs = props.headingAs;
var baseProps = extractBaseProps(props);
var templateSize = 'standard';
var isValidSize = function isValidSize(size) {
return size === 'large' || size === 'small';
};
if (title || description) {
templateSize = isValidSize(size) ? size : 'large';
} else {
templateSize = isValidSize(size) ? 'standard' : size;
}
var wrapperClasses = classnames(_defineProperty$1({}, styles$t['EmptyState'], true), className);
var emptyStateWrapper = classnames(_defineProperty$1({}, styles$t['EmptyState-Wrapper'], true), className);
var headingClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$t['EmptyState-title'], true), styles$t["EmptyState-title--".concat(templateSize)], true));
var textClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$t['EmptyState-description'], true), styles$t["EmptyState-description--".concat(templateSize)], children !== undefined));
if (title || description) {
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-EmptyState"
}, baseProps, {
className: wrapperClasses
}), image && /*#__PURE__*/React.createElement("div", {
style: {
height: imageHeight[templateSize]
}
}, image), imageSrc && !image && /*#__PURE__*/React.createElement("img", {
src: imageSrc,
height: imageHeight[templateSize],
"data-test": "DesignSystem-EmptyState--Img",
alt: title || description || ''
}), title && /*#__PURE__*/React.createElement(Heading, {
"data-test": "DesignSystem-EmptyState--Heading",
size: HeadingSize[templateSize],
className: headingClasses,
as: headingAs
}, title), description && /*#__PURE__*/React.createElement(Text$1, {
size: textSize[templateSize],
className: textClasses,
appearance: "subtle",
"data-test": "DesignSystem-EmptyState--Text"
}, description), children && children);
}
var templateMaxWidth = maxWidth ? maxWidth : templateWidth[templateSize];
var customStyle = {
maxWidth: templateMaxWidth,
minWidth: minWidth,
width: width
};
return /*#__PURE__*/React.createElement(EmptyStateContext.Provider, {
value: {
size: templateSize,
maxWidth: templateMaxWidth
}
}, /*#__PURE__*/React.createElement("div", {
className: "d-flex justify-content-center align-item-center w-100 h-100"
}, /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-EmptyState--Wrapper",
className: emptyStateWrapper,
style: customStyle
}, baseProps), children)));
};
EmptyState.displayName = 'EmptyState';
EmptyState.Title = EmptyStateTitle;
EmptyState.Description = EmptyStateDescription;
EmptyState.Image = EmptyStateImage;
EmptyState.Actions = EmptyStateActions;
EmptyState.defaultProps = {
size: 'standard'
};
var ModalDescription = function ModalDescription(props) {
var title = props.title,
description = props.description,
className = props.className;
var baseProps = extractBaseProps(props);
var classes = classnames(_defineProperty$1({}, styles$y['Modal-description'], true), className);
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-ModalDescription"
}, baseProps, {
className: classes
}), title && /*#__PURE__*/React.createElement(Text$1, {
weight: "strong",
"data-test": "DesignSystem-ModalDescription--Title"
}, title), title && description && /*#__PURE__*/React.createElement("br", null), description && /*#__PURE__*/React.createElement(Text$1, {
"data-test": "DesignSystem-ModalDescription--Description"
}, description));
};
ModalDescription.displayName = 'ModalDescription';
var Pagination = function Pagination(props) {
var type = props.type,
totalPages = props.totalPages,
onPageChange = props.onPageChange,
className = props.className,
pageJumpDebounceDuration = props.pageJumpDebounceDuration;
var baseProps = extractBaseProps(props);
var _React$useState = React.useState(),
_React$useState2 = _slicedToArray(_React$useState, 2),
labelId = _React$useState2[0],
setLabelId = _React$useState2[1];
var _React$useState3 = React.useState(),
_React$useState4 = _slicedToArray(_React$useState3, 2),
descriptionId = _React$useState4[0],
setDescriptionId = _React$useState4[1];
React.useEffect(function () {
setLabelId("DesignSystem-Pagination-page-".concat(uidGenerator()));
setDescriptionId("DesignSystem-Pagination-totalPage-".concat(uidGenerator()));
}, []);
var _React$useState5 = React.useState(props.page),
_React$useState6 = _slicedToArray(_React$useState5, 2),
page = _React$useState6[0],
setPage = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
init = _React$useState8[0],
setInit = _React$useState8[1];
var _React$useState9 = React.useState(0),
_React$useState10 = _slicedToArray(_React$useState9, 2),
debounceCancelCounter = _React$useState10[0],
setDebounceCancelCounter = _React$useState10[1];
var debouncePageChange = React.useCallback(debounce$1(pageJumpDebounceDuration, onPageChange), [debounceCancelCounter]);
React.useEffect(function () {
setPage(props.page);
}, [props.page]);
var wrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$W['Pagination'], true), styles$W["Pagination--".concat(type)], type), className);
var nextButtonWrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$W['Pagination-buttonWrapper'], true), styles$W['Pagination-buttonWrapper--next'], true));
var prevButtonWrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$W['Pagination-buttonWrapper'], true), styles$W['Pagination-buttonWrapper--previous'], true));
React.useEffect(function () {
if (init) {
if (page >= 1 && page <= totalPages) {
debouncePageChange(page);
} else {
/**
* On removing a page number on UI via backspace, debounce malfunctions if page is not within desired range.
* Hence, we remove the debounce function via cancel method.
*/
debouncePageChange.cancel();
/**
* Since debouncePageChange is cached via React.useCallback,
* cancel method above removes the single debounce function instance available.
* To make a new instance available, we have to update the dependency object.
*/
setDebounceCancelCounter(function (prev) {
return prev + 1;
});
}
}
}, [page]);
var inputChangeHandler = function inputChangeHandler(e) {
e.preventDefault();
var val = +e.target.value.trim();
if (val >= 0 && val <= totalPages) {
if (!init) setInit(true);
setPage(val);
}
};
var onKeyPressHandler = function onKeyPressHandler(e) {
if (!isNaturalNumber(e.key)) {
e.preventDefault();
}
};
var onClickHandler = function onClickHandler(buttonType) {
setInit(true);
switch (buttonType) {
case 'first':
setPage(1);
break;
case 'last':
setPage(totalPages);
break;
case 'prev':
if (page > 1) setPage(page - 1);
break;
case 'next':
if (page < totalPages) setPage(page + 1);
break;
}
};
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-Pagination"
}, baseProps, {
className: wrapperClass
}), /*#__PURE__*/React.createElement("div", {
className: prevButtonWrapperClass
}, /*#__PURE__*/React.createElement(Button, {
onClick: function onClick() {
return onClickHandler('first');
},
disabled: page <= 1,
appearance: "transparent",
icon: "first_page",
"aria-label": "First page",
className: styles$W['Pagination-button'],
"data-test": "DesignSystem-Pagination--FirstButton"
}), /*#__PURE__*/React.createElement(Button, {
onClick: function onClick() {
return onClickHandler('prev');
},
disabled: page <= 1,
icon: "navigate_before",
"aria-label": "Previous page",
"data-test": "DesignSystem-Pagination--PrevButton",
className: "ml-4 mr-3 ".concat(styles$W['Pagination-button'])
})), type === 'jump' && /*#__PURE__*/React.createElement("div", {
className: styles$W['Pagination-pageIndex']
}, /*#__PURE__*/React.createElement(Text$1, {
id: labelId,
className: "mr-4"
}, "Page"), /*#__PURE__*/React.createElement(MetricInput, {
name: "page",
className: styles$W['Pagination-MetricInput'],
onChange: inputChangeHandler,
value: "".concat(isNaturalNumber(page) ? page : ''),
"data-test": "DesignSystem-Pagination--Input",
onKeyPress: onKeyPressHandler,
"aria-labelledby": labelId && descriptionId ? "".concat(labelId, " ").concat(descriptionId) : undefined
}), /*#__PURE__*/React.createElement(Text$1, {
id: descriptionId
}, " of ".concat(totalPages))), /*#__PURE__*/React.createElement("div", {
className: nextButtonWrapperClass
}, /*#__PURE__*/React.createElement(Button, {
onClick: function onClick() {
return onClickHandler('next');
},
disabled: page >= totalPages,
icon: "navigate_next",
"aria-label": "Next page",
"data-test": "DesignSystem-Pagination--NextButton",
className: "ml-3 mr-4 ".concat(styles$W['Pagination-button'])
}), /*#__PURE__*/React.createElement(Button, {
onClick: function onClick() {
return onClickHandler('last');
},
disabled: page >= totalPages,
appearance: "transparent",
icon: "last_page",
"aria-label": "Last page",
className: styles$W['Pagination-button'],
"data-test": "DesignSystem-Pagination--LastButton"
})));
};
Pagination.displayName = 'Pagination';
Pagination.defaultProps = {
type: 'basic',
page: 1,
totalPages: 1,
pageJumpDebounceDuration: 750
};
var css_248z$t = ".editableInput-module-EditableInput-jeeBB-4-30-3 {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n width: 100%;\n}\n\n.editableInput-module-EditableInput-jeeBB-4-30-3:focus-visible {\n outline: none;\n}\n\n.editableInput-module-EditableInput-actions-L90fR-4-30-3 {\n position: absolute;\n display: flex;\n justify-content: flex-end;\n margin-top: var(--spacing-10);\n width: 100%;\n}\n\n.editableInput-module-EditableInput-actions--regular-ShViM-4-30-3 {\n top: var(--spacing-80);\n}\n\n.editableInput-module-EditableInput-actions--tiny-kIRx4-4-30-3 {\n top: var(--spacing-60);\n}\n\n.editableInput-module-EditableInput-default-PLtoY-4-30-3 {\n border: var(--border-width-2-5) solid transparent;\n box-sizing: border-box;\n white-space: nowrap;\n display: flex;\n align-items: center;\n border-radius: var(--border-radius-10);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n cursor: pointer;\n}\n\n.editableInput-module-EditableInput-default-PLtoY-4-30-3:hover {\n background: var(--secondary-lighter);\n border-color: var(--secondary-dark);\n}\n\n.editableInput-module-EditableInput-jeeBB-4-30-3:focus-visible .editableInput-module-EditableInput-default-PLtoY-4-30-3 {\n background: var(--white);\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n border-color: transparent;\n}\n\n.editableInput-module-EditableInput-default--regular-M9hwS-4-30-3 {\n min-width: var(--spacing-640);\n height: var(--spacing-80);\n padding-left: var(--spacing-30);\n padding-right: var(--spacing-30);\n}\n\n.editableInput-module-EditableInput-default--tiny-PMLyx-4-30-3 {\n min-width: var(--spacing-240);\n height: var(--spacing-60);\n font-size: var(--font-size-s);\n font-weight: var(--font-weight-medium);\n line-height: var(--font-height-s);\n padding-left: var(--spacing-20);\n padding-right: var(--spacing-20);\n}\n\n.editableInput-module-EditableInput-Input--tiny-3FTNw-4-30-3 {\n min-width: var(--spacing-240) !important;\n width: 100%;\n}\n\n.editableInput-module-EditableInput-errorIcon--regular-srzrI-4-30-3 {\n margin-right: var(--spacing-20);\n margin-top: var(--spacing-10);\n margin-bottom: var(--spacing-10);\n}\n\n.editableInput-module-EditableInput-errorIcon--tiny-Is2wT-4-30-3 {\n margin-right: var(--spacing-10);\n margin-top: var(--spacing-05);\n margin-bottom: var(--spacing-05);\n}\n";
var styles$s = {"EditableInput":"editableInput-module-EditableInput-jeeBB-4-30-3","EditableInput-actions":"editableInput-module-EditableInput-actions-L90fR-4-30-3","EditableInput-actions--regular":"editableInput-module-EditableInput-actions--regular-ShViM-4-30-3","EditableInput-actions--tiny":"editableInput-module-EditableInput-actions--tiny-kIRx4-4-30-3","EditableInput-default":"editableInput-module-EditableInput-default-PLtoY-4-30-3","EditableInput-default--regular":"editableInput-module-EditableInput-default--regular-M9hwS-4-30-3","EditableInput-default--tiny":"editableInput-module-EditableInput-default--tiny-PMLyx-4-30-3","EditableInput-Input--tiny":"editableInput-module-EditableInput-Input--tiny-3FTNw-4-30-3","EditableInput-errorIcon--regular":"editableInput-module-EditableInput-errorIcon--regular-srzrI-4-30-3","EditableInput-errorIcon--tiny":"editableInput-module-EditableInput-errorIcon--tiny-Is2wT-4-30-3"};
styleInject(css_248z$t);
var _excluded$S = ["onChange", "icon", "disabled"];
var EditableInput = function EditableInput(props) {
var error = props.error,
size = props.size,
errorMessage = props.errorMessage,
placeholder = props.placeholder,
inputOptions = props.inputOptions,
disableSaveAction = props.disableSaveAction,
onChange = props.onChange,
className = props.className,
ariaLabel = props['aria-label'],
ariaLabelledby = props['aria-labelledby'],
ariaDescribedby = props['aria-describedby'],
id = props.id;
var onInputChange = inputOptions.onChange,
inputIcon = inputOptions.icon,
inputDisabled = inputOptions.disabled,
rest = _objectWithoutProperties(inputOptions, _excluded$S);
var _React$useState = React.useState(props.value),
_React$useState2 = _slicedToArray(_React$useState, 2),
inputValue = _React$useState2[0],
setInputValue = _React$useState2[1];
var _React$useState3 = React.useState(props.value),
_React$useState4 = _slicedToArray(_React$useState3, 2),
value = _React$useState4[0],
setValue = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
editing = _React$useState6[0],
setEditing = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
showComponent = _React$useState8[0],
setShowComponent = _React$useState8[1];
var inputRef = /*#__PURE__*/React.createRef();
var baseProps = extractBaseProps(props);
var isControlled = props.value !== undefined;
React.useEffect(function () {
if (isControlled) setValue(props.value);
}, [props.value]);
React.useEffect(function () {
if (editing && showComponent) {
var _inputRef$current;
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
}
}, [editing, showComponent]);
var EditableInputClass = classnames(_defineProperty$1({}, styles$s['EditableInput'], true), className);
var EditableDefaultClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$s['EditableInput-default'], true), styles$s["EditableInput-default--".concat(size)], size));
var ErrorIconClass = classnames(_defineProperty$1({}, styles$s["EditableInput-errorIcon--".concat(size)], size));
var InputClass = classnames(_defineProperty$1({}, styles$s['EditableInput-Input--tiny'], size === 'tiny'));
var ActionClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$s['EditableInput-actions'], true), styles$s["EditableInput-actions--".concat(size)], size));
var setDefaultComponent = function setDefaultComponent(updatedValue) {
setInputValue(updatedValue);
setEditing(false);
setShowComponent(false);
};
var onSaveChanges = function onSaveChanges() {
if (!isControlled) setValue(inputValue);
if (onChange) onChange(inputValue || '');
setDefaultComponent(inputValue);
};
var onInputChangeHandler = function onInputChangeHandler(e) {
setInputValue(e.target.value);
if (onInputChange) onInputChange(e);
};
var onChangeHandler = function onChangeHandler(eventType) {
switch (eventType) {
case 'edit':
{
setEditing(true);
setShowComponent(true);
break;
}
case 'hover':
{
// Do not set showComponent to true on hover to avoid keyboard focus interference
break;
}
case 'default':
{
setShowComponent(false);
}
}
};
var handleKeyDown = function handleKeyDown(event) {
if (inputDisabled) return;
// When not editing, Enter/Space enters edit mode
if (!editing && (event.key === 'Enter' || isSpaceKey(event))) {
if (event.currentTarget !== event.target) return;
event.preventDefault();
if (event.repeat) return;
onChangeHandler('edit');
return;
}
// When editing and focus is on input, handle save/cancel
if (editing && document.activeElement === inputRef.current) {
if (event.key === 'Enter') {
event.preventDefault();
onSaveChanges();
} else if (event.key === 'Escape') {
event.preventDefault();
setDefaultComponent(value);
}
}
};
var handleClick = function handleClick() {
if (inputDisabled || editing) return;
onChangeHandler('edit');
};
var inputComponent = /*#__PURE__*/React.createElement(Input, _extends$2({
defaultValue: inputValue,
placeholder: placeholder,
className: InputClass,
autoFocus: editing,
size: size,
onChange: onInputChangeHandler,
error: error,
disabled: inputDisabled,
icon: error ? 'error' : inputIcon,
ref: inputRef,
"data-test": "DesignSystem-EditableInput--Input"
}, rest, {
id: id,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
"aria-describedby": ariaDescribedby
}));
var renderChildren = function renderChildren() {
if (showComponent) {
return error && errorMessage ? /*#__PURE__*/React.createElement(Popover, {
trigger: inputComponent,
position: "right",
className: "px-6 py-6 d-flex align-items-center",
on: "hover"
}, /*#__PURE__*/React.createElement(InlineMessage, {
appearance: "alert",
description: errorMessage
})) : inputComponent;
}
var iconSize = size === 'tiny' ? 14 : 16;
return /*#__PURE__*/React.createElement("div", {
className: EditableDefaultClass,
"data-test": "DesignSystem-EditableInput--Default"
}, error && /*#__PURE__*/React.createElement(Icon, {
name: "error",
appearance: "alert",
size: iconSize,
className: classnames('d-flex align-items-center', ErrorIconClass),
"aria-hidden": true
}), value || placeholder);
};
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-EditableInput"
}, baseProps, {
className: EditableInputClass,
onKeyDown: handleKeyDown,
onClick: handleClick,
role: editing ? undefined : 'button',
tabIndex: inputDisabled ? -1 : editing ? -1 : 0,
"aria-disabled": inputDisabled || undefined,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
"aria-describedby": ariaDescribedby
}), /*#__PURE__*/React.createElement(Editable, {
onChange: onChangeHandler,
editing: editing
}, renderChildren()), editing && /*#__PURE__*/React.createElement("div", {
className: ActionClass,
"data-test": "DesignSystem-EditableInput--Actions"
}, /*#__PURE__*/React.createElement(Button, {
className: "mr-3",
size: "tiny",
onClick: function onClick() {
setDefaultComponent(value);
},
"data-test": "DesignSystem-EditableInput--Discard"
}, "Cancel"), /*#__PURE__*/React.createElement(Button, {
appearance: "primary",
size: "tiny",
disabled: disableSaveAction,
onClick: onSaveChanges,
"data-test": "DesignSystem-EditableInput--Save"
}, "Save")));
};
EditableInput.defaultProps = {
size: 'regular',
placeholder: '',
inputOptions: {}
};
var css_248z$s = ".editableChipInput-module-EditableChipInput-fDBaL-4-30-3 {\n position: relative;\n width: 100%;\n}\n\n.editableChipInput-module-EditableChipInput-fDBaL-4-30-3:focus-visible {\n outline: none;\n}\n.editableChipInput-module-EditableChipInput-default-ANzd8-4-30-3 {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n padding-left: var(--spacing-30);\n border-left: var(--border-width-2-5) solid transparent;\n min-height: var(--spacing-80);\n flex-wrap: wrap;\n border-radius: var(--border-radius-10);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n cursor: pointer;\n}\n\n.editableChipInput-module-EditableChipInput-default--small-xl1hZ-4-30-3 {\n min-height: var(--spacing-60);\n padding-left: var(--spacing-20);\n}\n\n.editableChipInput-module-EditableChipInput-defaultWithChips-L8I99-4-30-3 {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n padding-left: var(--spacing-20);\n border: var(--border-width-2-5) solid transparent;\n padding-top: var(--spacing-2-5);\n padding-bottom: var(--spacing-2-5);\n max-width: calc(100% - 28px);\n flex-wrap: wrap;\n border-radius: var(--border-radius-10);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n cursor: pointer;\n}\n\n.editableChipInput-module-EditableChipInput-defaultWithChips--small-BobGP-4-30-3 {\n min-height: var(--spacing-60);\n padding-top: 0;\n padding-bottom: 0;\n}\n\n.editableChipInput-module-EditableChipInput-defaultWithChips-L8I99-4-30-3:hover,\n.editableChipInput-module-EditableChipInput-default-ANzd8-4-30-3:hover {\n background-color: var(--secondary-lighter);\n box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-dark);\n}\n\n.editableChipInput-module-EditableChipInput-fDBaL-4-30-3:focus-visible .editableChipInput-module-EditableChipInput-default-ANzd8-4-30-3,\n.editableChipInput-module-EditableChipInput-fDBaL-4-30-3:focus-visible .editableChipInput-module-EditableChipInput-defaultWithChips-L8I99-4-30-3 {\n background: var(--white);\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary);\n}\n\n.editableChipInput-module-EditableChipInput-chipInput-5LAer-4-30-3 {\n padding-left: var(--spacing-20);\n}\n\n.editableChipInput-module-EditableChipInput-chip--regular-tu7Cr-4-30-3 {\n margin: var(--spacing-05);\n}\n\n.editableChipInput-module-EditableChipInput-chip--small-RrZ8t-4-30-3 {\n margin-left: var(--spacing-05);\n margin-right: var(--spacing-05);\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.editableChipInput-module-EditableChipInput-placeholder--small-p3kgo-4-30-3 {\n padding-top: 0;\n}\n\n.editableChipInput-module-EditableChipInput-actions-S7NrY-4-30-3 {\n position: absolute;\n display: flex;\n justify-content: flex-end;\n margin-top: var(--spacing-10);\n width: 100%;\n}\n";
var styles$r = {"EditableChipInput":"editableChipInput-module-EditableChipInput-fDBaL-4-30-3","EditableChipInput-default":"editableChipInput-module-EditableChipInput-default-ANzd8-4-30-3","EditableChipInput-default--small":"editableChipInput-module-EditableChipInput-default--small-xl1hZ-4-30-3","EditableChipInput-defaultWithChips":"editableChipInput-module-EditableChipInput-defaultWithChips-L8I99-4-30-3","EditableChipInput-defaultWithChips--small":"editableChipInput-module-EditableChipInput-defaultWithChips--small-BobGP-4-30-3","EditableChipInput-chipInput":"editableChipInput-module-EditableChipInput-chipInput-5LAer-4-30-3","EditableChipInput-chip--regular":"editableChipInput-module-EditableChipInput-chip--regular-tu7Cr-4-30-3","EditableChipInput-chip--small":"editableChipInput-module-EditableChipInput-chip--small-RrZ8t-4-30-3","EditableChipInput-placeholder--small":"editableChipInput-module-EditableChipInput-placeholder--small-p3kgo-4-30-3","EditableChipInput-actions":"editableChipInput-module-EditableChipInput-actions-S7NrY-4-30-3"};
styleInject(css_248z$s);
var _excluded$R = ["onChange", "chipOptions", "autoFocus", "disabled"],
_excluded2$3 = ["onClick"];
var EditableChipInput = function EditableChipInput(props) {
var placeholder = props.placeholder,
onChange = props.onChange,
className = props.className,
disableSaveAction = props.disableSaveAction,
chipInputOptions = props.chipInputOptions,
_props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size;
var onChipInputChange = chipInputOptions.onChange,
_chipInputOptions$chi = chipInputOptions.chipOptions,
chipOptions = _chipInputOptions$chi === void 0 ? {} : _chipInputOptions$chi,
autoFocusOption = chipInputOptions.autoFocus,
chipInputDisabled = chipInputOptions.disabled,
rest = _objectWithoutProperties(chipInputOptions, _excluded$R);
var _onClick = chipOptions.onClick,
chipObject = _objectWithoutProperties(chipOptions, _excluded2$3);
var _React$useState = React.useState(props.value),
_React$useState2 = _slicedToArray(_React$useState, 2),
inputValue = _React$useState2[0],
setInputValue = _React$useState2[1];
var _React$useState3 = React.useState(props.value),
_React$useState4 = _slicedToArray(_React$useState3, 2),
value = _React$useState4[0],
setValue = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
showComponent = _React$useState6[0],
setShowComponent = _React$useState6[1];
var baseProps = extractBaseProps(props);
var isWithChips = inputValue && inputValue.length;
var isControlled = props.value !== undefined;
React.useEffect(function () {
if (isControlled) {
setInputValue(props.value);
setValue(props.value);
}
}, [props.value]);
var classes = classnames(_defineProperty$1({}, styles$r['EditableChipInput'], true), className);
var actionClass = classnames(_defineProperty$1({}, styles$r['EditableChipInput-actions'], true));
var defaultClasses = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$r['EditableChipInput-default'], !isWithChips), styles$r['EditableChipInput-defaultWithChips'], isWithChips), styles$r['EditableChipInput-default--small'], !isWithChips && size === 'small'), styles$r['EditableChipInput-defaultWithChips--small'], isWithChips && size === 'small'));
var chipMarginClass = size === 'small' ? styles$r['EditableChipInput-chip--small'] : styles$r['EditableChipInput-chip--regular'];
var inputClass = classnames(_defineProperty$1({}, styles$r['EditableChipInput-chipInput'], true));
var onChipInputChangeHandler = function onChipInputChangeHandler(val) {
setInputValue(val);
if (onChipInputChange) onChipInputChange(val);
};
var setDefaultComponent = function setDefaultComponent(updatedValue) {
setInputValue(updatedValue);
setShowComponent(false);
};
var onSaveChanges = function onSaveChanges() {
if (!isControlled) setValue(inputValue);
if (onChange && inputValue) onChange(inputValue);
setDefaultComponent(inputValue);
};
var onChangeHandler = function onChangeHandler(eventType) {
switch (eventType) {
case 'edit':
{
setShowComponent(true);
break;
}
case 'hover':
{
break;
}
case 'default':
{
setShowComponent(false);
break;
}
}
};
var handleKeyDown = function handleKeyDown(event) {
if (chipInputDisabled) return;
if (!showComponent && (event.key === 'Enter' || isSpaceKey(event))) {
if (event.currentTarget !== event.target) return;
event.preventDefault();
if (event.repeat) return;
onChangeHandler('edit');
}
};
var handleClick = function handleClick() {
if (chipInputDisabled || showComponent) return;
onChangeHandler('edit');
};
var onChipDelete = function onChipDelete(index) {
if (value) {
var updatedValue = _toConsumableArray(value);
updatedValue.splice(index, 1);
if (!isControlled) {
setInputValue(updatedValue);
setValue(updatedValue);
}
if (onChange) onChange(updatedValue);
}
};
var renderDefaultState = function renderDefaultState() {
if (inputValue && inputValue.length) {
return inputValue.map(function (val, index) {
return /*#__PURE__*/React.createElement(Chip, _extends$2({
"data-test": "DesignSystem-EditableChipInput--Chip",
key: index,
name: val,
label: val,
size: size,
className: chipMarginClass
}, chipObject, {
onClose: function onClose() {
return onChipDelete(index);
},
onClick: function onClick() {
return _onClick && _onClick(val, index);
}
}));
});
}
return /*#__PURE__*/React.createElement(Text$1, {
className: size === 'small' ? styles$r['EditableChipInput-placeholder--small'] : 'pt-1',
size: size === 'small' ? 'small' : 'regular'
}, placeholder);
};
var renderChildren = function renderChildren() {
if (showComponent) {
return /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-EditableChipInput--wrapper"
}, /*#__PURE__*/React.createElement(ChipInput, _extends$2({
"data-test": "DesignSystem-EditableChipInput--ChipInput",
placeholder: placeholder,
onChange: onChipInputChangeHandler,
value: inputValue,
size: size,
disabled: chipInputDisabled,
chipOptions: chipOptions,
autoFocus: autoFocusOption !== null && autoFocusOption !== void 0 ? autoFocusOption : true
}, rest, {
className: inputClass
})));
}
return /*#__PURE__*/React.createElement("div", {
className: defaultClasses,
"data-test": "DesignSystem-EditableChipInput--Default"
}, renderDefaultState());
};
var ariaLabel = props['aria-label'];
var hasChips = inputValue && inputValue.length > 0;
var computedAriaLabel = ariaLabel || (hasChips ? "Click to edit. Current chips: ".concat(inputValue.join(', ')) : "Click to edit. ".concat(placeholder || 'Chip input'));
return /*#__PURE__*/React.createElement("div", _extends$2({
className: classes,
"data-test": "DesignSystem-EditableChipInput"
}, baseProps, {
onKeyDown: handleKeyDown,
onClick: handleClick,
role: showComponent ? undefined : 'button',
tabIndex: chipInputDisabled ? -1 : showComponent ? -1 : 0,
"aria-disabled": chipInputDisabled || undefined,
"aria-label": showComponent ? undefined : computedAriaLabel
}), /*#__PURE__*/React.createElement(Editable, {
onChange: onChangeHandler,
editing: showComponent
}, renderChildren()), showComponent && /*#__PURE__*/React.createElement("div", {
className: actionClass,
"data-test": "DesignSystem-EditableChipInput--Actions"
}, /*#__PURE__*/React.createElement(Button, {
"data-test": "DesignSystem-EditableChipInput--DiscardButton",
className: "mr-3",
size: "tiny",
onClick: function onClick() {
setDefaultComponent(value);
}
}, "Cancel"), /*#__PURE__*/React.createElement(Button, {
"data-test": "DesignSystem-EditableChipInput--SaveButton",
appearance: "primary",
size: "tiny",
disabled: disableSaveAction,
onClick: onSaveChanges
}, "Save")));
};
EditableChipInput.defaultProps = {
placeholder: '',
chipInputOptions: {}
};
var css_248z$r = ".progressRing-module-Ring-6kz7n-4-30-3 {\n transform: rotate(-90deg);\n}\n\n.progressRing-module-Ring--small-h-W58-4-30-3 {\n height: var(--spacing-40);\n width: var(--spacing-40);\n}\n\n.progressRing-module-Ring--regular-PU85S-4-30-3 {\n height: var(--spacing-80);\n width: var(--spacing-80);\n}\n\n.progressRing-module-Ring--large-2xhS6-4-30-3 {\n height: var(--spacing-120);\n width: var(--spacing-120);\n}\n\n.progressRing-module-Ring-6kz7n-4-30-3 Circle {\n fill: none;\n}\n\n.progressRing-module-Ring-background-Pxm3y-4-30-3 {\n stroke: var(--secondary-lightest);\n}\n\n.progressRing-module-Ring-indicator-OwMxU-4-30-3 {\n stroke: var(--primary);\n transition: var(--duration--slow-01) var(--standard-expressive-curve);\n}\n";
var styles$q = {"Ring":"progressRing-module-Ring-6kz7n-4-30-3","Ring--small":"progressRing-module-Ring--small-h-W58-4-30-3","Ring--regular":"progressRing-module-Ring--regular-PU85S-4-30-3","Ring--large":"progressRing-module-Ring--large-2xhS6-4-30-3","Ring-background":"progressRing-module-Ring-background-Pxm3y-4-30-3","Ring-indicator":"progressRing-module-Ring-indicator-OwMxU-4-30-3"};
styleInject(css_248z$r);
var ProgressRing = function ProgressRing(props) {
var size = props.size,
max = props.max,
value = props.value,
className = props.className,
ariaLabel = props['aria-label'],
ariaLabelledby = props['aria-labelledby'],
id = props.id;
var baseProps = extractBaseProps(props);
var radius = 20;
var circumference = 2 * Math.PI * radius;
var ProgressRingClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$q.Ring, true), styles$q["Ring--".concat(size)], size), className);
var svgProps = {
viewBox: '0 0 50 50'
};
var updatedValue = value > 0 ? Math.min(value, max) * 100 / max : 0;
var circleProps = {
cx: 25,
cy: 25,
r: radius,
fill: 'none',
strokeWidth: '8',
strokeDasharray: "".concat(circumference, " ").concat(circumference)
};
return /*#__PURE__*/React.createElement("svg", _extends$2({
"data-test": "DesignSystem-ProgressRing"
}, baseProps, {
className: ProgressRingClass
}, svgProps, {
id: id,
role: "progressbar",
"aria-valuemin": 0,
"aria-valuemax": max,
"aria-valuenow": Math.max(0, Math.min(value, max)),
"aria-label": ariaLabel || 'Progress Ring',
"aria-labelledby": ariaLabelledby
}), /*#__PURE__*/React.createElement("circle", _extends$2({
className: styles$q['Ring-background']
}, circleProps)), /*#__PURE__*/React.createElement("circle", _extends$2({
className: styles$q['Ring-indicator'],
strokeDashoffset: circumference - updatedValue / 100 * circumference
}, circleProps, {
"data-test": "DesignSystem-ProgressRing--Circle"
})));
};
ProgressRing.displayName = 'ProgressRing';
ProgressRing.defaultProps = {
size: 'regular',
max: 100
};
var css_248z$q = ".stepper-module-Stepper-2fHQy-4-30-3 {\n display: flex;\n}\n\n.stepper-module-Step-U1Ae--4-30-3 {\n display: flex;\n align-items: center;\n padding-left: var(--spacing-30);\n padding-right: var(--spacing-30);\n margin-left: var(--spacing-2-5);\n margin-right: var(--spacing-2-5);\n border-radius: var(--border-radius-40);\n cursor: pointer;\n}\n\n.stepper-module-Step-U1Ae--4-30-3:hover {\n background-color: var(--secondary);\n}\n\n.stepper-module-Step-U1Ae--4-30-3:active {\n background-color: var(--secondary-dark);\n}\n\n.stepper-module-Step-U1Ae--4-30-3:focus,\n.stepper-module-Step-U1Ae--4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n/* Completed State */\n\n.stepper-module-Step--completed-W1Ltb-4-30-3 {\n color: var(--primary-dark);\n}\n\n.stepper-module-Step--completed-W1Ltb-4-30-3:hover {\n background-color: var(--secondary);\n}\n\n.stepper-module-Step--completed-W1Ltb-4-30-3:active {\n background-color: var(--secondary-dark);\n}\n\n.stepper-module-Step--completed-W1Ltb-4-30-3:focus,\n.stepper-module-Step--completed-W1Ltb-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n/* Active State */\n\n.stepper-module-Step--active-OpxVe-4-30-3 {\n background-color: var(--primary-lightest);\n color: var(--primary-dark);\n transition-delay: var(--duration--fast-02);\n box-shadow: inset 0 0 0 var(--border-width-05) var(--primary);\n}\n\n.stepper-module-Step--active-OpxVe-4-30-3:hover {\n background-color: var(--primary-lighter);\n}\n\n.stepper-module-Step--active-OpxVe-4-30-3:focus,\n.stepper-module-Step--active-OpxVe-4-30-3:focus-visible {\n background-color: var(--primary-lightest);\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.stepper-module-Step--active-OpxVe-4-30-3:active {\n background-color: var(--primary-lighter);\n color: var(--primary-darker);\n}\n\n.stepper-module-Step--active-OpxVe-4-30-3:active .stepper-module-Stepper-text-1S78v-4-30-3 {\n color: var(--primary-darker);\n}\n\n/* Disabled State */\n\n.stepper-module-Step--disabled-2l-AC-4-30-3 {\n cursor: not-allowed;\n color: var(--inverse-lightest);\n pointer-events: none;\n}\n\n.stepper-module-Stepper-animate-Tgb9L-4-30-3 {\n transition-delay: var(--duration--fast-02);\n transition: var(--duration--fast-02) var(--standard-productive-curve);\n}\n";
var styles$p = {"Stepper":"stepper-module-Stepper-2fHQy-4-30-3","Step":"stepper-module-Step-U1Ae--4-30-3","Step--completed":"stepper-module-Step--completed-W1Ltb-4-30-3","Step--active":"stepper-module-Step--active-OpxVe-4-30-3","Stepper-text":"stepper-module-Stepper-text-1S78v-4-30-3","Step--disabled":"stepper-module-Step--disabled-2l-AC-4-30-3","Stepper-animate":"stepper-module-Stepper-animate-Tgb9L-4-30-3"};
styleInject(css_248z$q);
var Step$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
var label = props.label,
value = props.value,
disabled = props.disabled,
active = props.active,
completed = props.completed,
onChange = props.onChange,
onKeyDown = props.onKeyDown,
_props$isTabStop = props.isTabStop,
isTabStop = _props$isTabStop === void 0 ? false : _props$isTabStop,
stepIndex = props.stepIndex;
var StepClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$p['Step'], true), styles$p['Stepper-animate'], true), styles$p['Step--active'], active), styles$p['Step--disabled'], disabled), styles$p['Step--completed'], completed));
var IconClass = classnames(_defineProperty$1({
'mr-3 my-4': true
}, styles$p['Stepper-animate'], true));
var TextClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$p['Stepper-animate'], true), styles$p['Stepper-text'], true));
var onClickHandle = function onClickHandle() {
if (disabled) return;
if (onChange) onChange(label, value);
};
var onKeyDownHandler = function onKeyDownHandler(event) {
if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
return;
}
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
// Prevent auto-repeat: only process first keydown
if (event.repeat) return;
onClickHandle();
}
};
var textColor = active ? 'primary-dark' : disabled ? 'inverse-lightest' : 'inverse';
var stepLabel = label || "Step ".concat(stepIndex + 1);
var stateDescription = active ? ', current' : completed ? ', completed' : '';
var ariaLabel = "Step ".concat(stepIndex + 1, ": ").concat(stepLabel).concat(stateDescription);
return /*#__PURE__*/React.createElement("div", {
ref: ref,
"data-test": "DesignSystem-Step",
className: StepClass,
onKeyDown: function onKeyDown(e) {
return onKeyDownHandler(e);
},
onClick: onClickHandle,
tabIndex: disabled ? -1 : isTabStop ? 0 : -1,
role: "button",
"aria-label": ariaLabel,
"aria-disabled": disabled || undefined
}, /*#__PURE__*/React.createElement(Icon, {
"data-test": "DesignSystem-Step--Icon",
name: completed ? 'check_circle' : 'radio_button_unchecked',
className: IconClass
}), label && /*#__PURE__*/React.createElement(Text$1, {
weight: "medium",
color: textColor,
className: TextClass
}, label));
});
Step$1.displayName = 'Step';
var ARROW_NAV_KEYS = ['ArrowLeft', 'ArrowRight', 'Home', 'End'];
var Stepper = function Stepper(props) {
var steps = props.steps,
active = props.active,
completed = props.completed,
onChange = props.onChange,
className = props.className,
skipIndexes = props.skipIndexes;
var baseProps = extractBaseProps(props);
var stepRefs = React.useRef([]);
var onChangeHandler = function onChangeHandler(index, stepLabel, stepValue) {
if (onChange) onChange(index, completed, stepLabel, stepValue);
};
var getEnabledIndexes = function getEnabledIndexes() {
return steps.map(function (_, idx) {
var isSkipped = skipIndexes.includes(idx);
var activeStep = active === idx;
var disabled = !activeStep && !isSkipped && completed + 1 < idx;
return {
idx: idx,
disabled: disabled
};
}).filter(function (_ref) {
var disabled = _ref.disabled;
return !disabled;
}).map(function (_ref2) {
var idx = _ref2.idx;
return idx;
});
};
var handleStepKeyDown = function handleStepKeyDown(e, index) {
if (!ARROW_NAV_KEYS.includes(e.key)) return;
e.preventDefault();
var enabledIndexes = getEnabledIndexes();
var pos = enabledIndexes.indexOf(index);
if (pos === -1) return;
if (e.key === 'ArrowRight' && pos < enabledIndexes.length - 1) {
var _stepRefs$current$ena;
(_stepRefs$current$ena = stepRefs.current[enabledIndexes[pos + 1]]) === null || _stepRefs$current$ena === void 0 || _stepRefs$current$ena.focus();
} else if (e.key === 'ArrowLeft' && pos > 0) {
var _stepRefs$current$ena2;
(_stepRefs$current$ena2 = stepRefs.current[enabledIndexes[pos - 1]]) === null || _stepRefs$current$ena2 === void 0 || _stepRefs$current$ena2.focus();
} else if (e.key === 'Home') {
var _stepRefs$current$ena3;
(_stepRefs$current$ena3 = stepRefs.current[enabledIndexes[0]]) === null || _stepRefs$current$ena3 === void 0 || _stepRefs$current$ena3.focus();
} else if (e.key === 'End') {
var _stepRefs$current$ena4;
(_stepRefs$current$ena4 = stepRefs.current[enabledIndexes[enabledIndexes.length - 1]]) === null || _stepRefs$current$ena4 === void 0 || _stepRefs$current$ena4.focus();
}
};
var StepperClass = classnames(_defineProperty$1({}, styles$p['Stepper'], true), className);
var enabledIndexes = getEnabledIndexes();
var hasActiveStep = active >= 0 && active < steps.length;
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-Stepper"
}, baseProps, {
className: StepperClass,
role: "group",
"aria-label": "Steps"
}), steps.map(function (step, index) {
var label = step.label,
value = step.value;
var isSkipped = skipIndexes.includes(index);
var activeStep = active === index;
var completedStep = !isSkipped && completed >= index;
var disabled = !activeStep && !isSkipped && completed + 1 < index;
// For roving tabindex: active step gets tabIndex={0}, or first enabled if active is invalid/out-of-range
var isTabStop = activeStep || !hasActiveStep && index === enabledIndexes[0];
return /*#__PURE__*/React.createElement(Step$1, {
key: index,
ref: function ref(el) {
stepRefs.current[index] = el;
},
label: label,
value: value,
active: activeStep,
completed: completedStep,
disabled: disabled,
isTabStop: isTabStop,
stepIndex: index,
onChange: function onChange(steplabel, stepvalue) {
return onChangeHandler(index, steplabel, stepvalue);
},
onKeyDown: function onKeyDown(e) {
return handleStepKeyDown(e, index);
}
});
}));
};
Stepper.displayName = 'Stepper';
Stepper.defaultProps = {
completed: -1,
active: 0,
skipIndexes: []
};
var css_248z$p = ".dateRangePicker-module-DateRangePicker-XQroW-4-30-3 {\n display: flex;\n}\n\n.dateRangePicker-module-DateRangePicker--left-h3kfr-4-30-3 {\n flex-direction: row;\n}\n\n.dateRangePicker-module-DateRangePicker--right-0yzI--4-30-3 {\n flex-direction: row-reverse;\n}\n\n.dateRangePicker-module-DateRangePicker-input-OZjbS-4-30-3 {\n box-sizing: border-box;\n}\n\n.dateRangePicker-module-DateRangePicker-input--startDate-bwoAB-4-30-3 {\n padding-right: var(--spacing-10);\n}\n\n.dateRangePicker-module-DateRangePicker-input--endDate-kxZGI-4-30-3 {\n padding-left: var(--spacing-10);\n}\n\n@media (max-width: 576px) {\n .dateRangePicker-module-DateRangePicker--left-h3kfr-4-30-3,\n .dateRangePicker-module-DateRangePicker--right-0yzI--4-30-3 {\n flex-direction: column;\n }\n\n .dateRangePicker-module-DateRangePicker-input-OZjbS-4-30-3 {\n padding: 0;\n }\n\n .dateRangePicker-module-DateRangePicker-input--endDate-kxZGI-4-30-3 {\n padding-top: var(--spacing-20);\n }\n}\n";
var styles$o = {"DateRangePicker":"dateRangePicker-module-DateRangePicker-XQroW-4-30-3","DateRangePicker--left":"dateRangePicker-module-DateRangePicker--left-h3kfr-4-30-3","DateRangePicker--right":"dateRangePicker-module-DateRangePicker--right-0yzI--4-30-3","DateRangePicker-input":"dateRangePicker-module-DateRangePicker-input-OZjbS-4-30-3","DateRangePicker-input--startDate":"dateRangePicker-module-DateRangePicker-input--startDate-bwoAB-4-30-3","DateRangePicker-input--endDate":"dateRangePicker-module-DateRangePicker-input--endDate-kxZGI-4-30-3"};
styleInject(css_248z$p);
var _excluded$Q = ["label", "id", "onKeyDown"],
_excluded2$2 = ["label", "id", "onKeyDown"];
var Trigger = function Trigger(props) {
var inputFormat = props.inputFormat,
startInputOptions = props.startInputOptions,
endInputOptions = props.endInputOptions,
validators = props.validators,
state = props.state,
setState = props.setState,
startInputRef = props.startInputRef,
endInputRef = props.endInputRef,
onStartInputKeyDown = props.onStartInputKeyDown,
onEndInputKeyDown = props.onEndInputKeyDown,
onStartInputActivate = props.onStartInputActivate,
onEndInputActivate = props.onEndInputActivate;
var startInputIdRef = React.useRef("DesignSystem-DateRangePicker-startInput-".concat(uidGenerator()));
var endInputIdRef = React.useRef("DesignSystem-DateRangePicker-endInput-".concat(uidGenerator()));
var init = state.init,
startDate = state.startDate,
endDate = state.endDate,
startError = state.startError,
endError = state.endError;
var updateNav = function updateNav(type) {
if (type === 'start') {
var _getDateInfo = getDateInfo(startDate),
year = _getDateInfo.year,
month = _getDateInfo.month;
setState({
yearNav: year,
monthNav: month
});
}
if (type === 'end') {
var _getDateInfo2 = getDateInfo(endDate),
_year = _getDateInfo2.year,
_month = _getDateInfo2.month;
setState({
yearNav: _year,
monthNav: _month
});
}
};
var onPasteHandler = function onPasteHandler(_e, val, type) {
setState({
open: true
});
if (type === 'start') {
var placeholderChar = startInputOptions.placeholderChar || '_';
if (val && !val.includes(placeholderChar)) {
var d = translateToDate(inputFormat, val, validators);
if (d) {
setState({
startDate: d
});
if (endDate) {
var _getDateInfo3 = getDateInfo(endDate),
eYear = _getDateInfo3.year,
eMonth = _getDateInfo3.month,
eDate = _getDateInfo3.date;
if (compareDate(startDate, 'more', eYear, eMonth, eDate)) {
setState({
endDate: undefined
});
}
}
if (startInputOptions.onPaste) startInputOptions.onPaste(_e, val);
}
}
}
if (type === 'end') {
var _placeholderChar = endInputOptions.placeholderChar ? endInputOptions.placeholderChar : '_';
if (val && !val.includes(_placeholderChar)) {
var _d = translateToDate(inputFormat, val, validators);
if (_d) {
setState({
endDate: _d
});
if (endInputOptions.onPaste) endInputOptions.onPaste(_e, val);
}
}
}
};
var onChangeHandler = function onChangeHandler(_e, val, type) {
setState({
open: true
});
if (type === 'start') {
var placeholderChar = startInputOptions.placeholderChar || '_';
if (val && !val.includes(placeholderChar)) {
var d = translateToDate(inputFormat, val, validators);
if (d && !isNaN(d.getTime())) {
setState({
startDate: d
});
if (endDate) {
var _getDateInfo4 = getDateInfo(endDate),
eYear = _getDateInfo4.year,
eMonth = _getDateInfo4.month,
eDate = _getDateInfo4.date;
if (compareDate(startDate, 'more', eYear, eMonth, eDate)) {
setState({
endDate: undefined
});
}
}
}
}
}
if (type === 'end') {
var _placeholderChar2 = endInputOptions.placeholderChar ? endInputOptions.placeholderChar : '_';
if (val && !val.includes(_placeholderChar2)) {
var _d2 = translateToDate(inputFormat, val, validators);
if (_d2 && !isNaN(_d2.getTime())) setState({
endDate: _d2
});
}
}
};
var onBlurHandler = function onBlurHandler(_e, val, type) {
setState({
init: true
});
var hasNumber = /\d/;
if (type === 'start') {
var _startInputOptions$pl = startInputOptions.placeholderChar,
placeholderChar = _startInputOptions$pl === void 0 ? '_' : _startInputOptions$pl;
if (val && hasNumber.test(val) && val.includes(placeholderChar)) {
setState({
startError: true
});
} else if (val && !hasNumber.test(val) || !val) {
setState({
startError: false
});
}
if (!val || val.includes(placeholderChar)) setState({
startDate: undefined
});
}
if (type === 'end') {
var _endInputOptions$plac = endInputOptions.placeholderChar,
_placeholderChar3 = _endInputOptions$plac === void 0 ? '_' : _endInputOptions$plac;
if (val && hasNumber.test(val) && val.includes(_placeholderChar3)) {
setState({
endError: true
});
} else if (val && !hasNumber.test(val) || !val) {
setState({
endError: false
});
}
if (!val || val.includes(_placeholderChar3)) setState({
endDate: undefined
});
}
};
var onClearHandler = function onClearHandler(type) {
setState({
init: true
});
if (type === 'start') {
setState({
startDate: undefined
});
updateNav('end');
}
if (type === 'end') {
setState({
endDate: undefined
});
updateNav('start');
}
};
var onClickHandler = function onClickHandler(type) {
if (type === 'start') onStartInputActivate === null || onStartInputActivate === void 0 || onStartInputActivate();
if (type === 'end') onEndInputActivate === null || onEndInputActivate === void 0 || onEndInputActivate();
var open = state.open;
if (!open) {
updateNav(type);
}
};
var mask = date[inputFormat];
var startPlaceholderChar = startInputOptions.placeholderChar || '_';
var endPlaceholderChar = endInputOptions.placeholderChar || '_';
var showStartError = startInputOptions.error || startInputOptions.required && startError && init;
var showEndError = endInputOptions.error || endInputOptions.required && endError && init;
var startErrorMessage = startInputOptions.caption === undefined ? 'Invalid value' : startInputOptions.caption;
var endErrorMessage = endInputOptions.caption === undefined ? 'Invalid value' : endInputOptions.caption;
var startLabel = startInputOptions.label,
startIdOption = startInputOptions.id,
startOptionsKeyDown = startInputOptions.onKeyDown,
startInputRest = _objectWithoutProperties(startInputOptions, _excluded$Q);
var endLabel = endInputOptions.label,
endIdOption = endInputOptions.id,
endOptionsKeyDown = endInputOptions.onKeyDown,
endInputRest = _objectWithoutProperties(endInputOptions, _excluded2$2);
var startInputId = startIdOption || startInputIdRef.current;
var endInputId = endIdOption || endInputIdRef.current;
var inputValidator = function inputValidator(val) {
return isValid(validators, val, inputFormat);
};
var StartInputClassName = classnames(_defineProperty$1(_defineProperty$1({}, styles$o['DateRangePicker-input'], true), styles$o['DateRangePicker-input--startDate'], true));
var EndInputClassName = classnames(_defineProperty$1(_defineProperty$1({}, styles$o['DateRangePicker-input'], true), styles$o['DateRangePicker-input--endDate'], true));
return /*#__PURE__*/React.createElement(Row, {
"data-test": "DesignSystem-DateRangePicker-InputTrigger"
}, /*#__PURE__*/React.createElement(Column, {
size: '6',
sizeXS: '12',
className: StartInputClassName
}, startLabel && /*#__PURE__*/React.createElement(Label, {
required: startInputOptions.required,
withInput: true,
htmlFor: startInputId
}, startLabel), /*#__PURE__*/React.createElement(X, _extends$2({
icon: "events",
placeholder: inputFormat
}, startInputRest, {
id: startInputId,
label: startLabel,
ref: startInputRef,
mask: mask,
value: startDate ? translateToString(inputFormat, startDate) : init ? X.utils.getDefaultValue(mask, startPlaceholderChar) : '',
onChange: function onChange(e, val) {
onChangeHandler(e, val || '', 'start');
},
onPaste: function onPaste(e, val) {
onPasteHandler(e, val || '', 'start');
},
onBlur: function onBlur(e, val) {
onBlurHandler(e, val || '', 'start');
},
onKeyDown: function onKeyDown(e) {
// Consumer first so preventDefault can cancel picker Tab/ArrowDown focus moves.
startOptionsKeyDown === null || startOptionsKeyDown === void 0 || startOptionsKeyDown(e);
if (!e.defaultPrevented) {
onStartInputKeyDown === null || onStartInputKeyDown === void 0 || onStartInputKeyDown(e);
}
},
onClear: function onClear() {
return onClearHandler('start');
},
onClick: function onClick() {
return onClickHandler('start');
},
error: showStartError,
caption: showStartError ? startErrorMessage : '',
validators: [inputValidator],
clearOnEmptyBlur: true
}))), /*#__PURE__*/React.createElement(Column, {
size: '6',
sizeXS: '12',
className: EndInputClassName
}, endLabel && /*#__PURE__*/React.createElement(Label, {
required: endInputOptions.required,
withInput: true,
htmlFor: endInputId
}, endLabel), /*#__PURE__*/React.createElement(X, _extends$2({
icon: "events",
placeholder: inputFormat
}, endInputRest, {
id: endInputId,
label: endLabel,
ref: endInputRef,
mask: mask,
value: endDate ? translateToString(inputFormat, endDate) : init ? X.utils.getDefaultValue(mask, endPlaceholderChar) : '',
onChange: function onChange(e, val) {
onChangeHandler(e, val || '', 'end');
},
onPaste: function onPaste(e, val) {
onPasteHandler(e, val || '', 'end');
},
onBlur: function onBlur(e, val) {
onBlurHandler(e, val || '', 'end');
},
onKeyDown: function onKeyDown(e) {
// Consumer first so preventDefault can cancel picker Tab/ArrowDown focus moves.
endOptionsKeyDown === null || endOptionsKeyDown === void 0 || endOptionsKeyDown(e);
if (!e.defaultPrevented) {
onEndInputKeyDown === null || onEndInputKeyDown === void 0 || onEndInputKeyDown(e);
}
},
onClear: function onClear() {
return onClearHandler('end');
},
onClick: function onClick() {
return onClickHandler('end');
},
error: showEndError,
caption: showEndError ? endErrorMessage : '',
validators: [inputValidator],
clearOnEmptyBlur: true
}))));
};
var _excluded$P = ["id", "onKeyDown"];
var SingleInputTrigger = function SingleInputTrigger(props) {
var inputFormat = props.inputFormat,
inputOptions = props.inputOptions,
validators = props.validators,
state = props.state,
setState = props.setState,
inputRef = props.inputRef,
onInputKeyDown = props.onInputKeyDown;
var inputIdRef = React.useRef("DesignSystem-DateRangePicker-singleInput-".concat(uidGenerator()));
var init = state.init,
startDate = state.startDate,
endDate = state.endDate,
startValue = state.startValue,
endValue = state.endValue,
startError = state.startError,
endError = state.endError;
var mask = rangeDate[inputFormat];
var showError = inputOptions.error || inputOptions.required && (startError || endError) && init;
var errorMessage = inputOptions.caption === undefined ? 'Invalid value' : inputOptions.caption;
var label = inputOptions.label;
var _inputOptions$placeho = inputOptions.placeholderChar,
placeholderChar = _inputOptions$placeho === void 0 ? '_' : _inputOptions$placeho;
var defaultValue = X.utils.getDefaultValue(mask, placeholderChar).split(' - ');
var sValue = startValue || defaultValue[0];
var eValue = endValue || defaultValue[1];
var inputValidator = function inputValidator(val) {
var _val$split = val.split(' - '),
_val$split2 = _slicedToArray(_val$split, 2),
startVal = _val$split2[0],
endVal = _val$split2[1];
return isValid(validators, startVal, inputFormat) && isValid(validators, endVal, inputFormat);
};
var onPasteHandler = function onPasteHandler(_e, val) {
var onPaste = inputOptions.onPaste;
var date = val.split(' - ');
var startVal = date[0];
var endVal = date[1];
var endD = translateToDate(inputFormat, endVal, validators);
var startD = translateToDate(inputFormat, startVal, validators);
setState({
startDate: startD,
endDate: endD,
startValue: startVal,
endValue: endVal
});
if (onPaste) onPaste(_e, val);
};
var onChangeHandler = function onChangeHandler(_e, val) {
var date = val.split(' - ');
var startVal = date[0];
var endVal = date[1];
if (startValue !== startVal && startVal && !startVal.includes(placeholderChar)) {
var startD = translateToDate(inputFormat, startVal, validators);
if (startD) {
var isEndDateValid = endValue && !endValue.includes(placeholderChar);
setState({
startDate: startD,
endDate: isEndDateValid ? endDate : undefined
});
if (endDate) {
var _getDateInfo = getDateInfo(endDate),
eYear = _getDateInfo.year,
eMonth = _getDateInfo.month,
eDate = _getDateInfo.date;
if (compareDate(startDate, 'more', eYear, eMonth, eDate)) {
setState({
endDate: undefined
});
}
}
}
}
if (endValue !== endVal && endVal && !endVal.includes(placeholderChar)) {
var endD = translateToDate(inputFormat, endVal, validators);
var isStartDateValid = startValue && !startValue.includes(placeholderChar);
if (endD) {
setState({
endDate: endD,
startDate: isStartDateValid ? startDate : undefined
});
}
}
setState({
startValue: startVal,
endValue: endVal
});
};
var getErrorState = function getErrorState(currentVal, siblingVal) {
var hasNumber = /\d/;
if (currentVal && siblingVal && !currentVal.includes(placeholderChar) && siblingVal.includes(placeholderChar)) {
return true;
} else if (currentVal && hasNumber.test(currentVal) && currentVal.includes(placeholderChar)) {
return true;
} else if (currentVal && !hasNumber.test(currentVal) || !currentVal) {
return false;
}
return null;
};
var onBlurHandler = function onBlurHandler(_e, val) {
setState({
init: true
});
var date = val.split(' - ');
var startVal = date[0];
var endVal = date[1];
var startErr = getErrorState(startVal, endVal);
var endErr = getErrorState(endVal, startVal);
if (startErr !== null && endErr !== null) {
setState({
startError: startErr,
endError: endErr
});
}
if (!startVal || startVal.includes(placeholderChar)) setState({
startDate: undefined
});
if (!endVal || endVal.includes(placeholderChar)) setState({
endDate: undefined
});
};
var onClearHandler = function onClearHandler() {
setState({
init: true,
startDate: undefined,
endDate: undefined,
yearNav: undefined,
monthNav: undefined
});
};
var idOption = inputOptions.id,
optionsKeyDown = inputOptions.onKeyDown,
inputRest = _objectWithoutProperties(inputOptions, _excluded$P);
var inputId = idOption || inputIdRef.current;
return /*#__PURE__*/React.createElement(Row, {
"data-test": "DesignSystem-DateRangePicker-SingleInputTrigger"
}, /*#__PURE__*/React.createElement(Column, null, label && /*#__PURE__*/React.createElement(Label, {
required: inputOptions.required,
withInput: true,
htmlFor: inputId
}, label), /*#__PURE__*/React.createElement(X, _extends$2({
icon: "events",
placeholder: "".concat(inputFormat, " - ").concat(inputFormat)
}, inputRest, {
id: inputId,
label: label,
ref: inputRef,
mask: mask,
value: !startDate && !endDate && !init ? undefined : "".concat(sValue, " - ").concat(eValue),
onChange: function onChange(e, val) {
onChangeHandler(e, val || '');
},
onBlur: function onBlur(e, val) {
onBlurHandler(e, val || '');
},
onPaste: function onPaste(e, val) {
onPasteHandler(e, val || '');
},
onKeyDown: function onKeyDown(e) {
// Consumer first so preventDefault can cancel picker Tab/ArrowDown focus moves.
optionsKeyDown === null || optionsKeyDown === void 0 || optionsKeyDown(e);
if (!e.defaultPrevented) {
onInputKeyDown === null || onInputKeyDown === void 0 || onInputKeyDown(e);
}
},
onClear: onClearHandler,
error: showError,
caption: showError ? errorMessage : '',
validators: [inputValidator],
clearOnEmptyBlur: true
}))));
};
var setDate = function setDate(date) {
var d = new Date();
return new Date(d.setDate(date));
};
var getCurrentYear = function getCurrentYear() {
var current = new Date();
var currentYear = current.getFullYear();
return currentYear;
};
var getCurrentMonth = function getCurrentMonth() {
var current = new Date();
var currentMonth = current.getMonth();
return currentMonth;
};
var getCurrentWeek = function getCurrentWeek() {
var current = new Date();
var currentDate = current.getDate();
var currentDay = current.getDay();
return {
startDate: setDate(currentDate - currentDay + 1),
endDate: setDate(currentDate - currentDay + 7)
};
};
var getPreviousWeek = function getPreviousWeek() {
var current = new Date();
var currentDate = current.getDate();
var currentDay = current.getDay();
return {
startDate: setDate(currentDate - currentDay - 6),
endDate: setDate(currentDate - currentDay)
};
};
var getPreviousMonth = function getPreviousMonth() {
var current = new Date();
var currentYear = current.getFullYear();
var currentMonth = current.getMonth();
return {
endDate: new Date(currentYear, currentMonth, 0),
startDate: new Date(currentYear - +(currentMonth < 0), (currentMonth + 11) % 12, 1)
};
};
var getPrevious90Days = function getPrevious90Days() {
var current = new Date();
var currentDate = current.getDate();
return {
startDate: setDate(currentDate - 90),
endDate: setDate(currentDate)
};
};
var getCustomDates = function getCustomDates() {
return {
startDate: '',
endDate: ''
};
};
var _excluded$O = ["startDate", "endDate", "yearNav", "monthNav", "open", "inputFormat", "outputFormat", "startInputOptions", "endInputOptions", "validators", "withInput", "position", "disabledBefore", "disabledAfter", "onRangeChange", "rangeLimit"];
var DateRangePicker = /*#__PURE__*/function (_React$Component) {
function DateRangePicker(props) {
var _this;
_classCallCheck(this, DateRangePicker);
_this = _callSuper(this, DateRangePicker, [props]);
_defineProperty$1(_this, "monthsInView", void 0);
_defineProperty$1(_this, "startInputRef", /*#__PURE__*/React.createRef());
_defineProperty$1(_this, "endInputRef", /*#__PURE__*/React.createRef());
_defineProperty$1(_this, "singleInputRef", /*#__PURE__*/React.createRef());
_defineProperty$1(_this, "calendarContainerRef", /*#__PURE__*/React.createRef());
_defineProperty$1(_this, "lastFocusedInput", 'start');
_defineProperty$1(_this, "focusLastInput", function () {
var _ref$current;
var ref = _this.lastFocusedInput === 'end' ? _this.endInputRef : _this.lastFocusedInput === 'single' ? _this.singleInputRef : _this.startInputRef;
(_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus({
preventScroll: true
});
});
_defineProperty$1(_this, "focusCalendar", function () {
var root = _this.calendarContainerRef.current;
if (!root) return false;
var preferredDate = _this.lastFocusedInput === 'end' ? _this.state.endDate : _this.lastFocusedInput === 'start' ? _this.state.startDate : _this.state.startDate || _this.state.endDate;
var target = findFocusableCalendarCell(root, {
preferredAriaLabel: preferredDate ? formatDateAriaLabel(preferredDate) : undefined,
preferredSelectedIndex: _this.lastFocusedInput === 'end' ? 'last' : 'first'
});
if (!target) return false;
target.focus({
preventScroll: true,
focusVisible: true
});
return true;
});
_defineProperty$1(_this, "onInputKeyDown", function (input) {
return function (e) {
_this.lastFocusedInput = input;
if (!_this.state.open || e.defaultPrevented) return;
// Only prevent default when a focusable calendar cell exists (date/month/year views).
if (e.key === 'ArrowDown' || e.key === 'Tab' && !e.shiftKey) {
var root = _this.calendarContainerRef.current;
if (!root) return;
var preferredDate = input === 'end' ? _this.state.endDate : input === 'start' ? _this.state.startDate : _this.state.startDate || _this.state.endDate;
var target = findFocusableCalendarCell(root, {
preferredAriaLabel: preferredDate ? formatDateAriaLabel(preferredDate) : undefined,
preferredSelectedIndex: input === 'end' ? 'last' : 'first'
});
if (!target) return;
e.preventDefault();
requestAnimationFrame(function () {
target.focus({
preventScroll: true,
focusVisible: true
});
});
}
};
});
_defineProperty$1(_this, "getDate", function (startDate, endDate) {
var inputFormat = _this.props.inputFormat;
var startVal = startDate ? translateToString(inputFormat, startDate) : '';
var endVal = endDate ? translateToString(inputFormat, endDate) : '';
return {
startValue: startVal,
endValue: endVal
};
});
_defineProperty$1(_this, "getErrors", function (startDate, endDate) {
var isError = function isError(date) {
var _this$props = _this.props,
disabledBefore = _this$props.disabledBefore,
disabledAfter = _this$props.disabledAfter;
var _getDateInfo = getDateInfo(disabledBefore),
dbYear = _getDateInfo.year,
dbMonth = _getDateInfo.month,
dbDate = _getDateInfo.date;
var _getDateInfo2 = getDateInfo(disabledAfter),
daYear = _getDateInfo2.year,
daMonth = _getDateInfo2.month,
daDate = _getDateInfo2.date;
return !date ? false : compareDate(date, 'less', dbYear, dbMonth, dbDate) || compareDate(date, 'more', daYear, daMonth, daDate);
};
var startError = isError(startDate);
var endError = isError(endDate);
var _getDateInfo3 = getDateInfo(endDate),
eYear = _getDateInfo3.year,
eMonth = _getDateInfo3.month,
eDate = _getDateInfo3.date;
if (compareDate(startDate, 'more', eYear, eMonth, eDate)) {
startError = true;
endError = true;
}
return {
startError: startError,
endError: endError
};
});
_defineProperty$1(_this, "getInRangeError", function () {
var rangeLimit = _this.props.rangeLimit;
if (rangeLimit) {
var _this$state = _this.state,
startDate = _this$state.startDate,
endDate = _this$state.endDate;
var _getDateInfo4 = getDateInfo(startDate),
sYear = _getDateInfo4.year,
sMonth = _getDateInfo4.month,
sDate = _getDateInfo4.date;
var _getDateInfo5 = getDateInfo(endDate),
eYear = _getDateInfo5.year,
eMonth = _getDateInfo5.month,
eDate = _getDateInfo5.date;
var limitDate;
if (startDate) {
limitDate = new Date(startDate);
limitDate.setDate(sDate + rangeLimit);
return compareDate(limitDate, 'less', eYear, eMonth, eDate + 1);
}
if (endDate) {
limitDate = new Date(endDate);
limitDate.setDate(eDate - rangeLimit);
return compareDate(limitDate, 'more', sYear, sMonth, sDate - 1);
}
}
return false;
});
_defineProperty$1(_this, "onRangeChangeHandler", function (sDate, eDate) {
_this.setState({
init: true,
startDate: sDate,
endDate: eDate,
startValue: sDate ? translateToString(_this.props.inputFormat, sDate) : '',
endValue: eDate ? translateToString(_this.props.inputFormat, eDate) : ''
});
});
_defineProperty$1(_this, "onToggleHandler", function (o, type) {
var _this$props2 = _this.props,
singleInput = _this$props2.singleInput,
inputOptions = _this$props2.inputOptions,
startInputOptions = _this$props2.startInputOptions,
endInputOptions = _this$props2.endInputOptions;
var disabled = singleInput ? inputOptions.disabled : startInputOptions.disabled || endInputOptions.disabled;
if (disabled) return;
switch (type) {
case 'outsideClick':
case 'escapeKeypress':
_this.setState({
open: o
});
break;
case 'onClick':
{
// Only move focus when opening (closed → open). If already open (e.g. opened by typing),
// keep focus in the input so the user can reposition the caret / select text.
var shouldFocusCalendar = !_this.state.open;
_this.setState({
open: true
}, function () {
if (!shouldFocusCalendar) return;
requestAnimationFrame(function () {
requestAnimationFrame(function () {
_this.focusCalendar();
});
});
});
break;
}
}
});
var _inputFormat = props.inputFormat,
validators = props.validators;
var _startDate = convertToDate(props.startDate, _inputFormat, validators);
var _endDate = convertToDate(props.endDate, _inputFormat, validators);
var _this$getDate = _this.getDate(_startDate, _endDate),
startValue = _this$getDate.startValue,
endValue = _this$getDate.endValue;
var _this$getErrors = _this.getErrors(_startDate, _endDate),
_startError = _this$getErrors.startError,
_endError = _this$getErrors.endError;
_this.state = {
startDate: _startDate,
endDate: _endDate,
startValue: startValue,
endValue: endValue,
startError: _startError,
endError: _endError,
init: false,
open: props.open || false,
yearNav: props.yearNav,
monthNav: props.monthNav
};
_this.monthsInView = props.monthsInView || (props.withInput ? 2 : 1);
_this.lastFocusedInput = props.singleInput ? 'single' : 'start';
return _this;
}
_inherits(DateRangePicker, _React$Component);
return _createClass(DateRangePicker, [{
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
if (prevProps.startDate !== this.props.startDate) {
var _this$props3 = this.props,
inputFormat = _this$props3.inputFormat,
validators = _this$props3.validators;
var d = convertToDate(this.props.startDate, inputFormat, validators);
var val = translateToString(inputFormat, d);
this.setState({
startDate: d,
startValue: val
});
}
if (prevProps.endDate !== this.props.endDate) {
var _this$props4 = this.props,
_inputFormat2 = _this$props4.inputFormat,
_validators = _this$props4.validators;
var _d = convertToDate(this.props.endDate, _inputFormat2, _validators);
var _val = translateToString(_inputFormat2, _d);
this.setState({
endDate: _d,
endValue: _val
});
}
if (prevProps.open !== this.props.open) {
this.setState({
open: this.props.open || false
});
}
if (prevProps.yearNav !== this.props.yearNav) {
this.setState({
yearNav: this.props.yearNav
});
}
if (prevProps.monthNav !== this.props.monthNav) {
this.setState({
monthNav: this.props.monthNav
});
}
if (prevState.startDate !== this.state.startDate || prevState.endDate !== this.state.endDate) {
var _this$props5 = this.props,
onRangeChange = _this$props5.onRangeChange,
outputFormat = _this$props5.outputFormat;
var _this$state2 = this.state,
startDate = _this$state2.startDate,
endDate = _this$state2.endDate;
var _this$getErrors2 = this.getErrors(startDate, endDate),
startError = _this$getErrors2.startError,
endError = _this$getErrors2.endError;
this.setState({
startError: startError,
endError: endError
});
if (onRangeChange) {
var inRangeError = this.getInRangeError();
var sValue = translateToString(outputFormat, startDate);
var eValue = translateToString(outputFormat, endDate);
if (!inRangeError && !startError && !endError) {
if (this.props.allowReverseSelection) {
if (startDate && endDate) {
onRangeChange(startDate, endDate, sValue, eValue);
}
} else {
onRangeChange(startDate, endDate, sValue, eValue);
}
} else if (!this.props.allowReverseSelection) {
if (!startError) onRangeChange(startDate, undefined, sValue, eValue);else if (!endError) onRangeChange(undefined, endDate, sValue, eValue);else onRangeChange(undefined, undefined, sValue, eValue);
}
}
if (this.state.startDate && this.state.endDate) {
this.setState({
open: false
});
}
}
// Return focus to the last-used date input when the popover closes.
if (prevState.open && !this.state.open) {
var active = document.activeElement;
var calendarRoot = this.calendarContainerRef.current;
if (!active || active === document.body || calendarRoot && calendarRoot.contains(active)) {
this.focusLastInput();
}
}
}
}, {
key: "renderCalendar",
value: function renderCalendar() {
var _this$props6 = this.props;
_this$props6.startDate;
_this$props6.endDate;
_this$props6.yearNav;
_this$props6.monthNav;
_this$props6.open;
var inputFormat = _this$props6.inputFormat;
_this$props6.outputFormat;
_this$props6.startInputOptions;
_this$props6.endInputOptions;
var validators = _this$props6.validators;
_this$props6.withInput;
_this$props6.position;
var disabledBefore = _this$props6.disabledBefore,
disabledAfter = _this$props6.disabledAfter;
_this$props6.onRangeChange;
var rangeLimit = _this$props6.rangeLimit,
rest = _objectWithoutProperties(_this$props6, _excluded$O);
var _this$state3 = this.state,
startDate = _this$state3.startDate,
endDate = _this$state3.endDate,
yearNav = _this$state3.yearNav,
monthNav = _this$state3.monthNav;
return /*#__PURE__*/React.createElement(Calendar, _extends$2({}, rest, {
monthsInView: this.monthsInView,
rangePicker: true,
startDate: convertToDate(startDate, inputFormat, validators),
endDate: convertToDate(endDate, inputFormat, validators),
disabledBefore: convertToDate(disabledBefore, inputFormat, validators),
disabledAfter: convertToDate(disabledAfter, inputFormat, validators),
onRangeChange: this.onRangeChangeHandler,
yearNav: yearNav,
monthNav: monthNav,
rangeLimit: rangeLimit,
wrapperRef: this.calendarContainerRef
}));
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props7 = this.props,
withInput = _this$props7.withInput,
startInputOptions = _this$props7.startInputOptions,
endInputOptions = _this$props7.endInputOptions,
inputOptions = _this$props7.inputOptions,
inputFormat = _this$props7.inputFormat,
position = _this$props7.position,
validators = _this$props7.validators,
singleInput = _this$props7.singleInput,
contentAlign = _this$props7.contentAlign,
children = _this$props7.children,
ariaLabel = _this$props7['aria-label'],
ariaLabelledBy = _this$props7['aria-labelledby'];
var open = this.state.open;
var RangePickerClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$o['DateRangePicker'], true), styles$o["DateRangePicker--".concat(contentAlign)], contentAlign));
if (withInput) {
// React defaultProps do not deep-merge objects; restore default labels when callers
// pass a partial inputOptions/startInputOptions/endInputOptions object.
var defaults = DateRangePicker.defaultProps;
var resolvedSingleInputOptions = _objectSpread2(_objectSpread2({}, defaults.inputOptions), inputOptions);
var resolvedStartInputOptions = _objectSpread2(_objectSpread2({}, defaults.startInputOptions), startInputOptions);
var resolvedEndInputOptions = _objectSpread2(_objectSpread2({}, defaults.endInputOptions), endInputOptions);
var mergedSingleInputOptions = _objectSpread2(_objectSpread2(_objectSpread2({}, resolvedSingleInputOptions), resolvedSingleInputOptions['aria-label'] || ariaLabel ? {
'aria-label': resolvedSingleInputOptions['aria-label'] || ariaLabel
} : {}), resolvedSingleInputOptions['aria-labelledby'] || ariaLabelledBy ? {
'aria-labelledby': resolvedSingleInputOptions['aria-labelledby'] || ariaLabelledBy
} : {});
var mergedStartInputOptions = _objectSpread2(_objectSpread2(_objectSpread2({}, resolvedStartInputOptions), resolvedStartInputOptions['aria-label'] ? {
'aria-label': resolvedStartInputOptions['aria-label']
} : {}), resolvedStartInputOptions['aria-labelledby'] || ariaLabelledBy ? {
'aria-labelledby': resolvedStartInputOptions['aria-labelledby'] || ariaLabelledBy
} : {});
var mergedEndInputOptions = _objectSpread2(_objectSpread2(_objectSpread2({}, resolvedEndInputOptions), resolvedEndInputOptions['aria-label'] ? {
'aria-label': resolvedEndInputOptions['aria-label']
} : {}), resolvedEndInputOptions['aria-labelledby'] || ariaLabelledBy ? {
'aria-labelledby': resolvedEndInputOptions['aria-labelledby'] || ariaLabelledBy
} : {});
var trigger = singleInput ? /*#__PURE__*/React.createElement(SingleInputTrigger, {
inputFormat: inputFormat,
inputOptions: mergedSingleInputOptions,
validators: validators,
state: this.state,
setState: this.setState.bind(this),
inputRef: this.singleInputRef,
onInputKeyDown: this.onInputKeyDown('single')
}) : /*#__PURE__*/React.createElement(Trigger, {
inputFormat: inputFormat,
startInputOptions: mergedStartInputOptions,
endInputOptions: mergedEndInputOptions,
validators: validators,
state: this.state,
setState: this.setState.bind(this),
startInputRef: this.startInputRef,
endInputRef: this.endInputRef,
onStartInputKeyDown: this.onInputKeyDown('start'),
onEndInputKeyDown: this.onInputKeyDown('end'),
onStartInputActivate: function onStartInputActivate() {
_this2.lastFocusedInput = 'start';
},
onEndInputActivate: function onEndInputActivate() {
_this2.lastFocusedInput = 'end';
}
});
return /*#__PURE__*/React.createElement(Popover, {
trigger: trigger,
triggerClass: "w-100",
className: RangePickerClass,
position: position,
appendToBody: true,
open: open,
onToggle: this.onToggleHandler
}, children, this.renderCalendar());
}
return this.renderCalendar();
}
}]);
}(React.Component);
_defineProperty$1(DateRangePicker, "utils", {
getCurrentWeek: getCurrentWeek,
getPreviousWeek: getPreviousWeek,
getPreviousMonth: getPreviousMonth,
getPrevious90Days: getPrevious90Days,
getCustomDates: getCustomDates,
getCurrentYear: getCurrentYear,
getCurrentMonth: getCurrentMonth
});
_defineProperty$1(DateRangePicker, "defaultProps", _objectSpread2(_objectSpread2({}, Calendar.defaultProps), {}, {
children: /*#__PURE__*/React.createElement(React.Fragment, null),
contentAlign: 'left',
monthsInView: undefined,
position: 'bottom-start',
inputFormat: 'mm/dd/yyyy',
outputFormat: 'mm/dd/yyyy',
validators: [date$1],
inputOptions: {
label: 'Date'
},
startInputOptions: {
label: 'Start Date'
},
endInputOptions: {
label: 'End Date'
}
}));
var css_248z$o = "/* tabs */\n\n.tabs-module-TabsWrapper-WFui--4-30-3 {\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n}\n\n.tabs-module-TabsWrapper-header-psflk-4-30-3 {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n flex-direction: row;\n}\n\n.tabs-module-TabsWrapper-header--withSeparator-gbJ63-4-30-3 {\n border-bottom: var(--border);\n}\n\n.tabs-module-Tab-7anZt-4-30-3 {\n position: relative;\n display: flex;\n flex-direction: row;\n cursor: pointer;\n min-width: 40px;\n margin-bottom: calc(-1 * var(--spacing-2-5));\n text-align: center;\n}\n\n.tabs-module-Tab--small-t-Ovt-4-30-3 {\n padding: var(--spacing-20) var(--spacing-30) var(--spacing-30);\n}\n\n.tabs-module-Tab--regular-f2Pf2-4-30-3 {\n padding: var(--spacing-30) var(--spacing-30) var(--spacing-40);\n}\n\n.tabs-module-Tab--withIconRegular-k-DpQ-4-30-3 {\n padding-top: calc(var(--spacing-20) + var(--spacing-05));\n padding-bottom: calc(var(--spacing-20) + var(--spacing-15));\n padding-right: var(--spacing-15);\n padding-left: calc(var(--spacing-40) + var(--spacing-05));\n align-items: center;\n}\n\n.tabs-module-Tab--withIconSmall-vI4rb-4-30-3 {\n padding-top: var(--spacing-15);\n padding-bottom: calc(var(--spacing-20) + var(--spacing-05));\n padding-right: var(--spacing-15);\n padding-left: calc(var(--spacing-40) + var(--spacing-05));\n align-items: center;\n}\n\n.tabs-module-Tab-7anZt-4-30-3:last-child {\n margin-right: 0;\n}\n\n.tabs-module-Tab-7anZt-4-30-3::after {\n position: absolute;\n left: 0;\n bottom: 0;\n content: '';\n width: calc(100% - 2 * var(--spacing-30));\n height: var(--spacing-05);\n background-color: transparent;\n margin-left: var(--spacing-30);\n border-top-left-radius: var(--border-radius-2-5);\n border-top-right-radius: var(--border-radius-2-5);\n}\n\n.tabs-module-Tab--withDismissIcon-EExum-4-30-3::after {\n margin-left: calc(var(--spacing-40) + var(--spacing-05));\n}\n\n.tabs-module-Tab-7anZt-4-30-3:hover::after {\n background-color: var(--inverse-lighter);\n}\n\n.tabs-module-Tab-7anZt-4-30-3:active::after {\n background-color: var(--inverse-light);\n}\n\n.tabs-module-Tab--active-H398--4-30-3::after {\n background-color: var(--primary);\n}\n\n.tabs-module-Tab-7anZt-4-30-3:focus {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: 0;\n border-radius: var(--border-radius-10);\n}\n\n.tabs-module-Tab--active-H398--4-30-3:hover .tabs-module-Tab-selected-21aei-4-30-3 {\n color: var(--primary-dark);\n}\n\n.tabs-module-Tab-selected-21aei-4-30-3:hover::after {\n background-color: var(--primary-dark);\n}\n\n.tabs-module-Tab-7anZt-4-30-3:active:focus {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: 0;\n}\n\n.tabs-module-Tab--disabled-jMmkz-4-30-3 {\n cursor: not-allowed;\n}\n\n.tabs-module-Tab--disabled-jMmkz-4-30-3:focus {\n outline: none;\n}\n\n.tabs-module-Tab--disabled-jMmkz-4-30-3:hover::after {\n background-color: transparent;\n}\n\n.tabs-module-Tab-icon-s-gJG-4-30-3 {\n display: flex;\n min-width: inherit;\n justify-content: space-between;\n}\n\n.tabs-module-Tabs-oQ6zt-4-30-3 {\n display: flex;\n box-sizing: border-box;\n flex-direction: row;\n}\n\n.tabs-module-Tabs--withSeparator-ENZzj-4-30-3 {\n border-bottom: var(--border);\n}\n\n.tabs-module-Tab-pills-i0on--4-30-3 {\n cursor: pointer;\n margin-right: var(--spacing-20);\n overflow: visible;\n}\n\n.tabs-module-Tab-pills--disabled-7RUAZ-4-30-3 {\n opacity: var(--opacity-10);\n cursor: not-allowed;\n}\n\n.tabs-module-DismissibleRegularTab-icon--right-OeLKI-4-30-3 {\n padding: var(--spacing-10);\n outline: none;\n border-radius: var(--border-radius-full);\n}\n\n.tabs-module-DismissibleSmallTab-icon--right-03yfR-4-30-3 {\n padding: var(--spacing-15);\n outline: none;\n border-radius: var(--border-radius-full);\n}\n\n.tabs-module-DismissibleTab-icon--default-Jh5TO-4-30-3:focus-visible {\n outline: var(--spacing-05) solid var(--primary-focus);\n}\n\n.tabs-module-DismissibleTab-icon--default-Jh5TO-4-30-3:hover {\n background-color: var(--secondary);\n}\n\n.tabs-module-DismissibleTab-icon--default-Jh5TO-4-30-3:active {\n background-color: var(--secondary-dark);\n}\n\n.tabs-module-DismissibleTab-icon--selected-9Fyvu-4-30-3:focus-visible {\n outline: var(--spacing-05) solid var(--primary-focus);\n}\n\n.tabs-module-DismissibleTab-icon--selected-9Fyvu-4-30-3:hover {\n background-color: var(--primary-lighter);\n}\n\n.tabs-module-DismissibleTab-icon--selected-9Fyvu-4-30-3:active {\n background-color: var(--primary-light);\n}\n\n.tabs-module-Tab--overflow-ZMfp0-4-30-3 {\n display: flex;\n box-sizing: border-box;\n}\n\n@media (forced-colors: active) {\n /* Dismissible tab close icons have outline:none unconditionally — restore focus ring in forced-colors mode */\n .tabs-module-DismissibleRegularTab-icon--right-OeLKI-4-30-3:focus-visible,\n .tabs-module-DismissibleSmallTab-icon--right-03yfR-4-30-3:focus-visible {\n outline: var(--border-width-05) solid Highlight;\n }\n\n .tabs-module-Tab--active-H398--4-30-3::after {\n background-color: transparent;\n border-top: var(--spacing-05) solid Highlight;\n box-sizing: border-box;\n }\n\n /* Disabled tab pills use opacity — use GrayText instead */\n .tabs-module-Tab-pills--disabled-7RUAZ-4-30-3 {\n opacity: 1;\n color: GrayText;\n }\n}\n";
var styles$n = {"TabsWrapper":"tabs-module-TabsWrapper-WFui--4-30-3","TabsWrapper-header":"tabs-module-TabsWrapper-header-psflk-4-30-3","TabsWrapper-header--withSeparator":"tabs-module-TabsWrapper-header--withSeparator-gbJ63-4-30-3","Tab":"tabs-module-Tab-7anZt-4-30-3","Tab--small":"tabs-module-Tab--small-t-Ovt-4-30-3","Tab--regular":"tabs-module-Tab--regular-f2Pf2-4-30-3","Tab--withIconRegular":"tabs-module-Tab--withIconRegular-k-DpQ-4-30-3","Tab--withIconSmall":"tabs-module-Tab--withIconSmall-vI4rb-4-30-3","Tab--withDismissIcon":"tabs-module-Tab--withDismissIcon-EExum-4-30-3","Tab--active":"tabs-module-Tab--active-H398--4-30-3","Tab-selected":"tabs-module-Tab-selected-21aei-4-30-3","Tab--disabled":"tabs-module-Tab--disabled-jMmkz-4-30-3","Tab-icon":"tabs-module-Tab-icon-s-gJG-4-30-3","Tabs":"tabs-module-Tabs-oQ6zt-4-30-3","Tabs--withSeparator":"tabs-module-Tabs--withSeparator-ENZzj-4-30-3","Tab-pills":"tabs-module-Tab-pills-i0on--4-30-3","Tab-pills--disabled":"tabs-module-Tab-pills--disabled-7RUAZ-4-30-3","DismissibleRegularTab-icon--right":"tabs-module-DismissibleRegularTab-icon--right-OeLKI-4-30-3","DismissibleSmallTab-icon--right":"tabs-module-DismissibleSmallTab-icon--right-03yfR-4-30-3","DismissibleTab-icon--default":"tabs-module-DismissibleTab-icon--default-Jh5TO-4-30-3","DismissibleTab-icon--selected":"tabs-module-DismissibleTab-icon--selected-9Fyvu-4-30-3","Tab--overflow":"tabs-module-Tab--overflow-ZMfp0-4-30-3"};
styleInject(css_248z$o);
var tabsWrapperInstanceCounter = 0;
var TabsWrapper = function TabsWrapper(props) {
var _tabs$focusedIndex;
var children = props.children,
onTabChange = props.onTabChange,
className = props.className,
size = props.size;
var baseProps = extractBaseProps(props);
var tabs = Array.isArray(children) ? children : [children];
var totalTabs = tabs.length;
var tabsInstanceIdRef = React.useRef('');
if (!tabsInstanceIdRef.current) {
tabsWrapperInstanceCounter += 1;
tabsInstanceIdRef.current = "tabs-wrapper-".concat(tabsWrapperInstanceCounter);
}
var panelId = "".concat(tabsInstanceIdRef.current, "-panel");
var _React$useState = React.useState(props.active && props.active < totalTabs ? props.active : 0),
_React$useState2 = _slicedToArray(_React$useState, 2),
activeState = _React$useState2[0],
setActiveTab = _React$useState2[1];
var _React$useState3 = React.useState(props.active && props.active < totalTabs ? props.active : 0),
_React$useState4 = _slicedToArray(_React$useState3, 2),
focusedIndex = _React$useState4[0],
setFocusedIndex = _React$useState4[1];
var active = activeState < totalTabs ? activeState : 0;
React.useEffect(function () {
var nextActive = props.active && props.active < totalTabs ? props.active : 0;
setActiveTab(nextActive);
setFocusedIndex(nextActive);
}, [props.active]);
var firstEnabledIndex = tabs.findIndex(function (tab) {
return !tab.props.disabled;
});
var isFocusedIndexValid = focusedIndex >= 0 && focusedIndex < totalTabs && !((_tabs$focusedIndex = tabs[focusedIndex]) !== null && _tabs$focusedIndex !== void 0 && (_tabs$focusedIndex = _tabs$focusedIndex.props) !== null && _tabs$focusedIndex !== void 0 && _tabs$focusedIndex.disabled);
var rovingIndex = isFocusedIndexValid ? focusedIndex : firstEnabledIndex;
var wrapperClass = classnames(_defineProperty$1({}, styles$n['TabsWrapper'], true), className);
var headerClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$n['TabsWrapper-header'], true), styles$19['TabsWrapper-header'], true));
var tabClickHandler = function tabClickHandler(tabIndex) {
setActiveTab(tabIndex);
if (onTabChange) onTabChange(tabIndex);
};
var tabRefs = [];
var focusAdjacentTab = function focusAdjacentTab(fromIndex, direction) {
var nextIndex = (fromIndex + direction + totalTabs) % totalTabs;
for (var steps = 0; steps < totalTabs; steps += 1) {
if (!tabs[nextIndex].props.disabled) {
var _tabRefs$nextIndex;
(_tabRefs$nextIndex = tabRefs[nextIndex]) === null || _tabRefs$nextIndex === void 0 || _tabRefs$nextIndex.focus();
return;
}
nextIndex = (nextIndex + direction + totalTabs) % totalTabs;
}
};
var TabsHeader = tabs.map(function (child, index) {
var _child$props = child.props,
label = _child$props.label,
disabled = _child$props.disabled;
var tabHeaderClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$n['Tab'], true), styles$n['Tab--disabled'], disabled), styles$n['Tab--active'], !disabled && active === index), styles$n['Tab--regular'], size === 'regular'), styles$n['Tab--small'], size === 'small'));
return /*#__PURE__*/React.createElement("div", {
ref: function ref(element) {
tabRefs[index] = element;
},
"data-test": "DesignSystem-Tabs--Header",
key: index,
id: "".concat(tabsInstanceIdRef.current, "-tab-").concat(index),
className: tabHeaderClass,
onClick: function onClick() {
return !disabled && tabClickHandler(index);
},
onKeyDown: function onKeyDown(event) {
if (disabled) return;
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
tabClickHandler(index);
}
if (event.key === 'ArrowLeft') {
event.preventDefault();
focusAdjacentTab(index, -1);
}
if (event.key === 'ArrowRight') {
event.preventDefault();
focusAdjacentTab(index, 1);
}
},
onFocus: function onFocus() {
return !disabled && setFocusedIndex(index);
},
role: "tab",
tabIndex: disabled ? -1 : rovingIndex === index ? 0 : -1,
"aria-selected": active === index,
"aria-controls": panelId,
"aria-disabled": disabled || undefined
}, label);
});
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-TabsWrapper"
}, baseProps, {
className: wrapperClass
}), /*#__PURE__*/React.createElement("div", {
className: headerClass,
role: "tablist",
"aria-labelledby": props['aria-labelledby']
}, TabsHeader), /*#__PURE__*/React.createElement("div", {
className: styles$n['TabsWrapper-content'],
"data-test": "DesignSystem-Tabs--Content",
role: "tabpanel",
id: panelId,
"aria-labelledby": "".concat(tabsInstanceIdRef.current, "-tab-").concat(active)
}, tabs[active]));
};
TabsWrapper.displayName = 'TabsWrapper';
TabsWrapper.defaultProps = {
size: 'regular'
};
var Tab = function Tab(props) {
var children = props.children;
return /*#__PURE__*/React.createElement(React.Fragment, null, children);
};
Tab.displayName = 'Tab';
var getChildrenArray = function getChildrenArray(children) {
return Array.isArray(children) ? children : [children];
};
var filterTabs = function filterTabs(children) {
var childrenArray = getChildrenArray(children);
var tabs = childrenArray.filter(function (element) {
return typeof element.type === 'function' && element.type.name === Tab.name;
});
return tabs;
};
var filterInlineComponent = function filterInlineComponent(children) {
var childrenArray = getChildrenArray(children);
var inlineComponent = childrenArray.filter(function (element) {
return !(typeof element.type === 'function' && element.type.name === Tab.name);
});
return inlineComponent;
};
var tabsInstanceCounter = 0;
var Tabs = function Tabs(props) {
var children = props.children,
withSeparator = props.withSeparator,
onTabChange = props.onTabChange,
className = props.className,
headerClassName = props.headerClassName,
size = props.size,
maxWidth = props.maxWidth;
var baseProps = extractBaseProps(props);
var tabRefs = [];
var tabsInstanceIdRef = React.useRef('');
var tabs = children ? filterTabs(children) : props.tabs;
var inlineComponent = children ? filterInlineComponent(children) : /*#__PURE__*/React.createElement(React.Fragment, null);
var totalTabs = tabs.length;
if (!tabsInstanceIdRef.current) {
tabsInstanceCounter += 1;
tabsInstanceIdRef.current = "tabs-".concat(tabsInstanceCounter);
}
var panelId = "".concat(tabsInstanceIdRef.current, "-panel");
var _React$useState = React.useState(props.activeIndex && props.activeIndex < totalTabs ? props.activeIndex : 0),
_React$useState2 = _slicedToArray(_React$useState, 2),
activeIndex = _React$useState2[0],
setActiveTab = _React$useState2[1];
React.useEffect(function () {
if (props.activeIndex !== undefined && props.activeIndex < totalTabs) {
setActiveTab(props.activeIndex);
}
}, [props.activeIndex]);
var wrapperClass = classnames(_defineProperty$1({}, styles$n['TabsWrapper'], true), className);
var headerClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$n['TabsWrapper-header'], true), styles$19['TabsWrapper-header'], true), styles$n['TabsWrapper-header--withSeparator'], withSeparator), className, headerClassName);
var getPillsClass = function getPillsClass(disabled) {
return classnames(_defineProperty$1(_defineProperty$1({}, styles$n['Tab-pills'], true), styles$n['Tab-pills--disabled'], disabled));
};
var getActiveTabClass = function getActiveTabClass() {
var activeTab;
var activeTabClass;
if (tabs && tabs.length && tabs[activeIndex] && 'props' in tabs[activeIndex]) {
var _activeTab$props;
activeTab = tabs[activeIndex];
activeTabClass = (_activeTab$props = activeTab.props) === null || _activeTab$props === void 0 ? void 0 : _activeTab$props.className;
} else {
activeTab = tabs[activeIndex];
activeTabClass = activeTab && activeTab.className;
}
return activeTabClass;
};
var activeTabClass = getActiveTabClass();
var tabContentClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$n['TabsWrapper-content'], true), "".concat(activeTabClass), activeTabClass));
var tabClickHandler = function tabClickHandler(tabIndex) {
if (props.activeIndex === undefined) {
setActiveTab(tabIndex);
}
if (onTabChange) onTabChange(tabIndex);
};
var tabKeyDownHandler = function tabKeyDownHandler(event, tabIndex) {
if (event.key === 'Enter') {
tabClickHandler(tabIndex);
}
if (event.key === 'ArrowLeft' && tabIndex > 0) {
var prevElement = tabRefs[tabIndex - 1];
prevElement === null || prevElement === void 0 || prevElement.focus();
}
if (event.key === 'ArrowRight' && tabIndex < tabs.length) {
var nextElement = tabRefs[tabIndex + 1];
nextElement === null || nextElement === void 0 || nextElement.focus();
}
};
var renderInfo = function renderInfo(tab, index) {
var _ref = tab,
count = _ref.count,
icon = _ref.icon,
disabled = _ref.disabled,
iconType = _ref.iconType;
if (count !== undefined) {
return /*#__PURE__*/React.createElement(Pills, {
"data-test": "DesignSystem-Tabs--Pills",
className: getPillsClass(disabled),
appearance: activeIndex === index ? 'primary' : 'secondary'
}, count);
}
var iconClass = classnames(_defineProperty$1({}, styles$n['Tab-selected'], !disabled && activeIndex === index));
if (icon) {
var iconAppearance = activeIndex === index ? 'info' : disabled ? 'disabled' : 'subtle';
return /*#__PURE__*/React.createElement(Icon, {
"data-test": "DesignSystem-Tabs--Icon",
className: "mr-4 ".concat(iconClass),
name: icon,
type: iconType,
appearance: iconAppearance
});
}
return null;
};
var renderDismissIcon = function renderDismissIcon(tab, index, onDismiss) {
var _ref2 = tab,
disabled = _ref2.disabled,
label = _ref2.label;
var iconAppearance = activeIndex === index ? 'info' : disabled ? 'disabled' : 'subtle';
var dismissIconClass = function dismissIconClass(disabled) {
return classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$n["DismissibleRegularTab-icon--right"], size === 'regular'), styles$n["DismissibleSmallTab-icon--right"], size === 'small'), styles$n['DismissibleTab-icon--default'], !disabled && activeIndex !== index), styles$n["DismissibleTab-icon--selected"], !disabled && activeIndex === index), 'cursor-pointer', !disabled), styles$n['Tab-selected'], !disabled && activeIndex === index));
};
var tabInfo = {
label: label,
activeIndex: activeIndex,
currentTabIndex: index
};
var onCloseHandler = function onCloseHandler(e) {
e.stopPropagation();
if (onDismiss) onDismiss(tabInfo);
};
return /*#__PURE__*/React.createElement(Icon, {
"data-test": "DesignSystem-DismissibleTabs--Icon",
name: "clear",
appearance: iconAppearance,
"aria-label": label ? "Close ".concat(label, " tab") : 'Close tab',
className: dismissIconClass(disabled),
onClick: !disabled ? onCloseHandler : undefined,
tabIndex: disabled ? -1 : 0,
size: size === 'regular' ? 16 : 12
});
};
var renderTab = function renderTab(tab, index) {
var elementRef = /*#__PURE__*/React.createRef();
var _ref3 = tab,
_ref3$label = _ref3.label,
label = _ref3$label === void 0 ? '' : _ref3$label,
disabled = _ref3.disabled,
isDismissible = _ref3.isDismissible,
_ref3$onDismiss = _ref3.onDismiss,
onDismiss = _ref3$onDismiss === void 0 ? function () {} : _ref3$onDismiss;
if (typeof label !== 'string') {
return label;
}
var textAppearance = activeIndex === index ? 'link' : disabled ? 'disabled' : 'subtle';
var tabTextClass = classnames(_defineProperty$1(_defineProperty$1({}, 'ellipsis--noWrap', true), styles$n['Tab-selected'], !disabled && activeIndex === index));
var tabClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$n['Tab--regular'], size === 'regular' && !isDismissible), styles$n['Tab--small'], size === 'small' && !isDismissible), styles$n['Tab--overflow'], true), styles$n['Tab--withIconRegular'], isDismissible && size === 'regular'), styles$n['Tab--withIconSmall'], isDismissible && size === 'small'));
return /*#__PURE__*/React.createElement(Tooltip, {
showOnTruncation: true,
tooltip: label,
elementRef: elementRef,
triggerClass: "ellipsis--noWrap flex-grow-0"
}, /*#__PURE__*/React.createElement("span", {
className: tabClass,
"data-test": "DesignSystem-Tabs--TextWrapper",
style: {
maxWidth: maxWidth
}
}, renderInfo(tab, index), /*#__PURE__*/React.createElement(Text$1, {
"data-test": "DesignSystem-Tabs--Text",
appearance: textAppearance,
className: tabTextClass,
ref: elementRef
}, label), isDismissible && renderDismissIcon(tab, index, onDismiss)));
};
var renderTabs = tabs.map(function (tab, index) {
var currentTabProp = children && 'props' in tab ? tab.props : tab;
var disabled = currentTabProp.disabled,
label = currentTabProp.label,
isDismissible = currentTabProp.isDismissible;
var tabHeaderClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$n['Tab'], true), styles$n['Tab--disabled'], disabled), styles$n['Tab--active'], !disabled && activeIndex === index), styles$n['Tab-selected'], !disabled && activeIndex === index), 'align-items-center', true), styles$n['Tab--regular'], size === 'regular' && typeof label !== 'string'), styles$n['Tab--small'], size === 'small' && typeof label !== 'string'), styles$n['Tab--withDismissIcon'], isDismissible));
return /*#__PURE__*/React.createElement("div", {
ref: function ref(element) {
return element && !disabled && tabRefs.push(element);
},
"data-test": "DesignSystem-Tabs--Tab",
key: index,
className: tabHeaderClass,
onClick: function onClick() {
return !disabled && tabClickHandler(index);
},
onKeyDown: function onKeyDown(event) {
return tabKeyDownHandler(event, index);
},
tabIndex: disabled ? -1 : 0,
role: "tab",
id: "".concat(tabsInstanceIdRef.current, "-tab-").concat(index),
"aria-selected": !disabled && activeIndex === index,
"aria-controls": children ? panelId : undefined,
"aria-disabled": disabled || undefined,
"aria-label": typeof label === 'string' ? label : undefined
}, renderTab(currentTabProp, index));
});
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-Tabs"
}, baseProps, {
className: wrapperClass
}), /*#__PURE__*/React.createElement("div", {
className: headerClass,
"data-test": "DesignSystem-Tabs--Header",
role: "tablist",
"aria-labelledby": props['aria-labelledby']
}, renderTabs, inlineComponent), children && /*#__PURE__*/React.createElement("div", {
className: tabContentClass,
"data-test": "DesignSystem-Tabs--Content",
role: "tabpanel",
id: panelId,
"aria-labelledby": "".concat(tabsInstanceIdRef.current, "-tab-").concat(activeIndex)
}, tabs[activeIndex]));
};
Tabs.displayName = 'Tabs';
Tabs.defaultProps = {
withSeparator: true,
tabs: [],
size: 'regular',
maxWidth: 'var(--spacing-640)'
};
var accepts = function accepts(file, acceptedFiles) {
if (file && acceptedFiles) {
var acceptedFilesArray = Array.isArray(acceptedFiles) ? acceptedFiles : acceptedFiles.split(',');
var fileName = file.name || '';
var mimeType = (file.type || '').toLowerCase();
var baseMimeType = mimeType.replace(/\/.*$/, '');
if (!mimeType) {
return true;
}
return acceptedFilesArray.some(function (type) {
var validType = type.trim().toLowerCase();
if (validType.charAt(0) === '.') {
return fileName.toLowerCase().endsWith(validType);
}
if (validType.endsWith('/*')) {
return baseMimeType === validType.replace(/\/.*$/, '');
}
return mimeType === validType;
});
}
return true;
};
var isPropagationStopped = function isPropagationStopped(event) {
if (typeof event.isPropagationStopped === 'function') {
return event.isPropagationStopped();
}
if (typeof event.cancelBubble !== 'undefined') {
return event.cancelBubble;
}
return false;
};
var isEvtWithFiles = function isEvtWithFiles(event) {
if (!event.dataTransfer) {
return !!event.target && !!event.target.files;
}
return Array.prototype.some.call(event.dataTransfer.types, function (type) {
return type === 'Files' || type === 'application/x-moz-file';
});
};
var onDocumentDragOver = function onDocumentDragOver(event) {
event.preventDefault();
};
var composeEventHandlers = function composeEventHandlers() {
for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
fns[_key] = arguments[_key];
}
return function (event) {
for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
args[_key2 - 1] = arguments[_key2];
}
return fns.some(function (fn) {
if (!isPropagationStopped(event) && fn) {
fn.apply(void 0, [event].concat(args));
}
return isPropagationStopped(event);
});
};
};
var reducer = function reducer(state, action) {
switch (action.type) {
case 'focus':
return _objectSpread2(_objectSpread2({}, state), {}, {
isFocused: true
});
case 'blur':
return _objectSpread2(_objectSpread2({}, state), {}, {
isFocused: false
});
case 'openDialog':
return _objectSpread2(_objectSpread2({}, state), {}, {
isFileDialogActive: true
});
case 'closeDialog':
return _objectSpread2(_objectSpread2({}, state), {}, {
isFileDialogActive: false
});
case 'setDraggedFiles':
/* eslint no-case-declarations: 0 */
var isDragActive = action.isDragActive,
draggedFiles = action.draggedFiles;
return _objectSpread2(_objectSpread2({}, state), {}, {
draggedFiles: draggedFiles,
isDragActive: isDragActive
});
case 'setFiles':
return _objectSpread2(_objectSpread2({}, state), {}, {
acceptedFiles: action.acceptedFiles,
fileRejections: action.fileRejections
});
case 'reset':
return _objectSpread2(_objectSpread2({}, state), {}, {
isFileDialogActive: false,
isDragActive: false,
draggedFiles: [],
acceptedFiles: [],
fileRejections: []
});
default:
return state;
}
};
var fileErrorMessages = {
FILE_INVALID_TYPE: 'File format not accepted',
FILE_TOO_LARGE: 'File is too large',
FILE_TOO_SMALL: 'File is too small',
TOO_MANY_FILES: 'Multiple files are not accepted'
};
var isDefined = function isDefined(value) {
return value !== undefined && value !== null;
};
var getInvalidTypeRejectionErr = function getInvalidTypeRejectionErr(accept) {
var updatedAccept = Array.isArray(accept) && accept.length === 1 ? accept[0] : accept;
var messageSuffix = Array.isArray(updatedAccept) ? "one of ".concat(updatedAccept.join(', ')) : updatedAccept;
return {
type: 'FILE_INVALID_TYPE',
message: "File type must be ".concat(messageSuffix)
};
};
var getTooLargeRejectionErr = function getTooLargeRejectionErr(maxSize) {
return {
type: 'FILE_TOO_LARGE',
message: "File is larger than ".concat(maxSize, " bytes")
};
};
var getTooSmallRejectionErr = function getTooSmallRejectionErr(minSize) {
return {
type: 'FILE_TOO_SMALL',
message: "File is smaller than ".concat(minSize, " bytes")
};
};
var fileAccepted = function fileAccepted(file, accept) {
var isAcceptable = file.type === 'application/x-moz-file' || accepts(file, accept);
return [isAcceptable, isAcceptable ? null : getInvalidTypeRejectionErr(accept)];
};
var fileMatchSize = function fileMatchSize(file, minSize, maxSize) {
if (isDefined(file.size)) {
if (isDefined(minSize) && isDefined(maxSize)) {
if (file.size > maxSize) return [false, getTooLargeRejectionErr(maxSize)];
if (file.size < minSize) return [false, getTooSmallRejectionErr(minSize)];
} else if (isDefined(minSize) && file.size < minSize) {
return [false, getTooSmallRejectionErr(minSize)];
} else if (isDefined(maxSize) && file.size > maxSize) {
return [false, getTooLargeRejectionErr(maxSize)];
}
}
return [true, null];
};
var getFileError = function getFileError(options) {
var files = options.files,
accept = options.accept,
minSize = options.minSize,
maxSize = options.maxSize,
multiple = options.multiple;
if (!multiple && files.length > 1) {
return 'TOO_MANY_FILES';
}
var typeError = files.every(function (file) {
var _fileAccepted = fileAccepted(file, accept),
_fileAccepted2 = _slicedToArray(_fileAccepted, 1),
accepted = _fileAccepted2[0];
return !accepted;
});
var sizeError = files.every(function (file) {
var _fileMatchSize = fileMatchSize(file, minSize, maxSize),
_fileMatchSize2 = _slicedToArray(_fileMatchSize, 1),
sizeMatch = _fileMatchSize2[0];
return !sizeMatch;
});
return typeError ? 'FILE_INVALID_TYPE' : sizeError ? 'FILE_TOO_LARGE' : '';
};
var allFilesAccepted = function allFilesAccepted(options) {
var files = options.files,
accept = options.accept,
minSize = options.minSize,
maxSize = options.maxSize,
multiple = options.multiple;
if (!multiple && files.length > 1) {
return false;
}
return files.every(function (file) {
var _fileAccepted3 = fileAccepted(file, accept),
_fileAccepted4 = _slicedToArray(_fileAccepted3, 1),
accepted = _fileAccepted4[0];
var _fileMatchSize3 = fileMatchSize(file, minSize, maxSize),
_fileMatchSize4 = _slicedToArray(_fileMatchSize3, 1),
sizeMatch = _fileMatchSize4[0];
return accepted && sizeMatch;
});
};
var COMMON_MIME_TYPES = new Map([
// image
['gif', 'image/gif'], ['ico', 'image/x-icon'], ['jpeg', 'image/jpeg'], ['jpg', 'image/jpeg'], ['png', 'image/png'], ['bmp', 'image/bmp'], ['tif', 'image/tiff'], ['tiff', 'image/tiff'], ['apng', 'image/apng'], ['avif', 'image/avif'], ['jfif', 'image/jpeg'], ['pjpeg', 'image/pjpeg'], ['pjp', 'image/jpeg'], ['svg', 'image/svg+xml'], ['webp', 'image/webp'], ['cur', 'image/x-win-bitmap'], ['MTS', 'model/vnd.mts'],
// Video
['roq', 'video'], ['f4a', 'video'], ['f4b', 'video'], ['drc', 'video'], ['nsv', 'video'], ['avi', 'video/x-msvideo'], ['mkv', 'video/x-matroska'], ['mov', 'video/quicktime'], ['mp4', 'video/mp4'], ['webm', 'video/webm'], ['flv', 'video/x-flv'], ['vob', 'video/x-ms-vob'], ['ogv', 'video/ogg'], ['ogg', 'application/ogg'], ['gifv', 'image/gif'], ['mng', 'video/x-mng'], ['M2TS', 'video/MP2T'], ['TS', 'video/mp2t'], ['qt', 'video/quicktime'], ['wmv', 'video/x-ms-wmv'], ['yuv', 'application/octet-stream'], ['rm', 'application/vnd.rn-realmedia'], ['rmvb', 'application/vnd.rn-realmedia-vbr'], ['viv', 'video/vnd.vivo'], ['asf', 'video/x-ms-asf'], ['amv', 'video/x-amv'], ['m4v', 'video/x-m4v'], ['mpg', 'video/mpeg'], ['mpeg', 'video/mpeg'], ['mpe', 'video/mpeg'], ['mpv', 'video/mpv'], ['m2v', 'video/mpeg'], ['svi', 'video/x-msvideo'], ['3gp', 'video/3gpp'], ['3g2', 'video/3gpp2'], ['mxf', 'application/mxf'], ['flv', 'video/x-flv'], ['f4v', 'video/x-f4v'], ['f4p', 'video/mp4'],
// audio
['aa', 'audio'], ['aax', 'audio'], ['act', 'audio'], ['alac', 'audio'], ['ape', 'audio'], ['awb', 'audio'], ['dss', 'audio'], ['dvf', 'audio'], ['iklax', 'audio'], ['ivs', 'audio'], ['msv', 'audio'], ['nmf', 'audio'], ['mogg', 'audio'], ['raw', 'audio'], ['rf64', 'audio'], ['sln', 'audio'], ['wv', 'audio'], ['8svx', 'audio'], ['3gp', 'audio/3gpp'], ['mp2', 'audio/mpeg'], ['aac', 'audio/x-aac'], ['aiff', 'audio/x-aiff'], ['amr', 'audio/amr'], ['au', 'audio/basic'], ['flac', 'audio/x-flac'], ['gsm', 'audio/gsm'], ['m4a', 'audio/mp4a-latm'], ['m4b', 'audio/mp4a-latm'], ['m4p', 'audio/mp4a-latm'], ['mmf', 'application/vnd.smaf'], ['mp3', 'audio/mpeg'], ['ogg', 'audio/ogg'], ['oga', 'audio/ogg'], ['opus', 'audio/opus'], ['tta', 'audio/x-tta'], ['voc', 'audio/x-voice'], ['wav', 'audio/x-wav'], ['wma', 'audio/x-ms-wma'], ['webm', 'audio/webm'], ['cda ', 'application/x-cdf'], ['ra', 'audio/x-pn-realaudio'], ['vox', 'application/x-authorware-bin'], ['rm', 'application/vnd.rn-realmedia'], ['mpc', 'application/vnd.mophun.certificate'],
// docs
['pdf', 'application/pdf'], ['zip', 'application/zip'], ['doc', 'application/msword'], ['docx', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'], ['xlss', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'], ['xlsx', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'], ['xls', 'application/vnd.ms-excel'], ['odt', 'application/vnd.oasis.opendocument.text'], ['tex', 'application/x-tex'], ['wpd', 'application/wordperfect'], ['ods', 'application/vnd.oasis.opendocument.spreadsheet'], ['csv', 'text/csv'], ['rtf', 'text/rtf'], ['txt', 'text/plain'], ['tsv', 'text/tab-separated-values']]);
var FILES_TO_IGNORE = ['.DS_Store', 'Thumbs.db'];
function fromEvent(_x) {
return _fromEvent.apply(this, arguments);
}
function _fromEvent() {
_fromEvent = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(evt) {
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
return _context2.abrupt("return", isDragEvt(evt) && evt.dataTransfer ? getDataTransferFiles(evt.dataTransfer, evt.type) : getInputFiles(evt));
case 1:
case "end":
return _context2.stop();
}
}, _callee2);
}));
return _fromEvent.apply(this, arguments);
}
function isDragEvt(value) {
return !!value.dataTransfer;
}
function toFileWithPath(file, path) {
var f = withMimeType(file);
if (typeof f.path !== 'string') {
var _ref = file,
webkitRelativePath = _ref.webkitRelativePath;
Object.defineProperty(f, 'path', {
value: typeof path === 'string' ? path : typeof webkitRelativePath === 'string' && webkitRelativePath.length > 0 ? webkitRelativePath : file.name,
writable: false,
configurable: false,
enumerable: true
});
}
return f;
}
function withMimeType(file) {
var name = file.name;
var hasExtension = name && name.lastIndexOf('.') !== -1;
if (hasExtension && !file.type) {
var ext = name.split('.').pop().toLowerCase();
var type = COMMON_MIME_TYPES.get(ext);
if (type) {
Object.defineProperty(file, 'type', {
value: type,
writable: false,
configurable: false,
enumerable: true
});
}
}
return file;
}
function getInputFiles(evt) {
var files = isInput(evt.target) ? evt.target.files ? fromList(evt.target.files) : [] : [];
return files.map(function (file) {
return toFileWithPath(file);
});
}
function isInput(value) {
return value !== null;
}
function getDataTransferFiles(_x2, _x3) {
return _getDataTransferFiles.apply(this, arguments);
}
function _getDataTransferFiles() {
_getDataTransferFiles = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(dt, type) {
var items, files;
return _regeneratorRuntime().wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
if (!dt.items) {
_context3.next = 8;
break;
}
items = fromList(dt.items).filter(function (item) {
return item.kind === 'file';
});
if (!(type !== 'drop')) {
_context3.next = 4;
break;
}
return _context3.abrupt("return", items);
case 4:
_context3.next = 6;
return Promise.all(items.map(toFilePromises));
case 6:
files = _context3.sent;
return _context3.abrupt("return", noIgnoredFiles(flatten(files)));
case 8:
return _context3.abrupt("return", noIgnoredFiles(fromList(dt.files).map(function (file) {
return toFileWithPath(file);
})));
case 9:
case "end":
return _context3.stop();
}
}, _callee3);
}));
return _getDataTransferFiles.apply(this, arguments);
}
function noIgnoredFiles(files) {
return files.filter(function (file) {
return FILES_TO_IGNORE.indexOf(file.name) === -1;
});
}
function fromList(items) {
var files = [];
// tslint:disable: prefer-for-of
for (var i = 0; i < items.length; i++) {
var file = items[i];
files.push(file);
}
return files;
}
function toFilePromises(item) {
if (typeof item.webkitGetAsEntry !== 'function') {
return fromDataTransferItem(item);
}
var entry = item.webkitGetAsEntry();
if (entry && entry.isDirectory) {
return fromDirEntry(entry);
}
return fromDataTransferItem(item);
}
function flatten(items) {
return items.reduce(function (acc, files) {
return [].concat(_toConsumableArray(acc), _toConsumableArray(Array.isArray(files) ? flatten(files) : [files]));
}, []);
}
function fromDataTransferItem(item) {
var file = item.getAsFile();
if (!file) {
return Promise.reject("".concat(item, " is not a File"));
}
var fwp = toFileWithPath(file);
return Promise.resolve(fwp);
}
function fromEntry(_x4) {
return _fromEntry.apply(this, arguments);
}
function _fromEntry() {
_fromEntry = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4(entry) {
return _regeneratorRuntime().wrap(function _callee4$(_context4) {
while (1) switch (_context4.prev = _context4.next) {
case 0:
return _context4.abrupt("return", entry.isDirectory ? fromDirEntry(entry) : fromFileEntry(entry));
case 1:
case "end":
return _context4.stop();
}
}, _callee4);
}));
return _fromEntry.apply(this, arguments);
}
function fromDirEntry(entry) {
var reader = entry.createReader();
return new Promise(function (resolve, reject) {
var entries = [];
function readEntries() {
reader.readEntries(/*#__PURE__*/function () {
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(batch) {
var files, items;
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (batch.length) {
_context.next = 13;
break;
}
_context.prev = 1;
_context.next = 4;
return Promise.all(entries);
case 4:
files = _context.sent;
resolve(files);
_context.next = 11;
break;
case 8:
_context.prev = 8;
_context.t0 = _context["catch"](1);
reject(_context.t0);
case 11:
_context.next = 16;
break;
case 13:
items = Promise.all(batch.map(fromEntry));
entries.push(items);
// Continue reading
readEntries();
case 16:
case "end":
return _context.stop();
}
}, _callee, null, [[1, 8]]);
}));
return function (_x5) {
return _ref2.apply(this, arguments);
};
}(), function (err) {
reject(err);
});
}
readEntries();
});
}
function fromFileEntry(_x6) {
return _fromFileEntry.apply(this, arguments);
}
function _fromFileEntry() {
_fromFileEntry = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5(entry) {
return _regeneratorRuntime().wrap(function _callee5$(_context5) {
while (1) switch (_context5.prev = _context5.next) {
case 0:
return _context5.abrupt("return", new Promise(function (resolve, reject) {
entry.file(function (file) {
var fwp = toFileWithPath(file, entry.fullPath);
resolve(fwp);
}, function (err) {
reject(err);
});
}));
case 1:
case "end":
return _context5.stop();
}
}, _callee5);
}));
return _fromFileEntry.apply(this, arguments);
}
var _excluded$N = ["refKey", "onKeyDown", "onFocus", "onBlur", "onClick", "onDragEnterCallback", "onDragOverCallback", "onDragLeaveCallback", "onDropCallback"],
_excluded2$1 = ["refKey", "onChange", "onClick"];
var initialState = {
isFocused: false,
isFileDialogActive: false,
isDragActive: false,
isDragAccept: false,
isDragReject: false,
draggedFiles: [],
acceptedFiles: [],
fileRejections: []
};
var DropzoneBase = function DropzoneBase(props) {
var accept = props.accept,
disabled = props.disabled,
maxSize = props.maxSize,
minSize = props.minSize,
multiple = props.multiple,
onDragEnter = props.onDragEnter,
onDragLeave = props.onDragLeave,
onDragOver = props.onDragOver,
onDrop = props.onDrop,
onDropAccepted = props.onDropAccepted,
onDropRejected = props.onDropRejected,
onFileDialogCancel = props.onFileDialogCancel,
getFilesFromEvent = props.getFilesFromEvent,
preventDropOnDocument = props.preventDropOnDocument,
validator = props.validator;
var rootRef = useRef(null);
var inputRef = useRef(null);
var _useReducer = useReducer(reducer, initialState),
_useReducer2 = _slicedToArray(_useReducer, 2),
state = _useReducer2[0],
dispatch = _useReducer2[1];
var isFocused = state.isFocused,
isFileDialogActive = state.isFileDialogActive,
draggedFiles = state.draggedFiles;
var openFileDialog = useCallback(function () {
if (inputRef.current) {
dispatch({
type: 'openDialog'
});
inputRef.current.value = '';
inputRef.current.click();
}
}, [dispatch]);
var onWindowFocus = function onWindowFocus() {
if (isFileDialogActive) {
setTimeout(function () {
if (inputRef.current) {
var files = inputRef.current.files;
if (!files || !files.length) {
dispatch({
type: 'closeDialog'
});
if (typeof onFileDialogCancel === 'function') {
onFileDialogCancel();
}
}
}
}, 300);
}
};
useEffect$2(function () {
window.addEventListener('focus', onWindowFocus, false);
return function () {
window.removeEventListener('focus', onWindowFocus, false);
};
}, [inputRef, isFileDialogActive, onFileDialogCancel]);
// Cb to open the file dialog when SPACE/ENTER occurs on the dropzone root
var onKeyDownCb = useCallback(function (event) {
if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {
return;
}
if (isEnterKey(event) || isSpaceKey(event)) {
event.preventDefault();
openFileDialog();
}
}, [openFileDialog]);
// Update focus state for the dropzone
var onFocusCb = useCallback(function () {
dispatch({
type: 'focus'
});
}, []);
var onBlurCb = useCallback(function () {
dispatch({
type: 'blur'
});
}, []);
var dragTargetsRef = useRef([]);
var onDocumentDrop = function onDocumentDrop(event) {
// Not every event target type is element so we have to check if it is.
if (event.target instanceof HTMLDivElement && rootRef.current && rootRef.current.contains(event.target)) {
return;
}
event.preventDefault();
dragTargetsRef.current = [];
};
useEffect$2(function () {
if (preventDropOnDocument) {
document.addEventListener('dragover', onDocumentDragOver, false);
document.addEventListener('drop', onDocumentDrop, false);
}
return function () {
if (preventDropOnDocument) {
document.removeEventListener('dragover', onDocumentDragOver);
document.removeEventListener('drop', onDocumentDrop);
}
};
}, [rootRef, preventDropOnDocument]);
var onDragEnterCb = useCallback(function (event) {
event.preventDefault();
event.persist();
dragTargetsRef.current = [].concat(_toConsumableArray(dragTargetsRef.current), [event.target]);
if (isEvtWithFiles(event)) {
Promise.resolve(getFilesFromEvent(event)).then(function (files) {
if (isPropagationStopped(event)) {
return;
}
dispatch({
draggedFiles: files,
isDragActive: true,
type: 'setDraggedFiles'
});
if (onDragEnter) {
onDragEnter(event);
}
});
}
}, [getFilesFromEvent, onDragEnter]);
var onDragOverCb = useCallback(function (event) {
event.preventDefault();
event.persist();
if (event.dataTransfer) {
try {
event.dataTransfer.dropEffect = 'copy';
} catch (_unused) {} /* eslint-disable-line no-empty */
}
if (isEvtWithFiles(event) && onDragOver) {
onDragOver(event);
}
return false;
}, [onDragOver]);
var onDragLeaveCb = useCallback(function (event) {
event.preventDefault();
event.persist();
var targets = dragTargetsRef.current.filter(function (target) {
return rootRef.current && rootRef.current.contains(target);
});
var targetIdx = targets.indexOf(event.target);
if (targetIdx !== -1) {
targets.splice(targetIdx, 1);
}
dragTargetsRef.current = targets;
if (targets.length > 0) {
return;
}
dispatch({
isDragActive: false,
type: 'setDraggedFiles',
draggedFiles: []
});
if (isEvtWithFiles(event) && onDragLeave) {
onDragLeave(event);
}
}, [rootRef, onDragLeave]);
var onDropCb = useCallback(function (event) {
event.preventDefault();
// Persist here because we need the event later after getFilesFromEvent() is done
event.persist();
dragTargetsRef.current = [];
if (isEvtWithFiles(event)) {
Promise.resolve(getFilesFromEvent(event)).then(function (files) {
if (isPropagationStopped(event)) {
return;
}
var acceptedFiles = [];
var fileRejections = [];
files.forEach(function (file) {
var _fileAccepted = fileAccepted(file, accept),
_fileAccepted2 = _slicedToArray(_fileAccepted, 2),
accepted = _fileAccepted2[0],
acceptError = _fileAccepted2[1];
var _fileMatchSize = fileMatchSize(file, minSize, maxSize),
_fileMatchSize2 = _slicedToArray(_fileMatchSize, 2),
sizeMatch = _fileMatchSize2[0],
sizeError = _fileMatchSize2[1];
var customErrors = validator ? validator(file) : null;
if (accepted && sizeMatch && !customErrors) {
acceptedFiles.push(file);
} else {
var errors = [acceptError, sizeError];
if (customErrors) {
errors = errors.concat(customErrors);
}
var filteredErrors = errors.filter(function (e) {
return e;
});
fileRejections.push({
file: file,
errors: filteredErrors
});
}
});
dispatch({
acceptedFiles: acceptedFiles,
fileRejections: fileRejections,
type: 'setFiles'
});
if (onDrop) {
onDrop(event, acceptedFiles, fileRejections);
}
if (fileRejections.length > 0 && onDropRejected) {
onDropRejected(event, fileRejections);
}
if (acceptedFiles.length > 0 && onDropAccepted) {
onDropAccepted(event, acceptedFiles);
}
});
}
dispatch({
type: 'reset'
});
}, [multiple, accept, minSize, maxSize, getFilesFromEvent, onDrop, onDropAccepted, onDropRejected]);
var composeDragHandler = function composeDragHandler(fn) {
return disabled ? null : fn;
};
var getRootProps = useMemo(function () {
return function () {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref$refKey = _ref.refKey,
refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey;
_ref.onKeyDown;
_ref.onFocus;
_ref.onBlur;
_ref.onClick;
var onDragEnterCallback = _ref.onDragEnterCallback,
onDragOverCallback = _ref.onDragOverCallback,
onDragLeaveCallback = _ref.onDragLeaveCallback,
onDropCallback = _ref.onDropCallback,
rest = _objectWithoutProperties(_ref, _excluded$N);
return _objectSpread2(_defineProperty$1({
onDragEnter: composeDragHandler(composeEventHandlers(onDragEnterCallback, onDragEnterCb)),
onDragOver: composeDragHandler(composeEventHandlers(onDragOverCallback, onDragOverCb)),
onDragLeave: composeDragHandler(composeEventHandlers(onDragLeaveCallback, onDragLeaveCb)),
onDrop: composeDragHandler(composeEventHandlers(onDropCallback, onDropCb))
}, refKey, rootRef), rest);
};
}, [rootRef, onKeyDownCb, onFocusCb, onBlurCb, onDragEnterCb, onDragOverCb, onDragLeaveCb, onDropCb, disabled]);
var onInputElementClick = useCallback(function (event) {
event.stopPropagation();
}, []);
var getInputProps = useMemo(function () {
return function () {
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref2$refKey = _ref2.refKey,
refKey = _ref2$refKey === void 0 ? 'ref' : _ref2$refKey,
onChange = _ref2.onChange,
onClick = _ref2.onClick,
rest = _objectWithoutProperties(_ref2, _excluded2$1);
var inputProps = _defineProperty$1({
accept: accept,
multiple: multiple,
type: 'file',
style: {
display: 'none'
},
onChange: composeDragHandler(composeEventHandlers(onChange, onDropCb)),
onClick: composeDragHandler(composeEventHandlers(onClick, onInputElementClick)),
autoComplete: 'off',
tabIndex: -1
}, refKey, inputRef);
return _objectSpread2(_objectSpread2({}, inputProps), rest);
};
}, [inputRef, accept, multiple, onDropCb, disabled]);
var fileCount = draggedFiles.length;
var isDragAccept = fileCount > 0 && allFilesAccepted({
accept: accept,
minSize: minSize,
maxSize: maxSize,
multiple: multiple,
files: draggedFiles
});
var isDragReject = fileCount > 0 && !isDragAccept;
var fileError = isDragReject ? getFileError({
accept: accept,
minSize: minSize,
maxSize: maxSize,
multiple: multiple,
files: draggedFiles
}) : '';
return _objectSpread2(_objectSpread2({}, state), {}, {
isDragAccept: isDragAccept,
isDragReject: isDragReject,
getRootProps: getRootProps,
getInputProps: getInputProps,
rootRef: rootRef,
inputRef: inputRef,
draggedFiles: draggedFiles,
fileError: fileError,
isFocused: isFocused && !disabled,
open: composeDragHandler(openFileDialog)
});
};
DropzoneBase.displayName = 'DropzoneBase';
DropzoneBase.defaultProps = {
disabled: false,
getFilesFromEvent: fromEvent,
maxSize: Infinity,
minSize: 0,
multiple: true,
preventDropOnDocument: true,
validator: function validator() {
return null;
}
};
var css_248z$n = ".dropzone-module-Dropzone-srOnly-DLkEf-4-30-3 {\n position: absolute;\n width: var(--spacing-2-5);\n height: var(--spacing-2-5);\n padding: 0;\n margin: calc(-1 * var(--spacing-2-5));\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n.dropzone-module-Dropzone-xfBzQ-4-30-3 {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--white);\n border-radius: var(--border-radius-10);\n width: 100%;\n background-image: linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%);\n background-position: top, right, bottom, left;\n background-repeat: repeat-x, repeat-y;\n background-size: var(--spacing-40) var(--spacing-2-5), var(--spacing-2-5) var(--spacing-40);\n transition: background-color var(--duration--moderate-01) var(--standard-productive-curve);\n box-sizing: border-box;\n}\n\n.dropzone-module-Dropzone--active-M0Gcb-4-30-3 {\n background-color: var(--primary-lightest);\n background-image: linear-gradient(to right, var(--primary) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(var(--primary) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(to right, var(--primary) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(var(--primary) 50%, rgba(255, 255, 255, 0) 0%);\n background-position: top, right, bottom, left;\n background-repeat: repeat-x, repeat-y;\n background-size: var(--spacing-40) var(--spacing-2-5), var(--spacing-2-5) var(--spacing-40);\n transition: background-color var(--duration--moderate-01) var(--standard-productive-curve);\n box-sizing: border-box;\n}\n\n.dropzone-module-Dropzone-animation-qJQVf-4-30-3 {\n animation-delay: var(--duration--fast-02);\n animation-fill-mode: forwards;\n}\n\n.dropzone-module-Dropzone-animation--default-cuelA-4-30-3 {\n animation: dropzone-module-dropzoneDefault-5MWv4-4-30-3 var(--duration--moderate-01) var(--entrance-productive-curve);\n}\n\n.dropzone-module-Dropzone-animation--active-AlfVM-4-30-3 {\n animation: dropzone-module-dropzoneActive-DcbqH-4-30-3 var(--duration--moderate-01) var(--entrance-productive-curve);\n}\n\n@keyframes dropzone-module-dropzoneDefault-5MWv4-4-30-3 {\n from {\n opacity: 0;\n padding-top: 20px;\n }\n\n to {\n opacity: 1;\n padding-top: var(--spacing-30);\n }\n}\n\n@keyframes dropzone-module-dropzoneActive-DcbqH-4-30-3 {\n from {\n opacity: 0;\n padding-top: 20px;\n }\n\n to {\n opacity: 1;\n padding-top: var(--spacing-30);\n }\n}\n\n.dropzone-module-Dropzone-standard--default-HMghu-4-30-3 {\n animation: dropzone-module-dropzoneStandardDefault-YIUej-4-30-3 var(--duration--moderate-01) var(--entrance-productive-curve);\n}\n\n.dropzone-module-Dropzone-standard--active-8ZfF7-4-30-3 {\n animation: dropzone-module-dropzoneStandardActive-ZiJ-w-4-30-3 var(--duration--moderate-01) var(--entrance-productive-curve);\n}\n\n@keyframes dropzone-module-dropzoneStandardDefault-YIUej-4-30-3 {\n from {\n opacity: 0;\n padding-top: var(--spacing-40);\n }\n\n to {\n opacity: 1;\n padding-top: var(--spacing-20);\n }\n}\n\n@keyframes dropzone-module-dropzoneStandardActive-ZiJ-w-4-30-3 {\n from {\n opacity: 0;\n padding-top: var(--spacing-40);\n }\n\n to {\n opacity: 1;\n padding-top: var(--spacing-20);\n }\n}\n\n.dropzone-module-Dropzone--error-wcuXz-4-30-3 {\n background: var(--alert-lightest);\n background-image: linear-gradient(to right, var(--alert) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(var(--alert) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(to right, var(--alert) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(var(--alert) 50%, rgba(255, 255, 255, 0) 0%);\n background-position: top, right, bottom, left;\n background-repeat: repeat-x, repeat-y;\n background-size: var(--spacing-40) var(--spacing-2-5), var(--spacing-2-5) var(--spacing-40);\n}\n\n.dropzone-module-Dropzone--disabled-Z-6tQ-4-30-3 {\n background-image: linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%);\n background-position: top, right, bottom, left;\n background-repeat: repeat-x, repeat-y;\n background-size: var(--spacing-40) var(--spacing-2-5), var(--spacing-2-5) var(--spacing-40);\n}\n\n.dropzone-module-Dropzone--standard-BLqgV-4-30-3 {\n flex-direction: column;\n height: 196px;\n min-width: 480px;\n padding: var(--spacing-20) var(--spacing-60) var(--spacing-40) var(--spacing-60);\n}\n\n.dropzone-module-Dropzone--compressed-REqQ2-4-30-3 {\n flex-direction: row;\n height: 124px;\n min-width: 400px;\n padding: var(--spacing-30) var(--spacing-60) var(--spacing-40) var(--spacing-60);\n}\n\n.dropzone-module-Dropzone--tight--XZ-s-4-30-3 {\n height: 124px;\n min-width: 320px;\n padding: var(--spacing-30) var(--spacing-60) var(--spacing-40) var(--spacing-60);\n}\n\n.dropzone-module-DropzoneWrapper-sLmKQ-4-30-3 {\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n.dropzone-module-DropzoneWrapper--standard-0fW8S-4-30-3,\n.dropzone-module-DropzoneWrapper--tight-Cg0sm-4-30-3 {\n align-items: center;\n}\n\n.dropzone-module-DropzoneWrapper--compressed-UKNax-4-30-3 {\n align-items: start;\n}\n\n.dropzone-module-Dropzone-icon--standard-Nv5eM-4-30-3 {\n margin-bottom: var(--spacing-30);\n}\n\n.dropzone-module-Dropzone-icon--compressed-lcmwS-4-30-3 {\n margin-right: var(--spacing-60);\n}\n\n.dropzone-module-Dropzone-icon--disabled-8nN-d-4-30-3 {\n fill: var(--inverse-lightest);\n}\n\n.dropzone-module-Dropzone-icon--default-mwP9a-4-30-3 {\n fill: var(--inverse-lighter);\n}\n\n.dropzone-module-Dropzone-icon--active-qPLXO-4-30-3 {\n fill: var(--primary);\n}\n\n.dropzone-module-Dropzone-icon--error-ImiCw-4-30-3 {\n fill: var(--alert);\n}\n\n@media (forced-colors: active) {\n .dropzone-module-Dropzone-xfBzQ-4-30-3 {\n border: var(--border-width-05) dashed ButtonText;\n background-image: none;\n background-color: Canvas;\n }\n\n .dropzone-module-Dropzone--active-M0Gcb-4-30-3 {\n border: var(--border-width-05) dashed Highlight;\n background-image: none;\n background-color: Canvas;\n }\n\n .dropzone-module-Dropzone--error-wcuXz-4-30-3 {\n border: var(--border-width-05) dashed ButtonText;\n background-image: none;\n }\n\n .dropzone-module-Dropzone--disabled-Z-6tQ-4-30-3 {\n border: var(--border-width-05) dashed GrayText;\n background-image: none;\n }\n}\n";
var styles$m = {"Dropzone-srOnly":"dropzone-module-Dropzone-srOnly-DLkEf-4-30-3","Dropzone":"dropzone-module-Dropzone-xfBzQ-4-30-3","Dropzone--active":"dropzone-module-Dropzone--active-M0Gcb-4-30-3","Dropzone-animation":"dropzone-module-Dropzone-animation-qJQVf-4-30-3","Dropzone-animation--default":"dropzone-module-Dropzone-animation--default-cuelA-4-30-3","dropzoneDefault":"dropzone-module-dropzoneDefault-5MWv4-4-30-3","Dropzone-animation--active":"dropzone-module-Dropzone-animation--active-AlfVM-4-30-3","dropzoneActive":"dropzone-module-dropzoneActive-DcbqH-4-30-3","Dropzone-standard--default":"dropzone-module-Dropzone-standard--default-HMghu-4-30-3","dropzoneStandardDefault":"dropzone-module-dropzoneStandardDefault-YIUej-4-30-3","Dropzone-standard--active":"dropzone-module-Dropzone-standard--active-8ZfF7-4-30-3","dropzoneStandardActive":"dropzone-module-dropzoneStandardActive-ZiJ-w-4-30-3","Dropzone--error":"dropzone-module-Dropzone--error-wcuXz-4-30-3","Dropzone--disabled":"dropzone-module-Dropzone--disabled-Z-6tQ-4-30-3","Dropzone--standard":"dropzone-module-Dropzone--standard-BLqgV-4-30-3","Dropzone--compressed":"dropzone-module-Dropzone--compressed-REqQ2-4-30-3","Dropzone--tight":"dropzone-module-Dropzone--tight--XZ-s-4-30-3","DropzoneWrapper":"dropzone-module-DropzoneWrapper-sLmKQ-4-30-3","DropzoneWrapper--standard":"dropzone-module-DropzoneWrapper--standard-0fW8S-4-30-3","DropzoneWrapper--tight":"dropzone-module-DropzoneWrapper--tight-Cg0sm-4-30-3","DropzoneWrapper--compressed":"dropzone-module-DropzoneWrapper--compressed-UKNax-4-30-3","Dropzone-icon--standard":"dropzone-module-Dropzone-icon--standard-Nv5eM-4-30-3","Dropzone-icon--compressed":"dropzone-module-Dropzone-icon--compressed-lcmwS-4-30-3","Dropzone-icon--disabled":"dropzone-module-Dropzone-icon--disabled-8nN-d-4-30-3","Dropzone-icon--default":"dropzone-module-Dropzone-icon--default-mwP9a-4-30-3","Dropzone-icon--active":"dropzone-module-Dropzone-icon--active-qPLXO-4-30-3","Dropzone-icon--error":"dropzone-module-Dropzone-icon--error-ImiCw-4-30-3"};
styleInject(css_248z$n);
var svgCode = {
active: 'M14.6667 53.3333C13.6 53.3333 12.6667 52.9333 11.8667 52.1333C11.0667 51.3333 10.6667 50.4 10.6667 49.3333V39.8H14.6667V49.3333H49.3333V39.8H53.3333V49.3333C53.3333 50.4 52.9333 51.3333 52.1333 52.1333C51.3333 52.9333 50.4 53.3333 49.3333 53.3333H14.6667ZM30 43.1333V18.4L22 26.4L19.1333 23.5333L32 10.6666L44.8667 23.5333L42 26.4L34 18.4V43.1333H30Z',
"default": 'M14.6667 53.3334C13.6 53.3334 12.6667 52.9334 11.8667 52.1334C11.0667 51.3334 10.6667 50.4 10.6667 49.3334V39.8H14.6667V49.3334H49.3333V39.8H53.3333V49.3334C53.3333 50.4 52.9333 51.3334 52.1333 52.1334C51.3333 52.9334 50.4 53.3334 49.3333 53.3334H14.6667ZM32 43.1334L19.1333 30.2667L22 27.4L30 35.4V10.6667H34V35.4L42 27.4L44.8667 30.2667L32 43.1334Z',
error: 'M31.9988 45.3334C32.6218 45.3334 33.1444 45.1227 33.5667 44.7012C33.9889 44.2798 34.2 43.7575 34.2 43.1346C34.2 42.5115 33.9893 41.9889 33.5679 41.5667C33.1464 41.1445 32.6242 40.9334 32.0012 40.9334C31.3782 40.9334 30.8555 41.1441 30.4333 41.5655C30.0111 41.987 29.8 42.5092 29.8 43.1322C29.8 43.7552 30.0107 44.2778 30.4321 44.7C30.8536 45.1223 31.3758 45.3334 31.9988 45.3334ZM32.2117 35.1334C32.7817 35.1334 33.2555 34.9417 33.6333 34.5584C34.0111 34.175 34.2 33.7 34.2 33.1334V20.2667C34.2 19.7 34.0072 19.225 33.6217 18.8417C33.2361 18.4584 32.7583 18.2667 32.1883 18.2667C31.6183 18.2667 31.1444 18.4584 30.7667 18.8417C30.3889 19.225 30.2 19.7 30.2 20.2667V33.1334C30.2 33.7 30.3928 34.175 30.7783 34.5584C31.1639 34.9417 31.6417 35.1334 32.2117 35.1334ZM32.0177 58.6667C28.3407 58.6667 24.8851 57.9667 21.6511 56.5667C18.417 55.1667 15.5889 53.2556 13.1667 50.8334C10.7444 48.4111 8.83333 45.5813 7.43333 42.344C6.03333 39.1066 5.33333 35.6475 5.33333 31.9667C5.33333 28.2859 6.03333 24.8268 7.43333 21.5894C8.83333 18.3521 10.7444 15.5334 13.1667 13.1334C15.5889 10.7334 18.4187 8.83337 21.6561 7.43337C24.8934 6.03337 28.3525 5.33337 32.0333 5.33337C35.7142 5.33337 39.1733 6.03337 42.4106 7.43337C45.648 8.83337 48.4667 10.7334 50.8667 13.1334C53.2667 15.5334 55.1667 18.3556 56.5667 21.6C57.9667 24.8445 58.6667 28.3052 58.6667 31.9823C58.6667 35.6594 57.9667 39.1149 56.5667 42.349C55.1667 45.583 53.2667 48.4071 50.8667 50.8211C48.4667 53.2351 45.6444 55.1463 42.4 56.5544C39.1555 57.9626 35.6948 58.6667 32.0177 58.6667Z'
};
var DropzoneIcon = function DropzoneIcon(props) {
var IconStyle = {
height: 'var(--spacing-160)',
width: 'var(--spacing-160)'
};
return /*#__PURE__*/React__default.createElement("svg", {
style: IconStyle,
className: styles$m["Dropzone-icon--".concat(props.type)],
viewBox: "0 0 64 64",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
"aria-hidden": "true"
}, /*#__PURE__*/React__default.createElement("path", {
d: svgCode[props.name],
className: props.disabled ? styles$m['Dropzone-icon--disabled'] : styles$m["Dropzone-icon--".concat(props.name)]
}));
};
var DropzoneActive = function DropzoneActive(props) {
var type = props.type;
return /*#__PURE__*/React.createElement(React.Fragment, null, type !== 'tight' && /*#__PURE__*/React.createElement(DropzoneIcon, {
name: "active",
type: type
}), /*#__PURE__*/React.createElement(Text$1, {
appearance: "link",
size: "large",
weight: "strong"
}, "Drop your files here"));
};
DropzoneActive.displayName = 'DropzoneActive';
var DropzoneError = function DropzoneError(props) {
var type = props.type,
error = props.error;
return /*#__PURE__*/React.createElement(React.Fragment, null, type !== 'tight' && /*#__PURE__*/React.createElement(DropzoneIcon, {
type: type,
name: "error"
}), /*#__PURE__*/React.createElement("div", {
role: "alert"
}, /*#__PURE__*/React.createElement(Text$1, {
appearance: "destructive",
size: "large",
weight: "strong"
}, error)));
};
DropzoneError.displayName = 'DropzoneError';
var Dropzone = function Dropzone(props) {
var type = props.type,
sizeLabel = props.sizeLabel,
className = props.className,
formatLabel = props.formatLabel,
sampleFileLink = props.sampleFileLink,
disabled = props.disabled,
ariaLabel = props['aria-label'];
var _DropzoneBase = DropzoneBase(props),
open = _DropzoneBase.open,
getRootProps = _DropzoneBase.getRootProps,
getInputProps = _DropzoneBase.getInputProps,
isDragActive = _DropzoneBase.isDragActive,
isDragReject = _DropzoneBase.isDragReject,
fileError = _DropzoneBase.fileError;
var baseProps = extractBaseProps(props);
var DropzoneClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$m['Dropzone'], true), styles$m["Dropzone--".concat(type)], type), styles$m['Dropzone--disabled'], disabled), styles$m['Dropzone--active'], isDragActive), styles$m['Dropzone--error'], isDragReject), styles$m['Dropzone-animation'], true), styles$m['Dropzone-animation--default'], !isDragActive && type !== 'standard'), styles$m['Dropzone-animation--active'], isDragActive && !isDragReject && type !== 'standard'), styles$m['Dropzone-standard--default'], !isDragActive && type === 'standard'), styles$m['Dropzone-standard--active'], isDragActive && !isDragReject && type === 'standard'), className);
var WrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$m['DropzoneWrapper'], true), styles$m["DropzoneWrapper--".concat(type)], true));
var renderDropzone = function renderDropzone() {
if (isDragReject) return /*#__PURE__*/React.createElement(DropzoneError, {
type: type,
error: fileErrorMessages[fileError]
});
if (isDragActive) return /*#__PURE__*/React.createElement(DropzoneActive, {
type: type
});
var buttonAccessibilityProps = useAccessibilityProps({
onClick: open
});
return /*#__PURE__*/React.createElement(React.Fragment, null, type !== 'tight' && /*#__PURE__*/React.createElement(DropzoneIcon, {
disabled: disabled,
name: "default",
type: type
}), /*#__PURE__*/React.createElement("div", {
className: WrapperClass,
"data-test": "DesignSystem-Dropzone-Wrapper"
}, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Text$1, {
size: "large",
weight: "strong",
className: "mr-2",
appearance: disabled ? 'disabled' : 'default'
}, "Drag your files here or"), /*#__PURE__*/React.createElement(Text$1, _extends$2({
className: "ml-2 cursor-pointer",
size: "large",
weight: "strong",
appearance: disabled ? 'disabled' : 'link'
}, buttonAccessibilityProps, {
tabIndex: disabled ? -1 : 0
}), "browse files"), /*#__PURE__*/React.createElement("input", getInputProps())), formatLabel && /*#__PURE__*/React.createElement(Text$1, {
appearance: disabled ? 'disabled' : 'subtle'
}, formatLabel), sizeLabel && /*#__PURE__*/React.createElement(Text$1, {
appearance: disabled ? 'disabled' : 'subtle'
}, sizeLabel), sampleFileLink && /*#__PURE__*/React.createElement("div", {
className: "mt-5"
}, sampleFileLink)));
};
return /*#__PURE__*/React.createElement("div", _extends$2({}, getRootProps(), baseProps, {
className: DropzoneClass,
"data-test": "DesignSystem-Dropzone",
role: "group",
"aria-label": ariaLabel || 'File upload',
"aria-disabled": disabled || undefined
}), /*#__PURE__*/React.createElement("span", {
role: "status",
className: styles$m['Dropzone-srOnly']
}, isDragActive && !isDragReject ? 'Ready to drop files' : ''), renderDropzone());
};
Dropzone.displayName = 'Dropzone';
Dropzone.defaultProps = _objectSpread2(_objectSpread2({}, DropzoneBase.defaultProps), {}, {
type: 'standard'
});
var FileUploaderFormat = function FileUploaderFormat(props) {
var formatLabel = props.formatLabel;
if (formatLabel) {
return /*#__PURE__*/React.createElement(Text$1, {
size: "small",
appearance: "subtle",
className: "mt-4"
}, formatLabel);
}
return null;
};
FileUploaderFormat.displayName = 'FileUploaderFormat';
var css_248z$m = ".fileUploader-module-FileUploader--Pv73-4-30-3 {\n display: flex;\n flex-direction: column;\n}\n\n.fileUploader-module-FileUploaderButton-qfMIr-4-30-3 {\n width: -moz-fit-content;\n width: fit-content;\n position: relative;\n}\n\n.fileUploader-module-FileUploaderButton-input-em151-4-30-3 {\n height: 100%;\n width: 100%;\n top: 0;\n position: absolute;\n opacity: 0;\n font-size: 0;\n z-index: 2;\n cursor: pointer;\n}\n\n.fileUploader-module-FileUploaderItem-ukfM6-4-30-3 {\n width: var(--spacing-640);\n}\n\n.fileUploader-module-FileUploaderItem-text-5ygMX-4-30-3 {\n width: var(--spacing-440);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.fileUploader-module-FileUploaderItem-file-HKKiB-4-30-3 {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding-top: var(--spacing-05);\n padding-bottom: var(--spacing-05);\n}\n";
var styles$l = {"FileUploader":"fileUploader-module-FileUploader--Pv73-4-30-3","FileUploaderButton":"fileUploader-module-FileUploaderButton-qfMIr-4-30-3","FileUploaderButton-input":"fileUploader-module-FileUploaderButton-input-em151-4-30-3","FileUploaderItem":"fileUploader-module-FileUploaderItem-ukfM6-4-30-3","FileUploaderItem-text":"fileUploader-module-FileUploaderItem-text-5ygMX-4-30-3","FileUploaderItem-file":"fileUploader-module-FileUploaderItem-file-HKKiB-4-30-3"};
styleInject(css_248z$m);
var FileUploaderButton = function FileUploaderButton(props) {
var accept = props.accept,
multiple = props.multiple,
uploadButtonLabel = props.uploadButtonLabel,
disabled = props.disabled,
name = props.name,
className = props.className,
id = props.id,
_onChange = props.onChange,
ariaLabelledBy = props['aria-labelledby'],
ariaDescribedBy = props['aria-describedby'];
var baseProps = extractBaseProps(props);
var FileUploaderButtonClass = classnames(_defineProperty$1({}, styles$l['FileUploaderButton'], true), className);
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
className: FileUploaderButtonClass
}), /*#__PURE__*/React.createElement(Button, {
type: "button",
disabled: disabled,
icon: "backup"
}, uploadButtonLabel), /*#__PURE__*/React.createElement("input", {
name: name,
id: id,
"data-test": "DesignSystem-FileUploaderButton--Input",
accept: accept && accept.join(', '),
multiple: multiple,
disabled: disabled,
type: "file",
tabIndex: -1,
"aria-label": uploadButtonLabel,
className: styles$l['FileUploaderButton-input'],
"aria-labelledby": ariaLabelledBy,
"aria-describedby": ariaDescribedBy,
onChange: function onChange(event) {
var fileList = event.target.files ? Array.from(event.target.files) : [];
if (_onChange) _onChange(fileList, event);
}
}));
};
FileUploaderButton.defaultProps = {
uploadButtonLabel: 'Upload files',
disabled: false,
multiple: false
};
FileUploaderButton.displayName = 'FileUploaderButton';
var FileUploader = function FileUploader(props) {
var accept = props.accept,
multiple = props.multiple,
disabled = props.disabled,
title = props.title,
uploadButtonLabel = props.uploadButtonLabel,
sizeLabel = props.sizeLabel,
formatLabel = props.formatLabel,
sampleFileLink = props.sampleFileLink,
className = props.className,
id = props.id,
name = props.name,
onChange = props.onChange;
var baseProps = extractBaseProps(props);
var baseIdRef = React.useRef(null);
if (!baseIdRef.current) {
baseIdRef.current = "file-uploader-".concat(uidGenerator());
}
var baseId = baseIdRef.current;
var titleId = "".concat(baseId, "-title");
var sizeLabelId = "".concat(baseId, "-size");
var FileUploaderClass = classnames(_defineProperty$1({}, styles$l['FileUploader'], true), className);
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
className: FileUploaderClass,
"data-test": "DesignSystem-FileUploader"
}), /*#__PURE__*/React.createElement(Text$1, {
weight: "medium",
id: titleId
}, title), /*#__PURE__*/React.createElement(FileUploaderFormat, {
formatLabel: formatLabel
}), /*#__PURE__*/React.createElement(Text$1, {
size: "small",
appearance: "subtle",
className: !formatLabel ? 'mt-4' : '',
id: sizeLabelId
}, sizeLabel), sampleFileLink && /*#__PURE__*/React.createElement("div", {
className: "mt-4"
}, sampleFileLink), /*#__PURE__*/React.createElement(FileUploaderButton, {
id: id,
name: name,
accept: accept,
multiple: multiple,
disabled: disabled,
uploadButtonLabel: uploadButtonLabel,
onChange: onChange,
className: "mt-5",
"aria-labelledby": titleId,
"aria-describedby": sizeLabelId
}));
};
FileUploader.defaultProps = Object.assign({}, FileUploaderButton.defaultProps, {
title: 'Upload files',
sizeLabel: 'Maximum size: 25 MB'
});
FileUploader.displayName = 'FileUploader';
var FileUploaderStatus = function FileUploaderStatus(props) {
var file = props.file,
progress = props.progress,
status = props.status,
onRetry = props.onRetry;
switch (status) {
case 'uploading':
return /*#__PURE__*/React.createElement(ProgressRing, {
size: "small",
value: progress,
className: "mr-4"
});
case 'error':
return /*#__PURE__*/React.createElement(Button, {
appearance: "transparent",
size: "regular",
onClick: onRetry,
icon: "refresh",
className: "mr-2",
"aria-label": "Retry uploading ".concat(file.name)
});
default:
return null;
}
};
FileUploaderStatus.displayName = 'FileUploaderStatus';
FileUploaderStatus.defaultProps = {
status: 'completed',
progress: 0
};
var FileUploaderItem = function FileUploaderItem(props) {
var file = props.file,
id = props.id,
status = props.status,
errorMessage = props.errorMessage,
progress = props.progress,
_onClick = props.onClick,
onDelete = props.onDelete,
_onRetry = props.onRetry,
className = props.className;
var name = file.name;
var baseProps = extractBaseProps(props);
var isClickable = Boolean(_onClick);
var handleKeyDown = function handleKeyDown(event) {
if (!isClickable) return;
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
_onClick === null || _onClick === void 0 || _onClick(file, id);
}
};
var FileItemClass = classnames(_defineProperty$1({}, styles$l['FileUploaderItem'], true), className);
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
"data-test": "DesignSystem-FileUploader--Item",
className: FileItemClass,
onClick: function onClick() {
return _onClick && _onClick(file, id);
},
onKeyDown: handleKeyDown,
role: isClickable ? 'button' : undefined,
tabIndex: isClickable ? 0 : undefined
}), /*#__PURE__*/React.createElement("div", {
className: styles$l['FileUploaderItem-file']
}, /*#__PURE__*/React.createElement(Text$1, {
className: styles$l['FileUploaderItem-text'],
appearance: status === 'completed' ? 'default' : 'subtle'
}, name), /*#__PURE__*/React.createElement("div", {
className: "d-flex align-items-center"
}, /*#__PURE__*/React.createElement(FileUploaderStatus, {
file: file,
id: id,
status: status,
progress: progress,
onRetry: function onRetry() {
return _onRetry && _onRetry(file, id);
}
}), /*#__PURE__*/React.createElement(Button, {
"data-test": "DesignSystem-FileUploader--CancelButton",
appearance: "transparent",
size: "regular",
onClick: function onClick() {
return onDelete && onDelete(file, id);
},
icon: "close",
"aria-label": "Remove ".concat(name)
}))), status === 'error' && /*#__PURE__*/React.createElement(InlineMessage, {
size: "small",
appearance: "alert",
description: errorMessage
}));
};
FileUploaderItem.defaultProps = {
status: 'completed',
progress: 0,
errorMessage: 'Network Error'
};
FileUploaderItem.displayName = 'FileUploaderItem';
var FileUploaderList = function FileUploaderList(props) {
var fileList = props.fileList,
onClick = props.onClick,
onDelete = props.onDelete,
onRetry = props.onRetry,
className = props.className;
var baseProps = extractBaseProps(props);
var FileListClass = classnames(_defineProperty$1({}, styles$l['FileUploaderList'], true), className);
if (fileList.length === 0) return null;
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
className: FileListClass,
"data-test": "DesignSystem-FileUploader--List",
"aria-live": "polite",
"aria-atomic": "false"
}), fileList.map(function (fileName, i) {
return /*#__PURE__*/React.createElement(FileUploaderItem, _extends$2({
key: i,
onDelete: onDelete,
onRetry: onRetry,
onClick: onClick
}, fileName));
}));
};
FileUploaderList.defaultProps = {
fileList: []
};
FileUploaderList.displayName = 'FileUploaderList';
var resizeCol = function resizeCol(_ref, name, el, pointerX) {
var updateColumnSchema = _ref.updateColumnSchema;
var rect = el === null || el === void 0 ? void 0 : el.getBoundingClientRect();
var elX = rect === null || rect === void 0 ? void 0 : rect.x;
// Distance between the pointer and the column edge when the drag started, so a
// grab anywhere inside the resize hit area keeps the edge under the cursor.
var grabOffset = rect && pointerX !== undefined ? rect.right - pointerX : 0;
function resizable(ev) {
ev.preventDefault();
if (elX) {
updateColumnSchema(name, {
width: ev.pageX - elX + grabOffset
});
}
}
window.addEventListener('mousemove', resizable);
window.addEventListener('mouseup', function () {
window.removeEventListener('mousemove', resizable);
});
};
var sortColumn = function sortColumn(_ref2, name, type) {
var sortingList = _ref2.sortingList,
updateSortingList = _ref2.updateSortingList;
var newSortingList = _toConsumableArray(sortingList);
var index = newSortingList.findIndex(function (l) {
return l.name === name;
});
if (index !== -1) {
newSortingList = [].concat(_toConsumableArray(newSortingList.slice(0, index)), _toConsumableArray(newSortingList.slice(index + 1)));
}
if (type !== 'unsort') newSortingList.push({
name: name,
type: type
});
updateSortingList(newSortingList);
};
var pinColumn = function pinColumn(_ref3, name, type) {
var updateColumnSchema = _ref3.updateColumnSchema;
var schemaUpdate = {
pinned: type !== 'unpin' ? type : undefined
};
updateColumnSchema(name, schemaUpdate);
};
var hideColumn = function hideColumn(_ref4, name, value) {
var updateColumnSchema = _ref4.updateColumnSchema;
var schemaUpdate = {
hidden: value
};
updateColumnSchema(name, schemaUpdate);
};
function getWidth(_ref5, width) {
var ref = _ref5.ref,
withCheckbox = _ref5.withCheckbox;
var isPercent = typeof width === 'string' && width.slice(-1) === '%';
if (isPercent) {
var checkboxCell = ref.querySelector(".".concat(gridStyles['Grid-cell--checkbox']));
var checkboxWidth = withCheckbox ? (checkboxCell === null || checkboxCell === void 0 ? void 0 : checkboxCell.clientWidth) || 28 : 0;
var gridWidth = ref.clientWidth - checkboxWidth;
return gridWidth * (+width.slice(0, -1) / 100);
}
return width;
}
function getCellSize(cellType) {
var sizes = {
AVATAR: {
minWidth: 48
},
AVATAR_WITH_TEXT: {
width: 256
},
AVATAR_WITH_META_LIST: {
width: 256
},
ICON: {
minWdth: 48
},
STATUS_HINT: {
width: 96
},
WITH_META_LIST: {
width: 176
},
DEFAULT: {
width: 176
}
};
return sizes[cellType];
}
var updateBatchData = function updateBatchData(data, rowIndexes, dataUpdate, selectDisabledRow) {
var updatedData = _toConsumableArray(data);
var _iterator = _createForOfIteratorHelper(rowIndexes),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var rowIndex = _step.value;
if (data[rowIndex].disabled && selectDisabledRow || !data[rowIndex].disabled) {
updatedData[rowIndex] = _objectSpread2(_objectSpread2({}, updatedData[rowIndex]), dataUpdate);
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return updatedData;
};
function translateData(schema, data) {
var newData = _objectSpread2({}, data);
if (schema.translate) {
var translatedData = schema.translate(data);
newData[schema.name] = translatedData !== null && _typeof(translatedData) === 'object' ? _objectSpread2(_objectSpread2({}, newData[schema.name]), translatedData) : translatedData;
}
if (newData[schema.name] === null || _typeof(newData[schema.name]) !== 'object') {
newData[schema.name] = {
title: newData[schema.name]
};
}
return newData;
}
var filterData = function filterData() {
var schema = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
var filterList = arguments.length > 2 ? arguments[2] : undefined;
var filteredData = data;
if (filterList) {
Object.keys(filterList).forEach(function (schemaName) {
var filters = filterList[schemaName];
var sIndex = schema.findIndex(function (s) {
return s.name === schemaName;
});
var onFilterChange = schema[sIndex].onFilterChange;
if (filters.length && onFilterChange) {
filteredData = filteredData.filter(function (d) {
return onFilterChange(d, filters);
});
}
});
}
return filteredData;
};
var sortData = function sortData() {
var schema = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
var sortingList = arguments.length > 2 ? arguments[2] : undefined;
var sortedData = _toConsumableArray(data);
sortingList === null || sortingList === void 0 || sortingList.forEach(function (l) {
var sIndex = schema.findIndex(function (s) {
return s.name === l.name;
});
if (sIndex !== -1) {
var defaultComparator = function defaultComparator(a, b) {
var aData = translateData(schema[sIndex], a);
var bData = translateData(schema[sIndex], b);
return aData[l.name].title.localeCompare(bData[l.name].title);
};
var _schema$sIndex$compar = schema[sIndex].comparator,
comparator = _schema$sIndex$compar === void 0 ? defaultComparator : _schema$sIndex$compar;
sortedData.sort(comparator);
if (l.type === 'desc') sortedData.reverse();
}
});
return sortedData;
};
var paginateData = function paginateData() {
var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
var page = arguments.length > 1 ? arguments[1] : undefined;
var pageSize = arguments.length > 2 ? arguments[2] : undefined;
var start = (page - 1) * pageSize;
var end = start + pageSize;
var paginatedData = data.slice(start, end);
return paginatedData;
};
var moveToIndex = function moveToIndex(arr, from, to) {
if (from === to) return arr;
var newArr = arr;
if (from < to) {
newArr = [].concat(_toConsumableArray(arr.slice(0, from)), _toConsumableArray(arr.slice(from + 1, to + 1)), [arr[from]], _toConsumableArray(arr.slice(to + 1)));
} else {
newArr = [].concat(_toConsumableArray(arr.slice(0, to)), [arr[from]], _toConsumableArray(arr.slice(to, from)), _toConsumableArray(arr.slice(from + 1)));
}
return newArr;
};
var getTotalPages = function getTotalPages(totalRecords, pageSize) {
return Math.ceil(totalRecords / pageSize);
};
var getSelectAll = function getSelectAll(tableData, selectDisabledRow, clearSelection) {
if (clearSelection) {
return {
indeterminate: false,
checked: false
};
}
var data = tableData.filter(function (d) {
return d.disabled && selectDisabledRow || !d.disabled;
});
if (data.length) {
var anyUnSelected = data.some(function (d) {
return !d._selected;
});
var allUnSelected = data.every(function (d) {
return !d._selected;
});
var indeterminate = data.length >= 0 && anyUnSelected && !allUnSelected;
var checked = !indeterminate && !allUnSelected;
return {
indeterminate: indeterminate,
checked: checked
};
}
return {
indeterminate: false,
checked: false
};
};
var hasSchema = function hasSchema(schema) {
return schema && !!schema.length;
};
var getSchema = function getSchema(schema, loading, loaderSchema) {
var response = schema;
if (!hasSchema(schema) && loading) {
response = loaderSchema;
}
return response;
};
var getPluralSuffix = function getPluralSuffix(count) {
return count > 1 ? 's' : '';
};
/**
* Instructional hint announced on a draggable column header so keyboard/screen-reader
* users can discover the Shift+Arrow reorder shortcut.
*/
var REORDER_COLUMN_HINT = 'Press Shift plus Left or Right arrow key to reorder column.';
/**
* Accessible name for a sortable column-header button. `aria-sort` stays on the
* parent `columnheader`; this label is what screen readers announce on focus.
* When `reorderable` is true, the reorder hint is appended so the same focus
* target also announces the drag-reorder shortcut.
*/
var getSortButtonAriaLabel = function getSortButtonAriaLabel(displayName, sorted, reorderable) {
var hint = reorderable ? " ".concat(REORDER_COLUMN_HINT) : '';
if (sorted === 'asc') {
return "".concat(displayName, ", sorted ascending. Activate to sort descending.").concat(hint);
}
if (sorted === 'desc') {
return "".concat(displayName, ", sorted descending. Activate to remove sort.").concat(hint);
}
return "".concat(displayName, ", not sorted. Activate to sort ascending.").concat(hint);
};
var isScrollAtTop = function isScrollAtTop(enableRowVirtualization, ref) {
// Find the correct scrollable element
var scrollableElement = null;
if (enableRowVirtualization) {
scrollableElement = ref === null || ref === void 0 ? void 0 : ref.querySelector('.VS-container');
} else {
scrollableElement = ref === null || ref === void 0 ? void 0 : ref.querySelector(".".concat(gridStyles['Grid-body']));
}
if (!scrollableElement) {
return false;
}
// Check if scrollTop is 0 (at the very top)
var isScrollAtTop = scrollableElement.scrollTop === 0;
return isScrollAtTop;
};
var defaultProps$1 = {
'aria-label': 'Data grid',
showHead: true,
loaderSchema: [],
schema: [],
data: [],
totalRecords: 0,
type: 'data',
size: 'standard',
page: 1,
pageSize: 15,
loading: false,
error: false,
sortingList: [],
filterList: {},
showFilters: true,
showNestedRowTrigger: true,
infiniteScrollOptions: {
fetchRowsCount: 200,
fetchThreshold: 'balanced'
},
virtualRowOptions: {
buffer: 10,
visibleRows: 200
}
};
var context = /*#__PURE__*/React.createContext(_objectSpread2(_objectSpread2({}, defaultProps$1), {}, {
ref: null,
gridId: '',
isSortingListUpdated: false,
updateIsSortingListUpdated: function updateIsSortingListUpdated() {}
}));
var GridProvider = context.Provider;
var FilterSelect = function FilterSelect(props) {
var name = props.name,
displayName = props.displayName,
filters = props.filters,
filterList = props.filterList,
onChange = props.onChange,
filterOptions = props.filterOptions,
filterType = props.filterType,
_props$className = props.className,
className = _props$className === void 0 ? 'my-0 mx-3' : _props$className,
customTrigger = props.customTrigger;
var isMultiSelect = filterOptions !== null && filterOptions !== void 0 && filterOptions.selectionType ? filterOptions.selectionType === 'multiSelect' : filterType ? filterType === 'multiSelect' : true;
var _React$useState = React.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
tempSelected = _React$useState2[0],
setTempSelected = _React$useState2[1];
var _React$useState3 = React.useState([]),
_React$useState4 = _slicedToArray(_React$useState3, 2),
appliedSelected = _React$useState4[0],
setAppliedSelected = _React$useState4[1];
var _React$useState5 = React.useState('unchecked'),
_React$useState6 = _slicedToArray(_React$useState5, 2),
checkedState = _React$useState6[0],
setCheckedState = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
hasChanges = _React$useState8[0],
setHasChanges = _React$useState8[1];
var selectRef = React.useRef(null);
React.useEffect(function () {
var selectedValues = filterList[name] || [];
var selectedOptions = filters.filter(function (f) {
return selectedValues.includes(f.value);
});
var formattedOptions = selectedOptions.map(function (option) {
return {
label: option.label,
value: option.value,
id: option.id || option.value
};
});
setAppliedSelected(formattedOptions);
setTempSelected(formattedOptions);
if (isMultiSelect) {
if (formattedOptions.length === filters.length && filters.length > 0) {
setCheckedState('checked');
} else if (formattedOptions.length === 0) {
setCheckedState('unchecked');
} else {
setCheckedState('indeterminate');
}
}
}, [filterList, name, filters, isMultiSelect]);
var selectOptions = React.useMemo(function () {
return filters.map(function (option) {
var isSelected = tempSelected.some(function (selected) {
return selected.value === option.value;
});
return _objectSpread2(_objectSpread2({}, option), {}, {
isSelectedOption: isSelected
});
});
}, [filters, tempSelected]);
React.useEffect(function () {
if (!isMultiSelect) return;
var selectedCount = filters.filter(function (option) {
return tempSelected.some(function (selected) {
return selected.value === option.value;
});
}).length;
if (selectedCount === filters.length && filters.length > 0) {
setCheckedState('checked');
} else if (selectedCount === 0) {
setCheckedState('unchecked');
} else {
setCheckedState('indeterminate');
}
}, [tempSelected, filters, isMultiSelect]);
React.useEffect(function () {
if (!isMultiSelect) return;
var hasSelectionChanged = tempSelected.length !== appliedSelected.length || tempSelected.some(function (temp) {
return !appliedSelected.some(function (applied) {
return applied.value === temp.value;
});
}) || appliedSelected.some(function (applied) {
return !tempSelected.some(function (temp) {
return temp.value === applied.value;
});
});
setHasChanges(hasSelectionChanged);
}, [tempSelected, appliedSelected, isMultiSelect]);
var handleSelectAllClick = function handleSelectAllClick() {
if (!isMultiSelect) return;
if (checkedState === 'checked') {
setTempSelected([]);
} else {
setTempSelected(_toConsumableArray(filters));
}
};
var onSelectHandler = function onSelectHandler(selected) {
if (!selected) {
setTempSelected([]);
if (!isMultiSelect) {
onChange(name, []);
setAppliedSelected([]);
}
return;
}
var selectedArray = Array.isArray(selected) ? selected : [selected];
var filteredSelection = selectedArray.filter(function (option) {
return option.value !== 'SelectAll';
});
setTempSelected(filteredSelection);
if (!isMultiSelect) {
var _selectRef$current;
var values = filteredSelection.map(function (item) {
return item.value;
});
onChange(name, values);
setAppliedSelected(filteredSelection);
(_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 || _selectRef$current.setOpen(false);
}
};
var onApplyHandler = function onApplyHandler() {
var _selectRef$current2;
var values = tempSelected.map(function (item) {
return item.value;
});
onChange(name, values);
setAppliedSelected(tempSelected);
setHasChanges(false);
(_selectRef$current2 = selectRef.current) === null || _selectRef$current2 === void 0 || _selectRef$current2.setOpen(false);
};
var onCancelHandler = function onCancelHandler() {
var _selectRef$current3;
setTempSelected(appliedSelected);
setHasChanges(false);
(_selectRef$current3 = selectRef.current) === null || _selectRef$current3 === void 0 || _selectRef$current3.setOpen(false);
};
var onClearHandler = function onClearHandler(event) {
event.stopPropagation();
setTempSelected([]);
setAppliedSelected([]);
setCheckedState('unchecked');
onChange(name, []);
};
var onToggleHandler = function onToggleHandler(open) {
if (!open) {
if (isMultiSelect) {
setTempSelected(appliedSelected);
setHasChanges(false);
}
}
};
var selectValue = isMultiSelect ? tempSelected : appliedSelected[0] || {
label: '',
value: ''
};
var customSetLabel = isMultiSelect ? function () {
var tempCount = tempSelected.length;
if (tempCount === 0) return undefined;
var maxVisible = (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.maxVisibleSelection) || 2;
if (maxVisible !== undefined && tempCount <= maxVisible) {
return tempSelected.map(function (option) {
return option.label;
}).join(', ');
}
return "".concat(tempCount, " selected");
} : undefined;
var triggerOptions = {
inlineLabel: displayName,
icon: 'filter_list',
placeholder: displayName,
withClearButton: tempSelected.length > 0,
onClear: onClearHandler,
setLabel: customSetLabel,
minWidth: (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.minWidth) || '72px',
maxWidth: (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.maxWidth) || '256px'
};
var SelectItem = function SelectItem(_ref) {
var option = _ref.option,
index = _ref.index;
var elementRef = React.useRef(null);
var _React$useState9 = React.useState(false),
_React$useState10 = _slicedToArray(_React$useState9, 2),
showTooltip = _React$useState10[0],
setShowTooltip = _React$useState10[1];
return /*#__PURE__*/React.createElement(Tooltip, {
showOnTruncation: true,
tooltip: option.label,
elementRef: elementRef,
open: showTooltip
}, /*#__PURE__*/React.createElement(Select.Option, {
key: "".concat(option.value, "-").concat(index),
option: option
}, /*#__PURE__*/React.createElement(Text$1, {
ref: elementRef,
className: "ellipsis--noWrap d-block w-100",
onMouseEnter: function onMouseEnter() {
return setShowTooltip(true);
},
onMouseLeave: function onMouseLeave() {
return setShowTooltip(false);
}
}, option.label)));
};
var minWidthValue = filterOptions !== null && filterOptions !== void 0 && filterOptions.minWidth ? typeof filterOptions.minWidth === 'string' ? parseFloat(filterOptions.minWidth.replace('px', '')) : filterOptions.minWidth : 176;
var minWidth = minWidthValue < 176 ? 176 : minWidthValue;
return /*#__PURE__*/React.createElement("div", {
className: className,
"data-test": "DesignSystem-FilterSelect"
}, /*#__PURE__*/React.createElement(Select, {
ref: selectRef,
multiSelect: isMultiSelect,
onSelect: onSelectHandler,
value: selectValue,
width: "auto",
triggerOptions: customTrigger ? undefined : triggerOptions,
trigger: customTrigger,
onToggle: onToggleHandler,
maxHeight: 256,
popoverWidth: 'auto'
}, /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-FilterSelect--ListWrapper",
style: {
minWidth: minWidth,
maxWidth: filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.maxWidth
}
}, /*#__PURE__*/React.createElement(Select.List, null, isMultiSelect && filters.length > 0 && /*#__PURE__*/React.createElement(Select.Option, {
checkedState: checkedState,
onClick: handleSelectAllClick,
option: {
id: 'select-all',
label: 'Select All',
value: 'SelectAll'
}
}, "Select All"), selectOptions.length > 0 ? selectOptions.map(function (option, index) {
return /*#__PURE__*/React.createElement(SelectItem, {
key: "".concat(option.value, "-").concat(index),
option: option,
index: index
});
}) : /*#__PURE__*/React.createElement(Select.EmptyTemplate, null))), isMultiSelect && /*#__PURE__*/React.createElement(Select.Footer, null, /*#__PURE__*/React.createElement(Button, {
appearance: "basic",
size: "tiny",
onClick: onCancelHandler,
"data-test": "DesignSystem-FilterSelect--CancelButton",
className: "mr-4"
}, "Cancel"), /*#__PURE__*/React.createElement(Button, {
appearance: "primary",
size: "tiny",
onClick: onApplyHandler,
"data-test": "DesignSystem-FilterSelect--ApplyButton",
disabled: !hasChanges
}, "Apply"))));
};
var HeaderCell = function HeaderCell(props) {
var context$1 = React.useContext(context);
var loading = context$1.loading,
draggable = context$1.draggable,
showMenu = context$1.showMenu,
sortingList = context$1.sortingList,
filterList = context$1.filterList,
headCellTooltip = context$1.headCellTooltip,
showFilters = context$1.showFilters,
schemaProp = context$1.schema;
var schema = props.schema,
setIsDragged = props.setIsDragged,
colIndex = props.colIndex,
onSelectAll = props.onSelectAll,
onMenuChange = props.onMenuChange,
onFilterChange = props.onFilterChange,
updateColumnSchema = props.updateColumnSchema,
reorderColumn = props.reorderColumn;
var headProps = {
schema: schema,
colIndex: colIndex,
onSelectAll: onSelectAll,
onMenuChange: onMenuChange,
onFilterChange: onFilterChange,
updateColumnSchema: updateColumnSchema,
reorderColumn: reorderColumn,
setIsDragged: setIsDragged,
sortingList: sortingList
};
var _schema$sorting = schema.sorting,
sorting = _schema$sorting === void 0 ? true : _schema$sorting,
name = schema.name,
filters = schema.filters,
pinned = schema.pinned,
_schema$filterType = schema.filterType,
filterType = _schema$filterType === void 0 ? 'multiSelect' : _schema$filterType,
filterOptions = schema.filterOptions;
var isValidSchema = hasSchema(schemaProp);
var listIndex = sortingList.findIndex(function (l) {
return l.name === name;
});
var sorted = listIndex !== -1 ? sortingList[listIndex].type : null;
var el = /*#__PURE__*/React.createRef();
var sortOptions = [{
label: 'Sort Ascending',
value: 'sortAsc',
icon: 'arrow_upward'
}, {
label: 'Sort Descending',
value: 'sortDesc',
icon: 'arrow_downward'
}];
var pinOptions = [{
label: 'Pin Left',
value: 'pinLeft',
icon: 'skip_previous'
}, {
label: 'Pin Right',
value: 'pinRight',
icon: 'skip_next'
}];
var unpinOption = {
label: 'Unpin',
value: 'unpin',
icon: 'replay'
};
if (pinned === 'left') pinOptions[0] = unpinOption;
if (pinned === 'right') pinOptions[1] = unpinOption;
var hideOptions = [{
label: 'Hide Column',
value: 'hide',
icon: 'cancel'
}];
var unsortOption = {
label: 'Unsort',
value: 'unsort',
icon: 'unfold_more'
};
if (sorted === 'asc') sortOptions[0] = unsortOption;
if (sorted === 'desc') sortOptions[1] = unsortOption;
var options = [].concat(pinOptions, hideOptions);
if (sorting) options = [].concat(sortOptions, _toConsumableArray(options));
if (schema.resizable) {
options = [].concat(_toConsumableArray(options), [{
label: 'Fit to content',
value: 'fitToContent',
icon: 'aspect_ratio'
}, {
label: 'Increase width',
value: 'increaseWidth',
icon: 'add'
}, {
label: 'Decrease width',
value: 'decreaseWidth',
icon: 'remove'
}]);
}
var classes = classnames(_defineProperty$1(_defineProperty$1({}, gridStyles['Grid-headCell'], true), gridStyles['Grid-headCell--draggable'], draggable));
var selectFilterOptions = filters ? filters.map(function (f) {
return {
label: f.label,
value: f.value,
id: f.value
};
}) : [];
var renderLabel = function renderLabel() {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text$1, {
weight: "strong",
className: "ellipsis--noWrap"
}, schema.displayName), sorting && /*#__PURE__*/React.createElement("div", {
className: gridStyles['Grid-sortingIcons'],
"aria-hidden": "true"
}, sorted ? sorted === 'asc' ? /*#__PURE__*/React.createElement(Icon, {
name: "arrow_upward"
}) : /*#__PURE__*/React.createElement(Icon, {
name: "arrow_downward"
}) : /*#__PURE__*/React.createElement(Icon, {
name: "unfold_more"
})));
};
var isSortable = !loading && sorting;
var isReorderable = !loading && !!draggable && !!reorderColumn;
var sortButtonAriaLabel = isSortable ? getSortButtonAriaLabel(schema.displayName, sorted, isReorderable) : undefined;
var handleSortToggle = function handleSortToggle() {
if (!isSortable) return;
if (sorted === 'asc') onMenuChange(name, 'sortDesc');
if (sorted === 'desc') onMenuChange(name, 'unsort');
if (!sorted) onMenuChange(name, 'sortAsc');
};
var autoFitColumn = function autoFitColumn() {
var _el$current;
var grid = (_el$current = el.current) === null || _el$current === void 0 ? void 0 : _el$current.closest('[role="grid"]');
if (!grid) return;
var escapedName = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(name) : name.replace(/([^\w-])/g, '\\$1');
var cells = Array.from(grid.querySelectorAll("[data-col-id=\"".concat(escapedName, "\"]"))).filter(function (c) {
return c.closest('[role="grid"]') === grid;
});
if (!cells.length) return;
// Save → expand → measure → restore (batched writes before reads to avoid layout thrash)
var saved = cells.map(function (_ref) {
var _ref$style = _ref.style,
width = _ref$style.width,
minWidth = _ref$style.minWidth,
maxWidth = _ref$style.maxWidth;
return {
width: width,
minWidth: minWidth,
maxWidth: maxWidth
};
});
cells.forEach(function (c) {
return Object.assign(c.style, {
width: 'max-content',
minWidth: '0',
maxWidth: 'none'
});
});
var maxWidth = cells.reduce(function (acc, c) {
return Math.max(acc, c.offsetWidth);
}, 0);
cells.forEach(function (c, i) {
return Object.assign(c.style, saved[i]);
});
if (maxWidth > 0) {
var schemaMin = typeof schema.minWidth === 'number' ? schema.minWidth : undefined;
var effectiveMinWidth = schemaMin || getCellSize(schema.cellType || 'DEFAULT').minWidth || 96;
updateColumnSchema(name, {
width: Math.max(maxWidth, effectiveMinWidth)
});
}
};
var RESIZE_STEP = 10;
// schema.minWidth/maxWidth may be a number or a px/percent string (React.ReactText); pull out the numeric px value.
var parseBound = function parseBound(value) {
if (typeof value === 'number') return value;
if (typeof value !== 'string') return undefined;
var parsed = parseFloat(value);
return Number.isNaN(parsed) ? undefined : parsed;
};
var resizeByStep = function resizeByStep(direction) {
var _el$current2;
// The columnheader's inline `width` is the configured/basis width; its bounding rect can be
// larger when `flex-grow` stretches the cell to fill unused grid space, so read the style directly.
var basisWidth = parseFloat(((_el$current2 = el.current) === null || _el$current2 === void 0 || (_el$current2 = _el$current2.parentElement) === null || _el$current2 === void 0 ? void 0 : _el$current2.style.width) || '') || 0;
var cellSize = getCellSize(schema.cellType || 'DEFAULT');
var effectiveMinWidth = parseBound(schema.minWidth) || cellSize.minWidth || 96;
var effectiveMaxWidth = parseBound(schema.maxWidth) || cellSize.maxWidth || 800;
var nextWidth = Math.min(Math.max(basisWidth + direction * RESIZE_STEP, effectiveMinWidth), effectiveMaxWidth);
updateColumnSchema(name, {
width: nextWidth
});
};
return /*#__PURE__*/React.createElement("div", {
key: name,
className: classes,
ref: el
}, /*#__PURE__*/React.createElement("div", {
className: gridStyles['Grid-cellContent'],
"data-test": "DesignSystem-Grid-cellContent",
onClick: handleSortToggle,
onKeyDown: function onKeyDown(event) {
if (!isSortable) return;
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
handleSortToggle();
}
},
role: isSortable ? 'button' : undefined,
tabIndex: isSortable ? 0 : -1,
"aria-label": sortButtonAriaLabel,
"aria-disabled": !isSortable || undefined
}, loading && !isValidSchema ? /*#__PURE__*/React.createElement(Placeholder, {
withImage: false
}, /*#__PURE__*/React.createElement(PlaceholderParagraph, {
length: "medium"
})) : !schema.headerCellRenderer && headCellTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
position: "top-start",
triggerClass: "w-100 overflow-hidden",
tooltip: schema.displayName
}, renderLabel()) : schema.headerCellRenderer && !headCellTooltip ? schema.headerCellRenderer(headProps) : renderLabel()), showFilters && filters && /*#__PURE__*/React.createElement(React.Fragment, null, loading && !isValidSchema ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Placeholder, null)) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FilterSelect, {
name: name,
displayName: "",
filters: selectFilterOptions,
filterList: filterList,
onChange: function onChange(filterName, selected) {
return onFilterChange(filterName, selected);
},
filterOptions: {
selectionType: (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.selectionType) || filterType,
minWidth: filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.minWidth,
maxWidth: filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.maxWidth,
maxVisibleSelection: filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.maxVisibleSelection
},
filterType: filterType,
className: "m-0",
customTrigger: /*#__PURE__*/React.createElement(Button, {
icon: "filter_list",
appearance: "transparent",
"aria-label": "Filter ".concat(schema.displayName, " column")
})
}))), showMenu && /*#__PURE__*/React.createElement(React.Fragment, null, loading && !isValidSchema ? /*#__PURE__*/React.createElement("span", {
className: "ml-4"
}, /*#__PURE__*/React.createElement(Placeholder, null)) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown, {
key: "".concat(name, "-").concat(sorted, "-").concat(pinned),
menu: true,
optionType: "WITH_ICON",
triggerOptions: {
customTrigger: function customTrigger() {
return /*#__PURE__*/React.createElement(Button, {
icon: "more_vert_filled",
appearance: "transparent",
"aria-label": "More options for ".concat(schema.displayName, " column")
});
}
},
options: options,
align: 'left',
onChange: function onChange(selected) {
if (selected === 'fitToContent') {
autoFitColumn();
return;
}
if (selected === 'increaseWidth' || selected === 'decreaseWidth') {
resizeByStep(selected === 'increaseWidth' ? 1 : -1);
return;
}
onMenuChange(name, selected);
},
minWidth: 176
}))), schema.resizable && /*#__PURE__*/React.createElement("span", {
className: gridStyles['Grid-cellResize'],
onMouseDown: function onMouseDown(event) {
resizeCol({
updateColumnSchema: updateColumnSchema
}, name, el.current, event.clientX);
setIsDragged(false);
},
onDoubleClick: autoFitColumn,
onKeyDown: function onKeyDown(event) {
if (!event.shiftKey && (event.key === 'ArrowRight' || event.key === 'ArrowLeft')) {
event.preventDefault();
resizeByStep(event.key === 'ArrowRight' ? 1 : -1);
} else if (event.key === 'Enter') {
event.preventDefault();
autoFitColumn();
}
},
role: "button",
tabIndex: 0,
"aria-label": "Resize ".concat(schema.displayName, " column. Arrow keys to resize, Enter or double-click to fit to content.")
}));
};
var BodyCell = function BodyCell(props) {
var context$1 = React.useContext(context);
var data = props.data,
schema = props.schema,
expandedState = props.expandedState,
rowIndex = props.rowIndex,
colIndex = props.colIndex,
nestedRowData = props.nestedRowData;
var size = context$1.size,
loading = context$1.loading,
nestedRows = context$1.nestedRows,
showNestedRowTrigger = context$1.showNestedRowTrigger;
var _expandedState = _slicedToArray(expandedState, 2),
expanded = _expandedState[0],
setExpanded = _expandedState[1];
var verticalAlign = schema.verticalAlign;
var cellProps = {
rowIndex: rowIndex,
colIndex: colIndex,
size: size,
schema: schema,
data: data,
loading: loading,
expanded: expanded
};
var cellClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, gridStyles['Grid-cellContent'], true), 'align-items-start', verticalAlign === 'top'), 'align-items-end', verticalAlign === 'bottom'));
var NestedRowTrigger = function NestedRowTrigger() {
if (showNestedRowTrigger) {
return /*#__PURE__*/React.createElement(Icon, {
className: gridStyles['Grid-nestedRowTrigger'],
"data-test": "DesignSystem-Grid-nestedRowTrigger",
name: expanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down',
size: 20,
appearance: 'default',
"aria-label": expanded ? 'Collapse row' : 'Expand row',
tabIndex: 0,
onClick: function onClick(e) {
if (nestedRowData) {
e.stopPropagation();
setExpanded(!expanded);
}
},
onKeyDown: function onKeyDown(e) {
if (nestedRowData && (e.key === 'Enter' || isSpaceKey(e))) {
e.preventDefault();
e.stopPropagation();
setExpanded(!expanded);
}
}
});
}
return null;
};
return /*#__PURE__*/React.createElement("div", {
className: cellClass,
"data-test": "DesignSystem-Grid-bodyCell"
}, colIndex === 0 && nestedRows && /*#__PURE__*/React.createElement(React.Fragment, null, nestedRowData ? /*#__PURE__*/React.createElement(NestedRowTrigger, null) : /*#__PURE__*/React.createElement("span", {
className: gridStyles['Grid-nestedRowPlaceholder']
})), schema.cellRenderer ? schema.cellRenderer(cellProps) : /*#__PURE__*/React.createElement(GridCell, _extends$2({
key: "".concat(rowIndex, "-").concat(colIndex)
}, cellProps)));
};
var Cell = function Cell(props) {
var context$1 = React.useContext(context);
var _ref2 = props,
isHead = _ref2.isHead,
firstCell = _ref2.firstCell,
schema = _ref2.schema,
data = _ref2.data,
rowIndex = _ref2.rowIndex,
colIndex = _ref2.colIndex,
expandedState = _ref2.expandedState,
onSelectAll = _ref2.onSelectAll,
onMenuChange = _ref2.onMenuChange,
onFilterChange = _ref2.onFilterChange,
updateColumnSchema = _ref2.updateColumnSchema,
reorderColumn = _ref2.reorderColumn,
nestedRowData = _ref2.nestedRowData;
var draggable = context$1.draggable,
separator = context$1.separator,
nestedRows = context$1.nestedRows,
ref = context$1.ref,
withCheckbox = context$1.withCheckbox,
showNestedRowTrigger = context$1.showNestedRowTrigger,
sortingList = context$1.sortingList,
contextSchema = context$1.schema,
loading = context$1.loading,
updateSchema = context$1.updateSchema;
var name = schema.name,
hidden = schema.hidden,
pinned = schema.pinned,
_schema$cellType = schema.cellType,
cellType = _schema$cellType === void 0 ? 'DEFAULT' : _schema$cellType,
_schema$sorting2 = schema.sorting,
sorting = _schema$sorting2 === void 0 ? true : _schema$sorting2;
var ariaSortValue = React.useMemo(function () {
if (!isHead || sorting === false) return undefined;
var entry = sortingList.find(function (l) {
return l.name === name;
});
if ((entry === null || entry === void 0 ? void 0 : entry.type) === 'asc') return 'ascending';
if ((entry === null || entry === void 0 ? void 0 : entry.type) === 'desc') return 'descending';
return undefined;
}, [isHead, sorting, sortingList, name]);
// The sortable inner button (HeaderCell) is the focus target when sorting is on;
// otherwise this columnheader itself becomes the focus target for drag-reorder,
// so the two never compete for the same tab stop.
var isHeadSortable = isHead && !loading && sorting;
var isReorderable = isHead && !loading && !!draggable && !!reorderColumn && !!updateSchema;
var _getCellSize = getCellSize(cellType),
width = _getCellSize.width,
_getCellSize$minWidth = _getCellSize.minWidth,
minWidth = _getCellSize$minWidth === void 0 ? 96 : _getCellSize$minWidth,
_getCellSize$maxWidth = _getCellSize.maxWidth,
maxWidth = _getCellSize$maxWidth === void 0 ? 800 : _getCellSize$maxWidth;
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
isDragged = _React$useState2[0],
setIsDragged = _React$useState2[1];
var cellClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, gridStyles['Grid-cell'], true), gridStyles['Grid-cell--head'], isHead), gridStyles['Grid-cell--dragged'], isDragged && draggable), gridStyles['Grid-cell--body'], !isHead), gridStyles['Grid-cell--separator'], !firstCell && (schema.separator !== undefined ? schema.separator : separator)), gridStyles['Grid-cell--nestedRow'], !isHead && colIndex === 0 && nestedRows && showNestedRowTrigger));
if (hidden) return null;
return /*#__PURE__*/React.createElement("div", {
key: "".concat(rowIndex, "-").concat(colIndex),
className: cellClass,
role: isHead ? 'columnheader' : 'gridcell',
"aria-sort": ariaSortValue,
"data-col-id": name,
draggable: isHead && draggable,
onDragStart: function onDragStart(e) {
if (draggable) {
setIsDragged(true);
e.dataTransfer.setData('name', name);
if (pinned) e.dataTransfer.setData('type', pinned);
}
},
onDrag: function onDrag() {
setIsDragged(false);
},
onDragOver: function onDragOver(e) {
return e.preventDefault();
},
onMouseUpCapture: function onMouseUpCapture() {
setIsDragged(false);
},
onDragEnd: function onDragEnd(e) {
e.preventDefault();
setIsDragged(false);
},
onDrop: function onDrop(e) {
if (draggable) {
setIsDragged(false);
var from = {
name: e.dataTransfer.getData('name'),
type: e.dataTransfer.getData('type')
};
var to = {
name: name,
type: pinned || ''
};
if (from.type === to.type && reorderColumn) reorderColumn(from.name, to.name);
}
},
onKeyDown: isReorderable ? function (e) {
if (!e.shiftKey || e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
var target = e.target;
if (target.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName)) return;
var visibleSchema = contextSchema.filter(function (s) {
return !s.hidden && s.pinned === pinned;
});
var currentIdx = visibleSchema.findIndex(function (s) {
return s.name === name;
});
if (currentIdx === -1) return;
e.preventDefault();
if (e.key === 'ArrowLeft' && currentIdx > 0) {
reorderColumn(name, visibleSchema[currentIdx - 1].name);
} else if (e.key === 'ArrowRight' && currentIdx < visibleSchema.length - 1) {
reorderColumn(name, visibleSchema[currentIdx + 1].name);
}
} : undefined,
tabIndex: isReorderable && !isHeadSortable ? 0 : undefined,
"aria-label": isReorderable && !isHeadSortable ? "".concat(schema.displayName, ". ").concat(REORDER_COLUMN_HINT) : undefined,
style: {
width: getWidth({
ref: ref,
withCheckbox: withCheckbox
}, schema.width || width),
minWidth: getWidth({
ref: ref,
withCheckbox: withCheckbox
}, schema.minWidth || minWidth),
maxWidth: getWidth({
ref: ref,
withCheckbox: withCheckbox
}, schema.maxWidth || maxWidth)
}
}, isHead ? /*#__PURE__*/React.createElement(HeaderCell, {
colIndex: colIndex,
schema: schema,
onSelectAll: onSelectAll,
onMenuChange: onMenuChange,
onFilterChange: onFilterChange,
updateColumnSchema: updateColumnSchema,
reorderColumn: reorderColumn,
setIsDragged: setIsDragged
}) : /*#__PURE__*/React.createElement(BodyCell, {
rowIndex: rowIndex,
colIndex: colIndex,
data: data,
schema: schema,
expandedState: expandedState,
nestedRowData: nestedRowData
}));
};
var GridHead = function GridHead(props) {
var context$1 = React.useContext(context);
var schema = props.schema,
onSelectAll = props.onSelectAll,
onMenuChange = props.onMenuChange,
onFilterChange = props.onFilterChange,
updateColumnSchema = props.updateColumnSchema,
reorderColumn = props.reorderColumn;
var withCheckbox = context$1.withCheckbox,
loading = context$1.loading,
selectAll = context$1.selectAll,
gridId = context$1.gridId;
var pinnedSchema = schema.filter(function (s) {
return !s.hidden && s.pinned;
});
var leftPinnedSchema = pinnedSchema.filter(function (s) {
return !s.hidden && s.pinned === 'left';
});
var rightPinnedSchema = pinnedSchema.filter(function (s) {
return !s.hidden && s.pinned === 'right';
});
var unpinnedSchema = schema.filter(function (s) {
return !s.hidden && !s.pinned;
});
var CheckboxClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, gridStyles['Grid-cell'], true), gridStyles['Grid-cell--head'], true), gridStyles['Grid-cell--checkbox'], true));
var RowClass = classnames(_defineProperty$1(_defineProperty$1({}, gridStyles['Grid-row'], true), gridStyles['Grid-row--head'], true));
var hasColumns = leftPinnedSchema.length > 0 || unpinnedSchema.length > 0 || rightPinnedSchema.length > 0 || withCheckbox;
var renderCheckbox = function renderCheckbox(show) {
if (!show || !withCheckbox) return null;
return /*#__PURE__*/React.createElement("div", {
className: CheckboxClass,
role: "columnheader"
}, loading ? /*#__PURE__*/React.createElement(Placeholder, {
className: "mr-4"
}) : /*#__PURE__*/React.createElement(Tooltip, {
tooltip: "Select all rows",
position: "top-start",
triggerClass: "flex-grow-0"
}, /*#__PURE__*/React.createElement(Checkbox, _extends$2({}, selectAll, {
id: "".concat(gridId, "-select-all"),
onChange: onSelectAll,
"aria-label": "Select all rows"
}))));
};
var renderSchema = function renderSchema(currSchema, shouldRenderCheckbox, pinned) {
if (currSchema.length) {
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, gridStyles['Grid-cellGroup'], true), 'w-100', !pinned), gridStyles['Grid-cellGroup--pinned'], pinned), gridStyles["Grid-cellGroup--pinned-".concat(pinned)], pinned), gridStyles['Grid-cellGroup--main'], !pinned));
return /*#__PURE__*/React.createElement("div", {
className: classes,
role: "presentation"
}, renderCheckbox(shouldRenderCheckbox), currSchema.map(function (s, index) {
var cI = pinned === 'left' ? index : leftPinnedSchema.length + index;
if (pinned === 'right') cI += unpinnedSchema.length;
return /*#__PURE__*/React.createElement(Cell, {
key: s.name,
firstCell: !index,
colIndex: cI,
isHead: true,
schema: s,
onSelectAll: onSelectAll,
onMenuChange: onMenuChange,
onFilterChange: onFilterChange,
updateColumnSchema: updateColumnSchema,
reorderColumn: reorderColumn
});
}));
}
return null;
};
return /*#__PURE__*/React.createElement("div", {
className: gridStyles['Grid-head'],
role: "rowgroup"
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
,
tabIndex: 0,
"aria-label": "Scroll table header horizontally",
"data-test": "DesignSystem-GridHead-wrapper"
}, /*#__PURE__*/React.createElement("div", {
className: RowClass,
role: hasColumns ? 'row' : undefined
}, renderSchema(leftPinnedSchema, !!leftPinnedSchema.length, 'left'), renderSchema(unpinnedSchema, !leftPinnedSchema.length && !!unpinnedSchema.length), renderSchema(rightPinnedSchema, false, 'right')));
};
var GridNestedRow = function GridNestedRow(props) {
var context$1 = React.useContext(context);
var schema = context$1.schema,
loading = context$1.loading,
nestedRowRenderer = context$1.nestedRowRenderer;
var data = props.data,
rowIndex = props.rowIndex,
expanded = props.expanded;
if (nestedRowRenderer) return nestedRowRenderer({
data: data,
schema: schema,
loading: loading,
rowIndex: rowIndex,
expanded: expanded
});
// return (
// <Text>{JSON.stringify(data)}</Text>
// )
// const {
// schema: propSchema
// } = _this.props;
// if (data._expanded) {
// const showHead = data._expanded.showHead;
// const schema = data._expanded.schema || propSchema;
// let gridData = data._expanded.data;
// if (!gridData) {
// const {
// _uid,
// _expanded,
// ...rest
// } = data;
// gridData = [rest];
// }
// return (
// <div className="Grid-expandedRow">
// <Grid
// key={'expanedRow'}
// showHead={showHead}
// data={gridData}
// schema={schema}
// totalRecords={gridData.length}
// />
// </div>
// );
// }
return null;
};
var GridRow = function GridRow(props) {
var context$1 = React.useContext(context);
var type = context$1.type,
onRowClick = context$1.onRowClick,
loading = context$1.loading,
withCheckbox = context$1.withCheckbox,
nestedRows = context$1.nestedRows,
checkboxAlignment = context$1.checkboxAlignment,
showNestedRowTrigger = context$1.showNestedRowTrigger,
gridId = context$1.gridId;
var schema = props.schema,
data = props.data,
rI = props.rowIndex,
onSelect = props.onSelect,
className = props.className;
var _expandNestedRow = data._expandNestedRow;
var getExpandedState = function getExpandedState() {
if (!showNestedRowTrigger) {
return true;
}
return _expandNestedRow || false;
};
var rowRef = React.useRef(null);
var _React$useState = React.useState(function () {
return getExpandedState();
}),
_React$useState2 = _slicedToArray(_React$useState, 2),
expanded = _React$useState2[0],
setExpanded = _React$useState2[1];
React.useEffect(function () {
if (!showNestedRowTrigger) {
setExpanded(true);
} else {
setExpanded(_expandNestedRow || false);
}
}, [_expandNestedRow]);
var rowClasses = classnames(gridStyles['Grid-row'], gridStyles['Grid-row--body'], _defineProperty$1(_defineProperty$1(_defineProperty$1({}, gridStyles['Grid-row--selected'], data._selected), gridStyles['Grid-row--disabled'], data.disabled), gridStyles['Grid-row--activated'], data._activated));
var onClickHandler = React.useCallback(function () {
if (type === 'resource' && !loading) {
if (onRowClick) {
onRowClick(data, rI);
}
}
}, [data, rI, type, loading, onRowClick]);
var onKeyDownHandler = React.useCallback(function (e) {
if (e.target !== e.currentTarget) return;
if (type === 'resource' && !loading && !data.disabled) {
if (e.key === 'Enter') {
e.preventDefault();
if (onRowClick) onRowClick(data, rI);
} else if (isSpaceKey(e)) {
e.preventDefault();
if (withCheckbox) {
onSelect(rI, !data._selected);
} else if (onRowClick) {
onRowClick(data, rI);
}
}
}
}, [data, rI, type, loading, onRowClick, withCheckbox, onSelect]);
var pinnedSchema = schema.filter(function (s) {
return !s.hidden && s.pinned;
});
var leftPinnedSchema = pinnedSchema.filter(function (s) {
return !s.hidden && s.pinned === 'left';
});
var rightPinnedSchema = pinnedSchema.filter(function (s) {
return !s.hidden && s.pinned === 'right';
});
var unpinnedSchema = schema.filter(function (s) {
return !s.hidden && !s.pinned;
});
var nestedProps = {
data: data,
rowIndex: rI,
expanded: expanded
};
var nestedRowData = GridNestedRow(nestedProps);
var rowLabel = React.useMemo(function () {
var firstTextCol = schema.find(function (s) {
return !s.hidden && typeof data[s.name] === 'string' && data[s.name];
});
return firstTextCol ? String(data[firstTextCol.name]) : "Row ".concat(rI + 1);
}, [schema, data, rI]);
var renderCheckbox = function renderCheckbox(show) {
if (!show || !withCheckbox) return null;
var CheckboxClass = classnames(gridStyles['Grid-cell'], gridStyles['Grid-cell--body'], gridStyles['Grid-cell--checkbox'], _defineProperty$1(_defineProperty$1({}, 'align-items-start', checkboxAlignment === 'top'), 'align-items-end', checkboxAlignment === 'bottom'));
return /*#__PURE__*/React.createElement("div", {
className: CheckboxClass,
role: "gridcell",
tabIndex: -1,
onClick: function onClick(e) {
return e.stopPropagation();
},
onKeyDown: function onKeyDown(e) {
return e.stopPropagation();
},
"data-test": "DesignSystem-Grid-cellCheckbox"
}, loading ? /*#__PURE__*/React.createElement(Placeholder, {
className: "mr-4"
}) : /*#__PURE__*/React.createElement(Checkbox, {
id: "".concat(gridId, "-select-row-").concat(rI),
checked: !!data._selected,
"aria-label": "Select ".concat(rowLabel),
onChange: function onChange(event) {
onSelect(rI, event.target.checked);
}
}));
};
var renderSchema = function renderSchema(currSchema, shouldRenderCheckbox, pinned) {
if (currSchema.length) {
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, gridStyles['Grid-cellGroup'], true), gridStyles['Grid-cellWrapper--pinned'], pinned), gridStyles["Grid-cellWrapper--pinned-".concat(pinned)], pinned), gridStyles['Grid-cellGroup--main'], !pinned));
var pinnedClasses = classnames(_defineProperty$1(_defineProperty$1({
'w-100': !pinned,
'bg-light': pinned
}, gridStyles['Grid-cellGroup--pinned'], pinned), gridStyles["Grid-cellGroup--pinned-".concat(pinned)], pinned));
return /*#__PURE__*/React.createElement("div", {
className: pinnedClasses,
role: "presentation"
}, /*#__PURE__*/React.createElement("div", {
className: classes,
role: "presentation",
"data-test": "DesignSystem-Grid-cellGroup"
}, renderCheckbox(shouldRenderCheckbox), currSchema.map(function (s, index) {
var cI = pinned === 'left' ? index : leftPinnedSchema.length + index;
if (pinned === 'right') cI += unpinnedSchema.length;
return /*#__PURE__*/React.createElement(Cell, {
key: "".concat(rI, "-").concat(cI),
rowIndex: rI,
colIndex: cI,
firstCell: !index,
schema: s,
data: data,
expandedState: [expanded, setExpanded],
nestedRowData: nestedRowData
});
})));
}
return null;
};
var wrapperClasses = classnames(className, _defineProperty$1({}, gridStyles['Grid-rowWrapper'], true));
return /*#__PURE__*/React.createElement("div", {
className: wrapperClasses,
"data-test": "DesignSystem-Grid-rowWrapper"
}, /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-Grid-row",
className: rowClasses,
role: "row",
tabIndex: type === 'resource' && !loading && !data.disabled && !!onRowClick ? 0 : -1,
onClick: onClickHandler,
onKeyDown: onKeyDownHandler,
ref: rowRef
}, renderSchema(leftPinnedSchema, !!leftPinnedSchema.length, 'left'), renderSchema(unpinnedSchema, !leftPinnedSchema.length && !!unpinnedSchema.length), renderSchema(rightPinnedSchema, false, 'right')), nestedRows && expanded && /*#__PURE__*/React.createElement("div", {
className: gridStyles['Grid-nestedRow']
}, nestedRowData));
};
GridRow.defaultProps = {
data: {}
};
var _excluded$M = ["buffer", "length", "offset", "minItemHeight", "totalLength", "renderItem", "onScroll"];
var isElementInView = function isElementInView(container, element) {
var containerTop = container.offsetTop;
var elementRect = element.getBoundingClientRect();
var elementTop = elementRect.top;
var elementHeight = elementRect.height;
return elementHeight - (containerTop - elementTop) > 0;
};
var VirtualList = function VirtualList(props) {
var _props$buffer = props.buffer,
buffer = _props$buffer === void 0 ? 10 : _props$buffer,
_props$length = props.length,
length = _props$length === void 0 ? 200 : _props$length,
_props$offset = props.offset,
initialOffset = _props$offset === void 0 ? 0 : _props$offset,
minItemHeight = props.minItemHeight,
totalLength = props.totalLength,
renderItem = props.renderItem,
onScroll = props.onScroll,
rest = _objectWithoutProperties(props, _excluded$M);
var _useState = useState$3(initialOffset),
_useState2 = _slicedToArray(_useState, 2),
offset = _useState2[0],
setOffset = _useState2[1];
var _useState3 = useState$3(minItemHeight),
_useState4 = _slicedToArray(_useState3, 2),
avgRowHeight = _useState4[0],
setAvgRowHeight = _useState4[1];
var _useState5 = useState$3(false),
_useState6 = _slicedToArray(_useState5, 2),
init = _useState6[0],
setInit = _useState6[1];
var listRef = useRef(null);
var lastScrollTop = useRef(0);
var prevTotalLength = useRef(totalLength);
useEffect$2(function () {
updateOffset(initialOffset);
}, [initialOffset]);
// Reset virtualization state only when data length decreases (e.g. during sorting)
// but not when it increases (e.g. during infinite scroll)
useEffect$2(function () {
if (totalLength < prevTotalLength.current) {
setOffset(0);
setAvgRowHeight(minItemHeight);
}
prevTotalLength.current = totalLength;
}, [totalLength, minItemHeight]);
// Add effect to handle external scroll events
useEffect$2(function () {
var handleExternalScroll = function handleExternalScroll(e) {
var target = e.target;
if (target && target.classList.contains(gridStyles['Grid-head']) && listRef.current) {
listRef.current.scrollLeft = target.scrollLeft;
}
};
document.addEventListener('scroll', handleExternalScroll, true);
return function () {
document.removeEventListener('scroll', handleExternalScroll, true);
};
}, []);
var updateOffset = useCallback(function (prevOffset) {
var offsetDiff = prevOffset - offset;
if (listRef.current) {
var el = listRef.current;
var items = el.querySelectorAll('.VS-item');
var heightAdded = 0;
var currOffset = prevOffset;
var _start = Math.min(offset, buffer);
var _end = _start + offsetDiff;
for (var i = Math.min(items.length, _end) - 1; i >= _start; i--) {
var inView = isElementInView(el, items[i]);
if (inView) {
currOffset--;
var rowHeight = items[i].clientHeight;
heightAdded += rowHeight;
} else {
break;
}
}
if (items.length < _end) {
var diff = _end - items.length;
heightAdded += diff * minItemHeight;
currOffset -= diff;
}
var newAvgRowHeight = currOffset === 0 ? minItemHeight : (avgRowHeight * prevOffset - heightAdded) / currOffset;
setOffset(currOffset);
setAvgRowHeight(Math.max(minItemHeight, newAvgRowHeight));
}
}, [offset, buffer, avgRowHeight, minItemHeight]);
var onScrollHandler = useCallback(function () {
if (listRef.current) {
var el = listRef.current;
var scrollTop = el.scrollTop;
var direction = Math.floor(scrollTop - lastScrollTop.current);
// Handle vertical scroll
if (direction !== 0) {
var items = el.querySelectorAll('.VS-item');
var newOffset = offset;
var newAvgRowHeight = avgRowHeight;
var _start2 = Math.min(offset, buffer);
// cursor scrolls down
if (direction > 0) {
if (offset < totalLength - length) {
var heightAdded = 0;
for (var i = _start2; i < items.length; i++) {
var inView = isElementInView(el, items[i]);
var rowHeight = items[i].clientHeight;
if (!inView) {
heightAdded += rowHeight;
newOffset++;
} else {
break;
}
}
if (heightAdded < direction) {
var heightLeft = direction - heightAdded;
var offsetToBeAdded = Math.floor(heightLeft / minItemHeight);
newOffset += offsetToBeAdded;
heightAdded += offsetToBeAdded * minItemHeight;
}
newAvgRowHeight = newOffset > 0 ? (offset * avgRowHeight + heightAdded) / newOffset : minItemHeight;
setOffset(Math.min(newOffset, totalLength - length));
setAvgRowHeight(Math.max(minItemHeight, newAvgRowHeight));
}
} else {
var _items$_start;
var scrollDiff = ((_items$_start = items[_start2]) === null || _items$_start === void 0 ? void 0 : _items$_start.getBoundingClientRect().y) - (el === null || el === void 0 ? void 0 : el.getBoundingClientRect().y);
if (scrollDiff > 0) {
var offsetDiff = Math.floor(scrollDiff / minItemHeight) || 1;
var _newOffset = offset - offsetDiff;
if (_newOffset < totalLength - (length + buffer)) {
setOffset(Math.max(0, _newOffset));
}
}
}
lastScrollTop.current = scrollTop;
}
// Always trigger scroll event for horizontal sync
if (onScroll) {
var syntheticEvent = new Event('scroll');
Object.defineProperty(syntheticEvent, 'target', {
value: el
});
onScroll(syntheticEvent, el);
}
}
}, [offset, avgRowHeight, buffer, length, minItemHeight, totalLength, onScroll]);
var renderItems = function renderItems(start, end) {
return Array.from({
length: end - start + 1
}, function (_, index) {
var rowIndex = start + index;
var component = renderItem(rowIndex);
return /*#__PURE__*/React__default.cloneElement(component, {
key: rowIndex,
className: ['VS-item', component.props.className].join(' ').trim()
});
});
};
var start = Math.max(0, offset - buffer);
var end = Math.min(offset + (length + buffer) - 1, totalLength - 1);
var topPadding = Math.max(0, start * avgRowHeight);
var bottomPadding = Math.max(0, (totalLength - end - 1) * avgRowHeight);
return /*#__PURE__*/React__default.createElement("div", _extends$2({}, rest, {
ref: function ref(el) {
listRef.current = el;
if (!init) setInit(true);
},
onScroll: onScrollHandler
}), init && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
"aria-hidden": "true",
style: {
flexShrink: 0,
height: topPadding
}
}), renderItems(start, end), /*#__PURE__*/React__default.createElement("div", {
"aria-hidden": "true",
style: {
flexShrink: 0,
height: bottomPadding
}
})));
};
var GridBody = function GridBody(props) {
var context$1 = React.useContext(context);
var data = context$1.data,
ref = context$1.ref,
loading = context$1.loading,
withPagination = context$1.withPagination,
page = context$1.page,
pageSize = context$1.pageSize,
totalRecords = context$1.totalRecords,
size = context$1.size,
sortingList = context$1.sortingList,
isSortingListUpdated = context$1.isSortingListUpdated,
updateIsSortingListUpdated = context$1.updateIsSortingListUpdated;
var listRef = React.useRef(null);
var schema = props.schema,
prevPageInfo = props.prevPageInfo,
updatePrevPageInfo = props.updatePrevPageInfo,
onSelect = props.onSelect,
virtualRowOptions = props.virtualRowOptions,
infiniteScrollOptions = props.infiniteScrollOptions,
enableInfiniteScroll = props.enableInfiniteScroll,
onScroll = props.onScroll,
fetchDataOnScroll = props.fetchDataOnScroll,
enableRowVirtualization = props.enableRowVirtualization;
var buffer = virtualRowOptions.buffer,
visibleRows = virtualRowOptions.visibleRows;
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
isLoadingMore = _React$useState2[0],
setIsLoadingMore = _React$useState2[1];
var _React$useState3 = React.useState(2),
_React$useState4 = _slicedToArray(_React$useState3, 2),
currentPage = _React$useState4[0],
setCurrentPage = _React$useState4[1];
var _React$useState5 = React.useState(true),
_React$useState6 = _slicedToArray(_React$useState5, 2),
hasMoreData = _React$useState6[0],
setHasMoreData = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
error = _React$useState8[0],
setError = _React$useState8[1];
var _React$useState9 = React.useState(false),
_React$useState10 = _slicedToArray(_React$useState9, 2),
retryDataFetch = _React$useState10[0],
setRetryDataFetch = _React$useState10[1];
var endReached = React.useRef(false);
var fetchRowsCount = infiniteScrollOptions.fetchRowsCount;
infiniteScrollOptions.fetchThreshold;
var fetchErrorRenderer = infiniteScrollOptions.fetchErrorRenderer,
retryFetchRenderer = infiniteScrollOptions.retryFetchRenderer;
React.useEffect(function () {
var gridBodyEl = ref.querySelector('.Grid-body');
var gridHeadEl = ref.querySelector('.Grid-head');
if (gridBodyEl && gridHeadEl) {
window.requestAnimationFrame(function () {
if (prevPageInfo.page === page) {
gridBodyEl.scrollTop = prevPageInfo.scrollTop;
}
gridBodyEl.scrollLeft = gridHeadEl.scrollLeft;
});
}
return function () {
if (gridBodyEl) {
updatePrevPageInfo({
page: page,
scrollTop: gridBodyEl.scrollTop
});
}
};
}, []);
// Reset infinite scroll state when sorting changes
React.useEffect(function () {
setCurrentPage(2);
setHasMoreData(true);
setError(false);
setIsLoadingMore(false);
endReached.current = false;
}, [sortingList]);
var totalPages = Math.ceil(totalRecords / pageSize);
var isLastPage = withPagination && page === totalPages;
var dataLength = isLastPage ? totalRecords - (page - 1) * pageSize : loading ? pageSize : withPagination ? Math.min(totalRecords, pageSize) : totalRecords;
var renderRow = React.useCallback(function (rowIndex, item) {
return /*#__PURE__*/React.createElement(GridRow, {
key: rowIndex,
rowIndex: rowIndex,
data: !item ? data[rowIndex] : item,
schema: schema,
onSelect: onSelect
});
}, [data, schema, onSelect]);
var minRowHeight = {
comfortable: 40,
standard: 40,
compressed: 32,
tight: 24
};
var getArrayList = function getArrayList() {
if (loading && !data.length) {
return _toConsumableArray(Array(dataLength).map(function (x) {
return x;
}));
}
return data;
};
var fetchNextRows = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
var _ref2, fetchRowsCount, dataList;
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_ref2 = infiniteScrollOptions || {}, fetchRowsCount = _ref2.fetchRowsCount;
if (!(fetchDataOnScroll && !isLoadingMore && hasMoreData && !error)) {
_context.next = 19;
break;
}
setIsLoadingMore(true);
_context.prev = 3;
_context.next = 6;
return fetchDataOnScroll === null || fetchDataOnScroll === void 0 ? void 0 : fetchDataOnScroll({
page: currentPage + 1,
rowsCount: fetchRowsCount
});
case 6:
dataList = _context.sent;
if ((dataList === null || dataList === void 0 ? void 0 : dataList.length) === 0 || dataList !== null && dataList !== void 0 && dataList.length && (dataList === null || dataList === void 0 ? void 0 : dataList.length) < fetchRowsCount) {
setHasMoreData(false);
}
setCurrentPage(function (prevPage) {
return prevPage + 1;
});
setError(false);
_context.next = 15;
break;
case 12:
_context.prev = 12;
_context.t0 = _context["catch"](3);
setError(true);
case 15:
_context.prev = 15;
setIsLoadingMore(false);
endReached.current = false;
return _context.finish(15);
case 19:
case "end":
return _context.stop();
}
}, _callee, null, [[3, 12, 15, 19]]);
})), [isLoadingMore, hasMoreData, currentPage, fetchRowsCount, error]);
var thresholdMapper = {
early: 0.5,
balanced: 0.75,
lazy: 0.9,
'at-end': 0
};
var onScrollHandler = function onScrollHandler(event, listRef) {
if (enableInfiniteScroll && infiniteScrollOptions && !withPagination && !isSortingListUpdated) {
var _fetchThreshold = infiniteScrollOptions.fetchThreshold;
var scrollTop = listRef.scrollTop,
scrollHeight = listRef.scrollHeight,
clientHeight = listRef.clientHeight;
var hasEndReached = _fetchThreshold === 'at-end' && scrollTop + clientHeight >= scrollHeight;
var hasThresholdReached = _fetchThreshold !== 'at-end' && scrollTop + clientHeight >= scrollHeight * thresholdMapper[_fetchThreshold];
// Check if user has scrolled to the threshold
if (hasEndReached || hasThresholdReached) {
if (!endReached.current) {
endReached.current = true;
fetchNextRows();
}
} else if (!hasEndReached && !hasThresholdReached) {
endReached.current = false;
}
}
if (onScroll) {
onScroll(event);
}
if (isSortingListUpdated && isScrollAtTop(enableRowVirtualization, ref)) {
updateIsSortingListUpdated();
}
};
var virtualScrollHandler = function virtualScrollHandler(event, element) {
var gridHeadEl = ref.querySelector(".".concat(gridStyles['Grid-head']));
if (gridHeadEl) {
gridHeadEl.scrollLeft = element.scrollLeft;
}
onScrollHandler(event, element);
};
var virtualListClassName = gridStyles['Grid-body'] + ' VS-container';
var memoizedVirtualScroll = React.useMemo(function () {
return /*#__PURE__*/React.createElement(VirtualList, {
role: "rowgroup",
buffer: buffer,
className: virtualListClassName,
length: visibleRows,
minItemHeight: minRowHeight[size],
totalLength: dataLength,
renderItem: renderRow,
onScroll: virtualScrollHandler
});
}, [dataLength, renderRow, minRowHeight, size]);
var handleOnScroll = function handleOnScroll(event) {
if (!enableRowVirtualization) {
onScrollHandler(event.nativeEvent, listRef.current);
}
};
var retryRowsFetch = /*#__PURE__*/function () {
var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
var dataList;
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
setError(false);
setRetryDataFetch(true);
setIsLoadingMore(true);
_context2.prev = 3;
_context2.next = 6;
return fetchDataOnScroll === null || fetchDataOnScroll === void 0 ? void 0 : fetchDataOnScroll({
page: currentPage + 1,
rowsCount: fetchRowsCount
});
case 6:
dataList = _context2.sent;
if ((dataList === null || dataList === void 0 ? void 0 : dataList.length) === 0 || dataList !== null && dataList !== void 0 && dataList.length && (dataList === null || dataList === void 0 ? void 0 : dataList.length) < fetchRowsCount) {
setHasMoreData(false);
}
setCurrentPage(function (prevPage) {
return prevPage + 1;
});
setError(false);
_context2.next = 15;
break;
case 12:
_context2.prev = 12;
_context2.t0 = _context2["catch"](3);
setError(true);
case 15:
_context2.prev = 15;
setIsLoadingMore(false);
setRetryDataFetch(false);
return _context2.finish(15);
case 19:
case "end":
return _context2.stop();
}
}, _callee2, null, [[3, 12, 15, 19]]);
}));
return function retryRowsFetch() {
return _ref3.apply(this, arguments);
};
}();
var errorTemplate = function errorTemplate() {
if (fetchErrorRenderer) {
return fetchErrorRenderer(retryRowsFetch);
}
return /*#__PURE__*/React.createElement("div", {
className: "d-flex justify-content-center align-items-center my-5"
}, /*#__PURE__*/React.createElement(Text$1, {
appearance: "subtle"
}, "Failed to load data. Please try again."), /*#__PURE__*/React.createElement(Button, {
size: "tiny",
icon: "refresh",
onClick: retryRowsFetch,
className: "ml-6"
}, "Try again"));
};
var retryFetchTemplate = function retryFetchTemplate() {
if (retryFetchRenderer) {
return retryFetchRenderer();
}
return /*#__PURE__*/React.createElement("div", {
className: "d-flex justify-content-center align-items-center my-5"
}, /*#__PURE__*/React.createElement(Text$1, {
appearance: "subtle"
}, "Loading data, please wait..."), /*#__PURE__*/React.createElement(Button, {
size: "tiny",
icon: "refresh",
disabled: isLoadingMore,
className: "ml-6"
}, "Try again"));
};
return /*#__PURE__*/React.createElement("div", {
className: gridStyles['Grid-body'],
onScroll: function onScroll(event) {
return handleOnScroll(event);
},
ref: listRef,
"aria-busy": isLoadingMore || undefined
}, enableRowVirtualization ? memoizedVirtualScroll : /*#__PURE__*/React.createElement("div", {
role: "rowgroup",
className: gridStyles['Grid-rowGroup']
}, getArrayList().map(function (item, i) {
return renderRow(i, item);
})), error && errorTemplate(), retryDataFetch && retryFetchTemplate(), isLoadingMore && /*#__PURE__*/React.createElement(ProgressBar, {
state: "indeterminate",
className: "position-absolute bottom-0",
size: "small"
}));
};
var Grid = /*#__PURE__*/function (_React$Component) {
function Grid(props) {
var _this;
_classCallCheck(this, Grid);
_this = _callSuper(this, Grid, [props]);
_defineProperty$1(_this, "gridRef", null);
_defineProperty$1(_this, "gridId", uidGenerator());
_defineProperty$1(_this, "isHeadSyncing", false);
_defineProperty$1(_this, "isBodySyncing", false);
_defineProperty$1(_this, "syncScroll", function (type) {
return function () {
var gridHeadEl = _this.gridRef.querySelector(".".concat(gridStyles['Grid-head']));
var gridBodyEl = _this.gridRef.querySelector(".".concat(gridStyles['Grid-body']));
_this.adjustPaddingRight();
if (type === 'head') {
if (!_this.isBodySyncing) {
_this.isHeadSyncing = true;
gridBodyEl.scrollLeft = gridHeadEl.scrollLeft;
}
} else if (type === 'body') {
if (!_this.isHeadSyncing) {
_this.isBodySyncing = true;
gridHeadEl.scrollLeft = gridBodyEl.scrollLeft;
}
}
setTimeout(function () {
_this.isHeadSyncing = false;
_this.isBodySyncing = false;
}, 0);
};
});
_defineProperty$1(_this, "updateRenderedSchema", function (newSchema) {
var updateSchema = _this.props.updateSchema;
if (updateSchema) {
updateSchema(newSchema);
}
});
_defineProperty$1(_this, "updateColumnSchema", function (name, schemaUpdate) {
var schema = _this.props.schema;
var newSchema = _toConsumableArray(schema);
var ind = newSchema.findIndex(function (s) {
return s.name === name;
});
newSchema[ind] = _objectSpread2(_objectSpread2({}, newSchema[ind]), schemaUpdate);
_this.updateRenderedSchema(newSchema);
});
_defineProperty$1(_this, "reorderColumn", function (from, to) {
var schema = _this.props.schema;
var fromInd = schema.findIndex(function (s) {
return s.name === from;
});
var toInd = schema.findIndex(function (s) {
return s.name === to;
});
var newSchema = moveToIndex(schema, fromInd, toInd);
_this.updateRenderedSchema(newSchema);
});
_defineProperty$1(_this, "updateSortingList", function (sortingList) {
var updateSortingList = _this.props.updateSortingList;
var shouldScrollToTop = !isScrollAtTop(_this.props.enableRowVirtualization, _this.gridRef) && _this.props.enableInfiniteScroll;
if (shouldScrollToTop) {
_this.scrollToTop();
}
if (updateSortingList) {
updateSortingList(sortingList);
}
});
_defineProperty$1(_this, "scrollToTop", function () {
// Find the correct scrollable element
var scrollableElement = null;
if (_this.props.enableRowVirtualization) {
var _this$gridRef;
scrollableElement = (_this$gridRef = _this.gridRef) === null || _this$gridRef === void 0 ? void 0 : _this$gridRef.querySelector('.VS-container');
} else {
var _this$gridRef2;
scrollableElement = (_this$gridRef2 = _this.gridRef) === null || _this$gridRef2 === void 0 ? void 0 : _this$gridRef2.querySelector(".".concat(gridStyles['Grid-body']));
}
if (scrollableElement) {
scrollableElement.scrollTo({
top: 0,
behavior: 'smooth'
});
_this.setState({
isSortingListUpdated: true
});
}
});
_defineProperty$1(_this, "updateIsSortingListUpdated", function () {
_this.setState({
isSortingListUpdated: false
});
});
_defineProperty$1(_this, "updateFilterList", function (filterList) {
var updateFilterList = _this.props.updateFilterList;
if (updateFilterList) {
updateFilterList(filterList);
}
});
_defineProperty$1(_this, "onMenuChange", function (name, selected) {
var sortingList = _this.props.sortingList;
switch (selected) {
case 'sortAsc':
sortColumn({
sortingList: sortingList,
updateSortingList: _this.updateSortingList
}, name, 'asc');
break;
case 'sortDesc':
sortColumn({
sortingList: sortingList,
updateSortingList: _this.updateSortingList
}, name, 'desc');
break;
case 'unsort':
sortColumn({
sortingList: sortingList,
updateSortingList: _this.updateSortingList
}, name, 'unsort');
break;
case 'pinLeft':
pinColumn({
updateColumnSchema: _this.updateColumnSchema
}, name, 'left');
break;
case 'pinRight':
pinColumn({
updateColumnSchema: _this.updateColumnSchema
}, name, 'right');
break;
case 'unpin':
pinColumn({
updateColumnSchema: _this.updateColumnSchema
}, name, 'unpin');
break;
case 'hide':
hideColumn({
updateColumnSchema: _this.updateColumnSchema
}, name, true);
break;
}
});
_defineProperty$1(_this, "onFilterChange", function (name, selected) {
var filterList = _this.props.filterList;
var newFilterList = _objectSpread2(_objectSpread2({}, filterList), {}, _defineProperty$1({}, name, selected));
_this.updateFilterList(newFilterList);
});
_defineProperty$1(_this, "onSelect", function (rowIndex, selected) {
var onSelect = _this.props.onSelect;
if (onSelect) {
onSelect(rowIndex, selected);
}
});
_defineProperty$1(_this, "onSelectAll", function (event) {
var onSelectAll = _this.props.onSelectAll;
if (onSelectAll) {
onSelectAll(event.target.checked, undefined, true);
}
});
_defineProperty$1(_this, "updatePrevPageInfo", function (value) {
_this.setState({
prevPageInfo: value
});
});
var pageInfo = {
page: 1,
scrollTop: 0
};
_this.state = {
init: false,
prevPageInfo: pageInfo,
isSortingListUpdated: false
};
return _this;
}
_inherits(Grid, _React$Component);
return _createClass(Grid, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
this.setState({
init: true
}, function () {
_this2.adjustPaddingRight();
});
window.addEventListener('resize', this.forceRerender.bind(this));
}
}, {
key: "forceRerender",
value: function forceRerender() {
this.forceUpdate();
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.removeScrollListeners();
window.removeEventListener('resize', this.forceRerender.bind(this));
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
if (prevState.init !== this.state.init) {
this.addScrollListeners();
this.adjustPaddingRight();
}
if (prevProps.page !== this.props.page || prevProps.error !== this.props.error) {
this.removeScrollListeners();
this.addScrollListeners();
this.adjustPaddingRight();
}
if (prevProps.data !== this.props.data) {
this.adjustPaddingRight();
}
}
}, {
key: "addScrollListeners",
value: function addScrollListeners() {
var gridHeadEl = this.gridRef.querySelector(".".concat(gridStyles['Grid-head']));
var gridBodyEl = this.gridRef.querySelector(".".concat(gridStyles['Grid-body']));
if (gridHeadEl && gridBodyEl) {
gridHeadEl.addEventListener('scroll', this.syncScroll('head'));
gridBodyEl.addEventListener('scroll', this.syncScroll('body'));
}
}
}, {
key: "removeScrollListeners",
value: function removeScrollListeners() {
var gridHeadEl = this.gridRef.querySelector(".".concat(gridStyles['Grid-head']));
var gridBodyEl = this.gridRef.querySelector(".".concat(gridStyles['Grid-body']));
if (gridHeadEl && gridBodyEl) {
gridHeadEl.removeEventListener('scroll', this.syncScroll('head'));
gridBodyEl.removeEventListener('scroll', this.syncScroll('body'));
}
}
}, {
key: "adjustPaddingRight",
value: function adjustPaddingRight() {
var gridHeadEl = this.gridRef.querySelector(".".concat(gridStyles['Grid-head']));
var gridBodyEl = this.gridRef.querySelector(".".concat(gridStyles['Grid-body']));
if (this.props.enableRowVirtualization) {
gridBodyEl = this.gridRef.querySelector(".VS-container");
}
if (gridHeadEl && gridBodyEl) {
var hasVerticalScrollbar = gridBodyEl.scrollHeight > gridBodyEl.clientHeight;
var scrollbarWidth = gridBodyEl.offsetWidth - gridBodyEl.clientWidth;
gridHeadEl.style.marginRight = hasVerticalScrollbar ? "".concat(scrollbarWidth, "px") : '';
}
}
}, {
key: "render",
value: function render() {
var _this3 = this,
_this$onSelectAll;
var baseProps = extractBaseProps(this.props);
var _this$state = this.state,
init = _this$state.init,
prevPageInfo = _this$state.prevPageInfo;
var _this$props = this.props,
type = _this$props.type,
size = _this$props.size,
showHead = _this$props.showHead,
className = _this$props.className,
page = _this$props.page,
loading = _this$props.loading,
loaderSchema = _this$props.loaderSchema,
virtualRowOptions = _this$props.virtualRowOptions,
infiniteScrollOptions = _this$props.infiniteScrollOptions,
enableInfiniteScroll = _this$props.enableInfiniteScroll,
enableRowVirtualization = _this$props.enableRowVirtualization,
onScroll = _this$props.onScroll,
fetchDataOnScroll = _this$props.fetchDataOnScroll,
error = _this$props.error,
errorTemplate = _this$props.errorTemplate,
ariaLabel = _this$props['aria-label'],
ariaLabelledBy = _this$props['aria-labelledby'];
var schema = getSchema(this.props.schema, loading, loaderSchema);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, gridStyles.Grid, 'true'), gridStyles["Grid--".concat(type)], type), gridStyles["Grid--".concat(size)], size), className);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
"aria-live": "polite",
"aria-atomic": "true",
className: gridStyles['Grid-srOnly']
}, init && loading ? 'Loading records' : ''), /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-Grid"
}, baseProps, {
className: classes,
role: "grid",
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-busy": loading,
ref: function ref(el) {
_this3.gridRef = el;
}
}), init && /*#__PURE__*/React.createElement(GridProvider, {
value: _objectSpread2(_objectSpread2({}, this.props), {}, {
ref: this.gridRef,
gridId: this.gridId,
isSortingListUpdated: this.state.isSortingListUpdated,
updateIsSortingListUpdated: this.updateIsSortingListUpdated.bind(this)
})
}, showHead && /*#__PURE__*/React.createElement(GridHead, {
schema: schema,
onSelectAll: (_this$onSelectAll = this.onSelectAll) === null || _this$onSelectAll === void 0 ? void 0 : _this$onSelectAll.bind(this),
onMenuChange: this.onMenuChange.bind(this),
onFilterChange: this.onFilterChange.bind(this),
updateColumnSchema: this.updateColumnSchema.bind(this),
reorderColumn: this.reorderColumn.bind(this)
}), !loading && error ? errorTemplate && (typeof errorTemplate === 'function' ? errorTemplate({}) : errorTemplate) : /*#__PURE__*/React.createElement(GridBody, {
key: "".concat(page),
schema: schema,
prevPageInfo: prevPageInfo,
updatePrevPageInfo: this.updatePrevPageInfo.bind(this),
onSelect: this.onSelect.bind(this),
enableRowVirtualization: enableRowVirtualization,
virtualRowOptions: virtualRowOptions,
infiniteScrollOptions: infiniteScrollOptions,
enableInfiniteScroll: enableInfiniteScroll,
onScroll: onScroll,
fetchDataOnScroll: fetchDataOnScroll
}))));
}
}]);
}(React.Component);
_defineProperty$1(Grid, "defaultProps", void 0);
Grid.defaultProps = defaultProps$1;
var _excluded$L = ["text", "searchTerm", "className", "highlightRegex", "highlightCell"];
// export interface ImageProps {
// src: string;
// size?: number;
// }
// export interface StatusProps extends PartialCellProps {
// appearanceMapper?: GridProps['statusMapper'];
// }
// export const Image = (props: ImageProps) => {
// const {
// src,
// size
// } = props;
// const style = {
// height: `${size}px`,
// width: `${size}px`,
// };
// return (
// <img className="Image" src={src} style={style} />
// );
// };
// const ImageCell = (props: PartialCellProps) => {
// const {
// schema,
// loading
// } = props;
// const src = schema.image;
// const size = 32;
// if (loading) {
// return (
// <Placeholder imageSize={'medium'} round={true} />
// );
// }
// return (
// <Image
// src={src || ''}
// size={size}
// />
// );
// };
var HighlightedText = function HighlightedText(_ref) {
var text = _ref.text,
searchTerm = _ref.searchTerm,
className = _ref.className,
highlightRegex = _ref.highlightRegex,
highlightCell = _ref.highlightCell,
rest = _objectWithoutProperties(_ref, _excluded$L);
if (highlightCell && searchTerm && text) {
var regex = highlightRegex ? highlightRegex(searchTerm) : new RegExp("(".concat(searchTerm, ")"), 'gi');
var parts = text.split(regex);
return /*#__PURE__*/React.createElement("span", {
className: className
}, parts.map(function (part, i) {
return regex.test(part) ? /*#__PURE__*/React.createElement("mark", {
key: i,
className: "GridCell-mark--default",
"data-test": "DesignSystem-GridCell-mark"
}, part) : /*#__PURE__*/React.createElement(Text$1, _extends$2({
key: i,
className: className
}, rest), part);
}));
}
return /*#__PURE__*/React.createElement(Text$1, _extends$2({
className: className
}, rest), text);
};
var renderTitle = function renderTitle(props) {
var tooltip = props.tooltip,
cellData = props.cellData,
searchTerm = props.searchTerm,
highlightRegex = props.highlightRegex,
highlightCell = props.highlightCell;
var children = cellData.title;
if (children !== undefined && children !== null) {
if (tooltip) {
return /*#__PURE__*/React.createElement(Tooltip, {
tooltip: children,
position: 'top-start',
triggerClass: "w-100 overflow-hidden"
}, /*#__PURE__*/React.createElement(HighlightedText, {
text: children,
searchTerm: searchTerm,
className: "w-100 ellipsis white-space-pre",
highlightRegex: highlightRegex,
highlightCell: highlightCell
}));
}
return /*#__PURE__*/React.createElement(HighlightedText, {
text: children,
searchTerm: searchTerm,
className: "w-100 ellipsis white-space-pre",
highlightRegex: highlightRegex,
highlightCell: highlightCell
});
}
return null;
};
var getMetaContent = function getMetaContent(_ref2) {
var searchTerm = _ref2.searchTerm,
list = _ref2.list,
highlightCell = _ref2.highlightCell,
highlightRegex = _ref2.highlightRegex;
if (searchTerm && list && highlightCell) {
var regex = highlightRegex ? highlightRegex(searchTerm) : new RegExp("(".concat(searchTerm, ")"), 'gi');
return list.split(regex).map(function (part, i) {
if (regex.test(part)) {
return /*#__PURE__*/React.createElement("mark", {
key: i,
className: "GridCell-mark--metaList"
}, part);
}
return /*#__PURE__*/React.createElement(Text$1, {
key: i,
appearance: "subtle",
size: "small",
className: "white-space-pre"
}, part);
});
}
return /*#__PURE__*/React.createElement(Text$1, {
appearance: "subtle",
size: "small",
className: "white-space-pre"
}, list);
};
var renderMetaList = function renderMetaList(props) {
var cellData = props.cellData,
searchTerm = props.searchTerm,
highlightRegex = props.highlightRegex;
var metaList = cellData.metaList,
highlightCell = cellData.highlightCell;
if (metaList) {
var processedMetaList = metaList.map(function (list, index) {
var content = getMetaContent({
searchTerm: searchTerm,
list: list,
highlightRegex: highlightRegex,
highlightCell: highlightCell
});
return /*#__PURE__*/React.createElement("div", {
key: list,
className: "ellipsis d-flex align-items-center"
}, /*#__PURE__*/React.createElement("div", {
className: "ellipsis d-flex align-items-center"
}, content), index < metaList.length - 1 && /*#__PURE__*/React.createElement(Icon, {
name: "fiber_manual_record",
size: 4,
className: gridStyles['GridCell-metaSeparator'],
appearance: "disabled"
}));
});
return /*#__PURE__*/React.createElement("div", {
className: gridStyles['GridCell-metaList'],
"data-test": "DesignSystem-GridCell-metaList"
}, processedMetaList);
}
return null;
};
var renderAvatar = function renderAvatar(props) {
var cellData = props.cellData;
var firstName = cellData.firstName,
lastName = cellData.lastName,
title = cellData.title;
if (firstName || lastName) {
return /*#__PURE__*/React.createElement(Avatar, {
className: "m-0 mr-5",
firstName: firstName,
lastName: lastName
});
}
if (title) {
return /*#__PURE__*/React.createElement(Avatar, {
className: "m-0 mr-5"
}, title);
}
return null;
};
var renderIcon = function renderIcon(props) {
var cellData = props.cellData;
var title = cellData.title,
icon = cellData.icon;
var iconName = icon || title;
if (iconName) {
return /*#__PURE__*/React.createElement(Icon, {
name: iconName
});
}
return null;
};
var renderStatusHint = function renderStatusHint(props) {
var tooltip = props.tooltip,
cellData = props.cellData,
searchTerm = props.searchTerm,
highlightRegex = props.highlightRegex,
highlightCell = props.highlightCell;
var statusAppearance = cellData.statusAppearance;
var children = cellData.title;
if (children) {
var content = /*#__PURE__*/React.createElement(StatusHint, {
appearance: statusAppearance,
className: "overflow-hidden"
}, /*#__PURE__*/React.createElement(HighlightedText, {
text: children,
searchTerm: searchTerm,
className: "w-100 ellipsis white-space-pre",
highlightRegex: highlightRegex,
highlightCell: highlightCell
}));
if (tooltip) {
return /*#__PURE__*/React.createElement(Tooltip, {
tooltip: children,
position: 'top-start',
triggerClass: "w-100 overflow-hidden"
}, content);
}
return content;
}
return null;
};
var GridCell = function GridCell(props) {
var size = props.size,
schema = props.schema,
loading = props.loading;
var data = !loading ? translateData(schema, props.data) : {};
var context$1 = React.useContext(context);
var searchTerm = context$1.searchTerm,
highlightRegex = context$1.highlightRegex;
var name = schema.name,
_schema$cellType = schema.cellType,
cellType = _schema$cellType === void 0 ? 'DEFAULT' : _schema$cellType,
_schema$align = schema.align,
align = _schema$align === void 0 ? 'left' : _schema$align,
tooltip = schema.tooltip,
highlightCell = schema.highlightCell;
var cellData = data[name];
var cellClass = classnames(_defineProperty$1({}, gridStyles['GridCell'], true));
var defaultCellClass = classnames(_defineProperty$1(_defineProperty$1({}, gridStyles["GridCell--align-".concat(align)], true), gridStyles['GridCell--default'], true), cellClass);
var metaListClass = classnames(_defineProperty$1({}, gridStyles['GridCell--metaList'], true), cellClass);
var avatarCellClass = classnames(_defineProperty$1(_defineProperty$1({}, gridStyles['GridCell--avatar'], true), gridStyles["GridCell--align-".concat(align)], true), cellClass);
var avatarWithTextCellClass = classnames(_defineProperty$1({}, gridStyles['GridCell--avatarWithText'], true), cellClass);
var iconCellClass = classnames(_defineProperty$1(_defineProperty$1({}, gridStyles['GridCell--icon'], true), gridStyles["GridCell--align-".concat(align)], true), cellClass);
var statusHintCellClass = classnames(_defineProperty$1(_defineProperty$1({}, gridStyles['GridCell--statusHint'], true), gridStyles["GridCell--align-".concat(align)], true), cellClass);
switch (cellType) {
case 'DEFAULT':
return /*#__PURE__*/React.createElement("div", {
className: defaultCellClass
}, loading ? /*#__PURE__*/React.createElement(PlaceholderParagraph, {
length: "medium",
"data-test": "DesignSystem-GridCell-placeHolder"
}) : renderTitle({
tooltip: tooltip,
cellData: cellData,
searchTerm: searchTerm,
highlightRegex: highlightRegex,
highlightCell: highlightCell
}));
case 'WITH_META_LIST':
return /*#__PURE__*/React.createElement("div", {
className: metaListClass
}, loading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PlaceholderParagraph, {
length: "medium",
"data-test": "DesignSystem-GridCell-withMetaList"
}), /*#__PURE__*/React.createElement(PlaceholderParagraph, {
length: "large",
size: "xxs"
})) : /*#__PURE__*/React.createElement(React.Fragment, null, renderTitle({
tooltip: tooltip,
cellData: cellData,
searchTerm: searchTerm,
highlightRegex: highlightRegex,
highlightCell: highlightCell
}), renderMetaList({
cellData: cellData,
searchTerm: searchTerm,
highlightRegex: highlightRegex
})));
case 'AVATAR':
if (loading) {
return /*#__PURE__*/React.createElement(Placeholder, {
className: gridStyles["GridCell--align-".concat(align)],
imageSize: 'medium',
round: true
});
}
return /*#__PURE__*/React.createElement("div", {
className: avatarCellClass,
"data-test": "DesignSystem-GridCell-avatar"
}, size !== 'tight' && renderAvatar({
cellData: cellData
}));
case 'AVATAR_WITH_TEXT':
if (loading) {
return /*#__PURE__*/React.createElement(Placeholder, {
imageSize: 'medium',
round: true
}, /*#__PURE__*/React.createElement(PlaceholderParagraph, {
className: "ml-3",
length: "medium"
}));
}
return /*#__PURE__*/React.createElement("div", {
className: "".concat(cellClass, " "),
"data-test": "DesignSystem-GridCell-avatarWithText"
}, size !== 'tight' && renderAvatar({
cellData: cellData
}), renderTitle({
tooltip: tooltip,
cellData: cellData,
searchTerm: searchTerm,
highlightRegex: highlightRegex,
highlightCell: highlightCell
}));
case 'AVATAR_WITH_META_LIST':
if (loading) {
return /*#__PURE__*/React.createElement(Placeholder, {
imageSize: 'medium',
round: true
}, /*#__PURE__*/React.createElement(PlaceholderParagraph, {
className: "ml-3",
length: "medium"
}), /*#__PURE__*/React.createElement(PlaceholderParagraph, {
className: "ml-3",
length: "large"
}));
}
return /*#__PURE__*/React.createElement("div", {
className: avatarWithTextCellClass,
"data-test": "DesignSystem-GridCell-avatarWithMetaList"
}, size !== 'tight' && renderAvatar({
cellData: cellData
}), /*#__PURE__*/React.createElement("div", {
className: gridStyles['GridCell-metaListWrapper']
}, renderTitle({
tooltip: tooltip,
cellData: cellData,
searchTerm: searchTerm,
highlightRegex: highlightRegex,
highlightCell: highlightCell
}), renderMetaList({
cellData: cellData,
searchTerm: searchTerm,
highlightRegex: highlightRegex
})));
case 'ICON':
if (loading) {
return /*#__PURE__*/React.createElement(Placeholder, {
className: gridStyles["GridCell--align-".concat(align)],
imageSize: 'small',
round: true
});
}
return /*#__PURE__*/React.createElement("div", {
className: iconCellClass,
"data-test": "DesignSystem-GridCell-icon"
}, renderIcon({
cellData: cellData
}));
case 'STATUS_HINT':
return /*#__PURE__*/React.createElement("div", {
className: statusHintCellClass,
"aria-busy": loading || undefined
}, loading ? /*#__PURE__*/React.createElement(Placeholder, {
className: "w-75 flex-grow-0",
imageSize: 'small',
round: true
}, /*#__PURE__*/React.createElement(PlaceholderParagraph, {
length: "large"
})) : renderStatusHint({
tooltip: tooltip,
cellData: cellData,
searchTerm: searchTerm,
highlightRegex: highlightRegex,
highlightCell: highlightCell
}));
}
return null;
};
GridCell.displayName = 'GridCell';
var FOCUSABLE_SELECTOR = 'input[type="checkbox"]:not([disabled]), button:not([disabled])';
var DraggableDropdown = function DraggableDropdown(props) {
var options = props.options,
onChange = props.onChange;
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
open = _React$useState2[0],
setOpen = _React$useState2[1];
var _React$useState3 = React.useState(options),
_React$useState4 = _slicedToArray(_React$useState3, 2),
tempOptions = _React$useState4[0],
setTempOptions = _React$useState4[1];
var _React$useState5 = React.useState('var(--spacing-440)'),
_React$useState6 = _slicedToArray(_React$useState5, 2),
triggerWidth = _React$useState6[0],
setTriggerWidth = _React$useState6[1];
var _React$useState7 = React.useState(null),
_React$useState8 = _slicedToArray(_React$useState7, 2),
pickedUpValue = _React$useState8[0],
setPickedUpValue = _React$useState8[1];
var triggerRef = React.useRef(null);
var dropdownRef = React.useRef(null);
var _React$useState9 = React.useState(),
_React$useState10 = _slicedToArray(_React$useState9, 2),
dialogId = _React$useState10[0],
setDialogId = _React$useState10[1];
React.useEffect(function () {
setDialogId("DesignSystem-Table-Header--draggableDropdown-".concat(uidGenerator()));
}, []);
React.useEffect(function () {
setTempOptions(options);
setPickedUpValue(null);
}, [open]);
var handleParentChange = function handleParentChange(e) {
setTempOptions(tempOptions.map(function (option) {
return _objectSpread2(_objectSpread2({}, option), {}, {
selected: e.target.checked
});
}));
};
var handleChildChange = function handleChildChange(e, index) {
var newOptions = _toConsumableArray(tempOptions);
newOptions[index] = _objectSpread2(_objectSpread2({}, newOptions[index]), {}, {
selected: e.target.checked
});
setTempOptions(newOptions);
};
var onToggleHandler = function onToggleHandler(newOpen) {
setOpen(newOpen);
};
var onCancelHandler = function onCancelHandler() {
var _triggerRef$current;
setOpen(false);
(_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
};
var onApplyHandler = function onApplyHandler() {
var _triggerRef$current2;
setOpen(false);
(_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 || _triggerRef$current2.focus();
if (onChange) onChange(tempOptions);
};
var onReorderHandleClick = function onReorderHandleClick(index) {
var currentValue = tempOptions[index].value;
if (pickedUpValue === null) {
setPickedUpValue(currentValue);
} else if (pickedUpValue === currentValue) {
setPickedUpValue(null);
} else {
var from = tempOptions.findIndex(function (opt) {
return opt.value === pickedUpValue;
});
if (from !== -1 && from !== index) {
setTempOptions(moveToIndex(tempOptions, from, index));
}
setPickedUpValue(null);
}
};
var onReorderKeyDown = function onReorderKeyDown(e, index) {
if (e.key === 'ArrowUp' && index > 0) {
e.preventDefault();
setTempOptions(moveToIndex(tempOptions, index, index - 1));
} else if (e.key === 'ArrowDown' && index < tempOptions.length - 1) {
e.preventDefault();
setTempOptions(moveToIndex(tempOptions, index, index + 1));
}
};
var onTriggerKeyDown = function onTriggerKeyDown(e) {
if (e.key === 'ArrowDown') {
e.preventDefault();
setOpen(true);
}
};
var getFocusableElements = function getFocusableElements() {
var _dropdownRef$current$, _dropdownRef$current;
return Array.from((_dropdownRef$current$ = (_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.querySelectorAll(FOCUSABLE_SELECTOR)) !== null && _dropdownRef$current$ !== void 0 ? _dropdownRef$current$ : []);
};
var focusFirstControl = React.useCallback(function () {
var _dropdownRef$current2;
(_dropdownRef$current2 = dropdownRef.current) === null || _dropdownRef$current2 === void 0 || (_dropdownRef$current2 = _dropdownRef$current2.querySelector(FOCUSABLE_SELECTOR)) === null || _dropdownRef$current2 === void 0 || _dropdownRef$current2.focus();
}, []);
var setDialogRef = React.useCallback(function (node) {
dropdownRef.current = node;
if (node) focusFirstControl();
}, [focusFirstControl]);
React.useLayoutEffect(function () {
if (open) focusFirstControl();
}, [open, focusFirstControl]);
var onDialogKeyDown = function onDialogKeyDown(e) {
if (e.key !== 'Tab') return;
var focusable = getFocusableElements();
if (!focusable.length) return;
var first = focusable[0];
var last = focusable[focusable.length - 1];
if (e.shiftKey && document.activeElement === first) {
e.preventDefault();
last.focus();
} else if (!e.shiftKey && document.activeElement === last) {
e.preventDefault();
first.focus();
}
};
React.useEffect(function () {
if (!open) return;
var handleEscape = function handleEscape(e) {
if (e.key === 'Escape') {
var _triggerRef$current3;
setOpen(false);
(_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 || _triggerRef$current3.focus();
}
};
document.addEventListener('keydown', handleEscape);
return function () {
return document.removeEventListener('keydown', handleEscape);
};
}, [open]);
var columnCountLabel = "Showing ".concat(options.filter(function (option) {
return option.selected;
}).length, " of ").concat(options.length, " column").concat(getPluralSuffix(options.length));
return /*#__PURE__*/React.createElement("div", {
className: dropdownStyles['Dropdown']
}, /*#__PURE__*/React.createElement(Popover, {
open: open,
onToggle: onToggleHandler,
trigger: /*#__PURE__*/React.createElement(Button, {
type: "button",
ref: function ref(el) {
triggerRef.current = el;
setTriggerWidth("".concat(el === null || el === void 0 ? void 0 : el.clientWidth, "px"));
},
size: "tiny",
appearance: "transparent",
icon: "keyboard_arrow_down_filled",
iconAlign: "right",
"aria-expanded": open,
"aria-haspopup": "dialog",
"aria-controls": open ? dialogId : undefined,
"aria-label": "Select columns, ".concat(columnCountLabel),
onKeyDown: onTriggerKeyDown
}, columnCountLabel),
triggerClass: "w-100",
customStyle: {
width: triggerWidth
},
className: gridStyles['Header-draggableDropdown']
}, /*#__PURE__*/React.createElement("div", {
ref: setDialogRef,
id: dialogId,
role: "dialog",
"aria-modal": "true",
"aria-label": "Choose columns",
onKeyDown: onDialogKeyDown
}, /*#__PURE__*/React.createElement("div", {
className: gridStyles['Dropdown-wrapper']
}, /*#__PURE__*/React.createElement("div", {
className: "OptionWrapper"
}, /*#__PURE__*/React.createElement(Checkbox, {
className: dropdownStyles['OptionCheckbox'],
label: "Select All",
checked: tempOptions.every(function (option) {
return option.selected;
}),
indeterminate: tempOptions.some(function (option) {
return option.selected;
}) && tempOptions.some(function (option) {
return !option.selected;
}),
onChange: handleParentChange
})), tempOptions.map(function (option, index) {
var _tempOptions$find$lab, _tempOptions$find;
return /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-Table-Header--draggableDropdownOption",
key: option.value,
className: "OptionWrapper d-flex flex-space-between align-items-center cursor-pointer",
draggable: true,
onDragStart: function onDragStart(e) {
e.dataTransfer.setData('index', "".concat(index));
},
onDragOver: function onDragOver(e) {
return e.preventDefault();
},
onDrop: function onDrop(e) {
var from = +e.dataTransfer.getData('index');
var to = index;
if (from !== to) setTempOptions(moveToIndex(tempOptions, from, to));
}
}, /*#__PURE__*/React.createElement(Checkbox, {
className: dropdownStyles['OptionCheckbox'],
name: option.value,
label: option.label,
checked: tempOptions[index].selected,
onChange: function onChange(e) {
return handleChildChange(e, index);
}
}), /*#__PURE__*/React.createElement(Button, {
type: "button",
icon: "drag_handle",
appearance: pickedUpValue === option.value ? 'basic' : 'transparent',
className: "mr-4",
"aria-pressed": pickedUpValue === option.value,
"aria-label": pickedUpValue === null ? "Reorder ".concat(option.label, " column. Press to pick up, then press another handle to drop. Or use arrow keys to move up or down.") : pickedUpValue === option.value ? "".concat(option.label, " column picked up. Press another handle to drop, or press again to cancel.") : "Drop ".concat((_tempOptions$find$lab = (_tempOptions$find = tempOptions.find(function (opt) {
return opt.value === pickedUpValue;
})) === null || _tempOptions$find === void 0 ? void 0 : _tempOptions$find.label) !== null && _tempOptions$find$lab !== void 0 ? _tempOptions$find$lab : '', " column at ").concat(option.label, " position."),
onClick: function onClick() {
return onReorderHandleClick(index);
},
onKeyDown: function onKeyDown(e) {
return onReorderKeyDown(e, index);
}
}));
})), /*#__PURE__*/React.createElement("div", {
className: dropdownStyles['Dropdown-buttonWrapper']
}, /*#__PURE__*/React.createElement(Button, {
type: "button",
className: "mr-4",
size: "tiny",
onClick: onCancelHandler,
"data-test": "DesignSystem-DraggableDropdown-cancelButton"
}, "Cancel"), /*#__PURE__*/React.createElement(Button, {
type: "button",
appearance: "primary",
size: "tiny",
onClick: onApplyHandler,
"data-test": "DesignSystem-DraggableDropdown-applyButton"
}, "Apply")))));
};
var css_248z$l = ".table-module-Table--qR8j-4-30-3 {\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n height: 100%;\n width: 100%;\n z-index: 1;\n}\n\n.table-module-Table-grid-4jCRZ-4-30-3 {\n height: 100%;\n min-height: 0;\n overflow: hidden;\n z-index: 1;\n flex: 1 1 auto;\n}\n\n.table-module-Table-pagination-8llhn-4-30-3 {\n display: flex;\n justify-content: center;\n background: var(--white);\n padding: var(--spacing-20) 0;\n border-top: var(--border);\n}\n\n.table-module-Table-Header--Divider--qPHO-4-30-3 {\n height: var(--spacing-60);\n}\n\n.table-module-Table-Header-Label--hide-z7HVq-4-30-3 {\n animation: table-module-tableHeaderFadeOut-l6M3M-4-30-3 var(--duration--fast-02) var(--exit-productive-curve);\n animation-fill-mode: forwards;\n pointer-events: none;\n}\n\n.table-module-Table-Header-Label--show-bh0tC-4-30-3 {\n animation: table-module-fadeIn-YCXL6-4-30-3 var(--duration--moderate-01) var(--entrance-productive-curve);\n animation-fill-mode: forwards;\n}\n\n@keyframes table-module-tableHeaderFadeOut-l6M3M-4-30-3 {\n from {\n opacity: 1;\n visibility: visible;\n }\n to {\n opacity: 0;\n visibility: hidden;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .table-module-Table-Header-Label--hide-z7HVq-4-30-3,\n .table-module-Table-Header-Label--show-bh0tC-4-30-3 {\n animation-duration: 0.001ms;\n }\n}\n\n.table-module-Table-srOnly-0OZ0D-4-30-3 {\n position: absolute;\n width: var(--spacing-2-5);\n height: var(--spacing-2-5);\n padding: 0;\n margin: calc(-1 * var(--spacing-2-5));\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n";
var tableStyles = {"Table":"table-module-Table--qR8j-4-30-3","Table-grid":"table-module-Table-grid-4jCRZ-4-30-3","Table-pagination":"table-module-Table-pagination-8llhn-4-30-3","Table-Header--Divider":"table-module-Table-Header--Divider--qPHO-4-30-3","Table-Header-Label--hide":"table-module-Table-Header-Label--hide-z7HVq-4-30-3","tableHeaderFadeOut":"table-module-tableHeaderFadeOut-l6M3M-4-30-3","Table-Header-Label--show":"table-module-Table-Header-Label--show-bh0tC-4-30-3","fadeIn":"table-module-fadeIn-YCXL6-4-30-3","Table-srOnly":"table-module-Table-srOnly-0OZ0D-4-30-3"};
styleInject(css_248z$l);
var Header = function Header(props) {
var _selectedRowsRef$curr;
var headerIdRef = React.useRef(uidGenerator());
var loading = props.loading,
error = props.error,
data = props.data,
displayData = props.displayData,
schema = props.schema,
withSearch = props.withSearch,
showHead = props.showHead,
withPagination = props.withPagination,
page = props.page,
pageSize = props.pageSize,
withCheckbox = props.withCheckbox,
children = props.children,
updateSchema = props.updateSchema,
_props$filterList = props.filterList,
filterList = _props$filterList === void 0 ? {} : _props$filterList,
updateFilterList = props.updateFilterList,
_props$totalRecords = props.totalRecords,
totalRecords = _props$totalRecords === void 0 ? 0 : _props$totalRecords,
onSelectAll = props.onSelectAll,
searchPlaceholder = props.searchPlaceholder,
selectAll = props.selectAll,
searchTerm = props.searchTerm,
updateSearchTerm = props.updateSearchTerm,
globalActionRenderer = props.globalActionRenderer,
dynamicColumn = props.dynamicColumn,
allowSelectAll = props.allowSelectAll,
showFilters = props.showFilters,
customSelectionLabel = props.customSelectionLabel,
selectedRowsRef = props.selectedRowsRef,
selectedAllRef = props.selectedAllRef,
onClearSelection = props.onClearSelection,
onSelectAllRows = props.onSelectAllRows,
selectionActionRenderer = props.selectionActionRenderer,
uniqueColumnName = props.uniqueColumnName,
totalRowsCount = props.totalRowsCount,
enableInfiniteScroll = props.enableInfiniteScroll,
selectedLabelRenderer = props.selectedLabelRenderer,
unSelectedLabelRenderer = props.unSelectedLabelRenderer;
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
selectAllRecords = _React$useState2[0],
setSelectAllRecords = _React$useState2[1];
var _React$useState3 = React.useState(true),
_React$useState4 = _slicedToArray(_React$useState3, 2),
flag = _React$useState4[0],
setFlag = _React$useState4[1];
var customLabel = customSelectionLabel ? customSelectionLabel : 'item';
var selectedCount = data.filter(function (d) {
return d._selected;
}).length;
var startIndex = (page - 1) * pageSize + 1;
var endIndex = Math.min(page * pageSize, totalRecords);
var selectedRowsCount = (selectedAllRef === null || selectedAllRef === void 0 ? void 0 : selectedAllRef.current) === true ? totalRecords : (selectedRowsRef === null || selectedRowsRef === void 0 || (_selectedRowsRef$curr = selectedRowsRef.current) === null || _selectedRowsRef$curr === void 0 ? void 0 : _selectedRowsRef$curr.length) || 0;
var customSelectedRowLabel = selectedLabelRenderer ? selectedLabelRenderer({
selectedRowsCount: selectedRowsCount,
uniqueColumnName: uniqueColumnName,
withCheckbox: withCheckbox,
selectedCount: selectedCount,
withPagination: withPagination,
startIndex: startIndex,
endIndex: endIndex,
totalRecords: totalRecords
}) : undefined;
var customUnSelectedRowLabel = unSelectedLabelRenderer ? unSelectedLabelRenderer({
error: error,
withPagination: withPagination,
enableInfiniteScroll: enableInfiniteScroll,
startIndex: startIndex,
endIndex: endIndex,
totalRecords: totalRecords,
totalRowsCount: totalRowsCount
}) : undefined;
var showSelectedRowLabel = withCheckbox && (selectedCount || selectedRowsCount > 0);
var _React$useState5 = React.useState(true),
_React$useState6 = _slicedToArray(_React$useState5, 2),
showSelectedLabel = _React$useState6[0],
setShowSelectedLabel = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
animateSelectedLabel = _React$useState8[0],
setAnimateSelectedLabel = _React$useState8[1];
var _React$useState9 = React.useState(false),
_React$useState10 = _slicedToArray(_React$useState9, 2),
animateUnSelectedLabel = _React$useState10[0],
setAnimateUnSelectedLabel = _React$useState10[1];
React.useEffect(function () {
if (showSelectedRowLabel) {
setAnimateUnSelectedLabel(true);
setAnimateSelectedLabel(false);
} else {
setAnimateUnSelectedLabel(false);
setAnimateSelectedLabel(true);
}
}, [showSelectedRowLabel]);
var onUnSelectAnimationEnd = function onUnSelectAnimationEnd() {
showSelectedRowLabel ? setShowSelectedLabel(true) : setShowSelectedLabel(false);
setAnimateSelectedLabel(true);
setAnimateUnSelectedLabel(false);
};
var onSelectAnimationEnd = function onSelectAnimationEnd() {
showSelectedRowLabel ? setShowSelectedLabel(true) : setShowSelectedLabel(false);
setAnimateSelectedLabel(false);
setAnimateUnSelectedLabel(true);
};
var unselectedRowLabelClass = classnames(_defineProperty$1(_defineProperty$1({}, tableStyles['Table-Header-Label--hide'], animateUnSelectedLabel && showSelectedRowLabel), tableStyles['Table-Header-Label--show'], animateUnSelectedLabel && !showSelectedRowLabel));
var selectedRowLabelClass = classnames(_defineProperty$1(_defineProperty$1({}, tableStyles['Table-Header-Label--hide'], animateSelectedLabel && !showSelectedRowLabel), tableStyles['Table-Header-Label--show'], animateSelectedLabel && showSelectedRowLabel));
React.useEffect(function () {
setFlag(!flag);
}, [schema]);
React.useEffect(function () {
if (selectAll && selectAll.checked) {
if (onSelectAll) onSelectAll(true, selectAllRecords);
}
}, [selectAllRecords]);
React.useEffect(function () {
if (selectAll && !selectAll.checked) setSelectAllRecords(false);
}, [selectAll]);
var filterSchema = schema.filter(function (s) {
return s.filters;
});
var onSearchChange = function onSearchChange(e) {
var value = e.target.value;
if (updateSearchTerm) {
updateSearchTerm(value);
}
};
var onFilterChange = function onFilterChange(name, filters) {
var newFilterList = _objectSpread2(_objectSpread2({}, filterList), {}, _defineProperty$1({}, name, filters));
if (updateFilterList) {
updateFilterList(newFilterList);
}
};
var columnOptions = schema.map(function (s) {
return {
label: s.displayName,
value: s.name,
selected: !s.hidden
};
});
var onDynamicColumnUpdate = function onDynamicColumnUpdate(options) {
var newSchema = options.map(function (option) {
return _objectSpread2(_objectSpread2({}, schema.find(function (colSchema) {
return colSchema.name === option.value;
})), {}, {
hidden: !option.selected
/* tslint:disable:no-object-literal-type-assertion */
});
});
/* tslint:enable:no-object-literal-type-assertion */
if (updateSchema) updateSchema(newSchema);
};
var getUnSelectedRowLabel = function getUnSelectedRowLabel() {
if (error) {
return "Showing 0 ".concat(customLabel, "s");
} else if (withPagination) {
return "Showing ".concat(startIndex, "-").concat(endIndex, " of ").concat(totalRecords, " ").concat(customLabel).concat(getPluralSuffix(totalRecords));
} else if (enableInfiniteScroll && totalRowsCount) {
return "Showing ".concat(totalRecords, " of ").concat(totalRowsCount, " ").concat(customLabel).concat(getPluralSuffix(totalRecords)); // here
}
return "Showing ".concat(totalRecords, " ").concat(customLabel).concat(getPluralSuffix(totalRecords)); // here
};
var getSelectedRowLabel = function getSelectedRowLabel() {
if (selectedRowsCount > 0 && uniqueColumnName && withCheckbox) {
return "Selected ".concat(selectedRowsCount, " ").concat(customLabel).concat(getPluralSuffix(selectedRowsCount));
} else if (selectedCount && !uniqueColumnName && withCheckbox) {
return "Selected ".concat(selectedCount, " ").concat(customLabel).concat(getPluralSuffix(selectedCount));
} else if (withPagination) {
return "Showing ".concat(startIndex, "-").concat(endIndex, " of ").concat(totalRecords, " ").concat(customLabel).concat(getPluralSuffix(totalRecords));
}
return "Showing ".concat(totalRecords, " ").concat(customLabel).concat(getPluralSuffix(totalRecords));
};
var headerClasses = classnames(gridStyles['Header-content'], gridStyles['Header-content--bottom']);
var tableDividerClasses = classnames(tableStyles['Table-Header--Divider'], 'mx-4');
return /*#__PURE__*/React.createElement("div", {
className: gridStyles['Header']
}, /*#__PURE__*/React.createElement("div", {
className: gridStyles['Header-content']
}, /*#__PURE__*/React.createElement("div", {
className: "d-flex w-100"
}, withSearch && /*#__PURE__*/React.createElement("div", {
className: gridStyles['Header-search']
}, /*#__PURE__*/React.createElement(Input, {
"data-test": "DesignSystem-Table-Header--withSearch",
name: "GridHeader-search",
icon: "search",
placeholder: searchPlaceholder,
onChange: onSearchChange,
value: searchTerm,
onClear: function onClear() {
return updateSearchTerm && updateSearchTerm('');
},
disabled: loading && !hasSchema(schema),
autoComplete: "off"
})), showFilters && filterSchema.length > 0 && /*#__PURE__*/React.createElement("div", {
className: gridStyles['Header-dropdown']
}, /*#__PURE__*/React.createElement("div", {
className: gridStyles['Header-filters']
}, filterSchema.map(function (s) {
var name = s.name,
displayName = s.displayName,
filters = s.filters,
filterType = s.filterType,
filterOptions = s.filterOptions;
var selectFilters = filters ? filters.map(function (f) {
return {
label: f.label,
value: f.value,
id: f.value
};
}) : [];
return /*#__PURE__*/React.createElement(FilterSelect, {
key: name,
name: name,
displayName: displayName,
filters: selectFilters,
filterList: filterList,
filterType: filterType,
filterOptions: filterOptions,
onChange: onFilterChange
});
}))), children && /*#__PURE__*/React.createElement("div", {
className: gridStyles['Header-actions']
}, children)), globalActionRenderer && /*#__PURE__*/React.createElement("div", {
className: gridStyles['Header-global-actions']
}, globalActionRenderer(displayData))), /*#__PURE__*/React.createElement("div", {
className: headerClasses
}, /*#__PURE__*/React.createElement("div", {
className: gridStyles['Header-label']
}, !showHead && withCheckbox && !loading && /*#__PURE__*/React.createElement(Tooltip, {
tooltip: "Select all",
position: "top-start",
triggerClass: "flex-grow-0"
}, /*#__PURE__*/React.createElement(Checkbox, _extends$2({
className: "mr-4",
id: "".concat(headerIdRef.current, "-select-all")
}, selectAll, {
"aria-label": "Select all",
onChange: function onChange(event) {
if (onSelectAll) onSelectAll(event.target.checked);
}
}))), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
"aria-live": "polite",
"aria-atomic": "true",
className: tableStyles['Table-srOnly']
}, loading ? 'Loading records' : showSelectedLabel ? customSelectedRowLabel !== null && customSelectedRowLabel !== void 0 ? customSelectedRowLabel : getSelectedRowLabel() : customUnSelectedRowLabel !== null && customUnSelectedRowLabel !== void 0 ? customUnSelectedRowLabel : getUnSelectedRowLabel()), /*#__PURE__*/React.createElement("div", {
"aria-hidden": "true"
}, showSelectedLabel ? /*#__PURE__*/React.createElement("span", {
className: selectedRowLabelClass,
onAnimationEnd: onSelectAnimationEnd
}, /*#__PURE__*/React.createElement(Label, null, customSelectedRowLabel !== null && customSelectedRowLabel !== void 0 ? customSelectedRowLabel : getSelectedRowLabel())) : /*#__PURE__*/React.createElement("span", {
className: unselectedRowLabelClass,
onAnimationEnd: onUnSelectAnimationEnd
}, /*#__PURE__*/React.createElement(Label, null, customUnSelectedRowLabel !== null && customUnSelectedRowLabel !== void 0 ? customUnSelectedRowLabel : getUnSelectedRowLabel()))), selectedRowsCount > 0 && allowSelectAll && showSelectedLabel && /*#__PURE__*/React.createElement("div", {
className: selectedRowLabelClass
}, /*#__PURE__*/React.createElement("div", {
className: "ml-4 d-flex"
}, /*#__PURE__*/React.createElement(Button, {
"data-test": "DesignSystem-Table-Header--selectAllItemsButton",
size: "tiny",
disabled: selectedRowsCount === totalRecords,
onClick: onSelectAllRows
}, "Select ".concat(totalRecords, " ").concat(customLabel, "s")), /*#__PURE__*/React.createElement(Button, {
"data-test": "DesignSystem-Table-Header--clearSelectionItemsButton",
size: "tiny",
className: "ml-4",
onClick: onClearSelection
}, "Clear selection"), selectionActionRenderer && /*#__PURE__*/React.createElement(Divider, {
vertical: true,
className: tableDividerClasses
}))), selectionActionRenderer && selectedRowsCount > 0 && showSelectedLabel && /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-Table-Header--ActionRenderer",
className: selectedRowLabelClass
}, selectionActionRenderer(selectedRowsRef === null || selectedRowsRef === void 0 ? void 0 : selectedRowsRef.current, selectedAllRef === null || selectedAllRef === void 0 ? void 0 : selectedAllRef.current)))), dynamicColumn && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DraggableDropdown, {
options: columnOptions,
onChange: onDynamicColumnUpdate
}))));
};
Header.defaultProps = {
schema: [],
data: [],
searchPlaceholder: 'Search',
dynamicColumn: true,
showFilters: true
};
var isElementPresent = function isElementPresent(list, uniqueColumnName, value) {
var arr = list === null || list === void 0 ? void 0 : list.filter(function (item) {
return item[uniqueColumnName] === value;
});
return arr.length > 0;
};
var getUpdatedData = function getUpdatedData(data, selectedList, uniqueColumnName, isCancelSelection, isSelectAll) {
var updatedData = data.map(function (item) {
if (isSelectAll || item._selected && !isCancelSelection || uniqueColumnName && item[uniqueColumnName] && selectedList && isElementPresent(selectedList, uniqueColumnName, item[uniqueColumnName]) && !isCancelSelection) {
item._selected = true;
} else if (isCancelSelection) {
item._selected = false;
} else {
item._selected = false;
}
return item;
});
return updatedData;
};
var uniqueByKey = function uniqueByKey(arr, key) {
var list = new Set();
return arr.filter(function (obj) {
var value = obj[key];
if (list.has(value)) {
return false;
} else {
list.add(value);
return true;
}
});
};
var removeDuplicate = function removeDuplicate(data, uniqueColumnName) {
if (uniqueColumnName) {
return uniqueByKey(data, uniqueColumnName);
}
return data;
};
var _excluded$K = ["children"];
var defaultErrorTemplate = function defaultErrorTemplate(props) {
var _props$errorType = props.errorType,
errorType = _props$errorType === void 0 ? 'DEFAULT' : _props$errorType;
var errorConfig = {
FAILED_TO_FETCH: {
title: 'Failed to fetch data',
description: 'We are unable to fetch the data. Try again.'
},
NO_RECORDS_FOUND: {
title: 'No results found',
description: 'Try adjusting your search or filters to find what you are looking for.'
},
DEFAULT: {
title: 'No results found',
description: 'Try adjusting your search or filters to find what you are looking for.'
}
};
var config = errorConfig[errorType] || errorConfig.DEFAULT;
return /*#__PURE__*/React.createElement(EmptyState, null, /*#__PURE__*/React.createElement(EmptyState.Title, null, config.title), /*#__PURE__*/React.createElement(EmptyState.Description, null, config.description));
};
var defaultProps = {
type: 'data',
size: 'standard',
showHead: true,
showMenu: true,
multipleSorting: true,
headerOptions: {},
withPagination: true,
paginationType: 'jump',
page: 1,
pageSize: 15,
draggable: true,
data: [],
displayData: [],
schema: [],
loading: false,
error: false,
loaderSchema: [],
sortingList: [],
filterList: {},
filterPosition: 'GRID',
searchDebounceDuration: 750,
pageJumpDebounceDuration: 750,
errorTemplate: defaultErrorTemplate,
showNestedRowTrigger: true,
infiniteScrollOptions: {
fetchRowsCount: 50,
fetchThreshold: 'balanced'
}
};
var Table = /*#__PURE__*/function (_React$Component) {
function Table(_props) {
var _this;
_classCallCheck(this, Table);
_this = _callSuper(this, Table, [_props]);
_defineProperty$1(_this, "debounceUpdate", void 0);
_defineProperty$1(_this, "selectedRowsRef", /*#__PURE__*/React.createRef());
_defineProperty$1(_this, "clearSelectionRef", /*#__PURE__*/React.createRef());
_defineProperty$1(_this, "selectAllRef", /*#__PURE__*/React.createRef());
_defineProperty$1(_this, "currentRequestPageRef", /*#__PURE__*/React.createRef());
_defineProperty$1(_this, "updateData", function (searchUpdate) {
if (_this.state.async) {
_this.setState({
loading: true
});
}
if (searchUpdate) {
_this.debounceUpdate();
} else {
_this.updateDataFn();
}
});
_defineProperty$1(_this, "fetchDataOnScroll", /*#__PURE__*/function () {
var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(props) {
var _this$state, sortingList, filterList, searchTerm, _this$props, fetchData, uniqueColumnName, page, rowsCount, opts, res;
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_this$state = _this.state, sortingList = _this$state.sortingList, filterList = _this$state.filterList, searchTerm = _this$state.searchTerm;
_this$props = _this.props, fetchData = _this$props.fetchData, uniqueColumnName = _this$props.uniqueColumnName;
page = props.page, rowsCount = props.rowsCount;
opts = {
page: page,
pageSize: rowsCount,
sortingList: sortingList,
filterList: filterList,
searchTerm: searchTerm
};
if (!fetchData) {
_context.next = 16;
break;
}
_context.prev = 5;
_context.next = 8;
return fetchData(opts);
case 8:
res = _context.sent;
_this.setState(function (prevState) {
var newList = [].concat(_toConsumableArray(prevState.data), _toConsumableArray(res.data));
var dataReplica = JSON.parse(JSON.stringify(newList));
var preSelectedRows = newList.filter(function (item) {
return item._selected;
});
if (_this.clearSelectionRef.current) {
_this.selectedRowsRef.current = [];
} else {
_this.selectedRowsRef.current = _this.selectedRowsRef.current ? removeDuplicate([].concat(_toConsumableArray(_this.selectedRowsRef.current), _toConsumableArray(preSelectedRows)), uniqueColumnName) : removeDuplicate(_toConsumableArray(preSelectedRows), uniqueColumnName);
}
var selectedData = getUpdatedData(dataReplica, _this.selectedRowsRef.current, uniqueColumnName, _this.clearSelectionRef.current, _this.selectAllRef.current);
return {
data: selectedData,
totalRecords: selectedData.length,
totalRowsCount: res.totalRowsCount || _this.state.totalRowsCount,
loading: false,
error: !selectedData.length
};
});
return _context.abrupt("return", res.data);
case 13:
_context.prev = 13;
_context.t0 = _context["catch"](5);
throw new Error('Failed to fetch data');
case 16:
return _context.abrupt("return", []);
case 17:
case "end":
return _context.stop();
}
}, _callee, null, [[5, 13]]);
}));
return function (_x) {
return _ref.apply(this, arguments);
};
}());
_defineProperty$1(_this, "updateDataFn", function () {
var _this$props2 = _this.props,
fetchData = _this$props2.fetchData,
pageSize = _this$props2.pageSize,
withPagination = _this$props2.withPagination,
dataProp = _this$props2.data,
onSearch = _this$props2.onSearch,
uniqueColumnName = _this$props2.uniqueColumnName,
enableInfiniteScroll = _this$props2.enableInfiniteScroll,
infiniteScrollOptions = _this$props2.infiniteScrollOptions;
var _this$state2 = _this.state,
async = _this$state2.async,
page = _this$state2.page,
sortingList = _this$state2.sortingList,
filterList = _this$state2.filterList,
searchTerm = _this$state2.searchTerm;
_this.onSelect(-1, false);
var opts = {
page: page,
pageSize: enableInfiniteScroll && infiniteScrollOptions ? infiniteScrollOptions.fetchRowsCount * 2 : pageSize,
sortingList: sortingList,
filterList: filterList,
searchTerm: searchTerm
};
if (!withPagination && !enableInfiniteScroll) {
delete opts.page;
delete opts.pageSize;
}
if (async) {
if (fetchData) {
var requestPage = page;
_this.currentRequestPageRef.current = requestPage;
fetchData(opts).then(function (res) {
if (_this.currentRequestPageRef.current !== requestPage) {
return;
}
var shouldClearSearching = !_this.state.searchTerm || _this.state.searchTerm.trim() === '';
if (!res.searchTerm || res.searchTerm && res.searchTerm === _this.state.searchTerm) {
var data = res.data;
var dataReplica = JSON.parse(JSON.stringify(data));
var schema = _this.state.schema.length ? _this.state.schema : res.schema;
var preSelectedRows = data.filter(function (item) {
return item._selected;
});
if (_this.clearSelectionRef.current) {
_this.selectedRowsRef.current = [];
} else {
_this.selectedRowsRef.current = _this.selectedRowsRef.current ? removeDuplicate([].concat(_toConsumableArray(_this.selectedRowsRef.current), _toConsumableArray(preSelectedRows)), uniqueColumnName) : removeDuplicate(_toConsumableArray(preSelectedRows), uniqueColumnName);
}
var selectedData = getUpdatedData(dataReplica, _this.selectedRowsRef.current, uniqueColumnName, _this.clearSelectionRef.current, _this.selectAllRef.current);
_this.setState({
data: selectedData,
displayData: data,
schema: schema,
selectAll: getSelectAll(selectedData, _this.props.selectDisabledRow, _this.clearSelectionRef.current),
totalRecords: res.count,
totalRowsCount: res.totalRowsCount || _this.state.totalRowsCount,
loading: false,
error: !data.length,
errorType: 'NO_RECORDS_FOUND',
isSearching: false
});
} else if (shouldClearSearching) {
_this.setState({
isSearching: false
});
}
})["catch"](function () {
if (_this.currentRequestPageRef.current === requestPage) {
_this.setState({
loading: false,
error: true,
errorType: 'FAILED_TO_FETCH',
isSearching: false
});
}
});
}
} else {
var schema = _this.state.schema;
var filteredData = filterData(schema, dataProp, filterList);
var searchedData = onSearch && opts.searchTerm !== undefined ? onSearch(filteredData, opts.searchTerm) : filteredData;
var sortedData = sortData(schema, searchedData, sortingList);
var renderedData = sortedData;
var totalRecords = sortedData.length;
if (withPagination && page && pageSize) {
renderedData = paginateData(renderedData, page, pageSize);
}
var renderedSchema = _this.state.schema.length ? _this.state.schema : schema;
var preSelectedRows = renderedData.filter(function (item) {
return item._selected;
});
var renderedDataReplica = JSON.parse(JSON.stringify(renderedData));
if (_this.clearSelectionRef.current) {
_this.selectedRowsRef.current = [];
} else {
_this.selectedRowsRef.current = _this.selectedRowsRef.current ? removeDuplicate([].concat(_toConsumableArray(_this.selectedRowsRef.current), _toConsumableArray(preSelectedRows)), uniqueColumnName) : removeDuplicate(_toConsumableArray(preSelectedRows), uniqueColumnName);
}
var selectedData = getUpdatedData(renderedDataReplica, _this.selectedRowsRef.current, uniqueColumnName, _this.clearSelectionRef.current, _this.selectAllRef.current);
_this.setState({
totalRecords: totalRecords,
error: !renderedData.length,
errorType: 'NO_RECORDS_FOUND',
selectAll: getSelectAll(renderedData, _this.props.selectDisabledRow, _this.clearSelectionRef.current),
schema: renderedSchema,
displayData: sortedData,
data: selectedData,
totalRowsCount: sortedData.length,
isSearching: false
});
}
});
_defineProperty$1(_this, "onSelect", function (rowIndexes, selected) {
var data = _this.state.data;
var _this$props3 = _this.props,
onSelect = _this$props3.onSelect,
uniqueColumnName = _this$props3.uniqueColumnName;
if (_this.selectAllRef.current && rowIndexes !== -1 && !selected) {
_this.selectAllRef.current = false;
_this.selectedRowsRef.current = [];
var _indexes = Array.from({
length: data.length
}, function (_, i) {
return i;
});
var _newData = updateBatchData(data, _indexes, {
_selected: false
}, _this.props.selectDisabledRow);
_this.setState({
data: _newData,
selectAll: {
checked: false,
indeterminate: false
}
});
if (onSelect) {
if (_this.props.uniqueColumnName) {
onSelect(_indexes, selected, _this.selectedRowsRef.current, _this.selectAllRef.current);
} else {
// To avoid breaking the current selection flow
onSelect(_indexes, selected, rowIndexes === -1 ? [] : _newData.filter(function (d) {
return d._selected;
}));
}
}
return;
}
var indexes = [rowIndexes];
var rowData = data[rowIndexes];
var selectedItemList = rowIndexes === -1 ? [] : [rowData];
var newData = data;
if (rowIndexes >= 0) {
newData = updateBatchData(data, indexes, {
_selected: selected
}, _this.props.selectDisabledRow);
_this.resetClearSelection();
_this.setState({
data: newData,
selectAll: getSelectAll(newData, _this.props.selectDisabledRow, _this.clearSelectionRef.current)
});
if (_this.selectedRowsRef.current && selected) {
selectedItemList = [_objectSpread2(_objectSpread2({}, rowData), {}, {
_selected: selected
})].concat(_toConsumableArray(_this.selectedRowsRef.current));
}
if (!selected && uniqueColumnName) {
selectedItemList = _this.selectedRowsRef.current.filter(function (item) {
return item[uniqueColumnName] !== rowData[uniqueColumnName];
});
}
_this.selectedRowsRef.current = removeDuplicate(selectedItemList, uniqueColumnName);
} else if (rowIndexes === -1 && _this.selectedRowsRef.current) {
selectedItemList = _this.selectedRowsRef.current;
}
if (onSelect) {
if (_this.props.uniqueColumnName) {
var _selectedItemList;
onSelect(indexes, selected, rowIndexes === -1 && ((_selectedItemList = selectedItemList) === null || _selectedItemList === void 0 ? void 0 : _selectedItemList.length) === 0 ? [] : _this.selectedRowsRef.current, _this.selectAllRef.current);
} else {
// To avoid breaking the current selection flow
onSelect(indexes, selected, rowIndexes === -1 ? [] : newData.filter(function (d) {
return d._selected;
}));
}
}
});
_defineProperty$1(_this, "onSelectAll", function (selected, selectAll, headerCheckbox) {
var _this$props4 = _this.props,
onSelect = _this$props4.onSelect,
uniqueColumnName = _this$props4.uniqueColumnName;
var data = _this.state.data;
var indexes = Array.from({
length: data.length
}, function (_, i) {
return i;
});
var newData = updateBatchData(data, indexes, {
_selected: selected
}, _this.props.selectDisabledRow);
var selectedIndex = [];
newData.forEach(function (item, key) {
if (item._selected) {
selectedIndex.push(key);
}
});
var selectedData = [];
if (selected) {
_this.resetClearSelection();
selectedData = selectAll === undefined ? [].concat(_toConsumableArray(_this.selectedRowsRef.current || []), _toConsumableArray(newData.filter(function (d) {
return d._selected;
}))) : _this.selectedRowsRef.current;
} else if (!selected && headerCheckbox && uniqueColumnName) {
_this.selectAllRef.current = false;
_this.selectedRowsRef.current = [].concat(_toConsumableArray(_this.selectedRowsRef.current || []), _toConsumableArray(newData));
_this.selectedRowsRef.current = _this.selectedRowsRef.current.filter(function (item1) {
return !newData.some(function (item2) {
return item1[uniqueColumnName] === item2[uniqueColumnName];
});
});
} else {
_this.selectedRowsRef.current = [];
_this.selectAllRef.current = false;
}
if (!(headerCheckbox && !selected)) {
_this.selectedRowsRef.current = removeDuplicate(selectedData, uniqueColumnName);
}
if (onSelect) {
if (_this.props.uniqueColumnName) {
if (headerCheckbox && !selected) {
onSelect(selectedIndex, selected, removeDuplicate(_this.selectedRowsRef.current, uniqueColumnName), _this.selectAllRef.current);
} else {
onSelect(selectedIndex, selected, removeDuplicate(selectedData, uniqueColumnName), _this.selectAllRef.current);
}
} else {
onSelect(selectedIndex, selected, newData.filter(function (d) {
return d._selected;
}), selectAll);
}
}
_this.setState({
data: newData,
selectAll: getSelectAll(newData, _this.props.selectDisabledRow)
});
});
_defineProperty$1(_this, "onPageChange", function (newPage) {
_this.setState({
page: newPage
});
});
_defineProperty$1(_this, "updateSchema", function (newSchema) {
_this.setState({
schema: newSchema
});
});
_defineProperty$1(_this, "updateSortingList", function (newSortingList) {
var multipleSorting = _this.props.multipleSorting;
_this.setState({
sortingList: multipleSorting ? _toConsumableArray(newSortingList) : newSortingList.slice(-1),
page: 1
});
});
_defineProperty$1(_this, "updateFilterList", function (newFilterList) {
_this.setState({
filterList: newFilterList,
page: 1
});
});
_defineProperty$1(_this, "updateSearchTerm", function (newSearchTerm) {
var isSearching = !!newSearchTerm && newSearchTerm.trim() !== '';
_this.setState({
searchTerm: newSearchTerm,
page: 1,
isSearching: isSearching
});
});
_defineProperty$1(_this, "onClearSelection", function () {
_this.selectedRowsRef.current = [];
_this.clearSelectionRef.current = true;
_this.selectAllRef.current = false;
_this.onSelectAll(false);
_this.setState({
selectAll: getSelectAll([], _this.props.selectDisabledRow, _this.clearSelectionRef.current)
});
});
_defineProperty$1(_this, "resetClearSelection", function () {
_this.clearSelectionRef.current = false;
});
_defineProperty$1(_this, "onSelectAllRows", function () {
_this.selectAllRef.current = _this.props.uniqueColumnName ? true : false;
_this.onSelectAll(true, true);
});
_defineProperty$1(_this, "selectAllRows", function () {
_this.onSelectAllRows();
});
_defineProperty$1(_this, "clearAllSelection", function () {
_this.onClearSelection();
});
var _async = 'fetchData' in _this.props;
var _data = _props.data || [];
var _schema = _props.schema || [];
_this.state = {
async: _async,
data: !_async ? _data : [],
displayData: !_async ? _data : [],
schema: !_async ? _schema : [],
page: _props.page,
sortingList: _props.sortingList,
filterList: _props.filterList,
totalRecords: !_async ? _data.length : 0,
loading: !_async ? _props.loading : true,
error: !_async ? _props.error : false,
errorType: _props.errorType,
selectAll: getSelectAll([]),
searchTerm: undefined,
totalRowsCount: !_async ? _data.length : 0,
isSearching: false
};
_this.debounceUpdate = debounce$1(_props.searchDebounceDuration, _this.updateDataFn);
_this.currentRequestPageRef.current = _props.page;
return _this;
}
_inherits(Table, _React$Component);
return _createClass(Table, [{
key: "componentDidMount",
value: function componentDidMount() {
this.updateData();
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
var _this2 = this;
if (!this.state.async) {
if (prevProps.error !== this.props.error) {
var _this$props5 = this.props,
_this$props5$data = _this$props5.data,
data = _this$props5$data === void 0 ? [] : _this$props5$data,
_this$props5$schema = _this$props5.schema,
schema = _this$props5$schema === void 0 ? [] : _this$props5$schema;
this.setState({
data: data,
displayData: data,
schema: schema,
error: this.props.error || false,
errorType: this.props.errorType,
page: 1,
totalRecords: data.length || 0,
selectAll: getSelectAll([]),
totalRowsCount: data.length || 0
});
}
if (prevProps.loading !== this.props.loading) {
var _this$props6 = this.props,
_this$props6$data = _this$props6.data,
_data2 = _this$props6$data === void 0 ? [] : _this$props6$data,
_this$props6$schema = _this$props6.schema,
_schema2 = _this$props6$schema === void 0 ? [] : _this$props6$schema;
this.setState({
data: _data2,
displayData: _data2,
schema: _schema2,
loading: this.props.loading || false,
error: this.props.error || false,
errorType: this.props.errorType,
page: 1,
totalRecords: _data2.length || 0,
selectAll: getSelectAll([]),
totalRowsCount: _data2.length || 0
}, function () {
_this2.updateData();
});
}
}
if (prevProps.data !== this.props.data) {
var _this$props7 = this.props,
_this$props7$data = _this$props7.data,
_data3 = _this$props7$data === void 0 ? [] : _this$props7$data,
_this$props7$schema = _this$props7.schema,
_schema3 = _this$props7$schema === void 0 ? [] : _this$props7$schema;
this.setState({
data: _data3,
displayData: _data3,
schema: _schema3,
loading: this.props.loading || false,
error: this.props.error || false,
errorType: this.props.errorType,
page: 1,
totalRecords: _data3.length || 0,
selectAll: getSelectAll([]),
totalRowsCount: _data3.length || 0
}, function () {
_this2.updateData();
});
}
if (prevState.page !== this.state.page) {
var onPageChange = this.props.onPageChange;
if (onPageChange) onPageChange(this.state.page);
}
if (prevState.page !== this.state.page || prevState.filterList !== this.state.filterList || prevState.sortingList !== this.state.sortingList || prevState.searchTerm !== this.state.searchTerm) {
if (!this.props.loading) {
var searchUpdate = prevState.searchTerm !== this.state.searchTerm;
this.updateData(searchUpdate);
}
}
}
}, {
key: "render",
value: function render() {
var _this$props8 = this.props,
showHead = _this$props8.showHead,
type = _this$props8.type,
size = _this$props8.size,
headCellTooltip = _this$props8.headCellTooltip,
separator = _this$props8.separator,
draggable = _this$props8.draggable,
nestedRows = _this$props8.nestedRows,
nestedRowRenderer = _this$props8.nestedRowRenderer,
withHeader = _this$props8.withHeader,
headerOptions = _this$props8.headerOptions,
withCheckbox = _this$props8.withCheckbox,
showMenu = _this$props8.showMenu,
withPagination = _this$props8.withPagination,
paginationType = _this$props8.paginationType,
pageSize = _this$props8.pageSize,
pageJumpDebounceDuration = _this$props8.pageJumpDebounceDuration,
onRowClick = _this$props8.onRowClick,
loaderSchema = _this$props8.loaderSchema,
errorTemplate = _this$props8.errorTemplate,
className = _this$props8.className,
filterPosition = _this$props8.filterPosition,
uniqueColumnName = _this$props8.uniqueColumnName,
checkboxAlignment = _this$props8.checkboxAlignment,
virtualRowOptions = _this$props8.virtualRowOptions,
enableInfiniteScroll = _this$props8.enableInfiniteScroll,
infiniteScrollOptions = _this$props8.infiniteScrollOptions,
onScroll = _this$props8.onScroll,
highlightRegex = _this$props8.highlightRegex,
showNestedRowTrigger = _this$props8.showNestedRowTrigger,
ariaLabel = _this$props8['aria-label'],
ariaLabelledBy = _this$props8['aria-labelledby'];
var baseProps = extractBaseProps(this.props);
var _ref2 = headerOptions,
headerChildren = _ref2.children,
headerAttr = _objectWithoutProperties(_ref2, _excluded$K);
var classes = className ? " ".concat(className) : '';
var _this$state3 = this.state,
totalRecords = _this$state3.totalRecords,
searchTerm = _this$state3.searchTerm;
var totalPages = getTotalPages(totalRecords, pageSize);
var tableClass = classnames(tableStyles['Table'], classes);
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
className: tableClass,
"data-test": "DesignSystem-Table-wrapper",
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy
}), withHeader && /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-Table-header"
}, /*#__PURE__*/React.createElement(Header, _extends$2({}, this.state, {
updateSchema: this.updateSchema,
updateFilterList: this.updateFilterList,
updateSearchTerm: this.updateSearchTerm,
showHead: showHead,
onSelectAll: this.onSelectAll,
withCheckbox: withCheckbox,
withPagination: withPagination,
pageSize: pageSize,
showFilters: filterPosition === 'HEADER',
selectedRowsRef: this.selectedRowsRef,
onClearSelection: this.onClearSelection,
onSelectAllRows: this.onSelectAllRows,
selectedAllRef: this.selectAllRef,
uniqueColumnName: uniqueColumnName,
enableInfiniteScroll: enableInfiniteScroll
}, headerAttr), headerChildren)), /*#__PURE__*/React.createElement("div", {
className: tableStyles['Table-grid']
}, /*#__PURE__*/React.createElement(Grid, _extends$2({}, this.state, {
key: this.state.searchTerm,
updateData: this.updateData,
updateSchema: this.updateSchema,
updateSortingList: this.updateSortingList,
updateFilterList: this.updateFilterList,
withCheckbox: withCheckbox,
checkboxAlignment: checkboxAlignment,
onSelect: this.onSelect,
onSelectAll: this.onSelectAll,
showMenu: showMenu,
showHead: showHead,
type: type,
size: size,
headCellTooltip: headCellTooltip,
separator: separator,
draggable: draggable,
nestedRows: nestedRows,
nestedRowRenderer: nestedRowRenderer,
withPagination: withPagination && totalPages > 1,
pageSize: pageSize,
loaderSchema: loaderSchema,
errorTemplate: errorTemplate && errorTemplate({
errorType: this.state.errorType
}),
onRowClick: onRowClick,
showFilters: filterPosition === 'GRID',
fetchDataOnScroll: this.fetchDataOnScroll,
virtualRowOptions: virtualRowOptions,
enableRowVirtualization: this.props.enableRowVirtualization,
enableInfiniteScroll: enableInfiniteScroll,
infiniteScrollOptions: infiniteScrollOptions,
onScroll: onScroll,
searchTerm: searchTerm,
highlightRegex: highlightRegex,
showNestedRowTrigger: showNestedRowTrigger
}))), withPagination && !this.state.error && !this.state.isSearching && totalPages > 1 && /*#__PURE__*/React.createElement("div", {
className: tableStyles['Table-pagination']
}, /*#__PURE__*/React.createElement(Pagination, {
page: this.state.page,
totalPages: getTotalPages(totalRecords, pageSize),
type: paginationType,
onPageChange: this.onPageChange,
pageJumpDebounceDuration: pageJumpDebounceDuration
})));
}
}]);
}(React.Component);
_defineProperty$1(Table, "defaultProps", defaultProps);
/**
* List component has been deprecated, please use [Listbox](https://mds.innovaccer.com/?path=/docs/components-listbox-all--all) component instead.
*
* **`List` is a pattern of `Table` with no Head Cells.**
*
* Please refer to stories of Table for examples. Simply replace `Table` with `List` to use it.
*/
var List = function List(props) {
return /*#__PURE__*/React.createElement(Table, _extends$2({}, props, {
showHead: false,
filterPosition: 'HEADER'
}));
};
List.defaultProps = defaultProps;
var css_248z$k = "/* Navigation */\n\n.navigation-module-Navigation-fsK-Z-4-30-3 {\n display: flex;\n}\n\n.navigation-module-Navigation--horizontal-Nlczj-4-30-3 {\n flex-grow: 1;\n justify-content: center;\n}\n\n.navigation-module-Navigation--vertical-JMMGv-4-30-3 {\n flex-direction: column;\n height: 100%;\n width: var(--spacing-640);\n}\n\n.navigation-module-Navigation--collapsed-ubuOj-4-30-3 {\n width: -moz-fit-content;\n width: fit-content;\n}\n\n.navigation-module-Navigation-body-zfrYs-4-30-3 {\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n padding-right: var(--spacing-20);\n}\n\n.navigation-module-Navigation-menu-Afh6p-4-30-3 {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n\n.navigation-module-Navigation-menu--horizontal-DbG8C-4-30-3 {\n height: var(--spacing-80);\n padding-right: var(--spacing-30);\n padding-left: var(--spacing-30);\n border-radius: var(--border-radius-40);\n margin: 0 var(--spacing-2-5);\n}\n\n.navigation-module-Navigation-menu--disabled-6BCHc-4-30-3 {\n pointer-events: none;\n}\n\n.navigation-module-Navigation-menu-Afh6p-4-30-3:hover {\n background-color: var(--secondary-light);\n}\n\n.navigation-module-Navigation-menu--active-vLg2d-4-30-3,\n.navigation-module-Navigation-menu--active-vLg2d-4-30-3:hover {\n background: var(--primary-lightest);\n}\n\n.navigation-module-Navigation-menu--vertical-SD8c9-4-30-3 {\n /* padding-top: var(--spacing-10); */\n /* padding-bottom: var(--spacing-10); */\n padding-left: var(--spacing-20);\n margin-top: var(--spacing-10);\n margin-bottom: var(--spacing-10);\n /* margin-right: var(--spacing-20); */\n border-radius: 0px var(--border-radius-40) var(--border-radius-40) 0px;\n}\n\n.navigation-module-Navigation-menu--rounded-RK5tK-4-30-3 {\n border-radius: var(--border-radius-40);\n}\n\n.navigation-module-Navigation-menu--subMenu-1Xkhm-4-30-3 {\n padding-top: var(--spacing-05);\n padding-bottom: var(--spacing-05);\n padding-left: 40px;\n margin-top: 0;\n}\n\n.navigation-module-Navigation-menuIcon-mI-8A-4-30-3 {\n padding: 8px;\n border-radius: 50%;\n cursor: pointer;\n}\n\n.navigation-module-Navigation-menuIcon--active-4-aoZ-4-30-3 {\n background: var(--primary-lightest);\n}\n\n.navigation-module-Navigation-menuLabel-qZLzA-4-30-3 {\n display: flex;\n flex-grow: 1;\n overflow: hidden;\n}\n\n.navigation-module-Navigation-menu-Afh6p-4-30-3 .navigation-module-Text-4ez7T-4-30-3 {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.navigation-module-Navigation-horizontalPills-CubKV-4-30-3 {\n margin-right: var(--spacing-10);\n}\n\n.navigation-module-Navigation-horizontalPills--disabled-mMjCG-4-30-3 {\n opacity: var(--opacity-10);\n}\n\n.navigation-module-Navigation-footer-Ia0x--4-30-3 {\n display: flex;\n align-items: center;\n padding: var(--spacing-10) var(--spacing-20);\n}\n\n.navigation-module-Navigation-footer--border--gDQG-4-30-3 {\n border-top: var(--border);\n}\n\n.navigation-module-Navigation-footerButton-HZKhA-4-30-3 {\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n border-radius: 50%;\n}\n\n.navigation-module-Navigation-footerButton-HZKhA-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.navigation-module-Navigation--collapsed-ubuOj-4-30-3 .navigation-module-Navigation-menuIcon--footer-I0MsK-4-30-3 {\n transform: rotate(180deg);\n}\n";
var styles$k = {"Navigation":"navigation-module-Navigation-fsK-Z-4-30-3","Navigation--horizontal":"navigation-module-Navigation--horizontal-Nlczj-4-30-3","Navigation--vertical":"navigation-module-Navigation--vertical-JMMGv-4-30-3","Navigation--collapsed":"navigation-module-Navigation--collapsed-ubuOj-4-30-3","Navigation-body":"navigation-module-Navigation-body-zfrYs-4-30-3","Navigation-menu":"navigation-module-Navigation-menu-Afh6p-4-30-3","Navigation-menu--horizontal":"navigation-module-Navigation-menu--horizontal-DbG8C-4-30-3","Navigation-menu--disabled":"navigation-module-Navigation-menu--disabled-6BCHc-4-30-3","Navigation-menu--active":"navigation-module-Navigation-menu--active-vLg2d-4-30-3","Navigation-menu--vertical":"navigation-module-Navigation-menu--vertical-SD8c9-4-30-3","Navigation-menu--rounded":"navigation-module-Navigation-menu--rounded-RK5tK-4-30-3","Navigation-menu--subMenu":"navigation-module-Navigation-menu--subMenu-1Xkhm-4-30-3","Navigation-menuIcon":"navigation-module-Navigation-menuIcon-mI-8A-4-30-3","Navigation-menuIcon--active":"navigation-module-Navigation-menuIcon--active-4-aoZ-4-30-3","Navigation-menuLabel":"navigation-module-Navigation-menuLabel-qZLzA-4-30-3","Text":"navigation-module-Text-4ez7T-4-30-3","Navigation-horizontalPills":"navigation-module-Navigation-horizontalPills-CubKV-4-30-3","Navigation-horizontalPills--disabled":"navigation-module-Navigation-horizontalPills--disabled-mMjCG-4-30-3","Navigation-footer":"navigation-module-Navigation-footer-Ia0x--4-30-3","Navigation-footer--border":"navigation-module-Navigation-footer--border--gDQG-4-30-3","Navigation-footerButton":"navigation-module-Navigation-footerButton-HZKhA-4-30-3","Navigation-menuIcon--footer":"navigation-module-Navigation-menuIcon--footer-I0MsK-4-30-3"};
styleInject(css_248z$k);
var useState$1 = React.useState;
var VerticalNavigation = function VerticalNavigation(props) {
var menus = props.menus,
active = props.active,
onClick = props.onClick,
expanded = props.expanded,
rounded = props.rounded,
onToggle = props.onToggle,
footer = props.footer,
autoCollapse = props.autoCollapse,
ariaLabel = props['aria-label'];
var _useState = useState$1({}),
_useState2 = _slicedToArray(_useState, 2),
menuState = _useState2[0],
setMenuState = _useState2[1];
React.useEffect(function () {
if (props.active) {
var currMenu = getMenu(menus, props.active);
if (currMenu) updateMenuState(currMenu, true);
}
}, [props.active]);
var updateMenuState = function updateMenuState(menu, val) {
var currMenu = getMenu(menus, menu);
if (currMenu) {
var nameSplit = currMenu.name.split('.');
if (nameSplit.length > 1 || currMenu.subMenu) {
var name = nameSplit[0];
if (autoCollapse) {
setMenuState(_defineProperty$1({}, name, val || !menuState[name]));
} else {
var menuData = _objectSpread2({}, menuState);
menuData[name] = val !== undefined ? val : !menuData[name];
setMenuState(menuData);
}
} else {
if (autoCollapse) {
if (!expanded) setMenuState({});
}
}
}
};
var onClickHandler = function onClickHandler(menu) {
if (!menu.disabled) {
if (menu.subMenu) {
if (!expanded) {
if (onClick) onClick(menu.subMenu[0]);
} else {
updateMenuState(menu);
}
} else {
if (onClick) onClick(menu);
}
}
};
var list = menus.map(function (menu, index) {
var activeMenu = expanded && !menuState[menu.name] && isMenuActive(menus, menu, active);
var activeMenuIcon = !expanded && isMenuActive(menus, menu, active) || activeMenu;
var menuClasses = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$k['Navigation-menu'], true), styles$k['Navigation-menu--vertical'], true), styles$k['Navigation-menu--active'], activeMenu), styles$k['Navigation-menu--rounded'], expanded && rounded));
var menuIconClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$k['Navigation-menuIcon'], true), styles$k['Navigation-menuIcon--active'], activeMenuIcon));
var handleMenuKeyDown = function handleMenuKeyDown(event) {
if (menu.disabled) return;
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
onClickHandler(menu);
}
};
return /*#__PURE__*/React.createElement("div", {
key: index,
"data-test": "DesignSystem-Navigation-VerticalNavigation--menuWrapper"
}, /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-Navigation-VerticalNavigation--menuItem",
className: menuClasses,
onClick: function onClick() {
return onClickHandler(menu);
},
onKeyDown: handleMenuKeyDown,
role: "button",
tabIndex: menu.disabled ? -1 : 0,
"aria-disabled": menu.disabled || undefined,
"aria-label": !expanded && menu.icon ? menu.label : undefined
}, menu.icon && /*#__PURE__*/React.createElement(Icon, {
"data-test": "DesignSystem-Navigation-VerticalNavigation--menuIcon",
className: menuIconClasses,
name: menu.icon,
appearance: getIconAppearance(activeMenuIcon, menu.disabled)
}), expanded && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
className: styles$k['Navigation-menuLabel']
}, /*#__PURE__*/React.createElement(Text$1, {
appearance: getTextAppearance(activeMenu, menu.disabled),
className: "ellipsis--noWrap"
}, menu.label)), menu.subMenu && menu.subMenu.length > 0 && /*#__PURE__*/React.createElement(Icon, {
"data-test": "DesignSystem-Navigation-VerticalNavigation--expandedSubMenuIcon",
className: "mx-4",
name: menuState[menu.name] ? 'keyboard_arrow_up' : 'keyboard_arrow_down',
appearance: "subtle"
}))), /*#__PURE__*/React.createElement("div", {
className: styles$k['Navigation-subMenu']
}, menuState[menu.name] && menu.subMenu && expanded && menu.subMenu.map(function (subMenu, ind) {
var isActive = isMenuActive(menus, subMenu, active);
var subMenuClasses = classnames(menuClasses, _defineProperty$1(_defineProperty$1({}, styles$k['Navigation-menu--subMenu'], true), styles$k['Navigation-menu--active'], isActive));
var handleSubMenuKeyDown = function handleSubMenuKeyDown(event) {
if (subMenu.disabled) return;
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
onClickHandler(subMenu);
}
};
return /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-Navigation-VerticalNavigation--subMenu",
key: ind,
className: subMenuClasses,
onClick: function onClick() {
return onClickHandler(subMenu);
},
onKeyDown: handleSubMenuKeyDown,
role: "button",
tabIndex: subMenu.disabled ? -1 : 0,
"aria-disabled": subMenu.disabled || undefined
}, /*#__PURE__*/React.createElement(Text$1, {
appearance: getTextAppearance(isActive, subMenu.disabled),
className: "ellipsis--noWrap"
}, subMenu.label));
})));
});
var footerClasses = classnames(styles$k['Navigation-footer'], styles$k['Navigation-footer--border']);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("nav", {
className: styles$k['Navigation-body'],
"aria-label": ariaLabel
}, list), footer && /*#__PURE__*/React.createElement("div", {
className: footerClasses
}, /*#__PURE__*/React.createElement(Button, {
type: "button",
appearance: "transparent",
icon: "menu_open",
className: styles$k['Navigation-footerButton'],
onClick: function onClick() {
return onToggle && onToggle(!expanded);
},
"aria-label": expanded ? 'Collapse navigation' : 'Expand navigation',
"aria-expanded": expanded
})));
};
VerticalNavigation.defaultProps = {
expanded: true,
autoCollapse: true,
rounded: false,
'aria-label': 'Vertical navigation'
};
/**
* ####NOTE: Navigation will be deprecated soon. VerticalNav and HorizontalNav will be supported.
*/
var Navigation = function Navigation(props) {
var type = props.type,
align = props.align,
menus = props.menus,
active = props.active,
onClick = props.onClick,
expanded = props.expanded,
rounded = props.rounded,
onToggle = props.onToggle,
footer = props.footer,
autoCollapse = props.autoCollapse,
className = props.className;
var ariaLabel = props['aria-label'];
var baseProps = extractBaseProps(props);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$k['Navigation'], true), styles$k["Navigation--".concat(type)], type), 'justify-content-center', type === 'horizontal' && align === 'center'), 'justify-content-start', type === 'horizontal' && align === 'left'), styles$k['Navigation--collapsed'], !expanded), className);
var renderNavigation = function renderNavigation() {
return type === 'horizontal' ? /*#__PURE__*/React.createElement(HorizontalNav, {
menus: menus,
active: active,
onClick: onClick,
"aria-label": ariaLabel
}) : /*#__PURE__*/React.createElement(VerticalNavigation, {
menus: menus,
active: active,
autoCollapse: autoCollapse,
expanded: expanded,
rounded: rounded,
footer: footer,
onToggle: onToggle,
onClick: onClick,
"aria-label": ariaLabel
});
};
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
className: classes
}), renderNavigation());
};
Navigation.defaultProps = {
type: 'horizontal',
align: 'center',
expanded: true,
autoCollapse: true,
rounded: false
};
var Status = function Status(props) {
var status = props.status,
meta = props.meta;
return /*#__PURE__*/React.createElement(React.Fragment, null, (status || meta) && /*#__PURE__*/React.createElement("div", {
className: styles$19['PageHeader-statusWrapper'],
"data-test": "DesignSystem-PageHeader--Status"
}, status, meta));
};
var Action = function Action(props) {
var actions = props.actions,
stacked = props.stacked,
level1Responsive = props.level1Responsive;
var classes = classnames(styles$19['PageHeader-group--actions'], _defineProperty$1(_defineProperty$1({}, styles$19['PageHeader-group--actions--stacked'], stacked), styles$19['PageHeader-group--actions--level1Responsive'], level1Responsive));
return /*#__PURE__*/React.createElement(React.Fragment, null, actions && /*#__PURE__*/React.createElement("div", {
className: classes,
"data-group": "actions",
"data-test": "DesignSystem-PageHeader--Actions"
}, actions));
};
var CenterNav = function CenterNav(props) {
var navigationPosition = props.navigationPosition,
navigation = props.navigation,
stepper = props.stepper,
ghost = props.ghost;
var showCenterNav = (navigation || stepper) && navigationPosition === 'center';
return /*#__PURE__*/React.createElement(React.Fragment, null, showCenterNav && /*#__PURE__*/React.createElement("div", {
className: classnames(styles$19['PageHeader-group--center'], _defineProperty$1({}, styles$19['PageHeader-group--center--ghost'], ghost)),
"data-group": "center",
"data-test": ghost ? undefined : 'DesignSystem-PageHeader--CenterNav',
"aria-hidden": ghost || undefined
}, /*#__PURE__*/React.createElement(Nav, {
navigation: navigation,
stepper: stepper,
noMargin: true
})));
};
var Nav = function Nav(props) {
var navigation = props.navigation,
stepper = props.stepper,
noMargin = props.noMargin,
responsiveNoMargin = props.responsiveNoMargin;
if (!navigation && !stepper) {
return null;
}
var classes = classnames(styles$19['PageHeader-navigationWrapper'], _defineProperty$1(_defineProperty$1({}, styles$19['PageHeader-navigationWrapper--noMargin'], noMargin), styles$19['PageHeader-navigationWrapper--noMarginSm'], responsiveNoMargin));
return /*#__PURE__*/React.createElement("div", {
className: classes,
"data-test": "DesignSystem-PageHeader--Nav"
}, navigation || stepper);
};
var BackButton = function BackButton(props) {
var button = props.button;
return /*#__PURE__*/React.createElement(React.Fragment, null, button && /*#__PURE__*/React.createElement("div", {
className: "mr-5 my-3",
"data-test": "DesignSystem-PageHeader--Button"
}, button));
};
var Title = function Title(props) {
var badge = props.badge,
title = props.title;
return /*#__PURE__*/React.createElement("div", {
className: styles$19['PageHeader-titleWrapper'],
"data-test": "DesignSystem-PageHeader--Title"
}, /*#__PURE__*/React.createElement(Heading, {
className: styles$19['PageHeader-title'],
as: "h1"
}, title), badge);
};
var PageHeader = function PageHeader(props) {
var title = props.title,
navigation = props.navigation,
stepper = props.stepper,
actions = props.actions,
tabs = props.tabs,
breadcrumbs = props.breadcrumbs,
badge = props.badge,
separator = props.separator,
status = props.status,
meta = props.meta,
navigationPosition = props.navigationPosition,
className = props.className,
button = props.button,
ariaLabel = props['aria-label'];
var baseProps = extractBaseProps(props);
var isLevel1 = !!(breadcrumbs || button);
var wrapperClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$19['PageHeader-wrapper'], true), styles$19['PageHeader-wrapper--withTabs'], tabs), className);
var hasCenterNav = !!(navigation || stepper) && navigationPosition === 'center';
var classes = classnames(styles$19.PageHeader);
var rowRef = useRef(null);
var _useState = useState$3('full'),
_useState2 = _slicedToArray(_useState, 2),
stackedMode = _useState2[0],
setStackedMode = _useState2[1];
// Title is capped at 320px — beyond this it truncates with ellipsis so extra
// width doesn't buy anything meaningful for layout decisions.
var TITLE_CAP = 320;
useEffect$2(function () {
var row = rowRef.current;
if (!row || !window.ResizeObserver) return;
var measure = function measure() {
var _centerEl$classList$c, _actionsEl$classList$;
var titleEl = row.querySelector('[data-group="title"]');
var centerEl = row.querySelector('[data-group="center"]');
var actionsEl = row.querySelector('[data-group="actions"]');
if (!titleEl) return;
// Measure title-heading and status/meta separately. Only the heading
// truncates past TITLE_CAP — status/meta wraps, so capping the combined
// group would under-report when meta is long and miss real overflow.
// Setting width:max-content on each child is required because, as
// block-level children of titleEl, they otherwise stretch to titleEl's
// own width rather than reporting their natural content widths.
var measureTitleDesired = function measureTitleDesired() {
var _statusEl$offsetWidth;
var titleTextEl = titleEl.querySelector('[data-test="DesignSystem-PageHeader--Title"]');
var statusEl = titleEl.querySelector('[data-test="DesignSystem-PageHeader--Status"]');
var prevTitleW = titleTextEl === null || titleTextEl === void 0 ? void 0 : titleTextEl.style.width;
var prevStatusW = statusEl === null || statusEl === void 0 ? void 0 : statusEl.style.width;
if (titleTextEl) titleTextEl.style.width = 'max-content';
if (statusEl) statusEl.style.width = 'max-content';
var titleW = titleTextEl ? Math.min(titleTextEl.offsetWidth, TITLE_CAP) : 0;
var statusW = (_statusEl$offsetWidth = statusEl === null || statusEl === void 0 ? void 0 : statusEl.offsetWidth) !== null && _statusEl$offsetWidth !== void 0 ? _statusEl$offsetWidth : 0;
if (titleTextEl && prevTitleW !== undefined) titleTextEl.style.width = prevTitleW;
if (statusEl && prevStatusW !== undefined) statusEl.style.width = prevStatusW;
return Math.max(titleW, statusW);
};
// Strip stacked classes before measuring so we read natural layout widths.
// Also temporarily restore the grid (withCenter) if not in full mode —
// grid is only applied in full mode now (center-wrapped uses flex), but we
// need it for the max-content column trick to work accurately.
var withCenterClass = styles$19['PageHeader-row--withCenter'];
var asClass = styles$19['PageHeader-row--allStacked'];
var ghostClass = styles$19['PageHeader-group--center--ghost'];
// Stacked styling lives on the children themselves (flat modifier classes),
// so resetting the row alone is not enough — strip the child modifiers too,
// otherwise the title/actions stay flex:0 0 100% and measurement oscillates.
var titleStackedClass = styles$19['PageHeader-group--title--stacked'];
var actionsStackedClass = styles$19['PageHeader-group--actions--stacked'];
var hadAS = row.classList.contains(asClass);
var hadWithCenter = row.classList.contains(withCenterClass);
var hadGhost = (_centerEl$classList$c = centerEl === null || centerEl === void 0 ? void 0 : centerEl.classList.contains(ghostClass)) !== null && _centerEl$classList$c !== void 0 ? _centerEl$classList$c : false;
var hadTitleStacked = titleEl.classList.contains(titleStackedClass);
var hadActionsStacked = (_actionsEl$classList$ = actionsEl === null || actionsEl === void 0 ? void 0 : actionsEl.classList.contains(actionsStackedClass)) !== null && _actionsEl$classList$ !== void 0 ? _actionsEl$classList$ : false;
row.classList.remove(asClass);
if (!hadWithCenter && hasCenterNav) row.classList.add(withCenterClass);
if (hadGhost && centerEl) centerEl.classList.remove(ghostClass);
titleEl.classList.remove(titleStackedClass);
actionsEl === null || actionsEl === void 0 || actionsEl.classList.remove(actionsStackedClass);
var rowWidth = row.offsetWidth;
if (hasCenterNav) {
var _centerEl$offsetWidth, _actionsEl$offsetWidt;
// Grid layout — switch all columns to max-content so each element reports
// its natural unconstrained width (1fr columns otherwise clamp offsetWidth).
var prevCols = row.style.gridTemplateColumns;
row.style.gridTemplateColumns = 'max-content max-content max-content';
var titleDesired = measureTitleDesired();
var centerDesired = (_centerEl$offsetWidth = centerEl === null || centerEl === void 0 ? void 0 : centerEl.offsetWidth) !== null && _centerEl$offsetWidth !== void 0 ? _centerEl$offsetWidth : 0;
var actionsDesired = (_actionsEl$offsetWidt = actionsEl === null || actionsEl === void 0 ? void 0 : actionsEl.offsetWidth) !== null && _actionsEl$offsetWidt !== void 0 ? _actionsEl$offsetWidt : 0;
row.style.gridTemplateColumns = prevCols;
if (hadGhost && centerEl) centerEl.classList.add(ghostClass);
if (!hadWithCenter) row.classList.remove(withCenterClass);
if (hadAS) row.classList.add(asClass);
if (hadTitleStacked) titleEl.classList.add(titleStackedClass);
if (hadActionsStacked && actionsEl) actionsEl.classList.add(actionsStackedClass);
// Grid gives equal 1fr to title and actions columns. Check each half
// independently: title must fit the left half, actions the right half.
var halfWidth = rowWidth / 2;
var leftOverflows = titleDesired + centerDesired / 2 > halfWidth;
var rightOverflows = actionsDesired + centerDesired / 2 > halfWidth;
var actionsWrap = titleDesired + actionsDesired > rowWidth;
if (actionsWrap) {
setStackedMode('all-stacked');
} else if (leftOverflows || rightOverflows) {
setStackedMode('center-wrapped');
} else {
setStackedMode('full');
}
} else {
var _actionsEl$offsetWidt2;
// Bottom nav (consumer-set) or no nav — only check if actions fit on the
// title row. Temporarily reshape the row into a max-content grid so each
// element reports its natural width. Flex won't do here: flex-grow stretches
// the title past content, and once title+actions exceed rowWidth flex-wrap
// fires mid-measurement (title takes full row, actions onto next line),
// inflating offsetWidth so the sum spuriously exceeds rowWidth → false stack.
// The grid trick mirrors the hasCenterNav branch above.
var prevDisplay = row.style.display;
var _prevCols = row.style.gridTemplateColumns;
row.style.display = 'grid';
row.style.gridTemplateColumns = actionsEl ? 'max-content max-content' : 'max-content';
var _titleDesired = measureTitleDesired();
var _actionsDesired = (_actionsEl$offsetWidt2 = actionsEl === null || actionsEl === void 0 ? void 0 : actionsEl.offsetWidth) !== null && _actionsEl$offsetWidt2 !== void 0 ? _actionsEl$offsetWidt2 : 0;
row.style.display = prevDisplay;
row.style.gridTemplateColumns = _prevCols;
if (hadAS) row.classList.add(asClass);
if (hadTitleStacked) titleEl.classList.add(titleStackedClass);
if (hadActionsStacked && actionsEl) actionsEl.classList.add(actionsStackedClass);
if (actionsEl && _titleDesired + _actionsDesired > rowWidth) {
setStackedMode('all-stacked');
} else {
setStackedMode('full');
}
}
};
var observer = new window.ResizeObserver(measure);
observer.observe(row);
measure();
return function () {
return observer.disconnect();
};
}, [hasCenterNav, navigation, stepper, actions]);
var isStacked = stackedMode === 'all-stacked';
var isLevel1WithActions = isLevel1 && !!actions;
var rowClasses = classnames(styles$19['PageHeader-row'], _defineProperty$1(_defineProperty$1({}, styles$19['PageHeader-row--withCenter'], hasCenterNav && stackedMode === 'full'), styles$19['PageHeader-row--allStacked'], isStacked));
var titleGroupClasses = classnames(styles$19['PageHeader-group--title'], _defineProperty$1({}, styles$19['PageHeader-group--title--stacked'], isStacked));
var bottomClasses = classnames('pl-3', styles$19['PageHeader-bottom'], _defineProperty$1(_defineProperty$1({}, styles$19['PageHeader-bottom--withTabs'], !!tabs), styles$19['PageHeader-bottom--level1Responsive'], isLevel1WithActions));
// When center nav is auto-moved to bottom, keep it ghost in the row for measurement
// (position:absolute, visibility:hidden) so recovery detection still works.
var centerNavGhost = hasCenterNav && stackedMode !== 'full';
var centerNavProps = {
navigationPosition: navigationPosition,
navigation: navigation,
stepper: stepper,
ghost: centerNavGhost
};
// Nav renders in PageHeader-bottom if: consumer set bottom, or collision moved it there
var showNavInBottom = !!(navigation || stepper) && (navigationPosition === 'bottom' || centerNavGhost);
return /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-PageHeader"
}, /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
className: wrapperClasses,
"aria-label": ariaLabel
}), breadcrumbs && /*#__PURE__*/React.createElement("div", {
className: "pl-6",
"data-test": "DesignSystem-PageHeader--Breadcrumbs"
}, breadcrumbs), /*#__PURE__*/React.createElement("div", {
className: "d-flex pl-6"
}, /*#__PURE__*/React.createElement(BackButton, {
button: button
}), /*#__PURE__*/React.createElement("div", {
className: classes
}, /*#__PURE__*/React.createElement("div", {
className: rowClasses,
ref: rowRef
}, /*#__PURE__*/React.createElement("div", {
className: titleGroupClasses,
"data-group": "title"
}, /*#__PURE__*/React.createElement(Title, {
badge: badge,
title: title
}), /*#__PURE__*/React.createElement(Status, {
status: status,
meta: meta
})), /*#__PURE__*/React.createElement(CenterNav, centerNavProps), /*#__PURE__*/React.createElement(Action, {
actions: actions,
navigation: navigation,
stepper: stepper,
stacked: isStacked,
level1Responsive: isLevel1WithActions
})))), (tabs || showNavInBottom) && /*#__PURE__*/React.createElement("div", {
className: bottomClasses
}, showNavInBottom && /*#__PURE__*/React.createElement(Nav, {
navigation: navigation,
stepper: stepper,
noMargin: !!tabs,
responsiveNoMargin: isLevel1WithActions
}), tabs && /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-PageHeader--Tabs"
}, tabs))), separator && /*#__PURE__*/React.createElement(Divider, {
appearance: "header"
}));
};
PageHeader.defaultProps = {
navigationPosition: 'center',
separator: true
};
var css_248z$j = ".fileList-module-FileIcon-01qzb-4-30-3 {\n padding: var(--spacing-20);\n border-radius: var(--border-radius-full);\n}\n.fileList-module-FileItem-HpCE9-4-30-3:not(:last-child) {\n border-bottom: var(--border);\n width: 100%;\n box-sizing: border-box;\n}\n.fileList-module-FileItem-HpCE9-4-30-3 {\n padding-top: var(--spacing-20);\n padding-bottom: var(--spacing-20);\n padding-left: var(--spacing-30);\n padding-right: var(--spacing-20);\n}\n.fileList-module-FileItem-fileContent-vusoO-4-30-3 {\n display: flex;\n justify-content: center;\n align-items: center;\n min-width: 0;\n}\n.fileList-module-FileItem-actions-zH5Wo-4-30-3 {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n}\n.fileList-module-FileItem-file-jkZDb-4-30-3 {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.fileList-module-FileItem-size-Jn3i4-4-30-3 {\n margin-right: var(--spacing-20);\n margin-left: var(--spacing-20);\n flex-shrink: 0;\n}\n.fileList-module-FileItem-text-JzD0s-4-30-3 {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-right: var(--spacing-20);\n margin-left: var(--spacing-30);\n}\n.fileList-module-FileItem-error-srZSs-4-30-3 {\n margin-left: 40px;\n}\n\n.fileList-module-FileIcon--image-8GeUP-4-30-3 {\n background: var(--alert-lightest);\n color: var(--alert);\n}\n.fileList-module-FileIcon--audio-pU4It-4-30-3 {\n background: var(--accent1-lightest);\n color: var(--accent1);\n}\n.fileList-module-FileIcon--video-Yhyeo-4-30-3 {\n background: var(--accent2-lightest);\n color: var(--accent2);\n}\n.fileList-module-FileIcon--application-GCdsE-4-30-3 {\n background: var(--accent3-lightest);\n color: var(--accent3);\n}\n.fileList-module-FileIcon--others-EgUIw-4-30-3 {\n background: var(--success-lightest);\n color: var(--success);\n}\n.fileList-module-FileIcon--animate-uQCYr-4-30-3 {\n animation: fileList-module-fadeIn-CVtFA-4-30-3 var(--duration--moderate-01) var(--entrance-productive-curve);\n}\n\n@keyframes fileList-module-fadeIn-CVtFA-4-30-3 {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n";
var styles$j = {"FileIcon":"fileList-module-FileIcon-01qzb-4-30-3","FileItem":"fileList-module-FileItem-HpCE9-4-30-3","FileItem-fileContent":"fileList-module-FileItem-fileContent-vusoO-4-30-3","FileItem-actions":"fileList-module-FileItem-actions-zH5Wo-4-30-3","FileItem-file":"fileList-module-FileItem-file-jkZDb-4-30-3","FileItem-size":"fileList-module-FileItem-size-Jn3i4-4-30-3","FileItem-text":"fileList-module-FileItem-text-JzD0s-4-30-3","FileItem-error":"fileList-module-FileItem-error-srZSs-4-30-3","FileIcon--image":"fileList-module-FileIcon--image-8GeUP-4-30-3","FileIcon--audio":"fileList-module-FileIcon--audio-pU4It-4-30-3","FileIcon--video":"fileList-module-FileIcon--video-Yhyeo-4-30-3","FileIcon--application":"fileList-module-FileIcon--application-GCdsE-4-30-3","FileIcon--others":"fileList-module-FileIcon--others-EgUIw-4-30-3","FileIcon--animate":"fileList-module-FileIcon--animate-uQCYr-4-30-3","fadeIn":"fileList-module-fadeIn-CVtFA-4-30-3"};
styleInject(css_248z$j);
var useEffect = React.useEffect,
useState = React.useState;
var IconMapping$1 = {
audio: 'audiotrack',
image: 'image',
video: 'movie',
application: 'insert_drive_file',
others: 'text_snippet'
};
var FileIcon = function FileIcon(props) {
var progress = props.progress,
status = props.status,
file = props.file;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
animate = _useState2[0],
setAnimate = _useState2[1];
var type = file.type.split('/')[0] || 'others';
var fileType = IconMapping$1[type] ? type : 'others';
var iconClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$j['FileIcon'], true), styles$j['FileIcon--animate'], animate), styles$j["FileIcon--".concat(fileType)], true));
var uploadingIconClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$j['FileIcon'], true), styles$j['FileIcon--uploading'], true));
useEffect(function () {
if (status === 'completed') {
setAnimate(true);
} else {
setAnimate(false);
}
}, [status]);
if (status === 'uploading') {
return /*#__PURE__*/React.createElement(ProgressRing, {
size: "small",
value: progress || 0,
className: uploadingIconClass,
"data-test": "DesignSystem-FileListItem--ProgressRing"
});
}
return /*#__PURE__*/React.createElement(Icon, {
name: IconMapping$1[fileType],
className: iconClass,
"data-test": "DesignSystem-FileListItem--Icon"
});
};
FileIcon.displayName = 'FileIcon';
FileIcon.defaultProps = {
progress: 0,
status: 'completed'
};
var FileListItem = function FileListItem(props) {
var progress = props.progress,
errorMessage = props.errorMessage,
onClick = props.onClick,
className = props.className,
actions = props.actions,
fileItem = props.fileItem,
file = props.file,
status = props.status,
fileSize = props.fileSize;
var name = file.name;
var baseProps = extractBaseProps(props);
var FileItemClass = classnames(_defineProperty$1({}, styles$j['FileItem'], true), className);
var onClickHandler = function onClickHandler() {
if (onClick) {
onClick(fileItem);
}
};
var handleKeyDown = function handleKeyDown(event) {
if (!onClick) return;
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
onClickHandler();
}
};
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
className: FileItemClass,
onClick: onClickHandler,
onKeyDown: handleKeyDown,
"data-test": "DesignSystem-FileListItem",
role: "button",
tabIndex: 0,
"aria-label": "".concat(name).concat(status === 'error' ? ', upload failed' : status === 'uploading' ? ', uploading' : '')
}), /*#__PURE__*/React.createElement("div", {
className: styles$j['FileItem-file']
}, /*#__PURE__*/React.createElement("div", {
className: styles$j['FileItem-fileContent']
}, /*#__PURE__*/React.createElement(FileIcon, {
file: file,
status: status,
progress: progress
}), /*#__PURE__*/React.createElement(Text$1, {
"data-test": "DesignSystem-FileListItem--Name",
className: styles$j['FileItem-text'],
appearance: status === 'completed' ? 'default' : 'subtle',
weight: "medium"
}, name)), /*#__PURE__*/React.createElement("div", {
className: styles$j['FileItem-actions']
}, /*#__PURE__*/React.createElement(Text$1, {
className: styles$j['FileItem-size'],
size: "small",
appearance: 'subtle',
"data-test": "DesignSystem-FileListItem--Size"
}, fileSize || file.size), !!actions && actions)), status === 'error' && /*#__PURE__*/React.createElement(InlineMessage, {
size: "small",
appearance: "alert",
description: errorMessage,
className: styles$j['FileItem-error']
}));
};
FileListItem.defaultProps = {
progress: 0,
errorMessage: 'Network Error'
};
FileListItem.displayName = 'FileListItem';
var FileList = function FileList(props) {
var fileList = props.fileList,
onClick = props.onClick,
actionRenderer = props.actionRenderer,
className = props.className;
var baseProps = extractBaseProps(props);
if (fileList.length === 0) return null;
return /*#__PURE__*/React.createElement(Card, _extends$2({}, baseProps, {
shadow: 'none',
className: className
}), fileList.map(function (fileItem, index) {
return /*#__PURE__*/React.createElement(FileListItem, _extends$2({
key: index,
onClick: onClick,
actions: actionRenderer && actionRenderer(fileItem),
fileItem: fileItem
}, fileItem));
}));
};
FileList.defaultProps = {
fileList: []
};
FileList.displayName = 'FileList';
var _excluded$J = ["type", "fields", "placeholder", "autoFocus", "onComplete", "onChange", "onFocus", "onBlur", "className", "value", "id", "aria-label"];
var KEY_CODE = {
backspace: 'Backspace',
left: 'ArrowLeft',
up: 'ArrowUp',
right: 'ArrowRight',
down: 'ArrowDown',
e: 'e',
E: 'E'
};
var VerificationCodeInput = function VerificationCodeInput(props) {
var _props$type = props.type,
type = _props$type === void 0 ? 'number' : _props$type,
_props$fields = props.fields,
fields = _props$fields === void 0 ? 4 : _props$fields,
_props$placeholder = props.placeholder,
placeholder = _props$placeholder === void 0 ? '_' : _props$placeholder,
_props$autoFocus = props.autoFocus,
autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
onComplete = props.onComplete,
onChange = props.onChange,
onFocus = props.onFocus,
onBlur = props.onBlur,
className = props.className;
props.value;
var id = props.id,
groupAriaLabel = props['aria-label'],
rest = _objectWithoutProperties(props, _excluded$J);
var initialValues = useMemo(function () {
if (props.value && props.value.length) {
return props.value.split('');
}
return Array(fields).fill('');
}, []);
var initialRefs = useMemo(function () {
return _toConsumableArray(Array(fields)).map(function () {
return /*#__PURE__*/React__default.createRef();
});
}, []);
var _useState = useState$3(initialValues),
_useState2 = _slicedToArray(_useState, 2),
values = _useState2[0],
setValues = _useState2[1];
var _useState3 = useState$3(initialRefs),
_useState4 = _slicedToArray(_useState3, 1),
refs = _useState4[0];
useEffect$2(function () {
if (refs[0] && refs[0].current && autoFocus) {
refs[0].current.focus({
preventScroll: true
});
}
}, []);
useEffect$2(function () {
var completeValue = values.join('');
var isComplete = completeValue.length === fields;
isComplete && (onComplete === null || onComplete === void 0 ? void 0 : onComplete(completeValue));
onChange === null || onChange === void 0 || onChange(completeValue);
}, [values]);
var onChangeHandler = function onChangeHandler(e) {
var index = parseInt(e.target.dataset.id, 10);
var fieldValue = e.target.value;
var nextRef;
var newValues = _toConsumableArray(values);
if (!fieldValue) {
return;
}
if (fieldValue.length > 1) {
var nextIndex = fieldValue.length + index - 1;
if (nextIndex >= fields) {
nextIndex = fields - 1;
}
nextRef = refs[nextIndex];
var split = fieldValue.split('');
split.forEach(function (item, i) {
var cursor = index + i;
if (cursor < fields) {
newValues[cursor] = item;
}
});
setValues(newValues);
} else {
nextRef = refs[index + 1];
newValues[index] = fieldValue;
setValues(newValues);
}
if (nextRef && nextRef.current) {
nextRef.current.focus({
preventScroll: true
});
nextRef.current.select();
}
};
var onFocusHandler = function onFocusHandler(e) {
e.target.select();
e.target.placeholder = '';
if (onFocus) {
onFocus(e);
}
};
var onBlurHandler = function onBlurHandler(e) {
e.target.placeholder = placeholder;
if (onBlur) {
onBlur(e);
}
};
var onKeyDown = function onKeyDown(e) {
var index = parseInt(e.currentTarget.dataset.id, 10);
var prevIndex = index - 1;
var nextIndex = index + 1;
var prev = refs[prevIndex];
var nextRef = refs[nextIndex];
switch (e.key) {
case KEY_CODE.backspace:
{
e.preventDefault();
var vals = _toConsumableArray(values);
if (values[index]) {
vals[index] = '';
setValues(vals);
} else if (prev && prev.current) {
vals[prevIndex] = '';
prev.current.focus({
preventScroll: true
});
setValues(vals);
}
break;
}
case KEY_CODE.left:
{
e.preventDefault();
if (prev && prev.current) {
prev.current.focus({
preventScroll: true
});
}
break;
}
case KEY_CODE.right:
{
e.preventDefault();
if (nextRef && nextRef.current) {
nextRef.current.focus({
preventScroll: true
});
}
break;
}
case KEY_CODE.up:
case KEY_CODE.down:
case KEY_CODE.e:
case KEY_CODE.E:
{
if (type === 'number') {
e.preventDefault();
}
break;
}
}
};
var wrapperClassNames = function wrapperClassNames(i) {
return classnames(_defineProperty$1(_defineProperty$1({}, styles$Y['VerificationCodeInput-Input'], true), 'ml-4', i > 0), className);
};
return /*#__PURE__*/React__default.createElement("div", {
"data-test": "DesignSystem-VerificationCodeInput",
className: styles$Y['VerificationCodeInput']
}, values.map(function (val, index) {
return /*#__PURE__*/React__default.createElement(Input, _extends$2({
key: index,
className: wrapperClassNames(index),
size: "large",
minWidth: "40px",
value: val,
placeholder: placeholder,
onChange: onChangeHandler,
onKeyDown: onKeyDown,
onFocus: onFocusHandler,
onBlur: onBlurHandler,
id: id ? "".concat(id, "-").concat(index) : undefined,
"data-id": index,
ref: refs[index],
type: type
}, rest, {
"aria-label": groupAriaLabel ? "".concat(groupAriaLabel, ", digit ").concat(index + 1, " of ").concat(fields) : "Digit ".concat(index + 1, " of ").concat(fields)
}));
}));
};
VerificationCodeInput.displayName = 'VerificationCodeInput';
VerificationCodeInput.defaultProps = {
type: 'number',
fields: 4
};
var css_248z$i = ".inlineMessage-module-InlineMessage-eYA4x-4-30-3 {\n display: flex;\n flex-direction: row;\n overflow: hidden;\n border-radius: var(--border-radius-10);\n background-color: var(--white);\n align-items: flex-start;\n}\n\n.inlineMessage-module-InlineMessage-icon--regular-ULMAr-4-30-3 {\n padding-top: var(--spacing-05);\n padding-bottom: var(--spacing-05);\n margin-right: var(--spacing-20);\n}\n\n.inlineMessage-module-InlineMessage-icon--small-DcwRS-4-30-3 {\n padding-top: var(--spacing-2-5);\n padding-bottom: var(--spacing-2-5);\n margin-right: var(--spacing-10);\n}\n\n.inlineMessage-module-InlineMessage-text--warning-zlHbs-4-30-3,\n.inlineMessage-module-InlineMessage-icon--warning-UwGi4-4-30-3 {\n color: var(--accent1-dark);\n}\n\n.inlineMessage-module-InlineMessage-text--alert-rUpLF-4-30-3 {\n color: var(--alert);\n}\n\n.inlineMessage-module-InlineMessage-text--info-7X-lv-4-30-3 {\n color: var(--primary);\n}\n\n.inlineMessage-module-InlineMessage-text--success-UX2Vn-4-30-3 {\n color: var(--success);\n}\n";
var styles$i = {"InlineMessage":"inlineMessage-module-InlineMessage-eYA4x-4-30-3","InlineMessage-icon--regular":"inlineMessage-module-InlineMessage-icon--regular-ULMAr-4-30-3","InlineMessage-icon--small":"inlineMessage-module-InlineMessage-icon--small-DcwRS-4-30-3","InlineMessage-text--warning":"inlineMessage-module-InlineMessage-text--warning-zlHbs-4-30-3","InlineMessage-icon--warning":"inlineMessage-module-InlineMessage-icon--warning-UwGi4-4-30-3","InlineMessage-text--alert":"inlineMessage-module-InlineMessage-text--alert-rUpLF-4-30-3","InlineMessage-text--info":"inlineMessage-module-InlineMessage-text--info-7X-lv-4-30-3","InlineMessage-text--success":"inlineMessage-module-InlineMessage-text--success-UX2Vn-4-30-3"};
styleInject(css_248z$i);
var _excluded$I = ["appearance", "className", "description", "size"];
var IconMapping = {
success: 'check_circle',
info: 'info',
warning: 'warning',
alert: 'error'
};
var InlineMessage = function InlineMessage(props) {
var appearance = props.appearance,
className = props.className,
description = props.description,
size = props.size,
rest = _objectWithoutProperties(props, _excluded$I);
var baseProps = extractBaseProps(props);
var InlineMessageClass = classnames(_defineProperty$1({}, styles$i['InlineMessage'], true), className);
var IconClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$i['InlineMessage-icon--warning'], appearance === 'warning'), styles$i['InlineMessage-icon--small'], size === 'small'), styles$i['InlineMessage-icon--regular'], size === 'regular'));
var DescriptionClass = classnames(_defineProperty$1({}, styles$i["InlineMessage-text--".concat(appearance)], appearance));
var IconSize = size === 'small' ? 14 : 16;
var TextWeight = size === 'small' ? 'medium' : undefined;
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-InlineMessage"
}, baseProps, rest, {
className: InlineMessageClass
}), appearance !== 'default' && /*#__PURE__*/React.createElement(Icon, {
"data-test": "DesignSystem-InlineMessage--Icon",
name: IconMapping[appearance],
appearance: appearance,
className: IconClass,
size: IconSize,
"aria-hidden": "true"
}), /*#__PURE__*/React.createElement(Text$1, {
size: size,
weight: TextWeight,
className: DescriptionClass,
"data-test": "DesignSystem-InlineMessage--Description"
}, description));
};
InlineMessage.displayName = 'InlineMessage';
InlineMessage.defaultProps = {
appearance: 'default',
description: '',
size: 'regular'
};
var css_248z$h = ".choiceList-module-ChoiceList-haiz--4-30-3 {\n margin: 0;\n padding: 0;\n border: none;\n}\n\n.choiceList-module-ChoiceList-checkbox--vertical-cGAam-4-30-3 {\n margin-top: var(--spacing-10);\n}\n\n.choiceList-module-ChoiceList-radio--vertical-9uLgh-4-30-3 {\n margin-top: var(--spacing-10);\n}\n\n.choiceList-module-ChoiceList--alignHorizontal-7FzTE-4-30-3 {\n display: flex;\n}\n\n.choiceList-module-ChoiceList-checkbox--horizontal-RqiZg-4-30-3 {\n margin-left: var(--spacing-60);\n}\n\n.choiceList-module-ChoiceList-radio--horizontal-67SGD-4-30-3 {\n margin-left: var(--spacing-60);\n}\n";
var styles$h = {"ChoiceList":"choiceList-module-ChoiceList-haiz--4-30-3","ChoiceList-checkbox--vertical":"choiceList-module-ChoiceList-checkbox--vertical-cGAam-4-30-3","ChoiceList-radio--vertical":"choiceList-module-ChoiceList-radio--vertical-9uLgh-4-30-3","ChoiceList--alignHorizontal":"choiceList-module-ChoiceList--alignHorizontal-7FzTE-4-30-3","ChoiceList-checkbox--horizontal":"choiceList-module-ChoiceList-checkbox--horizontal-RqiZg-4-30-3","ChoiceList-radio--horizontal":"choiceList-module-ChoiceList-radio--horizontal-67SGD-4-30-3"};
styleInject(css_248z$h);
var renderCheckbox = function renderCheckbox(list, handleOnChange, ChoiceListDisabled, size, alignment, selected, wrapLabel) {
return list.map(function (item, checkboxIndex) {
var name = item.name,
value = item.value,
helpText = item.helpText,
disabled = item.disabled,
label = item.label,
ariaLabel = item['aria-label'],
ariaLabelledBy = item['aria-labelledby'],
ariaDescribedBy = item['aria-describedby'],
tabIndex = item.tabIndex,
required = item.required;
return /*#__PURE__*/React.createElement(Checkbox, {
key: checkboxIndex,
label: label,
onChange: handleOnChange,
disabled: disabled || ChoiceListDisabled,
helpText: helpText,
size: size,
name: name,
value: value,
defaultChecked: selected.length !== 0 && selected.includes(value),
className: getCheckboxClassName(alignment, checkboxIndex),
wrapLabel: wrapLabel,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-describedby": ariaDescribedBy,
tabIndex: tabIndex,
required: required
});
});
};
var renderRadio = function renderRadio(list, handleOnChange, ChoiceListDisabled, size, alignment, selected) {
return list.map(function (item, radioIndex) {
var name = item.name,
value = item.value,
helpText = item.helpText,
disabled = item.disabled,
label = item.label,
ariaLabel = item['aria-label'],
ariaLabelledBy = item['aria-labelledby'],
ariaDescribedBy = item['aria-describedby'],
tabIndex = item.tabIndex,
required = item.required;
return /*#__PURE__*/React.createElement(Radio, {
key: radioIndex,
label: label,
onChange: handleOnChange,
disabled: disabled || ChoiceListDisabled,
helpText: helpText,
size: size,
name: name,
value: value,
defaultChecked: selected.length !== 0 && selected.includes(value),
className: getRadioClassName(alignment, radioIndex),
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-describedby": ariaDescribedBy,
tabIndex: tabIndex,
required: required
});
});
};
var getCheckboxClassName = function getCheckboxClassName(alignment, index) {
var ChoiceListCheckboxClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$h["ChoiceList-checkbox--".concat(alignment)], true), 'ml-0', index === 0 && alignment === 'horizontal'), 'mt-4', alignment === 'horizontal'));
return ChoiceListCheckboxClass;
};
var getRadioClassName = function getRadioClassName(alignment, index) {
var ChoiceListRadioClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$h["ChoiceList-radio--".concat(alignment)], true), 'ml-0', index === 0 && alignment === 'horizontal'), 'mt-4', alignment === 'horizontal'));
return ChoiceListRadioClass;
};
var ChoiceList = function ChoiceList(props) {
var title = props.title,
choices = props.choices,
_props$alignment = props.alignment,
alignment = _props$alignment === void 0 ? 'vertical' : _props$alignment,
_props$allowMultiple = props.allowMultiple,
allowMultiple = _props$allowMultiple === void 0 ? false : _props$allowMultiple,
onChange = props.onChange,
_props$disabled = props.disabled,
disabled = _props$disabled === void 0 ? false : _props$disabled,
_props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size,
className = props.className,
wrapLabel = props.wrapLabel,
ariaLabel = props['aria-label'],
ariaLabelledBy = props['aria-labelledby'];
var _props$selected = props.selected,
selected = _props$selected === void 0 ? [] : _props$selected;
var selectedChoiceValue = selected && selected || [];
var ChoiceListClass = classnames(_defineProperty$1({}, styles$h['ChoiceList'], true), className);
var ChoiceListVerticalClass = classnames(_defineProperty$1({}, styles$h['ChoiceList--alignVertical'], true));
var ChoiceHorizontalClass = classnames(_defineProperty$1({}, styles$h['ChoiceList--alignHorizontal'], true));
var handleOnChange = function handleOnChange(e) {
if (e.target.checked && allowMultiple) {
if (!selectedChoiceValue.includes(e.target.value)) {
selectedChoiceValue = [].concat(_toConsumableArray(selectedChoiceValue), [e.target.value]);
}
} else if (!e.target.checked && allowMultiple) {
selectedChoiceValue = selectedChoiceValue.filter(function (el) {
return el !== e.target.value;
});
}
if (!allowMultiple) {
if (!selectedChoiceValue.includes(e.target.value)) {
selectedChoiceValue = [];
selectedChoiceValue = [].concat(_toConsumableArray(selectedChoiceValue), [e.target.value]);
}
}
if (onChange) onChange(e, selectedChoiceValue);
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("fieldset", {
className: ChoiceListClass,
"data-test": "DesignSystem-ChoiceList-Wrapper",
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy
}, title && title.trim() && /*#__PURE__*/React.createElement(Label, {
withInput: true
}, title.trim()), allowMultiple ? /*#__PURE__*/React.createElement("div", {
className: "".concat(alignment === 'horizontal' ? ChoiceHorizontalClass : ChoiceListVerticalClass)
}, renderCheckbox(choices, handleOnChange, disabled, size, alignment, selected, wrapLabel)) : /*#__PURE__*/React.createElement("div", {
className: "".concat(alignment === 'horizontal' ? ChoiceHorizontalClass : ChoiceListVerticalClass)
}, renderRadio(choices, handleOnChange, disabled, size, alignment, selected))));
};
ChoiceList.displayName = 'ChoiceList';
ChoiceList.defaultProps = {
alignment: 'vertical',
size: 'regular',
allowMultiple: false,
disabled: false
};
var css_248z$g = ".divider-module-Divider-Fo0Gy-4-30-3 {\n border: none;\n margin: 0;\n}\n\n.divider-module-Divider--vertical-Cdk22-4-30-3 {\n width: 1px;\n background: var(--secondary-light);\n}\n\n.divider-module-Divider--horizontal-3Z0nC-4-30-3 {\n height: 1px;\n}\n\n.divider-module-Divider--basic-BqnEq-4-30-3 {\n background: var(--secondary-light);\n}\n\n.divider-module-Divider--header-GMLJV-4-30-3 {\n background: var(--secondary-dark);\n}\n";
var styles$g = {"Divider":"divider-module-Divider-Fo0Gy-4-30-3","Divider--vertical":"divider-module-Divider--vertical-Cdk22-4-30-3","Divider--horizontal":"divider-module-Divider--horizontal-3Z0nC-4-30-3","Divider--basic":"divider-module-Divider--basic-BqnEq-4-30-3","Divider--header":"divider-module-Divider--header-GMLJV-4-30-3"};
styleInject(css_248z$g);
var Divider = function Divider(props) {
var vertical = props.vertical,
appearance = props.appearance,
className = props.className,
ariaHidden = props['aria-hidden'];
var baseProps = extractBaseProps(props);
var DividerClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$g['Divider'], true), styles$g['Divider--horizontal'], !vertical), styles$g['Divider--vertical'], vertical), styles$g['Divider--basic'], !vertical && appearance !== 'header'), styles$g['Divider--header'], !vertical && appearance === 'header'), className);
return /*#__PURE__*/React.createElement("hr", _extends$2({
"data-test": "DesignSystem-Divider"
}, baseProps, {
className: DividerClass,
"aria-orientation": vertical ? 'vertical' : 'horizontal',
"aria-hidden": ariaHidden
}));
};
Divider.displayName = 'Divider';
Divider.defaultProps = {
appearance: 'basic',
vertical: false
};
var HelpText = function HelpText(props) {
var error = props.error,
message = props.message,
className = props.className,
idProp = props.id;
var baseProps = extractBaseProps(props);
var generatedIdRef = React.useRef(null);
if (generatedIdRef.current === null) {
generatedIdRef.current = "HelpText-".concat(uidGenerator());
}
var resolvedId = idProp !== null && idProp !== void 0 ? idProp : generatedIdRef.current;
var classes = classnames({
'mt-3': true
}, className);
if (!message) return null;
if (error) {
return /*#__PURE__*/React.createElement(InlineMessage, {
id: resolvedId,
size: "small",
className: classes,
appearance: "alert",
description: message
});
}
return /*#__PURE__*/React.createElement("div", _extends$2({
id: resolvedId
}, baseProps, {
className: classes
}), /*#__PURE__*/React.createElement(Text$1, {
appearance: "subtle",
size: "small",
weight: "medium"
}, message));
};
HelpText.displayName = 'HelpText';
var css_248z$f = ".linkButton-module-LinkButton--eCyD-4-30-3 {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n position: relative;\n vertical-align: middle;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: 0;\n text-align: center;\n padding: 0;\n background: transparent;\n font-weight: var(--font-weight-medium);\n font-family: var(--font-family);\n border-radius: var(--border-radius-10);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.linkButton-module-LinkButton--iconAlign-right-BjcDC-4-30-3 {\n flex-direction: row-reverse;\n}\n\n.linkButton-module-LinkButton-icon-Id1IM-4-30-3 {\n line-height: inherit;\n display: flex;\n align-items: center;\n}\n\n.linkButton-module-LinkButton-icon--left-uCKUJ-4-30-3 {\n margin-right: var(--spacing-10);\n}\n\n.linkButton-module-LinkButton-icon--right-wxMEa-4-30-3 {\n margin-left: var(--spacing-10);\n}\n\n.linkButton-module-LinkButton--regular-QoGvH-4-30-3 {\n line-height: var(--font-height);\n font-size: var(--font-size);\n}\n\n.linkButton-module-LinkButton--tiny-21d67-4-30-3 {\n line-height: var(--font-height-s);\n font-size: var(--font-size-s);\n}\n\n.linkButton-module-LinkButton--default-1cpsS-4-30-3,\n.linkButton-module-LinkButton--default-disabled-xeGOu-4-30-3 {\n color: var(--primary);\n}\n\n.linkButton-module-LinkButton--default-1cpsS-4-30-3:hover {\n color: var(--primary-dark);\n}\n\n.linkButton-module-LinkButton--default-1cpsS-4-30-3:active {\n color: var(--primary-darker);\n}\n\n.linkButton-module-LinkButton--default-1cpsS-4-30-3:focus-visible,\n.linkButton-module-LinkButton--default-disabled-xeGOu-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.linkButton-module-LinkButton--default-disabled-xeGOu-4-30-3 {\n cursor: not-allowed;\n color: var(--primary-lighter);\n}\n\n.linkButton-module-LinkButton-infoIcon--default-s085k-4-30-3 {\n color: var(--text-link);\n}\n\n/* Subtle Appearance */\n\n.linkButton-module-LinkButton--subtle-I8NtR-4-30-3,\n.linkButton-module-LinkButton--subtle-disabled-YBw-Z-4-30-3 {\n color: var(--inverse-lighter);\n}\n\n.linkButton-module-LinkButton--subtle-I8NtR-4-30-3:hover {\n color: var(--inverse-light);\n}\n\n.linkButton-module-LinkButton--subtle-I8NtR-4-30-3:active {\n color: var(--inverse);\n}\n\n.linkButton-module-LinkButton--subtle-I8NtR-4-30-3:focus-visible,\n.linkButton-module-LinkButton--subtle-disabled-YBw-Z-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.linkButton-module-LinkButton--subtle-disabled-YBw-Z-4-30-3 {\n cursor: not-allowed;\n color: var(--inverse-lightest);\n}\n\n.linkButton-module-LinkButton-infoIcon--subtle-Zid2H-4-30-3 {\n color: var(--inverse-light);\n}\n\n.linkButton-module-LinkButton-infoIconWrapper-gSvV3-4-30-3 {\n position: absolute;\n top: calc(-1 * var(--spacing-05));\n right: calc(-1 * var(--spacing-30));\n width: var(--spacing-30);\n height: var(--spacing-30);\n box-sizing: border-box;\n border-radius: var(--border-radius-full);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n border: none;\n background: transparent;\n pointer-events: none;\n}\n\n.linkButton-module-LinkButton-infoIconWrapper--tiny-b1mDf-4-30-3 {\n top: calc(-1 * var(--spacing-05));\n right: calc(-1 * var(--spacing-30));\n}\n\n.linkButton-module-LinkButton-infoIconWrapper--regularIcon-BHLsK-4-30-3 {\n top: 0px;\n right: calc(-1 * var(--spacing-05));\n}\n\n.linkButton-module-LinkButton-infoIconWrapper--tinyIcon-Zfim1-4-30-3 {\n top: calc(-1 * var(--spacing-05));\n right: calc(-1 * var(--spacing-05));\n}\n\n.linkButton-module-LinkButton-withInfo-foxxf-4-30-3 {\n padding-right: var(--spacing-20);\n}\n\n.linkButton-module-LinkButton-infoIconWrapper--withChildren--wre--4-30-3 {\n right: calc(-1 * var(--spacing-30) + var(--spacing-20));\n}\n\n.linkButton-module-LinkButton-infoIconWrapper--iconOnly-dr2nx-4-30-3 {\n right: calc(-1 * var(--spacing-10) + var(--spacing-20));\n}\n\n.linkButton-module-LinkButton-infoIconWrapper--tinyIcon-Zfim1-4-30-3 {\n right: calc(-1 * var(--spacing-05) + var(--spacing-20));\n}\n\n.linkButton-module-LinkButton-infoIcon-F8ygN-4-30-3 {\n color: inherit;\n}\n\n.linkButton-module-LinkButton-srOnly-k-6dO-4-30-3 {\n position: absolute;\n width: var(--spacing-2-5);\n height: var(--spacing-2-5);\n padding: 0;\n margin: calc(-1 * var(--spacing-2-5));\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n";
var styles$f = {"LinkButton":"linkButton-module-LinkButton--eCyD-4-30-3","LinkButton--iconAlign-right":"linkButton-module-LinkButton--iconAlign-right-BjcDC-4-30-3","LinkButton-icon":"linkButton-module-LinkButton-icon-Id1IM-4-30-3","LinkButton-icon--left":"linkButton-module-LinkButton-icon--left-uCKUJ-4-30-3","LinkButton-icon--right":"linkButton-module-LinkButton-icon--right-wxMEa-4-30-3","LinkButton--regular":"linkButton-module-LinkButton--regular-QoGvH-4-30-3","LinkButton--tiny":"linkButton-module-LinkButton--tiny-21d67-4-30-3","LinkButton--default":"linkButton-module-LinkButton--default-1cpsS-4-30-3","LinkButton--default-disabled":"linkButton-module-LinkButton--default-disabled-xeGOu-4-30-3","LinkButton-infoIcon--default":"linkButton-module-LinkButton-infoIcon--default-s085k-4-30-3","LinkButton--subtle":"linkButton-module-LinkButton--subtle-I8NtR-4-30-3","LinkButton--subtle-disabled":"linkButton-module-LinkButton--subtle-disabled-YBw-Z-4-30-3","LinkButton-infoIcon--subtle":"linkButton-module-LinkButton-infoIcon--subtle-Zid2H-4-30-3","LinkButton-infoIconWrapper":"linkButton-module-LinkButton-infoIconWrapper-gSvV3-4-30-3","LinkButton-infoIconWrapper--tiny":"linkButton-module-LinkButton-infoIconWrapper--tiny-b1mDf-4-30-3","LinkButton-infoIconWrapper--regularIcon":"linkButton-module-LinkButton-infoIconWrapper--regularIcon-BHLsK-4-30-3","LinkButton-infoIconWrapper--tinyIcon":"linkButton-module-LinkButton-infoIconWrapper--tinyIcon-Zfim1-4-30-3","LinkButton-withInfo":"linkButton-module-LinkButton-withInfo-foxxf-4-30-3","LinkButton-infoIconWrapper--withChildren":"linkButton-module-LinkButton-infoIconWrapper--withChildren--wre--4-30-3","LinkButton-infoIconWrapper--iconOnly":"linkButton-module-LinkButton-infoIconWrapper--iconOnly-dr2nx-4-30-3","LinkButton-infoIcon":"linkButton-module-LinkButton-infoIcon-F8ygN-4-30-3","LinkButton-srOnly":"linkButton-module-LinkButton-srOnly-k-6dO-4-30-3"};
styleInject(css_248z$f);
var _excluded$H = ["children", "type", "className", "disabled", "tabIndex", "icon", "subtle", "size", "iconAlign", "iconType", "tooltip", "onClick", "onKeyDown", "aria-describedby"];
var sizeMapping = {
tiny: 12,
regular: 16
};
var LinkButtonElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
var children = props.children,
type = props.type,
className = props.className,
disabled = props.disabled,
tabIndex = props.tabIndex,
icon = props.icon,
subtle = props.subtle,
size = props.size,
iconAlign = props.iconAlign,
iconType = props.iconType,
tooltip = props.tooltip,
onClick = props.onClick,
onKeyDown = props.onKeyDown,
ariaDescribedBy = props['aria-describedby'],
rest = _objectWithoutProperties(props, _excluded$H);
var isIconOnly = icon && !children;
var tooltipIdRef = React.useRef(null);
if (tooltipIdRef.current === null && tooltip && !isIconOnly) {
tooltipIdRef.current = "LinkButton-tooltip-".concat(uidGenerator());
}
var computedAriaDescribedBy = [ariaDescribedBy, tooltip && !isIconOnly ? tooltipIdRef.current : undefined].filter(Boolean).join(' ') || undefined;
var computedAriaLabel = props['aria-label'] || (isIconOnly && tooltip ? tooltip : undefined) || (!children && icon ? icon : undefined);
var useAriaDisabled = Boolean(disabled && tooltip);
var nativeDisabled = useAriaDisabled ? undefined : disabled;
var renderedType = useAriaDisabled && type === 'submit' ? 'button' : type;
var handleKeyDown = function handleKeyDown(event) {
if (useAriaDisabled && (event.key === 'Enter' || isSpaceKey(event))) {
event.preventDefault();
event.stopPropagation();
return;
}
if (onKeyDown) {
onKeyDown(event);
}
};
var handleClick = function handleClick(event) {
if (useAriaDisabled) {
event.preventDefault();
event.stopPropagation();
return;
}
if (onClick) {
onClick(event);
}
};
var showInfoAffordance = disabled && tooltip;
var buttonClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$f['LinkButton'], true), styles$f["LinkButton--".concat(size)], size), styles$f['LinkButton--default'], !subtle && !disabled), styles$f['LinkButton--subtle'], subtle && !disabled), styles$f['LinkButton--default-disabled'], !subtle && disabled), styles$f['LinkButton--subtle-disabled'], subtle && disabled), styles$f["LinkButton--iconAlign-".concat(iconAlign)], children && iconAlign), styles$f['LinkButton-withInfo'], showInfoAffordance), "".concat(className), className));
var iconClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$f['LinkButton-icon'], true), styles$f["LinkButton-icon--".concat(iconAlign)], children && iconAlign));
var infoIconClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$f['LinkButton-infoIcon'], true), styles$f['LinkButton-infoIcon--default'], !subtle), styles$f['LinkButton-infoIcon--subtle'], subtle));
var infoIconWrapperClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$f['LinkButton-infoIconWrapper'], true), styles$f['LinkButton-infoIconWrapper--tiny'], size === 'tiny' && children), styles$f['LinkButton-infoIconWrapper--withChildren'], children), styles$f['LinkButton-infoIconWrapper--iconOnly'], !children), styles$f['LinkButton-infoIconWrapper--regularIcon'], !children && size !== 'tiny'), styles$f['LinkButton-infoIconWrapper--tinyIcon'], !children && size === 'tiny'));
var iconSize = size && sizeMapping[size];
return /*#__PURE__*/React.createElement("button", _extends$2({
ref: ref,
type: renderedType,
"data-test": "DesignSystem-LinkButton",
className: buttonClass,
disabled: nativeDisabled,
"aria-disabled": useAriaDisabled ? true : undefined,
"aria-describedby": computedAriaDescribedBy,
tabIndex: tabIndex
}, rest, {
"aria-label": computedAriaLabel,
onClick: handleClick,
onKeyDown: handleKeyDown
}), /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("div", {
className: iconClass
}, /*#__PURE__*/React.createElement(Icon, {
"data-test": "DesignSystem-LinkButton--Icon",
name: icon,
type: iconType,
size: iconSize
})), children, showInfoAffordance && /*#__PURE__*/React.createElement("span", {
className: infoIconWrapperClass
}, /*#__PURE__*/React.createElement(Icon, {
name: "info_outline",
type: "outlined",
size: 12,
className: infoIconClass,
"aria-hidden": "true",
"data-test": "DesignSystem-LinkButton--Info-Icon"
}))), tooltip && !isIconOnly && /*#__PURE__*/React.createElement("span", {
id: tooltipIdRef.current,
className: styles$f['LinkButton-srOnly']
}, tooltip));
});
var LinkButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
var tooltip = props.tooltip;
return tooltip ? /*#__PURE__*/React.createElement(Tooltip, {
tooltip: tooltip,
"aria-hidden": "true",
triggerClass: "flex-grow-0",
wrapperElement: "span"
}, /*#__PURE__*/React.createElement(LinkButtonElement, _extends$2({}, props, {
ref: ref
}))) : /*#__PURE__*/React.createElement(LinkButtonElement, _extends$2({}, props, {
ref: ref
}));
});
LinkButton.displayName = 'LinkButton';
LinkButtonElement.displayName = 'LinkButtonElement';
LinkButton.defaultProps = {
size: 'regular',
type: 'button',
iconAlign: 'left'
};
var css_248z$e = ".actionCard-module-ActionCard-VTzbo-4-30-3 {\n border-radius: var(--border-radius-10);\n width: 100%;\n}\n\n.actionCard-module-ActionCard--default-ehk9Y-4-30-3 {\n cursor: pointer;\n border: var(--border-width-2-5) solid var(--secondary-dark);\n}\n\n.actionCard-module-ActionCard--default-ehk9Y-4-30-3:hover {\n box-shadow: var(--shadow-l);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.actionCard-module-ActionCard--default-ehk9Y-4-30-3:focus,\n.actionCard-module-ActionCard--default-ehk9Y-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.actionCard-module-ActionCard--default-ehk9Y-4-30-3:active {\n box-shadow: var(--shadow-m);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.actionCard-module-ActionCard--disabled-Xbnn0-4-30-3 {\n cursor: not-allowed;\n position: relative;\n border: var(--border-width-2-5) solid var(--secondary-lighter);\n}\n\n.actionCard-module-ActionCard-overlay--disabled-N4msm-4-30-3 {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 2;\n opacity: var(--opacity-10);\n background: var(--secondary-lightest);\n}\n";
var styles$e = {"ActionCard":"actionCard-module-ActionCard-VTzbo-4-30-3","ActionCard--default":"actionCard-module-ActionCard--default-ehk9Y-4-30-3","ActionCard--disabled":"actionCard-module-ActionCard--disabled-Xbnn0-4-30-3","ActionCard-overlay--disabled":"actionCard-module-ActionCard-overlay--disabled-N4msm-4-30-3"};
styleInject(css_248z$e);
var _excluded$G = ["children", "disabled", "className", "zIndex", "onClick"];
var ActionCard = function ActionCard(props) {
var children = props.children,
disabled = props.disabled,
className = props.className,
zIndex = props.zIndex,
onClick = props.onClick,
rest = _objectWithoutProperties(props, _excluded$G);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$e['ActionCard'], true), styles$e['ActionCard--default'], !disabled), styles$e['ActionCard--disabled'], disabled), className);
var onKeyDownHandler = function onKeyDownHandler(event) {
if (event.key === 'Enter' && onClick && !disabled) {
onClick(event);
}
};
var onClickHandler = function onClickHandler(event) {
if (!disabled && onClick) {
onClick(event);
}
};
return /*#__PURE__*/React.createElement("div", _extends$2({
tabIndex: disabled ? -1 : 0,
role: "link",
"data-test": "DesignSystem-ActionCard",
className: classes,
onClick: onClickHandler,
onKeyDown: onKeyDownHandler
}, rest), disabled && /*#__PURE__*/React.createElement("div", {
style: {
zIndex: zIndex
},
"data-test": "DesignSystem-ActionCard-Overlay",
className: styles$e['ActionCard-overlay--disabled']
}), children);
};
ActionCard.displayName = 'ActionCard';
var selectedCardValues = new Map();
function useMultiSelect() {
var _React$useState = React.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
selectedCardIds = _React$useState2[0],
setSelectedCardIds = _React$useState2[1];
var isCardSelected = function isCardSelected(id) {
return selectedCardIds.includes(id);
};
var updateCardSelection = function updateCardSelection(id, value) {
var idList = _toConsumableArray(selectedCardIds);
if (isCardSelected(id)) {
idList = selectedCardIds.filter(function (cardKey) {
return id !== cardKey;
});
selectedCardValues["delete"](id);
} else {
idList.push(id);
selectedCardValues.set(id, value);
}
setSelectedCardIds(idList);
};
return {
selectedCardIds: selectedCardIds,
selectedCardValues: selectedCardValues,
isCardSelected: isCardSelected,
updateCardSelection: updateCardSelection
};
}
function useSingleSelect() {
var _React$useState = React.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
selectedCardIds = _React$useState2[0],
setSelectedCardIds = _React$useState2[1];
var _React$useState3 = React.useState([]),
_React$useState4 = _slicedToArray(_React$useState3, 2),
selectedCardValues = _React$useState4[0],
setSelectedCardValues = _React$useState4[1];
var isCardSelected = function isCardSelected(id) {
return selectedCardIds.includes(id);
};
var updateCardSelection = function updateCardSelection(id, value) {
var idList = _toConsumableArray(selectedCardIds);
var valueList = _toConsumableArray(selectedCardValues);
if (selectedCardIds.includes(id)) {
idList = [];
valueList = [];
} else {
idList = [id];
valueList = value ? [value] : [];
}
setSelectedCardIds(idList);
setSelectedCardValues(valueList);
};
return {
selectedCardIds: selectedCardIds,
selectedCardValues: selectedCardValues,
isCardSelected: isCardSelected,
updateCardSelection: updateCardSelection
};
}
var css_248z$d = ".selectionCard-module-Selection-card-qn7-q-4-30-3 {\n border-radius: var(--border-radius-10);\n position: relative;\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.selectionCard-module-Selection-card--default-hU2T--4-30-3 {\n cursor: pointer;\n box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-dark);\n}\n\n.selectionCard-module-Selection-card--default-hU2T--4-30-3:hover {\n box-shadow: inset 0 0 0 var(--spacing-05) var(--inverse-lightest);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.selectionCard-module-Selection-card--default-hU2T--4-30-3:focus,\n.selectionCard-module-Selection-card--default-hU2T--4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-dark);\n}\n\n.selectionCard-module-Selection-card--default-hU2T--4-30-3:active {\n box-shadow: inset 0 0 0 var(--spacing-05) var(--primary);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.selectionCard-module-Selection-card--disabled-abVC--4-30-3 {\n cursor: not-allowed;\n outline: none;\n}\n\n.selectionCard-module-Selection-card--default-disabled-duc48-4-30-3 {\n box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-lighter);\n}\n\n/* selected states */\n\n.selectionCard-module-Selection-card--selected-RWlWc-4-30-3 {\n box-shadow: inset 0 0 0 var(--spacing-05) var(--primary);\n}\n\n.selectionCard-module-Selection-card--selected-RWlWc-4-30-3:hover {\n box-shadow: inset 0 0 0 var(--spacing-05) var(--primary-dark);\n}\n\n.selectionCard-module-Selection-card--selected-RWlWc-4-30-3:focus,\n.selectionCard-module-Selection-card--selected-RWlWc-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n box-shadow: inset 0 0 0 var(--spacing-05) var(--primary);\n}\n\n.selectionCard-module-Selection-card--selected-RWlWc-4-30-3:active {\n box-shadow: inset 0 0 0 var(--spacing-05) var(--primary-darker);\n}\n\n.selectionCard-module-Selection-card--selected-disabled-pIKi1-4-30-3 {\n box-shadow: inset 0 0 0 var(--spacing-2-5) var(--primary-lighter);\n}\n\n/* overlay classes */\n\n.selectionCard-module-Selection-card-overlay-9BMzm-4-30-3 {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 2;\n position: absolute;\n pointer-events: none;\n border-radius: var(--border-radius-10);\n}\n\n.selectionCard-module-Selection-card--default-hU2T--4-30-3:active .selectionCard-module-Selection-card-overlay-9BMzm-4-30-3 {\n background-color: var(--primary);\n opacity: var(--opacity-3);\n}\n\n.selectionCard-module-Selection-card--default-disabled-duc48-4-30-3 .selectionCard-module-Selection-card-overlay-9BMzm-4-30-3 {\n background-color: var(--secondary-lightest);\n opacity: var(--opacity-10);\n}\n\n.selectionCard-module-Selection-card--selected-RWlWc-4-30-3 .selectionCard-module-Selection-card-overlay-9BMzm-4-30-3 {\n background-color: var(--primary);\n opacity: var(--opacity-1);\n}\n\n.selectionCard-module-Selection-card--selected-RWlWc-4-30-3:active .selectionCard-module-Selection-card-overlay-9BMzm-4-30-3 {\n background-color: var(--primary);\n opacity: var(--opacity-1);\n}\n\n.selectionCard-module-Selection-card--selected-disabled-pIKi1-4-30-3 .selectionCard-module-Selection-card-overlay-9BMzm-4-30-3 {\n background-color: var(--primary-lightest);\n opacity: var(--opacity-10);\n}\n\n@media (forced-colors: active) {\n /* All states use inset box-shadow as the sole border — replace with real borders */\n .selectionCard-module-Selection-card--default-hU2T--4-30-3,\n .selectionCard-module-Selection-card--default-hU2T--4-30-3:hover,\n .selectionCard-module-Selection-card--default-hU2T--4-30-3:active,\n .selectionCard-module-Selection-card--default-disabled-duc48-4-30-3 {\n border: var(--border-width-2-5) solid ButtonText;\n box-shadow: none;\n }\n\n /* Interactive selected states — use Highlight to signal selection */\n .selectionCard-module-Selection-card--selected-RWlWc-4-30-3,\n .selectionCard-module-Selection-card--selected-RWlWc-4-30-3:hover,\n .selectionCard-module-Selection-card--selected-RWlWc-4-30-3:active {\n border: var(--border-width-2-5) solid Highlight;\n box-shadow: none;\n }\n\n .selectionCard-module-Selection-card--selected-disabled-pIKi1-4-30-3 {\n border: var(--border-width-2-5) solid GrayText;\n box-shadow: none;\n }\n\n .selectionCard-module-Selection-card--default-hU2T--4-30-3:focus,\n .selectionCard-module-Selection-card--default-hU2T--4-30-3:focus-visible,\n .selectionCard-module-Selection-card--selected-RWlWc-4-30-3:focus,\n .selectionCard-module-Selection-card--selected-RWlWc-4-30-3:focus-visible {\n outline: var(--border-width-05) solid Highlight;\n outline-offset: var(--spacing-05);\n box-shadow: none;\n }\n\n /* Disabled: suppress the focus indicator */\n .selectionCard-module-Selection-card--disabled-abVC--4-30-3 {\n outline: none;\n }\n}\n";
var styles$d = {"Selection-card":"selectionCard-module-Selection-card-qn7-q-4-30-3","Selection-card--default":"selectionCard-module-Selection-card--default-hU2T--4-30-3","Selection-card--disabled":"selectionCard-module-Selection-card--disabled-abVC--4-30-3","Selection-card--default-disabled":"selectionCard-module-Selection-card--default-disabled-duc48-4-30-3","Selection-card--selected":"selectionCard-module-Selection-card--selected-RWlWc-4-30-3","Selection-card--selected-disabled":"selectionCard-module-Selection-card--selected-disabled-pIKi1-4-30-3","Selection-card-overlay":"selectionCard-module-Selection-card-overlay-9BMzm-4-30-3"};
styleInject(css_248z$d);
var _excluded$F = ["children", "onClick", "disabled", "id", "cardValue", "overlayZIndex", "selected", "className"];
var SelectionCard = function SelectionCard(props) {
var children = props.children,
onClick = props.onClick,
disabled = props.disabled,
id = props.id,
cardValue = props.cardValue,
overlayZIndex = props.overlayZIndex,
selected = props.selected,
className = props.className,
rest = _objectWithoutProperties(props, _excluded$F);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$d['Selection-card'], true), styles$d['Selection-card--default'], !disabled), styles$d['Selection-card--selected'], selected && !disabled), styles$d['Selection-card--disabled'], disabled), styles$d['Selection-card--default-disabled'], disabled && !selected), styles$d['Selection-card--selected-disabled'], disabled && selected), className);
var onClickHandler = function onClickHandler(event) {
if (!disabled && onClick) {
onClick(event, id, cardValue);
}
};
var onKeyDownHandler = function onKeyDownHandler(event) {
if (isSpaceKey(event) && !disabled) {
event.preventDefault();
if (event.repeat) return;
onClickHandler(event);
}
};
return /*#__PURE__*/React.createElement("div", _extends$2({
role: "checkbox",
"aria-checked": selected,
tabIndex: disabled ? -1 : 0,
onKeyDown: onKeyDownHandler,
onClick: function onClick(event) {
return onClickHandler(event);
},
className: classes,
"data-test": "DesignSystem-SelectionCard"
}, rest), /*#__PURE__*/React.createElement("div", {
className: styles$d['Selection-card-overlay'],
style: {
zIndex: overlayZIndex
},
"data-test": "DesignSystem-SelectionCard-Overlay"
}), children);
};
SelectionCard.defaultProps = {
disabled: false,
overlayZIndex: 2
};
SelectionCard.useMultiSelect = useMultiSelect;
SelectionCard.useSingleSelect = useSingleSelect;
function arrayMove(array, from, to) {
array = array.slice();
array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]);
return array;
}
function getTranslateOffset(element) {
var style = window.getComputedStyle(element);
return Math.max(parseInt(style['margin-top'], 10), parseInt(style['margin-bottom'], 10)) + element.getBoundingClientRect().height;
}
function isTouchEvent(event) {
return event.touches && event.touches.length || event.changedTouches && event.changedTouches.length;
}
function transformItem(element) {
var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var offsetX = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
if (!element) return;
if (offsetY === null || offsetX === null) {
element.style.removeProperty('transform');
return;
}
element.style.transform = "translate(".concat(offsetX, "px, ").concat(offsetY, "px)");
}
function setItemTransition(element, duration, timing) {
if (element) {
element.style['transition'] = "transform ".concat(duration, "ms").concat(timing ? " ".concat(timing) : '');
}
}
// returns the "slot" for the targetValue, aka where it should go
// in an ordered "array", it starts with -1 index
function binarySearch(array, targetValue) {
var min = 0;
var max = array.length - 1;
var guess;
while (min <= max) {
guess = Math.floor((max + min) / 2);
if (!array[guess + 1] || array[guess] <= targetValue && array[guess + 1] >= targetValue) {
return guess;
} else if (array[guess] < targetValue && array[guess + 1] < targetValue) {
min = guess + 1;
} else {
max = guess - 1;
}
}
return -1;
}
// A throttle function that uses requestAnimationFrame to rate limit
var schd = function schd(fn) {
var lastArgs = [];
var frameId = null;
var wrapperFn = function wrapperFn() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
lastArgs = args;
if (frameId) {
return;
}
frameId = requestAnimationFrame(function () {
frameId = null;
fn.apply(void 0, _toConsumableArray(lastArgs));
});
};
wrapperFn.cancel = function () {
if (frameId) {
cancelAnimationFrame(frameId);
}
};
return wrapperFn;
};
var css_248z$c = ".listbox-module-Listbox-SUVk--4-30-3 {\n margin: 0;\n padding: 0;\n display: flex;\n list-style-type: none;\n flex-direction: column;\n}\n\n.listbox-module-Listbox-item-YQzPV-4-30-3 {\n display: flex;\n align-items: center;\n padding-left: var(--spacing-40);\n padding-right: var(--spacing-40);\n}\n\n.listbox-module-Listbox-item-wrapper-fbx8s-4-30-3 {\n width: 100%;\n}\n\n.listbox-module-Listbox-item-wrapper-fbx8s-4-30-3:last-child > .listbox-module-Listbox-divider-sZWin-4-30-3,\n.listbox-module-Listbox-item--draggable-3UvAw-4-30-3:last-child .listbox-module-Listbox-divider-sZWin-4-30-3 {\n background: transparent;\n}\n\n/* Sizes */\n\n.listbox-module-Listbox-item--tight-48bRS-4-30-3 {\n padding-top: var(--spacing-10);\n padding-bottom: var(--spacing-10);\n}\n\n.listbox-module-Listbox-item--compressed-NDxwb-4-30-3 {\n padding-top: var(--spacing-20);\n padding-bottom: var(--spacing-20);\n}\n\n.listbox-module-Listbox-item--standard-q2FuW-4-30-3 {\n padding-top: var(--spacing-30);\n padding-bottom: var(--spacing-30);\n}\n\n/* Listbox type - option */\n\n.listbox-module-Listbox-item--option-FMiJ2-4-30-3 {\n cursor: pointer;\n}\n\n.listbox-module-Listbox-item--option-FMiJ2-4-30-3:hover {\n background-color: var(--secondary-lightest);\n}\n\n.listbox-module-Listbox-item--option-FMiJ2-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: calc(-1 * var(--border-width-05));\n}\n\n.listbox-module-Listbox-item--option-FMiJ2-4-30-3:active {\n background: var(--secondary-lighter);\n}\n\n.listbox-module-Listbox-item--selected-mbKE--4-30-3 {\n position: relative;\n background: rgba(214, 238, 255, 0.48);\n}\n\n.listbox-module-Listbox-item--selected-mbKE--4-30-3::before {\n content: '';\n position: absolute;\n top: var(--spacing-10);\n left: var(--spacing-10);\n width: var(--spacing-20);\n height: var(--spacing-20);\n background-color: var(--primary);\n clip-path: polygon(0 0, 100% 0, 0 100%);\n}\n\n.listbox-module-Listbox-item--tight-48bRS-4-30-3.listbox-module-Listbox-item--selected-mbKE--4-30-3::before {\n top: var(--spacing-05);\n left: var(--spacing-05);\n}\n\n.listbox-module-Listbox-item--selected-mbKE--4-30-3:hover {\n background: rgba(139, 202, 254, 0.48);\n}\n\n.listbox-module-Listbox-item--selected-mbKE--4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: calc(-1 * var(--border-width-05));\n}\n\n.listbox-module-Listbox-item--selected-mbKE--4-30-3:active {\n background: var(--primary-lighter);\n}\n\n/* Listbox type - resource */\n\n.listbox-module-Listbox-item--resource-RGjFr-4-30-3 {\n cursor: pointer;\n}\n\n.listbox-module-Listbox-item--resource-RGjFr-4-30-3:hover {\n background-color: var(--secondary-lightest);\n}\n\n.listbox-module-Listbox-item--resource-RGjFr-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: calc(-1 * var(--border-width-05));\n}\n\n.listbox-module-Listbox-item--resource-RGjFr-4-30-3:active {\n background: var(--secondary-lighter);\n}\n\n.listbox-module-Listbox-item--activated-tg1Eb-4-30-3 {\n position: relative;\n background: var(--primary-lightest);\n}\n\n.listbox-module-Listbox-item--activated-tg1Eb-4-30-3::before {\n content: '';\n position: absolute;\n top: var(--spacing-10);\n left: var(--spacing-10);\n width: var(--spacing-20);\n height: var(--spacing-20);\n background-color: var(--primary);\n clip-path: polygon(0 0, 100% 0, 0 100%);\n}\n\n.listbox-module-Listbox-item--tight-48bRS-4-30-3.listbox-module-Listbox-item--activated-tg1Eb-4-30-3::before {\n top: var(--spacing-05);\n left: var(--spacing-05);\n}\n\n/* Listbox type - description */\n\n.listbox-module-Listbox-item--description-qiJzO-4-30-3:focus-visible {\n outline: none;\n}\n\n/* Listbox type - disabled */\n\n.listbox-module-Listbox-item--disabled-x6TW2-4-30-3 {\n opacity: var(--opacity-10);\n pointer-events: none;\n}\n\n/* Listbox type - draggable */\n\n.listbox-module-Listbox-item--draggable-3UvAw-4-30-3:hover {\n background-color: var(--secondary-lightest);\n}\n\n.listbox-module-Listbox-item--draggable-3UvAw-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: calc(-1 * var(--border-width-05));\n}\n\n.listbox-module-Listbox-item--drag-icon-Jt6Jw-4-30-3 {\n cursor: grab;\n padding: var(--spacing-10);\n margin-right: calc(var(--spacing-20) - var(--spacing-10));\n margin-left: calc(-1 * var(--spacing-10));\n border-radius: var(--border-radius-10);\n transition: background-color var(--duration--moderate-01) var(--standard-productive-curve),\n color var(--duration--moderate-01) var(--standard-productive-curve),\n box-shadow var(--duration--moderate-01) var(--standard-productive-curve);\n}\n\n.listbox-module-Listbox-item--drag-icon-Jt6Jw-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.listbox-module-Listbox-item--drag-icon-Jt6Jw-4-30-3:hover {\n background-color: var(--secondary);\n color: var(--inverse);\n}\n\n.listbox-module-Listbox-item--drag-icon-Jt6Jw-4-30-3:active {\n background-color: var(--secondary-dark);\n color: var(--primary);\n}\n\n/* Drag and reorder interaction states */\n\n.listbox-module-Listbox-item--sticky-picked-o8Drq-4-30-3,\n.listbox-module-Listbox-item--drag-picked-ht640-4-30-3 {\n background-color: var(--text-white);\n box-shadow: var(--shadow-l);\n rotate: 0.5deg;\n cursor: grabbing;\n z-index: 1000;\n position: relative;\n}\n\n.listbox-module-Listbox-item--sticky-picked-o8Drq-4-30-3 .listbox-module-Listbox-item--selected-mbKE--4-30-3,\n.listbox-module-Listbox-item--drag-picked-ht640-4-30-3 .listbox-module-Listbox-item--selected-mbKE--4-30-3 {\n background-color: rgba(214, 238, 255, 0.48);\n}\n\n.listbox-module-Listbox-item--sticky-picked-o8Drq-4-30-3 .listbox-module-Listbox-item--drag-icon-Jt6Jw-4-30-3 {\n background-color: var(--primary);\n color: var(--text-white);\n}\n\n.listbox-module-Listbox-item--drag-picked-ht640-4-30-3 .listbox-module-Listbox-item--drag-icon-Jt6Jw-4-30-3 {\n background-color: var(--primary-ultra-light);\n color: var(--primary);\n box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary);\n}\n\n.listbox-module-Listbox-aria-live-odEhw-4-30-3 {\n position: absolute;\n width: var(--spacing-2-5);\n height: var(--spacing-2-5);\n padding: 0;\n margin: calc(-1 * var(--spacing-2-5));\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n@media (forced-colors: active) {\n .listbox-module-Listbox-item--description-qiJzO-4-30-3:focus-visible {\n outline: var(--border-width-05) solid Highlight;\n outline-offset: calc(-1 * var(--border-width-05));\n }\n\n .listbox-module-Listbox-item--disabled-x6TW2-4-30-3 {\n opacity: 1;\n color: GrayText;\n }\n\n .listbox-module-Listbox-item--selected-mbKE--4-30-3::before,\n .listbox-module-Listbox-item--activated-tg1Eb-4-30-3::before {\n background-color: Highlight;\n }\n}\n";
var styles$c = {"Listbox":"listbox-module-Listbox-SUVk--4-30-3","Listbox-item":"listbox-module-Listbox-item-YQzPV-4-30-3","Listbox-item-wrapper":"listbox-module-Listbox-item-wrapper-fbx8s-4-30-3","Listbox-divider":"listbox-module-Listbox-divider-sZWin-4-30-3","Listbox-item--draggable":"listbox-module-Listbox-item--draggable-3UvAw-4-30-3","Listbox-item--tight":"listbox-module-Listbox-item--tight-48bRS-4-30-3","Listbox-item--compressed":"listbox-module-Listbox-item--compressed-NDxwb-4-30-3","Listbox-item--standard":"listbox-module-Listbox-item--standard-q2FuW-4-30-3","Listbox-item--option":"listbox-module-Listbox-item--option-FMiJ2-4-30-3","Listbox-item--selected":"listbox-module-Listbox-item--selected-mbKE--4-30-3","Listbox-item--resource":"listbox-module-Listbox-item--resource-RGjFr-4-30-3","Listbox-item--activated":"listbox-module-Listbox-item--activated-tg1Eb-4-30-3","Listbox-item--description":"listbox-module-Listbox-item--description-qiJzO-4-30-3","Listbox-item--disabled":"listbox-module-Listbox-item--disabled-x6TW2-4-30-3","Listbox-item--drag-icon":"listbox-module-Listbox-item--drag-icon-Jt6Jw-4-30-3","Listbox-item--sticky-picked":"listbox-module-Listbox-item--sticky-picked-o8Drq-4-30-3","Listbox-item--drag-picked":"listbox-module-Listbox-item--drag-picked-ht640-4-30-3","Listbox-aria-live":"listbox-module-Listbox-aria-live-odEhw-4-30-3"};
styleInject(css_248z$c);
var AUTOSCROLL_ACTIVE_OFFSET = 200;
var AUTOSCROLL_SPEED_RATIO = 10;
/** Min gap between list edge and picked / drop slot while keyboard reordering (px). */
var KEYBOARD_REORDER_SCROLL_PADDING = 8;
var TAB_FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
var Draggable = /*#__PURE__*/function (_React$Component) {
function Draggable(props) {
var _this;
_classCallCheck(this, Draggable);
_this = _callSuper(this, Draggable, [props]);
_defineProperty$1(_this, "listRef", /*#__PURE__*/React.createRef());
_defineProperty$1(_this, "ghostRef", /*#__PURE__*/React.createRef());
_defineProperty$1(_this, "topOffsets", []);
_defineProperty$1(_this, "itemTranslateOffsets", []);
_defineProperty$1(_this, "initialYOffset", 0);
_defineProperty$1(_this, "lastScroll", 0);
_defineProperty$1(_this, "lastYOffset", 0);
_defineProperty$1(_this, "lastListYOffset", 0);
_defineProperty$1(_this, "mouseDownX", 0);
_defineProperty$1(_this, "mouseDownY", 0);
_defineProperty$1(_this, "hasDragStarted", false);
_defineProperty$1(_this, "dropTimeout", void 0);
_defineProperty$1(_this, "needle", -1);
_defineProperty$1(_this, "afterIndex", -2);
_defineProperty$1(_this, "state", {
itemDragged: -1,
itemDraggedOutOfBounds: -1,
selectedItem: -1,
focusedIndex: 0,
initialX: 0,
initialY: 0,
targetX: 0,
targetY: 0,
targetHeight: 0,
targetWidth: 0,
scrollingSpeed: 0,
scrollWindow: false,
isClickAndFollow: false,
ariaMessage: ''
});
_defineProperty$1(_this, "schdOnMouseMove", void 0);
_defineProperty$1(_this, "schdOnTouchMove", void 0);
_defineProperty$1(_this, "schdOnEnd", void 0);
/**
* Keeps the keyboard-reordered row (CSS transform) and the needle slot in view.
* Uses bounding rects (transform-aware); only adjusts listRef scroll, not ancestors.
*/
_defineProperty$1(_this, "ensureKeyboardReorderVisible", function (pickedIndex, needleIndex) {
var listEl = _this.listRef.current;
if (!listEl) return;
var children = _this.getChildren();
var picked = children[pickedIndex];
if (!picked) return;
var apply = function apply() {
var pad = KEYBOARD_REORDER_SCROLL_PADDING;
for (var pass = 0; pass < 2; pass++) {
var listRect = listEl.getBoundingClientRect();
var pr = picked.getBoundingClientRect();
var top = pr.top;
var bottom = pr.bottom;
var slot = children[needleIndex];
if (slot && needleIndex !== pickedIndex) {
var sr = slot.getBoundingClientRect();
top = Math.min(top, sr.top);
bottom = Math.max(bottom, sr.bottom);
}
var delta = 0;
if (top < listRect.top + pad) {
delta = top - listRect.top - pad;
} else if (bottom > listRect.bottom - pad) {
delta = bottom - listRect.bottom + pad;
}
if (delta === 0) break;
listEl.scrollTop += delta;
}
};
apply();
window.requestAnimationFrame(apply);
});
_defineProperty$1(_this, "doScrolling", function () {
var _this$state = _this.state,
scrollingSpeed = _this$state.scrollingSpeed,
scrollWindow = _this$state.scrollWindow;
var listEl = _this.listRef.current;
window.requestAnimationFrame(function () {
if (scrollWindow) {
window.scrollTo(window.pageXOffset, window.pageYOffset + scrollingSpeed * 1.5);
} else {
listEl.scrollTop += scrollingSpeed;
}
if (scrollingSpeed !== 0) {
_this.doScrolling();
}
});
});
_defineProperty$1(_this, "getChildren", function () {
if (_this.listRef && _this.listRef.current) {
return Array.from(_this.listRef.current.children);
}
return [];
});
_defineProperty$1(_this, "calculateOffsets", function () {
_this.topOffsets = _this.getChildren().map(function (item) {
return item.getBoundingClientRect().top;
});
_this.itemTranslateOffsets = _this.getChildren().map(function (item) {
return getTranslateOffset(item);
});
});
_defineProperty$1(_this, "getTargetIndex", function (e) {
return _this.getChildren().findIndex(function (child) {
return child === e.target || child.contains(e.target);
});
});
_defineProperty$1(_this, "onMouseOrTouchStart", function (e) {
var _touches$, _e$target;
if (_this.dropTimeout && _this.state.itemDragged > -1) {
window.clearTimeout(_this.dropTimeout);
_this.dropTimeout = undefined;
_this.finishDrop();
}
var isTouch = isTouchEvent(e);
if (!isTouch && e.button !== 0) return;
if (_this.state.isClickAndFollow) {
e.preventDefault();
// Second click in Click-and-Follow mode commits the drop via onEnd
var clickedIndex = _this.getTargetIndex(e);
if (clickedIndex > -1) {
_this.afterIndex = clickedIndex;
} else {
_this.afterIndex = -2;
}
return;
}
var targetNode = isTouch ? (_touches$ = e.touches[0]) === null || _touches$ === void 0 ? void 0 : _touches$.target : e.target;
var listEl = _this.listRef.current;
if (_this.state.selectedItem > -1) {
if (!listEl || !targetNode) {
return;
}
if (!listEl.contains(targetNode)) {
_this.cancelKeyboardPick();
return;
}
var pickedIndex = _this.getTargetIndex(e);
var rowInvalid = pickedIndex < 0 || !!(_this.props.values[pickedIndex] && _this.props.values[pickedIndex].props.disabled);
if (rowInvalid) {
_this.cancelKeyboardPick();
return;
}
e.cancelable && e.preventDefault();
_this.needle = pickedIndex;
_this.commitKeyboardReorder();
return;
}
var index = _this.getTargetIndex(e);
var listItemTouched = _this.getChildren()[index];
var isValidDragHandle = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.classList.contains(styles$c['Listbox-item--drag-icon']);
if (!isValidDragHandle) return;
e.preventDefault();
_this.mouseDownX = isTouch ? e.touches[0].clientX : e.clientX;
_this.mouseDownY = isTouch ? e.touches[0].clientY : e.clientY;
_this.hasDragStarted = false;
if (isTouch) {
var opts = {
passive: false
};
listItemTouched.style.touchAction = 'none';
document.addEventListener('touchend', _this.schdOnEnd, opts);
document.addEventListener('touchmove', _this.schdOnTouchMove, opts);
document.addEventListener('touchcancel', _this.schdOnEnd, opts);
} else {
document.addEventListener('mousemove', _this.schdOnMouseMove);
document.addEventListener('mouseup', _this.schdOnEnd);
var listItemDragged = _this.getChildren()[_this.state.itemDragged];
if (listItemDragged && listItemDragged.style) {
listItemDragged.style.touchAction = '';
}
}
_this.onStart(listItemTouched, isTouch ? e.touches[0].clientX : e.clientX, isTouch ? e.touches[0].clientY : e.clientY, index);
});
_defineProperty$1(_this, "getYOffset", function () {
var listScroll = _this.listRef.current ? _this.listRef.current.scrollTop : 0;
return window.pageYOffset + listScroll;
});
_defineProperty$1(_this, "onStart", function (target, clientX, clientY, index) {
if (_this.state.selectedItem > -1) {
_this.setState({
selectedItem: -1
});
_this.needle = -1;
}
var targetRect = target.getBoundingClientRect();
var targetStyles = window.getComputedStyle(target);
_this.calculateOffsets();
_this.initialYOffset = _this.getYOffset();
_this.lastYOffset = window.pageYOffset;
_this.lastListYOffset = _this.listRef.current.scrollTop;
_this.setState({
itemDragged: index,
targetX: targetRect.left - parseInt(targetStyles['margin-left'], 10),
targetY: targetRect.top - parseInt(targetStyles['margin-top'], 10),
targetHeight: targetRect.height,
targetWidth: targetRect.width,
initialX: clientX,
initialY: clientY
});
});
_defineProperty$1(_this, "onMouseMove", function (e) {
e.cancelable && e.preventDefault();
if (!_this.hasDragStarted) {
var dx = Math.abs(e.clientX - _this.mouseDownX);
var dy = Math.abs(e.clientY - _this.mouseDownY);
if (dy + dx * 0.5 >= 5) {
_this.hasDragStarted = true;
} else {
return;
}
}
_this.onMove(e.clientX, e.clientY);
});
_defineProperty$1(_this, "onTouchMove", function (e) {
e.cancelable && e.preventDefault();
if (!_this.hasDragStarted) {
var dx = Math.abs(e.touches[0].clientX - _this.mouseDownX);
var dy = Math.abs(e.touches[0].clientY - _this.mouseDownY);
if (dy + dx * 0.5 >= 5) {
_this.hasDragStarted = true;
} else {
return;
}
}
_this.onMove(e.touches[0].clientX, e.touches[0].clientY);
});
_defineProperty$1(_this, "onWheel", function (e) {
if (_this.state.itemDragged < 0) return;
_this.lastScroll = _this.listRef.current.scrollTop += e.deltaY;
_this.moveOtherItems();
});
_defineProperty$1(_this, "onMove", function (clientX, clientY) {
if (_this.state.itemDragged === -1) return null;
transformItem(_this.ghostRef.current, clientY - _this.state.initialY, _this.props.lockVertically ? 0 : clientX - _this.state.initialX);
_this.autoScrolling(clientY);
_this.moveOtherItems();
return;
});
_defineProperty$1(_this, "moveOtherItems", function () {
var targetRect = _this.ghostRef.current.getBoundingClientRect();
var itemVerticalCenter = targetRect.top + targetRect.height / 2;
var offset = getTranslateOffset(_this.getChildren()[_this.state.itemDragged]);
var currentYOffset = _this.getYOffset();
// adjust offsets if scrolling happens during the item movement
if (_this.initialYOffset !== currentYOffset) {
_this.topOffsets = _this.topOffsets.map(function (offset) {
return offset - (currentYOffset - _this.initialYOffset);
});
_this.initialYOffset = currentYOffset;
}
if (_this.isDraggedItemOutOfBounds() && _this.props.removableByMove) {
_this.afterIndex = _this.topOffsets.length + 1;
} else {
_this.afterIndex = binarySearch(_this.topOffsets, itemVerticalCenter);
}
_this.animateItems(_this.afterIndex === -1 ? 0 : _this.afterIndex, _this.state.itemDragged, offset);
});
_defineProperty$1(_this, "autoScrolling", function (clientY) {
var _getBoundingClientRec = _this.listRef.current.getBoundingClientRect(),
top = _getBoundingClientRec.top,
bottom = _getBoundingClientRec.bottom,
height = _getBoundingClientRec.height;
var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
// auto scrolling for the window (down)
if (bottom > viewportHeight && viewportHeight - clientY < AUTOSCROLL_ACTIVE_OFFSET) {
_this.setState({
scrollingSpeed: Math.round((AUTOSCROLL_ACTIVE_OFFSET - (viewportHeight - clientY)) / AUTOSCROLL_SPEED_RATIO),
scrollWindow: true
});
// auto scrolling for the window (up)
} else if (top < 0 && clientY < AUTOSCROLL_ACTIVE_OFFSET) {
_this.setState({
scrollingSpeed: Math.round((AUTOSCROLL_ACTIVE_OFFSET - clientY) / -AUTOSCROLL_SPEED_RATIO),
scrollWindow: true
});
} else {
if (_this.state.scrollWindow && _this.state.scrollingSpeed !== 0) {
_this.setState({
scrollingSpeed: 0,
scrollWindow: false
});
}
// auto scrolling for containers with overflow
if (height + 20 < _this.listRef.current.scrollHeight) {
var scrollingSpeed = 0;
if (clientY - top < AUTOSCROLL_ACTIVE_OFFSET) {
scrollingSpeed = Math.round((AUTOSCROLL_ACTIVE_OFFSET - (clientY - top)) / -AUTOSCROLL_SPEED_RATIO);
} else if (bottom - clientY < AUTOSCROLL_ACTIVE_OFFSET) {
scrollingSpeed = Math.round((AUTOSCROLL_ACTIVE_OFFSET - (bottom - clientY)) / AUTOSCROLL_SPEED_RATIO);
}
if (_this.state.scrollingSpeed !== scrollingSpeed) {
_this.setState({
scrollingSpeed: scrollingSpeed
});
}
}
}
});
_defineProperty$1(_this, "animateItems", function (needle, movedItem, offset) {
var animateMovedItem = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
_this.getChildren().forEach(function (item, i) {
setItemTransition(item, _this.props.transitionDuration);
if (movedItem === i && animateMovedItem) {
if (movedItem === needle) {
return transformItem(item, null);
}
transformItem(item, movedItem < needle ? _this.itemTranslateOffsets.slice(movedItem + 1, needle + 1).reduce(function (a, b) {
return a + b;
}, 0) : _this.itemTranslateOffsets.slice(needle, movedItem).reduce(function (a, b) {
return a + b;
}, 0) * -1);
} else if (movedItem < needle && i > movedItem && i <= needle) {
transformItem(item, -offset);
} else if (i < movedItem && movedItem > needle && i >= needle) {
transformItem(item, offset);
} else {
transformItem(item, null);
}
});
});
_defineProperty$1(_this, "isDraggedItemOutOfBounds", function () {
var initialRect = _this.getChildren()[_this.state.itemDragged].getBoundingClientRect();
var targetRect = _this.ghostRef.current.getBoundingClientRect();
if (Math.abs(initialRect.left - targetRect.left) > targetRect.width) {
if (_this.state.itemDraggedOutOfBounds === -1) {
_this.setState({
itemDraggedOutOfBounds: _this.state.itemDragged
});
}
return true;
}
if (_this.state.itemDraggedOutOfBounds > -1) {
_this.setState({
itemDraggedOutOfBounds: -1
});
}
return false;
});
/** Shared tail of pointer drop: detach listeners, animate ghost, schedule {@link finishDrop}. */
_defineProperty$1(_this, "finalizeActivePointerDrop", function () {
document.removeEventListener('mousemove', _this.schdOnMouseMove);
document.removeEventListener('touchmove', _this.schdOnTouchMove);
document.removeEventListener('mouseup', _this.schdOnEnd);
document.removeEventListener('touchend', _this.schdOnEnd);
document.removeEventListener('touchcancel', _this.schdOnEnd);
var removeItem = _this.props.removableByMove && _this.isDraggedItemOutOfBounds();
if (!removeItem && _this.props.transitionDuration > 0 && _this.afterIndex !== -2) {
// animate drop
schd(function () {
setItemTransition(_this.ghostRef.current, _this.props.transitionDuration, 'cubic-bezier(0.2, 0, 0.38, 0.9)');
if (_this.afterIndex < 1 && _this.state.itemDragged === 0) {
transformItem(_this.ghostRef.current, 0, 0);
} else {
transformItem(_this.ghostRef.current,
// compensate window scroll
-(window.pageYOffset - _this.lastYOffset) +
// compensate container scroll
-(_this.listRef.current.scrollTop - _this.lastListYOffset) + (_this.state.itemDragged < _this.afterIndex ? _this.itemTranslateOffsets.slice(_this.state.itemDragged + 1, _this.afterIndex + 1).reduce(function (a, b) {
return a + b;
}, 0) : _this.itemTranslateOffsets.slice(_this.afterIndex < 0 ? 0 : _this.afterIndex, _this.state.itemDragged).reduce(function (a, b) {
return a + b;
}, 0) * -1), 0);
}
})();
}
_this.dropTimeout = window.setTimeout(_this.finishDrop, removeItem || _this.afterIndex === -2 ? 0 : _this.props.transitionDuration);
});
/** Space (or second click) during click-and-follow: drop at focused row, same as pointer second click. */
_defineProperty$1(_this, "completeClickAndFollowDropAtFocusedIndex", function (index) {
_this.afterIndex = index;
_this.needle = -1;
_this.setState({
isClickAndFollow: false,
selectedItem: -1
});
_this.finalizeActivePointerDrop();
});
_defineProperty$1(_this, "onEnd", function (e) {
e.cancelable && e.preventDefault();
if (!_this.hasDragStarted) {
if (!_this.state.isClickAndFollow) {
// First click -> start Click-and-Follow
_this.setState({
isClickAndFollow: true,
ariaMessage: 'Item grabbed. Move focus to choose a destination, then click or press Space to drop.'
});
return; // Keep listeners alive
} else {
// Second click -> end Click-and-Follow
_this.setState({
isClickAndFollow: false
});
}
}
_this.finalizeActivePointerDrop();
});
_defineProperty$1(_this, "finishDrop", function () {
_this.dropTimeout = undefined;
var removeItem = _this.props.removableByMove && _this.isDraggedItemOutOfBounds();
if (removeItem || _this.afterIndex > -2 && _this.state.itemDragged !== _this.afterIndex) {
_this.props.onChange({
oldIndex: _this.state.itemDragged,
newIndex: removeItem ? -1 : Math.max(_this.afterIndex, 0),
targetRect: _this.ghostRef.current.getBoundingClientRect()
});
}
_this.getChildren().forEach(function (item) {
setItemTransition(item, 0);
transformItem(item, null);
item.style.touchAction = '';
});
_this.hasDragStarted = false;
_this.setState({
itemDragged: -1,
scrollingSpeed: 0,
isClickAndFollow: false,
ariaMessage: _this.afterIndex === -2 ? 'Reorder cancelled. Item returned to its original position.' : "Item dropped at position ".concat(Math.max(_this.afterIndex, 0) + 1, ".")
});
_this.afterIndex = -2;
// sometimes the scroll gets messed up after the drop, fix:
if (_this.lastScroll > 0) {
_this.listRef.current.scrollTop = _this.lastScroll;
_this.lastScroll = 0;
}
});
/** Cancel keyboard pick without applying reorder (Escape, pointer outside list, or non-row hit inside list). */
_defineProperty$1(_this, "cancelKeyboardPick", function () {
_this.getChildren().forEach(function (item) {
setItemTransition(item, 0);
transformItem(item, null);
});
_this.setState({
selectedItem: -1,
ariaMessage: 'Reorder cancelled. Item returned to its original position.'
});
_this.needle = -1;
});
/** Commit keyboard reorder (Space / Enter / Tab): apply move if needle differs, then clear pick state. */
_defineProperty$1(_this, "commitKeyboardReorder", function () {
var selectedItem = _this.state.selectedItem;
if (selectedItem < 0) return;
if (selectedItem !== _this.needle) {
_this.getChildren().forEach(function (item) {
setItemTransition(item, 0);
transformItem(item, null);
});
_this.props.onChange({
oldIndex: selectedItem,
newIndex: _this.needle,
targetRect: _this.getChildren()[_this.needle].getBoundingClientRect()
});
var rowEl = _this.getChildren()[_this.needle];
rowEl.focus();
}
_this.setState({
selectedItem: -1
});
_this.needle = -1;
});
/** After Tab commits keyboard reorder, move focus like native Tab (document order). */
_defineProperty$1(_this, "advanceTabFocusFromActiveElement", function (shiftKey) {
var active = document.activeElement;
if (!(active instanceof HTMLElement) || !document.body) return;
var nodes = Array.from(document.body.querySelectorAll(TAB_FOCUSABLE_SELECTOR)).filter(function (el) {
if (el.getAttribute('aria-hidden') === 'true') return false;
var style = window.getComputedStyle(el);
if (style.visibility === 'hidden' || style.display === 'none') return false;
return !el.disabled;
});
var currentIdx = nodes.indexOf(active);
if (currentIdx === -1) {
var insertIdx = nodes.findIndex(function (node) {
return active.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING;
});
if (insertIdx !== -1) {
nodes.splice(insertIdx, 0, active);
currentIdx = insertIdx;
} else {
nodes.push(active);
currentIdx = nodes.length - 1;
}
}
var next = shiftKey ? nodes[currentIdx - 1] : nodes[currentIdx + 1];
next === null || next === void 0 || next.focus();
});
_defineProperty$1(_this, "onKeyDown", function (e) {
var selectedItem = _this.state.selectedItem;
var index = _this.getTargetIndex(e);
if (e.key === 'Escape' && _this.state.itemDragged > -1) {
_this.getChildren().forEach(function (item) {
setItemTransition(item, 0);
transformItem(item, null);
item.style.touchAction = '';
});
_this.hasDragStarted = false;
_this.setState({
itemDragged: -1,
scrollingSpeed: 0,
isClickAndFollow: false,
ariaMessage: 'Reorder cancelled. Item returned to its original position.'
});
_this.afterIndex = -2;
if (_this.dropTimeout) {
window.clearTimeout(_this.dropTimeout);
_this.dropTimeout = undefined;
}
document.removeEventListener('mousemove', _this.schdOnMouseMove);
document.removeEventListener('touchmove', _this.schdOnTouchMove);
document.removeEventListener('mouseup', _this.schdOnEnd);
document.removeEventListener('touchend', _this.schdOnEnd);
document.removeEventListener('touchcancel', _this.schdOnEnd);
return;
}
if (index === -1 || _this.props.values[index] && _this.props.values[index].props.disabled) {
return;
}
if (isSpaceKey(e)) {
e.preventDefault();
if (_this.state.itemDragged > -1 && _this.state.isClickAndFollow) {
_this.completeClickAndFollowDropAtFocusedIndex(index);
return;
}
if (selectedItem === index) {
_this.commitKeyboardReorder();
} else {
_this.setState({
selectedItem: index
});
_this.needle = index;
_this.calculateOffsets();
}
}
if (e.key === 'Enter' && selectedItem > -1 && selectedItem === index) {
e.preventDefault();
_this.commitKeyboardReorder();
}
if (e.key === 'Tab' && selectedItem > -1 && selectedItem === index) {
e.preventDefault();
var shiftKey = e.shiftKey;
_this.commitKeyboardReorder();
queueMicrotask(function () {
return _this.advanceTabFocusFromActiveElement(shiftKey);
});
}
if ((e.key === 'ArrowDown' || e.key === 'j') && selectedItem > -1 && _this.needle < _this.props.values.length - 1) {
e.preventDefault();
var offset = getTranslateOffset(_this.getChildren()[selectedItem]);
_this.needle++;
_this.animateItems(_this.needle, selectedItem, offset, true);
_this.ensureKeyboardReorderVisible(selectedItem, _this.needle);
} else if ((e.key === 'ArrowDown' || e.key === 'j') && selectedItem === -1) {
e.preventDefault();
var nextIndex = _this.state.focusedIndex + 1;
while (nextIndex < _this.props.values.length && _this.props.values[nextIndex] && _this.props.values[nextIndex].props.disabled) {
nextIndex++;
}
if (nextIndex < _this.props.values.length) {
_this.setState({
focusedIndex: nextIndex
});
_this.getChildren()[nextIndex].focus();
}
}
if ((e.key === 'ArrowUp' || e.key === 'k') && selectedItem > -1 && _this.needle > 0) {
e.preventDefault();
var _offset = getTranslateOffset(_this.getChildren()[selectedItem]);
_this.needle--;
_this.animateItems(_this.needle, selectedItem, _offset, true);
_this.ensureKeyboardReorderVisible(selectedItem, _this.needle);
} else if ((e.key === 'ArrowUp' || e.key === 'k') && selectedItem === -1) {
e.preventDefault();
var _nextIndex = _this.state.focusedIndex - 1;
while (_nextIndex >= 0 && _this.props.values[_nextIndex] && _this.props.values[_nextIndex].props.disabled) {
_nextIndex--;
}
if (_nextIndex >= 0) {
_this.setState({
focusedIndex: _nextIndex
});
_this.getChildren()[_nextIndex].focus();
}
}
if (e.key === 'Escape' && selectedItem > -1) {
e.preventDefault();
_this.cancelKeyboardPick();
}
});
_this.schdOnMouseMove = schd(_this.onMouseMove);
_this.schdOnTouchMove = schd(_this.onTouchMove);
_this.schdOnEnd = schd(_this.onEnd);
return _this;
}
_inherits(Draggable, _React$Component);
return _createClass(Draggable, [{
key: "componentDidMount",
value: function componentDidMount() {
this.calculateOffsets();
document.addEventListener('touchstart', this.onMouseOrTouchStart, {
passive: false,
capture: false
});
document.addEventListener('mousedown', this.onMouseOrTouchStart);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(_prevProps, prevState) {
if (prevState.scrollingSpeed !== this.state.scrollingSpeed && prevState.scrollingSpeed === 0) {
this.doScrolling();
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
document.removeEventListener('touchstart', this.onMouseOrTouchStart);
document.removeEventListener('mousedown', this.onMouseOrTouchStart);
document.removeEventListener('mousemove', this.schdOnMouseMove);
document.removeEventListener('touchmove', this.schdOnTouchMove);
document.removeEventListener('mouseup', this.schdOnEnd);
document.removeEventListener('touchend', this.schdOnEnd);
document.removeEventListener('touchcancel', this.schdOnEnd);
if (this.dropTimeout) {
window.clearTimeout(this.dropTimeout);
this.dropTimeout = undefined;
}
this.schdOnMouseMove.cancel();
this.schdOnTouchMove.cancel();
this.schdOnEnd.cancel();
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var firstEnabledIndex = this.props.values.findIndex(function (value) {
return !(value && value.props.disabled);
});
var isOutOfBounds = this.state.focusedIndex < 0 || this.state.focusedIndex >= this.props.values.length;
var currentItemIsDisabled = !isOutOfBounds && this.props.values[this.state.focusedIndex] && this.props.values[this.state.focusedIndex].props.disabled;
var effectiveFocusedIndex = isOutOfBounds || currentItemIsDisabled ? firstEnabledIndex : this.state.focusedIndex;
var baseStyle = {
userSelect: 'none',
WebkitUserSelect: 'none',
MozUserSelect: 'none',
msUserSelect: 'none',
boxSizing: 'border-box',
position: 'relative'
};
var ghostStyle = _objectSpread2(_objectSpread2({}, baseStyle), {}, {
top: this.state.targetY,
left: this.state.targetX,
width: this.state.targetWidth,
height: this.state.targetHeight,
backgroundColor: 'var(--text-white)',
listStyleType: 'none',
margin: 0,
position: 'fixed',
boxShadow: 'var(--shadow-l)'
});
return /*#__PURE__*/React.createElement(React.Fragment, null, this.props.renderList({
children: this.props.values.map(function (value, index) {
var isHidden = index === _this2.state.itemDragged;
var isSelected = index === _this2.state.selectedItem;
var isDisabled = _this2.props.values[index] && _this2.props.values[index].props.disabled;
var props = {
key: index,
tabIndex: isDisabled ? -1 : index === effectiveFocusedIndex ? 0 : -1,
onFocus: function onFocus() {
return _this2.setState({
focusedIndex: index
});
},
onKeyDown: _this2.onKeyDown,
'aria-grabbed': isSelected,
style: _objectSpread2(_objectSpread2({}, baseStyle), {}, {
visibility: isHidden ? 'hidden' : undefined,
zIndex: isSelected ? 5000 : 0
})
};
return _this2.props.renderItem({
value: value,
props: props,
index: index,
isDragged: false,
isSelected: isSelected,
isOutOfBounds: false
});
}),
isDragged: this.state.itemDragged > -1,
props: {
ref: this.listRef
}
}), this.state.itemDragged > -1 && /*#__PURE__*/ReactDOM.createPortal(this.props.renderItem({
value: this.props.values[this.state.itemDragged],
props: {
ref: this.ghostRef,
style: ghostStyle,
onWheel: this.onWheel
},
index: this.state.itemDragged,
isDragged: !this.state.isClickAndFollow,
isSelected: this.state.isClickAndFollow,
isOutOfBounds: this.state.itemDraggedOutOfBounds > -1
}), document.body), /*#__PURE__*/React.createElement("div", {
"aria-live": "assertive",
"aria-atomic": "true",
className: styles$c['Listbox-aria-live']
}, this.state.ariaMessage));
}
}]);
}(React.Component);
_defineProperty$1(Draggable, "defaultProps", {
transitionDuration: 240,
lockVertically: false,
removableByMove: false
});
var _excluded$E = ["children", "className", "tagName", "size", "type", "draggable", "showDivider"];
var DraggableList = function DraggableList(props) {
var children = props.children,
className = props.className,
Tag = props.tagName;
props.size;
props.type;
props.draggable;
props.showDivider;
var rest = _objectWithoutProperties(props, _excluded$E);
var baseProps = extractBaseProps(props);
var classes = classnames(styles$c.Listbox, className);
var renderChildren = React__default.Children.toArray(children).map(function (child) {
var element = /*#__PURE__*/React__default.cloneElement(child, {
parentProps: _objectSpread2({}, props)
});
return element;
});
var _React$useState = React__default.useState(renderChildren),
_React$useState2 = _slicedToArray(_React$useState, 2),
childList = _React$useState2[0],
setChildList = _React$useState2[1];
React__default.useEffect(function () {
setChildList(function (prevList) {
var newChildrenMap = new Map();
renderChildren.forEach(function (child) {
if (child.key) newChildrenMap.set(child.key, child);
});
var updatedList = prevList.map(function (child) {
return newChildrenMap.get(child.key) || child;
}).filter(function (child) {
return newChildrenMap.has(child.key);
});
var prevKeys = new Set(prevList.map(function (c) {
return c.key;
}));
renderChildren.forEach(function (child) {
if (child.key && !prevKeys.has(child.key)) {
updatedList.push(child);
}
});
return updatedList.length > 0 ? updatedList : renderChildren;
});
}, [children]);
var onChangeHandler = function onChangeHandler(props) {
var oldIndex = props.oldIndex,
newIndex = props.newIndex;
var updatedList = arrayMove(childList, oldIndex, newIndex);
setChildList(updatedList);
};
return /*#__PURE__*/React__default.createElement(Draggable, {
values: childList,
onChange: onChangeHandler,
renderItem: function renderItem(_ref) {
var value = _ref.value,
props = _ref.props,
isDragged = _ref.isDragged,
isSelected = _ref.isSelected;
var itemClasses = classnames(styles$c['Listbox-item--draggable'], _defineProperty$1(_defineProperty$1({}, styles$c['Listbox-item--drag-picked'], isDragged), styles$c['Listbox-item--sticky-picked'], isSelected));
return /*#__PURE__*/React__default.createElement("div", _extends$2({}, props, {
className: itemClasses
}), value);
},
renderList: function renderList(_ref2) {
var children = _ref2.children,
dragProps = _ref2.props;
return /*#__PURE__*/React__default.createElement(Tag, _extends$2({
"data-test": "DesignSystem-Listbox"
}, baseProps, {
className: classes,
tabIndex: -1
}, rest, dragProps), children);
}
});
};
var _excluded$D = ["children", "className", "disabled", "selected", "activated"];
var ListBody = function ListBody(props) {
var _rest$role, _rest$ariaSelected;
var children = props.children,
className = props.className,
disabled = props.disabled,
selected = props.selected,
activated = props.activated,
rest = _objectWithoutProperties(props, _excluded$D);
var contextProp = React.useContext(ListboxContext);
var size = contextProp.size,
type = contextProp.type,
draggable = contextProp.draggable;
var itemClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$c['Listbox-item'], true), styles$c["Listbox-item--".concat(size)], size), styles$c["Listbox-item--".concat(type)], type), styles$c['Listbox-item--disabled'], disabled), styles$c['Listbox-item--selected'], selected && type === 'option'), styles$c['Listbox-item--activated'], activated && type === 'resource'), className);
var role = (_rest$role = rest.role) !== null && _rest$role !== void 0 ? _rest$role : 'option';
var defaultAriaSelected = role === 'option' ? Boolean(selected) : undefined;
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-disabled": disabled,
"data-test": "DesignSystem-Listbox-ItemWrapper",
className: itemClass,
"aria-selected": (_rest$ariaSelected = rest['aria-selected']) !== null && _rest$ariaSelected !== void 0 ? _rest$ariaSelected : defaultAriaSelected
}, rest, {
"aria-disabled": disabled ? true : undefined
}), draggable && /*#__PURE__*/React.createElement(Icon, {
size: 16,
appearance: "subtle",
name: "drag_indicator",
className: styles$c['Listbox-item--drag-icon'],
"data-test": "DesignSystem-Listbox-DragIcon"
}), children);
};
ListBody.displayName = 'ListBody';
var getAnimationClass = function getAnimationClass(uniqueKey, expanded) {
if (expanded) return "nestedList-open-".concat(uniqueKey, " 240ms cubic-bezier(0, 0, 0.38, 0.9)");else if (!expanded) return "nestedList-close-".concat(uniqueKey, " 160ms cubic-bezier(0.2, 0, 1, 0.9)");
return '';
};
var getHeight = function getHeight(listItemRef) {
var _listItemRef$current;
var scrollHeight = (_listItemRef$current = listItemRef.current) === null || _listItemRef$current === void 0 ? void 0 : _listItemRef$current.scrollHeight;
return scrollHeight;
};
var menuItemAnimation = function menuItemAnimation(listItemRef, uniqueKey) {
return "\n @keyframes nestedList-open-".concat(uniqueKey, " {\n from {\n height: 0px;\n }\n to {\n height: ").concat(getHeight(listItemRef), "px;\n }\n }\n\n @keyframes nestedList-close-").concat(uniqueKey, " {\n from {\n height: ").concat(getHeight(listItemRef), "px;\n }\n to {\n height: 0px;\n }\n }\n ");
};
function usePrevious(value) {
var ref = React.useRef();
React.useEffect(function () {
if (value != undefined) {
ref.current = value;
}
}, [value]);
return ref.current;
}
var NestedList = function NestedList(props) {
var nestedBody = props.nestedBody,
expanded = props.expanded,
id = props.id,
ariaLabel = props['aria-label'];
var prevState = usePrevious(expanded);
var _React$useState = React.useState(expanded),
_React$useState2 = _slicedToArray(_React$useState, 2),
open = _React$useState2[0],
setOpen = _React$useState2[1];
var _React$useState3 = React.useState(''),
_React$useState4 = _slicedToArray(_React$useState3, 2),
keyframe = _React$useState4[0],
setKeyframe = _React$useState4[1];
var listItemRef = React.useRef(null);
var uniqueKey = Math.random().toString(36).substring(2, 6);
var _React$useState5 = React.useState(getAnimationClass(uniqueKey, expanded)),
_React$useState6 = _slicedToArray(_React$useState5, 2),
animation = _React$useState6[0],
setAnimation = _React$useState6[1];
React.useEffect(function () {
if (prevState != undefined && prevState !== expanded) {
setOpen(true);
}
requestAnimationFrame(function () {
var result = menuItemAnimation(listItemRef, uniqueKey);
setKeyframe(result);
});
var animationClass = getAnimationClass(uniqueKey, expanded);
setAnimation(animationClass);
}, [expanded]);
var handleAnimationEnd = function handleAnimationEnd() {
!expanded && setOpen(false);
};
var styles = {
animation: animation,
overflow: 'hidden',
animationFillMode: 'forwards'
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, keyframe), nestedBody && open && /*#__PURE__*/React.createElement("div", {
style: styles,
onAnimationEnd: handleAnimationEnd,
"data-test": "DesignSystem-Listbox--Nested-Item",
ref: listItemRef,
id: id,
"aria-label": ariaLabel,
role: ariaLabel ? 'region' : undefined
}, nestedBody));
};
var elementFromEventTarget = function elementFromEventTarget(target) {
if (target instanceof Element) return target;
if (target instanceof Text && target.parentElement) return target.parentElement;
return null;
};
/**
* Resolves the listbox option row (`[role="option"]`) for pointer/focus events when the
* interaction target is nested inside the row. Falls back to `fallback` (typically `currentTarget`).
*/
var resolveListboxOptionFromEvent = function resolveListboxOptionFromEvent(event, fallback) {
var listRoot = fallback.closest('[role="listbox"]');
var el = elementFromEventTarget(event.target);
if (el) {
var option = el.closest('[role="option"]');
if (option && listRoot !== null && listRoot !== void 0 && listRoot.contains(option)) {
return option;
}
}
return fallback;
};
var isListboxOptionDisabled = function isListboxOptionDisabled(optionElement) {
var inner = optionElement.matches('[data-test="DesignSystem-Listbox-ItemWrapper"]') ? optionElement : optionElement.querySelector('[data-test="DesignSystem-Listbox-ItemWrapper"]');
return (inner === null || inner === void 0 ? void 0 : inner.getAttribute('data-disabled')) === 'true' || optionElement.getAttribute('data-disabled') === 'true';
};
var focusAdjacentOption = function focusAdjacentOption(sourceElement, direction) {
var listRoot = sourceElement.closest('[role="listbox"]');
if (!listRoot) return;
var options = getAllFocusableElements(listRoot, 'listbox');
var currentIndex = options.indexOf(sourceElement);
if (currentIndex < 0) return;
var delta = direction === 'down' ? 1 : -1;
var nextIndex = currentIndex + delta;
while (nextIndex >= 0 && nextIndex < options.length) {
var candidate = options[nextIndex];
if (!isListboxOptionDisabled(candidate)) {
candidate.focus({
preventScroll: true
});
if (typeof candidate.scrollIntoView === 'function') {
candidate.scrollIntoView({
block: 'nearest'
});
}
break;
}
nextIndex += delta;
}
};
var activateOptionRow = function activateOptionRow(sourceElement) {
if (isListboxOptionDisabled(sourceElement)) return;
sourceElement.click();
};
var onKeyDown = function onKeyDown(event) {
// currentTarget is the interactive list row (`ListBody`); target may be nested content inside it.
var sourceElement = event.currentTarget;
if (isSpaceKey(event)) {
event.preventDefault();
activateOptionRow(sourceElement);
return;
}
switch (event.key) {
case 'Enter':
event.preventDefault();
activateOptionRow(sourceElement);
break;
case 'ArrowDown':
event.preventDefault();
focusAdjacentOption(sourceElement, 'down');
break;
case 'ArrowUp':
event.preventDefault();
focusAdjacentOption(sourceElement, 'up');
break;
}
};
var _excluded$C = ["children", "nestedBody", "expanded", "id", "nestedListId", "nestedListAriaLabel", "onClick", "value", "tagName", "tabIndex", "onKeyDown", "onFocus", "role", "disabled", "href", "target", "rel", "download"];
var ListboxItem = function ListboxItem(props) {
var _tabIndexProps$tabInd;
var children = props.children,
nestedBody = props.nestedBody,
expanded = props.expanded,
id = props.id,
nestedListId = props.nestedListId,
nestedListAriaLabel = props.nestedListAriaLabel,
onClick = props.onClick,
value = props.value,
_props$tagName = props.tagName,
Tag = _props$tagName === void 0 ? 'li' : _props$tagName,
tabIndex = props.tabIndex,
onKeyDown$1 = props.onKeyDown,
onFocus = props.onFocus,
role = props.role,
disabled = props.disabled,
href = props.href,
target = props.target,
rel = props.rel,
download = props.download,
rest = _objectWithoutProperties(props, _excluded$C);
var contextProp = React.useContext(ListboxContext);
var showDivider = contextProp.showDivider,
draggable = contextProp.draggable,
customFocusManagement = contextProp.customFocusManagement,
setRovingIndex = contextProp.setRovingIndex;
var tagClass = classnames(_defineProperty$1({}, styles$c['Listbox-item-wrapper'], !draggable));
// Parent owns keys when `onKeyDown` is set (Menu/Select/Combobox) or when `Listbox` sets `customFocusManagement`.
var keyDownHandler = onKeyDown$1 || (!customFocusManagement ? onKeyDown : undefined);
var rovingFromListbox = !customFocusManagement && !draggable && !onKeyDown$1;
var tabIndexProps = {};
if (rovingFromListbox) {
if (disabled) {
tabIndexProps.tabIndex = -1;
}
} else if (tabIndex !== undefined) {
tabIndexProps.tabIndex = tabIndex;
}
var updateRovingFromListBody = function updateRovingFromListBody(optionEl) {
if (!rovingFromListbox || disabled) {
return;
}
var root = optionEl.closest('[role="listbox"]');
if (!root) {
return;
}
var options = getAllFocusableElements(root, 'listbox');
var idx = options.indexOf(optionEl);
if (idx >= 0) {
setRovingIndex(idx);
}
};
var onClickHandler = function onClickHandler(e) {
var optionEl = resolveListboxOptionFromEvent(e, e.currentTarget);
updateRovingFromListBody(optionEl);
onClick && onClick(e, id, value);
};
var handleFocus = function handleFocus(e) {
onFocus === null || onFocus === void 0 || onFocus(e);
var optionEl = resolveListboxOptionFromEvent(e, e.currentTarget);
updateRovingFromListBody(optionEl);
};
return /*#__PURE__*/React.createElement(Tag, {
"data-test": "DesignSystem-Listbox-Item",
className: tagClass,
role: "presentation",
href: href,
target: target,
rel: rel,
download: download
}, /*#__PURE__*/React.createElement(ListBody, _extends$2({}, rest, {
className: props.className,
selected: props.selected,
activated: props.activated,
id: id,
"data-value": value,
disabled: disabled,
onClick: onClickHandler,
onFocus: handleFocus,
tabIndex: (_tabIndexProps$tabInd = tabIndexProps.tabIndex) !== null && _tabIndexProps$tabInd !== void 0 ? _tabIndexProps$tabInd : -1,
onKeyDown: keyDownHandler,
role: role !== null && role !== void 0 ? role : 'option'
}), children), nestedBody && /*#__PURE__*/React.createElement(NestedList, {
expanded: expanded,
nestedBody: nestedBody,
id: nestedListId,
"aria-label": nestedListAriaLabel
}), showDivider && /*#__PURE__*/React.createElement(Divider, {
className: styles$c['Listbox-divider'],
"aria-hidden": true
}));
};
ListboxItem.displayName = 'Listbox.Item';
ListboxItem.defaultProps = {
tagName: 'li'
};
var _excluded$B = ["children", "className", "draggable", "size", "type", "showDivider", "customFocusManagement", "tagName"];
var ListboxContext = /*#__PURE__*/React.createContext({
size: 'standard',
type: 'resource',
draggable: false,
showDivider: true,
customFocusManagement: false,
rovingIndex: -1,
setRovingIndex: function setRovingIndex() {}
});
var Provider = ListboxContext.Provider;
var Listbox = function Listbox(props) {
var _rest$role;
var _ref = props,
children = _ref.children,
className = _ref.className,
draggable = _ref.draggable,
size = _ref.size,
type = _ref.type,
showDivider = _ref.showDivider,
_ref$customFocusManag = _ref.customFocusManagement,
customFocusManagement = _ref$customFocusManag === void 0 ? false : _ref$customFocusManag,
_ref$tagName = _ref.tagName,
Tag = _ref$tagName === void 0 ? 'ul' : _ref$tagName,
rest = _objectWithoutProperties(_ref, _excluded$B);
var baseProps = extractBaseProps(props);
var classes = classnames(styles$c.Listbox, className);
var listRef = React.useRef(null);
var _React$useState = React.useState(-1),
_React$useState2 = _slicedToArray(_React$useState, 2),
rovingIndex = _React$useState2[0],
setRovingIndex = _React$useState2[1];
var effectiveCustomFocusManagement = customFocusManagement || type === 'description';
React.useLayoutEffect(function () {
if (effectiveCustomFocusManagement || draggable) {
return;
}
var root = listRef.current;
if (!root) {
return;
}
var options = getAllFocusableElements(root, 'listbox');
var firstEnabled = options.findIndex(function (el) {
return !isListboxOptionDisabled(el);
});
var targetIdx = rovingIndex;
if (options.length === 0) {
targetIdx = -1;
} else if (targetIdx < 0 || targetIdx >= options.length || isListboxOptionDisabled(options[targetIdx])) {
targetIdx = firstEnabled;
}
if (targetIdx !== rovingIndex) {
setRovingIndex(targetIdx);
}
options.forEach(function (el, i) {
var dis = isListboxOptionDisabled(el);
el.tabIndex = dis ? -1 : i === targetIdx ? 0 : -1;
});
}, [children, effectiveCustomFocusManagement, draggable, rovingIndex]);
var sharedProp = {
size: size,
type: type,
draggable: draggable,
showDivider: showDivider,
customFocusManagement: effectiveCustomFocusManagement,
rovingIndex: rovingIndex,
setRovingIndex: setRovingIndex
};
var listRole = effectiveCustomFocusManagement || draggable ? rest.role : (_rest$role = rest.role) !== null && _rest$role !== void 0 ? _rest$role : 'listbox';
return /*#__PURE__*/React.createElement(Provider, {
value: sharedProp
}, draggable ? /*#__PURE__*/React.createElement(DraggableList, props) : /*#__PURE__*/React.createElement(Tag, _extends$2({
"data-test": "DesignSystem-Listbox"
}, baseProps, {
className: classes
}, rest, {
role: listRole,
ref: listRef
}), children));
};
Listbox.displayName = 'Listbox';
Listbox.defaultProps = {
tagName: 'ul',
size: 'standard',
type: 'resource',
draggable: false,
showDivider: true,
customFocusManagement: false
};
Listbox.Item = ListboxItem;
// TextFieldCommon.tsx
var RenderHelpText = function RenderHelpText(_ref) {
var helpText = _ref.helpText,
error = _ref.error,
id = _ref.id;
return /*#__PURE__*/React__default.createElement(HelpText, {
id: id,
className: "d-flex",
message: helpText.trim().length > 0 ? helpText : ' ',
error: error ? error : undefined
});
};
var RenderCounter = function RenderCounter(_ref2) {
var inputText = _ref2.inputText,
max = _ref2.max;
return /*#__PURE__*/React__default.createElement("div", {
className: "mt-3 d-flex"
}, /*#__PURE__*/React__default.createElement(Text$1, {
appearance: "subtle",
className: "pr-2",
color: inputText.length > max ? 'alert' : undefined,
size: "small",
weight: "medium"
}, inputText.length), /*#__PURE__*/React__default.createElement(Text$1, {
appearance: "subtle",
className: "pr-2",
size: "small",
weight: "medium"
}, "/"), /*#__PURE__*/React__default.createElement(Text$1, {
appearance: "subtle",
size: "small",
weight: "medium"
}, max));
};
var TextFieldWithTextarea = function TextFieldWithTextarea(props) {
var label = props.label,
_props$rows = props.rows,
rows = _props$rows === void 0 ? 3 : _props$rows,
_props$resize = props.resize,
resize = _props$resize === void 0 ? true : _props$resize,
required = props.required,
error = props.error,
onChange = props.onChange,
_props$value = props.value,
value = _props$value === void 0 ? '' : _props$value,
_props$max = props.max,
max = _props$max === void 0 ? 200 : _props$max,
_props$helpText = props.helpText,
helpText = _props$helpText === void 0 ? ' ' : _props$helpText,
_props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size;
var textareaRef = React.useRef(null);
var _React$useState = React.useState(value),
_React$useState2 = _slicedToArray(_React$useState, 2),
inputText = _React$useState2[0],
setInputText = _React$useState2[1];
var _React$useState3 = React.useState(0),
_React$useState4 = _slicedToArray(_React$useState3, 2),
helptextWidth = _React$useState4[0],
setHelptextWidth = _React$useState4[1];
var fieldIdRef = React.useRef("TextField-textarea-".concat(uidGenerator()));
var fieldId = props.id || fieldIdRef.current;
var helpTextIdRef = React.useRef(null);
if (helpTextIdRef.current === null) {
helpTextIdRef.current = "TextField-helpText-".concat(uidGenerator());
}
var helpTextId = helpTextIdRef.current;
var onChangeHandler = function onChangeHandler(e) {
setInputText(e.target.value);
if (onChange) onChange(e);
};
var inputError = error || inputText.length > max;
var hasHelpText = inputError || helpText.trim().length > 0;
var resolvedDescribedBy = [props['aria-describedby'], hasHelpText ? helpTextId : undefined].filter(Boolean).join(' ') || undefined;
React.useEffect(function () {
var textarea = textareaRef.current;
if (window.ResizeObserver) {
var resizeObserver = new window.ResizeObserver(function (entries) {
var entry = entries[0];
var offsetWidth = entry.target.offsetWidth;
setHelptextWidth(offsetWidth);
});
textarea && resizeObserver.observe(textarea);
return function () {
resizeObserver.disconnect();
};
}
return function () {};
}, []);
return /*#__PURE__*/React.createElement("div", null, label && /*#__PURE__*/React.createElement(Label, {
required: required,
withInput: true,
size: size,
htmlFor: fieldId
}, label), /*#__PURE__*/React.createElement(Textarea, _extends$2({}, props, {
id: fieldId,
resize: resize,
rows: rows,
onChange: onChangeHandler,
error: inputError,
"aria-describedby": resolvedDescribedBy,
ref: textareaRef
})), /*#__PURE__*/React.createElement("div", {
className: "d-flex justify-content-between",
style: {
width: helptextWidth
}
}, /*#__PURE__*/React.createElement(RenderHelpText, {
helpText: helpText,
error: inputError,
id: helpTextId
}), /*#__PURE__*/React.createElement(RenderCounter, {
inputText: inputText,
max: max
})));
};
var TextFieldWithInput = function TextFieldWithInput(props) {
var label = props.label,
minWidth = props.minWidth,
required = props.required,
error = props.error,
onChange = props.onChange,
_props$value = props.value,
value = _props$value === void 0 ? '' : _props$value,
_props$max = props.max,
max = _props$max === void 0 ? 200 : _props$max,
_props$helpText = props.helpText,
helpText = _props$helpText === void 0 ? ' ' : _props$helpText,
_props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size;
var _React$useState = React.useState(value),
_React$useState2 = _slicedToArray(_React$useState, 2),
inputText = _React$useState2[0],
setInputText = _React$useState2[1];
var fieldIdRef = React.useRef("TextField-input-".concat(uidGenerator()));
var fieldId = props.id || fieldIdRef.current;
var helpTextIdRef = React.useRef(null);
if (helpTextIdRef.current === null) {
helpTextIdRef.current = "TextField-helpText-".concat(uidGenerator());
}
var helpTextId = helpTextIdRef.current;
var onChangeHandler = function onChangeHandler(event) {
setInputText(event.target.value);
if (onChange) onChange(event);
};
var inputError = error || inputText.length > max;
var labelSize = size === 'tiny' ? 'small' : 'regular';
var hasHelpText = inputError || helpText.trim().length > 0;
var resolvedDescribedBy = [props['aria-describedby'], hasHelpText ? helpTextId : undefined].filter(Boolean).join(' ') || undefined;
return /*#__PURE__*/React.createElement("div", null, label && /*#__PURE__*/React.createElement(Label, {
required: required,
withInput: true,
size: labelSize,
htmlFor: fieldId
}, label), /*#__PURE__*/React.createElement(Input, _extends$2({}, props, {
id: fieldId,
error: inputError,
onChange: onChangeHandler,
"aria-describedby": resolvedDescribedBy
})), /*#__PURE__*/React.createElement("div", {
className: "d-flex justify-content-between",
style: {
minWidth: minWidth
}
}, /*#__PURE__*/React.createElement(RenderHelpText, {
helpText: helpText,
error: inputError,
id: helpTextId
}), /*#__PURE__*/React.createElement(RenderCounter, {
inputText: inputText,
max: max
})));
};
TextFieldWithInput.defaultProps = {
minWidth: 256
};
var TextField = function TextField(props) {
var withTextarea = props.withTextarea;
if (withTextarea) {
return /*#__PURE__*/React.createElement(TextFieldWithTextarea, props);
}
return /*#__PURE__*/React.createElement(TextFieldWithInput, props);
};
TextField.displayName = 'TextField';
var _excluded$A = ["icon", "image", "disabled", "shape"];
var SelectionAvatar = function SelectionAvatar(props) {
var icon = props.icon,
image = props.image,
disabled = props.disabled,
_props$shape = props.shape,
shape = _props$shape === void 0 ? 'round' : _props$shape,
rest = _objectWithoutProperties(props, _excluded$A);
var avatarClassName = classnames(_defineProperty$1({}, 'cursor-pointer', !disabled));
return /*#__PURE__*/React.createElement(Avatar, _extends$2({
role: "checkbox"
}, rest, {
shape: shape,
disabled: disabled,
withTooltip: true,
className: avatarClassName
}), image || icon);
};
var AvatarSelectionContext = /*#__PURE__*/React.createContext({});
var css_248z$b = "/* Selection avatar group */\n.avatarSelection-module-SelectionAvatarGroup-yS1Px-4-30-3 {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n}\n\n/* Selection Avatar List */\n\n.avatarSelection-module-SelectionAvatarGroup-item-1QsB6-4-30-3 {\n margin-right: calc(var(--spacing-05) * -1);\n border-radius: var(--border-radius-full);\n display: flex;\n transition: transform var(--duration--fast-01) var(--standard-productive-curve);\n position: relative;\n}\n\n.avatarSelection-module-SelectionAvatarGroup-item--tiny-isNDd-4-30-3 {\n margin-right: 0;\n}\n\n.avatarSelection-module-SelectionAvatarGroup-item--micro-Qfz-a-4-30-3 {\n margin-right: var(--spacing-10);\n}\n\n.avatarSelection-module-SelectionAvatarGroup-item--active-dofCY-4-30-3:focus,\n.avatarSelection-module-SelectionAvatarGroup-item--active-dofCY-4-30-3:focus-visible {\n outline: 3px solid var(--primary-shadow);\n outline-offset: 3px;\n}\n\n.avatarSelection-module-SelectionAvatarGroup-item--active-dofCY-4-30-3:active {\n outline: var(--border-width-2-5) solid var(--primary-dark);\n outline-offset: var(--spacing-2-5);\n}\n\n.avatarSelection-module-SelectionAvatarGroup-item--active-tiny-tyofa-4-30-3:active,\n.avatarSelection-module-SelectionAvatarGroup-item--active-micro-XTJS3-4-30-3:active {\n outline-offset: var(--spacing-05);\n}\n\n.avatarSelection-module-SelectionAvatarGroup-item--active-regular-BVSG9-4-30-3:active {\n outline: var(--border-width-05) solid var(--primary-dark);\n outline-offset: var(--spacing-2-5);\n}\n\n.avatarSelection-module-SelectionAvatarGroup-wrapper-BtN8f-4-30-3:hover .avatarSelection-module-SelectionAvatarGroup-item--active-dofCY-4-30-3 {\n transform: translateY(-8px);\n}\n\n/* Selected Avatar Group Item */\n\n.avatarSelection-module-SelectionAvatarGroup-item--selected-yhD56-4-30-3 {\n outline-offset: var(--spacing-2-5);\n outline: var(--border-width-2-5) solid var(--primary-dark);\n}\n\n.avatarSelection-module-SelectionAvatarGroup-item--selected-tiny-I4OLi-4-30-3,\n.avatarSelection-module-SelectionAvatarGroup-item--selected-micro-VtYqS-4-30-3 {\n outline-offset: var(--spacing-05);\n}\n\n.avatarSelection-module-SelectionAvatarGroup-item--selected-regular-lhnsU-4-30-3 {\n outline: var(--border-width-05) solid var(--primary-dark);\n}\n\n.avatarSelection-module-SelectionAvatarGroup-item--selected-yhD56-4-30-3:active {\n outline-offset: var(--spacing-2-5);\n outline: var(--border-width-2-5) solid var(--primary-darker);\n}\n\n.avatarSelection-module-SelectionAvatarGroup-item--selected-tiny-I4OLi-4-30-3:active,\n.avatarSelection-module-SelectionAvatarGroup-item--selected-micro-VtYqS-4-30-3:active {\n outline-offset: var(--spacing-05);\n}\n\n.avatarSelection-module-SelectionAvatarGroup-item--selected-regular-lhnsU-4-30-3:active {\n outline-offset: var(--spacing-2-5);\n outline: var(--border-width-05) solid var(--primary-darker);\n}\n\n.avatarSelection-module-SelectionAvatarGroup-item--selected-yhD56-4-30-3:focus,\n.avatarSelection-module-SelectionAvatarGroup-item--selected-yhD56-4-30-3:focus-visible {\n box-shadow: 0 0 0 var(--spacing-2-5) white, 0 0 0 3px var(--primary-dark), 0 0 0 3px var(--primary-shadow) !important;\n}\n\n/* Selection Avatar Popover */\n\n.avatarSelection-module-SelectionAvatarGroup-popper-Rcnff-4-30-3 {\n overflow-y: auto;\n box-sizing: border-box;\n}\n\n.avatarSelection-module-AvatarSelection-srOnly-pUWhy-4-30-3 {\n position: absolute;\n width: var(--spacing-2-5);\n height: var(--spacing-2-5);\n padding: 0;\n margin: calc(-1 * var(--spacing-2-5));\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n.avatarSelection-module-SelectionAvatar-inputWrapper-13xTx-4-30-3 {\n border-bottom: var(--border-width-2-5) solid var(--secondary-dark);\n}\n\n.avatarSelection-module-SelectionAvatar-inputWrapper-13xTx-4-30-3:focus-within {\n border-bottom: var(--border-width-2-5) solid var(--primary);\n}\n\n.avatarSelection-module-SelectionAvatar-input-OWRhy-4-30-3 {\n min-width: unset !important;\n background: transparent;\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0;\n height: 36px;\n}\n\n.avatarSelection-module-SelectionAvatar-input-OWRhy-4-30-3,\n.avatarSelection-module-SelectionAvatar-input-OWRhy-4-30-3:focus-within {\n border: unset !important;\n box-shadow: none !important;\n outline: none !important;\n}\n\n.avatarSelection-module-SelectionAvatar-input-OWRhy-4-30-3:hover {\n background-color: var(--secondary-lightest);\n}\n\n/* Selection Avatar Count */\n\n.avatarSelection-module-SelectionAvatarCount-wrapper-NrqFi-4-30-3 {\n border-radius: var(--border-radius-full);\n}\n\n.avatarSelection-module-SelectionAvatarCount-wrapper--micro-U5Hsw-4-30-3 {\n margin-right: 0;\n}\n\n.avatarSelection-module-SelectionAvatarCount-s-0H0-4-30-3:hover {\n background: var(--secondary);\n}\n\n.avatarSelection-module-SelectionAvatarCount-s-0H0-4-30-3:active {\n background: var(--secondary-dark);\n}\n\n.avatarSelection-module-SelectionAvatarCount--open-vpUEs-4-30-3 {\n background: var(--secondary-dark) !important;\n}\n\n.avatarSelection-module-SelectionAvatarCount-wrapper-NrqFi-4-30-3:focus {\n outline: none;\n}\n\n.avatarSelection-module-SelectionAvatarCount-wrapper-NrqFi-4-30-3:focus-visible {\n outline: none;\n}\n\n.avatarSelection-module-SelectionAvatarCount-wrapper-NrqFi-4-30-3:focus-visible::after {\n content: '';\n position: absolute;\n top: calc(-1 * var(--spacing-20));\n bottom: calc(-1 * var(--spacing-20));\n left: calc(-1 * var(--spacing-10));\n right: calc(-1 * var(--spacing-10));\n border: var(--border-width-05) solid var(--primary-focus);\n border-radius: var(--border-radius-10);\n pointer-events: none;\n}\n\n.avatarSelection-module-SelectionAvatarCount--selected--P-iP-4-30-3 {\n outline-offset: var(--spacing-2-5);\n outline: var(--border-width-2-5) solid var(--primary-dark);\n}\n\n.avatarSelection-module-SelectionAvatarCount--selected-tiny-AlYgW-4-30-3,\n.avatarSelection-module-SelectionAvatarCount--selected-micro-600q2-4-30-3 {\n outline-offset: var(--spacing-05);\n}\n\n.avatarSelection-module-SelectionAvatarCount--selected-regular-jklGD-4-30-3 {\n outline: var(--border-width-05) solid var(--primary-dark);\n}\n\n.avatarSelection-module-SelectionAvatarCount--selected--P-iP-4-30-3:active {\n outline-offset: var(--spacing-2-5);\n outline: var(--border-width-2-5) solid var(--primary-darker);\n}\n\n.avatarSelection-module-SelectionAvatarCount--selected-tiny-AlYgW-4-30-3:active,\n.avatarSelection-module-SelectionAvatarCount--selected-micro-600q2-4-30-3:active {\n outline-offset: var(--spacing-05);\n}\n\n.avatarSelection-module-SelectionAvatarCount--selected-regular-jklGD-4-30-3:active {\n outline-offset: var(--spacing-2-5);\n outline: var(--border-width-05) solid var(--primary-darker);\n}\n\n.avatarSelection-module-SelectionAvatarCount--selected--P-iP-4-30-3:focus,\n.avatarSelection-module-SelectionAvatarCount--selected--P-iP-4-30-3:focus-visible {\n box-shadow: 0 0 0 var(--spacing-2-5) white, 0 0 0 3px var(--primary-dark), 0 0 0 3px var(--primary-shadow) !important;\n}\n\n@media (forced-colors: active) {\n .avatarSelection-module-SelectionAvatarGroup-item--selected-yhD56-4-30-3:focus,\n .avatarSelection-module-SelectionAvatarGroup-item--selected-yhD56-4-30-3:focus-visible {\n outline: var(--border-width-05) solid Highlight !important;\n outline-offset: var(--spacing-2-5);\n box-shadow: none !important;\n }\n\n .avatarSelection-module-SelectionAvatarCount--selected--P-iP-4-30-3:focus,\n .avatarSelection-module-SelectionAvatarCount--selected--P-iP-4-30-3:focus-visible {\n outline: var(--border-width-05) solid Highlight !important;\n outline-offset: var(--spacing-2-5);\n box-shadow: none !important;\n }\n\n /* The inner search input uses outline:none !important — restore it in forced-colors mode */\n .avatarSelection-module-SelectionAvatar-input-OWRhy-4-30-3:focus-within {\n outline: var(--border-width-05) solid Highlight !important;\n outline-offset: var(--spacing-05);\n }\n}\n";
var styles$b = {"SelectionAvatarGroup":"avatarSelection-module-SelectionAvatarGroup-yS1Px-4-30-3","SelectionAvatarGroup-item":"avatarSelection-module-SelectionAvatarGroup-item-1QsB6-4-30-3","SelectionAvatarGroup-item--tiny":"avatarSelection-module-SelectionAvatarGroup-item--tiny-isNDd-4-30-3","SelectionAvatarGroup-item--micro":"avatarSelection-module-SelectionAvatarGroup-item--micro-Qfz-a-4-30-3","SelectionAvatarGroup-item--active":"avatarSelection-module-SelectionAvatarGroup-item--active-dofCY-4-30-3","SelectionAvatarGroup-item--active-tiny":"avatarSelection-module-SelectionAvatarGroup-item--active-tiny-tyofa-4-30-3","SelectionAvatarGroup-item--active-micro":"avatarSelection-module-SelectionAvatarGroup-item--active-micro-XTJS3-4-30-3","SelectionAvatarGroup-item--active-regular":"avatarSelection-module-SelectionAvatarGroup-item--active-regular-BVSG9-4-30-3","SelectionAvatarGroup-wrapper":"avatarSelection-module-SelectionAvatarGroup-wrapper-BtN8f-4-30-3","SelectionAvatarGroup-item--selected":"avatarSelection-module-SelectionAvatarGroup-item--selected-yhD56-4-30-3","SelectionAvatarGroup-item--selected-tiny":"avatarSelection-module-SelectionAvatarGroup-item--selected-tiny-I4OLi-4-30-3","SelectionAvatarGroup-item--selected-micro":"avatarSelection-module-SelectionAvatarGroup-item--selected-micro-VtYqS-4-30-3","SelectionAvatarGroup-item--selected-regular":"avatarSelection-module-SelectionAvatarGroup-item--selected-regular-lhnsU-4-30-3","SelectionAvatarGroup-popper":"avatarSelection-module-SelectionAvatarGroup-popper-Rcnff-4-30-3","AvatarSelection-srOnly":"avatarSelection-module-AvatarSelection-srOnly-pUWhy-4-30-3","SelectionAvatar-inputWrapper":"avatarSelection-module-SelectionAvatar-inputWrapper-13xTx-4-30-3","SelectionAvatar-input":"avatarSelection-module-SelectionAvatar-input-OWRhy-4-30-3","SelectionAvatarCount-wrapper":"avatarSelection-module-SelectionAvatarCount-wrapper-NrqFi-4-30-3","SelectionAvatarCount-wrapper--micro":"avatarSelection-module-SelectionAvatarCount-wrapper--micro-U5Hsw-4-30-3","SelectionAvatarCount":"avatarSelection-module-SelectionAvatarCount-s-0H0-4-30-3","SelectionAvatarCount--open":"avatarSelection-module-SelectionAvatarCount--open-vpUEs-4-30-3","SelectionAvatarCount--selected":"avatarSelection-module-SelectionAvatarCount--selected--P-iP-4-30-3","SelectionAvatarCount--selected-tiny":"avatarSelection-module-SelectionAvatarCount--selected-tiny-AlYgW-4-30-3","SelectionAvatarCount--selected-micro":"avatarSelection-module-SelectionAvatarCount--selected-micro-600q2-4-30-3","SelectionAvatarCount--selected-regular":"avatarSelection-module-SelectionAvatarCount--selected-regular-jklGD-4-30-3"};
styleInject(css_248z$b);
var SelectionAvatarsWrapper = function SelectionAvatarsWrapper(props) {
var avatarList = props.avatarList,
avatarStyle = props.avatarStyle,
tooltipPosition = props.tooltipPosition,
size = props.size,
avatarRenderer = props.avatarRenderer;
var contextProp = React.useContext(AvatarSelectionContext);
var setSelectedItems = contextProp.setSelectedItems,
selectedItems = contextProp.selectedItems,
onSelect = contextProp.onSelect;
var onClickHandler = function onClickHandler(item) {
if (item.disabled) {
return;
}
var list = selectedItems;
if (selectedItems !== null && selectedItems !== void 0 && selectedItems.includes(item)) {
list = selectedItems.filter(function (selectedItem) {
return selectedItem !== item;
});
} else {
var _list;
(_list = list) === null || _list === void 0 || _list.push(item);
}
list && (setSelectedItems === null || setSelectedItems === void 0 ? void 0 : setSelectedItems(_toConsumableArray(list)));
onSelect && onSelect(list);
};
var handleKeyDown = function handleKeyDown(event, item) {
if (item.disabled) {
return;
}
switch (event.key) {
case 'Enter':
case ' ':
event.preventDefault();
onClickHandler(item);
break;
}
};
return /*#__PURE__*/React.createElement(React.Fragment, null, avatarList.map(function (avatarItem, index) {
var appearance = avatarItem.appearance,
firstName = avatarItem.firstName,
lastName = avatarItem.lastName,
icon = avatarItem.icon,
image = avatarItem.image,
disabled = avatarItem.disabled,
tooltipSuffix = avatarItem.tooltipSuffix,
shape = avatarItem.shape;
var avatarShape = shape === 'square' ? 'square' : 'round';
var isSelected = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(avatarItem);
var GroupClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$b["SelectionAvatarGroup-item"], true), styles$b["SelectionAvatarGroup-item--tiny"], size === 'tiny'), styles$b["SelectionAvatarGroup-item--micro"], size === 'micro'), styles$b["SelectionAvatarGroup-item--active"], !disabled), styles$b["SelectionAvatarGroup-item--active-".concat(size)], !disabled && size), styles$b["SelectionAvatarGroup-item--selected"], isSelected), styles$b["SelectionAvatarGroup-item--selected-".concat(size)], isSelected && size), 'rounded-15', avatarShape === 'square' && size === 'regular'), 'rounded-10', avatarShape === 'square' && size !== 'regular'));
var newAvatarStyle = _objectSpread2(_objectSpread2({}, avatarStyle), {}, {
zIndex: avatarList.length - index
});
var checkboxLabel = [firstName, lastName].filter(Boolean).join(' ').trim() || tooltipSuffix || 'Avatar';
if (avatarRenderer) {
return avatarRenderer(avatarItem);
}
return /*#__PURE__*/React.createElement("span", {
key: index,
className: styles$b['SelectionAvatarGroup-wrapper']
}, /*#__PURE__*/React.createElement("div", {
style: newAvatarStyle,
className: GroupClass,
"data-test": "DesignSystem-AvatarSelection--Avatar"
}, /*#__PURE__*/React.createElement(SelectionAvatar, _extends$2({
size: size,
shape: avatarShape,
appearance: appearance,
firstName: firstName,
lastName: lastName,
withTooltip: true,
tooltipPosition: tooltipPosition,
icon: icon,
image: image,
disabled: disabled,
tooltipSuffix: tooltipSuffix
}, avatarItem, {
"aria-label": checkboxLabel,
"aria-checked": Boolean(isSelected),
"aria-disabled": disabled,
onClick: function onClick() {
return onClickHandler(avatarItem);
},
onKeyDown: function onKeyDown(event) {
return handleKeyDown(event, avatarItem);
}
}))));
}));
};
var handleKeyDown$6 = function handleKeyDown(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem) {
switch (event.key) {
case 'Enter':
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(true);
setHighlightFirstItem === null || setHighlightFirstItem === void 0 || setHighlightFirstItem(true);
break;
case 'ArrowDown':
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(true);
setHighlightFirstItem === null || setHighlightFirstItem === void 0 || setHighlightFirstItem(true);
break;
case 'ArrowUp':
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(true);
setHighlightLastItem === null || setHighlightLastItem === void 0 || setHighlightLastItem(true);
break;
}
};
var focusListItem$3 = function focusListItem(position, setFocusedOption, listRef, withSearch) {
var _listRef$current2, _targetOption, _targetOption2, _targetOption2$scroll;
if (withSearch && position === 'down') {
var _listRef$current, _searchInput$;
var searchInput = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.querySelectorAll('[data-test="DesignSystem-AvatarSelection--Input"]');
searchInput && ((_searchInput$ = searchInput[0]) === null || _searchInput$ === void 0 ? void 0 : _searchInput$.focus());
setFocusedOption === null || setFocusedOption === void 0 || setFocusedOption(searchInput);
return;
}
var listItems = (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.querySelectorAll('[data-test="DesignSystem-AvatarSelection--Option"]');
var targetOption;
if (position === 'down') {
targetOption = listItems === null || listItems === void 0 ? void 0 : listItems[0];
} else {
targetOption = listItems === null || listItems === void 0 ? void 0 : listItems[listItems.length - 1];
}
(_targetOption = targetOption) === null || _targetOption === void 0 || _targetOption.focus();
(_targetOption2 = targetOption) === null || _targetOption2 === void 0 || (_targetOption2$scroll = _targetOption2.scrollIntoView) === null || _targetOption2$scroll === void 0 || _targetOption2$scroll.call(_targetOption2, {
block: 'center'
});
setFocusedOption && setFocusedOption(targetOption);
};
var AvatarSelectionCount = function AvatarSelectionCount(props) {
var hiddenAvatarCount = props.hiddenAvatarCount,
avatarStyle = props.avatarStyle,
size = props.size,
hiddenAvatarList = props.hiddenAvatarList,
_props$moreAvatarsLab = props.moreAvatarsLabel,
moreAvatarsLabel = _props$moreAvatarsLab === void 0 ? 'more' : _props$moreAvatarsLab;
var contextProp = React.useContext(AvatarSelectionContext);
var selectedItems = contextProp.selectedItems,
setHighlightFirstItem = contextProp.setHighlightFirstItem,
setHighlightLastItem = contextProp.setHighlightLastItem,
triggerRef = contextProp.triggerRef,
setOpenPopover = contextProp.setOpenPopover,
openPopover = contextProp.openPopover,
popoverId = contextProp.popoverId;
var _React$useState = React.useState(0),
_React$useState2 = _slicedToArray(_React$useState, 2),
selectedItemCount = _React$useState2[0],
setSelectedItemCount = _React$useState2[1];
React.useEffect(function () {
var selectedList = hiddenAvatarList.filter(function (data1) {
return selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(function (data2) {
return data2 === data1;
});
});
setSelectedItemCount(selectedList.length);
}, [selectedItems]);
var wrapperClassName = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$b['SelectionAvatarCount-wrapper'], true), styles$b['SelectionAvatarCount-wrapper--micro'], size === 'micro'), styles$b['SelectionAvatarGroup-item'], true), styles$b['SelectionAvatarGroup-item--tiny'], size === 'tiny'), styles$b['SelectionAvatarGroup-item--micro'], size === 'micro'), styles$b['SelectionAvatarCount--selected'], selectedItemCount > 0), styles$b["SelectionAvatarCount--selected-".concat(size)], selectedItemCount > 0 && size));
var avatarClassName = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$b.SelectionAvatarCount, true), styles$b['SelectionAvatarCount--open'], openPopover), 'cursor-pointer', true));
var avatarTextClassName = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({
'overflow-hidden': true
}, avatarStyles['Avatar-content'], true), avatarStyles['Avatar-content--tiny'], size === 'tiny'), avatarStyles['Avatar-content--micro'], size === 'micro'));
return /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-AvatarSelection--TriggerAvatar",
className: wrapperClassName,
onKeyDown: function onKeyDown(event) {
return handleKeyDown$6(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
},
style: avatarStyle,
tabIndex: 0,
role: "button",
"aria-haspopup": "listbox",
"aria-expanded": openPopover,
"aria-controls": popoverId,
"aria-label": "+".concat(hiddenAvatarCount, " ").concat(moreAvatarsLabel),
ref: triggerRef
}, /*#__PURE__*/React.createElement(Avatar, {
tabIndex: -1,
role: "presentation",
size: size,
appearance: "secondary",
className: avatarClassName
}, /*#__PURE__*/React.createElement(Text$1, {
className: avatarTextClassName
}, "+".concat(hiddenAvatarCount))));
};
var handleKeyDown$5 = function handleKeyDown(event, focusedOption, setFocusedOption, setHighlightFirstItem, setHighlightLastItem, listRef, withSearch, setOpenPopover, triggerRef) {
switch (event.key) {
case 'ArrowUp':
event.preventDefault();
navigateOptions$3('up', focusedOption, setFocusedOption, listRef, withSearch);
break;
case 'ArrowDown':
event.preventDefault();
navigateOptions$3('down', focusedOption, setFocusedOption, listRef, withSearch);
break;
case 'Enter':
handleEnterKey$2(focusedOption);
setHighlightLastItem === null || setHighlightLastItem === void 0 || setHighlightLastItem(false);
setHighlightFirstItem === null || setHighlightFirstItem === void 0 || setHighlightFirstItem(false);
break;
case 'Escape':
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(false);
triggerRef.current.focus();
setFocusedOption === null || setFocusedOption === void 0 || setFocusedOption(undefined);
break;
}
};
var handleEnterKey$2 = function handleEnterKey(focusedOption) {
focusedOption === null || focusedOption === void 0 || focusedOption.click();
};
var AVATAR_SELECTION_OPTION_SELECTOR = '[data-test="DesignSystem-AvatarSelection--Option"]';
var navigateOptions$3 = function navigateOptions(direction, focusedOption, setFocusedOption, listRef, withSearch) {
var _listRef$current;
var listItems = listRef === null || listRef === void 0 || (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.querySelectorAll(AVATAR_SELECTION_OPTION_SELECTOR);
if (!(listItems !== null && listItems !== void 0 && listItems.length)) {
return;
}
var index = Array.from(listItems).findIndex(function (item) {
return item == focusedOption;
});
if (index === -1) {
index = direction === 'up' ? listItems.length - 1 : 0;
} else if (withSearch && index === 0 && direction === 'up' || withSearch && index === listItems.length - 1 && direction === 'down') {
var _listRef$current2;
var searchInput = (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.querySelector('[data-test="DesignSystem-AvatarSelection--Input"]');
searchInput === null || searchInput === void 0 || searchInput.focus();
setFocusedOption && setFocusedOption(searchInput);
} else {
var _targetOption$scrollI;
index = direction === 'up' ? (index - 1 + listItems.length) % listItems.length : (index + 1) % listItems.length;
var targetOption = listItems[index];
targetOption === null || targetOption === void 0 || targetOption.focus();
setFocusedOption && setFocusedOption(targetOption);
targetOption === null || targetOption === void 0 || (_targetOption$scrollI = targetOption.scrollIntoView) === null || _targetOption$scrollI === void 0 || _targetOption$scrollI.call(targetOption, {
block: 'center'
});
}
};
var handleInputKeyDown$1 = function handleInputKeyDown(event, listRef, setFocusedOption, setOpenPopover, triggerRef) {
var _listRef$current3, _targetOption, _targetOption2, _targetOption2$scroll;
var listItems = (_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 ? void 0 : _listRef$current3.querySelectorAll(AVATAR_SELECTION_OPTION_SELECTOR);
var targetOption;
switch (event.key) {
case 'ArrowUp':
event.preventDefault();
targetOption = listItems !== null && listItems !== void 0 && listItems.length ? listItems[listItems.length - 1] : undefined;
break;
case 'ArrowDown':
event.preventDefault();
targetOption = listItems !== null && listItems !== void 0 && listItems.length ? listItems[0] : undefined;
break;
case 'Escape':
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(false);
triggerRef.current.focus();
setFocusedOption === null || setFocusedOption === void 0 || setFocusedOption(undefined);
break;
}
(_targetOption = targetOption) === null || _targetOption === void 0 || _targetOption.focus();
(_targetOption2 = targetOption) === null || _targetOption2 === void 0 || (_targetOption2$scroll = _targetOption2.scrollIntoView) === null || _targetOption2$scroll === void 0 || _targetOption2$scroll.call(_targetOption2, {
block: 'center'
});
setFocusedOption && setFocusedOption(targetOption);
};
var AvatarSelectionInput = function AvatarSelectionInput(props) {
var contextProp = React.useContext(AvatarSelectionContext);
var listRef = contextProp.listRef,
setFocusedOption = contextProp.setFocusedOption,
setOpenPopover = contextProp.setOpenPopover,
triggerRef = contextProp.triggerRef;
var inputClassName = classnames(_defineProperty$1({
'w-100': true
}, styles$b['SelectionAvatar-input'], true));
return /*#__PURE__*/React.createElement("div", {
className: styles$b['SelectionAvatar-inputWrapper']
}, /*#__PURE__*/React.createElement(Input, _extends$2({
icon: "search",
onKeyDown: function onKeyDown(event) {
return handleInputKeyDown$1(event, listRef, setFocusedOption, setOpenPopover, triggerRef);
},
className: inputClassName,
"data-test": "DesignSystem-AvatarSelection--Input"
}, props)));
};
var AvatarSelectionList = function AvatarSelectionList(props) {
return /*#__PURE__*/React.createElement(Listbox, props, props.children);
};
AvatarSelectionList.defaultProps = {
type: 'option',
showDivider: false,
size: 'compressed',
tagName: 'ul'
};
var _excluded$z = ["children", "value", "disabled"];
var AvatarSelectionOption = function AvatarSelectionOption(props) {
var children = props.children,
value = props.value,
disabled = props.disabled,
rest = _objectWithoutProperties(props, _excluded$z);
var contextProp = React.useContext(AvatarSelectionContext);
var setSelectedItems = contextProp.setSelectedItems,
selectedItems = contextProp.selectedItems,
onSelect = contextProp.onSelect,
focusedOption = contextProp.focusedOption,
setFocusedOption = contextProp.setFocusedOption,
setHighlightFirstItem = contextProp.setHighlightFirstItem,
setHighlightLastItem = contextProp.setHighlightLastItem,
listRef = contextProp.listRef,
withSearch = contextProp.withSearch,
setOpenPopover = contextProp.setOpenPopover,
triggerRef = contextProp.triggerRef;
var onSelectHandler = function onSelectHandler(event, avatarData) {
event.preventDefault();
if (disabled) {
return;
}
var list = selectedItems ? _toConsumableArray(selectedItems) : [];
if (selectedItems !== null && selectedItems !== void 0 && selectedItems.includes(avatarData)) {
list = selectedItems.filter(function (selectedItem) {
return selectedItem !== avatarData;
});
} else {
list.push(avatarData);
}
setSelectedItems === null || setSelectedItems === void 0 || setSelectedItems(_toConsumableArray(list));
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(true);
onSelect && onSelect(list);
};
var onKeyDownHandler = function onKeyDownHandler(event) {
handleKeyDown$5(event, focusedOption, setFocusedOption, setHighlightFirstItem, setHighlightLastItem, listRef, withSearch, setOpenPopover, triggerRef);
};
return /*#__PURE__*/React.createElement(Listbox.Item, _extends$2({
onClick: function onClick(event) {
return onSelectHandler(event, value);
},
onKeyDown: function onKeyDown(event) {
return onKeyDownHandler(event);
},
selected: selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(value),
"data-test": "DesignSystem-AvatarSelection--Option",
disabled: disabled,
tabIndex: -1
}, rest), children);
};
AvatarSelectionOption.defaultProps = {
tagName: 'li'
};
var AvatarSelectionEmptyState = function AvatarSelectionEmptyState(props) {
var height = props.height,
title = props.title,
description = props.description;
return /*#__PURE__*/React.createElement("div", {
className: "d-flex flex-column justify-content-center align-items-center",
style: {
height: height ? height - 4 : ''
},
"data-test": "DesignSystem-AvatarSelection--EmptyState"
}, title && /*#__PURE__*/React.createElement(Text$1, {
className: "text-align-center mb-3",
weight: "strong"
}, title), description && /*#__PURE__*/React.createElement(Text$1, {
className: "text-align-center mb-6",
weight: "medium",
size: "small",
appearance: "subtle"
}, description));
};
var AvatarSelectionItem = function AvatarSelectionItem(props) {
var avatarData = props.avatarData,
isSelected = props.isSelected,
size = props.size;
var shape = avatarData.shape;
var avatarShape = shape === 'square' ? 'square' : 'round';
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
showTooltip = _React$useState2[0],
setShowTooltip = _React$useState2[1];
var elementRef = React.useRef(null);
var _avatarData$firstName = avatarData.firstName,
firstName = _avatarData$firstName === void 0 ? '' : _avatarData$firstName,
_avatarData$lastName = avatarData.lastName,
lastName = _avatarData$lastName === void 0 ? '' : _avatarData$lastName,
disabled = avatarData.disabled,
tooltipSuffix = avatarData.tooltipSuffix,
image = avatarData.image,
icon = avatarData.icon;
var name = "".concat(firstName || '', " ").concat(lastName || '', " ").concat(tooltipSuffix || '') || '';
var triggerClassName = classnames(_defineProperty$1(_defineProperty$1({}, 'cursor-not-allowed', disabled), 'ellipsis--noWrap', true));
return /*#__PURE__*/React.createElement(AvatarSelectionOption, {
value: avatarData,
disabled: disabled,
onFocus: function onFocus() {
setShowTooltip(true);
},
onBlur: function onBlur() {
setShowTooltip(false);
}
}, /*#__PURE__*/React.createElement(Checkbox, {
defaultChecked: isSelected,
checked: isSelected,
size: "regular",
tabIndex: -1,
"data-test": "DesignSystem-AvatarSelection--Checkbox"
}), /*#__PURE__*/React.createElement(Avatar, _extends$2({}, avatarData, {
shape: avatarShape,
size: size,
className: "ml-3",
withTooltip: false,
"aria-hidden": true
}), image || icon), /*#__PURE__*/React.createElement(Tooltip, {
showOnTruncation: true,
tooltip: name,
elementRef: elementRef,
open: showTooltip,
triggerClass: triggerClassName,
position: "right"
}, /*#__PURE__*/React.createElement(Text$1, {
className: "ellipsis--noWrap ml-4",
ref: elementRef
}, name)));
};
var AvatarSelectionPopover = function AvatarSelectionPopover(props) {
var hiddenAvatarList = props.hiddenAvatarList,
customStyle = props.customStyle,
searchPlaceholder = props.searchPlaceholder,
searchComparator = props.searchComparator,
children = props.children,
size = props.size;
var _React$useState3 = React.useState(hiddenAvatarList),
_React$useState4 = _slicedToArray(_React$useState3, 2),
searchList = _React$useState4[0],
setSearchList = _React$useState4[1];
var _React$useState5 = React.useState(''),
_React$useState6 = _slicedToArray(_React$useState5, 2),
searchValue = _React$useState6[0],
setSearchValue = _React$useState6[1];
var contextProp = React.useContext(AvatarSelectionContext);
var selectedItems = contextProp.selectedItems,
listRef = contextProp.listRef,
withSearch = contextProp.withSearch,
popoverId = contextProp.popoverId;
if (children) {
return /*#__PURE__*/React.createElement(React.Fragment, null, children);
}
var onSearchHandler = function onSearchHandler(event) {
var searchValue = event.target.value;
var list = hiddenAvatarList === null || hiddenAvatarList === void 0 ? void 0 : hiddenAvatarList.filter(function (avatarData) {
var _firstName$toLowerCas, _lastName$toLowerCase;
var firstName = avatarData.firstName,
lastName = avatarData.lastName;
if (searchComparator) {
return searchComparator(searchValue, avatarData);
}
return (firstName === null || firstName === void 0 || (_firstName$toLowerCas = firstName.toLowerCase()) === null || _firstName$toLowerCas === void 0 ? void 0 : _firstName$toLowerCas.startsWith(searchValue.toLowerCase())) || (lastName === null || lastName === void 0 || (_lastName$toLowerCase = lastName.toLowerCase()) === null || _lastName$toLowerCase === void 0 ? void 0 : _lastName$toLowerCase.startsWith(searchValue.toLowerCase()));
});
setSearchValue(searchValue);
setSearchList(list);
};
var onClearHandler = function onClearHandler() {
setSearchValue('');
setSearchList(hiddenAvatarList);
};
var popperClassName = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, 'py-3', !withSearch), 'pb-3', withSearch), styles$b['SelectionAvatarGroup-popper'], true));
return /*#__PURE__*/React.createElement("div", {
style: {
width: customStyle.width
},
ref: listRef,
"data-test": "DesignSystem-AvatarSelection--Popover",
id: popoverId
}, withSearch && /*#__PURE__*/React.createElement(AvatarSelectionInput, {
placeholder: searchPlaceholder,
onChange: onSearchHandler,
value: searchValue,
onClear: onClearHandler
}), /*#__PURE__*/React.createElement("span", {
"aria-live": "polite",
"aria-atomic": "true",
className: styles$b['AvatarSelection-srOnly']
}, searchList.length === 0 ? 'No users found. Try modifying your search to find what you are looking for.' : ''), /*#__PURE__*/React.createElement("div", {
style: customStyle,
className: popperClassName
}, searchList.length === 0 && /*#__PURE__*/React.createElement(AvatarSelectionEmptyState, {
height: customStyle.maxHeight,
title: "No users found",
description: "Try modifying your search to find what you are looking for."
}), /*#__PURE__*/React.createElement(AvatarSelectionList, {
size: size === 'micro' ? 'tight' : 'compressed'
}, searchList.map(function (avatarData, index) {
var isSelected = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(avatarData);
return /*#__PURE__*/React.createElement(AvatarSelectionItem, {
key: index,
avatarData: avatarData,
isSelected: isSelected,
size: size
});
}))));
};
var AvatarSelection = function AvatarSelection(props) {
var max = props.max,
borderColor = props.borderColor,
tooltipPosition = props.tooltipPosition,
list = props.list,
className = props.className,
size = props.size,
avatarRenderer = props.avatarRenderer,
onSelect = props.onSelect,
width = props.width,
maxHeight = props.maxHeight,
minHeight = props.minHeight,
searchPlaceholder = props.searchPlaceholder,
withSearch = props.withSearch,
searchComparator = props.searchComparator,
children = props.children,
moreAvatarsLabel = props.moreAvatarsLabel,
ariaLabel = props['aria-label'],
ariaLabelledBy = props['aria-labelledby'];
var _React$useState = React.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
selectedItems = _React$useState2[0],
setSelectedItems = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
openPopover = _React$useState4[0],
setOpenPopover = _React$useState4[1];
var _React$useState5 = React.useState(),
_React$useState6 = _slicedToArray(_React$useState5, 2),
focusedOption = _React$useState6[0],
setFocusedOption = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
highlightFirstItem = _React$useState8[0],
setHighlightFirstItem = _React$useState8[1];
var _React$useState9 = React.useState(false),
_React$useState10 = _slicedToArray(_React$useState9, 2),
highlightLastItem = _React$useState10[0],
setHighlightLastItem = _React$useState10[1];
var listRef = /*#__PURE__*/React.createRef();
var triggerRef = /*#__PURE__*/React.createRef();
React.useEffect(function () {
var selectedList = [];
list.forEach(function (avatarItem) {
if (avatarItem.selected) {
selectedList.push(avatarItem);
}
});
setSelectedItems(selectedList);
}, []);
React.useEffect(function () {
if (!openPopover) {
setHighlightFirstItem(false);
setHighlightLastItem(false);
} else {
setHighlightFirstItem(true);
}
}, [openPopover]);
React.useEffect(function () {
if (highlightFirstItem && openPopover) {
requestAnimationFrame(function () {
return focusListItem$3('down', setFocusedOption, listRef, withSearch);
});
}
}, [highlightFirstItem]);
React.useEffect(function () {
if (highlightLastItem && openPopover) {
requestAnimationFrame(function () {
return focusListItem$3('up', setFocusedOption, listRef, withSearch);
});
}
}, [highlightLastItem]);
var baseProps = extractBaseProps(props);
var hiddenAvatarCount = list.length - max;
var style = {
backgroundColor: "".concat(borderColor),
boxShadow: "0 0 0 calc(var(--spacing-2-5) + var(--spacing-05)) ".concat(borderColor)
};
var tinyAvatarStyle = {
boxShadow: "0 0 0 var(--spacing-05) ".concat(borderColor)
};
var avatarStyle = size !== 'regular' ? _objectSpread2(_objectSpread2({}, style), tinyAvatarStyle) : style;
var AvatarSelectionClass = classnames(_defineProperty$1({}, styles$b['SelectionAvatarGroup'], true), className);
var searchInputHeight = 36;
var searchBorder = 1;
var customStyle = {
width: width,
minHeight: minHeight,
maxHeight: withSearch ? maxHeight - searchInputHeight - searchBorder : maxHeight
};
var hiddenAvatarList = list.slice(max, list.length);
var popoverId = "DesignSystem-AvatarSelection-Popover-".concat(uidGenerator());
var popoverProps = {
hiddenAvatarList: hiddenAvatarList,
customStyle: customStyle,
searchPlaceholder: searchPlaceholder,
searchComparator: searchComparator,
children: children,
size: size
};
var triggerProps = {
size: size,
avatarStyle: avatarStyle,
hiddenAvatarCount: hiddenAvatarCount,
hiddenAvatarList: hiddenAvatarList,
moreAvatarsLabel: moreAvatarsLabel
};
var onToggleHandler = function onToggleHandler(open) {
open ? setOpenPopover(true) : setOpenPopover(false);
};
var contextProp = {
listRef: listRef,
onSelect: onSelect,
withSearch: withSearch,
triggerRef: triggerRef,
selectedItems: selectedItems,
focusedOption: focusedOption,
openPopover: openPopover,
setSelectedItems: setSelectedItems,
setFocusedOption: setFocusedOption,
setHighlightFirstItem: setHighlightFirstItem,
setHighlightLastItem: setHighlightLastItem,
setOpenPopover: setOpenPopover,
popoverId: popoverId
};
return /*#__PURE__*/React.createElement(AvatarSelectionContext.Provider, {
value: contextProp
}, /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-AvatarSelection"
}, baseProps, {
className: AvatarSelectionClass,
role: "group",
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy
}), /*#__PURE__*/React.createElement(SelectionAvatarsWrapper, {
size: size,
avatarStyle: avatarStyle,
avatarList: list.slice(0, max),
avatarRenderer: avatarRenderer,
tooltipPosition: tooltipPosition
}), (hiddenAvatarCount > 0 || children && hiddenAvatarCount > 0) && /*#__PURE__*/React.createElement(Popover, {
open: openPopover,
position: "bottom-end",
trigger: /*#__PURE__*/React.createElement(AvatarSelectionCount, triggerProps),
triggerClass: "flex-grow-0",
onToggle: onToggleHandler
}, /*#__PURE__*/React.createElement(AvatarSelectionPopover, popoverProps))));
};
AvatarSelection.displayName = 'AvatarSelection';
AvatarSelection.defaultProps = {
max: 5,
tooltipPosition: 'bottom',
borderColor: 'white',
size: 'regular',
width: 256,
maxHeight: 256,
moreAvatarsLabel: 'more'
};
AvatarSelection.Input = AvatarSelectionInput;
AvatarSelection.List = AvatarSelectionList;
AvatarSelection.Option = AvatarSelectionOption;
AvatarSelection.EmptyState = AvatarSelectionEmptyState;
var ComboboxContext = /*#__PURE__*/React.createContext({});
var _excluded$y = ["aria-multiselectable", "children"];
var ComboboxList = function ComboboxList(props) {
var _React$useContext = React.useContext(ComboboxContext),
multiSelect = _React$useContext.multiSelect,
popoverId = _React$useContext.popoverId;
var ariaMultiselectableProp = props['aria-multiselectable'],
children = props.children,
restProps = _objectWithoutProperties(props, _excluded$y);
var ariaMultiselectable = ariaMultiselectableProp !== undefined ? ariaMultiselectableProp : Boolean(multiSelect);
return /*#__PURE__*/React.createElement(Listbox, _extends$2({
id: popoverId,
className: "py-3"
}, restProps, {
role: "listbox",
customFocusManagement: true,
"aria-multiselectable": ariaMultiselectable
}), children);
};
ComboboxList.defaultProps = {
type: 'option',
showDivider: false,
tagName: 'ul',
size: 'compressed'
};
var handleKeyDown$4 = function handleKeyDown(event, focusedOption, setFocusedOption, setOpenPopover, inputTriggerRef, setHighlightFirstItem, setHighlightLastItem, multiSelect, listRef) {
if (isSpaceKey(event)) {
event.preventDefault();
handleEnterKey$1(event.currentTarget, multiSelect, inputTriggerRef, listRef, setFocusedOption);
setHighlightLastItem === null || setHighlightLastItem === void 0 || setHighlightLastItem(false);
setHighlightFirstItem === null || setHighlightFirstItem === void 0 || setHighlightFirstItem(false);
return;
}
switch (event.key) {
case 'ArrowUp':
event.preventDefault();
navigateOptions$2('up', focusedOption, setFocusedOption, listRef, inputTriggerRef);
break;
case 'ArrowDown':
event.preventDefault();
navigateOptions$2('down', focusedOption, setFocusedOption, listRef, inputTriggerRef);
break;
case 'Enter':
event.preventDefault();
handleEnterKey$1(event.currentTarget, multiSelect, inputTriggerRef, listRef, setFocusedOption);
setHighlightLastItem === null || setHighlightLastItem === void 0 || setHighlightLastItem(false);
setHighlightFirstItem === null || setHighlightFirstItem === void 0 || setHighlightFirstItem(false);
break;
case 'Escape':
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(false);
inputTriggerRef.current.focus();
setFocusedOption === null || setFocusedOption === void 0 || setFocusedOption(undefined);
break;
case 'Tab':
event.preventDefault();
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(false);
setFocusedOption === null || setFocusedOption === void 0 || setFocusedOption(undefined);
if (inputTriggerRef !== null && inputTriggerRef !== void 0 && inputTriggerRef.current && inputTriggerRef.current instanceof HTMLElement) {
Promise.resolve().then(function () { return utils; }).then(function (_ref) {
var getNextFocusableAfterTrigger = _ref.getNextFocusableAfterTrigger;
var next = getNextFocusableAfterTrigger(inputTriggerRef.current, event.shiftKey);
if (next) {
next.focus({
preventScroll: true
});
} else {
inputTriggerRef.current.focus();
}
});
} else if (inputTriggerRef !== null && inputTriggerRef !== void 0 && inputTriggerRef.current) {
inputTriggerRef.current.focus();
}
break;
default:
if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
if (inputTriggerRef !== null && inputTriggerRef !== void 0 && inputTriggerRef.current) {
inputTriggerRef.current.focus();
}
}
break;
}
};
var handleEnterKey$1 = function handleEnterKey(activationTarget, multiSelect, inputTriggerRef, listRef, setFocusedOption) {
activationTarget === null || activationTarget === void 0 || activationTarget.click();
if (!multiSelect) {
inputTriggerRef.current.focus();
} else {
// to focus first option by default when last option is selected
if (!(listRef !== null && listRef !== void 0 && listRef.current)) return;
// Scope to 'listbox' role to exclude nested elements
var focusables = getAllFocusableElements(listRef.current, 'listbox');
var index = focusables.findIndex(function (item) {
return item === activationTarget;
});
if (index === focusables.length - 1 && focusables.length > 0) {
var _focusables$0$scrollI, _focusables$;
focusables[0].focus({
preventScroll: true
});
setFocusedOption && setFocusedOption(focusables[0]);
(_focusables$0$scrollI = (_focusables$ = focusables[0]).scrollIntoView) === null || _focusables$0$scrollI === void 0 || _focusables$0$scrollI.call(_focusables$, {
block: 'center'
});
}
}
};
var navigateOptions$2 = function navigateOptions(direction, focusedOption, setFocusedOption, listRef, inputTriggerRef) {
var _targetOption$scrollI;
if (!(listRef !== null && listRef !== void 0 && listRef.current)) return;
// Scope to 'listbox' role to exclude nested elements
var focusables = getAllFocusableElements(listRef.current, 'listbox');
if (focusables.length === 0) return;
var index = focusables.findIndex(function (item) {
return item === focusedOption || item === document.activeElement;
});
if (index === -1) {
index = direction === 'up' ? focusables.length - 1 : 0;
} else if (direction === 'up' && index === 0) {
// If we're on the first item and pressing up, return focus to the input
if (inputTriggerRef !== null && inputTriggerRef !== void 0 && inputTriggerRef.current) {
inputTriggerRef.current.focus();
setFocusedOption && setFocusedOption(undefined);
return;
}
index = focusables.length - 1; // Fallback to wrap-around if no input ref
} else {
index = direction === 'up' ? (index - 1 + focusables.length) % focusables.length : (index + 1) % focusables.length;
}
var targetOption = focusables[index];
targetOption.focus({
preventScroll: true
});
setFocusedOption && setFocusedOption(targetOption);
(_targetOption$scrollI = targetOption.scrollIntoView) === null || _targetOption$scrollI === void 0 || _targetOption$scrollI.call(targetOption, {
block: 'center'
});
};
var _excluded$x = ["children", "option", "onClick", "onFocus", "onBlur"];
var ComboboxOption = function ComboboxOption(props) {
var children = props.children,
option = props.option,
onClick = props.onClick,
onFocus = props.onFocus,
onBlur = props.onBlur,
rest = _objectWithoutProperties(props, _excluded$x);
var contextProp = React.useContext(ComboboxContext);
var onOptionClick = contextProp.onOptionClick,
inputValue = contextProp.inputValue,
focusedOption = contextProp.focusedOption,
setFocusedOption = contextProp.setFocusedOption,
setOpenPopover = contextProp.setOpenPopover,
inputTriggerRef = contextProp.inputTriggerRef,
setHighlightFirstItem = contextProp.setHighlightFirstItem,
setHighlightLastItem = contextProp.setHighlightLastItem,
multiSelect = contextProp.multiSelect,
listRef = contextProp.listRef;
var onClickHandler = function onClickHandler(e) {
var optionEl = resolveListboxOptionFromEvent(e, e.currentTarget);
setFocusedOption === null || setFocusedOption === void 0 || setFocusedOption(optionEl);
if (onClick) {
return onClick(option);
}
return onOptionClick && onOptionClick(_objectSpread2(_objectSpread2({}, option), {}, {
isSelectedOption: true
}));
};
var handleFocus = function handleFocus(event) {
var optionEl = resolveListboxOptionFromEvent(event, event.currentTarget);
setFocusedOption === null || setFocusedOption === void 0 || setFocusedOption(optionEl);
onFocus === null || onFocus === void 0 || onFocus(event);
};
var onKeyDownHandler = function onKeyDownHandler(event) {
handleKeyDown$4(event, focusedOption, setFocusedOption, setOpenPopover, inputTriggerRef, setHighlightFirstItem, setHighlightLastItem, multiSelect, listRef);
};
return /*#__PURE__*/React.createElement(Listbox.Item, _extends$2({}, rest, {
onClick: onClickHandler,
selected: option.label === (inputValue === null || inputValue === void 0 ? void 0 : inputValue.label),
onFocus: handleFocus,
onBlur: onBlur,
onKeyDown: onKeyDownHandler,
tabIndex: -1,
role: "option",
"data-test": "DesignSystem-Combobox-Option"
}), children);
};
ComboboxOption.defaultProps = {
tagName: 'li'
};
var handleKeyDown$3 = function handleKeyDown(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem) {
switch (event.key) {
case 'ArrowUp':
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(true);
setHighlightLastItem === null || setHighlightLastItem === void 0 || setHighlightLastItem(true);
break;
case 'ArrowDown':
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(true);
setHighlightFirstItem === null || setHighlightFirstItem === void 0 || setHighlightFirstItem(true);
break;
case 'Escape':
case 'Tab':
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(false);
break;
}
};
var focusListItem$2 = function focusListItem(position, setFocusedOption, listRef) {
var container = listRef === null || listRef === void 0 ? void 0 : listRef.current;
if (!container) return;
// Match `navigateOptions` in combobox/utils.tsx: focus `[role="option"]` hosts, not the inner row
// wrapper. Otherwise the first ArrowDown from an option hits index -1 and re-focuses the first element again.
var options = getAllFocusableElements(container, 'listbox');
if (options.length === 0) return;
var targetOption = position === 'down' ? options[0] : options[options.length - 1];
targetOption.focus({
preventScroll: true
});
if (typeof targetOption.scrollIntoView === 'function') {
targetOption.scrollIntoView({
block: 'center',
behavior: 'smooth'
});
}
setFocusedOption === null || setFocusedOption === void 0 || setFocusedOption(targetOption);
};
var InputBox = function InputBox(props) {
var contextProp = React.useContext(ComboboxContext);
var inputValue = contextProp.inputValue,
setInputValue = contextProp.setInputValue,
setFocusedOption = contextProp.setFocusedOption,
setOpenPopover = contextProp.setOpenPopover,
inputTriggerRef = contextProp.inputTriggerRef,
setHighlightFirstItem = contextProp.setHighlightFirstItem,
setHighlightLastItem = contextProp.setHighlightLastItem,
openPopover = contextProp.openPopover,
popoverId = contextProp.popoverId;
var onChangeHandler = function onChangeHandler(event) {
var value = event.target.value;
setFocusedOption && setFocusedOption(undefined);
var newValue = {
label: value,
value: value,
isSelectedOption: false
};
setInputValue && setInputValue(newValue);
if (value !== '') {
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(true);
}
};
var onClearHandler = function onClearHandler(event) {
var _props$onClear;
event.stopPropagation();
var newValue = {
label: '',
value: '',
isSelectedOption: false
};
setInputValue && setInputValue(newValue);
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(true);
(_props$onClear = props.onClear) === null || _props$onClear === void 0 || _props$onClear.call(props, event);
};
var onKeyDownHandler = function onKeyDownHandler(event) {
handleKeyDown$3(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
props.onKeyDown && props.onKeyDown(event);
};
return /*#__PURE__*/React.createElement(Input, _extends$2({}, props, {
ref: inputTriggerRef,
value: inputValue === null || inputValue === void 0 ? void 0 : inputValue.label,
onChange: onChangeHandler,
onKeyDown: onKeyDownHandler,
onClear: onClearHandler,
role: "combobox",
"aria-autocomplete": "list",
"aria-haspopup": "listbox",
"aria-controls": popoverId,
"aria-label": props['aria-label'] || props.placeholder || 'Combobox-Input-Trigger',
"aria-labelledby": props['aria-labelledby'],
"aria-expanded": openPopover,
"data-test": "DesignSystem-Combobox-Input"
}));
};
var _excluded$w = ["chipOptions", "allowDuplicates", "disabled", "error", "placeholder", "defaultValue", "value", "className", "autoFocus", "onChange", "onBlur", "onFocus", "onKeyDown", "onInputChange", "tabIndex", "role", "aria-label", "aria-labelledby", "aria-invalid"],
_excluded2 = ["type", "onClick", "clearButton"];
var keyCodes = {
BACKSPACE: 'Backspace',
DELETE: 'Delete',
ENTER: 'Enter'
};
var MultiSelectTrigger = /*#__PURE__*/React.forwardRef(function (props, forwardedInputRef) {
var chipOptions = props.chipOptions,
allowDuplicates = props.allowDuplicates,
disabled = props.disabled,
error = props.error,
placeholder = props.placeholder,
defaultValue = props.defaultValue,
value = props.value,
className = props.className,
autoFocus = props.autoFocus,
onChange = props.onChange,
onBlur = props.onBlur,
onFocus = props.onFocus,
onKeyDown = props.onKeyDown,
onInputChange = props.onInputChange,
tabIndex = props.tabIndex,
role = props.role,
ariaLabel = props['aria-label'],
ariaLabelledBy = props['aria-labelledby'],
ariaInvalid = props['aria-invalid'],
rest = _objectWithoutProperties(props, _excluded$w);
var localInputRef = React.useRef();
var customRef = React.useRef();
var inputElementRef = forwardedInputRef || localInputRef;
var _React$useState = React.useState(value || defaultValue),
_React$useState2 = _slicedToArray(_React$useState, 2),
chips = _React$useState2[0],
setChips = _React$useState2[1];
var _React$useState3 = React.useState(''),
_React$useState4 = _slicedToArray(_React$useState3, 2),
inputValue = _React$useState4[0],
setInputValue = _React$useState4[1];
var baseProps = extractBaseProps(props);
React.useEffect(function () {
if (value !== undefined) {
setChips(value);
setInputValue('');
}
}, [value]);
React.useEffect(function () {
if (inputValue === '' && inputElementRef.current) {
inputElementRef.current.style.flexBasis = '0';
customRef.current.charCount = null;
}
}, [inputValue]);
var ChipInputBorderClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$C['ChipInput-border'], true), styles$C['ChipInput-border--error'], error));
var ChipInputClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$C.ChipInput, true), styles$C['ChipInput--disabled'], disabled), styles$C['ChipInput--withChips'], chips && chips.length > 0), styles$C['ChipInput--error'], error), className);
var onUpdateChips = function onUpdateChips(updatedChips) {
if (onChange) onChange(updatedChips);
};
var onChipDeleteHandler = function onChipDeleteHandler(index) {
var updatedChips = _toConsumableArray(chips);
updatedChips.splice(index, 1);
if (!value) {
setChips(updatedChips);
}
onUpdateChips(updatedChips);
};
var onChipAddHandler = function onChipAddHandler() {
if (!inputValue) return;
var chip = inputValue.trim();
var isChipExist = chips.filter(function (item) {
return item.label === chip;
}).length > 0;
if ((allowDuplicates || !isChipExist) && chip) {
var updatedChips = [].concat(_toConsumableArray(chips), [{
label: chip,
value: chip,
isSelectedOption: false
}]);
if (!value) {
setChips(updatedChips);
}
onUpdateChips(updatedChips);
setInputValue('');
}
};
var onDeleteAllHandler = function onDeleteAllHandler(e) {
e.stopPropagation();
var updatedChips = [];
if (!value) {
setChips(updatedChips);
}
onUpdateChips(updatedChips);
setInputValue('');
onInputChange && onInputChange();
};
var onKeyDownHandler = function onKeyDownHandler(event) {
var chipsLength = chips.length;
switch (event.key) {
case keyCodes.DELETE:
case keyCodes.BACKSPACE:
if (inputValue === '' && chipsLength > 0) {
onChipDeleteHandler(chipsLength - 1);
}
break;
case keyCodes.ENTER:
event.preventDefault();
onChipAddHandler();
break;
}
onKeyDown && onKeyDown(event);
};
var onInputChangeHandler = function onInputChangeHandler(event) {
var inputElement = inputElementRef.current;
if (inputElement) {
var _customRef$current;
var charLen = event.target.value.length;
var elementScrollWidth = inputElement.scrollWidth;
var elementClientWidth = inputElement.clientWidth;
if (elementScrollWidth > elementClientWidth && inputValue.length <= charLen) {
inputElement.style.flexBasis = 'auto';
if (customRef.current) {
customRef.current.charCount = charLen;
}
} else if (elementScrollWidth <= elementClientWidth && inputValue.length > charLen && charLen <= (((_customRef$current = customRef.current) === null || _customRef$current === void 0 ? void 0 : _customRef$current.charCount) || 0) - 1) {
inputElement.style.flexBasis = '0';
}
}
setInputValue(event.target.value);
onInputChange && onInputChange(event);
};
var onClickHandler = function onClickHandler() {
var _inputElementRef$curr;
(_inputElementRef$curr = inputElementRef.current) === null || _inputElementRef$curr === void 0 || _inputElementRef$curr.focus();
};
var handleTriggerKeyDown = function handleTriggerKeyDown(event) {
if (disabled || event.currentTarget !== event.target) return;
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
onClickHandler();
}
};
var chipComponents = chips.map(function (chip, index) {
var _chipOptions$type = chipOptions.type,
type = _chipOptions$type === void 0 ? 'input' : _chipOptions$type,
_onClick = chipOptions.onClick,
clearButton = chipOptions.clearButton,
rest = _objectWithoutProperties(chipOptions, _excluded2);
var chipLabel = typeof chip === 'string' ? chip : chip === null || chip === void 0 ? void 0 : chip.label;
var clearButtonAriaLabel = typeof chipLabel === 'string' && chipLabel.trim() !== '' ? "Remove ".concat(chipLabel.trim()) : 'Remove';
return /*#__PURE__*/React.createElement(Chip, _extends$2({
"data-test": "DesignSystem-MultiSelectTrigger--Chip",
label: chipLabel,
name: chip,
type: type,
disabled: disabled,
key: index,
className: "my-3 mx-2",
onClick: function onClick() {
return _onClick && _onClick(chip, index);
},
onClose: function onClose() {
return onChipDeleteHandler(index);
}
}, rest, {
clearButton: clearButton,
clearButtonAriaLabel: clearButtonAriaLabel,
tabIndex: clearButton ? -1 : undefined
}));
});
return /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-MultiSelectTrigger--Border",
className: ChipInputBorderClass
}, /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-MultiSelectTrigger"
}, baseProps, {
className: ChipInputClass,
onClick: onClickHandler,
onKeyDown: handleTriggerKeyDown,
tabIndex: disabled ? -1 : tabIndex !== undefined ? tabIndex : 0,
role: "button",
"aria-disabled": disabled || undefined
}), /*#__PURE__*/React.createElement("div", {
className: styles$C['ChipInput-wrapper'],
ref: customRef
}, chips && chips.length > 0 && chipComponents, /*#__PURE__*/React.createElement("input", _extends$2({}, rest, {
"data-test": "DesignSystem-MultiSelectTrigger--Input",
ref: inputElementRef,
className: styles$C['ChipInput-input'],
autoFocus: autoFocus,
placeholder: chips && chips.length > 0 ? '' : placeholder,
disabled: disabled,
value: inputValue,
onBlur: onBlur,
onFocus: onFocus,
onChange: onInputChangeHandler,
onKeyDown: onKeyDownHandler,
role: role,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-invalid": error === true ? true : ariaInvalid
}))), !disabled && (chips.length > 0 || inputValue.length > 0) && /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-MultiSelectTrigger--Icon",
className: classnames(inputStyles['Input-icon'], inputStyles['Input-iconWrapper--right'], 'align-items-center', 'flex-shrink-0'),
role: "button",
onClick: onDeleteAllHandler,
tabIndex: disabled ? -1 : 0,
"aria-label": "Clear all options",
onKeyDown: function onKeyDown(e) {
if (e.key === 'Enter' || isSpaceKey(e)) {
e.preventDefault();
onDeleteAllHandler(e);
}
}
}, /*#__PURE__*/React.createElement(Icon, {
name: "close",
size: 16,
className: classnames(inputStyles['Input-icon--right'], 'p-3')
}))));
});
MultiSelectTrigger.displayName = 'MultiSelectTrigger';
MultiSelectTrigger.defaultProps = {
chipOptions: {},
defaultValue: [],
allowDuplicates: false,
autoFocus: false,
tabIndex: -1
};
var ChipInputBox = function ChipInputBox(props) {
var contextProp = React__default.useContext(ComboboxContext);
var chipInputValue = contextProp.chipInputValue,
setChipInputValue = contextProp.setChipInputValue,
setOpenPopover = contextProp.setOpenPopover,
setFocusedOption = contextProp.setFocusedOption,
setChipInputText = contextProp.setChipInputText,
setHighlightFirstItem = contextProp.setHighlightFirstItem,
setHighlightLastItem = contextProp.setHighlightLastItem,
inputTriggerRef = contextProp.inputTriggerRef,
openPopover = contextProp.openPopover,
popoverId = contextProp.popoverId;
var onChangeHandler = function onChangeHandler(chips) {
setFocusedOption && setFocusedOption(undefined);
setChipInputValue && setChipInputValue(chips);
if (chips.length === 0) {
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(true);
}
};
var onUpdateHandler = function onUpdateHandler(event) {
var _event$target;
var value = event === null || event === void 0 || (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value;
if (!value) {
setChipInputText === null || setChipInputText === void 0 || setChipInputText('');
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(true);
inputTriggerRef === null || inputTriggerRef === void 0 || inputTriggerRef.current.focus();
return;
}
setChipInputText && setChipInputText(value);
if (value !== '') {
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(true);
}
};
var onKeyDownHandler = function onKeyDownHandler(event) {
handleKeyDown$3(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
props.onKeyDown && props.onKeyDown(event);
};
return /*#__PURE__*/React__default.createElement(MultiSelectTrigger, _extends$2({}, props, {
ref: inputTriggerRef,
value: chipInputValue,
onChange: onChangeHandler,
onInputChange: onUpdateHandler,
onKeyDown: onKeyDownHandler,
tabIndex: -1,
role: "combobox",
"aria-autocomplete": "list",
"aria-haspopup": "listbox",
"aria-controls": popoverId,
"aria-label": props['aria-label'] || props.placeholder || 'Combobox-ChipInput-Trigger',
"aria-labelledby": props['aria-labelledby'],
"aria-expanded": openPopover,
"data-test": "DesignSystem-Combobox-ChipInput"
}));
};
var _excluded$v = ["multiSelect", "chipValue", "value"];
var ComboboxTrigger = function ComboboxTrigger(props) {
var multiSelect = props.multiSelect,
chipValue = props.chipValue,
value = props.value,
rest = _objectWithoutProperties(props, _excluded$v);
if (multiSelect) {
var icon = props.icon,
clearButton = props.clearButton,
iconType = props.iconType;
var chipInputOptions = {
icon: icon,
clearButton: clearButton,
iconType: iconType
};
return /*#__PURE__*/React.createElement(ChipInputBox, _extends$2({
defaultValue: [],
chipOptions: _objectSpread2({}, chipInputOptions)
}, rest, {
value: chipValue
}));
}
return /*#__PURE__*/React.createElement(InputBox, _extends$2({}, props, {
value: value === null || value === void 0 ? void 0 : value.label
}));
};
var FOCUSABLE_ELEMENTS_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
/**
* Returns the next (or previous with shiftKey) focusable element in document order after the trigger.
* Used when Tab is pressed inside the popover but the focus trap misses (e.g. options have tabindex=-1).
* Queries from document.body so it works with portaled popovers.
* Excludes focusables inside excludeContainer (e.g. the popover) so we do not focus an element inside the closing popover.
*/
var getNextFocusableAfterTrigger = function getNextFocusableAfterTrigger(startNode, shiftKey, excludeContainer) {
if (!startNode) return null;
var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, {
acceptNode: function acceptNode(node) {
// Skip the container we want to exclude (the popover itself)
if (excludeContainer && (node === excludeContainer || excludeContainer.contains(node))) {
return NodeFilter.FILTER_REJECT; // Reject skips this node AND its children
}
// Skip descendants of the trigger element to avoid trapping focus in composite triggers
if (node !== startNode && startNode.contains(node)) {
return NodeFilter.FILTER_REJECT;
}
// Skip inherently hidden elements
if (node.hasAttribute('disabled') || node.getAttribute('aria-hidden') === 'true') {
return NodeFilter.FILTER_SKIP;
}
// Check if it matches our focusable selector
if (node.matches(FOCUSABLE_ELEMENTS_SELECTOR)) {
// Only do the expensive style check if it's actually focusable
var style = window.getComputedStyle(node);
if (style.visibility !== 'hidden' && style.display !== 'none') {
return NodeFilter.FILTER_ACCEPT;
}
}
return NodeFilter.FILTER_SKIP;
}
});
walker.currentNode = startNode;
if (shiftKey) {
return walker.previousNode() || null;
} else {
return walker.nextNode() || null;
}
};
/** Returns focusable elements inside container (for focus trap). Excludes elements with tabindex="-1" so e.g. checkboxes inside list options do not get their own tab stop. */
var getFocusableElements = function getFocusableElements(container) {
var selector = 'a[href], button:not([disabled]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
return Array.from(container.querySelectorAll(selector));
};
var mapInitialValue = function mapInitialValue(multiSelect, selectedValue) {
if (multiSelect) {
return selectedValue && !Array.isArray(selectedValue) ? [selectedValue] : selectedValue || [];
} else {
return selectedValue || {
label: '',
value: ''
};
}
};
var compareOptions = function compareOptions(option1, option2) {
if (!option1 || !option2) {
return false;
}
// If both options have optionIDs, compare by id
if (option1.id && option2.id) {
return option1.id === option2.id;
}
// Otherwise, always compare by label for backward compatibility
// This handles cases where:
// - Both have no id (legacy behavior)
// - One has id and other doesn't (mixed legacy/new code)
return option1.label === option2.label;
};
var elementExist = function elementExist(targetObject, mainList) {
if (!Array.isArray(mainList)) {
return compareOptions(targetObject, mainList) ? 0 : -1;
}
return mainList.findIndex(function (item) {
return compareOptions(targetObject, item);
});
};
var removeOrAddToList = function removeOrAddToList(targetObject, prevList) {
var newList = _toConsumableArray(prevList);
var existingIndex = elementExist(targetObject, newList);
if (existingIndex !== -1) {
newList.splice(existingIndex, 1);
} else {
newList.push(targetObject);
}
return newList;
};
var computeValue = function computeValue(multiSelect, selectValue, setLabel) {
if (!multiSelect) {
var _selectValue$label;
return (selectValue === null || selectValue === void 0 || (_selectValue$label = selectValue.label) === null || _selectValue$label === void 0 ? void 0 : _selectValue$label.trim()) || '';
}
var label = setLabel === null || setLabel === void 0 ? void 0 : setLabel(selectValue.length);
if (label) {
return label;
}
if (selectValue.length <= 2) {
return selectValue.map(function (pair) {
return "".concat(pair.label);
}).join(', ');
} else {
return "".concat(selectValue.length, " Selected");
}
};
var handleKeyDownTrigger = function handleKeyDownTrigger(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem) {
switch (event.key) {
case 'Enter':
event.preventDefault();
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(true);
setHighlightFirstItem === null || setHighlightFirstItem === void 0 || setHighlightFirstItem(true);
break;
case ' ':
case 'Spacebar':
event.preventDefault();
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(true);
setHighlightFirstItem === null || setHighlightFirstItem === void 0 || setHighlightFirstItem(true);
break;
case 'ArrowDown':
event.preventDefault();
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(true);
setHighlightFirstItem === null || setHighlightFirstItem === void 0 || setHighlightFirstItem(true);
break;
case 'ArrowUp':
event.preventDefault();
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(true);
setHighlightLastItem === null || setHighlightLastItem === void 0 || setHighlightLastItem(true);
break;
}
};
var focusListItem$1 = function focusListItem(position, setFocusedOption, listRef) {
var _listRef$current, _listRef$current2, _targetOption, _targetOption2;
var searchInput = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.querySelectorAll('[data-test="DesignSystem-Select--Input"]');
var listItems = (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.querySelectorAll('[data-test="DesignSystem-Select-Option"]');
var targetOption;
if (position === 'down') {
targetOption = (searchInput === null || searchInput === void 0 ? void 0 : searchInput[0]) || (listItems === null || listItems === void 0 ? void 0 : listItems[0]);
} else {
targetOption = listItems === null || listItems === void 0 ? void 0 : listItems[listItems.length - 1];
}
(_targetOption = targetOption) === null || _targetOption === void 0 || _targetOption.focus();
if (typeof ((_targetOption2 = targetOption) === null || _targetOption2 === void 0 ? void 0 : _targetOption2.scrollIntoView) === 'function') {
targetOption.scrollIntoView({
block: 'center'
});
}
setFocusedOption && setFocusedOption(targetOption);
};
var handleKeyDown$2 = function handleKeyDown(event, _focusedOption, setFocusedOption, setHighlightFirstItem, setHighlightLastItem, listRef, withSearch, setOpenPopover, triggerRef) {
var currentTarget = event.currentTarget;
switch (event.key) {
case 'ArrowUp':
event.preventDefault();
navigateOptions$1('up', currentTarget, setFocusedOption, listRef, withSearch);
break;
case 'ArrowDown':
event.preventDefault();
navigateOptions$1('down', currentTarget, setFocusedOption, listRef, withSearch);
break;
case 'Enter':
event.preventDefault();
handleEnterKey(event.currentTarget);
setHighlightLastItem === null || setHighlightLastItem === void 0 || setHighlightLastItem(false);
setHighlightFirstItem === null || setHighlightFirstItem === void 0 || setHighlightFirstItem(false);
break;
case ' ':
case 'Spacebar':
event.preventDefault();
handleEnterKey(event.currentTarget);
setHighlightLastItem === null || setHighlightLastItem === void 0 || setHighlightLastItem(false);
setHighlightFirstItem === null || setHighlightFirstItem === void 0 || setHighlightFirstItem(false);
break;
case 'Home':
event.preventDefault();
focusListItem$1('down', setFocusedOption, listRef);
break;
case 'End':
event.preventDefault();
focusListItem$1('up', setFocusedOption, listRef);
break;
case 'Tab':
setHighlightLastItem === null || setHighlightLastItem === void 0 || setHighlightLastItem(false);
setHighlightFirstItem === null || setHighlightFirstItem === void 0 || setHighlightFirstItem(false);
break;
case 'Escape':
event.preventDefault();
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(false);
if (triggerRef !== null && triggerRef !== void 0 && triggerRef.current) {
triggerRef.current.focus();
}
setFocusedOption === null || setFocusedOption === void 0 || setFocusedOption(undefined);
break;
}
};
var handleEnterKey = function handleEnterKey(focusedOption) {
focusedOption === null || focusedOption === void 0 || focusedOption.click();
};
var navigateOptions$1 = function navigateOptions(direction, eventTarget, setFocusedOption, listRef, withSearch) {
var listItems = listRef.current.querySelectorAll('[data-test="DesignSystem-Select-Option"]');
var index = Array.from(listItems).findIndex(function (item) {
return item == eventTarget;
});
if (withSearch && index <= 0 && direction === 'up' || withSearch && index === listItems.length - 1 && direction === 'down') {
var searchInput = listRef.current.querySelector('[data-test="DesignSystem-Select--Input"]');
if (searchInput) {
searchInput.focus();
setFocusedOption === null || setFocusedOption === void 0 || setFocusedOption(searchInput);
return;
}
}
if (index === -1) {
index = direction === 'up' ? listItems.length - 1 : 0;
} else {
index = direction === 'up' ? (index - 1 + listItems.length) % listItems.length : (index + 1) % listItems.length;
}
var targetOption = listItems[index];
if (targetOption) {
targetOption.focus();
setFocusedOption && setFocusedOption(targetOption);
if (typeof targetOption.scrollIntoView === 'function') {
targetOption.scrollIntoView({
block: 'center'
});
}
} else {
setFocusedOption && setFocusedOption(undefined);
}
};
var handleInputKeyDown = function handleInputKeyDown(event, listRef, setFocusedOption, setOpenPopover, triggerRef) {
var _listRef$current3, _triggerRef$current;
var listItems = (_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 ? void 0 : _listRef$current3.querySelectorAll('[data-test="DesignSystem-Select-Option"]');
switch (event.key) {
case 'ArrowUp':
event.preventDefault();
if (listItems !== null && listItems !== void 0 && listItems.length) {
var targetOption = listItems[listItems.length - 1];
targetOption.focus();
if (typeof targetOption.scrollIntoView === 'function') {
targetOption.scrollIntoView({
block: 'center'
});
}
setFocusedOption === null || setFocusedOption === void 0 || setFocusedOption(targetOption);
} else if (listRef.current) {
var focusables = getFocusableElements(listRef.current);
// Exclude the search input itself from the focusables we want to focus
var validFocusables = focusables.filter(function (f) {
return f !== event.target;
});
if (validFocusables.length > 0) {
var lastFocusable = validFocusables[validFocusables.length - 1];
lastFocusable.focus();
}
}
break;
case 'ArrowDown':
event.preventDefault();
if (listItems !== null && listItems !== void 0 && listItems.length) {
var _targetOption3 = listItems[0];
_targetOption3.focus();
if (typeof _targetOption3.scrollIntoView === 'function') {
_targetOption3.scrollIntoView({
block: 'center'
});
}
setFocusedOption === null || setFocusedOption === void 0 || setFocusedOption(_targetOption3);
} else if (listRef.current) {
var _focusables = getFocusableElements(listRef.current);
var currentIndex = _focusables.indexOf(event.target);
var nextFocusable = _focusables[currentIndex + 1];
if (nextFocusable) nextFocusable.focus();
}
break;
case 'Escape':
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(false);
triggerRef === null || triggerRef === void 0 || (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
setFocusedOption === null || setFocusedOption === void 0 || setFocusedOption(undefined);
break;
}
};
var LISTBOX_ITEM_SELECTOR = '[data-test="DesignSystem-Select-Option"]';
function isOptionFocusable(el) {
var inner = el.querySelector('[data-test="DesignSystem-Listbox-ItemWrapper"]');
return (inner === null || inner === void 0 ? void 0 : inner.getAttribute('data-disabled')) !== 'true' && el.getAttribute('disabled') === null;
}
/**
* Returns the index of the option that should have tabindex=0 (roving tabstop).
* If focusedOption is in the list, that option's index; otherwise the first selected
* option among focusable options, or the first focusable option; -1 if list is empty or no focusable.
*/
var getRovingIndex = function getRovingIndex(listRef, focusedOption) {
var _listRef$current4;
var list = listRef === null || listRef === void 0 || (_listRef$current4 = listRef.current) === null || _listRef$current4 === void 0 ? void 0 : _listRef$current4.querySelectorAll(LISTBOX_ITEM_SELECTOR);
if (!(list !== null && list !== void 0 && list.length)) return -1;
var items = Array.from(list);
if (focusedOption) {
var focusedIdx = items.indexOf(focusedOption);
if (focusedIdx !== -1 && isOptionFocusable(focusedOption)) return focusedIdx;
}
var focusableIndices = items.map(function (el, i) {
return isOptionFocusable(el) ? i : -1;
}).filter(function (i) {
return i !== -1;
});
if (focusableIndices.length === 0) return -1;
var firstSelectedIdx = items.findIndex(function (el) {
return isOptionFocusable(el) && el.getAttribute('aria-selected') === 'true';
});
if (firstSelectedIdx !== -1) return firstSelectedIdx;
return focusableIndices[0];
};
/**
* Focus the initial element when popover opens: search input if present, otherwise the option at roving index (first or first-selected).
* Returns the roving index for the list (or -1 if search was focused or list empty).
*/
var focusPopoverInitial = function focusPopoverInitial(listRef, setFocusedOption) {
var container = listRef === null || listRef === void 0 ? void 0 : listRef.current;
if (!container) return -1;
var searchInput = container.querySelector('[data-test="DesignSystem-Select--Input"]');
if (searchInput) {
searchInput.focus();
setFocusedOption === null || setFocusedOption === void 0 || setFocusedOption(searchInput);
if (typeof searchInput.scrollIntoView === 'function') {
searchInput.scrollIntoView({
block: 'center'
});
}
return -1;
}
var idx = getRovingIndex(listRef, undefined);
if (idx >= 0) {
var list = container.querySelectorAll(LISTBOX_ITEM_SELECTOR);
var option = list === null || list === void 0 ? void 0 : list[idx];
if (option) {
option.focus();
setFocusedOption === null || setFocusedOption === void 0 || setFocusedOption(option);
if (typeof option.scrollIntoView === 'function') {
option.scrollIntoView({
block: 'center'
});
}
}
}
return idx;
};
var utils = /*#__PURE__*/Object.freeze({
__proto__: null,
getNextFocusableAfterTrigger: getNextFocusableAfterTrigger,
getFocusableElements: getFocusableElements,
mapInitialValue: mapInitialValue,
elementExist: elementExist,
removeOrAddToList: removeOrAddToList,
computeValue: computeValue,
handleKeyDownTrigger: handleKeyDownTrigger,
focusListItem: focusListItem$1,
handleKeyDown: handleKeyDown$2,
handleEnterKey: handleEnterKey,
navigateOptions: navigateOptions$1,
handleInputKeyDown: handleInputKeyDown,
LISTBOX_ITEM_SELECTOR: LISTBOX_ITEM_SELECTOR,
getRovingIndex: getRovingIndex,
focusPopoverInitial: focusPopoverInitial
});
var Combobox = function Combobox(props) {
var children = props.children,
onChange = props.onChange,
multiSelect = props.multiSelect,
className = props.className,
maxHeight = props.maxHeight,
minHeight = props.minHeight,
width = props.width,
value = props.value,
placeholder = props.placeholder,
disabled = props.disabled,
error = props.error,
onBlur = props.onBlur,
onFocus = props.onFocus,
onClear = props.onClear,
icon = props.icon,
iconType = props.iconType,
size = props.size,
chipValue = props.chipValue,
clearButton = props.clearButton,
onSearch = props.onSearch,
onKeyDown = props.onKeyDown,
onKeyUp = props.onKeyUp,
computeStyles = props.computeStyles,
ariaLabel = props['aria-label'],
ariaLabelledBy = props['aria-labelledby'],
ariaDescribedBy = props['aria-describedby'],
ariaErrormessage = props['aria-errormessage'];
var _React$useState = React.useState(),
_React$useState2 = _slicedToArray(_React$useState, 2),
popoverStyle = _React$useState2[0],
setPopoverStyle = _React$useState2[1];
var _React$useState3 = React.useState({}),
_React$useState4 = _slicedToArray(_React$useState3, 2),
wrapperStyle = _React$useState4[0],
setWrapperStyle = _React$useState4[1];
var triggerRef = /*#__PURE__*/React.createRef();
var listRef = /*#__PURE__*/React.createRef();
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
openPopover = _React$useState6[0],
setOpenPopover = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
isOptionSelected = _React$useState8[0],
setIsOptionSelected = _React$useState8[1];
var _React$useState9 = React.useState(),
_React$useState10 = _slicedToArray(_React$useState9, 2),
focusedOption = _React$useState10[0],
setFocusedOption = _React$useState10[1];
var _React$useState11 = React.useState(value || {
label: '',
value: ''
}),
_React$useState12 = _slicedToArray(_React$useState11, 2),
inputValue = _React$useState12[0],
setInputValue = _React$useState12[1];
var _React$useState13 = React.useState(chipValue),
_React$useState14 = _slicedToArray(_React$useState13, 2),
chipInputValue = _React$useState14[0],
setChipInputValue = _React$useState14[1];
var _React$useState15 = React.useState(''),
_React$useState16 = _slicedToArray(_React$useState15, 2),
chipInputText = _React$useState16[0],
setChipInputText = _React$useState16[1];
var _React$useState17 = React.useState(false),
_React$useState18 = _slicedToArray(_React$useState17, 2),
highlightFirstItem = _React$useState18[0],
setHighlightFirstItem = _React$useState18[1];
var _React$useState19 = React.useState(false),
_React$useState20 = _slicedToArray(_React$useState19, 2),
highlightLastItem = _React$useState20[0],
setHighlightLastItem = _React$useState20[1];
var inputTriggerRef = React.useRef();
var isInitialRender = React.useRef(true);
var popoverId = "DesignSystem-Combobox--Popover-".concat(uidGenerator());
var defaultPopoverStyle = {
fn: function fn(data) {
return _objectSpread2(_objectSpread2({}, data), {}, {
styles: _objectSpread2(_objectSpread2({}, data.styles), {}, {
position: 'fixed'
})
});
}
};
var popoverComputeStyle = computeStyles !== null && computeStyles !== void 0 ? computeStyles : defaultPopoverStyle;
React.useEffect(function () {
var _triggerRef$current;
var popperWidth = (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.clientWidth;
var popperWrapperStyle = {
width: width || popperWidth
};
var wrapperStyle = {
maxHeight: maxHeight || 'var(--spacing-640)',
minHeight: minHeight,
overflowY: 'auto',
boxSizing: 'border-box'
};
setWrapperStyle(wrapperStyle);
setPopoverStyle(popperWrapperStyle);
}, []);
React.useEffect(function () {
if (isOptionSelected) {
multiSelect ? setOpenPopover(true) : setOpenPopover(false);
setIsOptionSelected(false);
}
// Skip onChange on initial render to prevent unwanted calls
if (isInitialRender.current) {
isInitialRender.current = false;
return;
}
var value = multiSelect ? chipInputValue : inputValue;
onChange && !isOptionSelected && onChange(value);
}, [inputValue, chipInputValue]);
React.useEffect(function () {
if (highlightFirstItem && openPopover) {
requestAnimationFrame(function () {
focusListItem$2('down', setFocusedOption, listRef);
setHighlightFirstItem(false);
});
}
}, [highlightFirstItem, openPopover]);
React.useEffect(function () {
if (highlightLastItem && openPopover) {
requestAnimationFrame(function () {
focusListItem$2('up', setFocusedOption, listRef);
setHighlightLastItem(false);
});
}
}, [highlightLastItem, openPopover]);
React.useEffect(function () {
if (!openPopover) {
setHighlightFirstItem(false);
setHighlightLastItem(false);
}
}, [openPopover]);
React.useEffect(function () {
onSearch && onSearch(chipInputText);
}, [chipInputText]);
// Tab / Shift+Tab: intercept in capture phase on the list root so we still close and return
// focus when the active element is a nested node (inner row, etc.) that might not bubble
// cleanly—especially with the list portaled to the end of `document.body`.
React.useLayoutEffect(function () {
if (!openPopover || disabled) return;
var el = listRef.current;
if (!el) return;
var onTabCapture = function onTabCapture(event) {
if (event.key !== 'Tab') return;
if (!el.contains(event.target)) return;
event.preventDefault();
setOpenPopover(false);
setFocusedOption(undefined);
if (inputTriggerRef !== null && inputTriggerRef !== void 0 && inputTriggerRef.current) {
var next = getNextFocusableAfterTrigger(inputTriggerRef.current, event.shiftKey, el);
if (next) {
next.focus({
preventScroll: true
});
} else {
var _inputTriggerRef$curr;
(_inputTriggerRef$curr = inputTriggerRef.current) === null || _inputTriggerRef$curr === void 0 || _inputTriggerRef$curr.focus();
}
}
};
el.addEventListener('keydown', onTabCapture, true);
return function () {
return el.removeEventListener('keydown', onTabCapture, true);
};
}, [openPopover, disabled]);
var previousOpen = React.useRef(openPopover);
React.useEffect(function () {
if (previousOpen.current && !openPopover) {
if (document.activeElement === document.body) {
var _inputTriggerRef$curr2;
(_inputTriggerRef$curr2 = inputTriggerRef.current) === null || _inputTriggerRef$curr2 === void 0 || _inputTriggerRef$curr2.focus({
preventScroll: true
});
}
}
previousOpen.current = openPopover;
}, [openPopover]);
var onOptionClick = function onOptionClick(option) {
setIsOptionSelected(true);
if (!multiSelect) {
setInputValue(option);
onChange && onChange(option);
} else {
var chipList = chipInputValue ? [].concat(_toConsumableArray(chipInputValue), [option]) : [option];
setChipInputValue(chipList);
onChange && onChange(chipList);
}
};
var outsideClickHandler = function outsideClickHandler() {
!multiSelect && setOpenPopover(false);
};
var onToggleHandler = function onToggleHandler(open) {
open ? setOpenPopover(true) : setOpenPopover(false);
};
var triggerProps = {
value: value,
placeholder: placeholder,
disabled: disabled,
error: error,
onBlur: onBlur,
onFocus: onFocus,
onClear: onClear,
icon: icon,
iconType: iconType,
size: size,
multiSelect: multiSelect,
chipValue: chipValue,
clearButton: clearButton,
onKeyDown: onKeyDown,
onKeyUp: onKeyUp,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledBy,
'aria-describedby': ariaDescribedBy,
'aria-errormessage': ariaErrormessage
};
var contextProp = {
inputValue: inputValue,
setInputValue: setInputValue,
onOptionClick: onOptionClick,
openPopover: openPopover,
setOpenPopover: setOpenPopover,
isOptionSelected: isOptionSelected,
setIsOptionSelected: setIsOptionSelected,
chipInputValue: chipInputValue,
setChipInputValue: setChipInputValue,
focusedOption: focusedOption,
setFocusedOption: setFocusedOption,
chipInputText: chipInputText,
setChipInputText: setChipInputText,
inputTriggerRef: inputTriggerRef,
setHighlightFirstItem: setHighlightFirstItem,
setHighlightLastItem: setHighlightLastItem,
multiSelect: multiSelect,
listRef: listRef,
onSearch: onSearch,
popoverId: popoverId
};
return /*#__PURE__*/React.createElement(ComboboxContext.Provider, {
value: contextProp
}, /*#__PURE__*/React.createElement("div", {
ref: triggerRef,
className: className
}, /*#__PURE__*/React.createElement(OutsideClick, {
onOutsideClick: outsideClickHandler
}, /*#__PURE__*/React.createElement(Popover, {
open: openPopover && !disabled,
triggerClass: "d-block",
customStyle: popoverStyle,
onToggle: onToggleHandler,
trigger: /*#__PURE__*/React.createElement(ComboboxTrigger, triggerProps),
computeStyles: popoverComputeStyle
}, /*#__PURE__*/React.createElement("div", {
style: wrapperStyle,
ref: listRef
}, children && typeof children === 'function' ? children(contextProp) : children)))));
};
Combobox.List = ComboboxList;
Combobox.Option = ComboboxOption;
var SelectContext = /*#__PURE__*/React.createContext({});
var css_248z$a = ".select-module-Select-input-E3-1I-4-30-3 {\n min-width: unset !important;\n background: transparent;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n height: 36px;\n}\n\n.select-module-Select-input-E3-1I-4-30-3,\n.select-module-Select-input-E3-1I-4-30-3:focus-within {\n border: unset !important;\n box-shadow: none !important;\n outline: none !important;\n}\n\n.select-module-Select-input-E3-1I-4-30-3:hover {\n background-color: var(--secondary-lightest);\n}\n\n.select-module-Select-trigger-PT5nA-4-30-3 {\n width: 100%;\n justify-content: space-between;\n padding-top: unset;\n padding-bottom: unset;\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.select-module-Select-trigger-PT5nA-4-30-3:has(.select-module-Select-trigger-control-CzpBM-4-30-3:focus-visible) {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.select-module-Select-trigger--disabled-YdpUd-4-30-3 {\n pointer-events: none;\n color: var(--text-disabled);\n}\n\n.select-module-Select-trigger-control-CzpBM-4-30-3 {\n display: flex;\n align-items: center;\n flex: 1;\n min-width: 0;\n height: 100%;\n background: transparent;\n border: 0;\n padding: 0;\n cursor: pointer;\n color: inherit;\n font: inherit;\n}\n\n.select-module-Select-trigger-control-CzpBM-4-30-3:focus-visible {\n outline: none;\n}\n\n.select-module-Select-trigger--filled-mAjdO-4-30-3 {\n background: var(--secondary-light);\n color: var(--text);\n}\n\n.select-module-Select-trigger--filled-mAjdO-4-30-3.select-module-Select-trigger--disabled-YdpUd-4-30-3 {\n background: var(--secondary-lighter);\n color: var(--text-disabled);\n}\n\n.select-module-Select-trigger--filled-mAjdO-4-30-3:active,\n.select-module-Select-trigger--filledOpen-JwFDP-4-30-3 {\n background-color: var(--secondary-dark) !important;\n color: var(--text) !important;\n animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);\n animation-duration: 120ms;\n}\n\n.select-module-Select-trigger--filled-mAjdO-4-30-3:hover {\n background: var(--secondary);\n color: var(--text);\n}\n\n.select-module-Select-trigger--filled-mAjdO-4-30-3:has(.select-module-Select-trigger-control-CzpBM-4-30-3:focus-visible) {\n background-color: var(--secondary-light);\n}\n\n/* styleType Outlined */\n\n.select-module-Select-trigger--outlined-EqpYO-4-30-3 {\n background: var(--white);\n color: var(--text);\n border: var(--border);\n}\n\n.select-module-Select-trigger--outlined-EqpYO-4-30-3:hover {\n background: var(--secondary-lighter);\n color: var(--inverse);\n border: var(--border-width-2-5) solid var(--secondary-dark);\n}\n\n.select-module-Select-trigger--outlined-EqpYO-4-30-3:active,\n.select-module-Select-trigger--outlinedOpen-Qpz-c-4-30-3 {\n color: var(--inverse) !important;\n background: var(--secondary) !important;\n border: var(--border-width-2-5) solid var(--inverse-lightest) !important;\n animation-timing-function: var(--entrance-productive-curve);\n animation-duration: var(--duration--fast-02);\n}\n\n.select-module-Select-trigger--outlined-EqpYO-4-30-3.select-module-Select-trigger--disabled-YdpUd-4-30-3 {\n color: var(--inverse-lightest) !important;\n background: var(--secondary-lightest) !important;\n border: var(--border-width-2-5) solid var(--secondary-lighter) !important;\n}\n\n.select-module-Select-inputWrapper-LT8pe-4-30-3 {\n border-bottom: var(--border-width-2-5) solid var(--secondary-dark);\n}\n\n.select-module-Select-inputWrapper-LT8pe-4-30-3:focus-within {\n border-bottom: var(--border-width-2-5) solid var(--primary);\n}\n\n.select-module-Select-trigger-wrapper-NMxls-4-30-3 {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n overflow: hidden;\n}\n\n.select-module-Select-trigger--small-v-qam-4-30-3 {\n height: var(--spacing-60);\n padding-right: var(--spacing-10);\n padding-left: var(--spacing-20);\n}\n\n.select-module-Select-trigger--text-7nEKU-4-30-3,\n.select-module-Select-option--text-WfcEP-4-30-3 {\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n margin: 0;\n font-size: var(--font-size);\n line-height: var(--font-height);\n width: 100%;\n}\n\n.select-module-Select-trigger--regular-Dx-fp-4-30-3 {\n height: var(--spacing-80);\n padding-right: var(--spacing-20);\n padding-left: var(--spacing-30);\n}\n\n.select-module-Select-trigger--filledPlaceholder-XA5t6-4-30-3 {\n color: var(--text);\n}\n\n.select-module-Select-trigger--outlinedPlaceholder-KskN9-4-30-3 {\n color: var(--inverse-lighter);\n}\n\n.select-module-Select-trigger--icon-eX-q0-4-30-3 {\n padding-left: var(--spacing-20);\n}\n\n.select-module-Select-buttonWrapper-Dm9cQ-4-30-3 {\n display: flex;\n justify-content: flex-end;\n padding-top: var(--spacing-20);\n padding-right: var(--spacing-20);\n padding-bottom: var(--spacing-20);\n border-top: var(--border-width-2-5) solid var(--secondary-light);\n}\n\n.select-module-Select-crossButton-RUlwA-4-30-3 {\n display: flex;\n flex-shrink: 0;\n overflow: hidden;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n cursor: pointer;\n border-radius: var(--border-radius-full);\n padding: var(--spacing-05);\n border: none;\n background: transparent;\n}\n\n.select-module-Select-crossButton-RUlwA-4-30-3:focus-visible {\n outline: var(--spacing-05) solid var(--primary-focus);\n}\n\n.select-module-Select-crossButton-RUlwA-4-30-3:hover {\n background-color: var(--secondary);\n}\n\n.select-module-Select-crossButton-RUlwA-4-30-3:active {\n background-color: var(--secondary-dark);\n}\n\n.select-module-Select-option-HDep4-4-30-3 {\n display: flex;\n align-items: flex-start;\n width: 100%;\n}\n\n.select-module-Select-trigger--textSmall-jlpss-4-30-3 {\n font-size: var(--font-size-s);\n line-height: var(--font-height-s);\n font-weight: var(--font-weight-medium);\n}\n\n.select-module-Select-option--tight-vVqxV-4-30-3 {\n padding: var(--spacing-10) var(--spacing-20);\n}\n\n.select-module-Select-input--tiny-mldAL-4-30-3 {\n padding-right: var(--spacing-10);\n height: var(--spacing-60);\n}\n\n.select-module-Select-option--textTight-soE6b-4-30-3 {\n font-size: var(--font-size-s);\n line-height: var(--font-height-s);\n font-weight: var(--font-weight-medium);\n}\n\n.select-module-Select-trigger--error-B4sEa-4-30-3 {\n border: var(--border-width-2-5) solid var(--alert) !important;\n}\n\n@media (forced-colors: active) {\n .select-module-Select-input-E3-1I-4-30-3:focus-within {\n outline: var(--border-width-05) solid Highlight !important;\n outline-offset: var(--spacing-05);\n }\n}\n";
var styles$a = {"Select-input":"select-module-Select-input-E3-1I-4-30-3","Select-trigger":"select-module-Select-trigger-PT5nA-4-30-3","Select-trigger-control":"select-module-Select-trigger-control-CzpBM-4-30-3","Select-trigger--disabled":"select-module-Select-trigger--disabled-YdpUd-4-30-3","Select-trigger--filled":"select-module-Select-trigger--filled-mAjdO-4-30-3","Select-trigger--filledOpen":"select-module-Select-trigger--filledOpen-JwFDP-4-30-3","Select-trigger--outlined":"select-module-Select-trigger--outlined-EqpYO-4-30-3","Select-trigger--outlinedOpen":"select-module-Select-trigger--outlinedOpen-Qpz-c-4-30-3","Select-inputWrapper":"select-module-Select-inputWrapper-LT8pe-4-30-3","Select-trigger-wrapper":"select-module-Select-trigger-wrapper-NMxls-4-30-3","Select-trigger--small":"select-module-Select-trigger--small-v-qam-4-30-3","Select-trigger--text":"select-module-Select-trigger--text-7nEKU-4-30-3","Select-option--text":"select-module-Select-option--text-WfcEP-4-30-3","Select-trigger--regular":"select-module-Select-trigger--regular-Dx-fp-4-30-3","Select-trigger--filledPlaceholder":"select-module-Select-trigger--filledPlaceholder-XA5t6-4-30-3","Select-trigger--outlinedPlaceholder":"select-module-Select-trigger--outlinedPlaceholder-KskN9-4-30-3","Select-trigger--icon":"select-module-Select-trigger--icon-eX-q0-4-30-3","Select-buttonWrapper":"select-module-Select-buttonWrapper-Dm9cQ-4-30-3","Select-crossButton":"select-module-Select-crossButton-RUlwA-4-30-3","Select-option":"select-module-Select-option-HDep4-4-30-3","Select-trigger--textSmall":"select-module-Select-trigger--textSmall-jlpss-4-30-3","Select-option--tight":"select-module-Select-option--tight-vVqxV-4-30-3","Select-input--tiny":"select-module-Select-input--tiny-mldAL-4-30-3","Select-option--textTight":"select-module-Select-option--textTight-soE6b-4-30-3","Select-trigger--error":"select-module-Select-trigger--error-B4sEa-4-30-3"};
styleInject(css_248z$a);
var _excluded$u = ["children", "option", "checkedState", "onClick", "withCheckbox", "disabled", "index", "aria-label", "aria-labelledby"];
var SelectOption = function SelectOption(props) {
var children = props.children,
option = props.option,
checkedState = props.checkedState,
onClick = props.onClick,
_props$withCheckbox = props.withCheckbox,
withCheckbox = _props$withCheckbox === void 0 ? true : _props$withCheckbox,
disabled = props.disabled,
index = props.index,
ariaLabel = props['aria-label'],
ariaLabelledBy = props['aria-labelledby'],
rest = _objectWithoutProperties(props, _excluded$u);
var contextProp = React.useContext(SelectContext);
var onOptionClick = contextProp.onOptionClick,
selectValue = contextProp.selectValue,
setSelectValue = contextProp.setSelectValue,
multiSelect = contextProp.multiSelect,
setIsOptionSelected = contextProp.setIsOptionSelected,
focusedOption = contextProp.focusedOption,
setFocusedOption = contextProp.setFocusedOption,
setHighlightFirstItem = contextProp.setHighlightFirstItem,
setHighlightLastItem = contextProp.setHighlightLastItem,
listRef = contextProp.listRef,
withSearch = contextProp.withSearch,
setOpenPopover = contextProp.setOpenPopover,
triggerRef = contextProp.triggerRef,
size = contextProp.size,
rovingIndex = contextProp.rovingIndex,
listboxId = contextProp.listboxId;
var isRovingTabstop = typeof index === 'number' && rovingIndex === index;
var onClickHandler = function onClickHandler() {
if (disabled) return;
if (onClick) {
onClick(option);
return;
}
var newList = multiSelect && Array.isArray(selectValue) ? removeOrAddToList(option, selectValue) : option;
setIsOptionSelected === null || setIsOptionSelected === void 0 || setIsOptionSelected(Array.isArray(newList) ? newList.length !== 0 : true);
setSelectValue === null || setSelectValue === void 0 || setSelectValue(newList);
onOptionClick === null || onOptionClick === void 0 || onOptionClick(newList);
};
var checked = checkedState === 'checked' || elementExist(option, selectValue) !== -1;
var indeterminate = checkedState === 'indeterminate';
var optionItemClass = classnames(_defineProperty$1({}, styles$a['Select-option'], true));
var textClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$a['Select-option--text'], true), styles$a['Select-option--textTight'], size === 'tight'), 'pt-2', multiSelect));
var SelectOptionClass = classnames(_defineProperty$1({}, styles$a['Select-option--tight'], size === 'tight'));
var onKeyDownHandler = function onKeyDownHandler(event) {
handleKeyDown$2(event, focusedOption, setFocusedOption, setHighlightFirstItem, setHighlightLastItem, listRef, withSearch, setOpenPopover, triggerRef);
};
var idSuffix = typeof index === 'number' ? String(index) : uidGenerator();
var idPrefix = listboxId ? "".concat(listboxId, "-") : '';
var optionLabelId = "".concat(idPrefix, "DesignSystem-SelectOption-label-").concat(idSuffix);
var checkboxInputId = "".concat(idPrefix, "DesignSystem-SelectOption-checkbox-").concat(idSuffix);
var childCount = React.Children.count(children);
var optionLabelString = typeof option.label === 'string' ? option.label.trim() : '';
var checkboxFallbackAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : optionLabelString || undefined;
var associateCheckboxWithOptionLabel = childCount > 0;
// Naming precedence: explicit aria-labelledby > explicit aria-label > generated labelledby from children > option.label
var resolvedOptionLabelledBy = ariaLabelledBy || (!ariaLabel && childCount > 0 ? optionLabelId : undefined);
var resolvedOptionAriaLabel = resolvedOptionLabelledBy ? undefined : ariaLabel || optionLabelString || undefined;
return /*#__PURE__*/React.createElement(Listbox.Item, _extends$2({
role: "option",
onClick: onClickHandler,
"aria-selected": checked,
"aria-labelledby": resolvedOptionLabelledBy,
"aria-label": resolvedOptionAriaLabel,
onKeyDown: function onKeyDown(event) {
return onKeyDownHandler(event);
},
onFocus: function onFocus(e) {
return setFocusedOption === null || setFocusedOption === void 0 ? void 0 : setFocusedOption(e.currentTarget);
},
selected: checked,
tabIndex: isRovingTabstop ? 0 : -1,
disabled: disabled,
"data-test": "DesignSystem-Select-Option",
className: SelectOptionClass
}, rest), /*#__PURE__*/React.createElement("div", {
className: optionItemClass
}, multiSelect && withCheckbox && /*#__PURE__*/React.createElement(Checkbox, _extends$2({
id: checkboxInputId,
tabIndex: -1,
"aria-checked": indeterminate ? 'mixed' : checked,
checked: checked,
indeterminate: indeterminate
}, associateCheckboxWithOptionLabel ? {
'aria-labelledby': optionLabelId
} : {
'aria-label': checkboxFallbackAriaLabel
})), /*#__PURE__*/React.createElement("div", {
id: optionLabelId,
className: textClass
}, children)));
};
SelectOption.defaultProps = {
withCheckbox: true
};
var _excluded$t = ["children", "size"];
var SelectList = function SelectList(props) {
var contextProp = React.useContext(SelectContext);
var withSearch = contextProp.withSearch,
minHeight = contextProp.minHeight,
maxHeight = contextProp.maxHeight,
multiSelect = contextProp.multiSelect,
listboxId = contextProp.listboxId;
var children = props.children,
size = props.size,
rest = _objectWithoutProperties(props, _excluded$t);
var searchInputHeight = 33;
var optionIndex = 0;
var _injectIndexToOptions = function injectIndexToOptions(nodes) {
return React.Children.map(nodes, function (child) {
if (! /*#__PURE__*/React.isValidElement(child)) return child;
// Recursively traverse fragments
if (child.type === React.Fragment) {
return /*#__PURE__*/React.cloneElement(child, child.props, _injectIndexToOptions(child.props.children));
}
// Inject sequential index into actual SelectOptions
if (child.type === SelectOption) {
return /*#__PURE__*/React.cloneElement(child, {
index: optionIndex++
});
}
return child;
});
};
var childrenWithIndex = _injectIndexToOptions(children);
var wrapperStyle = {
maxHeight: withSearch ? maxHeight - searchInputHeight : maxHeight,
overflowY: 'auto',
minHeight: minHeight
};
var updatedContextProp = _objectSpread2(_objectSpread2({}, contextProp), {}, {
size: size
});
return /*#__PURE__*/React.createElement(SelectContext.Provider, {
value: updatedContextProp
}, /*#__PURE__*/React.createElement(Listbox, _extends$2({
role: "listbox",
id: listboxId,
style: wrapperStyle,
"aria-label": props['aria-label'] || 'Options item list',
"aria-multiselectable": multiSelect,
className: "my-3",
size: size
}, rest, {
customFocusManagement: true
}), childrenWithIndex));
};
SelectList.defaultProps = {
type: 'option',
showDivider: false,
size: 'compressed',
tagName: 'ul'
};
var _excluded$s = ["triggerSize", "aria-label", "aria-labelledby", "placeholder", "withClearButton", "clearButtonAriaLabel", "icon", "disabled", "inlineLabel", "iconType", "onClear", "setLabel", "minWidth", "maxWidth", "className", "aria-invalid", "aria-controls"];
var SelectTrigger = function SelectTrigger(props) {
var _props$triggerSize = props.triggerSize,
triggerSize = _props$triggerSize === void 0 ? 'regular' : _props$triggerSize,
ariaLabel = props['aria-label'],
ariaLabelledBy = props['aria-labelledby'],
placeholder = props.placeholder,
withClearButton = props.withClearButton,
clearButtonAriaLabel = props.clearButtonAriaLabel,
icon = props.icon,
disabled = props.disabled,
inlineLabel = props.inlineLabel,
iconType = props.iconType,
onClear = props.onClear,
setLabel = props.setLabel,
minWidth = props.minWidth,
maxWidth = props.maxWidth,
className = props.className;
props['aria-invalid'];
var ariaControls = props['aria-controls'],
rest = _objectWithoutProperties(props, _excluded$s);
var contextProp = React.useContext(SelectContext);
var elementRef = React.useRef(null);
var openPopover = contextProp.openPopover,
selectValue = contextProp.selectValue,
setSelectValue = contextProp.setSelectValue,
isOptionSelected = contextProp.isOptionSelected,
setIsOptionSelected = contextProp.setIsOptionSelected,
multiSelect = contextProp.multiSelect,
setOpenPopover = contextProp.setOpenPopover,
setHighlightFirstItem = contextProp.setHighlightFirstItem,
setHighlightLastItem = contextProp.setHighlightLastItem,
triggerRef = contextProp.triggerRef,
triggerBoxRef = contextProp.triggerBoxRef,
width = contextProp.width,
styleType = contextProp.styleType,
error = contextProp.error;
var _Tooltip$useAutoToolt = Tooltip.useAutoTooltip(),
detectTruncation = _Tooltip$useAutoToolt.detectTruncation;
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
isValueTruncated = _React$useState2[0],
setIsValueTruncated = _React$useState2[1];
var isDisabled = Boolean(disabled);
var useAriaDisabled = Boolean(isDisabled && isValueTruncated);
var nativeDisabled = useAriaDisabled ? undefined : disabled;
var buttonDisabled = disabled ? 'disabled' : 'default';
var trimmedPlaceholder = placeholder === null || placeholder === void 0 ? void 0 : placeholder.trim();
var displayValue = computeValue(multiSelect, selectValue, setLabel);
var value = isOptionSelected && displayValue.length > 0 ? displayValue : trimmedPlaceholder;
React.useEffect(function () {
setIsValueTruncated(detectTruncation(elementRef));
}, [detectTruncation, value]);
var iconName = openPopover ? 'keyboard_arrow_up' : 'keyboard_arrow_down';
var triggerStyle = _objectSpread2(_objectSpread2({
width: width
}, minWidth !== undefined && {
minWidth: minWidth
}), maxWidth !== undefined && {
maxWidth: maxWidth
});
var onClearHandler = function onClearHandler(event) {
var _triggerRef$current;
event.stopPropagation();
var emptyValue = multiSelect ? [] : {
label: '',
value: ''
};
setSelectValue === null || setSelectValue === void 0 || setSelectValue(emptyValue);
setIsOptionSelected === null || setIsOptionSelected === void 0 || setIsOptionSelected(false);
if (onClear) {
onClear(event);
}
triggerRef === null || triggerRef === void 0 || (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus({
preventScroll: true
});
};
var buttonClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, buttonStyles['Button'], true), styles$a['Select-trigger'], true), styles$a["Select-trigger--".concat(triggerSize)], triggerSize), styles$a['Select-trigger--placeholder'], !isOptionSelected), styles$a["Select-trigger--".concat(styleType, "Placeholder")], !isOptionSelected && !!styleType), styles$a['Select-trigger--icon'], icon), styles$a["Select-trigger--".concat(styleType, "Open")], openPopover && !!styleType), styles$a["Select-trigger--".concat(styleType)], !!styleType), styles$a['Select-trigger--error'], !!error), styles$a['Select-trigger--disabled'], !!disabled), className);
var textClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, textStyles['Text'], true), textStyles['Text--regular'], true), styles$a['Select-trigger--text'], true), styles$a['Select-trigger--textSmall'], triggerSize === 'small'));
var triggerClass = classnames([styles$a['Select-trigger-wrapper']], 'ellipsis--noWrap');
var inlineLabelClass = classnames({
'white-space-nowrap': true
});
var iconClass = classnames('align-items-center', 'mr-2', 'ml-3', 'p-3-5', styles$a['Select-crossButton']);
var iconSize = triggerSize === 'small' ? 14 : 16;
var triggerTextSize = triggerSize === 'small' ? 'small' : 'regular';
// Prefer explicit naming; otherwise mirror the visible placeholder so AccName matches trigger text (2.5.3).
var resolvedAriaLabel = ariaLabelledBy ? undefined : ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : trimmedPlaceholder;
var resolvedClearButtonAriaLabel = clearButtonAriaLabel || (ariaLabel ? "Clear ".concat(ariaLabel) : undefined) || (trimmedPlaceholder ? "Clear ".concat(trimmedPlaceholder) : undefined) || 'Clear selection';
return /*#__PURE__*/React.createElement(Tooltip, {
showOnTruncation: true,
showTooltip: !openPopover,
tooltip: value,
elementRef: elementRef,
triggerClass: "w-100"
}, /*#__PURE__*/React.createElement("div", {
ref: triggerBoxRef,
className: buttonClass,
style: triggerStyle,
"data-test": "DesignSystem-Select-triggerBox"
}, /*#__PURE__*/React.createElement("button", _extends$2({
ref: triggerRef,
onKeyDown: function onKeyDown(event) {
if (useAriaDisabled) {
if (event.key === 'Enter' || isSpaceKey(event)) {
event.preventDefault();
event.stopPropagation();
}
return;
}
if (isDisabled) return;
handleKeyDownTrigger(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
},
type: "button",
className: styles$a['Select-trigger-control'],
disabled: nativeDisabled,
"aria-disabled": useAriaDisabled ? true : undefined,
tabIndex: 0,
role: "combobox",
"aria-controls": ariaControls,
"aria-expanded": openPopover,
"aria-haspopup": "listbox",
"aria-label": resolvedAriaLabel,
"aria-labelledby": ariaLabelledBy,
"data-test": "DesignSystem-Select-trigger"
}, rest), /*#__PURE__*/React.createElement("div", {
className: triggerClass
}, inlineLabel && /*#__PURE__*/React.createElement(Text$1, {
appearance: "subtle",
className: "".concat(inlineLabelClass, " mr-4"),
size: triggerTextSize
}, "".concat(inlineLabel.trim().charAt(0).toUpperCase()).concat(inlineLabel.trim().slice(1))), icon && !inlineLabel && /*#__PURE__*/React.createElement(Icon, {
appearance: buttonDisabled,
className: "d-flex align-items-center mr-4",
name: icon,
type: iconType,
size: iconSize,
"aria-hidden": true
}), value && /*#__PURE__*/React.createElement("span", {
ref: elementRef,
className: textClass
}, value))), isOptionSelected && withClearButton && /*#__PURE__*/React.createElement("button", {
type: "button",
className: iconClass,
onClick: onClearHandler,
onKeyDown: function onKeyDown(e) {
return e.stopPropagation();
},
disabled: disabled,
"aria-label": resolvedClearButtonAriaLabel,
"data-test": "DesignSystem-Select--closeIcon"
}, /*#__PURE__*/React.createElement(Icon, {
appearance: buttonDisabled,
size: 12,
name: "close",
type: iconType,
"aria-hidden": true
})), /*#__PURE__*/React.createElement(Icon, {
appearance: buttonDisabled,
name: iconName,
type: iconType,
"aria-hidden": true
})));
};
/* eslint-enable jsx-a11y/role-supports-aria-props */
SelectTrigger.defaultProps = {
triggerSize: 'regular',
placeholder: 'Select',
withClearButton: true
};
var _excluded$r = ["onChange", "onClear", "size"];
var SearchInput = function SearchInput(props) {
var contextProp = React.useContext(SelectContext);
var setWithSearch = contextProp.setWithSearch,
maxHeight = contextProp.maxHeight,
listRef = contextProp.listRef,
setFocusedOption = contextProp.setFocusedOption,
setOpenPopover = contextProp.setOpenPopover,
triggerRef = contextProp.triggerRef;
var onChange = props.onChange,
onClear = props.onClear,
_props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size,
rest = _objectWithoutProperties(props, _excluded$r);
React.useEffect(function () {
setWithSearch === null || setWithSearch === void 0 || setWithSearch(true);
}, [maxHeight]);
var searchHandler = function searchHandler(event) {
if (onChange) onChange(event.target.value);
};
var searchClearHandler = function searchClearHandler(event) {
if (onClear) onClear(event);
};
var inputClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$a['Select-input'], true), styles$a['Select-input--tiny'], size === 'tiny'));
return /*#__PURE__*/React.createElement("div", {
className: styles$a['Select-inputWrapper']
}, /*#__PURE__*/React.createElement(Input, _extends$2({}, rest, {
icon: 'search',
size: size,
onKeyDown: function onKeyDown(event) {
return handleInputKeyDown(event, listRef, setFocusedOption, setOpenPopover, triggerRef);
},
autoFocus: true,
onChange: searchHandler,
onClear: searchClearHandler,
autoComplete: 'off',
"aria-label": "Search",
"aria-haspopup": "listbox",
className: inputClass,
"data-test": "DesignSystem-Select--Input"
})));
};
var _excluded$q = ["title", "description", "children"];
var SelectEmptyTemplate = function SelectEmptyTemplate(props) {
var contextProp = React.useContext(SelectContext);
var maxHeight = contextProp.maxHeight,
withSearch = contextProp.withSearch;
var title = props.title,
description = props.description,
children = props.children,
rest = _objectWithoutProperties(props, _excluded$q);
var searchInputHeight = 33;
var wrapperStyle = {
minHeight: withSearch ? maxHeight - searchInputHeight : maxHeight
};
var titleId = React.useMemo(function () {
return "empty-title-".concat(uidGenerator());
}, []);
var descId = React.useMemo(function () {
return "empty-desc-".concat(uidGenerator());
}, []);
return /*#__PURE__*/React.createElement("div", _extends$2({
className: "px-7 d-flex justify-content-center align-items-center",
style: wrapperStyle,
"data-test": "DesignSystem-Select-EmptyState--wrapper",
"aria-live": "polite",
role: "status"
}, rest), /*#__PURE__*/React.createElement("div", {
"aria-labelledby": title ? titleId : undefined,
"aria-describedby": description ? descId : undefined,
className: "d-flex flex-column justify-content-center align-items-center"
}, title && /*#__PURE__*/React.createElement(Text$1, {
id: titleId,
className: "text-align-center mb-3",
weight: "strong"
}, title), description && /*#__PURE__*/React.createElement(Text$1, {
id: descId,
className: "text-align-center mb-6",
weight: "medium",
size: "small",
appearance: "subtle"
}, description), children && children));
};
var _excluded$p = ["children"];
var SelectFooter = function SelectFooter(props) {
var children = props.children,
rest = _objectWithoutProperties(props, _excluded$p);
return /*#__PURE__*/React.createElement("div", _extends$2({
className: styles$a['Select-buttonWrapper']
}, rest), children);
};
function assignRef(ref, value) {
if (ref == null) return;
if (typeof ref === 'function') {
ref(value);
} else {
ref.current = value;
}
}
var Select = /*#__PURE__*/React.forwardRef(function (props, ref) {
var children = props.children,
onSelect = props.onSelect,
width = props.width,
maxHeight = props.maxHeight,
minHeight = props.minHeight,
value = props.value,
boundaryElement = props.boundaryElement,
appendToBody = props.appendToBody,
_props$multiSelect = props.multiSelect,
multiSelect = _props$multiSelect === void 0 ? false : _props$multiSelect,
onOutsideClick = props.onOutsideClick,
triggerOptions = props.triggerOptions,
popoverWidth = props.popoverWidth,
trigger = props.trigger,
onToggle = props.onToggle,
_props$styleType = props.styleType,
styleType = _props$styleType === void 0 ? 'filled' : _props$styleType,
_props$error = props.error,
error = _props$error === void 0 ? false : _props$error,
ariaLabelProp = props['aria-label'],
ariaLabelledByProp = props['aria-labelledby'],
ariaDescribedByProp = props['aria-describedby'],
ariaErrormessageProp = props['aria-errormessage'],
trapFocus = props.trapFocus;
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
openPopover = _React$useState2[0],
setOpenPopover = _React$useState2[1];
var mapValue = mapInitialValue(multiSelect, value);
var _React$useState3 = React.useState(mapValue),
_React$useState4 = _slicedToArray(_React$useState3, 2),
selectValue = _React$useState4[0],
setSelectValue = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
isOptionSelected = _React$useState6[0],
setIsOptionSelected = _React$useState6[1];
var triggerRef = React.useRef(null);
var triggerBoxRef = React.useRef(null);
var listRef = React.useRef(null);
var wasOpenRef = React.useRef(false);
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
withSearch = _React$useState8[0],
setWithSearch = _React$useState8[1];
var _React$useState9 = React.useState(),
_React$useState10 = _slicedToArray(_React$useState9, 2),
focusedOption = _React$useState10[0],
setFocusedOption = _React$useState10[1];
var _React$useState11 = React.useState(false),
_React$useState12 = _slicedToArray(_React$useState11, 2),
highlightFirstItem = _React$useState12[0],
setHighlightFirstItem = _React$useState12[1];
var _React$useState13 = React.useState(false),
_React$useState14 = _slicedToArray(_React$useState13, 2),
highlightLastItem = _React$useState14[0],
setHighlightLastItem = _React$useState14[1];
var _React$useState15 = React.useState(-1),
_React$useState16 = _slicedToArray(_React$useState15, 2),
rovingIndex = _React$useState16[0],
setRovingIndex = _React$useState16[1];
var _React$useState17 = React.useState({
width: popoverWidth || width
}),
_React$useState18 = _slicedToArray(_React$useState17, 2),
popoverStyle = _React$useState18[0],
setPopoverStyle = _React$useState18[1];
var listboxId = React.useRef("select-listbox-".concat(uidGenerator())).current;
var baseProps = extractBaseProps(props);
var WrapperStyle = trigger ? {} : {
width: width
};
var mergedTriggerOptions = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, triggerOptions), (triggerOptions == null || triggerOptions['aria-label'] == null) && ariaLabelProp ? {
'aria-label': ariaLabelProp
} : {}), (triggerOptions == null || triggerOptions['aria-labelledby'] == null) && ariaLabelledByProp ? {
'aria-labelledby': ariaLabelledByProp
} : {}), (triggerOptions == null || triggerOptions['aria-describedby'] == null) && ariaDescribedByProp ? {
'aria-describedby': ariaDescribedByProp
} : {}), (triggerOptions == null || triggerOptions['aria-errormessage'] == null) && ariaErrormessageProp ? {
'aria-errormessage': ariaErrormessageProp
} : {});
var getTriggerElement = function getTriggerElement() {
if (trigger) {
var _trigger$props$ariaD, _trigger$props$ariaE;
var userOnKeyDown = trigger.props.onKeyDown;
var userRef = trigger.ref;
return /*#__PURE__*/React.cloneElement(trigger, {
ref: function ref(node) {
triggerRef.current = node;
assignRef(userRef, node);
},
'aria-controls': listboxId,
'aria-expanded': openPopover,
'aria-haspopup': 'listbox',
'aria-invalid': error ? true : trigger.props['aria-invalid'],
'aria-describedby': (_trigger$props$ariaD = trigger.props['aria-describedby']) !== null && _trigger$props$ariaD !== void 0 ? _trigger$props$ariaD : triggerOptions && triggerOptions['aria-describedby'] != null ? triggerOptions['aria-describedby'] : ariaDescribedByProp,
'aria-errormessage': (_trigger$props$ariaE = trigger.props['aria-errormessage']) !== null && _trigger$props$ariaE !== void 0 ? _trigger$props$ariaE : triggerOptions && triggerOptions['aria-errormessage'] != null ? triggerOptions['aria-errormessage'] : ariaErrormessageProp,
onKeyDown: function onKeyDown(event) {
handleKeyDownTrigger(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
userOnKeyDown === null || userOnKeyDown === void 0 || userOnKeyDown(event);
}
});
}
return /*#__PURE__*/React.createElement(SelectTrigger, _extends$2({
"aria-controls": listboxId
}, mergedTriggerOptions));
};
React.useEffect(function () {
var _triggerRef$current, _triggerBoxRef$curren;
// if popover width is not provided explicitly, apply the trigger width to popover width
// the default SelectTrigger wraps its focusable control in its own box, so measure that box
// (not the narrower inner control) for the full trigger width; a custom `trigger` has no such wrapper.
var MIN_WIDTH = 176;
var triggerWidth = trigger ? (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.clientWidth : (_triggerBoxRef$curren = triggerBoxRef.current) === null || _triggerBoxRef$curren === void 0 ? void 0 : _triggerBoxRef$curren.clientWidth;
if (!popoverWidth && triggerWidth) {
setPopoverStyle(_objectSpread2(_objectSpread2({}, popoverStyle), {}, {
width: trigger ? Math.max(triggerWidth || 0, MIN_WIDTH) : triggerWidth
}));
}
}, []);
React.useImperativeHandle(ref, function () {
return {
setOpen: function setOpen(open) {
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(open);
},
setFocusFirstItem: function setFocusFirstItem() {
if (openPopover) {
requestAnimationFrame(function () {
return focusListItem$1('down', setFocusedOption, listRef);
});
setHighlightFirstItem(true);
}
},
setFocusLastItem: function setFocusLastItem() {
if (openPopover) {
requestAnimationFrame(function () {
return focusListItem$1('up', setFocusedOption, listRef);
});
setHighlightLastItem(true);
}
}
};
});
React.useEffect(function () {
if (!openPopover) {
setHighlightFirstItem(false);
setHighlightLastItem(false);
setRovingIndex(-1);
}
wasOpenRef.current = openPopover;
}, [openPopover]);
React.useEffect(function () {
if (!highlightFirstItem || !openPopover) return;
var cancelled = false;
var rafId = requestAnimationFrame(function () {
if (cancelled) return;
// Second rAF ensures options (and aria-selected) are in the DOM before we focus/roving
requestAnimationFrame(function () {
if (cancelled) return;
var idx = focusPopoverInitial(listRef, setFocusedOption);
setRovingIndex(idx);
setHighlightFirstItem(false);
});
});
return function () {
cancelled = true;
cancelAnimationFrame(rafId);
};
}, [highlightFirstItem, openPopover, selectValue]);
React.useEffect(function () {
if (!highlightLastItem || !openPopover) return;
var cancelled = false;
var rafId = requestAnimationFrame(function () {
if (cancelled) return;
focusListItem$1('up', setFocusedOption, listRef);
setHighlightLastItem(false);
});
return function () {
cancelled = true;
cancelAnimationFrame(rafId);
};
}, [highlightLastItem, openPopover]);
React.useEffect(function () {
if (!openPopover || !listRef.current) return;
var idx = getRovingIndex(listRef, focusedOption);
setRovingIndex(idx);
}, [openPopover, focusedOption, selectValue, children]);
React.useEffect(function () {
if (value) {
setSelectValue(value);
setIsOptionSelected(Array.isArray(value) ? value.length > 0 : value && 'value' in value);
}
}, [value]);
var previousOpen = React.useRef(openPopover);
React.useEffect(function () {
if (previousOpen.current && !openPopover) {
if (document.activeElement === document.body) {
var _triggerRef$current2;
(_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 || _triggerRef$current2.focus({
preventScroll: true
});
}
}
previousOpen.current = openPopover;
}, [openPopover]);
var onToggleHandler = function onToggleHandler(open) {
if (triggerOptions && triggerOptions.disabled) {
setOpenPopover(false);
return;
}
if (onToggle) {
onToggle(open);
}
setOpenPopover(open);
setHighlightFirstItem(open);
};
var onOptionClick = function onOptionClick(option) {
onSelect === null || onSelect === void 0 || onSelect(option);
if (!multiSelect) {
var _triggerRef$current3;
setOpenPopover(false);
(_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 || _triggerRef$current3.focus({
preventScroll: true
});
}
};
var onOutsideClickHandler = function onOutsideClickHandler() {
onOutsideClick === null || onOutsideClick === void 0 || onOutsideClick();
};
var hasFooter = React.useMemo(function () {
var _checkFooter = function checkFooter(nodes) {
return React.Children.toArray(nodes).some(function (child) {
if (! /*#__PURE__*/React.isValidElement(child)) return false;
// If it's the Footer, we found it!
if (child.type === SelectFooter || child.type === Select.Footer) {
return true;
}
// If it's a Fragment, recursively check its children
if (child.type === React.Fragment) {
return _checkFooter(child.props.children);
}
return false;
});
};
return _checkFooter(children);
}, [children]);
var effectiveTrapFocus = trapFocus !== undefined ? trapFocus : hasFooter;
var handlePopoverKeyDown = function handlePopoverKeyDown(e) {
if (!openPopover || !listRef.current) return;
var container = listRef.current;
if (!container.contains(document.activeElement)) return;
if (e.key === 'Escape') {
var _triggerRef$current4;
e.preventDefault();
e.stopPropagation();
setOpenPopover(false);
setFocusedOption(undefined);
(_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 || _triggerRef$current4.focus({
preventScroll: true
});
return;
}
if (e.key !== 'Tab') return;
if (!effectiveTrapFocus) {
var _triggerRef$current5;
e.preventDefault();
setOpenPopover(false);
var next = getNextFocusableAfterTrigger((_triggerRef$current5 = triggerRef.current) !== null && _triggerRef$current5 !== void 0 ? _triggerRef$current5 : null, e.shiftKey, container);
if (next) {
next.focus({
preventScroll: true
});
} else {
var _triggerRef$current6;
(_triggerRef$current6 = triggerRef.current) === null || _triggerRef$current6 === void 0 || _triggerRef$current6.focus({
preventScroll: true
});
}
return;
}
var focusables = getFocusableElements(container);
var currentIndex = focusables.length > 0 ? focusables.indexOf(document.activeElement) : -1;
if (focusables.length === 0 || currentIndex === -1) {
var _triggerRef$current7;
e.preventDefault();
setOpenPopover(false);
var _next = getNextFocusableAfterTrigger((_triggerRef$current7 = triggerRef.current) !== null && _triggerRef$current7 !== void 0 ? _triggerRef$current7 : null, e.shiftKey, container);
if (_next) {
_next.focus({
preventScroll: true
});
} else {
var _triggerRef$current8;
(_triggerRef$current8 = triggerRef.current) === null || _triggerRef$current8 === void 0 || _triggerRef$current8.focus({
preventScroll: true
});
}
return;
}
e.preventDefault();
var nextIndex = e.shiftKey ? currentIndex === 0 ? focusables.length - 1 : currentIndex - 1 : currentIndex === focusables.length - 1 ? 0 : currentIndex + 1;
focusables[nextIndex].focus();
};
var contextProp = {
listboxId: listboxId,
openPopover: openPopover,
setOpenPopover: setOpenPopover,
selectValue: selectValue,
setSelectValue: setSelectValue,
isOptionSelected: isOptionSelected,
setIsOptionSelected: setIsOptionSelected,
onOptionClick: onOptionClick,
maxHeight: maxHeight,
minHeight: minHeight,
withSearch: withSearch,
width: width,
setWithSearch: setWithSearch,
multiSelect: multiSelect,
listRef: listRef,
triggerRef: triggerRef,
triggerBoxRef: triggerBoxRef,
focusedOption: focusedOption,
setFocusedOption: setFocusedOption,
setHighlightFirstItem: setHighlightFirstItem,
setHighlightLastItem: setHighlightLastItem,
styleType: styleType,
error: error,
rovingIndex: rovingIndex
};
return /*#__PURE__*/React.createElement(SelectContext.Provider, {
value: contextProp
}, /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-Select",
style: WrapperStyle
}, baseProps), /*#__PURE__*/React.createElement(Popover, {
open: openPopover,
onToggle: onToggleHandler,
triggerClass: "d-block",
offset: "medium",
position: "bottom-start",
customStyle: popoverStyle,
boundaryElement: boundaryElement,
appendToBody: appendToBody,
trigger: getTriggerElement()
}, /*#__PURE__*/React.createElement(OutsideClick, {
onOutsideClick: onOutsideClickHandler
}, /*#__PURE__*/React.createElement("div", {
role: "presentation",
tabIndex: -1,
ref: listRef,
onKeyDown: handlePopoverKeyDown
}, children)))));
});
Select.displayName = 'Select';
Select.defaultProps = {
maxHeight: 256,
width: 176,
styleType: 'filled'
};
Select.Option = SelectOption;
Select.List = SelectList;
Select.SearchInput = SearchInput;
Select.EmptyTemplate = SelectEmptyTemplate;
Select.Footer = SelectFooter;
var css_248z$9 = ".menu-module-Menu-AK6Tm-4-30-3 {\n overflow-y: auto !important;\n padding-top: var(--spacing-10);\n padding-bottom: var(--spacing-10);\n}\n\n.menu-module-Menu-Trigger--active-jEVVp-4-30-3 {\n background-color: var(--secondary-dark);\n}\n\n.menu-module-Menu-Item-oX6Gf-4-30-3 {\n width: 100%;\n box-sizing: border-box;\n}\n\n.menu-module-Menu-Item--tight-6221H-4-30-3 {\n padding: var(--spacing-10) var(--spacing-20);\n font-size: var(--font-size-s);\n font-weight: var(--font-weight-medium);\n line-height: var(--font-height-s);\n}\n\n.menu-module-Menu-Group-Label-Qj6zC-4-30-3 {\n display: flex;\n align-items: center;\n padding-bottom: var(--spacing-15);\n padding-top: var(--spacing-30);\n padding-left: var(--spacing-40);\n padding-right: var(--spacing-30);\n}\n\n.menu-module-Menu-Group-MAnuz-4-30-3:first-child .menu-module-Menu-Group-Label-Qj6zC-4-30-3 {\n padding-top: var(--spacing-20);\n}\n";
var styles$9 = {"Menu":"menu-module-Menu-AK6Tm-4-30-3","Menu-Trigger--active":"menu-module-Menu-Trigger--active-jEVVp-4-30-3","Menu-Item":"menu-module-Menu-Item-oX6Gf-4-30-3","Menu-Item--tight":"menu-module-Menu-Item--tight-6221H-4-30-3","Menu-Group-Label":"menu-module-Menu-Group-Label-Qj6zC-4-30-3","Menu-Group":"menu-module-Menu-Group-MAnuz-4-30-3"};
styleInject(css_248z$9);
var _excluded$o = ["label", "children", "showDivider"];
var MenuGroup = function MenuGroup(props) {
var label = props.label,
children = props.children,
showDivider = props.showDivider,
rest = _objectWithoutProperties(props, _excluded$o);
var labelId = React__default.useRef("menu-group-label-".concat(uidGenerator())).current;
if (label) {
return /*#__PURE__*/React__default.createElement("div", _extends$2({
"data-test": "DesignSystem-Menu-Group",
role: "group",
"aria-labelledby": labelId,
className: styles$9['Menu-Group']
}, rest), /*#__PURE__*/React__default.createElement(Text$1, {
id: labelId,
"data-test": "DesignSystem-Menu-Group-Label",
size: "small",
weight: "medium",
appearance: "subtle",
className: styles$9['Menu-Group-Label']
}, label), children);
}
return /*#__PURE__*/React__default.createElement("div", _extends$2({
"data-test": "DesignSystem-Menu-Group",
role: "group"
}, rest), children, showDivider && /*#__PURE__*/React__default.createElement(Divider, {
className: "my-3"
}));
};
MenuGroup.defaultProps = {
showDivider: true
};
var MenuContext = /*#__PURE__*/React.createContext({});
var handleKeyDown$1 = function handleKeyDown(event, focusedOption, setFocusedOption, setOpenPopover, menuTriggerRef, listRef, subListRef, isSubMenuTrigger, triggerRef, menuID, triggerID, parentListRef) {
switch (event.key) {
case 'ArrowUp':
event.preventDefault();
navigateOptions('up', focusedOption, setFocusedOption, listRef);
break;
case 'ArrowDown':
event.preventDefault();
navigateOptions('down', focusedOption, setFocusedOption, listRef);
break;
case 'Enter':
case ' ':
event.preventDefault();
focusedOption === null || focusedOption === void 0 || focusedOption.click();
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(false);
if (!isSubMenuTrigger) {
var _menuTriggerRef$curre;
menuTriggerRef === null || menuTriggerRef === void 0 || (_menuTriggerRef$curre = menuTriggerRef.current) === null || _menuTriggerRef$curre === void 0 || _menuTriggerRef$curre.focus();
}
setFocusedOption === null || setFocusedOption === void 0 || setFocusedOption(undefined);
break;
case 'Escape':
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(false);
if (triggerRef && !isSubMenuTrigger) {
if (triggerRef.current) {
triggerRef.current.focus();
} else if (parentListRef !== null && parentListRef !== void 0 && parentListRef.current && triggerID) {
var triggerEl = parentListRef.current.querySelector("#".concat(triggerID));
triggerEl === null || triggerEl === void 0 || triggerEl.focus();
}
} else {
var _menuTriggerRef$curre2;
menuTriggerRef === null || menuTriggerRef === void 0 || (_menuTriggerRef$curre2 = menuTriggerRef.current) === null || _menuTriggerRef$curre2 === void 0 || _menuTriggerRef$curre2.focus();
}
setFocusedOption === null || setFocusedOption === void 0 || setFocusedOption(undefined);
break;
case 'Tab':
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(false);
setFocusedOption === null || setFocusedOption === void 0 || setFocusedOption(undefined);
break;
case 'Home':
event.preventDefault();
navigateOptions('down', undefined, setFocusedOption, listRef);
break;
case 'End':
event.preventDefault();
navigateOptions('up', undefined, setFocusedOption, listRef);
break;
case 'ArrowRight':
if (!isSubMenuTrigger && triggerID && parentListRef !== null && parentListRef !== void 0 && parentListRef.current) {
var _document$querySelect;
// Inside a left-placed submenu ArrowRight is the close direction.
var placementR = (_document$querySelect = document.querySelector("[data-name=\"".concat(menuID, "\"]"))) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.getAttribute('data-placement');
if (placementR !== null && placementR !== void 0 && placementR.includes('left')) {
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(false);
var _triggerEl = parentListRef.current.querySelector("#".concat(triggerID));
_triggerEl === null || _triggerEl === void 0 || _triggerEl.focus();
setFocusedOption === null || setFocusedOption === void 0 || setFocusedOption(undefined);
break;
}
}
navigateSubMenu(isSubMenuTrigger, 'right', subListRef, menuID, triggerID, parentListRef);
break;
case 'ArrowLeft':
if (!isSubMenuTrigger && triggerID && parentListRef !== null && parentListRef !== void 0 && parentListRef.current) {
var _document$querySelect2;
// Inside a right-placed submenu ArrowLeft is the close direction.
var placementL = (_document$querySelect2 = document.querySelector("[data-name=\"".concat(menuID, "\"]"))) === null || _document$querySelect2 === void 0 ? void 0 : _document$querySelect2.getAttribute('data-placement');
if (!placementL || placementL.includes('right')) {
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(false);
var _triggerEl2 = parentListRef.current.querySelector("#".concat(triggerID));
_triggerEl2 === null || _triggerEl2 === void 0 || _triggerEl2.focus();
setFocusedOption === null || setFocusedOption === void 0 || setFocusedOption(undefined);
break;
}
}
navigateSubMenu(isSubMenuTrigger, 'left', subListRef, menuID, triggerID, parentListRef);
break;
}
};
var MENU_LIST_ITEM_SELECTOR = '[data-test="DesignSystem-Menu-ListItem"]';
var navigateOptions = function navigateOptions(direction, focusedOption, setFocusedOption, listRef) {
var _listRef$current, _targetOption$scrollI;
var listItems = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.querySelectorAll(MENU_LIST_ITEM_SELECTOR);
if (!(listItems !== null && listItems !== void 0 && listItems.length)) {
return;
}
var index = Array.from(listItems).findIndex(function (item) {
return item == focusedOption;
});
if (index === -1) {
index = direction === 'up' ? listItems.length - 1 : 0;
} else {
index = direction === 'up' ? (index - 1 + listItems.length) % listItems.length : (index + 1) % listItems.length;
}
var targetOption = listItems[index];
targetOption === null || targetOption === void 0 || targetOption.focus();
setFocusedOption && setFocusedOption(targetOption);
targetOption === null || targetOption === void 0 || (_targetOption$scrollI = targetOption.scrollIntoView) === null || _targetOption$scrollI === void 0 || _targetOption$scrollI.call(targetOption, {
block: 'center'
});
};
var navigateSubMenu = function navigateSubMenu(isSubMenuTrigger, direction, subListRef, menuID, triggerID, parentListRef) {
var element = document.querySelector("[data-name=\"".concat(menuID, "\"]"));
var menuPlacement = element === null || element === void 0 ? void 0 : element.getAttribute('data-placement');
if (isSubMenuTrigger) {
if (direction === 'right' && menuPlacement !== null && menuPlacement !== void 0 && menuPlacement.includes('right') || direction === 'left' && menuPlacement !== null && menuPlacement !== void 0 && menuPlacement.includes('left')) {
var _subListRef$current, _listItems$;
var listItems = subListRef === null || subListRef === void 0 || (_subListRef$current = subListRef.current) === null || _subListRef$current === void 0 ? void 0 : _subListRef$current.querySelectorAll(MENU_LIST_ITEM_SELECTOR);
listItems === null || listItems === void 0 || (_listItems$ = listItems[0]) === null || _listItems$ === void 0 || _listItems$.focus();
}
} else if (direction === 'left' && menuPlacement !== null && menuPlacement !== void 0 && menuPlacement.includes('right') || direction === 'right' && menuPlacement !== null && menuPlacement !== void 0 && menuPlacement.includes('left')) {
var _parentListRef$curren;
var triggerElement = parentListRef === null || parentListRef === void 0 || (_parentListRef$curren = parentListRef.current) === null || _parentListRef$curren === void 0 || (_parentListRef$curren = _parentListRef$curren.querySelector("#".concat(triggerID))) === null || _parentListRef$curren === void 0 ? void 0 : _parentListRef$curren.firstChild;
triggerElement === null || triggerElement === void 0 || triggerElement.focus();
}
};
var SubMenuContext = /*#__PURE__*/React.createContext({});
var _excluded$n = ["children"];
var MenuListContext = /*#__PURE__*/React__default.createContext({});
var MenuList = function MenuList(props) {
var children = props.children,
rest = _objectWithoutProperties(props, _excluded$n);
return /*#__PURE__*/React__default.createElement(Listbox, _extends$2({
"data-test": "DesignSystem-Menu-List"
}, rest, {
customFocusManagement: true
}), /*#__PURE__*/React__default.createElement(MenuListContext.Provider, {
value: {
size: props.size
}
}, children));
};
MenuList.defaultProps = {
type: 'option',
showDivider: false,
tagName: 'nav',
size: 'compressed'
};
var _excluded$m = ["children", "className", "onClick", "disabled", "onFocus"];
var MenuItem = function MenuItem(props) {
var children = props.children,
className = props.className,
onClick = props.onClick,
disabled = props.disabled,
onFocus = props.onFocus,
rest = _objectWithoutProperties(props, _excluded$m);
var contextProp = React__default.useContext(MenuContext);
var subMenuContextProp = React__default.useContext(SubMenuContext);
var _React$useContext = React__default.useContext(MenuListContext),
size = _React$useContext.size;
var isSubMenuTrigger = false;
var subListRef = null;
var triggerRef = subMenuContextProp.triggerRef,
menuID = subMenuContextProp.menuID,
setParentOpen = subMenuContextProp.setParentOpen,
triggerID = subMenuContextProp.triggerID,
parentListRef = subMenuContextProp.parentListRef,
parentMenuTriggerRef = subMenuContextProp.parentMenuTriggerRef;
var setOpenPopover = contextProp.setOpenPopover,
focusedOption = contextProp.focusedOption,
setFocusedOption = contextProp.setFocusedOption,
menuTriggerRef = contextProp.menuTriggerRef,
listRef = contextProp.listRef;
var MenuItemClassName = classnames(styles$9['Menu-Item'], _defineProperty$1({}, styles$9['Menu-Item--tight'], size === 'tight'), className);
React__default.useEffect(function () {
var _parentListRef$curren;
var handlePopoverOpen = function handlePopoverOpen() {
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(true);
};
var handlePopoverClose = function handlePopoverClose() {
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(false);
};
var triggerElement = parentListRef === null || parentListRef === void 0 || (_parentListRef$curren = parentListRef.current) === null || _parentListRef$curren === void 0 || (_parentListRef$curren = _parentListRef$curren.querySelector("#".concat(triggerID))) === null || _parentListRef$curren === void 0 ? void 0 : _parentListRef$curren.firstChild;
triggerElement === null || triggerElement === void 0 || triggerElement.addEventListener('focus', handlePopoverOpen);
triggerElement === null || triggerElement === void 0 || triggerElement.addEventListener('blur', handlePopoverClose);
return function () {
triggerElement === null || triggerElement === void 0 || triggerElement.removeEventListener('focus', handlePopoverOpen);
triggerElement === null || triggerElement === void 0 || triggerElement.removeEventListener('blur', handlePopoverClose);
};
}, [triggerID]);
var onFocusHandler = function onFocusHandler(event) {
setFocusedOption === null || setFocusedOption === void 0 || setFocusedOption(event.target);
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(true);
onFocus === null || onFocus === void 0 || onFocus(event);
};
var onKeyDownHandler = function onKeyDownHandler(event) {
handleKeyDown$1(event, focusedOption, setFocusedOption, setOpenPopover, menuTriggerRef, listRef, subListRef, isSubMenuTrigger, triggerRef, menuID, triggerID, parentListRef);
};
var onClickHandler = function onClickHandler(event) {
if (disabled) {
return;
}
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(false);
onClick === null || onClick === void 0 || onClick(event);
if (setParentOpen) {
var _parentMenuTriggerRef;
setParentOpen(false);
parentMenuTriggerRef === null || parentMenuTriggerRef === void 0 || (_parentMenuTriggerRef = parentMenuTriggerRef.current) === null || _parentMenuTriggerRef === void 0 || _parentMenuTriggerRef.focus();
} else {
var _menuTriggerRef$curre;
menuTriggerRef === null || menuTriggerRef === void 0 || (_menuTriggerRef$curre = menuTriggerRef.current) === null || _menuTriggerRef$curre === void 0 || _menuTriggerRef$curre.focus();
}
};
return /*#__PURE__*/React__default.createElement(Listbox.Item, _extends$2({
"data-test": "DesignSystem-Menu-ListItem",
className: MenuItemClassName,
tabIndex: -1,
onKeyDown: onKeyDownHandler,
onFocus: onFocusHandler,
onClick: onClickHandler,
disabled: disabled,
role: "menuitem",
"aria-disabled": disabled
}, rest), children);
};
MenuItem.displayName = 'MenuItem';
MenuItem.defaultProps = {
tagName: 'a'
};
var handleKeyDown = function handleKeyDown(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem) {
switch (event.key) {
case 'ArrowUp':
event.preventDefault();
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(true);
setHighlightLastItem === null || setHighlightLastItem === void 0 || setHighlightLastItem(true);
break;
case 'ArrowDown':
event.preventDefault();
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(true);
setHighlightFirstItem === null || setHighlightFirstItem === void 0 || setHighlightFirstItem(true);
break;
case 'Escape':
case 'Tab':
setOpenPopover === null || setOpenPopover === void 0 || setOpenPopover(false);
break;
}
};
var focusListItem = function focusListItem(position, setFocusedOption, listRef) {
var _listRef$current, _targetOption;
var listItems = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.querySelectorAll('[data-test="DesignSystem-Menu-ListItem"]');
if (!(listItems !== null && listItems !== void 0 && listItems.length)) {
return;
}
var targetOption;
if (position === 'down') {
targetOption = listItems[0];
} else {
targetOption = listItems[listItems.length - 1];
}
(_targetOption = targetOption) === null || _targetOption === void 0 || _targetOption.focus();
if (targetOption && typeof targetOption.scrollIntoView === 'function') {
var _targetOption2;
(_targetOption2 = targetOption) === null || _targetOption2 === void 0 || _targetOption2.scrollIntoView({
block: 'end'
});
}
setFocusedOption && setFocusedOption(targetOption);
};
var _excluded$l = ["className", "aria-label"];
var MenuTrigger = function MenuTrigger(props) {
var className = props.className,
ariaLabel = props['aria-label'],
rest = _objectWithoutProperties(props, _excluded$l);
var contextProp = React__default.useContext(MenuContext);
var openPopover = contextProp.openPopover,
setOpenPopover = contextProp.setOpenPopover,
setHighlightFirstItem = contextProp.setHighlightFirstItem,
setHighlightLastItem = contextProp.setHighlightLastItem,
menuTriggerRef = contextProp.menuTriggerRef,
menuId = contextProp.menuId;
var triggerClassName = classnames(_defineProperty$1({}, styles$9['Menu-Trigger--active'], openPopover), className);
var onKeyDownHandler = function onKeyDownHandler(event) {
handleKeyDown(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
};
return /*#__PURE__*/React__default.createElement(Button, _extends$2({
"data-test": "DesignSystem-Menu-Trigger",
icon: "more_horiz",
ref: menuTriggerRef,
"aria-haspopup": "menu",
"aria-controls": menuId,
"aria-expanded": openPopover
}, rest, {
"aria-label": ariaLabel || 'Open menu',
className: triggerClassName,
onKeyDown: onKeyDownHandler
}));
};
var SubMenu = function SubMenu(props) {
var _props2;
var children = props.children;
var menuID = "DesignSystem-Menu--Popover-".concat(uidGenerator());
var triggerID = "DesignSystem-Menu--Trigger-".concat(uidGenerator());
var _React$Children$toArr = React__default.Children.toArray(children),
_React$Children$toArr2 = _slicedToArray(_React$Children$toArr, 2),
submenuTrigger = _React$Children$toArr2[0],
submenuContent = _React$Children$toArr2[1];
var contextProp = React__default.useContext(MenuContext);
var subListRef = React__default.useRef(null);
var triggerRef = React__default.useRef(null);
var isSubMenuTrigger = true;
var _React$useState = React__default.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
isSubmenuOpen = _React$useState2[0],
setIsSubmenuOpen = _React$useState2[1];
var _React$useState3 = React__default.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
keyboardOpen = _React$useState4[0],
setKeyboardOpen = _React$useState4[1];
var _React$useState5 = React__default.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
shouldFocusFirstItem = _React$useState6[0],
setShouldFocusFirstItem = _React$useState6[1];
var subMenuElement = /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
var setOpenPopover = contextProp.setOpenPopover,
focusedOption = contextProp.focusedOption,
setFocusedOption = contextProp.setFocusedOption,
menuTriggerRef = contextProp.menuTriggerRef,
listRef = contextProp.listRef;
React__default.useEffect(function () {
if (shouldFocusFirstItem && isSubmenuOpen) {
requestAnimationFrame(function () {
var _subListRef$current, _listItems$;
var listItems = (_subListRef$current = subListRef.current) === null || _subListRef$current === void 0 ? void 0 : _subListRef$current.querySelectorAll('[data-test="DesignSystem-Menu-ListItem"]');
listItems === null || listItems === void 0 || (_listItems$ = listItems[0]) === null || _listItems$ === void 0 || _listItems$.focus();
setShouldFocusFirstItem(false);
});
}
}, [shouldFocusFirstItem, isSubmenuOpen]);
var onTriggerBlur = function onTriggerBlur(e) {
var _props, _props$onBlur;
if (keyboardOpen) {
var _subListRef$current2;
if ((_subListRef$current2 = subListRef.current) !== null && _subListRef$current2 !== void 0 && _subListRef$current2.contains(e.relatedTarget)) {
e.stopPropagation();
} else {
setKeyboardOpen(false);
}
}
submenuTrigger === null || submenuTrigger === void 0 || (_props = submenuTrigger.props) === null || _props === void 0 || (_props$onBlur = _props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(_props, e);
};
var isTriggerDisabled = !!(submenuTrigger !== null && submenuTrigger !== void 0 && (_props2 = submenuTrigger.props) !== null && _props2 !== void 0 && _props2.disabled);
var onKeyDownHandler = function onKeyDownHandler(event) {
switch (event.key) {
case 'ArrowRight':
case 'Enter':
case ' ':
if (isTriggerDisabled) break;
// Open the submenu and move focus into it rather than closing the root menu.
event.preventDefault();
setKeyboardOpen(true);
setShouldFocusFirstItem(true);
break;
default:
handleKeyDown$1(event, focusedOption, setFocusedOption, setOpenPopover, menuTriggerRef, listRef, subListRef, isSubMenuTrigger, triggerRef, menuID);
}
};
var subMenuContextProp = {
triggerRef: triggerRef,
menuID: menuID,
setParentOpen: setOpenPopover,
parentListRef: listRef,
triggerID: triggerID,
parentMenuTriggerRef: menuTriggerRef
};
var triggerElement = /*#__PURE__*/React__default.cloneElement(submenuTrigger, _objectSpread2(_objectSpread2({}, submenuTrigger === null || submenuTrigger === void 0 ? void 0 : submenuTrigger.props), {}, {
onKeyDown: onKeyDownHandler,
onBlur: onTriggerBlur,
ref: triggerRef,
'aria-haspopup': 'menu',
'aria-expanded': isSubmenuOpen,
'aria-controls': menuID,
id: triggerID
}));
if (/*#__PURE__*/React__default.isValidElement(submenuContent)) {
var _submenuContent$props = submenuContent === null || submenuContent === void 0 ? void 0 : submenuContent.props,
on = _submenuContent$props.on,
_children = _submenuContent$props.children,
_onToggle = _submenuContent$props.onToggle,
consumerOpen = _submenuContent$props.open;
subMenuElement = /*#__PURE__*/React__default.cloneElement(submenuContent, _objectSpread2(_objectSpread2({}, submenuContent.props), {}, {
on: on || 'hover',
open: consumerOpen === false ? false : keyboardOpen || consumerOpen,
offset: 'small',
children: /*#__PURE__*/React__default.createElement("div", {
ref: subListRef
}, _children),
trigger: triggerElement,
onToggle: function onToggle(open) {
setIsSubmenuOpen(open !== null && open !== void 0 ? open : false);
if (!open) setKeyboardOpen(false);
_onToggle === null || _onToggle === void 0 || _onToggle(open);
}
}));
}
return /*#__PURE__*/React__default.createElement(SubMenuContext.Provider, {
value: subMenuContextProp
}, subMenuElement);
};
var _excluded$k = ["children", "width", "minHeight", "maxHeight", "className", "open", "onToggle", "aria-label", "aria-labelledby"];
var Menu = function Menu(props) {
var children = props.children,
width = props.width,
minHeight = props.minHeight,
maxHeight = props.maxHeight,
className = props.className,
open = props.open,
onToggle = props.onToggle,
ariaLabel = props['aria-label'],
ariaLabelledBy = props['aria-labelledby'],
rest = _objectWithoutProperties(props, _excluded$k);
var _React$useState = React__default.useState(open),
_React$useState2 = _slicedToArray(_React$useState, 2),
openPopover = _React$useState2[0],
setOpenPopover = _React$useState2[1];
var _React$useState3 = React__default.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
highlightFirstItem = _React$useState4[0],
setHighlightFirstItem = _React$useState4[1];
var _React$useState5 = React__default.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
highlightLastItem = _React$useState6[0],
setHighlightLastItem = _React$useState6[1];
var _React$useState7 = React__default.useState(),
_React$useState8 = _slicedToArray(_React$useState7, 2),
focusedOption = _React$useState8[0],
setFocusedOption = _React$useState8[1];
var listRef = /*#__PURE__*/React__default.createRef();
var menuTriggerRef = React__default.useRef(null);
var subMenuContextProp = React__default.useContext(SubMenuContext);
var generatedMenuId = React__default.useRef("menu-".concat(uidGenerator())).current;
var menuID = subMenuContextProp.menuID;
var popoverClassName = classnames(styles$9.Menu, className);
React__default.useEffect(function () {
setOpenPopover(open);
}, [open]);
React__default.useEffect(function () {
if (highlightFirstItem && openPopover) {
requestAnimationFrame(function () {
return focusListItem('down', setFocusedOption, listRef);
});
}
}, [highlightFirstItem]);
React__default.useEffect(function () {
if (highlightLastItem && openPopover) {
requestAnimationFrame(function () {
return focusListItem('up', setFocusedOption, listRef);
});
}
}, [highlightLastItem]);
React__default.useEffect(function () {
if (!openPopover) {
setHighlightFirstItem(false);
setHighlightLastItem(false);
}
onToggle === null || onToggle === void 0 || onToggle(openPopover);
}, [openPopover]);
var onToggleHandler = function onToggleHandler(open) {
setOpenPopover(open);
};
var contextProp = {
openPopover: openPopover,
setOpenPopover: setOpenPopover,
setHighlightFirstItem: setHighlightFirstItem,
setHighlightLastItem: setHighlightLastItem,
focusedOption: focusedOption,
setFocusedOption: setFocusedOption,
menuTriggerRef: menuTriggerRef,
listRef: listRef,
menuId: generatedMenuId
};
return /*#__PURE__*/React__default.createElement(MenuContext.Provider, {
value: contextProp
}, /*#__PURE__*/React__default.createElement(Popover, _extends$2({
"data-test": "DesignSystem-Menu",
name: menuID,
offset: "medium"
}, rest, {
open: openPopover,
customStyle: {
width: width
},
onToggle: onToggleHandler
}), /*#__PURE__*/React__default.createElement("div", {
id: generatedMenuId,
ref: listRef,
role: "menu",
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"data-test": props['data-test'] || 'DesignSystem-Menu-Wrapper',
className: popoverClassName,
style: {
maxHeight: maxHeight,
minHeight: minHeight
}
}, children)));
};
Menu.Group = MenuGroup;
Menu.Item = MenuItem;
Menu.List = MenuList;
Menu.Trigger = MenuTrigger;
Menu.SubMenu = SubMenu;
Menu.defaultProps = {
width: 176,
maxHeight: 256,
position: 'bottom-start'
};
var KeyElement = function KeyElement(props) {
var children = props.children,
icon = props.icon,
iconOptions = props.iconOptions,
iconAlign = props.iconAlign,
label = props.label,
className = props.className;
var baseProps = extractBaseProps(props);
var iconClassNames = classnames('py-2', {
'mr-3': iconAlign === 'left',
'ml-3': iconAlign === 'right'
});
var keyClassNames = classnames('d-flex', 'align-items-center', className);
if (children) {
return /*#__PURE__*/React.createElement("dt", _extends$2({
"data-test": "DesignSystem-KeyValuePair-KeyElement"
}, baseProps), children);
}
return /*#__PURE__*/React.createElement("dt", _extends$2({
"data-test": "DesignSystem-KeyValuePair-KeyElement"
}, baseProps, {
className: keyClassNames
}), icon && iconAlign === 'left' && /*#__PURE__*/React.createElement(Icon, _extends$2({
appearance: "subtle",
name: icon,
className: iconClassNames,
"data-test": "DesignSystem-KeyValuePair-Icon--Left"
}, iconOptions)), label && /*#__PURE__*/React.createElement(Text$1, {
weight: "medium",
appearance: "subtle"
}, label), icon && iconAlign === 'right' && /*#__PURE__*/React.createElement(Icon, _extends$2({
appearance: "subtle",
name: icon,
className: iconClassNames,
"data-test": "DesignSystem-KeyValuePair-Icon--Right"
}, iconOptions)));
};
KeyElement.defaultProps = {
iconAlign: 'left'
};
var ValueElement = function ValueElement(props) {
var children = props.children,
value = props.value,
className = props.className;
var baseProps = extractBaseProps(props);
var valueClassNames = classnames('m-0', className);
if (children) {
return /*#__PURE__*/React.createElement("dd", _extends$2({
"data-test": "DesignSystem-KeyValuePair-ValueElement"
}, baseProps, {
className: valueClassNames
}), children);
}
return /*#__PURE__*/React.createElement("dd", _extends$2({
"data-test": "DesignSystem-KeyValuePair-ValueElement"
}, baseProps, {
className: valueClassNames
}), value && /*#__PURE__*/React.createElement(Text$1, null, value));
};
var KeyValuePair = function KeyValuePair(props) {
var children = props.children,
className = props.className;
var pairClassNames = classnames('m-0', className);
return /*#__PURE__*/React.createElement("dl", _extends$2({
"data-test": "DesignSystem-KeyValuePair"
}, props, {
className: pairClassNames
}), children);
};
KeyValuePair.Key = KeyElement;
KeyValuePair.Value = ValueElement;
var _excluded$j = ["date", "className"];
var DateSeparator = function DateSeparator(props) {
var date = props.date,
className = props.className,
rest = _objectWithoutProperties(props, _excluded$j);
return /*#__PURE__*/React.createElement(Text$1, _extends$2({
appearance: "subtle",
className: classnames('pt-7 pb-6 d-flex justify-content-center', className),
role: "separator",
"aria-label": String(date),
"data-test": "DesignSystem-Chat-DateSeparator"
}, rest), date);
};
var css_248z$8 = ".chatSeparator-module-Chat-UnreadMessage-JFwqI-4-30-3 {\n border-radius: var(--border-radius-40);\n padding: var(--spacing-05) var(--spacing-30) var(--spacing-05) var(--spacing-20);\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--primary);\n cursor: pointer;\n}\n\n.chatSeparator-module-NewMessage-Divider--left-tvVhe-4-30-3 {\n flex: 1;\n height: var(--spacing-2-5);\n background-color: var(--primary);\n margin-right: var(--spacing-40);\n}\n\n.chatSeparator-module-NewMessage-Divider--right-PlY2h-4-30-3 {\n flex: 1;\n height: var(--spacing-2-5);\n background-color: var(--primary);\n margin-left: var(--spacing-40);\n}\n";
var styles$8 = {"Chat-UnreadMessage":"chatSeparator-module-Chat-UnreadMessage-JFwqI-4-30-3","NewMessage-Divider--left":"chatSeparator-module-NewMessage-Divider--left-tvVhe-4-30-3","NewMessage-Divider--right":"chatSeparator-module-NewMessage-Divider--right-PlY2h-4-30-3"};
styleInject(css_248z$8);
var _excluded$i = ["text", "className"];
var UnreadMessage = function UnreadMessage(props) {
var text = props.text,
className = props.className,
rest = _objectWithoutProperties(props, _excluded$i);
var wrapperClass = classnames('d-flex align-items-center justify-content-center my-4', className);
var spacePressed = React.useRef(false);
var handleKeyDown = function handleKeyDown(e) {
var _rest$onKeyDown;
if (isSpaceKey(e)) {
e.preventDefault();
if (!e.repeat) {
spacePressed.current = true;
}
}
if (e.key === 'Enter' && !e.repeat) {
e.currentTarget.click();
}
(_rest$onKeyDown = rest.onKeyDown) === null || _rest$onKeyDown === void 0 || _rest$onKeyDown.call(rest, e);
};
var handleKeyUp = function handleKeyUp(e) {
var _rest$onKeyUp;
if (isSpaceKey(e)) {
e.preventDefault();
if (spacePressed.current) {
spacePressed.current = false;
e.currentTarget.click();
}
}
(_rest$onKeyUp = rest.onKeyUp) === null || _rest$onKeyUp === void 0 || _rest$onKeyUp.call(rest, e);
};
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-Chat-UnreadMessage",
className: wrapperClass,
role: "button",
tabIndex: 0,
"aria-label": text
}, rest, {
onKeyDown: handleKeyDown,
onKeyUp: handleKeyUp
}), /*#__PURE__*/React.createElement("span", {
className: styles$8['Chat-UnreadMessage']
}, /*#__PURE__*/React.createElement(Icon, {
appearance: "white",
name: "arrow_Downward",
className: "mr-3",
"aria-hidden": true
}), /*#__PURE__*/React.createElement(Text$1, {
appearance: "white",
weight: "strong",
"data-test": "DesignSystem-Chat-UnreadMessage-Text"
}, text)));
};
var _excluded$h = ["text", "className"];
var NewMessage = function NewMessage(props) {
var text = props.text,
className = props.className,
rest = _objectWithoutProperties(props, _excluded$h);
var classes = classnames('py-6 d-flex justify-content-center align-items-center', className);
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-Chat-NewMessage",
className: classes,
role: "status",
"aria-live": "polite",
"aria-label": text
}, rest), /*#__PURE__*/React.createElement("span", {
className: styles$8['NewMessage-Divider--left']
}), /*#__PURE__*/React.createElement(Text$1, {
appearance: "link",
weight: "strong",
size: "small"
}, text), /*#__PURE__*/React.createElement("span", {
className: styles$8['NewMessage-Divider--right']
}));
};
var _excluded$g = ["text"];
var TypingIndicator = function TypingIndicator(props) {
var text = props.text,
rest = _objectWithoutProperties(props, _excluded$g);
return /*#__PURE__*/React.createElement(Text$1, _extends$2({
"data-test": "DesignSystem-Chat-TypingIndicator",
appearance: "subtle",
weight: "medium",
size: "small",
role: "status",
"aria-live": "polite",
"aria-atomic": "true"
}, rest), text);
};
var css_248z$7 = ".chatBubble-module-ChatBubble-box--outgoing-YSk5I-4-30-3 {\n background-color: var(--primary-lightest);\n border-radius: var(--border-radius-20);\n padding: var(--spacing-20) var(--spacing-30);\n}\n\n.chatBubble-module-ChatBubble-separator-JaN-K-4-30-3 {\n width: var(--spacing-10);\n height: var(--spacing-10);\n border-radius: var(--border-radius-full);\n margin: 0 var(--spacing-20);\n background: var(--inverse-lighter);\n}\n\n.chatBubble-module-ChatBubble-box--noSuccess-xsoeb-4-30-3 {\n margin-right: calc(var(--spacing-40) + var(--spacing-10));\n}\n\n.chatBubble-module-ChatBubble-box-hARs0-4-30-3 {\n width: 100%;\n}\n\n.chatBubble-module-ChatBubble-actionBar--outgoing-uAsaH-4-30-3 {\n width: -moz-max-content;\n width: max-content;\n margin-right: var(--spacing-10);\n margin-top: var(--spacing-15);\n}\n\n.chatBubble-module-ChatBubble-actionBar--incoming-gosX5-4-30-3 {\n width: -moz-max-content;\n width: max-content;\n margin-left: var(--spacing-10);\n margin-top: var(--spacing-15);\n}\n\n.chatBubble-module-ChatBubble-box--incoming-GK6D6-4-30-3 {\n background-color: var(--secondary-lightest);\n border-radius: var(--border-radius-20);\n padding: var(--spacing-20) var(--spacing-30);\n}\n\n.chatBubble-module-ChatBubble-metaData--incoming-dovAY-4-30-3 {\n margin-left: calc(var(--spacing-80) + var(--spacing-20));\n}\n\n.chatBubble-module-ChatBubble-boxWrapper-aH59y-4-30-3 {\n flex: 0 0 auto;\n display: flex;\n max-width: 70%;\n}\n\n.chatBubble-module-ChatBubble-actionBarWrapper-8VKZb-4-30-3 {\n flex: 0 0 auto;\n}\n\n.chatBubble-module-ChatBubble-actionBarWrapper--hidden-VPK2d-4-30-3 {\n width: 0;\n overflow: hidden;\n}\n";
var styles$7 = {"ChatBubble-box--outgoing":"chatBubble-module-ChatBubble-box--outgoing-YSk5I-4-30-3","ChatBubble-separator":"chatBubble-module-ChatBubble-separator-JaN-K-4-30-3","ChatBubble-box--noSuccess":"chatBubble-module-ChatBubble-box--noSuccess-xsoeb-4-30-3","ChatBubble-box":"chatBubble-module-ChatBubble-box-hARs0-4-30-3","ChatBubble-actionBar--outgoing":"chatBubble-module-ChatBubble-actionBar--outgoing-uAsaH-4-30-3","ChatBubble-actionBar--incoming":"chatBubble-module-ChatBubble-actionBar--incoming-gosX5-4-30-3","ChatBubble-box--incoming":"chatBubble-module-ChatBubble-box--incoming-GK6D6-4-30-3","ChatBubble-metaData--incoming":"chatBubble-module-ChatBubble-metaData--incoming-dovAY-4-30-3","ChatBubble-boxWrapper":"chatBubble-module-ChatBubble-boxWrapper-aH59y-4-30-3","ChatBubble-actionBarWrapper":"chatBubble-module-ChatBubble-actionBarWrapper-8VKZb-4-30-3","ChatBubble-actionBarWrapper--hidden":"chatBubble-module-ChatBubble-actionBarWrapper--hidden-VPK2d-4-30-3"};
styleInject(css_248z$7);
var _excluded$f = ["time", "metaData", "urgentMessage", "avatarData", "showAvatar", "children", "actionBar"];
var MetaSeparator$1 = function MetaSeparator() {
return /*#__PURE__*/React.createElement("span", {
className: styles$7['ChatBubble-separator'],
"data-test": "DesignSystem-IncomingChatBubble-Separator",
"aria-hidden": true
});
};
var IncomingBubble = function IncomingBubble(props) {
var time = props.time,
metaData = props.metaData,
urgentMessage = props.urgentMessage,
_props$avatarData = props.avatarData,
avatarData = _props$avatarData === void 0 ? {} : _props$avatarData,
showAvatar = props.showAvatar,
children = props.children,
actionBar = props.actionBar,
rest = _objectWithoutProperties(props, _excluded$f);
var image = avatarData.image,
icon = avatarData.icon,
firstName = avatarData.firstName,
lastName = avatarData.lastName;
var fullName = "".concat(firstName ? firstName : '', " ").concat(lastName ? lastName : '');
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
showActionBar = _React$useState2[0],
setShowActionBar = _React$useState2[1];
var showMetaRow = firstName || lastName || time || metaData || urgentMessage;
var metaDataClass = classnames(_defineProperty$1(_defineProperty$1({}, 'd-flex align-items-center mb-3', true), styles$7['ChatBubble-metaData--incoming'], showAvatar));
var actionBarWrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$7['ChatBubble-actionBarWrapper'], true), styles$7['ChatBubble-actionBarWrapper--hidden'], !showActionBar));
var handleMouseEnter = function handleMouseEnter() {
return setShowActionBar(true);
};
var handleMouseLeave = function handleMouseLeave(e) {
if (!e.currentTarget.contains(document.activeElement)) {
setShowActionBar(false);
}
};
var handleFocus = actionBar ? function () {
return setShowActionBar(true);
} : undefined;
var handleBlur = actionBar ? function (e) {
if (!e.currentTarget.contains(e.relatedTarget)) {
setShowActionBar(false);
}
} : undefined;
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-ChatBubble-IncomingWrapper"
}, rest, {
role: "article"
}), showMetaRow && /*#__PURE__*/React.createElement(Row, {
className: metaDataClass,
"data-test": "DesignSystem-IncomingChatBubble-MetaDataWrapper"
}, [fullName && (firstName || lastName) && /*#__PURE__*/React.createElement(Text$1, {
key: "fullName",
weight: "medium",
size: "small",
"data-test": "DesignSystem-IncomingChatBubble-Name"
}, fullName), time && /*#__PURE__*/React.createElement(Text$1, {
key: "time",
appearance: "subtle",
weight: "medium",
size: "small",
"data-test": "DesignSystem-IncomingChatBubble-Time",
"aria-label": "Time: ".concat(time)
}, time), metaData && /*#__PURE__*/React.createElement(Text$1, {
key: "metaData",
appearance: "subtle",
weight: "medium",
size: "small",
"data-test": "DesignSystem-IncomingChatBubble-MetaData",
"aria-label": metaData
}, metaData), urgentMessage && /*#__PURE__*/React.createElement("div", {
key: "urgentMessage",
"data-test": "DesignSystem-IncomingChatBubble-UrgentMessage",
role: "alert",
"aria-live": "assertive"
}, urgentMessage())].filter(Boolean).map(function (element, index, array) {
return /*#__PURE__*/React.createElement(React.Fragment, {
key: index
}, element, index < array.length - 1 && /*#__PURE__*/React.createElement(MetaSeparator$1, {
key: "separator-".concat(index)
}));
})), /*#__PURE__*/React.createElement(Row, {
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
onFocus: handleFocus,
onBlur: handleBlur,
"data-test": "DesignSystem-IncomingChatBubble-Wrapper"
}, /*#__PURE__*/React.createElement(Column, {
className: styles$7['ChatBubble-boxWrapper'],
"data-test": "DesignSystem-IncomingChatBubble-ChatBoxWrapper"
}, showAvatar && /*#__PURE__*/React.createElement(Avatar, _extends$2({
"data-test": "DesignSystem-IncomingChatBubble-Avatar",
className: "mr-4"
}, avatarData, {
withTooltip: false,
"aria-label": "Avatar of ".concat(fullName)
}), image || icon), /*#__PURE__*/React.createElement("div", {
className: styles$7['ChatBubble-box--incoming'],
"data-test": "DesignSystem-IncomingChatBubble-ChatBox"
}, children)), /*#__PURE__*/React.createElement(Column, {
className: actionBarWrapperClass
}, actionBar && /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-IncomingChatBubble-ActionBar",
className: styles$7['ChatBubble-actionBar--incoming'],
role: "toolbar",
"aria-label": "Action bar"
}, actionBar()))));
};
IncomingBubble.displayName = 'IncomingBubble';
var _excluded$e = ["children", "status", "actionBar", "time", "metaData", "urgentMessage", "failed", "failedMessage", "className"];
var ChatBox$1 = function ChatBox(props) {
var children = props.children;
return /*#__PURE__*/React.createElement("div", {
className: styles$7['ChatBubble-box--outgoing'],
"data-test": "DesignSystem-OutgoingChatBubble-ChatBox"
}, children);
};
var MetaSeparator = function MetaSeparator() {
return /*#__PURE__*/React.createElement("span", {
className: styles$7['ChatBubble-separator'],
"data-test": "DesignSystem-OutgoingChatBubble-Separator",
"aria-hidden": true
});
};
var OutgoingBubble = function OutgoingBubble(props) {
var children = props.children,
status = props.status,
actionBar = props.actionBar,
time = props.time,
metaData = props.metaData,
urgentMessage = props.urgentMessage,
failed = props.failed,
failedMessage = props.failedMessage,
className = props.className,
rest = _objectWithoutProperties(props, _excluded$e);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
showActionBar = _React$useState2[0],
setShowActionBar = _React$useState2[1];
var handleMouseEnter = function handleMouseEnter() {
return setShowActionBar(true);
};
var handleMouseLeave = function handleMouseLeave(e) {
if (!e.currentTarget.contains(document.activeElement)) {
setShowActionBar(false);
}
};
var handleFocus = actionBar ? function () {
return setShowActionBar(true);
} : undefined;
var handleBlur = actionBar ? function (e) {
if (!e.currentTarget.contains(e.relatedTarget)) {
setShowActionBar(false);
}
} : undefined;
var chatBoxClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$7['ChatBubble-box'], true), styles$7['ChatBubble-box--noSuccess'], !status));
var chatBoxWrapperClass = classnames('d-flex', 'align-items-end', 'w-100', className);
var showMetaRow = time || metaData || urgentMessage || failed && failedMessage;
var metaRowClass = classnames(_defineProperty$1({}, 'd-flex justify-content-end align-items-center mb-3', showMetaRow));
var actionBarWrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$7['ChatBubble-actionBarWrapper'], true), styles$7['ChatBubble-actionBarWrapper--hidden'], !showActionBar));
return /*#__PURE__*/React.createElement("div", _extends$2({
className: chatBoxWrapperClass,
"data-test": "DesignSystem-ChatBubble-OutgoingWrapper"
}, rest, {
role: "article"
}), /*#__PURE__*/React.createElement("div", {
className: chatBoxClass
}, showMetaRow && /*#__PURE__*/React.createElement(Row, {
className: metaRowClass
}, failed && failedMessage && /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-OutgoingChatBubble-FailedMessage",
role: "alert",
"aria-live": "assertive"
}, failedMessage()), !failed && /*#__PURE__*/React.createElement(React.Fragment, null, [time && /*#__PURE__*/React.createElement(Text$1, {
key: "time",
appearance: "subtle",
weight: "medium",
size: "small",
"data-test": "DesignSystem-OutgoingChatBubble-Time",
"aria-label": "Time: ".concat(time)
}, time), metaData && /*#__PURE__*/React.createElement(Text$1, {
key: "metaData",
appearance: "subtle",
weight: "medium",
size: "small",
"data-test": "DesignSystem-OutgoingChatBubble-Metadata",
"aria-label": metaData
}, metaData), urgentMessage && /*#__PURE__*/React.createElement("div", {
key: "urgentMessage",
"data-test": "DesignSystem-OutgoingChatBubble-UrgentMessage",
role: "alert",
"aria-live": "assertive"
}, urgentMessage())].filter(Boolean).map(function (element, index, array) {
return /*#__PURE__*/React.createElement(React.Fragment, {
key: index
}, element, index < array.length - 1 && /*#__PURE__*/React.createElement(MetaSeparator, {
key: "separator-".concat(index)
}));
}))), /*#__PURE__*/React.createElement(Row, {
className: "d-flex justify-content-end",
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
onFocus: handleFocus,
onBlur: handleBlur,
"data-test": "DesignSystem-OutgoingChatBubble-Wrapper"
}, /*#__PURE__*/React.createElement(Column, {
className: actionBarWrapperClass
}, actionBar && /*#__PURE__*/React.createElement("div", {
className: styles$7['ChatBubble-actionBar--outgoing'],
"data-test": "DesignSystem-OutgoingChatBubble-ActionBar",
role: "toolbar",
"aria-label": "Action bar"
}, actionBar())), /*#__PURE__*/React.createElement(Column, {
className: styles$7['ChatBubble-boxWrapper'],
"data-test": "DesignSystem-OutgoingChatBubble-BoxWrapper"
}, /*#__PURE__*/React.createElement(ChatBox$1, null, children)))), status && !failed && /*#__PURE__*/React.createElement(Icon, {
name: "check_circle",
appearance: "success",
type: "rounded",
className: "ml-3",
"data-test": "DesignSystem-OutgoingChatBubble-Status",
"aria-label": "Message sent successfully"
}));
};
OutgoingBubble.displayName = 'OutgoingBubble';
var _excluded$d = ["type", "incomingOptions", "outgoingOptions", "children"];
var ChatBubble = function ChatBubble(props) {
var type = props.type,
incomingOptions = props.incomingOptions,
outgoingOptions = props.outgoingOptions,
children = props.children,
rest = _objectWithoutProperties(props, _excluded$d);
if (type === 'incoming') {
return /*#__PURE__*/React.createElement(IncomingBubble, _extends$2({}, incomingOptions, rest), children);
}
return /*#__PURE__*/React.createElement(OutgoingBubble, _extends$2({}, outgoingOptions, rest), children);
};
ChatBubble.displayName = 'ChatBubble';
var css_248z$6 = ".chatInput-module-ChatInput-eHNHD-4-30-3 {\n display: flex;\n flex-direction: row;\n align-items: center;\n border: var(--border-width-2-5) solid var(--secondary-dark);\n padding: var(--spacing-20);\n border-radius: var(--border-radius-10);\n background: var(--white);\n max-width: 100%;\n min-width: var(--spacing-640);\n transition: background-color var(--duration--slow-01) var(--standard-productive-curve),\n border-color var(--duration--slow-01) var(--standard-productive-curve),\n outline var(--duration--slow-01) var(--standard-productive-curve);\n max-height: var(--spacing-440);\n position: relative;\n box-sizing: border-box;\n line-height: var(--font-height-m);\n}\n\n.chatInput-module-ChatInput--expanded-CQXYB-4-30-3 {\n flex-direction: column;\n align-items: flex-start;\n}\n\n.chatInput-module-ChatInput--disabled-2rn8F-4-30-3 {\n background: var(--secondary-lightest);\n cursor: not-allowed;\n}\n\n.chatInput-module-ChatInput-eHNHD-4-30-3:hover {\n background: var(--secondary-lighter);\n}\n\n.chatInput-module-ChatInput-eHNHD-4-30-3:focus-within,\n.chatInput-module-ChatInput-eHNHD-4-30-3:focus,\n.chatInput-module-ChatInput-eHNHD-4-30-3:focus-visible {\n background: var(--white);\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.chatInput-module-ChatInput-textarea-qyw2Y-4-30-3 {\n flex: 1;\n height: var(--spacing-60);\n width: 100%;\n resize: none;\n border: none;\n outline: none;\n transition-delay: var(--duration--slow-01);\n transition: width var(--duration--slow-01) var(--standard-productive-curve);\n box-sizing: border-box;\n cursor: auto;\n padding: var(--spacing-05) 0;\n background: none;\n word-break: break-all;\n overflow-y: scroll;\n font-family: var(--font-family);\n font-weight: var(--font-weight-normal);\n line-height: var(--font-height);\n font-size: var(--font-size);\n color: var(--inverse);\n}\n\n.chatInput-module-ChatInput-textarea-qyw2Y-4-30-3::-moz-placeholder {\n color: var(--inverse-lighter);\n}\n\n.chatInput-module-ChatInput-textarea-qyw2Y-4-30-3::placeholder {\n color: var(--inverse-lighter);\n}\n\n.chatInput-module-ChatInput-eHNHD-4-30-3 textarea:disabled::-moz-placeholder {\n color: var(--inverse-lightest);\n}\n\n.chatInput-module-ChatInput-eHNHD-4-30-3 textarea:disabled::placeholder {\n color: var(--inverse-lightest);\n}\n\n.chatInput-module-ChatInput-actions-TdLpp-4-30-3 {\n display: flex;\n flex-shrink: 0;\n transition: margin var(--duration--slow-01) var(--standard-productive-curve),\n width var(--duration--slow-01) var(--standard-productive-curve);\n margin-left: var(--spacing-20);\n align-items: center;\n}\n\n.chatInput-module-ChatInput-actions--expanded-tSHwG-4-30-3 {\n width: 100%;\n justify-content: flex-end;\n margin-top: var(--spacing-20);\n margin-left: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .chatInput-module-ChatInput-eHNHD-4-30-3,\n .chatInput-module-ChatInput-actions-TdLpp-4-30-3,\n .chatInput-module-ChatInput-textarea-qyw2Y-4-30-3 {\n transition: none;\n }\n}\n";
var styles$6 = {"ChatInput":"chatInput-module-ChatInput-eHNHD-4-30-3","ChatInput--expanded":"chatInput-module-ChatInput--expanded-CQXYB-4-30-3","ChatInput--disabled":"chatInput-module-ChatInput--disabled-2rn8F-4-30-3","ChatInput-textarea":"chatInput-module-ChatInput-textarea-qyw2Y-4-30-3","ChatInput-actions":"chatInput-module-ChatInput-actions-TdLpp-4-30-3","ChatInput-actions--expanded":"chatInput-module-ChatInput-actions--expanded-tSHwG-4-30-3"};
styleInject(css_248z$6);
var _excluded$c = ["defaultValue", "showStopButton", "onChange", "onSend", "disabled", "readOnly", "actionRenderer", "onStopGenerating", "className", "aria-label"];
var ChatInput = function ChatInput(props) {
var defaultValue = props.defaultValue,
showStopButton = props.showStopButton,
onChange = props.onChange,
onSend = props.onSend,
disabled = props.disabled,
readOnly = props.readOnly,
actionRenderer = props.actionRenderer,
onStopGenerating = props.onStopGenerating,
className = props.className,
ariaLabel = props['aria-label'],
rest = _objectWithoutProperties(props, _excluded$c);
var textareaRef = React__default.useRef(null);
var containerRef = React__default.useRef(null);
var _React$useState = React__default.useState(defaultValue),
_React$useState2 = _slicedToArray(_React$useState, 2),
value = _React$useState2[0],
setValue = _React$useState2[1];
var _React$useState3 = React__default.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
isExpanded = _React$useState4[0],
setIsExpanded = _React$useState4[1];
React__default.useEffect(function () {
if (defaultValue) {
resizeTextarea(defaultValue);
}
}, [defaultValue]);
var containerClassNames = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$6.ChatInput, true), styles$6['ChatInput--expanded'], isExpanded), styles$6['ChatInput--disabled'], disabled), className);
var actionsClassNames = classnames(_defineProperty$1(_defineProperty$1({}, styles$6['ChatInput-actions'], true), styles$6['ChatInput-actions--expanded'], isExpanded));
var textareaClassNames = classnames(_defineProperty$1({}, styles$6['ChatInput-textarea'], true));
var handleSend = function handleSend(e) {
onSend && onSend(e, value);
clearChatInput();
};
var resizeTextarea = function resizeTextarea(text) {
if (textareaRef && textareaRef.current && containerRef && containerRef.current) {
var textarea = textareaRef.current;
var textLineHeight = 24;
var newHeight = textarea.scrollHeight;
requestAnimationFrame(function () {
setIsExpanded(function (prevIsExpanded) {
if (newHeight > textLineHeight && !prevIsExpanded) {
return true;
} else if (newHeight <= textLineHeight && prevIsExpanded && text === '') {
return false;
} else if (text === '') {
return false;
}
return prevIsExpanded;
});
});
}
};
var clearChatInput = function clearChatInput() {
setIsExpanded(false);
setValue('');
};
var sendButtonRenderer = function sendButtonRenderer() {
if (showStopButton) {
return /*#__PURE__*/React__default.createElement(Button, {
size: "tiny",
appearance: "alert",
icon: "stop",
"aria-label": "Stop Generating",
largeIcon: true,
"data-test": "DesignSystem-StopButton",
disabled: disabled,
className: actionRenderer ? 'ml-3' : '',
onClick: onStopGenerating
});
}
return /*#__PURE__*/React__default.createElement(Button, {
size: "tiny",
appearance: "primary",
icon: "arrow_upward_alt",
"aria-label": "Send",
largeIcon: true,
"data-test": "DesignSystem-SendButton",
disabled: value === '' || disabled,
className: actionRenderer ? 'ml-3' : '',
onClick: handleSend
});
};
var onChangeHandler = function onChangeHandler(e) {
if (!disabled && !readOnly) {
setValue(e.target.value);
onChange && onChange(e);
resizeTextarea(e.target.value);
}
};
return /*#__PURE__*/React__default.createElement("div", {
className: containerClassNames,
ref: containerRef,
"data-test": "DesignSystem-ChatInput"
}, /*#__PURE__*/React__default.createElement("textarea", _extends$2({
value: value,
ref: textareaRef,
onChange: onChangeHandler,
className: textareaClassNames,
disabled: disabled,
readOnly: readOnly,
"aria-label": ariaLabel,
"data-test": "DesignSystem-ChatInput-textarea"
}, rest)), /*#__PURE__*/React__default.createElement("div", {
className: actionsClassNames,
"data-test": "DesignSystem-ChatInput-actions"
}, actionRenderer && actionRenderer(), sendButtonRenderer()));
};
ChatInput.displayName = 'ChatInput';
ChatInput.defaultProps = {
placeholder: 'Start typing...'
};
var _excluded$b = ["children"];
var Chat = function Chat(props) {
var children = props.children,
rest = _objectWithoutProperties(props, _excluded$b);
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-Chat"
}, rest), children);
};
Chat.DateSeparator = DateSeparator;
Chat.UnreadMessage = UnreadMessage;
Chat.NewMessage = NewMessage;
Chat.TypingIndicator = TypingIndicator;
Chat.ChatBubble = ChatBubble;
Chat.ChatInput = ChatInput;
var css_248z$5 = ".meter-module-Meter-2i-mO-4-30-3 {\n display: flex;\n align-items: center;\n}\n\n.meter-module-Meter-Step-4Z4g3-4-30-3 {\n border-radius: 50%;\n}\n\n.meter-module-Meter-Step--small-8AUww-4-30-3 {\n width: var(--spacing-10);\n height: var(--spacing-20);\n}\n\n.meter-module-Meter-Step--regular-5FlOq-4-30-3 {\n width: var(--spacing-20);\n height: var(--spacing-20);\n}\n\n.meter-module-Meter-Step--large-3n6Li-4-30-3 {\n width: var(--spacing-30);\n height: var(--spacing-30);\n}\n\n.meter-module-Meter-Step--info-dYKw1-4-30-3 {\n background: var(--primary);\n}\n\n.meter-module-Meter-Step--warning-1y3zc-4-30-3 {\n background: var(--warning);\n}\n\n.meter-module-Meter-Step--alert-hNfes-4-30-3 {\n background: var(--alert);\n}\n\n.meter-module-Meter-Step--success-sSboi-4-30-3 {\n background: var(--success);\n}\n";
var styles$5 = {"Meter":"meter-module-Meter-2i-mO-4-30-3","Meter-Step":"meter-module-Meter-Step-4Z4g3-4-30-3","Meter-Step--small":"meter-module-Meter-Step--small-8AUww-4-30-3","Meter-Step--regular":"meter-module-Meter-Step--regular-5FlOq-4-30-3","Meter-Step--large":"meter-module-Meter-Step--large-3n6Li-4-30-3","Meter-Step--info":"meter-module-Meter-Step--info-dYKw1-4-30-3","Meter-Step--warning":"meter-module-Meter-Step--warning-1y3zc-4-30-3","Meter-Step--alert":"meter-module-Meter-Step--alert-hNfes-4-30-3","Meter-Step--success":"meter-module-Meter-Step--success-sSboi-4-30-3"};
styleInject(css_248z$5);
var Step = function Step(props) {
var stepSize = props.stepSize,
type = props.type,
fillColor = props.fillColor,
className = props.className,
emptyColor = props.emptyColor;
var baseProps = extractBaseProps(props);
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$5['Meter-Step'], true), styles$5["Meter-Step--".concat(type)], type), styles$5["Meter-Step--".concat(stepSize)], stepSize), styles$5["Meter-Step--".concat(fillColor)], type === 'filled' && fillColor), className);
var emptyStyle = type === 'empty' ? {
background: emptyColor
} : {};
return /*#__PURE__*/React.createElement("span", _extends$2({
"data-test": "DesignSystem-Meter-Step"
}, baseProps, {
style: emptyStyle,
className: classes,
role: "presentation",
"aria-hidden": "true"
}));
};
Step.displayName = 'Step';
Step.defaultProps = {
stepSize: 'regular',
type: 'empty',
emptyColor: 'var(--secondary-light)'
};
var calculateFilledSteps = function calculateFilledSteps(value, stepCount, min, max) {
if (value < min) return 0;
if (value > max) return stepCount;
var range = max - min;
var stepRange = range / stepCount;
var halfStepRange = stepRange / 2;
var filledSteps = 0;
for (var step = 1; step <= stepCount; step++) {
var lowerBound = min + (step - 1) * stepRange;
var midpoint = lowerBound + halfStepRange;
if (value > midpoint) {
filledSteps = step;
}
}
return filledSteps;
};
var calculatePercentage = function calculatePercentage(value, min, max) {
if (value < min) return 0;
if (value > max) return 100;
return (value - min) / (max - min) * 100;
};
var useMeterValues = function useMeterValues(props) {
var value = props.value,
min = props.min,
max = props.max,
stepCount = props.stepCount,
getFilledSteps = props.getFilledSteps;
var _useState = useState$3(0),
_useState2 = _slicedToArray(_useState, 2),
filledSteps = _useState2[0],
setFilledSteps = _useState2[1];
var _useState3 = useState$3(0),
_useState4 = _slicedToArray(_useState3, 2),
percentage = _useState4[0],
setPercentage = _useState4[1];
useEffect$2(function () {
var steps = getFilledSteps ? getFilledSteps({
value: value,
stepCount: stepCount,
min: min,
max: max
}) : calculateFilledSteps(value, stepCount, min, max);
var percent = calculatePercentage(value, min, max);
setFilledSteps(steps);
setPercentage(percent);
}, [value, min, max, stepCount, getFilledSteps]);
return {
filledSteps: filledSteps,
percentage: percentage,
value: value,
min: min,
max: max,
stepCount: stepCount
};
};
var _excluded$a = ["value", "min", "max", "stepCount", "emptyColor", "fillColor", "getFilledSteps", "meterSize", "className", "renderLabel", "labelSize", "ariaLabel", "showLabel"];
/**
* **Note:**
* - Meter component is using `> half step range` logic to calculate filled steps
* - Use [custom hook `useMeterValues`](https://mds.innovaccer.com/?path=/docs/components-meter-custom-label--custom-label) to get number of filled steps and percentage internally calculated by the component
* - To use a [custom logic](https://mds.innovaccer.com/?path=/docs/components-meter-custom-step-logic--custom-step-logic) to calculate filled steps, you can pass it as `getFilledSteps` prop
* - To render [custom label](https://mds.innovaccer.com/?path=/docs/components-meter-all--all), you can pass a render prop `renderLabel`
*/
var Meter = function Meter(props) {
var value = props.value,
min = props.min,
max = props.max,
stepCount = props.stepCount,
emptyColor = props.emptyColor,
fillColor = props.fillColor,
getFilledSteps = props.getFilledSteps,
meterSize = props.meterSize,
className = props.className,
renderLabel = props.renderLabel,
labelSize = props.labelSize,
ariaLabel = props.ariaLabel,
showLabel = props.showLabel,
rest = _objectWithoutProperties(props, _excluded$a);
var _useMeterValues = useMeterValues({
value: value,
min: min,
max: max,
stepCount: stepCount,
getFilledSteps: getFilledSteps
}),
filledSteps = _useMeterValues.filledSteps,
percentage = _useMeterValues.percentage;
var steps = Array.from({
length: stepCount
}, function (_, index) {
var type = index < filledSteps ? 'filled' : 'empty';
var stepColor = Array.isArray(fillColor) ? fillColor[index % fillColor.length] : fillColor;
var stepClassName = classnames(_defineProperty$1({}, 'mr-2', index < stepCount - 1));
var stepProps = {
stepSize: meterSize,
emptyColor: emptyColor,
type: type,
fillColor: stepColor,
className: stepClassName
};
return /*#__PURE__*/React.createElement(Step, _extends$2({
key: index
}, stepProps));
});
var renderLabelProps = {
filledSteps: filledSteps,
value: value,
min: min,
max: max,
stepCount: stepCount,
percentage: percentage
};
var label = renderLabel ? renderLabel(renderLabelProps) : "".concat(percentage, "%");
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-Meter",
className: classnames(styles$5.Meter, className),
role: "meter",
"aria-valuemin": min,
"aria-valuemax": max,
"aria-valuenow": value,
"aria-label": ariaLabel,
"aria-valuetext": label.toString()
}, rest), steps, (showLabel || renderLabel) && /*#__PURE__*/React.createElement(Text$1, {
className: "ml-4",
size: labelSize || meterSize,
"data-test": "DesignSystem-Meter-Label"
}, label));
};
Meter.displayName = 'Meter';
Meter.defaultProps = {
value: 0,
min: 0,
max: 100,
stepCount: 5,
fillColor: 'info',
meterSize: 'regular',
type: 'empty',
showLabel: true,
emptyColor: 'var(--secondary-light)'
};
Meter.useMeterValues = useMeterValues;
var SegmentedControlContext = /*#__PURE__*/React.createContext(null);
var css_248z$4 = ".segmentedControl-module-SegmentedControl-vkYC9-4-30-3 {\n display: inline-flex;\n align-items: stretch;\n position: relative;\n border-radius: var(--border-radius-10);\n max-width: 100%;\n box-sizing: border-box;\n box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);\n overflow: visible;\n}\n\n.segmentedControl-module-SegmentedControl--expanded-sdHW--4-30-3 {\n width: 100%;\n display: flex;\n}\n\n.segmentedControl-module-SegmentedControl-segment--expanded-A9LYh-4-30-3 {\n flex: 1 1 0;\n min-width: 0;\n width: 0;\n}\n\n.segmentedControl-module-SegmentedControl-segment--equalWidth-FUQl8-4-30-3 {\n width: var(--segment-equal-width, -moz-max-content);\n width: var(--segment-equal-width, max-content);\n flex: 0 0 auto;\n min-width: var(--segment-equal-width, -moz-max-content);\n min-width: var(--segment-equal-width, max-content);\n}\n\n.segmentedControl-module-SegmentedControl-segment--equalWidth-FUQl8-4-30-3 .segmentedControl-module-SegmentedControl-segmentLabel-Jtu-B-4-30-3 {\n overflow: visible;\n text-overflow: clip;\n}\n\n.segmentedControl-module-SegmentedControl-segmentLabel--constrained-DpFL7-4-30-3 {\n overflow: hidden !important;\n text-overflow: ellipsis !important;\n}\n\n.segmentedControl-module-SegmentedControl--disabled-7MH7Y-4-30-3 {\n opacity: var(--opacity-16);\n cursor: not-allowed;\n}\n\n.segmentedControl-module-SegmentedControl-indicator-ac-l3-4-30-3 {\n position: absolute;\n left: 0;\n box-sizing: border-box;\n background-color: var(--primary-ultra-light);\n border: var(--border-width-05) solid var(--primary);\n border-radius: var(--border-radius-10);\n pointer-events: none;\n z-index: 2;\n transition: transform var(--duration--moderate-02) var(--standard-productive-curve),\n width var(--duration--moderate-02) var(--standard-productive-curve),\n top var(--duration--moderate-02) var(--standard-productive-curve),\n height var(--duration--moderate-02) var(--standard-productive-curve);\n}\n\n.segmentedControl-module-SegmentedControl-segment-rqh1W-4-30-3 {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n border: var(--border-width-2-5) solid transparent;\n background-clip: padding-box;\n border-radius: 0;\n background-color: transparent;\n position: relative;\n color: var(--text);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: var(--spacing-15) var(--spacing-30);\n cursor: pointer;\n font-family: inherit;\n font-size: var(--font-size);\n line-height: var(--font-height);\n font-weight: var(--font-weight-normal);\n text-decoration: none;\n max-width: var(--segment-max-width, none);\n min-width: 0;\n z-index: 3;\n transition: color var(--duration--moderate-02) var(--standard-productive-curve),\n background-color var(--duration--moderate-02) var(--standard-productive-curve),\n box-shadow var(--duration--moderate-02) var(--standard-productive-curve),\n font-weight var(--duration--moderate-02) var(--standard-productive-curve);\n}\n\n.segmentedControl-module-SegmentedControl-segment-rqh1W-4-30-3:nth-of-type(1) {\n border-top-left-radius: var(--border-radius-10);\n border-bottom-left-radius: var(--border-radius-10);\n}\n\n.segmentedControl-module-SegmentedControl-segment-rqh1W-4-30-3:last-child {\n border-top-right-radius: var(--border-radius-10);\n border-bottom-right-radius: var(--border-radius-10);\n}\n\n.segmentedControl-module-SegmentedControl-segment-rqh1W-4-30-3:focus {\n outline: none;\n}\n\n.segmentedControl-module-SegmentedControl-segment-rqh1W-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n border-radius: var(--border-radius-10);\n z-index: 100;\n position: relative;\n}\n\n.segmentedControl-module-SegmentedControl-segment-rqh1W-4-30-3:hover:not(.segmentedControl-module-SegmentedControl-segment--disabled-gPHDD-4-30-3):not(.segmentedControl-module-SegmentedControl-segment--selected-l6YDK-4-30-3) {\n background-color: var(--secondary-lighter);\n}\n\n.segmentedControl-module-SegmentedControl-segment-rqh1W-4-30-3:active:not(.segmentedControl-module-SegmentedControl-segment--disabled-gPHDD-4-30-3):not(.segmentedControl-module-SegmentedControl-segment--selected-l6YDK-4-30-3) {\n color: var(--primary-dark);\n}\n\n.segmentedControl-module-SegmentedControl-segment--selected-l6YDK-4-30-3 {\n color: var(--primary-dark);\n cursor: default;\n}\n\n.segmentedControl-module-SegmentedControl-segment--selected-l6YDK-4-30-3.segmentedControl-module-SegmentedControl-segment--disabled-gPHDD-4-30-3 {\n color: var(--primary-dark);\n cursor: not-allowed;\n}\n\n.segmentedControl-module-SegmentedControl-segment--selected-l6YDK-4-30-3.segmentedControl-module-SegmentedControl-segment--disabled-gPHDD-4-30-3::after {\n content: '';\n position: absolute;\n top: var(--border-width-2-5);\n left: var(--border-width-2-5);\n right: var(--border-width-2-5);\n bottom: var(--border-width-2-5);\n background-color: var(--white);\n opacity: var(--opacity-12);\n border-radius: calc(var(--border-radius-10) - var(--border-width-2-5));\n pointer-events: none;\n z-index: 1;\n}\n\n.segmentedControl-module-SegmentedControl-vkYC9-4-30-3:has(.segmentedControl-module-SegmentedControl-segment--selected-l6YDK-4-30-3.segmentedControl-module-SegmentedControl-segment--disabled-gPHDD-4-30-3)\n .segmentedControl-module-SegmentedControl-indicator-ac-l3-4-30-3 {\n opacity: calc(1 - var(--opacity-12));\n}\n\n.segmentedControl-module-SegmentedControl-segment--twoSegmentsSelected-GiHxv-4-30-3 {\n cursor: pointer;\n}\n\n.segmentedControl-module-SegmentedControl-segment--small-e41l--4-30-3 {\n padding: var(--spacing-10) var(--spacing-20);\n height: var(--spacing-60);\n font-size: var(--font-size-s);\n line-height: var(--font-height-s);\n font-weight: var(--font-weight-medium);\n}\n\n.segmentedControl-module-SegmentedControl-segment--regular-NoNqD-4-30-3 {\n padding: var(--spacing-15) var(--spacing-30);\n height: var(--spacing-80);\n line-height: var(--font-height);\n}\n\n.segmentedControl-module-SegmentedControl-segment--large-34x1e-4-30-3 {\n padding: var(--spacing-20) var(--spacing-40);\n height: 40px;\n font-size: var(--font-size-m);\n line-height: var(--font-height-m);\n}\n\n.segmentedControl-module-SegmentedControl-segment--customContent-xIvUV-4-30-3 {\n height: auto;\n}\n\n.segmentedControl-module-SegmentedControl-segment--disabled-gPHDD-4-30-3 {\n cursor: not-allowed;\n color: var(--text-disabled);\n background-color: transparent;\n}\n\n.segmentedControl-module-SegmentedControl-segment--iconOnly-d-e2J-4-30-3 {\n height: var(--spacing-80);\n width: var(--spacing-80);\n padding: var(--spacing-15) var(--spacing-20);\n box-sizing: border-box;\n}\n\n.segmentedControl-module-SegmentedControl-segment--smallIconOnly--K8og-4-30-3 {\n height: var(--spacing-60);\n width: var(--spacing-60);\n padding: var(--spacing-10) var(--spacing-15);\n box-sizing: border-box;\n}\n\n.segmentedControl-module-SegmentedControl-segment--largeIconOnly-qVfJL-4-30-3 {\n height: 40px;\n width: 40px;\n padding: var(--spacing-20) var(--spacing-30);\n box-sizing: border-box;\n}\n\n.segmentedControl-module-SegmentedControl-segmentIcon-X6neD-4-30-3 {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin: 0;\n transition: color var(--duration--moderate-02) var(--standard-productive-curve);\n}\n\n.segmentedControl-module-SegmentedControl-segmentIcon--only-Tb-d5-4-30-3 {\n margin: 0;\n}\n\n.segmentedControl-module-SegmentedControl-segmentIcon--small-phj9R-4-30-3 {\n margin-right: var(--spacing-10);\n}\n\n.segmentedControl-module-SegmentedControl-segmentIcon--regular-F6UoI-4-30-3 {\n margin-right: var(--spacing-15);\n}\n\n.segmentedControl-module-SegmentedControl-segmentIcon--large-5k6tL-4-30-3 {\n margin-right: var(--spacing-20);\n}\n\n.segmentedControl-module-SegmentedControl-segmentLabel-Jtu-B-4-30-3 {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: color var(--duration--moderate-02) var(--standard-productive-curve);\n}\n\n.segmentedControl-module-SegmentedControl-divider-CanUi-4-30-3 {\n width: var(--border-width-2-5);\n background-color: var(--secondary);\n align-self: center;\n flex-shrink: 0;\n transition: opacity var(--duration--moderate-02) var(--standard-productive-curve);\n}\n\n.segmentedControl-module-SegmentedControl-divider--hidden-CUMGn-4-30-3 {\n opacity: 0;\n pointer-events: none;\n}\n\n.segmentedControl-module-SegmentedControl-divider--small-gv4uV-4-30-3 {\n height: 10px;\n}\n\n.segmentedControl-module-SegmentedControl-divider--regular-bWrw6-4-30-3 {\n height: var(--spacing-30);\n}\n\n.segmentedControl-module-SegmentedControl-divider--large-6pJIA-4-30-3 {\n height: 14px;\n}\n\n@media (prefers-contrast: high) {\n .segmentedControl-module-SegmentedControl-segment-rqh1W-4-30-3:focus-visible {\n outline-width: var(--border-width-10);\n outline-offset: var(--spacing-05);\n }\n\n .segmentedControl-module-SegmentedControl-segment--selected-l6YDK-4-30-3 {\n border-color: var(--primary);\n }\n}\n";
var styles$4 = {"SegmentedControl":"segmentedControl-module-SegmentedControl-vkYC9-4-30-3","SegmentedControl--expanded":"segmentedControl-module-SegmentedControl--expanded-sdHW--4-30-3","SegmentedControl-segment--expanded":"segmentedControl-module-SegmentedControl-segment--expanded-A9LYh-4-30-3","SegmentedControl-segment--equalWidth":"segmentedControl-module-SegmentedControl-segment--equalWidth-FUQl8-4-30-3","SegmentedControl-segmentLabel":"segmentedControl-module-SegmentedControl-segmentLabel-Jtu-B-4-30-3","SegmentedControl-segmentLabel--constrained":"segmentedControl-module-SegmentedControl-segmentLabel--constrained-DpFL7-4-30-3","SegmentedControl--disabled":"segmentedControl-module-SegmentedControl--disabled-7MH7Y-4-30-3","SegmentedControl-indicator":"segmentedControl-module-SegmentedControl-indicator-ac-l3-4-30-3","SegmentedControl-segment":"segmentedControl-module-SegmentedControl-segment-rqh1W-4-30-3","SegmentedControl-segment--disabled":"segmentedControl-module-SegmentedControl-segment--disabled-gPHDD-4-30-3","SegmentedControl-segment--selected":"segmentedControl-module-SegmentedControl-segment--selected-l6YDK-4-30-3","SegmentedControl-segment--twoSegmentsSelected":"segmentedControl-module-SegmentedControl-segment--twoSegmentsSelected-GiHxv-4-30-3","SegmentedControl-segment--small":"segmentedControl-module-SegmentedControl-segment--small-e41l--4-30-3","SegmentedControl-segment--regular":"segmentedControl-module-SegmentedControl-segment--regular-NoNqD-4-30-3","SegmentedControl-segment--large":"segmentedControl-module-SegmentedControl-segment--large-34x1e-4-30-3","SegmentedControl-segment--customContent":"segmentedControl-module-SegmentedControl-segment--customContent-xIvUV-4-30-3","SegmentedControl-segment--iconOnly":"segmentedControl-module-SegmentedControl-segment--iconOnly-d-e2J-4-30-3","SegmentedControl-segment--smallIconOnly":"segmentedControl-module-SegmentedControl-segment--smallIconOnly--K8og-4-30-3","SegmentedControl-segment--largeIconOnly":"segmentedControl-module-SegmentedControl-segment--largeIconOnly-qVfJL-4-30-3","SegmentedControl-segmentIcon":"segmentedControl-module-SegmentedControl-segmentIcon-X6neD-4-30-3","SegmentedControl-segmentIcon--only":"segmentedControl-module-SegmentedControl-segmentIcon--only-Tb-d5-4-30-3","SegmentedControl-segmentIcon--small":"segmentedControl-module-SegmentedControl-segmentIcon--small-phj9R-4-30-3","SegmentedControl-segmentIcon--regular":"segmentedControl-module-SegmentedControl-segmentIcon--regular-F6UoI-4-30-3","SegmentedControl-segmentIcon--large":"segmentedControl-module-SegmentedControl-segmentIcon--large-5k6tL-4-30-3","SegmentedControl-divider":"segmentedControl-module-SegmentedControl-divider-CanUi-4-30-3","SegmentedControl-divider--hidden":"segmentedControl-module-SegmentedControl-divider--hidden-CUMGn-4-30-3","SegmentedControl-divider--small":"segmentedControl-module-SegmentedControl-divider--small-gv4uV-4-30-3","SegmentedControl-divider--regular":"segmentedControl-module-SegmentedControl-divider--regular-bWrw6-4-30-3","SegmentedControl-divider--large":"segmentedControl-module-SegmentedControl-divider--large-6pJIA-4-30-3"};
styleInject(css_248z$4);
var iconSizeMap = {
small: 14,
regular: 16,
large: 20
};
var SegmentedControlItem = function SegmentedControlItem(props) {
var children = props.children,
label = props.label,
icon = props.icon,
iconType = props.iconType,
tooltip = props.tooltip,
disabled = props.disabled,
value = props.value,
className = props.className,
ariaLabel = props['aria-label'],
ariaLabelledBy = props['aria-labelledby'];
var baseProps = extractBaseProps(props);
var labelRef = React.useRef(null);
var buttonRef = React.useRef(null);
var segmentProps = React.useContext(SegmentedControlContext);
if (!segmentProps) {
console.warn('SegmentedControl.Item must be used inside SegmentedControl');
return null;
}
var size = segmentProps.size,
selectedIndex = segmentProps.selectedIndex,
onSelect = segmentProps.onSelect,
index = segmentProps.index,
expanded = segmentProps.expanded,
isEqualWidth = segmentProps.isEqualWidth,
controlDisabled = segmentProps.disabled,
isTwoSegments = segmentProps.isTwoSegments,
isConstrained = segmentProps.isConstrained,
registerButtonRef = segmentProps.registerButtonRef;
var isSelected = selectedIndex === index;
var isDisabled = disabled || controlDisabled;
var hasChildren = children != null;
var isIconOnly = !hasChildren && icon && !label;
var segmentClass = classnames(styles$4['SegmentedControl-segment'], styles$4["SegmentedControl-segment--".concat(size)], _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$4['SegmentedControl-segment--selected'], isSelected), styles$4['SegmentedControl-segment--disabled'], isDisabled), styles$4['SegmentedControl-segment--iconOnly'], isIconOnly), styles$4['SegmentedControl-segment--expanded'], expanded), styles$4['SegmentedControl-segment--equalWidth'], isEqualWidth), styles$4['SegmentedControl-segment--twoSegmentsSelected'], isTwoSegments && isSelected), styles$4["SegmentedControl-segment--".concat(size, "IconOnly")], isIconOnly), styles$4['SegmentedControl-segment--customContent'], hasChildren), className);
var renderIcon = function renderIcon() {
if (hasChildren || !icon) return null;
var iconClass = classnames(styles$4['SegmentedControl-segmentIcon'], _defineProperty$1(_defineProperty$1({}, styles$4['SegmentedControl-segmentIcon--only'], !label), styles$4["SegmentedControl-segmentIcon--".concat(size)], label));
return /*#__PURE__*/React.createElement("div", {
className: iconClass
}, typeof icon === 'string' ? /*#__PURE__*/React.createElement(Icon, {
name: icon,
type: iconType,
size: iconSizeMap[size]
}) : icon);
};
var renderLabel = function renderLabel() {
if (hasChildren || !label) return null;
var labelClass = classnames(styles$4['SegmentedControl-segmentLabel'], _defineProperty$1({}, styles$4['SegmentedControl-segmentLabel--constrained'], isConstrained));
return /*#__PURE__*/React.createElement("span", {
ref: labelRef,
className: labelClass
}, label);
};
var handleKeyDown = React.useCallback(function (event) {
if (event.key === 'Escape') {
event.currentTarget.blur();
}
}, []);
var button = /*#__PURE__*/React.createElement("button", _extends$2({
ref: function ref(node) {
buttonRef.current = node;
registerButtonRef === null || registerButtonRef === void 0 || registerButtonRef(index, node);
},
type: "button",
role: isTwoSegments ? undefined : 'radio',
className: segmentClass,
disabled: isDisabled,
tabIndex: isDisabled ? -1 : isSelected ? 0 : -1,
"data-test": "DesignSystem-SegmentedControl-Item",
"aria-label": ariaLabel || (isIconOnly && tooltip ? tooltip : undefined),
"aria-labelledby": ariaLabelledBy,
"aria-checked": isTwoSegments ? undefined : isSelected,
"aria-pressed": isTwoSegments ? isSelected : undefined
}, baseProps, {
onClick: function onClick() {
if (!isDisabled && onSelect) {
onSelect(index, value);
}
},
onKeyDown: handleKeyDown
}), hasChildren ? children : /*#__PURE__*/React.createElement(React.Fragment, null, renderIcon(), renderLabel()));
if (tooltip) {
return /*#__PURE__*/React.createElement(Tooltip, {
tooltip: tooltip
}, button);
}
if (!hasChildren && label && typeof label === 'string') {
return /*#__PURE__*/React.createElement(Tooltip, {
tooltip: label,
showOnTruncation: true,
elementRef: labelRef,
position: "bottom"
}, button);
}
return button;
};
SegmentedControlItem.defaultProps = {
disabled: false
};
/**
* Calculates the position and dimensions of the selection indicator
* based on the selected button and surrounding dividers.
*/
var calculateIndicatorPosition = function calculateIndicatorPosition(params) {
var selectedButton = params.selectedButton,
container = params.container,
selectedIndex = params.selectedIndex,
totalChildren = params.totalChildren,
dividerRefs = params.dividerRefs;
var containerStyles = window.getComputedStyle(container);
var borderWidth = parseFloat(containerStyles.borderLeftWidth) || 0;
var borderTop = parseFloat(containerStyles.borderTopWidth) || 0;
var containerRect = container.getBoundingClientRect();
var buttonRect = selectedButton.getBoundingClientRect();
var left = buttonRect.left - containerRect.left;
var width = buttonRect.width;
var top = -borderTop;
var height = buttonRect.height + borderTop * 2;
// Include divider widths in indicator calculation
if (selectedIndex > 0) {
var leftDivider = dividerRefs[selectedIndex - 1];
if (leftDivider) {
var dividerRect = leftDivider.getBoundingClientRect();
left -= dividerRect.width;
width += dividerRect.width;
}
}
if (selectedIndex < totalChildren - 1) {
var rightDivider = dividerRefs[selectedIndex];
if (rightDivider) {
width += rightDivider.getBoundingClientRect().width;
}
}
// Adjust for borders on first and last segments
if (selectedIndex === 0) {
left = -borderWidth;
width += borderWidth;
}
if (selectedIndex === totalChildren - 1) {
width += borderWidth;
}
return {
left: left,
width: width,
top: top,
height: height
};
};
/**
* Measures the natural content width of all buttons and returns
* the maximum width (constrained by maxWidth if provided).
*/
var measureButtonWidths = function measureButtonWidths(params) {
var _buttons$;
var buttons = params.buttons,
maxWidth = params.maxWidth;
if (buttons.length === 0) {
return {
equalWidth: null,
isConstrained: false
};
}
// Store original styles
var originalStyles = buttons.map(function (button) {
return {
width: button.style.width,
minWidth: button.style.minWidth
};
});
// Temporarily reset to auto to measure natural content width
buttons.forEach(function (button) {
button.style.width = 'auto';
button.style.minWidth = 'auto';
});
// Force layout recalculation
void ((_buttons$ = buttons[0]) === null || _buttons$ === void 0 ? void 0 : _buttons$.offsetHeight);
// Measure natural widths
var widths = buttons.map(function (button) {
return button.scrollWidth;
});
var maxContentWidth = Math.max.apply(Math, _toConsumableArray(widths));
// Restore original styles
buttons.forEach(function (button, index) {
button.style.width = originalStyles[index].width;
button.style.minWidth = originalStyles[index].minWidth;
});
// Calculate final width
if (maxContentWidth > 0) {
var maxWidthValue = typeof maxWidth === 'number' ? maxWidth : parseFloat(maxWidth || '') || Infinity;
var finalWidth = Math.min(maxContentWidth, maxWidthValue);
var constrained = maxWidth !== undefined && maxContentWidth > maxWidthValue;
return {
equalWidth: finalWidth,
isConstrained: constrained
};
}
return {
equalWidth: null,
isConstrained: false
};
};
var SegmentedControl = function SegmentedControl(props) {
var activeIndex = props.activeIndex,
onChange = props.onChange,
_props$size = props.size,
size = _props$size === void 0 ? 'regular' : _props$size,
_props$expanded = props.expanded,
expanded = _props$expanded === void 0 ? false : _props$expanded,
_props$maxWidth = props.maxWidth,
maxWidth = _props$maxWidth === void 0 ? '256px' : _props$maxWidth,
_props$isEqualWidth = props.isEqualWidth,
isEqualWidth = _props$isEqualWidth === void 0 ? true : _props$isEqualWidth,
_props$disabled = props.disabled,
disabled = _props$disabled === void 0 ? false : _props$disabled,
className = props.className,
children = props.children,
ariaLabel = props['aria-label'],
ariaLabelledby = props['aria-labelledby'];
var baseProps = extractBaseProps(props);
var childrenArray = React.Children.toArray(children);
var validChildren = childrenArray.filter(function (child) {
return /*#__PURE__*/React.isValidElement(child);
});
var totalChildren = validChildren.length;
var _React$useState = React.useState(activeIndex !== undefined && activeIndex < totalChildren ? activeIndex : 0),
_React$useState2 = _slicedToArray(_React$useState, 2),
internalIndex = _React$useState2[0],
setInternalIndex = _React$useState2[1];
React.useEffect(function () {
if (activeIndex !== undefined && activeIndex < totalChildren) {
setInternalIndex(activeIndex);
}
}, [activeIndex, totalChildren]);
var selectedIndex = activeIndex !== undefined ? Math.max(0, Math.min(activeIndex, totalChildren - 1)) : Math.max(0, Math.min(internalIndex, totalChildren - 1));
var containerRef = React.useRef(null);
var indicatorRef = React.useRef(null);
var _React$useState3 = React.useState({
left: 0,
width: 0,
top: 0,
height: 0
}),
_React$useState4 = _slicedToArray(_React$useState3, 2),
indicatorStyle = _React$useState4[0],
setIndicatorStyle = _React$useState4[1];
var buttonRefs = React.useRef([]);
var dividerRefs = React.useRef([]);
var _React$useState5 = React.useState(null),
_React$useState6 = _slicedToArray(_React$useState5, 2),
equalWidth = _React$useState6[0],
setEqualWidth = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
isConstrained = _React$useState8[0],
setIsConstrained = _React$useState8[1];
React.useEffect(function () {
buttonRefs.current = buttonRefs.current.slice(0, totalChildren);
dividerRefs.current = dividerRefs.current.slice(0, Math.max(0, totalChildren - 1));
}, [totalChildren]);
React.useLayoutEffect(function () {
if (expanded || !isEqualWidth) {
setEqualWidth(null);
setIsConstrained(false);
return;
}
// Use nested RAF to ensure DOM is fully updated before measuring
requestAnimationFrame(function () {
requestAnimationFrame(function () {
var buttons = buttonRefs.current.filter(Boolean);
var result = measureButtonWidths({
buttons: buttons,
maxWidth: maxWidth
});
setEqualWidth(result.equalWidth);
setIsConstrained(result.isConstrained);
});
});
}, [expanded, isEqualWidth, totalChildren, children, maxWidth]);
var isInitialRender = React.useRef(true);
// Use useLayoutEffect to measure and update indicator synchronously after layout
React.useLayoutEffect(function () {
var selectedButton = buttonRefs.current[selectedIndex];
var container = containerRef.current;
var indicator = indicatorRef.current;
if (!selectedButton || !container || !indicator) return;
// Disable transition on first render to avoid animation from initial position
if (isInitialRender.current) {
indicator.style.transition = 'none';
}
var dimensions = calculateIndicatorPosition({
selectedButton: selectedButton,
container: container,
selectedIndex: selectedIndex,
totalChildren: totalChildren,
dividerRefs: dividerRefs.current
});
setIndicatorStyle(dimensions);
if (isInitialRender.current) {
requestAnimationFrame(function () {
requestAnimationFrame(function () {
if (indicator) {
indicator.style.transition = '';
}
isInitialRender.current = false;
});
});
}
}, [selectedIndex, size, expanded, isEqualWidth, equalWidth, maxWidth, totalChildren]);
React.useEffect(function () {
var handleResize = function handleResize() {
var selectedButton = buttonRefs.current[selectedIndex];
var container = containerRef.current;
var indicator = indicatorRef.current;
if (!selectedButton || !container || !indicator) return;
var dimensions = calculateIndicatorPosition({
selectedButton: selectedButton,
container: container,
selectedIndex: selectedIndex,
totalChildren: totalChildren,
dividerRefs: dividerRefs.current
});
setIndicatorStyle(dimensions);
};
window.addEventListener('resize', handleResize);
return function () {
return window.removeEventListener('resize', handleResize);
};
}, [selectedIndex, totalChildren]);
var handleKeyDown = React.useCallback(function (event) {
if (disabled) return;
var enabledIndices = validChildren.map(function (child, idx) {
return {
child: child,
idx: idx
};
}).filter(function (_ref) {
var child = _ref.child;
return !child.props.disabled;
}).map(function (_ref2) {
var idx = _ref2.idx;
return idx;
});
if (enabledIndices.length === 0) return;
var nextIndex = selectedIndex;
var currentEnabledIdx = enabledIndices.indexOf(selectedIndex);
switch (event.key) {
case 'ArrowRight':
case 'ArrowDown':
event.preventDefault();
if (currentEnabledIdx === -1) {
nextIndex = enabledIndices[0];
} else {
nextIndex = enabledIndices[(currentEnabledIdx + 1) % enabledIndices.length];
}
break;
case 'ArrowLeft':
case 'ArrowUp':
event.preventDefault();
if (currentEnabledIdx === -1) {
nextIndex = enabledIndices[enabledIndices.length - 1];
} else {
nextIndex = enabledIndices[(currentEnabledIdx - 1 + enabledIndices.length) % enabledIndices.length];
}
break;
case 'Home':
event.preventDefault();
nextIndex = enabledIndices[0];
break;
case 'End':
event.preventDefault();
nextIndex = enabledIndices[enabledIndices.length - 1];
break;
default:
return;
}
if (nextIndex !== selectedIndex) {
var _validChildren$nextIn;
var nextValue = (_validChildren$nextIn = validChildren[nextIndex]) === null || _validChildren$nextIn === void 0 ? void 0 : _validChildren$nextIn.props.value;
emitChange(nextIndex, nextValue);
// Focus the button after setting state so it receives the new tabIndex=0
requestAnimationFrame(function () {
var _buttonRefs$current$n;
(_buttonRefs$current$n = buttonRefs.current[nextIndex]) === null || _buttonRefs$current$n === void 0 || _buttonRefs$current$n.focus();
});
}
}, [selectedIndex, disabled, validChildren]);
var emitChange = function emitChange(index, value) {
if (disabled || index < 0 || index >= totalChildren) return;
var child = validChildren[index];
if (child !== null && child !== void 0 && child.props.disabled) return;
var targetIndex = index;
var targetValue = value;
if (totalChildren === 2 && selectedIndex === index) {
var _validChildren$otherI, _validChildren$otherI2;
var otherIndex = index === 0 ? 1 : 0;
if ((_validChildren$otherI = validChildren[otherIndex]) !== null && _validChildren$otherI !== void 0 && _validChildren$otherI.props.disabled) return;
targetIndex = otherIndex;
targetValue = (_validChildren$otherI2 = validChildren[otherIndex]) === null || _validChildren$otherI2 === void 0 ? void 0 : _validChildren$otherI2.props.value;
}
if (activeIndex === undefined) {
setInternalIndex(targetIndex);
}
onChange === null || onChange === void 0 || onChange(targetIndex, targetValue);
};
var controlClass = classnames(styles$4['SegmentedControl'], styles$4["SegmentedControl--".concat(size)], _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$4['SegmentedControl--expanded'], expanded), styles$4['SegmentedControl--equalWidth'], !expanded && isEqualWidth), styles$4['SegmentedControl--disabled'], disabled), styles$4['SegmentedControl--twoSegments'], totalChildren === 2), className);
var containerStyle = {
maxWidth: '100%'
};
if (!expanded) {
if (maxWidth) {
containerStyle['--segment-max-width'] = typeof maxWidth === 'number' ? "".concat(maxWidth, "px") : maxWidth;
}
if (isEqualWidth && equalWidth) {
containerStyle['--segment-equal-width'] = "".concat(equalWidth, "px");
}
}
if (!validChildren.length) return null;
return /*#__PURE__*/React.createElement("div", _extends$2({
className: controlClass,
style: containerStyle,
ref: containerRef,
role: totalChildren === 2 ? 'group' : 'radiogroup',
tabIndex: -1,
"data-test": "DesignSystem-SegmentedControl",
onKeyDown: handleKeyDown
}, baseProps, {
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby
}), /*#__PURE__*/React.createElement("div", {
ref: indicatorRef,
className: styles$4['SegmentedControl-indicator'],
style: {
transform: "translateX(".concat(indicatorStyle.left, "px)"),
width: "".concat(indicatorStyle.width, "px"),
top: "".concat(indicatorStyle.top, "px"),
height: "".concat(indicatorStyle.height, "px")
}
}), validChildren.map(function (child, index) {
var _child$key, _child$key2;
var contextValue = {
size: size,
selectedIndex: selectedIndex,
onSelect: emitChange,
index: index,
registerButtonRef: function registerButtonRef(i, node) {
buttonRefs.current[i] = node;
},
expanded: expanded,
isEqualWidth: !expanded && isEqualWidth,
disabled: disabled,
isTwoSegments: totalChildren === 2,
isConstrained: !expanded && isEqualWidth && isConstrained
};
var segmentNode = /*#__PURE__*/React.createElement(SegmentedControlContext.Provider, {
key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index,
value: contextValue
}, /*#__PURE__*/React.cloneElement(child, {
disabled: child.props.disabled
}));
if (index === validChildren.length - 1) {
return segmentNode;
}
var isDividerHidden = index === selectedIndex || index === selectedIndex - 1;
var dividerClass = classnames(styles$4['SegmentedControl-divider'], styles$4["SegmentedControl-divider--".concat(size)], _defineProperty$1({}, styles$4['SegmentedControl-divider--hidden'], isDividerHidden));
return /*#__PURE__*/React.createElement(React.Fragment, {
key: (_child$key2 = child.key) !== null && _child$key2 !== void 0 ? _child$key2 : index
}, segmentNode, /*#__PURE__*/React.createElement("span", {
ref: function ref(node) {
dividerRefs.current[index] = node;
},
className: dividerClass
}));
}));
};
SegmentedControl.displayName = 'SegmentedControl';
SegmentedControl.defaultProps = {
size: 'regular',
expanded: false,
maxWidth: '256px',
isEqualWidth: true,
disabled: false
};
SegmentedControl.Item = SegmentedControlItem;
var img$2 = "data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 8C4.86599 8 8 4.86599 8 1C8 4.86599 11.134 8 15 8C11.134 8 8 11.134 8 15C8 11.134 4.86599 8 1 8Z' fill='url(%23paint0_linear_64038_5798)'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 8C4.86599 8 8 4.86599 8 1C8 4.86599 11.134 8 15 8C11.134 8 8 11.134 8 15C8 11.134 4.86599 8 1 8Z' fill='url(%23paint1_linear_64038_5798)' fill-opacity='0.24'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 8C4.86599 8 8 4.86599 8 1C8 4.86599 11.134 8 15 8C11.134 8 8 11.134 8 15C8 11.134 4.86599 8 1 8Z' fill='none' stroke='%23CA1822' stroke-width='1' vector-effect='non-scaling-stroke' clip-path='url(%23clip0_64038_5798)'/%3e%3cdefs%3e%3cclipPath id='clip0_64038_5798'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 8C4.86599 8 8 4.86599 8 1C8 4.86599 11.134 8 15 8C11.134 8 8 11.134 8 15C8 11.134 4.86599 8 1 8Z'/%3e%3c/clipPath%3e%3clinearGradient id='paint0_linear_64038_5798' x1='3.4375' y1='2.4375' x2='12.4063' y2='13' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='%23E81F76' stop-opacity='0.8'/%3e%3cstop offset='1' stop-color='%23EB5324'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear_64038_5798' x1='9.3125' y1='10.8438' x2='12.5937' y2='15.6563' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='%23FFC208' stop-opacity='0'/%3e%3cstop offset='1' stop-color='%23FFC208'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e";
var css_248z$3 = ".button-module-AIButton-Hcde0-4-30-3 {\n padding: var(--spacing-20) var(--spacing-30);\n border-radius: var(--border-radius-10);\n cursor: pointer;\n border: 0;\n font-family: var(--font-family);\n font-weight: var(--font-weight-normal);\n font-size: var(--font-size);\n line-height: var(--font-height-s);\n display: flex;\n align-items: center;\n color: var(--inverse);\n background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);\n}\n\n.button-module-AIButton-Hcde0-4-30-3:hover {\n background: linear-gradient(116deg, #fbe1c9 14.17%, #f8c5c6 50.06%, #f9cbdc 85.01%);\n}\n\n.button-module-AIButton-Hcde0-4-30-3:active {\n background: linear-gradient(106deg, #fad1ae 20.06%, #f5aea9 44.48%, #f4a0ad 67.83%, #f6b3ce 86.55%);\n}\n\n.button-module-AIButton-Hcde0-4-30-3:disabled {\n cursor: not-allowed;\n opacity: var(--opacity-10);\n background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);\n}\n\n.button-module-AIButton-Hcde0-4-30-3:focus {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n/* Button Icon */\n\n.button-module-AIButton-Icon-ITLNV-4-30-3 {\n margin-right: var(--spacing-20);\n}\n";
var styles$3 = {"AIButton":"button-module-AIButton-Hcde0-4-30-3","AIButton-Icon":"button-module-AIButton-Icon-ITLNV-4-30-3"};
styleInject(css_248z$3);
var _excluded$9 = ["appearance", "className", "children", "disabled", "withSparkle"];
var AIButton = function AIButton(props) {
props.appearance;
var className = props.className,
children = props.children,
disabled = props.disabled,
withSparkle = props.withSparkle,
rest = _objectWithoutProperties(props, _excluded$9);
var buttonClassNames = classnames(_defineProperty$1({}, styles$3.AIButton, true), className);
var IconClassNames = classnames(_defineProperty$1({}, styles$3['AIButton-Icon'], true));
return /*#__PURE__*/React.createElement("button", _extends$2({
className: buttonClassNames,
"data-test": "DesignSystem-AI-Button",
disabled: disabled
}, rest), withSparkle && /*#__PURE__*/React.createElement("img", {
src: img$2,
alt: "",
"aria-hidden": "true",
width: 16,
height: 16,
className: IconClassNames,
"data-test": "DesignSystem-AI-Button-Icon"
}), children);
};
AIButton.defaultProps = {
type: 'button',
withSparkle: true
};
var img$1 = "data:image/svg+xml,%3csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 3C18 11.2843 11.2843 18 3 18C11.2843 18 18 24.7157 18 33C18 24.7157 24.7157 18 33 18C24.7157 18 18 11.2843 18 3ZM33 24C33 28.9706 28.9706 33 24 33C28.9706 33 33 37.0294 33 42C33 37.0294 37.0294 33 42 33C37.0294 33 33 28.9706 33 24Z' fill='url(%23paint0_linear_3166_11159)'/%3e%3cdefs%3e%3clinearGradient id='paint0_linear_3166_11159' x1='16.5' y1='9.75' x2='24.8926' y2='36.3113' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='%23FFC208'/%3e%3cstop offset='1' stop-color='%23E31C79'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e";
var v$3 = "4.8.0";
var meta$3 = {
g: "LottieFiles AE 3.5.4",
a: "",
k: "",
d: "",
tc: ""
};
var fr$3 = 60;
var ip$3 = 0;
var op$3 = 120;
var w$3 = 400;
var h$3 = 400;
var nm$3 = "A";
var assets$3 = [
{
id: "comp_0",
layers: [
{
ind: 1,
ty: 4,
nm: "L",
sr: 1,
ks: {
o: {
a: 0,
k: 100
},
r: {
a: 0,
k: 0
},
p: {
a: 1,
k: [
{
i: {
x: 0.667,
y: 1
},
o: {
x: 0.167,
y: 0.167
},
t: 0,
s: [
163,
163,
0
],
to: [
0,
0,
0
],
ti: [
0,
0,
0
]
},
{
i: {
x: 0.667,
y: 1
},
o: {
x: 0.333,
y: 0
},
t: 20,
s: [
163,
128,
0
],
to: [
0,
0,
0
],
ti: [
0,
0,
0
]
},
{
i: {
x: 0.667,
y: 1
},
o: {
x: 0.333,
y: 0
},
t: 45,
s: [
163,
173,
0
],
to: [
0,
0,
0
],
ti: [
0,
0,
0
]
},
{
t: 55,
s: [
163,
163,
0
]
}
]
},
a: {
a: 0,
k: [
-37.5,
-37.5,
0
]
},
s: {
a: 0,
k: [
100,
100,
100
]
}
},
ao: 0,
shapes: [
{
ind: 0,
ty: "sh",
ks: {
a: 0,
k: {
i: [
[
0,
69.036
],
[
69.036,
0
],
[
0,
-69.036
],
[
-69.036,
0
]
],
o: [
[
0,
69.036
],
[
69.036,
0
],
[
0,
-69.036
],
[
-69.036,
0
]
],
v: [
[
-37.5,
-162.5
],
[
-162.5,
-37.5
],
[
-37.5,
87.5
],
[
87.5,
-37.5
]
],
c: true
}
},
nm: "P"
},
{
ty: "mm",
mm: 1,
nm: "M"
},
{
ty: "gf",
o: {
a: 0,
k: 100
},
r: 1,
g: {
p: 3,
k: {
a: 0,
k: [
0,
1,
0.761,
0.031,
0.5,
0.945,
0.435,
0.253,
1,
0.89,
0.11,
0.475
]
}
},
s: {
a: 0,
k: [
-47.5,
-114
]
},
e: {
a: 0,
k: [
49.962,
105.608
]
},
t: 1,
nm: "G"
}
],
ip: 0,
op: 120,
st: 0
},
{
ind: 2,
ty: 4,
nm: "S",
sr: 1,
ks: {
o: {
a: 0,
k: 100
},
r: {
a: 0,
k: 0
},
p: {
a: 1,
k: [
{
i: {
x: 0.571,
y: 0.571
},
o: {
x: 0.167,
y: 0.167
},
t: 0,
s: [
287,
287,
0
],
to: [
0,
0,
0
],
ti: [
0,
0,
0
]
},
{
i: {
x: 0.704,
y: 1
},
o: {
x: 0.332,
y: 0.152
},
t: 15,
s: [
287,
287,
0
],
to: [
0,
0,
0
],
ti: [
0,
0,
0
]
},
{
i: {
x: 0.667,
y: 1
},
o: {
x: 0.333,
y: 0
},
t: 30,
s: [
287,
270,
0
],
to: [
0,
0,
0
],
ti: [
0,
0,
0
]
},
{
i: {
x: 0.667,
y: 1
},
o: {
x: 0.333,
y: 0
},
t: 60,
s: [
287,
293,
0
],
to: [
0,
0,
0
],
ti: [
0,
0,
0
]
},
{
t: 67,
s: [
287,
287,
0
]
}
]
},
a: {
a: 0,
k: [
87.5,
87.5,
0
]
},
s: {
a: 0,
k: [
100,
100,
100
]
}
},
ao: 0,
shapes: [
{
ind: 0,
ty: "sh",
ks: {
a: 0,
k: {
i: [
[
0,
41.421
],
[
41.421,
0
],
[
0,
-41.421
],
[
-41.421,
0
]
],
o: [
[
0,
41.421
],
[
41.421,
0
],
[
0,
-41.421
],
[
-41.421,
0
]
],
v: [
[
87.5,
12.5
],
[
12.5,
87.5
],
[
87.5,
162.5
],
[
162.5,
87.5
]
],
c: true
}
},
nm: "P"
},
{
ty: "mm",
mm: 1,
nm: "M"
},
{
ty: "gf",
o: {
a: 0,
k: 100
},
r: 1,
g: {
p: 3,
k: {
a: 0,
k: [
0,
1,
0.761,
0.031,
0.5,
0.945,
0.435,
0.253,
1,
0.89,
0.11,
0.475
]
}
},
s: {
a: 0,
k: [
-47.5,
-114
]
},
e: {
a: 0,
k: [
49.962,
105.608
]
},
t: 1,
nm: "G"
}
],
ip: 0,
op: 120,
st: 0
}
]
}
];
var layers$3 = [
{
ind: 1,
ty: 4,
nm: "G",
sr: 1,
ks: {
o: {
a: 0,
k: 100
},
r: {
a: 0,
k: 0
},
p: {
a: 0,
k: [
200,
200,
0
]
},
a: {
a: 0,
k: [
0,
0,
0
]
},
s: {
a: 0,
k: [
140,
140,
100
]
}
},
ao: 0,
ef: [
{
ty: 28,
nm: "S",
np: 8,
en: 1,
ef: [
{
ty: 10,
nm: "T",
v: {
a: 0,
k: 2
}
},
{
ty: 7,
nm: "U",
v: {
a: 0,
k: 4
}
},
{
ty: 7,
nm: "I",
v: {
a: 0,
k: 0
}
},
{
ty: 7,
nm: "I",
v: {
a: 0,
k: 1
}
},
{
ty: 7,
nm: "C",
v: {
a: 0,
k: 1
}
},
{
ty: 7,
nm: "P",
v: {
a: 0,
k: 1
}
}
]
}
],
shapes: [
{
ty: "gr",
it: [
{
ty: "rc",
d: 1,
s: {
a: 0,
k: [
400,
400
]
},
p: {
a: 0,
k: [
0,
0
]
},
r: {
a: 0,
k: 0
},
nm: "R"
},
{
ty: "st",
c: {
a: 0,
k: [
1,
1,
1,
1
]
},
o: {
a: 0,
k: 100
},
w: {
a: 0,
k: 2
},
lc: 1,
lj: 1,
ml: 4,
nm: "S"
},
{
ty: "gf",
o: {
a: 0,
k: 100
},
r: 1,
g: {
p: 3,
k: {
a: 0,
k: [
0,
1,
0.761,
0.031,
0.5,
0.945,
0.435,
0.253,
1,
0.89,
0.11,
0.475
]
}
},
s: {
a: 0,
k: [
-26,
-85
]
},
e: {
a: 0,
k: [
39,
45
]
},
t: 1,
nm: "G"
},
{
ty: "tr",
p: {
a: 0,
k: [
-0.209,
0.658
]
},
a: {
a: 0,
k: [
0,
0
]
},
s: {
a: 0,
k: [
100,
100
]
},
r: {
a: 0,
k: 0
},
o: {
a: 0,
k: 100
},
sk: {
a: 0,
k: 0
},
sa: {
a: 0,
k: 0
},
nm: "T"
}
],
nm: "R"
}
],
ip: 0,
op: 120,
st: 0
},
{
ind: 2,
ty: 0,
nm: "[",
refId: "comp_0",
sr: 1,
ks: {
o: {
a: 0,
k: 100
},
r: {
a: 0,
k: 0
},
p: {
a: 0,
k: [
200,
200,
0
]
},
a: {
a: 0,
k: [
200,
200,
0
]
},
s: {
a: 0,
k: [
100,
100,
100
]
}
},
ao: 0,
w: 400,
h: 400,
ip: 0,
op: 120,
st: 0
}
];
var markers$3 = [
];
var Listening = {
v: v$3,
meta: meta$3,
fr: fr$3,
ip: ip$3,
op: op$3,
w: w$3,
h: h$3,
nm: nm$3,
assets: assets$3,
layers: layers$3,
markers: markers$3
};
var v$2 = "4.8.0";
var meta$2 = {
g: "LottieFiles AE 3.5.4",
a: "",
k: "",
d: "",
tc: ""
};
var fr$2 = 60;
var ip$2 = 0;
var op$2 = 180;
var w$2 = 400;
var h$2 = 400;
var nm$2 = "A";
var assets$2 = [
{
id: "comp_0",
layers: [
{
ind: 1,
ty: 4,
nm: "L",
sr: 1,
ks: {
o: {
a: 0,
k: 100
},
r: {
a: 0,
k: 0
},
p: {
a: 0,
k: [
163,
163,
0
]
},
a: {
a: 0,
k: [
-37.5,
-37.5,
0
]
},
s: {
a: 1,
k: [
{
i: {
x: [
0.667,
0.667,
0.667
],
y: [
1,
1,
1
]
},
o: {
x: [
0.333,
0.333,
0.333
],
y: [
0,
0,
0
]
},
t: 0,
s: [
100,
100,
100
]
},
{
i: {
x: [
0.667,
0.667,
0.667
],
y: [
1,
1,
1
]
},
o: {
x: [
0.333,
0.333,
0.333
],
y: [
0,
0,
0
]
},
t: 15,
s: [
130,
130,
100
]
},
{
t: 30,
s: [
100,
100,
100
]
}
]
}
},
ao: 0,
shapes: [
{
ind: 0,
ty: "sh",
ks: {
a: 0,
k: {
i: [
[
0,
69.036
],
[
69.036,
0
],
[
0,
-69.036
],
[
-69.036,
0
]
],
o: [
[
0,
69.036
],
[
69.036,
0
],
[
0,
-69.036
],
[
-69.036,
0
]
],
v: [
[
-37.5,
-162.5
],
[
-162.5,
-37.5
],
[
-37.5,
87.5
],
[
87.5,
-37.5
]
],
c: true
}
},
nm: "P"
},
{
ty: "mm",
mm: 1,
nm: "M"
},
{
ty: "gf",
o: {
a: 0,
k: 100
},
r: 1,
g: {
p: 3,
k: {
a: 0,
k: [
0,
1,
0.761,
0.031,
0.5,
0.945,
0.435,
0.253,
1,
0.89,
0.11,
0.475
]
}
},
s: {
a: 0,
k: [
-47.5,
-114
]
},
e: {
a: 0,
k: [
49.962,
105.608
]
},
t: 1,
nm: "G"
}
],
ip: 0,
op: 187,
st: 0
},
{
ind: 2,
ty: 4,
nm: "S",
sr: 1,
ks: {
o: {
a: 0,
k: 100
},
r: {
a: 0,
k: 0
},
p: {
a: 0,
k: [
287,
287,
0
]
},
a: {
a: 0,
k: [
87.5,
87.5,
0
]
},
s: {
a: 1,
k: [
{
i: {
x: [
0.667,
0.667,
0.667
],
y: [
1,
1,
1
]
},
o: {
x: [
0.333,
0.333,
0.333
],
y: [
0,
0,
0
]
},
t: 0,
s: [
100,
100,
100
]
},
{
i: {
x: [
0.667,
0.667,
0.667
],
y: [
1,
1,
1
]
},
o: {
x: [
0.333,
0.333,
0.333
],
y: [
0,
0,
0
]
},
t: 10,
s: [
100,
100,
100
]
},
{
i: {
x: [
0.667,
0.667,
0.667
],
y: [
1,
1,
1
]
},
o: {
x: [
0.333,
0.333,
0.333
],
y: [
0,
0,
0
]
},
t: 25,
s: [
120,
120,
100
]
},
{
t: 40,
s: [
100,
100,
100
]
}
]
}
},
ao: 0,
shapes: [
{
ind: 0,
ty: "sh",
ks: {
a: 0,
k: {
i: [
[
0,
41.421
],
[
41.421,
0
],
[
0,
-41.421
],
[
-41.421,
0
]
],
o: [
[
0,
41.421
],
[
41.421,
0
],
[
0,
-41.421
],
[
-41.421,
0
]
],
v: [
[
87.5,
12.5
],
[
12.5,
87.5
],
[
87.5,
162.5
],
[
162.5,
87.5
]
],
c: true
}
},
nm: "P"
},
{
ty: "mm",
mm: 1,
nm: "M"
},
{
ty: "gf",
o: {
a: 0,
k: 100
},
r: 1,
g: {
p: 3,
k: {
a: 0,
k: [
0,
1,
0.761,
0.031,
0.5,
0.945,
0.435,
0.253,
1,
0.89,
0.11,
0.475
]
}
},
s: {
a: 0,
k: [
-47.5,
-114
]
},
e: {
a: 0,
k: [
49.962,
105.608
]
},
t: 1,
nm: "G"
}
],
ip: 0,
op: 208,
st: 0
}
]
}
];
var layers$2 = [
{
ind: 1,
ty: 4,
nm: "S",
sr: 1,
ks: {
o: {
a: 0,
k: 100
},
r: {
a: 0,
k: 0
},
p: {
a: 1,
k: [
{
i: {
x: 0.667,
y: 1
},
o: {
x: 0.333,
y: 0
},
t: 60,
s: [
200,
200,
0
],
to: [
0,
0,
0
],
ti: [
0,
0,
0
]
},
{
t: 90,
s: [
440,
449.5,
0
]
}
]
},
a: {
a: 0,
k: [
0,
0,
0
]
},
s: {
a: 0,
k: [
100,
100,
100
]
}
},
ao: 0,
ef: [
{
ty: 28,
nm: "S",
np: 8,
en: 1,
ef: [
{
ty: 10,
nm: "T",
v: {
a: 0,
k: 3
}
},
{
ty: 7,
nm: "U",
v: {
a: 0,
k: 4
}
},
{
ty: 7,
nm: "I",
v: {
a: 0,
k: 0
}
},
{
ty: 7,
nm: "I",
v: {
a: 0,
k: 1
}
},
{
ty: 7,
nm: "C",
v: {
a: 0,
k: 1
}
},
{
ty: 7,
nm: "P",
v: {
a: 0,
k: 1
}
}
]
}
],
shapes: [
{
ty: "gr",
it: [
{
ind: 0,
ty: "sh",
ks: {
a: 0,
k: {
i: [
[
37.834,
0
],
[
0,
-5.181
],
[
-37.834,
0
],
[
0,
5.181
]
],
o: [
[
-37.834,
0
],
[
0,
5.181
],
[
37.834,
0
],
[
0,
-5.181
]
],
v: [
[
0,
-9.381
],
[
-68.505,
0
],
[
0,
9.381
],
[
68.505,
0
]
],
c: true
}
},
nm: "P"
},
{
ty: "st",
c: {
a: 0,
k: [
1,
1,
1,
1
]
},
o: {
a: 0,
k: 100
},
w: {
a: 0,
k: 0
},
lc: 1,
lj: 1,
ml: 4,
nm: "S"
},
{
ty: "gf",
o: {
a: 0,
k: 100
},
r: 1,
g: {
p: 3,
k: {
a: 0,
k: [
0,
1,
1,
1,
0.5,
1,
1,
1,
1,
1,
1,
1,
0,
1,
0.5,
0.5,
1,
0
]
}
},
s: {
a: 0,
k: [
0.249,
0.249
]
},
e: {
a: 0,
k: [
91.305,
-0.238
]
},
t: 2,
h: {
a: 0,
k: 0
},
a: {
a: 0,
k: 90
},
nm: "G"
},
{
ty: "tr",
p: {
a: 0,
k: [
-116.514,
-105.125
]
},
a: {
a: 0,
k: [
0,
0
]
},
s: {
a: 0,
k: [
124.149,
173.892
]
},
r: {
a: 0,
k: -41.711
},
o: {
a: 0,
k: 100
},
sk: {
a: 0,
k: 0
},
sa: {
a: 0,
k: 0
},
nm: "T"
}
],
nm: "E"
}
],
ip: 0,
op: 180,
st: 0
},
{
ind: 2,
ty: 4,
nm: "G",
sr: 1,
ks: {
o: {
a: 0,
k: 100
},
r: {
a: 0,
k: 0
},
p: {
a: 0,
k: [
200,
200,
0
]
},
a: {
a: 0,
k: [
0,
0,
0
]
},
s: {
a: 0,
k: [
140,
140,
100
]
}
},
ao: 0,
ef: [
{
ty: 28,
nm: "S",
np: 8,
en: 1,
ef: [
{
ty: 10,
nm: "T",
v: {
a: 0,
k: 3
}
},
{
ty: 7,
nm: "U",
v: {
a: 0,
k: 4
}
},
{
ty: 7,
nm: "I",
v: {
a: 0,
k: 0
}
},
{
ty: 7,
nm: "I",
v: {
a: 0,
k: 1
}
},
{
ty: 7,
nm: "C",
v: {
a: 0,
k: 1
}
},
{
ty: 7,
nm: "P",
v: {
a: 0,
k: 1
}
}
]
}
],
shapes: [
{
ty: "gr",
it: [
{
ty: "rc",
d: 1,
s: {
a: 0,
k: [
400,
400
]
},
p: {
a: 0,
k: [
0,
0
]
},
r: {
a: 0,
k: 0
},
nm: "R"
},
{
ty: "st",
c: {
a: 0,
k: [
1,
1,
1,
1
]
},
o: {
a: 0,
k: 100
},
w: {
a: 0,
k: 2
},
lc: 1,
lj: 1,
ml: 4,
nm: "S"
},
{
ty: "gf",
o: {
a: 0,
k: 100
},
r: 1,
g: {
p: 3,
k: {
a: 0,
k: [
0,
1,
0.761,
0.031,
0.5,
0.945,
0.435,
0.253,
1,
0.89,
0.11,
0.475
]
}
},
s: {
a: 0,
k: [
-26,
-85
]
},
e: {
a: 0,
k: [
39,
45
]
},
t: 1,
nm: "G"
},
{
ty: "tr",
p: {
a: 0,
k: [
-0.209,
0.658
]
},
a: {
a: 0,
k: [
0,
0
]
},
s: {
a: 0,
k: [
100,
100
]
},
r: {
a: 0,
k: 0
},
o: {
a: 0,
k: 100
},
sk: {
a: 0,
k: 0
},
sa: {
a: 0,
k: 0
},
nm: "T"
}
],
nm: "R"
}
],
ip: 0,
op: 180,
st: 0
},
{
ind: 3,
ty: 0,
nm: "[",
refId: "comp_0",
sr: 1,
ks: {
o: {
a: 0,
k: 100
},
r: {
a: 0,
k: 0
},
p: {
a: 0,
k: [
200,
200,
0
]
},
a: {
a: 0,
k: [
200,
200,
0
]
},
s: {
a: 0,
k: [
100,
100,
100
]
}
},
ao: 0,
w: 400,
h: 400,
ip: 0,
op: 180,
st: 0
}
];
var markers$2 = [
];
var AIProcessingLong = {
v: v$2,
meta: meta$2,
fr: fr$2,
ip: ip$2,
op: op$2,
w: w$2,
h: h$2,
nm: nm$2,
assets: assets$2,
layers: layers$2,
markers: markers$2
};
var v$1 = "4.8.0";
var meta$1 = {
g: "LottieFiles AE 3.5.4",
a: "Anagh Sharma",
k: "",
d: "Progress indicator to be used for showing AI processing input for a short period of time.",
tc: ""
};
var fr$1 = 60;
var ip$1 = 0;
var op$1 = 120;
var w$1 = 400;
var h$1 = 400;
var nm$1 = "A";
var assets$1 = [
{
id: "comp_0",
layers: [
{
ind: 1,
ty: 4,
nm: "L",
sr: 1,
ks: {
o: {
a: 0,
k: 100
},
r: {
a: 1,
k: [
{
i: {
x: [
0.667
],
y: [
1
]
},
o: {
x: [
0.167
],
y: [
0.167
]
},
t: 0,
s: [
0
]
},
{
t: 90,
s: [
270
]
}
]
},
p: {
a: 0,
k: [
163,
163,
0
]
},
a: {
a: 0,
k: [
-37.5,
-37.5,
0
]
},
s: {
a: 0,
k: [
100,
100,
100
]
}
},
ao: 0,
shapes: [
{
ind: 0,
ty: "sh",
ks: {
a: 0,
k: {
i: [
[
0,
69.036
],
[
69.036,
0
],
[
0,
-69.036
],
[
-69.036,
0
]
],
o: [
[
0,
69.036
],
[
69.036,
0
],
[
0,
-69.036
],
[
-69.036,
0
]
],
v: [
[
-37.5,
-162.5
],
[
-162.5,
-37.5
],
[
-37.5,
87.5
],
[
87.5,
-37.5
]
],
c: true
}
},
nm: "P"
},
{
ty: "mm",
mm: 1,
nm: "M"
},
{
ty: "gf",
o: {
a: 0,
k: 100
},
r: 1,
g: {
p: 3,
k: {
a: 0,
k: [
0,
1,
0.761,
0.031,
0.5,
0.945,
0.435,
0.253,
1,
0.89,
0.11,
0.475
]
}
},
s: {
a: 0,
k: [
-47.5,
-114
]
},
e: {
a: 0,
k: [
49.962,
105.608
]
},
t: 1,
nm: "G"
}
],
ip: 0,
op: 308,
st: 0
},
{
ind: 2,
ty: 4,
nm: "S",
sr: 1,
ks: {
o: {
a: 0,
k: 100
},
r: {
a: 1,
k: [
{
i: {
x: [
0.667
],
y: [
1
]
},
o: {
x: [
0.167
],
y: [
0.167
]
},
t: 0,
s: [
0
]
},
{
t: 90,
s: [
360
]
}
]
},
p: {
a: 0,
k: [
287,
287,
0
]
},
a: {
a: 0,
k: [
87.5,
87.5,
0
]
},
s: {
a: 0,
k: [
100,
100,
100
]
}
},
ao: 0,
shapes: [
{
ind: 0,
ty: "sh",
ks: {
a: 0,
k: {
i: [
[
0,
41.421
],
[
41.421,
0
],
[
0,
-41.421
],
[
-41.421,
0
]
],
o: [
[
0,
41.421
],
[
41.421,
0
],
[
0,
-41.421
],
[
-41.421,
0
]
],
v: [
[
87.5,
12.5
],
[
12.5,
87.5
],
[
87.5,
162.5
],
[
162.5,
87.5
]
],
c: true
}
},
nm: "P"
},
{
ty: "mm",
mm: 1,
nm: "M"
},
{
ty: "gf",
o: {
a: 0,
k: 100
},
r: 1,
g: {
p: 3,
k: {
a: 0,
k: [
0,
1,
0.761,
0.031,
0.5,
0.945,
0.435,
0.253,
1,
0.89,
0.11,
0.475
]
}
},
s: {
a: 0,
k: [
-47.5,
-114
]
},
e: {
a: 0,
k: [
49.962,
105.608
]
},
t: 1,
nm: "G"
}
],
ip: 0,
op: 316,
st: 0
}
]
}
];
var layers$1 = [
{
ind: 1,
ty: 4,
nm: "G",
sr: 1,
ks: {
o: {
a: 0,
k: 100
},
r: {
a: 0,
k: 0
},
p: {
a: 0,
k: [
200,
200,
0
]
},
a: {
a: 0,
k: [
0,
0,
0
]
},
s: {
a: 0,
k: [
140,
140,
100
]
}
},
ao: 0,
ef: [
{
ty: 28,
nm: "S",
np: 8,
en: 1,
ef: [
{
ty: 10,
nm: "T",
v: {
a: 0,
k: 2
}
},
{
ty: 7,
nm: "U",
v: {
a: 0,
k: 4
}
},
{
ty: 7,
nm: "I",
v: {
a: 0,
k: 0
}
},
{
ty: 7,
nm: "I",
v: {
a: 0,
k: 1
}
},
{
ty: 7,
nm: "C",
v: {
a: 0,
k: 1
}
},
{
ty: 7,
nm: "P",
v: {
a: 0,
k: 1
}
}
]
}
],
shapes: [
{
ty: "gr",
it: [
{
ty: "rc",
d: 1,
s: {
a: 0,
k: [
400,
400
]
},
p: {
a: 0,
k: [
0,
0
]
},
r: {
a: 0,
k: 0
},
nm: "R"
},
{
ty: "st",
c: {
a: 0,
k: [
1,
1,
1,
1
]
},
o: {
a: 0,
k: 100
},
w: {
a: 0,
k: 2
},
lc: 1,
lj: 1,
ml: 4,
nm: "S"
},
{
ty: "gf",
o: {
a: 0,
k: 100
},
r: 1,
g: {
p: 3,
k: {
a: 1,
k: [
{
i: {
x: 0.667,
y: 1
},
o: {
x: 0.333,
y: 0
},
t: 0,
s: [
0,
1,
0.761,
0.031,
0.5,
0.945,
0.435,
0.253,
1,
0.89,
0.11,
0.475
]
},
{
i: {
x: 0.667,
y: 1
},
o: {
x: 0.333,
y: 0
},
t: 45,
s: [
0,
0.89,
0.11,
0.475,
0.5,
0.945,
0.435,
0.253,
1,
1,
0.761,
0.031
]
},
{
t: 90,
s: [
0,
1,
0.761,
0.031,
0.5,
0.945,
0.435,
0.253,
1,
0.89,
0.11,
0.475
]
}
]
}
},
s: {
a: 0,
k: [
-26,
-85
]
},
e: {
a: 0,
k: [
39,
45
]
},
t: 1,
nm: "G"
},
{
ty: "tr",
p: {
a: 0,
k: [
-0.209,
0.658
]
},
a: {
a: 0,
k: [
0,
0
]
},
s: {
a: 0,
k: [
100,
100
]
},
r: {
a: 0,
k: 0
},
o: {
a: 0,
k: 100
},
sk: {
a: 0,
k: 0
},
sa: {
a: 0,
k: 0
},
nm: "T"
}
],
nm: "R"
}
],
ip: 0,
op: 125,
st: 0
},
{
ind: 2,
ty: 0,
nm: "[",
refId: "comp_0",
sr: 1,
ks: {
o: {
a: 0,
k: 100
},
r: {
a: 0,
k: 0
},
p: {
a: 0,
k: [
200,
200,
0
]
},
a: {
a: 0,
k: [
200,
200,
0
]
},
s: {
a: 0,
k: [
100,
100,
100
]
}
},
ao: 0,
w: 400,
h: 400,
ip: 0,
op: 300,
st: 0
}
];
var markers$1 = [
];
var AIProcessingShort = {
v: v$1,
meta: meta$1,
fr: fr$1,
ip: ip$1,
op: op$1,
w: w$1,
h: h$1,
nm: nm$1,
assets: assets$1,
layers: layers$1,
markers: markers$1
};
var _excluded$8 = ["size", "state", "alt", "className"];
var SaraSparkle = function SaraSparkle(props) {
var size = props.size,
state = props.state,
alt = props.alt,
className = props.className,
rest = _objectWithoutProperties(props, _excluded$8);
var stateMapping = {
listening: Listening,
'short-processing': AIProcessingShort,
'long-processing': AIProcessingLong
};
var SaraClassNames = classnames({
'align-bottom': state === 'default'
}, className);
if (state === 'default') {
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-AI-Sara-Sparkle"
}, rest), /*#__PURE__*/React.createElement("img", {
src: img$1,
alt: alt,
width: size,
height: size,
className: SaraClassNames
}));
}
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-AI-Sara-Sparkle",
className: className
}, rest), /*#__PURE__*/React.createElement(Player, {
autoplay: true,
loop: true,
src: state && stateMapping[state] || Listening,
style: {
height: size,
width: size
}
}));
};
SaraSparkle.defaultProps = {
size: 24,
state: 'default',
alt: ''
};
var v = "4.8.0";
var meta = {
g: "LottieFiles AE 3.5.4",
a: "Anagh Sharma",
k: "",
d: "Progress indicator to be used for showing Sara when it is idle.",
tc: ""
};
var fr = 60;
var ip = 0;
var op = 360;
var w = 96;
var h = 96;
var nm = "S";
var assets = [
{
id: "comp_0",
layers: [
{
ind: 1,
ty: 4,
nm: "S",
sr: 1,
ks: {
o: {
a: 0,
k: 100
},
r: {
a: 1,
k: [
{
i: {
x: [
0.833
],
y: [
0.833
]
},
o: {
x: [
0.167
],
y: [
0.167
]
},
t: 0,
s: [
0
]
},
{
t: 360,
s: [
360
]
}
]
},
p: {
a: 0,
k: [
48,
48,
0
]
},
a: {
a: 0,
k: [
0,
0,
0
]
},
s: {
a: 0,
k: [
100,
100,
100
]
}
},
ao: 0,
ef: [
{
ty: 28,
nm: "S",
np: 8,
en: 1,
ef: [
{
ty: 10,
nm: "T",
v: {
a: 0,
k: 2
}
},
{
ty: 7,
nm: "U",
v: {
a: 0,
k: 4
}
},
{
ty: 7,
nm: "I",
v: {
a: 0,
k: 0
}
},
{
ty: 7,
nm: "I",
v: {
a: 0,
k: 1
}
},
{
ty: 7,
nm: "C",
v: {
a: 0,
k: 1
}
},
{
ty: 7,
nm: "P",
v: {
a: 0,
k: 1
}
}
]
}
],
shapes: [
{
ty: "gr",
it: [
{
ty: "rc",
d: 1,
s: {
a: 0,
k: [
128,
128.055
]
},
p: {
a: 0,
k: [
0,
0
]
},
r: {
a: 0,
k: 0
},
nm: "R"
},
{
ty: "st",
c: {
a: 0,
k: [
1,
1,
1,
1
]
},
o: {
a: 0,
k: 100
},
w: {
a: 0,
k: 0
},
lc: 1,
lj: 1,
ml: 4,
nm: "S"
},
{
ty: "gf",
o: {
a: 0,
k: 100
},
r: 1,
g: {
p: 3,
k: {
a: 0,
k: [
0,
1,
0.761,
0.031,
0.5,
0.945,
0.435,
0.253,
1,
0.89,
0.11,
0.475
]
}
},
s: {
a: 0,
k: [
-19.515,
-47.635
]
},
e: {
a: 0,
k: [
13.662,
48.644
]
},
t: 1,
nm: "G"
},
{
ty: "tr",
p: {
a: 0,
k: [
-0.019,
-0.248
]
},
a: {
a: 0,
k: [
0,
0
]
},
s: {
a: 0,
k: [
100,
100
]
},
r: {
a: 0,
k: 0
},
o: {
a: 0,
k: 100
},
sk: {
a: 0,
k: 0
},
sa: {
a: 0,
k: 0
},
nm: "T"
}
],
nm: "R"
}
],
ip: 0,
op: 480,
st: 0
},
{
ind: 2,
ty: 4,
nm: "F",
sr: 1,
ks: {
o: {
a: 0,
k: 100
},
r: {
a: 0,
k: 0
},
p: {
a: 0,
k: [
48,
47.996,
0
]
},
a: {
a: 0,
k: [
0,
0,
0
]
},
s: {
a: 1,
k: [
{
i: {
x: [
0.833,
0.833,
0.833
],
y: [
0.833,
0.833,
0.833
]
},
o: {
x: [
0.167,
0.167,
0.167
],
y: [
0.167,
0.167,
0.167
]
},
t: 0,
s: [
90,
90,
100
]
},
{
i: {
x: [
0.833,
0.833,
0.833
],
y: [
0.833,
0.833,
0.833
]
},
o: {
x: [
0.167,
0.167,
0.167
],
y: [
0.167,
0.167,
0.167
]
},
t: 25,
s: [
90,
90,
100
]
},
{
i: {
x: [
0.833,
0.833,
0.833
],
y: [
0.833,
0.833,
0.833
]
},
o: {
x: [
0.167,
0.167,
0.167
],
y: [
0.167,
0.167,
0.167
]
},
t: 110,
s: [
100,
100,
100
]
},
{
t: 175,
s: [
90,
90,
100
]
}
]
}
},
ao: 0,
shapes: [
{
ty: "gr",
it: [
{
ind: 0,
ty: "sh",
ks: {
a: 0,
k: {
i: [
[
0,
0
],
[
-6.612,
1.895
],
[
-7.835,
0
],
[
0,
0
],
[
-1.663,
6.671
],
[
-3.92,
6.787
],
[
0,
0
],
[
4.945,
4.776
],
[
3.915,
6.792
],
[
0,
0
],
[
6.608,
-1.9
],
[
7.84,
0
],
[
0,
0
],
[
1.663,
-6.676
],
[
3.92,
-6.787
],
[
0,
0
],
[
-4.95,
-4.776
],
[
-3.92,
-6.787
]
],
o: [
[
3.92,
6.787
],
[
1.663,
6.671
],
[
0,
0
],
[
7.84,
0
],
[
6.608,
1.895
],
[
0,
0
],
[
3.92,
-6.787
],
[
4.945,
-4.776
],
[
0,
0
],
[
-3.92,
-6.787
],
[
-1.663,
-6.676
],
[
0,
0
],
[
-7.835,
0
],
[
-6.612,
-1.9
],
[
0,
0
],
[
-3.92,
6.792
],
[
-4.95,
4.776
],
[
0,
0
]
],
v: [
[
-38.919,
28.571
],
[
-20.715,
35.89
],
[
-5.281,
47.996
],
[
5.28,
47.996
],
[
20.719,
35.89
],
[
38.917,
28.571
],
[
44.196,
19.425
],
[
41.436,
0
],
[
44.2,
-19.425
],
[
38.917,
-28.571
],
[
20.719,
-35.886
],
[
5.28,
-47.996
],
[
-5.281,
-47.996
],
[
-20.715,
-35.886
],
[
-38.919,
-28.571
],
[
-44.197,
-19.425
],
[
-41.432,
0
],
[
-44.197,
19.425
]
],
c: true
}
},
nm: "P"
},
{
ty: "gf",
o: {
a: 0,
k: 100
},
r: 1,
g: {
p: 3,
k: {
a: 0,
k: [
0,
1,
0.761,
0.031,
0.5,
0.945,
0.435,
0.253,
1,
0.89,
0.11,
0.475
]
}
},
s: {
a: 0,
k: [
-19.515,
-47.635
]
},
e: {
a: 0,
k: [
13.662,
48.644
]
},
t: 1,
nm: "G"
},
{
ty: "tr",
p: {
a: 0,
k: [
0,
0
]
},
a: {
a: 0,
k: [
0,
0
]
},
s: {
a: 0,
k: [
100,
100
]
},
r: {
a: 0,
k: 0
},
o: {
a: 0,
k: 100
},
sk: {
a: 0,
k: 0
},
sa: {
a: 0,
k: 0
},
nm: "T"
}
],
nm: "F"
}
],
ip: 0,
op: 496,
st: 0
}
]
}
];
var layers = [
{
ind: 1,
ty: 4,
nm: "S",
sr: 1,
ks: {
o: {
a: 0,
k: 100
},
r: {
a: 0,
k: 0
},
p: {
a: 0,
k: [
48,
48,
0
]
},
a: {
a: 0,
k: [
0,
0,
0
]
},
s: {
a: 1,
k: [
{
i: {
x: [
0.833,
0.833,
0.833
],
y: [
0.833,
0.833,
0.833
]
},
o: {
x: [
0.167,
0.167,
0.167
],
y: [
0.167,
0.167,
0.167
]
},
t: 0,
s: [
34,
34,
100
]
},
{
i: {
x: [
0.833,
0.833,
0.833
],
y: [
0.833,
0.833,
0.833
]
},
o: {
x: [
0.167,
0.167,
0.167
],
y: [
0.167,
0.167,
0.167
]
},
t: 50,
s: [
41,
41,
100
]
},
{
i: {
x: [
0.833,
0.833,
0.833
],
y: [
0.833,
0.833,
0.833
]
},
o: {
x: [
0.167,
0.167,
0.167
],
y: [
0.167,
0.167,
0.167
]
},
t: 110,
s: [
40,
40,
100
]
},
{
t: 150,
s: [
34,
34,
100
]
}
]
}
},
ao: 0,
shapes: [
{
ty: "gr",
it: [
{
ind: 0,
ty: "sh",
ks: {
a: 0,
k: {
i: [
[
0,
41.421
],
[
41.421,
0
],
[
0,
-41.421
],
[
-41.421,
0
]
],
o: [
[
0,
41.421
],
[
41.421,
0
],
[
0,
-41.421
],
[
-41.421,
0
]
],
v: [
[
0,
-75
],
[
-75,
0
],
[
0,
75
],
[
75,
0
]
],
c: true
}
},
nm: "P"
},
{
ty: "fl",
c: {
a: 0,
k: [
1,
1,
1,
1
]
},
o: {
a: 0,
k: 100
},
r: 1,
nm: "F"
},
{
ty: "tr",
p: {
a: 0,
k: [
0,
0
]
},
a: {
a: 0,
k: [
0,
0
]
},
s: {
a: 0,
k: [
100,
100
]
},
r: {
a: 0,
k: 0
},
o: {
a: 0,
k: 100
},
sk: {
a: 0,
k: 0
},
sa: {
a: 0,
k: 0
},
nm: "T"
}
],
nm: "S"
}
],
ip: 0,
op: 396,
st: 0
},
{
ind: 3,
ty: 0,
nm: "C",
refId: "comp_0",
sr: 1,
ks: {
o: {
a: 0,
k: 100
},
r: {
a: 0,
k: 0
},
p: {
a: 0,
k: [
48,
47.994,
0
]
},
a: {
a: 0,
k: [
48,
48,
0
]
},
s: {
a: 0,
k: [
90,
90,
100
]
}
},
ao: 0,
w: 96,
h: 96,
ip: 0,
op: 480,
st: 0
}
];
var markers = [
];
var AIResting = {
v: v,
meta: meta,
fr: fr,
ip: ip,
op: op,
w: w,
h: h,
nm: nm,
assets: assets,
layers: layers,
markers: markers
};
var img = "data:image/svg+xml,%3csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_3314_32121)'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.1898 55.9227C13.7816 57.1861 8.66759 55.5682 6.05421 51.0432L2.53533 44.9454C-0.0780511 40.4204 1.0788 35.1799 4.37855 31.9957C1.0788 28.8114 -0.0780511 23.5742 2.53533 19.046L6.05421 12.9482C8.66759 8.42323 13.7816 6.80532 18.1898 8.07193C19.2983 3.62107 23.2555 -0.00149536 28.479 -0.00149536H35.52C40.7468 -0.00149536 44.7039 3.62107 45.8124 8.07193C50.2174 6.80532 55.3314 8.42323 57.9448 12.9482L61.4669 19.046C64.0771 23.5742 62.9202 28.8114 59.6237 31.9957C62.9202 35.1799 64.0771 40.4204 61.4637 44.9454L57.9448 51.0432C55.3314 55.5682 50.2174 57.1861 45.8124 55.9227C44.7039 60.3703 40.7468 63.9929 35.52 63.9929H28.479C23.2555 63.9929 19.2983 60.3703 18.1898 55.9227Z' fill='url(%23paint0_linear_3314_32121)'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 32C23.0457 32 32 23.0457 32 12C32 23.0457 40.9543 32 52 32C40.9543 32 32 40.9543 32 52C32 40.9543 23.0457 32 12 32Z' fill='white'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear_3314_32121' x1='18.99' y1='0.239091' x2='41.9606' y2='54.7321' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='%23FFC208'/%3e%3cstop offset='1' stop-color='%23E31C79'/%3e%3c/linearGradient%3e%3cclipPath id='clip0_3314_32121'%3e%3crect width='64' height='64' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
var _excluded$7 = ["size", "state", "alt", "className"];
var Sara = function Sara(props) {
var size = props.size,
state = props.state,
alt = props.alt,
className = props.className,
rest = _objectWithoutProperties(props, _excluded$7);
var SaraClassNames = classnames({
'align-bottom': state === 'default'
}, className);
if (state === 'default') {
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-AI-Sara"
}, rest), /*#__PURE__*/React.createElement("img", {
src: img,
alt: alt,
width: size,
height: size,
className: SaraClassNames
}));
}
return /*#__PURE__*/React.createElement("div", _extends$2({
"data-test": "DesignSystem-AI-Sara",
className: className
}, rest), /*#__PURE__*/React.createElement(Player, {
autoplay: true,
loop: true,
src: AIResting,
style: {
height: size,
width: size
}
}));
};
Sara.defaultProps = {
size: 32,
state: 'default'
};
var SaraIconDefault = function SaraIconDefault(props) {
var className = props.className;
return /*#__PURE__*/React__default.createElement("svg", {
width: "12",
height: "12",
viewBox: "0 0 12 12",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
className: className,
"data-test": "DesignSystem-AI-Icon",
"aria-hidden": "true",
focusable: "false"
}, /*#__PURE__*/React__default.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M6 0.75C6 3.6495 8.3505 6 11.25 6C8.3505 6 6 8.35051 6 11.25C6 8.35051 3.64949 6 0.75 6C3.64949 6 6 3.6495 6 0.75Z",
fill: "url(#paint0_linear_54537_3573)"
}), /*#__PURE__*/React__default.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M6 0.75C6 3.6495 8.3505 6 11.25 6C8.3505 6 6 8.35051 6 11.25C6 8.35051 3.64949 6 0.75 6C3.64949 6 6 3.6495 6 0.75Z",
fill: "url(#paint1_linear_54537_3573)",
fillOpacity: "0.24"
}), /*#__PURE__*/React__default.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M6 0.75C6 3.6495 8.3505 6 11.25 6C8.3505 6 6 8.35051 6 11.25C6 8.35051 3.64949 6 0.75 6C3.64949 6 6 3.6495 6 0.75Z",
fill: "none",
stroke: "#CA1822",
strokeWidth: "1",
vectorEffect: "non-scaling-stroke",
clipPath: "url(#clip0_54537_3573)"
}), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", {
id: "clip0_54537_3573"
}, /*#__PURE__*/React__default.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M6 0.75C6 3.6495 8.3505 6 11.25 6C8.3505 6 6 8.35051 6 11.25C6 8.35051 3.64949 6 0.75 6C3.64949 6 6 3.6495 6 0.75Z"
})), /*#__PURE__*/React__default.createElement("linearGradient", {
id: "paint0_linear_54537_3573",
x1: "10.1719",
y1: "2.57813",
x2: "2.25",
y2: "9.30469",
gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/React__default.createElement("stop", {
stopColor: "#E81F76",
stopOpacity: "0.8"
}), /*#__PURE__*/React__default.createElement("stop", {
offset: "1",
stopColor: "#EB5324"
})), /*#__PURE__*/React__default.createElement("linearGradient", {
id: "paint1_linear_54537_3573",
x1: "3.86719",
y1: "6.98438",
x2: "0.257812",
y2: "9.44531",
gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/React__default.createElement("stop", {
stopColor: "#FFC208",
stopOpacity: "0"
}), /*#__PURE__*/React__default.createElement("stop", {
offset: "1",
stopColor: "#FFC208"
}))));
};
var SaraIconDisabled = function SaraIconDisabled(props) {
var className = props.className;
return /*#__PURE__*/React__default.createElement("svg", {
width: "12",
height: "12",
viewBox: "0 0 12 12",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
className: className,
"data-test": "DesignSystem-AI-Icon",
"aria-hidden": "true",
focusable: "false"
}, /*#__PURE__*/React__default.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M0.75 6C3.6495 6 6 3.6495 6 0.75C6 3.6495 8.35051 6 11.25 6C8.35051 6 6 8.35051 6 11.25C6 8.35051 3.6495 6 0.75 6Z",
fill: "url(#paint0_linear_63015_2821)"
}), /*#__PURE__*/React__default.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M0.75 6C3.6495 6 6 3.6495 6 0.75C6 3.6495 8.35051 6 11.25 6C8.35051 6 6 8.35051 6 11.25C6 8.35051 3.6495 6 0.75 6Z",
fill: "url(#paint1_linear_63015_2821)",
fillOpacity: "0.24"
}), /*#__PURE__*/React__default.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M0.75 6C3.6495 6 6 3.6495 6 0.75C6 3.6495 8.35051 6 11.25 6C8.35051 6 6 8.35051 6 11.25C6 8.35051 3.6495 6 0.75 6Z",
fill: "none",
stroke: "#CA1822",
strokeWidth: "1",
vectorEffect: "non-scaling-stroke",
clipPath: "url(#clip0_63015_2821)"
}), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", {
id: "clip0_63015_2821"
}, /*#__PURE__*/React__default.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M0.75 6C3.6495 6 6 3.6495 6 0.75C6 3.6495 8.35051 6 11.25 6C8.35051 6 6 8.35051 6 11.25C6 8.35051 3.6495 6 0.75 6Z"
})), /*#__PURE__*/React__default.createElement("linearGradient", {
id: "paint0_linear_63015_2821",
x1: "2.57813",
y1: "1.82812",
x2: "9.30469",
y2: "9.75",
gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/React__default.createElement("stop", {
stopColor: "#E81F76",
stopOpacity: "0.8"
}), /*#__PURE__*/React__default.createElement("stop", {
offset: "1",
stopColor: "#EB5324"
})), /*#__PURE__*/React__default.createElement("linearGradient", {
id: "paint1_linear_63015_2821",
x1: "6.98438",
y1: "8.13281",
x2: "9.44531",
y2: "11.7422",
gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/React__default.createElement("stop", {
stopColor: "#FFC208",
stopOpacity: "0"
}), /*#__PURE__*/React__default.createElement("stop", {
offset: "1",
stopColor: "#FFC208"
}))));
};
var css_248z$2 = ".iconButton-module-AIIconButton-BtFJz-4-30-3 {\n background: transparent;\n padding: var(--spacing-20);\n border-radius: var(--border-radius-10);\n cursor: pointer;\n border: 0;\n font-family: var(--font-family);\n font-weight: var(--font-weight-normal);\n font-size: var(--font-size);\n line-height: var(--font-height-s);\n position: relative;\n}\n\n.iconButton-module-AIIconButton--large-2EnOg-4-30-3 {\n padding: var(--spacing-0-75);\n}\n\n.iconButton-module-AIIconButton--regular-TAz71-4-30-3 {\n padding: var(--spacing);\n}\n\n.iconButton-module-AIIconButton-BtFJz-4-30-3:hover {\n background: linear-gradient(143deg, #fad1b2 10.84%, #f8c4c1 51.71%, #f8c8d7 91.5%);\n color: var(--secondary) !important;\n}\n\n.iconButton-module-AIIconButton-BtFJz-4-30-3:active {\n background: linear-gradient(144deg, #f7ba8c 14.82%, #f6af98 40.53%, #f5a8a0 55.69%, #f5adc5 79.29%);\n color: var(--secondary-dark) !important;\n}\n\n.iconButton-module-AIIconButton-BtFJz-4-30-3:focus {\n outline: var(--border-width-05) solid var(--primary-focus);\n outline-offset: var(--spacing-05);\n}\n\n.iconButton-module-AIIconButton-BtFJz-4-30-3:disabled {\n cursor: not-allowed;\n background: transparent;\n color: var(--inverse-lightest);\n}\n\n.iconButton-module-AIIconButton-icon-nj5xZ-4-30-3 {\n overflow: hidden;\n flex-shrink: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n line-height: inherit;\n display: flex;\n align-items: center;\n position: relative;\n}\n\n.iconButton-module-AIIconButton-AIIcon-xdcj5-4-30-3 {\n position: absolute;\n}\n\n.iconButton-module-AIIconButton-AIIcon--regularTop-vGg0e-4-30-3 {\n bottom: calc(var(--spacing-30) + var(--spacing-05)); /* 14px */\n left: calc(var(--spacing-30) + var(--spacing-2-5)); /* 13px */\n}\n\n.iconButton-module-AIIconButton-AIIcon--largeTop-3HqjO-4-30-3 {\n bottom: calc(var(--spacing-40) + var(--spacing-05)); /* 18px */\n left: calc(var(--spacing-40) + var(--spacing-2-5)); /* 17px */\n}\n\n.iconButton-module-AIIconButton-AIIcon--regularBottom-oQfDL-4-30-3 {\n top: calc(var(--spacing-30) + var(--spacing-2-5)); /* 13px */\n left: calc(var(--spacing-30) + var(--spacing-05)); /* 14px */\n}\n\n.iconButton-module-AIIconButton-AIIcon--largeBottom-RQtt--4-30-3 {\n top: calc(var(--spacing-40) + var(--spacing-2-5)); /* 17px */\n left: calc(var(--spacing-40) + var(--spacing-05)); /* 18px */\n}\n";
var styles$2 = {"AIIconButton":"iconButton-module-AIIconButton-BtFJz-4-30-3","AIIconButton--large":"iconButton-module-AIIconButton--large-2EnOg-4-30-3","AIIconButton--regular":"iconButton-module-AIIconButton--regular-TAz71-4-30-3","AIIconButton-icon":"iconButton-module-AIIconButton-icon-nj5xZ-4-30-3","AIIconButton-AIIcon":"iconButton-module-AIIconButton-AIIcon-xdcj5-4-30-3","AIIconButton-AIIcon--regularTop":"iconButton-module-AIIconButton-AIIcon--regularTop-vGg0e-4-30-3","AIIconButton-AIIcon--largeTop":"iconButton-module-AIIconButton-AIIcon--largeTop-3HqjO-4-30-3","AIIconButton-AIIcon--regularBottom":"iconButton-module-AIIconButton-AIIcon--regularBottom-oQfDL-4-30-3","AIIconButton-AIIcon--largeBottom":"iconButton-module-AIIconButton-AIIcon--largeBottom-RQtt--4-30-3"};
styleInject(css_248z$2);
var SaraIcon = function SaraIcon(props) {
var size = props.size,
position = props.position,
disabled = props.disabled;
var AIIconClassNames = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$2['AIIconButton-AIIcon'], true), styles$2['AIIconButton-AIIcon--largeTop'], position === 'top' && size === 'large'), styles$2['AIIconButton-AIIcon--regularTop'], position === 'top' && size === 'regular'), styles$2['AIIconButton-AIIcon--regularBottom'], position === 'bottom' && size === 'regular'), styles$2['AIIconButton-AIIcon--largeBottom'], position === 'bottom' && size === 'large'));
if (disabled) {
return /*#__PURE__*/React.createElement(SaraIconDisabled, {
className: AIIconClassNames
});
}
return /*#__PURE__*/React.createElement(SaraIconDefault, {
className: AIIconClassNames
});
};
SaraIcon.defaultProps = {
size: 'regular',
position: 'top'
};
var _excluded$6 = ["icon", "position", "className", "size", "strokeColor", "tooltip", "disabled"];
var AIIconButton = function AIIconButton(props) {
var _ref, _rest$ariaLabel;
var icon = props.icon,
position = props.position,
className = props.className,
size = props.size,
strokeColor = props.strokeColor,
tooltip = props.tooltip,
disabled = props.disabled,
rest = _objectWithoutProperties(props, _excluded$6);
var ariaLabel = (_ref = (_rest$ariaLabel = rest['aria-label']) !== null && _rest$ariaLabel !== void 0 ? _rest$ariaLabel : tooltip) !== null && _ref !== void 0 ? _ref : icon;
var buttonClassNames = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$2.AIIconButton, true), styles$2['AIIconButton--regular'], size === 'regular'), styles$2['AIIconButton--large'], size === 'large'), className);
var IconClassNames = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$2['AIIconButton-icon'], true), 'material-symbols', true), 'material-symbols-rounded', true));
var sizeMapping = {
regular: 16,
large: 20
};
var iconStyles = {
fontSize: "".concat(sizeMapping[size], "px"),
width: "".concat(sizeMapping[size], "px"),
height: "".concat(sizeMapping[size], "px"),
color: disabled ? 'var(--text-disabled)' : 'var(--text)'
};
var saraIconProps = {
disabled: disabled,
size: size,
position: position
};
return /*#__PURE__*/React.createElement(Tooltip, {
tooltip: tooltip,
showTooltip: !!tooltip && !disabled
}, /*#__PURE__*/React.createElement("button", _extends$2({
className: buttonClassNames,
"data-test": "DesignSystem-AI-IconButton",
disabled: disabled,
"aria-label": ariaLabel
}, rest, {
style: {
color: strokeColor
}
}), /*#__PURE__*/React.createElement("i", {
"data-test": "DesignSystem-Icon",
className: IconClassNames,
style: iconStyles,
"aria-hidden": !!ariaLabel
}, icon), /*#__PURE__*/React.createElement(SaraIcon, saraIconProps)));
};
AIIconButton.defaultProps = {
size: 'regular',
position: 'top',
strokeColor: 'var(--text-white)'
};
var css_248z$1 = ".chip-module-AIChip-BtOef-4-30-3 {\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--border-radius-30);\n padding: var(--spacing-05) var(--spacing-20);\n cursor: pointer;\n width: -moz-fit-content;\n width: fit-content;\n border: 0;\n position: relative;\n background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);\n}\n\n.chip-module-AIChip-BtOef-4-30-3:hover {\n background: linear-gradient(108deg, #fad3b0 15.89%, #f9cdb7 33.52%, #f8c6bf 54.17%, #f7bfc7 70.92%);\n}\n\n.chip-module-AIChip-BtOef-4-30-3:active {\n background: linear-gradient(106deg, #f7bd89 20.06%, #f6b196 44.48%, #f4a4a5 67.83%, #f39faa 86.55%);\n}\n\n.chip-module-AIChip-BtOef-4-30-3:focus,\n.chip-module-AIChip-BtOef-4-30-3:focus-visible {\n outline: var(--border-width-05) solid var(--primary-dark);\n outline-offset: var(--spacing-05);\n border-radius: var(--border-radius-full);\n}\n\n.chip-module-AIChip-icon-n5kJL-4-30-3 {\n width: var(--spacing-40);\n height: var(--spacing-40);\n font-size: var(--spacing-40) !important;\n margin-right: var(--spacing-10);\n -webkit-background-clip: text;\n background-clip: text;\n color: var(--inverse);\n}\n\n.chip-module-AIChip-text-EfbZT-4-30-3 {\n color: var(--inverse);\n font-size: var(--font-size);\n line-height: var(--font-height);\n font-family: var(--font-family);\n}\n\n/* Disabled Chip */\n\n.chip-module-AIChip--disabled-R4qHn-4-30-3 {\n background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);\n}\n\n.chip-module-AIChip-icon--disabled-UBH8e-4-30-3 {\n -webkit-background-clip: text;\n background-clip: text;\n color: var(--inverse-lightest);\n}\n\n.chip-module-AIChip-text--disabled-fCBlY-4-30-3 {\n color: var(--inverse-lightest);\n}\n\n.chip-module-AIChip-BtOef-4-30-3:disabled {\n cursor: not-allowed;\n background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);\n}\n\n.chip-module-AIChip-AIIcon-H2Hgi-4-30-3 {\n position: absolute;\n top: calc(-1 * var(--spacing-05));\n right: calc(-1 * var(--spacing-05));\n}\n";
var styles$1 = {"AIChip":"chip-module-AIChip-BtOef-4-30-3","AIChip-icon":"chip-module-AIChip-icon-n5kJL-4-30-3","AIChip-text":"chip-module-AIChip-text-EfbZT-4-30-3","AIChip--disabled":"chip-module-AIChip--disabled-R4qHn-4-30-3","AIChip-icon--disabled":"chip-module-AIChip-icon--disabled-UBH8e-4-30-3","AIChip-text--disabled":"chip-module-AIChip-text--disabled-fCBlY-4-30-3","AIChip-AIIcon":"chip-module-AIChip-AIIcon-H2Hgi-4-30-3"};
styleInject(css_248z$1);
var _excluded$5 = ["label", "icon", "disabled", "name", "className"];
var AIChip = function AIChip(props) {
var label = props.label,
icon = props.icon,
disabled = props.disabled;
props.name;
var className = props.className,
rest = _objectWithoutProperties(props, _excluded$5);
var ChipClassNames = classnames(_defineProperty$1(_defineProperty$1({}, styles$1.AIChip, true), styles$1['AIChip--disabled'], disabled), className);
var IconClassNames = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$1['AIChip-icon'], true), styles$1['AIChip-icon--disabled'], disabled), 'material-symbols', true), 'material-symbols-rounded', true));
var TextClassNames = classnames(_defineProperty$1(_defineProperty$1({}, styles$1['AIChip-text'], true), styles$1['AIChip-text--disabled'], disabled));
return /*#__PURE__*/React.createElement("button", _extends$2({
type: "button",
"data-test": "DesignSystem-AI-Chip",
className: ChipClassNames,
disabled: disabled
}, rest), /*#__PURE__*/React.createElement("i", {
"data-test": "DesignSystem-AI-Chip-Icon",
className: IconClassNames,
"aria-hidden": "true"
}, icon), /*#__PURE__*/React.createElement("span", {
"data-test": "DesignSystem-AI-Chip-Text",
className: TextClassNames
}, label), disabled ? /*#__PURE__*/React.createElement(SaraIconDisabled, {
className: styles$1['AIChip-AIIcon']
}) : /*#__PURE__*/React.createElement(SaraIconDefault, {
className: styles$1['AIChip-AIIcon']
}));
};
var css_248z = ".chat-module-AIResponse-container--glow-33hYs-4-30-3 {\n background: linear-gradient(white, white) padding-box,\n linear-gradient(to right, rgba(254, 172, 95, 1) 9%, rgba(255, 31, 136, 1) 48%, rgba(227, 28, 121, 0.48) 100%)\n border-box;\n border: var(--spacing-2-5) solid transparent;\n border-radius: var(--border-radius-30);\n}\n\n.chat-module-AIResponse-container-OdpKS-4-30-3 {\n border-radius: var(--border-radius-30);\n border: var(--border-width-2-5) solid var(--secondary);\n padding: var(--spacing-20) var(--spacing-30);\n}\n\n.chat-module-AIResponse-box--glow-V9QG9-4-30-3 {\n padding: var(--spacing-20) var(--spacing-30);\n border-radius: var(--spacing-30);\n background: linear-gradient(to right, rgba(240, 125, 0, 0.04), rgba(227, 28, 121, 0.0192));\n}\n\n.chat-module-AIResponse-actionBar-6fyXH-4-30-3 {\n margin-top: var(--spacing-10);\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n}\n\n.chat-module-AIResponse-metaData-eT5c3-4-30-3 {\n margin-left: calc(var(--spacing-80) + var(--spacing-20));\n}\n";
var styles = {"AIResponse-container--glow":"chat-module-AIResponse-container--glow-33hYs-4-30-3","AIResponse-container":"chat-module-AIResponse-container-OdpKS-4-30-3","AIResponse-box--glow":"chat-module-AIResponse-box--glow-V9QG9-4-30-3","AIResponse-actionBar":"chat-module-AIResponse-actionBar-6fyXH-4-30-3","AIResponse-metaData":"chat-module-AIResponse-metaData-eT5c3-4-30-3"};
styleInject(css_248z);
var _excluded$4 = ["children", "className", "showGlow"];
var ChatBox = function ChatBox(props) {
var children = props.children,
className = props.className,
showGlow = props.showGlow,
rest = _objectWithoutProperties(props, _excluded$4);
var chatContainerClassNames = classnames(_defineProperty$1(_defineProperty$1({}, styles['AIResponse-container'], !showGlow), styles['AIResponse-container--glow'], showGlow), className);
var chatBoxClassNames = classnames(_defineProperty$1(_defineProperty$1({}, styles['AIResponse-box--glow'], showGlow), styles['AIResponse-box'], !showGlow));
return /*#__PURE__*/React.createElement("div", _extends$2({
className: chatContainerClassNames,
"data-test": "DesignSystem-AIResponse-Container"
}, rest), /*#__PURE__*/React.createElement("div", {
className: chatBoxClassNames,
"data-test": "DesignSystem-AIResponse-Box"
}, children));
};
ChatBox.defaultProps = {
showGlow: true
};
var _excluded$3 = ["className", "selected"];
var ChatButton = function ChatButton(props) {
var className = props.className,
selected = props.selected,
rest = _objectWithoutProperties(props, _excluded$3);
return /*#__PURE__*/React.createElement(Button, _extends$2({
"data-test": "DesignSystem-AIResponse-Button"
}, rest, {
selected: selected,
size: "tiny",
largeIcon: true,
appearance: "transparent",
className: className
}));
};
var _excluded$2 = ["children", "className"];
var ChatActionBar = function ChatActionBar(props) {
var children = props.children,
className = props.className,
rest = _objectWithoutProperties(props, _excluded$2);
var actionBarClassNames = classnames(_defineProperty$1({}, styles['AIResponse-actionBar'], true), className);
return /*#__PURE__*/React.createElement("div", _extends$2({
className: actionBarClassNames,
"data-test": "DesignSystem-AIResponse-ActionBar"
}, rest), children);
};
var _excluded$1 = ["children", "className"];
var ChatBody = function ChatBody(props) {
var children = props.children,
className = props.className,
rest = _objectWithoutProperties(props, _excluded$1);
var chatBodyClassNames = classnames({
'pb-3': true
}, className);
return /*#__PURE__*/React.createElement("div", _extends$2({
className: chatBodyClassNames,
"data-test": "DesignSystem-AIResponse-Body"
}, rest), children);
};
var _excluded = ["children", "showAvatar", "className"];
var AIResponseBubble = function AIResponseBubble(props) {
var children = props.children,
showAvatar = props.showAvatar,
className = props.className,
rest = _objectWithoutProperties(props, _excluded);
var chatContainerClassNames = classnames(_defineProperty$1({}, 'ml-4', showAvatar), className);
if (showAvatar) {
return /*#__PURE__*/React.createElement("div", {
className: "d-flex"
}, /*#__PURE__*/React.createElement(Sara, {
"data-test": "DesignSystem-AIResponse-Avatar"
}), /*#__PURE__*/React.createElement(ChatBox, _extends$2({}, rest, {
className: chatContainerClassNames
}), children));
}
return /*#__PURE__*/React.createElement(ChatBox, props, children);
};
var AIResponse = function AIResponse(props) {
var metaData = props.metaData,
showAvatar = props.showAvatar;
var metaDataClassName = classnames(_defineProperty$1(_defineProperty$1({}, styles['AIResponse-metaData'], showAvatar), 'mb-2', true));
var memoizedMetaData = React.useMemo(function () {
return metaData === null || metaData === void 0 ? void 0 : metaData();
}, [metaData]);
if (metaData) {
return /*#__PURE__*/React.createElement("div", {
className: "d-flex flex-column"
}, /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-AIResponse-Metadata",
className: metaDataClassName
}, memoizedMetaData), /*#__PURE__*/React.createElement(AIResponseBubble, props));
}
return /*#__PURE__*/React.createElement(AIResponseBubble, props);
};
AIResponse.Button = ChatButton;
AIResponse.ActionBar = ChatActionBar;
AIResponse.Body = ChatBody;
var version = "4.30.3";
export { AIButton, AIChip, AIIconButton, AIResponse, ActionCard, Avatar, AvatarGroup, AvatarSelection, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, Chat, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, ChoiceList, Collapsible, Column, Combobox, DatePicker, DateRangePicker, Dialog, Divider, Dropdown, Dropzone, EditableChipInput, EditableDropdown, EditableInput, EmptyState, FileList, FileUploader, FileUploaderList, Flex, FullscreenModal, Grid, GridCell, Heading, HelpText, HorizontalNav, Icon, InlineMessage, Input, X as InputMask, KeyValuePair, Label, Legend, Link, LinkButton, List, Listbox, MdsGrid, Menu, Message, MetaList, Meter, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderImage, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, Sara, SaraSparkle, SegmentedControl, Select, SelectionCard, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text$1 as Text, TextField, Textarea, TimePicker, Toast, Tooltip, index as Utils, VerificationCodeInput, VerticalNav, version };