@yosgo/swap-ui 1.0.124 → 1.0.127

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

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+import { MyTooltipProps } from "../Tooltip/Tooltip.types";
+declare type OmitTooltipProps = Omit<MyTooltipProps, "children">;
 export interface ModalProps {
     footer?: React.ReactNode;
     multiline?: boolean;
@@ -32,6 +34,7 @@ export interface ModalProps {
         style?: React.CSSProperties;
         variant?: "primary" | "secondary" | "text" | "tertiary" | "black" | "danger";
         loading?: boolean;
+        tooltip?: OmitTooltipProps;
     };
     primaryButton?: {
         title?: string | React.ReactNode;
@@ -40,6 +43,7 @@ export interface ModalProps {
         style?: React.CSSProperties;
         variant?: "primary" | "secondary" | "text" | "tertiary" | "black" | "danger";
         loading?: boolean;
+        tooltip?: OmitTooltipProps;
     };
     disUnderLine?: boolean;
     disCloseIcon?: boolean;
@@ -47,3 +51,4 @@ export interface ModalProps {
     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";
 }
+export {};

package/build/index.esm.js

@@ -6662,6 +6662,58 @@ const host = createHost(primitives, {
 });
 const animated = host.animated;
 
+var useStyles$a = makeStyles$1(function (theme) { return ({
+    root: function (props) { return ({
+        margin: props.margin,
+        backgroundColor: props.backgroundColor,
+        color: props.color,
+        padding: props.padding,
+        boxShadow: theme.boxShadow.m,
+        border: props.border,
+        maxWidth: props.width,
+        fontSize: 12,
+        lineHeight: 1.4,
+        fontWeight: props.fontWeight,
+    }); },
+    arrow: function (props) { return ({
+        color: props.backgroundColor,
+    }); },
+}); });
+var Tooltip = function (props) {
+    var theme = useTheme$1();
+    var arrow = props.arrow, margin = props.margin, marginTop = props.marginTop, marginBottom = props.marginBottom, marginRight = props.marginRight, marginLeft = props.marginLeft, dark = props.dark, light = props.light, children = props.children, width = props.width, childrenStyle = props.childrenStyle, other = __rest(props, ["arrow", "margin", "marginTop", "marginBottom", "marginRight", "marginLeft", "dark", "light", "children", "width", "childrenStyle"]);
+    var styleProps = {
+        width: width ? width : 240,
+        padding: arrow ? "7.5px 12px" : 12,
+        margin: margin
+            ? margin
+            : marginTop
+                ? "0px 0px " + marginTop + "px 0px"
+                : marginBottom
+                    ? marginBottom + "px 0px 0px 0px"
+                    : marginRight
+                        ? "0px 0px 0px " + marginRight + "px"
+                        : marginLeft
+                            ? "0px " + marginLeft + "px 0px 0px"
+                            : "10px 0px",
+        backgroundColor: dark
+            ? theme.black.black900
+            : light
+                ? theme.black.white
+                : theme.black.black900,
+        color: dark
+            ? theme.black.white
+            : light
+                ? theme.black.black800
+                : theme.black.white,
+        border: light ? "1px solid #CCCCCC" : null,
+        fontWeight: arrow ? 700 : 400,
+    };
+    var classes = useStyles$a(styleProps);
+    return (React__default.createElement(MaterialTooltip, __assign({ classes: { tooltip: classes.root, arrow: classes.arrow } }, other, { arrow: arrow }),
+        React__default.createElement("div", { style: __assign({ width: "fit-content", height: "fit-content", display: "flex", alignItems: "center", justifyContent: "center" }, childrenStyle) }, children)));
+};
+
 var ModalTransitionEffect = React__default.forwardRef(function ModalTransitionEffect(props, ref) {
     var open = props.in, slide = props.slide, children = props.children, onEnter = props.onEnter, onExited = props.onExited, style = props.style, other = __rest(props, ["in", "slide", "children", "onEnter", "onExited", "style"]);
     var defaultStyle = useSpring({
@@ -7151,15 +7203,21 @@ var Modal = React__default.forwardRef(function (props, ref) {
                     secondaryButton || primaryButton ? (React__default.createElement(Box, { className: classes.footerButton },
                         React__default.createElement(Box, { width: mobile && !buttonFullWidth && !footerDisplayColumn
                                 ? null
-                                : "100%", marginRight: !footerDisplayColumn && secondaryButton ? 1 : 0 }, secondaryButton ? (React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn, variant: secondaryButton.variant
+                                : "100%", marginRight: !footerDisplayColumn && secondaryButton ? 1 : 0 }, secondaryButton ? (secondaryButton.tooltip ? (React__default.createElement(Tooltip, __assign({}, secondaryButton.tooltip),
+                            React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn, variant: secondaryButton.variant
+                                    ? secondaryButton.variant
+                                    : "secondary", size: "small", onClick: secondaryButton.onClick, disabled: secondaryButton.disabled, loading: secondaryButton.loading, style: secondaryButton.style }, secondaryButton.title))) : (React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn, variant: secondaryButton.variant
                                 ? secondaryButton.variant
-                                : "secondary", size: "small", onClick: secondaryButton.onClick, disabled: secondaryButton.disabled, loading: secondaryButton.loading, style: secondaryButton.style }, secondaryButton.title)) : null),
-                        React__default.createElement(Box, { width: "100%", marginBottom: footerDisplayColumn ? 1 : 0 }, primaryButton ? (React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn || mobile, variant: primaryButton.variant
+                                : "secondary", size: "small", onClick: secondaryButton.onClick, disabled: secondaryButton.disabled, loading: secondaryButton.loading, style: secondaryButton.style }, secondaryButton.title))) : null),
+                        React__default.createElement(Box, { width: "100%", marginBottom: footerDisplayColumn ? 1 : 0 }, primaryButton ? (primaryButton.tooltip ? (React__default.createElement(Tooltip, __assign({}, primaryButton.tooltip),
+                            React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn || mobile, variant: primaryButton.variant
+                                    ? primaryButton.variant
+                                    : "primary", size: "small", onClick: primaryButton.onClick, disabled: primaryButton.disabled, loading: primaryButton.loading, style: primaryButton.style }, primaryButton.title))) : (React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn || mobile, variant: primaryButton.variant
                                 ? primaryButton.variant
-                                : "primary", size: "small", onClick: primaryButton.onClick, disabled: primaryButton.disabled, loading: primaryButton.loading, style: primaryButton.style }, primaryButton.title)) : null))) : null)))))));
+                                : "primary", size: "small", onClick: primaryButton.onClick, disabled: primaryButton.disabled, loading: primaryButton.loading, style: primaryButton.style }, primaryButton.title))) : null))) : null)))))));
 });
 
