@shoplflow/base 0.24.14 → 0.24.16

package/dist/index.cjs

@@ -644,6 +644,16 @@ var getModalBodyTopBottomPadding = (isIncludeHeader) => {
     padding-bottom: 24px;
   `;
 };
+var checkMaxHeight = (height, viewport) => {
+  const topBottomMargin = 64;
+  if (height > 1200) {
+    return 1200 - topBottomMargin;
+  }
+  if (height > viewport) {
+    return viewport - topBottomMargin;
+  }
+  return height - topBottomMargin;
+};
 var Container = styled5__default.default.div`
   display: flex;
   flex-direction: column;
@@ -652,7 +662,7 @@ var Container = styled5__default.default.div`
   box-shadow: ${exports.boxShadowTokens.dropShadow};
   overflow: hidden;
   flex-grow: 1;
-  height: ${({ height }) => height ? `${height}px` : "initial"};
+  height: ${({ height, viewport }) => height ? `${checkMaxHeight(height, viewport)}px` : "initial"};
   min-height: 180px;
   max-height: 1200px;
   width: ${({ sizeVar }) => getModalWidthFromSize(sizeVar)}px;
@@ -674,8 +684,9 @@ var BodyContainer = styled5__default.default.div`
   overflow: hidden;
   flex-direction: column;
   background: ${exports.colorTokens.neutral0};
-  min-height: 112px;
-  min-height: ${({ height }) => height};
+  box-sizing: border-box;
+  min-height: ${({ minHeight }) => minHeight};
+  max-height: ${({ maxHeight }) => maxHeight}px;
   flex: 1;
   ${({ isIncludeHeader }) => getModalBodyTopBottomPadding(isIncludeHeader)}
 `;
@@ -685,7 +696,7 @@ var ModalBodyContainerInner = styled5__default.default.div`
   flex-direction: column;
   flex-grow: 1;
   //스크롤 생성시 하단 padding 적용하기 위한 설정
-  height: calc(100%);
+  height: 100%;
   box-sizing: border-box;
 `;
 var ModalBodyContent = styled5__default.default.div`
@@ -720,9 +731,23 @@ exports.ModalSize = {
 };
 exports.MODAL_HEADER_KEY = Symbol("MODAL_HEADER");
 exports.MODAL_FOOTER_KEY = Symbol("MODAL_FOOTER");
+var useViewportSizeObserver = () => {
+  const [size2, setSize] = React2.useState({ width: window.innerWidth, height: window.innerHeight });
+  React2.useEffect(() => {
+    const handleResize = () => {
+      setSize({ width: window.innerWidth, height: window.innerHeight });
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return size2;
+};
 var ModalContainer = (_a) => {
-  var _b = _a, { children, outsideClick = utils.noop } = _b, rest = __objRest(_b, ["children", "outsideClick"]);
+  var _b = _a, { children, height, outsideClick = utils.noop } = _b, rest = __objRest(_b, ["children", "height", "outsideClick"]);
   const ref = utils.useParentElementClick(outsideClick);
+  const { height: windowHeight } = useViewportSizeObserver();
+  const topBottomMargin = 64;
+  const heightWidthMargin = height ? height + topBottomMargin : void 0;
   const childrenArray = React2__namespace.default.Children.toArray(children);
   const findHeader = childrenArray.find((child) => {
     if (!React2__namespace.default.isValidElement(child)) {
@@ -748,10 +773,10 @@ var ModalContainer = (_a) => {
       isIncludeHeader: Boolean(findHeader),
       isIncludeFooter: Boolean(findFooter),
       sizeVar: rest.sizeVar,
-      height: rest.height
+      height: heightWidthMargin
     });
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Container, __spreadProps(__spreadValues({ ref }, rest), { "data-shoplflow": "Modal", children: addPropInChildren }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Container, __spreadProps(__spreadValues({ ref }, rest), { height: heightWidthMargin, viewport: windowHeight, "data-shoplflow": "Modal", children: addPropInChildren }));
 };
 var ModalContainer_default = ModalContainer;
 var ModalFooter = ({ children }) => {
@@ -771,9 +796,7 @@ var ModalBody = ({
   sizeVar,
   height: modalContainerHeight
 }) => {
-  const { height: windowHeight } = utils.useResizeObserver(document.body, {
-    trackHeight: true
-  });
+  const { height: windowHeight } = useViewportSizeObserver();
   const headerHeight = 64;
   const footerHeight = 64;
   const topBottomMargin = 64;
@@ -790,21 +813,44 @@ var ModalBody = ({
   const headerFooterHeight = React2.useMemo(() => getHeaderFooterHeight(), [getHeaderFooterHeight]);
   const setAutoHeightMin = () => {
     if (modalContainerHeight) {
-      return modalContainerHeight - headerFooterHeight;
+      if (modalContainerHeight <= 1200) {
+        if (windowHeight < modalContainerHeight) {
+          return windowHeight - topBottomMargin - headerFooterHeight;
+        }
+        return 1200 - topBottomMargin - headerFooterHeight;
+      }
+      return modalContainerHeight - topBottomMargin - headerFooterHeight;
     } else {
       return "100%";
     }
   };
-  const heightUnderMaxHeight = windowHeight - topBottomMargin - headerFooterHeight;
-  const heightOverMaxHeight = 1200 - topBottomMargin - headerFooterHeight;
-  return /* @__PURE__ */ jsxRuntime.jsx(BodyContainer, { isIncludeHeader, height: setAutoHeightMin(), children: /* @__PURE__ */ jsxRuntime.jsx(
+  const setAutoHeightMax = () => {
+    if (modalContainerHeight) {
+      if (modalContainerHeight > 1200) {
+        return 1200 - topBottomMargin - headerFooterHeight;
+      }
+      if (modalContainerHeight <= 1200) {
+        if (windowHeight < modalContainerHeight) {
+          return windowHeight - topBottomMargin - headerFooterHeight;
+        }
+        return modalContainerHeight - topBottomMargin - headerFooterHeight;
+      }
+    }
+    if (!modalContainerHeight) {
+      const heightUnderMaxHeight = windowHeight - topBottomMargin - headerFooterHeight;
+      const heightOverMaxHeight = 1200 - topBottomMargin - headerFooterHeight;
+      return windowHeight > 1200 ? heightOverMaxHeight : heightUnderMaxHeight;
+    }
+    return "100%";
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(BodyContainer, { isIncludeHeader, minHeight: setAutoHeightMin(), maxHeight: setAutoHeightMax(), children: /* @__PURE__ */ jsxRuntime.jsx(
     exports.ScrollArea,
     {
       id: `scrollbar`,
       universal: true,
       autoHeight: !modalContainerHeight,
       autoHeightMin: setAutoHeightMin(),
-      autoHeightMax: windowHeight > 1200 ? heightOverMaxHeight : heightUnderMaxHeight,
+      autoHeightMax: setAutoHeightMax(),
       style: {
         height: "100%",
         overflow: "hidden"
@@ -888,12 +934,13 @@ var ModalProvider = ({ children }) => {
   };
   const dispatch = React2.useMemo(() => ({ addModal, removeModal }), []);
   React2.useEffect(() => {
-    if (openedModals.length === 1) {
-      document.body.style.cssText = "overflow:hidden";
-      return () => {
-        document.body.style.cssText = "overflow:unset";
-      };
+    if (openedModals.length !== 1) {
+      return;
     }
+    document.body.style.cssText = "overflow:hidden";
+    return () => {
+      document.body.style.cssText = "overflow:unset";
+    };
   }, [openedModals.length]);
   return /* @__PURE__ */ jsxRuntime.jsx(exports.ModalContext.Provider, { value: openedModals, children: /* @__PURE__ */ jsxRuntime.jsx(exports.ModalHandlerContext.Provider, { value: dispatch, children }) });
 };
@@ -1146,19 +1193,19 @@ var getNextColor = (color, step = 1) => {
   };
   const sortColorToken = findColorToken.sort((a, b) => extractNumbers(a) - extractNumbers(b));
   const currentIndex = sortColorToken.indexOf(color);
-  let newIndex = currentIndex + step;
-  let potentialToken = sortColorToken[newIndex];
-  while (potentialToken.endsWith("_5") || potentialToken.includes("50")) {
+  let newIndex = currentIndex;
+  let stepCount = 0;
+  while (stepCount < Math.abs(step)) {
     newIndex += Math.sign(step);
-    if (newIndex < 0) {
-      potentialToken = sortColorToken[0];
+    if (newIndex < 0 || newIndex >= sortColorToken.length) {
+      break;
     }
-    if (newIndex >= sortColorToken.length) {
-      potentialToken = sortColorToken[sortColorToken.length - 1];
+    if (!sortColorToken[newIndex].endsWith("_5") && !sortColorToken[newIndex].includes("50")) {
+      stepCount++;
     }
-    potentialToken = sortColorToken[newIndex];
   }
-  return potentialToken;
+  newIndex = Math.max(0, Math.min(newIndex, sortColorToken.length - 1));
+  return sortColorToken[newIndex];
 };
 
 // src/components/Chips/ChipButton/ChipButton.styled.ts
@@ -1558,7 +1605,9 @@ var StyledCallout = styled5__default.default.div`
 `;
 var StyledCalloutIcon = styled5__default.default.svg`
   display: flex;
+  height: 20px;
   min-height: 20px;
+  width: 20px;
   min-width: 20px;
 `;
 styled5__default.default.div`
@@ -1908,7 +1957,7 @@ var DropdownButton = React2.forwardRef(
               transition: {
                 duration: 0.2
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.DownArrowSolidXsmallIcon, color: "neutral400", sizeVar: "S" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.DownArrowSolidXsmallIcon, color: "neutral400", sizeVar: "XS" })
             }
           )
         ] }))