@shoplflow/base 0.26.0 → 0.26.3

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ElementType, ComponentPropsWithoutRef, ReactNode, ReactElement, ImgHTMLAttributes, ComponentPropsWithRef, CSSProperties, HTMLAttributes, InputHTMLAttributes, MouseEvent, Ref } from 'react';
+import React__default, { ElementType, ComponentPropsWithoutRef, ReactNode, ReactElement, ImgHTMLAttributes, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, CSSProperties, HTMLAttributes, ComponentPropsWithRef, InputHTMLAttributes, MouseEvent, Ref } from 'react';
 import { $Values } from '@shoplflow/utils';
 import { IconSource } from '@shoplflow/shopl-assets';
 import { IconSource as IconSource$1 } from '@shoplflow/hada-assets';
@@ -279,7 +279,7 @@ interface AvatarOptionProps extends SizeVariantProps<AvatarSizeVariantType>, Img
 declare const Avatar: ({ src, badge, ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
 
 declare type StackGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackProps & HTMLPropsWithoutRef<T>;
-declare type StackComponentType = <T extends StringElementType = 'div'>(props: StackGenericProps<T> & Pick<ComponentPropsWithRef<T>, 'ref'>) => ReactElement | null;
+declare type StackComponentType = ForwardRefExoticComponent<PropsWithoutRef<StackGenericProps> & RefAttributes<HTMLElement>>;
 declare type MotionStackComponentType<T extends StringElementType = 'div'> = CustomDomComponent<RenderConfigProps & HTMLPropsWithoutRef<T> & StackProps>;
 interface StackProps extends StackOptionProps, ChildrenProps {
 }
@@ -350,7 +350,7 @@ declare const StyledStack: _emotion_styled.StyledComponent<{
 } & StackOptionProps, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
 declare type StackContainerGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackContainerProps & HTMLPropsWithoutRef<T>;
-declare type StackContainerComponentType = <T extends StringElementType = 'div'>(props: StackContainerGenericProps<T> & Pick<ComponentPropsWithRef<T>, 'ref'>) => ReactElement | null;
+declare type StackContainerComponentType = ForwardRefExoticComponent<PropsWithoutRef<StackContainerGenericProps> & RefAttributes<HTMLElement>>;
 declare type MotionStackContainerComponentType<T extends StringElementType = 'div'> = CustomDomComponent<RenderConfigProps & HTMLPropsWithoutRef<T> & StackContainerProps>;
 interface StackContainerProps extends StackContainerOptionProps, ChildrenProps {
 }

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ElementType, ComponentPropsWithoutRef, ReactNode, ReactElement, ImgHTMLAttributes, ComponentPropsWithRef, CSSProperties, HTMLAttributes, InputHTMLAttributes, MouseEvent, Ref } from 'react';
+import React__default, { ElementType, ComponentPropsWithoutRef, ReactNode, ReactElement, ImgHTMLAttributes, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, CSSProperties, HTMLAttributes, ComponentPropsWithRef, InputHTMLAttributes, MouseEvent, Ref } from 'react';
 import { $Values } from '@shoplflow/utils';
 import { IconSource } from '@shoplflow/shopl-assets';
 import { IconSource as IconSource$1 } from '@shoplflow/hada-assets';
@@ -279,7 +279,7 @@ interface AvatarOptionProps extends SizeVariantProps<AvatarSizeVariantType>, Img
 declare const Avatar: ({ src, badge, ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
 
 declare type StackGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackProps & HTMLPropsWithoutRef<T>;
-declare type StackComponentType = <T extends StringElementType = 'div'>(props: StackGenericProps<T> & Pick<ComponentPropsWithRef<T>, 'ref'>) => ReactElement | null;
+declare type StackComponentType = ForwardRefExoticComponent<PropsWithoutRef<StackGenericProps> & RefAttributes<HTMLElement>>;
 declare type MotionStackComponentType<T extends StringElementType = 'div'> = CustomDomComponent<RenderConfigProps & HTMLPropsWithoutRef<T> & StackProps>;
 interface StackProps extends StackOptionProps, ChildrenProps {
 }
@@ -350,7 +350,7 @@ declare const StyledStack: _emotion_styled.StyledComponent<{
 } & StackOptionProps, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
 declare type StackContainerGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackContainerProps & HTMLPropsWithoutRef<T>;
-declare type StackContainerComponentType = <T extends StringElementType = 'div'>(props: StackContainerGenericProps<T> & Pick<ComponentPropsWithRef<T>, 'ref'>) => ReactElement | null;
+declare type StackContainerComponentType = ForwardRefExoticComponent<PropsWithoutRef<StackContainerGenericProps> & RefAttributes<HTMLElement>>;
 declare type MotionStackContainerComponentType<T extends StringElementType = 'div'> = CustomDomComponent<RenderConfigProps & HTMLPropsWithoutRef<T> & StackContainerProps>;
 interface StackContainerProps extends StackContainerOptionProps, ChildrenProps {
 }

package/dist/index.js

@@ -589,7 +589,7 @@ var createStackComponent2 = (stackOption) => forwardRef(function Stack2(_j, ref)
       margin,
       padding
     }, rest), {
-      "data-shoplflow": "Stack",
+      "data-shoplflow": "StackContainer",
       children: rest.children
     })
   );
