examplepackageversion
Version:
React components library project for Innovaccer Design System
1,242 lines (1,102 loc) • 504 kB
JavaScript
/**
* Generated on: 1627478630381
* Package: @innovaccer/design-system
* Version: v2.2.1
* License: MIT
* Docs: https://innovaccer.github.io/design-system
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('classnames'), require('react-dom'), require('react-popper')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', 'classnames', 'react-dom', 'react-popper'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.inno = {}, global.React, global.classNames, global.ReactDOM, global.ReactPopper));
}(this, (function (exports, React, classNames, ReactDOM, reactPopper) { 'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () {
return e[k];
}
});
}
});
}
n['default'] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
var colorToHex = function colorToHex(color) {
return getComputedStyle(document.documentElement).getPropertyValue("--" + color);
};
var css = /*#__PURE__*/Object.freeze({
__proto__: null,
colorToHex: colorToHex
});
var _a$2;
var placeholders = (_a$2 = {}, _a$2['hh:mm'] = '--:--', _a$2['hh:mm AM'] = '--:-- AM', _a$2);
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 _a = getTimeObjFromStr(inputFormat, time),
hours = _a.hours,
minutes = _a.minutes,
am_pm = _a.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" + hours : hours;
break;
case 'mm':
val += minutes < 10 ? "0" + minutes : minutes;
break;
}
if (i !== f.length - 1) val += separator;
});
val += isFormat12hour(format) && am_pm ? " " + am_pm : '';
return val;
};
var isValid = function isValid(validators) {
var value = [];
for (var _i = 1; _i < arguments.length; _i++) {
value[_i - 1] = arguments[_i];
}
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];
if (year % 400 == 0 || year % 100 != 0 && year % 4 == 0) monthLength[1] = 29;
return month <= 12 && date <= monthLength[month - 1];
};
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 date = +p[1] || 1;
var month = +p[0] || 1;
var year = +p[2] || 1900;
return validate(date, month, year);
case 'yyyy/mm/dd':
var p = val.split('/');
var date = +p[2] || 1;
var month = +p[1] || 1;
var year = +p[0] || 1900;
return validate(date, month, year);
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 date = +p[1] || 1;
var month = +p[0] || 1;
var year = +p[2] || 1900;
return validate(date, month, year);
case 'yyyy-mm-dd':
var p = val.split('-');
var date = +p[2] || 1;
var month = +p[1] || 1;
var year = +p[0] || 1900;
return validate(date, month, year);
default:
return false;
}
};
var time$1 = function time(val, format) {
var _a = getTimeObjFromStr(format, val),
hours = _a.hours,
minutes = _a.minutes;
var hoursCond = isFormat12hour(format) ? hours <= 12 : hours < 24;
return hoursCond && minutes <= 60;
};
var validators = /*#__PURE__*/Object.freeze({
__proto__: null,
isValid: isValid,
date: date$1,
time: time$1
});
var _a$1;
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 = (_a$1 = {}, _a$1['hh:mm'] = [/[0-1-2]/, /\d/, ':', /[0-5]/, /\d/], _a$1['hh:mm AM'] = [/[0-1]/, /\d/, ':', /[0-5]/, /\d/, ' ', /[APap]/, 'M'], _a$1);
var masks = /*#__PURE__*/Object.freeze({
__proto__: null,
date: date,
rangeDate: rangeDate,
time: time
});
var index$1 = /*#__PURE__*/Object.freeze({
__proto__: null,
css: css,
validators: validators,
masks: masks
});
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
/** @deprecated */
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
var extractBaseProps = function extractBaseProps(props) {
var baseProps = ['className', 'data-test'];
var basePropsObj = baseProps.reduce(function (acc, curr) {
var _a;
return props[curr] ? __assign(__assign({}, acc), (_a = {}, _a[curr] = props[curr], _a)) : __assign({}, 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 initialsLength = 2;
var Avatar = function Avatar(props) {
var _a, _b, _c;
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;
var baseProps = extractBaseProps(props);
var initials = children ? children.trim().slice(0, initialsLength) : "" + (firstName ? firstName.trim()[0] : '') + (lastName ? lastName.trim()[0] : '');
var tooltip = children || (firstName || '') + " " + (lastName || '') || '';
var DefaultAppearance = 'secondary';
var colors = ['accent4', 'primary', 'accent3', 'alert', 'accent2', 'warning', 'accent1', 'success'];
var AvatarAppearance = appearance || colors[(initials.charCodeAt(0) + (initials.charCodeAt(1) || 0)) % 8] || DefaultAppearance;
var classes = classNames__default['default']((_a = {
Avatar: true
}, _a["Avatar--" + size] = size, _a["Avatar--" + AvatarAppearance] = AvatarAppearance, _a['Avatar--disabled'] = !initials || !withTooltip, _a), className);
var ContentClass = classNames__default['default']((_b = {}, _b["Avatar-content--" + size] = size, _b["Avatar-content--" + AvatarAppearance] = AvatarAppearance, _b));
var IconClass = classNames__default['default']((_c = {}, _c["Avatar-content--" + AvatarAppearance] = AvatarAppearance, _c));
var renderAvatar = function renderAvatar() {
return /*#__PURE__*/React__namespace.createElement("span", __assign({
"data-test": "DesignSystem-Avatar"
}, baseProps, {
className: classes
}), initials && /*#__PURE__*/React__namespace.createElement(Text, {
weight: "medium",
appearance: 'white',
className: ContentClass
}, initials), !initials && /*#__PURE__*/React__namespace.createElement(Icon, {
"data-test": "DesignSystem-Avatar--Icon",
name: "person",
size: size === 'regular' ? 16 : 12,
appearance: 'white',
className: IconClass
}));
};
var renderTooltip = function renderTooltip() {
if (withTooltip && initials) {
return /*#__PURE__*/React__namespace.createElement(Tooltip, {
tooltip: tooltip,
position: tooltipPosition,
triggerClass: 'flex-grow-0'
}, renderAvatar());
}
return renderAvatar();
};
return renderTooltip();
};
Avatar.displayName = 'Avatar';
Avatar.defaultProps = {
tooltipPosition: 'bottom',
withTooltip: true,
size: 'regular'
};
var AvatarGroup = function AvatarGroup(props) {
var _a, _b;
var max = props.max,
borderColor = props.borderColor,
popoverOptions = props.popoverOptions,
tooltipPosition = props.tooltipPosition,
list = props.list,
className = props.className;
var popperRenderer = popoverOptions.popperRenderer,
_c = popoverOptions.maxHeight,
maxHeight = _c === void 0 ? 150 : _c,
_d = popoverOptions.position,
position = _d === void 0 ? 'bottom' : _d,
_e = popoverOptions.on,
on = _e === void 0 ? 'hover' : _e,
_f = popoverOptions.dark,
dark = _f === void 0 ? true : _f,
_g = popoverOptions.appendToBody,
appendToBody = _g === void 0 ? true : _g,
_h = popoverOptions.popperClassName,
popperClassName = _h === void 0 ? '' : _h;
var baseProps = extractBaseProps(props);
var extraAvatars = list.length > max ? list.length - max > 9 ? 9 : list.length - max : 0;
var style = {
borderRadius: '50%',
backgroundColor: "" + borderColor,
border: "var(--spacing-xs) solid " + borderColor,
boxShadow: "0 0 0 var(--spacing-xs) " + borderColor
};
var AvatarGroupClass = classNames__default['default']((_a = {}, _a['AvatarGroup'] = true, _a), className);
var popperClass = classNames__default['default']((_b = {}, _b['AvatarGroup-Popper'] = true, _b), popperClassName);
var trigger = /*#__PURE__*/React__namespace.createElement("div", {
"data-test": "DesignSystem-AvatarGroup--TriggerAvatar",
style: style
}, /*#__PURE__*/React__namespace.createElement(Avatar, {
appearance: "secondary",
firstName: "+",
lastName: "" + extraAvatars,
withTooltip: false
}));
var renderPopper = function renderPopper() {
var extraAvatarsList = list.slice(max, list.length);
if (popperRenderer && typeof renderPopper === 'function') {
return popperRenderer(extraAvatarsList);
}
return /*#__PURE__*/React__namespace.createElement("div", {
className: "py-6 pr-4 pl-6"
}, /*#__PURE__*/React__namespace.createElement("div", {
className: "AvatarGroup-TextWrapper",
style: {
maxHeight: maxHeight
}
}, extraAvatarsList.map(function (item, ind) {
var _a = item.firstName,
firstName = _a === void 0 ? '' : _a,
_b = item.lastName,
lastName = _b === void 0 ? '' : _b;
var name = firstName + " " + lastName;
return /*#__PURE__*/React__namespace.createElement(Text, {
key: ind,
appearance: dark ? 'white' : 'default',
className: ind < extraAvatars - 1 ? 'mb-5' : '',
"data-test": "DesignSystem-AvatarGroup--Text"
}, name);
})));
};
var renderAvatars = function renderAvatars() {
var avatars = list.slice(0, max).map(function (item, index) {
var appearance = item.appearance,
firstName = item.firstName,
lastName = item.lastName;
return /*#__PURE__*/React__namespace.createElement("div", {
"data-test": "DesignSystem-AvatarGroup--Avatar",
className: "AvatarGroup-item",
style: style,
key: index
}, /*#__PURE__*/React__namespace.createElement(Avatar, {
appearance: appearance,
firstName: firstName,
lastName: lastName,
withTooltip: true,
tooltipPosition: tooltipPosition
}));
});
return avatars;
};
return /*#__PURE__*/React__namespace.createElement("div", __assign({
"data-test": "DesignSystem-AvatarGroup"
}, baseProps, {
className: AvatarGroupClass + " d-inline-flex"
}), renderAvatars(), list.length - max > 0 && /*#__PURE__*/React__namespace.createElement(Popover, {
on: on,
dark: dark,
trigger: trigger,
position: position,
appendToBody: appendToBody,
className: popperClass
}, renderPopper()));
};
AvatarGroup.displayName = 'AvatarGroup';
AvatarGroup.defaultProps = {
max: 2,
borderColor: 'var(--white)',
tooltipPosition: 'bottom',
popoverOptions: {}
};
var useEffect$1 = React__namespace.useEffect,
useState$2 = React__namespace.useState;
var Backdrop = function Backdrop(props) {
var className = props.className;
var baseProps = extractBaseProps(props);
var _a = useState$2(null),
savedBodyOverflow = _a[0],
setBodyOverflow = _a[1];
var _b = React__namespace.useState(props.open),
open = _b[0],
setOpen = _b[1];
var _c = React__namespace.useState(props.open),
animate = _c[0],
setAnimate = _c[1];
var classes = classNames__default['default']({
Backdrop: true,
'Backdrop--open': open,
'Backdrop-animation--open': animate,
'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__namespace.createPortal( /*#__PURE__*/React__namespace.createElement("div", __assign({
"data-test": "DesignSystem-Backdrop",
"data-layer": true
}, baseProps, {
className: classes
})), document.body);
return BackdropElement;
};
Backdrop.displayName = 'Backdrop';
var Badge = function Badge(props) {
var _a;
var appearance = props.appearance,
children = props.children,
subtle = props.subtle,
className = props.className;
var baseProps = extractBaseProps(props);
var classes = classNames__default['default']((_a = {
Badge: true
}, _a["Badge--" + appearance] = appearance && !subtle, _a["Badge--subtle-" + appearance] = subtle, _a), className);
return /*#__PURE__*/React__namespace.createElement("span", __assign({
"data-test": "DesignSystem-Badge"
}, baseProps, {
className: classes
}), children);
};
Badge.displayName = 'Badge';
Badge.defaultProps = {
appearance: 'secondary'
};
/* 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 (delay, atBegin, callback) {
return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);
}
var getSearchedOptions = function getSearchedOptions(options, searchTerm) {
var result = options.filter(function (option) {
return option.label.toLowerCase().includes(searchTerm.toLowerCase());
});
return result;
};
var _isEqual = function _isEqual(arr1, arr2) {
return arr1.length === arr2.length && arr1.every(function (option, index) {
return option.value === arr2[index].value || option.label === arr2[index].label;
});
};
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 DropdownButton = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
var _a, _b;
var _c = props.triggerSize,
triggerSize = _c === void 0 ? 'regular' : _c,
_d = props.placeholder,
placeholder = _d === void 0 ? 'Select' : _d,
_e = props.menu,
menu = _e === void 0 ? false : _e,
children = props.children,
icon = props.icon,
disabled = props.disabled,
open = props.open,
inlineLabel = props.inlineLabel,
error = props.error,
rest = __rest(props, ["triggerSize", "placeholder", "menu", "children", "icon", "disabled", "open", "inlineLabel", "error"]);
var buttonDisabled = disabled ? 'disabled' : 'default';
var trimmedPlaceholder = placeholder.trim();
var value = children ? children : trimmedPlaceholder;
var iconName = !menu ? 'keyboard_arrow_down' : icon ? icon : 'more_horiz';
var buttonClass = classNames__default['default']((_a = {}, _a['Button'] = true, _a['DropdownButton'] = true, _a["DropdownButton--" + triggerSize] = triggerSize, _a["DropdownButton--" + triggerSize + "Square"] = menu, _a['DropdownButton--placeholder'] = !children && !menu, _a['DropdownButton--icon'] = icon, _a['DropdownButton--open'] = open, _a['DropdownButton--error'] = error, _a));
var textClass = classNames__default['default']((_b = {}, _b['Text'] = true, _b['Text--regular'] = true, _b['DropdownButton-text'] = true, _b));
return /*#__PURE__*/React__namespace.createElement("button", __assign({
ref: ref,
type: "button",
value: children,
className: buttonClass,
disabled: disabled,
tabIndex: 0,
"data-test": "DesignSystem-DropdownTrigger"
}, rest), !menu && /*#__PURE__*/React__namespace.createElement("div", {
className: "DropdownButton-wrapper"
}, inlineLabel && /*#__PURE__*/React__namespace.createElement(Text, {
appearance: "subtle",
className: "mr-4"
}, "" + inlineLabel.trim().charAt(0).toUpperCase() + inlineLabel.trim().slice(1)), icon && !inlineLabel && /*#__PURE__*/React__namespace.createElement(Icon, {
appearance: buttonDisabled,
className: "d-flex align-items-center mr-4",
name: icon
}), value && /*#__PURE__*/React__namespace.createElement("span", {
className: textClass
}, value)), /*#__PURE__*/React__namespace.createElement(Icon, {
appearance: buttonDisabled,
name: iconName
}));
});
DropdownButton.displayName = 'DropdownButton';
var GenericText = function GenericText(_a) {
var children = _a.children,
_b = _a.componentType,
componentType = _b === void 0 ? 'span' : _b,
className = _a.className,
props = __rest(_a, ["children", "componentType", "className"]);
return /*#__PURE__*/React__namespace.createElement(componentType, __assign(__assign({}, props), {
className: className
}), children);
};
var Text = function Text(props) {
var _a;
var appearance = props.appearance,
size = props.size,
children = props.children,
weight = props.weight,
small = props.small,
className = props.className,
rest = __rest(props, ["appearance", "size", "children", "weight", "small", "className"]);
var classes = classNames__default['default']((_a = {
Text: true
}, _a["Text--" + appearance] = appearance, _a["Text--" + weight] = weight, _a["Text--" + size] = size, _a['Text--small'] = size === 'small' || small, _a), className);
return /*#__PURE__*/React__namespace.createElement(GenericText, __assign({
"data-test": "DesignSystem-Text"
}, rest, {
className: classes,
componentType: "span"
}), children);
};
Text.displayName = 'Text';
Text.defaultProps = {
appearance: 'default',
size: 'regular'
};
var Icon = function Icon(props) {
var _a;
var appearance = props.appearance,
className = props.className,
name = props.name,
size = props.size,
onClick = props.onClick,
children = props.children;
var baseProps = extractBaseProps(props);
var mapper = function mapper(val) {
if (val === 'outline') return 'outlined';
if (val === 'rounded') return 'round';
return val;
};
var type = mapper(props.type);
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__default['default']((_a = {}, _a['material-icons'] = true, _a["material-icons-" + mapper(type)] = type && type !== 'filled', _a['Icon'] = true, _a["Icon--" + color] = appearance, _a["" + className] = className, _a));
var styles = {
fontSize: size + "px",
width: size + "px"
};
if (children && /*#__PURE__*/React__namespace.isValidElement(children)) {
return /*#__PURE__*/React__namespace.createElement("span", __assign({}, baseProps, {
className: className
}), children);
}
return /*#__PURE__*/React__namespace.createElement("i", __assign({}, baseProps, {
className: iconClass,
style: styles,
onClick: onClick
}), type ? name + "_" + type : name);
};
Icon.displayName = 'Icon';
Icon.defaultProps = {
size: 16,
type: 'round'
};
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 Checkbox = /*#__PURE__*/React__namespace.forwardRef(function (props, forwardedRef) {
var _a, _b, _c, _d, _e;
var _f = props.size,
size = _f === void 0 ? 'regular' : _f,
_g = props.tabIndex,
tabIndex = _g === void 0 ? 0 : _g,
defaultChecked = props.defaultChecked,
indeterminate = props.indeterminate,
label = props.label,
disabled = props.disabled,
onChange = props.onChange,
name = props.name,
value = props.value,
className = props.className;
props.checked;
var rest = __rest(props, ["size", "tabIndex", "defaultChecked", "indeterminate", "label", "disabled", "onChange", "name", "value", "className", "checked"]);
var ref = React__namespace.useRef(null);
React__namespace.useImperativeHandle(forwardedRef, function () {
return ref.current;
});
var _h = React__namespace.useState(props.checked === undefined ? defaultChecked : props.checked),
checked = _h[0],
setChecked = _h[1];
React__namespace.useEffect(function () {
setIndeterminate(indeterminate);
}, [indeterminate]);
React__namespace.useEffect(function () {
if (props.checked !== undefined) {
setChecked(props.checked);
}
}, [props.checked]);
var CheckboxClass = classNames__default['default']((_a = {}, _a['Checkbox'] = true, _a['Checkbox--disabled'] = disabled, _a), className);
var CheckboxOuterWrapper = classNames__default['default']((_b = {}, _b['Checkbox-outerWrapper'] = true, _b["Checkbox-outerWrapper--" + size] = size, _b));
var CheckboxTextClass = classNames__default['default']((_c = {}, _c['Checkbox-label'] = true, _c));
var CheckboxInputWrapper = classNames__default['default']((_d = {}, _d['Checkbox-input'] = true, _d['Checkbox-input--checked'] = checked, _d['Checkbox-input--indeterminate'] = props.indeterminate, _d));
var CheckboxWrapper = classNames__default['default']((_e = {}, _e['Checkbox-wrapper'] = true, _e));
var setIndeterminate = function setIndeterminate(indeterminateValue) {
ref.current.indeterminate = indeterminateValue;
};
var onChangeHandler = function onChangeHandler(e) {
if (props.checked === undefined) {
setChecked(e.target.checked);
setIndeterminate(e.target.indeterminate);
}
if (onChange) onChange(e);
};
var id = name + "-" + label + "-" + uidGenerator();
var IconName = indeterminate ? 'remove' : checked ? 'check' : '';
var IconSize = size === 'tiny' ? 12 : 16;
return /*#__PURE__*/React__namespace.createElement("div", {
className: CheckboxClass
}, /*#__PURE__*/React__namespace.createElement("div", {
className: CheckboxOuterWrapper
}, /*#__PURE__*/React__namespace.createElement("input", __assign({}, rest, {
type: "checkbox",
defaultChecked: defaultChecked,
onChange: onChangeHandler,
checked: checked,
disabled: disabled,
ref: ref,
name: name,
value: value,
className: CheckboxInputWrapper,
tabIndex: tabIndex,
id: id
})), /*#__PURE__*/React__namespace.createElement("span", {
className: CheckboxWrapper
}, IconName && /*#__PURE__*/React__namespace.createElement(Icon, {
name: IconName,
size: IconSize,
appearance: 'white'
}))), label && label.trim() && /*#__PURE__*/React__namespace.createElement("label", {
htmlFor: id,
className: CheckboxTextClass
}, /*#__PURE__*/React__namespace.createElement(Text, {
size: size === 'tiny' ? 'small' : 'regular',
appearance: disabled ? 'disabled' : 'default'
}, label.trim())));
});
Checkbox.displayName = 'Checkbox';
var CheckboxOption = function CheckboxOption(props) {
var className = props.className,
selected = props.selected,
optionData = props.optionData,
onChangeHandler = props.onChangeHandler,
onUpdateActiveOption = props.onUpdateActiveOption,
dataTest = props.dataTest;
var label = optionData.label,
disabled = optionData.disabled;
return /*#__PURE__*/React__namespace.createElement("div", {
className: className,
onMouseEnter: onUpdateActiveOption,
"data-test": dataTest,
"data-disabled": disabled
}, /*#__PURE__*/React__namespace.createElement(Checkbox, {
label: label,
disabled: disabled,
checked: selected,
onChange: onChangeHandler,
tabIndex: -1,
className: "OptionCheckbox"
}));
};
var DefaultOption = function DefaultOption(props) {
var className = props.className,
textClassName = props.textClassName,
onClickHandler = props.onClickHandler,
optionData = props.optionData,
appearance = props.appearance,
onUpdateActiveOption = props.onUpdateActiveOption,
dataTest = props.dataTest;
var label = optionData.label,
disabled = optionData.disabled;
return /*#__PURE__*/React__namespace.createElement("div", {
className: className,
onClick: onClickHandler,
onMouseEnter: onUpdateActiveOption,
"data-test": dataTest,
"data-disabled": disabled
}, /*#__PURE__*/React__namespace.createElement("div", {
className: 'Option-label'
}, /*#__PURE__*/React__namespace.createElement(Text, {
className: textClassName,
appearance: appearance
}, label)));
};
var MetaOption = function MetaOption(props) {
var className = props.className,
textClassName = props.textClassName,
onClickHandler = props.onClickHandler,
optionData = props.optionData,
onUpdateActiveOption = props.onUpdateActiveOption,
renderSubInfo = props.renderSubInfo,
appearance = props.appearance,
dataTest = props.dataTest;
var subInfo = optionData.subInfo,
label = optionData.label,
disabled = optionData.disabled;
return /*#__PURE__*/React__namespace.createElement("div", {
className: className,
onClick: onClickHandler,
onMouseEnter: onUpdateActiveOption,
"data-test": dataTest,
"data-disabled": disabled
}, /*#__PURE__*/React__namespace.createElement("div", {
className: 'Option-label'
}, /*#__PURE__*/React__namespace.createElement(Text, {
className: textClassName,
appearance: appearance
}, label), subInfo && renderSubInfo(subInfo)));
};
var IconOption = function IconOption(props) {
var _a;
var className = props.className,
textClassName = props.textClassName,
onClickHandler = props.onClickHandler,
optionData = props.optionData,
onUpdateActiveOption = props.onUpdateActiveOption,
appearance = props.appearance,
dataTest = props.dataTest;
var label = optionData.label,
icon = optionData.icon,
disabled = optionData.disabled;
var OptionClass = classNames__default['default']((_a = {}, _a["" + className] = true, _a['Option--icon'] = icon, _a));
return /*#__PURE__*/React__namespace.createElement("div", {
className: OptionClass,
onClick: onClickHandler,
onMouseEnter: onUpdateActiveOption,
"data-test": dataTest,
"data-disabled": disabled
}, icon && /*#__PURE__*/React__namespace.createElement(Icon, {
className: "Option-icon mr-4",
name: icon,
appearance: appearance
}), /*#__PURE__*/React__namespace.createElement("div", {
className: 'Option-label'
}, /*#__PURE__*/React__namespace.createElement(Text, {
className: textClassName,
appearance: appearance
}, label)));
};
var IconWithMetaOption = function IconWithMetaOption(props) {
var _a;
var className = props.className,
textClassName = props.textClassName,
renderSubInfo = props.renderSubInfo,
onClickHandler = props.onClickHandler,
optionData = props.optionData,
onUpdateActiveOption = props.onUpdateActiveOption,
appearance = props.appearance,
dataTest = props.dataTest;
var subInfo = optionData.subInfo,
label = optionData.label,
icon = optionData.icon,
disabled = optionData.disabled;
var OptionClass = classNames__default['default']((_a = {}, _a["" + className] = true, _a['Option--icon'] = icon, _a));
return /*#__PURE__*/React__namespace.createElement("div", {