-var useStyles$a = makeStyles$1(function () { return ({
+var useStyles$b = makeStyles$1(function () { return ({
     root: function (props) { return ({
         backgroundColor: props.backgroundColor,
         border: "1px solid " + props.borderColor,
@@ -7207,7 +7265,7 @@ var Banner = function (props) {
         height: height ? height : null,
         alignItems: mobile ? "flex-start" : alignStart ? "flex-start" : "center",
     };
-    var classes = useStyles$a(styleProps);
+    var classes = useStyles$b(styleProps);
     var ref = useRef(null);
     useEffect(function () {
         if (ref.current) {
@@ -7233,7 +7291,7 @@ var Banner = function (props) {
         React__default.createElement(Typography, { variant: "caption2" }, children)));
 };
 
-var useStyles$b = makeStyles$1(function () { return ({
+var useStyles$c = makeStyles$1(function () { return ({
     root: function (props) { return ({
         backgroundColor: props.backgroundColor,
         border: props.border,
@@ -7247,7 +7305,6 @@ var useStyles$b = makeStyles$1(function () { return ({
         fontSize: "0.75rem",
         lineHeight: "17px",
         fontWeight: 700,
-        marginRight: props.marginRight,
         color: props.color,
     }); },
 }); });
@@ -7289,11 +7346,10 @@ var Chip = function (props) {
                     : variant === "danger"
                         ? theme.danger.danger800
                         : theme.primary.primary800,
-        marginRight: variant === "success" ? 4 : 0,
     };
-    var classes = useStyles$b(styleProps);
+    var classes = useStyles$c(styleProps);
     return (React__default.createElement("div", __assign({ className: classes.root }, other),
-        label,
+        React__default.createElement("span", { style: { marginRight: variant === "success" ? 4 : 0 } }, 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" },
@@ -7322,58 +7378,6 @@ var CircularProgress = function (props) {
             } })));
 };
 
-var useStyles$c = makeStyles$1(function (theme) { return ({
-    root: function (props) { return ({
-        margin: props.margin,
-        backgroundColor: props.backgroundColor,
-        color: props.color,
-        padding: props.padding,
-        boxShadow: theme.boxShadow.m,
-        border: props.border,
-        maxWidth: props.width,
-        fontSize: 12,
-        lineHeight: 1.4,
-        fontWeight: props.fontWeight,
-    }); },
-    arrow: function (props) { return ({
-        color: props.backgroundColor,
-    }); },
-}); });
-var Tooltip = function (props) {
-    var theme = useTheme$1();
-    var arrow = props.arrow, margin = props.margin, marginTop = props.marginTop, marginBottom = props.marginBottom, marginRight = props.marginRight, marginLeft = props.marginLeft, dark = props.dark, light = props.light, children = props.children, width = props.width, childrenStyle = props.childrenStyle, other = __rest(props, ["arrow", "margin", "marginTop", "marginBottom", "marginRight", "marginLeft", "dark", "light", "children", "width", "childrenStyle"]);
-    var styleProps = {
-        width: width ? width : 240,
-        padding: arrow ? "7.5px 12px" : 12,
-        margin: margin
-            ? margin
-            : marginTop
-                ? "0px 0px " + marginTop + "px 0px"
-                : marginBottom
-                    ? marginBottom + "px 0px 0px 0px"
-                    : marginRight
-                        ? "0px 0px 0px " + marginRight + "px"
-                        : marginLeft
-                            ? "0px " + marginLeft + "px 0px 0px"
-                            : "10px 0px",
-        backgroundColor: dark
-            ? theme.black.black900
-            : light
-                ? theme.black.white
-                : theme.black.black900,
-        color: dark
-            ? theme.black.white
-            : light
-                ? theme.black.black800
-                : theme.black.white,
-        border: light ? "1px solid #CCCCCC" : null,
-        fontWeight: arrow ? 700 : 400,
-    };
-    var classes = useStyles$c(styleProps);
-    return (React__default.createElement(MaterialTooltip, __assign({ classes: { tooltip: classes.root, arrow: classes.arrow } }, other, { arrow: arrow }),
-        React__default.createElement("div", { style: __assign({ width: "fit-content", height: "fit-content", display: "flex", alignItems: "center", justifyContent: "center" }, childrenStyle) }, children)));
-};
-
 function _extends() {
   _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -12742,10 +12746,15 @@ 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, 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];
+    var _c = useState(Number(new Date().getMonth() + 2)), nextMonth = _c[0], setNextMonth = _c[1];
     var _d = useState(""), date = _d[0], setDate = _d[1];
     var _e = useState(false), isOpenMonthSelector = _e[0], setIsOpenMonthSelector = _e[1];
     var _f = useState(false), isClicked = _f[0], setIsClicked = _f[1];
+    useEffect(function () {
+        if (month === 12) {
+            setNextMonth(1);
+        }
+    }, []);
     useEffect(function () {
         if (format === "month") {
             if (month % 2 === 0) {