@yosgo/swap-ui 1.0.120 → 1.0.124

package/build/index.js

@@ -2700,14 +2700,22 @@ var RadioButton = function (props) {
 };
 
 var useStyles$2 = core.makeStyles(function (theme) { return ({
+    root: {
+        "& .MuiFormHelperText-contained": {
+            marginLeft: 16,
+            marginRight: 16,
+        },
+    },
     inputRoot: function (props) { return ({
         width: props.width,
         height: props.height,
         padding: "0px 16px",
         backgroundColor: "white",
         fontSize: 16,
-        lineHeight: 1.4,
+        lineHeight: "unset",
         fontWeight: 400,
+        display: "flex",
+        alignItems: "center",
         "& fieldset": {
             "& legend": {
                 width: "0.01px",
@@ -2735,11 +2743,18 @@ var useStyles$2 = core.makeStyles(function (theme) { return ({
         },
     }); },
     input: {
+        fontSize: 16,
+        lineHeight: "unset",
+        fontWeight: 400,
+        display: "flex",
+        alignItems: "center",
         "&:-webkit-autofill": {
             "-webkit-box-shadow": "0 0 0 100px #FFFFFF inset",
         },
         "&::placeholder": { color: theme.black.black700, opacity: 1 },
         padding: 0,
+        margin: 0,
+        height: "fit-content",
     },
     selectRoot: function (props) { return ({
         borderRadius: 8,
@@ -2759,7 +2774,11 @@ var useStyles$2 = core.makeStyles(function (theme) { return ({
         "&.Mui-error": { color: theme.black.black700 },
     },
     shrink: {
-        transform: "translate(14px, -6px) !important",
+        transform: "translate(14px, -10px) !important",
+        height: 20,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
         backgroundColor: "white",
         fontSize: 14,
         fontWeight: 700,
@@ -2781,7 +2800,7 @@ var TextField = function (props) {
         select: select,
     };
     var classes = useStyles$2(styleProps);
-    return (React__default.createElement(MaterialTextField, __assign({ fullWidth: fullWidth, select: select }, other, { variant: "outlined", InputProps: __assign({ classes: {
+    return (React__default.createElement(MaterialTextField, __assign({ fullWidth: fullWidth, select: select }, other, { className: classes.root, variant: "outlined", InputProps: __assign({ classes: {
                 root: classes.inputRoot,
                 input: classes.input,
             } }, InputProps), InputLabelProps: __assign({ classes: {
@@ -6671,7 +6690,7 @@ var ModalTransitionEffect = React__default.forwardRef(function ModalTransitionEf
     return (React__default.createElement(React__default.Fragment, null, slide ? (React__default.createElement(core.Slide, { in: open, direction: "up", mountOnEnter: true, unmountOnExit: true, timeout: { enter: 300, exit: 300 } }, children)) : (React__default.createElement(animated.div, __assign({ style: __assign(__assign({}, style), defaultStyle) }, other), children))));
 });
 var Modal = React__default.forwardRef(function (props, ref) {
-    var width = props.width, height = props.height, open = props.open, onClose = props.onClose, title = props.title, helpText = props.helpText, size = props.size, headpadding = props.headpadding, headChildren = props.headChildren, checked = props.checked, failed = props.failed, icon = props.icon, checkIconColor = props.checkIconColor, iconColor = props.iconColor, children = props.children, label = props.label, buttonFullWidth = props.buttonFullWidth, footerDisplayColumn = props.footerDisplayColumn, secondaryButton = props.secondaryButton, primaryButton = props.primaryButton, mobile = props.mobile, fullWidth = props.fullWidth, bodyPadding = props.bodyPadding, maxWidth = props.maxWidth, disCloseIcon = props.disCloseIcon, titleStyle = props.titleStyle, bodyStyle = props.bodyStyle, onExit = props.onExit, bodyMaxHeight = props.bodyMaxHeight, multiline = props.multiline, disUnderLine = props.disUnderLine, footer = props.footer, isFreshchatOpen = props.isFreshchatOpen;
+    var width = props.width, height = props.height, open = props.open, onClose = props.onClose, title = props.title, helpText = props.helpText, size = props.size, headpadding = props.headpadding, headChildren = props.headChildren, checked = props.checked, failed = props.failed, icon = props.icon, checkIconColor = props.checkIconColor, iconColor = props.iconColor, children = props.children, label = props.label, buttonFullWidth = props.buttonFullWidth, footerDisplayColumn = props.footerDisplayColumn, secondaryButton = props.secondaryButton, primaryButton = props.primaryButton, mobile = props.mobile, fullWidth = props.fullWidth, bodyPadding = props.bodyPadding, maxWidth = props.maxWidth, disCloseIcon = props.disCloseIcon, titleStyle = props.titleStyle, bodyStyle = props.bodyStyle, onExit = props.onExit, bodyMaxHeight = props.bodyMaxHeight, multiline = props.multiline, disUnderLine = props.disUnderLine, footer = props.footer;
     var _a = React.useState(0), clientHeight = _a[0], setClientHeight = _a[1];
     var _b = React.useState(0), scorllbarWidth = _b[0], setScorllbarWidth = _b[1];
     React.useEffect(function () {
@@ -6694,14 +6713,6 @@ var Modal = React__default.forwardRef(function (props, ref) {
         var scrollbar_width = window.innerWidth - document.body.clientWidth;
         setScorllbarWidth(scrollbar_width / 2);
     }, []);
-    React.useEffect(function () {
-        if (!isFreshchatOpen) {
-            var elem = document.getElementById("fc_frame");
-            if (elem) {
-                elem.style["display"] = open ? "none" : "block";
-            }
-        }
-    }, [open]);
     var match_XS = useBreakpoints("xs");
     var useStyles = core.makeStyles(function (theme) { return ({
         root: {
@@ -7053,7 +7064,10 @@ var Modal = React__default.forwardRef(function (props, ref) {
         },
     }); });
     var classes = useStyles();
-    return (React__default.createElement(MaterialModal, { open: open, className: classes.root, BackdropComponent: core.Backdrop, BackdropProps: { className: classes.backdrop } },
+    return (React__default.createElement(MaterialModal, { open: open, className: classes.root, BackdropComponent: core.Backdrop, BackdropProps: {
+            className: classes.backdrop,
+            style: { overflow: "auto", WebkitOverflowScrolling: "touch" },
+        } },
         React__default.createElement(ModalTransitionEffect, { in: open, slide: fullWidth, style: {
                 outline: "none",
                 transition: "ease-in-out",
@@ -7234,7 +7248,12 @@ var useStyles$b = core.makeStyles(function () { return ({
         height: props.height,
         display: "flex",
         alignItems: "center",
-        justifyContent: "space-between",
+        justifyContent: "center",
+        fontSize: "0.75rem",
+        lineHeight: "17px",
+        fontWeight: 700,
+        marginRight: props.marginRight,
+        color: props.color,
     }); },
 }); });
 var Chip = function (props) {
@@ -7253,7 +7272,7 @@ var Chip = function (props) {
                             ? theme.danger.danger50
                             : theme.primary.primary50,
         width: width ? width : "fit-content",
-        height: height ? height : "fit-content",
+        height: height ? height : 24,
         border: outlined || !contained
             ? variant === "neutral"
                 ? "1px solid " + theme.black.black500
@@ -7265,21 +7284,25 @@ var Chip = function (props) {
                             ? "1px solid " + theme.danger.danger800
                             : "1px solid " + theme.primary.primary800
             : null,
-        padding: outlined || !contained ? "3.5px 8px" : "3.5px 9px",
+        padding: outlined || !contained ? "0px 8px" : "0px 9px",
+        color: variant === "neutral"
+            ? theme.black.black800
+            : variant === "primary"
+                ? theme.primary.primary800
+                : variant === "success"
+                    ? theme.success.success800
+                    : variant === "danger"
+                        ? theme.danger.danger800
+                        : theme.primary.primary800,
+        marginRight: variant === "success" ? 4 : 0,
     };
     var classes = useStyles$b(styleProps);
     return (React__default.createElement("div", __assign({ className: classes.root }, other),
-        React__default.createElement(Typography, { variant: "caption1", color: variant === "neutral"
-                ? "black800"
-                : variant === "primary"
-                    ? "primary800"
-                    : variant === "success"
-                        ? "success800"
-                        : variant === "danger"
-                            ? "danger800"
-                            : "primary800", style: { marginRight: icon ? 4 : 0 } }, label),
-        icon));
-};
+        label,
+        variant === "success" && !icon ? icon_success : icon));
+};
+var icon_success = (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default.createElement("path", { d: "M14 4.66666L6 12.6667L2.33333 9L3.27333 8.06L6 10.78L13.06 3.72666L14 4.66666Z", fill: "#00821E" })));
 
 var CircularProgress = function (props) {
     var theme = core.useTheme();
@@ -12721,7 +12744,7 @@ var useStylesForCalendar = core.makeStyles(function (theme) { return ({
     },
 }); });
 var DatePicker = function (props) {
-    var open = props.open, onClose = props.onClose, format = props.format, mobile = props.mobile, min = props.min, max = props.max, ModalProps = props.ModalProps, defaultValue = props.defaultValue, getValue = props.getValue, other = __rest(props, ["open", "onClose", "format", "mobile", "min", "max", "ModalProps", "defaultValue", "getValue"]);
+    var open = props.open, onClose = props.onClose, format = props.format, mobile = props.mobile, min = props.min, max = props.max, ModalProps = props.ModalProps, defaultValue = props.defaultValue, getValue = props.getValue, value = props.value, other = __rest(props, ["open", "onClose", "format", "mobile", "min", "max", "ModalProps", "defaultValue", "getValue", "value"]);
     var _a = React.useState(Number(new Date().getFullYear())), year = _a[0], setYear = _a[1];
     var _b = React.useState(Number(new Date().getMonth() + 1)), month = _b[0], setMonth = _b[1];
     var _c = React.useState(1), nextMonth = _c[0], setNextMonth = _c[1];
@@ -12759,7 +12782,7 @@ var DatePicker = function (props) {
                 }
             }
             else if (format === "day") {
-                getValue(date);
+                getValue(date.replace(/\//g, "-"));
             }
             else {
                 getValue(String(year));
@@ -12767,6 +12790,11 @@ var DatePicker = function (props) {
             setIsClicked(false);
         }
     }, [isClicked]);
+    React.useEffect(function () {
+        if (value) {
+            setDate(changeDateFormatToSlash(value));
+        }
+    }, [value]);
     return (React__default.createElement("div", __assign({}, other), format !== "day" ? (React__default.createElement("div", { style: {
             borderRadius: 8,
             border: "1px solid #cccccc",
@@ -12882,11 +12910,11 @@ var DatePicker = function (props) {
                     } }, Array.from(Array(6).keys()).map(function (_i, i) { return (React__default.createElement(MonthButton, { key: i, index: i, month: month, setMonth: setMonth, setIsOpenMonthSelector: setIsOpenMonthSelector, setIsClicked: setIsClicked })); }))))) : null)) : (React__default.createElement(Modal, __assign({ bodyPadding: mobile ? 16 : undefined, fullWidth: mobile, open: open, onClose: onClose, size: mobile ? undefined : "medium", label: !mobile ? (React__default.createElement(Typography, { variant: "h6" },
             React__default.createElement("span", { style: { fontWeight: 400 } }, "\u5DF2\u9078\u64C7\uFF1A"),
             date &&
-                date.split("-")[0] + "\u5E74" + date.split("-")[1] + "\u6708" + date.split("-")[2] + "\u65E5")) : (React__default.createElement(React__default.Fragment, null,
+                date.split("/")[0] + "\u5E74" + date.split("/")[1] + "\u6708" + date.split("/")[2] + "\u65E5")) : (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(Typography, { variant: "caption2" },
                 React__default.createElement("span", { style: { fontWeight: 400 } }, "\u5DF2\u9078\u64C7\uFF1A")),
             React__default.createElement(Typography, { variant: "subtitle" }, date &&
-                date.split("-")[0] + "\u5E74" + date.split("-")[1] + "\u6708" + date.split("-")[2] + "\u65E5"))), primaryButton: {
+                date.split("/")[0] + "\u5E74" + date.split("/")[1] + "\u6708" + date.split("/")[2] + "\u65E5"))), primaryButton: {
             title: "確認",
             onClick: function () {
                 onClose();
@@ -12960,14 +12988,16 @@ var MonthButton = function (_a) {
 var Calendar = function (_a) {
     var year = _a.year, month = _a.month, setDate = _a.setDate, date = _a.date, min = _a.min, max = _a.max, leftClick = _a.leftClick, rightClick = _a.rightClick, position = _a.position, defaultValue = _a.defaultValue, setIsClicked = _a.setIsClicked, mobile = _a.mobile;
     var isBigMonth = (month <= 7 && month % 2 !== 0) || (month >= 8 && month % 2 === 0);
-    var today = defaultValue ? new Date(defaultValue) : new Date();
-    var selectedYear = Number(date.split("-")[0]);
-    var selectedMonth = Number(date.split("-")[1]);
-    var selectedDate = Number(date.split("-")[2]);
-    var msOfMin = min ? new Date(min).getTime() : 0;
-    var msOfMax = max ? new Date(max).getTime() : 0;
-    var msOfFirstDayOfMonth = new Date(year + "-" + month + "-1").getTime();
-    var msOfLastDayOfMonth = new Date(year + "-" + month + "-" + (month === 2 ? (year % 4 === 0 ? 29 : 28) : isBigMonth ? 31 : 30)).getTime();
+    var today = defaultValue
+        ? new Date(changeDateFormatToSlash(defaultValue))
+        : new Date();
+    var selectedYear = Number(date.split("/")[0]);
+    var selectedMonth = Number(date.split("/")[1]);
+    var selectedDate = Number(date.split("/")[2]);
+    var msOfMin = min ? new Date(changeDateFormatToSlash(min)).getTime() : 0;
+    var msOfMax = max ? new Date(changeDateFormatToSlash(max)).getTime() : 0;
+    var msOfFirstDayOfMonth = new Date(year + "/" + month + "/1").getTime();
+    var msOfLastDayOfMonth = new Date(year + "/" + month + "/" + (month === 2 ? (year % 4 === 0 ? 29 : 28) : isBigMonth ? 31 : 30)).getTime();
     var arrowDisabled = (msOfMin !== 0 && position === "left" && msOfFirstDayOfMonth <= msOfMin) ||
         (msOfMax !== 0 && position === "right" && msOfLastDayOfMonth >= msOfMax);
     var mobileLeftArrowDisabled = msOfMin !== 0 && msOfFirstDayOfMonth <= msOfMin;
@@ -13020,11 +13050,11 @@ var Calendar = function (_a) {
                 var isToday = year === today.getFullYear() &&
                     month === today.getMonth() + 1 &&
                     dateNumber === today.getDate();
-                var msOfDate = new Date(year + "-" + month + "-" + dateNumber).getTime();
+                var msOfDate = new Date(year + "/" + month + "/" + dateNumber).getTime();
                 var disabled = (msOfMin !== 0 && msOfDate < msOfMin) ||
                     (msOfMax !== 0 && msOfDate > msOfMax);
                 return (React__default.createElement("div", { key: i, className: classes.date, onClick: function () {
-                        setDate(year + "-" + month + "-" + dateNumber);
+                        setDate(year + "/" + month + "/" + dateNumber);
                         setIsClicked(true);
                     }, style: {
                         backgroundColor: isSelected
@@ -13042,9 +13072,12 @@ var Calendar = function (_a) {
             }))));
 };
 var firstDayOfMonth = function (year, month) {
-    var firstDay = year + "-" + month + "-" + 1;
+    var firstDay = year + "/" + month + "/" + 1;
     return new Date(firstDay).getDay();
 };
+var changeDateFormatToSlash = function (date) {
+    return date.replace(/-/g, "/");
+};
 var verticalline = (React__default.createElement("div", { style: { width: 1, height: "100%", backgroundColor: "#cccccc" } }));
 var icon_arrowleft = (React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
     React__default.createElement("path", { d: "M12.8417 13.8167L9.02502 10L12.8417 6.175L11.6667 5L6.66669 10L11.6667 15L12.8417 13.8167Z", fill: "black" })));