@coconut-software/ui
Version:
React components for faster and easier web development.
1,164 lines (1,030 loc) • 545 kB
JavaScript
import clsx from 'clsx';
import React, { forwardRef, useState, createContext, useContext, useEffect, useCallback, useRef, Children, isValidElement, cloneElement, useReducer, useMemo, useLayoutEffect, createRef, createElement, Fragment as Fragment$1, PureComponent } from 'react';
import { useIntl, FormattedMessage } from 'react-intl';
import { createPortal } from 'react-dom';
import { format as format$1, parse as parse$1, setDate, startOfWeek, endOfWeek, isValid, isAfter, isSameWeek, isSameDay, isSameMonth, isToday, isWeekend, startOfMonth, addDays, endOfMonth, differenceInCalendarDays, addMonths, subDays, subMonths, isWithinInterval, fromUnixTime } from 'date-fns';
import en from 'date-fns/locale/en-US';
import es from 'date-fns/locale/es';
import fr from 'date-fns/locale/fr';
import ko from 'date-fns/locale/ko';
import pl from 'date-fns/locale/pl';
import pt from 'date-fns/locale/pt-BR';
import ru from 'date-fns/locale/ru';
import zh from 'date-fns/locale/zh-CN';
/******************************************************************************
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.
***************************************************************************** */
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 __spreadArray(to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
}
var _SuppressedError = typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
function toDataSet(record) {
return Object.keys(record || {}).reduce(function (previous, current) {
var key = "data-".concat(current.replace(/[A-Z]/g, function (match) { return '-' + match.toLowerCase(); }));
if (record) {
previous[key] = record[current];
}
return previous;
}, {});
}
var sizes = {
large: {
root: 'h-12 px-4 py-3',
icon: 'w-6 h-6',
},
medium: {
root: 'h-10 px-2 py-2',
icon: 'w-5 h-5',
},
small: {
root: 'h-8 px-1 py-1',
icon: 'w-4.5 h-4.5',
},
};
var disabled = {
contained: {
default: "disabled:bg-black-15 disabled:text-black-30",
inverse: "disabled:bg-white-15 disabled:text-white-30",
},
outlined: {
default: "disabled:bg-transparent disabled:border-black-15 disabled:text-black-30",
inverse: "disabled:bg-transparent disabled:border-white-30 disabled:text-white-30",
},
text: {
default: "disabled:bg-transparent disabled:text-black-30",
inverse: "disabled:bg-transparent disabled:text-white-30",
},
};
var positions = {
contained: {
default: {
left: 'rounded-l',
middle: 'rounded-none border-l border-black-15 disabled:border-black-15',
right: 'rounded-r border-l border-black-15 disabled:border-black-15',
},
inverse: {
left: 'rounded-l',
middle: 'rounded-none border-l border-black-15 disabled:border-black-15',
right: 'rounded-r border-l border-black-15 disabled:border-black-15',
},
primary: {
left: 'rounded-l',
middle: "rounded-none border-l border-primary-dark disabled:border-black-15",
right: 'rounded-r border-l border-primary-dark disabled:border-black-15',
},
secondary: {
left: 'rounded-l',
middle: "rounded-none border-l border-secondary-dark disabled:border-black-15",
right: "rounded-r border-l border-secondary-dark disabled:border-black-15",
},
danger: {
left: 'rounded-l',
middle: "rounded-none border-l border-error-darker disabled:border-black-15",
right: 'rounded-r border-l border-error-darker disabled:border-black-15',
},
},
outlined: {
default: {
left: 'rounded-l disabled:border-black-20',
middle: 'rounded-none border-l-0 disabled:border-black-20',
right: 'rounded-r border-l-0 disabled:border-black-20',
},
inverse: {
left: 'rounded-l disabled:border-white-100',
middle: 'rounded-none border-l-0 disabled:border-white-100',
right: 'rounded-r border-l-0 disabled:border-white-100',
},
primary: {
left: 'rounded-l disabled:border-primary-main',
middle: 'rounded-none border-l-0 disabled:border-primary-main',
right: 'rounded-r border-l-0 disabled:border-primary-main',
},
secondary: {
left: 'rounded-l disabled:border-secondary-main',
middle: 'rounded-none border-l-0 disabled:border-secondary-main',
right: 'rounded-r border-l-0 disabled:border-secondary-main',
},
danger: {
left: 'rounded-l disabled:border-error-dark',
middle: 'rounded-none border-l-0 disabled:border-error-dark',
right: 'rounded-r border-l-0 disabled:border-error-dark',
},
},
text: {
default: {
left: 'rounded-l',
middle: 'rounded-none border-l border-black-15 disabled:border-black-15',
right: 'rounded-r border-l border-black-15 disabled:border-black-15',
},
inverse: {
left: 'rounded-l',
middle: 'rounded-none border-l border-black-15 disabled:border-black-15',
right: 'rounded-r border-l border-black-15 disabled:border-black-15',
},
primary: {
left: 'rounded-l',
middle: "rounded-none border-l border-primary-dark disabled:border-black-15",
right: 'rounded-r border-l border-primary-dark disabled:border-black-15',
},
secondary: {
left: 'rounded-l',
middle: "rounded-none border-l border-secondary-dark disabled:border-black-15",
right: "rounded-r border-l border-secondary-dark disabled:border-black-15",
},
danger: {
left: 'rounded-l',
middle: "rounded-none border-l border-error-darker disabled:border-black-15",
right: 'rounded-r border-l border-error-darker disabled:border-black-15',
},
},
};
var variants = {
contained: {
default: "bg-black-5 text-black-90 ".concat(disabled.contained.default, " active:bg-black-25 focus:bg-black-15 focus-visible:ring hover:bg-black-15"),
inverse: "bg-white-25 text-white-100 ".concat(disabled.contained.inverse, " active:bg-white-60 focus:bg-white-45 focus-visible:ring hover:bg-white-45"),
primary: "bg-primary-main text-white-100 ".concat(disabled.contained.default, " active:bg-primary-darker focus:bg-primary-dark focus-visible:ring hover:bg-primary-dark"),
secondary: "bg-secondary-main text-white-100 ".concat(disabled.contained.default, " active:bg-secondary-darker focus:bg-secondary-dark focus-visible:ring hover:bg-secondary-dark"),
danger: "bg-error-main text-white-100 ".concat(disabled.contained.default, " active:bg-error-darker focus:bg-error-dark focus-visible:ring hover:bg-error-dark"),
},
outlined: {
default: "border border-solid border-black-20 text-black-90 ".concat(disabled.outlined.default, " active:bg-black-15 focus:bg-black-5 focus-visible:ring hover:bg-black-5"),
inverse: "border border-solid border-white-100 text-white-100 ".concat(disabled.outlined.inverse, " active:bg-white-45 focus:bg-white-25 focus-visible:ring hover:bg-white-25"),
primary: "border border-solid border-primary-main text-primary-main ".concat(disabled.outlined.default, " active:bg-primary-20 focus:bg-primary-10 focus-visible:ring hover:bg-primary-10"),
secondary: "border border-solid border-secondary-main text-secondary-main ".concat(disabled.outlined.default, " active:bg-secondary-20 focus:bg-secondary-10 focus-visible:ring hover:bg-secondary-10"),
danger: "border border-solid border-error-darker text-error-darker ".concat(disabled.outlined.default, " active:bg-error-20 focus:bg-error-10 focus-visible:ring hover:bg-error-10"),
},
text: {
default: "text-black-90 ".concat(disabled.text.default, " active:bg-black-15 focus:bg-black-5 focus-visible:ring hover:bg-black-5"),
inverse: "text-white-100 ".concat(disabled.text.inverse, " active:bg-white-45 focus:bg-white-25 focus-visible:ring hover:bg-white-25"),
primary: "text-primary-main ".concat(disabled.text.default, " active:bg-primary-20 focus:bg-primary-10 focus-visible:ring hover:bg-primary-10"),
secondary: "text-secondary-main ".concat(disabled.text.default, " active:bg-secondary-20 focus:bg-secondary-10 focus-visible:ring hover:bg-secondary-10"),
danger: "text-error-darker ".concat(disabled.text.default, " active:bg-error-20 focus:bg-error-10 focus-visible:ring hover:bg-error-10"),
},
};
function ButtonComponent(_a, ref) {
var _b;
var controls = _a["aria-controls"], expanded = _a["aria-expanded"], hasPopup = _a["aria-haspopup"], children = _a.children, _c = _a.color, color = _c === void 0 ? 'default' : _c, dataSet = _a.dataSet, _d = _a.disabled, disabled = _d === void 0 ? false : _d, EndAdornment = _a.endAdornment, form = _a.form, href = _a.href, id = _a.id, onClick = _a.onClick, onKeyDown = _a.onKeyDown, _e = _a.position, position = _e === void 0 ? null : _e, _f = _a.size, size = _f === void 0 ? 'medium' : _f, StartAdornment = _a.startAdornment, _g = _a.tabIndex, tabIndex = _g === void 0 ? 0 : _g, target = _a.target, _h = _a.type, type = _h === void 0 ? 'button' : _h, _j = _a.variant, variant = _j === void 0 ? 'contained' : _j;
var Component = href ? 'a' : 'button';
return (React.createElement(Component, __assign({ "aria-controls": controls, "aria-expanded": expanded, "aria-haspopup": hasPopup, className: clsx('font-sans text-sm font-medium leading-relaxed tracking-wide disabled:cursor-not-allowed focus:outline-none', variants[variant][color], sizes[size].root, position ? positions[variant][color][position] : 'rounded') }, toDataSet(dataSet), { disabled: disabled, form: form, href: href, id: id, onClick: onClick, onKeyDown: onKeyDown, ref: ref, tabIndex: tabIndex }, (href ? { target: target } : { type: type })),
React.createElement("div", { className: "flex items-center" },
StartAdornment ? (React.createElement("span", { className: clsx('flex items-center justify-center', sizes[size].icon) },
React.createElement(StartAdornment, { color: "inherit" }))) : null,
((_b = children === null || children === void 0 ? void 0 : children.type) === null || _b === void 0 ? void 0 : _b.uiName) === 'SvgIcon' ? (React.createElement("span", { className: sizes[size].icon }, children)) : (React.createElement("span", { className: size === 'small' ? 'px-1' : 'px-2' }, children)),
EndAdornment ? (React.createElement("span", { className: clsx('flex items-center justify-center', sizes[size].icon) },
React.createElement(EndAdornment, { color: "inherit" }))) : null)));
}
var Button = forwardRef(ButtonComponent);
var colors = {
default: 'text-black-60',
inherit: 'text-inherit',
primary: 'text-primary-main',
secondary: 'text-secondary-main',
};
function SvgIcon(_a) {
var children = _a.children, _b = _a.color, color = _b === void 0 ? 'inherit' : _b, viewBox = _a.viewBox;
return (React.createElement("svg", { "aria-hidden": "true", className: clsx('select-none w-full h-auto', colors[color]), fill: "currentColor", focusable: "false", viewBox: viewBox || '0 0 24 24', width: "0" }, children));
}
function createSvgIcon(path, name) {
var component = function (props) { return (React.createElement(SvgIcon, __assign({}, props), path)); };
component.displayName = name;
component.uiName = 'SvgIcon';
return component;
}
var CheckCircleOutline = createSvgIcon(React.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z" }), 'CheckCircleOutline');
var ErrorOutline = createSvgIcon(React.createElement("path", { d: "M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }), 'ErrorOutline');
var Info = createSvgIcon(React.createElement("path", { d: "M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" }), 'Info');
var ReportProblem = createSvgIcon(React.createElement("path", { d: "M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z" }), 'ReportProblem');
var id = 0;
function generateId() {
return ++id;
}
function useId() {
var id = useState(generateId)[0];
return '' + id;
}
var colors$1 = {
inherit: 'text-inherit',
initial: 'text-black-90',
inverse: 'text-white-90',
};
var variants$1 = {
h1: "text-6xl font-medium tracking-tight leading-tighter",
h2: "text-5xl font-medium tracking-tight leading-tight",
h3: "text-4xl font-medium tracking-normal leading-tighter",
h4: "text-3xl font-medium tracking-normal leading-tight",
h5: "text-2xl font-medium tracking-normal leading-snug",
h6: "text-xl font-medium tracking-wide leading-normal",
subtitle1: "text-base font-medium tracking-normal leading-7",
subtitle2: "text-sm font-medium tracking-wide leading-6",
subtitle3: "text-xs font-medium tracking-wider leading-loose",
body1: "text-base font-normal tracking-normal leading-6",
body2: "text-sm font-normal tracking-wide leading-5",
button: "text-sm font-medium tracking-wide leading-6",
caption: "text-xs font-normal tracking-wider leading-tighter",
overline: "text-xs font-medium tracking-widest leading-looser uppercase",
};
function Typography(_a) {
var children = _a.children, _b = _a.color, color = _b === void 0 ? 'initial' : _b, _c = _a.component, Component = _c === void 0 ? 'span' : _c, _d = _a.truncate, truncate = _d === void 0 ? false : _d, _e = _a.variant, variant = _e === void 0 ? 'body1' : _e;
return (React.createElement(Component, { className: clsx('font-sans', colors$1[color], truncate ? 'truncate' : null, variants$1[variant]) }, children));
}
var ProgressContext = createContext(null);
var useProgress = function () {
return useContext(ProgressContext);
};
var sizes$1 = {
large: {
animateIndeterminate: 'animate-circular-indeterminate-large',
size: 44,
strokeDasharray: '80px, 200px',
thickness: 3.6,
},
medium: {
animateIndeterminate: 'animate-circular-indeterminate-medium',
size: 24,
strokeDasharray: '44px, 109px',
thickness: 2.0,
},
small: {
animateIndeterminate: 'animate-circular-indeterminate-small',
size: 16,
strokeDasharray: '29px, 73px',
thickness: 1.3,
},
};
function Circular(_a) {
var label = _a["aria-label"], labelledBy = _a["aria-labelledby"], max = _a["aria-valuemax"], min = _a["aria-valuemin"], now = _a["aria-valuenow"], valueText = _a["aria-valuetext"], children = _a.children, color = _a.color, id = _a.id, _b = _a.size, size = _b === void 0 ? 'large' : _b, value = _a.value;
var descriptionId = useProgress()[0];
var iconSize = sizes$1[size].size;
var iconThickness = sizes$1[size].thickness;
var style = {};
if (value === undefined) {
style.strokeDasharray = sizes$1[size].strokeDasharray;
style.strokeDashoffset = '0px';
}
else {
var circumference = 2 * Math.PI * ((iconSize - iconThickness) / 2);
style.strokeDasharray = circumference.toFixed(3);
style.strokeDashoffset =
value === 0
? circumference.toFixed(3)
: "".concat((((100 - value) / 100) * circumference).toFixed(3), "px");
}
var nameProps = {
'aria-labelledby': descriptionId,
};
if (labelledBy) {
nameProps = {
'aria-labelledby': labelledBy,
};
}
else if (label) {
nameProps = {
'aria-label': label,
};
}
return (React.createElement("div", { className: "inline-flex flex-col items-center justify-center" },
React.createElement("div", __assign({}, nameProps, { "aria-valuemax": max, "aria-valuemin": min, "aria-valuenow": now, "aria-valuetext": valueText, className: clsx(value === undefined ? 'animate-spin-1.4' : null), id: id, role: "progressbar", style: {
height: iconSize,
transform: value === undefined ? undefined : 'rotate(-90deg)',
width: iconSize,
} }),
React.createElement("svg", { className: clsx('block overflow-hidden', colors$2[color].bar.circular), viewBox: "".concat(iconSize / 2, " ").concat(iconSize / 2, " ").concat(iconSize, " ").concat(iconSize) },
React.createElement("circle", { className: clsx('stroke-current', value === undefined
? sizes$1[size].animateIndeterminate
: 'duration-200 ease-in transition-stroke-dashoffset'), cx: iconSize, cy: iconSize, fill: "none", r: (iconSize - iconThickness) / 2, strokeWidth: iconThickness, style: style }))),
children));
}
function Linear(_a) {
var label = _a["aria-label"], labelledBy = _a["aria-labelledby"], max = _a["aria-valuemax"], min = _a["aria-valuemin"], now = _a["aria-valuenow"], valueText = _a["aria-valuetext"], color = _a.color, id = _a.id, value = _a.value;
return (React.createElement("div", { "aria-label": labelledBy === undefined ? label : undefined, "aria-labelledby": labelledBy, "aria-valuemax": max, "aria-valuemin": min, "aria-valuenow": now, "aria-valuetext": valueText, className: clsx('flex relative w-full h-1 overflow-hidden', colors$2[color].track.linear), id: id, role: "progressbar" },
React.createElement("div", { className: clsx('flex h-full', colors$2[color].bar.linear, value === undefined
? 'animate-linear-indeterminate-1 absolute top-0 left-0 bottom-0 w-auto'
: 'duration-200 ease-in transition-width will-change-width'), style: value === undefined ? {} : { width: "".concat(value, "%") } }),
value === undefined ? (React.createElement("div", { className: "absolute top-0 bottom-0 left-0 transition-transform duration-200 origin-left animate-linear-indeterminate-2" })) : null));
}
function Description(_a) {
var children = _a.children, _b = _a.inverse, inverse = _b === void 0 ? false : _b, role = _a.role;
var _c = useProgress(), setDescriptionId = _c[1];
var id = "coconut-progress-message-".concat(useId());
useEffect(function () {
setDescriptionId(id);
}, [id, setDescriptionId]);
return (React.createElement("div", { className: "mt-4", id: id, role: role },
React.createElement(Typography, { color: inverse ? 'inverse' : 'initial', variant: "body2" }, children)));
}
var colors$2 = {
info: {
bar: {
circular: "text-info-main",
linear: "bg-info-main",
},
track: {
linear: "bg-info-20",
},
},
inverse: {
bar: {
circular: "text-white-100",
linear: "bg-white-100",
},
track: {
linear: "bg-white-20",
},
},
primary: {
bar: {
circular: "text-primary-main",
linear: "bg-primary-main",
},
track: {
linear: "bg-primary-20",
},
},
secondary: {
bar: {
circular: "text-secondary-main",
linear: "bg-secondary-main",
},
track: {
linear: "bg-secondary-20",
},
},
};
function Progress(_a) {
var label = _a["aria-label"], labelledBy = _a["aria-labelledby"], valueText = _a["aria-valuetext"], children = _a.children, _b = _a.color, color = _b === void 0 ? 'primary' : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'large' : _c, value = _a.value, _d = _a.variant, variant = _d === void 0 ? 'linear' : _d;
var _e = useState(), descriptionId = _e[0], setDescriptionId = _e[1];
var props = {
'aria-valuemax': value === undefined ? undefined : 100,
'aria-valuemin': value === undefined ? undefined : 0,
'aria-valuenow': value === undefined ? undefined : Math.round(value),
};
if (variant === 'circular') {
return (React.createElement(ProgressContext.Provider, { value: [descriptionId, setDescriptionId] },
React.createElement(Circular, __assign({ "aria-label": label, "aria-labelledby": labelledBy, "aria-valuetext": valueText, color: color, id: id, size: size, value: value }, props), children)));
}
return (React.createElement(Linear, __assign({ "aria-label": label, "aria-labelledby": labelledBy, "aria-valuetext": valueText, color: color, id: id, value: value }, props)));
}
Progress.Description = Description;
var AriaLiveRole;
(function (AriaLiveRole) {
/**
* The alert role is used to communicate an important and usually time-sensitive message to the user.
* Setting role="alert" is equivalent to setting aria-live="assertive" and aria-atomic="true".
* It should only be used for information that requires the user's immediate attention, as it would interrupt the announcement of a user's current activity.
* For more information see: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role
*/
AriaLiveRole["Alert"] = "alert";
/**
* The status role defines a live region containing advisory information for the user that is not important enough to be an alert.
* Setting role="status" is equivalent to setting aria-live="polite" and aria-atomic="true".
* For more information see: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role
*/
AriaLiveRole["Status"] = "status";
/**
* The presentation role removes an element's implicit ARIA semantics from being exposed to the accessibility tree.
* The content of the element will still be available to assistive technologies; it is only the semantics of the container,
* and in some instance, required associated descendants, which will no longer expose their mappings to the accessibility API
* The element with role="presentation" should not have an accessible name.
* For more information see: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role
*/
AriaLiveRole["Presentation"] = "presentation";
})(AriaLiveRole || (AriaLiveRole = {}));
var AlertContext = createContext(null);
var useAlert = function () { return useContext(AlertContext); };
var colors$3 = {
filled: {
background: {
info: 'bg-info-main text-white-100',
error: 'bg-error-main text-white-100',
loading: 'bg-info-main text-white-100',
success: 'bg-success-main text-white-100',
warning: 'bg-warning-main text-white-100',
},
icon: {
info: 'text-white-100',
error: 'text-white-100',
loading: 'text-white-100',
success: 'text-white-100',
warning: 'text-white-100',
},
},
minimal: {
background: {
info: 'bg-info-lighter text-black-90',
error: 'bg-error-lighter text-black-90',
loading: 'bg-info-lighter text-black-90',
success: 'bg-success-lighter text-black-90',
warning: 'bg-warning-lighter text-black-90',
},
icon: {
info: 'text-info-main',
error: 'text-error-main',
loading: 'text-info-main',
success: 'text-success-main',
warning: 'text-warning-main',
},
},
};
var icons = {
info: React.createElement(Info, null),
loading: React.createElement(Progress, { color: "info", size: "medium", variant: "circular" }),
error: React.createElement(ErrorOutline, null),
success: React.createElement(CheckCircleOutline, null),
warning: React.createElement(ReportProblem, null),
};
function Alert(_a) {
var children = _a.children, _b = _a.icon, icon = _b === void 0 ? null : _b, _c = _a.role, role = _c === void 0 ? AriaLiveRole.Alert : _c, _d = _a.severity, severity = _d === void 0 ? 'success' : _d, _e = _a.variant, variant = _e === void 0 ? 'filled' : _e;
return (React.createElement("div", { className: clsx('pl-4.5 pr-4.5 pt-2.5 pb-2.5 inline-flex items-center rounded-md flex-grow flex-wrap', colors$3[variant].background[severity]), role: role },
React.createElement(AlertContext.Provider, { value: [{ icon: icon, severity: severity, variant: variant }] }, children)));
}
function Content(_a) {
var children = _a.children;
var _b = useAlert()[0], icon = _b.icon, severity = _b.severity, variant = _b.variant;
return (React.createElement("div", { className: "flex flex-grow text-inherit" },
React.createElement("span", { className: clsx('flex-shrink-0 w-6 h-6 mr-2.5', colors$3[variant].icon[severity]) }, severity === 'loading' && variant === 'filled' ? (React.createElement(Progress, { color: "inverse", size: "medium", variant: "circular" })) : (icon || icons[severity])),
React.createElement("div", { className: "flex flex-col justify-center flex-grow" }, children)));
}
function Description$1(_a) {
var children = _a.children;
return (React.createElement(Typography, { color: "inherit", variant: "body2" }, children));
}
function Title(_a) {
var children = _a.children;
return (React.createElement(Typography, { color: "inherit", component: "div", variant: "button" }, children));
}
function Actions(_a) {
var children = _a.children;
return (React.createElement("div", { className: "items-end flex flex-grow flex-col ml-2.5" },
React.createElement("div", { className: "space-x-3" }, children)));
}
function AlertButton(_a) {
var children = _a.children, dataSet = _a.dataSet, onClick = _a.onClick;
// Children must be wrapped in a span (currently) to satisfy the type requirements of the Button component
return (React.createElement(Button, { color: "inverse", dataSet: dataSet, onClick: onClick, size: "small", variant: "outlined" },
React.createElement("span", null, children)));
}
Alert.Button = AlertButton;
Alert.Content = Content;
Alert.Description = Description$1;
Alert.Title = Title;
Alert.Actions = Actions;
Alert.displayName = 'Alert';
// Proper display names are necessary to generate correct code snippets in stories
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
Alert.Button.displayName = 'Alert.Button';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
Alert.Content.displayName = 'Alert.Content';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
Alert.Description.displayName = 'Alert.Description';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
Alert.Title.displayName = 'Alert.Title';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
Alert.Actions.displayName = 'Alert.Actions';
var variants$2 = {
fullWidth: '',
inset: {
small: 'ml-4',
medium: 'ml-15',
large: 'ml-18',
},
middle: 'mx-4',
};
function Divider(_a) {
var _b = _a.absolute, absolute = _b === void 0 ? false : _b, _c = _a.component, Component = _c === void 0 ? 'hr' : _c, _d = _a.flex, flex = _d === void 0 ? false : _d, _e = _a.insetSize, insetSize = _e === void 0 ? 'small' : _e, _f = _a.orientation, orientation = _f === void 0 ? 'horizontal' : _f, _g = _a.variant, variant = _g === void 0 ? 'fullWidth' : _g;
var width = orientation === 'vertical' ? 'w-px' : absolute ? 'w-full' : null;
var height = orientation === 'vertical'
? flex && !absolute
? 'self-stretch h-auto'
: 'h-full'
: 'h-px';
return (React.createElement(Component, { "aria-hidden": "true", className: clsx('flex-shrink-0 m-0 border-none bg-black-10', absolute ? 'absolute bottom-0 left-0' : null, variant === 'inset' ? variants$2.inset[insetSize] : variants$2[variant], width, height), role: "separator" }));
}
function useSyncRefs() {
var refs = [];
for (var _i = 0; _i < arguments.length; _i++) {
refs[_i] = arguments[_i];
}
return useCallback(function (value) {
refs.forEach(function (ref) {
if (ref === null || ref === undefined) {
return;
}
if (typeof ref === 'function') {
return ref(value);
}
ref.current = value;
});
}, [refs]);
}
function useWindowSize(ref) {
var _a = useState({
height: undefined,
width: undefined,
}), windowSize = _a[0], setWindowSize = _a[1];
useEffect(function () {
var timeoutId;
var handleResize = function () {
clearTimeout(timeoutId);
timeoutId = window.setTimeout(function () {
if (ref.current) {
setWindowSize({
height: window.innerHeight,
width: window.innerWidth,
});
}
}, 150);
};
window.addEventListener('resize', handleResize);
handleResize();
return function () { return window.removeEventListener('resize', handleResize); };
}, [ref]);
return windowSize;
}
var top = 'top';
var bottom = 'bottom';
var right = 'right';
var left = 'left';
var auto = 'auto';
var basePlacements = [top, bottom, right, left];
var start = 'start';
var end = 'end';
var clippingParents = 'clippingParents';
var viewport = 'viewport';
var popper = 'popper';
var reference = 'reference';
var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) {
return acc.concat([placement + "-" + start, placement + "-" + end]);
}, []);
var placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) {
return acc.concat([placement, placement + "-" + start, placement + "-" + end]);
}, []); // modifiers that need to read the DOM
var beforeRead = 'beforeRead';
var read = 'read';
var afterRead = 'afterRead'; // pure-logic modifiers
var beforeMain = 'beforeMain';
var main = 'main';
var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state)
var beforeWrite = 'beforeWrite';
var write = 'write';
var afterWrite = 'afterWrite';
var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite];
function getNodeName(element) {
return element ? (element.nodeName || '').toLowerCase() : null;
}
/*:: import type { Window } from '../types'; */
/*:: declare function getWindow(node: Node | Window): Window; */
function getWindow(node) {
if (node.toString() !== '[object Window]') {
var ownerDocument = node.ownerDocument;
return ownerDocument ? ownerDocument.defaultView || window : window;
}
return node;
}
/*:: declare function isElement(node: mixed): boolean %checks(node instanceof
Element); */
function isElement(node) {
var OwnElement = getWindow(node).Element;
return node instanceof OwnElement || node instanceof Element;
}
/*:: declare function isHTMLElement(node: mixed): boolean %checks(node instanceof
HTMLElement); */
function isHTMLElement(node) {
var OwnElement = getWindow(node).HTMLElement;
return node instanceof OwnElement || node instanceof HTMLElement;
}
/*:: declare function isShadowRoot(node: mixed): boolean %checks(node instanceof
ShadowRoot); */
function isShadowRoot(node) {
var OwnElement = getWindow(node).ShadowRoot;
return node instanceof OwnElement || node instanceof ShadowRoot;
}
// and applies them to the HTMLElements such as popper and arrow
function applyStyles(_ref) {
var state = _ref.state;
Object.keys(state.elements).forEach(function (name) {
var style = state.styles[name] || {};
var attributes = state.attributes[name] || {};
var element = state.elements[name]; // arrow is optional + virtual elements
if (!isHTMLElement(element) || !getNodeName(element)) {
return;
} // Flow doesn't support to extend this property, but it's the most
// effective way to apply styles to an HTMLElement
// $FlowFixMe[cannot-write]
Object.assign(element.style, style);
Object.keys(attributes).forEach(function (name) {
var value = attributes[name];
if (value === false) {
element.removeAttribute(name);
} else {
element.setAttribute(name, value === true ? '' : value);
}
});
});
}
function effect(_ref2) {
var state = _ref2.state;
var initialStyles = {
popper: {
position: state.options.strategy,
left: '0',
top: '0',
margin: '0'
},
arrow: {
position: 'absolute'
},
reference: {}
};
Object.assign(state.elements.popper.style, initialStyles.popper);
if (state.elements.arrow) {
Object.assign(state.elements.arrow.style, initialStyles.arrow);
}
return function () {
Object.keys(state.elements).forEach(function (name) {
var element = state.elements[name];
var attributes = state.attributes[name] || {};
var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them
var style = styleProperties.reduce(function (style, property) {
style[property] = '';
return style;
}, {}); // arrow is optional + virtual elements
if (!isHTMLElement(element) || !getNodeName(element)) {
return;
}
Object.assign(element.style, style);
Object.keys(attributes).forEach(function (attribute) {
element.removeAttribute(attribute);
});
});
};
} // eslint-disable-next-line import/no-unused-modules
var applyStyles$1 = {
name: 'applyStyles',
enabled: true,
phase: 'write',
fn: applyStyles,
effect: effect,
requires: ['computeStyles']
};
function getBasePlacement(placement) {
return placement.split('-')[0];
}
// Returns the layout rect of an element relative to its offsetParent. Layout
// means it doesn't take into account transforms.
function getLayoutRect(element) {
return {
x: element.offsetLeft,
y: element.offsetTop,
width: element.offsetWidth,
height: element.offsetHeight
};
}
function contains(parent, child) {
var rootNode = child.getRootNode && child.getRootNode(); // First, attempt with faster native method
if (parent.contains(child)) {
return true;
} // then fallback to custom implementation with Shadow DOM support
else if (rootNode && isShadowRoot(rootNode)) {
var next = child;
do {
if (next && parent.isSameNode(next)) {
return true;
} // $FlowFixMe[prop-missing]: need a better way to handle this...
next = next.parentNode || next.host;
} while (next);
} // Give up, the result is false
return false;
}
function getComputedStyle(element) {
return getWindow(element).getComputedStyle(element);
}
function isTableElement(element) {
return ['table', 'td', 'th'].indexOf(getNodeName(element)) >= 0;
}
function getDocumentElement(element) {
// $FlowFixMe[incompatible-return]: assume body is always available
return ((isElement(element) ? element.ownerDocument : // $FlowFixMe[prop-missing]
element.document) || window.document).documentElement;
}
function getParentNode(element) {
if (getNodeName(element) === 'html') {
return element;
}
return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle
// $FlowFixMe[incompatible-return]
// $FlowFixMe[prop-missing]
element.assignedSlot || // step into the shadow DOM of the parent of a slotted node
element.parentNode || // DOM Element detected
// $FlowFixMe[incompatible-return]: need a better way to handle this...
element.host || // ShadowRoot detected
// $FlowFixMe[incompatible-call]: HTMLElement is a Node
getDocumentElement(element) // fallback
);
}
function getTrueOffsetParent(element) {
if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837
getComputedStyle(element).position === 'fixed') {
return null;
}
var offsetParent = element.offsetParent;
if (offsetParent) {
var html = getDocumentElement(offsetParent);
if (getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static' && getComputedStyle(html).position !== 'static') {
return html;
}
}
return offsetParent;
} // `.offsetParent` reports `null` for fixed elements, while absolute elements
// return the containing block
function getContainingBlock(element) {
var currentNode = getParentNode(element);
while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that
// create a containing block.
if (css.transform !== 'none' || css.perspective !== 'none' || css.willChange && css.willChange !== 'auto') {
return currentNode;
} else {
currentNode = currentNode.parentNode;
}
}
return null;
} // Gets the closest ancestor positioned element. Handles some edge cases,
// such as table ancestors and cross browser bugs.
function getOffsetParent(element) {
var window = getWindow(element);
var offsetParent = getTrueOffsetParent(element);
while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') {
offsetParent = getTrueOffsetParent(offsetParent);
}
if (offsetParent && getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static') {
return window;
}
return offsetParent || getContainingBlock(element) || window;
}
function getMainAxisFromPlacement(placement) {
return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
}
function within(min, value, max) {
return Math.max(min, Math.min(value, max));
}
function getFreshSideObject() {
return {
top: 0,
right: 0,
bottom: 0,
left: 0
};
}
function mergePaddingObject(paddingObject) {
return Object.assign(Object.assign({}, getFreshSideObject()), paddingObject);
}
function expandToHashMap(value, keys) {
return keys.reduce(function (hashMap, key) {
hashMap[key] = value;
return hashMap;
}, {});
}
function arrow(_ref) {
var _state$modifiersData$;
var state = _ref.state,
name = _ref.name;
var arrowElement = state.elements.arrow;
var popperOffsets = state.modifiersData.popperOffsets;
var basePlacement = getBasePlacement(state.placement);
var axis = getMainAxisFromPlacement(basePlacement);
var isVertical = [left, right].indexOf(basePlacement) >= 0;
var len = isVertical ? 'height' : 'width';
if (!arrowElement || !popperOffsets) {
return;
}
var paddingObject = state.modifiersData[name + "#persistent"].padding;
var arrowRect = getLayoutRect(arrowElement);
var minProp = axis === 'y' ? top : left;
var maxProp = axis === 'y' ? bottom : right;
var endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len];
var startDiff = popperOffsets[axis] - state.rects.reference[axis];
var arrowOffsetParent = getOffsetParent(arrowElement);
var clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0;
var centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the popper if the center point is
// outside of the popper bounds
var min = paddingObject[minProp];
var max = clientSize - arrowRect[len] - paddingObject[maxProp];
var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference;
var offset = within(min, center, max); // Prevents breaking syntax highlighting...
var axisProp = axis;
state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$);
}
function effect$1(_ref2) {
var state = _ref2.state,
options = _ref2.options,
name = _ref2.name;
var _options$element = options.element,
arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element,
_options$padding = options.padding,
padding = _options$padding === void 0 ? 0 : _options$padding;
if (arrowElement == null) {
return;
} // CSS selector
if (typeof arrowElement === 'string') {
arrowElement = state.elements.popper.querySelector(arrowElement);
if (!arrowElement) {
return;
}
}
if (process.env.NODE_ENV !== "production") {
if (!isHTMLElement(arrowElement)) {
console.error(['Popper: "arrow" element must be an HTMLElement (not an SVGElement).', 'To use an SVG arrow, wrap it in an HTMLElement that will be used as', 'the arrow.'].join(' '));
}
}
if (!contains(state.elements.popper, arrowElement)) {
if (process.env.NODE_ENV !== "production") {
console.error(['Popper: "arrow" modifier\'s `element` must be a child of the popper', 'element.'].join(' '));
}
return;
}
state.elements.arrow = arrowElement;
state.modifiersData[name + "#persistent"] = {
padding: mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements))
};
} // eslint-disable-next-line import/no-unused-modules
var arrow$1 = {
name: 'arrow',
enabled: true,
phase: 'main',
fn: arrow,
effect: effect$1,
requires: ['popperOffsets'],
requiresIfExists: ['preventOverflow']
};
var unsetSides = {
top: 'auto',
right: 'auto',
bottom: 'auto',
left: 'auto'
}; // Round the offsets to the nearest suitable subpixel based on the DPR.
// Zooming can change the DPR, but it seems to report a value that will
// cleanly divide the values into the appropriate subpixels.
function roundOffsetsByDPR(_ref) {
var x = _ref.x,
y = _ref.y;
var win = window;
var dpr = win.devicePixelRatio || 1;
return {
x: Math.round(x * dpr) / dpr || 0,
y: Math.round(y * dpr) / dpr || 0
};
}
function mapToStyles(_ref2) {
var _Object$assign2;
var popper = _ref2.popper,
popperRect = _ref2.popperRect,
placement = _ref2.placement,
offsets = _ref2.offsets,
position = _ref2.position,
gpuAcceleration = _ref2.gpuAcceleration,
adaptive = _ref2.adaptive,
roundOffsets = _ref2.roundOffsets;
var _ref3 = roundOffsets ? roundOffsetsByDPR(offsets) : offsets,
_ref3$x = _ref3.x,
x = _ref3$x === void 0 ? 0 : _ref3$x,
_ref3$y = _ref3.y,
y = _ref3$y === void 0 ? 0 : _ref3$y;
var hasX = offsets.hasOwnProperty('x');
var hasY = offsets.hasOwnProperty('y');
var sideX = left;
var sideY = top;
var win = window;
if (adaptive) {
var offsetParent = getOffsetParent(popper);
if (offsetParent === getWindow(popper)) {
offsetParent = getDocumentElement(popper);
} // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it
/*:: offsetParent = (offsetParent: Element); */
if (placement === top) {
sideY = bottom;
y -= offsetParent.clientHeight - popperRect.height;
y *= gpuAcceleration ? 1 : -1;
}
if (placement === left) {
sideX = right;
x -= offsetParent.clientWidth - popperRect.width;
x *= gpuAcceleration ? 1 : -1;
}
}
var commonStyles = Object.assign({
position: position
}, adaptive && unsetSides);
if (gpuAcceleration) {
var _Object$assign;
return Object.assign(Object.assign({}, commonStyles), {}, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) < 2 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
}
return Object.assign(Object.assign({}, commonStyles), {}, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
}
function computeStyles(_ref4) {
var state = _ref4.state,
options = _ref4.options;
var _options$gpuAccelerat = options.gpuAcceleration,
gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
_options$adaptive = options.adaptive,
adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
_options$roundOffsets = options.roundOffsets,
roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
if (process.env.NODE_ENV !== "production") {
var transitionProperty = getComputedStyle(state.elements.popper).transitionProperty || '';
if (adaptive && ['transform', 'top', 'right', 'bottom', 'left'].some(function (property) {
return transitionProperty.indexOf(property) >= 0;
})) {
console.warn(['Popper: Detected CSS transitions on at least one of the following', 'CSS properties: "transform", "top", "right", "bottom", "left".', '\n\n', 'Disable the "computeStyles" modifier\'s `adaptive` option to allow', 'for smooth transitions, or remove these properties from the CSS', 'transition declaration on the popper element if only transitioning', 'opacity or background-color for example.', '\n\n', 'We recommend using the popper element as a wrapper around an inner', 'element that can have any CSS property transitioned for animations.'].join(' '));
}
}
var commonStyles = {
placement: getBasePlacement(state.placement),
popper: state.elements.popper,
popperRect: state.rects.popper,
gpuAcceleration: gpuAcceleration
};
if (state.modifiersData.popperOffsets != null) {
state.styles.popper = Object.assign(Object.assign({}, state.styles.popper), mapToStyles(Object.assign(Object.assign({}, commonStyles), {}, {
offsets: state.modifiersData.popperOffsets,
position: state.options.strategy,
adaptive: adaptive,
roundOffsets: roundOffsets
})));
}
if (state.modifiersData.arrow != null) {
state.styles.arrow = Object.assign(Object.assign({}, state.styles.arrow), mapToStyles(Object.assign(Object.assign({}, commonStyles), {}, {
offsets: state.modifiersData.arrow,
position: 'absolute',
adaptive: false,
roundOffsets: roundOffsets
})));
}
state.attributes.popper = Object.assign(Object.assign({}, state.attributes.popper), {}, {
'data-popper-placement': state.placement
});
} // eslint-disable-next-line import/no-unused-modules
var computeStyles$1 = {
name: 'computeStyles',
enabled: true,
phase: 'beforeWrite',
fn: computeStyles,
data: {}
};
var passive = {
passive: true
};
function effect$2(_ref) {
var state = _ref.state,
instance = _ref.instance,
options = _ref.options;
var _options$scroll = options.scroll,
scroll = _options$scroll === void 0 ? true : _options$scroll,
_options$resize = options.resize,
resize = _options$resize === void 0 ? true : _options$resize;
var window = getWindow(state.elements.popper);
var scrollParents = [].concat(state.scrollParents.reference, state.scrollParents.popper);
if (scroll