@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Elements/DatePicker/Datetime/components/Timepicker.js

@@ -1,258 +1,164 @@
-function _array_like_to_array(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 _array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _iterable_to_array_limit(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 _non_iterable_rest() {
-    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 _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(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(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  transform: rotate(90deg);\n  font-size: 18px;\n  margin: -4px 0;\n  background-color: transparent !important;\n  border: none;\n  color: ",
-        ";\n  &:disabled:hover {\n    color: ",
-        ";\n    cursor: default;\n  }\n  &:hover {\n    color: ",
-        ";\n    background-color: transparent !important;\n  }\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  align-items: baseline;\n  justify-content: center;\n  border: 1px solid ",
-        ";\n  border-radius: 6px;\n  padding: 0 4px;\n  margin: 0 4px;\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  font-size: 14px;\n  font-weight: 600;\n  width: 17px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  font-weight: 600;\n  font-size: 14px;\n  width: 18px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { jsx, jsxs } from "react/jsx-runtime";
+import Icon from "../../../Icon/Icon.js";
+import { FooterRow } from "./FooterRow.js";
+import { FooterRowLabel } from "./FooterRowLabel.js";
 import { useCallback, useEffect, useState } from "react";
-import Icon from "../../../Icon/Icon";
+import styled$1, { x } from "@xstyled/styled-components";
+import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { i18n } from "@lingui/core";
-import styled, { x } from "@xstyled/styled-components";
-import { th } from "@xstyled/system";
-import { FooterRow } from "./FooterRow";
-import { FooterRowLabel } from "./FooterRowLabel";
-var Btn = styled.button(_templateObject(), th("colors.lightGray4"), th("colors.lightGray4"), th("colors.red2"));
-var TimeWrapper = styled.div(_templateObject1(), th("colors.lightGray2"));
-var Hours = styled.input(_templateObject2());
-var Minutes = styled.input(_templateObject3());
-var regExp = "^[0-9]*$";
-var Timepicker = function Timepicker(param) {
-    var setTime = param.setTime, value = param.value, disabled = param.disabled;
-    var _ref, _ref1;
-    var _value_getHours, _value_getMinutes;
-    var initialHours = (_ref = value === null || value === void 0 ? void 0 : (_value_getHours = value.getHours) === null || _value_getHours === void 0 ? void 0 : _value_getHours.call(value)) !== null && _ref !== void 0 ? _ref : 0;
-    var initialMinutes = (_ref1 = value === null || value === void 0 ? void 0 : (_value_getMinutes = value.getMinutes) === null || _value_getMinutes === void 0 ? void 0 : _value_getMinutes.call(value)) !== null && _ref1 !== void 0 ? _ref1 : 0;
-    var _useState = _sliced_to_array(useState(initialHours), 2), hours = _useState[0], setHours = _useState[1];
-    var _useState1 = _sliced_to_array(useState(initialMinutes), 2), minutes = _useState1[0], setMinutes = _useState1[1];
-    var increaseHour = useCallback(function() {
-        setHours(function(prev) {
-            return (prev + 1) % 24;
-        });
-    }, []);
-    var decreaseHour = useCallback(function() {
-        setHours(function(prev) {
-            return prev === 0 ? 23 : prev - 1;
-        });
-    }, []);
-    var increaseMinutes = useCallback(function() {
-        setMinutes(function(prev) {
-            return (prev + 5) % 60;
-        });
-    }, []);
-    var decreaseMinutes = useCallback(function() {
-        setMinutes(function(prev) {
-            return (prev - 5 + 60) % 60;
-        });
-    }, []);
-    var onHoursChange = useCallback(function(e) {
-        if (e.target.value.match(regExp) && Number(e.target.value) <= 23) {
-            setHours(Number(e.target.value));
-        } else {
-            setHours(0);
-        }
-    }, []);
-    var onMinutesChange = useCallback(function(e) {
-        if (e.target.value.match(regExp) && Number(e.target.value) <= 59) {
-            setMinutes(Number(e.target.value));
-        } else {
-            setMinutes(0);
-        }
-    }, []);
-    useEffect(function() {
-        !!value && setTime("hours", hours);
-    }, [
-        hours
-    ]);
-    useEffect(function() {
-        !!value && setTime("minutes", minutes);
-    }, [
-        minutes
-    ]);
-    useEffect(function() {
-        setHours(initialHours);
-    }, [
-        initialHours
-    ]);
-    useEffect(function() {
-        setMinutes(initialMinutes);
-    }, [
-        initialMinutes
-    ]);
-    return /* @__PURE__ */ jsxs(FooterRow, {
-        disabled: disabled,
-        children: [
-            /* @__PURE__ */ jsxs("div", {
-                children: [
-                    /* @__PURE__ */ jsx(Icon, {
-                        icon: "clock"
-                    }),
-                    /* @__PURE__ */ jsx(FooterRowLabel, {
-                        children: i18n._({
-                            id: "dataGrid.filterCell.time",
-                            message: "Time"
-                        })
-                    })
-                ]
-            }),
-            /* @__PURE__ */ jsx(x.div, {
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "flex-start",
-                pt: "4px",
-                w: "fit-content",
-                children: /* @__PURE__ */ jsxs(x.div, {
-                    display: "flex",
-                    alignItems: "center",
-                    children: [
-                        /* @__PURE__ */ jsxs(x.div, {
-                            display: "flex",
-                            flexDirection: "column",
-                            children: [
-                                /* @__PURE__ */ jsx(Btn, {
-                                    disabled: disabled,
-                                    onClick: increaseHour,
-                                    type: "button",
-                                    children: "\u2039"
-                                }),
-                                /* @__PURE__ */ jsx(Btn, {
-                                    disabled: disabled,
-                                    onClick: decreaseHour,
-                                    type: "button",
-                                    children: "\u203A"
-                                })
-                            ]
-                        }),
-                        /* @__PURE__ */ jsxs(TimeWrapper, {
-                            children: [
-                                /* @__PURE__ */ jsx(Hours, {
-                                    value: String(hours).padStart(2, "0"),
-                                    disabled: disabled,
-                                    onChange: onHoursChange
-                                }),
-                                /* @__PURE__ */ jsx(x.div, {
-                                    mx: "1px",
-                                    children: ":"
-                                }),
-                                /* @__PURE__ */ jsx(Minutes, {
-                                    value: String(minutes).padStart(2, "0"),
-                                    disabled: disabled,
-                                    onChange: onMinutesChange
-                                })
-                            ]
-                        }),
-                        /* @__PURE__ */ jsxs(x.div, {
-                            display: "flex",
-                            flexDirection: "column",
-                            children: [
-                                /* @__PURE__ */ jsx(Btn, {
-                                    disabled: disabled,
-                                    onClick: increaseMinutes,
-                                    type: "button",
-                                    children: "\u2039"
-                                }),
-                                /* @__PURE__ */ jsx(Btn, {
-                                    disabled: disabled,
-                                    onClick: decreaseMinutes,
-                                    type: "button",
-                                    children: "\u203A"
-                                })
-                            ]
-                        })
-                    ]
-                })
-            })
-        ]
-    });
+//#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker.tsx
+const Btn = styled$1.button`
+  transform: rotate(90deg);
+  font-size: 18px;
+  margin: -4px 0;
+  background-color: transparent !important;
+  border: none;
+  color: ${th$1("colors.lightGray4")};
+  &:disabled:hover {
+    color: ${th$1("colors.lightGray4")};
+    cursor: default;
+  }
+  &:hover {
+    color: ${th$1("colors.red2")};
+    background-color: transparent !important;
+  }
+`;
+const TimeWrapper = styled$1.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  border: 1px solid ${th$1("colors.lightGray2")};
+  border-radius: 6px;
+  padding: 0 4px;
+  margin: 0 4px;
+`;
+const Hours = styled$1.input`
+  font-size: 14px;
+  font-weight: 600;
+  width: 17px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  &:disabled {
+    opacity: 0.5;
+  }
+`;
+const Minutes = styled$1.input`
+  font-weight: 600;
+  font-size: 14px;
+  width: 18px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  &:disabled {
+    opacity: 0.5;
+  }
+`;
+const regExp = "^[0-9]*$";
+const Timepicker = ({ setTime, value, disabled }) => {
+	const initialHours = value?.getHours?.() ?? 0;
+	const initialMinutes = value?.getMinutes?.() ?? 0;
+	const [hours, setHours] = useState(initialHours);
+	const [minutes, setMinutes] = useState(initialMinutes);
+	const increaseHour = useCallback(() => {
+		setHours((prev) => (prev + 1) % 24);
+	}, []);
+	const decreaseHour = useCallback(() => {
+		setHours((prev) => prev === 0 ? 23 : prev - 1);
+	}, []);
+	const increaseMinutes = useCallback(() => {
+		setMinutes((prev) => (prev + 5) % 60);
+	}, []);
+	const decreaseMinutes = useCallback(() => {
+		setMinutes((prev) => (prev - 5 + 60) % 60);
+	}, []);
+	const onHoursChange = useCallback((e) => {
+		if (e.target.value.match(regExp) && Number(e.target.value) <= 23) setHours(Number(e.target.value));
+		else setHours(0);
+	}, []);
+	const onMinutesChange = useCallback((e) => {
+		if (e.target.value.match(regExp) && Number(e.target.value) <= 59) setMinutes(Number(e.target.value));
+		else setMinutes(0);
+	}, []);
+	useEffect(() => {
+		value && setTime("hours", hours);
+	}, [hours]);
+	useEffect(() => {
+		value && setTime("minutes", minutes);
+	}, [minutes]);
+	useEffect(() => {
+		setHours(initialHours);
+	}, [initialHours]);
+	useEffect(() => {
+		setMinutes(initialMinutes);
+	}, [initialMinutes]);
+	return /* @__PURE__ */ jsxs(FooterRow, {
+		disabled,
+		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Icon, { icon: "clock" }), /* @__PURE__ */ jsx(FooterRowLabel, { children: i18n._({
+			id: "dataGrid.filterCell.time",
+			message: "Time"
+		}) })] }), /* @__PURE__ */ jsx(x.div, {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "flex-start",
+			pt: "4px",
+			w: "fit-content",
+			children: /* @__PURE__ */ jsxs(x.div, {
+				display: "flex",
+				alignItems: "center",
+				children: [
+					/* @__PURE__ */ jsxs(x.div, {
+						display: "flex",
+						flexDirection: "column",
+						children: [/* @__PURE__ */ jsx(Btn, {
+							disabled,
+							onClick: increaseHour,
+							type: "button",
+							children: "‹"
+						}), /* @__PURE__ */ jsx(Btn, {
+							disabled,
+							onClick: decreaseHour,
+							type: "button",
+							children: "›"
+						})]
+					}),
+					/* @__PURE__ */ jsxs(TimeWrapper, { children: [
+						/* @__PURE__ */ jsx(Hours, {
+							value: String(hours).padStart(2, "0"),
+							disabled,
+							onChange: onHoursChange
+						}),
+						/* @__PURE__ */ jsx(x.div, {
+							mx: "1px",
+							children: ":"
+						}),
+						/* @__PURE__ */ jsx(Minutes, {
+							value: String(minutes).padStart(2, "0"),
+							disabled,
+							onChange: onMinutesChange
+						})
+					] }),
+					/* @__PURE__ */ jsxs(x.div, {
+						display: "flex",
+						flexDirection: "column",
+						children: [/* @__PURE__ */ jsx(Btn, {
+							disabled,
+							onClick: increaseMinutes,
+							type: "button",
+							children: "‹"
+						}), /* @__PURE__ */ jsx(Btn, {
+							disabled,
+							onClick: decreaseMinutes,
+							type: "button",
+							children: "›"
+						})]
+					})
+				]
+			})
+		})]
+	});
 };
+//#endregion
 export { Timepicker };

package/ui/Elements/DatePicker/Datetime/components/ViewNavigation.js

@@ -1,87 +1,31 @@
-function _define_property(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 _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-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 _object_spread_props(target, source) {
-    source = source != null ? source : {};
-    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;
-}
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-function ViewNavigation(param) {
-    var onClickPrev = param.onClickPrev, onClickSwitch = param.onClickSwitch, onClickNext = param.onClickNext, switchContent = param.switchContent, switchColSpan = param.switchColSpan, switchProps = param.switchProps, label = param.label;
-    return /* @__PURE__ */ jsxs("tr", {
-        children: [
-            /* @__PURE__ */ jsx("th", {
-                className: "rdtPrev",
-                onClick: onClickPrev,
-                children: /* @__PURE__ */ jsx("span", {
-                    children: "\u2039"
-                })
-            }),
-            /* @__PURE__ */ jsx("th", _object_spread_props(_object_spread({
-                className: "rdtSwitch",
-                colSpan: switchColSpan,
-                onClick: onClickSwitch
-            }, switchProps), {
-                children: switchContent
-            })),
-            /* @__PURE__ */ jsx("th", {
-                className: "rdtNext",
-                onClick: onClickNext,
-                children: /* @__PURE__ */ jsx("span", {
-                    children: "\u203A"
-                })
-            }),
-            /* @__PURE__ */ jsx("th", {
-                colSpan: 2,
-                className: "rdtLabel",
-                children: label && label
-            })
-        ]
-    });
+//#region packages/ui/Elements/DatePicker/Datetime/components/ViewNavigation.tsx
+function ViewNavigation({ onClickPrev, onClickSwitch, onClickNext, switchContent, switchColSpan, switchProps, label }) {
+	return /* @__PURE__ */ jsxs("tr", { children: [
+		/* @__PURE__ */ jsx("th", {
+			className: "rdtPrev",
+			onClick: onClickPrev,
+			children: /* @__PURE__ */ jsx("span", { children: "‹" })
+		}),
+		/* @__PURE__ */ jsx("th", {
+			className: "rdtSwitch",
+			colSpan: switchColSpan,
+			onClick: onClickSwitch,
+			...switchProps,
+			children: switchContent
+		}),
+		/* @__PURE__ */ jsx("th", {
+			className: "rdtNext",
+			onClick: onClickNext,
+			children: /* @__PURE__ */ jsx("span", { children: "›" })
+		}),
+		/* @__PURE__ */ jsx("th", {
+			colSpan: 2,
+			className: "rdtLabel",
+			children: label && label
+		})
+	] });
 }
+//#endregion
 export { ViewNavigation as default };

package/ui/Elements/DatePicker/Datetime/types.js

@@ -1,12 +1,14 @@
-var DatePickerRepeat = /* @__PURE__ */ function(DatePickerRepeat2) {
-    DatePickerRepeat2["EVERY_TODAY"] = "every-today";
-    DatePickerRepeat2["EVERY_YESTERDAY"] = "every-yesterday";
-    return DatePickerRepeat2;
-}(DatePickerRepeat || {});
-var TimePickerRepeat = /* @__PURE__ */ function(TimePickerRepeat2) {
-    TimePickerRepeat2["FROM"] = "from";
-    TimePickerRepeat2["TO"] = "to";
-    TimePickerRepeat2["AT"] = "at";
-    return TimePickerRepeat2;
-}(TimePickerRepeat || {});
+//#region packages/ui/Elements/DatePicker/Datetime/types.ts
+let DatePickerRepeat = /* @__PURE__ */ function(DatePickerRepeat) {
+	DatePickerRepeat["EVERY_TODAY"] = "every-today";
+	DatePickerRepeat["EVERY_YESTERDAY"] = "every-yesterday";
+	return DatePickerRepeat;
+}({});
+let TimePickerRepeat = /* @__PURE__ */ function(TimePickerRepeat) {
+	TimePickerRepeat["FROM"] = "from";
+	TimePickerRepeat["TO"] = "to";
+	TimePickerRepeat["AT"] = "at";
+	return TimePickerRepeat;
+}({});
+//#endregion
 export { DatePickerRepeat, TimePickerRepeat };