@shoplflow/base 0.24.0 → 0.24.2

package/dist/index.cjs

@@ -1460,23 +1460,23 @@ var getWidthAndHeightFromSizeVar = (sizeVar) => {
       `;
   }
 };
-var getStyleByStyleVar2 = (styleVar, color) => {
+var getStyleByStyleVar2 = (styleVar, color, isHovered) => {
   switch (styleVar) {
     case "PRIMARY":
       return react$1.css`
         background: ${exports.colorTokens.primary300};
         border: 1px solid ${exports.colorTokens.primary400};
-        &:hover {
+        ${isHovered && react$1.css`
           background: ${exports.colorTokens.primary400};
-        }
+        `}
       `;
     case "SECONDARY":
       return react$1.css`
         background: ${exports.colorTokens.neutral0};
         border: 1px solid ${exports.colorTokens.neutral350};
-        &:hover {
+        ${isHovered && react$1.css`
           background: ${exports.colorTokens.neutral100};
-        }
+        `}
       `;
     case "SOLID":
       if (!color) {
@@ -1485,24 +1485,25 @@ var getStyleByStyleVar2 = (styleVar, color) => {
       return react$1.css`
         border: 1px solid ${exports.colorTokens[getNextColor(color)]};
         background: ${exports.colorTokens[color]};
-        &:hover {
+
+        ${isHovered && react$1.css`
           background: ${exports.colorTokens[getNextColor(color)]};
-        }
+        `}
       `;
     case "GHOST":
       return react$1.css`
         border: 1px solid transparent;
         background: transparent;
-        &:hover {
+        ${isHovered && react$1.css`
           background: ${exports.colorTokens.neutral400_5};
-        }
+        `}
       `;
     default:
       return react$1.css`
         border: 1px solid ${exports.colorTokens.neutral200};
-        &:hover {
+        ${isHovered && react$1.css`
           background: ${exports.colorTokens.neutral100};
-        }
+        `}
       `;
   }
 };
@@ -1514,7 +1515,7 @@ var StyledIconButton = styled6__default.default.button`
   align-items: center;
   background: ${exports.colorTokens.neutral0};
   cursor: pointer;
-  ${({ styleVar, color }) => getStyleByStyleVar2(styleVar, color)};
+  ${({ styleVar, color, isHovered }) => getStyleByStyleVar2(styleVar, color, isHovered)};
   ${({ sizeVar }) => getWidthAndHeightFromSizeVar(sizeVar)};
   ${({ disabled }) => getDisabledStyle(disabled)};
   & > svg {
@@ -1524,7 +1525,16 @@ var StyledIconButton = styled6__default.default.button`
 `;
 var IconButton = React3.forwardRef(
   (_a, ref) => {
-    var _b = _a, { styleVar, sizeVar, disabled, children, color } = _b, rest = __objRest(_b, ["styleVar", "sizeVar", "disabled", "children", "color"]);
+    var _b = _a, { styleVar, sizeVar, disabled, children, color, onMouseEnter, onMouseLeave } = _b, rest = __objRest(_b, ["styleVar", "sizeVar", "disabled", "children", "color", "onMouseEnter", "onMouseLeave"]);
+    const [isHovered, setIsHovered] = React3.useState(false);
+    const handleOnMouseEnter = (e) => {
+      setIsHovered(true);
+      onMouseEnter && onMouseEnter(e);
+    };
+    const handleOnMouseLeave = (e) => {
+      setIsHovered(false);
+      onMouseLeave && onMouseLeave(e);
+    };
     return /* @__PURE__ */ jsxRuntime.jsx(
       StyledIconButton,
       __spreadProps(__spreadValues({
@@ -1532,7 +1542,10 @@ var IconButton = React3.forwardRef(
         sizeVar,
         disabled,
         color,
-        ref
+        ref,
+        onMouseEnter: handleOnMouseEnter,
+        onMouseLeave: handleOnMouseLeave,
+        isHovered
       }, rest), {
         "data-shoplflow": "IconButton",
         children
@@ -1873,12 +1886,8 @@ exports.StyledIcon = styled6__default.default.svg`
   }
 `;
 var Icon = React3.forwardRef((_a, ref) => {
-  var _b = _a, { iconSource, dangerouslySetInnerHTML } = _b, rest = __objRest(_b, ["iconSource", "dangerouslySetInnerHTML"]);
-  const htmlContent = dangerouslySetInnerHTML ? { __html: dangerouslySetInnerHTML } : void 0;
-  if (htmlContent && iconSource) {
-    throw new Error("Icon: iconSource\uC640 dangerouslySetInnerHTML\uC740 \uB3D9\uC2DC\uC5D0 \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(exports.StyledIcon, __spreadProps(__spreadValues({ as: iconSource, ref }, rest), { "data-shoplflow": "Icon", dangerouslySetInnerHTML: htmlContent }));
+  var _b = _a, { iconSource } = _b, rest = __objRest(_b, ["iconSource"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(exports.StyledIcon, __spreadProps(__spreadValues({ as: iconSource, ref }, rest), { "data-shoplflow": "Icon" }));
 });
 exports.Icon = Icon;
 var DropdownButton = React3.forwardRef(
@@ -2788,11 +2797,13 @@ var SelectInputButton = (_a) => {
   const [isHovered, setIsHovered] = React3.useState(false);
   const handleOnClick = (e) => {
     e.preventDefault();
+    e.stopPropagation();
     if (!disabled) {
       onClick && onClick(e);
     }
   };
   const handleOnClear = (e) => {
+    e.preventDefault();
     e.stopPropagation();
     if (!disabled) {
       onClear && onClear(e);
@@ -2820,13 +2831,15 @@ var SelectInputButton = (_a) => {
       "data-shoplflow": "SelectInputButton",
       children: /* @__PURE__ */ jsxRuntime.jsxs(StyledSelectInputButton, { children: [
         value && value.length > 0 && label ? /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", children: value[0][label] }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", color: "neutral350", children: placeholder }),
-        /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { align: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { align: "center", spacing: "spacing04", children: [
           value && value.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(exports.Text, { typography: "body1_400", color: "neutral700", children: [
             "+",
             value.length - 1
           ] }),
-          value && value.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", onClick: handleOnClear, styleVar: "GHOST", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: assetFunction("DeleteIcon"), color: "neutral350" }) }),
-          rightSource
+          /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { align: "center", children: [
+            value && value.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", onClick: handleOnClear, styleVar: "GHOST", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: assetFunction("DeleteIcon"), color: "neutral350" }) }),
+            rightSource
+          ] })
         ] })
       ] })
     })