@shoplflow/base 0.13.9 → 0.15.0

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;
   `;
@@ -645,14 +645,21 @@ var BodyContainer = styled5__default.default.div`
   flex: 1;
   ${({ isIncludeHeader }) => getModalBodyTopBottomPadding(isIncludeHeader)}
 `;
+var ModalBodyContainerInner = styled5__default.default.div`
+  display: grid;
+  align-self: stretch;
+  flex-direction: column;
+  flex-grow: 1;
+  //스크롤 생성시 하단 padding 적용하기 위한 설정
+  height: calc(100%);
+  box-sizing: border-box;
+`;
 var ModalBodyContent = styled5__default.default.div`
   display: flex;
   flex-direction: column;
-  width: 100%;
-  max-width: ${({ sizeVar }) => getModalWidthFromSize(sizeVar)}px;
+  height: 100%;
   box-sizing: border-box;
   padding: 0 24px;
-  overflow: hidden;
   background: ${exports.colorTokens.neutral0};
 `;
 var FooterContainer = styled5__default.default.div`
@@ -718,6 +725,11 @@ var ModalFooter = ({ children }) => {
 };
 ModalFooter[exports.MODAL_FOOTER_KEY] = true;
 var ModalFooter_default = ModalFooter;
+var ScrollArea = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Scrollbars__default.default, __spreadProps(__spreadValues({ autoHide: true, autoHideTimeout: 1e3, autoHideDuration: 200 }, rest), { "data-shoplflow": "ScrollArea", children }));
+};
+exports.ScrollArea = ScrollArea;
 var ModalBody = ({
   children,
   isIncludeHeader = false,
@@ -752,20 +764,18 @@ var ModalBody = ({
   const heightUnderMaxHeight = windowHeight - topBottomMargin - headerFooterHeight;
   const heightOverMaxHeight = 1200 - topBottomMargin - headerFooterHeight;
   return /* @__PURE__ */ jsxRuntime.jsx(BodyContainer, { isIncludeHeader, height: setAutoHeightMin(), children: /* @__PURE__ */ jsxRuntime.jsx(
-    Scrollbars__default.default,
+    exports.ScrollArea,
     {
       id: `scrollbar`,
+      universal: true,
       autoHeight: !modalContainerHeight,
       autoHeightMin: setAutoHeightMin(),
       autoHeightMax: windowHeight > 1200 ? heightOverMaxHeight : heightUnderMaxHeight,
-      autoHide: true,
-      autoHideTimeout: 1e3,
-      autoHideDuration: 200,
       style: {
         height: "100%",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContent, { isIncludeHeader, sizeVar, children })
+      children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContainerInner, { children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContent, { isIncludeHeader, sizeVar, children }) })
     }
   ) });
 };
@@ -900,7 +910,7 @@ var getDisabledStyle = (disabled) => {
   if (!disabled) {
     return;
   }
-  return react.css`
+  return react$1.css`
     opacity: 50%;
     cursor: not-allowed !important;
   `;
@@ -917,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};
@@ -929,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"]};
@@ -1027,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};
@@ -1041,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;
       `;
   }
@@ -1113,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 {
@@ -1121,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 {
@@ -1132,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 {
@@ -1140,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 {
@@ -1148,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};
       `;
@@ -1157,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;
       `;
@@ -1254,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;
@@ -1279,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 {
@@ -1287,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 {
@@ -1298,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 {
@@ -1306,14 +1316,14 @@ var getStyleByStyleVar2 = (styleVar, color) => {
         }
       `;
     case "GHOST":
-      return react.css`
+      return react$1.css`
         border: 1px solid 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};
@@ -1368,7 +1378,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};
@@ -1377,7 +1387,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;
@@ -1426,10 +1436,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 = () => {
@@ -1475,10 +1483,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 : []
@@ -1502,7 +1510,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,
@@ -1518,8 +1526,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":
@@ -1528,8 +1536,8 @@ exports.getDropdownHeightBySizeVar = (size) => {
       return "40px";
   }
 };
-exports.getDropdownFontSizeBySizeVar = (size) => {
-  switch (size) {
+exports.getDropdownFontSizeBySizeVar = (size2) => {
+  switch (size2) {
     case "M":
       return "body1_400";
     case "S":
@@ -1538,40 +1546,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;
@@ -1580,10 +1588,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;
@@ -1604,7 +1609,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;
     `}
 `;
@@ -1664,8 +1669,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:
@@ -1761,32 +1766,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) {
@@ -1802,15 +1812,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 })
       ]
     }
   ) }) });
@@ -2018,7 +2029,7 @@ exports.StyledInputButton = styled5__default.default.button`
   gap: 4px;
   padding: 4px 4px 4px 12px;
   cursor: pointer;
-  ${({ disabled }) => disabled && react.css`
+  ${({ disabled }) => disabled && react$1.css`
       cursor: not-allowed;
     `}
 `;
@@ -2291,5 +2302,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