@shoplflow/base 0.13.9 → 0.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +18 -8
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +89 -1
- package/dist/index.d.ts +89 -1
- package/dist/index.js +19 -9
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -645,14 +645,21 @@ var BodyContainer = styled5__default.default.div`
|
|
|
645
645
|
flex: 1;
|
|
646
646
|
${({ isIncludeHeader }) => getModalBodyTopBottomPadding(isIncludeHeader)}
|
|
647
647
|
`;
|
|
648
|
+
var ModalBodyContainerInner = styled5__default.default.div`
|
|
649
|
+
display: grid;
|
|
650
|
+
align-self: stretch;
|
|
651
|
+
flex-direction: column;
|
|
652
|
+
flex-grow: 1;
|
|
653
|
+
//스크롤 생성시 하단 padding 적용하기 위한 설정
|
|
654
|
+
height: calc(100%);
|
|
655
|
+
box-sizing: border-box;
|
|
656
|
+
`;
|
|
648
657
|
var ModalBodyContent = styled5__default.default.div`
|
|
649
658
|
display: flex;
|
|
650
659
|
flex-direction: column;
|
|
651
|
-
|
|
652
|
-
max-width: ${({ sizeVar }) => getModalWidthFromSize(sizeVar)}px;
|
|
660
|
+
height: 100%;
|
|
653
661
|
box-sizing: border-box;
|
|
654
662
|
padding: 0 24px;
|
|
655
|
-
overflow: hidden;
|
|
656
663
|
background: ${exports.colorTokens.neutral0};
|
|
657
664
|
`;
|
|
658
665
|
var FooterContainer = styled5__default.default.div`
|
|
@@ -718,6 +725,11 @@ var ModalFooter = ({ children }) => {
|
|
|
718
725
|
};
|
|
719
726
|
ModalFooter[exports.MODAL_FOOTER_KEY] = true;
|
|
720
727
|
var ModalFooter_default = ModalFooter;
|
|
728
|
+
var ScrollArea = (_a) => {
|
|
729
|
+
var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
|
|
730
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Scrollbars__default.default, __spreadProps(__spreadValues({ autoHide: true, autoHideTimeout: 1e3, autoHideDuration: 200 }, rest), { "data-shoplflow": "ScrollArea", children }));
|
|
731
|
+
};
|
|
732
|
+
exports.ScrollArea = ScrollArea;
|
|
721
733
|
var ModalBody = ({
|
|
722
734
|
children,
|
|
723
735
|
isIncludeHeader = false,
|
|
@@ -752,20 +764,18 @@ var ModalBody = ({
|
|
|
752
764
|
const heightUnderMaxHeight = windowHeight - topBottomMargin - headerFooterHeight;
|
|
753
765
|
const heightOverMaxHeight = 1200 - topBottomMargin - headerFooterHeight;
|
|
754
766
|
return /* @__PURE__ */ jsxRuntime.jsx(BodyContainer, { isIncludeHeader, height: setAutoHeightMin(), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
755
|
-
|
|
767
|
+
exports.ScrollArea,
|
|
756
768
|
{
|
|
757
769
|
id: `scrollbar`,
|
|
770
|
+
universal: true,
|
|
758
771
|
autoHeight: !modalContainerHeight,
|
|
759
772
|
autoHeightMin: setAutoHeightMin(),
|
|
760
773
|
autoHeightMax: windowHeight > 1200 ? heightOverMaxHeight : heightUnderMaxHeight,
|
|
761
|
-
autoHide: true,
|
|
762
|
-
autoHideTimeout: 1e3,
|
|
763
|
-
autoHideDuration: 200,
|
|
764
774
|
style: {
|
|
765
775
|
height: "100%",
|
|
766
776
|
overflow: "hidden"
|
|
767
777
|
},
|
|
768
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContent, { isIncludeHeader, sizeVar, children })
|
|
778
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContainerInner, { children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContent, { isIncludeHeader, sizeVar, children }) })
|
|
769
779
|
}
|
|
770
780
|
) });
|
|
771
781
|
};
|