@shoplflow/base 0.14.0 → 0.15.1

package/dist/index.cjs

@@ -6,10 +6,10 @@ var framerMotion = require('framer-motion');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom$1 = require('react-dom');
 var utils = require('@shoplflow/utils');
-var react = require('@emotion/react');
+var react$1 = require('@emotion/react');
 var Scrollbars = require('react-custom-scrollbars-2');
+var react = require('@floating-ui/react');
 var reactDom = require('@floating-ui/react-dom');
-var react$1 = require('@floating-ui/react');
 var ShoplAssets = require('@shoplflow/shopl-assets');
 var HadaAssets = require('@shoplflow/hada-assets');
 
@@ -506,7 +506,7 @@ exports.MotionStack.Vertical = framerMotion.motion(Stack.Vertical);
 exports.MotionStack.Horizontal = framerMotion.motion(Stack.Horizontal);
 exports.Stack = Stack;
 var setEllipsis = (maxLines) => {
-  return react.css`
+  return react$1.css`
     display: -webkit-box;
     line-clamp: ${maxLines};
     -webkit-line-clamp: ${maxLines};
@@ -522,13 +522,13 @@ var StyledText = styled5__default.default.span`
   ${({ lineClamp }) => lineClamp && setEllipsis(lineClamp)};
   text-align: ${({ textAlign }) => textAlign && textAlign};
   white-space: ${({ whiteSpace }) => whiteSpace && whiteSpace};
-  ${({ textDecorations }) => textDecorations && react.css`
+  ${({ textDecorations }) => textDecorations && react$1.css`
       text-decoration: ${textDecorations};
     `};
-  ${({ opacity }) => opacity && react.css`
+  ${({ opacity }) => opacity && react$1.css`
       opacity: ${opacity};
     `}
-  ${({ wordBreak }) => wordBreak && react.css`
+  ${({ wordBreak }) => wordBreak && react$1.css`
       word-break: ${wordBreak};
     `};
 `;
@@ -578,8 +578,8 @@ var MODAL_SIZE_M = 640;
 var MODAL_SIZE_L = 768;
 var MODAL_SIZE_XL = 1040;
 var MODAL_SIZE_XXL = 1280;
-var getModalWidthFromSize = (size) => {
-  switch (size) {
+var getModalWidthFromSize = (size2) => {
+  switch (size2) {
     case "XXS":
       return MODAL_SIZE_XXS;
     case "XS":
@@ -600,12 +600,12 @@ var getModalWidthFromSize = (size) => {
 };
 var getModalBodyTopBottomPadding = (isIncludeHeader) => {
   if (isIncludeHeader) {
-    return react.css`
+    return react$1.css`
       padding-top: 16px;
       padding-bottom: 24px;
     `;
   }
-  return react.css`
+  return react$1.css`
     padding-top: 24px;
     padding-bottom: 24px;
   `;
@@ -910,7 +910,7 @@ var getDisabledStyle = (disabled) => {
   if (!disabled) {
     return;
   }
-  return react.css`
+  return react$1.css`
     opacity: 50%;
     cursor: not-allowed !important;
   `;
@@ -927,7 +927,7 @@ var getLineTypographyBySizeVar = (sizeVar) => {
       return "body2_400";
   }
 };
-var solidStyle = ({ isSelected, color, radius }) => react.css`
+var solidStyle = ({ isSelected, color, radius }) => react$1.css`
   padding: 7px 12px;
   gap: 4px;
   background: ${exports.colorTokens.neutral150};
@@ -939,10 +939,10 @@ var solidStyle = ({ isSelected, color, radius }) => react.css`
     background: ${exports.colorTokens.neutral200};
   }
 
-  ${radius && react.css`
+  ${radius && react$1.css`
     border-radius: ${exports.borderRadiusTokens.borderRadius16};
   `};
-  ${isSelected && react.css`
+  ${isSelected && react$1.css`
     background: ${exports.colorTokens[color]};
     & > span {
       color: ${exports.colorTokens["neutral0"]};
@@ -1037,7 +1037,7 @@ var getLineTypographyBySizeVar2 = (sizeVar) => {
       return "body3_400";
   }
 };
-var lineStyle = ({ color }) => react.css`
+var lineStyle = ({ color }) => react$1.css`
   background: ${exports.colorTokens.neutral0};
   border: 1px solid ${exports.colorTokens[color]};
   border-radius: ${exports.borderRadiusTokens.borderRadius20};
@@ -1051,15 +1051,15 @@ var lineStyle = ({ color }) => react.css`
 var getStyleBySizeVar = (sizeVar) => {
   switch (sizeVar) {
     case "XS":
-      return react.css`
+      return react$1.css`
         padding: 4px 8px;
       `;
     case "S":
-      return react.css`
+      return react$1.css`
         padding: 7px 12px;
       `;
     default:
-      return react.css`
+      return react$1.css`
         padding: 7px 12px;
       `;
   }
