@shoplflow/base 0.42.18 → 0.42.20

package/dist/index.cjs

@@ -753,8 +753,8 @@ var getModalWidthFromSize = (size2) => {
       return MODAL_SIZE_M;
   }
 };
-var getModalBodyTopBottomPadding = (isIncludeHeader, sizeVar) => {
-  if (sizeVar === "FULL") {
+var getModalBodyTopBottomPadding = (isIncludeHeader, sizeVar, padding) => {
+  if (sizeVar === "FULL" || padding) {
     return react$1.css`
       padding-top: 0;
       padding-bottom: 0;
@@ -792,6 +792,9 @@ var checkMaxHeight = (height, viewport) => {
   return height - topBottomMargin;
 };
 var Container = styled6__default.default.div`
+  transition:
+    width 0.3s ease-in-out,
+    max-width 0.3s ease-in-out;
   display: flex;
   flex-direction: column;
   border-radius: ${exports.borderRadiusTokens.borderRadius08};
@@ -831,7 +834,7 @@ var BodyContainer = styled6__default.default.div`
   min-height: ${({ minHeight }) => minHeight}px;
   max-height: ${({ maxHeight }) => maxHeight}px;
   flex: 1;
-  ${({ isIncludeHeader, sizeVar }) => getModalBodyTopBottomPadding(isIncludeHeader, sizeVar)};
+  ${({ isIncludeHeader, sizeVar, padding }) => getModalBodyTopBottomPadding(isIncludeHeader, sizeVar, padding)};
 `;
 var ModalBodyContainerInner = styled6__default.default.div`
   display: grid;
@@ -847,7 +850,7 @@ var ModalBodyContent = styled6__default.default.div`
   flex-direction: column;
   height: 100%;
   box-sizing: border-box;
-  padding: 0 24px;
+  padding: ${({ padding }) => padding || "0 24px"};
   ${({ sizeVar }) => sizeVar === "FULL" && react$1.css`
       padding: 0;
     `};
@@ -997,7 +1000,8 @@ var ModalBody = ({
   isIncludeHeader = false,
   isIncludeFooter = false,
   sizeVar,
-  height: modalContainerHeight
+  height: modalContainerHeight,
+  padding
 }) => {
   const { height: windowHeight } = useViewportSizeObserver();
   const { heightToDeduct } = useModalOption();
@@ -1055,11 +1059,13 @@ var ModalBody = ({
   };
   const setContentHeightMax = () => {
     let autoHeightMax = setAutoHeightMax();
-    autoHeightMax = autoHeightMax - 24;
+    if (padding) {
+      return autoHeightMax;
+    }
     if (isIncludeHeader) {
       autoHeightMax = autoHeightMax - 24;
     }
-    if (!isIncludeHeader) {
+    if (isIncludeFooter) {
       autoHeightMax = autoHeightMax - 16;
     }
     return autoHeightMax;
@@ -1073,6 +1079,7 @@ var ModalBody = ({
       sizeVar,
       minHeight: _autoHeightMin,
       maxHeight: setAutoHeightMax() - heightToDeduct,
+      padding,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         exports.ScrollArea,
         {
@@ -1082,7 +1089,7 @@ var ModalBody = ({
           autoHeightMin: _autoHeightMin,
           autoHeightMax: setContentHeightMax() - heightToDeduct,
           style: {},
-          children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContainerInner, { children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContent, { isIncludeHeader, sizeVar, children }) })
+          children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContainerInner, { children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContent, { isIncludeHeader, sizeVar, padding, children }) })
         }
       )
     }
@@ -3609,7 +3616,7 @@ exports.TreeItem = (_a) => {
             children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.RightArrowSolidXsmallIcon, sizeVar: "XS", color: "neutral400" })
           }
         ) }),
-        isLastTree && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "24px", height: "24px", visibility: "hidden" } }),
+        isLastTree && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "24px", height: "24px", visibility: "hidden", flexShrink: 0 } }),
         LeftSourceClone && LeftSourceClone,
         /* @__PURE__ */ jsxRuntime.jsx(exports.StackContainer, { padding: "0 0 0 4px", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", wordBreak: "break-all", color: disabled ? "neutral350" : "neutral700", children: label }) })
       ] }),

package/dist/index.d.cts

@@ -502,6 +502,7 @@ interface ModalBodyOptionProps {
     isIncludeFooter?: boolean;
     height?: number;
     sizeVar?: ModalSizeType;
+    padding?: CSSProperties['padding'];
 }
 interface ModalFooterProps extends ModalFooterOptionProps, ChildrenProps {
 }
@@ -549,7 +550,7 @@ declare const Modal: {
     Container: ({ children, height, outsideClick, ...rest }: ModalContainerProps) => react_jsx_runtime.JSX.Element;
     Header: ModalHeaderType;
     Top: ({ children }: ModalTopProps) => react_jsx_runtime.JSX.Element;
-    Body: ({ children, isIncludeHeader, isIncludeFooter, sizeVar, height: modalContainerHeight, }: ModalBodyProps) => react_jsx_runtime.JSX.Element;
+    Body: ({ children, isIncludeHeader, isIncludeFooter, sizeVar, height: modalContainerHeight, padding, }: ModalBodyProps) => react_jsx_runtime.JSX.Element;
     Bottom: ({ children }: ModalBottomProps) => react_jsx_runtime.JSX.Element;
     Footer: ModalFooterType;
 };

package/dist/index.d.ts

@@ -502,6 +502,7 @@ interface ModalBodyOptionProps {
     isIncludeFooter?: boolean;
     height?: number;
     sizeVar?: ModalSizeType;
+    padding?: CSSProperties['padding'];
 }
 interface ModalFooterProps extends ModalFooterOptionProps, ChildrenProps {
 }
