@yosgo/swap-ui 1.0.120 → 1.0.124

package/build/DatePicker/DatePicker.types.d.ts

@@ -10,4 +10,5 @@ export interface DatePickerProps extends BoxProps {
     max?: string;
     defaultValue?: string;
     getValue?: (date: string) => void;
+    value?: string;
 }

package/build/Modal/Modal.types.d.ts

@@ -46,5 +46,4 @@ export interface ModalProps {
     icon?: React.ReactNode;
     checkIconColor?: "primary" | "secondary" | "tertiary" | "primary50" | "primary100" | "primary200" | "primary300" | "primary400" | "primary500" | "primary600" | "primary700" | "primary800" | "primary900" | "primaryA11y" | "secondary50" | "secondary100" | "secondary200" | "secondary300" | "secondary400" | "secondary500" | "secondary600" | "secondary700" | "secondary800" | "secondary900" | "secondaryA11y" | "danger50" | "danger100" | "danger200" | "danger300" | "danger400" | "danger500" | "danger600" | "danger700" | "danger800" | "danger900" | "dangerA11y" | "success50" | "success100" | "success200" | "success300" | "success400" | "success500" | "success600" | "success700" | "success800" | "success900" | "successA11y" | "white" | "black100" | "black200" | "black300" | "black400" | "black500" | "black600" | "black700" | "black800" | "black900" | "black1000";
     iconColor?: "primary" | "secondary" | "tertiary" | "primary50" | "primary100" | "primary200" | "primary300" | "primary400" | "primary500" | "primary600" | "primary700" | "primary800" | "primary900" | "primaryA11y" | "secondary50" | "secondary100" | "secondary200" | "secondary300" | "secondary400" | "secondary500" | "secondary600" | "secondary700" | "secondary800" | "secondary900" | "secondaryA11y" | "danger50" | "danger100" | "danger200" | "danger300" | "danger400" | "danger500" | "danger600" | "danger700" | "danger800" | "danger900" | "dangerA11y" | "success50" | "success100" | "success200" | "success300" | "success400" | "success500" | "success600" | "success700" | "success800" | "success900" | "successA11y" | "white" | "black100" | "black200" | "black300" | "black400" | "black500" | "black600" | "black700" | "black800" | "black900" | "black1000";
-    isFreshchatOpen?: boolean;
 }

package/build/index.esm.js

@@ -2695,14 +2695,22 @@ var RadioButton = function (props) {
 };
 
 var useStyles$2 = makeStyles$1(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",
@@ -2730,11 +2738,18 @@ var useStyles$2 = makeStyles$1(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,
@@ -2754,7 +2769,11 @@ var useStyles$2 = makeStyles$1(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,
@@ -2776,7 +2795,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: {
@@ -6666,7 +6685,7 @@ var ModalTransitionEffect = React__default.forwardRef(function ModalTransitionEf
     return (React__default.createElement(React__default.Fragment, null, slide ? (React__default.createElement(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 = useState(0), clientHeight = _a[0], setClientHeight = _a[1];
     var _b = useState(0), scorllbarWidth = _b[0], setScorllbarWidth = _b[1];
     useEffect(function () {
@@ -6689,14 +6708,6 @@ var Modal = React__default.forwardRef(function (props, ref) {
         var scrollbar_width = window.innerWidth - document.body.clientWidth;
         setScorllbarWidth(scrollbar_width / 2);
     }, []);
-    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 = makeStyles$1(function (theme) { return ({
         root: {
@@ -7048,7 +7059,10 @@ var Modal = React__default.forwardRef(function (props, ref) {
         },
     }); });
     var classes = useStyles();
-    return (React__default.createElement(MaterialModal, { open: open, className: classes.root, BackdropComponent: Backdrop, BackdropProps: { className: classes.backdrop } },
+    return (React__default.createElement(MaterialModal, { open: open, className: classes.root, BackdropComponent: 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",
@@ -7229,7 +7243,12 @@ var useStyles$b = makeStyles$1(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) {
@@ -7248,7 +7267,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
@@ -7260,21 +7279,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 = useTheme$1();
@@ -12716,7 +12739,7 @@ var useStylesForCalendar = makeStyles$1(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 = useState(Number(new Date().getFullYear())), year = _a[0], setYear = _a[1];
     var _b = useState(Number(new Date().getMonth() + 1)), month = _b[0], setMonth = _b[1];
     var _c = useState(1), nextMonth = _c[0], setNextMonth = _c[1];
@@ -12754,7 +12777,7 @@ var DatePicker = function (props) {
                 }
             }
             else if (format === "day") {
-                getValue(date);
+                getValue(date.replace(/\//g, "-"));
             }
             else {
                 getValue(String(year));
@@ -12762,6 +12785,11 @@ var DatePicker = function (props) {
             setIsClicked(false);
         }
     }, [isClicked]);
+    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",
@@ -12877,11 +12905,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();
@@ -12955,14 +12983,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;
@@ -13015,11 +13045,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
@@ -13037,9 +13067,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" })));