@shoplflow/base 0.13.3 → 0.13.4

package/dist/index.cjs

@@ -1820,7 +1820,7 @@ var assetFunction = (iconName, domainProps) => {
   const ShoplIcon = ShoplAssets__namespace[iconName];
   return domain === "hada" ? HadaIcon : ShoplIcon;
 };
-React3.forwardRef(
+var Input = React3.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       onFocus,
@@ -1977,6 +1977,117 @@ React3.forwardRef(
     );
   }
 );
+exports.Input = Input;
+exports.StyledInputButton = styled5__default.default.button`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 4px;
+  padding: 4px 4px 4px 12px;
+  cursor: pointer;
+  ${({ disabled }) => disabled && react.css`
+      cursor: not-allowed;
+    `}
+`;
+var InputButton = React3.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      value,
+      defaultValue,
+      onChange,
+      onClick,
+      isSelected,
+      disabled = false,
+      rightSource,
+      placeholder,
+      onClear,
+      width
+    } = _b, rest = __objRest(_b, [
+      "value",
+      "defaultValue",
+      "onChange",
+      "onClick",
+      "isSelected",
+      "disabled",
+      "rightSource",
+      "placeholder",
+      "onClear",
+      "width"
+    ]);
+    const [text, setText] = React3.useState("");
+    const [isHovered, setIsHovered] = React3.useState(false);
+    const convertToString = React3.useCallback((value2) => {
+      if (typeof value2 !== "number") {
+        return typeof value2 === "string" ? value2 : value2.join("");
+      }
+      return String(value2);
+    }, []);
+    const handleOnClick = (e) => {
+      if (!disabled) {
+        onClick && onClick(e);
+      }
+    };
+    const handleOnClear = () => {
+      if (!disabled) {
+        onClear && onClear();
+        setText("");
+      }
+    };
+    const handleOnMouseEnter = () => {
+      setIsHovered(true);
+    };
+    const handleOnMouseLeave = () => {
+      setIsHovered(false);
+    };
+    React3.useEffect(() => {
+      if (defaultValue) {
+        const convertString = convertToString(defaultValue);
+        setText(convertString);
+      }
+    }, [convertToString, defaultValue]);
+    React3.useEffect(() => {
+      if (value) {
+        const convertString = convertToString(value);
+        setText(convertString);
+      }
+    }, [convertToString, value]);
+    React3.useEffect(() => {
+      onChange && onChange(convertToString(value != null ? value : ""));
+    }, [convertToString, onChange, value]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      InputWrapper,
+      {
+        onMouseEnter: handleOnMouseEnter,
+        onMouseLeave: handleOnMouseLeave,
+        "data-shoplflow": "InputButton",
+        isHovered,
+        isFocused: isSelected,
+        disabled,
+        width,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(exports.StyledInputButton, __spreadProps(__spreadValues({}, rest), { onClick: handleOnClick, disabled, ref, children: [
+          text && text.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", color: "neutral700", textOverflow: "ellipsis", lineClamp: 1, children: text }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", color: "neutral350", textOverflow: "ellipsis", lineClamp: 1, children: placeholder }),
+          /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { align: "center", children: [
+            value && /* @__PURE__ */ jsxRuntime.jsx(
+              exports.IconButton,
+              {
+                sizeVar: "S",
+                onClick: handleOnClear,
+                styleVar: "GHOST",
+                iconSource: assetFunction("DeleteIcon"),
+                color: "neutral600",
+                disabled
+              }
+            ),
+            rightSource
+          ] })
+        ] }))
+      }
+    );
+  }
+);
+exports.InputButton = InputButton;
 var BottomElementWrapper = styled5__default.default.div`
   display: flex;
   width: 100%;