@@ -549,7 +550,7 @@ declare const Modal: {
     Container: ({ children, height, outsideClick, ...rest }: ModalContainerProps) => react_jsx_runtime.JSX.Element;
     Header: ModalHeaderType;
     Top: ({ children }: ModalTopProps) => react_jsx_runtime.JSX.Element;
-    Body: ({ children, isIncludeHeader, isIncludeFooter, sizeVar, height: modalContainerHeight, }: ModalBodyProps) => react_jsx_runtime.JSX.Element;
+    Body: ({ children, isIncludeHeader, isIncludeFooter, sizeVar, height: modalContainerHeight, padding, }: ModalBodyProps) => react_jsx_runtime.JSX.Element;
     Bottom: ({ children }: ModalBottomProps) => react_jsx_runtime.JSX.Element;
     Footer: ModalFooterType;
 };

package/dist/index.js

@@ -726,8 +726,8 @@ var getModalWidthFromSize = (size2) => {
       return MODAL_SIZE_M;
   }
 };
-var getModalBodyTopBottomPadding = (isIncludeHeader, sizeVar) => {
-  if (sizeVar === "FULL") {
+var getModalBodyTopBottomPadding = (isIncludeHeader, sizeVar, padding) => {
+  if (sizeVar === "FULL" || padding) {
     return css`
       padding-top: 0;
       padding-bottom: 0;
@@ -765,6 +765,9 @@ var checkMaxHeight = (height, viewport) => {
   return height - topBottomMargin;
 };
 var Container = styled6.div`
+  transition:
+    width 0.3s ease-in-out,
+    max-width 0.3s ease-in-out;
   display: flex;
   flex-direction: column;
   border-radius: ${borderRadiusTokens.borderRadius08};
@@ -804,7 +807,7 @@ var BodyContainer = styled6.div`
   min-height: ${({ minHeight }) => minHeight}px;
   max-height: ${({ maxHeight }) => maxHeight}px;
   flex: 1;
-  ${({ isIncludeHeader, sizeVar }) => getModalBodyTopBottomPadding(isIncludeHeader, sizeVar)};
+  ${({ isIncludeHeader, sizeVar, padding }) => getModalBodyTopBottomPadding(isIncludeHeader, sizeVar, padding)};
 `;
 var ModalBodyContainerInner = styled6.div`
   display: grid;
@@ -820,7 +823,7 @@ var ModalBodyContent = styled6.div`
   flex-direction: column;
   height: 100%;
   box-sizing: border-box;
-  padding: 0 24px;
+  padding: ${({ padding }) => padding || "0 24px"};
   ${({ sizeVar }) => sizeVar === "FULL" && css`
       padding: 0;
     `};
@@ -970,7 +973,8 @@ var ModalBody = ({
   isIncludeHeader = false,
   isIncludeFooter = false,
   sizeVar,
-  height: modalContainerHeight
+  height: modalContainerHeight,
+  padding
 }) => {
   const { height: windowHeight } = useViewportSizeObserver();
   const { heightToDeduct } = useModalOption();
@@ -1028,11 +1032,13 @@ var ModalBody = ({
   };
   const setContentHeightMax = () => {
     let autoHeightMax = setAutoHeightMax();
-    autoHeightMax = autoHeightMax - 24;
+    if (padding) {
+      return autoHeightMax;
+    }
     if (isIncludeHeader) {
       autoHeightMax = autoHeightMax - 24;
     }
-    if (!isIncludeHeader) {
+    if (isIncludeFooter) {
       autoHeightMax = autoHeightMax - 16;
     }
     return autoHeightMax;
@@ -1046,6 +1052,7 @@ var ModalBody = ({
       sizeVar,
       minHeight: _autoHeightMin,
       maxHeight: setAutoHeightMax() - heightToDeduct,
+      padding,
       children: /* @__PURE__ */ jsx(
         ScrollArea_default,
         {
@@ -1055,7 +1062,7 @@ var ModalBody = ({
           autoHeightMin: _autoHeightMin,
           autoHeightMax: setContentHeightMax() - heightToDeduct,
           style: {},
-          children: /* @__PURE__ */ jsx(ModalBodyContainerInner, { children: /* @__PURE__ */ jsx(ModalBodyContent, { isIncludeHeader, sizeVar, children }) })
+          children: /* @__PURE__ */ jsx(ModalBodyContainerInner, { children: /* @__PURE__ */ jsx(ModalBodyContent, { isIncludeHeader, sizeVar, padding, children }) })
         }
       )
     }
@@ -3582,7 +3589,7 @@ var TreeItem = (_a) => {
             children: /* @__PURE__ */ jsx(Icon_default, { iconSource: RightArrowSolidXsmallIcon, sizeVar: "XS", color: "neutral400" })
           }
         ) }),
-        isLastTree && /* @__PURE__ */ jsx("div", { style: { width: "24px", height: "24px", visibility: "hidden" } }),
+        isLastTree && /* @__PURE__ */ jsx("div", { style: { width: "24px", height: "24px", visibility: "hidden", flexShrink: 0 } }),
         LeftSourceClone && LeftSourceClone,
         /* @__PURE__ */ jsx(StackContainer_default, { padding: "0 0 0 4px", children: /* @__PURE__ */ jsx(Text_default, { typography: "body1_400", wordBreak: "break-all", color: disabled ? "neutral350" : "neutral700", children: label }) })
       ] }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.42.18",
+  "version": "0.42.20",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -91,7 +91,7 @@
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
     "@shoplflow/hada-assets": "^0.1.8",
-    "@shoplflow/shopl-assets": "^0.12.23",
+    "@shoplflow/shopl-assets": "^0.12.24",
     "@shoplflow/utils": "^0.7.0"
   },
   "scripts": {