@@ -1123,7 +1123,7 @@ exports.ChipButton = ChipButton;
 var getStyleByStyleVar = (styleVar, color, disabled) => {
   switch (styleVar) {
     case "PRIMARY":
-      return react.css`
+      return react$1.css`
         border: 1px solid ${exports.colorTokens.primary400};
         background-color: ${exports.colorTokens.primary300};
         :hover {
@@ -1131,7 +1131,7 @@ var getStyleByStyleVar = (styleVar, color, disabled) => {
         }
       `;
     case "SECONDARY":
-      return react.css`
+      return react$1.css`
         border: 1px solid ${exports.colorTokens.neutral350};
         background-color: ${exports.colorTokens.neutral0};
         :hover {
@@ -1142,7 +1142,7 @@ var getStyleByStyleVar = (styleVar, color, disabled) => {
       if (!color) {
         throw new Error("Button\uC758 SOLID \uC18D\uC131\uC740 color\uB97C \uD544\uC218\uB85C \uBC1B\uC2B5\uB2C8\uB2E4.");
       }
-      return react.css`
+      return react$1.css`
         border: 1px solid ${exports.colorTokens[getNextColor(color)]};
         background-color: ${exports.colorTokens[color]};
         :hover {
@@ -1150,7 +1150,7 @@ var getStyleByStyleVar = (styleVar, color, disabled) => {
         }
       `;
     case "GHOST":
-      return react.css`
+      return react$1.css`
         border: 1px solid transparent;
         background-color: transparent;
         :hover {
@@ -1158,7 +1158,7 @@ var getStyleByStyleVar = (styleVar, color, disabled) => {
         }
       `;
     default:
-      return react.css`
+      return react$1.css`
         border: 1px solid ${exports.colorTokens.primary400};
         background-color: ${exports.colorTokens.primary300};
       `;
@@ -1167,17 +1167,17 @@ var getStyleByStyleVar = (styleVar, color, disabled) => {
 var getStyleBySizeVar2 = (sizeVar) => {
   switch (sizeVar) {
     case "M":
-      return react.css`
+      return react$1.css`
         min-width: 72px;
         min-height: 40px;
       `;
     case "S":
-      return react.css`
+      return react$1.css`
         min-width: 54px;
         min-height: 32px;
       `;
     default:
-      return react.css`
+      return react$1.css`
         min-width: 72px;
         min-height: 40px;
       `;
@@ -1264,21 +1264,21 @@ exports.buttonStyleVar = {
 var getWidthAndHeightFromSizeVar = (sizeVar) => {
   switch (sizeVar) {
     case "M":
-      return react.css`
+      return react$1.css`
         width: 40px;
         min-width: 40px;
         height: 40px;
         min-height: 40px;
       `;
     case "S":
-      return react.css`
+      return react$1.css`
         width: 32px;
         min-width: 32px;
         height: 32px;
         min-height: 32px;
       `;
     default:
-      return react.css`
+      return react$1.css`
         width: 40px;
         min-width: 40px;
         height: 40px;
@@ -1289,7 +1289,7 @@ var getWidthAndHeightFromSizeVar = (sizeVar) => {
 var getStyleByStyleVar2 = (styleVar, color) => {
   switch (styleVar) {
     case "PRIMARY":
-      return react.css`
+      return react$1.css`
         background: ${exports.colorTokens.primary300};
         border: 1px solid ${exports.colorTokens.primary400};
         &:hover {
@@ -1297,7 +1297,7 @@ var getStyleByStyleVar2 = (styleVar, color) => {
         }
       `;
     case "SECONDARY":
-      return react.css`
+      return react$1.css`
         background: ${exports.colorTokens.neutral0};
         border: 1px solid ${exports.colorTokens.neutral350};
         &:hover {
@@ -1308,7 +1308,7 @@ var getStyleByStyleVar2 = (styleVar, color) => {
       if (!color) {
         throw new Error("IconButton\uC758 SOLID \uC18D\uC131\uC740 color\uB97C \uD544\uC218\uB85C \uBC1B\uC2B5\uB2C8\uB2E4.");
       }
-      return react.css`
+      return react$1.css`
         border: 1px solid ${exports.colorTokens[getNextColor(color)]};
         background: ${exports.colorTokens[color]};
         &:hover {
@@ -1316,14 +1316,15 @@ var getStyleByStyleVar2 = (styleVar, color) => {
         }
       `;
     case "GHOST":
-      return react.css`
+      return react$1.css`
         border: 1px solid transparent;
+        background: transparent;
         &:hover {
           background: ${exports.colorTokens.neutral400_5};
         }
       `;
     default:
-      return react.css`
+      return react$1.css`
         border: 1px solid ${exports.colorTokens.neutral200};
         &:hover {
           background: ${exports.colorTokens.neutral100};
@@ -1378,7 +1379,7 @@ exports.iconButtonStyleVar = {
   SOLID: "SOLID",
   GHOST: "GHOST"
 };
-var informationStyle = react.css`
+var informationStyle = react$1.css`
   background: ${exports.colorTokens.neutral100};
   & > span {
     color: ${exports.colorTokens.neutral600};
@@ -1387,7 +1388,7 @@ var informationStyle = react.css`
     fill: ${exports.colorTokens.neutral600};
   }
 `;
-var alertStyle = react.css`
+var alertStyle = react$1.css`
   background: ${exports.colorTokens.red100};
   & > span {
     align-self: center;
@@ -1436,10 +1437,8 @@ exports.CalloutTypes = {
   ALERT: "ALERT"
 };
 exports.StyledPopper = styled5__default.default.div`
-  display: flex;
-  flex-direction: row;
   width: ${({ width }) => width != null ? width : "fit-content"};
-  height: ${({ height }) => height != null ? height : "fit-content"};
+  height: ${({ height }) => height && height};
 `;
 var PopperContext = React3.createContext(null);
 var usePopper = () => {
@@ -1485,10 +1484,10 @@ var Popper = ({
   const { refs, floatingStyles } = reactDom.useFloating({
     strategy,
     placement,
-    whileElementsMounted: react$1.autoUpdate,
+    whileElementsMounted: react.autoUpdate,
     middleware: [
-      react$1.offset(initialOffset),
-      initialAutoPlacement && react$1.autoPlacement(__spreadValues({
+      react.offset(initialOffset),
+      initialAutoPlacement && react.autoPlacement(__spreadValues({
         crossAxis: false
       }, initialAutoPlacement)),
       ...middlewares != null ? middlewares : []
@@ -1512,7 +1511,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, { id: "popper-portal-key", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { id: "popper-portal-key", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
       framerMotion.motion.div,
       {
         initial: animation.initial,
@@ -1528,8 +1527,8 @@ exports.PopperPortal = React3.forwardRef(
 Popper.Trigger = exports.PopperTrigger;
 Popper.Portal = exports.PopperPortal;
 exports.Popper = Popper;
-exports.getDropdownHeightBySizeVar = (size) => {
-  switch (size) {
+exports.getDropdownHeightBySizeVar = (size2) => {
+  switch (size2) {
     case "M":
       return "40px";
     case "S":
@@ -1538,8 +1537,8 @@ exports.getDropdownHeightBySizeVar = (size) => {
       return "40px";
   }
 };
-exports.getDropdownFontSizeBySizeVar = (size) => {
-  switch (size) {
+exports.getDropdownFontSizeBySizeVar = (size2) => {
+  switch (size2) {
     case "M":
       return "body1_400";
     case "S":
@@ -1548,40 +1547,40 @@ exports.getDropdownFontSizeBySizeVar = (size) => {
       return "body1_400";
   }
 };
-exports.getDropdownStyleBySizeVar = (size) => {
-  switch (size) {
+exports.getDropdownStyleBySizeVar = (size2) => {
+  switch (size2) {
     case "M":
-      return react.css`
+      return react$1.css`
         padding: 4px 4px 4px 12px;
       `;
     case "S":
-      return react.css`
+      return react$1.css`
         padding: 4px 4px 4px 8px;
       `;
     default:
-      return react.css`
+      return react$1.css`
         padding: 4px 4px 4px 12px;
       `;
   }
 };
-exports.getDropdownIconSizeBySizeVar = (size) => {
-  switch (size) {
+exports.getDropdownIconSizeBySizeVar = (size2) => {
+  switch (size2) {
     case "S":
-      return react.css`
+      return react$1.css`
         height: 24px;
         width: 24px;
         min-width: 24px;
         min-height: 24px;
       `;
     case "M":
-      return react.css`
+      return react$1.css`
         height: 32px;
         width: 32px;
         min-width: 32px;
         min-height: 32px;
       `;
     default:
-      return react.css`
+      return react$1.css`
         height: 32px;
         width: 32px;
         min-width: 32px;
@@ -1590,10 +1589,7 @@ exports.getDropdownIconSizeBySizeVar = (size) => {
   }
 };
 exports.StyledDropdown = styled5__default.default.div`
-  display: flex;
-  width: fit-content;
-  height: fit-content;
-  flex-direction: row;
+  width: ${({ width }) => width};
 `;
 exports.StyledDropdownContent = styled5__default.default.div`
   display: flex;
@@ -1614,7 +1610,7 @@ exports.StyledDropdownButton = styled5__default.default.button`
   gap: 8px;
   cursor: pointer;
   ${({ sizeVar }) => sizeVar && exports.getDropdownStyleBySizeVar(sizeVar)};
-  ${({ disabled }) => disabled && react.css`
+  ${({ disabled }) => disabled && react$1.css`
       cursor: not-allowed;
     `}
 `;
@@ -1661,7 +1657,10 @@ var InputWrapper = styled5__default.default.label`
   border-radius: 6px;
   background-color: ${exports.colorTokens.neutral0};
   overflow: hidden;
-  ${({ disabled }) => getDisabledStyle(disabled)};
+  ${({ disabled }) => disabled && react$1.css`
+      background-color: ${exports.colorTokens.neutral100};
+      cursor: not-allowed;
+    `};
 `;
 
 // src/components/Icon/Icon.types.ts
@@ -1674,8 +1673,8 @@ exports.IconSizeVariants = {
 };
 
 // src/components/Icon/Icon.styled.ts
-var getIconSize = (size) => {
-  switch (size) {
+var getIconSize = (size2) => {
+  switch (size2) {
     case exports.IconSizeVariants.XS:
       return "12px";
     case exports.IconSizeVariants.S:
@@ -1771,32 +1770,37 @@ var DropdownButton = React3.forwardRef(
     );
   }
 );
-var DropdownContent = React3.forwardRef(
-  ({ children, width: initialWidth, onClick, type = "FIXED" }, ref) => {
-    const { width, setIsOpen, option } = useDropdown();
-    const isFillType = type === "FILL";
-    const contentWidth = isFillType ? `${width}px` : initialWidth;
-    const returnCallbackByOption = () => {
-      if (option === "OUTSIDE_CLICK") {
-        return () => setIsOpen(false);
-      }
-      if (option === "CLICK") {
-        return () => setIsOpen(false);
-      }
-      return utils.noop;
-    };
-    const handleClick = (e) => {
-      onClick && onClick(e);
-      if (option === "CLICK") {
-        setIsOpen(false);
-      }
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(utils.OutSideClick, { outsideClick: returnCallbackByOption(), children: /* @__PURE__ */ jsxRuntime.jsx(exports.StyledDropdownContent, { ref, width: contentWidth, onClick: handleClick, children }) });
-  }
-);
-var Dropdown = ({ isOpen: initialIsOpen, trigger, content, option = "OUTSIDE_CLICK" }) => {
+var DropdownContent = (_a) => {
+  var _b = _a, { children, width: initialWidth, type, onClick } = _b, rest = __objRest(_b, ["children", "width", "type", "onClick"]);
+  const { width, setIsOpen, option } = useDropdown();
+  const isFillType = type === "FILL";
+  const contentWidth = isFillType ? `${width}px` : initialWidth;
+  const returnCallbackByOption = () => {
+    if (option === "OUTSIDE_CLICK") {
+      return () => setIsOpen(false);
+    }
+    if (option === "CLICK") {
+      return () => setIsOpen(false);
+    }
+    return utils.noop;
+  };
+  const handleClick = (e) => {
+    onClick && onClick(e);
+    if (option === "CLICK") {
+      setIsOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(utils.OutSideClick, { outsideClick: returnCallbackByOption(), children: /* @__PURE__ */ jsxRuntime.jsx(exports.StyledDropdownContent, __spreadProps(__spreadValues({ width: contentWidth, onClick: handleClick }, rest), { children })) });
+};
+var Dropdown = ({
+  isOpen: initialIsOpen = false,
+  trigger,
+  popper,
+  option = "CLICK",
+  width = "100%"
+}) => {
   const [triggerRef, setTriggerRef] = React3.useState(null);
-  const [size, setSize] = React3.useState({ width: 0, height: 0 });
+  const [size2, setSize] = React3.useState({ width: 0, height: 0 });
   const [isOpen, setIsOpen] = React3.useState(false);
   React3.useEffect(() => {
     if (triggerRef) {
@@ -1812,15 +1816,16 @@ var Dropdown = ({ isOpen: initialIsOpen, trigger, content, option = "OUTSIDE_CLI
     }
     setIsOpen(initialIsOpen);
   }, [initialIsOpen]);
-  return /* @__PURE__ */ jsxRuntime.jsx(exports.StyledDropdown, { "data-shoplflow": "Dropdown", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: __spreadProps(__spreadValues({}, size), { isOpen, setIsOpen, option }), children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(exports.StyledDropdown, { "data-shoplflow": "Dropdown", width, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: __spreadProps(__spreadValues({}, size2), { isOpen, setIsOpen, option }), children: /* @__PURE__ */ jsxRuntime.jsxs(
     exports.Popper,
     {
+      offset: 4,
       autoPlacement: {
         allowedPlacements: ["bottom-start", "top-start"]
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Trigger, { ref: setTriggerRef, isOpen, children: trigger }),
-        /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Portal, { children: content })
+        /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Trigger, { ref: setTriggerRef, isOpen, width, children: trigger }),
+        /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Portal, { children: popper })
       ]
     }
   ) }) });
@@ -2028,35 +2033,24 @@ exports.StyledInputButton = styled5__default.default.button`
   gap: 4px;
   padding: 4px 4px 4px 12px;
   cursor: pointer;
-  ${({ disabled }) => disabled && react.css`
+  ${({ disabled }) => disabled && react$1.css`
+      background-color: ${exports.colorTokens.neutral100};
       cursor: not-allowed;
     `}
 `;
+exports.StyledInputButtonContent = styled5__default.default.input`
+  display: flex;
+  width: 100%;
+  border: none;
+  box-sizing: border-box;
+  caret-color: transparent;
+  &::placeholder {
+    color: ${exports.colorTokens.neutral350};
+  }
+`;
 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"
-    ]);
+    var _b = _a, { value, defaultValue, onChange, onClick, isSelected, disabled = false, rightSource, onClear, width } = _b, rest = __objRest(_b, ["value", "defaultValue", "onChange", "onClick", "isSelected", "disabled", "rightSource", "onClear", "width"]);
     const [text, setText] = React3.useState("");
     const [isHovered, setIsHovered] = React3.useState(false);
     const convertToString = React3.useCallback((value2) => {
@@ -2107,13 +2101,13 @@ var InputButton = React3.forwardRef(
         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 }),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(exports.StyledInputButton, { onClick: handleOnClick, disabled, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(exports.StyledInputButtonContent, __spreadValues({ className: "body1_400", defaultValue: text, ref }, rest)),
           /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { align: "center", children: [
             value && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", onClick: handleOnClear, styleVar: "GHOST", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: assetFunction("DeleteIcon"), color: "neutral600" }) }),
             rightSource
           ] })
-        ] }))
+        ] })
       }
     );
   }
@@ -2301,5 +2295,34 @@ var MinusButton = React3.forwardRef((_a, ref) => {
   ] }) })) });
 });
 exports.MinusButton = MinusButton;
+
+Object.defineProperty(exports, 'arrow', {
+  enumerable: true,
+  get: function () { return react.arrow; }
+});
+Object.defineProperty(exports, 'flip', {
+  enumerable: true,
+  get: function () { return react.flip; }
+});
+Object.defineProperty(exports, 'hide', {
+  enumerable: true,
+  get: function () { return react.hide; }
+});
+Object.defineProperty(exports, 'inline', {
+  enumerable: true,
+  get: function () { return react.inline; }
+});
+Object.defineProperty(exports, 'offset', {
+  enumerable: true,
+  get: function () { return react.offset; }
+});
+Object.defineProperty(exports, 'shift', {
+  enumerable: true,
+  get: function () { return react.shift; }
+});
+Object.defineProperty(exports, 'size', {
+  enumerable: true,
+  get: function () { return react.size; }
+});
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.cjs.map