censademopackage
Version:
React components library project for Innovaccer Design System
1,490 lines (1,282 loc) • 648 kB
JavaScript
/**
* Generated on: 1627478629993
* Package: @innovaccer/design-system
* Version: v2.2.1
* License: MIT
* Docs: https://innovaccer.github.io/design-system
*/
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';
var colorToHex = function colorToHex(color) {
return getComputedStyle(document.documentElement).getPropertyValue("--".concat(color));
};
var css = /*#__PURE__*/Object.freeze({
__proto__: null,
colorToHex: colorToHex
});
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty$2(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _typeof(obj) {
"@babel/helpers - typeof";
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
_typeof = function (obj) {
return typeof obj;
};
} else {
_typeof = function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
}
return _typeof(obj);
}
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
function _classCallCheck$1(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties$1(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);
}
}
function _createClass$1(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties$1(Constructor.prototype, protoProps);
if (staticProps) _defineProperties$1(Constructor, staticProps);
return Constructor;
}
function _defineProperty$2(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;
}
function _extends$3() {
_extends$3 = 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;
};
return _extends$3.apply(this, arguments);
}
function _inherits$1(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
writable: true,
configurable: true
}
});
if (superClass) _setPrototypeOf$1(subClass, superClass);
}
function _getPrototypeOf$1(o) {
_getPrototypeOf$1 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf$1(o);
}
function _setPrototypeOf$1(o, p) {
_setPrototypeOf$1 = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf$1(o, p);
}
function _isNativeReflectConstruct$1() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
return true;
} catch (e) {
return false;
}
}
function _objectWithoutPropertiesLoose$2(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties$1(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose$2(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _assertThisInitialized$2(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
function _possibleConstructorReturn$1(self, call) {
if (call && (typeof call === "object" || typeof call === "function")) {
return call;
}
return _assertThisInitialized$2(self);
}
function _createSuper$1(Derived) {
var hasNativeReflectConstruct = _isNativeReflectConstruct$1();
return function _createSuperInternal() {
var Super = _getPrototypeOf$1(Derived),
result;
if (hasNativeReflectConstruct) {
var NewTarget = _getPrototypeOf$1(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return _possibleConstructorReturn$1(this, result);
};
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArray(iter) {
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
}
function _iterableToArrayLimit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
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 _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 _createForOfIteratorHelper(o, allowArrayLike) {
var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
if (!it) {
if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
if (it) o = it;
var i = 0;
var F = function () {};
return {
s: F,
n: function () {
if (i >= o.length) return {
done: true
};
return {
done: false,
value: o[i++]
};
},
e: function (e) {
throw e;
},
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 normalCompletion = true,
didErr = false,
err;
return {
s: function () {
it = it.call(o);
},
n: function () {
var step = it.next();
normalCompletion = step.done;
return step;
},
e: function (e) {
didErr = true;
err = e;
},
f: function () {
try {
if (!normalCompletion && it.return != null) it.return();
} finally {
if (didErr) throw err;
}
}
};
}
var _placeholders;
var placeholders = (_placeholders = {}, _defineProperty$2(_placeholders, 'hh:mm', '--:--'), _defineProperty$2(_placeholders, 'hh:mm AM', '--:-- AM'), _placeholders);
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];
};
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 _getTimeObjFromStr = getTimeObjFromStr(format, val),
hours = _getTimeObjFromStr.hours,
minutes = _getTimeObjFromStr.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 _time;
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 = (_time = {}, _defineProperty$2(_time, 'hh:mm', [/[0-1-2]/, /\d/, ':', /[0-5]/, /\d/]), _defineProperty$2(_time, 'hh:mm AM', [/[0-1]/, /\d/, ':', /[0-5]/, /\d/, ' ', /[APap]/, 'M']), _time);
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
});
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) continue;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes.push(arg);
} else if (Array.isArray(arg)) {
if (arg.length) {
var inner = classNames.apply(null, arg);
if (inner) {
classes.push(inner);
}
}
} else if (argType === 'object') {
if (arg.toString === Object.prototype.toString) {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
} else {
classes.push(arg.toString());
}
}
}
return classes.join(' ');
}
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$2({}, 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 initialsLength = 2;
var Avatar = function Avatar(props) {
var _classNames, _classNames2;
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) : "".concat(firstName ? firstName.trim()[0] : '').concat(lastName ? lastName.trim()[0] : '');
var tooltip = children || "".concat(firstName || '', " ").concat(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((_classNames = {
Avatar: true
}, _defineProperty$2(_classNames, "Avatar--".concat(size), size), _defineProperty$2(_classNames, "Avatar--".concat(AvatarAppearance), AvatarAppearance), _defineProperty$2(_classNames, 'Avatar--disabled', !initials || !withTooltip), _classNames), className);
var ContentClass = classnames((_classNames2 = {}, _defineProperty$2(_classNames2, "Avatar-content--".concat(size), size), _defineProperty$2(_classNames2, "Avatar-content--".concat(AvatarAppearance), AvatarAppearance), _classNames2));
var IconClass = classnames(_defineProperty$2({}, "Avatar-content--".concat(AvatarAppearance), AvatarAppearance));
var renderAvatar = function renderAvatar() {
return /*#__PURE__*/React.createElement("span", _extends$3({
"data-test": "DesignSystem-Avatar"
}, baseProps, {
className: classes
}), initials && /*#__PURE__*/React.createElement(Text, {
weight: "medium",
appearance: 'white',
className: ContentClass
}, initials), !initials && /*#__PURE__*/React.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.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 max = props.max,
borderColor = props.borderColor,
popoverOptions = props.popoverOptions,
tooltipPosition = props.tooltipPosition,
list = props.list,
className = props.className;
var popperRenderer = popoverOptions.popperRenderer,
_popoverOptions$maxHe = popoverOptions.maxHeight,
maxHeight = _popoverOptions$maxHe === void 0 ? 150 : _popoverOptions$maxHe,
_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$dark = popoverOptions.dark,
dark = _popoverOptions$dark === void 0 ? true : _popoverOptions$dark,
_popoverOptions$appen = popoverOptions.appendToBody,
appendToBody = _popoverOptions$appen === void 0 ? true : _popoverOptions$appen,
_popoverOptions$poppe = popoverOptions.popperClassName,
popperClassName = _popoverOptions$poppe === void 0 ? '' : _popoverOptions$poppe;
var baseProps = extractBaseProps(props);
var extraAvatars = list.length > max ? list.length - max > 9 ? 9 : list.length - max : 0;
var style = {
borderRadius: '50%',
backgroundColor: "".concat(borderColor),
border: "var(--spacing-xs) solid ".concat(borderColor),
boxShadow: "0 0 0 var(--spacing-xs) ".concat(borderColor)
};
var AvatarGroupClass = classnames(_defineProperty$2({}, 'AvatarGroup', true), className);
var popperClass = classnames(_defineProperty$2({}, 'AvatarGroup-Popper', true), popperClassName);
var trigger = /*#__PURE__*/React.createElement("div", {
"data-test": "DesignSystem-AvatarGroup--TriggerAvatar",
style: style
}, /*#__PURE__*/React.createElement(Avatar, {
appearance: "secondary",
firstName: "+",
lastName: "".concat(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.createElement("div", {
className: "py-6 pr-4 pl-6"
}, /*#__PURE__*/React.createElement("div", {
className: "AvatarGroup-TextWrapper",
style: {
maxHeight: maxHeight
}
}, extraAvatarsList.map(function (item, ind) {
var _item$firstName = item.firstName,
firstName = _item$firstName === void 0 ? '' : _item$firstName,
_item$lastName = item.lastName,
lastName = _item$lastName === void 0 ? '' : _item$lastName;
var name = "".concat(firstName, " ").concat(lastName);
return /*#__PURE__*/React.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.createElement("div", {
"data-test": "DesignSystem-AvatarGroup--Avatar",
className: "AvatarGroup-item",
style: style,
key: index
}, /*#__PURE__*/React.createElement(Avatar, {
appearance: appearance,
firstName: firstName,
lastName: lastName,
withTooltip: true,
tooltipPosition: tooltipPosition
}));
});
return avatars;
};
return /*#__PURE__*/React.createElement("div", _extends$3({
"data-test": "DesignSystem-AvatarGroup"
}, baseProps, {
className: "".concat(AvatarGroupClass, " d-inline-flex")
}), renderAvatars(), list.length - max > 0 && /*#__PURE__*/React.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.useEffect,
useState$2 = React.useState;
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({
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.createPortal( /*#__PURE__*/React.createElement("div", _extends$3({
"data-test": "DesignSystem-Backdrop",
"data-layer": true
}, baseProps, {
className: classes
})), document.body);
return BackdropElement;
};
Backdrop.displayName = 'Backdrop';
var Badge = function Badge(props) {
var _classNames;
var appearance = props.appearance,
children = props.children,
subtle = props.subtle,
className = props.className;
var baseProps = extractBaseProps(props);
var classes = classnames((_classNames = {
Badge: true
}, _defineProperty$2(_classNames, "Badge--".concat(appearance), appearance && !subtle), _defineProperty$2(_classNames, "Badge--subtle-".concat(appearance), subtle), _classNames), className);
return /*#__PURE__*/React.createElement("span", _extends$3({
"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$1 (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 _excluded$z = ["triggerSize", "placeholder", "menu", "children", "icon", "disabled", "open", "inlineLabel", "error"];
var DropdownButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
var _classNames, _classNames2;
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,
rest = _objectWithoutProperties$1(props, _excluded$z);
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((_classNames = {}, _defineProperty$2(_classNames, 'Button', true), _defineProperty$2(_classNames, 'DropdownButton', true), _defineProperty$2(_classNames, "DropdownButton--".concat(triggerSize), triggerSize), _defineProperty$2(_classNames, "DropdownButton--".concat(triggerSize, "Square"), menu), _defineProperty$2(_classNames, 'DropdownButton--placeholder', !children && !menu), _defineProperty$2(_classNames, 'DropdownButton--icon', icon), _defineProperty$2(_classNames, 'DropdownButton--open', open), _defineProperty$2(_classNames, 'DropdownButton--error', error), _classNames));
var textClass = classnames((_classNames2 = {}, _defineProperty$2(_classNames2, 'Text', true), _defineProperty$2(_classNames2, 'Text--regular', true), _defineProperty$2(_classNames2, 'DropdownButton-text', true), _classNames2));
return /*#__PURE__*/React.createElement("button", _extends$3({
ref: ref,
type: "button",
value: children,
className: buttonClass,
disabled: disabled,
tabIndex: 0,
"data-test": "DesignSystem-DropdownTrigger"
}, rest), !menu && /*#__PURE__*/React.createElement("div", {
className: "DropdownButton-wrapper"
}, inlineLabel && /*#__PURE__*/React.createElement(Text, {
appearance: "subtle",
className: "mr-4"
}, "".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
}), value && /*#__PURE__*/React.createElement("span", {
className: textClass
}, value)), /*#__PURE__*/React.createElement(Icon, {
appearance: buttonDisabled,
name: iconName
}));
});
DropdownButton.displayName = 'DropdownButton';
var _excluded$y = ["children", "componentType", "className"];
var GenericText = function GenericText(_ref) {
var children = _ref.children,
_ref$componentType = _ref.componentType,
componentType = _ref$componentType === void 0 ? 'span' : _ref$componentType,
className = _ref.className,
props = _objectWithoutProperties$1(_ref, _excluded$y);
return /*#__PURE__*/React.createElement(componentType, _objectSpread2(_objectSpread2({}, props), {}, {
className: className
}), children);
};
var _excluded$x = ["appearance", "size", "children", "weight", "small", "className"];
var Text = function Text(props) {
var _classNames;
var appearance = props.appearance,
size = props.size,
children = props.children,
weight = props.weight,
small = props.small,
className = props.className,
rest = _objectWithoutProperties$1(props, _excluded$x);
var classes = classnames((_classNames = {
Text: true
}, _defineProperty$2(_classNames, "Text--".concat(appearance), appearance), _defineProperty$2(_classNames, "Text--".concat(weight), weight), _defineProperty$2(_classNames, "Text--".concat(size), size), _defineProperty$2(_classNames, 'Text--small', size === 'small' || small), _classNames), className);
return /*#__PURE__*/React.createElement(GenericText, _extends$3({
"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 _classNames;
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((_classNames = {}, _defineProperty$2(_classNames, 'material-icons', true), _defineProperty$2(_classNames, "material-icons-".concat(mapper(type)), type && type !== 'filled'), _defineProperty$2(_classNames, 'Icon', true), _defineProperty$2(_classNames, "Icon--".concat(color), appearance), _defineProperty$2(_classNames, "".concat(className), className), _classNames));
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$3({}, baseProps, {
className: className
}), children);
}
return /*#__PURE__*/React.createElement("i", _extends$3({}, baseProps, {
className: iconClass,
style: styles,
onClick: onClick
}), type ? "".concat(name, "_").concat(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 _excluded$w = ["size", "tabIndex", "defaultChecked", "indeterminate", "label", "disabled", "onChange", "name", "value", "className", "checked"];
/**
* ######Checkbox has two types:
* - [Controlled Checkbox](https://reactjs.org/docs/forms.html#controlled-components)
* - [Uncontrolled Checkbox](https://reactjs.org/docs/uncontrolled-components.html)
*/
var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
var _classNames, _classNames2, _classNames4;
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,
disabled = props.disabled,
onChange = props.onChange,
name = props.name,
value = props.value,
className = props.className;
props.checked;
var rest = _objectWithoutProperties$1(props, _excluded$w);
var ref = React.useRef(null);
React.useImperativeHandle(forwardedRef, function () {
return ref.current;
});
var _React$useState = React.useState(props.checked === undefined ? defaultChecked : props.checked),
_React$useState2 = _slicedToArray(_React$useState, 2),
checked = _React$useState2[0],
setChecked = _React$useState2[1];
React.useEffect(function () {
setIndeterminate(indeterminate);
}, [indeterminate]);
React.useEffect(function () {
if (props.checked !== undefined) {
setChecked(props.checked);
}
}, [props.checked]);
var CheckboxClass = classnames((_classNames = {}, _defineProperty$2(_classNames, 'Checkbox', true), _defineProperty$2(_classNames, 'Checkbox--disabled', disabled), _classNames), className);
var CheckboxOuterWrapper = classnames((_classNames2 = {}, _defineProperty$2(_classNames2, 'Checkbox-outerWrapper', true), _defineProperty$2(_classNames2, "Checkbox-outerWrapper--".concat(size), size), _classNames2));
var CheckboxTextClass = classnames(_defineProperty$2({}, 'Checkbox-label', true));
var CheckboxInputWrapper = classnames((_classNames4 = {}, _defineProperty$2(_classNames4, 'Checkbox-input', true), _defineProperty$2(_classNames4, 'Checkbox-input--checked', checked), _defineProperty$2(_classNames4, 'Checkbox-input--indeterminate', props.indeterminate), _classNames4));
var CheckboxWrapper = classnames(_defineProperty$2({}, 'Checkbox-wrapper', true));
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 = "".concat(name, "-").concat(label, "-").concat(uidGenerator());
var IconName = indeterminate ? 'remove' : checked ? 'check' : '';
var IconSize = size === 'tiny' ? 12 : 16;
return /*#__PURE__*/React.createElement("div", {
className: CheckboxClass
}, /*#__PURE__*/React.createElement("div", {
className: CheckboxOuterWrapper
}, /*#__PURE__*/React.createElement("input", _extends$3({}, 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.createElement("span", {
className: CheckboxWrapper
}, IconName && /*#__PURE__*/React.createElement(Icon, {
name: IconName,
size: IconSize,
appearance: 'white'
}))), label && label.trim() && /*#__PURE__*/React.createElement("label", {
htmlFor: id,
className: CheckboxTextClass
}, /*#__PURE__*/React.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.createElement("div", {
className: className,
onMouseEnter: onUpdateActiveOption,
"data-test": dataTest,
"data-disabled": disabled
}, /*#__PURE__*/React.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,
onClick