@@ -698,13 +698,19 @@ var getModalWidthFromSize = (size2) => {
       return MODAL_SIZE_M;
   }
 };
-var getModalBodyTopBottomPadding = (isIncludeHeader) => {
+var getModalBodyTopBottomPadding = (isIncludeHeader, sizeVar) => {
   if (isIncludeHeader) {
     return css`
       padding-top: 16px;
       padding-bottom: 24px;
     `;
   }
+  if (sizeVar === "FULL") {
+    return css`
+      padding-top: 0;
+      padding-bottom: 0;
+    `;
+  }
   return css`
     padding-top: 24px;
     padding-bottom: 24px;
@@ -767,10 +773,10 @@ var BodyContainer = styled6.div`
   flex-direction: column;
   background: ${colorTokens.neutral0};
   box-sizing: border-box;
-  min-height: ${({ minHeight }) => minHeight};
+  min-height: ${({ minHeight }) => minHeight}px;
   max-height: ${({ maxHeight }) => maxHeight}px;
   flex: 1;
-  ${({ isIncludeHeader }) => getModalBodyTopBottomPadding(isIncludeHeader)}
+  ${({ isIncludeHeader, sizeVar }) => getModalBodyTopBottomPadding(isIncludeHeader, sizeVar)}
 `;
 var ModalBodyContainerInner = styled6.div`
   display: grid;
@@ -787,6 +793,9 @@ var ModalBodyContent = styled6.div`
   height: 100%;
   box-sizing: border-box;
   padding: 0 24px;
+  ${({ sizeVar }) => sizeVar === "FULL" && css`
+      padding: 0;
+    `};
   background: ${colorTokens.neutral0};
 `;
 var FooterContainer = styled6.div`
@@ -922,6 +931,9 @@ var ModalBody = ({
   }, [isIncludeFooter, isIncludeHeader]);
   const headerFooterHeight = useMemo(() => getHeaderFooterHeight(), [getHeaderFooterHeight]);
   const setAutoHeightMin = () => {
+    if (sizeVar === "FULL") {
+      return windowHeight - topBottomMargin - headerFooterHeight;
+    }
     if (modalContainerHeight) {
       if (modalContainerHeight <= 1200) {
         if (windowHeight < modalContainerHeight) {
@@ -935,10 +947,10 @@ var ModalBody = ({
     }
   };
   const setAutoHeightMax = () => {
+    if (sizeVar === "FULL") {
+      return windowHeight;
+    }
     if (modalContainerHeight) {
-      if (sizeVar === "FULL") {
-        return windowHeight;
-      }
       if (modalContainerHeight > 1200) {
         return 1200 - topBottomMargin - headerFooterHeight;
       }
@@ -967,21 +979,30 @@ var ModalBody = ({
     }
     return autoHeightMax;
   };
-  return /* @__PURE__ */ jsx(BodyContainer, { isIncludeHeader, minHeight: setAutoHeightMin(), maxHeight: setAutoHeightMax(), children: /* @__PURE__ */ jsx(
-    ScrollArea_default,
+  return /* @__PURE__ */ jsx(
+    BodyContainer,
     {
-      id: `scrollbar`,
-      universal: true,
-      autoHeight: !modalContainerHeight,
-      autoHeightMin: setAutoHeightMin(),
-      autoHeightMax: setContentHeightMax(),
-      style: {
-        height: "100%",
-        overflow: "hidden"
-      },
-      children: /* @__PURE__ */ jsx(ModalBodyContainerInner, { children: /* @__PURE__ */ jsx(ModalBodyContent, { isIncludeHeader, sizeVar, children }) })
+      isIncludeHeader,
+      sizeVar,
+      minHeight: setAutoHeightMin(),
+      maxHeight: setAutoHeightMax(),
+      children: /* @__PURE__ */ jsx(
+        ScrollArea_default,
+        {
+          id: `scrollbar`,
+          universal: true,
+          autoHeight: !modalContainerHeight,
+          autoHeightMin: setAutoHeightMin(),
+          autoHeightMax: setContentHeightMax(),
+          style: {
+            height: "100%",
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */ jsx(ModalBodyContainerInner, { children: /* @__PURE__ */ jsx(ModalBodyContent, { isIncludeHeader, sizeVar, children }) })
+        }
+      )
     }
-  ) });
+  );
 };
 var ModalBody_default = ModalBody;
 var ModalHeader = ({ children }) => {