@shoplflow/base 0.32.11 → 0.32.13

package/dist/index.cjs

@@ -1659,6 +1659,10 @@ var getWidthAndHeightFromSizeVar = (sizeVar) => {
         min-width: 40px;
         height: 40px;
         min-height: 40px;
+        & > svg {
+          width: 24px;
+          height: 24px;
+        }
       `;
     case "S":
       return react$1.css`
@@ -1666,6 +1670,10 @@ var getWidthAndHeightFromSizeVar = (sizeVar) => {
         min-width: 32px;
         height: 32px;
         min-height: 32px;
+        & > svg {
+          width: 20px;
+          height: 20px;
+        }
       `;
     case "XS":
       return react$1.css`
@@ -1673,6 +1681,10 @@ var getWidthAndHeightFromSizeVar = (sizeVar) => {
         min-width: 24px;
         height: 24px;
         min-height: 24px;
+        & > svg {
+          width: 12px;
+          height: 12px;
+        }
       `;
     default:
       return react$1.css`
@@ -1680,6 +1692,10 @@ var getWidthAndHeightFromSizeVar = (sizeVar) => {
         min-width: 40px;
         height: 40px;
         min-height: 40px;
+        & > svg {
+          width: 20px;
+          height: 20px;
+        }
       `;
   }
 };
@@ -1741,10 +1757,6 @@ var StyledIconButton = styled6__default.default.button`
   ${({ styleVar, color, isHovered }) => getStyleByStyleVar2(styleVar, color, isHovered)};
   ${({ sizeVar }) => getWidthAndHeightFromSizeVar(sizeVar)};
   ${({ disabled }) => getDisabledStyle(disabled)};
-  & > svg {
-    width: 20px;
-    height: 20px;
-  }
 `;
 var IconButton = React3.forwardRef(
   (_a, ref) => {
@@ -2135,7 +2147,7 @@ var InputWrapper = styled6__default.default.label`
   borderRadius
 })};
   justify-content: space-between;
-  gap: 8px;
+  gap: ${({ gap }) => gap || "8px"};
   border: 1px solid ${(props) => getBorderColorByStatus(props)};
   background-color: ${exports.colorTokens.neutral0};
   overflow: hidden;
@@ -3035,7 +3047,7 @@ var StyledInput = styled6__default.default.input`
   padding: 4px 0 4px 12px;
   background-color: transparent;
   display: flex;
-  min-width: 64px;
+  min-width: ${({ minWidth }) => minWidth || "64px"};
   width: 100%;
   border: none;
   box-sizing: border-box;
@@ -3128,7 +3140,12 @@ var Input = React3.forwardRef(
       width,
       borderRadius,
       customNumberInputHeight,
-      onKeyDown
+      onKeyDown,
+      sizeVar = "M",
+      rightSource,
+      minWidth,
+      gap,
+      initIsFocused
     } = _b, rest = __objRest(_b, [
       "onFocus",
       "onBlur",
@@ -3146,10 +3163,15 @@ var Input = React3.forwardRef(
       "width",
       "borderRadius",
       "customNumberInputHeight",
-      "onKeyDown"
+      "onKeyDown",
+      "sizeVar",
+      "rightSource",
+      "minWidth",
+      "gap",
+      "initIsFocused"
     ]);
     const [text, setText] = React3.useState("");
-    const [isFocused, setIsFocused] = React3.useState(false);
+    const [isFocused, setIsFocused] = React3.useState(Boolean(initIsFocused));
     const [type, setType] = React3.useState(initialType);
     const [isHovered, setIsHovered] = React3.useState(false);
     const uniqueId = React3.useId();
@@ -3236,6 +3258,13 @@ var Input = React3.forwardRef(
     React3.useEffect(() => {
       setType(initialType);
     }, [initialType]);
+    const height = sizeVar === "M" ? "40px" : "32px";
+    React3.useEffect(() => {
+      if (typeof initIsFocused === "undefined") {
+        return;
+      }
+      setIsFocused(initIsFocused);
+    }, [initIsFocused]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       InputWrapper,
       {
@@ -3248,11 +3277,12 @@ var Input = React3.forwardRef(
         onMouseLeave: handleOnMouseLeave,
         type,
         width,
-        height: "40px",
-        maxHeight: "40px",
+        height,
+        maxHeight: height,
         "data-shoplflow": "input",
         borderRadius,
         customNumberInputHeight,
+        gap,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             StyledInput,
@@ -3267,6 +3297,7 @@ var Input = React3.forwardRef(
               type,
               id: uniqueId,
               ref: refs,
+              minWidth,
               className: "body1_400" + (className ? ` ${className}` : "")
             }, rest)
           ),
@@ -3280,13 +3311,20 @@ var Input = React3.forwardRef(
                 iconSource: assetFunction(type === "password" ? "ViewOffIcon" : "ViewOnIcon")
               }
             ) })
-          ] })
+          ] }),
+          rightSource && rightSource
         ]
       }
     );
   }
 );
 exports.Input = Input;
+
+// src/components/Inputs/Input/Input.types.ts
+exports.InputSizeVariants = {
+  S: "S",
+  M: "M"
+};
 var StyledInputButton = styled6__default.default.div`
   display: flex;
   flex-direction: row;
@@ -3656,7 +3694,7 @@ var Tooltip = (_a) => {
     trigger,
     popper,
     placement = "bottom-start",
-    offset: offset3 = 4,
+    offset: offset4 = 4,
     triggerRef,
     portalRef
   } = _b, popperProps = __objRest(_b, [
@@ -3682,7 +3720,7 @@ var Tooltip = (_a) => {
     }
     onOpenChange == null ? void 0 : onOpenChange(false);
   }, [open, onOpenChange]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(exports.Popper, __spreadProps(__spreadValues({ offset: offset3, placement, middlewares: [core.flip(), core.shift({ padding: 5 })] }, popperProps), { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(exports.Popper, __spreadProps(__spreadValues({ offset: offset4, placement, middlewares: [core.flip(), core.shift({ padding: 5 })] }, popperProps), { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       exports.Popper.Trigger,
       {
@@ -5778,6 +5816,176 @@ var WeekDatepicker = ({
   ] });
 };
 exports.WeekDatepicker = WeekDatepicker;
+var StyledNumberCombobox = styled6__default.default.div``;
+var IconWrapper2 = styled6__default.default(framerMotion.motion.div)`
+  display: flex;
+  width: fit-content;
+  height: fit-content;
+`;
+var NumberCombobox = (_a) => {
+  var _b = _a, {
+    disabled,
+    onSelect,
+    onChange,
+    value,
+    width = "90px",
+    onBlur,
+    items,
+    isError,
+    sizeVar = "M",
+    placeholder = "Enter",
+    maxLength,
+    className
+  } = _b, rest = __objRest(_b, [
+    "disabled",
+    "onSelect",
+    "onChange",
+    "value",
+    "width",
+    "onBlur",
+    "items",
+    "isError",
+    "sizeVar",
+    "placeholder",
+    "maxLength",
+    "className"
+  ]);
+  const selector = React3.useRef(`shoplflow-${crypto.randomUUID()}-number-combobox`).current;
+  const inputRef = React3.useRef(null);
+  const [isOpen, setIsOpen] = utils.useOutsideClick({
+    selector: `.${selector}`,
+    useOutsideScroll: true
+  });
+  let _className = `${selector}`;
+  if (className) {
+    _className += ` ${className}`;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledNumberCombobox, { "data-shoplflow": "NumberCombobox", color: "shopl300", className: _className, children: /* @__PURE__ */ jsxRuntime.jsxs(exports.Popper, { middlewares: [core.offset(4)], children: [
+    /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Trigger, { isOpen, className: _className, children: /* @__PURE__ */ jsxRuntime.jsx(
+      exports.Input,
+      __spreadValues({
+        sizeVar,
+        width,
+        ref: inputRef,
+        type: "number",
+        style: { textAlign: "left", paddingRight: "0px" },
+        className: _className,
+        gap: "4px",
+        initIsFocused: isOpen,
+        value,
+        onChange,
+        onFocus: () => {
+          setIsOpen(true);
+        },
+        autoCapitalize: "off",
+        customNumberInputHeight: sizeVar === "S" ? "32px" : "40px",
+        isError,
+        minWidth: `calc(100% -32px)`,
+        autoComplete: "off",
+        autoCorrect: "off",
+        placeholder,
+        disabled,
+        onKeyDown: (event) => {
+          var _a2;
+          if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+            event.preventDefault();
+            return;
+          }
+          setIsOpen(true);
+          if (event.key === "Enter") {
+            const currentValue = event.currentTarget.value;
+            onSelect == null ? void 0 : onSelect(currentValue);
+            setIsOpen(false);
+            (_a2 = inputRef.current) == null ? void 0 : _a2.blur();
+            return;
+          }
+        },
+        maxLength,
+        onBlur: (event) => {
+          const target = event.target;
+          const isNested = Boolean(target.closest(`.${_className}`));
+          if (isNested) {
+            return;
+          }
+          onBlur == null ? void 0 : onBlur(event);
+        },
+        rightSource: /* @__PURE__ */ jsxRuntime.jsx(exports.StackContainer.Horizontal, { padding: "0px 4px 0px 0px", children: /* @__PURE__ */ jsxRuntime.jsx(
+          exports.IconButton,
+          {
+            sizeVar: "XS",
+            styleVar: "GHOST",
+            className: _className,
+            onClick: () => {
+              if (disabled) {
+                return;
+              }
+              setIsOpen((prev) => !prev);
+            },
+            style: { cursor: disabled ? "not-allowed" : "cursor" },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              IconWrapper2,
+              {
+                animate: {
+                  rotate: isOpen ? 180 : 0,
+                  transition: {
+                    duration: 0.2
+                  }
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  exports.Icon,
+                  {
+                    iconSource: ShoplAssets.UpArrowSolidXsmallIcon,
+                    sizeVar: "XS",
+                    color: "neutral400",
+                    style: { cursor: disabled ? "not-allowed" : "cursor" }
+                  }
+                )
+              }
+            )
+          }
+        ) })
+      }, rest)
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      SimpleBarReact__default.default,
+      {
+        className: _className,
+        style: {
+          height: "128px",
+          maxHeight: "128px",
+          width,
+          padding: "4px",
+          filter: "drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.12))",
+          boxShadow: "0px 8px 16px rgba(0, 0, 0, 0.12)",
+          borderRadius: "8px",
+          backgroundColor: exports.colorTokens.neutral0
+        },
+        children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          exports.Menu,
+          {
+            isSelected: value === item.value,
+            onClick: () => {
+              if (disabled) {
+                return;
+              }
+              onSelect == null ? void 0 : onSelect(item.value);
+              setIsOpen(false);
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", children: item.label })
+          },
+          item.value
+        ))
+      }
+    ) })
+  ] }) });
+};
+exports.NumberCombobox = NumberCombobox;
+
+// src/components/Comboboxs/NumberCombobox/NumberCombobox.types.ts
+exports.NumberComboboxSizeVariants = {
+  S: "S",
+  M: "M"
+};
 var SpaceMarginWrapper = styled6__default.default(framerMotion.motion.div)`
   position: relative;
   display: flex;