@shoplflow/base 0.24.1 → 0.24.3

package/dist/index.cjs

@@ -295,7 +295,8 @@ var PopperPortal = () => {
       {
         id: "popper-portal-key",
         style: {
-          zIndex: 20001
+          zIndex: 20001,
+          position: "relative"
         }
       }
     ),
@@ -1460,23 +1461,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 +1486,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 +1516,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 +1526,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 +1543,10 @@ var IconButton = React3.forwardRef(
         sizeVar,
         disabled,
         color,
-        ref
+        ref,
+        onMouseEnter: handleOnMouseEnter,
+        onMouseLeave: handleOnMouseLeave,
+        isHovered
       }, rest), {
         "data-shoplflow": "IconButton",
         children
@@ -1685,7 +1699,7 @@ exports.PopperPortal = React3.forwardRef(
     const { floatingStyles, setFloating, isOpen } = usePopper();
     const animation = initialAnimation != null ? initialAnimation : fadeInOut;
     const refs = useMergeRefs(ref, setFloating);
-    return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { id: "popper-portal-key", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
       framerMotion.motion.div,
       {
         initial: animation.initial,
@@ -1783,6 +1797,7 @@ exports.StyledDropdownButton = styled6__default.default.button`
   height: 100%;
   gap: 8px;
   cursor: pointer;
+  background-color: ${exports.colorTokens.neutral0};
   ${({ sizeVar }) => sizeVar && exports.getDropdownStyleBySizeVar(sizeVar)};
   ${({ disabled }) => disabled && react$1.css`
       cursor: not-allowed;
@@ -2784,11 +2799,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);
@@ -2816,13 +2833,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
+          ] })
         ] })
       ] })
     })