@shoplflow/base 0.13.3 → 0.13.5

package/dist/index.cjs

@@ -208,9 +208,25 @@ var ModalProvider = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(ModalContext.Provider, { value: openedModals, children: /* @__PURE__ */ jsxRuntime.jsx(ModalHandlerContext.Provider, { value: dispatch, children }) });
 };
 var ModalProvider_default = ModalProvider;
+var PopperPortal = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactDom$1.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        id: "popper-portal-key",
+        style: {
+          zIndex: 20001
+        }
+      }
+    ),
+    document.body
+  ) });
+};
+var PopperPortal_default = PopperPortal;
 var ShoplflowProvider = ({ children, domain = "SHOPL" }) => {
   exports.useDomain(domain);
   return /* @__PURE__ */ jsxRuntime.jsxs(ModalProvider_default, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopperPortal_default, {}),
     /* @__PURE__ */ jsxRuntime.jsx(exports.ModalProvider, {}),
     children
   ] });
@@ -1503,7 +1519,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$1.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { id: "popper-portal-key", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
       framerMotion.motion.div,
       {
         initial: animation.initial,
@@ -1589,6 +1605,7 @@ exports.StyledDropdown = styled5__default.default.div`
 exports.StyledDropdownContent = styled5__default.default.div`
   display: flex;
   flex-direction: column;
+  background: ${exports.colorTokens.neutral0};
   width: ${({ width }) => width != null ? width : "240px"};
   padding: 4px;
   border-radius: 6px;
@@ -1820,7 +1837,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 +1994,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%;