@mailstep/design-system 0.8.25 → 0.8.26-beta.0

package/ui/index621.es.js

@@ -0,0 +1,144 @@
+import { th as e } from "./index4.es.js";
+import { styled as t, x as n } from "./index6.es.js";
+import { require_jsx_runtime as r } from "./index143.es.js";
+import i from "./index236.es.js";
+import { i18n as a } from "./index502.es.js";
+import { FooterRow as o } from "./index618.es.js";
+import { FooterRowLabel as s } from "./index619.es.js";
+import { useCallback as c, useEffect as l, useState as u } from "react";
+//#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker.tsx
+var d = r(), f = t.button`
+  transform: rotate(90deg);
+  font-size: 18px;
+  margin: -4px 0;
+  background-color: transparent !important;
+  border: none;
+  color: ${e("colors.lightGray4")};
+  &:disabled:hover {
+    color: ${e("colors.lightGray4")};
+    cursor: default;
+  }
+  &:hover {
+    color: ${e("colors.red2")};
+    background-color: transparent !important;
+  }
+`, p = t.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  border: 1px solid ${e("colors.lightGray2")};
+  border-radius: 6px;
+  padding: 0 4px;
+  margin: 0 4px;
+`, m = t.input`
+  font-size: 14px;
+  font-weight: 600;
+  width: 17px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  &:disabled {
+    opacity: 0.5;
+  }
+`, h = t.input`
+  font-weight: 600;
+  font-size: 14px;
+  width: 18px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  &:disabled {
+    opacity: 0.5;
+  }
+`, g = "^[0-9]*$", _ = ({ setTime: e, value: t, disabled: r }) => {
+	let _ = t?.getHours?.() ?? 0, v = t?.getMinutes?.() ?? 0, [y, b] = u(_), [x, S] = u(v), C = c(() => {
+		b((e) => (e + 1) % 24);
+	}, []), w = c(() => {
+		b((e) => e === 0 ? 23 : e - 1);
+	}, []), T = c(() => {
+		S((e) => (e + 5) % 60);
+	}, []), E = c(() => {
+		S((e) => (e - 5 + 60) % 60);
+	}, []), D = c((e) => {
+		e.target.value.match(g) && Number(e.target.value) <= 23 ? b(Number(e.target.value)) : b(0);
+	}, []), O = c((e) => {
+		e.target.value.match(g) && Number(e.target.value) <= 59 ? S(Number(e.target.value)) : S(0);
+	}, []);
+	return l(() => {
+		t && e("hours", y);
+	}, [y]), l(() => {
+		t && e("minutes", x);
+	}, [x]), l(() => {
+		b(_);
+	}, [_]), l(() => {
+		S(v);
+	}, [v]), /* @__PURE__ */ (0, d.jsxs)(o, {
+		disabled: r,
+		children: [/* @__PURE__ */ (0, d.jsxs)("div", { children: [/* @__PURE__ */ (0, d.jsx)(i, { icon: "clock" }), /* @__PURE__ */ (0, d.jsx)(s, { children: a._({
+			id: "dataGrid.filterCell.time",
+			message: "Time"
+		}) })] }), /* @__PURE__ */ (0, d.jsx)(n.div, {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "flex-start",
+			pt: "4px",
+			w: "fit-content",
+			children: /* @__PURE__ */ (0, d.jsxs)(n.div, {
+				display: "flex",
+				alignItems: "center",
+				children: [
+					/* @__PURE__ */ (0, d.jsxs)(n.div, {
+						display: "flex",
+						flexDirection: "column",
+						children: [/* @__PURE__ */ (0, d.jsx)(f, {
+							disabled: r,
+							onClick: C,
+							type: "button",
+							children: "‹"
+						}), /* @__PURE__ */ (0, d.jsx)(f, {
+							disabled: r,
+							onClick: w,
+							type: "button",
+							children: "›"
+						})]
+					}),
+					/* @__PURE__ */ (0, d.jsxs)(p, { children: [
+						/* @__PURE__ */ (0, d.jsx)(m, {
+							value: String(y).padStart(2, "0"),
+							disabled: r,
+							onChange: D
+						}),
+						/* @__PURE__ */ (0, d.jsx)(n.div, {
+							mx: "1px",
+							children: ":"
+						}),
+						/* @__PURE__ */ (0, d.jsx)(h, {
+							value: String(x).padStart(2, "0"),
+							disabled: r,
+							onChange: O
+						})
+					] }),
+					/* @__PURE__ */ (0, d.jsxs)(n.div, {
+						display: "flex",
+						flexDirection: "column",
+						children: [/* @__PURE__ */ (0, d.jsx)(f, {
+							disabled: r,
+							onClick: T,
+							type: "button",
+							children: "‹"
+						}), /* @__PURE__ */ (0, d.jsx)(f, {
+							disabled: r,
+							onClick: E,
+							type: "button",
+							children: "›"
+						})]
+					})
+				]
+			})
+		})]
+	});
+};
+//#endregion
+export { _ as Timepicker };

package/ui/index622.es.js

@@ -0,0 +1,32 @@
+import { require_jsx_runtime as e } from "./index143.es.js";
+import "react";
+//#region packages/ui/Elements/DatePicker/Datetime/components/ViewNavigation.tsx
+var t = e();
+function n({ onClickPrev: e, onClickSwitch: n, onClickNext: r, switchContent: i, switchColSpan: a, switchProps: o, label: s }) {
+	return /* @__PURE__ */ (0, t.jsxs)("tr", { children: [
+		/* @__PURE__ */ (0, t.jsx)("th", {
+			className: "rdtPrev",
+			onClick: e,
+			children: /* @__PURE__ */ (0, t.jsx)("span", { children: "‹" })
+		}),
+		/* @__PURE__ */ (0, t.jsx)("th", {
+			className: "rdtSwitch",
+			colSpan: a,
+			onClick: n,
+			...o,
+			children: i
+		}),
+		/* @__PURE__ */ (0, t.jsx)("th", {
+			className: "rdtNext",
+			onClick: r,
+			children: /* @__PURE__ */ (0, t.jsx)("span", { children: "›" })
+		}),
+		/* @__PURE__ */ (0, t.jsx)("th", {
+			colSpan: 2,
+			className: "rdtLabel",
+			children: s && s
+		})
+	] });
+}
+//#endregion
+export { n as default };

package/ui/index623.es.js

@@ -0,0 +1,102 @@
+import { require_jsx_runtime as e } from "./index143.es.js";
+import { DateRepeater as t } from "./index620.es.js";
+import { Timepicker as n } from "./index621.es.js";
+import r from "./index622.es.js";
+import i from "react";
+//#region packages/ui/Elements/DatePicker/Datetime/views/DaysView.tsx
+var a = e(), o = class extends i.Component {
+	constructor(...e) {
+		super(...e), this._setDate = (e) => {
+			this.props.updateDate(e);
+		};
+	}
+	static {
+		this.defaultProps = {
+			isValidDate: () => !0,
+			renderDay: (e, t) => /* @__PURE__ */ (0, a.jsx)("td", {
+				...e,
+				children: t.date()
+			})
+		};
+	}
+	render() {
+		return /* @__PURE__ */ (0, a.jsx)("div", {
+			className: "rdtDays",
+			children: /* @__PURE__ */ (0, a.jsxs)("table", { children: [
+				/* @__PURE__ */ (0, a.jsxs)("thead", { children: [this.renderNavigation(), this.renderDayHeaders()] }),
+				/* @__PURE__ */ (0, a.jsx)("tbody", { children: this.renderDays() }),
+				this.renderFooter()
+			] })
+		});
+	}
+	renderNavigation() {
+		let e = this.props.viewDate, t = e.localeData(), n = this.props.label;
+		return /* @__PURE__ */ (0, a.jsx)(r, {
+			onClickPrev: () => this.props.navigate(-1, "months"),
+			onClickSwitch: () => this.props.showView("months"),
+			onClickNext: () => this.props.navigate(1, "months"),
+			switchContent: t.months(e, "DD[]MMMM") + " " + e.year(),
+			switchColSpan: 3,
+			label: n,
+			switchProps: { "data-value": this.props.viewDate.month() }
+		});
+	}
+	renderDayHeaders() {
+		return /* @__PURE__ */ (0, a.jsx)("tr", { children: c(this.props.viewDate.localeData()).map((e, t) => /* @__PURE__ */ (0, a.jsx)("th", {
+			className: "dow",
+			children: e
+		}, e + t)) });
+	}
+	renderDays() {
+		let e = this.props.viewDate, t = e.clone().startOf("month"), n = e.clone().endOf("month"), r = [
+			[],
+			[],
+			[],
+			[],
+			[],
+			[]
+		], i = e.clone().subtract(1, "months");
+		i.date(i.daysInMonth()).startOf("week");
+		let o = i.clone().add(42, "d"), c = 0;
+		for (; i.isBefore(o);) s(r, c++).push(this.renderDay(i, t, n)), i.add(1, "d");
+		return r.map((e, t) => /* @__PURE__ */ (0, a.jsx)("tr", { children: e }, `${o.month()}_${t}`));
+	}
+	renderDay(e, t, n) {
+		let r = this.props.selectedDate, i = this.props.secondValue, a = {
+			key: e.format("M_D"),
+			"data-value": e.date(),
+			"data-month": e.month(),
+			"data-year": e.year()
+		}, o = "rdtDay";
+		return e.isBefore(t) ? o += " rdtOld" : e.isAfter(n) && (o += " rdtNew"), i && e.isBefore(i) && e.isAfter(r) && (o += " rdtActiveRange"), i && e.isAfter(i) && e.isBefore(r) && (o += " rdtActiveRange"), r && e.isSame(r, "day") && (o += " rdtActive"), i && e.isSame(i, "day") && (o += " rdtActiveSecond"), e.isSame(this.props.moment(), "day") && (o += " rdtToday"), this.props.isValidDate(e) && !this.props.others?.dateTypeRepeater && !this.props.disabled ? a.onClick = this._setDate : o += " rdtDisabled", (this.props.others?.dateTypeRepeater || this.props.disabled) && (o += " rdtDisabled"), a.className = o, this.props.renderDay(a, e.clone(), r && r.clone());
+	}
+	renderFooter() {
+		let e = this.props.setTime, r = this.props.onChangeOthers, i = this.props.reset, o = this.props.value, s = this.props.others, c = this.props.disabled;
+		return /* @__PURE__ */ (0, a.jsx)("tfoot", { children: /* @__PURE__ */ (0, a.jsx)("tr", { children: /* @__PURE__ */ (0, a.jsxs)("td", {
+			colSpan: 7,
+			children: [r && /* @__PURE__ */ (0, a.jsx)(t, {
+				onChangeOthers: r,
+				others: s,
+				reset: i
+			}), this.props.timeFormat && /* @__PURE__ */ (0, a.jsx)(n, {
+				setTime: e,
+				value: o,
+				disabled: c || !o && !s?.dateTypeRepeater,
+				others: s,
+				onChangeOthers: r,
+				isSecondDatePicker: this.props.isSecondDatePicker
+			})]
+		}) }) });
+	}
+};
+function s(e, t) {
+	return e[Math.floor(t / 7)];
+}
+function c(e) {
+	let t = e.firstDayOfWeek(), n = [], r = 0;
+	return e._weekdaysMin.forEach(function(e) {
+		n[(7 + r++ - t) % 7] = e;
+	}), n;
+}
+//#endregion
+export { o as default };

package/ui/index624.es.js

@@ -0,0 +1,68 @@
+import { require_jsx_runtime as e } from "./index143.es.js";
+import t from "./index622.es.js";
+import n from "react";
+//#region packages/ui/Elements/DatePicker/Datetime/views/MonthsView.tsx
+var r = e(), i = class extends n.Component {
+	constructor(...e) {
+		super(...e), this._updateSelectedMonth = (e) => {
+			this.props.updateDate(e);
+		};
+	}
+	render() {
+		return /* @__PURE__ */ (0, r.jsxs)("div", {
+			className: "rdtMonths",
+			children: [/* @__PURE__ */ (0, r.jsx)("table", { children: /* @__PURE__ */ (0, r.jsx)("thead", { children: this.renderNavigation() }) }), /* @__PURE__ */ (0, r.jsx)("table", { children: /* @__PURE__ */ (0, r.jsx)("tbody", { children: this.renderMonths() }) })]
+		});
+	}
+	renderNavigation() {
+		return /* @__PURE__ */ (0, r.jsx)(t, {
+			onClickPrev: () => this.props.navigate(-1, "years"),
+			onClickSwitch: () => this.props.showView("years"),
+			onClickNext: () => this.props.navigate(1, "years"),
+			switchContent: this.props.viewDate.year(),
+			switchColSpan: "2"
+		});
+	}
+	renderMonths() {
+		let e = [
+			[],
+			[],
+			[]
+		];
+		for (let t = 0; t < 12; t++) a(e, t).push(this.renderMonth(t));
+		return e.map((e, t) => /* @__PURE__ */ (0, r.jsx)("tr", { children: e }, t));
+	}
+	renderMonth(e) {
+		let t = this.props.selectedDate, n = "rdtMonth", i;
+		this.isDisabledMonth(e) ? n += " rdtDisabled" : i = this._updateSelectedMonth, t && t.year() === this.props.viewDate.year() && t.month() === e && (n += " rdtActive");
+		let a = {
+			key: e,
+			className: n,
+			"data-value": e,
+			onClick: i
+		};
+		return this.props.renderMonth ? this.props.renderMonth(a, e, this.props.viewDate.year(), this.props.selectedDate && this.props.selectedDate.clone()) : /* @__PURE__ */ (0, r.jsx)("td", {
+			...a,
+			children: this.getMonthText(e)
+		});
+	}
+	isDisabledMonth(e) {
+		let t = this.props.isValidDate;
+		if (!t) return !1;
+		let n = this.props.viewDate.clone().set({ month: e }), r = n.endOf("month").date() + 1;
+		for (; r-- > 1;) if (t(n.date(r))) return !1;
+		return !0;
+	}
+	getMonthText(e) {
+		let t = this.props.viewDate;
+		return o(t.localeData().monthsShort(t.month(e)).substring(0, 3));
+	}
+};
+function a(e, t) {
+	return t < 4 ? e[0] : t < 8 ? e[1] : e[2];
+}
+function o(e) {
+	return e.charAt(0).toUpperCase() + e.slice(1);
+}
+//#endregion
+export { i as default };

package/ui/index625.es.js

@@ -0,0 +1,72 @@
+import { require_jsx_runtime as e } from "./index143.es.js";
+import t from "./index622.es.js";
+import n from "react";
+//#region packages/ui/Elements/DatePicker/Datetime/views/YearsView.tsx
+var r = e(), i = class extends n.Component {
+	constructor(...e) {
+		super(...e), this.disabledYearsCache = {}, this._updateSelectedYear = (e) => {
+			this.props.updateDate(e);
+		};
+	}
+	static {
+		this.defaultProps = { renderYear: (e, t) => /* @__PURE__ */ (0, r.jsx)("td", {
+			...e,
+			children: t
+		}) };
+	}
+	render() {
+		return /* @__PURE__ */ (0, r.jsxs)("div", {
+			className: "rdtYears",
+			children: [/* @__PURE__ */ (0, r.jsx)("table", { children: /* @__PURE__ */ (0, r.jsx)("thead", { children: this.renderNavigation() }) }), /* @__PURE__ */ (0, r.jsx)("table", { children: /* @__PURE__ */ (0, r.jsx)("tbody", { children: this.renderYears() }) })]
+		});
+	}
+	renderNavigation() {
+		let e = this.getViewYear();
+		return /* @__PURE__ */ (0, r.jsx)(t, {
+			onClickPrev: () => this.props.navigate(-10, "years"),
+			onClickSwitch: () => this.props.showView("years"),
+			onClickNext: () => this.props.navigate(10, "years"),
+			switchContent: `${e}-${e + 9}`
+		});
+	}
+	renderYears() {
+		let e = this.getViewYear(), t = [
+			[],
+			[],
+			[]
+		];
+		for (let n = e - 1; n < e + 11; n++) a(t, n - e).push(this.renderYear(n));
+		return t.map((e, t) => /* @__PURE__ */ (0, r.jsx)("tr", { children: e }, t));
+	}
+	renderYear(e) {
+		let t = this.getSelectedYear(), n = "rdtYear", r;
+		this.isDisabledYear(e) ? n += " rdtDisabled" : r = this._updateSelectedYear, t === e && (n += " rdtActive");
+		let i = {
+			key: e,
+			className: n,
+			"data-value": e,
+			onClick: r
+		};
+		return this.props.renderYear(i, e, this.props.selectedDate && this.props.selectedDate.clone());
+	}
+	getViewYear() {
+		return parseInt(this.props.viewDate.year() / 10, 10) * 10;
+	}
+	getSelectedYear() {
+		return this.props.selectedDate && this.props.selectedDate.year();
+	}
+	isDisabledYear(e) {
+		let t = this.disabledYearsCache;
+		if (t[e] !== void 0) return t[e];
+		let n = this.props.isValidDate;
+		if (!n) return !1;
+		let r = this.props.viewDate.clone().set({ year: e }), i = r.endOf("year").dayOfYear() + 1;
+		for (; i-- > 1;) if (n(r.dayOfYear(i))) return t[e] = !1, !1;
+		return t[e] = !0, !0;
+	}
+};
+function a(e, t) {
+	return t < 3 ? e[0] : t < 7 ? e[1] : e[2];
+}
+//#endregion
+export { i as default };