@mailstep/design-system 0.8.26 → 0.8.27

package/ui/Elements/DatePicker/Datetime/components/DateRepeater.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { DateTimeOthers } from '../types';
-
+import type { FC } from 'react';
+import type { DateTimeOthers } from '../types';
 type DateRepeaterProps = {
     onChangeOthers?: ({ dateTypeRepeater }: DateTimeOthers) => void;
     others: DateTimeOthers;

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

@@ -0,0 +1,130 @@
+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 { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import Icon from "../../../Icon";
+import { DatePickerRepeatTrans } from "../../utils/constants";
+import { DatePickerRepeat } from "../types";
+import { i18n } from "@lingui/core";
+import { x } from "@xstyled/styled-components";
+import { FooterRow } from "./FooterRow";
+import { FooterRowLabel } from "./FooterRowLabel";
+var DateRepeater = function DateRepeater(param) {
+    var onChangeOthers = param.onChangeOthers, others = param.others, reset = param.reset;
+    var handleChange = useCallback(function(e) {
+        var dateTypeRepeater = e.target.value;
+        if (!dateTypeRepeater) {
+            reset();
+        }
+        onChangeOthers === null || onChangeOthers === void 0 ? void 0 : onChangeOthers(_object_spread_props(_object_spread({}, others), {
+            dateTypeRepeater: dateTypeRepeater
+        }));
+    }, [
+        onChangeOthers,
+        reset,
+        others
+    ]);
+    return /* @__PURE__ */ jsx(x.div, {
+        borderTop: "1px solid",
+        borderColor: "lightGray2",
+        mt: "8px",
+        pt: "8px",
+        mb: "8px",
+        children: /* @__PURE__ */ jsxs(FooterRow, {
+            children: [
+                /* @__PURE__ */ jsxs(x.div, {
+                    display: "flex",
+                    alignItems: "center",
+                    flex: "1",
+                    children: [
+                        /* @__PURE__ */ jsx(Icon, {
+                            icon: "calendar"
+                        }),
+                        /* @__PURE__ */ jsx(FooterRowLabel, {
+                            children: i18n._({
+                                id: "dataGrid.repeat",
+                                message: "Repeat"
+                            })
+                        })
+                    ]
+                }),
+                /* @__PURE__ */ jsxs(x.select, {
+                    textAlign: "right",
+                    onChange: handleChange,
+                    value: others === null || others === void 0 ? void 0 : others.dateTypeRepeater,
+                    background: "white",
+                    cursor: "pointer",
+                    border: "none",
+                    children: [
+                        /* @__PURE__ */ jsx("option", {
+                            value: "",
+                            children: i18n._({
+                                id: "dataGrid.noRepeat",
+                                message: "No repeat"
+                            })
+                        }),
+                        /* @__PURE__ */ jsx("option", {
+                            value: DatePickerRepeat.EVERY_TODAY,
+                            children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_TODAY]
+                        }),
+                        /* @__PURE__ */ jsx("option", {
+                            value: DatePickerRepeat.EVERY_YESTERDAY,
+                            children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_YESTERDAY]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+export { DateRepeater };

package/ui/Elements/DatePicker/Datetime/components/FooterRow.d.ts

@@ -1,3 +1,3 @@
-export declare const FooterRow: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const FooterRow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     disabled?: boolean;
 }, never>;

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

@@ -0,0 +1,26 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 15px;\n  line-height: 23px;\n  opacity: ",
+        ";\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { styled } from "@xstyled/styled-components";
+var FooterRow = styled.div(_templateObject(), function(param) {
+    var disabled = param.disabled;
+    return disabled ? 0.2 : 1;
+});
+export { FooterRow };

package/ui/Elements/DatePicker/Datetime/components/FooterRowLabel.d.ts

@@ -1 +1 @@
-export declare const FooterRowLabel: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
+export declare const FooterRowLabel: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;

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

@@ -0,0 +1,22 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  margin-left: 8px;\n  text-align: left;\n  width: 100%;\n\n  &[data-value] {\n    cursor: pointer;\n    &:hover {\n      font-weight: 500;\n    }\n  }\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import styled from "@xstyled/styled-components";
+var FooterRowLabel = styled.span(_templateObject());
+export { FooterRowLabel };

package/ui/Elements/DatePicker/Datetime/components/TimeInput.d.ts

@@ -1 +1 @@
-export declare const TimeInput: import('styled-components').StyledComponent<"input", import('@xstyled/system').Theme, {}, never>;
+export declare const TimeInput: import("styled-components").StyledComponent<"input", import("@xstyled/system").Theme, {}, never>;

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

@@ -0,0 +1,22 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  margin: 0;\n  margin-right: -1px;\n  padding: 0;\n  border: none;\n  outline: none;\n  color: blue2;\n\n  &::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import styled from "@xstyled/styled-components";
+var TimeInput = styled.input(_templateObject());
+export { TimeInput };

package/ui/Elements/DatePicker/Datetime/components/Timepicker.d.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 interface TimepickerProps {
     setTime: (type: string, value: number) => void;
     value: Date | null;

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

@@ -0,0 +1,258 @@
+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 { useCallback, useEffect, useState } from "react";
+import Icon from "../../../Icon/Icon";
+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"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+export { Timepicker };

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

@@ -0,0 +1,87 @@
+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 { 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
+            })
+        ]
+    });
+}
+export { ViewNavigation as default };

package/ui/Elements/DatePicker/Datetime/types.d.ts

@@ -1,6 +1,5 @@
-import { FocusEvent, FocusEventHandler, ReactNode } from 'react';
-import { Moment } from 'moment';
-
+import type { FocusEvent, FocusEventHandler, ReactNode } from 'react';
+import type { Moment } from 'moment';
 export type ViewMode = 'years' | 'months' | 'days' | 'time';
 export interface TimeConstraint {
     min: number;

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

@@ -0,0 +1,12 @@
+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 || {});
+export { DatePickerRepeat, TimePickerRepeat };

package/ui/Elements/DatePicker/Datetime/views/DaysView.d.ts

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-
+import React from 'react';
 export default class DaysView extends React.Component {
     static defaultProps: {
         isValidDate: () => boolean;